Fix logic for creating customers (#4447)

api/server/handlers/project/create.go

@@ -50,6 +50,14 @@ func (p *ProjectCreateHandler) ServeHTTP(w http.ResponseWriter, r *http.Request)
 	}
 
 	var err error
+
+	// Create billing customer for project and set the billing ID
+	billingID, err := p.Config().BillingManager.CreateCustomer(user.Email, proj)
+	if err != nil {
+		p.HandleAPIError(w, r, apierrors.NewErrInternal(err))
+	}
+	proj.BillingID = billingID
+
 	proj, _, err = CreateProjectWithUser(p.Repo().Project(), proj, user)
 	if err != nil {
 		p.HandleAPIError(w, r, apierrors.NewErrInternal(err))

dashboard/src/lib/hooks/useStripe.tsx

@@ -31,7 +31,7 @@ type TCheckHasPaymentEnabled = {
   refetchPaymentEnabled: any;
 };
 
-type TGetPublishableKey = {
+type TCheckCustomerExists = {
   publishableKey: string;
 };
 
@@ -148,42 +148,30 @@ export const checkIfProjectHasPayment = (): TCheckHasPaymentEnabled => {
   };
 };
 
-export const usePublishableKey = (): TGetPublishableKey => {
+export const checkBillingCustomerExists = (): TCheckCustomerExists => {
   const { user, currentProject } = useContext(Context);
 
   // Fetch list of payment methods
-  const keyReq = useQuery(["getKey", currentProject?.id], async () => {
-    if (!currentProject?.id || currentProject.id === -1) {
-      return;
+  const keyReq = useQuery(
+    ["checkCustomerExists", currentProject?.id],
+    async () => {
+      if (!currentProject?.id || currentProject.id === -1) {
+        return;
+      }
+      const res = await api.checkBillingCustomerExists(
+        "<token>",
+        { user_email: user?.email },
+        { project_id: currentProject?.id }
+      );
+      return res.data;
     }
-    const res = await api.checkBillingCustomerExists(
-      "<token>",
-      { user_email: user?.email },
-      { project_id: currentProject?.id }
-    );
-    return res.data;
-  });
+  );
 
   return {
     publishableKey: keyReq.data,
   };
 };
 
-export const checkBillingCustomerExists = async (): Promise<void> => {
-  const { user, currentProject } = useContext(Context);
-  const res = await api.checkBillingCustomerExists(
-    "<token>",
-    { user_email: user?.email },
-    {
-      project_id: currentProject?.id,
-    }
-  );
-
-  if (res.status !== 200) {
-    throw Error("failed to check if billing customer exists");
-  }
-};
-
 export const useSetDefaultPaymentMethod = (): TSetDefaultPaymentMethod => {
   const { currentProject } = useContext(Context);
 

dashboard/src/main/home/modals/BillingModal.tsx

@@ -6,10 +6,7 @@ import Link from "components/porter/Link";
 import Modal from "components/porter/Modal";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
-import {
-  checkBillingCustomerExists,
-  usePublishableKey,
-} from "lib/hooks/useStripe";
+import { checkBillingCustomerExists } from "lib/hooks/useStripe";
 
 import PaymentSetupForm from "./PaymentSetupForm";
 
@@ -20,9 +17,8 @@ const BillingModal = ({
   back: (value: React.SetStateAction<boolean>) => void;
   onCreate: () => Promise<void>;
 }) => {
-  const { publishableKey } = usePublishableKey();
+  const { publishableKey } = checkBillingCustomerExists();
   const stripePromise = loadStripe(publishableKey);
-  checkBillingCustomerExists();
 
   const appearance = {
     variables: {

dashboard/src/main/home/project-settings/BillingPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 
 import Loading from "components/Loading";
@@ -24,7 +24,6 @@ import BillingModal from "../modals/BillingModal";
 function BillingPage(): JSX.Element {
   const { setCurrentOverlay } = useContext(Context);
   const [shouldCreate, setShouldCreate] = useState(false);
-  checkBillingCustomerExists();
 
   const {
     paymentMethodList,
@@ -33,6 +32,7 @@ function BillingPage(): JSX.Element {
     isDeleting,
   } = usePaymentMethods();
   const { setDefaultPaymentMethod } = useSetDefaultPaymentMethod();
+  checkBillingCustomerExists();
 
   const { refetchPaymentEnabled } = checkIfProjectHasPayment();