diff --git a/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx b/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx index 960a305a6..c60c49ae4 100644 --- a/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx +++ b/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx @@ -9,14 +9,14 @@ import { Tbody, Th, IconChevronDown, - IconCheckmark1, - IconCrossLargeX, Badge, + Field, + Option, } from "@probo/ui"; import { useTranslate } from "@probo/i18n"; import { useFragment } from "react-relay"; -import { useMemo, useState } from "react"; -import { sprintf, getAuditStateVariant, getAuditStateLabel, formatDate } from "@probo/helpers"; +import { useMemo, useState, useCallback, useEffect } from "react"; +import { sprintf, getAuditStateVariant, getAuditStateLabel, formatDate, getTrustCenterVisibilityOptions } from "@probo/helpers"; import { useOrganizationId } from "/hooks/useOrganizationId"; import clsx from "clsx"; import type { TrustCenterAuditsCardFragment$key } from "./__generated__/TrustCenterAuditsCardFragment.graphql"; @@ -31,7 +31,7 @@ const trustCenterAuditFragment = graphql` validFrom validUntil state - showOnTrustCenter + trustCenterVisibility createdAt } `; @@ -40,7 +40,7 @@ type Mutation = (p: { variables: { input: { id: string; - showOnTrustCenter: boolean; + trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC"; } & Params; }; }) => void; @@ -49,7 +49,7 @@ type Props = { audits: TrustCenterAuditsCardFragment$key[]; params: Params; disabled?: boolean; - onToggleVisibility: Mutation; + onChangeVisibility: Mutation; variant?: "card" | "table"; }; @@ -62,12 +62,12 @@ export function TrustCenterAuditsCard(props: Props) { const showMoreButton = limit !== null && props.audits.length > limit; const variant = props.variant ?? "table"; - const onToggleVisibility = (auditId: string, showOnTrustCenter: boolean) => { - props.onToggleVisibility({ + const onChangeVisibility = (auditId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => { + props.onChangeVisibility({ variables: { input: { id: auditId, - showOnTrustCenter, + trustCenterVisibility, ...props.params, }, }, @@ -86,7 +86,6 @@ export function TrustCenterAuditsCard(props: Props) { {__("Valid Until")} {__("State")} {__("Visibility")} - @@ -101,7 +100,7 @@ export function TrustCenterAuditsCard(props: Props) { ))} @@ -123,12 +122,30 @@ export function TrustCenterAuditsCard(props: Props) { function AuditRow(props: { audit: TrustCenterAuditsCardFragment$key; - onToggleVisibility: (auditId: string, showOnTrustCenter: boolean) => void; + onChangeVisibility: (auditId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => void; disabled?: boolean; }) { const audit = useFragment(trustCenterAuditFragment, props.audit); const organizationId = useOrganizationId(); const { __ } = useTranslate(); + const [optimisticValue, setOptimisticValue] = useState(null); + + const handleValueChange = useCallback((value: string | {}) => { + const stringValue = typeof value === 'string' ? value : ''; + const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC"; + setOptimisticValue(typedValue); + props.onChangeVisibility(audit.id, typedValue); + }, [audit.id, props.onChangeVisibility]); + + useEffect(() => { + if (optimisticValue && audit.trustCenterVisibility === optimisticValue) { + setOptimisticValue(null); + } + }, [audit.trustCenterVisibility, optimisticValue]); + + const currentValue = optimisticValue || audit.trustCenterVisibility; + + const visibilityOptions = getTrustCenterVisibilityOptions(__); const validUntilFormatted = audit.validUntil ? formatDate(audit.validUntil) @@ -148,30 +165,24 @@ function AuditRow(props: { {getAuditStateLabel(__, audit.state)} - -
- {audit.showOnTrustCenter ? ( - <> - - {__("Visible")} - - ) : ( - <> - - {__("Hidden")} - - )} -
- - - + {visibilityOptions.map((option) => ( + + ))} + ); diff --git a/apps/console/src/components/trustCenter/TrustCenterDocumentDialog.tsx b/apps/console/src/components/trustCenter/TrustCenterDocumentDialog.tsx deleted file mode 100644 index 69e783833..000000000 --- a/apps/console/src/components/trustCenter/TrustCenterDocumentDialog.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useTranslate } from "@probo/i18n"; -import { - Dialog, - DialogContent, - DialogFooter, - Button, - useDialogRef, -} from "@probo/ui"; -import { type ReactNode } from "react"; -import { useFragment, graphql } from "react-relay"; -import type { TrustCenterDocumentsCardFragment$key } from "./__generated__/TrustCenterDocumentsCardFragment.graphql"; - -const trustCenterDocumentDialogFragment = graphql` - fragment TrustCenterDocumentDialogFragment on Document { - id - title - showOnTrustCenter - } -`; - -type Props = { - children: ReactNode; - documents: (TrustCenterDocumentsCardFragment$key & { id: string })[]; - onToggleVisibility: (documentId: string, showOnTrustCenter: boolean) => void; - disabled?: boolean; -}; - -export default function TrustCenterDocumentDialog({ - children, - documents, - onToggleVisibility, - disabled, -}: Props) { - const { __ } = useTranslate(); - const dialogRef = useDialogRef(); - - return ( - <> - !disabled && dialogRef.current?.open()}> - {children} - - - -
- {__("Manage Document Visibility on Trust Center")} -
-
-

- {__("Control which documents are visible on your public trust center.")} -

-
- {documents.map((documentKey) => ( - - ))} -
-
- - - -
-
- - ); -} - -function DocumentDialogRow({ - document: documentKey, - onToggleVisibility, - disabled, -}: { - document: TrustCenterDocumentsCardFragment$key & { id: string }; - onToggleVisibility: (documentId: string, showOnTrustCenter: boolean) => void; - disabled?: boolean; -}) { - const document = useFragment(trustCenterDocumentDialogFragment, documentKey); - const { __ } = useTranslate(); - - return ( -
-
-
{document.title}
-
- -
- ); -} diff --git a/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx b/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx index 97fc5cde3..7a21115a4 100644 --- a/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx +++ b/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx @@ -9,16 +9,17 @@ import { Tbody, Th, IconChevronDown, - IconCheckmark1, - IconCrossLargeX, DocumentVersionBadge, DocumentTypeBadge, + Field, + Option, + Badge, } from "@probo/ui"; import { useTranslate } from "@probo/i18n"; import type { TrustCenterDocumentsCardFragment$key } from "./__generated__/TrustCenterDocumentsCardFragment.graphql"; import { useFragment } from "react-relay"; -import { useMemo, useState } from "react"; -import { sprintf } from "@probo/helpers"; +import { useMemo, useState, useCallback, useEffect } from "react"; +import { sprintf, getTrustCenterVisibilityOptions } from "@probo/helpers"; import { useOrganizationId } from "/hooks/useOrganizationId"; import clsx from "clsx"; @@ -28,7 +29,7 @@ const trustCenterDocumentFragment = graphql` title createdAt documentType - showOnTrustCenter + trustCenterVisibility versions(first: 1) { edges { node { @@ -44,7 +45,7 @@ type Mutation = (p: { variables: { input: { id: string; - showOnTrustCenter: boolean; + trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC"; } & Params; }; }) => void; @@ -53,7 +54,7 @@ type Props = { documents: TrustCenterDocumentsCardFragment$key[]; params: Params; disabled?: boolean; - onToggleVisibility: Mutation; + onChangeVisibility: Mutation; variant?: "card" | "table"; }; @@ -66,12 +67,12 @@ export function TrustCenterDocumentsCard(props: Props) { const showMoreButton = limit !== null && props.documents.length > limit; const variant = props.variant ?? "table"; - const onToggleVisibility = (documentId: string, showOnTrustCenter: boolean) => { - props.onToggleVisibility({ + const onChangeVisibility = (documentId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => { + props.onChangeVisibility({ variables: { input: { id: documentId, - showOnTrustCenter, + trustCenterVisibility, ...props.params, }, }, @@ -89,7 +90,6 @@ export function TrustCenterDocumentsCard(props: Props) { {__("Type")} {__("State")} {__("Visibility")} - @@ -104,7 +104,7 @@ export function TrustCenterDocumentsCard(props: Props) { ))} @@ -127,12 +127,30 @@ export function TrustCenterDocumentsCard(props: Props) { function DocumentRow(props: { document: TrustCenterDocumentsCardFragment$key; - onToggleVisibility: (documentId: string, showOnTrustCenter: boolean) => void; + onChangeVisibility: (documentId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => void; disabled?: boolean; }) { const document = useFragment(trustCenterDocumentFragment, props.document); const organizationId = useOrganizationId(); const { __ } = useTranslate(); + const [optimisticValue, setOptimisticValue] = useState(null); + + const handleValueChange = useCallback((value: string | {}) => { + const stringValue = typeof value === 'string' ? value : ''; + const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC"; + setOptimisticValue(typedValue); + props.onChangeVisibility(document.id, typedValue); + }, [document.id, props.onChangeVisibility]); + + useEffect(() => { + if (optimisticValue && document.trustCenterVisibility === optimisticValue) { + setOptimisticValue(null); + } + }, [document.trustCenterVisibility, optimisticValue]); + + const currentValue = optimisticValue || document.trustCenterVisibility; + + const visibilityOptions = getTrustCenterVisibilityOptions(__); return ( @@ -147,30 +165,24 @@ function DocumentRow(props: { - -
- {document.showOnTrustCenter ? ( - <> - - {__("Visible")} - - ) : ( - <> - - {__("Hidden")} - - )} -
- - - + {visibilityOptions.map((option) => ( + + ))} + ); diff --git a/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx b/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx index 5384e2856..370fa9960 100644 --- a/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx +++ b/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx @@ -137,19 +137,9 @@ function VendorRow(props: { -
- {vendor.showOnTrustCenter ? ( - <> - - {__("Visible")} - - ) : ( - <> - - {__("Hidden")} - - )} -
+ + {vendor.showOnTrustCenter ? __("Visible") : __("None")} +