feat: force signature fields for document signers (#1139)

## Description

Show a dialog when the document has signers with no signature fields
placed.

## Changes Made

Created a new dialog that'll be triggered when the document owner tries
to send a document to the signers without placing signature fields. The
document owners can't proceed to the next step unless they add signature
fields.

## Checklist

- [x] I have tested these changes locally and they work as expected.
- [ ] I have added/updated tests that prove the effectiveness of these
changes.
- [ ] I have updated the documentation to reflect these changes, if
applicable.
- [x] I have followed the project's coding style guidelines.
- [ ] I have addressed the code review feedback from the previous
submission, if applicable.




https://github.com/documenso/documenso/assets/25515812/f1b5c34e-2ce0-40e3-804c-f05d23045710




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced "Direct Links" for async signing, allowing users to create
documents from templates using public links.
- Added `MissingSignatureFieldDialog` component to ensure users don't
miss adding signature fields.

- **Enhancements**
- Updated blog content to provide guidance on contract management and
announce new pricing plans.

- **Bug Fixes**
  - Improved async signing process for better efficiency and control.

- **Refactor**
- Improved internal code structure and import order for stripe-related
functionality.

- **Tests**
- Enhanced e2e tests to verify signature presence before document
creation and updated test flows for document approval.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: David Nguyen <davidngu28@gmail.com>

packages/ui/primitives/document-flow/add-fields.tsx

@@ -32,6 +32,7 @@ import {
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
 import { FieldItem } from './field-item';
+import { MissingSignatureFieldDialog } from './missing-signature-field-dialog';
 import { type DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';
 
 const fontCaveat = Caveat({
@@ -66,6 +67,8 @@ export const AddFieldsFormPartial = ({
   canGoBack = false,
   isDocumentPdfLoaded,
 }: AddFieldsFormProps) => {
+  const [isMissingSignatureDialogVisible, setIsMissingSignatureDialogVisible] = useState(false);
+
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
   const { currentStep, totalSteps, previousStep } = useStep();
   const canRenderBackButtonAsRemove =
@@ -317,6 +320,22 @@ export const AddFieldsFormPartial = ({
     );
   }, [recipientsByRole]);
 
+  const handleGoNextClick = () => {
+    const everySignerHasSignature = recipientsByRole.SIGNER.every((signer) =>
+      localFields.some(
+        (field) =>
+          (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) &&
+          field.signerEmail === signer.email,
+      ),
+    );
+
+    if (!everySignerHasSignature) {
+      setIsMissingSignatureDialogVisible(true);
+    } else {
+      void onFormSubmit();
+    }
+  };
+
   return (
     <>
       <DocumentFlowFormContainerHeader
@@ -602,9 +621,14 @@ export const AddFieldsFormPartial = ({
             documentFlow.onBackStep?.();
           }}
           goBackLabel={canRenderBackButtonAsRemove ? 'Remove' : undefined}
-          onGoNextClick={() => void onFormSubmit()}
+          onGoNextClick={handleGoNextClick}
         />
       </DocumentFlowFormContainerFooter>
+
+      <MissingSignatureFieldDialog
+        isOpen={isMissingSignatureDialogVisible}
+        onOpenChange={(value) => setIsMissingSignatureDialogVisible(value)}
+      />
     </>
   );
 };

packages/ui/primitives/document-flow/missing-signature-field-dialog.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { DialogClose } from '@radix-ui/react-dialog';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+
+export type MissingSignatureFieldDialogProps = {
+  isOpen: boolean;
+  onOpenChange: (value: boolean) => void;
+};
+
+export const MissingSignatureFieldDialog = ({
+  isOpen,
+  onOpenChange,
+}: MissingSignatureFieldDialogProps) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg" position="center">
+        <DialogHeader>
+          <DialogTitle>No signature field found</DialogTitle>
+          <DialogDescription>
+            <p className="mt-2">
+              Some signers have not been assigned a signature field. Please assign at least 1
+              signature field to each signer before proceeding.
+            </p>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};