date format select added

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -11,6 +11,7 @@ import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useRequiredSigningContext } from './provider';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type DateFieldProps = {
@@ -25,6 +26,8 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
 
   const [isPending, startTransition] = useTransition();
 
+  const { dateFormat } = useRequiredSigningContext();
+
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation();
 
@@ -40,7 +43,7 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value: '',
+        value: dateFormat,
       });
 
       startTransition(() => router.refresh());

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -16,6 +16,13 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 
 import { useRequiredSigningContext } from './provider';
@@ -30,7 +37,8 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
   const router = useRouter();
   const { data: session } = useSession();
 
-  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+  const { fullName, signature, setFullName, setSignature, dateFormat, setDateFormat } =
+    useRequiredSigningContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
@@ -103,6 +111,25 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 />
               </div>
 
+              <div>
+                <Label htmlFor="date-format">Date Format</Label>
+
+                <Select
+                  onValueChange={(value) => {
+                    setDateFormat(value);
+                  }}
+                  defaultValue={dateFormat}
+                >
+                  <SelectTrigger className="bg-background mt-2">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="yyyy-MM-dd hh:mm a">YYYY-MM-DD</SelectItem>
+                    <SelectItem value="dd/MM/yyyy hh:mm a">DD/MM/YYYY</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
               <div>
                 <Label htmlFor="Signature">Signature</Label>
 

apps/web/src/app/(signing)/sign/[token]/provider.tsx

@@ -9,6 +9,8 @@ export type SigningContextValue = {
   setEmail: (_value: string) => void;
   signature: string | null;
   setSignature: (_value: string | null) => void;
+  dateFormat: string;
+  setDateFormat: (_value: string) => void;
 };
 
 const SigningContext = createContext<SigningContextValue | null>(null);
@@ -31,6 +33,7 @@ export interface SigningProviderProps {
   fullName?: string | null;
   email?: string | null;
   signature?: string | null;
+  dateFormat?: string | null;
   children: React.ReactNode;
 }
 
@@ -38,11 +41,13 @@ export const SigningProvider = ({
   fullName: initialFullName,
   email: initialEmail,
   signature: initialSignature,
+  dateFormat: initialDateFormat,
   children,
 }: SigningProviderProps) => {
   const [fullName, setFullName] = useState(initialFullName || '');
   const [email, setEmail] = useState(initialEmail || '');
   const [signature, setSignature] = useState(initialSignature || null);
+  const [dateFormat, setDateFormat] = useState(initialDateFormat || 'yyyy-MM-dd hh:mm a');
 
   return (
     <SigningContext.Provider
@@ -53,6 +58,8 @@ export const SigningProvider = ({
         setEmail,
         signature,
         setSignature,
+        dateFormat,
+        setDateFormat,
       }}
     >
       {children}