From 08ee5342336cc51241f3751fe3606de70612b055 Mon Sep 17 00:00:00 2001
From: Winston Hsiao <hsiaowinston@gmail.com>
Date: Sun, 10 Nov 2024 10:39:41 -0500
Subject: [PATCH] Improve onboarding flow and adjust to new styling

---
 frontend/src/components/pages/Profile.tsx     | 24 ++++++-----
 .../src/components/pages/SellerDashboard.tsx  | 41 +++++++++----------
 .../src/components/pages/SellerOnboarding.tsx | 15 ++++---
 frontend/src/components/ui/button.tsx         |  2 +-
 frontend/src/lib/types/routes.ts              |  1 -
 5 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/pages/Profile.tsx b/frontend/src/components/pages/Profile.tsx
index d5aac4f9..6454a14b 100644
--- a/frontend/src/components/pages/Profile.tsx
+++ b/frontend/src/components/pages/Profile.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useTypedParams } from "react-router-typesafe-routes/dom";
 
 import MyListingGrid from "@/components/listings/MyListingGrid";
@@ -201,7 +201,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
                 {user.username}
               </p>
               {user.permissions && (
-                <p className="text-sm text-primary-9 bg-primary-3 px-3 py-1 rounded-md">
+                <p className="text-sm text-primary-12 bg-gray-4 px-3 py-1 rounded-md">
                   {getRoleName(user.permissions)}
                 </p>
               )}
@@ -391,9 +391,11 @@ export const RenderProfile = (props: RenderProfileProps) => {
               <p className="text-gray-11 text-sm">
                 Stripe account setup complete.
               </p>
-            ) : null}
+            ) : (
+              <p>You must complete seller onboarding to sell robots</p>
+            )}
           </div>
-          <div className="flex gap-2 mb-4">
+          <div className="flex gap-2 mb-8">
             <Button
               onClick={() => navigate(ROUTES.ORDERS.path)}
               variant="default"
