chore: merge feat/refresh

2025-11-16 09:41:35 +10:00 · 2023-10-10 13:53:22 +03:00
parent 8f4ba6eb8a e0271cace3
commit 2a89278c7b
266 changed files with 6961 additions and 1475 deletions
--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@ -56,14 +56,14 @@ export interface ButtonProps
 }

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
    if (asChild) {
      return (
        <Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
      );
    }

-    const showLoader = props.loading === true;
+    const showLoader = loading === true;
    const isDisabled = props.disabled || showLoader;

    return (
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@ -11,9 +11,20 @@ const Dialog = DialogPrimitive.Root;

 const DialogTrigger = DialogPrimitive.Trigger;

-const DialogPortal = ({ className, children, ...props }: DialogPrimitive.DialogPortalProps) => (
+const DialogPortal = ({
+  className,
+  children,
+  position = 'start',
+  ...props
+}: DialogPrimitive.DialogPortalProps & { position?: 'start' | 'end' | 'center' }) => (
  <DialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+    <div
+      className={cn('fixed inset-0 z-50 flex justify-center sm:items-center', {
+        'items-start': position === 'start',
+        'items-end': position === 'end',
+        'items-center': position === 'center',
+      })}
+    >
      {children}
    </div>
  </DialogPrimitive.Portal>
@ -39,14 +50,16 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    position?: 'start' | 'end' | 'center';
+  }
+>(({ className, children, position = 'start', ...props }, ref) => (
+  <DialogPortal position={position}>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        'bg-background animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 rounded-b-lg border p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
+        'bg-background animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 data-[state=open]:slide-in-from-bottom-10 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 rounded-b-lg border p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
        className,
      )}
      {...props}
@ -109,6 +122,8 @@ export {
  DialogContent,
  DialogHeader,
  DialogFooter,
+  DialogOverlay,
  DialogTitle,
  DialogDescription,
+  DialogPortal,
 };
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@ -73,7 +73,7 @@ const DocumentDropzoneCardCenterVariants: Variants = {
 };

 export type DocumentDropzoneProps = {
-  className: string;
+  className?: string;
  onDrop?: (_file: File) => void | Promise<void>;
  [key: string]: unknown;
 };
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -256,17 +256,28 @@ export const AddFieldsFormPartial = ({
  }, [onMouseClick, onMouseMove, selectedField]);

  useEffect(() => {
-    const $page = window.document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+    const observer = new MutationObserver((_mutations) => {
+      const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR);

-    if (!$page) {
-      return;
-    }
+      if (!$page) {
+        return;
+      }

-    const { height, width } = $page.getBoundingClientRect();
+      const { height, width } = $page.getBoundingClientRect();

-    fieldBounds.current = {
-      height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX),
-      width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX),
+      fieldBounds.current = {
+        height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX),
+        width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX),
+      };
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
    };
  }, []);

