feat: add signining document feature

package.json

@@ -67,6 +67,7 @@
     "next-auth": "^4.24.5",
     "next-nprogress-bar": "^2.1.2",
     "nodemailer": "^6.9.8",
+    "pdf-lib": "^1.17.1",
     "prisma-json-types-generator": "^3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

prisma/migrations/20240226162609_add_new_viewport_field/migration.sql

@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - Added the required column `viewportHeight` to the `TemplateField` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `viewportWidth` to the `TemplateField` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "TemplateField" ADD COLUMN     "viewportHeight" INTEGER NOT NULL,
+ADD COLUMN     "viewportWidth" INTEGER NOT NULL;

prisma/migrations/20240228095749_add_page_field/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `page` to the `TemplateField` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "TemplateField" ADD COLUMN     "page" INTEGER NOT NULL;

prisma/schema.prisma

@@ -284,17 +284,20 @@ enum FieldTypes {
 }
 
 model TemplateField {
-  id          String     @id @default(cuid())
-  name        String
-  type        FieldTypes @default(TEXT)
-  placeholder String     @default("")
-  required    Boolean    @default(false)
-  top         Int
-  left        Int
-  width       Int
-  height      Int
-  template    Template   @relation(fields: [templateId], references: [id])
-  templateId  String
+  id             String     @id @default(cuid())
+  name           String
+  type           FieldTypes @default(TEXT)
+  placeholder    String     @default("")
+  required       Boolean    @default(false)
+  top            Int
+  left           Int
+  width          Int
+  height         Int
+  template       Template   @relation(fields: [templateId], references: [id])
+  templateId     String
+  viewportHeight Int
+  viewportWidth  Int
+  page           Int
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt

src/app/(authenticated)/(dashboard)/[publicId]/templates/[templatePublicId]/page.tsx

@@ -1,7 +1,8 @@
 import { api } from "@/trpc/server";
-import { FieldContextProvider } from "@/contexts/field-canvas-context";
 import { CanvasToolbar } from "@/components/template/canavs-toolbar";
 import { PdfCanvas } from "@/components/template/pdf-canvas";
+import { TemplateFieldProvider } from "@/providers/template-field-provider";
+import { TemplateFieldForm } from "@/components/template/template-field-form";
 
 const TemplateDetailPage = async ({
   params: { templatePublicId },
@@ -13,12 +14,14 @@ const TemplateDetailPage = async ({
   });
 
   return (
-    <FieldContextProvider fields={fields}>
-      <div className="grid grid-cols-12">
-        <CanvasToolbar templatePublicId={templatePublicId} />
-        <PdfCanvas url={url} />
-      </div>
-    </FieldContextProvider>
+    <TemplateFieldProvider fields={fields}>
+      <TemplateFieldForm templatePublicId={templatePublicId}>
+        <div className="grid grid-cols-12">
+          <CanvasToolbar />
+          <PdfCanvas url={url} />
+        </div>
+      </TemplateFieldForm>
+    </TemplateFieldProvider>
   );
 };
 

src/app/(documentSigning)/sign/[token]/page.tsx

@@ -0,0 +1,40 @@
+import { PdfCanvas } from "@/components/template/pdf-canvas";
+import { SigningFields } from "@/components/template/signing-fields";
+import { TemplateFieldProvider } from "@/providers/template-field-provider";
+import { getServerAuthSession } from "@/server/auth";
+import { api } from "@/trpc/server";
+
+interface SigningPageProps {
+  params: {
+    token: string;
+  };
+}
+
+export default async function SigningPage(props: SigningPageProps) {
+  const { fields, url } = await api.template.get.query({
+    publicId: props.params.token,
+  });
+
+  const session = await getServerAuthSession();
+  const companyPublicId = session?.user.companyPublicId;
+  return (
+    <div className="flex min-h-screen bg-gray-50">
+      <div className="flex h-full flex-grow flex-col">
+        <div className="mx-auto min-h-full w-full px-5 py-10 lg:px-8 2xl:max-w-screen-xl">
+          <TemplateFieldProvider fields={fields}>
+            <div className="grid grid-cols-12">
+              <PdfCanvas mode="readonly" url={url} />
+            </div>
+          </TemplateFieldProvider>
+        </div>
+      </div>
+      <div className="sticky top-0 flex min-h-full w-80 flex-col lg:border-l">
+        <SigningFields
+          token={props.params.token}
+          fields={fields}
+          companyPublicId={companyPublicId}
+        />
+      </div>
+    </div>
+  );
+}

src/common/uploads.ts

@@ -1,4 +1,5 @@
 import {
+  getPresignedGetUrl,
   getPresignedPutUrl,
   type getPresignedUrlOptions,
 } from "@/server/file-uploads";
@@ -56,3 +57,23 @@ export const uploadFile = async (
 };
 
 export type TUploadFile = Awaited<ReturnType<typeof uploadFile>>;
+
+export const getFileFromS3 = async (key: string) => {
+  const { url } = await getPresignedGetUrl(key);
+
+  const response = await fetch(url, {
+    method: "GET",
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to get file "${key}", failed with status code ${response.status}`,
+    );
+  }
+
+  const buffer = await response.arrayBuffer();
+
+  const binaryData = new Uint8Array(buffer);
+
+  return binaryData;
+};

src/components/template/canavs-toolbar/index.tsx

@@ -3,64 +3,59 @@
 import { Button } from "@/components/ui/button";
 import * as Toolbar from "@radix-ui/react-toolbar";
 import { type FieldTypes } from "@/prisma-enums";
-import { useFieldCanvasContext } from "@/contexts/field-canvas-context";
 import { FieldTypeData } from "../field-type-data";
-import { api } from "@/trpc/react";
-import { useToast } from "@/components/ui/use-toast";
 
-interface CanvasToolbarProps {
-  templatePublicId: string;
-}
+import { useFormContext, useFormState } from "react-hook-form";
+import { FormField } from "@/components/ui/form";
+import { type TemplateFieldForm } from "@/providers/template-field-provider";
 
-export function CanvasToolbar({ templatePublicId }: CanvasToolbarProps) {
-  const { toast } = useToast();
-  const { handleFieldType, fieldType, fields } = useFieldCanvasContext();
-  const { mutateAsync } = api.templateField.add.useMutation({
-    onSuccess: () => {
-      toast({
-        variant: "default",
-        title: "🎉 Successfully created",
-        description: "Your template fields has been created.",
-      });
-    },
+export function CanvasToolbar() {
+  const { control } = useFormContext<TemplateFieldForm>();
+  const { isDirty } = useFormState({
+    control,
+    name: "fields",
   });
 
-  const handleSave = async () => {
-    await mutateAsync({ templatePublicId, data: fields });
-  };
+  const isDisabled = !isDirty;
 
   return (
     <div className="relative z-30 col-span-12 mb-20">
       <Toolbar.Root
         className="fixed flex w-full max-w-[74.4%] items-center justify-between rounded-md bg-white p-2 shadow-sm"
         aria-label="Formatting options"
       >
-        <Toolbar.ToggleGroup
-          onValueChange={(value) => {
-            handleFieldType(value as FieldTypes);
-          }}
-          value={fieldType}
-          className="flex gap-x-2"
-          type="single"
-        >
-          {FieldTypeData.map((item) => (
-            <Toolbar.ToggleItem key={item.value} value={item.value} asChild>
-              <Button
-                aria-label={item.label}
-                className="flex h-auto flex-col gap-y-1 data-[state=on]:bg-accent"
-                variant="ghost"
-              >
-                <span>
-                  <item.icon className="h-4 w-4" aria-hidden />
-                </span>
-                <span className="text-xs">{item.label}</span>
-              </Button>
-            </Toolbar.ToggleItem>
-          ))}
-        </Toolbar.ToggleGroup>
+        <FormField
+          name="fieldType"
+          control={control}
+          render={({ field }) => (
+            <Toolbar.ToggleGroup
+              onValueChange={(value) => {
+                field.onChange(value as FieldTypes);
+              }}
+              value={field.value}
+              className="flex gap-x-2"
+              type="single"
+            >
+              {FieldTypeData.map((item) => (
+                <Toolbar.ToggleItem key={item.value} value={item.value} asChild>
+                  <Button
+                    aria-label={item.label}
+                    className="flex h-auto flex-col gap-y-1 data-[state=on]:bg-accent"
+                    variant="ghost"
+                  >
+                    <span>
+                      <item.icon className="h-4 w-4" aria-hidden />
+                    </span>
+                    <span className="text-xs">{item.label}</span>
+                  </Button>
+                </Toolbar.ToggleItem>
+              ))}
+            </Toolbar.ToggleGroup>
+          )}
+        />
 
         <Toolbar.Button asChild>
-          <Button disabled={!fields.length} onClick={handleSave}>
+          <Button disabled={isDisabled} type="submit">
             Save
           </Button>
         </Toolbar.Button>