feat: dateformat and timezone customization (#506)

packages/ui/lib/utils.ts

@@ -1,4 +1,5 @@
-import { ClassValue, clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {

packages/ui/primitives/combobox.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 
-import { Check, ChevronsUpDown } from 'lucide-react';
-
-import { Role } from '@documenso/prisma/client';
+import { Check, ChevronDown } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 import { Button } from './button';
@@ -10,34 +8,31 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 type ComboboxProps = {
-  listValues: string[];
-  onChange: (_values: string[]) => void;
+  className?: string;
+  options: string[];
+  value: string | null;
+  onChange: (_value: string | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
 };
 
-const Combobox = ({ listValues, onChange }: ComboboxProps) => {
+const Combobox = ({
+  className,
+  options,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+}: ComboboxProps) => {
   const [open, setOpen] = React.useState(false);
-  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
-  const dbRoles = Object.values(Role);
 
-  React.useEffect(() => {
-    setSelectedValues(listValues);
-  }, [listValues]);
-
-  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
-
-  const handleSelect = (currentValue: string) => {
-    let newSelectedValues;
-    if (selectedValues.includes(currentValue)) {
-      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
-    } else {
-      newSelectedValues = [...selectedValues, currentValue];
-    }
-
-    setSelectedValues(newSelectedValues);
-    onChange(newSelectedValues);
+  const onOptionSelected = (newValue: string) => {
+    onChange(newValue === value ? null : newValue);
     setOpen(false);
   };
 
+  const placeholderValue = placeholder ?? 'Select an option';
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -45,26 +40,28 @@ const Combobox = ({ listValues, onChange }: ComboboxProps) => {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[200px] justify-between"
+          className={cn('my-2 w-full justify-between', className)}
+          disabled={disabled}
         >
-          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          {value ? value : placeholderValue}
+          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+
+      <PopoverContent className="p-0" side="bottom" align="start">
         <Command>
-          <CommandInput placeholder={selectedValues.join(', ')} />
+          <CommandInput placeholder={value || placeholderValue} />
+
           <CommandEmpty>No value found.</CommandEmpty>
-          <CommandGroup>
-            {allRoles.map((value: string, i: number) => (
-              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+
+          <CommandGroup className="max-h-[250px] overflow-y-auto">
+            {options.map((option, index) => (
+              <CommandItem key={index} onSelect={() => onOptionSelected(option)}>
                 <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                  )}
+                  className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
                 />
-                {value}
+
+                {option}
               </CommandItem>
             ))}
           </CommandGroup>

packages/ui/primitives/command.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { DialogProps } from '@radix-ui/react-dialog';
+import type { DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 

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

@@ -7,11 +7,13 @@ import { DateTime } from 'luxon';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { Field } from '@documenso/prisma/client';
 import { FieldType } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 
 import { FieldToolTip } from '../../components/field/field-tooltip';
 import { cn } from '../../lib/utils';
@@ -34,7 +36,6 @@ import {
   SinglePlayerModeCustomTextField,
   SinglePlayerModeSignatureField,
 } from './single-player-mode-fields';
-import type { DocumentFlowStep } from './types';
 
 export type AddSignatureFormProps = {
   defaultValues?: TAddSignatureFormSchema;
@@ -140,7 +141,7 @@ export const AddSignatureFormPartial = ({
     return match(field.type)
       .with(FieldType.DATE, () => ({
         ...field,
-        customText: DateTime.now().toFormat('yyyy-MM-dd hh:mm a'),
+        customText: DateTime.now().toFormat(DEFAULT_DOCUMENT_DATE_FORMAT),
         inserted: true,
       }))
       .with(FieldType.EMAIL, () => ({

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

@@ -1,11 +1,30 @@
 'use client';
 
-import { useForm } from 'react-hook-form';
+import { useEffect } from 'react';
 
+import { Controller, 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 { Combobox } from '../combobox';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
 import { Label } from '../label';
@@ -31,20 +50,25 @@ export type AddSubjectFormProps = {
 
 export const AddSubjectFormPartial = ({
   documentFlow,
-  recipients: _recipients,
-  fields: _fields,
+  recipients: recipients,
+  fields: fields,
   document,
   onSubmit,
 }: AddSubjectFormProps) => {
   const {
+    control,
     register,
     handleSubmit,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, touchedFields },
+    getValues,
+    setValue,
   } = useForm<TAddSubjectFormSchema>({
     defaultValues: {
-      email: {
+      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,
       },
     },
   });
@@ -52,6 +76,20 @@ 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
@@ -71,10 +109,10 @@ export const AddSubjectFormPartial = ({
                 // placeholder="Subject"
                 className="bg-background mt-2"
                 disabled={isSubmitting}
-                {...register('email.subject')}
+                {...register('meta.subject')}
               />
 
-              <FormErrorMessage className="mt-2" error={errors.email?.subject} />
+              <FormErrorMessage className="mt-2" error={errors.meta?.subject} />
             </div>
 
             <div>
@@ -86,14 +124,12 @@ export const AddSubjectFormPartial = ({
                 id="message"
                 className="bg-background mt-2 h-32 resize-none"
                 disabled={isSubmitting}
-                {...register('email.message')}
+                {...register('meta.message')}
               />
 
               <FormErrorMessage
                 className="mt-2"
-                error={
-                  typeof errors.email?.message !== 'string' ? errors.email?.message : undefined
-                }
+                error={typeof errors.meta?.message !== 'string' ? errors.meta?.message : undefined}
               />
             </div>
 
@@ -123,6 +159,67 @@ export const AddSubjectFormPartial = ({
                 </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 text-sm leading-relaxed">
+                  {hasDateField && (
+                    <div className="mt-2 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>
+                  )}
+
+                  {hasDateField && (
+                    <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>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </div>
         </div>
       </DocumentFlowFormContainerContent>

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

@@ -1,9 +1,14 @@
 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';
+
 export const ZAddSubjectFormSchema = z.object({
-  email: 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),
   }),
 });
 

packages/ui/primitives/multiselect-combobox.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { Role } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@documenso/ui/primitives/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+type ComboboxProps = {
+  listValues: string[];
+  onChange: (_values: string[]) => void;
+};
+
+const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
+  const [open, setOpen] = React.useState(false);
+  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
+  const dbRoles = Object.values(Role);
+
+  React.useEffect(() => {
+    setSelectedValues(listValues);
+  }, [listValues]);
+
+  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
+
+  const handleSelect = (currentValue: string) => {
+    let newSelectedValues;
+    if (selectedValues.includes(currentValue)) {
+      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
+    } else {
+      newSelectedValues = [...selectedValues, currentValue];
+    }
+
+    setSelectedValues(newSelectedValues);
+    onChange(newSelectedValues);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={selectedValues.join(', ')} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {allRoles.map((value: string, i: number) => (
+              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {value}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { MultiSelectCombobox };