@carrierllc/mcp 0.2.17 → 0.2.18

package/templates/storefront/src/app/checkout/[templateId]/CheckoutClient.tsx

@@ -1,6 +1,19 @@
 "use client";
-
-import { useEffect, useState } from "react";
+/**
+ * CheckoutClient
+ *
+ * MANGO-8/9: Purchase-first flow.
+ *
+ * OLD behaviour: unauthenticated user → redirected to /sign-in (blocking).
+ * NEW behaviour:
+ *   - Unauthenticated → POST /api/checkout/guest → Stripe Checkout directly.
+ *   - Authenticated   → use server-rendered session URL → Stripe Checkout.
+ *
+ * After Stripe payment success, the user lands on /checkout/success where they
+ * are prompted to create an account (email + password, no phone) or sign in.
+ * Then they are redirected to /activate/[orderId] for optional WhatsApp/phone setup.
+ */
+import { useEffect, useRef, useState } from "react";
 import { useAuth } from "@clerk/nextjs";
 import { useRouter } from "next/navigation";
 import { conversionEvents } from "@/lib/conversion-events";
@@ -8,6 +21,7 @@ import type { SkuTemplate } from "@/vendor/carrier/types";
 
 interface Props {
   plan: SkuTemplate;
+  /** Pre-built session URL for authenticated users (server-side). Null for guests. */
   session: { url: string } | null;
 }
 
@@ -15,22 +29,58 @@ export function CheckoutClient({ plan, session }: Props) {
   const { isSignedIn, isLoaded } = useAuth();
   const router = useRouter();
   const [checkoutError, setCheckoutError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const guestCheckoutPlanIdRef = useRef<string | null>(null);
+  const authRefreshAttemptedRef = useRef(false);
 
   useEffect(() => {
     if (!isLoaded) return;
-    if (!isSignedIn) {
-      sessionStorage.setItem("checkout_intent", plan.id);
-      router.push(`/sign-in?redirect_url=/checkout/${plan.id}`);
-      return;
-    }
+
     conversionEvents.beginCheckout(plan.name, plan.price_cents / 100);
-    if (session?.url) {
-      window.location.href = session.url;
+
+    if (isSignedIn) {
+      // Authenticated path: use the server-rendered session URL.
+      if (session?.url) {
+        window.location.href = session.url;
+        return;
+      }
+      if (!authRefreshAttemptedRef.current) {
+        authRefreshAttemptedRef.current = true;
+        router.refresh();
+        return;
+      }
+      setCheckoutError(
+        "Checkout is unavailable. Configure NEXT_PUBLIC_CARRIER_API_URL and Clerk keys, then try again.",
+      );
       return;
     }
-    setCheckoutError(
-      "Checkout is unavailable. Configure NEXT_PUBLIC_CARRIER_API_URL and Clerk keys, then try again.",
-    );
+
+    // Guest path (MANGO-8): call the guest checkout API — no auth required.
+    if (guestCheckoutPlanIdRef.current === plan.id) return;
+    guestCheckoutPlanIdRef.current = plan.id;
+
+    setLoading(true);
+    fetch("/api/checkout/guest", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ templateId: plan.id }),
+    })
+      .then(async (res) => {
+        if (!res.ok) {
+          const err = (await res.json()) as { error?: string };
+          throw new Error(err.error ?? "Failed to create checkout session");
+        }
+        return res.json() as Promise<{ url: string }>;
+      })
+      .then(({ url }) => {
+        window.location.href = url;
+      })
+      .catch((err: unknown) => {
+        guestCheckoutPlanIdRef.current = null;
+        const msg = err instanceof Error ? err.message : "Checkout unavailable. Please try again.";
+        setCheckoutError(msg);
+        setLoading(false);
+      });
   }, [isLoaded, isSignedIn, plan, session, router]);
 
   if (checkoutError) {
@@ -38,6 +88,12 @@ export function CheckoutClient({ plan, session }: Props) {
       <div className="mx-auto max-w-lg px-4 py-32 text-center">
         <p className="text-white/80">{checkoutError}</p>
         <p className="text-sm text-white/30 mt-2">{plan.name}</p>
+        <a
+          href="/shop"
+          className="mt-6 inline-block rounded-full border border-white/20 px-6 py-2 text-sm text-white hover:bg-white/10 transition-colors"
+        >
+          ← Back to shop
+        </a>
       </div>
     );
   }
@@ -45,7 +101,9 @@ export function CheckoutClient({ plan, session }: Props) {
   return (
     <div className="mx-auto max-w-lg px-4 py-32 text-center">
       <div className="h-8 w-8 rounded-full border-2 border-[var(--brand-accent)] border-t-transparent animate-spin mx-auto mb-4" />
-      <p className="text-white/60">Preparing your checkout…</p>
+      <p className="text-white/60">
+        {loading ? "Preparing your checkout…" : "Redirecting to payment…"}
+      </p>
       <p className="text-sm text-white/30 mt-2">{plan.name}</p>
     </div>
   );

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>
+  );
+}