@carrierllc/mcp 0.2.15 → 0.2.17

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

@@ -0,0 +1,28 @@
+export const dynamic = "force-dynamic";
+
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+
+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;
+
+  return (
+    <div className="mx-auto max-w-lg px-4 py-24 text-center">
+      <h1 className="text-2xl font-bold text-white mb-4">Activate your eSIM</h1>
+      <p className="text-white/50 mb-8">Order ID: {orderId}</p>
+      <div className="rounded-2xl border border-white/10 bg-white/5 p-8">
+        <p className="text-white/60 text-sm">
+          Your QR code will appear here once your order is confirmed.
+        </p>
+      </div>
+    </div>
+  );
+}

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,52 @@
+"use client";
+
+import { useEffect, 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;
+  session: { url: string } | null;
+}
+
+export function CheckoutClient({ plan, session }: Props) {
+  const { isSignedIn, isLoaded } = useAuth();
+  const router = useRouter();
+  const [checkoutError, setCheckoutError] = useState<string | null>(null);
+
+  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;
+      return;
+    }
+    setCheckoutError(
+      "Checkout is unavailable. Configure NEXT_PUBLIC_CARRIER_API_URL and Clerk keys, then try again.",
+    );
+  }, [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>
+      </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">Preparing your checkout…</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} />;
+}

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

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

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

package/templates/storefront/src/app/layout.tsx

@@ -0,0 +1,56 @@
+export const dynamic = "force-dynamic";
+
+import type { Metadata, Viewport } from "next";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import { Providers } from "@/components/Providers";
+import { ThemeScript } from "@/components/theme/theme-script";
+import { StorefrontNav } from "@/components/nav/StorefrontNav";
+import { StorefrontFooter } from "@/components/footer/StorefrontFooter";
+import brand from "@/brand.config";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: {
+    default: brand.name,
+    template: `%s — ${brand.name}`,
+  },
+  description: brand.tagline,
+  metadataBase: new URL(`https://${brand.domain}`),
+  openGraph: {
+    siteName: brand.name,
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    creator: brand.social.x,
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: brand.colors.accent,
+  colorScheme: "dark light",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html
+      lang="en"
+      data-theme="dark"
+      className={`${GeistSans.variable} ${GeistMono.variable}`}
+      suppressHydrationWarning
+    >
+      <head>
+        <ThemeScript />
+      </head>
+      <body>
+        <Providers>
+          <StorefrontNav />
+          <main className="pt-16 min-h-screen">{children}</main>
+          <StorefrontFooter />
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/templates/storefront/src/app/legal/acceptable-use/page.tsx

@@ -0,0 +1,21 @@
+import brand from "@/brand.config";
+
+export const metadata = { title: "Acceptable Use Policy" };
+
+export default function AcceptableUsePage() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-24 prose prose-invert">
+      <h1>Acceptable Use Policy</h1>
+      <p className="lead">Last updated: {new Date().getFullYear()}</p>
+      <p>
+        You may not use {brand.name} services for illegal activity, spamming, or any activity that
+        degrades network quality for other users. Violation may result in immediate account
+        termination without refund.
+      </p>
+      <h2>Contact</h2>
+      <p>
+        <a href={`mailto:${brand.supportEmail}`}>{brand.supportEmail}</a>
+      </p>
+    </div>
+  );
+}

package/templates/storefront/src/app/legal/privacy/page.tsx

@@ -0,0 +1,27 @@
+import brand from "@/brand.config";
+
+export const metadata = { title: "Privacy Policy" };
+
+export default function PrivacyPage() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-24 prose prose-invert">
+      <h1>Privacy Policy</h1>
+      <p className="lead">Last updated: {new Date().getFullYear()}</p>
+      <p>
+        {brand.legalName} (&ldquo;{brand.name}&rdquo;, &ldquo;we&rdquo;, &ldquo;us&rdquo;) operates{" "}
+        {brand.domain}. This policy explains how we collect, use, and protect your information.
+      </p>
+      <h2>Data we collect</h2>
+      <p>
+        We collect the minimum data necessary to provide eSIM services: your email address for
+        account creation, payment information processed by our payment provider, and device
+        information required for eSIM provisioning.
+      </p>
+      <h2>Contact</h2>
+      <p>
+        Questions? Email{" "}
+        <a href={`mailto:${brand.supportEmail}`}>{brand.supportEmail}</a>.
+      </p>
+    </div>
+  );
+}

package/templates/storefront/src/app/legal/terms/page.tsx

@@ -0,0 +1,25 @@
+import brand from "@/brand.config";
+
+export const metadata = { title: "Terms of Service" };
+
+export default function TermsPage() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-24 prose prose-invert">
+      <h1>Terms of Service</h1>
+      <p className="lead">Last updated: {new Date().getFullYear()}</p>
+      <p>
+        By using {brand.name} you agree to these terms. {brand.legalName} reserves the right to
+        suspend accounts that violate our Acceptable Use Policy.
+      </p>
+      <h2>eSIM Services</h2>
+      <p>
+        eSIM plans are non-refundable once the QR code has been scanned and the SIM activated.
+        Data allowances are valid for the period stated on the plan.
+      </p>
+      <h2>Contact</h2>
+      <p>
+        <a href={`mailto:${brand.supportEmail}`}>{brand.supportEmail}</a>
+      </p>
+    </div>
+  );
+}

