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