@carrierllc/mcp 0.2.16 → 0.2.18

package/templates/storefront/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/storefront/src/app/activate/[orderId]/ActivateClient.tsx

@@ -0,0 +1,125 @@
+"use client";
+/**
+ * ActivateClient
+ *
+ * MANGO-8/9: Shown after sign-up/sign-in on /activate/[orderId].
+ *
+ * - Displays the eSIM QR code (once available from the API).
+ * - Optionally collects phone number / WhatsApp for eSIM delivery notifications.
+ *   Phone is NEVER required — user can skip.
+ */
+import { useState, FormEvent } from "react";
+
+interface Props {
+  orderId: string;
+}
+
+export function ActivateClient({ orderId }: Props) {
+  const [phone, setPhone] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  async function handlePhoneSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setSaving(true);
+    setSaveError(null);
+    try {
+      // POST phone to user profile (best-effort — non-blocking)
+      const res = await fetch("/api/profile/phone", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ phone }),
+      });
+      if (!res.ok) {
+        const err = (await res.json()) as { error?: string };
+        throw new Error(err.error ?? "Failed to save phone number");
+      }
+      setSubmitted(true);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to save. Please try again.";
+      setSaveError(msg);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-lg px-4 py-16">
+      {/* Header */}
+      <div className="text-center mb-10">
+        <div className="inline-flex items-center justify-center size-14 rounded-full bg-emerald-500/10 border border-emerald-500/30 mb-4">
+          <span className="text-2xl">✓</span>
+        </div>
+        <h1 className="text-2xl font-bold text-white">Your eSIM is ready</h1>
+        <p className="mt-2 text-sm text-white/50">Order: {orderId}</p>
+      </div>
+
+      {/* QR Code placeholder */}
+      <div className="rounded-2xl border border-white/10 bg-white/5 p-8 text-center mb-8">
+        <p className="text-white/60 text-sm mb-2">
+          Your QR code will appear here once your order is confirmed.
+        </p>
+        <p className="text-white/30 text-xs">
+          This usually takes less than a minute. Refresh if needed.
+        </p>
+      </div>
+
+      {/* Optional phone / WhatsApp collection */}
+      <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+        <div className="flex items-start gap-3 mb-4">
+          <div className="shrink-0 mt-0.5">
+            <span className="inline-flex items-center justify-center size-5 rounded-full bg-white/10 text-[10px] text-white/50">
+              ?
+            </span>
+          </div>
+          <div>
+            <p className="text-sm font-medium text-white">
+              Get eSIM updates via WhatsApp{" "}
+              <span className="text-white/30 font-normal">(optional)</span>
+            </p>
+            <p className="text-xs text-white/40 mt-0.5">
+              We&apos;ll send your QR code and activation status. You can skip this.
+            </p>
+          </div>
+        </div>
+
+        {submitted ? (
+          <p className="text-sm text-emerald-300 text-center py-2">
+            ✓ Phone number saved. We&apos;ll send updates to {phone}.
+          </p>
+        ) : (
+          <form onSubmit={handlePhoneSubmit} className="space-y-3">
+            <div className="flex gap-2">
+              <input
+                type="tel"
+                autoComplete="tel"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                placeholder="+1 555 000 0000"
+                className="flex-1 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"
+              />
+              <button
+                type="submit"
+                disabled={saving || !phone.trim()}
+                className="rounded-lg bg-[var(--brand-accent)] px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50 whitespace-nowrap"
+              >
+                {saving ? "Saving…" : "Save"}
+              </button>
+            </div>
+            {saveError && (
+              <p className="text-xs text-red-300">{saveError}</p>
+            )}
+            <button
+              type="button"
+              onClick={() => setSubmitted(true)}
+              className="w-full text-center text-xs text-white/30 hover:text-white/50 py-1"
+            >
+              Skip for now
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront/src/app/activate/[orderId]/page.tsx

@@ -0,0 +1,32 @@
+export const dynamic = "force-dynamic";
+/**
+ * /activate/[orderId]
+ *
+ * MANGO-8/9: Post-purchase eSIM activation page.
+ *
+ * Phone number / WhatsApp is collected HERE — optionally — after the user
+ * has already paid and created their account. It is never required at sign-up.
+ *
+ * The orderId is the Stripe Checkout session_id (or templateId in dev/mock mode).
+ */
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+import { userOwnsOrder } from "@/lib/checkout-order-claim";
+import { ActivateClient } from "./ActivateClient";
+
+export const metadata = { title: "Activate eSIM" };
+
+interface Props {
+  params: Promise<{ orderId: string }>;
+}
+
+export default async function ActivatePage({ params }: Props) {
+  const { userId } = await auth();
+  if (!userId) redirect("/sign-in");
+
+  const { orderId } = await params;
+  const ownsOrder = await userOwnsOrder(userId, orderId);
+  if (!ownsOrder) redirect("/shop");
+
+  return <ActivateClient orderId={orderId} />;
+}

package/templates/storefront/src/app/api/checkout/claim/route.ts

@@ -0,0 +1,30 @@
+import { auth } from "@clerk/nextjs/server";
+import { NextRequest, NextResponse } from "next/server";
+import { claimCheckoutOrder } from "@/lib/checkout-order-claim";
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  const { userId } = await auth();
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: { sessionId?: string; templateId?: string };
+  try {
+    body = (await req.json()) as { sessionId?: string; templateId?: string };
+  } catch {
+    return NextResponse.json({ error: "Invalid request body" }, { status: 400 });
+  }
+
+  const sessionId = body.sessionId ?? "";
+  const templateId = body.templateId ?? "";
+  if (!sessionId || !templateId) {
+    return NextResponse.json({ error: "sessionId and templateId are required" }, { status: 400 });
+  }
+
+  const result = await claimCheckoutOrder(userId, sessionId, templateId);
+  if (!result.ok) {
+    return NextResponse.json({ error: result.error }, { status: result.status });
+  }
+
+  return NextResponse.json({ ok: true, orderId: result.orderId });
+}

package/templates/storefront/src/app/api/checkout/guest/route.ts

@@ -0,0 +1,91 @@
+/**
+ * POST /api/checkout/guest
+ *
+ * MANGO-8/9: Purchase-first flow — creates a Stripe Checkout session for
+ * unauthenticated users. No Clerk auth required.
+ *
+ * Body: { templateId: string }
+ *
+ * Returns: { url: string } — Stripe-hosted checkout URL
+ *
+ * The Stripe success_url encodes the templateId so the /checkout/success
+ * page can display the correct plan and prompt sign-up / sign-in.
+ */
+import { NextRequest, NextResponse } from "next/server";
+import { fetchTemplates } from "@/vendor/carrier/client";
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  let body: { templateId?: string };
+  try {
+    body = (await req.json()) as { templateId?: string };
+  } catch {
+    return NextResponse.json({ error: "Invalid request body" }, { status: 400 });
+  }
+
+  const { templateId } = body;
+  if (!templateId) {
+    return NextResponse.json({ error: "templateId is required" }, { status: 400 });
+  }
+
+  // Validate the template exists
+  const plans = await fetchTemplates();
+  const plan = plans.find((p) => p.id === templateId);
+  if (!plan) {
+    return NextResponse.json({ error: "Plan not found" }, { status: 404 });
+  }
+
+  const stripeKey = process.env.STRIPE_SECRET_KEY;
+  if (!stripeKey) {
+    // No Stripe configured — return a mock URL so the storefront still builds
+    // and renders without credentials (same pattern as fetchTemplates mock).
+    const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "";
+    const successUrl = `${appUrl}/checkout/success?templateId=${encodeURIComponent(templateId)}&session_id=mock`;
+    return NextResponse.json({ url: successUrl });
+  }
+
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "";
+  // success_url carries templateId so the success page knows which plan was purchased
+  const successUrl =
+    `${appUrl}/checkout/success?templateId=${encodeURIComponent(templateId)}&session_id={CHECKOUT_SESSION_ID}`;
+  const cancelUrl = `${appUrl}/shop`;
+
+  const formBody = new URLSearchParams({
+    mode: "payment",
+    "line_items[0][price_data][currency]": plan.currency.toLowerCase(),
+    "line_items[0][price_data][unit_amount]": String(plan.price_cents),
+    "line_items[0][price_data][product_data][name]": plan.name,
+    "line_items[0][price_data][product_data][description]": plan.description,
+    "line_items[0][quantity]": "1",
+    success_url: successUrl,
+    cancel_url: cancelUrl,
+    // Store templateId in BOTH session and payment_intent metadata so the
+    // provisioning webhook can read it. The `checkout.session.completed` event
+    // exposes `session.metadata` (NOT `payment_intent.metadata`), so the
+    // session-level copy is what fulfilment keys off to provision the eSIM —
+    // without it the plan is lost and the order is stuck "activating".
+    "metadata[templateId]": templateId,
+    "payment_intent_data[metadata][templateId]": templateId,
+    // Allow guest checkout (no Stripe account required)
+    "payment_method_collection": "always",
+  });
+
+  const resp = await fetch("https://api.stripe.com/v1/checkout/sessions", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${stripeKey}`,
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: formBody.toString(),
+  });
+
+  if (!resp.ok) {
+    const err = (await resp.json()) as { error?: { message?: string } };
+    return NextResponse.json(
+      { error: err.error?.message ?? "Failed to create checkout session" },
+      { status: 502 },
+    );
+  }
+
+  const session = (await resp.json()) as { url: string };
+  return NextResponse.json({ url: session.url });
+}

package/templates/storefront/src/app/api/profile/phone/route.ts

@@ -0,0 +1,40 @@
+/**
+ * POST /api/profile/phone
+ *
+ * MANGO-8/9: Saves an optional phone number to the user's Clerk profile.
+ * Called from /activate/[orderId] — never required, always skippable.
+ *
+ * Body: { phone: string }
+ */
+import { auth, clerkClient } from "@clerk/nextjs/server";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  const { userId } = await auth();
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: { phone?: string };
+  try {
+    body = (await req.json()) as { phone?: string };
+  } catch {
+    return NextResponse.json({ error: "Invalid request body" }, { status: 400 });
+  }
+
+  const phone = body.phone?.trim();
+  if (!phone) {
+    return NextResponse.json({ error: "phone is required" }, { status: 400 });
+  }
+
+  try {
+    const client = await clerkClient();
+    await client.users.updateUserMetadata(userId, {
+      publicMetadata: { whatsappPhone: phone },
+    });
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : "Failed to update profile";
+    return NextResponse.json({ error: msg }, { status: 500 });
+  }
+}

package/templates/storefront/src/app/apple-icon.tsx

@@ -0,0 +1,29 @@
+import { ImageResponse } from "next/og";
+import brand from "@/brand.config";
+
+export const size = { width: 180, height: 180 };
+export const contentType = "image/png";
+
+export default function AppleIcon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: brand.colors.bg,
+          borderRadius: "40px",
+          fontSize: "100px",
+          fontWeight: 700,
+          color: brand.colors.accent,
+        }}
+      >
+        {brand.name[0]}
+      </div>
+    ),
+    { ...size },
+  );
+}

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

@@ -0,0 +1,110 @@
+"use client";
+/**
+ * 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";
+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;
+}
+
+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;
+
+    conversionEvents.beginCheckout(plan.name, plan.price_cents / 100);
+
+    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;
+    }
+
+    // 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) {
+    return (
+      <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>
+    );
+  }
+
+  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">
+        {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/[templateId]/page.tsx

@@ -0,0 +1,24 @@
+export const dynamic = "force-dynamic";
+
+import { notFound } from "next/navigation";
+import { auth } from "@clerk/nextjs/server";
+import { fetchTemplates, createCheckoutSession } from "@/vendor/carrier/client";
+import { CheckoutClient } from "./CheckoutClient";
+
+export const metadata = { title: "Checkout" };
+
+interface Props {
+  params: Promise<{ templateId: string }>;
+}
+
+export default async function CheckoutPage({ params }: Props) {
+  const { templateId } = await params;
+  const { userId } = await auth();
+  const plans = await fetchTemplates();
+  const plan = plans.find((p) => p.id === templateId);
+  if (!plan) notFound();
+
+  const session = userId ? await createCheckoutSession(templateId, userId) : null;
+
+  return <CheckoutClient plan={plan} session={session} />;
+}