package/templates/storefront/src/app/manifest.ts

@@ -0,0 +1,18 @@
+import type { MetadataRoute } from "next";
+import brand from "@/brand.config";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: brand.name,
+    short_name: brand.name,
+    description: brand.tagline,
+    start_url: "/",
+    display: "standalone",
+    background_color: brand.colors.bg,
+    theme_color: brand.colors.accent,
+    icons: [
+      { src: "/brand/icon-192.png", sizes: "192x192", type: "image/png" },
+      { src: "/brand/icon-512.png", sizes: "512x512", type: "image/png" },
+    ],
+  };
+}

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

@@ -0,0 +1,31 @@
+import { HeroSection } from "@/components/landing/HeroSection";
+import { FaqSection } from "@/components/faq/FaqSection";
+import { fetchTemplates } from "@/vendor/carrier/client";
+import { PlanCard } from "@/components/landing/PlanCard";
+
+export default async function HomePage() {
+  const plans = await fetchTemplates();
+  const featured = plans.slice(0, 3);
+
+  return (
+    <>
+      <HeroSection />
+
+      <section className="py-24 bg-[var(--brand-bg)]">
+        <div className="mx-auto max-w-6xl px-4">
+          <h2 className="text-3xl font-bold text-white text-center mb-4">Popular plans</h2>
+          <p className="text-center text-white/50 mb-12">
+            Instant activation. No contracts. Cancel anytime.
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {featured.map((plan, i) => (
+              <PlanCard key={plan.id} plan={plan} featured={i === 1} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <FaqSection />
+    </>
+  );
+}

package/templates/storefront/src/app/robots.ts

@@ -0,0 +1,9 @@
+import type { MetadataRoute } from "next";
+import brand from "@/brand.config";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/activate"] },
+    sitemap: `https://${brand.domain}/sitemap.xml`,
+  };
+}

package/templates/storefront/src/app/shop/ShopClient.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { PlanCard } from "@/components/landing/PlanCard";
+import { conversionEvents } from "@/lib/conversion-events";
+import type { SkuTemplate } from "@/vendor/carrier/types";
+
+export function ShopClient({ plans }: { plans: SkuTemplate[] }) {
+  const router = useRouter();
+
+  function handleSelect(plan: SkuTemplate) {
+    conversionEvents.selectPlan(plan.name);
+    router.push(`/checkout/${plan.id}`);
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-16">
+      <h1 className="text-4xl font-bold text-white mb-2">Choose your plan</h1>
+      <p className="text-white/50 mb-12">Instant activation. No contracts.</p>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {plans.map((plan, i) => (
+          <PlanCard key={plan.id} plan={plan} featured={i === 1} onSelect={handleSelect} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { fetchTemplates } from "@/vendor/carrier/client";
+import { ShopClient } from "./ShopClient";
+
+export const metadata = { title: "Shop" };
+
+export default async function ShopPage() {
+  const plans = await fetchTemplates();
+  return <ShopClient plans={plans} />;
+}

package/templates/storefront/src/app/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,24 @@
+export const dynamic = "force-dynamic";
+
+import { SignIn } from "@clerk/nextjs";
+import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";
+
+interface Props {
+  searchParams: Promise<{ redirect_url?: string }>;
+}
+
+export const metadata = { title: "Sign in" };
+
+export default async function SignInPage({ searchParams }: Props) {
+  const { redirect_url } = await searchParams;
+  const redirectUrl = sanitizeAuthRedirect(redirect_url, "/dashboard");
+
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
+      <SignIn
+        redirectUrl={redirectUrl}
+        signUpUrl="/sign-up"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+export const dynamic = "force-dynamic";
+
+import { SignUp } from "@clerk/nextjs";
+
+export const metadata = { title: "Sign up" };
+
+export default function SignUpPage() {
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
+      <SignUp signInUrl="/sign-in" redirectUrl="/dashboard" />
+    </div>
+  );
+}

package/templates/storefront/src/app/sitemap.ts

@@ -0,0 +1,14 @@
+import type { MetadataRoute } from "next";
+import brand from "@/brand.config";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const base = `https://${brand.domain}`;
+  return [
+    { url: base, lastModified: new Date(), changeFrequency: "weekly", priority: 1 },
+    { url: `${base}/shop`, lastModified: new Date(), changeFrequency: "daily", priority: 0.9 },
+    { url: `${base}/help`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.5 },
+    { url: `${base}/contact`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.4 },
+    { url: `${base}/legal/privacy`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.2 },
+    { url: `${base}/legal/terms`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.2 },
+  ];
+}