@@ -401,16 +403,16 @@ export const RenderProfile = (props: RenderProfileProps) => {
               Orders
             </Button>
             {!user.stripe_connect_account_id ? (
-              <Tooltip content="Start seller onboarding" position="bottom">
+              <Tooltip content="Start selling on K-Scale" position="bottom">
                 <Button
                   onClick={() => navigate(ROUTES.SELL.ONBOARDING.path)}
                   variant="outline"
                 >
-                  Sell Robots - Start Seller Onboarding
+                  Start Seller Onboarding
                 </Button>
               </Tooltip>
             ) : !user.stripe_connect_onboarding_completed ? (
-              <Tooltip content="Continue seller onboarding" position="bottom">
+              <Tooltip content="Continue onboarding" position="bottom">
                 <Button
                   onClick={() => navigate(ROUTES.SELL.ONBOARDING.path)}
                   variant="outline"
@@ -419,12 +421,12 @@ export const RenderProfile = (props: RenderProfileProps) => {
                 </Button>
               </Tooltip>
             ) : (
-              <Button
-                onClick={() => navigate(ROUTES.SELL.DASHBOARD.path)}
-                variant="outline"
+              <Link
+                to={`https://dashboard.stripe.com/${auth.currentUser?.stripe_connect_account_id}`}
+                className="text-sm"
               >
                 Seller Dashboard
-              </Button>
+              </Link>
             )}
           </div>
           <div className="flex flex-col items-center space-y-4">
diff --git a/frontend/src/components/pages/SellerDashboard.tsx b/frontend/src/components/pages/SellerDashboard.tsx
index 443f06e6..b0d02725 100644
--- a/frontend/src/components/pages/SellerDashboard.tsx
+++ b/frontend/src/components/pages/SellerDashboard.tsx
@@ -39,30 +39,27 @@ export default function SellerDashboard() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold mb-6">Seller Dashboard</h1>
+    <div className="container mx-auto">
+      <div className="max-w-2xl mx-auto p-8">
+        <h1 className="text-3xl font-bold my-4">Seller Dashboard</h1>
 
-        <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-xl font-semibold mb-4">Account Status</h2>
-          <div className="flex gap-2 text-green-600">
-            <Check />
-            <p>
-              Your K-Scale seller account is active and ready to receive
-              payments.
-            </p>
-          </div>
+        <h2 className="text-xl font-semibold mb-4">Account Status</h2>
+        <div className="flex gap-2 bg-gray-11 text-gray-1 px-3 py-2 items-center rounded-lg">
+          <Check />
+          <p>
+            Your K-Scale seller account is active and ready to receive payments.
+          </p>
+        </div>
 
-          <div className="mt-6">
-            <a
-              href={`https://dashboard.stripe.com/${auth.currentUser?.stripe_connect_account_id}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-primary-9 text-white px-6 py-3 rounded-lg hover:bg-primary-9/80 inline-block"
-            >
-              Open Stripe Dashboard
-            </a>
-          </div>
+        <div className="mt-6">
+          <a
+            href={`https://dashboard.stripe.com/${auth.currentUser?.stripe_connect_account_id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-primary-9 text-primary-12 px-6 py-3 rounded-lg hover:bg-primary-12 hover:text-primary-9 inline-block"
+          >
+            Open Stripe Dashboard
+          </a>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/pages/SellerOnboarding.tsx b/frontend/src/components/pages/SellerOnboarding.tsx
index 3db88462..e14f8998 100644
--- a/frontend/src/components/pages/SellerOnboarding.tsx
+++ b/frontend/src/components/pages/SellerOnboarding.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import Spinner from "@/components/ui/Spinner";
+import { Button } from "@/components/ui/button";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import { useStripeConnect } from "@/hooks/useStripeConnect";
@@ -82,7 +83,7 @@ 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">Start Selling on K-Scale</h1>
+        <h1 className="text-3xl font-bold my-8">Start Selling on K-Scale</h1>
 
         {!connectedAccountId && (
           <div className="mb-8">
@@ -91,15 +92,15 @@ export default function SellerOnboarding() {
               robots and receiving payments.
             </p>
 
-            <button
+            <Button
               onClick={handleCreateAccount}
               disabled={accountCreatePending}
-              className="w-full text-white px-6 py-3 rounded-lg disabled:opacity-50"
+              variant="outline"
             >
               {accountCreatePending
                 ? "Creating account..."
                 : "Start seller onboarding"}
-            </button>
+            </Button>
           </div>
         )}
 
@@ -108,6 +109,10 @@ export default function SellerOnboarding() {
             <ConnectAccountOnboarding
               onExit={() => {
                 setOnboardingExited(true);
+                auth.fetchCurrentUser();
+                if (auth.currentUser?.stripe_connect_onboarding_completed) {
+                  navigate(ROUTES.SELL.DASHBOARD.path);
+                }
               }}
             />
           </ConnectComponentsProvider>
@@ -122,7 +127,7 @@ export default function SellerOnboarding() {
                 </span>
                 <div className="flex items-center gap-2">
                   Connected account ID:{" "}
-                  <code className="font-mono bg-gray-5 rounded-md p-1">
+                  <code className="font-mono bg-gray-11 rounded-md p-1">
                     {connectedAccountId}
                   </code>
                 </div>
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 24b2688c..0221c1e5 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         selected: "bg-gray-12 text-gray-1 border border-gray-1",
         destructive:
           "bg-destructive text-gray-1 shadow-sm hover:bg-destructive/90",
-        outline: "border border-gray-1 bg-gray-12 text-gray-1",
+        outline: "border border-gray-1 bg-gray-12 text-gray-1 hover:bg-gray-11",
         ghost: "text-gray-1 border border-transparent hover:border-gray-1",
         link: "text-gray-1 underline-offset-4 hover:underline",
       },
diff --git a/frontend/src/lib/types/routes.ts b/frontend/src/lib/types/routes.ts
index 9a505d54..ec6a6647 100644
--- a/frontend/src/lib/types/routes.ts
+++ b/frontend/src/lib/types/routes.ts
@@ -50,7 +50,6 @@ const ROUTES = {
     "sell",
     {},
     {
-      DASHBOARD: route("dashboard"),
       ONBOARDING: route("onboarding"),
       DASHBOARD: route("dashboard"),
       DELETE: route("delete"),