feat: add uninserted field validation

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -1,12 +1,15 @@
 'use client';
 
+import { useMemo, useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
-import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 
 import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import { Document, Field, Recipient } from '@documenso/prisma/client';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -27,15 +30,22 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
 
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+
   const {
     handleSubmit,
     formState: { isSubmitting },
   } = useForm();
 
-  const isComplete = fields.every((f) => f.inserted);
+  const uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(fields.filter((field) => !field.inserted));
+  }, [fields]);
 
   const onFormSubmit = async () => {
-    if (!isComplete) {
+    setValidateUninsertedFields(true);
+    const isFieldsValid = validateFieldsInserted(fields);
+
+    if (!isFieldsValid) {
       return;
     }
 
@@ -54,7 +64,16 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
       )}
       onSubmit={handleSubmit(onFormSubmit)}
     >
-      <div className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}>
+      {validateUninsertedFields && uninsertedFields[0] && (
+        <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+          Click to insert field
+        </FieldToolTip>
+      )}
+
+      <fieldset
+        disabled={isSubmitting}
+        className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}
+      >
         <div className={cn('flex flex-1 flex-col')}>
           <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
 
@@ -106,19 +125,13 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 Cancel
               </Button>
 
-              <Button
-                className="w-full"
-                type="submit"
-                size="lg"
-                disabled={!isComplete || isSubmitting}
-              >
-                {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+              <Button className="w-full" type="submit" size="lg" loading={isSubmitting}>
                 Complete
               </Button>
             </div>
           </div>
         </div>
-      </div>
+      </fieldset>
     </form>
   );
 };

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -2,10 +2,8 @@
 
 import React from 'react';
 
-import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
 import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
 
 export type SignatureFieldProps = {
   field: FieldWithSignature;
@@ -22,8 +20,6 @@ export const SigningFieldContainer = ({
   onRemove,
   children,
 }: SignatureFieldProps) => {
-  const coords = useFieldPageCoords(field);
-
   const onSignFieldClick = async () => {
     if (field.inserted) {
       return;
@@ -41,40 +37,21 @@ export const SigningFieldContainer = ({
   };
 
   return (
-    <div
-      className="absolute"
-      style={{
-        top: `${coords.y}px`,
-        left: `${coords.x}px`,
-        height: `${coords.height}px`,
-        width: `${coords.width}px`,
-      }}
-    >
-      <Card
-        className="bg-background relative h-full w-full"
-        data-inserted={field.inserted ? 'true' : 'false'}
-      >
-        <CardContent
-          className={cn(
-            'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2',
-          )}
+    <FieldRootContainer field={field}>
+      {!field.inserted && !loading && (
+        <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
+      )}
+
+      {field.inserted && !loading && (
+        <button
+          className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
+          onClick={onRemoveSignedFieldClick}
         >
-          {!field.inserted && !loading && (
-            <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
-          )}
+          Remove
+        </button>
+      )}
 
-          {field.inserted && !loading && (
-            <button
-              className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
-              onClick={onRemoveSignedFieldClick}
-            >
-              Remove
-            </button>
-          )}
-
-          {children}
-        </CardContent>
-      </Card>
-    </div>
+      {children}
+    </FieldRootContainer>
   );
 };