@carrierllc/mcp 0.2.17 → 0.2.19

package/templates/storefront/src/app/checkout/success/CheckoutSuccessClient.tsx

@@ -0,0 +1,415 @@
+"use client";
+/**
+ * CheckoutSuccessClient
+ *
+ * MANGO-8/9: Shown after Stripe payment success.
+ *
+ * - If already signed in: redirect immediately to /activate/[orderId].
+ * - If not signed in: show email + password sign-up form (no phone).
+ *   After sign-up or sign-in, redirect to /activate/[orderId].
+ *
+ * The orderId is verified server-side before this component renders.
+ */
+import { useState, FormEvent, useEffect, useCallback } from "react";
+import { useSignUp, useSignIn } from "@clerk/nextjs/legacy";
+import { useClerk, useAuth } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
+
+type AuthMode = "signup" | "signin";
+type FlowStep = "idle" | "credentials" | "verify" | "redirecting" | "claim-error";
+
+interface Props {
+  orderId: string;
+  sessionId: string;
+  templateId: string;
+  purchaserEmail: string | null;
+}
+
+export function CheckoutSuccessClient({
+  orderId,
+  sessionId,
+  templateId,
+  purchaserEmail,
+}: Props) {
+  const { isLoaded: authLoaded, isSignedIn } = useAuth();
+  const { signUp, isLoaded: signUpLoaded } = useSignUp();
+  const { signIn, isLoaded: signInLoaded } = useSignIn();
+  const { setActive } = useClerk();
+  const router = useRouter();
+
+  const activateUrl = `/activate/${encodeURIComponent(orderId)}`;
+  const [mode, setMode] = useState<AuthMode>("signup");
+  const [step, setStep] = useState<FlowStep>("idle");
+  const [email, setEmail] = useState(purchaserEmail ?? "");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const emailLocked = Boolean(purchaserEmail);
+
+  const claimOrderAndRedirect = useCallback(async (afterAuth = false) => {
+    setStep("redirecting");
+    setError(null);
+    try {
+      const res = await fetch("/api/checkout/claim", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId, templateId }),
+      });
+      if (!res.ok) {
+        const err = (await res.json()) as { error?: string };
+        throw new Error(err.error ?? "Failed to link your purchase to this account");
+      }
+      router.replace(activateUrl);
+    } catch (err) {
+      setStep(afterAuth || isSignedIn ? "claim-error" : "credentials");
+      setError(err instanceof Error ? err.message : "Failed to link your purchase to this account");
+    }
+  }, [activateUrl, isSignedIn, router, sessionId, templateId]);
+
+  // If already signed in, claim the paid order before activating.
+  useEffect(() => {
+    if (!authLoaded) return;
+    if (isSignedIn) {
+      void claimOrderAndRedirect(true);
+    } else {
+      setStep("credentials");
+    }
+  }, [authLoaded, isSignedIn, claimOrderAndRedirect]);
+
+  function clerkErrMsg(err: unknown): string {
+    const e = err as { errors?: Array<{ longMessage?: string; message?: string }> };
+    return (
+      e?.errors?.[0]?.longMessage ??
+      e?.errors?.[0]?.message ??
+      "Something went wrong. Please try again."
+    );
+  }
+
+  // ── Sign-up flow ──────────────────────────────────────────────────────────
+
+  async function handleSignUp(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!signUpLoaded || !signUp) return;
+    if (purchaserEmail && email.toLowerCase() !== purchaserEmail.toLowerCase()) {
+      setError("Use the same email address you entered at checkout.");
+      return;
+    }
+    setError(null);
+    setLoading(true);
+    try {
+      await signUp.create({ emailAddress: email, password });
+      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
+      setStep("verify");
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleVerify(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!signUpLoaded || !signUp) return;
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await signUp.attemptEmailAddressVerification({ code });
+      const completion = await completeEmailSignUpAfterVerify(signUp, result);
+      if (completion.status === "complete") {
+        await setActive({ session: completion.sessionId });
+        await claimOrderAndRedirect(true);
+      } else {
+        setError(completion.message);
+      }
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // ── Sign-in flow ──────────────────────────────────────────────────────────
+
+  async function handleSignIn(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!signInLoaded || !signIn) return;
+    if (purchaserEmail && email.toLowerCase() !== purchaserEmail.toLowerCase()) {
+      setError("Use the same email address you entered at checkout.");
+      return;
+    }
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await signIn.create({
+        identifier: email,
+        password,
+      });
+      if (result.status === "complete" && result.createdSessionId) {
+        await setActive({ session: result.createdSessionId });
+        await claimOrderAndRedirect(true);
+      } else {
+        setError("Sign-in incomplete. Please try again.");
+      }
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  if (step === "idle" || step === "redirecting") {
+    return (
+      <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
+        <div className="text-center space-y-3">
+          <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
+          <p className="text-sm text-white/60">
+            {step === "redirecting" ? "Activating your eSIM…" : "Loading…"}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (step === "claim-error") {
+    return (
+      <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-16">
+        <div className="w-full max-w-md space-y-6 text-center">
+          <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4">
+            <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
+          </div>
+          <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur space-y-4">
+            <p className="text-sm text-white/80">We could not link this purchase to your account.</p>
+            {error && (
+              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                {error}
+              </p>
+            )}
+            <button
+              type="button"
+              onClick={() => void claimOrderAndRedirect(true)}
+              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-16">
+      <div className="w-full max-w-md space-y-6">
+        {/* Payment success banner */}
+        <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4 text-center">
+          <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
+          <p className="mt-1 text-sm text-emerald-200/70">
+            Create an account to activate your eSIM.
+          </p>
+        </div>
+
+        {/* Auth card */}
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
+          {/* Mode toggle */}
+          {step === "credentials" && (
+            <div className="flex rounded-lg border border-white/10 p-1 mb-6">
+              <button
+                type="button"
+                onClick={() => { setMode("signup"); setError(null); }}
+                className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
+                  mode === "signup"
+                    ? "bg-[var(--brand-accent)] text-white"
+                    : "text-white/40 hover:text-white/70"
+                }`}
+              >
+                Create account
+              </button>
+              <button
+                type="button"
+                onClick={() => { setMode("signin"); setError(null); }}
+                className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
+                  mode === "signin"
+                    ? "bg-[var(--brand-accent)] text-white"
+                    : "text-white/40 hover:text-white/70"
+                }`}
+              >
+                Sign in
+              </button>
+            </div>
+          )}
+
+          {/* Sign-up: credentials step */}
+          {step === "credentials" && mode === "signup" && (
+            <>
+              <h2 className="text-base font-semibold text-white mb-1">Create your account</h2>
+              <p className="text-xs text-white/40 mb-5">
+                {emailLocked
+                  ? "Use the email from your checkout to create your account."
+                  : "Email and password — no phone required."}
+              </p>
+              <form onSubmit={handleSignUp} className="space-y-4">
+                <div>
+                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="su-email">
+                    Email address
+                  </label>
+                  <input
+                    id="su-email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    readOnly={emailLocked}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    placeholder="you@example.com"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="su-password">
+                    Password
+                  </label>
+                  <input
+                    id="su-password"
+                    type="password"
+                    autoComplete="new-password"
+                    required
+                    minLength={8}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    placeholder="Min. 8 characters"
+                  />
+                </div>
+                {error && (
+                  <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                    {error}
+                  </p>
+                )}
+                <button
+                  type="submit"
+                  disabled={loading || !signUpLoaded}
+                  className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                >
+                  {loading ? "Creating account…" : "Create account & activate eSIM"}
+                </button>
+              </form>
+            </>
+          )}
+
+          {/* Sign-in: credentials step */}
+          {step === "credentials" && mode === "signin" && (
+            <>
+              <h2 className="text-base font-semibold text-white mb-1">Sign in</h2>
+              <p className="text-xs text-white/40 mb-5">
+                {emailLocked
+                  ? "Sign in with the email from your checkout to activate your eSIM."
+                  : "Sign in to activate your eSIM."}
+              </p>
+              <form onSubmit={handleSignIn} className="space-y-4">
+                <div>
+                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="si-email">
+                    Email address
+                  </label>
+                  <input
+                    id="si-email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    readOnly={emailLocked}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    placeholder="you@example.com"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="si-password">
+                    Password
+                  </label>
+                  <input
+                    id="si-password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    placeholder="Your password"
+                  />
+                </div>
+                {error && (
+                  <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                    {error}
+                  </p>
+                )}
+                <button
+                  type="submit"
+                  disabled={loading || !signInLoaded}
+                  className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                >
+                  {loading ? "Signing in…" : "Sign in & activate eSIM"}
+                </button>
+              </form>
+            </>
+          )}
+
+          {/* Email verification step */}
+          {step === "verify" && (
+            <>
+              <h2 className="text-base font-semibold text-white mb-1">Check your email</h2>
+              <p className="text-xs text-white/40 mb-5">
+                We sent a 6-digit code to <span className="text-white/70">{email}</span>.
+              </p>
+              <form onSubmit={handleVerify} className="space-y-4">
+                <div>
+                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="verify-code">
+                    Verification code
+                  </label>
+                  <input
+                    id="verify-code"
+                    type="text"
+                    inputMode="numeric"
+                    autoComplete="one-time-code"
+                    required
+                    maxLength={6}
+                    value={code}
+                    onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
+                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-center text-lg tracking-[0.4em] text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    placeholder="000000"
+                  />
+                </div>
+                {error && (
+                  <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                    {error}
+                  </p>
+                )}
+                <button
+                  type="submit"
+                  disabled={loading || code.length < 6}
+                  className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                >
+                  {loading ? "Verifying…" : "Verify & activate eSIM"}
+                </button>
+              </form>
+              <button
+                type="button"
+                onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
+                className="mt-4 w-full text-center text-xs text-white/30 hover:text-white/50"
+              >
+                ← Back
+              </button>
+            </>
+          )}
+        </div>
+
+        <p className="text-center text-xs text-white/30">
+          Your payment is confirmed. Account setup is required to receive your eSIM QR code.
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/storefront/src/app/checkout/success/page.tsx

@@ -0,0 +1,59 @@
+export const dynamic = "force-dynamic";
+/**
+ * /checkout/success
+ *
+ * MANGO-8/9: Post-payment landing page.
+ *
+ * The user arrives here after a successful Stripe Checkout payment.
+ * Query params from Stripe: ?templateId=<id>&session_id=<stripe_session_id>
+ *
+ * Flow:
+ *   1. Show payment success confirmation.
+ *   2. If already signed in → redirect to /activate/[orderId] immediately.
+ *   3. If not signed in → show email + password sign-up form (no phone).
+ *   4. After sign-up/sign-in → redirect to /activate/[orderId].
+ *
+ * The orderId is derived from the Stripe session_id (or templateId as fallback)
+ * so the activate page can look up the order.
+ */
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { verifyCheckoutSession } from "@/lib/verify-checkout-session";
+import { CheckoutSuccessClient } from "./CheckoutSuccessClient";
+
+export const metadata = { title: "Payment successful" };
+
+interface Props {
+  searchParams: Promise<{ session_id?: string; templateId?: string }>;
+}
+
+export default async function CheckoutSuccessPage({ searchParams }: Props) {
+  const params = await searchParams;
+  const sessionId = params.session_id ?? "";
+  const templateId = params.templateId ?? "";
+
+  const verification = await verifyCheckoutSession(sessionId, templateId);
+  if (!verification.ok) {
+    redirect("/shop");
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
+          <div className="text-center space-y-3">
+            <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
+            <p className="text-sm text-white/60">Loading…</p>
+          </div>
+        </div>
+      }
+    >
+      <CheckoutSuccessClient
+        orderId={verification.orderId}
+        sessionId={sessionId}
+        templateId={templateId}
+        purchaserEmail={verification.purchaserEmail}
+      />
+    </Suspense>
+  );
+}

package/templates/storefront/src/app/sign-up/[[...sign-up]]/StorefrontSignUpClient.tsx

@@ -0,0 +1,199 @@
+"use client";
+/**
+ * StorefrontSignUpClient
+ *
+ * MANGO-6/7: Custom email + password sign-up for the storefront.
+ * Phone number is NEVER required. It is collected optionally on /activate/[orderId].
+ *
+ * Clerk v6 API (storefront uses @clerk/nextjs ^6):
+ *   useSignUp()  → { signUp, isLoaded }
+ *   useClerk()   → { setActive }
+ */
+import { useState, FormEvent } from "react";
+import { useSignUp } from "@clerk/nextjs/legacy";
+import { useClerk } from "@clerk/nextjs";
+import { useSearchParams, useRouter } from "next/navigation";
+import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
+import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";
+
+type FlowStep = "credentials" | "verify" | "complete";
+
+export function StorefrontSignUpClient() {
+  const searchParams = useSearchParams();
+  const rawRedirect = searchParams.get("redirect_url") ?? undefined;
+  const redirectTarget = sanitizeAuthRedirect(rawRedirect, "/dashboard");
+
+  const { signUp, isLoaded } = useSignUp();
+  const { setActive } = useClerk();
+  const router = useRouter();
+
+  const [step, setStep] = useState<FlowStep>("credentials");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  function clerkErrMsg(err: unknown): string {
+    const e = err as { errors?: Array<{ longMessage?: string; message?: string }> };
+    return (
+      e?.errors?.[0]?.longMessage ??
+      e?.errors?.[0]?.message ??
+      "Something went wrong. Please try again."
+    );
+  }
+
+  async function handleCredentials(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!isLoaded || !signUp) return;
+    setError(null);
+    setLoading(true);
+    try {
+      await signUp.create({ emailAddress: email, password });
+      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
+      setStep("verify");
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleVerify(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!isLoaded || !signUp) return;
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await signUp.attemptEmailAddressVerification({ code });
+      const completion = await completeEmailSignUpAfterVerify(signUp, result);
+      if (completion.status === "complete") {
+        setStep("complete");
+        await setActive({ session: completion.sessionId });
+        router.replace(redirectTarget);
+      } else {
+        setError(completion.message);
+      }
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
+      {step === "credentials" && (
+        <>
+          <h1 className="text-xl font-bold text-white mb-1">Create account</h1>
+          <p className="text-xs text-white/40 mb-6">Email and password — no phone required.</p>
+          <form onSubmit={handleCredentials} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-email">
+                Email address
+              </label>
+              <input
+                id="sf-email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                placeholder="you@example.com"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-password">
+                Password
+              </label>
+              <input
+                id="sf-password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={8}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                placeholder="Min. 8 characters"
+              />
+            </div>
+            {error && (
+              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                {error}
+              </p>
+            )}
+            <button
+              type="submit"
+              disabled={loading || !isLoaded}
+              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              {loading ? "Creating account…" : "Continue"}
+            </button>
+          </form>
+          <p className="mt-4 text-center text-xs text-white/30">
+            Already have an account?{" "}
+            <a href="/sign-in" className="text-[var(--brand-accent)] hover:underline">
+              Sign in
+            </a>
+          </p>
+        </>
+      )}
+
+      {step === "verify" && (
+        <>
+          <h1 className="text-xl font-bold text-white mb-1">Check your email</h1>
+          <p className="text-xs text-white/40 mb-6">
+            We sent a 6-digit code to <span className="text-white/70">{email}</span>.
+          </p>
+          <form onSubmit={handleVerify} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-code">
+                Verification code
+              </label>
+              <input
+                id="sf-code"
+                type="text"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                required
+                maxLength={6}
+                value={code}
+                onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
+                className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-center text-lg tracking-[0.4em] text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                placeholder="000000"
+              />
+            </div>
+            {error && (
+              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                {error}
+              </p>
+            )}
+            <button
+              type="submit"
+              disabled={loading || code.length < 6}
+              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              {loading ? "Verifying…" : "Verify email"}
+            </button>
+          </form>
+          <button
+            type="button"
+            onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
+            className="mt-4 w-full text-center text-xs text-white/30 hover:text-white/50"
+          >
+            ← Back
+          </button>
+        </>
+      )}
+
+      {step === "complete" && (
+        <div className="text-center space-y-3 py-4">
+          <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
+          <p className="text-sm text-white/60">Setting up your account…</p>
+        </div>
+      )}
+    </div>
+  );
+}