Stripe Connect onboarding flow complete

kscalelabs · Nov 6, 2024 · 21909e9 · 21909e9
1 parent 1881425
commit 21909e9
Show file tree

Hide file tree

Showing 7 changed files with 296 additions and 69 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -28,14 +28,15 @@ import { AlertQueue, AlertQueueProvider } from "@/hooks/useAlertQueue";
 import { AuthenticationProvider } from "@/hooks/useAuth";
 
 import GDPRBanner from "./components/gdpr/gdprbanner";
-import DeleteConnect from "./components/pages/DeleteConnect";
+// import DeleteConnect from "./components/pages/DeleteConnect";
 import DownloadsPage from "./components/pages/Download";
 import PlaygroundPage from "./components/pages/MujocoPlayground";
 import OrderSuccess from "./components/pages/OrderSuccess";
 import OrdersPage from "./components/pages/Orders";
 import PrivacyPolicy from "./components/pages/PrivacyPolicy";
 import ResearchPage from "./components/pages/ResearchPage";
 import SellerOnboarding from "./components/pages/SellerOnboarding";
+import SellerOnboardingContinued from "./components/pages/SellerOnboardingContinued";
 import StompyMini from "./components/pages/StompyMini";
 import StompyPro from "./components/pages/StompyPro";
 import TerminalPage from "./components/pages/Terminal";
