feat: use server-actions for authoring flow

This change actually makes the authoring flow work for
the most part by tying in emailing and more.

We have also done a number of quality of life updates to
simplify the codebase overall making it easier to continue
work on the refresh.

apps/web/src/components/forms/edit-document/add-subject.tsx

@@ -1,111 +1,169 @@
 'use client';
 
-import { Control, Controller, FieldErrors, UseFormWatch } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
 
-import { cn } from '@documenso/ui/lib/utils';
+import { useForm } from 'react-hook-form';
+
+import { Document, DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { FormErrorMessage } from '~/components/form/form-error-message';
 
-import { TEditDocumentFormSchema } from './types';
+import { completeDocument } from './add-subject.action';
+import { TAddSubjectFormSchema } from './add-subject.types';
+import {
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
 
 export type AddSubjectFormProps = {
-  className?: string;
-  control: Control<TEditDocumentFormSchema>;
-  watch: UseFormWatch<TEditDocumentFormSchema>;
-  errors: FieldErrors<TEditDocumentFormSchema>;
-  isSubmitting: boolean;
+  recipients: Recipient[];
+  fields: Field[];
+  document: Document;
+  onContinue?: () => void;
+  onGoBack?: () => void;
 };
 
 export const AddSubjectFormPartial = ({
-  className,
-  control,
-  errors,
-  isSubmitting,
+  recipients: _recipients,
+  fields: _fields,
+  document,
+  onContinue,
+  onGoBack,
 }: AddSubjectFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddSubjectFormSchema>({
+    defaultValues: {
+      email: {
+        subject: '',
+        message: '',
+      },
+    },
+  });
+
+  const onFormSubmit = handleSubmit(async (data: TAddSubjectFormSchema) => {
+    const { subject, message } = data.email;
+
+    try {
+      await completeDocument({
+        documentId: document.id,
+        email: {
+          subject,
+          message,
+        },
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while sending the document.',
+        variant: 'destructive',
+      });
+    }
+  });
+
   return (
-    <div className={cn('flex flex-col', className)}>
-      <h3 className="text-foreground text-2xl font-semibold">Add Subject</h3>
+    <EditDocumentFormContainer>
+      <EditDocumentFormContainerContent
+        title="Add Subject"
+        description="Add the subject and message you wish to send to signers."
+      >
+        <div className="flex-col flex">
+          <div className="flex-col flex gap-y-4">
+            <div>
+              <Label htmlFor="subject">
+                Subject <span className="text-muted-foreground">(Optional)</span>
+              </Label>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add the subject and message you wish to send to signers.
-      </p>
-
-      <hr className="border-border mb-8 mt-4" />
-
-      <div className="flex flex-col gap-y-4">
-        <div>
-          <Label htmlFor="subject">
-            Subject <span className="text-muted-foreground">(Optional)</span>
-          </Label>
-
-          <Controller
-            control={control}
-            name="email.subject"
-            render={({ field }) => (
               <Input
                 id="subject"
                 // placeholder="Subject"
                 className="bg-background mt-2"
                 disabled={isSubmitting}
-                {...field}
+                {...register('email.subject')}
               />
-            )}
-          />
 
-          <FormErrorMessage className="mt-2" errors={errors} />
-        </div>
+              <FormErrorMessage className="mt-2" error={errors.email?.subject} />
+            </div>
 
-        <div>
-          <Label htmlFor="message">
-            Message <span className="text-muted-foreground">(Optional)</span>
-          </Label>
+            <div>
+              <Label htmlFor="message">
+                Message <span className="text-muted-foreground">(Optional)</span>
+              </Label>
 
-          <Controller
-            control={control}
-            name="email.message"
-            render={({ field }) => (
               <Textarea
                 id="message"
                 className="bg-background mt-2 h-32 resize-none"
                 disabled={isSubmitting}
-                {...field}
+                {...register('email.message')}
               />
-            )}
-          />
 
-          <FormErrorMessage className="mt-2" errors={errors} />
+              <FormErrorMessage
+                className="mt-2"
+                error={
+                  typeof errors.email?.message !== 'string' ? errors.email?.message : undefined
+                }
+              />
+            </div>
+
+            <div>
+              <p className="text-muted-foreground text-sm">
+                You can use the following variables in your message:
+              </p>
+
+              <ul className="flex-col mt-2 flex list-inside list-disc gap-y-2 text-sm">
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{signer.name}'}
+                  </code>{' '}
+                  - The signer's name
+                </li>
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{signer.email}'}
+                  </code>{' '}
+                  - The signer's email
+                </li>
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{document.name}'}
+                  </code>{' '}
+                  - The document's name
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
+      </EditDocumentFormContainerContent>
 
-        <div>
-          <p className="text-muted-foreground text-sm">
-            You can use the following variables in your message:
-          </p>
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Subject" step={3} maxStep={3} />
 
-          <ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
-            <li className="text-muted-foreground">
-              <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                {'{signer.name}'}
-              </code>{' '}
-              - The signer's name
-            </li>
-            <li className="text-muted-foreground">
-              <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                {'{signer.email}'}
-              </code>{' '}
-              - The signer's email
-            </li>
-            <li className="text-muted-foreground">
-              <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                {'{document.name}'}
-              </code>{' '}
-              - The document's name
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
+        <EditDocumentFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
+          onGoNextClick={() => onFormSubmit()}
+          onGoBackClick={onGoBack}
+        />
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
   );
 };