move ccp connection to cc link

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

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import {
   PaymentElement,
   useElements,
   useStripe,
 } from "@stripe/react-stripe-js";
 import styled from "styled-components";
+import api from "shared/api";
 
 import Button from "components/porter/Button";
 import Error from "components/porter/Error";
@@ -15,7 +16,10 @@ import {
   useSetDefaultPaymentMethod,
 } from "lib/hooks/useStripe";
 
+import { Context } from "shared/Context";
+
 const PaymentSetupForm = ({ onCreate }: { onCreate: () => Promise<void> }) => {
+  const { currentProject } = useContext(Context);
   const stripe = useStripe();
   const elements = useElements();
 
@@ -57,6 +61,26 @@ const PaymentSetupForm = ({ onCreate }: { onCreate: () => Promise<void> }) => {
     // Confirm the setup and set as default
     if (setupIntent?.payment_method !== null) {
       await setDefaultPaymentMethod(setupIntent?.payment_method as string);
+
+      // create cluster on first payment setup for sandbox
+      if (currentProject?.sandbox_enabled) {
+        await api.connectProjectToCluster(
+          "<token>",
+          {},
+          { id: currentProject.id }
+        )
+        .then(() => {
+          api.inviteAdmin(
+            "<token>",
+            {},
+            { project_id: currentProject.id }
+          )
+        })
+        .catch((err: any) => {
+          setErrorMessage(err.message);
+          setLoading(false);
+        })
+      }
     }
 
     onCreate();

dashboard/src/main/home/new-project/NewProject.tsx

@@ -97,36 +97,12 @@ export const NewProjectFC = () => {
           }
         )
         .then((res) => res.data as ProjectListType[]);
+
       setProjects(projectList);
       setCurrentProject(project);
       trackCreateNewProject();
-
-      if (project?.sandbox_enabled) {
-        await api.connectProjectToCluster(
-          "<token>",
-          {},
-          { id: project.id }
-        )
-        .then(() => {
-          api.inviteAdmin(
-            "<token>",
-            {},
-            { project_id: project.id }
-          )
-          .then(() => {
-            setButtonStatus("successful");
-            pushFiltered("/apps", []);
-          })
-        })
-        .catch((err) => {
-          setButtonStatus("Couldn't create project, try again.");
-          console.log(err)
-        })
-
-      } else {
-        setButtonStatus("successful");
-        pushFiltered("/onboarding", []);
-      }
+      setButtonStatus("successful");
+      pushFiltered("/onboarding", []);
     } catch (error) {
       setButtonStatus("Couldn't create project, try again.");
       console.log(error);