Merge branch 'main' into 2fa-input

packages/ui/primitives/avatar.tsx

@@ -55,6 +55,8 @@ type AvatarWithTextProps = {
   primaryText: React.ReactNode;
   secondaryText?: React.ReactNode;
   rightSideComponent?: React.ReactNode;
+  // Optional class to hide/show the text beside avatar
+  textSectionClassName?: string;
 };
 
 const AvatarWithText = ({
@@ -64,6 +66,7 @@ const AvatarWithText = ({
   primaryText,
   secondaryText,
   rightSideComponent,
+  textSectionClassName,
 }: AvatarWithTextProps) => (
   <div className={cn('flex w-full max-w-xs items-center gap-2', className)}>
     <Avatar
@@ -72,7 +75,7 @@ const AvatarWithText = ({
       <AvatarFallback className="text-xs text-gray-400">{avatarFallback}</AvatarFallback>
     </Avatar>
 
-    <div className="flex flex-col text-left text-sm font-normal">
+    <div className={cn('flex flex-col text-left text-sm font-normal', textSectionClassName)}>
       <span className="text-foreground truncate">{primaryText}</span>
       <span className="text-muted-foreground truncate text-xs">{secondaryText}</span>
     </div>

packages/ui/primitives/badge.tsx

@@ -6,20 +6,30 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-md text-xs font-medium ring-1 ring-inset w-fit',
   {
     variants: {
       variant: {
-        default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
-        secondary:
-          'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
+        neutral:
+          'bg-gray-50 text-gray-600 ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20',
         destructive:
-          'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
-        outline: 'text-foreground',
+          'bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20',
+        warning:
+          'bg-yellow-50 text-yellow-800 ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20',
+        default:
+          'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20',
+        secondary:
+          'bg-blue-50 text-blue-700 ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30',
+      },
+      size: {
+        small: 'px-1.5 py-0.5 text-xs',
+        default: 'px-2 py-1.5 text-xs',
+        large: 'px-3 py-2 text-sm',
       },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'default',
     },
   },
 );
@@ -28,8 +38,8 @@ export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+function Badge({ className, variant, size, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant, size }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };

packages/ui/primitives/button.tsx

@@ -13,7 +13,8 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive',
         outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',

packages/ui/primitives/checkbox.tsx

@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'border-input ring-offset-background focus-visible:ring-ring data-[state=checked]:border-primary peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'border-input bg-background ring-offset-background focus-visible:ring-ring data-[state=checked]:border-primary peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}

packages/ui/primitives/color-picker.tsx

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'react';
+import React, { useState } from 'react';
+
+import { HexColorInput, HexColorPicker } from 'react-colorful';
+
+import { cn } from '../lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+export type ColorPickerProps = {
+  disabled?: boolean;
+  value: string;
+  defaultValue?: string;
+  onChange: (color: string) => void;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const ColorPicker = ({
+  className,
+  disabled = false,
+  value,
+  defaultValue = '#000000',
+  onChange,
+  ...props
+}: ColorPickerProps) => {
+  const [color, setColor] = useState(value || defaultValue);
+  const [inputColor, setInputColor] = useState(value || defaultValue);
+
+  const onColorChange = (newColor: string) => {
+    setColor(newColor);
+    setInputColor(newColor);
+    onChange(newColor);
+  };
+
+  const onInputChange = (newColor: string) => {
+    setInputColor(newColor);
+  };
+
+  const onInputBlur = () => {
+    setColor(inputColor);
+    onChange(inputColor);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <button
+          type="button"
+          disabled={disabled}
+          className="bg-background h-12 w-12 rounded-md border p-1 disabled:pointer-events-none disabled:opacity-50"
+        >
+          <div className="h-full w-full rounded-sm" style={{ backgroundColor: color }} />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto">
+        <HexColorPicker
+          className={cn(
+            className,
+            'w-full aria-disabled:pointer-events-none aria-disabled:opacity-50',
+          )}
+          color={color}
+          onChange={onColorChange}
+          aria-disabled={disabled}
+          {...props}
+        />
+
+        <HexColorInput
+          className="mt-4 h-10 rounded-md border bg-transparent px-3 py-2 text-sm disabled:pointer-events-none disabled:opacity-50"
+          color={inputColor}
+          onChange={onInputChange}
+          onBlur={onInputBlur}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              onInputBlur();
+            }
+          }}
+          disabled={disabled}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};

packages/ui/primitives/command.tsx

@@ -32,7 +32,11 @@ type CommandDialogProps = DialogProps & {
 const CommandDialog = ({ children, commandProps, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-2xl">
+      <DialogContent
+        className="w-11/12 items-center overflow-hidden rounded-lg p-0 shadow-2xl lg:mt-0"
+        position="center"
+        overlayClassName="bg-background/60"
+      >
         <Command
           {...commandProps}
           className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4"
@@ -121,7 +125,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}

packages/ui/primitives/data-table-pagination.tsx

@@ -65,7 +65,7 @@ export function DataTablePagination<TData>({
       </div>
       <div className="flex flex-wrap items-center gap-x-6 gap-y-4 lg:gap-x-8">
         <div className="flex items-center text-sm font-medium md:justify-center">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
         </div>
 
         <div className="flex items-center gap-x-2">

packages/ui/primitives/data-table.tsx

@@ -115,7 +115,12 @@ export function DataTable<TData, TValue>({
               table.getRowModel().rows.map((row) => (
                 <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
+                    <TableCell
+                      key={cell.id}
+                      style={{
+                        width: `${cell.column.getSize()}px`,
+                      }}
+                    >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}

packages/ui/primitives/dialog.tsx

@@ -54,28 +54,35 @@ const DialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     position?: 'start' | 'end' | 'center';
     hideClose?: boolean;
+    /* Below prop is to add additional classes to the overlay */
+    overlayClassName?: string;
   }
->(({ className, children, position = 'start', hideClose = false, ...props }, ref) => (
-  <DialogPortal position={position}>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        '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}
-    >
-      {children}
-      {!hideClose && (
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+>(
+  (
+    { className, children, overlayClassName, position = 'start', hideClose = false, ...props },
+    ref,
+  ) => (
+    <DialogPortal position={position}>
+      <DialogOverlay className={cn(overlayClassName)} />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          '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}
+      >
+        {children}
+        {!hideClose && (
+          <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  ),
+);
 
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 

packages/ui/primitives/document-dropzone.tsx

@@ -1,90 +1,27 @@
 'use client';
 
-import type { Variants } from 'framer-motion';
+import Link from 'next/link';
+
 import { motion } from 'framer-motion';
-import { Plus } from 'lucide-react';
+import { AlertTriangle, Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 
+import {
+  DocumentDropzoneCardCenterVariants,
+  DocumentDropzoneCardLeftVariants,
+  DocumentDropzoneCardRightVariants,
+  DocumentDropzoneContainerVariants,
+  DocumentDropzoneDisabledCardCenterVariants,
+  DocumentDropzoneDisabledCardLeftVariants,
+  DocumentDropzoneDisabledCardRightVariants,
+} from '../lib/document-dropzone-constants';
 import { cn } from '../lib/utils';
+import { Button } from './button';
 import { Card, CardContent } from './card';
 
-const DocumentDropzoneContainerVariants: Variants = {
-  initial: {
-    scale: 1,
-  },
-  animate: {
-    scale: 1,
-  },
-  hover: {
-    transition: {
-      staggerChildren: 0.05,
-    },
-  },
-};
-
-const DocumentDropzoneCardLeftVariants: Variants = {
-  initial: {
-    x: 40,
-    y: -10,
-    rotate: -14,
-  },
-  animate: {
-    x: 40,
-    y: -10,
-    rotate: -14,
-  },
-  hover: {
-    x: -25,
-    y: -25,
-    rotate: -22,
-  },
-};
-
-const DocumentDropzoneCardRightVariants: Variants = {
-  initial: {
-    x: -40,
-    y: -10,
-    rotate: 14,
-  },
-  animate: {
-    x: -40,
-    y: -10,
-    rotate: 14,
-  },
-  hover: {
-    x: 25,
-    y: -25,
-    rotate: 22,
-  },
-};
-
-const DocumentDropzoneCardCenterVariants: Variants = {
-  initial: {
-    x: 0,
-    y: 0,
-  },
-  animate: {
-    x: 0,
-    y: 0,
-  },
-  hover: {
-    x: 0,
-    y: -25,
-  },
-};
-
-const DocumentDescription = {
-  document: {
-    headline: 'Add a document',
-  },
-  template: {
-    headline: 'Upload Template Document',
-  },
-};
-
 export type DocumentDropzoneProps = {
   className?: string;
   disabled?: boolean;
@@ -123,68 +60,108 @@ export const DocumentDropzone = ({
     maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
   });
 
+  const heading = {
+    document: disabled ? 'You have reached your document limit.' : 'Add a document',
+    template: 'Upload Template Document',
+  };
+
   return (
     <motion.div
-      className={cn('flex aria-disabled:cursor-not-allowed', className)}
       variants={DocumentDropzoneContainerVariants}
       initial="initial"
       animate="animate"
       whileHover="hover"
-      aria-disabled={disabled}
     >
       <Card
         role="button"
         className={cn(
-          'focus-visible:ring-ring ring-offset-background flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 aria-disabled:pointer-events-none aria-disabled:opacity-60',
+          'focus-visible:ring-ring ring-offset-background group flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
           className,
         )}
-        gradient={true}
+        gradient={!disabled}
         degrees={120}
         aria-disabled={disabled}
         {...getRootProps()}
         {...props}
       >
         <CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
-          {/* <FilePlus strokeWidth="1px" className="h-16 w-16"/> */}
-          <div className="flex">
-            <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={!disabled ? DocumentDropzoneCardLeftVariants : undefined}
-            >
-              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
-              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-            </motion.div>
+          {disabled ? (
+            // Disabled State
+            <div className="flex">
+              <motion.div
+                className="group-hover:bg-destructive/2 border-muted-foreground/20 group-hover:border-destructive/10 dark:bg-muted/80 a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+                variants={DocumentDropzoneDisabledCardLeftVariants}
+              >
+                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-full rounded-[2px]" />
+                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-5/6 rounded-[2px]" />
+                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-full rounded-[2px]" />
+              </motion.div>
 
-            <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={!disabled ? DocumentDropzoneCardCenterVariants : undefined}
-            >
-              <Plus
-                strokeWidth="2px"
-                className="text-muted-foreground/20 group-hover:text-documenso h-12 w-12"
-              />
-            </motion.div>
+              <motion.div
+                className="group-hover:bg-destructive/5 border-muted-foreground/20 group-hover:border-destructive/50 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+                variants={DocumentDropzoneDisabledCardCenterVariants}
+              >
+                <AlertTriangle
+                  strokeWidth="2px"
+                  className="text-muted-foreground/20 group-hover:text-destructive h-12 w-12"
+                />
+              </motion.div>
 
-            <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={!disabled ? DocumentDropzoneCardRightVariants : undefined}
-            >
-              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
-              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-            </motion.div>
-          </div>
+              <motion.div
+                className="group-hover:bg-destructive/2 border-muted-foreground/20 group-hover:border-destructive/10 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+                variants={DocumentDropzoneDisabledCardRightVariants}
+              >
+                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-full rounded-[2px]" />
+                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-5/6 rounded-[2px]" />
+                <div className="bg-muted-foreground/10 group-hover:bg-destructive/10 h-2 w-full rounded-[2px]" />
+              </motion.div>
+            </div>
+          ) : (
+            // Non Disabled State
+            <div className="flex">
+              <motion.div
+                className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+                variants={DocumentDropzoneCardLeftVariants}
+              >
+                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
+                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+              </motion.div>
+
+              <motion.div
+                className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+                variants={DocumentDropzoneCardCenterVariants}
+              >
+                <Plus
+                  strokeWidth="2px"
+                  className="text-muted-foreground/20 group-hover:text-documenso h-12 w-12"
+                />
+              </motion.div>
+
+              <motion.div
+                className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+                variants={DocumentDropzoneCardRightVariants}
+              >
+                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
+                <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+              </motion.div>
+            </div>
+          )}
 
           <input {...getInputProps()} />
 
-          <p className="group-hover:text-foreground text-muted-foreground mt-8 font-medium">
-            {DocumentDescription[type].headline}
-          </p>
+          <p className="text-foreground mt-8 font-medium">{heading[type]}</p>
 
-          <p className="text-muted-foreground/80 mt-1 text-sm">
+          <p className="text-muted-foreground/80 mt-1 text-center text-sm">
             {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
           </p>
+
+          {disabled && IS_BILLING_ENABLED() && (
+            <Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
+              <Link href="/settings/billing">Upgrade</Link>
+            </Button>
+          )}
         </CardContent>
       </Card>
     </motion.div>

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

@@ -53,6 +53,7 @@ export type AddFieldsFormProps = {
   recipients: Recipient[];
   fields: Field[];
   onSubmit: (_data: TAddFieldsFormSchema) => void;
+  isDocumentPdfLoaded: boolean;
 };
 
 export const AddFieldsFormPartial = ({
@@ -61,6 +62,7 @@ export const AddFieldsFormPartial = ({
   recipients,
   fields,
   onSubmit,
+  isDocumentPdfLoaded,
 }: AddFieldsFormProps) => {
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
   const { currentStep, totalSteps, previousStep } = useStep();
@@ -323,9 +325,9 @@ export const AddFieldsFormPartial = ({
           {selectedField && (
             <Card
               className={cn(
-                'bg-background pointer-events-none fixed z-50 cursor-pointer transition-opacity',
+                'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
                 {
-                  'border-primary': isFieldWithinBounds,
+                  'border-field-card-border': isFieldWithinBounds,
                   'opacity-50': !isFieldWithinBounds,
                 },
               )}
@@ -336,25 +338,26 @@ export const AddFieldsFormPartial = ({
                 width: fieldBounds.current.width,
               }}
             >
-              <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
+              <CardContent className="text-field-card-foreground flex h-full w-full items-center justify-center p-2">
                 {FRIENDLY_FIELD_TYPE[selectedField]}
               </CardContent>
             </Card>
           )}
 
-          {localFields.map((field, index) => (
-            <FieldItem
-              key={index}
-              field={field}
-              disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
-              minHeight={fieldBounds.current.height}
-              minWidth={fieldBounds.current.width}
-              passive={isFieldWithinBounds && !!selectedField}
-              onResize={(options) => onFieldResize(options, index)}
-              onMove={(options) => onFieldMove(options, index)}
-              onRemove={() => remove(index)}
-            />
-          ))}
+          {isDocumentPdfLoaded &&
+            localFields.map((field, index) => (
+              <FieldItem
+                key={index}
+                field={field}
+                disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
+                minHeight={fieldBounds.current.height}
+                minWidth={fieldBounds.current.width}
+                passive={isFieldWithinBounds && !!selectedField}
+                onResize={(options) => onFieldResize(options, index)}
+                onMove={(options) => onFieldMove(options, index)}
+                onRemove={() => remove(index)}
+              />
+            ))}
 
           {!hideRecipients && (
             <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
@@ -380,7 +383,7 @@ export const AddFieldsFormPartial = ({
               </PopoverTrigger>
 
               <PopoverContent className="p-0" align="start">
-                <Command>
+                <Command value={selectedSigner?.email}>
                   <CommandInput />
 
                   <CommandEmpty>
@@ -552,6 +555,28 @@ export const AddFieldsFormPartial = ({
                   </CardContent>
                 </Card>
               </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                onClick={() => setSelectedField(FieldType.TEXT)}
+                onMouseDown={() => setSelectedField(FieldType.TEXT)}
+                data-selected={selectedField === FieldType.TEXT ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <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-xl font-medium',
+                      )}
+                    >
+                      {'Text'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Custom Text</p>
+                  </CardContent>
+                </Card>
+              </button>
             </fieldset>
           </div>
         </div>

packages/ui/primitives/document-flow/add-settings.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { InfoIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+
+import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { DocumentStatus, type Field, type Recipient, SendStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import {
+  DocumentGlobalAuthAccessSelect,
+  DocumentGlobalAuthAccessTooltip,
+} from '@documenso/ui/components/document/document-global-auth-access-select';
+import {
+  DocumentGlobalAuthActionSelect,
+  DocumentGlobalAuthActionTooltip,
+} from '@documenso/ui/components/document/document-global-auth-action-select';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+
+import { Combobox } from '../combobox';
+import { Input } from '../input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import type { TAddSettingsFormSchema } from './add-settings.types';
+import { ZAddSettingsFormSchema } from './add-settings.types';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from './document-flow-root';
+import { ShowFieldItem } from './show-field-item';
+import type { DocumentFlowStep } from './types';
+
+export type AddSettingsFormProps = {
+  documentFlow: DocumentFlowStep;
+  recipients: Recipient[];
+  fields: Field[];
+  isDocumentEnterprise: boolean;
+  isDocumentPdfLoaded: boolean;
+  document: DocumentWithData;
+  onSubmit: (_data: TAddSettingsFormSchema) => void;
+};
+
+export const AddSettingsFormPartial = ({
+  documentFlow,
+  recipients,
+  fields,
+  isDocumentEnterprise,
+  isDocumentPdfLoaded,
+  document,
+  onSubmit,
+}: AddSettingsFormProps) => {
+  const { documentAuthOption } = extractDocumentAuthMethods({
+    documentAuth: document.authOptions,
+  });
+
+  const form = useForm<TAddSettingsFormSchema>({
+    resolver: zodResolver(ZAddSettingsFormSchema),
+    defaultValues: {
+      title: document.title,
+      globalAccessAuth: documentAuthOption?.globalAccessAuth || undefined,
+      globalActionAuth: documentAuthOption?.globalActionAuth || undefined,
+      meta: {
+        timezone: document.documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+        dateFormat: document.documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        redirectUrl: document.documentMeta?.redirectUrl ?? '',
+      },
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  const documentHasBeenSent = recipients.some(
+    (recipient) => recipient.sendStatus === SendStatus.SENT,
+  );
+
+  // We almost always want to set the timezone to the user's local timezone to avoid confusion
+  // when the document is signed.
+  useEffect(() => {
+    if (!form.formState.touchedFields.meta?.timezone && !documentHasBeenSent) {
+      form.setValue('meta.timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }
+  }, [documentHasBeenSent, form, form.setValue, form.formState.touchedFields.meta?.timezone]);
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
+
+      <DocumentFlowFormContainerContent>
+        {isDocumentPdfLoaded &&
+          fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
+
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Title</FormLabel>
+
+                  <FormControl>
+                    <Input
+                      className="bg-background"
+                      {...field}
+                      disabled={document.status !== DocumentStatus.DRAFT || field.disabled}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="globalAccessAuth"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex flex-row items-center">
+                    Document access
+                    <DocumentGlobalAuthAccessTooltip />
+                  </FormLabel>
+
+                  <FormControl>
+                    <DocumentGlobalAuthAccessSelect {...field} onValueChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            {isDocumentEnterprise && (
+              <FormField
+                control={form.control}
+                name="globalActionAuth"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex flex-row items-center">
+                      Recipient action authentication
+                      <DocumentGlobalAuthActionTooltip />
+                    </FormLabel>
+
+                    <FormControl>
+                      <DocumentGlobalAuthActionSelect {...field} onValueChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <Accordion type="multiple" className="mt-6">
+              <AccordionItem value="advanced-options" className="border-none">
+                <AccordionTrigger className="text-foreground mb-2 rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                  Advanced Options
+                </AccordionTrigger>
+
+                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-2 text-sm leading-relaxed">
+                  <div className="flex flex-col space-y-6 ">
+                    <FormField
+                      control={form.control}
+                      name="meta.dateFormat"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Date Format</FormLabel>
+
+                          <FormControl>
+                            <Select
+                              {...field}
+                              onValueChange={field.onChange}
+                              disabled={documentHasBeenSent}
+                            >
+                              <SelectTrigger className="bg-background">
+                                <SelectValue />
+                              </SelectTrigger>
+
+                              <SelectContent>
+                                {DATE_FORMATS.map((format) => (
+                                  <SelectItem key={format.key} value={format.value}>
+                                    {format.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.timezone"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Time Zone</FormLabel>
+
+                          <FormControl>
+                            <Combobox
+                              className="bg-background"
+                              options={TIME_ZONES}
+                              {...field}
+                              onChange={(value) => value && field.onChange(value)}
+                              disabled={documentHasBeenSent}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.redirectUrl"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex flex-row items-center">
+                            Redirect URL{' '}
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <InfoIcon className="mx-2 h-4 w-4" />
+                              </TooltipTrigger>
+
+                              <TooltipContent className="text-muted-foreground max-w-xs">
+                                Add a URL to redirect the user to once the document is signed
+                              </TooltipContent>
+                            </Tooltip>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Input className="bg-background" {...field} />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

packages/ui/primitives/document-flow/add-settings.types.ts

@@ -0,0 +1,42 @@
+import { z } from 'zod';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { URL_REGEX } from '@documenso/lib/constants/url-regex';
+import {
+  ZDocumentAccessAuthTypesSchema,
+  ZDocumentActionAuthTypesSchema,
+} from '@documenso/lib/types/document-auth';
+
+export const ZMapNegativeOneToUndefinedSchema = z
+  .string()
+  .optional()
+  .transform((val) => {
+    if (val === '-1') {
+      return undefined;
+    }
+
+    return val;
+  });
+
+export const ZAddSettingsFormSchema = z.object({
+  title: z.string().trim().min(1, { message: "Title can't be empty" }),
+  globalAccessAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentAccessAuthTypesSchema.optional(),
+  ),
+  globalActionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentActionAuthTypesSchema.optional(),
+  ),
+  meta: z.object({
+    timezone: z.string().optional().default(DEFAULT_DOCUMENT_TIME_ZONE),
+    dateFormat: z.string().optional().default(DEFAULT_DOCUMENT_DATE_FORMAT),
+    redirectUrl: z
+      .string()
+      .optional()
+      .refine((value) => value === undefined || value === '' || URL_REGEX.test(value), {
+        message: 'Please enter a valid URL',
+      }),
+  }),
+});
+
+export type TAddSettingsFormSchema = z.infer<typeof ZAddSettingsFormSchema>;

packages/ui/primitives/document-flow/add-signature.tsx

@@ -44,6 +44,7 @@ export type AddSignatureFormProps = {
 
   onSubmit: (_data: TAddSignatureFormSchema) => Promise<void> | void;
   requireName?: boolean;
+  requireCustomText?: boolean;
   requireSignature?: boolean;
 };
 
@@ -54,6 +55,7 @@ export const AddSignatureFormPartial = ({
 
   onSubmit,
   requireName = false,
+  requireCustomText = false,
   requireSignature = true,
 }: AddSignatureFormProps) => {
   const { currentStep, totalSteps } = useStep();
@@ -70,6 +72,14 @@ export const AddSignatureFormPartial = ({
       });
     }
 
+    if (requireCustomText && val.customText.length === 0) {
+      ctx.addIssue({
+        path: ['customText'],
+        code: 'custom',
+        message: 'Text is required',
+      });
+    }
+
     if (requireSignature && val.signature.length === 0) {
       ctx.addIssue({
         path: ['signature'],
@@ -85,6 +95,7 @@ export const AddSignatureFormPartial = ({
       name: '',
       email: '',
       signature: '',
+      customText: '',
     },
   });
 
@@ -131,6 +142,11 @@ export const AddSignatureFormPartial = ({
       return !form.formState.errors.email;
     }
 
+    if (fieldType === FieldType.TEXT) {
+      await form.trigger('customText');
+      return !form.formState.errors.customText;
+    }
+
     return true;
   };
 
@@ -154,6 +170,11 @@ export const AddSignatureFormPartial = ({
         customText: form.getValues('name'),
         inserted: true,
       }))
+      .with(FieldType.TEXT, () => ({
+        ...field,
+        customText: form.getValues('customText'),
+        inserted: true,
+      }))
       .with(FieldType.SIGNATURE, () => {
         const value = form.getValues('signature');
 
@@ -302,6 +323,29 @@ export const AddSignatureFormPartial = ({
                   )}
                 />
               )}
+
+              {requireCustomText && (
+                <FormField
+                  control={form.control}
+                  name="customText"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required={requireCustomText}>Custom Text</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="bg-background"
+                          {...field}
+                          onChange={(value) => {
+                            onFormValueChange(FieldType.TEXT);
+                            field.onChange(value);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
             </div>
           </DocumentFlowFormContainerContent>
 
@@ -330,7 +374,7 @@ export const AddSignatureFormPartial = ({
         <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {localFields.map((field) =>
             match(field.type)
-              .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
+              .with(FieldType.DATE, FieldType.TEXT, FieldType.EMAIL, FieldType.NAME, () => {
                 return (
                   <SinglePlayerModeCustomTextField
                     onClick={insertField(field)}

packages/ui/primitives/document-flow/add-signature.types.ts

@@ -6,6 +6,7 @@ export const ZAddSignatureFormSchema = z.object({
     .min(1, { message: 'Email is required' })
     .email({ message: 'Invalid email address' }),
   name: z.string(),
+  customText: z.string(),
   signature: z.string(),
 });
 

packages/ui/primitives/document-flow/add-signers.tsx

@@ -1,23 +1,28 @@
 'use client';
 
-import React, { useId } from 'react';
+import React, { useId, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { AnimatePresence, motion } from 'framer-motion';
-import { BadgeCheck, Copy, Eye, PencilLine, Plus, Trash } from 'lucide-react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { motion } from 'framer-motion';
+import { Plus, Trash } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
-import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
-import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { RecipientRole, SendStatus } from '@documenso/prisma/client';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
+import { cn } from '@documenso/ui/lib/utils';
 
 import { Button } from '../button';
+import { Checkbox } from '../checkbox';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
-import { Label } from '../label';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
 import { useStep } from '../stepper';
 import { useToast } from '../use-toast';
 import type { TAddSignersFormSchema } from './add-signers.types';
@@ -32,40 +37,33 @@ import {
 import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';
 
-const ROLE_ICONS: Record<RecipientRole, JSX.Element> = {
-  SIGNER: <PencilLine className="h-4 w-4" />,
-  APPROVER: <BadgeCheck className="h-4 w-4" />,
-  CC: <Copy className="h-4 w-4" />,
-  VIEWER: <Eye className="h-4 w-4" />,
-};
-
 export type AddSignersFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
-  document: DocumentWithData;
+  isDocumentEnterprise: boolean;
   onSubmit: (_data: TAddSignersFormSchema) => void;
+  isDocumentPdfLoaded: boolean;
 };
 
 export const AddSignersFormPartial = ({
   documentFlow,
   recipients,
-  document,
   fields,
+  isDocumentEnterprise,
   onSubmit,
+  isDocumentPdfLoaded,
 }: AddSignersFormProps) => {
   const { toast } = useToast();
   const { remaining } = useLimits();
+  const { data: session } = useSession();
+  const user = session?.user;
 
   const initialId = useId();
 
   const { currentStep, totalSteps, previousStep } = useStep();
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddSignersFormSchema>({
+  const form = useForm<TAddSignersFormSchema>({
     resolver: zodResolver(ZAddSignersFormSchema),
     defaultValues: {
       signers:
@@ -76,6 +74,8 @@ export const AddSignersFormPartial = ({
               name: recipient.name,
               email: recipient.email,
               role: recipient.role,
+              actionAuth:
+                ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
             }))
           : [
               {
@@ -83,12 +83,33 @@ export const AddSignersFormPartial = ({
                 name: '',
                 email: '',
                 role: RecipientRole.SIGNER,
+                actionAuth: undefined,
               },
             ],
     },
   });
 
-  const onFormSubmit = handleSubmit(onSubmit);
+  // Always show advanced settings if any recipient has auth options.
+  const alwaysShowAdvancedSettings = useMemo(() => {
+    const recipientHasAuthOptions = recipients.find((recipient) => {
+      const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
+
+      return recipientAuthOptions?.accessAuth || recipientAuthOptions?.actionAuth;
+    });
+
+    const formHasActionAuth = form.getValues('signers').find((signer) => signer.actionAuth);
+
+    return recipientHasAuthOptions !== undefined || formHasActionAuth !== undefined;
+  }, [recipients, form]);
+
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(alwaysShowAdvancedSettings);
+
+  const {
+    formState: { errors, isSubmitting },
+    control,
+  } = form;
+
+  const onFormSubmit = form.handleSubmit(onSubmit);
 
   const {
     append: appendSigner,
@@ -112,12 +133,23 @@ export const AddSignersFormPartial = ({
     );
   };
 
+  const onAddSelfSigner = () => {
+    appendSigner({
+      formId: nanoid(12),
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+      actionAuth: undefined,
+    });
+  };
+
   const onAddSigner = () => {
     appendSigner({
       formId: nanoid(12),
       name: '',
       email: '',
       role: RecipientRole.SIGNER,
+      actionAuth: undefined,
     });
   };
 
@@ -150,105 +182,126 @@ export const AddSignersFormPartial = ({
         description={documentFlow.description}
       />
       <DocumentFlowFormContainerContent>
-        <div className="flex w-full flex-col gap-y-4">
-          {fields.map((field, index) => (
+        {isDocumentPdfLoaded &&
+          fields.map((field, index) => (
             <ShowFieldItem key={index} field={field} recipients={recipients} />
           ))}
 
-          <AnimatePresence>
-            {signers.map((signer, index) => (
-              <motion.div
-                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.id}-email`}>
-                    Email
-                    <span className="text-destructive ml-1 inline-block font-medium">*</span>
-                  </Label>
-
-                  <Controller
-                    control={control}
+        <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
+          <Form {...form}>
+            <div className="flex w-full flex-col gap-y-2">
+              {signers.map((signer, index) => (
+                <motion.fieldset
+                  key={signer.id}
+                  data-native-id={signer.nativeId}
+                  disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                  className={cn('grid grid-cols-8 gap-4 pb-4', {
+                    'border-b pt-2': showAdvancedSettings,
+                  })}
+                >
+                  <FormField
+                    control={form.control}
                     name={`signers.${index}.email`}
                     render={({ field }) => (
-                      <Input
-                        id={`signer-${signer.id}-email`}
-                        type="email"
-                        className="bg-background mt-2"
-                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
-                        onKeyDown={onKeyDown}
-                        {...field}
-                      />
+                      <FormItem
+                        className={cn('relative', {
+                          'col-span-3': !showAdvancedSettings,
+                          'col-span-4': showAdvancedSettings,
+                        })}
+                      >
+                        {!showAdvancedSettings && index === 0 && (
+                          <FormLabel required>Email</FormLabel>
+                        )}
+
+                        <FormControl>
+                          <Input
+                            type="email"
+                            placeholder="Email"
+                            {...field}
+                            disabled={
+                              isSubmitting ||
+                              hasBeenSentToRecipientId(signer.nativeId) ||
+                              signers[index].email === user?.email
+                            }
+                            onKeyDown={onKeyDown}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="flex-1">
-                  <Label htmlFor={`signer-${signer.id}-name`}>Name</Label>
-
-                  <Controller
-                    control={control}
+                  <FormField
+                    control={form.control}
                     name={`signers.${index}.name`}
                     render={({ field }) => (
-                      <Input
-                        id={`signer-${signer.id}-name`}
-                        type="text"
-                        className="bg-background mt-2"
-                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
-                        onKeyDown={onKeyDown}
-                        {...field}
-                      />
+                      <FormItem
+                        className={cn({
+                          'col-span-3': !showAdvancedSettings,
+                          'col-span-4': showAdvancedSettings,
+                        })}
+                      >
+                        {!showAdvancedSettings && index === 0 && <FormLabel>Name</FormLabel>}
+
+                        <FormControl>
+                          <Input
+                            placeholder="Name"
+                            {...field}
+                            disabled={
+                              isSubmitting ||
+                              hasBeenSentToRecipientId(signer.nativeId) ||
+                              signers[index].email === user?.email
+                            }
+                            onKeyDown={onKeyDown}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
                     )}
                   />
-                </div>
 
-                <div className="w-[60px]">
-                  <Controller
-                    control={control}
+                  {showAdvancedSettings && isDocumentEnterprise && (
+                    <FormField
+                      control={form.control}
+                      name={`signers.${index}.actionAuth`}
+                      render={({ field }) => (
+                        <FormItem className="col-span-6">
+                          <FormControl>
+                            <RecipientActionAuthSelect
+                              {...field}
+                              onValueChange={field.onChange}
+                              disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+
+                  <FormField
                     name={`signers.${index}.role`}
-                    render={({ field: { value, onChange } }) => (
-                      <Select value={value} onValueChange={(x) => onChange(x)}>
-                        <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
+                    render={({ field }) => (
+                      <FormItem className="col-span-1 mt-auto">
+                        <FormControl>
+                          <RecipientRoleSelect
+                            {...field}
+                            onValueChange={field.onChange}
+                            disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                          />
+                        </FormControl>
 
-                        <SelectContent className="" align="end">
-                          <SelectItem value={RecipientRole.SIGNER}>
-                            <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                              Signer
-                            </div>
-                          </SelectItem>
-
-                          <SelectItem value={RecipientRole.CC}>
-                            <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                              Receives copy
-                            </div>
-                          </SelectItem>
-
-                          <SelectItem value={RecipientRole.APPROVER}>
-                            <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                              Approver
-                            </div>
-                          </SelectItem>
-
-                          <SelectItem value={RecipientRole.VIEWER}>
-                            <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                              Viewer
-                            </div>
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
+                        <FormMessage />
+                      </FormItem>
                     )}
                   />
-                </div>
 
-                <div>
                   <button
                     type="button"
-                    className="justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={
                       isSubmitting ||
                       hasBeenSentToRecipientId(signer.nativeId) ||
@@ -258,33 +311,65 @@ export const AddSignersFormPartial = ({
                   >
                     <Trash className="h-5 w-5" />
                   </button>
-                </div>
+                </motion.fieldset>
+              ))}
+            </div>
 
-                <div className="w-full">
-                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
-                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
-                </div>
-              </motion.div>
-            ))}
-          </AnimatePresence>
-        </div>
+            <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']}
+            />
 
-        <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={cn('mt-2 flex flex-row items-center space-x-4', {
+                'mt-4': showAdvancedSettings,
+              })}
+            >
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={isSubmitting || signers.length >= remaining.recipients}
+                onClick={() => onAddSigner()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add Signer
+              </Button>
+              <Button
+                type="button"
+                variant="secondary"
+                className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+                disabled={
+                  isSubmitting ||
+                  form.getValues('signers').some((signer) => signer.email === user?.email)
+                }
+                onClick={() => onAddSelfSigner()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add myself
+              </Button>
+            </div>
 
-        <div className="mt-4">
-          <Button
-            type="button"
-            disabled={isSubmitting || signers.length >= remaining.recipients}
-            onClick={() => onAddSigner()}
-          >
-            <Plus className="-ml-1 mr-2 h-5 w-5" />
-            Add Signer
-          </Button>
-        </div>
+            {!alwaysShowAdvancedSettings && isDocumentEnterprise && (
+              <div className="mt-4 flex flex-row items-center">
+                <Checkbox
+                  id="showAdvancedRecipientSettings"
+                  className="h-5 w-5"
+                  checkClassName="dark:text-white text-primary"
+                  checked={showAdvancedSettings}
+                  onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
+                />
+
+                <label
+                  className="text-muted-foreground ml-2 text-sm"
+                  htmlFor="showAdvancedRecipientSettings"
+                >
+                  Show advanced settings
+                </label>
+              </div>
+            )}
+          </Form>
+        </AnimateGenericFadeInOut>
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>
@@ -295,7 +380,6 @@ export const AddSignersFormPartial = ({
         />
 
         <DocumentFlowFormContainerActions
-          canGoBack={document.status === DocumentStatus.DRAFT}
           loading={isSubmitting}
           disabled={isSubmitting}
           onGoBackClick={previousStep}

packages/ui/primitives/document-flow/add-signers.types.ts

@@ -1,5 +1,8 @@
 import { z } from 'zod';
 
+import { ZRecipientActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
+
+import { ZMapNegativeOneToUndefinedSchema } from './add-settings.types';
 import { RecipientRole } from '.prisma/client';
 
 export const ZAddSignersFormSchema = z
@@ -11,6 +14,9 @@ export const ZAddSignersFormSchema = z
         email: z.string().email().min(1),
         name: z.string(),
         role: z.nativeEnum(RecipientRole),
+        actionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+          ZRecipientActionAuthTypesSchema.optional(),
+        ),
       }),
     ),
   })

packages/ui/primitives/document-flow/add-subject.tsx

@@ -1,33 +1,13 @@
 'use client';
 
-import { useEffect } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Info } from 'lucide-react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
-import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
-import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
-import { SendStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@documenso/ui/primitives/accordion';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 
-import { Combobox } from '../combobox';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
 import { Label } from '../label';
@@ -50,6 +30,7 @@ export type AddSubjectFormProps = {
   fields: Field[];
   document: DocumentWithData;
   onSubmit: (_data: TAddSubjectFormSchema) => void;
+  isDocumentPdfLoaded: boolean;
 };
 
 export const AddSubjectFormPartial = ({
@@ -58,21 +39,17 @@ export const AddSubjectFormPartial = ({
   fields: fields,
   document,
   onSubmit,
+  isDocumentPdfLoaded,
 }: AddSubjectFormProps) => {
   const {
-    control,
     register,
     handleSubmit,
-    formState: { errors, isSubmitting, touchedFields },
-    setValue,
+    formState: { errors, isSubmitting },
   } = useForm<TAddSubjectFormSchema>({
     defaultValues: {
       meta: {
         subject: document.documentMeta?.subject ?? '',
         message: document.documentMeta?.message ?? '',
-        timezone: document.documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
-        dateFormat: document.documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
-        redirectUrl: document.documentMeta?.redirectUrl ?? '',
       },
     },
     resolver: zodResolver(ZAddSubjectFormSchema),
@@ -81,20 +58,6 @@ export const AddSubjectFormPartial = ({
   const onFormSubmit = handleSubmit(onSubmit);
   const { currentStep, totalSteps, previousStep } = useStep();
 
-  const hasDateField = fields.find((field) => field.type === 'DATE');
-
-  const documentHasBeenSent = recipients.some(
-    (recipient) => recipient.sendStatus === SendStatus.SENT,
-  );
-
-  // We almost always want to set the timezone to the user's local timezone to avoid confusion
-  // when the document is signed.
-  useEffect(() => {
-    if (!touchedFields.meta?.timezone && !documentHasBeenSent) {
-      setValue('meta.timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
-    }
-  }, [documentHasBeenSent, setValue, touchedFields.meta?.timezone]);
-
   return (
     <>
       <DocumentFlowFormContainerHeader
@@ -103,9 +66,10 @@ export const AddSubjectFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
-          {fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+          {isDocumentPdfLoaded &&
+            fields.map((field, index) => (
+              <ShowFieldItem key={index} field={field} recipients={recipients} />
+            ))}
 
           <div className="flex flex-col gap-y-4">
             <div>
@@ -141,121 +105,7 @@ export const AddSubjectFormPartial = ({
               />
             </div>
 
-            <div>
-              <p className="text-muted-foreground text-sm">
-                You can use the following variables in your message:
-              </p>
-
-              <ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
-                <li className="text-muted-foreground">
-                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                    {'{signer.name}'}
-                  </code>{' '}
-                  - The signer's name
-                </li>
-                <li className="text-muted-foreground">
-                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                    {'{signer.email}'}
-                  </code>{' '}
-                  - The signer's email
-                </li>
-                <li className="text-muted-foreground">
-                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                    {'{document.name}'}
-                  </code>{' '}
-                  - The document's name
-                </li>
-              </ul>
-            </div>
-
-            <Accordion type="multiple" className="mt-8 border-none">
-              <AccordionItem value="advanced-options" className="border-none">
-                <AccordionTrigger className="mb-2 border-b text-left hover:no-underline">
-                  Advanced Options
-                </AccordionTrigger>
-
-                <AccordionContent className="text-muted-foreground -mx-1 flex max-w-prose flex-col px-1 pt-2 text-sm leading-relaxed">
-                  {hasDateField && (
-                    <>
-                      <div className="flex flex-col">
-                        <Label htmlFor="date-format">
-                          Date Format <span className="text-muted-foreground">(Optional)</span>
-                        </Label>
-
-                        <Controller
-                          control={control}
-                          name={`meta.dateFormat`}
-                          disabled={documentHasBeenSent}
-                          render={({ field: { value, onChange, disabled } }) => (
-                            <Select value={value} onValueChange={onChange} disabled={disabled}>
-                              <SelectTrigger className="bg-background mt-2">
-                                <SelectValue />
-                              </SelectTrigger>
-
-                              <SelectContent>
-                                {DATE_FORMATS.map((format) => (
-                                  <SelectItem key={format.key} value={format.value}>
-                                    {format.label}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          )}
-                        />
-                      </div>
-
-                      <div className="mt-4 flex flex-col">
-                        <Label htmlFor="time-zone">
-                          Time Zone <span className="text-muted-foreground">(Optional)</span>
-                        </Label>
-
-                        <Controller
-                          control={control}
-                          name={`meta.timezone`}
-                          render={({ field: { value, onChange } }) => (
-                            <Combobox
-                              className="bg-background"
-                              options={TIME_ZONES}
-                              value={value}
-                              onChange={(value) => value && onChange(value)}
-                              disabled={documentHasBeenSent}
-                            />
-                          )}
-                        />
-                      </div>
-                    </>
-                  )}
-
-                  <div className="flex flex-col">
-                    <div className="flex flex-col gap-y-4">
-                      <div>
-                        <Label htmlFor="redirectUrl" className="flex items-center">
-                          Redirect URL{' '}
-                          <Tooltip>
-                            <TooltipTrigger>
-                              <Info className="mx-2 h-4 w-4" />
-                            </TooltipTrigger>
-
-                            <TooltipContent className="text-muted-foreground max-w-xs">
-                              Add a URL to redirect the user to once the document is signed
-                            </TooltipContent>
-                          </Tooltip>
-                        </Label>
-
-                        <Input
-                          id="redirectUrl"
-                          type="url"
-                          className="bg-background my-2"
-                          {...register('meta.redirectUrl')}
-                        />
-
-                        <FormErrorMessage className="mt-2" error={errors.meta?.redirectUrl} />
-                      </div>
-                    </div>
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
+            <DocumentSendEmailMessageHelper />
           </div>
         </div>
       </DocumentFlowFormContainerContent>

packages/ui/primitives/document-flow/add-subject.types.ts

@@ -1,21 +1,9 @@
 import { z } from 'zod';
 
-import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import { URL_REGEX } from '@documenso/lib/constants/url-regex';
-
 export const ZAddSubjectFormSchema = z.object({
   meta: z.object({
     subject: z.string(),
     message: z.string(),
-    timezone: z.string().optional().default(DEFAULT_DOCUMENT_TIME_ZONE),
-    dateFormat: z.string().optional().default(DEFAULT_DOCUMENT_DATE_FORMAT),
-    redirectUrl: z
-      .string()
-      .optional()
-      .refine((value) => value === undefined || value === '' || URL_REGEX.test(value), {
-        message: 'Please enter a valid URL',
-      }),
   }),
 });
 

packages/ui/primitives/document-flow/add-title.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-
-import type { Field, Recipient } from '@documenso/prisma/client';
-import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-
-import { FormErrorMessage } from '../form/form-error-message';
-import { Input } from '../input';
-import { Label } from '../label';
-import { useStep } from '../stepper';
-import type { TAddTitleFormSchema } from './add-title.types';
-import { ZAddTitleFormSchema } from './add-title.types';
-import {
-  DocumentFlowFormContainerActions,
-  DocumentFlowFormContainerContent,
-  DocumentFlowFormContainerFooter,
-  DocumentFlowFormContainerHeader,
-  DocumentFlowFormContainerStep,
-} from './document-flow-root';
-import { ShowFieldItem } from './show-field-item';
-import type { DocumentFlowStep } from './types';
-
-export type AddTitleFormProps = {
-  documentFlow: DocumentFlowStep;
-  recipients: Recipient[];
-  fields: Field[];
-  document: DocumentWithData;
-  onSubmit: (_data: TAddTitleFormSchema) => void;
-};
-
-export const AddTitleFormPartial = ({
-  documentFlow,
-  recipients,
-  fields,
-  document,
-  onSubmit,
-}: AddTitleFormProps) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddTitleFormSchema>({
-    resolver: zodResolver(ZAddTitleFormSchema),
-    defaultValues: {
-      title: document.title,
-    },
-  });
-
-  const onFormSubmit = handleSubmit(onSubmit);
-
-  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
-
-  return (
-    <>
-      <DocumentFlowFormContainerHeader
-        title={documentFlow.title}
-        description={documentFlow.description}
-      />
-      <DocumentFlowFormContainerContent>
-        {fields.map((field, index) => (
-          <ShowFieldItem key={index} field={field} recipients={recipients} />
-        ))}
-
-        <div className="flex flex-col">
-          <div className="flex flex-col gap-y-4">
-            <div>
-              <Label htmlFor="title">
-                Title<span className="text-destructive ml-1 inline-block font-medium">*</span>
-              </Label>
-
-              <Input
-                id="title"
-                className="bg-background my-2"
-                disabled={isSubmitting}
-                {...register('title')}
-              />
-
-              <FormErrorMessage className="mt-2" error={errors.title} />
-            </div>
-          </div>
-        </div>
-      </DocumentFlowFormContainerContent>
-
-      <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep
-          title={documentFlow.title}
-          step={currentStep}
-          maxStep={totalSteps}
-        />
-
-        <DocumentFlowFormContainerActions
-          loading={isSubmitting}
-          disabled={isSubmitting}
-          canGoBack={stepIndex !== 0}
-          onGoBackClick={previousStep}
-          onGoNextClick={() => void onFormSubmit()}
-        />
-      </DocumentFlowFormContainerFooter>
-    </>
-  );
-};

packages/ui/primitives/document-flow/add-title.types.ts

@@ -1,7 +0,0 @@
-import { z } from 'zod';
-
-export const ZAddTitleFormSchema = z.object({
-  title: z.string().trim().min(1, { message: "Title can't be empty" }),
-});
-
-export type TAddTitleFormSchema = z.infer<typeof ZAddTitleFormSchema>;

packages/ui/primitives/document-flow/field-item.tsx

@@ -128,24 +128,22 @@ export const FieldItem = ({
       )}
 
       <Card
-        className={cn('bg-background h-full w-full', {
-          'border-primary': !disabled,
-          'border-primary/80': active,
+        className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
+          'border-field-card-border': !disabled,
+          'border-field-card-border/80': active,
         })}
       >
         <CardContent
           className={cn(
-            'text-foreground flex h-full w-full flex-col items-center justify-center p-2',
+            'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
             {
-              'text-muted-foreground/50': disabled,
+              'text-field-card-foreground/50': disabled,
             },
           )}
         >
           {FRIENDLY_FIELD_TYPE[field.type]}
 
-          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
-            {field.signerEmail}
-          </p>
+          <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
         </CardContent>
       </Card>
     </Rnd>,

packages/ui/primitives/document-flow/single-player-mode-fields.tsx

@@ -172,6 +172,7 @@ export function SinglePlayerModeCustomTextField({
             .with(FieldType.DATE, () => 'Date')
             .with(FieldType.NAME, () => 'Name')
             .with(FieldType.EMAIL, () => 'Email')
+            .with(FieldType.TEXT, () => 'Text')
             .with(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE, () => 'Signature')
             .otherwise(() => '')}
         </button>

packages/ui/primitives/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         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',
+          'bg-background border-input ring-offset-background placeholder:text-muted-foreground/40 focus-visible:ring-ring flex h-10 w-full rounded-md border 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'],

packages/ui/primitives/pdf-viewer.tsx

@@ -233,18 +233,20 @@ export const PDFViewer = ({
             {Array(numPages)
               .fill(null)
               .map((_, i) => (
-                <div
-                  key={i}
-                  className="border-border my-8 overflow-hidden rounded border will-change-transform first:mt-0 last:mb-0"
-                >
-                  <PDFPage
-                    pageNumber={i + 1}
-                    width={width}
-                    renderAnnotationLayer={false}
-                    renderTextLayer={false}
-                    loading={() => ''}
-                    onClick={(e) => onDocumentPageClick(e, i + 1)}
-                  />
+                <div key={i} className="last:-mb-2">
+                  <div className="border-border overflow-hidden rounded border will-change-transform">
+                    <PDFPage
+                      pageNumber={i + 1}
+                      width={width}
+                      renderAnnotationLayer={false}
+                      renderTextLayer={false}
+                      loading={() => ''}
+                      onClick={(e) => onDocumentPageClick(e, i + 1)}
+                    />
+                  </div>
+                  <p className="text-muted-foreground/80 my-2 text-center text-[11px]">
+                    Page {i + 1} of {numPages}
+                  </p>
                 </div>
               ))}
           </PDFDocument>

packages/ui/primitives/popover.tsx

@@ -30,4 +30,66 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+type PopoverHoverProps = {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  contentProps?: React.ComponentPropsWithoutRef<typeof PopoverContent>;
+};
+
+const PopoverHover = ({ trigger, children, contentProps }: PopoverHoverProps) => {
+  const [open, setOpen] = React.useState(false);
+
+  const isControlled = React.useRef(false);
+  const isMouseOver = React.useRef<boolean>(false);
+
+  const onMouseEnter = () => {
+    isMouseOver.current = true;
+
+    if (isControlled.current) {
+      return;
+    }
+
+    setOpen(true);
+  };
+
+  const onMouseLeave = () => {
+    isMouseOver.current = false;
+
+    if (isControlled.current) {
+      return;
+    }
+
+    setTimeout(() => {
+      setOpen(isMouseOver.current);
+    }, 200);
+  };
+
+  const onOpenChange = (newOpen: boolean) => {
+    isControlled.current = newOpen;
+
+    setOpen(newOpen);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        className="flex cursor-pointer outline-none"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {trigger}
+      </PopoverTrigger>
+
+      <PopoverContent
+        side="top"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        {...contentProps}
+      >
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverHover };

packages/ui/primitives/recipient-role-icons.tsx

@@ -0,0 +1,10 @@
+import { BadgeCheck, Copy, Eye, PencilLine } from 'lucide-react';
+
+import type { RecipientRole } from '.prisma/client';
+
+export const ROLE_ICONS: Record<RecipientRole, JSX.Element> = {
+  SIGNER: <PencilLine className="h-4 w-4" />,
+  APPROVER: <BadgeCheck className="h-4 w-4" />,
+  CC: <Copy className="h-4 w-4" />,
+  VIEWER: <Eye className="h-4 w-4" />,
+};

packages/ui/primitives/sheet.tsx

@@ -143,14 +143,17 @@ const sheetVariants = cva(
 
 export interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  showOverlay?: boolean;
+  sheetClass?: string;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   DialogContentProps
->(({ position, size, className, children, ...props }, ref) => (
+>(({ position, size, className, sheetClass, showOverlay = true, children, ...props }, ref) => (
   <SheetPortal position={position}>
-    <SheetOverlay />
+    {showOverlay && <SheetOverlay className={sheetClass} />}
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ position, size }), className)}

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -7,6 +7,8 @@ import { Undo2 } from 'lucide-react';
 import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
+import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+
 import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
 import { Point } from './point';
@@ -28,6 +30,7 @@ export const SignaturePad = ({
   ...props
 }: SignaturePadProps) => {
   const $el = useRef<HTMLCanvasElement>(null);
+  const $imageData = useRef<ImageData | null>(null);
 
   const [isPressed, setIsPressed] = useState(false);
   const [lines, setLines] = useState<Point[][]>([]);
@@ -134,7 +137,6 @@ export const SignaturePad = ({
         });
 
         onChange?.($el.current.toDataURL());
-
         ctx.save();
       }
     }
@@ -163,6 +165,7 @@ export const SignaturePad = ({
       const ctx = $el.current.getContext('2d');
 
       ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+      $imageData.current = null;
     }
 
     onChange?.(null);
@@ -176,19 +179,25 @@ export const SignaturePad = ({
       return;
     }
 
-    const newLines = [...lines];
-    newLines.pop(); // Remove the last line
+    const newLines = lines.slice(0, -1);
     setLines(newLines);
 
     // Clear the canvas
     if ($el.current) {
       const ctx = $el.current.getContext('2d');
-      ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+      const { width, height } = $el.current;
+      ctx?.clearRect(0, 0, width, height);
+
+      if (typeof defaultValue === 'string' && $imageData.current) {
+        ctx?.putImageData($imageData.current, 0, 0);
+      }
 
       newLines.forEach((line) => {
         const pathData = new Path2D(getSvgPathFromStroke(getStroke(line, perfectFreehandOptions)));
         ctx?.fill(pathData);
       });
+
+      onChange?.($el.current.toDataURL());
     }
   };
 
@@ -199,7 +208,7 @@ export const SignaturePad = ({
     }
   }, []);
 
-  useEffect(() => {
+  unsafe_useEffectOnce(() => {
     if ($el.current && typeof defaultValue === 'string') {
       const ctx = $el.current.getContext('2d');
 
@@ -209,11 +218,15 @@ export const SignaturePad = ({
 
       img.onload = () => {
         ctx?.drawImage(img, 0, 0, Math.min(width, img.width), Math.min(height, img.height));
+
+        const defaultImageData = ctx?.getImageData(0, 0, width, height) || null;
+
+        $imageData.current = defaultImageData;
       };
 
       img.src = defaultValue;
     }
-  }, [defaultValue]);
+  });
 
   return (
     <div

packages/ui/primitives/table.tsx

@@ -2,13 +2,16 @@ import * as React from 'react';
 
 import { cn } from '../lib/utils';
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="w-full overflow-auto">
-      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  ),
-);
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement> & {
+    overflowHidden?: boolean;
+  }
+>(({ className, overflowHidden, ...props }, ref) => (
+  <div className={cn('w-full', overflowHidden ? 'overflow-hidden' : 'overflow-auto')}>
+    <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+  </div>
+));
 
 Table.displayName = 'Table';
 
@@ -76,11 +79,17 @@ TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+  React.TdHTMLAttributes<HTMLTableCellElement> & {
+    truncate?: boolean;
+  }
+>(({ className, truncate = true, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn('truncate p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    className={cn(
+      'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+      truncate && 'truncate',
+      className,
+    )}
     {...props}
   />
 ));

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Caveat } from 'next/font/google';
 
@@ -10,9 +10,10 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
-import { FieldType } from '@documenso/prisma/client';
+import { FieldType, RecipientRole } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -291,6 +292,28 @@ export const AddTemplateFieldsFormPartial = ({
     setSelectedSigner(recipients[0]);
   }, [recipients]);
 
+  const recipientsByRole = useMemo(() => {
+    const recipientsByRole: Record<RecipientRole, Recipient[]> = {
+      CC: [],
+      VIEWER: [],
+      SIGNER: [],
+      APPROVER: [],
+    };
+
+    recipients.forEach((recipient) => {
+      recipientsByRole[recipient.role].push(recipient);
+    });
+
+    return recipientsByRole;
+  }, [recipients]);
+
+  const recipientsByRoleToDisplay = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return (Object.entries(recipientsByRole) as [RecipientRole, Recipient[]][]).filter(
+      ([role]) => role !== RecipientRole.CC && role !== RecipientRole.VIEWER,
+    );
+  }, [recipientsByRole]);
+
   return (
     <>
       <DocumentFlowFormContainerContent>
@@ -363,55 +386,49 @@ export const AddTemplateFieldsFormPartial = ({
                     </span>
                   </CommandEmpty>
 
-                  <CommandGroup>
-                    {recipients.map((recipient, index) => (
-                      <CommandItem
-                        key={index}
-                        className={cn({
-                          // 'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
-                        })}
-                        onSelect={() => {
-                          setSelectedSigner(recipient);
-                          setShowRecipientsSelector(false);
-                        }}
-                      >
-                        {/* {recipient.sendStatus !== SendStatus.SENT ? (
-                          <Check
-                            aria-hidden={recipient !== selectedSigner}
-                            className={cn('mr-2 h-4 w-4 flex-shrink-0', {
-                              'opacity-0': recipient !== selectedSigner,
-                              'opacity-100': recipient === selectedSigner,
-                            })}
-                          />
-                        ) : (
-                          <Tooltip>
-                            <TooltipTrigger>
-                              <Info className="mr-2 h-4 w-4" />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-xs">
-                              This document has already been sent to this recipient. You can no
-                              longer edit this recipient.
-                            </TooltipContent>
-                          </Tooltip>
-                        )} */}
+                  {recipientsByRoleToDisplay.map(([role, recipients], roleIndex) => (
+                    <CommandGroup key={roleIndex}>
+                      <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
+                        {`${RECIPIENT_ROLES_DESCRIPTION[role].roleName}s`}
+                      </div>
 
-                        {recipient.name && (
+                      {recipients.length === 0 && (
+                        <div
+                          key={`${role}-empty`}
+                          className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                        >
+                          No recipients with this role
+                        </div>
+                      )}
+
+                      {recipients.map((recipient) => (
+                        <CommandItem
+                          key={recipient.id}
+                          className={cn('px-2 last:mb-1 [&:not(:first-child)]:mt-1')}
+                          onSelect={() => {
+                            setSelectedSigner(recipient);
+                            setShowRecipientsSelector(false);
+                          }}
+                        >
                           <span
-                            className="truncate"
-                            title={`${recipient.name} (${recipient.email})`}
+                            className={cn('text-foreground/70 truncate', {
+                              'text-foreground/80': recipient === selectedSigner,
+                            })}
                           >
-                            {recipient.name} ({recipient.email})
-                          </span>
-                        )}
+                            {recipient.name && (
+                              <span title={`${recipient.name} (${recipient.email})`}>
+                                {recipient.name} ({recipient.email})
+                              </span>
+                            )}
 
-                        {!recipient.name && (
-                          <span className="truncate" title={recipient.email}>
-                            {recipient.email}
+                            {!recipient.name && (
+                              <span title={recipient.email}>{recipient.email}</span>
+                            )}
                           </span>
-                        )}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  ))}
                 </Command>
               </PopoverContent>
             </Popover>
@@ -511,6 +528,28 @@ export const AddTemplateFieldsFormPartial = ({
                   </CardContent>
                 </Card>
               </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                onClick={() => setSelectedField(FieldType.TEXT)}
+                onMouseDown={() => setSelectedField(FieldType.TEXT)}
+                data-selected={selectedField === FieldType.TEXT ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <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-xl font-medium',
+                      )}
+                    >
+                      {'Text'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Custom Text</p>
+                  </CardContent>
+                </Card>
+              </button>
             </div>
           </div>
         </div>

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -1,26 +1,34 @@
 'use client';
 
-import React, { useId, useState } from 'react';
+import React, { useId, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { Plus, Trash } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
+import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
-import type { Field, Recipient } from '@documenso/prisma/client';
+import { type Field, type Recipient, RecipientRole } from '@documenso/prisma/client';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 
+import { Checkbox } from '../checkbox';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
+import { ShowFieldItem } from '../document-flow/show-field-item';
 import type { DocumentFlowStep } from '../document-flow/types';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
 import { useStep } from '../stepper';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
@@ -29,27 +37,31 @@ export type AddTemplatePlaceholderRecipientsFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
+  isEnterprise: boolean;
+  isDocumentPdfLoaded: boolean;
   onSubmit: (_data: TAddTemplatePlacholderRecipientsFormSchema) => void;
 };
 
 export const AddTemplatePlaceholderRecipientsFormPartial = ({
   documentFlow,
+  isEnterprise,
   recipients,
-  fields: _fields,
+  fields,
+  isDocumentPdfLoaded,
   onSubmit,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
+  const { data: session } = useSession();
+
+  const user = session?.user;
+
   const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
     recipients.length > 1 ? recipients.length + 1 : 2,
   );
 
   const { currentStep, totalSteps, previousStep } = useStep();
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
+  const form = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
     resolver: zodResolver(ZAddTemplatePlacholderRecipientsFormSchema),
     defaultValues: {
       signers:
@@ -59,18 +71,43 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
               formId: String(recipient.id),
               name: recipient.name,
               email: recipient.email,
+              role: recipient.role,
+              actionAuth:
+                ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
             }))
           : [
               {
                 formId: initialId,
                 name: `Recipient 1`,
                 email: `recipient.1@documenso.com`,
+                role: RecipientRole.SIGNER,
+                actionAuth: undefined,
               },
             ],
     },
   });
 
-  const onFormSubmit = handleSubmit(onSubmit);
+  // Always show advanced settings if any recipient has auth options.
+  const alwaysShowAdvancedSettings = useMemo(() => {
+    const recipientHasAuthOptions = recipients.find((recipient) => {
+      const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
+
+      return recipientAuthOptions?.accessAuth || recipientAuthOptions?.actionAuth;
+    });
+
+    const formHasActionAuth = form.getValues('signers').find((signer) => signer.actionAuth);
+
+    return recipientHasAuthOptions !== undefined || formHasActionAuth !== undefined;
+  }, [recipients, form]);
+
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(alwaysShowAdvancedSettings);
+
+  const {
+    formState: { errors, isSubmitting },
+    control,
+  } = form;
+
+  const onFormSubmit = form.handleSubmit(onSubmit);
 
   const {
     append: appendSigner,
@@ -81,11 +118,23 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     name: 'signers',
   });
 
+  const onAddPlaceholderSelfRecipient = () => {
+    appendSigner({
+      formId: nanoid(12),
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+    });
+  };
+
   const onAddPlaceholderRecipient = () => {
     appendSigner({
       formId: nanoid(12),
+      // Update TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX if this is ever changed.
       name: `Recipient ${placeholderRecipientCount}`,
+      // Update TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX if this is ever changed.
       email: `recipient.${placeholderRecipientCount}@documenso.com`,
+      role: RecipientRole.SIGNER,
     });
 
     setPlaceholderRecipientCount((count) => count + 1);
@@ -95,82 +144,184 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     removeSigner(index);
   };
 
-  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
-      onAddPlaceholderRecipient();
-    }
-  };
-
   return (
     <>
       <DocumentFlowFormContainerContent>
-        <div className="flex w-full flex-col gap-y-4">
-          <AnimatePresence>
-            {signers.map((signer, index) => (
-              <motion.div
-                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.id}-email`}>
-                    Email
-                    <span className="text-destructive ml-1 inline-block font-medium">*</span>
-                  </Label>
+        {isDocumentPdfLoaded &&
+          fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
 
-                  <Input
-                    id={`signer-${signer.id}-email`}
-                    type="email"
-                    value={signer.email}
-                    disabled
-                    className="bg-background mt-2"
+        <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
+          <Form {...form}>
+            <div className="flex w-full flex-col gap-y-2">
+              {signers.map((signer, index) => (
+                <motion.fieldset
+                  key={signer.id}
+                  data-native-id={signer.nativeId}
+                  disabled={isSubmitting}
+                  className={cn('grid grid-cols-8 gap-4 pb-4', {
+                    'border-b pt-2': showAdvancedSettings,
+                  })}
+                >
+                  <FormField
+                    control={form.control}
+                    name={`signers.${index}.email`}
+                    render={({ field }) => (
+                      <FormItem
+                        className={cn('relative', {
+                          'col-span-3': !showAdvancedSettings,
+                          'col-span-4': showAdvancedSettings,
+                        })}
+                      >
+                        {!showAdvancedSettings && index === 0 && (
+                          <FormLabel required>Email</FormLabel>
+                        )}
+
+                        <FormControl>
+                          <Input
+                            type="email"
+                            placeholder="Email"
+                            {...field}
+                            disabled={isSubmitting || signers[index].email === user?.email}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
                   />
-                </div>
 
-                <div className="flex-1">
-                  <Label htmlFor={`signer-${signer.id}-name`}>Name</Label>
+                  <FormField
+                    control={form.control}
+                    name={`signers.${index}.name`}
+                    render={({ field }) => (
+                      <FormItem
+                        className={cn({
+                          'col-span-3': !showAdvancedSettings,
+                          'col-span-4': showAdvancedSettings,
+                        })}
+                      >
+                        {!showAdvancedSettings && index === 0 && <FormLabel>Name</FormLabel>}
 
-                  <Input
-                    id={`signer-${signer.id}-name`}
-                    type="text"
-                    value={signer.name}
-                    disabled
-                    className="bg-background mt-2"
+                        <FormControl>
+                          <Input
+                            placeholder="Name"
+                            {...field}
+                            disabled={isSubmitting || signers[index].email === user?.email}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {showAdvancedSettings && isEnterprise && (
+                    <FormField
+                      control={form.control}
+                      name={`signers.${index}.actionAuth`}
+                      render={({ field }) => (
+                        <FormItem className="col-span-6">
+                          <FormControl>
+                            <RecipientActionAuthSelect
+                              {...field}
+                              onValueChange={field.onChange}
+                              disabled={isSubmitting}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+
+                  <FormField
+                    name={`signers.${index}.role`}
+                    render={({ field }) => (
+                      <FormItem className="col-span-1 mt-auto">
+                        <FormControl>
+                          <RecipientRoleSelect
+                            {...field}
+                            onValueChange={field.onChange}
+                            disabled={isSubmitting}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
                   />
-                </div>
 
-                <div>
                   <button
                     type="button"
-                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={isSubmitting || signers.length === 1}
                     onClick={() => onRemoveSigner(index)}
                   >
                     <Trash className="h-5 w-5" />
                   </button>
-                </div>
+                </motion.fieldset>
+              ))}
+            </div>
 
-                <div className="w-full">
-                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
-                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
-                </div>
-              </motion.div>
-            ))}
-          </AnimatePresence>
-        </div>
+            <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']}
+            />
 
-        <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={cn('mt-2 flex flex-row items-center space-x-4', {
+                'mt-4': showAdvancedSettings,
+              })}
+            >
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={isSubmitting}
+                onClick={() => onAddPlaceholderRecipient()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add Placeholder Recipient
+              </Button>
 
-        <div className="mt-4">
-          <Button type="button" disabled={isSubmitting} onClick={() => onAddPlaceholderRecipient()}>
-            <Plus className="-ml-1 mr-2 h-5 w-5" />
-            Add Placeholder Recipient
-          </Button>
-        </div>
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                disabled={
+                  isSubmitting ||
+                  form.getValues('signers').some((signer) => signer.email === user?.email)
+                }
+                onClick={() => onAddPlaceholderSelfRecipient()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add Myself
+              </Button>
+            </div>
+
+            {!alwaysShowAdvancedSettings && isEnterprise && (
+              <div className="mt-4 flex flex-row items-center">
+                <Checkbox
+                  id="showAdvancedRecipientSettings"
+                  className="h-5 w-5"
+                  checkClassName="dark:text-white text-primary"
+                  checked={showAdvancedSettings}
+                  onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
+                />
+
+                <label
+                  className="text-muted-foreground ml-2 text-sm"
+                  htmlFor="showAdvancedRecipientSettings"
+                >
+                  Show advanced settings
+                </label>
+              </div>
+            )}
+          </Form>
+        </AnimateGenericFadeInOut>
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>

packages/ui/primitives/template-flow/add-template-placeholder-recipients.types.ts

@@ -1,5 +1,10 @@
 import { z } from 'zod';
 
+import { ZRecipientActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
+
+import { ZMapNegativeOneToUndefinedSchema } from '../document-flow/add-settings.types';
+import { RecipientRole } from '.prisma/client';
+
 export const ZAddTemplatePlacholderRecipientsFormSchema = z
   .object({
     signers: z.array(
@@ -8,6 +13,10 @@ export const ZAddTemplatePlacholderRecipientsFormSchema = z
         nativeId: z.number().optional(),
         email: z.string().min(1).email(),
         name: z.string(),
+        role: z.nativeEnum(RecipientRole),
+        actionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+          ZRecipientActionAuthTypesSchema.optional(),
+        ),
       }),
     ),
   })

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

@@ -0,0 +1,326 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { InfoIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+
+import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { type Field, type Recipient } from '@documenso/prisma/client';
+import type { TemplateWithData } from '@documenso/prisma/types/template';
+import {
+  DocumentGlobalAuthAccessSelect,
+  DocumentGlobalAuthAccessTooltip,
+} from '@documenso/ui/components/document/document-global-auth-access-select';
+import {
+  DocumentGlobalAuthActionSelect,
+  DocumentGlobalAuthActionTooltip,
+} from '@documenso/ui/components/document/document-global-auth-action-select';
+import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+
+import { Combobox } from '../combobox';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from '../document-flow/document-flow-root';
+import { ShowFieldItem } from '../document-flow/show-field-item';
+import type { DocumentFlowStep } from '../document-flow/types';
+import { Input } from '../input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+import { useStep } from '../stepper';
+import { Textarea } from '../textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import type { TAddTemplateSettingsFormSchema } from './add-template-settings.types';
+import { ZAddTemplateSettingsFormSchema } from './add-template-settings.types';
+
+export type AddTemplateSettingsFormProps = {
+  documentFlow: DocumentFlowStep;
+  recipients: Recipient[];
+  fields: Field[];
+  isEnterprise: boolean;
+  isDocumentPdfLoaded: boolean;
+  template: TemplateWithData;
+  onSubmit: (_data: TAddTemplateSettingsFormSchema) => void;
+};
+
+export const AddTemplateSettingsFormPartial = ({
+  documentFlow,
+  recipients,
+  fields,
+  isEnterprise,
+  isDocumentPdfLoaded,
+  template,
+  onSubmit,
+}: AddTemplateSettingsFormProps) => {
+  const { documentAuthOption } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  const form = useForm<TAddTemplateSettingsFormSchema>({
+    resolver: zodResolver(ZAddTemplateSettingsFormSchema),
+    defaultValues: {
+      title: template.title,
+      globalAccessAuth: documentAuthOption?.globalAccessAuth || undefined,
+      globalActionAuth: documentAuthOption?.globalActionAuth || undefined,
+      meta: {
+        subject: template.templateMeta?.subject ?? '',
+        message: template.templateMeta?.message ?? '',
+        timezone: template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+        dateFormat: template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        redirectUrl: template.templateMeta?.redirectUrl ?? '',
+      },
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  // We almost always want to set the timezone to the user's local timezone to avoid confusion
+  // when the document is signed.
+  useEffect(() => {
+    if (!form.formState.touchedFields.meta?.timezone) {
+      form.setValue('meta.timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }
+  }, [form, form.setValue, form.formState.touchedFields.meta?.timezone]);
+
+  return (
+    <>
+      <DocumentFlowFormContainerContent>
+        {isDocumentPdfLoaded &&
+          fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
+
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Template title</FormLabel>
+
+                  <FormControl>
+                    <Input className="bg-background" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="globalAccessAuth"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex flex-row items-center">
+                    Document access
+                    <DocumentGlobalAuthAccessTooltip />
+                  </FormLabel>
+
+                  <FormControl>
+                    <DocumentGlobalAuthAccessSelect {...field} onValueChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            {isEnterprise && (
+              <FormField
+                control={form.control}
+                name="globalActionAuth"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex flex-row items-center">
+                      Recipient action authentication
+                      <DocumentGlobalAuthActionTooltip />
+                    </FormLabel>
+
+                    <FormControl>
+                      <DocumentGlobalAuthActionSelect {...field} onValueChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <Accordion type="multiple">
+              <AccordionItem value="email-options" className="border-none">
+                <AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                  Email Options
+                </AccordionTrigger>
+
+                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed [&>div]:pb-0">
+                  <div className="flex flex-col space-y-6">
+                    <FormField
+                      control={form.control}
+                      name="meta.subject"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            Subject <span className="text-muted-foreground">(Optional)</span>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.message"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            Message <span className="text-muted-foreground">(Optional)</span>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Textarea className="bg-background h-32 resize-none" {...field} />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <DocumentSendEmailMessageHelper />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+
+            <Accordion type="multiple">
+              <AccordionItem value="advanced-options" className="border-none">
+                <AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                  Advanced Options
+                </AccordionTrigger>
+
+                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed">
+                  <div className="flex flex-col space-y-6">
+                    <FormField
+                      control={form.control}
+                      name="meta.dateFormat"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Date Format</FormLabel>
+
+                          <FormControl>
+                            <Select {...field} onValueChange={field.onChange}>
+                              <SelectTrigger className="bg-background">
+                                <SelectValue />
+                              </SelectTrigger>
+
+                              <SelectContent>
+                                {DATE_FORMATS.map((format) => (
+                                  <SelectItem key={format.key} value={format.value}>
+                                    {format.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.timezone"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Time Zone</FormLabel>
+
+                          <FormControl>
+                            <Combobox
+                              className="bg-background time-zone-field"
+                              options={TIME_ZONES}
+                              {...field}
+                              onChange={(value) => value && field.onChange(value)}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.redirectUrl"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex flex-row items-center">
+                            Redirect URL{' '}
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <InfoIcon className="mx-2 h-4 w-4" />
+                              </TooltipTrigger>
+
+                              <TooltipContent className="text-muted-foreground max-w-xs">
+                                Add a URL to redirect the user to once the document is signed
+                              </TooltipContent>
+                            </Tooltip>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Input className="bg-background" {...field} />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

packages/ui/primitives/template-flow/add-template-settings.types.tsx

@@ -0,0 +1,35 @@
+import { z } from 'zod';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { URL_REGEX } from '@documenso/lib/constants/url-regex';
+import {
+  ZDocumentAccessAuthTypesSchema,
+  ZDocumentActionAuthTypesSchema,
+} from '@documenso/lib/types/document-auth';
+
+import { ZMapNegativeOneToUndefinedSchema } from '../document-flow/add-settings.types';
+
+export const ZAddTemplateSettingsFormSchema = z.object({
+  title: z.string().trim().min(1, { message: "Title can't be empty" }),
+  globalAccessAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentAccessAuthTypesSchema.optional(),
+  ),
+  globalActionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentActionAuthTypesSchema.optional(),
+  ),
+  meta: z.object({
+    subject: z.string(),
+    message: z.string(),
+    timezone: z.string().optional().default(DEFAULT_DOCUMENT_TIME_ZONE),
+    dateFormat: z.string().optional().default(DEFAULT_DOCUMENT_DATE_FORMAT),
+    redirectUrl: z
+      .string()
+      .optional()
+      .refine((value) => value === undefined || value === '' || URL_REGEX.test(value), {
+        message: 'Please enter a valid URL',
+      }),
+  }),
+});
+
+export type TAddTemplateSettingsFormSchema = z.infer<typeof ZAddTemplateSettingsFormSchema>;

packages/ui/primitives/toast.tsx

@@ -79,7 +79,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      'text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-100 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 md:opacity-0 group-hover:md:opacity-100',
       className,
     )}
     toast-close=""

packages/ui/primitives/toggle.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react';
 
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 import { cn } from '../lib/utils';