Merge branch 'main' into fix/refactor-use-template

.github/workflows/ci.yml

@@ -41,7 +41,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Cache Docker layers
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}

.github/workflows/codeql-analysis.yml

@@ -33,9 +33,9 @@ jobs:
       - uses: ./.github/actions/cache-build
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2

.github/workflows/e2e-tests.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Run Playwright tests
         run: npm run ci
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: test-results

.github/workflows/issue-assignee-check.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Check Assigned User's Issue Count
         id: parse-comment
-        uses: actions/github-script@v6
+        uses: actions/github-script@v5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/issue-labeler.yml

@@ -1,25 +0,0 @@
-name: Auto Label Assigned Issues
-
-on:
-  issues:
-    types: [assigned]
-
-jobs:
-  label-when-assigned:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Label issue
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            const issue = context.issue;
-            // To run only on issues and not on PR
-            if (github.context.payload.issue.pull_request === undefined) {
-              const labelResponse = await github.rest.issues.addLabels({
-                owner: issue.owner,
-                repo: issue.repo,
-                issue_number: issue.number,
-                labels: ['status: assigned']
-              });
-            }

.github/workflows/issue-opened.yml

@@ -17,5 +17,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              labels: ["status: triage"]
+              labels: ["needs triage"]
             })

.github/workflows/pr-review-reminder.yml

@@ -2,14 +2,14 @@ name: 'PR Review Reminder'
 
 on:
   pull_request:
-    types: ['opened', 'ready_for_review']
+    types: ['opened', 'reopened', 'ready_for_review', 'review_requested']
 
 permissions:
   pull-requests: write
 
 jobs:
   checkPRs:
-    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'ready_for_review')
+    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'reopened' || 'ready_for_review' || 'review_requested')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/stale.yml

@@ -12,7 +12,7 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/stale@v5
+      - uses: actions/stale@v4
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-pr-stale: 90

apps/web/src/app/(dashboard)/settings/public-profile/layout.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export type PublicProfileSettingsLayout = {
-  children: React.ReactNode;
-};
-
-export default function PublicProfileSettingsLayout({ children }: PublicProfileSettingsLayout) {
-  return <div className="col-span-12 md:col-span-9">{children}</div>;
-}

apps/web/src/app/(dashboard)/settings/public-profile/page.tsx

