diff --git a/packages/ui/primitives/template-flow/add-template-settings.tsx b/packages/ui/primitives/template-flow/add-template-settings.tsx index 2002327c6..e9466f88a 100644 --- a/packages/ui/primitives/template-flow/add-template-settings.tsx +++ b/packages/ui/primitives/template-flow/add-template-settings.tsx @@ -5,8 +5,8 @@ import { useLingui } from '@lingui/react/macro'; import { Trans } from '@lingui/react/macro'; import { DocumentVisibility, TeamMemberRole } from '@prisma/client'; import { DocumentDistributionMethod, type Field, type Recipient } from '@prisma/client'; -import { InfoIcon } from 'lucide-react'; -import { useForm } from 'react-hook-form'; +import { InfoIcon, Plus, Trash } from 'lucide-react'; +import { useFieldArray, useForm } from 'react-hook-form'; import { match } from 'ts-pattern'; import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats'; @@ -18,6 +18,7 @@ import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n'; import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones'; import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email'; import type { TTemplate } from '@documenso/lib/types/template'; +import { nanoid } from '@documenso/lib/universal/id'; import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth'; import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams'; import type { TDocumentMetaDateFormat } from '@documenso/trpc/server/document-router/schema'; @@ -40,6 +41,7 @@ import { AccordionItem, AccordionTrigger, } from '@documenso/ui/primitives/accordion'; +import { Button } from '@documenso/ui/primitives/button'; import { Form, FormControl, @@ -125,6 +127,23 @@ export const AddTemplateSettingsFormPartial = ({ }, }); + const { + fields: attachments, + append: appendAttachment, + remove: removeAttachment, + } = useFieldArray({ + control: form.control, + name: 'attachments', + }); + + const onAddAttachment = () => { + appendAttachment({ + formId: nanoid(12), + label: '', + link: '', + }); + }; + const { stepIndex, currentStep, totalSteps, previousStep } = useStep(); const distributionMethod = form.watch('meta.distributionMethod'); @@ -569,6 +588,81 @@ export const AddTemplateSettingsFormPartial = ({ + + + + + Attachments + + + + + {attachments.map((attachment, index) => ( + + + ( + + + Label + + + + + + + + + )} + /> + + + + ( + + + Location link + + + + + + + + + )} + /> + + + + removeAttachment(index)} + className="hover:bg-muted rounded-md" + > + + + + + ))} + + + + Add Attachment + + + + + diff --git a/packages/ui/primitives/template-flow/add-template-settings.types.tsx b/packages/ui/primitives/template-flow/add-template-settings.types.tsx index 2e0a1cd86..7868b1efd 100644 --- a/packages/ui/primitives/template-flow/add-template-settings.types.tsx +++ b/packages/ui/primitives/template-flow/add-template-settings.types.tsx @@ -55,6 +55,13 @@ export const ZAddTemplateSettingsFormSchema = z.object({ message: msg`At least one signature type must be enabled`.id, }), }), + attachments: z.array( + z.object({ + formId: z.string().min(1), + label: z.string(), + link: z.string(), + }), + ), }); export type TAddTemplateSettingsFormSchema = z.infer;