@ -281,7 +292,7 @@ export const AddFieldsFormPartial = ({
          {selectedField && (
            <Card
              className={cn(
-                'pointer-events-none fixed z-50 cursor-pointer bg-white transition-opacity',
+                'bg-background pointer-events-none fixed z-50 cursor-pointer transition-opacity',
                {
                  'border-primary': isFieldWithinBounds,
                  'opacity-50': !isFieldWithinBounds,
@ -340,7 +351,11 @@ export const AddFieldsFormPartial = ({
              <PopoverContent className="p-0" align="start">
                <Command>
                  <CommandInput />
-                  <CommandEmpty />
+                  <CommandEmpty>
+                    <span className="text-muted-foreground inline-block px-4">
+                      No recipient matching this description was found.
+                    </span>
+                  </CommandEmpty>

                  <CommandGroup>
                    {recipients.map((recipient, index) => (
@ -396,7 +411,7 @@ export const AddFieldsFormPartial = ({
            </Popover>
          )}

-          <div className="-mx-2 flex-1 overflow-y-scroll px-2">
+          <div className="-mx-2 flex-1 overflow-y-auto px-2">
            <div className="grid grid-cols-2 gap-x-4 gap-y-8">
              <button
                type="button"
@ -410,7 +425,7 @@ export const AddFieldsFormPartial = ({
                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
                    <p
                      className={cn(
-                        'text-muted-foreground group-data-[selected]:text-foreground text-3xl font-medium',
+                        'text-muted-foreground group-data-[selected]:text-foreground w-full truncate text-3xl font-medium',
                        fontCaveat.className,
                      )}
                    >
@ -505,7 +520,10 @@ export const AddFieldsFormPartial = ({
        <DocumentFlowFormContainerActions
          loading={isSubmitting}
          disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
+          onGoBackClick={() => {
+            documentFlow.onBackStep?.();
+            remove();
+          }}
          onGoNextClick={() => void onFormSubmit()}
        />
      </DocumentFlowFormContainerFooter>
--- a/packages/ui/primitives/document-flow/add-signature.tsx
+++ b/packages/ui/primitives/document-flow/add-signature.tsx
@ -0,0 +1,344 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DateTime } from 'luxon';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { Field, FieldType } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
+import { ZAddSignatureFormSchema } from './add-signature.types';
+import {
+  SinglePlayerModeCustomTextField,
+  SinglePlayerModeSignatureField,
+} from './single-player-mode-fields';
+
+export type AddSignatureFormProps = {
+  defaultValues?: TAddSignatureFormSchema;
+  documentFlow: DocumentFlowStep;
+  fields: FieldWithSignature[];
+  numberOfSteps: number;
+  onSubmit: (_data: TAddSignatureFormSchema) => Promise<void> | void;
+  requireName?: boolean;
+  requireSignature?: boolean;
+};
+
+export const AddSignatureFormPartial = ({
+  defaultValues,
+  documentFlow,
+  fields,
+  numberOfSteps,
+  onSubmit,
+  requireName = false,
+  requireSignature = true,
+}: AddSignatureFormProps) => {
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+
+  // Refined schema which takes into account whether to allow an empty name or signature.
+  const refinedSchema = ZAddSignatureFormSchema.superRefine((val, ctx) => {
+    if (requireName && val.name.length === 0) {
+      ctx.addIssue({
+        path: ['name'],
+        code: 'custom',
+        message: 'Name is required',
+      });
+    }
+
+    if (requireSignature && val.signature.length === 0) {
+      ctx.addIssue({
+        path: ['signature'],
+        code: 'custom',
+        message: 'Signature is required',
+      });
+    }
+  });
+
+  const form = useForm<TAddSignatureFormSchema>({
+    resolver: zodResolver(refinedSchema),
+    defaultValues: defaultValues ?? {
+      name: '',
+      email: '',
+      signature: '',
+    },
+  });
+
+  /**
+   * A local copy of the provided fields to modify.
+   */
+  const [localFields, setLocalFields] = useState<Field[]>(JSON.parse(JSON.stringify(fields)));
+
+  const uninsertedFields = useMemo(() => {
+    const fields = localFields.filter((field) => !field.inserted);
+
+    return sortFieldsByPosition(fields);
+  }, [localFields]);
+
+  const onValidateFields = async (values: TAddSignatureFormSchema) => {
+    setValidateUninsertedFields(true);
+    const isFieldsValid = validateFieldsInserted(localFields);
+
+    if (!isFieldsValid) {
+      return;
+    }
+
+    await onSubmit(values);
+  };
+
+  /**
+   * Validates whether the corresponding form for a given field type is valid.
+   *
+   * @returns `true` if the form associated with the provided field is valid, `false` otherwise.
+   */
+  const validateFieldForm = async (fieldType: Field['type']): Promise<boolean> => {
+    if (fieldType === FieldType.SIGNATURE) {
+      await form.trigger('signature');
+      return !form.formState.errors.signature;
+    }
+
+    if (fieldType === FieldType.NAME) {
+      await form.trigger('name');
+      return !form.formState.errors.name;
+    }
+
+    if (fieldType === FieldType.EMAIL) {
+      await form.trigger('email');
+      return !form.formState.errors.email;
+    }
+
+    return true;
+  };
+
+  /**
+   * Insert the corresponding form value into a given field.
+   */
+  const insertFormValueIntoField = (field: Field) => {
+    return match(field.type)
+      .with(FieldType.DATE, () => ({
+        ...field,
+        customText: DateTime.now().toFormat('yyyy-MM-dd hh:mm a'),
+        inserted: true,
+      }))
+      .with(FieldType.EMAIL, () => ({
+        ...field,
+        customText: form.getValues('email'),
+        inserted: true,
+      }))
+      .with(FieldType.NAME, () => ({
+        ...field,
+        customText: form.getValues('name'),
+        inserted: true,
+      }))
+      .with(FieldType.SIGNATURE, () => {
+        const value = form.getValues('signature');
+
+        return {
+          ...field,
+          value,
+          Signature: {
+            id: -1,
+            recipientId: -1,
+            fieldId: -1,
+            created: new Date(),
+            signatureImageAsBase64: value,
+            typedSignature: null,
+          },
+          inserted: true,
+        };
+      })
+      .otherwise(() => {
+        throw new Error('Unsupported field');
+      });
+  };
+
+  const insertField = (field: Field) => async () => {
+    const isFieldFormValid = await validateFieldForm(field.type);
+    if (!isFieldFormValid) {
+      return;
+    }
+
+    setLocalFields((prev) =>
+      prev.map((prevField) => {
+        if (prevField.id !== field.id) {
+          return prevField;
+        }
+
+        return insertFormValueIntoField(field);
+      }),
+    );
+  };
+
+  /**
+   * When a form value changes, reset all the corresponding fields to be uninserted.
+   */
+  const onFormValueChange = (fieldType: FieldType) => {
+    setLocalFields((fields) =>
+      fields.map((field) => {
+        if (field.type !== fieldType) {
+          return field;
+        }
+
+        return {
+          ...field,
+          inserted: false,
+        };
+      }),
+    );
+  };
+
+  return (
+    <Form {...form}>
+      <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+        <DocumentFlowFormContainerContent>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="bg-background"
+                      type="email"
+                      autoComplete="email"
+                      {...field}
+                      onChange={(value) => {
+                        onFormValueChange(FieldType.EMAIL);
+                        field.onChange(value);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {requireName && (
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required={requireName}>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        {...field}
+                        onChange={(value) => {
+                          onFormValueChange(FieldType.NAME);
+                          field.onChange(value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {requireSignature && (
+              <FormField
+                control={form.control}
+                name="signature"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required={requireSignature}>Signature</FormLabel>
+                    <FormControl>
+                      <Card
+                        className={cn('mt-2', {
+                          'rounded-sm ring-2 ring-red-500 ring-offset-2 transition-all':
+                            form.formState.errors.signature,
+                        })}
+                        gradient={!form.formState.errors.signature}
+                        degrees={-120}
+                      >
+                        <CardContent className="p-0">
+                          <SignaturePad
+                            className="h-44 w-full"
+                            defaultValue={field.value}
+                            onBlur={field.onBlur}
+                            onChange={(value) => {
+                              onFormValueChange(FieldType.SIGNATURE);
+                              field.onChange(value);
+                            }}
+                          />
+                        </CardContent>
+                      </Card>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+          </div>
+        </DocumentFlowFormContainerContent>
+
+        <DocumentFlowFormContainerFooter>
+          <DocumentFlowFormContainerStep
+            title={documentFlow.title}
+            step={documentFlow.stepIndex}
+            maxStep={numberOfSteps}
+          />
+
+          <DocumentFlowFormContainerActions
+            loading={form.formState.isSubmitting}
+            disabled={form.formState.isSubmitting}
+            onGoBackClick={documentFlow.onBackStep}
+            onGoNextClick={form.handleSubmit(onValidateFields)}
+          />
+        </DocumentFlowFormContainerFooter>
+      </fieldset>
+
+      {validateUninsertedFields && uninsertedFields[0] && (
+        <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+          Click to insert field
+        </FieldToolTip>
+      )}
+
+      <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        {localFields.map((field) =>
+          match(field.type)
+            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
+              return (
+                <SinglePlayerModeCustomTextField
+                  onClick={insertField(field)}
+                  key={field.id}
+                  field={field}
+                />
+              );
+            })
+            .with(FieldType.SIGNATURE, () => (
+              <SinglePlayerModeSignatureField
+                onClick={insertField(field)}
+                key={field.id}
+                field={field}
+              />
+            ))
+            .otherwise(() => {
+              return null;
+            }),
+        )}
+      </ElementVisible>
+    </Form>
+  );
+};
--- a/packages/ui/primitives/document-flow/add-signature.types.tsx
+++ b/packages/ui/primitives/document-flow/add-signature.types.tsx
@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const ZAddSignatureFormSchema = z.object({
+  email: z.string().min(1).email(),
+  name: z.string(),
+  signature: z.string(),
+});
+
+export type TAddSignatureFormSchema = z.infer<typeof ZAddSignatureFormSchema>;
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@ -126,12 +126,12 @@ export const AddSignersFormPartial = ({
          <AnimatePresence>
            {signers.map((signer, index) => (
              <motion.div
-                key={signer.formId}
+                key={signer.id}
                data-native-id={signer.nativeId}
                className="flex flex-wrap items-end gap-x-4"
              >
                <div className="flex-1">
-                  <Label htmlFor={`signer-${signer.formId}-email`}>
+                  <Label htmlFor={`signer-${signer.id}-email`}>
                    Email
                    <span className="text-destructive ml-1 inline-block font-medium">*</span>
                  </Label>
@ -141,7 +141,7 @@ export const AddSignersFormPartial = ({
                    name={`signers.${index}.email`}
                    render={({ field }) => (
                      <Input
-                        id={`signer-${signer.formId}-email`}
+                        id={`signer-${signer.id}-email`}
                        type="email"
                        className="bg-background mt-2"
                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
@ -153,14 +153,14 @@ export const AddSignersFormPartial = ({
                </div>

                <div className="flex-1">
-                  <Label htmlFor={`signer-${signer.formId}-name`}>Name</Label>
+                  <Label htmlFor={`signer-${signer.id}-name`}>Name</Label>

                  <Controller
                    control={control}
                    name={`signers.${index}.name`}
                    render={({ field }) => (
                      <Input
-                        id={`signer-${signer.formId}-name`}
+                        id={`signer-${signer.id}-name`}
                        type="text"
                        className="bg-background mt-2"
                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
@ -195,7 +195,11 @@ export const AddSignersFormPartial = ({
          </AnimatePresence>
        </div>

-        <FormErrorMessage className="mt-2" error={errors.signers} />
+        <FormErrorMessage
+          className="mt-2"
+          // Dirty hack to handle errors when .root is populated for an array type
+          error={'signers__root' in errors && errors['signers__root']}
+        />

        <div className="mt-4">
          <Button type="button" disabled={isSubmitting} onClick={() => onAddSigner()}>
--- a/packages/ui/primitives/document-flow/add-signers.types.ts
+++ b/packages/ui/primitives/document-flow/add-signers.types.ts
@ -1,19 +1,24 @@
 import { z } from 'zod';

-export const ZAddSignersFormSchema = z.object({
-  signers: z
-    .array(
+export const ZAddSignersFormSchema = z
+  .object({
+    signers: z.array(
      z.object({
        formId: z.string().min(1),
        nativeId: z.number().optional(),
        email: z.string().min(1).email(),
        name: z.string(),
      }),
-    )
-    .refine((signers) => {
-      const emails = signers.map((signer) => signer.email);
+    ),
+  })
+  .refine(
+    (schema) => {
+      const emails = schema.signers.map((signer) => signer.email.toLowerCase());
+
      return new Set(emails).size === emails.length;
-    }, 'Signers must have unique emails'),
-});
+    },
+    // Dirty hack to handle errors when .root is populated for an array type
+    { message: 'Signers must have unique emails', path: ['signers__root'] },
+  );

 export type TAddSignersFormSchema = z.infer<typeof ZAddSignersFormSchema>;
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@ -2,7 +2,8 @@

 import { useForm } from 'react-hook-form';

-import { Document, DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
+import { DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
+import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
@ -21,7 +22,7 @@ export type AddSubjectFormProps = {
  documentFlow: DocumentFlowStep;
  recipients: Recipient[];
  fields: Field[];
-  document: Document;
+  document: DocumentWithData;
  numberOfSteps: number;
  onSubmit: (_data: TAddSubjectFormSchema) => void;
 };
@ -41,8 +42,8 @@ export const AddSubjectFormPartial = ({
  } = useForm<TAddSubjectFormSchema>({
    defaultValues: {
      email: {
-        subject: '',
-        message: '',
+        subject: document.documentMeta?.subject ?? '',
+        message: document.documentMeta?.message ?? '',
      },
    },
  });
--- a/packages/ui/primitives/document-flow/document-flow-root.tsx
+++ b/packages/ui/primitives/document-flow/document-flow-root.tsx
@ -13,7 +13,7 @@ export type DocumentFlowFormContainerProps = HTMLAttributes<HTMLFormElement> & {

 export const DocumentFlowFormContainer = ({
  children,
-  id = 'edit-document-form',
+  id = 'document-flow-form-container',
  className,
  ...props
 }: DocumentFlowFormContainerProps) => {
@ -21,7 +21,7 @@ export const DocumentFlowFormContainer = ({
    <form
      id={id}
      className={cn(
-        'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[80rem] flex-col rounded-xl border px-4 py-6',
+        'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[64rem] flex-col rounded-xl border px-4 py-6',
        className,
      )}
      {...props}
@ -97,10 +97,7 @@ export const DocumentFlowFormContainerStep = ({
  return (
    <div>
      <p className="text-muted-foreground text-sm">
-        {title}{' '}
-        <span>
-          ({step}/{maxStep})
-        </span>
+        Step <span>{`${step} of ${maxStep}`}</span>
      </p>

      <div className="bg-muted relative mt-4 h-[2px] rounded-md">
@ -152,10 +149,11 @@ export const DocumentFlowFormContainerActions = ({
      </Button>

      <Button
-        type="submit"
+        type="button"
        className="bg-documenso flex-1"
        size="lg"
        disabled={disabled || loading || !canGoNext}
+        loading={loading}
        onClick={onGoNextClick}
      >
        {goNextLabel}
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@ -118,7 +118,7 @@ export const FieldItem = ({
    >
      {!disabled && (
        <button
-          className="text-muted-foreground/50 hover:text-muted-foreground/80 absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border bg-white shadow-[0_0_0_2px_theme(colors.gray.100/70%)]"
+          className="text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border"
          onClick={() => onRemove?.()}
        >
          <Trash className="h-4 w-4" />
@ -126,7 +126,7 @@ export const FieldItem = ({
      )}

      <Card
-        className={cn('h-full w-full bg-white', {
+        className={cn('bg-background h-full w-full', {
          'border-primary': !disabled,
          'border-primary/80': active,
        })}
--- a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
+++ b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
@ -0,0 +1,185 @@
+'use client';
+
+import React, { useRef } from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { match } from 'ts-pattern';
+
+import { useElementScaleSize } from '@documenso/lib/client-only/hooks/use-element-scale-size';
+import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import {
+  DEFAULT_HANDWRITING_FONT_SIZE,
+  DEFAULT_STANDARD_FONT_SIZE,
+  MIN_HANDWRITING_FONT_SIZE,
+  MIN_STANDARD_FONT_SIZE,
+} from '@documenso/lib/constants/pdf';
+import { Field, FieldType } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+
+export type SinglePlayerModeFieldContainerProps = {
+  field: FieldWithSignature;
+  children: React.ReactNode;
+};
+
+export type SinglePlayerModeFieldProps<T> = {
+  field: T;
+  onClick?: () => void;
+};
+
+export function SinglePlayerModeFieldCardContainer({
+  field,
+  children,
+}: SinglePlayerModeFieldContainerProps) {
+  return (
+    <FieldRootContainer field={field}>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={field.inserted ? 'inserted' : 'not-inserted'}
+          className="flex items-center justify-center p-2"
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: 1,
+          }}
+          exit={{ opacity: 0 }}
+          transition={{
+            duration: 0.2,
+            ease: 'easeIn',
+          }}
+        >
+          {children}
+        </motion.div>
+      </AnimatePresence>
+    </FieldRootContainer>
+  );
+}
+
+export function SinglePlayerModeSignatureField({
+  field,
+  onClick,
+}: SinglePlayerModeFieldProps<FieldWithSignature>) {
+  const fontVariable = '--font-signature';
+  const fontVariableValue = getComputedStyle(document.documentElement).getPropertyValue(
+    fontVariable,
+  );
+
+  const minFontSize = MIN_HANDWRITING_FONT_SIZE;
+  const maxFontSize = DEFAULT_HANDWRITING_FONT_SIZE;
+
+  if (!isSignatureFieldType(field.type)) {
+    throw new Error('Invalid field type');
+  }
+
+  const $paragraphEl = useRef<HTMLParagraphElement>(null);
+
+  const { height, width } = useFieldPageCoords(field);
+
+  const scalingFactor = useElementScaleSize(
+    {
+      height,
+      width,
+    },
+    $paragraphEl,
+    maxFontSize,
+    fontVariableValue,
+  );
+
+  const fontSize = maxFontSize * scalingFactor;
+
+  const insertedBase64Signature = field.inserted && field.Signature?.signatureImageAsBase64;
+  const insertedTypeSignature = field.inserted && field.Signature?.typedSignature;
+
+  return (
+    <SinglePlayerModeFieldCardContainer field={field}>
+      {insertedBase64Signature ? (
+        <img
+          src={insertedBase64Signature}
+          alt="Your signature"
+          className="h-full max-w-full object-contain dark:invert"
+        />
+      ) : insertedTypeSignature ? (
+        <p
+          ref={$paragraphEl}
+          style={{
+            fontSize: `clamp(${minFontSize}px, ${fontSize}px, ${maxFontSize}px)`,
+            fontFamily: `var(${fontVariable})`,
+          }}
+          className="font-signature"
+        >
+          {insertedTypeSignature}
+        </p>
+      ) : (
+        <button
+          onClick={() => onClick?.()}
+          className="group-hover:text-primary text-muted-foreground absolute inset-0 h-full w-full duration-200"
+        >
+          Signature
+        </button>
+      )}
+    </SinglePlayerModeFieldCardContainer>
+  );
+}
+
+export function SinglePlayerModeCustomTextField({
+  field,
+  onClick,
+}: SinglePlayerModeFieldProps<Field>) {
+  const fontVariable = '--font-sans';
+  const fontVariableValue = getComputedStyle(document.documentElement).getPropertyValue(
+    fontVariable,
+  );
+
+  const minFontSize = MIN_STANDARD_FONT_SIZE;
+  const maxFontSize = DEFAULT_STANDARD_FONT_SIZE;
+
+  if (isSignatureFieldType(field.type)) {
+    throw new Error('Invalid field type');
+  }
+
+  const $paragraphEl = useRef<HTMLParagraphElement>(null);
+
+  const { height, width } = useFieldPageCoords(field);
+
+  const scalingFactor = useElementScaleSize(
+    {
+      height,
+      width,
+    },
+    $paragraphEl,
+    maxFontSize,
+    fontVariableValue,
+  );
+
+  const fontSize = maxFontSize * scalingFactor;
+
+  return (
+    <SinglePlayerModeFieldCardContainer field={field}>
+      {field.inserted ? (
+        <p
+          ref={$paragraphEl}
+          style={{
+            fontSize: `clamp(${minFontSize}px, ${fontSize}px, ${maxFontSize}px)`,
+            fontFamily: `var(${fontVariable})`,
+          }}
+        >
+          {field.customText}
+        </p>
+      ) : (
+        <button
+          onClick={() => onClick?.()}
+          className="group-hover:text-primary text-muted-foreground absolute inset-0 h-full w-full text-lg duration-200"
+        >
+          {match(field.type)
+            .with(FieldType.DATE, () => 'Date')
+            .with(FieldType.NAME, () => 'Name')
+            .with(FieldType.EMAIL, () => 'Email')
+            .with(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE, () => 'Signature')
+            .otherwise(() => '')}
+        </button>
+      )}
+    </SinglePlayerModeFieldCardContainer>
+  );
+}
+
+const isSignatureFieldType = (fieldType: Field['type']) =>
+  fieldType === FieldType.SIGNATURE || fieldType === FieldType.FREE_SIGNATURE;
--- a/packages/ui/primitives/document-flow/types.ts
+++ b/packages/ui/primitives/document-flow/types.ts
@ -52,7 +52,6 @@ export interface DocumentFlowStep {
  title: string;
  description: string;
  stepIndex: number;
-  onSubmit?: () => void;
  onBackStep?: () => void;
  onNextStep?: () => void;
 }
--- a/packages/ui/primitives/element-visible.tsx
+++ b/packages/ui/primitives/element-visible.tsx
@ -27,6 +27,10 @@ export const ElementVisible = ({ target, children }: ElementVisibleProps) => {
    };
  }, [target]);

+  useEffect(() => {
+    setVisible(!!document.querySelector(target));
+  }, [target]);
+
  if (!visible) {
    return null;
  }
--- a/packages/ui/primitives/form/form-error-message.tsx
+++ b/packages/ui/primitives/form/form-error-message.tsx
@ -4,13 +4,17 @@ import { cn } from '@documenso/ui/lib/utils';

 export type FormErrorMessageProps = {
  className?: string;
-  error: { message?: string } | undefined;
+  error: { message?: string } | undefined | unknown;
+};
+
+const isErrorWithMessage = (error: unknown): error is { message?: string } => {
+  return typeof error === 'object' && error !== null && 'message' in error;
 };

 export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) => {
  return (
    <AnimatePresence>
-      {error && (
+      {isErrorWithMessage(error) && (
        <motion.p
          initial={{
            opacity: 0,
--- a/packages/ui/primitives/form/form.tsx
+++ b/packages/ui/primitives/form/form.tsx
@ -0,0 +1,192 @@
+import * as React from 'react';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { Label } from '../label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn('space-y-2', className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { required?: boolean }
+>(({ className, ...props }, ref) => {
+  const { formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(
+        className,
+        // error && 'text-destructive', // Uncomment to apply styling on error.
+      )}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{
+          opacity: 0,
+          y: -10,
+        }}
+        animate={{
+          opacity: 1,
+          y: 0,
+        }}
+        exit={{
+          opacity: 0,
+          y: 10,
+        }}
+      >
+        <p
+          ref={ref}
+          id={formMessageId}
+          className={cn('text-xs text-red-500', className)}
+          {...props}
+        >
+          {body}
+        </p>
+      </motion.div>
+    </AnimatePresence>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
--- a/packages/ui/primitives/input.tsx
+++ b/packages/ui/primitives/input.tsx
@ -12,6 +12,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
        className={cn(
          'border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className,
+          {
+            'ring-2 !ring-red-500 transition-all': props['aria-invalid'],
+          },
        )}
        ref={ref}
        {...props}
--- a/packages/ui/primitives/label.tsx
+++ b/packages/ui/primitives/label.tsx
@ -13,9 +13,13 @@ const labelVariants = cva(

 const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants> & { required?: boolean }
+>(({ className, children, required, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props}>
+    {children}
+    {required && <span className="text-destructive ml-1 inline-block font-medium">*</span>}
+  </LabelPrimitive.Root>
 ));

 Label.displayName = LabelPrimitive.Root.displayName;
--- a/packages/ui/primitives/lazy-pdf-viewer.tsx
+++ b/packages/ui/primitives/lazy-pdf-viewer.tsx
@ -14,3 +14,10 @@ export const LazyPDFViewer = dynamic(async () => import('./pdf-viewer'), {
    </div>
  ),
 });
+
+/**
+ * LazyPDFViewer variant with no loader.
+ */
+export const LazyPDFViewerNoLoader = dynamic(async () => import('./pdf-viewer'), {
+  ssr: false,
+});
--- a/packages/ui/primitives/pdf-viewer.tsx
+++ b/packages/ui/primitives/pdf-viewer.tsx
@ -8,6 +8,7 @@ import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';

+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';

 export type LoadedPDFDocument = PDFDocumentProxy;
@ -30,18 +31,27 @@ export type OnPDFViewerPageClick = (_event: {
 export type PDFViewerProps = {
  className?: string;
  document: string;
+  onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
  onPageClick?: OnPDFViewerPageClick;
  [key: string]: unknown;
-};
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onPageClick'>;

-export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFViewerProps) => {
+export const PDFViewer = ({
+  className,
+  document,
+  onDocumentLoad,
+  onPageClick,
+  ...props
+}: PDFViewerProps) => {
  const $el = useRef<HTMLDivElement>(null);

  const [width, setWidth] = useState(0);
  const [numPages, setNumPages] = useState(0);
+  const [pdfError, setPdfError] = useState(false);

  const onDocumentLoaded = (doc: LoadedPDFDocument) => {
    setNumPages(doc.numPages);
+    onDocumentLoad?.(doc);
  };

  const onDocumentPageClick = (
@ -54,7 +64,7 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
      return;
    }

-    const $page = $el.closest('.react-pdf__Page');
+    const $page = $el.closest(PDF_VIEWER_PAGE_SELECTOR);

    if (!$page) {
      return;
@ -108,12 +118,34 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
          'h-[80vh] max-h-[60rem]': numPages === 0,
        })}
        onLoadSuccess={(d) => onDocumentLoaded(d)}
+        // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
+        // Therefore we add some additional custom error handling.
+        onSourceError={() => {
+          setPdfError(true);
+        }}
        externalLinkTarget="_blank"
        loading={
          <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-            <Loader className="text-documenso h-12 w-12 animate-spin" />
+            {pdfError ? (
+              <div className="text-muted-foreground text-center">
+                <p>Something went wrong while loading the document.</p>
+                <p className="mt-1 text-sm">Please try again or contact our support.</p>
+              </div>
+            ) : (
+              <>
+                <Loader className="text-documenso h-12 w-12 animate-spin" />

-            <p className="text-muted-foreground mt-4">Loading document...</p>
+                <p className="text-muted-foreground mt-4">Loading document...</p>
+              </>
+            )}
+          </div>
+        }
+        error={
+          <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+            <div className="text-muted-foreground text-center">
+              <p>Something went wrong while loading the document.</p>
+              <p className="mt-1 text-sm">Please try again or contact our support.</p>
+            </div>
          </div>
        }
      >
@ -129,6 +161,7 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
                width={width}
                renderAnnotationLayer={false}
                renderTextLayer={false}
+                loading={() => ''}
                onClick={(e) => onDocumentPageClick(e, i + 1)}
              />
            </div>