@@ -1,41 +0,0 @@
-import type { Metadata } from 'next';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { Switch } from '@documenso/ui/primitives/switch';
-
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { LinkTemplatesForm } from '~/components/forms/link-templates';
-import { PublicProfileForm } from '~/components/forms/public-profile';
-
-export const metadata: Metadata = {
-  title: 'Public profile',
-};
-
-export default async function PublicProfileSettingsPage() {
-  const { user } = await getRequiredServerComponentSession();
-
-  return (
-    <div>
-      <SettingsHeader
-        title="Public profile"
-        subtitle="You can choose to enable/disable your profile for public view"
-        className="justify mb-8"
-        hideDivider
-      >
-        <div className="flex flex-row">
-          <label className="mr-2 text-white" htmlFor="hide">
-            Hide
-          </label>
-          <Switch />
-          <label className="ml-2 text-white" htmlFor="show">
-            Show
-          </label>
-        </div>
-      </SettingsHeader>
-
-      <PublicProfileForm className="mb-8 max-w-xl" user={user} />
-
-      <LinkTemplatesForm />
-    </div>
-  );
-}

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -141,8 +141,6 @@ export const EditTemplateForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
-              // Todo: Add when we setup template settings.
-              isTemplateOwnerEnterprise={false}
             />
 
             <AddTemplateFieldsFormPartial

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -58,7 +58,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
   ]);
 
   return (
-    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
       <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         Templates
@@ -73,7 +73,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
       </div>
 
       <EditTemplateForm
-        className="mt-6"
+        className="mt-8"
         template={template}
         user={user}
         recipients={templateRecipients}

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

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -7,10 +5,7 @@ import { InfoIcon, Plus } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';
 
-import {
-  TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
-  TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
-} from '@documenso/lib/constants/template';
+import { TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX } from '@documenso/lib/constants/template';
 import { AppError } from '@documenso/lib/errors/app-error';
 import type { Recipient } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -96,8 +91,6 @@ export function UseTemplateDialog({
   const router = useRouter();
   const { toast } = useToast();
 
-  const [open, setOpen] = useState(false);
-
   const team = useOptionalCurrentTeam();
 
   const form = useForm<TAddRecipientsForNewDocumentSchema>({
@@ -105,18 +98,20 @@ export function UseTemplateDialog({
     defaultValues: {
       sendDocument: false,
       recipients: recipients.map((recipient) => {
-        const isRecipientEmailPlaceholder = recipient.email.match(
-          TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
-        );
+        const isRecipientPlaceholder = recipient.email.match(TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX);
 
-        const isRecipientNamePlaceholder = recipient.name.match(
-          TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
-        );
+        if (isRecipientPlaceholder) {
+          return {
+            id: recipient.id,
+            name: '',
+            email: '',
+          };
+        }
 
         return {
           id: recipient.id,
-          name: !isRecipientNamePlaceholder ? recipient.name : '',
-          email: !isRecipientEmailPlaceholder ? recipient.email : '',
+          name: recipient.name,
+          email: recipient.email,
         };
       }),
     },
@@ -163,14 +158,8 @@ export function UseTemplateDialog({
     name: 'recipients',
   });
 
-  useEffect(() => {
-    if (!open) {
-      form.reset();
-    }
-  }, [open, form]);
-
   return (
-    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+    <Dialog>
       <DialogTrigger asChild>
         <Button className="cursor-pointer">
           <Plus className="-ml-1 mr-2 h-4 w-4" />
@@ -201,7 +190,7 @@ export function UseTemplateDialog({
                           {index === 0 && <FormLabel required>Email</FormLabel>}
 
                           <FormControl>
-                            <Input {...field} placeholder={recipients[index].email || 'Email'} />
+                            <Input {...field} placeholder={recipients[index].email} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -216,7 +205,7 @@ export function UseTemplateDialog({
                           {index === 0 && <FormLabel>Name</FormLabel>}
 
                           <FormControl>
-                            <Input {...field} placeholder={recipients[index].name || 'Name'} />
+                            <Input {...field} placeholder={recipients[index].name} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>

apps/web/src/app/(teams)/t/[teamUrl]/settings/tokens/page.tsx

@@ -1,10 +1,7 @@
 import { DateTime } from 'luxon';
-import { match } from 'ts-pattern';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { GetTeamTokensResponse } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { Button } from '@documenso/ui/primitives/button';
@@ -26,24 +23,7 @@ export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
 
   const team = await getTeamByUrl({ userId: user.id, teamUrl });
 
-  let tokens: GetTeamTokensResponse | null = null;
-
-  try {
-    tokens = await getTeamTokens({ userId: user.id, teamId: team.id });
-  } catch (err) {
-    const error = AppError.parseError(err);
-
-    return (
-      <div>
-        <h3 className="text-2xl font-semibold">API Tokens</h3>
-        <p className="text-muted-foreground mt-2 text-sm">
-          {match(error.code)
-            .with(AppErrorCode.UNAUTHORIZED, () => error.message)
-            .otherwise(() => 'Something went wrong.')}
-        </p>
-      </div>
-    );
-  }
+  const tokens = await getTeamTokens({ userId: user.id, teamId: team.id });
 
   return (
     <div>

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Globe2, Lock, User, Users, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Lock, User, Users, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -101,18 +101,6 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
           </Button>
         </Link>
       )}
-      <Link href="/settings/public-profile">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-          )}
-        >
-          <Globe2 className="mr-2 h-5 w-5" />
-          Public profile
-        </Button>
-      </Link>
     </div>
   );
 };

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Globe2, Lock, User, Users, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Lock, User, Users, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -104,18 +104,6 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
           </Button>
         </Link>
       )}
-      <Link href="/settings/public-profile">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-          )}
-        >
-          <Globe2 className="mr-2 h-5 w-5" />
-          Public profile
-        </Button>
-      </Link>
     </div>
   );
 };

apps/web/src/components/forms/link-templates.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { File } from 'lucide-react';
-
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-
-export const LinkTemplatesForm = () => {
-  return (
-    <div className={cn('flex max-w-xl flex-row items-center justify-between')}>
-      <div>
-        <h3 className="text-lg font-medium">My templates</h3>
-
-        <p className="text-muted-foreground text-sm md:mt-2">
-          Create templates to display in your public profile
-        </p>
-      </div>
-
-      <div>
-        <Button type="submit" variant="outline" className="self-end p-4">
-          <File className="mr-2" /> Link template
-        </Button>
-      </div>
-    </div>
-  );
-};

apps/web/src/components/forms/public-profile.tsx

@@ -1,182 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Copy } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import type { User } from '@documenso/prisma/client';
-import { TRPCClientError } from '@documenso/trpc/client';
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { Textarea } from '@documenso/ui/primitives/textarea';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export const ZPublicProfileFormSchema = z.object({
-  url: z
-    .string()
-    .trim()
-    .toLowerCase()
-    .min(1, { message: 'Please enter a valid username.' })
-    .regex(/^[a-z0-9-]+$/, {
-      message: 'Username can only container alphanumeric characters and dashes.',
-    }),
-  bio: z
-    .string()
-    .trim()
-    .max(256, {
-      message: 'Bio cannot be longer than 256 characters.',
-    })
-    .optional(),
-});
-
-export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
-
-export type PublicProfileFormProps = {
-  className?: string;
-  user: User;
-};
-
-export const PublicProfileForm = ({ className, user }: PublicProfileFormProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-
-  const form = useForm<TPublicProfileFormSchema>({
-    values: {
-      url: user.url || '',
-    },
-    resolver: zodResolver(ZPublicProfileFormSchema),
-  });
-
-  const watchedBio = form.watch('bio');
-
-  const { mutateAsync: updatePublicProfile } = trpc.profile.updatePublicProfile.useMutation();
-
-  const isSubmitting = form.formState.isSubmitting;
-
-  const onFormSubmit = async ({ url, bio }: TPublicProfileFormSchema) => {
-    try {
-      await updatePublicProfile({
-        url,
-        bio,
-      });
-
-      toast({
-        title: 'Public profile updated',
-        description: 'Your public profile has been updated successfully.',
-        duration: 5000,
-      });
-
-      router.refresh();
-    } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: 'An error occurred',
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: 'An unknown error occurred',
-          variant: 'destructive',
-          description:
-            'We encountered an unknown error while attempting to sign you In. Please try again later.',
-        });
-      }
-    }
-  };
-
-  const handleCopyUrl = () => {
-    const profileUrl = `documenso.com/u/${user.url}`;
-    navigator.clipboard
-      .writeText(profileUrl)
-      .then(() => {
-        toast({
-          title: 'URL Copied',
-          description: 'The profile URL has been copied to your clipboard.',
-          duration: 3000,
-        });
-      })
-      .catch((err) => {
-        console.error('Failed to copy: ', err);
-        toast({
-          title: 'Error',
-          description: 'Failed to copy the URL to clipboard.',
-          variant: 'destructive',
-          duration: 3000,
-        });
-      });
-  };
-
-  return (
-    <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
-        <fieldset className="flex w-full flex-col gap-y-8" disabled={isSubmitting}>
-          <FormField
-            control={form.control}
-            name="url"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Public profile URL</FormLabel>
-                <FormControl>
-                  <Input type="text" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className="bg-muted flex w-full items-center rounded pl-2">
-            <span className="text-xs">documenso.com/u/{user.url}</span>
-            <Button
-              variant="ghost"
-              onClick={handleCopyUrl}
-              className="flex items-center justify-center rounded p-2 hover:bg-gray-200"
-              aria-label="Copy URL"
-            >
-              <Copy className="h-5 w-5" />
-            </Button>
-          </div>
-
-          <FormField
-            control={form.control}
-            name="bio"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Bio</FormLabel>
-                <FormControl>
-                  <>
-                    <Textarea placeholder="Write about yourself..." {...field} />
-                    <div className="text-muted-foreground text-left text-sm">
-                      {256 - (watchedBio?.length || 0)} characters remaining
-                    </div>
-                  </>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </fieldset>
-
-        <Button type="submit" loading={isSubmitting} className="self-end">
-          {isSubmitting ? 'Saving changes...' : 'Save changes'}
-        </Button>
-      </form>
-    </Form>
-  );
-};

