@carrierllc/mcp 0.2.16 → 0.2.18

package/templates/storefront/src/components/footer/StorefrontFooter.tsx

@@ -0,0 +1,61 @@
+import Link from "next/link";
+import { BRAND } from "@/vendor/ui/brand";
+
+const FOOTER_LINKS = {
+  Product: [
+    { label: "Shop eSIMs", href: "/shop" },
+    { label: "Dashboard", href: "/dashboard" },
+    { label: "Help Center", href: "/help" },
+  ],
+  Company: [
+    { label: "Contact", href: "/contact" },
+    { label: "Privacy", href: "/legal/privacy" },
+    { label: "Terms", href: "/legal/terms" },
+    { label: "Acceptable Use", href: "/legal/acceptable-use" },
+  ],
+};
+
+export function StorefrontFooter() {
+  return (
+    <footer className="border-t border-white/10 bg-[var(--brand-bg)]">
+      <div className="mx-auto max-w-6xl px-4 py-12">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10">
+          <div className="col-span-2">
+            <p className="font-semibold text-white mb-2">{BRAND.name}</p>
+            <p className="text-sm text-white/50 max-w-xs">{BRAND.tagline}</p>
+          </div>
+          {Object.entries(FOOTER_LINKS).map(([section, links]) => (
+            <div key={section}>
+              <p className="text-xs font-semibold uppercase tracking-wider text-white/40 mb-3">
+                {section}
+              </p>
+              <ul className="space-y-2">
+                {links.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-white/60 hover:text-white transition-colors"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="border-t border-white/10 pt-6 flex flex-col md:flex-row items-center justify-between gap-2">
+          <p className="text-xs text-white/40">
+            &copy; {new Date().getFullYear()} {BRAND.legalName}. All rights reserved.
+          </p>
+          <a
+            href={`mailto:${BRAND.support.email}`}
+            className="text-xs text-white/40 hover:text-white transition-colors"
+          >
+            {BRAND.support.email}
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/storefront/src/components/landing/HeroSection.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import brand from "@/brand.config";
+
+export function HeroSection() {
+  return (
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[var(--brand-bg)]">
+      {/* Radial glow */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background: `radial-gradient(ellipse 80% 60% at 50% 0%, ${brand.colors.accent}22 0%, transparent 70%)`,
+        }}
+      />
+
+      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+        >
+          <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--brand-accent)]/30 bg-[var(--brand-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--brand-accent)]">
+            Global eSIM connectivity
+          </p>
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6 leading-none">
+            Stay connected,{" "}
+            <span style={{ color: brand.colors.accent }}>everywhere.</span>
+          </h1>
+          <p className="text-lg md:text-xl text-white/60 mb-10 max-w-2xl mx-auto">
+            {brand.tagline} Instant digital SIM activation. No physical cards, no roaming fees.
+          </p>
+          <div className="flex flex-wrap gap-4 justify-center">
+            <Link
+              href="/shop"
+              className="rounded-full bg-[var(--brand-accent)] px-8 py-3 font-semibold text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+            >
+              Browse plans
+            </Link>
+            <Link
+              href="/help"
+              className="rounded-full border border-white/20 px-8 py-3 font-semibold text-white/80 hover:bg-white/5 transition-colors"
+            >
+              How it works
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront/src/components/landing/PlanCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/vendor/ui/cn";
+import type { SkuTemplate } from "@/vendor/carrier/types";
+
+interface PlanCardProps {
+  plan: SkuTemplate;
+  onSelect?: (plan: SkuTemplate) => void;
+  featured?: boolean;
+}
+
+export function PlanCard({ plan, onSelect, featured }: PlanCardProps) {
+  return (
+    <motion.div
+      whileHover={{ y: -4 }}
+      className={cn(
+        "relative rounded-2xl border p-6 flex flex-col gap-4 cursor-pointer transition-colors",
+        featured
+          ? "border-[var(--brand-accent)] bg-[var(--brand-accent)]/5"
+          : "border-white/10 bg-white/5 hover:border-white/20",
+      )}
+      onClick={() => onSelect?.(plan)}
+    >
+      {featured && (
+        <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[var(--brand-accent)] px-3 py-0.5 text-xs font-semibold text-white">
+          Most popular
+        </span>
+      )}
+      <div>
+        <p className="font-semibold text-white">{plan.name}</p>
+        <p className="text-sm text-white/50 mt-0.5">{plan.description}</p>
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span className="text-3xl font-bold text-white">
+          €{(plan.price_cents / 100).toFixed(2)}
+        </span>
+        <span className="text-sm text-white/40">one-time</span>
+      </div>
+      <ul className="space-y-1.5 text-sm text-white/70">
+        {plan.features.map((f, i) => (
+          <li key={i} className="flex items-center gap-2">
+            <span className="text-[var(--brand-accent)]">✓</span>
+            {f}
+          </li>
+        ))}
+      </ul>
+      <button
+        className={cn(
+          "mt-auto rounded-full py-2 text-sm font-semibold transition-colors",
+          featured
+            ? "bg-[var(--brand-accent)] text-white hover:bg-[var(--brand-accent-dark)]"
+            : "border border-white/20 text-white hover:bg-white/10",
+        )}
+        onClick={() => onSelect?.(plan)}
+      >
+        Select plan
+      </button>
+    </motion.div>
+  );
+}

package/templates/storefront/src/components/nav/StorefrontNav.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+import { cn } from "@/vendor/ui/cn";
+import brand from "@/brand.config";
+
+const NAV_LINKS = [
+  { label: "Shop", href: "/shop" },
+  { label: "Help", href: "/help" },
+];
+
+export function StorefrontNav() {
+  const pathname = usePathname();
+
+  return (
+    <header className="fixed top-0 inset-x-0 z-50 h-16 border-b border-white/10 bg-[var(--brand-bg)]/80 backdrop-blur-md">
+      <div className="mx-auto max-w-6xl h-full px-4 flex items-center justify-between">
+        <Link href="/" className="flex items-center gap-2 font-semibold text-white">
+          {brand.name}
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-6">
+          {NAV_LINKS.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={cn(
+                "text-sm transition-colors",
+                pathname?.startsWith(link.href)
+                  ? "text-[var(--brand-accent)]"
+                  : "text-white/70 hover:text-white",
+              )}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-3">
+          <SignedOut>
+            <Link
+              href="/sign-in"
+              className="text-sm text-white/70 hover:text-white transition-colors"
+            >
+              Sign in
+            </Link>
+            <Link
+              href="/shop"
+              className="rounded-full bg-[var(--brand-accent)] px-4 py-1.5 text-sm font-medium text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+            >
+              Get eSIM
+            </Link>
+          </SignedOut>
+          <SignedIn>
+            <Link
+              href="/dashboard"
+              className="text-sm text-white/70 hover:text-white transition-colors"
+            >
+              Dashboard
+            </Link>
+            <UserButton afterSignOutUrl="/" />
+          </SignedIn>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/storefront/src/components/theme/clerk-appearance.ts

@@ -0,0 +1,51 @@
+// Inline brand colors — no external package dependency
+const colors = {
+  bg: "#080C16",
+  accent: "#FF6B35",
+  accentDark: "#D9461C",
+  text: "#F5F1EA",
+  textSecondary: "#C9CCD6",
+  surface: "#111827",
+  border: "#1F2937",
+};
+
+// Using a plain object; Clerk accepts this shape via the `appearance` prop.
+// Typed as `object` to avoid importing Clerk's internal Appearance type.
+export const clerkAppearance: object = {
+  variables: {
+    colorPrimary: colors.accent,
+    colorBackground: colors.surface,
+    colorInputBackground: colors.bg,
+    colorText: colors.text,
+    colorTextSecondary: colors.textSecondary,
+    colorInputText: colors.text,
+    colorNeutral: colors.textSecondary,
+    borderRadius: "0.5rem",
+    fontFamily: "var(--font-geist-sans, system-ui, sans-serif)",
+  },
+  elements: {
+    card: {
+      backgroundColor: colors.surface,
+      border: `1px solid ${colors.border}`,
+      boxShadow: "none",
+    },
+    headerTitle: { color: colors.text },
+    headerSubtitle: { color: colors.textSecondary },
+    socialButtonsBlockButton: {
+      backgroundColor: colors.bg,
+      border: `1px solid ${colors.border}`,
+      color: colors.text,
+    },
+    socialButtonsBlockButtonText: { color: colors.text },
+    dividerLine: { backgroundColor: colors.border },
+    dividerText: { color: colors.textSecondary },
+    formFieldLabel: { color: colors.textSecondary },
+    formFieldInput: {
+      backgroundColor: colors.bg,
+      border: `1px solid ${colors.border}`,
+      color: colors.text,
+    },
+    footerActionLink: { color: colors.accent },
+    identityPreviewEditButton: { color: colors.accent },
+  },
+};

package/templates/storefront/src/components/theme/theme-provider.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+
+export type Theme = "light" | "dark";
+export type ThemePreference = Theme | "system";
+
+const STORAGE_KEY = "carrier-theme";
+
+type ThemeContextValue = {
+  theme: Theme;
+  preference: ThemePreference;
+  setPreference: (pref: ThemePreference) => void;
+  toggle: () => void;
+};
+
+const ThemeContext = React.createContext<ThemeContextValue | null>(null);
+
+function systemTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function resolve(pref: ThemePreference): Theme {
+  return pref === "system" ? systemTheme() : pref;
+}
+
+function applyToDocument(theme: Theme) {
+  const root = document.documentElement;
+  root.setAttribute("data-theme", theme);
+  root.style.colorScheme = theme;
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [preference, setPreferenceState] = React.useState<ThemePreference>(() => {
+    if (typeof window === "undefined") return "dark";
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY);
+      if (stored === "light" || stored === "dark" || stored === "system") return stored;
+    } catch { /* private mode */ }
+    return "system";
+  });
+
+  const [theme, setTheme] = React.useState<Theme>(() => {
+    if (typeof window === "undefined") return "dark";
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (attr === "light" || attr === "dark") return attr;
+    return resolve(preference);
+  });
+
+  const setPreference = React.useCallback((pref: ThemePreference) => {
+    setPreferenceState(pref);
+    const next = resolve(pref);
+    setTheme(next);
+    applyToDocument(next);
+    try { window.localStorage.setItem(STORAGE_KEY, pref); } catch { /* ignore */ }
+  }, []);
+
+  const toggle = React.useCallback(() => {
+    setPreference(theme === "dark" ? "light" : "dark");
+  }, [theme, setPreference]);
+
+  React.useEffect(() => {
+    if (preference !== "system") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      const next = mql.matches ? "dark" : "light";
+      setTheme(next);
+      applyToDocument(next);
+    };
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [preference]);
+
+  const value = React.useMemo<ThemeContextValue>(
+    () => ({ theme, preference, setPreference, toggle }),
+    [theme, preference, setPreference, toggle],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = React.useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+  return ctx;
+}

package/templates/storefront/src/components/theme/theme-script.tsx

@@ -0,0 +1,24 @@
+const STORAGE_KEY = "carrier-theme";
+
+const themeScript = `
+(function () {
+  try {
+    var pref = localStorage.getItem("${STORAGE_KEY}");
+    var theme;
+    if (pref === "light" || pref === "dark") {
+      theme = pref;
+    } else {
+      theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    var root = document.documentElement;
+    root.setAttribute("data-theme", theme);
+    root.style.colorScheme = theme;
+  } catch (e) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  }
+})();
+`;
+
+export function ThemeScript() {
+  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
+}

package/templates/storefront/src/lib/checkout-order-claim.ts

@@ -0,0 +1,127 @@
+import { clerkClient } from "@clerk/nextjs/server";
+import { verifyCheckoutSession } from "@/lib/verify-checkout-session";
+
+type StripeSession = {
+  metadata?: Record<string, string>;
+  customer_email?: string | null;
+  customer_details?: { email?: string | null };
+};
+
+async function fetchStripeSession(sessionId: string): Promise<StripeSession | null> {
+  const stripeKey = process.env.STRIPE_SECRET_KEY;
+  if (!stripeKey) return null;
+
+  const resp = await fetch(`https://api.stripe.com/v1/checkout/sessions/${sessionId}`, {
+    headers: { Authorization: `Bearer ${stripeKey}` },
+  });
+  if (!resp.ok) return null;
+  return (await resp.json()) as StripeSession;
+}
+
+async function setStripeClaimedBy(sessionId: string, userId: string): Promise<boolean> {
+  const stripeKey = process.env.STRIPE_SECRET_KEY;
+  if (!stripeKey) return false;
+
+  const formBody = new URLSearchParams({
+    "metadata[claimedByUserId]": userId,
+  });
+
+  const resp = await fetch(`https://api.stripe.com/v1/checkout/sessions/${sessionId}`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${stripeKey}`,
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: formBody.toString(),
+  });
+
+  return resp.ok;
+}
+
+function claimedOrderIds(metadata: Record<string, unknown> | undefined): string[] {
+  const value = metadata?.claimedOrderIds;
+  return Array.isArray(value) ? value.filter((id): id is string => typeof id === "string") : [];
+}
+
+function sessionPurchaserEmail(session: StripeSession): string | null {
+  return session.customer_details?.email ?? session.customer_email ?? null;
+}
+
+async function userMatchesSessionPurchaser(session: StripeSession, userId: string): Promise<boolean> {
+  const purchaserEmail = sessionPurchaserEmail(session);
+  if (!purchaserEmail) return true;
+
+  const client = await clerkClient();
+  const user = await client.users.getUser(userId);
+  const normalizedPurchaserEmail = purchaserEmail.toLowerCase();
+  return user.emailAddresses.some(
+    (address) => address.emailAddress.toLowerCase() === normalizedPurchaserEmail,
+  );
+}
+
+async function addClaimedOrderToUser(userId: string, orderId: string): Promise<void> {
+  const client = await clerkClient();
+  const user = await client.users.getUser(userId);
+  const existing = claimedOrderIds(user.privateMetadata as Record<string, unknown> | undefined);
+  if (existing.includes(orderId)) return;
+
+  await client.users.updateUserMetadata(userId, {
+    privateMetadata: { claimedOrderIds: [...existing, orderId] },
+  });
+}
+
+export async function claimCheckoutOrder(
+  userId: string,
+  sessionId: string,
+  templateId: string,
+): Promise<{ ok: true; orderId: string } | { ok: false; status: number; error: string }> {
+  const verification = await verifyCheckoutSession(sessionId, templateId);
+  if (!verification.ok) {
+    return { ok: false, status: 400, error: "Invalid or unpaid checkout session" };
+  }
+
+  const orderId = verification.orderId;
+
+  if (sessionId !== "mock" && process.env.STRIPE_SECRET_KEY) {
+    const session = await fetchStripeSession(sessionId);
+    if (!session) {
+      return { ok: false, status: 400, error: "Invalid or unpaid checkout session" };
+    }
+
+    if (!(await userMatchesSessionPurchaser(session, userId))) {
+      return { ok: false, status: 403, error: "This order is linked to another account" };
+    }
+
+    const claimedBy = session.metadata?.claimedByUserId;
+    if (claimedBy && claimedBy !== userId) {
+      return { ok: false, status: 403, error: "This order is linked to another account" };
+    }
+    if (!claimedBy) {
+      const updated = await setStripeClaimedBy(sessionId, userId);
+      if (!updated) {
+        return { ok: false, status: 502, error: "Failed to claim order" };
+      }
+
+      const afterClaim = await fetchStripeSession(sessionId);
+      if (afterClaim?.metadata?.claimedByUserId !== userId) {
+        return { ok: false, status: 403, error: "This order is linked to another account" };
+      }
+    }
+  }
+
+  await addClaimedOrderToUser(userId, orderId);
+  return { ok: true, orderId };
+}
+
+export async function userOwnsOrder(userId: string, orderId: string): Promise<boolean> {
+  if (process.env.STRIPE_SECRET_KEY && orderId.startsWith("cs_")) {
+    const session = await fetchStripeSession(orderId);
+    return session?.metadata?.claimedByUserId === userId;
+  }
+
+  const client = await clerkClient();
+  const user = await client.users.getUser(userId);
+  return claimedOrderIds(user.privateMetadata as Record<string, unknown> | undefined).includes(
+    orderId,
+  );
+}

package/templates/storefront/src/lib/complete-email-sign-up.ts

@@ -0,0 +1,50 @@
+type SignUpVerificationResult = {
+  status: string;
+  createdSessionId: string | null;
+};
+
+type SignUpForEmailVerify = {
+  missingFields?: string[];
+  unverifiedFields?: string[];
+  update: (params: Record<string, never>) => Promise<SignUpVerificationResult>;
+};
+
+export type EmailSignUpCompletion =
+  | { status: "complete"; sessionId: string }
+  | { status: "incomplete"; message: string };
+
+export async function completeEmailSignUpAfterVerify(
+  signUp: SignUpForEmailVerify,
+  result: SignUpVerificationResult,
+): Promise<EmailSignUpCompletion> {
+  if (result.status === "complete" && result.createdSessionId) {
+    return { status: "complete", sessionId: result.createdSessionId };
+  }
+
+  if (result.status === "missing_requirements") {
+    const missingFields = signUp.missingFields ?? [];
+    const unverifiedFields = signUp.unverifiedFields ?? [];
+    const onlyPhoneMissing =
+      missingFields.length === 1 &&
+      missingFields[0] === "phone_number" &&
+      unverifiedFields.length === 0;
+
+    if (onlyPhoneMissing) {
+      try {
+        const updated = await signUp.update({});
+        if (updated.status === "complete" && updated.createdSessionId) {
+          return { status: "complete", sessionId: updated.createdSessionId };
+        }
+      } catch {
+        // Fall through to generic incomplete message.
+      }
+    }
+
+    return {
+      status: "incomplete",
+      message: "One more step required. Please complete your profile to continue.",
+    };
+  }
+
+  return { status: "incomplete", message: "Verification incomplete. Please try again." };
+}

package/templates/storefront/src/lib/conversion-events.ts

@@ -0,0 +1,36 @@
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag?: (...args: any[]) => void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fbq?: (...args: any[]) => void;
+  }
+}
+
+function gtag(event: string, params?: Record<string, unknown>): void {
+  if (typeof window !== "undefined" && typeof window.gtag === "function") {
+    window.gtag("event", event, params ?? {});
+  }
+}
+
+function fbq(event: string, data?: Record<string, unknown>): void {
+  if (typeof window !== "undefined" && typeof window.fbq === "function") {
+    window.fbq("track", event, data ?? {});
+  }
+}
+
+export const conversionEvents = {
+  beginCheckout: (planName: string, value: number, currency = "EUR") => {
+    gtag("begin_checkout", { items: [{ item_name: planName }], value, currency });
+    fbq("InitiateCheckout", { content_name: planName, value, currency });
+  },
+  purchase: (planName: string, value: number, transactionId?: string) => {
+    const id = transactionId ?? crypto.randomUUID();
+    gtag("purchase", { transaction_id: id, value, currency: "EUR", items: [{ item_name: planName }] });
+    fbq("Purchase", { content_name: planName, value, currency: "EUR" });
+  },
+  selectPlan: (planName: string) => {
+    gtag("select_item", { items: [{ item_name: planName }] });
+    fbq("AddToCart", { content_name: planName });
+  },
+};

package/templates/storefront/src/lib/sanitize-auth-redirect.ts

@@ -0,0 +1,16 @@
+const ALLOWED_PATHS = /^\/[a-zA-Z0-9\-._~:/?#[\]@!$&'()*+,;=%]*$/;
+
+export function sanitizeAuthRedirect(
+  rawRedirect: string | null | undefined,
+  fallback = "/dashboard",
+): string {
+  if (!rawRedirect) return fallback;
+  try {
+    // Reject absolute URLs and protocol-relative
+    if (rawRedirect.startsWith("//") || rawRedirect.includes(":")) return fallback;
+    if (!ALLOWED_PATHS.test(rawRedirect)) return fallback;
+    return rawRedirect;
+  } catch {
+    return fallback;
+  }
+}