feat: templates

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

@@ -3,6 +3,9 @@
 import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';
 
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
 import { Search } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -10,10 +13,22 @@ import { Button } from '@documenso/ui/primitives/button';
 
 import { CommandMenu } from '../common/command-menu';
 
+const navigationLinks = [
+  {
+    href: '/documents',
+    label: 'Documents',
+  },
+  {
+    href: '/templates',
+    label: 'Templates',
+  },
+];
+
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
-  // const pathname = usePathname();
+  const pathname = usePathname();
+
   const [open, setOpen] = useState(false);
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
@@ -48,18 +63,20 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </div>
       </Button>
 
-      {/* We have no other subpaths rn */}
-      {/* <Link
-        href="/documents"
-        className={cn(
-          'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-          {
-            'text-foreground': pathname?.startsWith('/documents'),
-          },
-        )}
-      >
-        Documents
-      </Link> */}
+      {navigationLinks.map(({ href, label }) => (
+        <Link
+          key={href}
+          href={href}
+          className={cn(
+            'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+            {
+              'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
+            },
+          )}
+        >
+          {label}
+        </Link>
+      ))}
     </div>
   );
 };

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 
 import {
   CreditCard,
+  FileSpreadsheet,
   Lock,
   LogOut,
   User as LucideUser,
@@ -106,6 +107,13 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
           </DropdownMenuItem>
         )}
 
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/templates" className="cursor-pointer">
+            <FileSpreadsheet className="mr-2 h-4 w-4" />
+            Templates
+          </Link>
+        </DropdownMenuItem>
         <DropdownMenuSeparator />
 
         <DropdownMenuSub>

apps/web/src/components/formatter/template-type.tsx

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'react';
+
+import { Globe, Lock } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';
+
+import { TemplateType as TemplateTypePrisma } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+
+type TemplateTypeIcon = {
+  label: string;
+  icon?: LucideIcon;
+  color: string;
+};
+
+type TemplateTypes = (typeof TemplateTypePrisma)[keyof typeof TemplateTypePrisma];
+
+const TEMPLATE_TYPES: Record<TemplateTypes, TemplateTypeIcon> = {
+  PRIVATE: {
+    label: 'Private',
+    icon: Lock,
+    color: 'text-blue-600 dark:text-blue-300',
+  },
+  PUBLIC: {
+    label: 'Public',
+    icon: Globe,
+    color: 'text-green-500 dark:text-green-300',
+  },
+};
+
+export type TemplateTypeProps = HTMLAttributes<HTMLSpanElement> & {
+  type: TemplateTypes;
+  inheritColor?: boolean;
+};
+
+export const TemplateType = ({ className, type, inheritColor, ...props }: TemplateTypeProps) => {
+  const { label, icon: Icon, color } = TEMPLATE_TYPES[type];
+
+  return (
+    <span className={cn('flex items-center', className)} {...props}>
+      {Icon && (
+        <Icon
+          className={cn('mr-2 inline-block h-4 w-4', {
+            [color]: !inheritColor,
+          })}
+        />
+      )}
+      {label}
+    </span>
+  );
+};

apps/web/src/components/forms/edit-template/add-template-fields.action.ts

@@ -0,0 +1,32 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { setFieldsForTemplate } from '@documenso/lib/server-only/field/set-fields-for-template';
+import { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
+
+export type AddTemplateFieldsActionInput = TAddTemplateFieldsFormSchema & {
+  templateId: number;
+};
+
+export const addTemplateFields = async ({ templateId, fields }: AddTemplateFieldsActionInput) => {
+  'use server';
+
+  const { user } = await getRequiredServerComponentSession();
+
+  await setFieldsForTemplate({
+    userId: user.id,
+    templateId,
+    fields: fields.map((field) => ({
+      id: field.nativeId,
+      signerEmail: field.signerEmail,
+      signerId: field.signerId,
+      signerToken: field.signerToken,
+      type: field.type,
+      pageNumber: field.pageNumber,
+      pageX: field.pageX,
+      pageY: field.pageY,
+      pageWidth: field.pageWidth,
+      pageHeight: field.pageHeight,
+    })),
+  });
+};

apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts

@@ -0,0 +1,28 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { setRecipientsForTemplate } from '@documenso/lib/server-only/recipient/set-recipients-for-template';
+import { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+
+export type AddTemplatePlaceholdersActionInput = TAddTemplatePlacholderRecipientsFormSchema & {
+  templateId: number;
+};
+
+export const addTemplatePlaceholders = async ({
+  templateId,
+  signers,
+}: AddTemplatePlaceholdersActionInput) => {
+  'use server';
+
+  const { user } = await getRequiredServerComponentSession();
+
+  await setRecipientsForTemplate({
+    userId: user.id,
+    templateId,
+    recipients: signers.map((signer) => ({
+      id: signer.nativeId!,
+      email: signer.email,
+      name: signer.name!,
+    })),
+  });
+};