From 0f26e7615b60323299f137df87d629d030615db4 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Thu, 30 Jan 2025 22:20:13 +0000
Subject: [PATCH] fix: create stripe customer when inviting new team member

---
 .../members/components/InviteMemberForm.tsx   | 10 +++++----
 apps/web/src/views/members/index.tsx          | 21 +------------------
 packages/api/src/routers/member.ts            | 20 +++++++++++++++++-
 turbo.json                                    |  3 ++-
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/views/members/components/InviteMemberForm.tsx b/apps/web/src/views/members/components/InviteMemberForm.tsx
index 09a48629..bbe29f7b 100644
--- a/apps/web/src/views/members/components/InviteMemberForm.tsx
+++ b/apps/web/src/views/members/components/InviteMemberForm.tsx
@@ -1,8 +1,9 @@
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
 
-import { type InviteMemberInput } from "@kan/api/types";
+import type { InviteMemberInput } from "@kan/api/types";
 
+import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
@@ -15,7 +16,7 @@ export function InviteMemberForm() {
   const { register, handleSubmit } = useForm<InviteMemberInput>({
     defaultValues: {
       email: "",
-      workspacePublicId: workspace?.publicId || "",
+      workspacePublicId: workspace.publicId || "",
     },
   });
 
@@ -58,12 +59,13 @@ export function InviteMemberForm() {
 
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <div>
-          <button
+          <Button
             type="submit"
+            isLoading={createBoard.isPending}
             className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
           >
             Invite member
-          </button>
+          </Button>
         </div>
       </div>
     </form>
diff --git a/apps/web/src/views/members/index.tsx b/apps/web/src/views/members/index.tsx
index 476c5a7b..a543a81e 100644
--- a/apps/web/src/views/members/index.tsx
+++ b/apps/web/src/views/members/index.tsx
@@ -23,25 +23,6 @@ export default function MembersPage() {
     // { enabled: workspace?.publicId ? true : false },
   );
 
-  const handleUpgrade = async () => {
-    try {
-      const response = await fetch("/api/stripe/create_checkout_session", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const { url } = (await response.json()) as { url: string };
-
-      if (url) {
-        window.location.href = url;
-      }
-    } catch (error) {
-      console.error("Error creating checkout session:", error);
-    }
-  };
-
   const TableRow = ({
     memberPublicId,
     memberName,
@@ -168,7 +149,7 @@ export default function MembersPage() {
             <button
               type="button"
               className="flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
-              onClick={() => handleUpgrade()}
+              onClick={() => openModal("INVITE_MEMBER")}
             >
               <div className="h-5 w-5 items-center">
                 <HiOutlinePlusSmall
diff --git a/packages/api/src/routers/member.ts b/packages/api/src/routers/member.ts
index e848e090..0ff00225 100644
--- a/packages/api/src/routers/member.ts
+++ b/packages/api/src/routers/member.ts
@@ -1,4 +1,5 @@
 import { TRPCError } from "@trpc/server";
+import { Stripe } from "stripe";
 import { z } from "zod";
 
 import * as memberRepo from "@kan/db/repository/member.repo";
@@ -8,6 +9,16 @@ import { sendEmail } from "@kan/email";
 
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
+const stripeSecretKey = process.env.STRIPE_SECRET_KEY;
+
+if (!stripeSecretKey) {
+  throw new Error("STRIPE_SECRET_KEY is not defined");
+}
+
+const stripe = new Stripe(stripeSecretKey, {
+  apiVersion: "2024-12-18.acacia",
+});
+
 export const memberRouter = createTRPCRouter({
   invite: protectedProcedure
     .meta({
@@ -93,10 +104,17 @@ export const memberRouter = createTRPCRouter({
         const invitedUserEmail = invite.data.user?.email;
 
         if (invitedUserAuthId && invitedUserEmail) {
+          const stripeCustomer = await stripe.customers.create({
+            email: invitedUserEmail,
+            metadata: {
+              userId: invitedUserAuthId,
+            },
+          });
+
           const newUser = await userRepo.create(ctx.adminDb, {
             email: invitedUserEmail,
             id: invitedUserAuthId,
-            stripeCustomerId: "",
+            stripeCustomerId: stripeCustomer.id,
           });
 
           invitedUserId = newUser?.id;
diff --git a/turbo.json b/turbo.json
index 606170e6..9fe1c6f4 100644
--- a/turbo.json
+++ b/turbo.json
@@ -55,6 +55,7 @@
     "NEXT_PUBLIC_SUPABASE_ANON_KEY",
     "NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME",
     "SUPABASE_SERVICE_API_KEY",
+    "STRIPE_SECRET_KEY",
     "PORT"
   ],
   "globalPassThroughEnv": [
@@ -65,4 +66,4 @@
     "VERCEL_URL",
     "npm_lifecycle_event"
   ]
-}
\ No newline at end of file
+}