@@ -91,14 +92,18 @@ const App = () => {
                         path="/seller-onboarding"
                         element={<SellerOnboarding />}
                       />
+                      <Route
+                        path="/seller-onboarding-continued"
+                        element={<SellerOnboardingContinued />}
+                      />
                       <Route
                         path="/seller-dashboard"
                         element={<SellerDashboard />}
                       />
-                      <Route
+                      {/* <Route
                         path="/delete-connect"
                         element={<DeleteConnect />}
-                      />
+                      /> */}
 
                       <Route path="/success" element={<OrderSuccess />} />
                       <Route path="/orders" element={<OrdersPage />} />

diff --git a/frontend/src/components/pages/Profile.tsx b/frontend/src/components/pages/Profile.tsx
@@ -299,7 +299,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
           ) : (
             <div className="space-y-6">
               <div>
-                <h2 className="text-xl font-semibold mb-2">Bio</h2>
+                <h2 className="text-lg font-medium mb-2">Bio</h2>
                 {user.bio ? (
                   <p>{user.bio}</p>
                 ) : (
@@ -318,6 +318,20 @@ export const RenderProfile = (props: RenderProfileProps) => {
           <h2 className="text-2xl font-bold">Store</h2>
         </CardHeader>
         <CardContent>
+          <div className="mb-4">
+            {user.stripe_connect_account_id &&
+            !user.stripe_connect_onboarding_completed ? (
+              <p className="text-gray-11 text-sm">
+                Your Stripe account setup is not complete. Please resolve
+                outstanding requirements to begin selling robots. It may take
+                some time for Stripe to process your info between submissions.
+              </p>
+            ) : user.stripe_connect_onboarding_completed ? (
+              <p className="text-gray-11 text-sm">
+                Stripe account setup complete.
+              </p>
+            ) : null}
+          </div>
           <div className="flex gap-2">
             <Button onClick={() => navigate("/orders")} variant="primary">
               Orders
@@ -332,12 +346,14 @@ export const RenderProfile = (props: RenderProfileProps) => {
                 </Button>
               </Tooltip>
             ) : !user.stripe_connect_onboarding_completed ? (
-              <Button
-                onClick={() => navigate("/seller-onboarding")}
-                variant="outline"
-              >
-                Complete Seller Setup
-              </Button>
+              <Tooltip content="Continue seller onboarding" position="bottom">
+                <Button
+                  onClick={() => navigate("/seller-onboarding-continued")}
+                  variant="outline"
+                >
+                  Complete Seller Setup
+                </Button>
+              </Tooltip>
             ) : (
               <Button
                 onClick={() => navigate("/seller-dashboard")}

diff --git a/frontend/src/components/pages/SellerDashboard.tsx b/frontend/src/components/pages/SellerDashboard.tsx
@@ -7,6 +7,10 @@ export default function SellerDashboard() {
   const navigate = useNavigate();
   const auth = useAuthentication();
 
+  useEffect(() => {
+    auth.fetchCurrentUser();
+  }, []);
+
   useEffect(() => {
     if (auth.isLoading) return;
 
@@ -40,7 +44,8 @@ export default function SellerDashboard() {
         <div className="bg-white rounded-lg shadow p-6">
           <h2 className="text-xl font-semibold mb-4">Account Status</h2>
           <p className="text-green-600 mb-4">
-            ✓ Your seller account is active and ready to receive payments
+            ✓ Your K-Scale seller account is active and ready to receive
+            payments.
           </p>
 
           <div className="mt-6">

diff --git a/frontend/src/components/pages/SellerOnboarding.tsx b/frontend/src/components/pages/SellerOnboarding.tsx
@@ -18,7 +18,6 @@ export default function SellerOnboarding() {
   const auth = useAuthentication();
   const { addErrorAlert, addAlert } = useAlertQueue();
   const [accountCreatePending, setAccountCreatePending] = useState(false);
-  const [onboardingExited, setOnboardingExited] = useState(false);
   const [connectedAccountId, setConnectedAccountId] = useState<string | null>(
     auth.currentUser?.stripe_connect_account_id || null,
   );
@@ -57,16 +56,13 @@ export default function SellerOnboarding() {
         }
       }
     } catch (error) {
-      console.error("Failed to create seller account:", error);
       addErrorAlert(`Failed to create seller account: ${error}`);
     } finally {
       setAccountCreatePending(false);
     }
   };
 
   const handleOnboardingExit = async () => {
-    setOnboardingExited(true);
-
     try {
       const { data, error } = await auth.client.POST(
         "/stripe/connect-account/update-onboarding-status",
@@ -80,12 +76,12 @@ export default function SellerOnboarding() {
 
       if (data.onboarding_completed) {
         addAlert("Seller account setup completed!", "success");
-        setTimeout(() => navigate("/account"), 2000);
+        navigate("/seller-dashboard");
       } else {
         addErrorAlert(
-          "Your account setup is not complete. Please provide all required information.",
+          "Your stripe account setup is not complete. Please resolve outstanding requirements.",
         );
-        setTimeout(() => window.location.reload(), 2000);
+        navigate("/account");
       }
     } catch (error) {
       addErrorAlert(`Failed to update onboarding status: ${error}`);
@@ -136,13 +132,15 @@ export default function SellerOnboarding() {
   return (
     <div className="container mx-auto px-4 py-8 min-h-screen">
       <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold mb-6">Seller Onboarding</h1>
+        <h1 className="text-3xl font-bold mb-6">
+          Start Selling Robots on K-Scale
+        </h1>
 
         {!connectedAccountId && (
           <div className="mb-8">
             <p className="mb-4">
-              Set up your K-Scale connected Stripe account to start selling
-              robots and receiving payments.
+              Set up your K-Scale connected Stripe account. You can use an
+              existing Stripe account or create a new one.
             </p>
 
             <div className="space-y-4">
@@ -153,7 +151,7 @@ export default function SellerOnboarding() {
               >
                 {accountCreatePending
                   ? "Creating account..."
-                  : "Create New Stripe Account"}
+                  : "Start Seller Onboarding"}
               </button>
             </div>
           </div>
@@ -228,14 +226,6 @@ export default function SellerOnboarding() {
             <ConnectAccountOnboarding onExit={handleOnboardingExit} />
           </ConnectComponentsProvider>
         )}
-
-        {onboardingExited && (
-          <div className="mt-4 p-4 bg-gray-100 rounded">
-            <p>
-              Onboarding process completed. Redirecting to your account page...
-            </p>
-          </div>
-        )}
       </div>
     </div>
   );