Remove useless card

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2026-03-25 08:19:28 +01:00
parent 535d5e99d0
commit 81a4ec7c6e
2 changed files with 128 additions and 132 deletions

View File

@@ -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>
);
}

View File

@@ -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>
);
}