refactor: stock options form modal to use StepperModal component

package.json

@@ -32,7 +32,7 @@
     "@aws-sdk/client-s3": "^3.577.0",
     "@aws-sdk/s3-request-presigner": "^3.577.0",
     "@blocknote/react": "^0.12.2",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.4.2",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.13.0",
     "@prisma/generator-helper": "^5.9.1",
@@ -91,7 +91,7 @@
     "react": "18.3.1",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.51.3",
+    "react-hook-form": "^7.51.5",
     "react-number-format": "^5.3.4",
     "react-pdf": "^8.0.2",
     "server-only": "^0.0.1",
@@ -103,7 +103,7 @@
     "ts-pattern": "^5.1.1",
     "ua-parser-js": "^1.0.37",
     "usehooks-ts": "^3.1.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",

src/app/(authenticated)/(dashboard)/[publicId]/securities/options/page.tsx

@@ -1,12 +1,12 @@
 import EmptyState from "@/components/common/empty-state";
 import Tldr from "@/components/common/tldr";
-import OptionModal from "@/components/securities/options/option-modal";
+import { OptionModal } from "@/components/securities/options/option-modal";
 import OptionTable from "@/components/securities/options/option-table";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { api } from "@/trpc/server";
 import { RiAddFill, RiGroup2Fill } from "@remixicon/react";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Options",

src/app/layout.tsx

@@ -43,9 +43,7 @@ export default async function RootLayout({
             <TRPCReactProvider cookies={cookies().toString()}>
               <main>{children}</main>
               <Toaster richColors />
-              {nodeEnv === "development" && (
-                <ScreenSize />
-              )}
+              {nodeEnv === "development" && <ScreenSize />}
             </TRPCReactProvider>
           </NextAuthProvider>
         </ProgressBarProvider>

src/components/securities/options/option-modal.tsx

@@ -1,102 +1,51 @@
-"use client";
-
-import MultiStepModal from "@/components/common/multistep-modal";
-import { api } from "@/trpc/react";
-import {
-  type TypeZodAddOptionMutationSchema,
-  ZodAddOptionMutationSchema,
-} from "@/trpc/routers/securities-router/schema";
-import { useRouter } from "next/navigation";
-import type React from "react";
-import { useState } from "react";
-import { toast } from "sonner";
 import {
-  Documents,
-  GeneralDetails,
-  GeneralDetailsField,
-  RelevantDates,
-  RelevantDatesFields,
-  VestingDetails,
-  VestingDetailsFields,
-} from "./steps";
-
-type OptionModalProps = {
-  title: string;
-  subtitle: string | React.ReactNode;
-  trigger: string | React.ReactNode;
-};
-
-const OptionModal = ({ title, subtitle, trigger }: OptionModalProps) => {
-  const [open, setOpen] = useState(false);
-  const router = useRouter();
-
-  const addOptionMutation = api.securities.addOptions.useMutation({
-    onSuccess: ({ success }) => {
-      if (success) {
-        toast.success("A new stakeholder option has been created.");
-        setOpen(false);
-        router.refresh();
-      } else {
-        toast.error("Failed adding an option. Please try again.");
-      }
-    },
-  });
-
-  const steps = [
-    {
-      id: 1,
-      title: "General details",
-      component: GeneralDetails,
-      fields: GeneralDetailsField,
-    },
-    {
-      id: 2,
-      title: "Vesting details",
-      component: VestingDetails,
-      fields: VestingDetailsFields,
-    },
-    {
-      id: 3,
-      title: "Relevant dates",
-      component: RelevantDates,
-      fields: RelevantDatesFields,
-    },
-    {
-      id: 4,
-      title: "Documents",
-      component: Documents,
-      fields: ["documents"],
-    },
-  ];
-
-  const onSubmit = async (data: TypeZodAddOptionMutationSchema) => {
-    if (data?.documents.length === 0) {
-      toast.error(
-        "Uh ohh! Documents not found, please upload necessary documents",
-      );
-      return;
-    }
+  StepperModal,
+  StepperModalContent,
+  type StepperModalProps,
+  StepperStep,
+} from "@/components/ui/stepper";
+import { StockOptionFormProvider } from "@/providers/stock-option-form-provider";
+import { api } from "@/trpc/server";
+import { Documents } from "./steps/documents";
+import { GeneralDetails } from "./steps/general-details";
+import { RelevantDates } from "./steps/relevant-dates";
+import { VestingDetails } from "./steps/vesting-details";
+
+async function VestingDetailsStep() {
+  const [stakeholders, equityPlans] = await Promise.all([
+    api.stakeholder.getStakeholders.query(),
+    api.equityPlan.getPlans.query(),
+  ]);
+  return (
+    <VestingDetails stakeholders={stakeholders} equityPlans={equityPlans} />
+  );
+}
 
-    await addOptionMutation.mutateAsync(data);
-  };
+export const OptionModal = (props: Omit<StepperModalProps, "children">) => {
   return (
-    <div>
-      <MultiStepModal
-        steps={steps}
-        title={title}
-        subtitle={subtitle}
-        trigger={trigger}
-        dialogProps={{
-          open,
-          onOpenChange: (val) => {
-            setOpen(val);
-          },
-        }}
-        schema={ZodAddOptionMutationSchema}
-        onSubmit={onSubmit}
-      />
-    </div>
+    <StepperModal {...props}>
+      <StockOptionFormProvider>
+        <StepperStep title="General details">
+          <StepperModalContent>
+            <GeneralDetails />
+          </StepperModalContent>
+        </StepperStep>
+        <StepperStep title="Vesting details">
+          <StepperModalContent>
+            <VestingDetailsStep />
+          </StepperModalContent>
+        </StepperStep>
+        <StepperStep title="Relevant dates">
+          <StepperModalContent>
+            <RelevantDates />
+          </StepperModalContent>
+        </StepperStep>
+        <StepperStep title="Documents">
+          <StepperModalContent>
+            <Documents />
+          </StepperModalContent>
+        </StepperStep>
+      </StockOptionFormProvider>
+    </StepperModal>
   );
 };
-
-export default OptionModal;