npm - @carrierllc/mcp - Versions diffs - 0.2.16 → 0.2.18 - Mend

@carrierllc/mcp 0.2.16 → 0.2.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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]]/StorefrontSignUpClient.tsx ADDED Viewed

@@ -0,0 +1,199 @@
+"use client";
+/**
+ * StorefrontSignUpClient
+ *
+ * MANGO-6/7: Custom email + password sign-up for the storefront.
+ * Phone number is NEVER required. It is collected optionally on /activate/[orderId].
+ *
+ * Clerk v6 API (storefront uses @clerk/nextjs ^6):
+ *   useSignUp()  → { signUp, isLoaded }
+ *   useClerk()   → { setActive }
+ */
+import { useState, FormEvent } from "react";
+import { useSignUp } from "@clerk/nextjs/legacy";
+import { useClerk } from "@clerk/nextjs";
+import { useSearchParams, useRouter } from "next/navigation";
+import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
+import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";
+type FlowStep = "credentials" | "verify" | "complete";
+export function StorefrontSignUpClient() {
+  const searchParams = useSearchParams();
+  const rawRedirect = searchParams.get("redirect_url") ?? undefined;
+  const redirectTarget = sanitizeAuthRedirect(rawRedirect, "/dashboard");
+  const { signUp, isLoaded } = useSignUp();
+  const { setActive } = useClerk();
+  const router = useRouter();
+  const [step, setStep] = useState<FlowStep>("credentials");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  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."
+    );
+  }
+  async function handleCredentials(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!isLoaded || !signUp) 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 (!isLoaded || !signUp) return;
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await signUp.attemptEmailAddressVerification({ code });
+      const completion = await completeEmailSignUpAfterVerify(signUp, result);
+      if (completion.status === "complete") {
+        setStep("complete");
+        await setActive({ session: completion.sessionId });
+        router.replace(redirectTarget);
+      } else {
+        setError(completion.message);
+      }
+    } catch (err) {
+      setError(clerkErrMsg(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+  return (
+    <div className="w-full max-w-sm rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
+      {step === "credentials" && (
+        <>
+          <h1 className="text-xl font-bold text-white mb-1">Create account</h1>
+          <p className="text-xs text-white/40 mb-6">Email and password — no phone required.</p>
+          <form onSubmit={handleCredentials} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="sf-email">
+                Email address
+              </label>
+              <input
+                id="sf-email"
+                type="email"
+                autoComplete="email"
+                required
+                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="sf-password">
+                Password
+              </label>
+              <input
+                id="sf-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 || !isLoaded}
+              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…" : "Continue"}
+            </button>
+          </form>
+          <p className="mt-4 text-center text-xs text-white/30">
+            Already have an account?{" "}
+            <a href="/sign-in" className="text-[var(--brand-accent)] hover:underline">
+              Sign in
+            </a>
+          </p>
+        </>
+      )}
+      {step === "verify" && (
+        <>
+          <h1 className="text-xl font-bold text-white mb-1">Check your email</h1>
+          <p className="text-xs text-white/40 mb-6">
+            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="sf-code">
+                Verification code
+              </label>
+              <input
+                id="sf-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 email"}
+            </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>
+        </>
+      )}
+      {step === "complete" && (
+        <div className="text-center space-y-3 py-4">
+          <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">Setting up your account…</p>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+export const dynamic = "force-dynamic";
+/**
+ * /sign-up — Custom email + password sign-up flow for the storefront.
+ *
+ * MANGO-6/7: Phone number is never required here. It is collected optionally
+ * on /activate/[orderId] after purchase.
+ */
+import { Suspense } from "react";
+import { StorefrontSignUpClient } from "./StorefrontSignUpClient";
+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">
+      <Suspense
+        fallback={
+          <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>
+        }
+      >
+        <StorefrontSignUpClient />
+      </Suspense>
+    </div>
+  );
+}

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

@@ -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 },
+  ];
+}

package/templates/storefront/src/brand.config.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/**
+ * White-label brand configuration.
+ * Edit this file to re-skin the storefront for any brand.
+ */
+const brand = {
+  name: process.env.NEXT_PUBLIC_BRAND_NAME ?? "Carrier",
+  legalName: "Lifecycle Innovations Limited",
+  tagline: "Programmable connectivity, on demand.",
+  domain: "carrier.llc",
+  supportUrl: "https://carrier.llc/help",
+  supportEmail: "support@carrier.llc",
+  supportWhatsapp: "+17864604829",
+  colors: {
+    bg: "#080C16",
+    accent: "#FF6B35",
+    accentDark: "#D9461C",
+    accentLight: "#FFB088",
+    text: "#F5F1EA",
+    textSecondary: "#C9CCD6",
+  },
+  social: {
+    x: "@carrier_llc",
+    instagram: "@carrier.llc",
+    tiktok: "@carrier.llc",
+  },
+} as const;
+export default brand;

package/templates/storefront/src/components/Providers.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+"use client";
+import { ClerkProvider } from "@clerk/nextjs";
+import type { ComponentProps } from "react";
+import { ThemeProvider } from "@/components/theme/theme-provider";
+import { clerkAppearance } from "@/components/theme/clerk-appearance";
+type ClerkAppearance = ComponentProps<typeof ClerkProvider>["appearance"];
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkProvider appearance={clerkAppearance as ClerkAppearance}>
+      <ThemeProvider>{children}</ThemeProvider>
+    </ClerkProvider>
+  );
+}

package/templates/storefront/src/components/faq/FaqSection.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+"use client";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/vendor/ui/cn";
+const FAQS = [
+  {
+    q: "What is an eSIM?",
+    a: "An eSIM (embedded SIM) is a digital SIM that lets you activate a mobile plan without a physical SIM card. You scan a QR code and your device is connected instantly.",
+  },
+  {
+    q: "Which devices are compatible?",
+    a: "Most modern smartphones, tablets, and smartwatches support eSIM — including iPhone XS and later, Samsung Galaxy S21+, Google Pixel 3a+, and many more.",
+  },
+  {
+    q: "How quickly does the eSIM activate?",
+    a: "Activation is immediate after purchase. You will receive a QR code by email within seconds. Scan it in your device settings and you are connected.",
+  },
+  {
+    q: "What happens when my data runs out?",
+    a: "You will receive a notification when you are running low. You can purchase a top-up or a new plan from the dashboard at any time.",
+  },
+  {
+    q: "Can I use my eSIM in multiple countries?",
+    a: "Yes — regional plans cover multiple countries. Check the plan details for the exact coverage area before purchasing.",
+  },
+];
+function FaqItem({ q, a }: { q: string; a: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="border-b border-white/10">
+      <button
+        className="flex w-full items-center justify-between py-4 text-left text-white hover:text-[var(--brand-accent)] transition-colors"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span className="font-medium">{q}</span>
+        <span
+          className={cn(
+            "ml-4 shrink-0 text-[var(--brand-accent)] transition-transform",
+            open && "rotate-45",
+          )}
+        >
+          +
+        </span>
+      </button>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <p className="pb-4 text-sm text-white/60">{a}</p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+export function FaqSection() {
+  return (
+    <section className="py-24 bg-[var(--brand-bg)]">
+      <div className="mx-auto max-w-2xl px-4">
+        <h2 className="text-3xl font-bold text-white text-center mb-12">
+          Frequently asked questions
+        </h2>
+        <div>
+          {FAQS.map((faq) => (
+            <FaqItem key={faq.q} q={faq.q} a={faq.a} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}