feat: implement auto-save functionality for signers in document edit form (#1792)

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

@@ -21,6 +21,7 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
@@ -73,6 +74,7 @@ export type AddTemplateFieldsFormProps = {
   recipients: Recipient[];
   fields: Field[];
   onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
+  onAutoSave: (_data: TAddTemplateFieldsFormSchema) => Promise<void>;
   teamId: number;
 };
 
@@ -81,6 +83,7 @@ export const AddTemplateFieldsFormPartial = ({
   recipients,
   fields,
   onSubmit,
+  onAutoSave,
   teamId,
 }: AddTemplateFieldsFormProps) => {
   const { _ } = useLingui();
@@ -121,6 +124,20 @@ export const AddTemplateFieldsFormPartial = ({
 
   const onFormSubmit = form.handleSubmit(onSubmit);
 
+  const { scheduleSave } = useAutoSave(onAutoSave);
+
+  const handleAutoSave = async () => {
+    const isFormValid = await form.trigger();
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const formData = form.getValues();
+
+    scheduleSave(formData);
+  };
+
   const {
     append,
     remove,
@@ -160,6 +177,7 @@ export const AddTemplateFieldsFormPartial = ({
           };
 
           append(newField);
+          void handleAutoSave();
 
           return;
         }
@@ -187,6 +205,7 @@ export const AddTemplateFieldsFormPartial = ({
             append(newField);
           });
 
+          void handleAutoSave();
           return;
         }
 
@@ -198,7 +217,15 @@ export const AddTemplateFieldsFormPartial = ({
         });
       }
     },
-    [append, lastActiveField, selectedSigner?.email, selectedSigner?.id, toast],
+    [
+      append,
+      lastActiveField,
+      selectedSigner?.email,
+      selectedSigner?.id,
+      selectedSigner?.token,
+      toast,
+      handleAutoSave,
+    ],
   );
 
   const onFieldPaste = useCallback(
@@ -218,9 +245,18 @@ export const AddTemplateFieldsFormPartial = ({
           pageX: copiedField.pageX + 3,
           pageY: copiedField.pageY + 3,
         });
+
+        void handleAutoSave();
       }
     },
-    [append, fieldClipboard, selectedSigner?.email, selectedSigner?.id, selectedSigner?.token],
+    [
+      append,
+      fieldClipboard,
+      selectedSigner?.email,
+      selectedSigner?.id,
+      selectedSigner?.token,
+      handleAutoSave,
+    ],
   );
 
   useHotkeys(['ctrl+c', 'meta+c'], (evt) => onFieldCopy(evt));
@@ -378,8 +414,10 @@ export const AddTemplateFieldsFormPartial = ({
         pageWidth,
         pageHeight,
       });
+
+      void handleAutoSave();
     },
-    [getFieldPosition, localFields, update],
+    [getFieldPosition, localFields, update, handleAutoSave],
   );
 
   const onFieldMove = useCallback(
@@ -401,8 +439,10 @@ export const AddTemplateFieldsFormPartial = ({
         pageX,
         pageY,
       });
+
+      void handleAutoSave();
     },
-    [getFieldPosition, localFields, update],
+    [getFieldPosition, localFields, update, handleAutoSave],
   );
 
   useEffect(() => {
@@ -504,6 +544,7 @@ export const AddTemplateFieldsFormPartial = ({
     });
 
     form.setValue('fields', updatedFields);
+    void handleAutoSave();
   };
 
   return (
@@ -519,6 +560,10 @@ export const AddTemplateFieldsFormPartial = ({
           fields={localFields}
           onAdvancedSettings={handleAdvancedSettings}
           onSave={handleSavedFieldSettings}
+          onAutoSave={async (fieldState) => {
+            handleSavedFieldSettings(fieldState);
+            await handleAutoSave();
+          }}
         />
       ) : (
         <>
@@ -566,12 +611,22 @@ export const AddTemplateFieldsFormPartial = ({
                     defaultWidth={DEFAULT_WIDTH_PX}
                     passive={isFieldWithinBounds && !!selectedField}
                     onFocus={() => setLastActiveField(field)}
-                    onBlur={() => setLastActiveField(null)}
+                    onBlur={() => {
+                      setLastActiveField(null);
+                      void handleAutoSave();
+                    }}
                     onResize={(options) => onFieldResize(options, index)}
                     onMove={(options) => onFieldMove(options, index)}
-                    onRemove={() => remove(index)}
-                    onDuplicate={() => onFieldCopy(null, { duplicate: true })}
-                    onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
+                    onRemove={() => {
+                      remove(index);
+                      void handleAutoSave();
+                    }}
+                    onDuplicate={() => {
+                      onFieldCopy(null, { duplicate: true });
+                    }}
+                    onDuplicateAllPages={() => {
+                      onFieldCopy(null, { duplicateAll: true });
+                    }}
                     onAdvancedSettings={() => {
                       setCurrentField(field);
                       handleAdvancedSettings();