fix: improve mobile signing ux (#2003)

Improves the mobile signing UX making actions available via the floating
navbar more obvious.

Also adds an automatic switch to the complete button once all fields
have been signed.

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -7,14 +7,11 @@ import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/cl
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
-import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { sortFieldsByPosition } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
-import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
@@ -34,29 +31,33 @@ export type DocumentSigningFormProps = {
   document: DocumentAndSender;
   recipient: Recipient;
   fields: Field[];
-  redirectUrl?: string | null;
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
   setSelectedSignerId?: (id: number | null) => void;
+  completeDocument: (
+    authOptions?: TRecipientActionAuth,
+    nextSigner?: { email: string; name: string },
+  ) => Promise<void>;
+  isSubmitting: boolean;
+  fieldsValidated: () => void;
+  nextRecipient?: RecipientWithFields;
 };
 
 export const DocumentSigningForm = ({
   document,
   recipient,
   fields,
-  redirectUrl,
   isRecipientsTurn,
   allRecipients = [],
   setSelectedSignerId,
+  completeDocument,
+  isSubmitting,
+  fieldsValidated,
+  nextRecipient,
 }: DocumentSigningFormProps) => {
-  const { sessionData } = useOptionalSession();
-  const user = sessionData?.user;
-
   const { _ } = useLingui();
   const { toast } = useToast();
-
   const navigate = useNavigate();
-  const analytics = useAnalytics();
 
   const assistantSignersId = useId();
 
@@ -66,21 +67,12 @@ export const DocumentSigningForm = ({
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
-  const {
-    mutateAsync: completeDocumentWithToken,
-    isPending,
-    isSuccess,
-  } = trpc.recipient.completeDocumentWithToken.useMutation();
-
   const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
     defaultValues: {
       selectedSignerId: undefined,
     },
   });
 
-  // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = isPending || isSuccess;
-
   const fieldsRequiringValidation = useMemo(
     () => fields.filter(isFieldUnsignedAndRequired),
     [fields],
@@ -96,9 +88,9 @@ export const DocumentSigningForm = ({
     return fieldsRequiringValidation.filter((field) => field.recipientId === recipient.id);
   }, [fieldsRequiringValidation, recipient]);
 
-  const fieldsValidated = () => {
+  const localFieldsValidated = () => {
     setValidateUninsertedFields(true);
-    validateFieldsInserted(fieldsRequiringValidation);
+    fieldsValidated();
   };
 
   const onAssistantFormSubmit = () => {
@@ -126,55 +118,6 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const completeDocument = async (
-    authOptions?: TRecipientActionAuth,
-    nextSigner?: { email: string; name: string },
-  ) => {
-    const payload = {
-      token: recipient.token,
-      documentId: document.id,
-      authOptions,
-      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
-    };
-
-    await completeDocumentWithToken(payload);
-
-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: document.id,
-      timestamp: new Date().toISOString(),
-    });
-
-    if (redirectUrl) {
-      window.location.href = redirectUrl;
-    } else {
-      await navigate(`/sign/${recipient.token}/complete`);
-    }
-  };
-
-  const nextRecipient = useMemo(() => {
-    if (
-      !document.documentMeta?.signingOrder ||
-      document.documentMeta.signingOrder !== 'SEQUENTIAL'
-    ) {
-      return undefined;
-    }
-
-    const sortedRecipients = allRecipients.sort((a, b) => {
-      // Sort by signingOrder first (nulls last), then by id
-      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
-      if (a.signingOrder === null) return 1;
-      if (b.signingOrder === null) return -1;
-      if (a.signingOrder === b.signingOrder) return a.id - b.id;
-      return a.signingOrder - b.signingOrder;
-    });
-
-    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
-    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
-      ? sortedRecipients[currentIndex + 1]
-      : undefined;
-  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
-
   return (
     <div className="flex h-full flex-col">
       {validateUninsertedFields && uninsertedFields[0] && (
@@ -205,7 +148,7 @@ export const DocumentSigningForm = ({
                     isSubmitting={isSubmitting}
                     documentTitle={document.title}
                     fields={fields}
-                    fieldsValidated={fieldsValidated}
+                    fieldsValidated={localFieldsValidated}
                     onSignatureComplete={async (nextSigner) => {
                       await completeDocument(undefined, nextSigner);
                     }}
@@ -364,7 +307,7 @@ export const DocumentSigningForm = ({
                   isSubmitting={isSubmitting || isAssistantSubmitting}
                   documentTitle={document.title}
                   fields={fields}
-                  fieldsValidated={fieldsValidated}
+                  fieldsValidated={localFieldsValidated}
                   disabled={!isRecipientsTurn}
                   onSignatureComplete={async (nextSigner) => {
                     await completeDocument(undefined, nextSigner);