WIP - render added members on navigation

apps/web/pages/settings/teams/new/[[...step]].tsx

@@ -4,6 +4,7 @@ import { loadStripe } from "@stripe/stripe-js";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useState } from "react";
+import { useEffect } from "react";
 import { Toaster } from "react-hot-toast";
 import { z } from "zod";
 
@@ -61,7 +62,7 @@ const CreateNewTeamPage = () => {
     name: "",
     slug: "",
     logo: "",
-    members: defaultMember,
+    members: [],
     billingFrequency: "monthly",
   });
   const [clientSecret, setClientSecret] = useState("");
@@ -75,6 +76,12 @@ const CreateNewTeamPage = () => {
   const result = stepRouteSchema.safeParse(router.query);
   const currentStep = result.success ? result.data.step[0] : INITIAL_STEP;
 
+  useEffect(() => {
+    console.log(
+      "🚀 ~ file: [[...step]].tsx ~ line 69 ~ CreateNewTeamPage ~ newTeamData",
+      newTeamData.members
+    );
+  }, [newTeamData.members]);
   const headers = [
     {
       title: `${t("create_new_team")}`,
@@ -107,9 +114,12 @@ const CreateNewTeamPage = () => {
   const currentStepIndex = steps.indexOf(currentStep);
 
   const createPaymentIntentMutation = trpc.useMutation(["viewer.teams.createPaymentIntent"], {
-    onSuccess: (data: { clientSecret: string }) => {
-      setClientSecret(data.clientSecret);
-      setNewTeamData({ ...newTeamData, customerId: data.customerId, subscriptionId: data.subscriptionId });
+    onSuccess: (data) => {
+      if (data) {
+        setClientSecret(data.clientSecret);
+        setNewTeamData({ ...newTeamData, customerId: data.customerId, subscriptionId: data.subscriptionId });
+      }
+
       goToIndex(2);
     },
   });

packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx

@@ -40,7 +40,11 @@ const AddNewTeamMembers = ({
   const [numberOfMembers, setNumberOfMembers] = useState(1);
   const [billingFrequency, setBillingFrequency] = useState("monthly");
 
-  const formMethods = useForm();
+  const formMethods = useForm({
+    defaultValues: {
+      members: newTeamData.members,
+    },
+  });
   const membersFieldArray = useFieldArray({
     control: formMethods.control,
     name: "members",
@@ -62,13 +66,20 @@ const AddNewTeamMembers = ({
 
   // Set current user as team owner
   useEffect(() => {
+    console.log(
+      "🚀 ~ file: AddNewTeamMembers.tsx ~ line 71 ~ useEffect ~ formMethods.getValues()",
+      formMethods.getValues("members")
+    );
+    console.log("🚀 ~ file: AddNewTeamMembers.tsx ~ line 76 ~ useEffect ~ session", session);
+
     if (!session.data) router.push(`${CAL_URL}/settings/profile`);
     if (session.status !== "loading" && !formMethods.getValues("members").length) {
       membersFieldArray.append({
         name: session?.data?.user.name || "",
         email: session?.data?.user.email || "",
         username: session?.data?.user.username || "",
-        id: session?.data?.user.id || "",
+        id: session?.data?.user.id,
+        avatar: session?.data?.user.avatar || "",
         role: "OWNER",
       });
     }

packages/features/ee/teams/lib/payments.ts

@@ -51,6 +51,15 @@ export const createTeamSubscription = async (customerId: string, billingFrequenc
   });
 };
 
+export const retrieveTeamSubscription = async (subscriptionId: string) => {
+  const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+  return subscription as Stripe.Subscription;
+};
+
+export const deleteTeamSubscriptionQuantity = async (subscriptionId: string, seats: number) => {
+  return await stripe.subscriptions.del(subscriptionId);
+};
+
 export const purchaseTeamSubscription = async (input: { teamId: number; seats: number; email: string }) => {
   const { teamId, seats, email } = input;
   return await stripe.checkout.sessions.create({

packages/features/ee/teams/lib/types.ts

@@ -1,7 +1,7 @@
 import { MembershipRole } from "@prisma/client";
 
 export interface NewTeamMembersFieldArray {
-  members: PendingMember[];
+  members: PendingMember[] | [];
 }
 
 export interface NewTeamFormValues {
@@ -19,7 +19,7 @@ export interface PendingMember {
   avatar: string | null;
   sendInviteEmail?: boolean;
   customerId?: string;
-  subscriptionId: string;
+  subscriptionId?: string;
 }
 
 export type NewTeamData = NewTeamFormValues &

packages/trpc/server/routers/viewer/teams.tsx

@@ -19,6 +19,8 @@ import {
   getTeamPricing,
   retrieveTeamCustomer,
   updateTeamCustomerName,
+  retrieveTeamSubscription,
+  deleteTeamSubscriptionQuantity,
 } from "@calcom/features/ee/teams/lib/payments";
 import { HOSTED_CAL_FEATURES, IS_STRIPE_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getTranslation } from "@calcom/lib/server/i18n";
@@ -700,33 +702,53 @@ export const viewerTeamsRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const { teamName, billingFrequency, seats, customerId, subscriptionId } = input;
+
       // Check to see if team name has changed
       if (customerId) {
         const customer = await retrieveTeamCustomer(customerId);
-        if (teamName !== customer.name) {
+        if (teamName !== customer?.name) {
           await updateTeamCustomerName(customerId, teamName);
         }
-        // If different then update the customer on Stripe
-
-        // Retrieve the Stripe subscription
-        // Compare the quantity of the subscription vs input.seats
-        // If different then update the subscription
-
-        // If no changes then do not create a new customer & subscription, just return
       }
 
-      // First create the customer
-      const customer = await createTeamCustomer(input.teamName, ctx.user.email);
+      if (subscriptionId) {
+        const subscription = await retrieveTeamSubscription(subscriptionId);
+        if (seats !== subscription.quantity) {
+          /* If the number of seats changed we need to cancel the current 
+          incomplete subscription and create a new one */
+          await deleteTeamSubscriptionQuantity(subscriptionId, seats);
 
-      // Create the subscription for the team
-      const subscription = await createTeamSubscription(customer.id, input.billingFrequency, input.seats);
+          const subscription = await createTeamSubscription(customerId, input.billingFrequency, input.seats);
 
-      // We just need the client secret for the payment intent
-      return {
-        clientSecret: subscription?.latest_invoice?.payment_intent?.client_secret,
-        customerId: customer.id,
-        subscriptionId: subscription.id,
-      };
+          return {
+            clientSecret: subscription?.latest_invoice?.payment_intent?.client_secret,
+            customerId: customer.id,
+            subscriptionId: subscription.id,
+          };
+        }
+      }
+      // Retrieve the Stripe subscription
+      // Compare the quantity of the subscription vs input.seats
+      // If different then update the subscription
+
+      // If no changes then do not create a new customer & subscription, just return
+
+      if (!customerId && !subscriptionId) {
+        // First create the customer
+        const customer = await createTeamCustomer(input.teamName, ctx.user.email);
+
+        // Create the subscription for the team
+        const subscription = await createTeamSubscription(customer.id, input.billingFrequency, input.seats);
+
+        // We just need the client secret for the payment intent
+        return {
+          clientSecret: subscription?.latest_invoice?.payment_intent?.client_secret,
+          customerId: customer.id,
+          subscriptionId: subscription.id,
+        };
+      }
+
+      return;
     },
   })
   .mutation("createTeam", {