fix: wip

apps/remix/app/components/(dashboard)/common/command-menu.tsx

@@ -4,9 +4,9 @@ import type { MessageDescriptor } from '@lingui/core';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { CheckIcon, Loader, Monitor, Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router';
+import { Theme, useTheme } from 'remix-themes';
 
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import {
@@ -31,7 +31,6 @@ import {
   CommandList,
   CommandShortcut,
 } from '@documenso/ui/primitives/command';
-import { THEMES_TYPE } from '@documenso/ui/primitives/constants';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const DOCUMENTS_PAGES = [
@@ -74,7 +73,6 @@ export type CommandMenuProps = {
 
 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { _ } = useLingui();
-  const { setTheme } = useTheme();
 
   const navigate = useNavigate();
 
@@ -224,7 +222,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
           </>
         )}
 
-        {currentPage === 'theme' && <ThemeCommands setTheme={setTheme} />}
+        {currentPage === 'theme' && <ThemeCommands />}
         {currentPage === 'language' && <LanguageCommands />}
       </CommandList>
     </CommandDialog>
@@ -253,19 +251,18 @@ const Commands = ({
   ));
 };
 
-const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) => {
+const ThemeCommands = () => {
   const { _ } = useLingui();
 
-  const THEMES = useMemo(
-    () => [
-      { label: msg`Light Mode`, theme: THEMES_TYPE.LIGHT, icon: Sun },
-      { label: msg`Dark Mode`, theme: THEMES_TYPE.DARK, icon: Moon },
-      { label: msg`System Theme`, theme: THEMES_TYPE.SYSTEM, icon: Monitor },
-    ],
-    [],
-  );
+  const [, setTheme] = useTheme();
 
-  return THEMES.map((theme) => (
+  const themes = [
+    { label: msg`Light Mode`, theme: Theme.LIGHT, icon: Sun },
+    { label: msg`Dark Mode`, theme: Theme.DARK, icon: Moon },
+    { label: msg`System Theme`, theme: null, icon: Monitor },
+  ] as const;
+
+  return themes.map((theme) => (
     <CommandItem
       key={theme.theme}
       onSelect={() => setTheme(theme.theme)}

apps/remix/app/components/(teams)/forms/update-team-form.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
@@ -72,7 +72,7 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
       });
 
       if (url !== teamUrl) {
-        await navigate(`${WEBAPP_BASE_URL}/t/${url}/settings`);
+        await navigate(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${url}/settings`);
       }
     } catch (err) {
       const error = AppError.parseError(err);
@@ -130,7 +130,7 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
                 {!form.formState.errors.url && (
                   <span className="text-foreground/50 text-xs font-normal">
                     {field.value ? (
-                      `${WEBAPP_BASE_URL}/t/${field.value}`
+                      `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                     ) : (
                       <Trans>A unique URL to identify your team</Trans>
                     )}

apps/remix/app/components/(teams)/tables/current-user-teams-data-table.tsx

@@ -6,7 +6,7 @@ import { useSearchParams } from 'react-router';
 import { Link } from 'react-router';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
@@ -69,7 +69,7 @@ export const CurrentUserTeamsDataTable = () => {
               primaryText={
                 <span className="text-foreground/80 font-semibold">{row.original.name}</span>
               }
-              secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+              secondaryText={`${NEXT_PUBLIC_WEBAPP_URL()}/t/${row.original.url}`}
             />
           </Link>
         ),

apps/remix/app/components/(teams)/tables/pending-user-teams-data-table.tsx

@@ -5,7 +5,7 @@ import { useLingui } from '@lingui/react';
 import { useSearchParams } from 'react-router';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { trpc } from '@documenso/trpc/react';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -66,7 +66,7 @@ export const PendingUserTeamsDataTable = () => {
             primaryText={
               <span className="text-foreground/80 font-semibold">{row.original.name}</span>
             }
-            secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+            secondaryText={`${NEXT_PUBLIC_WEBAPP_URL()}/t/${row.original.url}`}
           />
         ),
       },

apps/remix/app/components/dialogs/team-create-dialog.tsx

@@ -10,7 +10,7 @@ import { useNavigate } from 'react-router';
 import type { z } from 'zod';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
@@ -199,7 +199,7 @@ export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) =
                     {!form.formState.errors.teamUrl && (
                       <span className="text-foreground/50 text-xs font-normal">
                         {field.value ? (
-                          `${WEBAPP_BASE_URL}/t/${field.value}`
+                          `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                         ) : (
                           <Trans>A unique URL to identify your team</Trans>
                         )}

apps/remix/app/components/general/claim-account.tsx

@@ -0,0 +1,161 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { authClient } from '@documenso/auth/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { signupErrorMessages } from '~/components/forms/signup';
+
+export type ClaimAccountProps = {
+  defaultName: string;
+  defaultEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export const ZClaimAccountFormSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(1, { message: msg`Please enter a valid name.`.id }),
+    email: z.string().email().min(1),
+    password: ZPasswordSchema,
+  })
+  .refine(
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: msg`Password should not be common or based on personal information`.id,
+      path: ['password'],
+    },
+  );
+
+export type TClaimAccountFormSchema = z.infer<typeof ZClaimAccountFormSchema>;
+
+export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const analytics = useAnalytics();
+  const navigate = useNavigate();
+
+  const form = useForm<TClaimAccountFormSchema>({
+    values: {
+      name: defaultName ?? '',
+      email: defaultEmail,
+      password: '',
+    },
+    resolver: zodResolver(ZClaimAccountFormSchema),
+  });
+
+  const onFormSubmit = async ({ name, email, password }: TClaimAccountFormSchema) => {
+    try {
+      await authClient.emailPassword.signUp({ name, email, password });
+
+      await navigate(`/unverified-account`);
+
+      toast({
+        title: _(msg`Registration Successful`),
+        description: _(
+          msg`You have successfully registered. Please verify your account by clicking on the link you received in the email.`,
+        ),
+        duration: 5000,
+      });
+
+      analytics.capture('App: User Claim Account', {
+        email,
+        timestamp: new Date().toISOString(),
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="mt-2 w-full">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onFormSubmit)}>
+          <fieldset disabled={form.formState.isSubmitting} className="mt-4">
+            <FormField
+              name="name"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Name</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={_(msg`Enter your name`)} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="email"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem className="mt-4">
+                  <FormLabel>
+                    <Trans>Email address</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={_(msg`Enter your email`)} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="password"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem className="mt-4">
+                  <FormLabel>
+                    <Trans>Set a password</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <PasswordInput {...field} placeholder={_(msg`Pick a password`)} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button type="submit" className="mt-6 w-full" loading={form.formState.isSubmitting}>
+              <Trans>Claim account</Trans>
+            </Button>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx

@@ -0,0 +1,160 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import type { Field } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import type { TTemplate } from '@documenso/lib/types/template';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { useRequiredDocumentSigningAuthContext } from '~/components/general/document-signing/document-signing-auth-provider';
+
+const ZDirectTemplateConfigureFormSchema = z.object({
+  email: z.string().email('Email is invalid'),
+});
+
+export type TDirectTemplateConfigureFormSchema = z.infer<typeof ZDirectTemplateConfigureFormSchema>;
+
+export type DirectTemplateConfigureFormProps = {
+  flowStep: DocumentFlowStep;
+  isDocumentPdfLoaded: boolean;
+  template: Omit<TTemplate, 'user'>;
+  directTemplateRecipient: Recipient & { fields: Field[] };
+  initialEmail?: string;
+  onSubmit: (_data: TDirectTemplateConfigureFormSchema) => void;
+};
+
+export const DirectTemplateConfigureForm = ({
+  flowStep,
+  isDocumentPdfLoaded,
+  template,
+  directTemplateRecipient,
+  initialEmail,
+  onSubmit,
+}: DirectTemplateConfigureFormProps) => {
+  const { _ } = useLingui();
+
+  const { user } = useOptionalSession();
+
+  const { recipients } = template;
+  const { derivedRecipientAccessAuth } = useRequiredDocumentSigningAuthContext();
+
+  const recipientsWithBlankDirectRecipientEmail = recipients.map((recipient) => {
+    if (recipient.id === directTemplateRecipient.id) {
+      return {
+        ...recipient,
+        email: '',
+      };
+    }
+
+    return recipient;
+  });
+
+  const form = useForm<TDirectTemplateConfigureFormSchema>({
+    resolver: zodResolver(
+      ZDirectTemplateConfigureFormSchema.superRefine((items, ctx) => {
+        if (template.recipients.map((recipient) => recipient.email).includes(items.email)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: _(msg`Email cannot already exist in the template`),
+            path: ['email'],
+          });
+        }
+      }),
+    ),
+    defaultValues: {
+      email: initialEmail || '',
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        {isDocumentPdfLoaded &&
+          directTemplateRecipient.fields.map((field, index) => (
+            <ShowFieldItem
+              key={index}
+              field={field}
+              recipients={recipientsWithBlankDirectRecipientEmail}
+            />
+          ))}
+
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Email</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input
+                      {...field}
+                      disabled={
+                        field.disabled ||
+                        derivedRecipientAccessAuth !== null ||
+                        user?.email !== undefined
+                      }
+                      placeholder="recipient@documenso.com"
+                    />
+                  </FormControl>
+
+                  {!fieldState.error && (
+                    <p className="text-muted-foreground text-xs">
+                      <Trans>Enter your email address to receive the completed document.</Trans>
+                    </p>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Field } from '@prisma/client';
+import { type Recipient } from '@prisma/client';
+import { useNavigate, useSearchParams } from 'react-router';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TTemplate } from '@documenso/lib/types/template';
+import { trpc } from '@documenso/trpc/react';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from '~/components/general/document-signing/document-signing-auth-provider';
+import { useRequiredDocumentSigningContext } from '~/components/general/document-signing/document-signing-provider';
+
+import {
+  DirectTemplateConfigureForm,
+  type TDirectTemplateConfigureFormSchema,
+} from './direct-template-configure-form';
+import {
+  type DirectTemplateLocalField,
+  DirectTemplateSigningForm,
+} from './direct-template-signing-form';
+
+export type DirectTemplatePageViewProps = {
+  template: Omit<TTemplate, 'user'>;
+  directTemplateToken: string;
+  directTemplateRecipient: Recipient & { fields: Field[] };
+};
+
+type DirectTemplateStep = 'configure' | 'sign';
+const DirectTemplateSteps: DirectTemplateStep[] = ['configure', 'sign'];
+
+export const DirectTemplatePageView = ({
+  template,
+  directTemplateRecipient,
+  directTemplateToken,
+}: DirectTemplatePageViewProps) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { email, fullName, setEmail } = useRequiredDocumentSigningContext();
+  const { recipient, setRecipient } = useRequiredDocumentSigningAuthContext();
+
+  const [step, setStep] = useState<DirectTemplateStep>('configure');
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const recipientActionVerb = _(
+    RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role].actionVerb,
+  );
+
+  const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
+    configure: {
+      title: msg`General`,
+      description: msg`Preview and configure template.`,
+      stepIndex: 1,
+    },
+    sign: {
+      title: msg`${recipientActionVerb} document`,
+      description: msg`${recipientActionVerb} the document to complete the process.`,
+      stepIndex: 2,
+    },
+  };
+
+  const { mutateAsync: createDocumentFromDirectTemplate } =
+    trpc.template.createDocumentFromDirectTemplate.useMutation();
+
+  /**
+   * Set the email into a temporary recipient so it can be used for reauth and signing email fields.
+   */
+  const onConfigureDirectTemplateSubmit = ({ email }: TDirectTemplateConfigureFormSchema) => {
+    setEmail(email);
+
+    setRecipient({
+      ...recipient,
+      email,
+    });
+
+    setStep('sign');
+  };
+
+  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
+    try {
+      let directTemplateExternalId = searchParams?.get('externalId') || undefined;
+
+      if (directTemplateExternalId) {
+        directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
+      }
+
+      const { token } = await createDocumentFromDirectTemplate({
+        directTemplateToken,
+        directTemplateExternalId,
+        directRecipientName: fullName,
+        directRecipientEmail: recipient.email,
+        templateUpdatedAt: template.updatedAt,
+        signedFieldValues: fields.map((field) => {
+          if (!field.signedValue) {
+            throw new Error('Invalid configuration');
+          }
+
+          return field.signedValue;
+        }),
+      });
+
+      const redirectUrl = template.templateMeta?.redirectUrl;
+
+      await (redirectUrl ? navigate(redirectUrl) : navigate(`/sign/${token}/complete`));
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to submit this document at this time. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  const currentDocumentFlow = directTemplateFlow[step];
+
+  return (
+    <div className="grid w-full grid-cols-12 gap-8">
+      <Card
+        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <LazyPDFViewer
+            key={template.id}
+            documentData={template.templateDocumentData}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
+          />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(DirectTemplateSteps[step - 1])}
+          >
+            <DirectTemplateConfigureForm
+              flowStep={directTemplateFlow.configure}
+              template={template}
+              directTemplateRecipient={directTemplateRecipient}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              onSubmit={onConfigureDirectTemplateSubmit}
+              initialEmail={email}
+            />
+
+            <DirectTemplateSigningForm
+              flowStep={directTemplateFlow.sign}
+              directRecipient={recipient}
+              directRecipientFields={directTemplateRecipient.fields}
+              template={template}
+              onSubmit={onSignDirectTemplateSubmit}
+            />
+          </Stepper>
+        </DocumentFlowFormContainer>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-signing-auth-page.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { authClient } from '@documenso/auth/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const DirectTemplateAuthPageView = () => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async () => {
+    try {
+      setIsSigningOut(true);
+
+      await authClient.signOut();
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to log you out at this time.`),
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+
+    setIsSigningOut(false);
+  };
+
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <h1 className="text-3xl font-semibold">
+          <Trans>Authentication required</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>You need to be logged in to view this page.</Trans>
+        </p>
+
+        <Button
+          className="mt-4 w-full"
+          type="submit"
+          onClick={async () => handleChangeAccount()}
+          loading={isSigningOut}
+        >
+          <Trans>Login</Trans>
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -0,0 +1,388 @@
+import { useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/macro';
+import type { Field, Recipient, Signature } from '@prisma/client';
+import { FieldType } from '@prisma/client';
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import type { TTemplate } from '@documenso/lib/types/template';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
+import { DocumentSigningCompleteDialog } from '~/components/general/document-signing/document-signing-complete-dialog';
+import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
+import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
+import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
+import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
+import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
+import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
+import { useRequiredDocumentSigningContext } from '~/components/general/document-signing/document-signing-provider';
+import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
+import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
+import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+
+export type DirectTemplateSigningFormProps = {
+  flowStep: DocumentFlowStep;
+  directRecipient: Recipient;
+  directRecipientFields: Field[];
+  template: Omit<TTemplate, 'user'>;
+  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
+};
+
+export type DirectTemplateLocalField = Field & {
+  signedValue?: TSignFieldWithTokenMutationSchema;
+  signature?: Signature;
+};
+
+export const DirectTemplateSigningForm = ({
+  flowStep,
+  directRecipient,
+  directRecipientFields,
+  template,
+  onSubmit,
+}: DirectTemplateSigningFormProps) => {
+  const { fullName, signature, signatureValid, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();
+
+  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { currentStep, totalSteps, previousStep } = useStep();
+
+  const onSignField = (value: TSignFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        const tempField: DirectTemplateLocalField = {
+          ...field,
+          customText: value.value,
+          inserted: true,
+          signedValue: value,
+        };
+
+        if (field.type === FieldType.SIGNATURE) {
+          tempField.signature = {
+            id: 1,
+            created: new Date(),
+            recipientId: 1,
+            fieldId: 1,
+            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
+            typedSignature: value.value.startsWith('data:') ? null : value.value,
+          } satisfies Signature;
+        }
+
+        if (field.type === FieldType.DATE) {
+          tempField.customText = DateTime.now()
+            .setZone(template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+            .toFormat(template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
+        }
+        return tempField;
+      }),
+    );
+  };
+
+  const onUnsignField = (value: TRemovedSignedFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        return {
+          ...field,
+          customText: '',
+          inserted: false,
+          signedValue: undefined,
+          signature: undefined,
+        };
+      }),
+    );
+  };
+
+  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
+
+  const uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
+  }, [localFields]);
+
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(localFields);
+  };
+
+  const handleSubmit = async () => {
+    setValidateUninsertedFields(true);
+
+    if (hasSignatureField && !signatureValid) {
+      return;
+    }
+
+    const isFieldsValid = validateFieldsInserted(localFields);
+
+    if (!isFieldsValid) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await onSubmit(localFields);
+    } catch {
+      setIsSubmitting(false);
+    }
+
+    // Do not reset to false since we do a redirect.
+  };
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {validateUninsertedFields && uninsertedFields[0] && (
+            <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+              <Trans>Click to insert field</Trans>
+            </FieldToolTip>
+          )}
+
+          {localFields.map((field) =>
+            match(field.type)
+              .with(FieldType.SIGNATURE, () => (
+                <DocumentSigningSignatureField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.INITIALS, () => (
+                <DocumentSigningInitialsField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.NAME, () => (
+                <DocumentSigningNameField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.DATE, () => (
+                <DocumentSigningDateField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  dateFormat={template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                  timezone={template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.EMAIL, () => (
+                <DocumentSigningEmailField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.TEXT, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZTextFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningTextField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.NUMBER, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZNumberFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningNumberField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.DROPDOWN, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZDropdownFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningDropdownField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.RADIO, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZRadioFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningRadioField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.CHECKBOX, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZCheckboxFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningCheckboxField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .otherwise(() => null),
+          )}
+        </ElementVisible>
+
+        <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+          <div className="flex flex-1 flex-col gap-y-4">
+            <div>
+              <Label htmlFor="full-name">
+                <Trans>Full Name</Trans>
+              </Label>
+
+              <Input
+                id="full-name"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value.trimStart())}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="Signature">
+                <Trans>Signature</Trans>
+              </Label>
+
+              <Card className="mt-2" gradient degrees={-120}>
+                <CardContent className="p-0">
+                  <SignaturePad
+                    className="h-44 w-full"
+                    disabled={isSubmitting}
+                    defaultValue={signature ?? undefined}
+                    onChange={(value) => {
+                      setSignature(value);
+                    }}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
+
+        <div className="mt-4 flex gap-x-4">
+          <Button
+            className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+            size="lg"
+            variant="secondary"
+            disabled={isSubmitting}
+            onClick={previousStep}
+          >
+            <Trans>Back</Trans>
+          </Button>
+
+          <DocumentSigningCompleteDialog
+            isSubmitting={isSubmitting}
+            onSignatureComplete={handleSubmit}
+            documentTitle={template.title}
+            fields={localFields}
+            fieldsValidated={fieldsValidated}
+            role={directRecipient.role}
+          />
+        </div>
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-2fa.tsx

@@ -0,0 +1,190 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/macro';
+import { RecipientRole } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+
+import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuth2FAProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
+};
+
+const Z2FAAuthFormSchema = z.object({
+  token: z
+    .string()
+    .min(4, { message: 'Token must at least 4 characters long' })
+    .max(10, { message: 'Token must be at most 10 characters long' }),
+});
+
+type T2FAAuthFormSchema = z.infer<typeof Z2FAAuthFormSchema>;
+
+export const DocumentSigningAuth2FA = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
+  onReauthFormSubmit,
+  open,
+  onOpenChange,
+}: DocumentSigningAuth2FAProps) => {
+  const { recipient, user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
+    useRequiredDocumentSigningAuthContext();
+
+  const form = useForm<T2FAAuthFormSchema>({
+    resolver: zodResolver(Z2FAAuthFormSchema),
+    defaultValues: {
+      token: '',
+    },
+  });
+
+  const [is2FASetupSuccessful, setIs2FASetupSuccessful] = useState(false);
+  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
+
+  const onFormSubmit = async ({ token }: T2FAAuthFormSchema) => {
+    try {
+      setIsCurrentlyAuthenticating(true);
+
+      await onReauthFormSubmit({
+        type: DocumentAuth.TWO_FACTOR_AUTH,
+        token,
+      });
+
+      setIsCurrentlyAuthenticating(false);
+
+      onOpenChange(false);
+    } catch (err) {
+      setIsCurrentlyAuthenticating(false);
+
+      const error = AppError.parseError(err);
+      setFormErrorCode(error.code);
+
+      // Todo: Alert.
+    }
+  };
+
+  useEffect(() => {
+    form.reset({
+      token: '',
+    });
+
+    setIs2FASetupSuccessful(false);
+    setFormErrorCode(null);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  if (!user?.twoFactorEnabled && !is2FASetupSuccessful) {
+    return (
+      <div className="space-y-4">
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT' ? (
+                <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
+              ) : (
+                // Todo: Translate
+                `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`
+              )}
+            </p>
+
+            {user?.identityProvider === 'DOCUMENSO' && (
+              <p className="mt-2">
+                <Trans>
+                  By enabling 2FA, you will be required to enter a code from your authenticator app
+                  every time you sign in.
+                </Trans>
+              </p>
+            )}
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Close</Trans>
+          </Button>
+
+          <EnableAuthenticatorAppDialog onSuccess={() => setIs2FASetupSuccessful(true)} />
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={isCurrentlyAuthenticating}>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>2FA token</FormLabel>
+
+                  <FormControl>
+                    <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                      {Array(6)
+                        .fill(null)
+                        .map((_, i) => (
+                          <PinInputGroup key={i}>
+                            <PinInputSlot index={i} />
+                          </PinInputGroup>
+                        ))}
+                    </PinInput>
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {formErrorCode && (
+              <Alert variant="destructive">
+                <AlertTitle>
+                  <Trans>Unauthorized</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>
+                    We were unable to verify your details. Please try again or contact support
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isCurrentlyAuthenticating}>
+                <Trans>Sign</Trans>
+              </Button>
+            </DialogFooter>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-account.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+
+import { Trans } from '@lingui/macro';
+import { RecipientRole } from '@prisma/client';
+import { useNavigate } from 'react-router';
+
+import { authClient } from '@documenso/auth/client';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuthAccountProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
+  onOpenChange: (value: boolean) => void;
+};
+
+export const DocumentSigningAuthAccount = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
+  onOpenChange,
+}: DocumentSigningAuthAccountProps) => {
+  const { recipient } = useRequiredDocumentSigningAuthContext();
+
+  const navigate = useNavigate();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async (email: string) => {
+    try {
+      setIsSigningOut(true);
+
+      // Todo
+      await authClient.signOut();
+      // {
+      //   // redirect: false,
+      //   // Todo: Redirect to signin like below
+      // }
+
+      navigate(`/signin#email=${email}`);
+    } catch {
+      setIsSigningOut(false);
+
+      // Todo: Alert.
+    }
+  };
+
+  return (
+    <fieldset disabled={isSigningOut} className="space-y-4">
+      <Alert variant="warning">
+        <AlertDescription>
+          {actionTarget === 'DOCUMENT' && recipient.role === RecipientRole.VIEWER ? (
+            <span>
+              <Trans>
+                To mark this document as viewed, you need to be logged in as{' '}
+                <strong>{recipient.email}</strong>
+              </Trans>
+            </span>
+          ) : (
+            <span>
+              {/* Todo: Translate */}
+              To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be logged
+              in as <strong>{recipient.email}</strong>
+            </span>
+          )}
+        </AlertDescription>
+      </Alert>
+
+      <DialogFooter>
+        <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+          <Trans>Cancel</Trans>
+        </Button>
+
+        <Button onClick={async () => handleChangeAccount(recipient.email)} loading={isSigningOut}>
+          <Trans>Login</Trans>
+        </Button>
+      </DialogFooter>
+    </fieldset>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx

@@ -0,0 +1,91 @@
+import { Trans } from '@lingui/macro';
+import type { FieldType } from '@prisma/client';
+import { P, match } from 'ts-pattern';
+
+import {
+  DocumentAuth,
+  type TRecipientActionAuth,
+  type TRecipientActionAuthTypes,
+} from '@documenso/lib/types/document-auth';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+
+import { DocumentSigningAuth2FA } from './document-signing-auth-2fa';
+import { DocumentSigningAuthAccount } from './document-signing-auth-account';
+import { DocumentSigningAuthPasskey } from './document-signing-auth-passkey';
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuthDialogProps = {
+  title?: string;
+  documentAuthType: TRecipientActionAuthTypes;
+  description?: string;
+  actionTarget: FieldType | 'DOCUMENT';
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+
+  /**
+   * The callback to run when the reauth form is filled out.
+   */
+  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
+};
+
+export const DocumentSigningAuthDialog = ({
+  title,
+  description,
+  documentAuthType,
+  open,
+  onOpenChange,
+  onReauthFormSubmit,
+}: DocumentSigningAuthDialogProps) => {
+  const { recipient, user, isCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
+
+  const handleOnOpenChange = (value: boolean) => {
+    if (isCurrentlyAuthenticating) {
+      return;
+    }
+
+    onOpenChange(value);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOnOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title || <Trans>Sign field</Trans>}</DialogTitle>
+
+          <DialogDescription>
+            {description || <Trans>Reauthentication is required to sign this field</Trans>}
+          </DialogDescription>
+        </DialogHeader>
+
+        {match({ documentAuthType, user })
+          .with(
+            { documentAuthType: DocumentAuth.ACCOUNT },
+            { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
+            () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
+          )
+          .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
+            <DocumentSigningAuthPasskey
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
+          ))
+          .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
+            <DocumentSigningAuth2FA
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
+          ))
+          .with({ documentAuthType: DocumentAuth.EXPLICIT_NONE }, () => null)
+          .exhaustive()}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-page.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { useNavigate } from 'react-router';
+
+import { authClient } from '@documenso/auth/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DocumentSigningAuthPageViewProps = {
+  email: string;
+  emailHasAccount?: boolean;
+};
+
+export const DocumentSigningAuthPageView = ({
+  email,
+  emailHasAccount,
+}: DocumentSigningAuthPageViewProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const navigate = useNavigate();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async (email: string) => {
+    try {
+      setIsSigningOut(true);
+
+      // Todo: Redirect false
+      await authClient.signOut();
+
+      navigate(emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`);
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to log you out at this time.`),
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+
+    setIsSigningOut(false);
+  };
+
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <h1 className="text-3xl font-semibold">
+          <Trans>Authentication required</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            You need to be logged in as <strong>{email}</strong> to view this page.
+          </Trans>
+        </p>
+
+        <Button
+          className="mt-4 w-full"
+          type="submit"
+          onClick={async () => handleChangeAccount(email)}
+          loading={isSigningOut}
+        >
+          {emailHasAccount ? <Trans>Login</Trans> : <Trans>Sign up</Trans>}
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx

@@ -0,0 +1,264 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { RecipientRole } from '@prisma/client';
+import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+import { CreatePasskeyDialog } from '~/components/dialogs/create-passkey-dialog';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuthPasskeyProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
+};
+
+const ZPasskeyAuthFormSchema = z.object({
+  passkeyId: z.string(),
+});
+
+type TPasskeyAuthFormSchema = z.infer<typeof ZPasskeyAuthFormSchema>;
+
+export const DocumentSigningAuthPasskey = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
+  onReauthFormSubmit,
+  open,
+  onOpenChange,
+}: DocumentSigningAuthPasskeyProps) => {
+  const { _ } = useLingui();
+
+  const {
+    recipient,
+    passkeyData,
+    preferredPasskeyId,
+    setPreferredPasskeyId,
+    isCurrentlyAuthenticating,
+    setIsCurrentlyAuthenticating,
+    refetchPasskeys,
+  } = useRequiredDocumentSigningAuthContext();
+
+  const form = useForm<TPasskeyAuthFormSchema>({
+    resolver: zodResolver(ZPasskeyAuthFormSchema),
+    defaultValues: {
+      passkeyId: preferredPasskeyId || '',
+    },
+  });
+
+  const { mutateAsync: createPasskeyAuthenticationOptions } =
+    trpc.auth.createPasskeyAuthenticationOptions.useMutation();
+
+  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
+
+  const onFormSubmit = async ({ passkeyId }: TPasskeyAuthFormSchema) => {
+    try {
+      setPreferredPasskeyId(passkeyId);
+      setIsCurrentlyAuthenticating(true);
+
+      const { options, tokenReference } = await createPasskeyAuthenticationOptions({
+        preferredPasskeyId: passkeyId,
+      });
+
+      const authenticationResponse = await startAuthentication(options);
+
+      await onReauthFormSubmit({
+        type: DocumentAuth.PASSKEY,
+        authenticationResponse,
+        tokenReference,
+      });
+
+      setIsCurrentlyAuthenticating(false);
+
+      onOpenChange(false);
+    } catch (err) {
+      setIsCurrentlyAuthenticating(false);
+
+      if (err.name === 'NotAllowedError') {
+        return;
+      }
+
+      const error = AppError.parseError(err);
+      setFormErrorCode(error.code);
+
+      // Todo: Alert.
+    }
+  };
+
+  useEffect(() => {
+    form.reset({
+      passkeyId: preferredPasskeyId || '',
+    });
+
+    setFormErrorCode(null);
+  }, [open, form, preferredPasskeyId]);
+
+  if (!browserSupportsWebAuthn()) {
+    return (
+      <div className="space-y-4">
+        <Alert variant="warning">
+          <AlertDescription>
+            {/* Todo: Translate */}
+            Your browser does not support passkeys, which is required to {actionVerb.toLowerCase()}{' '}
+            this {actionTarget.toLowerCase()}.
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Close</Trans>
+          </Button>
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  if (passkeyData.isInitialLoading || (passkeyData.isError && passkeyData.passkeys.length === 0)) {
+    return (
+      <div className="flex h-28 items-center justify-center">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  if (passkeyData.isError) {
+    return (
+      <div className="h-28 space-y-4">
+        <Alert variant="destructive">
+          <AlertDescription>
+            <Trans>Something went wrong while loading your passkeys.</Trans>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button type="button" onClick={() => void refetchPasskeys()}>
+            <Trans>Retry</Trans>
+          </Button>
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  if (passkeyData.passkeys.length === 0) {
+    return (
+      <div className="space-y-4">
+        <Alert variant="warning">
+          <AlertDescription>
+            {/* Todo: Translate */}
+            {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT'
+              ? 'You need to setup a passkey to mark this document as viewed.'
+              : `You need to setup a passkey to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`}
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <CreatePasskeyDialog
+            onSuccess={async () => refetchPasskeys()}
+            trigger={
+              <Button>
+                <Trans>Setup</Trans>
+              </Button>
+            }
+          />
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={isCurrentlyAuthenticating}>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="passkeyId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Passkey</FormLabel>
+
+                  <FormControl>
+                    <Select {...field} onValueChange={field.onChange}>
+                      <SelectTrigger className="bg-background text-muted-foreground">
+                        <SelectValue
+                          data-testid="documentAccessSelectValue"
+                          placeholder={_(msg`Select passkey`)}
+                        />
+                      </SelectTrigger>
+
+                      <SelectContent position="popper">
+                        {passkeyData.passkeys.map((passkey) => (
+                          <SelectItem key={passkey.id} value={passkey.id}>
+                            {passkey.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {formErrorCode && (
+              <Alert variant="destructive">
+                <AlertTitle>Unauthorized</AlertTitle>
+                <AlertDescription>
+                  We were unable to verify your details. Please try again or contact support
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+
+              <Button type="submit" loading={isCurrentlyAuthenticating}>
+                Sign
+              </Button>
+            </DialogFooter>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -0,0 +1,222 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+import { type Document, FieldType, type Passkey, type Recipient, type User } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
+import type {
+  TDocumentAuthOptions,
+  TRecipientAccessAuthTypes,
+  TRecipientActionAuthTypes,
+  TRecipientAuthOptions,
+} from '@documenso/lib/types/document-auth';
+import { DocumentAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { trpc } from '@documenso/trpc/react';
+
+import type { DocumentSigningAuthDialogProps } from './document-signing-auth-dialog';
+import { DocumentSigningAuthDialog } from './document-signing-auth-dialog';
+
+type PasskeyData = {
+  passkeys: Omit<Passkey, 'credentialId' | 'credentialPublicKey'>[];
+  isInitialLoading: boolean;
+  isRefetching: boolean;
+  isError: boolean;
+};
+
+export type DocumentSigningAuthContextValue = {
+  executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;
+  documentAuthOptions: Document['authOptions'];
+  documentAuthOption: TDocumentAuthOptions;
+  setDocumentAuthOptions: (_value: Document['authOptions']) => void;
+  recipient: Recipient;
+  recipientAuthOption: TRecipientAuthOptions;
+  setRecipient: (_value: Recipient) => void;
+  derivedRecipientAccessAuth: TRecipientAccessAuthTypes | null;
+  derivedRecipientActionAuth: TRecipientActionAuthTypes | null;
+  isAuthRedirectRequired: boolean;
+  isCurrentlyAuthenticating: boolean;
+  setIsCurrentlyAuthenticating: (_value: boolean) => void;
+  passkeyData: PasskeyData;
+  preferredPasskeyId: string | null;
+  setPreferredPasskeyId: (_value: string | null) => void;
+  user?: User | null;
+  refetchPasskeys: () => Promise<void>;
+};
+
+const DocumentSigningAuthContext = createContext<DocumentSigningAuthContextValue | null>(null);
+
+export const useDocumentSigningAuthContext = () => {
+  return useContext(DocumentSigningAuthContext);
+};
+
+export const useRequiredDocumentSigningAuthContext = () => {
+  const context = useDocumentSigningAuthContext();
+
+  if (!context) {
+    throw new Error('Document signing auth context is required');
+  }
+
+  return context;
+};
+
+export interface DocumentSigningAuthProviderProps {
+  documentAuthOptions: Document['authOptions'];
+  recipient: Recipient;
+  user?: User | null;
+  children: React.ReactNode;
+}
+
+export const DocumentSigningAuthProvider = ({
+  documentAuthOptions: initialDocumentAuthOptions,
+  recipient: initialRecipient,
+  user,
+  children,
+}: DocumentSigningAuthProviderProps) => {
+  const [documentAuthOptions, setDocumentAuthOptions] = useState(initialDocumentAuthOptions);
+  const [recipient, setRecipient] = useState(initialRecipient);
+
+  const [isCurrentlyAuthenticating, setIsCurrentlyAuthenticating] = useState(false);
+  const [preferredPasskeyId, setPreferredPasskeyId] = useState<string | null>(null);
+
+  const {
+    documentAuthOption,
+    recipientAuthOption,
+    derivedRecipientAccessAuth,
+    derivedRecipientActionAuth,
+  } = useMemo(
+    () =>
+      extractDocumentAuthMethods({
+        documentAuth: documentAuthOptions,
+        recipientAuth: recipient.authOptions,
+      }),
+    [documentAuthOptions, recipient],
+  );
+
+  const passkeyQuery = trpc.auth.findPasskeys.useQuery(
+    {
+      perPage: MAXIMUM_PASSKEYS,
+    },
+    {
+      placeholderData: (previousData) => previousData,
+      enabled: derivedRecipientActionAuth === DocumentAuth.PASSKEY,
+    },
+  );
+
+  const passkeyData: PasskeyData = {
+    passkeys: passkeyQuery.data?.data || [],
+    isInitialLoading: passkeyQuery.isInitialLoading,
+    isRefetching: passkeyQuery.isRefetching,
+    isError: passkeyQuery.isError,
+  };
+
+  const [documentAuthDialogPayload, setDocumentAuthDialogPayload] =
+    useState<ExecuteActionAuthProcedureOptions | null>(null);
+
+  /**
+   * The pre calculated auth payload if the current user is authenticated correctly
+   * for the `derivedRecipientActionAuth`.
+   *
+   * Will be `null` if the user still requires authentication, or if they don't need
+   * authentication.
+   */
+  const preCalculatedActionAuthOptions = match(derivedRecipientActionAuth)
+    .with(DocumentAuth.ACCOUNT, () => {
+      if (recipient.email !== user?.email) {
+        return null;
+      }
+
+      return {
+        type: DocumentAuth.ACCOUNT,
+      };
+    })
+    .with(DocumentAuth.EXPLICIT_NONE, () => ({
+      type: DocumentAuth.EXPLICIT_NONE,
+    }))
+    .with(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH, null, () => null)
+    .exhaustive();
+
+  const executeActionAuthProcedure = async (options: ExecuteActionAuthProcedureOptions) => {
+    // Directly run callback if no auth required.
+    if (!derivedRecipientActionAuth || options.actionTarget !== FieldType.SIGNATURE) {
+      await options.onReauthFormSubmit();
+      return;
+    }
+
+    // Run callback with precalculated auth options if available.
+    if (preCalculatedActionAuthOptions) {
+      setDocumentAuthDialogPayload(null);
+      await options.onReauthFormSubmit(preCalculatedActionAuthOptions);
+      return;
+    }
+
+    // Request the required auth from the user.
+    setDocumentAuthDialogPayload({
+      ...options,
+    });
+  };
+
+  useEffect(() => {
+    const { passkeys } = passkeyData;
+
+    if (!preferredPasskeyId && passkeys.length > 0) {
+      setPreferredPasskeyId(passkeys[0].id);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [passkeyData.passkeys]);
+
+  // Assume that a user must be logged in for any auth requirements.
+  const isAuthRedirectRequired = Boolean(
+    derivedRecipientActionAuth &&
+      derivedRecipientActionAuth !== DocumentAuth.EXPLICIT_NONE &&
+      user?.email !== recipient.email,
+  );
+
+  const refetchPasskeys = async () => {
+    await passkeyQuery.refetch();
+  };
+
+  return (
+    <DocumentSigningAuthContext.Provider
+      value={{
+        user,
+        documentAuthOptions,
+        setDocumentAuthOptions,
+        executeActionAuthProcedure,
+        recipient,
+        setRecipient,
+        documentAuthOption,
+        recipientAuthOption,
+        derivedRecipientAccessAuth,
+        derivedRecipientActionAuth,
+        isAuthRedirectRequired,
+        isCurrentlyAuthenticating,
+        setIsCurrentlyAuthenticating,
+        passkeyData,
+        preferredPasskeyId,
+        setPreferredPasskeyId,
+        refetchPasskeys,
+      }}
+    >
+      {children}
+
+      {documentAuthDialogPayload && derivedRecipientActionAuth && (
+        <DocumentSigningAuthDialog
+          open={true}
+          onOpenChange={() => setDocumentAuthDialogPayload(null)}
+          onReauthFormSubmit={documentAuthDialogPayload.onReauthFormSubmit}
+          actionTarget={documentAuthDialogPayload.actionTarget}
+          documentAuthType={derivedRecipientActionAuth}
+        />
+      )}
+    </DocumentSigningAuthContext.Provider>
+  );
+};
+
+type ExecuteActionAuthProcedureOptions = Omit<
+  DocumentSigningAuthDialogProps,
+  'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole'
+>;
+
+DocumentSigningAuthProvider.displayName = 'DocumentSigningAuthProvider';

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -0,0 +1,232 @@
+import { useState, useTransition } from 'react';
+
+import { Plural, Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Field, Recipient } from '@prisma/client';
+import { FieldType } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { P, match } from 'ts-pattern';
+
+import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+import { DocumentAuth } from '@documenso/lib/types/document-auth';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { Form } from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+const AUTO_SIGNABLE_FIELD_TYPES: string[] = [
+  FieldType.NAME,
+  FieldType.INITIALS,
+  FieldType.EMAIL,
+  FieldType.DATE,
+];
+
+// The action auth types that are not allowed to be auto signed
+//
+// Reasoning: If the action auth is a passkey or 2FA, it's likely that the owner of the document
+// intends on having the user manually sign due to the additional security measures employed for
+// other field types.
+const NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES: string[] = [
+  DocumentAuth.PASSKEY,
+  DocumentAuth.TWO_FACTOR_AUTH,
+];
+
+// The threshold for the number of fields that could be autosigned before displaying the dialog
+//
+// Reasoning: If there aren't that many fields, it's likely going to be easier to manually sign each one
+// while for larger documents with many fields it will be beneficial to sign away the boilerplate fields.
+const AUTO_SIGN_THRESHOLD = 5;
+
+export type DocumentSigningAutoSignProps = {
+  recipient: Pick<Recipient, 'id' | 'token'>;
+  fields: Field[];
+};
+
+export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAutoSignProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { email, fullName } = useRequiredDocumentSigningContext();
+  const { derivedRecipientActionAuth } = useRequiredDocumentSigningAuthContext();
+
+  const [open, setOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  const form = useForm();
+
+  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
+
+  const autoSignableFields = fields.filter((field) => {
+    if (field.inserted) {
+      return false;
+    }
+
+    if (!AUTO_SIGNABLE_FIELD_TYPES.includes(field.type)) {
+      return false;
+    }
+
+    if (field.type === FieldType.NAME && !fullName) {
+      return false;
+    }
+
+    if (field.type === FieldType.INITIALS && !fullName) {
+      return false;
+    }
+
+    if (field.type === FieldType.EMAIL && !email) {
+      return false;
+    }
+
+    return true;
+  });
+
+  const actionAuthAllowsAutoSign = !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(
+    derivedRecipientActionAuth ?? '',
+  );
+
+  const onSubmit = async () => {
+    const results = await Promise.allSettled(
+      autoSignableFields.map(async (field) => {
+        const value = match(field.type)
+          .with(FieldType.NAME, () => fullName)
+          .with(FieldType.INITIALS, () => extractInitials(fullName))
+          .with(FieldType.EMAIL, () => email)
+          .with(FieldType.DATE, () => new Date().toISOString())
+          .otherwise(() => '');
+
+        const authOptions = match(derivedRecipientActionAuth)
+          .with(DocumentAuth.ACCOUNT, () => ({
+            type: DocumentAuth.ACCOUNT,
+          }))
+          .with(DocumentAuth.EXPLICIT_NONE, () => ({
+            type: DocumentAuth.EXPLICIT_NONE,
+          }))
+          .with(null, () => undefined)
+          .with(
+            P.union(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH),
+            // This is a bit dirty, but the sentinel value used here is incredibly short-lived.
+            () => 'NOT_SUPPORTED' as const,
+          )
+          .exhaustive();
+
+        if (authOptions === 'NOT_SUPPORTED') {
+          throw new Error('Action auth is not supported for auto signing');
+        }
+
+        if (!value) {
+          throw new Error('No value to sign');
+        }
+
+        return await signFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+          value,
+          isBase64: false,
+          authOptions,
+        });
+      }),
+    );
+
+    if (results.some((result) => result.status === 'rejected')) {
+      toast({
+        title: _(msg`Error`),
+        description: _(
+          msg`An error occurred while auto-signing the document, some fields may not be signed. Please review and manually sign any remaining fields.`,
+        ),
+        duration: 5000,
+        variant: 'destructive',
+      });
+    }
+
+    startTransition(() => {
+      // Todo
+      // router.refresh();
+
+      setOpen(false);
+    });
+  };
+
+  unsafe_useEffectOnce(() => {
+    if (actionAuthAllowsAutoSign && autoSignableFields.length > AUTO_SIGN_THRESHOLD) {
+      setOpen(true);
+    }
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Automatically sign fields</DialogTitle>
+        </DialogHeader>
+
+        <div className="text-muted-foreground max-w-[50ch]">
+          <p>
+            <Trans>
+              When you sign a document, we can automatically fill in and sign the following fields
+              using information that has already been provided. You can also manually sign or remove
+              any automatically signed fields afterwards if you desire.
+            </Trans>
+          </p>
+
+          <ul className="mt-4 flex list-inside list-disc flex-col gap-y-0.5">
+            {AUTO_SIGNABLE_FIELD_TYPES.map((fieldType) => (
+              <li key={fieldType}>
+                <Trans>{_(FRIENDLY_FIELD_TYPE[fieldType as FieldType])}</Trans>
+                <span className="pl-2 text-sm">
+                  (
+                  <Plural
+                    value={autoSignableFields.filter((f) => f.type === fieldType).length}
+                    one="1 matching field"
+                    other="# matching fields"
+                  />
+                  )
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <DocumentSigningDisclosure className="mt-4" />
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogFooter className="flex w-full flex-1 flex-nowrap gap-2">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                className="min-w-[6rem]"
+                loading={form.formState.isSubmitting || isPending}
+                disabled={!autoSignableFields.length}
+              >
+                <Trans>Sign</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -0,0 +1,303 @@
+import { useEffect, useMemo, useState, useTransition } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
+import { fromCheckboxValue, toCheckboxValue } from '@documenso/lib/universal/field-checkbox';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import { checkboxValidationSigns } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningCheckboxFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningCheckboxField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningCheckboxFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
+
+  const values = parsedFieldMeta.values?.map((item) => ({
+    ...item,
+    value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+  }));
+
+  const [checkedValues, setCheckedValues] = useState(
+    values
+      ?.map((item) =>
+        item.checked ? (item.value.length > 0 ? item.value : `empty-value-${item.id}`) : '',
+      )
+      .filter(Boolean) || [],
+  );
+
+  const isReadOnly = parsedFieldMeta.readOnly;
+
+  const checkboxValidationRule = parsedFieldMeta.validationRule;
+  const checkboxValidationLength = parsedFieldMeta.validationLength;
+  const validationSign = checkboxValidationSigns.find(
+    (sign) => sign.label === checkboxValidationRule,
+  );
+
+  const isLengthConditionMet = useMemo(() => {
+    if (!validationSign) return true;
+    return (
+      (validationSign.value === '>=' && checkedValues.length >= (checkboxValidationLength || 0)) ||
+      (validationSign.value === '=' && checkedValues.length === (checkboxValidationLength || 0)) ||
+      (validationSign.value === '<=' && checkedValues.length <= (checkboxValidationLength || 0))
+    );
+  }, [checkedValues, validationSign, checkboxValidationLength]);
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && checkedValues.length > 0 && isLengthConditionMet) ||
+    (!field.inserted && isReadOnly && isLengthConditionMet);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: toCheckboxValue(checkedValues),
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async (fieldType?: string) => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      if (fieldType === 'Checkbox') {
+        setCheckedValues([]);
+      }
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleCheckboxChange = (value: string, itemId: number) => {
+    const updatedValue = value || `empty-value-${itemId}`;
+    const updatedValues = checkedValues.includes(updatedValue)
+      ? checkedValues.filter((v) => v !== updatedValue)
+      : [...checkedValues, updatedValue];
+
+    setCheckedValues(updatedValues);
+  };
+
+  const handleCheckboxOptionClick = async (item: {
+    id: number;
+    checked: boolean;
+    value: string;
+  }) => {
+    let updatedValues: string[] = [];
+
+    try {
+      const isChecked = checkedValues.includes(
+        item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+      );
+
+      if (!isChecked) {
+        updatedValues = [
+          ...checkedValues,
+          item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+        ];
+
+        await removeSignedFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+        });
+
+        if (isLengthConditionMet) {
+          await signFieldWithToken({
+            token: recipient.token,
+            fieldId: field.id,
+            value: toCheckboxValue(checkedValues),
+            isBase64: true,
+          });
+        }
+      } else {
+        updatedValues = checkedValues.filter(
+          (v) => v !== item.value && v !== `empty-value-${item.id}`,
+        );
+
+        await removeSignedFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while updating the signature.`),
+        variant: 'destructive',
+      });
+    } finally {
+      setCheckedValues(updatedValues);
+
+      // Todo
+      // startTransition(() => router.refresh());
+    }
+  };
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [checkedValues, isLengthConditionMet, field.inserted]);
+
+  const parsedCheckedValues = useMemo(
+    () => fromCheckboxValue(field.customText),
+    [field.customText],
+  );
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Checkbox"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <>
+          {!isLengthConditionMet && (
+            <FieldToolTip key={field.id} field={field} color="warning" className="">
+              {validationSign?.label} {checkboxValidationLength}
+            </FieldToolTip>
+          )}
+          <div className="z-50 flex flex-col gap-y-2">
+            {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
+              const itemValue = item.value || `empty-value-${item.id}`;
+
+              return (
+                <div key={index} className="flex items-center gap-x-1.5">
+                  <Checkbox
+                    className="h-4 w-4"
+                    id={`checkbox-${index}`}
+                    checked={checkedValues.includes(itemValue)}
+                    onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
+                  />
+                  <Label htmlFor={`checkbox-${index}`}>
+                    {item.value.includes('empty-value-') ? '' : item.value}
+                  </Label>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {field.inserted && (
+        <div className="flex flex-col gap-y-1">
+          {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
+            const itemValue = item.value || `empty-value-${item.id}`;
+
+            return (
+              <div key={index} className="flex items-center gap-x-1.5">
+                <Checkbox
+                  className="h-3 w-3"
+                  id={`checkbox-${index}`}
+                  checked={parsedCheckedValues.includes(itemValue)}
+                  disabled={isLoading}
+                  onCheckedChange={() => void handleCheckboxOptionClick(item)}
+                />
+                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                  {item.value.includes('empty-value-') ? '' : item.value}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -0,0 +1,150 @@
+import { useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/macro';
+import type { Field } from '@prisma/client';
+import { RecipientRole } from '@prisma/client';
+
+import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+
+import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
+
+export type DocumentSigningCompleteDialogProps = {
+  isSubmitting: boolean;
+  documentTitle: string;
+  fields: Field[];
+  fieldsValidated: () => void | Promise<void>;
+  onSignatureComplete: () => void | Promise<void>;
+  role: RecipientRole;
+  disabled?: boolean;
+};
+
+export const DocumentSigningCompleteDialog = ({
+  isSubmitting,
+  documentTitle,
+  fields,
+  fieldsValidated,
+  onSignatureComplete,
+  role,
+  disabled = false,
+}: DocumentSigningCompleteDialogProps) => {
+  const [showDialog, setShowDialog] = useState(false);
+
+  const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
+
+  const handleOpenChange = (open: boolean) => {
+    if (isSubmitting || !isComplete) {
+      return;
+    }
+
+    setShowDialog(open);
+  };
+
+  return (
+    <Dialog open={showDialog} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button
+          className="w-full"
+          type="button"
+          size="lg"
+          onClick={fieldsValidated}
+          loading={isSubmitting}
+          disabled={disabled}
+        >
+          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogTitle>
+          <div className="text-foreground text-xl font-semibold">
+            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
+            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
+            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
+          </div>
+        </DialogTitle>
+
+        <div className="text-muted-foreground max-w-[50ch]">
+          {role === RecipientRole.VIEWER && (
+            <span>
+              <Trans>
+                <span className="inline-flex flex-wrap">
+                  You are about to complete viewing "
+                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    {documentTitle}
+                  </span>
+                  ".
+                </span>
+                <br /> Are you sure?
+              </Trans>
+            </span>
+          )}
+          {role === RecipientRole.SIGNER && (
+            <span>
+              <Trans>
+                <span className="inline-flex flex-wrap">
+                  You are about to complete signing "
+                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    {documentTitle}
+                  </span>
+                  ".
+                </span>
+                <br /> Are you sure?
+              </Trans>
+            </span>
+          )}
+          {role === RecipientRole.APPROVER && (
+            <span>
+              <Trans>
+                <span className="inline-flex flex-wrap">
+                  You are about to complete approving{' '}
+                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    "{documentTitle}"
+                  </span>
+                  .
+                </span>
+                <br /> Are you sure?
+              </Trans>
+            </span>
+          )}
+        </div>
+
+        <DocumentSigningDisclosure className="mt-4" />
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+              variant="secondary"
+              onClick={() => {
+                setShowDialog(false);
+              }}
+            >
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="button"
+              className="flex-1"
+              disabled={!isComplete}
+              loading={isSubmitting}
+              onClick={onSignatureComplete}
+            >
+              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
+              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
+              {role === RecipientRole.APPROVER && <Trans>Approve</Trans>}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -0,0 +1,155 @@
+import { useTransition } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningDateFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  dateFormat?: string | null;
+  timezone?: string | null;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningDateField = ({
+  field,
+  recipient,
+  dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
+  timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningDateFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
+
+  const isDifferentTime = field.inserted && localDateString !== field.customText;
+
+  const tooltipText = _(
+    msg`"${field.customText}" will appear on the document as it has a timezone of "${timezone}".`,
+  );
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Date"
+      tooltipText={isDifferentTime ? tooltipText : undefined}
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+          <Trans>Date</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {localDateString}
+        </p>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

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

@@ -5,9 +5,12 @@ import { Link } from 'react-router';
 
 import { cn } from '@documenso/ui/lib/utils';
 
-export type SigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
+export type DocumentSigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
 
-export const SigningDisclosure = ({ className, ...props }: SigningDisclosureProps) => {
+export const DocumentSigningDisclosure = ({
+  className,
+  ...props
+}: DocumentSigningDisclosureProps) => {
   return (
     <p className={cn('text-muted-foreground text-xs', className)} {...props}>
       <Trans>
@@ -21,7 +24,7 @@ export const SigningDisclosure = ({ className, ...props }: SigningDisclosureProp
           Read the full{' '}
           <Link
             className="text-documenso-700 underline"
-            href="/articles/signature-disclosure"
+            to="/articles/signature-disclosure"
             target="_blank"
           >
             signature disclosure

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useState, useTransition } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZDropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningDropdownFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningDropdownField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningDropdownFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const parsedFieldMeta = ZDropdownFieldMeta.parse(field.fieldMeta);
+  const isReadOnly = parsedFieldMeta?.readOnly;
+  const defaultValue = parsedFieldMeta?.defaultValue;
+  const [localChoice, setLocalChoice] = useState(parsedFieldMeta.defaultValue ?? '');
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && localChoice) || (!field.inserted && isReadOnly && defaultValue);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!localChoice) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: localChoice,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      setLocalChoice('');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onPreSign = () => {
+    return true;
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      setLocalChoice('');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSelectItem = (val: string) => {
+    setLocalChoice(val);
+  };
+
+  useEffect(() => {
+    if (!field.inserted && localChoice) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [localChoice]);
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  return (
+    <div className="pointer-events-none">
+      <DocumentSigningFieldContainer
+        field={field}
+        onPreSign={onPreSign}
+        onSign={onSign}
+        onRemove={onRemove}
+        type="Dropdown"
+      >
+        {isLoading && (
+          <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+            <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+          </div>
+        )}
+
+        {!field.inserted && (
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+            <Select value={localChoice} onValueChange={handleSelectItem}>
+              <SelectTrigger
+                className={cn(
+                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
+                  {
+                    'hover:text-red-300': parsedFieldMeta.required,
+                    'hover:text-yellow-300': !parsedFieldMeta.required,
+                  },
+                )}
+              >
+                <SelectValue
+                  className="text-[clamp(0.425rem,25cqw,0.825rem)]"
+                  placeholder={`${_(msg`Select`)}`}
+                />
+              </SelectTrigger>
+              <SelectContent className="w-full ring-0 focus:ring-0" position="popper">
+                {parsedFieldMeta?.values?.map((item, index) => (
+                  <SelectItem key={index} value={item.value} className="ring-0 focus:ring-0">
+                    {item.value}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </p>
+        )}
+
+        {field.inserted && (
+          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+            {field.customText}
+          </p>
+        )}
+      </DocumentSigningFieldContainer>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-email-field.tsx

@@ -0,0 +1,138 @@
+import { useTransition } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningEmailFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningEmailField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningEmailFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { email: providedEmail } = useRequiredDocumentSigningContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const value = providedEmail ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: false,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+          <Trans>Email</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+
+import { Trans } from '@lingui/macro';
+import { FieldType } from '@prisma/client';
+import { X } from 'lucide-react';
+
+import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { cn } from '@documenso/ui/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningFieldContainerProps = {
+  field: FieldWithSignature;
+  loading?: boolean;
+  children: React.ReactNode;
+
+  /**
+   * A function that is called before the field requires to be signed, or reauthed.
+   *
+   * Example, you may want to show a dialog prior to signing where they can enter a value.
+   *
+   * Once that action is complete, you will need to call `executeActionAuthProcedure` to proceed
+   * regardless if it requires reauth or not.
+   *
+   * If the function returns true, we will proceed with the signing process. Otherwise if
+   * false is returned we will not proceed.
+   */
+  onPreSign?: () => Promise<boolean> | boolean;
+
+  /**
+   * The function required to be executed to insert the field.
+   *
+   * The auth values will be passed in if available.
+   */
+  onSign?: (documentAuthValue?: TRecipientActionAuth) => Promise<void> | void;
+  onRemove?: (fieldType?: string) => Promise<void> | void;
+  type?:
+    | 'Date'
+    | 'Initials'
+    | 'Email'
+    | 'Name'
+    | 'Signature'
+    | 'Radio'
+    | 'Dropdown'
+    | 'Number'
+    | 'Checkbox';
+  tooltipText?: string | null;
+};
+
+export const DocumentSigningFieldContainer = ({
+  field,
+  loading,
+  onPreSign,
+  onSign,
+  onRemove,
+  children,
+  type,
+  tooltipText,
+}: DocumentSigningFieldContainerProps) => {
+  const { executeActionAuthProcedure, isAuthRedirectRequired } =
+    useRequiredDocumentSigningAuthContext();
+
+  const parsedFieldMeta = field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined;
+  const readOnlyField = parsedFieldMeta?.readOnly || false;
+
+  const handleInsertField = async () => {
+    if (field.inserted || !onSign) {
+      return;
+    }
+
+    // Bypass reauth for non signature fields.
+    if (field.type !== FieldType.SIGNATURE) {
+      const presignResult = await onPreSign?.();
+
+      if (presignResult === false) {
+        return;
+      }
+
+      await onSign();
+      return;
+    }
+
+    if (isAuthRedirectRequired) {
+      await executeActionAuthProcedure({
+        onReauthFormSubmit: () => {
+          // Do nothing since the user should be redirected.
+        },
+        actionTarget: field.type,
+      });
+
+      return;
+    }
+
+    // Handle any presign requirements, and halt if required.
+    if (onPreSign) {
+      const preSignResult = await onPreSign();
+
+      if (preSignResult === false) {
+        return;
+      }
+    }
+
+    await executeActionAuthProcedure({
+      onReauthFormSubmit: onSign,
+      actionTarget: field.type,
+    });
+  };
+
+  const onRemoveSignedFieldClick = async () => {
+    if (!field.inserted) {
+      return;
+    }
+
+    await onRemove?.();
+  };
+
+  const onClearCheckBoxValues = async (fieldType?: string) => {
+    if (!field.inserted) {
+      return;
+    }
+
+    await onRemove?.(fieldType);
+  };
+
+  return (
+    <div className={cn('[container-type:size]', { group: type === 'Checkbox' })}>
+      <FieldRootContainer field={field}>
+        {!field.inserted && !loading && !readOnlyField && (
+          <button
+            type="submit"
+            className="absolute inset-0 z-10 h-full w-full rounded-md border"
+            onClick={async () => handleInsertField()}
+          />
+        )}
+
+        {readOnlyField && (
+          <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
+            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
+              <Trans>Read only field</Trans>
+            </span>
+          </button>
+        )}
+
+        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button
+                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+                onClick={onRemoveSignedFieldClick}
+              >
+                <Trans>Remove</Trans>
+              </button>
+            </TooltipTrigger>
+
+            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
+          </Tooltip>
+        )}
+
+        {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            onClick={() => void onClearCheckBoxValues(type)}
+          >
+            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+              <X className="h-4 w-4" />
+            </span>
+          </button>
+        )}
+
+        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+            onClick={onRemoveSignedFieldClick}
+          >
+            <Trans>Remove</Trans>
+          </button>
+        )}
+
+        {children}
+      </FieldRootContainer>
+    </div>
+  );
+};

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

@@ -0,0 +1,264 @@
+import { useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/macro';
+import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/client';
+import { 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 { trpc } from '@documenso/trpc/react';
+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';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+
+import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningFormProps = {
+  document: DocumentAndSender;
+  recipient: Recipient;
+  fields: Field[];
+  redirectUrl?: string | null;
+  isRecipientsTurn: boolean;
+};
+
+export const DocumentSigningForm = ({
+  document,
+  recipient,
+  fields,
+  redirectUrl,
+  isRecipientsTurn,
+}: DocumentSigningFormProps) => {
+  const navigate = useNavigate();
+  const analytics = useAnalytics();
+
+  const { user } = useOptionalSession();
+
+  const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
+    useRequiredDocumentSigningContext();
+
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+
+  const { mutateAsync: completeDocumentWithToken } =
+    trpc.recipient.completeDocumentWithToken.useMutation();
+
+  const { handleSubmit, formState } = useForm();
+
+  // Keep the loading state going if successful since the redirect may take some time.
+  const isSubmitting = formState.isSubmitting || formState.isSubmitSuccessful;
+
+  const fieldsRequiringValidation = useMemo(
+    () => fields.filter(isFieldUnsignedAndRequired),
+    [fields],
+  );
+
+  const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
+
+  const uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(fieldsRequiringValidation.filter((field) => !field.inserted));
+  }, [fields]);
+
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(fieldsRequiringValidation);
+  };
+
+  const onFormSubmit = async () => {
+    setValidateUninsertedFields(true);
+
+    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
+
+    if (hasSignatureField && !signatureValid) {
+      return;
+    }
+
+    if (!isFieldsValid) {
+      return;
+    }
+
+    await completeDocument();
+
+    // Reauth is currently not required for completing the document.
+    // await executeActionAuthProcedure({
+    //   onReauthFormSubmit: completeDocument,
+    //   actionTarget: 'DOCUMENT',
+    // });
+  };
+
+  const completeDocument = async (authOptions?: TRecipientActionAuth) => {
+    await completeDocumentWithToken({
+      token: recipient.token,
+      documentId: document.id,
+      authOptions,
+    });
+
+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: document.id,
+      timestamp: new Date().toISOString(),
+    });
+
+    redirectUrl ? navigate(redirectUrl) : navigate(`/sign/${recipient.token}/complete`);
+  };
+
+  return (
+    <form
+      className={cn(
+        'dark:bg-background border-border bg-widget sticky flex h-full flex-col rounded-xl border px-4 py-6',
+        {
+          'top-20 max-h-[min(68rem,calc(100vh-6rem))]': user,
+          'top-4 max-h-[min(68rem,calc(100vh-2rem))]': !user,
+        },
+      )}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      {validateUninsertedFields && uninsertedFields[0] && (
+        <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+          <Trans>Click to insert field</Trans>
+        </FieldToolTip>
+      )}
+
+      <fieldset
+        disabled={isSubmitting}
+        className={cn(
+          'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+        )}
+      >
+        <div className={cn('flex flex-1 flex-col')}>
+          <h3 className="text-foreground text-2xl font-semibold">
+            {recipient.role === RecipientRole.VIEWER && <Trans>View Document</Trans>}
+            {recipient.role === RecipientRole.SIGNER && <Trans>Sign Document</Trans>}
+            {recipient.role === RecipientRole.APPROVER && <Trans>Approve Document</Trans>}
+          </h3>
+
+          {recipient.role === RecipientRole.VIEWER ? (
+            <>
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Please mark as viewed to complete</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+
+              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+                <div className="flex flex-1 flex-col gap-y-4" />
+                <div className="flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={() => navigate(-1)}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <DocumentSigningCompleteDialog
+                    isSubmitting={isSubmitting}
+                    onSignatureComplete={handleSubmit(onFormSubmit)}
+                    documentTitle={document.title}
+                    fields={fields}
+                    fieldsValidated={fieldsValidated}
+                    role={recipient.role}
+                    disabled={!isRecipientsTurn}
+                  />
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Please review the document before signing.</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+
+              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+                <div className="flex flex-1 flex-col gap-y-4">
+                  <div>
+                    <Label htmlFor="full-name">
+                      <Trans>Full Name</Trans>
+                    </Label>
+
+                    <Input
+                      type="text"
+                      id="full-name"
+                      className="bg-background mt-2"
+                      value={fullName}
+                      onChange={(e) => setFullName(e.target.value.trimStart())}
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="Signature">
+                      <Trans>Signature</Trans>
+                    </Label>
+
+                    <Card className="mt-2" gradient degrees={-120}>
+                      <CardContent className="p-0">
+                        <SignaturePad
+                          className="h-44 w-full"
+                          disabled={isSubmitting}
+                          defaultValue={signature ?? undefined}
+                          onValidityChange={(isValid) => {
+                            setSignatureValid(isValid);
+                          }}
+                          onChange={(value) => {
+                            if (signatureValid) {
+                              setSignature(value);
+                            }
+                          }}
+                          allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
+                        />
+                      </CardContent>
+                    </Card>
+
+                    {hasSignatureField && !signatureValid && (
+                      <div className="text-destructive mt-2 text-sm">
+                        <Trans>
+                          Signature is too small. Please provide a more complete signature.
+                        </Trans>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={() => navigate(-1)}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <DocumentSigningCompleteDialog
+                    isSubmitting={isSubmitting}
+                    onSignatureComplete={handleSubmit(onFormSubmit)}
+                    documentTitle={document.title}
+                    fields={fields}
+                    fieldsValidated={fieldsValidated}
+                    role={recipient.role}
+                    disabled={!isRecipientsTurn}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </fieldset>
+    </form>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx

@@ -0,0 +1,144 @@
+import { useTransition } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningInitialsFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningInitialsField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningInitialsFieldProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const { fullName } = useRequiredDocumentSigningContext();
+  const initials = extractInitials(fullName);
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const value = initials ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: false,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      // Tod
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the field.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Initials"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+          <Trans>Initials</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-name-field.tsx

@@ -0,0 +1,231 @@
+import { useState, useTransition } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { type Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningNameFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningNameField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningNameFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { fullName: providedFullName, setFullName: setProvidedFullName } =
+    useRequiredDocumentSigningContext();
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const [showFullNameModal, setShowFullNameModal] = useState(false);
+  const [localFullName, setLocalFullName] = useState('');
+
+  const onPreSign = () => {
+    if (!providedFullName) {
+      setShowFullNameModal(true);
+      return false;
+    }
+
+    return true;
+  };
+
+  /**
+   * When the user clicks the sign button in the dialog where they enter their full name.
+   */
+  const onDialogSignClick = () => {
+    setShowFullNameModal(false);
+    setProvidedFullName(localFullName);
+
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions, localFullName),
+      actionTarget: field.type,
+    });
+  };
+
+  const onSign = async (authOptions?: TRecipientActionAuth, name?: string) => {
+    try {
+      const value = name || providedFullName;
+
+      if (!value) {
+        setShowFullNameModal(true);
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: false,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onPreSign={onPreSign}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Name"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+          <Trans>Name</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+
+      <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
+        <DialogContent>
+          <DialogTitle>
+            <Trans>
+              Sign as
+              <div>
+                {recipient.name} <div className="text-muted-foreground">({recipient.email})</div>
+              </div>
+            </Trans>
+          </DialogTitle>
+
+          <div>
+            <Label htmlFor="signature">
+              <Trans>Full Name</Trans>
+            </Label>
+
+            <Input
+              type="text"
+              className="mt-2"
+              value={localFullName}
+              onChange={(e) => setLocalFullName(e.target.value.trimStart())}
+            />
+          </div>
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowFullNameModal(false);
+                  setLocalFullName('');
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localFullName}
+                onClick={() => onDialogSignClick()}
+              >
+                <Trans>Sign</Trans>
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -0,0 +1,347 @@
+import { useEffect, useState, useTransition } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Hash, Loader } from 'lucide-react';
+
+import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZNumberFieldMeta } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+type ValidationErrors = {
+  isNumber: string[];
+  required: string[];
+  minValue: string[];
+  maxValue: string[];
+  numberFormat: string[];
+};
+
+export type DocumentSigningNumberFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningNumberField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningNumberFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+  const [showRadioModal, setShowRadioModal] = useState(false);
+
+  const parsedFieldMeta = field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null;
+  const isReadOnly = parsedFieldMeta?.readOnly;
+  const defaultValue = parsedFieldMeta?.value;
+  const [localNumber, setLocalNumber] = useState(
+    parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0',
+  );
+
+  const initialErrors: ValidationErrors = {
+    isNumber: [],
+    required: [],
+    minValue: [],
+    maxValue: [],
+    numberFormat: [],
+  };
+
+  const [errors, setErrors] = useState(initialErrors);
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value;
+    setLocalNumber(text);
+
+    if (parsedFieldMeta) {
+      const validationErrors = validateNumberField(text, parsedFieldMeta, true);
+      setErrors({
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+        required: validationErrors.filter((error) => error.includes('required')),
+        minValue: validationErrors.filter((error) => error.includes('minimum value')),
+        maxValue: validationErrors.filter((error) => error.includes('maximum value')),
+        numberFormat: validationErrors.filter((error) => error.includes('number format')),
+      });
+    } else {
+      const validationErrors = validateNumberField(text);
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+      }));
+    }
+  };
+
+  const onDialogSignClick = () => {
+    setShowRadioModal(false);
+
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+      actionTarget: field.type,
+    });
+  };
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!localNumber || Object.values(errors).some((error) => error.length > 0)) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: localNumber,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      setLocalNumber('');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onPreSign = () => {
+    setShowRadioModal(true);
+
+    if (localNumber && parsedFieldMeta) {
+      const validationErrors = validateNumberField(localNumber, parsedFieldMeta, true);
+      setErrors({
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+        required: validationErrors.filter((error) => error.includes('required')),
+        minValue: validationErrors.filter((error) => error.includes('minimum value')),
+        maxValue: validationErrors.filter((error) => error.includes('maximum value')),
+        numberFormat: validationErrors.filter((error) => error.includes('number format')),
+      });
+    }
+
+    return false;
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta?.value) : '');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!showRadioModal) {
+      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0');
+      setErrors(initialErrors);
+    }
+  }, [showRadioModal]);
+
+  useEffect(() => {
+    if (
+      (!field.inserted && defaultValue && localNumber) ||
+      (!field.inserted && isReadOnly && defaultValue)
+    ) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  let fieldDisplayName = 'Number';
+
+  if (parsedFieldMeta?.label) {
+    fieldDisplayName =
+      parsedFieldMeta.label.length > 10
+        ? parsedFieldMeta.label.substring(0, 10) + '...'
+        : parsedFieldMeta.label;
+  }
+
+  const userInputHasErrors = Object.values(errors).some((error) => error.length > 0);
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onPreSign={onPreSign}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Signature"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
+          </span>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+
+      <Dialog open={showRadioModal} onOpenChange={setShowRadioModal}>
+        <DialogContent>
+          <DialogTitle>
+            {parsedFieldMeta?.label ? parsedFieldMeta?.label : <Trans>Number</Trans>}
+          </DialogTitle>
+
+          <div>
+            <Input
+              type="text"
+              placeholder={parsedFieldMeta?.placeholder ?? ''}
+              className={cn('mt-2 w-full rounded-md', {
+                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                  userInputHasErrors,
+              })}
+              value={localNumber}
+              onChange={handleNumberChange}
+            />
+          </div>
+
+          {userInputHasErrors && (
+            <div>
+              {errors.isNumber?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.required?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.minValue?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.maxValue?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.numberFormat?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+            </div>
+          )}
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowRadioModal(false);
+                  setLocalNumber('');
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localNumber || userInputHasErrors}
+                onClick={() => onDialogSignClick()}
+              >
+                <Trans>Save</Trans>
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -0,0 +1,245 @@
+import { Trans } from '@lingui/macro';
+import type { Field, Recipient } from '@prisma/client';
+import { FieldType, RecipientRole } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import type { CompletedField } from '@documenso/lib/types/fields';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+
+import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
+import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
+import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
+import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
+import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
+import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
+import { DocumentSigningForm } from '~/components/general/document-signing/document-signing-form';
+import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
+import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
+import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
+import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
+import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
+import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
+import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+
+export type SigningPageViewProps = {
+  document: DocumentAndSender;
+  recipient: Recipient;
+  fields: Field[];
+  completedFields: CompletedField[];
+  isRecipientsTurn: boolean;
+};
+
+export const DocumentSigningPageView = ({
+  document,
+  recipient,
+  fields,
+  completedFields,
+  isRecipientsTurn,
+}: SigningPageViewProps) => {
+  const { documentData, documentMeta } = document;
+
+  const shouldUseTeamDetails =
+    document.teamId && document.team?.teamGlobalSettings?.includeSenderDetails === false;
+
+  let senderName = document.user.name ?? '';
+  let senderEmail = `(${document.user.email})`;
+
+  if (shouldUseTeamDetails) {
+    senderName = document.team?.name ?? '';
+    senderEmail = document.team?.teamEmail?.email ? `(${document.team.teamEmail.email})` : '';
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl">
+      <h1
+        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+        title={document.title}
+      >
+        {document.title}
+      </h1>
+
+      <div className="mt-2.5 flex flex-wrap items-center justify-between gap-x-6">
+        <div className="max-w-[50ch]">
+          <span className="text-muted-foreground truncate" title={senderName}>
+            {senderName} {senderEmail}
+          </span>{' '}
+          <span className="text-muted-foreground">
+            {match(recipient.role)
+              .with(RecipientRole.VIEWER, () =>
+                document.teamId && !shouldUseTeamDetails ? (
+                  <Trans>
+                    on behalf of "{document.team?.name}" has invited you to view this document
+                  </Trans>
+                ) : (
+                  <Trans>has invited you to view this document</Trans>
+                ),
+              )
+              .with(RecipientRole.SIGNER, () =>
+                document.teamId && !shouldUseTeamDetails ? (
+                  <Trans>
+                    on behalf of "{document.team?.name}" has invited you to sign this document
+                  </Trans>
+                ) : (
+                  <Trans>has invited you to sign this document</Trans>
+                ),
+              )
+              .with(RecipientRole.APPROVER, () =>
+                document.teamId && !shouldUseTeamDetails ? (
+                  <Trans>
+                    on behalf of "{document.team?.name}" has invited you to approve this document
+                  </Trans>
+                ) : (
+                  <Trans>has invited you to approve this document</Trans>
+                ),
+              )
+              .otherwise(() => null)}
+          </span>
+        </div>
+
+        <DocumentSigningRejectDialog document={document} token={recipient.token} />
+      </div>
+
+      <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
+        <Card
+          className="col-span-12 rounded-xl before:rounded-xl lg:col-span-7 xl:col-span-8"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer
+              key={documentData.id}
+              documentData={documentData}
+              document={document}
+              password={documentMeta?.password}
+            />
+          </CardContent>
+        </Card>
+
+        <div className="col-span-12 lg:col-span-5 xl:col-span-4">
+          <DocumentSigningForm
+            document={document}
+            recipient={recipient}
+            fields={fields}
+            redirectUrl={documentMeta?.redirectUrl}
+            isRecipientsTurn={isRecipientsTurn}
+          />
+        </div>
+      </div>
+
+      <DocumentReadOnlyFields fields={completedFields} />
+
+      <DocumentSigningAutoSign recipient={recipient} fields={fields} />
+
+      <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        {fields.map((field) =>
+          match(field.type)
+            .with(FieldType.SIGNATURE, () => (
+              <DocumentSigningSignatureField
+                key={field.id}
+                field={field}
+                recipient={recipient}
+                typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+              />
+            ))
+            .with(FieldType.INITIALS, () => (
+              <DocumentSigningInitialsField key={field.id} field={field} recipient={recipient} />
+            ))
+            .with(FieldType.NAME, () => (
+              <DocumentSigningNameField key={field.id} field={field} recipient={recipient} />
+            ))
+            .with(FieldType.DATE, () => (
+              <DocumentSigningDateField
+                key={field.id}
+                field={field}
+                recipient={recipient}
+                dateFormat={documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                timezone={documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+              />
+            ))
+            .with(FieldType.EMAIL, () => (
+              <DocumentSigningEmailField key={field.id} field={field} recipient={recipient} />
+            ))
+            .with(FieldType.TEXT, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningTextField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.NUMBER, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningNumberField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.RADIO, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZRadioFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningRadioField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.CHECKBOX, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZCheckboxFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningCheckboxField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.DROPDOWN, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZDropdownFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningDropdownField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .otherwise(() => null),
+        )}
+      </ElementVisible>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+export type DocumentSigningContextValue = {
+  fullName: string;
+  setFullName: (_value: string) => void;
+  email: string;
+  setEmail: (_value: string) => void;
+  signature: string | null;
+  setSignature: (_value: string | null) => void;
+  signatureValid: boolean;
+  setSignatureValid: (_valid: boolean) => void;
+};
+
+const DocumentSigningContext = createContext<DocumentSigningContextValue | null>(null);
+
+export const useDocumentSigningContext = () => {
+  return useContext(DocumentSigningContext);
+};
+
+export const useRequiredDocumentSigningContext = () => {
+  const context = useDocumentSigningContext();
+
+  if (!context) {
+    throw new Error('Signing context is required');
+  }
+
+  return context;
+};
+
+export interface DocumentSigningProviderProps {
+  fullName?: string | null;
+  email?: string | null;
+  signature?: string | null;
+  children: React.ReactNode;
+}
+
+export const DocumentSigningProvider = ({
+  fullName: initialFullName,
+  email: initialEmail,
+  signature: initialSignature,
+  children,
+}: DocumentSigningProviderProps) => {
+  const [fullName, setFullName] = useState(initialFullName || '');
+  const [email, setEmail] = useState(initialEmail || '');
+  const [signature, setSignature] = useState(initialSignature || null);
+  const [signatureValid, setSignatureValid] = useState(true);
+
+  useEffect(() => {
+    if (initialSignature) {
+      setSignature(initialSignature);
+    }
+  }, [initialSignature]);
+
+  return (
+    <DocumentSigningContext.Provider
+      value={{
+        fullName,
+        setFullName,
+        email,
+        setEmail,
+        signature,
+        setSignature,
+        signatureValid,
+        setSignatureValid,
+      }}
+    >
+      {children}
+    </DocumentSigningContext.Provider>
+  );
+};
+
+DocumentSigningProvider.displayName = 'DocumentSigningProvider';

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useState, useTransition } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { Label } from '@documenso/ui/primitives/label';
+import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningRadioFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningRadioField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningRadioFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+
+  const parsedFieldMeta = ZRadioFieldMeta.parse(field.fieldMeta);
+  const values = parsedFieldMeta.values?.map((item) => ({
+    ...item,
+    value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+  }));
+  const checkedItem = values?.find((item) => item.checked);
+  const defaultValue = !field.inserted && !!checkedItem ? checkedItem.value : '';
+
+  const [selectedOption, setSelectedOption] = useState(defaultValue);
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && selectedOption) ||
+    (!field.inserted && defaultValue) ||
+    (!field.inserted && parsedFieldMeta.readOnly && defaultValue);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!selectedOption) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: selectedOption,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      setSelectedOption('');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      setSelectedOption('');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSelectItem = (selectedOption: string) => {
+    setSelectedOption(selectedOption);
+  };
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [selectedOption, field]);
+
+  return (
+    <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Radio">
+      {isLoading && (
+        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
+          {values?.map((item, index) => (
+            <div key={index} className="flex items-center gap-x-1.5">
+              <RadioGroupItem
+                className="h-4 w-4 shrink-0"
+                value={item.value}
+                id={`option-${index}`}
+                checked={item.checked}
+              />
+
+              <Label htmlFor={`option-${index}`}>
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      )}
+
+      {field.inserted && (
+        <RadioGroup className="gap-y-1">
+          {values?.map((item, index) => (
+            <div key={index} className="flex items-center gap-x-1.5">
+              <RadioGroupItem
+                className="h-3 w-3"
+                value={item.value}
+                id={`option-${index}`}
+                checked={item.value === field.customText}
+              />
+              <Label htmlFor={`option-${index}`} className="text-xs">
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import type { Document } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { useSearchParams } from 'react-router';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZRejectDocumentFormSchema = z.object({
+  reason: z
+    .string()
+    .min(5, msg`Please provide a reason`)
+    .max(500, msg`Reason must be less than 500 characters`),
+});
+
+type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;
+
+export interface DocumentSigningRejectDialogProps {
+  document: Pick<Document, 'id'>;
+  token: string;
+}
+
+export function DocumentSigningRejectDialog({ document, token }: DocumentSigningRejectDialogProps) {
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: rejectDocumentWithToken } =
+    trpc.recipient.rejectDocumentWithToken.useMutation();
+
+  const form = useForm<TRejectDocumentFormSchema>({
+    resolver: zodResolver(ZRejectDocumentFormSchema),
+    defaultValues: {
+      reason: '',
+    },
+  });
+
+  const onRejectDocument = async ({ reason }: TRejectDocumentFormSchema) => {
+    try {
+      await rejectDocumentWithToken({
+        documentId: document.id,
+        token,
+        reason,
+      });
+
+      toast({
+        title: 'Document rejected',
+        description: 'The document has been successfully rejected.',
+        duration: 5000,
+      });
+
+      await navigate(`/sign/${token}/rejected`);
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while rejecting the document. Please try again.',
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (searchParams?.get('reject') === 'true') {
+      setIsOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <Trans>Reject Document</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reject Document</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              Are you sure you want to reject this document? This action cannot be undone.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onRejectDocument)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="reason"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      rows={4}
+                      placeholder="Please provide a reason for rejecting this document"
+                      disabled={form.formState.isSubmitting}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => setIsOpen(false)}
+                disabled={form.formState.isSubmitting}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={form.formState.isSubmitting}
+                disabled={!form.formState.isValid}
+              >
+                <Trans>Reject Document</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -0,0 +1,333 @@
+import { useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { type Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
+export type DocumentSigningSignatureFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+  typedSignatureEnabled?: boolean;
+};
+
+export const DocumentSigningSignatureField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+  typedSignatureEnabled,
+}: DocumentSigningSignatureFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const signatureRef = useRef<HTMLParagraphElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [fontSize, setFontSize] = useState(2);
+
+  const {
+    signature: providedSignature,
+    setSignature: setProvidedSignature,
+    signatureValid,
+    setSignatureValid,
+  } = useRequiredDocumentSigningContext();
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const { signature } = field;
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const [showSignatureModal, setShowSignatureModal] = useState(false);
+  const [localSignature, setLocalSignature] = useState<string | null>(null);
+
+  const state = useMemo<SignatureFieldState>(() => {
+    if (!field.inserted) {
+      return 'empty';
+    }
+
+    if (signature?.signatureImageAsBase64) {
+      return 'signed-image';
+    }
+
+    return 'signed-text';
+  }, [field.inserted, signature?.signatureImageAsBase64]);
+
+  const onPreSign = () => {
+    if (!providedSignature || !signatureValid) {
+      setShowSignatureModal(true);
+      return false;
+    }
+
+    return true;
+  };
+  /**
+   * When the user clicks the sign button in the dialog where they enter their signature.
+   */
+  const onDialogSignClick = () => {
+    setShowSignatureModal(false);
+    setProvidedSignature(localSignature);
+    if (!localSignature) {
+      return;
+    }
+
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions, localSignature),
+      actionTarget: field.type,
+    });
+  };
+
+  const onSign = async (authOptions?: TRecipientActionAuth, signature?: string) => {
+    try {
+      const value = signature || providedSignature;
+
+      if (!value || (signature && !signatureValid)) {
+        setShowSignatureModal(true);
+        return;
+      }
+
+      const isTypedSignature = !value.startsWith('data:image');
+
+      if (isTypedSignature && !typedSignatureEnabled) {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: !isTypedSignature,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (!signatureRef.current || !containerRef.current || !signature?.typedSignature) {
+      return;
+    }
+
+    const adjustTextSize = () => {
+      const container = containerRef.current;
+      const text = signatureRef.current;
+
+      if (!container || !text) {
+        return;
+      }
+
+      let size = 2;
+      text.style.fontSize = `${size}rem`;
+
+      while (
+        (text.scrollWidth > container.clientWidth || text.scrollHeight > container.clientHeight) &&
+        size > 0.8
+      ) {
+        size -= 0.1;
+        text.style.fontSize = `${size}rem`;
+      }
+
+      setFontSize(size);
+    };
+
+    const resizeObserver = new ResizeObserver(adjustTextSize);
+    resizeObserver.observe(containerRef.current);
+
+    adjustTextSize();
+
+    return () => resizeObserver.disconnect();
+  }, [signature?.typedSignature]);
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onPreSign={onPreSign}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Signature"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {state === 'empty' && (
+        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
+          <Trans>Signature</Trans>
+        </p>
+      )}
+
+      {state === 'signed-image' && signature?.signatureImageAsBase64 && (
+        <img
+          src={signature.signatureImageAsBase64}
+          alt={`Signature for ${recipient.name}`}
+          className="h-full w-full object-contain"
+        />
+      )}
+
+      {state === 'signed-text' && (
+        <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
+          <p
+            ref={signatureRef}
+            className="font-signature text-muted-foreground dark:text-background w-full overflow-hidden break-all text-center leading-tight duration-200"
+            style={{ fontSize: `${fontSize}rem` }}
+          >
+            {signature?.typedSignature}
+          </p>
+        </div>
+      )}
+
+      <Dialog open={showSignatureModal} onOpenChange={setShowSignatureModal}>
+        <DialogContent>
+          <DialogTitle>
+            <Trans>
+              Sign as {recipient.name}{' '}
+              <div className="text-muted-foreground h-5">({recipient.email})</div>
+            </Trans>
+          </DialogTitle>
+
+          <div className="">
+            <Label htmlFor="signature">
+              <Trans>Signature</Trans>
+            </Label>
+
+            <div className="border-border mt-2 rounded-md border">
+              <SignaturePad
+                id="signature"
+                className="h-44 w-full"
+                onChange={(value) => setLocalSignature(value)}
+                allowTypedSignature={typedSignatureEnabled}
+                onValidityChange={(isValid) => {
+                  setSignatureValid(isValid);
+                }}
+              />
+            </div>
+
+            {!signatureValid && (
+              <div className="text-destructive mt-2 text-sm">
+                <Trans>Signature is too small. Please provide a more complete signature.</Trans>
+              </div>
+            )}
+          </div>
+
+          <DocumentSigningDisclosure />
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowSignatureModal(false);
+                  setLocalSignature(null);
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localSignature || !signatureValid}
+                onClick={() => onDialogSignClick()}
+              >
+                <Trans>Sign</Trans>
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -0,0 +1,353 @@
+import { useEffect, useState, useTransition } from 'react';
+
+import { Plural, Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader, Type } from 'lucide-react';
+
+import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZTextFieldMeta } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningTextFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningTextField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningTextFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const initialErrors: Record<string, string[]> = {
+    required: [],
+    characterLimit: [],
+  };
+
+  const [errors, setErrors] = useState(initialErrors);
+  const userInputHasErrors = Object.values(errors).some((error) => error.length > 0);
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const parsedFieldMeta = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null;
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && parsedFieldMeta?.text) ||
+    (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly);
+
+  const [showCustomTextModal, setShowCustomTextModal] = useState(false);
+  const [localText, setLocalCustomText] = useState(parsedFieldMeta?.text ?? '');
+
+  useEffect(() => {
+    if (!showCustomTextModal) {
+      setLocalCustomText(parsedFieldMeta?.text ?? '');
+      setErrors(initialErrors);
+    }
+  }, [showCustomTextModal]);
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const text = e.target.value;
+    setLocalCustomText(text);
+
+    if (parsedFieldMeta) {
+      const validationErrors = validateTextField(text, parsedFieldMeta, true);
+      setErrors({
+        required: validationErrors.filter((error) => error.includes('required')),
+        characterLimit: validationErrors.filter((error) => error.includes('character limit')),
+      });
+    }
+  };
+
+  /**
+   * When the user clicks the sign button in the dialog where they enter the text field.
+   */
+  const onDialogSignClick = () => {
+    if (parsedFieldMeta) {
+      const validationErrors = validateTextField(localText, parsedFieldMeta, true);
+
+      if (validationErrors.length > 0) {
+        setErrors({
+          required: validationErrors.filter((error) => error.includes('required')),
+          characterLimit: validationErrors.filter((error) => error.includes('character limit')),
+        });
+        return;
+      }
+    }
+
+    setShowCustomTextModal(false);
+
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+      actionTarget: field.type,
+    });
+  };
+
+  const onPreSign = () => {
+    setShowCustomTextModal(true);
+
+    if (localText && parsedFieldMeta) {
+      const validationErrors = validateTextField(localText, parsedFieldMeta, true);
+      setErrors({
+        required: validationErrors.filter((error) => error.includes('required')),
+        characterLimit: validationErrors.filter((error) => error.includes('character limit')),
+      });
+    }
+
+    return false;
+  };
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!localText || userInputHasErrors) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: localText,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      setLocalCustomText('');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      setLocalCustomText(parsedFieldMeta?.text ?? '');
+
+      // Todo
+      // startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the text.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  const parsedField = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : undefined;
+
+  const labelDisplay =
+    parsedField?.label && parsedField.label.length < 20
+      ? parsedField.label
+      : parsedField?.label
+        ? parsedField?.label.substring(0, 20) + '...'
+        : undefined;
+
+  const textDisplay =
+    parsedField?.text && parsedField.text.length < 20
+      ? parsedField.text
+      : parsedField?.text
+        ? parsedField?.text.substring(0, 20) + '...'
+        : undefined;
+
+  const fieldDisplayName = labelDisplay ? labelDisplay : textDisplay;
+  const charactersRemaining = (parsedFieldMeta?.characterLimit ?? 0) - (localText.length ?? 0);
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onPreSign={onPreSign}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Signature"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+              {fieldDisplayName || <Trans>Text</Trans>}
+            </span>
+          </span>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText.length < 20
+            ? field.customText
+            : field.customText.substring(0, 15) + '...'}
+        </p>
+      )}
+
+      <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
+        <DialogContent>
+          <DialogTitle>
+            {parsedFieldMeta?.label ? parsedFieldMeta?.label : <Trans>Text</Trans>}
+          </DialogTitle>
+
+          <div>
+            <Textarea
+              id="custom-text"
+              placeholder={parsedFieldMeta?.placeholder ?? _(msg`Enter your text here`)}
+              className={cn('mt-2 w-full rounded-md', {
+                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                  userInputHasErrors,
+              })}
+              value={localText}
+              onChange={handleTextChange}
+            />
+          </div>
+
+          {parsedFieldMeta?.characterLimit !== undefined &&
+            parsedFieldMeta?.characterLimit > 0 &&
+            !userInputHasErrors && (
+              <div className="text-muted-foreground text-sm">
+                <Plural
+                  value={charactersRemaining}
+                  one="1 character remaining"
+                  other={`${charactersRemaining} characters remaining`}
+                />
+              </div>
+            )}
+
+          {userInputHasErrors && (
+            <div className="text-sm">
+              {errors.required.map((error, index) => (
+                <p key={index} className="text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.characterLimit.map((error, index) => (
+                <p key={index} className="text-red-500">
+                  {error}{' '}
+                  {charactersRemaining < 0 && (
+                    <Plural
+                      value={Math.abs(charactersRemaining)}
+                      one="(1 character over)"
+                      other="(# characters over)"
+                    />
+                  )}
+                </p>
+              ))}
+            </div>
+          )}
+
+          <DialogFooter>
+            <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowCustomTextModal(false);
+                  setLocalCustomText('');
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localText || userInputHasErrors}
+                onClick={() => onDialogSignClick()}
+              >
+                <Trans>Save</Trans>
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/webhook-multiselect-combobox.tsx

@@ -16,7 +16,7 @@ import {
 } from '@documenso/ui/primitives/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 
-import { truncateTitle } from '~/helpers/truncate-title';
+import { truncateTitle } from '~/utils/truncate-title';
 
 type WebhookMultiSelectComboboxProps = {
   listValues: string[];

apps/remix/app/components/tables/templates-table.tsx

@@ -21,7 +21,7 @@ import { TemplateType } from '~/components/formatter/template-type';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { TemplateUseDialog } from '../dialogs/template-use-dialog';
-import { TemplateDirectLinkBadge } from '../pages/template/template-direct-link-badge';
+import { TemplateDirectLinkBadge } from '../general/template/template-direct-link-badge';
 import { TemplatesTableActionDropdown } from './templates-table-action-dropdown';
 
 type TemplatesTableProps = {

apps/remix/app/providers/next-theme.tsx

@@ -1,10 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import type { ThemeProviderProps } from 'next-themes/dist/types';
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}

apps/remix/app/providers/plausible.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 import NextPlausibleProvider from 'next-plausible';

apps/remix/app/providers/posthog.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-import { getSession } from 'next-auth/react';
 import posthog from 'posthog-js';
 import { useLocation, useSearchParams } from 'react-router';
 
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 
 export function PostHogPageview() {
@@ -12,22 +12,18 @@ export function PostHogPageview() {
   const { pathname } = useLocation();
   const [searchParams] = useSearchParams();
 
+  const { user } = useOptionalSession();
+
   if (typeof window !== 'undefined' && postHogConfig) {
     posthog.init(postHogConfig.key, {
       api_host: postHogConfig.host,
       disable_session_recording: true,
       loaded: () => {
-        getSession()
-          .then((session) => {
-            if (session) {
-              posthog.identify(session.user.email ?? session.user.id.toString());
-            } else {
-              posthog.reset();
-            }
-          })
-          .catch(() => {
-            // Do nothing.
-          });
+        if (user) {
+          posthog.identify(user.email ?? user.id.toString());
+        } else {
+          posthog.reset();
+        }
       },
       custom_campaign_params: ['src'],
     });

apps/remix/app/root.tsx

@@ -7,13 +7,16 @@ import {
   isRouteErrorResponse,
   useLoaderData,
 } from 'react-router';
+import { ThemeProvider } from 'remix-themes';
 
+import { SessionProvider } from '@documenso/lib/client-only/providers/session';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
+import { themeSessionResolver } from './storage/theme-session.server';
 
 export const links: Route.LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
@@ -33,8 +36,12 @@ export const links: Route.LinksFunction = () => [
   { rel: 'stylesheet', href: stylesheet },
 ];
 
-export function loader() {
+export async function loader({ request, context }: Route.LoaderArgs) {
+  const { getTheme } = await themeSessionResolver(request);
+
   return {
+    theme: getTheme(),
+    session: context.session,
     __ENV__: Object.fromEntries(
       Object.entries(process.env).filter(([key]) => key.startsWith('NEXT_')),
     ),
@@ -42,15 +49,18 @@ export function loader() {
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  const { __ENV__ } = useLoaderData<typeof loader>() || {};
+  const { __ENV__, theme } = useLoaderData<typeof loader>() || {};
+
+  // const [theme] = useTheme();
 
   return (
-    <html lang="en">
+    <html lang="en" data-theme={theme ?? ''}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
+        {/* <PreventFlashOnWrongTheme ssrTheme={Boolean(theme)} /> */}
       </head>
       <body>
         {children}
@@ -67,15 +77,20 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default function App() {
+export default function App({ loaderData }: Route.ComponentProps) {
   return (
-    <TooltipProvider>
-      <TrpcProvider>
-        <Outlet />
+    <SessionProvider session={loaderData.session}>
+      {/* Todo: Themes (this won't work for now) */}
+      <ThemeProvider specifiedTheme={loaderData.theme} themeAction="/api/theme">
+        <TooltipProvider>
+          <TrpcProvider>
+            <Outlet />
 
-        <Toaster />
-      </TrpcProvider>
-    </TooltipProvider>
+            <Toaster />
+          </TrpcProvider>
+        </TooltipProvider>
+      </ThemeProvider>
+    </SessionProvider>
   );
 }
 

apps/remix/app/routes/_authenticated+/_layout.tsx

@@ -1,8 +1,6 @@
-import { Outlet } from 'react-router';
-import { redirect } from 'react-router';
+import { Outlet, redirect } from 'react-router';
 
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
-import { SessionProvider } from '@documenso/lib/client-only/providers/session';
 
 import { Header } from '~/components/(dashboard)/layout/header';
 import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
@@ -13,33 +11,30 @@ export const loader = ({ context }: Route.LoaderArgs) => {
   const { session } = context;
 
   if (!session) {
-    return redirect('/signin');
+    throw redirect('/signin');
   }
 
   return {
     user: session.user,
-    session: session.session,
     teams: session.teams,
   };
 };
 
 export default function Layout({ loaderData }: Route.ComponentProps) {
-  const { user, session, teams } = loaderData;
+  const { user, teams } = loaderData;
 
   return (
-    <SessionProvider session={session} user={user}>
-      <LimitsProvider>
-        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
+    <LimitsProvider>
+      {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
-        {/* // Todo: Banner */}
-        {/* <Banner /> */}
+      {/* // Todo: Banner */}
+      {/* <Banner /> */}
 
-        <Header user={user} teams={teams} />
+      <Header user={user} teams={teams} />
 
-        <main className="mt-8 pb-8 md:mt-12 md:pb-12">
-          <Outlet />
-        </main>
-      </LimitsProvider>
-    </SessionProvider>
+      <main className="mt-8 pb-8 md:mt-12 md:pb-12">
+        <Outlet />
+      </main>
+    </LimitsProvider>
   );
 }

apps/remix/app/routes/_authenticated+/admin+/_index.tsx

@@ -1,7 +1,7 @@
 import { redirect } from 'react-router';
 
 export function loader() {
-  return redirect('/admin/stats');
+  throw redirect('/admin/stats');
 }
 
 export default function AdminPage() {

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -13,7 +13,7 @@ export function loader({ context }: Route.LoaderArgs) {
   const { user } = getRequiredSessionContext(context);
 
   if (!user || !isAdmin(user)) {
-    return redirect('/documents');
+    throw redirect('/documents');
   }
 }
 

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -35,7 +35,7 @@ export async function loader({ params }: Route.LoaderArgs) {
   // Todo: Is it possible for this to return data to the frontend w/out auth layout due to race condition?
 
   if (isNaN(id)) {
-    return redirect('/admin/documents');
+    throw redirect('/admin/documents');
   }
 
   const document = await getEntireDocument({ id });

apps/remix/app/routes/_authenticated+/documents+/$id._index.tsx

@@ -1,19 +1,16 @@
 import { Plural, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
-import { DocumentStatus } from '@prisma/client';
-import { TeamMemberRole } from '@prisma/client';
+import { DocumentStatus, TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 import { match } from 'ts-pattern';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
@@ -28,11 +25,11 @@ import {
   DocumentStatus as DocumentStatusComponent,
   FRIENDLY_STATUS_MAP,
 } from '~/components/formatter/document-status';
-import { DocumentPageViewButton } from '~/components/pages/document/document-page-view-button';
-import { DocumentPageViewDropdown } from '~/components/pages/document/document-page-view-dropdown';
-import { DocumentPageViewInformation } from '~/components/pages/document/document-page-view-information';
-import { DocumentPageViewRecentActivity } from '~/components/pages/document/document-page-view-recent-activity';
-import { DocumentPageViewRecipients } from '~/components/pages/document/document-page-view-recipients';
+import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
+import { DocumentPageViewDropdown } from '~/components/general/document/document-page-view-dropdown';
+import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
+import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
+import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
 
 import type { Route } from './+types/$id._index';
 
@@ -46,7 +43,7 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   const documentRootPath = formatDocumentsPath(team?.url);
 
   if (!documentId || Number.isNaN(documentId)) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   const document = await getDocumentById({
@@ -56,7 +53,7 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   }).catch(() => null);
 
   if (document?.teamId && !team?.url) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   const documentVisibility = document?.visibility;
@@ -76,31 +73,32 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   }
 
   if (!document || !document.documentData || (team && !canAccessDocument)) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   if (team && !canAccessDocument) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   const { documentMeta } = document;
 
-  if (documentMeta?.password) {
-    const key = DOCUMENSO_ENCRYPTION_KEY;
+  // Todo: We don't handle encrypted files right.
+  // if (documentMeta?.password) {
+  //   const key = DOCUMENSO_ENCRYPTION_KEY;
 
-    if (!key) {
-      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
-    }
+  //   if (!key) {
+  //     throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+  //   }
 
-    const securePassword = Buffer.from(
-      symmetricDecrypt({
-        key,
-        data: documentMeta.password,
-      }),
-    ).toString('utf-8');
+  //   const securePassword = Buffer.from(
+  //     symmetricDecrypt({
+  //       key,
+  //       data: documentMeta.password,
+  //     }),
+  //   ).toString('utf-8');
 
-    documentMeta.password = securePassword;
-  }
+  //   documentMeta.password = securePassword;
+  // }
 
   // Todo: Get full document instead???
   const [recipients, fields] = await Promise.all([

apps/remix/app/routes/_authenticated+/documents+/$id.edit.tsx

@@ -1,21 +1,19 @@
 import { Plural, Trans } from '@lingui/macro';
-import { TeamMemberRole } from '@prisma/client';
-import { DocumentStatus as InternalDocumentStatus } from '@prisma/client';
+import { DocumentStatus as InternalDocumentStatus, TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 import { match } from 'ts-pattern';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
-import { DocumentEditForm } from '~/components/pages/document/document-edit-form';
+import { DocumentEditForm } from '~/components/general/document/document-edit-form';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
 import type { Route } from './+types/$id.edit';
 
@@ -29,7 +27,7 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   const documentRootPath = formatDocumentsPath(team?.url);
 
   if (!documentId || Number.isNaN(documentId)) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   const document = await getDocumentWithDetailsById({
@@ -39,7 +37,7 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   }).catch(() => null);
 
   if (document?.teamId && !team?.url) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   const documentVisibility = document?.visibility;
@@ -59,50 +57,49 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   }
 
   if (!document) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   if (team && !canAccessDocument) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   if (document.status === InternalDocumentStatus.COMPLETED) {
-    return redirect(`${documentRootPath}/${documentId}`);
+    throw redirect(`${documentRootPath}/${documentId}`);
   }
 
-  const { documentMeta, recipients } = document;
+  // Todo: We don't handle encrypted files right.
+  // if (documentMeta?.password) {
+  //   const key = DOCUMENSO_ENCRYPTION_KEY;
 
-  if (documentMeta?.password) {
-    const key = DOCUMENSO_ENCRYPTION_KEY;
+  //   if (!key) {
+  //     throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+  //   }
 
-    if (!key) {
-      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
-    }
+  //   const securePassword = Buffer.from(
+  //     symmetricDecrypt({
+  //       key,
+  //       data: documentMeta.password,
+  //     }),
+  //   ).toString('utf-8');
 
-    const securePassword = Buffer.from(
-      symmetricDecrypt({
-        key,
-        data: documentMeta.password,
-      }),
-    ).toString('utf-8');
-
-    documentMeta.password = securePassword;
-  }
+  //   documentMeta.password = securePassword;
+  // }
 
   const isDocumentEnterprise = await isUserEnterprise({
     userId: user.id,
     teamId: team?.id,
   });
 
-  return {
+  return superLoaderJson({
     document,
     documentRootPath,
     isDocumentEnterprise,
-  };
+  });
 }
 
-export default function DocumentEditPage({ loaderData }: Route.ComponentProps) {
-  const { document, documentRootPath, isDocumentEnterprise } = loaderData;
+export default function DocumentEditPage() {
+  const { document, documentRootPath, isDocumentEnterprise } = useSuperLoaderData<typeof loader>();
 
   const { recipients } = document;
 

apps/remix/app/routes/_authenticated+/documents+/$id.logs.tsx

@@ -7,19 +7,17 @@ import { DateTime } from 'luxon';
 import { Link, redirect } from 'react-router';
 import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { prisma } from '@documenso/prisma';
 import { Card } from '@documenso/ui/primitives/card';
 
 import {
   DocumentStatus as DocumentStatusComponent,
   FRIENDLY_STATUS_MAP,
 } from '~/components/formatter/document-status';
-import { DocumentAuditLogDownloadButton } from '~/components/pages/document/document-audit-log-download-button';
-import { DocumentCertificateDownloadButton } from '~/components/pages/document/document-certificate-download-button';
+import { DocumentAuditLogDownloadButton } from '~/components/general/document/document-audit-log-download-button';
+import { DocumentCertificateDownloadButton } from '~/components/general/document/document-certificate-download-button';
 import { DocumentLogsTable } from '~/components/tables/document-logs-table';
 
 import type { Route } from './+types/$id.logs';
@@ -34,7 +32,7 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   const documentRootPath = formatDocumentsPath(team?.url);
 
   if (!documentId || Number.isNaN(documentId)) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   // Todo:  Get detailed?
@@ -52,7 +50,7 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   ]);
 
   if (!document || !document.documentData) {
-    return redirect(documentRootPath);
+    throw redirect(documentRootPath);
   }
 
   return {

apps/remix/app/routes/_authenticated+/settings+/_index.tsx

@@ -1,5 +1,5 @@
 import { redirect } from 'react-router';
 
 export function loader() {
-  return redirect('/settings/profile');
+  throw redirect('/settings/profile');
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/_layout.tsx

@@ -18,7 +18,7 @@ export const loader = ({ context }: Route.LoaderArgs) => {
   const { currentTeam } = getRequiredSessionContext(context);
 
   if (!currentTeam) {
-    return redirect('/documents');
+    throw redirect('/documents');
   }
 
   const trpcHeaders = {

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_index.tsx

@@ -15,8 +15,8 @@ import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
 import { TeamEmailAddDialog } from '~/components/dialogs/team-email-add-dialog';
 import { TeamTransferDialog } from '~/components/dialogs/team-transfer-dialog';
 import { AvatarImageForm } from '~/components/forms/avatar-image';
-import { TeamEmailDropdown } from '~/components/pages/teams/team-email-dropdown';
-import { TeamTransferStatus } from '~/components/pages/teams/team-transfer-status';
+import { TeamEmailDropdown } from '~/components/general/teams/team-email-dropdown';
+import { TeamTransferStatus } from '~/components/general/teams/team-transfer-status';
 import { useCurrentTeam } from '~/providers/team';
 
 export default function TeamsSettingsPage() {

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_layout.tsx

@@ -4,8 +4,8 @@ import { getRequiredTeamSessionContext } from 'server/utils/get-required-session
 
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 
-import { TeamSettingsDesktopNav } from '~/components/pages/teams/team-settings-desktop-nav';
-import { TeamSettingsMobileNav } from '~/components/pages/teams/team-settings-mobile-nav';
+import { TeamSettingsDesktopNav } from '~/components/general/teams/team-settings-desktop-nav';
+import { TeamSettingsMobileNav } from '~/components/general/teams/team-settings-mobile-nav';
 
 import type { Route } from '../+types/_layout';
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/billing.tsx

@@ -11,7 +11,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { TeamBillingInvoicesDataTable } from '~/components/(teams)/tables/team-billing-invoices-data-table';
-import { TeamBillingPortalButton } from '~/components/pages/teams/team-billing-portal-button';
+import { TeamBillingPortalButton } from '~/components/general/teams/team-billing-portal-button';
 
 import type { Route } from './+types/billing';
 

apps/remix/app/routes/_authenticated+/templates+/$id._index.tsx

@@ -1,10 +1,9 @@
 import { Trans } from '@lingui/macro';
-import { DocumentSigningOrder, SigningStatus, type Team } from '@prisma/client';
+import { DocumentSigningOrder, SigningStatus } from '@prisma/client';
 import { ChevronLeft, LucideEdit } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
@@ -15,13 +14,13 @@ import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-d
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
 import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import { TemplateType } from '~/components/formatter/template-type';
-import { TemplateDirectLinkBadge } from '~/components/pages/template/template-direct-link-badge';
-import { TemplatePageViewDocumentsTable } from '~/components/pages/template/template-page-view-documents-table';
-import { TemplatePageViewInformation } from '~/components/pages/template/template-page-view-information';
-import { TemplatePageViewRecentActivity } from '~/components/pages/template/template-page-view-recent-activity';
-import { TemplatePageViewRecipients } from '~/components/pages/template/template-page-view-recipients';
+import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
+import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
+import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
+import { TemplatePageViewRecentActivity } from '~/components/general/template/template-page-view-recent-activity';
+import { TemplatePageViewRecipients } from '~/components/general/template/template-page-view-recipients';
 import { TemplatesTableActionDropdown } from '~/components/tables/templates-table-action-dropdown';
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
 import type { Route } from './+types/$id._index';
 
@@ -35,7 +34,7 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   const documentRootPath = formatDocumentsPath(team?.url);
 
   if (!templateId || Number.isNaN(templateId)) {
-    return redirect(templateRootPath);
+    throw redirect(templateRootPath);
   }
 
   const template = await getTemplateById({
@@ -45,20 +44,21 @@ export async function loader({ params, context }: Route.LoaderArgs) {
   }).catch(() => null);
 
   if (!template || !template.templateDocumentData || (template?.teamId && !team?.url)) {
-    return redirect(templateRootPath);
+    throw redirect(templateRootPath);
   }
 
-  return {
+  return superLoaderJson({
     user,
     team,
     template,
     templateRootPath,
     documentRootPath,
-  };
+  });
 }
 
-export default function TemplatePage({ loaderData }: Route.ComponentProps) {
-  const { user, team, template, templateRootPath, documentRootPath } = loaderData;
+export default function TemplatePage() {
+  const { user, team, template, templateRootPath, documentRootPath } =
+    useSuperLoaderData<typeof loader>();
 
   const { templateDocumentData, fields, recipients, templateMeta } = template;
 

apps/remix/app/routes/_authenticated+/templates+/$id.edit.tsx

@@ -8,8 +8,9 @@ import { getTemplateById } from '@documenso/lib/server-only/template/get-templat
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 
 import { TemplateType } from '~/components/formatter/template-type';
-import { TemplateDirectLinkBadge } from '~/components/pages/template/template-direct-link-badge';
-import { TemplateEditForm } from '~/components/pages/template/template-edit-form';
+import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
+import { TemplateEditForm } from '~/components/general/template/template-edit-form';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
 import { TemplateDirectLinkDialogWrapper } from '../../../components/dialogs/template-direct-link-dialog-wrapper';
 import type { Route } from './+types/$id.edit';
@@ -23,7 +24,7 @@ export async function loader({ context, params }: Route.LoaderArgs) {
   const templateRootPath = formatTemplatesPath(team?.url);
 
   if (!templateId || Number.isNaN(templateId)) {
-    return redirect(templateRootPath);
+    throw redirect(templateRootPath);
   }
 
   const template = await getTemplateById({
@@ -33,7 +34,7 @@ export async function loader({ context, params }: Route.LoaderArgs) {
   }).catch(() => null);
 
   if (!template || !template.templateDocumentData) {
-    return redirect(templateRootPath);
+    throw redirect(templateRootPath);
   }
 
   const isTemplateEnterprise = await isUserEnterprise({
@@ -41,15 +42,15 @@ export async function loader({ context, params }: Route.LoaderArgs) {
     teamId: team?.id,
   });
 
-  return {
+  return superLoaderJson({
     template,
     isTemplateEnterprise,
     templateRootPath,
-  };
+  });
 }
 
-export default function TemplateEditPage({ loaderData }: Route.ComponentProps) {
-  const { template, isTemplateEnterprise, templateRootPath } = loaderData;
+export default function TemplateEditPage() {
+  const { template, isTemplateEnterprise, templateRootPath } = useSuperLoaderData<typeof loader>();
 
   return (
     <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">

apps/remix/app/routes/_index.tsx

@@ -2,10 +2,10 @@ import { redirect } from 'react-router';
 
 import type { Route } from './+types/_index';
 
-export async function loader({ context }: Route.LoaderArgs) {
+export function loader({ context }: Route.LoaderArgs) {
   if (context.session) {
-    return redirect('/documents');
+    throw redirect('/documents');
   }
 
-  return redirect('/signin');
+  throw redirect('/signin');
 }

apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx

@@ -1,7 +1,6 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
-import { useSearchParams } from 'react-router';
 import { redirect } from 'react-router';
 
 import { DOCUMENT_STATUS } from '@documenso/lib/constants/document';
@@ -22,13 +21,13 @@ export async function loader({ request }: Route.LoaderArgs) {
   const d = new URL(request.url).searchParams.get('d');
 
   if (typeof d !== 'string' || !d) {
-    return redirect('/');
+    throw redirect('/');
   }
 
   const rawDocumentId = decryptSecondaryData(d);
 
   if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
-    return redirect('/');
+    throw redirect('/');
   }
 
   const documentId = Number(rawDocumentId);
@@ -38,7 +37,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   }).catch(() => null);
 
   if (!document) {
-    return redirect('/');
+    throw redirect('/');
   }
 
   const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
@@ -68,7 +67,8 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
 
   const { i18n } = useLingui();
 
-  dynamicActivate(i18n, documentLanguage);
+  // Todo
+  void dynamicActivate(i18n, documentLanguage);
 
   const { _ } = useLingui();
 

apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx

@@ -1,7 +1,8 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { FieldType } from '@prisma/client';
 import { DateTime } from 'luxon';
-import { redirect, useSearchParams } from 'react-router';
+import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
 
@@ -15,8 +16,6 @@ import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt'
 import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { dynamicActivate } from '@documenso/lib/utils/i18n';
-import { FieldType } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Table,
@@ -40,13 +39,13 @@ export async function loader({ request }: Route.LoaderArgs) {
   const d = new URL(request.url).searchParams.get('d');
 
   if (typeof d !== 'string' || !d) {
-    return redirect('/');
+    throw redirect('/');
   }
 
   const rawDocumentId = decryptSecondaryData(d);
 
   if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
-    return redirect('/');
+    throw redirect('/');
   }
 
   const documentId = Number(rawDocumentId);
@@ -56,7 +55,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   }).catch(() => null);
 
   if (!document) {
-    return redirect('/');
+    throw redirect('/');
   }
 
   const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
@@ -86,7 +85,8 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
 
   const { _ } = useLingui();
 
-  dynamicActivate(i18n, documentLanguage);
+  // Todo
+  // dynamicActivate(i18n, documentLanguage);
 
   const isOwner = (email: string) => {
     return email.toLowerCase() === document.user.email.toLowerCase();

apps/remix/app/routes/_profile+/_layout.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react';
+
+import { Trans } from '@lingui/macro';
+import { PlusIcon } from 'lucide-react';
+import { ChevronLeft } from 'lucide-react';
+import { Link, Outlet } from 'react-router';
+
+import LogoIcon from '@documenso/assets/logo_icon.png';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { Logo } from '~/components/branding/logo';
+
+import type { Route } from './+types/_layout';
+
+export function loader({ context }: Route.LoaderArgs) {
+  const { session } = context;
+
+  return {
+    session,
+  };
+}
+
+export default function PublicProfileLayout({ loaderData }: Route.ComponentProps) {
+  const { session } = loaderData;
+
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      {session ? (
+        <AuthenticatedHeader user={session.user} teams={session.teams} />
+      ) : (
+        <header
+          className={cn(
+            'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+            scrollY > 5 && 'border-b-border',
+          )}
+        >
+          <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:px-8">
+            <Link
+              to="/"
+              className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
+            >
+              <Logo className="hidden h-6 w-auto sm:block" />
+
+              <img
+                src={LogoIcon}
+                alt="Documenso Logo"
+                width={48}
+                height={48}
+                className="h-10 w-auto sm:hidden dark:invert"
+              />
+            </Link>
+
+            <div className="flex flex-row items-center justify-center">
+              <p className="text-muted-foreground mr-4">
+                <span className="text-sm sm:hidden">
+                  <Trans>Want your own public profile?</Trans>
+                </span>
+                <span className="hidden text-sm sm:block">
+                  <Trans>Like to have your own public profile with agreements?</Trans>
+                </span>
+              </p>
+
+              <Button asChild variant="secondary">
+                <Link to="/signup">
+                  <div className="hidden flex-row items-center sm:flex">
+                    <PlusIcon className="mr-1 h-5 w-5" />
+                    <Trans>Create now</Trans>
+                  </div>
+
+                  <span className="sm:hidden">
+                    <Trans>Create</Trans>
+                  </span>
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </header>
+      )}
+
+      <main className="my-8 px-4 md:my-12 md:px-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+// Todo: Test
+export function ErrorBoundary() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">
+          <Trans>404 Profile not found</Trans>
+        </p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">
+          <Trans>Oops! Something went wrong.</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          <Trans>The profile you are looking for could not be found.</Trans>
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link to="/">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              <Trans>Go Back</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_profile+/p.$url.tsx

@@ -0,0 +1,205 @@
+import { Trans } from '@lingui/macro';
+import { FileIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, redirect } from 'react-router';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import type { Route } from './+types/p.$url';
+
+const BADGE_DATA = {
+  Premium: {
+    imageSrc: '/static/premium-user-badge.svg',
+    name: 'Premium',
+  },
+  EarlySupporter: {
+    imageSrc: '/static/early-supporter-badge.svg',
+    name: 'Early supporter',
+  },
+};
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const { url: profileUrl } = params;
+
+  if (!profileUrl) {
+    throw redirect('/');
+  }
+
+  const publicProfile = await getPublicProfileByUrl({
+    profileUrl,
+  }).catch(() => null);
+
+  // Todo: Test
+  if (!publicProfile || !publicProfile.profile.enabled) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  return {
+    publicProfile,
+  };
+}
+
+export default function PublicProfilePage({ loaderData }: Route.ComponentProps) {
+  const { publicProfile } = loaderData;
+
+  const { profile, templates } = publicProfile;
+
+  const { user } = useOptionalSession();
+
+  return (
+    <div className="flex flex-col items-center justify-center py-4 sm:py-32">
+      <div className="flex flex-col items-center">
+        <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
+          {publicProfile.avatarImageId && (
+            <AvatarImage
+              src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${publicProfile.avatarImageId}`}
+            />
+          )}
+
+          <AvatarFallback className="text-sm text-gray-400">
+            {extractInitials(publicProfile.name)}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="mt-4 flex flex-row items-center justify-center">
+          <h2 className="text-xl font-semibold md:text-2xl">{publicProfile.name}</h2>
+
+          {publicProfile.badge && (
+            <Tooltip>
+              <TooltipTrigger>
+                <img
+                  className="ml-2 flex items-center justify-center"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+              </TooltipTrigger>
+
+              <TooltipContent className="flex flex-row items-start py-2 !pl-3 !pr-3.5">
+                <img
+                  className="mt-0.5"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+
+                <div className="ml-2">
+                  <p className="text-foreground text-base font-semibold">
+                    {BADGE_DATA[publicProfile.badge.type].name}
+                  </p>
+                  <p className="text-muted-foreground mt-0.5 text-sm">
+                    <Trans>
+                      Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
+                    </Trans>
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        <div className="text-muted-foreground mt-4 space-y-1">
+          {(profile.bio ?? '').split('\n').map((line, index) => (
+            <p
+              key={index}
+              className="max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm"
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+      </div>
+
+      {templates.length === 0 && (
+        <div className="mt-4 w-full max-w-xl border-t pt-4">
+          <p className="text-muted-foreground max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed">
+            <Trans>
+              It looks like {publicProfile.name} hasn't added any documents to their profile yet.
+            </Trans>{' '}
+            {!user?.id && (
+              <span className="mt-2 inline-block">
+                <Trans>
+                  While waiting for them to do so you can create your own Documenso account and get
+                  started with document signing right away.
+                </Trans>
+              </span>
+            )}
+            {'userId' in profile && user?.id === profile.userId && (
+              <span className="mt-2 inline-block">
+                <Trans>
+                  Go to your{' '}
+                  <Link to="/settings/public-profile" className="underline">
+                    public profile settings
+                  </Link>{' '}
+                  to add documents.
+                </Trans>
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+
+      {templates.length > 0 && (
+        <div className="mt-8 w-full max-w-xl rounded-md border">
+          <Table className="w-full" overflowHidden>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-full rounded-tl-md bg-neutral-50 dark:bg-neutral-700">
+                  <Trans>Documents</Trans>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {templates.map((template) => (
+                <TableRow key={template.id}>
+                  <TableCell className="text-muted-foreground flex flex-col justify-between overflow-hidden text-sm sm:flex-row">
+                    <div className="flex flex-1 items-start justify-start gap-2">
+                      <FileIcon
+                        className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
+                        strokeWidth={1.5}
+                      />
+
+                      <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-start md:justify-between">
+                        <div>
+                          <p className="text-foreground text-sm font-semibold leading-none">
+                            {template.publicTitle}
+                          </p>
+                          <p className="text-muted-foreground mt-1 line-clamp-3 max-w-[70ch] whitespace-normal text-xs">
+                            {template.publicDescription}
+                          </p>
+                        </div>
+
+                        <Button asChild className="w-20">
+                          <Link to={formatDirectTemplatePath(template.directLink.token)}>
+                            <Trans>Sign</Trans>
+                          </Link>
+                        </Button>
+                      </div>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}

apps/remix/app/routes/_recipient+/_layout.tsx

@@ -0,0 +1,68 @@
+import { Trans } from '@lingui/macro';
+import { ChevronLeft } from 'lucide-react';
+import { Link, Outlet } from 'react-router';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+
+import type { Route } from './+types/_layout';
+
+export async function loader({ context }: Route.LoaderArgs) {
+  return {
+    user: context.session?.user,
+    teams: context.session?.teams || [],
+  };
+}
+
+/**
+ * A layout to handle scenarios where the user is a recipient of a given resource
+ * where we do not care whether they are authenticated or not.
+ *
+ * Such as direct template access, or signing.
+ */
+export default function RecipientLayout({ loaderData }: Route.ComponentProps) {
+  const { user, teams } = loaderData;
+
+  return (
+    <div className="min-h-screen">
+      {user && <AuthenticatedHeader user={user} teams={teams} />}
+
+      <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export function ErrorBoundary() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">
+          <Trans>404 Not found</Trans>
+        </p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">
+          <Trans>Oops! Something went wrong.</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          <Trans>
+            The resource you are looking for may have been disabled, deleted or may have never
+            existed.
+          </Trans>
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link to="/">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              <Trans>Go Back</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -0,0 +1,113 @@
+import { Plural } from '@lingui/macro';
+import { UsersIcon } from 'lucide-react';
+import { redirect } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { DirectTemplatePageView } from '~/components/general/direct-template/direct-template-page';
+import { DirectTemplateAuthPageView } from '~/components/general/direct-template/direct-template-signing-auth-page';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/_index';
+
+export type TemplatesDirectPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    throw redirect('/');
+  }
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  if (!template || !template.directLink?.enabled) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const directTemplateRecipient = template.recipients.find(
+    (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+  );
+
+  if (!directTemplateRecipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  // Ensure typesafety when we add more options.
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => context.session?.user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    return superLoaderJson({
+      isAccessAuthValid: false as const,
+    });
+  }
+
+  return superLoaderJson({
+    isAccessAuthValid: true as const,
+    template,
+    directTemplateRecipient,
+  });
+}
+
+export default function DirectTemplatePage() {
+  const { user } = useOptionalSession();
+
+  const data = useSuperLoaderData<typeof loader>();
+
+  if (!data.isAccessAuthValid) {
+    return <DirectTemplateAuthPageView />;
+  }
+
+  const { template, directTemplateRecipient } = data;
+
+  return (
+    <DocumentSigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+      <DocumentSigningAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={directTemplateRecipient}
+        user={user}
+      >
+        <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
+            <UsersIcon className="h-4 w-4" />
+            <p className="text-muted-foreground/80">
+              <Plural value={template.recipients.length} one="# recipient" other="# recipients" />
+            </p>
+          </div>
+
+          <DirectTemplatePageView
+            directTemplateRecipient={directTemplateRecipient}
+            directTemplateToken={template.directLink.token}
+            template={template}
+          />
+        </div>
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+}

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -0,0 +1,227 @@
+import { Trans } from '@lingui/macro';
+import { DocumentStatus, SigningStatus } from '@prisma/client';
+import { Clock8 } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
+import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/get-is-recipient-turn';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+
+import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningPageView } from '~/components/general/document-signing/document-signing-page-view';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/_index';
+
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const user = context.session?.user;
+
+  const [document, fields, recipient, completedFields] = await Promise.all([
+    getDocumentAndSenderByToken({
+      token,
+      userId: user?.id,
+      requireAccessAuth: false,
+    }).catch(() => null),
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+    getCompletedFieldsForToken({ token }),
+  ]);
+
+  if (
+    !document ||
+    !document.documentData ||
+    !recipient ||
+    document.status === DocumentStatus.DRAFT
+  ) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const isRecipientsTurn = await getIsRecipientsTurnToSign({ token });
+
+  if (!isRecipientsTurn) {
+    throw redirect(`/sign/${token}/waiting`);
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: document.authOptions,
+    recipientAuth: recipient.authOptions,
+  });
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  let recipientHasAccount: boolean | null = null;
+
+  if (!isDocumentAccessValid) {
+    recipientHasAccount = await getUserByEmail({ email: recipient.email })
+      .then((user) => !!user)
+      .catch(() => false);
+
+    return superLoaderJson({
+      isDocumentAccessValid: false,
+      recipientEmail: recipient.email,
+      recipientHasAccount,
+    } as const);
+  }
+
+  await viewedDocument({
+    token,
+    requestMetadata: context.requestMetadata,
+    recipientAccessAuth: derivedRecipientAccessAuth,
+  }).catch(() => null);
+
+  const { documentMeta } = document;
+
+  if (recipient.signingStatus === SigningStatus.REJECTED) {
+    throw redirect(`/sign/${token}/rejected`);
+  }
+
+  if (
+    document.status === DocumentStatus.COMPLETED ||
+    recipient.signingStatus === SigningStatus.SIGNED
+  ) {
+    throw redirect(documentMeta?.redirectUrl || `/sign/${token}/complete`);
+  }
+
+  // Todo: We don't handle encrypted files right.
+  // if (documentMeta?.password) {
+  //   const key = DOCUMENSO_ENCRYPTION_KEY;
+
+  //   if (!key) {
+  //     throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+  //   }
+
+  //   const securePassword = Buffer.from(
+  //     symmetricDecrypt({
+  //       key,
+  //       data: documentMeta.password,
+  //     }),
+  //   ).toString('utf-8');
+
+  //   documentMeta.password = securePassword;
+  // }
+
+  const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
+
+  return superLoaderJson({
+    isDocumentAccessValid: true,
+    document,
+    fields,
+    recipient,
+    completedFields,
+    recipientSignature,
+    isRecipientsTurn,
+  } as const);
+}
+
+export default function SigningPage() {
+  const data = useSuperLoaderData<typeof loader>();
+
+  const { user } = useOptionalSession();
+
+  if (!data.isDocumentAccessValid) {
+    return (
+      <DocumentSigningAuthPageView
+        email={data.recipientEmail}
+        emailHasAccount={!!data.recipientHasAccount}
+      />
+    );
+  }
+
+  const { document, fields, recipient, completedFields, recipientSignature, isRecipientsTurn } =
+    data;
+
+  if (document.deletedAt) {
+    return (
+      <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
+        <SigningCard3D
+          name={recipient.name}
+          signature={recipientSignature}
+          signingCelebrationImage={signingCelebration}
+        />
+
+        <div className="relative mt-2 flex w-full flex-col items-center">
+          <div className="mt-8 flex items-center text-center text-red-600">
+            <Clock8 className="mr-2 h-5 w-5" />
+            <span className="text-sm">
+              <Trans>Document Cancelled</Trans>
+            </span>
+          </div>
+
+          <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>
+              <span className="mt-1.5 block">"{document.title}"</span>
+              is no longer available to sign
+            </Trans>
+          </h2>
+
+          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+            <Trans>This document has been cancelled by the owner.</Trans>
+          </p>
+
+          {user ? (
+            <Link to="/documents" className="text-documenso-700 hover:text-documenso-600 mt-36">
+              <Trans>Go Back Home</Trans>
+            </Link>
+          ) : (
+            <p className="text-muted-foreground/60 mt-36 text-sm">
+              <Trans>
+                Want to send slick signing links like this one?{' '}
+                <Link
+                  to="https://documenso.com"
+                  className="text-documenso-700 hover:text-documenso-600"
+                >
+                  Check out Documenso.
+                </Link>
+              </Trans>
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <DocumentSigningProvider
+      email={recipient.email}
+      fullName={user?.email === recipient.email ? user?.name : recipient.name}
+      signature={user?.email === recipient.email ? user?.signature : undefined}
+    >
+      <DocumentSigningAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <DocumentSigningPageView
+          recipient={recipient}
+          document={document}
+          fields={fields}
+          completedFields={completedFields}
+          isRecipientsTurn={isRecipientsTurn}
+        />
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+}

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -0,0 +1,284 @@
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
+import { CheckCircle2, Clock8, FileSearch } from 'lucide-react';
+import { Link } from 'react-router';
+import { match } from 'ts-pattern';
+
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
+import { env } from '@documenso/lib/utils/env';
+import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { ClaimAccount } from '~/components/general/claim-account';
+import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
+
+import type { Route } from './+types/complete';
+
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const user = context.session?.user;
+
+  const document = await getDocumentAndSenderByToken({
+    token,
+    requireAccessAuth: false,
+  }).catch(() => null);
+
+  if (!document || !document.documentData) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const [fields, recipient] = await Promise.all([
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  if (!recipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  if (!isDocumentAccessValid) {
+    return {
+      isDocumentAccessValid: false,
+      recipientEmail: recipient.email,
+    } as const;
+  }
+
+  const signatures = await getRecipientSignatures({ recipientId: recipient.id });
+  const isExistingUser = await getUserByEmail({ email: recipient.email })
+    .then((u) => !!u)
+    .catch(() => false);
+
+  const recipientName =
+    recipient.name ||
+    fields.find((field) => field.type === FieldType.NAME)?.customText ||
+    recipient.email;
+
+  const canSignUp = !isExistingUser && env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true';
+
+  return {
+    isDocumentAccessValid: true,
+    canSignUp,
+    recipientName,
+    recipientEmail: recipient.email,
+    signatures,
+    document,
+    recipient,
+  };
+}
+
+export default function CompletedSigningPage({ loaderData }: Route.ComponentProps) {
+  const { _ } = useLingui();
+
+  const { user } = useOptionalSession();
+
+  const {
+    isDocumentAccessValid,
+    canSignUp,
+    recipientName,
+    signatures,
+    document,
+    recipient,
+    recipientEmail,
+  } = loaderData;
+
+  if (!isDocumentAccessValid) {
+    return <DocumentSigningAuthPageView email={recipientEmail} />;
+  }
+
+  return (
+    <div
+      className={cn(
+        '-mx-4 flex flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
+      )}
+    >
+      <div
+        className={cn('relative mt-6 flex w-full flex-col items-center justify-center', {
+          'mt-0 flex-col divide-y overflow-hidden pt-6 md:pt-16 lg:flex-row lg:divide-x lg:divide-y-0 lg:pt-20 xl:pt-24':
+            canSignUp,
+        })}
+      >
+        <div
+          className={cn('flex flex-col items-center', {
+            'mb-8 p-4 md:mb-0 md:p-12': canSignUp,
+          })}
+        >
+          <Badge variant="neutral" size="default" className="mb-6 rounded-xl border bg-transparent">
+            <span className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]">
+              {document.title}
+            </span>
+          </Badge>
+
+          {/* Card with recipient */}
+          <SigningCard3D
+            name={recipientName}
+            signature={signatures.at(0)}
+            signingCelebrationImage={signingCelebration}
+          />
+
+          <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            {recipient.role === RecipientRole.SIGNER && <Trans>Document Signed</Trans>}
+            {recipient.role === RecipientRole.VIEWER && <Trans>Document Viewed</Trans>}
+            {recipient.role === RecipientRole.APPROVER && <Trans>Document Approved</Trans>}
+          </h2>
+
+          {match({ status: document.status, deletedAt: document.deletedAt })
+            .with({ status: DocumentStatus.COMPLETED }, () => (
+              <div className="text-documenso-700 mt-4 flex items-center text-center">
+                <CheckCircle2 className="mr-2 h-5 w-5" />
+                <span className="text-sm">
+                  <Trans>Everyone has signed</Trans>
+                </span>
+              </div>
+            ))
+            .with({ deletedAt: null }, () => (
+              <div className="mt-4 flex items-center text-center text-blue-600">
+                <Clock8 className="mr-2 h-5 w-5" />
+                <span className="text-sm">
+                  <Trans>Waiting for others to sign</Trans>
+                </span>
+              </div>
+            ))
+            .otherwise(() => (
+              <div className="flex items-center text-center text-red-600">
+                <Clock8 className="mr-2 h-5 w-5" />
+                <span className="text-sm">
+                  <Trans>Document no longer available to sign</Trans>
+                </span>
+              </div>
+            ))}
+
+          {match({ status: document.status, deletedAt: document.deletedAt })
+            .with({ status: DocumentStatus.COMPLETED }, () => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                <Trans>
+                  Everyone has signed! You will receive an Email copy of the signed document.
+                </Trans>
+              </p>
+            ))
+            .with({ deletedAt: null }, () => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                <Trans>
+                  You will receive an Email copy of the signed document once everyone has signed.
+                </Trans>
+              </p>
+            ))
+            .otherwise(() => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                <Trans>
+                  This document has been cancelled by the owner and is no longer available for
+                  others to sign.
+                </Trans>
+              </p>
+            ))}
+
+          <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+            <DocumentShareButton documentId={document.id} token={recipient.token} />
+
+            {document.status === DocumentStatus.COMPLETED ? (
+              <DocumentDownloadButton
+                className="flex-1"
+                fileName={document.title}
+                documentData={document.documentData}
+                disabled={document.status !== DocumentStatus.COMPLETED}
+              />
+            ) : (
+              <DocumentDialog
+                documentData={document.documentData}
+                trigger={
+                  <Button
+                    className="text-[11px]"
+                    title={_(msg`Signatures will appear once the document has been completed`)}
+                    variant="outline"
+                  >
+                    <FileSearch className="mr-2 h-5 w-5" strokeWidth={1.7} />
+                    <Trans>View Original Document</Trans>
+                  </Button>
+                }
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center">
+          {canSignUp && (
+            <div className="flex max-w-xl flex-col items-center justify-center p-4 md:p-12">
+              <h2 className="mt-8 text-center text-xl font-semibold md:mt-0">
+                <Trans>Need to sign documents?</Trans>
+              </h2>
+
+              <p className="text-muted-foreground/60 mt-4 max-w-[55ch] text-center leading-normal">
+                <Trans>
+                  Create your account and start using state-of-the-art document signing.
+                </Trans>
+              </p>
+
+              <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
+            </div>
+          )}
+
+          {user && (
+            <Link to="/documents" className="text-documenso-700 hover:text-documenso-600 mt-2">
+              <Trans>Go Back Home</Trans>
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {/* Todo */}
+      {/* Todo */}
+      {/* <PollUntilDocumentCompleted document={document} /> */}
+    </div>
+  );
+}
+
+// Todo: Refresh on focus? Was in a layout w it before.
+// Todo:
+// export type PollUntilDocumentCompletedProps = {
+//   document: Pick<Document, 'id' | 'status' | 'deletedAt'>;
+// };
+
+// export const PollUntilDocumentCompleted = ({ document }: PollUntilDocumentCompletedProps) => {
+//   const router = useRouter();
+
+//   useEffect(() => {
+//     if (document.status === DocumentStatus.COMPLETED) {
+//       return;
+//     }
+
+//     const interval = setInterval(() => {
+//       if (window.document.hasFocus()) {
+//         router.refresh();
+//       }
+//     }, 5000);
+
+//     return () => clearInterval(interval);
+//   }, [router, document.status]);
+
+//   return <></>;
+// };

apps/remix/app/routes/_recipient+/sign.$token+/rejected.tsx

@@ -0,0 +1,122 @@
+import { Trans } from '@lingui/macro';
+import { FieldType } from '@prisma/client';
+import { XCircle } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
+import { truncateTitle } from '~/utils/truncate-title';
+
+import type { Route } from './+types/rejected';
+
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const user = context.session?.user;
+
+  const document = await getDocumentAndSenderByToken({
+    token,
+    requireAccessAuth: false,
+  }).catch(() => null);
+
+  if (!document) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const truncatedTitle = truncateTitle(document.title);
+
+  const [fields, recipient] = await Promise.all([
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  if (!recipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  const recipientReference =
+    recipient.name ||
+    fields.find((field) => field.type === FieldType.NAME)?.customText ||
+    recipient.email;
+
+  if (isDocumentAccessValid) {
+    return {
+      isDocumentAccessValid: true,
+      recipientReference,
+      truncatedTitle,
+    };
+  }
+
+  // Don't leak data if access is denied.
+  return {
+    isDocumentAccessValid: false,
+    recipientReference,
+  };
+}
+
+export default function RejectedSigningPage({ loaderData }: Route.ComponentProps) {
+  const { user } = useOptionalSession();
+
+  const { isDocumentAccessValid, recipientReference, truncatedTitle } = loaderData;
+
+  if (!isDocumentAccessValid) {
+    return <DocumentSigningAuthPageView email={recipientReference} />;
+  }
+
+  return (
+    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
+      <Badge variant="neutral" size="default" className="mb-6 rounded-xl border bg-transparent">
+        {truncatedTitle}
+      </Badge>
+
+      <div className="flex flex-col items-center">
+        <div className="flex items-center gap-x-4">
+          <XCircle className="text-destructive h-10 w-10" />
+
+          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Document Rejected</Trans>
+          </h2>
+        </div>
+
+        <div className="text-destructive mt-4 flex items-center text-center text-sm">
+          <Trans>You have rejected this document</Trans>
+        </div>
+
+        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
+          <Trans>
+            The document owner has been notified of your decision. They may contact you with further
+            instructions if necessary.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
+          <Trans>No further action is required from you at this time.</Trans>
+        </p>
+
+        {user && (
+          <Button className="mt-6" asChild>
+            <Link to={`/`}>Return Home</Link>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_recipient+/sign.$token+/waiting.tsx

@@ -0,0 +1,103 @@
+import { Trans } from '@lingui/macro';
+import type { Team } from '@prisma/client';
+import { DocumentStatus } from '@prisma/client';
+import { Link, redirect } from 'react-router';
+
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { Button } from '@documenso/ui/primitives/button';
+
+import type { Route } from './+types/waiting';
+
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const [document, recipient] = await Promise.all([
+    getDocumentAndSenderByToken({ token }).catch(() => null),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  if (!document || !recipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  if (document.status === DocumentStatus.COMPLETED) {
+    throw redirect(`/sign/${token}/complete`);
+  }
+
+  let isOwnerOrTeamMember = false;
+
+  const user = context.session?.user;
+  let team: Team | null = null;
+
+  if (user) {
+    isOwnerOrTeamMember = await getDocumentById({
+      documentId: document.id,
+      userId: user.id,
+      teamId: document.teamId ?? undefined,
+    })
+      .then((document) => !!document)
+      .catch(() => false);
+
+    if (document.teamId) {
+      team = await getTeamById({
+        userId: user.id,
+        teamId: document.teamId,
+      });
+    }
+  }
+
+  const documentPathForEditing = isOwnerOrTeamMember
+    ? formatDocumentsPath(team?.url) + '/' + document.id
+    : null;
+
+  return {
+    documentPathForEditing,
+  };
+}
+
+export default function WaitingForTurnToSignPage({ loaderData }: Route.ComponentProps) {
+  const { documentPathForEditing } = loaderData;
+
+  return (
+    <div className="relative flex flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md text-center">
+        <h2 className="tracking-tigh text-3xl font-bold">
+          <Trans>Waiting for Your Turn</Trans>
+        </h2>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            It's currently not your turn to sign. You will receive an email with instructions once
+            it's your turn to sign the document.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          <Trans>Please check your email for updates.</Trans>
+        </p>
+
+        <div className="mt-4">
+          {documentPathForEditing ? (
+            <Button variant="link" asChild>
+              <Link to={documentPathForEditing}>
+                <Trans>Were you trying to edit this document instead?</Trans>
+              </Link>
+            </Button>
+          ) : (
+            <Button variant="link" asChild>
+              <Link to="/documents">Return Home</Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/signin.tsx

@@ -12,13 +12,13 @@ import { SignInForm } from '~/components/forms/signin';
 
 import type { Route } from './+types/signin';
 
-export function meta(_args: Route.MetaArgs) {
+export function meta() {
   return [{ title: 'Sign In' }];
 }
 
-export async function loader({ context }: Route.LoaderArgs) {
+export function loader({ context }: Route.LoaderArgs) {
   if (context.session) {
-    return redirect('/documents');
+    throw redirect('/documents');
   }
 }
 

apps/remix/app/routes/_unauthenticated+/signup.tsx

@@ -13,7 +13,7 @@ export function loader() {
   const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
 
   if (NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
-    return redirect('/signin');
+    throw redirect('/signin');
   }
 }
 

apps/remix/app/routes/api+/theme.tsx

@@ -0,0 +1,5 @@
+import { createThemeAction } from 'remix-themes';
+
+import { themeSessionResolver } from '~/storage/theme-session.server';
+
+export const action = createThemeAction(themeSessionResolver);

apps/remix/app/storage/theme-session.server.tsx

@@ -0,0 +1,19 @@
+import { createCookieSessionStorage } from 'react-router';
+import { createThemeSessionResolver } from 'remix-themes';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+
+const themeSessionStorage = createCookieSessionStorage({
+  cookie: {
+    name: 'theme',
+    path: '/',
+    httpOnly: true,
+    sameSite: 'lax',
+    secrets: ['insecure-secret'], // Todo: Don't need secret
+    // Todo: Check this works on production.
+    // Set domain and secure only if in production
+    ...(import.meta.env.PROD ? { domain: NEXT_PUBLIC_WEBAPP_URL(), secure: true } : {}),
+  },
+});
+
+export const themeSessionResolver = createThemeSessionResolver(themeSessionStorage);

apps/remix/app/utils/super-json-loader.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * https://github.com/kiliman/remix-superjson/
+ */
+import { useActionData, useLoaderData } from 'react-router';
+import * as _superjson from 'superjson';
+
+export type SuperJsonFunction = <Data extends unknown>(
+  data: Data,
+  init?: number | ResponseInit,
+) => SuperTypedResponse<Data>;
+
+export declare type SuperTypedResponse<T extends unknown = unknown> = Response & {
+  superjson(): Promise<T>;
+};
+
+type AppData = any;
+type DataFunction = (...args: any[]) => unknown; // matches any function
+type DataOrFunction = AppData | DataFunction;
+
+export type UseDataFunctionReturn<T extends DataOrFunction> = T extends (
+  ...args: any[]
+) => infer Output
+  ? Awaited<Output> extends SuperTypedResponse<infer U>
+    ? U
+    : Awaited<ReturnType<T>>
+  : Awaited<T>;
+
+export const superLoaderJson: SuperJsonFunction = (data, init = {}) => {
+  const responseInit = typeof init === 'number' ? { status: init } : init;
+  const headers = new Headers(responseInit.headers);
+
+  if (!headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json; charset=utf-8');
+  }
+
+  return new Response(_superjson.stringify(data), {
+    ...responseInit,
+    headers,
+  }) as SuperTypedResponse<typeof data>;
+};
+
+export function useSuperLoaderData<T = AppData>(): UseDataFunctionReturn<T> {
+  const data = useLoaderData();
+
+  return _superjson.deserialize(data);
+}
+export function useSuperActionData<T = AppData>(): UseDataFunctionReturn<T> | null {
+  const data = useActionData();
+
+  return data ? _superjson.deserialize(data) : null;
+}

apps/remix/package.json

@@ -4,8 +4,8 @@
   "type": "module",
   "scripts": {
     "build": "cross-env NODE_ENV=production react-router build",
-    "dev": "react-router dev",
-    "dev:bun": "bunx --bun vite",
+    "dev": "bunx --bun vite",
+    "dev:node": "react-router dev",
     "start": "cross-env NODE_ENV=production node dist/server/index.js",
     "clean": "rimraf .react-router && rimraf node_modules",
     "typecheck": "react-router typegen && tsc",
@@ -32,6 +32,7 @@
     "react-dom": "^18",
     "react-router": "^7.1.3",
     "remix-hono": "^0.0.18",
+    "remix-themes": "^2.0.4",
     "tailwindcss": "^3.4.15",
     "ts-pattern": "^5.0.5"
   },
@@ -50,4 +51,4 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

apps/remix/server/load-context.ts

@@ -1,6 +1,7 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { type TGetTeamsResponse, getTeams } from '@documenso/lib/server-only/team/get-teams';
+import { extractRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 
 type GetLoadContextArgs = {
   request: Request;
@@ -21,6 +22,7 @@ export async function getLoadContext(args: GetLoadContextArgs) {
   if (request.method !== 'GET' || !config.matcher.test(url.pathname)) {
     console.log('[Session]: Pathname ignored', url.pathname);
     return {
+      requestMetadata: extractRequestMetadata(request),
       session: null,
     };
   }
@@ -51,6 +53,7 @@ export async function getLoadContext(args: GetLoadContextArgs) {
   // Todo: This is server only right?? Results not exposed?
 
   return {
+    requestMetadata: extractRequestMetadata(request),
     session: session.isAuthenticated
       ? {
           session: session.session,

apps/remix/vite.config.ts

@@ -26,7 +26,18 @@ export default defineConfig({
   },
   ssr: {
     // , 'next/font/google' doesnot work
-    noExternal: ['react-dropzone', 'recharts'],
+    noExternal: [
+      'react-dropzone',
+      'recharts',
+      'superjson',
+      // '@node-rs/bcrypt-wasm32-wasi',
+      // '@noble/ciphers/chacha',
+      // '@noble/ciphers/utils',
+      // '@noble/ciphers/webcrypto/utils',
+      // '@noble/hashes/sha256a',
+      // '@node-rs/bcrypt',
+      // 'crypto',
+    ],
   },
   server: {
     port: 3000,
@@ -42,8 +53,25 @@ export default defineConfig({
     }),
     tsconfigPaths(),
   ],
+  optimizeDeps: {
+    exclude: ['superjson'],
+    force: true,
+  },
+  build: {
+    commonjsOptions: {
+      include: ['superjson'],
+    },
+  },
   // optimizeDeps: {
-  //   exclude: ['next/font/google'], // Todo: Probably remove.
+  //   exclude: [
+  //     '@node-rs/bcrypt-wasm32-wasi',
+  //     '@noble/ciphers/chacha',
+  //     '@noble/ciphers/utils',
+  //     '@noble/ciphers/webcrypto/utils',
+  //     '@noble/hashes/sha256a',
+  //     'crypto',
+  //     '@node-rs/bcrypt',
+  //   ], // Todo: Probably remove.
   //   force: true,
   // },
 });

apps/web/src/app/layout.tsx

@@ -8,7 +8,7 @@ import { PublicEnvScript } from 'next-runtime-env';
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { I18nClientProvider } from '@documenso/lib/client-only/providers/i18n.client';
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
-import { IS_APP_WEB_I18N_ENABLED, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getServerComponentAllFlags } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -69,7 +69,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
-        {IS_APP_WEB_I18N_ENABLED && <meta name="google" content="notranslate" />}
+        <meta name="google" content="notranslate" />
         <PublicEnvScript />
       </head>
 

apps/web/src/components/(teams)/dialogs/create-team-dialog.tsx

@@ -12,7 +12,7 @@ import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
@@ -201,7 +201,7 @@ export const CreateTeamDialog = ({ trigger, ...props }: CreateTeamDialogProps) =
                     {!form.formState.errors.teamUrl && (
                       <span className="text-foreground/50 text-xs font-normal">
                         {field.value ? (
-                          `${WEBAPP_BASE_URL}/t/${field.value}`
+                          `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                         ) : (
                           <Trans>A unique URL to identify your team</Trans>
                         )}

apps/web/src/components/(teams)/forms/update-team-form.tsx

@@ -9,7 +9,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
@@ -75,7 +75,7 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
       });
 
       if (url !== teamUrl) {
-        router.push(`${WEBAPP_BASE_URL}/t/${url}/settings`);
+        router.push(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${url}/settings`);
       }
     } catch (err) {
       const error = AppError.parseError(err);
@@ -133,7 +133,7 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
                 {!form.formState.errors.url && (
                   <span className="text-foreground/50 text-xs font-normal">
                     {field.value ? (
-                      `${WEBAPP_BASE_URL}/t/${field.value}`
+                      `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                     ) : (
                       <Trans>A unique URL to identify your team</Trans>
                     )}

apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx

@@ -9,7 +9,7 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { NEXT_PUBLIC_WEBAPP_URL, WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
@@ -71,7 +71,7 @@ export const CurrentUserTeamsDataTable = () => {
               primaryText={
                 <span className="text-foreground/80 font-semibold">{row.original.name}</span>
               }
-              secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+              secondaryText={`${NEXT_PUBLIC_WEBAPP_URL()}/t/${row.original.url}`}
             />
           </Link>
         ),

apps/web/src/components/(teams)/tables/pending-user-teams-data-table.tsx

@@ -8,7 +8,7 @@ import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { trpc } from '@documenso/trpc/react';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -68,7 +68,7 @@ export const PendingUserTeamsDataTable = () => {
             primaryText={
               <span className="text-foreground/80 font-semibold">{row.original.name}</span>
             }
-            secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+            secondaryText={`${NEXT_PUBLIC_WEBAPP_URL()}/t/${row.original.url}`}
           />
         ),
       },

apps/web/src/providers/next-theme.tsx

@@ -1,10 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import type { ThemeProviderProps } from 'next-themes/dist/types';
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}