@carrierllc/mcp 0.2.16 → 0.2.18

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/contact/page.tsx

@@ -0,0 +1,35 @@
+import brand from "@/brand.config";
+
+export const metadata = { title: "Contact" };
+
+export default function ContactPage() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-24">
+      <h1 className="text-3xl font-bold text-white mb-8">Get in touch</h1>
+      <div className="space-y-4 text-white/70">
+        <p>
+          Email:{" "}
+          <a
+            href={`mailto:${brand.supportEmail}`}
+            className="text-[var(--brand-accent)] hover:underline"
+          >
+            {brand.supportEmail}
+          </a>
+        </p>
+        {brand.supportWhatsapp && (
+          <p>
+            WhatsApp:{" "}
+            <a
+              href={`https://wa.me/${brand.supportWhatsapp.replace(/[^0-9]/g, "")}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[var(--brand-accent)] hover:underline"
+            >
+              {brand.supportWhatsapp}
+            </a>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront/src/app/dashboard/page.tsx

@@ -0,0 +1,26 @@
+export const dynamic = "force-dynamic";
+
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+
+export const metadata = { title: "Dashboard" };
+
+export default async function DashboardPage() {
+  const { userId } = await auth();
+  if (!userId) redirect("/sign-in?redirect_url=/dashboard");
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-16">
+      <h1 className="text-3xl font-bold text-white mb-8">Your eSIMs</h1>
+      <div className="rounded-2xl border border-white/10 bg-white/5 p-12 text-center">
+        <p className="text-white/50">No active eSIMs yet.</p>
+        <a
+          href="/shop"
+          className="mt-4 inline-block rounded-full bg-[var(--brand-accent)] px-6 py-2 text-sm font-semibold text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+        >
+          Browse plans
+        </a>
+      </div>
+    </div>
+  );
+}

package/templates/storefront/src/app/globals.css

@@ -0,0 +1,99 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  /* Brand palette — overridden per white-label via CSS vars */
+  --color-brand-bg: var(--brand-bg);
+  --color-brand-accent: var(--brand-accent);
+  --color-brand-accent-dark: var(--brand-accent-dark);
+  --color-brand-accent-light: var(--brand-accent-light);
+  --color-brand-text: var(--brand-text);
+  --color-brand-text-secondary: var(--brand-text-secondary);
+
+  /* Map mango-* → brand flame so ported component classNames keep working */
+  --color-mango-50: #fff4ef;
+  --color-mango-100: #ffe0d0;
+  --color-mango-200: #ffbfa0;
+  --color-mango-300: #ff9970;
+  --color-mango-400: #ff7d4d;
+  --color-mango-500: var(--brand-accent);
+  --color-mango-600: var(--brand-accent-dark);
+  --color-mango-700: #b33a17;
+  --color-mango-800: #8a2d12;
+  --color-mango-900: #5e1e0c;
+  --color-mango-950: #3a1107;
+
+  /* Neutral slate */
+  --color-slate-950: #080C16;
+
+  /* Fonts */
+  --font-sans: var(--font-geist-sans, system-ui, sans-serif);
+  --font-mono: var(--font-geist-mono, monospace);
+
+  /* Radii */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+}
+
+/* ── Brand CSS variables (dark-first default) ─────────────────────────────── */
+:root {
+  --brand-bg: #080C16;
+  --brand-accent: #FF6B35;
+  --brand-accent-dark: #D9461C;
+  --brand-accent-light: #FFB088;
+  --brand-text: #F5F1EA;
+  --brand-text-secondary: #C9CCD6;
+}
+
+[data-theme="light"] {
+  --brand-bg: #FAFAF8;
+  --brand-text: #0F1117;
+  --brand-text-secondary: #6B7280;
+}
+
+/* ── Base reset ───────────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  background-color: var(--brand-bg);
+  color: var(--brand-text);
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Selection ───────────────────────────────────────────────────────────── */
+::selection {
+  background-color: color-mix(in srgb, var(--brand-accent) 30%, transparent);
+  color: var(--brand-text);
+}
+
+/* ── Scrollbar ───────────────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--brand-accent) 40%, transparent);
+  border-radius: 3px;
+}

package/templates/storefront/src/app/help/page.tsx

@@ -0,0 +1,25 @@
+export const metadata = { title: "Help" };
+
+const STEPS = [
+  { title: "1. Choose your plan", body: "Browse plans by region or data size and select one that suits your trip." },
+  { title: "2. Create an account", body: "Sign up for free to manage your eSIMs in one place." },
+  { title: "3. Complete checkout", body: "Pay securely. You will receive a QR code by email within seconds." },
+  { title: "4. Scan & connect", body: "Open Settings on your device, scan the QR code, and you are online." },
+];
+
+export default function HelpPage() {
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-24">
+      <h1 className="text-3xl font-bold text-white mb-4">How it works</h1>
+      <p className="text-white/50 mb-12">Get connected in under 5 minutes.</p>
+      <div className="grid gap-6">
+        {STEPS.map((step) => (
+          <div key={step.title} className="rounded-2xl border border-white/10 bg-white/5 p-6">
+            <h2 className="font-semibold text-white mb-2">{step.title}</h2>
+            <p className="text-sm text-white/60">{step.body}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}