chore: show signing order when creating a document from template (#1410)

### Templates without signing order
![CleanShot 2024-10-18 at 01 27
24@2x](https://github.com/user-attachments/assets/222181e4-25a8-409b-aa8b-8452ddd32f6b)


### Template with signing order
![CleanShot 2024-10-18 at 01 26
12@2x](https://github.com/user-attachments/assets/bcee6213-20b5-44d8-90ed-881825f49756)

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -144,6 +144,7 @@ export const TemplatesDataTable = ({
             <div className="flex items-center gap-x-4">
               <UseTemplateDialog
                 templateId={row.original.id}
+                templateSigningOrder={row.original.templateMeta?.signingOrder}
                 recipients={row.original.Recipient}
                 documentRootPath={documentRootPath}
               />

apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx

@@ -15,7 +15,9 @@ import {
 } from '@documenso/lib/constants/template';
 import { AppError } from '@documenso/lib/errors/app-error';
 import type { Recipient } from '@documenso/prisma/client';
+import { DocumentSigningOrder } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
@@ -51,6 +53,7 @@ const ZAddRecipientsForNewDocumentSchema = z
         id: z.number(),
         email: z.string().email(),
         name: z.string(),
+        signingOrder: z.number().optional(),
       }),
     ),
   })
@@ -86,6 +89,7 @@ type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDoc
 
 export type UseTemplateDialogProps = {
   templateId: number;
+  templateSigningOrder?: DocumentSigningOrder | null;
   recipients: Recipient[];
   documentRootPath: string;
 };
@@ -94,6 +98,7 @@ export function UseTemplateDialog({
   recipients,
   documentRootPath,
   templateId,
+  templateSigningOrder,
 }: UseTemplateDialogProps) {
   const router = useRouter();
 
@@ -108,7 +113,9 @@ export function UseTemplateDialog({
     resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
     defaultValues: {
       sendDocument: false,
-      recipients: recipients.map((recipient) => {
+      recipients: recipients
+        .sort((a, b) => (a.signingOrder || 0) - (b.signingOrder || 0))
+        .map((recipient) => {
           const isRecipientEmailPlaceholder = recipient.email.match(
             TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
           );
@@ -121,6 +128,7 @@ export function UseTemplateDialog({
             id: recipient.id,
             name: !isRecipientNamePlaceholder ? recipient.name : '',
             email: !isRecipientEmailPlaceholder ? recipient.email : '',
+            signingOrder: recipient.signingOrder ?? undefined,
           };
         }),
     },
@@ -203,6 +211,33 @@ export function UseTemplateDialog({
               <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
                 {formRecipients.map((recipient, index) => (
                   <div className="flex w-full flex-row space-x-4" key={recipient.id}>
+                    {templateSigningOrder === DocumentSigningOrder.SEQUENTIAL && (
+                      <FormField
+                        control={form.control}
+                        name={`recipients.${index}.signingOrder`}
+                        render={({ field }) => (
+                          <FormItem
+                            className={cn('w-20', {
+                              'mt-8': index === 0,
+                            })}
+                          >
+                            <FormControl>
+                              <Input
+                                {...field}
+                                disabled
+                                className="items-center justify-center"
+                                value={
+                                  field.value?.toString() ||
+                                  recipients[index]?.signingOrder?.toString()
+                                }
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    )}
+
                     <FormField
                       control={form.control}
                       name={`recipients.${index}.email`}

packages/lib/server-only/template/find-templates.ts

@@ -51,6 +51,11 @@ export const findTemplates = async ({
         },
         Field: true,
         Recipient: true,
+        templateMeta: {
+          select: {
+            signingOrder: true,
+          },
+        },
         directLink: {
           select: {
             token: true,