diff --git a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx index c9a3f8a0b..cef9f2786 100644 --- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx +++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx @@ -12,13 +12,14 @@ import { MailOpenIcon, PenIcon, PlusIcon, + Timer, } from 'lucide-react'; import { match } from 'ts-pattern'; import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles'; import { formatSigningLink } from '@documenso/lib/utils/recipients'; -import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client'; import type { Document, Recipient } from '@documenso/prisma/client'; +import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client'; import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button'; import { SignatureIcon } from '@documenso/ui/icons/signature'; import { AvatarWithText } from '@documenso/ui/primitives/avatar'; @@ -132,6 +133,14 @@ export const DocumentPageViewRecipients = ({ )} + {document.status !== DocumentStatus.DRAFT && + recipient.signingStatus === SigningStatus.EXPIRED && ( + + + Expired + + )} + {document.status !== DocumentStatus.DRAFT && recipient.signingStatus === SigningStatus.REJECTED && ( -

+

{match(document.status) .with(DocumentStatus.COMPLETED, () => ( This document has been signed by all recipients @@ -228,8 +227,52 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) )) .with(DocumentStatus.PENDING, () => { const pendingRecipients = recipients.filter( - (recipient) => recipient.signingStatus === 'NOT_SIGNED', + (recipient) => recipient.signingStatus === SigningStatus.NOT_SIGNED, ); + const rejectedCount = recipients.filter( + (recipient) => recipient.signingStatus === SigningStatus.REJECTED, + ).length; + const expiredCount = recipients.filter( + (recipient) => recipient.signingStatus === SigningStatus.EXPIRED, + ).length; + + if (rejectedCount > 0 && expiredCount > 0) { + return ( + <> + + {' and '} + + + ); + } + + if (rejectedCount > 0) { + return ( + + ); + } + + if (expiredCount > 0) { + return ( + + ); + } return (

- +

Document Expired

diff --git a/apps/web/src/components/document/document-read-only-fields.tsx b/apps/web/src/components/document/document-read-only-fields.tsx index 0b9550a8c..8b44db26a 100644 --- a/apps/web/src/components/document/document-read-only-fields.tsx +++ b/apps/web/src/components/document/document-read-only-fields.tsx @@ -4,7 +4,7 @@ import { useState } from 'react'; import { Trans } from '@lingui/macro'; import { useLingui } from '@lingui/react'; -import { Clock, EyeOffIcon } from 'lucide-react'; +import { AlertTriangle, Clock, EyeOffIcon, Timer } from 'lucide-react'; import { P, match } from 'ts-pattern'; import { @@ -75,6 +75,9 @@ export const DocumentReadOnlyFields = ({ variant={ field.Recipient.signingStatus === SigningStatus.SIGNED ? 'default' + : field.Recipient.signingStatus === SigningStatus.REJECTED || + field.Recipient.signingStatus === SigningStatus.EXPIRED + ? 'destructive' : 'secondary' } > @@ -83,6 +86,16 @@ export const DocumentReadOnlyFields = ({ Signed + ) : field.Recipient.signingStatus === SigningStatus.REJECTED ? ( + <> + + Rejected + + ) : field.Recipient.signingStatus === SigningStatus.EXPIRED ? ( + <> + + Expired + ) : ( <>