packages/api/v1/implementation.ts

@@ -19,7 +19,7 @@ import { getRecipientById } from '@documenso/lib/server-only/recipient/get-recip
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
 import { updateRecipient } from '@documenso/lib/server-only/recipient/update-recipient';
-import { createDocumentFromTemplateLegacy } from '@documenso/lib/server-only/template/create-document-from-template-legacy';
+import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
@@ -286,7 +286,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
     const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
 
-    const document = await createDocumentFromTemplateLegacy({
+    const document = await createDocumentFromTemplate({
       templateId,
       userId: user.id,
       teamId: team?.id,

packages/api/v1/schema.ts

@@ -100,13 +100,21 @@ export type TCreateDocumentMutationResponseSchema = z.infer<
 
 export const ZCreateDocumentFromTemplateMutationSchema = z.object({
   title: z.string().min(1),
-  recipients: z.array(
-    z.object({
-      name: z.string().min(1),
-      email: z.string().email().min(1),
-      role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
-    }),
-  ),
+  recipients: z.union([
+    z.array(
+      z.object({
+        id: z.number(),
+        name: z.string().min(1),
+        email: z.string().email().min(1),
+      }),
+    ),
+    z.array(
+      z.object({
+        name: z.string().min(1),
+        email: z.string().email().min(1),
+      }),
+    ),
+  ]),
   meta: z
     .object({
       subject: z.string(),

packages/lib/constants/template.ts

@@ -1,2 +1 @@
-export const TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;
-export const TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX = /Recipient \d+/i;
+export const TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;

packages/lib/errors/app-error.ts

@@ -1,5 +1,4 @@
 import { TRPCError } from '@trpc/server';
-import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { TRPCClientError } from '@documenso/trpc/client';
@@ -150,24 +149,4 @@ export class AppError extends Error {
       return null;
     }
   }
-
-  static toRestAPIError(err: unknown): {
-    status: 400 | 401 | 404 | 500;
-    body: { message: string };
-  } {
-    const error = AppError.parseError(err);
-
-    const status = match(error.code)
-      .with(AppErrorCode.INVALID_BODY, AppErrorCode.INVALID_REQUEST, () => 400 as const)
-      .with(AppErrorCode.UNAUTHORIZED, () => 401 as const)
-      .with(AppErrorCode.NOT_FOUND, () => 404 as const)
-      .otherwise(() => 500 as const);
-
-    return {
-      status,
-      body: {
-        message: status !== 500 ? error.message : 'Something went wrong',
-      },
-    };
-  }
 }

packages/lib/server-only/public-api/get-all-team-tokens.ts

@@ -1,4 +1,3 @@
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { prisma } from '@documenso/prisma';
 import { TeamMemberRole } from '@documenso/prisma/client';
 
@@ -7,8 +6,6 @@ export type GetUserTokensOptions = {
   teamId: number;
 };
 
-export type GetTeamTokensResponse = Awaited<ReturnType<typeof getTeamTokens>>;
-
 export const getTeamTokens = async ({ userId, teamId }: GetUserTokensOptions) => {
   const teamMember = await prisma.teamMember.findFirst({
     where: {
@@ -18,10 +15,7 @@ export const getTeamTokens = async ({ userId, teamId }: GetUserTokensOptions) =>
   });
 
   if (teamMember?.role !== TeamMemberRole.ADMIN) {
-    throw new AppError(
-      AppErrorCode.UNAUTHORIZED,
-      'You do not have the required permissions to view this page.',
-    );
+    throw new Error('You do not have permission to view tokens for this team');
   }
 
   return await prisma.apiToken.findMany({

packages/lib/server-only/template/create-document-from-template-legacy.ts

@@ -1,144 +0,0 @@
-import { nanoid } from '@documenso/lib/universal/id';
-import { prisma } from '@documenso/prisma';
-import type { RecipientRole } from '@documenso/prisma/client';
-
-export type CreateDocumentFromTemplateLegacyOptions = {
-  templateId: number;
-  userId: number;
-  teamId?: number;
-  recipients?: {
-    name?: string;
-    email: string;
-    role?: RecipientRole;
-  }[];
-};
-
-/**
- * Legacy server function for /api/v1
- */
-export const createDocumentFromTemplateLegacy = async ({
-  templateId,
-  userId,
-  teamId,
-  recipients,
-}: CreateDocumentFromTemplateLegacyOptions) => {
-  const template = await prisma.template.findUnique({
-    where: {
-      id: templateId,
-      ...(teamId
-        ? {
-            team: {
-              id: teamId,
-              members: {
-                some: {
-                  userId,
-                },
-              },
-            },
-          }
-        : {
-            userId,
-            teamId: null,
-          }),
-    },
-    include: {
-      Recipient: true,
-      Field: true,
-      templateDocumentData: true,
-    },
-  });
-
-  if (!template) {
-    throw new Error('Template not found.');
-  }
-
-  const documentData = await prisma.documentData.create({
-    data: {
-      type: template.templateDocumentData.type,
-      data: template.templateDocumentData.data,
-      initialData: template.templateDocumentData.initialData,
-    },
-  });
-
-  const document = await prisma.document.create({
-    data: {
-      userId,
-      teamId: template.teamId,
-      title: template.title,
-      documentDataId: documentData.id,
-      Recipient: {
-        create: template.Recipient.map((recipient) => ({
-          email: recipient.email,
-          name: recipient.name,
-          role: recipient.role,
-          token: nanoid(),
-        })),
-      },
-    },
-
-    include: {
-      Recipient: {
-        orderBy: {
-          id: 'asc',
-        },
-      },
-      documentData: true,
-    },
-  });
-
-  await prisma.field.createMany({
-    data: template.Field.map((field) => {
-      const recipient = template.Recipient.find((recipient) => recipient.id === field.recipientId);
-
-      const documentRecipient = document.Recipient.find((doc) => doc.email === recipient?.email);
-
-      if (!documentRecipient) {
-        throw new Error('Recipient not found.');
-      }
-
-      return {
-        type: field.type,
-        page: field.page,
-        positionX: field.positionX,
-        positionY: field.positionY,
-        width: field.width,
-        height: field.height,
-        customText: field.customText,
-        inserted: field.inserted,
-        documentId: document.id,
-        recipientId: documentRecipient.id,
-      };
-    }),
-  });
-
-  if (recipients && recipients.length > 0) {
-    document.Recipient = await Promise.all(
-      recipients.map(async (recipient, index) => {
-        const existingRecipient = document.Recipient.at(index);
-
-        return await prisma.recipient.upsert({
-          where: {
-            documentId_email: {
-              documentId: document.id,
-              email: existingRecipient?.email ?? recipient.email,
-            },
-          },
-          update: {
-            name: recipient.name,
-            email: recipient.email,
-            role: recipient.role,
-          },
-          create: {
-            documentId: document.id,
-            email: recipient.email,
-            name: recipient.name,
-            role: recipient.role,
-            token: nanoid(),
-          },
-        });
-      }),
-    );
-  }
-
-  return document;
-};

packages/lib/server-only/template/create-document-from-template.ts

@@ -3,12 +3,17 @@ import { prisma } from '@documenso/prisma';
 import type { Field } from '@documenso/prisma/client';
 import { type Recipient, WebhookTriggerEvents } from '@documenso/prisma/client';
 
-import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 
+type RecipientWithId = {
+  id: number;
+  name?: string;
+  email: string;
+};
+
 type FinalRecipient = Pick<Recipient, 'name' | 'email' | 'role'> & {
   templateRecipientId: number;
   fields: Field[];
@@ -18,11 +23,12 @@ export type CreateDocumentFromTemplateOptions = {
   templateId: number;
   userId: number;
   teamId?: number;
-  recipients: {
-    id: number;
-    name?: string;
-    email: string;
-  }[];
+  recipients:
+    | RecipientWithId[]
+    | {
+        name?: string;
+        email: string;
+      }[];
   requestMetadata?: RequestMetadata;
 };
 
@@ -69,31 +75,45 @@ export const createDocumentFromTemplate = async ({
   });
 
   if (!template) {
-    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
+    throw new Error('Template not found.');
   }
 
   if (recipients.length !== template.Recipient.length) {
-    throw new AppError(AppErrorCode.INVALID_BODY, 'Invalid number of recipients.');
+    throw new Error('Invalid number of recipients.');
   }
 
-  const finalRecipients: FinalRecipient[] = template.Recipient.map((templateRecipient) => {
-    const foundRecipient = recipients.find((recipient) => recipient.id === templateRecipient.id);
+  let finalRecipients: FinalRecipient[] = [];
 
-    if (!foundRecipient) {
-      throw new AppError(
-        AppErrorCode.INVALID_BODY,
-        `Missing template recipient with ID ${templateRecipient.id}`,
+  if (recipients.length > 0 && Object.prototype.hasOwnProperty.call(recipients[0], 'id')) {
+    finalRecipients = template.Recipient.map((templateRecipient) => {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const foundRecipient = (recipients as RecipientWithId[]).find(
+        (recipient) => recipient.id === templateRecipient.id,
       );
-    }
 
-    return {
-      templateRecipientId: templateRecipient.id,
-      fields: templateRecipient.Field,
-      name: foundRecipient.name ?? '',
-      email: foundRecipient.email,
-      role: templateRecipient.role,
-    };
-  });
+      if (!foundRecipient) {
+        throw new Error('Recipient not found.');
+      }
+
+      return {
+        templateRecipientId: templateRecipient.id,
+        fields: templateRecipient.Field,
+        name: foundRecipient.name ?? '',
+        email: foundRecipient.email,
+        role: templateRecipient.role,
+      };
+    });
+  } else {
+    // Backwards compatible logic for /v1/ API where we use the index to associate
+    // the provided recipient with the template recipient.
+    finalRecipients = recipients.map((recipient, index) => ({
+      templateRecipientId: template.Recipient[index].id,
+      fields: template.Recipient[index].Field,
+      name: recipient.name ?? '',
+      email: recipient.email,
+      role: template.Recipient[index].role,
+    }));
+  }
 
   const documentData = await prisma.documentData.create({
     data: {

packages/lib/server-only/user/update-public-profile.ts

@@ -5,10 +5,9 @@ import { AppError, AppErrorCode } from '../../errors/app-error';
 export type UpdatePublicProfileOptions = {
   userId: number;
   url: string;
-  bio?: string;
 };
 
-export const updatePublicProfile = async ({ userId, url, bio }: UpdatePublicProfileOptions) => {
+export const updatePublicProfile = async ({ userId, url }: UpdatePublicProfileOptions) => {
   const isUrlTaken = await prisma.user.findFirst({
     select: {
       id: true,
@@ -38,10 +37,10 @@ export const updatePublicProfile = async ({ userId, url, bio }: UpdatePublicProf
       userProfile: {
         upsert: {
           create: {
-            bio: bio,
+            bio: '',
           },
           update: {
-            bio: bio,
+            bio: '',
           },
         },
       },

packages/trpc/server/profile-router/router.ts

@@ -88,9 +88,9 @@ export const profileRouter = router({
     .input(ZUpdatePublicProfileMutationSchema)
     .mutation(async ({ input, ctx }) => {
       try {
-        const { url, bio } = input;
+        const { url } = input;
 
-        if (IS_BILLING_ENABLED() && url.length < 6) {
+        if (IS_BILLING_ENABLED() && url.length <= 6) {
           const subscriptions = await getSubscriptionsByUserId({
             userId: ctx.user.id,
           }).then((subscriptions) =>
@@ -108,7 +108,6 @@ export const profileRouter = router({
         const user = await updatePublicProfile({
           userId: ctx.user.id,
           url,
-          bio,
         });
 
         return { success: true, url: user.url };

packages/trpc/server/profile-router/schema.ts

@@ -25,13 +25,6 @@ export const ZUpdatePublicProfileMutationSchema = z.object({
     .regex(/^[a-z0-9-]+$/, {
       message: 'Username can only container alphanumeric characters and dashes.',
     }),
-  bio: z
-    .string()
-    .trim()
-    .max(256, {
-      message: 'Bio cannot be longer than 256 characters.',
-    })
-    .optional(),
 });
 
 export const ZUpdatePasswordMutationSchema = z.object({

packages/trpc/server/template-router/schema.ts

@@ -9,18 +9,13 @@ export const ZCreateTemplateMutationSchema = z.object({
 export const ZCreateDocumentFromTemplateMutationSchema = z.object({
   templateId: z.number(),
   teamId: z.number().optional(),
-  recipients: z
-    .array(
-      z.object({
-        id: z.number(),
-        email: z.string().email(),
-        name: z.string().optional(),
-      }),
-    )
-    .refine((recipients) => {
-      const emails = recipients.map((signer) => signer.email);
-      return new Set(emails).size === emails.length;
-    }, 'Recipients must have unique emails'),
+  recipients: z.array(
+    z.object({
+      id: z.number(),
+      email: z.string().email(),
+      name: z.string().optional(),
+    }),
+  ),
   sendDocument: z.boolean().optional(),
 });
 

packages/ui/components/recipient/recipient-action-auth-select.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import type { SelectProps } from '@radix-ui/react-select';
-import { InfoIcon } from 'lucide-react';
-
-import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
-import { RecipientActionAuth } from '@documenso/lib/types/document-auth';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-
-export type RecipientActionAuthSelectProps = SelectProps;
-
-export const RecipientActionAuthSelect = (props: RecipientActionAuthSelectProps) => {
-  return (
-    <Select {...props}>
-      <SelectTrigger className="bg-background text-muted-foreground">
-        <SelectValue placeholder="Inherit authentication method" />
-
-        <Tooltip>
-          <TooltipTrigger className="-mr-1 ml-auto">
-            <InfoIcon className="mx-2 h-4 w-4" />
-          </TooltipTrigger>
-
-          <TooltipContent className="text-foreground max-w-md p-4">
-            <h2>
-              <strong>Recipient action authentication</strong>
-            </h2>
-
-            <p>The authentication required for recipients to sign fields</p>
-
-            <p className="mt-2">This will override any global settings.</p>
-
-            <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
-              <li>
-                <strong>Inherit authentication method</strong> - Use the global action signing
-                authentication method configured in the "General Settings" step
-              </li>
-              {/* <li>
-                <strong>Require account</strong> - The recipient must be
-                signed in
-              </li> */}
-              <li>
-                <strong>Require passkey</strong> - The recipient must have an account and passkey
-                configured via their settings
-              </li>
-              <li>
-                <strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled
-                via their settings
-              </li>
-              <li>
-                <strong>None</strong> - No authentication required
-              </li>
-            </ul>
-          </TooltipContent>
-        </Tooltip>
-      </SelectTrigger>
-
-      <SelectContent position="popper">
-        {/* Note: -1 is remapped in the Zod schema to the required value. */}
-        <SelectItem value="-1">Inherit authentication method</SelectItem>
-
-        {Object.values(RecipientActionAuth)
-          .filter((auth) => auth !== RecipientActionAuth.ACCOUNT)
-          .map((authType) => (
-            <SelectItem key={authType} value={authType}>
-              {DOCUMENT_AUTH_TYPES[authType].value}
-            </SelectItem>
-          ))}
-      </SelectContent>
-    </Select>
-  );
-};

packages/ui/components/recipient/recipient-role-select.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import type { SelectProps } from '@radix-ui/react-select';
-import { InfoIcon } from 'lucide-react';
-
-import { RecipientRole } from '@documenso/prisma/client';
-import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-
-export type RecipientRoleSelectProps = SelectProps;
-
-export const RecipientRoleSelect = (props: RecipientRoleSelectProps) => {
-  return (
-    <Select {...props}>
-      <SelectTrigger className="bg-background w-[60px]">
-        {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
-        {ROLE_ICONS[props.value as RecipientRole]}
-      </SelectTrigger>
-
-      <SelectContent align="end">
-        <SelectItem value={RecipientRole.SIGNER}>
-          <div className="flex items-center">
-            <div className="flex w-[150px] items-center">
-              <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-              Needs to sign
-            </div>
-            <Tooltip>
-              <TooltipTrigger>
-                <InfoIcon className="h-4 w-4" />
-              </TooltipTrigger>
-              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                <p>The recipient is required to sign the document for it to be completed.</p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </SelectItem>
-
-        <SelectItem value={RecipientRole.APPROVER}>
-          <div className="flex items-center">
-            <div className="flex w-[150px] items-center">
-              <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-              Needs to approve
-            </div>
-            <Tooltip>
-              <TooltipTrigger>
-                <InfoIcon className="h-4 w-4" />
-              </TooltipTrigger>
-              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                <p>The recipient is required to approve the document for it to be completed.</p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </SelectItem>
-
-        <SelectItem value={RecipientRole.VIEWER}>
-          <div className="flex items-center">
-            <div className="flex w-[150px] items-center">
-              <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-              Needs to view
-            </div>
-            <Tooltip>
-              <TooltipTrigger>
-                <InfoIcon className="h-4 w-4" />
-              </TooltipTrigger>
-              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                <p>The recipient is required to view the document for it to be completed.</p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </SelectItem>
-
-        <SelectItem value={RecipientRole.CC}>
-          <div className="flex items-center">
-            <div className="flex w-[150px] items-center">
-              <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-              Receives copy
-            </div>
-            <Tooltip>
-              <TooltipTrigger>
-                <InfoIcon className="h-4 w-4" />
-              </TooltipTrigger>
-              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                <p>
-                  The recipient is not required to take any action and receives a copy of the
-                  document after it is completed.
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-};

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

@@ -4,18 +4,20 @@ import React, { useId, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { motion } from 'framer-motion';
-import { Plus, Trash } from 'lucide-react';
+import { InfoIcon, Plus, Trash } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
+import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
+import {
+  RecipientActionAuth,
+  ZRecipientAuthOptionsSchema,
+} from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { RecipientRole, SendStatus } from '@documenso/prisma/client';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
-import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { Button } from '../button';
@@ -23,7 +25,10 @@ import { Checkbox } from '../checkbox';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
+import { ROLE_ICONS } from '../recipient-role-icons';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
 import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import { useToast } from '../use-toast';
 import type { TAddSignersFormSchema } from './add-signers.types';
 import { ZAddSignersFormSchema } from './add-signers.types';
@@ -269,11 +274,67 @@ export const AddSignersFormPartial = ({
                       render={({ field }) => (
                         <FormItem className="col-span-6">
                           <FormControl>
-                            <RecipientActionAuthSelect
+                            <Select
                               {...field}
                               onValueChange={field.onChange}
                               disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
-                            />
+                            >
+                              <SelectTrigger className="bg-background text-muted-foreground">
+                                <SelectValue placeholder="Inherit authentication method" />
+
+                                <Tooltip>
+                                  <TooltipTrigger className="-mr-1 ml-auto">
+                                    <InfoIcon className="mx-2 h-4 w-4" />
+                                  </TooltipTrigger>
+
+                                  <TooltipContent className="text-foreground max-w-md p-4">
+                                    <h2>
+                                      <strong>Recipient action authentication</strong>
+                                    </h2>
+
+                                    <p>The authentication required for recipients to sign fields</p>
+
+                                    <p className="mt-2">This will override any global settings.</p>
+
+                                    <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+                                      <li>
+                                        <strong>Inherit authentication method</strong> - Use the
+                                        global action signing authentication method configured in
+                                        the "General Settings" step
+                                      </li>
+                                      {/* <li>
+                                        <strong>Require account</strong> - The recipient must be
+                                        signed in
+                                      </li> */}
+                                      <li>
+                                        <strong>Require passkey</strong> - The recipient must have
+                                        an account and passkey configured via their settings
+                                      </li>
+                                      <li>
+                                        <strong>Require 2FA</strong> - The recipient must have an
+                                        account and 2FA enabled via their settings
+                                      </li>
+                                      <li>
+                                        <strong>None</strong> - No authentication required
+                                      </li>
+                                    </ul>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </SelectTrigger>
+
+                              <SelectContent position="popper">
+                                {/* Note: -1 is remapped in the Zod schema to the required value. */}
+                                <SelectItem value="-1">Inherit authentication method</SelectItem>
+
+                                {Object.values(RecipientActionAuth)
+                                  .filter((auth) => auth !== RecipientActionAuth.ACCOUNT)
+                                  .map((authType) => (
+                                    <SelectItem key={authType} value={authType}>
+                                      {DOCUMENT_AUTH_TYPES[authType].value}
+                                    </SelectItem>
+                                  ))}
+                              </SelectContent>
+                            </Select>
                           </FormControl>
 
                           <FormMessage />
@@ -287,11 +348,100 @@ export const AddSignersFormPartial = ({
                     render={({ field }) => (
                       <FormItem className="col-span-1 mt-auto">
                         <FormControl>
-                          <RecipientRoleSelect
+                          <Select
                             {...field}
                             onValueChange={field.onChange}
                             disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
-                          />
+                          >
+                            <SelectTrigger className="bg-background w-[60px]">
+                              {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
+                              {ROLE_ICONS[field.value as RecipientRole]}
+                            </SelectTrigger>
+
+                            <SelectContent align="end">
+                              <SelectItem value={RecipientRole.SIGNER}>
+                                <div className="flex items-center">
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                                    Needs to sign
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to sign the document for it to be
+                                        completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </div>
+                              </SelectItem>
+
+                              <SelectItem value={RecipientRole.APPROVER}>
+                                <div className="flex items-center">
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">
+                                      {ROLE_ICONS[RecipientRole.APPROVER]}
+                                    </span>
+                                    Needs to approve
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to approve the document for it to
+                                        be completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </div>
+                              </SelectItem>
+
+                              <SelectItem value={RecipientRole.VIEWER}>
+                                <div className="flex items-center">
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                                    Needs to view
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to view the document for it to be
+                                        completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </div>
+                              </SelectItem>
+
+                              <SelectItem value={RecipientRole.CC}>
+                                <div className="flex items-center">
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                                    Receives copy
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is not required to take any action and
+                                        receives a copy of the document after it is completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </div>
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
                         </FormControl>
 
                         <FormMessage />

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -1,25 +1,20 @@
 'use client';
 
-import React, { useId, useMemo, useState } from 'react';
+import React, { useId, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { motion } from 'framer-motion';
-import { Plus, Trash } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { InfoIcon, Plus, Trash } from 'lucide-react';
 import { useSession } from 'next-auth/react';
-import { useFieldArray, useForm } from 'react-hook-form';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
-import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import { type Field, type Recipient, RecipientRole } from '@documenso/prisma/client';
-import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
-import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
-import { cn } from '@documenso/ui/lib/utils';
 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 { Checkbox } from '../checkbox';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -27,8 +22,10 @@ import {
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
 import type { DocumentFlowStep } from '../document-flow/types';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
+import { ROLE_ICONS } from '../recipient-role-icons';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
 import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 
@@ -36,29 +33,30 @@ export type AddTemplatePlaceholderRecipientsFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
-  isTemplateOwnerEnterprise: boolean;
   onSubmit: (_data: TAddTemplatePlacholderRecipientsFormSchema) => void;
 };
 
 export const AddTemplatePlaceholderRecipientsFormPartial = ({
   documentFlow,
-  isTemplateOwnerEnterprise,
   recipients,
   fields: _fields,
   onSubmit,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
   const { data: session } = useSession();
-
   const user = session?.user;
-
   const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
     recipients.length > 1 ? recipients.length + 1 : 2,
   );
 
   const { currentStep, totalSteps, previousStep } = useStep();
 
-  const form = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
     resolver: zodResolver(ZAddTemplatePlacholderRecipientsFormSchema),
     defaultValues: {
       signers:
@@ -69,8 +67,6 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
               name: recipient.name,
               email: recipient.email,
               role: recipient.role,
-              actionAuth:
-                ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
             }))
           : [
               {
@@ -78,33 +74,12 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                 name: `Recipient 1`,
                 email: `recipient.1@documenso.com`,
                 role: RecipientRole.SIGNER,
-                actionAuth: undefined,
               },
             ],
     },
   });
 
-  // Always show advanced settings if any recipient has auth options.
-  const alwaysShowAdvancedSettings = useMemo(() => {
-    const recipientHasAuthOptions = recipients.find((recipient) => {
-      const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
-
-      return recipientAuthOptions?.accessAuth || recipientAuthOptions?.actionAuth;
-    });
-
-    const formHasActionAuth = form.getValues('signers').find((signer) => signer.actionAuth);
-
-    return recipientHasAuthOptions !== undefined || formHasActionAuth !== undefined;
-  }, [recipients, form]);
-
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(alwaysShowAdvancedSettings);
-
-  const {
-    formState: { errors, isSubmitting },
-    control,
-  } = form;
-
-  const onFormSubmit = form.handleSubmit(onSubmit);
+  const onFormSubmit = handleSubmit(onSubmit);
 
   const {
     append: appendSigner,
@@ -127,9 +102,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   const onAddPlaceholderRecipient = () => {
     appendSigner({
       formId: nanoid(12),
-      // Update TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX if this is ever changed.
       name: `Recipient ${placeholderRecipientCount}`,
-      // Update TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX if this is ever changed.
+      // Update TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX if this is ever changed.
       email: `recipient.${placeholderRecipientCount}@documenso.com`,
       role: RecipientRole.SIGNER,
     });
@@ -144,176 +118,181 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   return (
     <>
       <DocumentFlowFormContainerContent>
-        <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
-          <Form {...form}>
-            <div className="flex w-full flex-col gap-y-2">
-              {signers.map((signer, index) => (
-                <motion.fieldset
-                  key={signer.id}
-                  data-native-id={signer.nativeId}
-                  disabled={isSubmitting}
-                  className={cn('grid grid-cols-8 gap-4 pb-4', {
-                    'border-b pt-2': showAdvancedSettings,
-                  })}
-                >
-                  <FormField
-                    control={form.control}
-                    name={`signers.${index}.email`}
-                    render={({ field }) => (
-                      <FormItem
-                        className={cn('relative', {
-                          'col-span-3': !showAdvancedSettings,
-                          'col-span-4': showAdvancedSettings,
-                        })}
-                      >
-                        {!showAdvancedSettings && index === 0 && (
-                          <FormLabel required>Email</FormLabel>
-                        )}
+        <div className="flex w-full flex-col gap-y-4">
+          <AnimatePresence>
+            {signers.map((signer, index) => (
+              <motion.div
+                key={signer.id}
+                data-native-id={signer.nativeId}
+                className="flex flex-wrap items-end gap-x-4"
+              >
+                <div className="flex-1">
+                  <Label htmlFor={`signer-${signer.id}-email`}>Email</Label>
 
-                        <FormControl>
-                          <Input
-                            type="email"
-                            placeholder="Email"
-                            {...field}
-                            disabled={isSubmitting || signers[index].email === user?.email}
-                          />
-                        </FormControl>
-
-                        <FormMessage />
-                      </FormItem>
-                    )}
+                  <Input
+                    id={`signer-${signer.id}-email`}
+                    type="email"
+                    value={signer.email}
+                    disabled
+                    className="bg-background mt-2"
                   />
+                </div>
 
-                  <FormField
-                    control={form.control}
-                    name={`signers.${index}.name`}
-                    render={({ field }) => (
-                      <FormItem
-                        className={cn({
-                          'col-span-3': !showAdvancedSettings,
-                          'col-span-4': showAdvancedSettings,
-                        })}
-                      >
-                        {!showAdvancedSettings && index === 0 && <FormLabel>Name</FormLabel>}
+                <div className="flex-1">
+                  <Label htmlFor={`signer-${signer.id}-name`}>Name</Label>
 
-                        <FormControl>
-                          <Input
-                            placeholder="Name"
-                            {...field}
-                            disabled={isSubmitting || signers[index].email === user?.email}
-                          />
-                        </FormControl>
-
-                        <FormMessage />
-                      </FormItem>
-                    )}
+                  <Input
+                    id={`signer-${signer.id}-name`}
+                    type="text"
+                    value={signer.name}
+                    disabled
+                    className="bg-background mt-2"
                   />
+                </div>
 
-                  {showAdvancedSettings && isTemplateOwnerEnterprise && (
-                    <FormField
-                      control={form.control}
-                      name={`signers.${index}.actionAuth`}
-                      render={({ field }) => (
-                        <FormItem className="col-span-6">
-                          <FormControl>
-                            <RecipientActionAuthSelect
-                              {...field}
-                              onValueChange={field.onChange}
-                              disabled={isSubmitting}
-                            />
-                          </FormControl>
-
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-
-                  <FormField
+                <div className="w-[60px]">
+                  <Controller
+                    control={control}
                     name={`signers.${index}.role`}
-                    render={({ field }) => (
-                      <FormItem className="col-span-1 mt-auto">
-                        <FormControl>
-                          <RecipientRoleSelect
-                            {...field}
-                            onValueChange={field.onChange}
-                            disabled={isSubmitting}
-                          />
-                        </FormControl>
+                    render={({ field: { value, onChange } }) => (
+                      <Select value={value} onValueChange={(x) => onChange(x)}>
+                        <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
 
-                        <FormMessage />
-                      </FormItem>
+                        <SelectContent className="" align="end">
+                          <SelectItem value={RecipientRole.SIGNER}>
+                            <div className="flex items-center">
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                                Needs to sign
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to sign the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.APPROVER}>
+                            <div className="flex items-center">
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+                                Needs to approve
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to approve the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.VIEWER}>
+                            <div className="flex items-center">
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                                Needs to view
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to view the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.CC}>
+                            <div className="flex items-center">
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                                Receives copy
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is not required to take any action and receives a
+                                    copy of the document after it is completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
                     )}
                   />
+                </div>
 
+                <div>
                   <button
                     type="button"
-                    className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={isSubmitting || signers.length === 1}
                     onClick={() => onRemoveSigner(index)}
                   >
                     <Trash className="h-5 w-5" />
                   </button>
-                </motion.fieldset>
-              ))}
-            </div>
+                </div>
 
-            <FormErrorMessage
-              className="mt-2"
-              // Dirty hack to handle errors when .root is populated for an array type
-              error={'signers__root' in errors && errors['signers__root']}
-            />
+                <div className="w-full">
+                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
+                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
+                </div>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+        </div>
 
-            <div
-              className={cn('mt-2 flex flex-row items-center space-x-4', {
-                'mt-4': showAdvancedSettings,
-              })}
-            >
-              <Button
-                type="button"
-                className="flex-1"
-                disabled={isSubmitting}
-                onClick={() => onAddPlaceholderRecipient()}
-              >
-                <Plus className="-ml-1 mr-2 h-5 w-5" />
-                Add Placeholder Recipient
-              </Button>
+        <FormErrorMessage
+          className="mt-2"
+          // Dirty hack to handle errors when .root is populated for an array type
+          error={'signers__root' in errors && errors['signers__root']}
+        />
 
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                disabled={
-                  isSubmitting ||
-                  form.getValues('signers').some((signer) => signer.email === user?.email)
-                }
-                onClick={() => onAddPlaceholderSelfRecipient()}
-              >
-                <Plus className="-ml-1 mr-2 h-5 w-5" />
-                Add Myself
-              </Button>
-            </div>
-
-            {!alwaysShowAdvancedSettings && isTemplateOwnerEnterprise && (
-              <div className="mt-4 flex flex-row items-center">
-                <Checkbox
-                  id="showAdvancedRecipientSettings"
-                  className="h-5 w-5"
-                  checkClassName="dark:text-white text-primary"
-                  checked={showAdvancedSettings}
-                  onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
-                />
-
-                <label
-                  className="text-muted-foreground ml-2 text-sm"
-                  htmlFor="showAdvancedRecipientSettings"
-                >
-                  Show advanced settings
-                </label>
-              </div>
-            )}
-          </Form>
-        </AnimateGenericFadeInOut>
+        <div className="mt-4 flex flex-row items-center space-x-4">
+          <Button
+            type="button"
+            className="flex-1"
+            disabled={isSubmitting}
+            onClick={() => onAddPlaceholderRecipient()}
+          >
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Placeholder Recipient
+          </Button>
+          <Button
+            type="button"
+            className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+            variant="secondary"
+            disabled={
+              isSubmitting || getValues('signers').some((signer) => signer.email === user?.email)
+            }
+            onClick={() => onAddPlaceholderSelfRecipient()}
+          >
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Myself
+          </Button>
+        </div>
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>

packages/ui/primitives/template-flow/add-template-placeholder-recipients.types.ts

@@ -1,8 +1,5 @@
 import { z } from 'zod';
 
-import { ZRecipientActionAuthTypesSchema } from '@documenso/lib/types/document-auth';
-
-import { ZMapNegativeOneToUndefinedSchema } from '../document-flow/add-settings.types';
 import { RecipientRole } from '.prisma/client';
 
 export const ZAddTemplatePlacholderRecipientsFormSchema = z
@@ -14,9 +11,6 @@ export const ZAddTemplatePlacholderRecipientsFormSchema = z
         email: z.string().min(1).email(),
         name: z.string(),
         role: z.nativeEnum(RecipientRole),
-        actionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
-          ZRecipientActionAuthTypesSchema.optional(),
-        ),
       }),
     ),
   })