Fix repeat logic for creating billing customer

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/Home.tsx

@@ -17,6 +17,7 @@ import Modal from "components/porter/Modal";
 import ShowIntercomButton from "components/porter/ShowIntercomButton";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
+import { checkBillingCustomerExists } from "lib/hooks/useStripe";
 
 import api from "shared/api";
 import { withAuth, type WithAuthProps } from "shared/auth/AuthorizationHoc";
@@ -293,6 +294,8 @@ const Home: React.FC<Props> = (props) => {
     prevCurrentCluster.current = props.currentCluster;
   }, [props.currentCluster]);
 
+  checkBillingCustomerExists();
+
   const projectOverlayCall = async () => {
     try {
       const projectList = await api

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,