feat: simplify onboarding card

Author: Patrick-Erichsen

binary/package-lock.json

@@ -206,11 +206,6 @@ export class WorkOsAuthProvider implements AuthenticationProvider, Disposable {
 
   public static useOnboardingUri: boolean = false;
   get redirectUri() {
-    if (WorkOsAuthProvider.useOnboardingUri) {
-      const url = new URL(controlPlaneEnv.APP_URL);
-      url.pathname = `/auth/${env.uriScheme}-redirect`;
-      return url.toString();
-    }
     return this.ideRedirectUri;
   }
 

core/package-lock.json

@@ -1,49 +1,41 @@
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
-import { useContext, useEffect, useState } from "react";
+import { CheckIcon } from "@heroicons/react/24/outline";
+import { useContext } from "react";
 import { Button } from "../..";
+import { useAuth } from "../../../context/Auth";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
-import { getLocalStorage } from "../../../util/localStorage";
+import { useAppDispatch } from "../../../redux/hooks";
+import { selectFirstHubProfile } from "../../../redux/thunks/selectFirstHubProfile";
 import { useOnboardingCard } from "../hooks/useOnboardingCard";
 
 /**
- * Models Add-On tab component displaying pricing and tier information
+ * Models Add-On tab component with two-step onboarding:
+ * 1. Create Account - Uses auth.login(true) to sign up and redirect back to IDE
+ * 2. Purchase Credits - Opens /settings/billing to purchase credits
  */
 export function OnboardingModelsAddOnTab() {
   const ideMessenger = useContext(IdeMessengerContext);
   const { close } = useOnboardingCard();
-  const [isPolling, setIsPolling] = useState(false);
+  const auth = useAuth();
+  const dispatch = useAppDispatch();
 
-  const isJetbrains = getLocalStorage("ide") === "jetbrains";
+  const isLoggedIn = !!auth.session;
 
-  // Polling effect for JetBrains
-  // This is because jetbrains doesn't support deeplinking the same way as VS Code
-  useEffect(() => {
-    if (!isPolling || !isJetbrains) return;
-
-    const interval = setInterval(() => {
-      ideMessenger.post("config/refreshProfiles", {
-        reason: "Jetbrains onboarding polling",
-        selectProfileId: "local",
-      });
-    }, 7000);
-
-    return () => clearInterval(interval);
-  }, [isPolling, isJetbrains, ideMessenger]);
-
-  async function openBillingSettings() {
-    try {
-      await ideMessenger.request("controlPlane/openUrl", {
-        path: "settings/billing",
-      });
-    } catch (error) {
-      console.error("Error during upgrade process:", error);
-    } finally {
-      if (isJetbrains) {
-        setIsPolling(true);
-      } else {
-        close();
+  function handleCreateAccount() {
+    void auth.login(true).then((success) => {
+      if (success) {
+        // A new assistant is created when the account is created
+        // Switch to it immediately
+        void dispatch(selectFirstHubProfile());
+        ideMessenger.post("showToast", ["info", "Account created!"]);
       }
-    }
+    });
+  }
+
+  function handlePurchaseCredits() {
+    ideMessenger.post("controlPlane/openUrl", {
+      path: "settings/billing",
+    });
+    close();
   }
 
   function openPricingPage() {
@@ -52,28 +44,14 @@ export function OnboardingModelsAddOnTab() {
     });
   }
 
-  // Show polling UI for JetBrains after upgrade
-  if (isPolling && isJetbrains) {
-    return (
-      <div className="flex h-full w-full flex-col items-center justify-center text-center">
-        <h2 className="text-foreground mb-4 items-center text-lg font-semibold">
-          <ArrowPathIcon className="text-foreground animate-spin-slow mr-2 h-4 w-4" />
-          You may close this dialog after upgrading
-        </h2>
-      </div>
-    );
-  }
-
   return (
     <div className="flex h-full w-full flex-col items-center justify-center text-center">
       <div className="mb-4 flex flex-col items-center text-center">
-        <div className="mb-1">
-          <h2 className="text-foreground mb-1 text-2xl font-semibold">
-            Models Add-on
-          </h2>
-        </div>
+        <h2 className="text-foreground mb-1 text-2xl font-semibold">
+          Models Add-on
+        </h2>
 
-        <span className="text-description text-base">
+        <span className="text-description text-xs">
           Use a{" "}
           <span
             className="cursor-pointer underline hover:brightness-125"
@@ -85,21 +63,67 @@ export function OnboardingModelsAddOnTab() {
         </span>
       </div>
 
-      <div className="w-full">
-        <Button onClick={openBillingSettings} className="w-full max-w-xs">
-          Purchase Credits
-        </Button>
-      </div>
-      <div className="w-full text-center">
-        <span className="text-description">
-          <span
-            className="cursor-pointer underline hover:brightness-125"
-            onClick={openPricingPage}
-          >
-            Click here
-          </span>{" "}
-          to view pricing details
-        </span>
+      {/* Vertical step indicators */}
+      <div className="flex w-full flex-col gap-4">
+        {/* Step 1: Create Account */}
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div
+              className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium ring-1 ring-inset ${
+                isLoggedIn
+                  ? "bg-green-500 text-white ring-green-500"
+                  : "text-foreground ring-foreground bg-transparent"
+              }`}
+            >
+              {isLoggedIn ? <CheckIcon className="h-3 w-3" /> : "1"}
+            </div>
+            <span
+              className={`text-sm ${isLoggedIn ? "text-description" : "text-foreground font-medium"}`}
+            >
+              Create Account
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <div className="w-5 flex-shrink-0" />
+            <Button
+              onClick={handleCreateAccount}
+              className="flex-1"
+              disabled={isLoggedIn}
+            >
+              Create Account
+            </Button>
+          </div>
+        </div>
+
+        {/* Step 2: Purchase Credits */}
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div
+              className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium ring-1 ring-inset ${
+                isLoggedIn
+                  ? "text-foreground ring-foreground bg-transparent"
+                  : "text-description ring-description bg-transparent"
+              }`}
+            >
+              2
+            </div>
+            <span
+              className={`text-sm ${isLoggedIn ? "text-foreground font-medium" : "text-description"}`}
+            >
+              Purchase Credits
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <div className="w-5 flex-shrink-0" />
+            <Button
+              onClick={handlePurchaseCredits}
+              className="flex-1"
+              disabled={!isLoggedIn}
+            >
+              Purchase Credits
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   );

docs/package-lock.json

@@ -28,15 +28,15 @@ export function ReusableCard({
 }: ReusableCardProps) {
   return (
     <StyledCard
-      className={`xs:py-4 xs:px-4 relative px-2 py-3 ${className}`}
+      className={`xs:py-4 xs:px-4 relative px-2 !pt-0 pb-3 ${className}`}
       data-testid={testId}
     >
       {showCloseButton && (
         <CloseButton onClick={onClose}>
           <XMarkIcon className="flex h-5 w-5 hover:brightness-125" />
         </CloseButton>
       )}
-      <div className="content py-2">{children}</div>
+      <div className="content">{children}</div>
     </StyledCard>
   );
 }