feat: dateformat and timezone customization (#506)

2025-11-24 13:41:30 +10:00 · 2023-12-26 23:50:40 +00:00
parent bb5611ad40
commit 76c203aae6
45 changed files with 546 additions and 125 deletions
--- a/packages/ui/primitives/combobox.tsx
+++ b/packages/ui/primitives/combobox.tsx
@ -1,8 +1,7 @@
 import * as React from 'react';

-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronDown } from 'lucide-react';

-import { Role } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -15,34 +14,31 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/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>
@ -50,26 +46,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>
--- a/packages/ui/primitives/command.tsx
+++ b/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';

--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -11,7 +11,8 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { nanoid } from '@documenso/lib/universal/id';
-import { Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
+import { FieldType, SendStatus } 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';
@ -25,7 +26,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';

-import { TAddFieldsFormSchema } from './add-fields.types';
+import type { TAddFieldsFormSchema } from './add-fields.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
@ -33,7 +34,8 @@ import {
  DocumentFlowFormContainerStep,
 } from './document-flow-root';
 import { FieldItem } from './field-item';
-import { DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';
+import type { DocumentFlowStep } from './types';
+import { FRIENDLY_FIELD_TYPE } from './types';

 const fontCaveat = Caveat({
  weight: ['500'],
--- a/packages/ui/primitives/document-flow/add-signature.tsx
+++ b/packages/ui/primitives/document-flow/add-signature.tsx
@ -7,21 +7,23 @@ 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 { Field, FieldType } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { Field } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import type { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
  DocumentFlowFormContainerStep,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
@ -135,7 +137,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, () => ({
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@ -9,21 +9,23 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';

 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { nanoid } from '@documenso/lib/universal/id';
-import { Field, Recipient, SendStatus } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
+import { SendStatus } from '@documenso/prisma/client';
 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 { useToast } from '@documenso/ui/primitives/use-toast';

-import { TAddSignersFormSchema, ZAddSignersFormSchema } from './add-signers.types';
+import type { TAddSignersFormSchema } from './add-signers.types';
+import { ZAddSignersFormSchema } from './add-signers.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
  DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { DocumentFlowStep } from './types';
+import type { DocumentFlowStep } from './types';

 export type AddSignersFormProps = {
  documentFlow: DocumentFlowStep;
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@ -1,22 +1,41 @@
 'use client';

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

-import { DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
-import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+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, 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 { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 import { Textarea } from '@documenso/ui/primitives/textarea';

-import { TAddSubjectFormSchema } from './add-subject.types';
+import { Combobox } from '../combobox';
+import type { TAddSubjectFormSchema } from './add-subject.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
  DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { DocumentFlowStep } from './types';
+import type { DocumentFlowStep } from './types';

 export type AddSubjectFormProps = {
  documentFlow: DocumentFlowStep;
@ -29,27 +48,46 @@ export type AddSubjectFormProps = {

 export const AddSubjectFormPartial = ({
  documentFlow,
-  recipients: _recipients,
-  fields: _fields,
+  recipients: recipients,
+  fields: fields,
  document,
  numberOfSteps,
  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,
      },
    },
  });

  const onFormSubmit = handleSubmit(onSubmit);

+  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 (
    <>
      <DocumentFlowFormContainerContent>
@ -65,10 +103,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>
@ -80,14 +118,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>

@ -117,6 +153,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>
--- a/packages/ui/primitives/document-flow/add-subject.types.ts
+++ b/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),
  }),
 });

--- a/packages/ui/primitives/multiselect-combobox.tsx
+++ b/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 };