diff --git a/apps/remix/app/components/embed/embed-direct-template-client-page.tsx b/apps/remix/app/components/embed/embed-direct-template-client-page.tsx index 718f2cb32..2f2a47058 100644 --- a/apps/remix/app/components/embed/embed-direct-template-client-page.tsx +++ b/apps/remix/app/components/embed/embed-direct-template-client-page.tsx @@ -415,40 +415,42 @@ export const EmbedDirectTemplateClientPage = ({ /> -
- + {hasSignatureField && ( +
+ - - - { - setSignature(value); - }} - onValidityChange={(isValid) => { - setSignatureValid(isValid); - }} - allowTypedSignature={Boolean( - metadata && - 'typedSignatureEnabled' in metadata && - metadata.typedSignatureEnabled, - )} - /> - - + + + { + setSignature(value); + }} + onValidityChange={(isValid) => { + setSignatureValid(isValid); + }} + allowTypedSignature={Boolean( + metadata && + 'typedSignatureEnabled' in metadata && + metadata.typedSignatureEnabled, + )} + /> + + - {hasSignatureField && !signatureValid && ( -
- - Signature is too small. Please provide a more complete signature. - -
- )} -
+ {hasSignatureField && !signatureValid && ( +
+ + Signature is too small. Please provide a more complete signature. + +
+ )} +
+ )} diff --git a/apps/remix/app/components/embed/embed-document-signing-page.tsx b/apps/remix/app/components/embed/embed-document-signing-page.tsx index ee8814ef5..05b48fbb1 100644 --- a/apps/remix/app/components/embed/embed-document-signing-page.tsx +++ b/apps/remix/app/components/embed/embed-document-signing-page.tsx @@ -418,40 +418,42 @@ export const EmbedSignDocumentClientPage = ({ /> -
- + {hasSignatureField && ( +
+ - - - { - setSignature(value); - }} - onValidityChange={(isValid) => { - setSignatureValid(isValid); - }} - allowTypedSignature={Boolean( - metadata && - 'typedSignatureEnabled' in metadata && - metadata.typedSignatureEnabled, - )} - /> - - + + + { + setSignature(value); + }} + onValidityChange={(isValid) => { + setSignatureValid(isValid); + }} + allowTypedSignature={Boolean( + metadata && + 'typedSignatureEnabled' in metadata && + metadata.typedSignatureEnabled, + )} + /> + + - {hasSignatureField && !signatureValid && ( -
- - Signature is too small. Please provide a more complete signature. - -
- )} -
+ {hasSignatureField && !signatureValid && ( +
+ + Signature is too small. Please provide a more complete signature. + +
+ )} +
+ )} )} diff --git a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx index dbc655a0d..ee0350576 100644 --- a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx +++ b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx @@ -3,6 +3,7 @@ import { useMemo, useState } from 'react'; import { Trans } from '@lingui/react/macro'; import type { Field } from '@prisma/client'; import { RecipientRole } from '@prisma/client'; +import { match } from 'ts-pattern'; import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers'; import { Button } from '@documenso/ui/primitives/button'; @@ -58,62 +59,88 @@ export const DocumentSigningCompleteDialog = ({ loading={isSubmitting} disabled={disabled} > - {isComplete ? Complete : Next field} + {match({ isComplete, role }) + .with({ isComplete: false }, () => Next field) + .with({ isComplete: true, role: RecipientRole.APPROVER }, () => Approve) + .with({ isComplete: true, role: RecipientRole.VIEWER }, () => ( + Mark as viewed + )) + .with({ isComplete: true }, () => Complete) + .exhaustive()}
- {role === RecipientRole.VIEWER && Complete Viewing} - {role === RecipientRole.SIGNER && Complete Signing} - {role === RecipientRole.APPROVER && Complete Approval} + {match(role) + .with(RecipientRole.VIEWER, () => Complete Viewing) + .with(RecipientRole.SIGNER, () => Complete Signing) + .with(RecipientRole.APPROVER, () => Complete Approval) + .with(RecipientRole.CC, () => Complete Viewing) + .with(RecipientRole.ASSISTANT, () => Complete Assisting) + .exhaustive()}
- {role === RecipientRole.VIEWER && ( - - - - You are about to complete viewing " - - {documentTitle} + {match(role) + .with(RecipientRole.VIEWER, () => ( + + + + You are about to complete viewing " + + {documentTitle} + + ". - ". - -
Are you sure? -
-
- )} - {role === RecipientRole.SIGNER && ( - - - - You are about to complete signing " - - {documentTitle} +
Are you sure? +
+
+ )) + .with(RecipientRole.SIGNER, () => ( + + + + You are about to complete signing " + + {documentTitle} + + ". - ". - -
Are you sure? - - - )} - {role === RecipientRole.APPROVER && ( - - - - You are about to complete approving{' '} - - "{documentTitle}" +
Are you sure? +
+
+ )) + .with(RecipientRole.APPROVER, () => ( + + + + You are about to complete approving{' '} + + "{documentTitle}" + + . - . - -
Are you sure? - - - )} +
Are you sure? + + + )) + .otherwise(() => ( + + + + You are about to complete viewing " + + {documentTitle} + + ". + +
Are you sure? +
+
+ ))}
@@ -138,9 +165,13 @@ export const DocumentSigningCompleteDialog = ({ loading={isSubmitting} onClick={onSignatureComplete} > - {role === RecipientRole.VIEWER && Mark as Viewed} - {role === RecipientRole.SIGNER && Sign} - {role === RecipientRole.APPROVER && Approve} + {match(role) + .with(RecipientRole.VIEWER, () => Mark as Viewed) + .with(RecipientRole.SIGNER, () => Sign) + .with(RecipientRole.APPROVER, () => Approve) + .with(RecipientRole.CC, () => Mark as Viewed) + .with(RecipientRole.ASSISTANT, () => Complete) + .exhaustive()} diff --git a/apps/remix/app/components/general/document-signing/document-signing-form.tsx b/apps/remix/app/components/general/document-signing/document-signing-form.tsx index ef6847c34..a293afac8 100644 --- a/apps/remix/app/components/general/document-signing/document-signing-form.tsx +++ b/apps/remix/app/components/general/document-signing/document-signing-form.tsx @@ -313,7 +313,11 @@ export const DocumentSigningForm = ({ <>

- Please review the document before signing. + {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? ( + Please review the document before approving. + ) : ( + Please review the document before signing. + )}


@@ -337,38 +341,40 @@ export const DocumentSigningForm = ({ /> -
- + {hasSignatureField && ( +
+ - - - { - setSignatureValid(isValid); - }} - onChange={(value) => { - if (signatureValid) { - setSignature(value); - } - }} - allowTypedSignature={document.documentMeta?.typedSignatureEnabled} - /> - - + + + { + setSignatureValid(isValid); + }} + onChange={(value) => { + if (signatureValid) { + setSignature(value); + } + }} + allowTypedSignature={document.documentMeta?.typedSignatureEnabled} + /> + + - {hasSignatureField && !signatureValid && ( -
- - Signature is too small. Please provide a more complete signature. - -
- )} -
+ {!signatureValid && ( +
+ + Signature is too small. Please provide a more complete signature. + +
+ )} +
+ )}
diff --git a/packages/app-tests/e2e/document-flow/stepper-component.spec.ts b/packages/app-tests/e2e/document-flow/stepper-component.spec.ts index 1dd03aa76..94bb5320f 100644 --- a/packages/app-tests/e2e/document-flow/stepper-component.spec.ts +++ b/packages/app-tests/e2e/document-flow/stepper-component.spec.ts @@ -377,7 +377,9 @@ test('[DOCUMENT_FLOW]: should be able to approve a document', async ({ page }) = await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true'); } - await page.getByRole('button', { name: 'Complete' }).click(); + await page + .getByRole('button', { name: role === RecipientRole.SIGNER ? 'Complete' : 'Approve' }) + .click(); await page .getByRole('button', { name: role === RecipientRole.SIGNER ? 'Sign' : 'Approve' }) .click(); @@ -447,7 +449,7 @@ test('[DOCUMENT_FLOW]: should be able to create, send with redirect url, sign a const { status } = await getDocumentByToken(token); expect(status).toBe(DocumentStatus.PENDING); - await page.getByRole('button', { name: 'Complete' }).click(); + await page.getByRole('button', { name: 'Approve' }).click(); await expect(page.getByRole('dialog').getByText('Complete Approval').first()).toBeVisible(); await page.getByRole('button', { name: 'Approve' }).click();