fix: tidy code and base on main

2025-11-14 16:51:38 +10:00 · 2023-12-14 15:28:27 +11:00
parent 31a9127c9e
commit 1eeb5fb103
13 changed files with 121 additions and 111 deletions
--- a/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
@ -4,19 +4,20 @@ import { useState } from 'react';

 import { useRouter } from 'next/navigation';

-import { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
+import type { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
  DocumentFlowFormContainer,
  DocumentFlowFormContainerHeader,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
-import { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
+import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
 import { AddTemplatePlaceholderRecipientsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients';
-import { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import { addTemplateFields } from '~/components/forms/edit-template/add-template-fields.action';
@ -32,6 +33,7 @@ export type EditTemplateFormProps = {
 };

 type EditTemplateStep = 'signers' | 'fields';
+const EditTemplateSteps: EditTemplateStep[] = ['signers', 'fields'];

 export const EditTemplateForm = ({
  className,
@ -56,7 +58,6 @@ export const EditTemplateForm = ({
      title: 'Add Fields',
      description: 'Add all relevant fields for each recipient.',
      stepIndex: 2,
-      onBackStep: () => setStep('signers'),
    },
  };

@ -118,33 +119,35 @@ export const EditTemplateForm = ({
      </Card>

      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-        <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
          <DocumentFlowFormContainerHeader
            title={currentDocumentFlow.title}
            description={currentDocumentFlow.description}
          />

-          {step === 'signers' && (
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(EditTemplateSteps[step - 1])}
+          >
            <AddTemplatePlaceholderRecipientsFormPartial
              key={recipients.length}
              documentFlow={documentFlow.signers}
              recipients={recipients}
              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
              onSubmit={onAddTemplatePlaceholderFormSubmit}
            />
-          )}

-          {step === 'fields' && (
            <AddTemplateFieldsFormPartial
              key={fields.length}
              documentFlow={documentFlow.fields}
              recipients={recipients}
              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
              onSubmit={onAddFieldsFormSubmit}
            />
-          )}
+          </Stepper>
        </DocumentFlowFormContainer>
      </div>
    </div>
--- a/apps/web/src/app/(dashboard)/templates/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[id]/page.tsx
@ -5,7 +5,7 @@ import { redirect } from 'next/navigation';

 import { ChevronLeft } from 'lucide-react';

-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
 import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
--- a/apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx
@ -7,7 +7,7 @@ import Link from 'next/link';
 import { Copy, Edit, MoreHorizontal, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';

-import { Template } from '@documenso/prisma/client';
+import type { Template } from '@documenso/prisma/client';
 import {
  DropdownMenu,
  DropdownMenuContent,
--- a/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation';
 import { Loader, Plus } from 'lucide-react';

 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { Template } from '@documenso/prisma/client';
+import type { Template } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@ -109,7 +109,7 @@ export const TemplatesDataTable = ({
                    }}
                  >
                    {!isRowLoading && <Plus className="-ml-1 mr-2 h-4 w-4" />}
-                    Use
+                    Use Template
                  </Button>
                  <DataTableActionDropdown row={row.original} />
                </div>
--- a/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
@ -1,11 +1,12 @@
 'use client';

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';

 import { useRouter } from 'next/navigation';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { FilePlus, X } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';

@ -18,7 +19,6 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
  Dialog,
  DialogContent,
-  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
@ -45,7 +45,9 @@ type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;

 export const NewTemplateDialog = () => {
  const router = useRouter();
+  const { data: session } = useSession();
  const { toast } = useToast();
+
  const form = useForm<TCreateTemplateFormSchema>({
    resolver: zodResolver(ZCreateTemplateFormSchema),
    defaultValues: {
@ -128,23 +130,29 @@ export const NewTemplateDialog = () => {
    setUploadedFile(null);
  };

+  useEffect(() => {
+    if (!showNewTemplateDialog) {
+      form.reset();
+    }
+  }, [form, showNewTemplateDialog]);
+
  return (
    <Dialog open={showNewTemplateDialog} onOpenChange={setShowNewTemplateDialog}>
      <DialogTrigger asChild>
-        <Button className="cursor-pointer">
-          <>
-            <FilePlus className="-ml-1 mr-2 h-4 w-4" />
-            New Template
-          </>
+        <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
+          <FilePlus className="-ml-1 mr-2 h-4 w-4" />
+          New Template
        </Button>
      </DialogTrigger>
+
      <DialogContent className="w-full max-w-xl">
        <DialogHeader>
          <DialogTitle className="mb-4">New Template</DialogTitle>
        </DialogHeader>
-        <DialogDescription asChild>
+
+        <div>
          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
              <FormField
                control={form.control}
                name="name"
@ -167,23 +175,26 @@ export const NewTemplateDialog = () => {

              <div>
                <Label htmlFor="template">Upload a Document</Label>
+
                <div className="my-3">
                  {uploadedFile ? (
                    <Card gradient className="h-[40vh]">
                      <CardContent className="flex h-full flex-col items-center justify-center p-2">
-                        <div
+                        <button
                          onClick={() => resetForm()}
-                          className="absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+                          title="Remove Template"
+                          className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
                        >
-                          <X className="h-5 w-5" />
+                          <X className="h-6 w-6" />
                          <span className="sr-only">Remove Template</span>
-                        </div>
+                        </button>

                        <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
                        </div>
+
                        <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
                          Uploaded Document
                        </p>
@ -210,7 +221,7 @@ export const NewTemplateDialog = () => {
              </div>
            </form>
          </Form>
-        </DialogDescription>
+        </div>
      </DialogContent>
    </Dialog>
  );
--- a/apps/web/src/app/(dashboard)/templates/page.tsx
+++ b/apps/web/src/app/(dashboard)/templates/page.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTemplates } from '@documenso/lib/server-only/template/get-templates';

 import { TemplatesDataTable } from './data-table-templates';
@ -27,9 +27,12 @@ export default async function TemplatesPage({ searchParams = {} }: TemplatesPage

  return (
    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex items-center justify-between">
+      <div className="flex items-baseline justify-between">
        <h1 className="mb-5 mt-2 truncate text-2xl font-semibold md:text-3xl">Templates</h1>
-        <NewTemplateDialog />
+
+        <div>
+          <NewTemplateDialog />
+        </div>
      </div>

      <div className="relative">
--- a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
@ -41,9 +41,29 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {

  return (
    <div
-      className={cn('ml-8 hidden flex-1 gap-x-6 md:flex md:justify-center', className)}
+      className={cn(
+        'ml-8 hidden flex-1 items-center gap-x-12 md:flex md:justify-between',
+        className,
+      )}
      {...props}
    >
+      <div className="flex items-baseline gap-x-6">
+        {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>
+
      <CommandMenu open={open} onOpenChange={setOpen} />

      <Button
@ -62,21 +82,6 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
          </div>
        </div>
      </Button>
-
-      {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>
  );
 };
--- a/apps/web/src/components/(dashboard)/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/header.tsx
@ -49,7 +49,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {

        <DesktopNav />

-        <div className="flex gap-x-4">
+        <div className="flex gap-x-4 md:ml-8">
          <ProfileDropdown user={user} />

          {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
--- a/apps/web/src/components/forms/edit-template/add-template-fields.action.ts
+++ b/apps/web/src/components/forms/edit-template/add-template-fields.action.ts
@ -1,8 +1,8 @@
 'use server';

-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-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';
+import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';

 export type AddTemplateFieldsActionInput = TAddTemplateFieldsFormSchema & {
  templateId: number;
--- a/apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts
+++ b/apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts
@ -1,8 +1,8 @@
 'use server';

-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-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';
+import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';

 export type AddTemplatePlaceholdersActionInput = TAddTemplatePlacholderRecipientsFormSchema & {
  templateId: number;