fix: esign alignment issue (#289)

* fix: redirection * fix: signature and alignment issue
captableinc · May 4, 2024 · f43a383 · f43a383
1 parent 402f5b0
commit f43a383
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 16 deletions.
diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/documents/esign/[templatePublicId]/page.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/documents/esign/[templatePublicId]/page.tsx
@@ -3,13 +3,16 @@ import { PdfCanvas } from "@/components/template/pdf-canvas";
 import { TemplateFieldForm } from "@/components/template/template-field-form";
 import { Badge } from "@/components/ui/badge";
 import { TemplateFieldProvider } from "@/providers/template-field-provider";
+import { withServerSession } from "@/server/auth";
 import { api } from "@/trpc/server";
 
 const EsignTemplateDetailPage = async ({
   params: { templatePublicId },
 }: {
   params: { templatePublicId: string };
 }) => {
+  const session = await withServerSession();
+
   const { name, status, url, fields, recipients } =
     await api.template.get.query({
       publicId: templatePublicId,
@@ -18,7 +21,10 @@ const EsignTemplateDetailPage = async ({
 
   return (
     <TemplateFieldProvider recipients={recipients} fields={fields}>
-      <TemplateFieldForm templatePublicId={templatePublicId}>
+      <TemplateFieldForm
+        companyPublicId={session.user.companyPublicId}
+        templatePublicId={templatePublicId}
+      >
         <div className="grid grid-cols-12">
           <div className="col-span-12 flex align-middle">
             <Badge

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/documents/esign/components/table.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/documents/esign/components/table.tsx
@@ -57,7 +57,7 @@ export const ESignTable = ({ documents, companyPublicId }: ESignTableProps) => {
                 {item.status === "DRAFT" && (
                   <Link
                     className={buttonVariants()}
-                    href={`/${companyPublicId}/esign/${item.publicId}`}
+                    href={`/${companyPublicId}/documents/esign/${item.publicId}`}
                   >
                     Edit
                   </Link>

diff --git a/src/components/esign/add-esign-modal/steps/add-recepients-step.tsx b/src/components/esign/add-esign-modal/steps/add-recepients-step.tsx
@@ -84,7 +84,7 @@ export function AddRecipientStep({ companyPublicId }: AddRecipientStepProps) {
       ...data,
     });
 
-    router.push(`/${companyPublicId}/esign/${template.publicId}`);
+    router.push(`/${companyPublicId}/documents/esign/${template.publicId}`);
   };
 
   const isDeleteDisabled = fields.length === 1;

diff --git a/src/components/template/field-canvas/readonly-template-field.tsx b/src/components/template/field-canvas/readonly-template-field.tsx
@@ -44,7 +44,7 @@ export const ReadOnlyTemplateField = ({
           <img
             src={prefilledValue ?? value}
             alt="signature"
-            className="h-full w-full"
+            className="h-full "
           />
         ) : (
           <p>{name}</p>

diff --git a/src/components/template/template-field-form/index.tsx b/src/components/template/template-field-form/index.tsx
@@ -3,21 +3,26 @@
 import { useToast } from "@/components/ui/use-toast";
 import { type TemplateFieldForm as TTemplateFieldForm } from "@/providers/template-field-provider";
 import { api } from "@/trpc/react";
+import { useRouter } from "next/navigation";
 import { type ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
 
 interface TemplateFieldFormProps {
   children: ReactNode;
   templatePublicId: string;
+  companyPublicId: string;
 }
 
 export const TemplateFieldForm = ({
   children,
   templatePublicId,
+  companyPublicId,
 }: TemplateFieldFormProps) => {
+  const router = useRouter();
   const { toast } = useToast();
 
-  const { handleSubmit } = useFormContext<TTemplateFieldForm>();
+  const { handleSubmit, getValues } = useFormContext<TTemplateFieldForm>();
+  const status = getValues("status");
 
   const { mutateAsync } = api.templateField.add.useMutation({
     onSuccess: () => {
@@ -26,6 +31,10 @@ export const TemplateFieldForm = ({
         title: "🎉 Successfully created",
         description: "Your template fields has been created.",
       });
+
+      if (status === "COMPLETE") {
+        router.push(`/${companyPublicId}/documents`);
+      }
     },
   });
 

diff --git a/src/components/ui/pdf-viewer.tsx b/src/components/ui/pdf-viewer.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Card } from "@/components/ui/card";
 import { useResizeObserver } from "@wojtekmaj/react-hooks";
 import { useCallback, useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
@@ -35,7 +34,7 @@ export const PdfViewer = ({
     const [entry] = entries;
 
     if (entry) {
-      setContainerWidth(entry.contentRect.width - 38);
+      setContainerWidth(entry.contentRect.width);
     }
   }, []);
 
@@ -60,14 +59,13 @@ export const PdfViewer = ({
         className="w-full overflow-hidden rounded"
       >
         {Array.from(new Array(numPages), (el, index) => (
-          <Card className="my-5 p-3" key={`page_${index + 1}`}>
-            <Page
-              pageNumber={index + 1}
-              renderAnnotationLayer={false}
-              renderTextLayer={false}
-              width={containerWidth}
-            />
-          </Card>
+          <Page
+            key={`page_${index + 1}`}
+            pageNumber={index + 1}
+            renderAnnotationLayer={false}
+            renderTextLayer={false}
+            width={containerWidth}
+          />
         ))}
       </Document>
     </div>

diff --git a/src/components/ui/signature-pad.tsx b/src/components/ui/signature-pad.tsx
@@ -40,7 +40,7 @@ function DrawingLine({ line }: { line: [Point] }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       stroke="black"
-      strokeWidth="1px"
+      strokeWidth="3px"
       d={pathData}
     />
   );