refactor: pg-boss jobs and esign (#493)

package.json

@@ -57,7 +57,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@react-email/components": "0.0.22",
+    "@react-email/components": "0.0.25",
     "@react-pdf/renderer": "^3.4.4",
     "@remixicon/react": "^4.0.1",
     "@scalar/nextjs-api-reference": "^0.4.18",
@@ -96,7 +96,7 @@
     "nodemailer": "^6.9.14",
     "papaparse": "^5.4.1",
     "pdf-lib": "^1.17.1",
-    "pg-boss": "^9.0.3",
+    "pg-boss": "^10.1.1",
     "pino": "^9.3.1",
     "pino-pretty": "^11.2.2",
     "prisma-extension-pagination": "^0.7.4",
@@ -105,7 +105,7 @@
     "react": "18.3.1",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-email": "2.1.6",
+    "react-email": "3.0.1",
     "react-hook-form": "^7.52.1",
     "react-number-format": "^5.3.4",
     "react-pdf": "^8.0.2",

prisma/migrations/20240906132847_add_new_status/migration.sql

@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - The values [SENT,WAITING] on the enum `TemplateStatus` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "TemplateStatus_new" AS ENUM ('DRAFT', 'COMPLETE', 'PENDING', 'CANCELLED');
+ALTER TABLE "Template" ALTER COLUMN "status" DROP DEFAULT;
+ALTER TABLE "Template" ALTER COLUMN "status" TYPE "TemplateStatus_new" USING ("status"::text::"TemplateStatus_new");
+ALTER TYPE "TemplateStatus" RENAME TO "TemplateStatus_old";
+ALTER TYPE "TemplateStatus_new" RENAME TO "TemplateStatus";
+DROP TYPE "TemplateStatus_old";
+ALTER TABLE "Template" ALTER COLUMN "status" SET DEFAULT 'DRAFT';
+COMMIT;

prisma/schema.prisma

@@ -602,8 +602,7 @@ model TemplateField {
 enum TemplateStatus {
   DRAFT
   COMPLETE
-  SENT
-  WAITING
+  PENDING
   CANCELLED
 }
 

src/app/(authenticated)/(dashboard)/[publicId]/documents/esign/v/[templatePublicId]/page.tsx

@@ -3,6 +3,7 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { serverAccessControl } from "@/lib/rbac/access-control";
+import type { TemplateStatus } from "@/prisma/enums";
 import { TemplateSigningFieldProvider } from "@/providers/template-signing-field-provider";
 import { api } from "@/trpc/server";
 import { RiCheckFill } from "@remixicon/react";
@@ -14,6 +15,13 @@ type BadgeVariant =
   | "secondary"
   | "destructive";
 
+const variantMap: Record<TemplateStatus, BadgeVariant> = {
+  CANCELLED: "destructive",
+  COMPLETE: "success",
+  DRAFT: "info",
+  PENDING: "secondary",
+};
+
 export default async function TemplateDetailViewPage({
   params: { templatePublicId },
 }: {
@@ -36,29 +44,12 @@ export default async function TemplateDetailViewPage({
     ),
   ]);
 
-  const badgeVariant = (): BadgeVariant => {
-    let result: BadgeVariant = "warning";
-
-    if (status === "DRAFT") {
-      result = "warning";
-    } else if (status === "SENT") {
-      result = "info";
-    } else if (status === "COMPLETE") {
-      result = "success";
-    } else if (status === "WAITING") {
-      result = "secondary";
-    } else if (status === "CANCELLED") {
-      result = "destructive";
-    }
-    return result;
-  };
-
   return (
     <TemplateSigningFieldProvider fields={fields}>
       <div className="flex min-h-screen bg-gray-50">
         <div className="flex h-full flex-grow flex-col">
           <div className="col-span-12 flex align-middle">
-            <Badge variant={badgeVariant()} className="h-7 align-middle">
+            <Badge variant={variantMap[status]} className="h-7 align-middle">
               {status}
             </Badge>
             <span className="ml-2 align-middle text-xl font-semibold">

src/app/updates/[publicId]/page.tsx

@@ -7,7 +7,7 @@ import UpdateRenderer from "@/components/update/renderer";
 import { type JWTVerifyResult, decode } from "@/lib/jwt";
 import { UpdateStatusEnum } from "@/prisma/enums";
 import { db } from "@/server/db";
-import { renderAsync } from "@react-email/components";
+import { render } from "@react-email/components";
 import { RiLock2Line } from "@remixicon/react";
 import { notFound } from "next/navigation";
 import { Fragment } from "react";
@@ -100,7 +100,7 @@ const PublicUpdatePage = async ({
 
   const company = update?.company;
   const author = update?.author;
-  const html = await renderAsync(<UpdateRenderer html={update.html} />);
+  const html = await render(<UpdateRenderer html={update.html} />);
 
   return (
     <SharePageLayout

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

@@ -108,7 +108,7 @@ export function CanvasToolbar({ recipients }: CanvasToolbarProps) {
   // biome-ignore lint/correctness/useExhaustiveDependencies: reason
   const onSignatureRequest = useCallback((canSubmit: boolean) => {
     if (canSubmit && submitRef.current) {
-      setValue("status", "COMPLETE");
+      setValue("status", "PENDING");
       submitRef.current.click();
     }
   }, []);

src/components/template/template-field-form/index.tsx

@@ -31,7 +31,7 @@ export const TemplateFieldForm = ({
         toast.error(`${title}, ${message}`);
       }
 
-      if (status === "COMPLETE") {
+      if (status === "PENDING") {
         router.push(`/${companyPublicId}/documents/esign`);
       }
     },

src/constants/job.ts

@@ -8,5 +8,5 @@ export const JOB_TYPES = {
     "esign-confirmation",
     "esign-notification",
   ],
-  generate: ["esign-pdf"],
+  esign: ["generate-pdf", "complete-pdf"],
 } as const;

src/emails/EsignConfirmationEmail.tsx

@@ -10,9 +10,9 @@ import {
   Text,
 } from "@react-email/components";
 
-import type { ConfirmationEmailPayloadType } from "../jobs/esign-confirmation-email";
+import type { TSchema } from "../jobs/esign-confirmation-email";
 
-type Payload = Omit<ConfirmationEmailPayloadType, "fileUrl">;
+type Payload = Omit<TSchema, "fileUrl">;
 
 const ESignConfirmationEmail = ({
   documentName,

src/emails/EsignEmail.tsx

@@ -1,4 +1,4 @@
-import type { EsignEmailPayloadType } from "@/jobs/esign-email";
+import type { TESignNotificationEmailJobInput } from "@/jobs/esign-email";
 import {
   Body,
   Button,
@@ -21,7 +21,12 @@ import {
   UserAvatarIcon,
 } from "../components/common/icons";
 
-type TEsignEmailProps = EsignEmailPayloadType & { signingLink: string };
+type TEsignEmailProps = Omit<
+  TESignNotificationEmailJobInput,
+  "token" | "email" | "userAgent" | "requestIp" | "companyId"
+> & {
+  signingLink: string;
+};
 
 const EsignEmail = ({
   signingLink,

src/env.js

@@ -60,6 +60,9 @@ export const env = createEnv({
     // sentry
     SENTRY_ORG: z.string().optional(),
     SENTRY_PROJECT: z.string().optional(),
+
+    //job queue
+    QUEUE_DATABASE_URL: z.string().optional(),
   },
 
   /**
@@ -116,6 +119,9 @@ export const env = createEnv({
     NEXT_PUBLIC_SENTRY_DSN: readRuntimePublicEnvVariable(
       "NEXT_PUBLIC_SENTRY_DSN",
     ),
+
+    /// job queue
+    WORKER_DATABASE_URL: process.env.WORKER_DATABASE_URL,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

src/instrumentation.ts

@@ -2,8 +2,9 @@ import { isSentryEnabled } from "@/constants/sentry";
 
 export async function register() {
   if (process.env.NEXT_RUNTIME === "nodejs") {
-    const { startJobs } = await import("@/jobs/start");
-    await startJobs();
+    const { registerJobs } = await import("@/jobs/register");
+
+    await registerJobs();
 
     if (isSentryEnabled) {
       await import("../sentry.server.config");

src/jobs/auth-verification-email.ts

@@ -1,23 +1,25 @@
 import AccountVerificationEmail from "@/emails/AccountVerificationEmail";
 import { env } from "@/env";
-import { BaseJob } from "@/jobs/base";
 import { sendMail } from "@/server/mailer";
-import { renderAsync } from "@react-email/components";
-import type { Job } from "pg-boss";
+import { render } from "@react-email/components";
+import { z } from "zod";
+import { defineJob, defineWorker, defineWorkerConfig } from "../lib/queue";
 
-export type AuthVerificationPayloadType = {
-  email: string;
-  token: string;
-};
+const config = defineWorkerConfig({
+  name: "email.auth-verify",
+  schema: z.object({
+    email: z.string(),
+    token: z.string(),
+  }),
+});
 
-export const sendAuthVerificationEmail = async (
-  payload: AuthVerificationPayloadType,
-) => {
-  const { email, token } = payload;
+export const authVerificationEmailJob = defineJob(config);
+export const authVerificationEmailWorker = defineWorker(config, async (job) => {
+  const { email, token } = job.data;
   const baseUrl = env.NEXT_PUBLIC_BASE_URL;
   const confirmLink = `${baseUrl}/verify-email/${token}`;
 
-  const html = await renderAsync(
+  const html = await render(
     AccountVerificationEmail({
       verifyLink: confirmLink,
     }),
@@ -28,12 +30,4 @@ export const sendAuthVerificationEmail = async (
     subject: "Confirm your email",
     html,
   });
-};
-
-export class AuthVerificationEmailJob extends BaseJob<AuthVerificationPayloadType> {
-  readonly type = "email.auth-verify";
-
-  async work(job: Job<AuthVerificationPayloadType>): Promise<void> {
-    await sendAuthVerificationEmail(job.data);
-  }
-}
+});