@@ -1,5 +1,5 @@
|
|||||||
import { useTranslate } from "@probo/i18n";
|
import { useTranslate } from "@probo/i18n";
|
||||||
import { Button, Card, Dropzone, IconTrashCan, Spinner, useToast } from "@probo/ui";
|
import { Button, Dropzone, IconTrashCan, Spinner, useToast } from "@probo/ui";
|
||||||
import { useFragment } from "react-relay";
|
import { useFragment } from "react-relay";
|
||||||
import { graphql } from "relay-runtime";
|
import { graphql } from "relay-runtime";
|
||||||
|
|
||||||
@@ -88,88 +88,86 @@ export function CompliancePageNDASection(props: { fragmentRef: CompliancePageNDA
|
|||||||
</h2>
|
</h2>
|
||||||
{(isUploadingNDA || isDeletingNDA) && <Spinner />}
|
{(isUploadingNDA || isDeletingNDA) && <Spinner />}
|
||||||
</div>
|
</div>
|
||||||
<Card padded className="space-y-4">
|
<div className="space-y-2">
|
||||||
<div className="space-y-2">
|
{!organization.compliancePage?.ndaFileName
|
||||||
{!organization.compliancePage?.ndaFileName
|
&& organization.compliancePage?.canUploadNDA
|
||||||
&& organization.compliancePage?.canUploadNDA
|
? (
|
||||||
? (
|
<p className="text-sm text-txt-tertiary">
|
||||||
<p className="text-sm text-txt-tertiary">
|
{__(
|
||||||
{__(
|
"Upload a Non-Disclosure Agreement that visitors must accept before accessing your compliance page",
|
||||||
"Upload a Non-Disclosure Agreement that visitors must accept before accessing your compliance page",
|
)}
|
||||||
)}
|
</p>
|
||||||
</p>
|
)
|
||||||
)
|
: (
|
||||||
: (
|
<></>
|
||||||
<></>
|
)}
|
||||||
)}
|
{organization.compliancePage?.ndaFileName
|
||||||
{organization.compliancePage?.ndaFileName
|
? (
|
||||||
? (
|
<div className="space-y-3">
|
||||||
<div className="space-y-3">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center justify-between">
|
<div className="space-y-1">
|
||||||
<div className="space-y-1">
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<p className="text-sm font-medium">
|
||||||
<p className="text-sm font-medium">
|
{organization.compliancePage.ndaFileName
|
||||||
{organization.compliancePage.ndaFileName
|
|| __("Non-Disclosure Agreement")}
|
||||||
|| __("Non-Disclosure Agreement")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-txt-tertiary">
|
|
||||||
{__(
|
|
||||||
"Visitors will need to accept this NDA before accessing your compliance page",
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<p className="text-xs text-txt-tertiary">
|
||||||
<Button
|
{__(
|
||||||
type="button"
|
"Visitors will need to accept this NDA before accessing your compliance page",
|
||||||
variant="secondary"
|
|
||||||
onClick={() => {
|
|
||||||
if (organization.compliancePage?.ndaFileUrl) {
|
|
||||||
window.open(
|
|
||||||
organization.compliancePage.ndaFileUrl,
|
|
||||||
"_blank",
|
|
||||||
"noopener,noreferrer",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{__("Download PDF")}
|
|
||||||
</Button>
|
|
||||||
{organization.compliancePage?.canDeleteNDA && (
|
|
||||||
<Button
|
|
||||||
variant="quaternary"
|
|
||||||
icon={IconTrashCan}
|
|
||||||
onClick={() => void handleNDADelete()}
|
|
||||||
disabled={isDeletingNDA}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
if (organization.compliancePage?.ndaFileUrl) {
|
||||||
|
window.open(
|
||||||
|
organization.compliancePage.ndaFileUrl,
|
||||||
|
"_blank",
|
||||||
|
"noopener,noreferrer",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{__("Download PDF")}
|
||||||
|
</Button>
|
||||||
|
{organization.compliancePage?.canDeleteNDA && (
|
||||||
|
<Button
|
||||||
|
variant="quaternary"
|
||||||
|
icon={IconTrashCan}
|
||||||
|
onClick={() => void handleNDADelete()}
|
||||||
|
disabled={isDeletingNDA}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
: (
|
)
|
||||||
<>
|
: (
|
||||||
{organization.compliancePage?.canUploadNDA
|
<>
|
||||||
? (
|
{organization.compliancePage?.canUploadNDA
|
||||||
<Dropzone
|
? (
|
||||||
description={__("Upload PDF files up to 10MB")}
|
<Dropzone
|
||||||
isUploading={isUploadingNDA}
|
description={__("Upload PDF files up to 10MB")}
|
||||||
onDrop={files => void handleNDAUpload(files)}
|
isUploading={isUploadingNDA}
|
||||||
accept={{
|
onDrop={files => void handleNDAUpload(files)}
|
||||||
"application/pdf": [".pdf"],
|
accept={{
|
||||||
}}
|
"application/pdf": [".pdf"],
|
||||||
maxSize={10}
|
}}
|
||||||
/>
|
maxSize={10}
|
||||||
)
|
/>
|
||||||
: (
|
)
|
||||||
<p className="text-sm text-txt-tertiary">
|
: (
|
||||||
{__("No NDA file uploaded")}
|
<p className="text-sm text-txt-tertiary">
|
||||||
</p>
|
{__("No NDA file uploaded")}
|
||||||
)}
|
</p>
|
||||||
</>
|
)}
|
||||||
)}
|
</>
|
||||||
</div>
|
)}
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,60 +35,58 @@ export function CompliancePageSlackSection(props: { fragmentRef: CompliancePageS
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h2 className="text-base font-medium">{__("Integrations")}</h2>
|
<h2 className="text-base font-medium">{__("Integrations")}</h2>
|
||||||
<Card padded>
|
<div className="space-y-2">
|
||||||
<div className="space-y-2">
|
{organization.slackConnections.edges.map(({ node: slackConnection }) => (
|
||||||
{organization.slackConnections.edges.map(({ node: slackConnection }) => (
|
<Card
|
||||||
<Card
|
key={slackConnection.id}
|
||||||
key={slackConnection.id}
|
padded
|
||||||
padded
|
className="flex items-center gap-3"
|
||||||
className="flex items-center gap-3"
|
>
|
||||||
>
|
<div className="h-10 w-10 flex items-center justify-center bg-subtle rounded">
|
||||||
<div className="h-10 w-10 flex items-center justify-center bg-subtle rounded">
|
<Slack className="h-6 w-6" />
|
||||||
<Slack className="h-6 w-6" />
|
</div>
|
||||||
</div>
|
<div className="mr-auto">
|
||||||
<div className="mr-auto">
|
<h3 className="text-base font-semibold">Slack</h3>
|
||||||
<h3 className="text-base font-semibold">Slack</h3>
|
<p className="text-sm text-txt-tertiary">
|
||||||
<p className="text-sm text-txt-tertiary">
|
{sprintf(
|
||||||
{sprintf(
|
__("Connected on %s"),
|
||||||
__("Connected on %s"),
|
dateTimeFormat(slackConnection.createdAt),
|
||||||
dateTimeFormat(slackConnection.createdAt),
|
)}
|
||||||
)}
|
{slackConnection.channel && (
|
||||||
{slackConnection.channel && (
|
<>
|
||||||
<>
|
{" • "}
|
||||||
{" • "}
|
{sprintf(__("Channel: %s"), slackConnection.channel)}
|
||||||
{sprintf(__("Channel: %s"), slackConnection.channel)}
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<Badge variant="success" size="md">
|
||||||
<Badge variant="success" size="md">
|
{__("Connected")}
|
||||||
{__("Connected")}
|
</Badge>
|
||||||
</Badge>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</Card>
|
))}
|
||||||
))}
|
{organization.compliancePage?.canUpdate && organization.slackConnections.edges.length === 0 && (
|
||||||
{organization.compliancePage?.canUpdate && organization.slackConnections.edges.length === 0 && (
|
<Card
|
||||||
<Card
|
padded
|
||||||
padded
|
className="flex items-center gap-3"
|
||||||
className="flex items-center gap-3"
|
>
|
||||||
>
|
<div className="h-10 w-10 flex items-center justify-center bg-subtle rounded">
|
||||||
<div className="h-10 w-10 flex items-center justify-center bg-subtle rounded">
|
<Slack className="h-6 w-6" />
|
||||||
<Slack className="h-6 w-6" />
|
</div>
|
||||||
</div>
|
<div className="mr-auto">
|
||||||
<div className="mr-auto">
|
<h3 className="text-base font-semibold">Slack</h3>
|
||||||
<h3 className="text-base font-semibold">Slack</h3>
|
<p className="text-sm text-txt-tertiary">
|
||||||
<p className="text-sm text-txt-tertiary">
|
{__("Manage your compliance page access with slack")}
|
||||||
{__("Manage your compliance page access with slack")}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<Button variant="secondary" asChild>
|
||||||
<Button variant="secondary" asChild>
|
<a href={getSlackConnectionUrl(organizationId)}>{__("Connect")}</a>
|
||||||
<a href={getSlackConnectionUrl(organizationId)}>{__("Connect")}</a>
|
</Button>
|
||||||
</Button>
|
</Card>
|
||||||
</Card>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user