@carrierllc/mcp 0.13.41 → 0.13.47

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

@@ -2,124 +2,141 @@
 /**
  * ShopClient — pick a plan, see what it costs, pay.
  *
- * Selecting a card used to navigate straight to /checkout, so the shopper was
- * handed to Stripe without ever seeing the total they were about to be charged.
- * The order summary is that missing beat: name, price, what is included, total.
- *
- * On a wide screen the summary is a sticky column and is always in view. On a
- * phone it is stacked underneath the plans, which is where the real defect was:
- * tapping a card changed something the customer could not see, so the tap read
- * as dead. `scrollSummaryIntoView` answers the tap by bringing the summary —
- * and the pay button in it — on screen.
+ * The tier radio is what selects a plan, including a tier that has only one
+ * data and validity option. Changing data or validity updates the price of
+ * the tier that is already selected and does not scroll the page. On a phone
+ * the pay button stays fixed to the bottom of the screen.
  */
 
-import { useCallback, useRef, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { PlanCard } from "@/components/landing/PlanCard";
+import { TierPlanBoard } from "@/components/landing/TierPlanBoard";
+import brand from "@/brand.config";
+import { CountrySearch } from "@/components/shop/CountrySearch";
 import { conversionEvents } from "@/lib/conversion-events";
+import { countryCatalogMode, plansForCountry } from "@/lib/catalog-countries";
+import { filledAccentClass, textLinkClass } from "@/lib/tap-target";
+import { presentTierCatalog, speedTierOf } from "@/vendor/carrier/tiers";
 import { formatDataAllowance, formatPrice, formatValidity } from "@/vendor/geo";
 import type { SkuTemplate } from "@/vendor/carrier/types";
 
-/** Above this width the summary is a sticky column and never leaves the fold. */
-const WIDE_VIEWPORT = "(min-width: 1024px)";
-
-function prefersReducedMotion(): boolean {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-
-function isWideViewport(): boolean {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia(WIDE_VIEWPORT).matches;
-}
+const secondary = "text-sand-700 dark:text-sand-200";
 
-export function ShopClient({ plans }: { plans: SkuTemplate[] }) {
+export function ShopClient({ plans, country = "" }: { plans: SkuTemplate[]; country?: string }) {
+  const coverage = plansForCountry(
+    plans,
+    country,
+    countryCatalogMode(process.env.NEXT_PUBLIC_COUNTRY_CATALOG),
+  );
+  const visible = coverage.plans;
+  const code = coverage.code;
   const router = useRouter();
   const [selected, setSelected] = useState<SkuTemplate | null>(null);
-  const summaryRef = useRef<HTMLElement | null>(null);
-
-  /**
-   * Bring the summary on screen after a selection, on narrow viewports only.
-   *
-   * `scrollIntoView` is missing in some engines and in jsdom, so the call is
-   * optional-chained: a browser that cannot scroll must still select the plan.
-   */
-  const scrollSummaryIntoView = useCallback(() => {
-    if (isWideViewport()) return;
-    requestAnimationFrame(() => {
-      summaryRef.current?.scrollIntoView?.({
-        behavior: prefersReducedMotion() ? "auto" : "smooth",
-        block: "start",
-      });
-    });
-  }, []);
+  const lightningEnabled = brand.lightningTier;
 
   function handleSelect(plan: SkuTemplate) {
     conversionEvents.selectPlan(plan.name);
     setSelected(plan);
-    scrollSummaryIntoView();
+  }
+
+  function handleAdjust(plan: SkuTemplate) {
+    setSelected((current) => {
+      if (!current || speedTierOf(current) !== speedTierOf(plan)) return current;
+      return plan;
+    });
   }
 
   function handleContinue() {
-    if (!selected) return;
+    if (!selected || selected.price_unavailable) return;
     router.push(`/checkout/${selected.id}`);
   }
 
-  const total = selected ? formatPrice(selected.price_cents, selected.currency) : null;
+  const view = presentTierCatalog(visible, { lightningEnabled });
+  const total = !selected
+    ? null
+    : selected.price_unavailable
+      ? "Unavailable"
+      : formatPrice(selected.price_cents, selected.currency);
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-16">
+    <div className="mx-auto max-w-6xl px-4 py-16 pb-28 lg:pb-16">
       <h1 className="text-4xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
         Choose your plan
       </h1>
-      <p className="mt-2 mb-12 text-sand-600 dark:text-sand-400">
+      <p className={`mt-2 mb-12 ${secondary}`}>
         Instant activation. No contracts. Price next to the limit.
       </p>
 
+      {coverage.search && (
+        <div className="-mx-4 mb-12">
+          <CountrySearch plans={plans} initialQuery={code} />
+        </div>
+      )}
+
       <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-[minmax(0,1fr)_320px]">
-        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
-          {plans.map((plan, i) => (
-            <PlanCard
-              key={plan.id}
-              plan={plan}
-              featured={i === 1}
-              selected={selected?.id === plan.id}
-              onSelect={handleSelect}
-            />
-          ))}
+        <div className="grid grid-cols-1 gap-8">
+          {coverage.search && visible.length === 0 && (
+            <p className="text-base text-sand-700 dark:text-sand-200">
+              No plan covers that country yet.{" "}
+              <Link href="/shop" className={textLinkClass}>
+                Browse plans
+              </Link>
+            </p>
+          )}
+          <TierPlanBoard
+            plans={visible}
+            mode="select"
+            lightningEnabled={lightningEnabled}
+            selectedId={selected?.id ?? null}
+            onSelect={handleSelect}
+            onAdjust={handleAdjust}
+          />
+          {view.untiered.length > 0 ? (
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
+              {view.untiered.map((plan) => (
+                <PlanCard
+                  key={plan.id}
+                  plan={plan}
+                  selected={selected?.id === plan.id}
+                  onSelect={handleSelect}
+                />
+              ))}
+            </div>
+          ) : null}
         </div>
 
         <section
-          ref={summaryRef}
           aria-label="Order summary"
           aria-live="polite"
-          className="scroll-mt-24 rounded-2xl border border-sand-200 bg-white p-6 lg:sticky lg:top-24 dark:border-sand-800 dark:bg-sand-900"
+          className="rounded-2xl border border-sand-200 bg-white p-6 lg:sticky lg:top-24 dark:border-sand-700 dark:bg-sand-900"
         >
-          <p className="text-xs font-semibold tracking-widest text-sand-500 uppercase">
+          <p className={`text-xs font-semibold tracking-widest uppercase ${secondary}`}>
             Your order
           </p>
           <h2 className="mt-3 text-xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
             {selected?.name ?? "Pick a plan"}
           </h2>
-          <p className="mt-1 text-sm text-sand-500">
+          <p className={`mt-1 text-sm ${secondary}`}>
             {selected
               ? `${formatDataAllowance(selected.dataGb, selected.unlimited)} · ${formatValidity(selected.validityDays)}`
-              : "Choose a plan on the left and the total appears here."}
+              : "Choose a speed tier and the total appears here."}
           </p>
 
-          <dl className="my-5 grid gap-3 border-y border-sand-200 py-5 text-sm dark:border-sand-800">
+          <dl className="my-5 grid gap-3 border-y border-sand-200 py-5 text-sm dark:border-sand-700">
             <div className="flex items-baseline justify-between gap-3">
-              <dt className="text-sand-500">Plan</dt>
+              <dt className={secondary}>Plan</dt>
               <dd className="font-mono tabular-nums text-sand-900 dark:text-sand-50">
                 {total ?? "—"}
               </dd>
             </div>
             <div className="flex items-baseline justify-between gap-3">
-              <dt className="text-sand-500">eSIM activation</dt>
-              <dd className="font-mono tabular-nums text-leaf-600">Free</dd>
+              <dt className={secondary}>eSIM activation</dt>
+              <dd className="font-mono tabular-nums text-[#166534] dark:text-[#BBF7D0]">Free</dd>
             </div>
             <div className="flex items-baseline justify-between gap-3">
-              <dt className="text-sand-500">Tax</dt>
+              <dt className={secondary}>Tax</dt>
               <dd className="font-mono tabular-nums text-sand-900 dark:text-sand-50">Included</dd>
             </div>
           </dl>
@@ -136,15 +153,32 @@ export function ShopClient({ plans }: { plans: SkuTemplate[] }) {
           <button
             type="button"
             onClick={handleContinue}
-            disabled={!selected}
-            className="mt-6 w-full rounded-full px-6 py-3 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
-            style={{ background: "var(--brand-accent)" }}
+            disabled={!selected || selected.price_unavailable === true}
+            className={`${filledAccentClass} fixed inset-x-4 bottom-4 z-30 disabled:cursor-not-allowed disabled:bg-sand-200 disabled:text-sand-700 lg:static lg:inset-auto lg:z-auto lg:mt-6 lg:w-full`}
           >
-            {selected ? "Continue to payment" : "Select a plan first"}
+            {selected?.price_unavailable
+              ? "Price unavailable"
+              : selected
+                ? "Continue to payment"
+                : "Select a plan first"}
           </button>
-          <p className="mt-3 text-xs leading-relaxed text-sand-400">
-            Your QR code is ready the moment the payment clears. Install it before you fly.
-          </p>
+          {selected?.price_unavailable ? (
+            <>
+              <p role="status" className={`mt-3 text-sm leading-relaxed ${secondary}`}>
+                {"We can't show a price for this plan right now, so it can't be bought yet. Pick another plan, or try again later."}
+              </p>
+              <a
+                href={brand.supportUrl}
+                className={`mt-3 inline-flex min-h-11 items-center text-base underline ${secondary}`}
+              >
+                Contact support
+              </a>
+            </>
+          ) : (
+            <p className={`mt-3 text-sm leading-relaxed ${secondary}`}>
+              Next, you pay on the secure checkout page. Your QR code is ready once the payment clears.
+            </p>
+          )}
         </section>
       </div>
     </div>

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

@@ -3,7 +3,12 @@ import { ShopClient } from "./ShopClient";
 
 export const metadata = { title: "Shop" };
 
-export default async function ShopPage() {
+export default async function ShopPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ country?: string }>;
+}) {
+  const { country } = await searchParams;
   const plans = await fetchTemplates();
-  return <ShopClient plans={plans} />;
+  return <ShopClient plans={plans} country={country ?? ""} />;
 }

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

@@ -0,0 +1,297 @@
+"use client";
+
+import Link from "next/link";
+import { FormEvent, useEffect, useRef, useState } from "react";
+import { useClerk, useSignIn } from "@clerk/nextjs";
+import { useRouter, useSearchParams } from "next/navigation";
+import brand from "@/brand.config";
+import { BUYER_AUTH_COPY, buyerCopyForClerkError, resetEmailOutcome, SIGN_IN_CLERK_CODES, signInStatusCopy } from "@/lib/buyer-auth-copy";
+import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";
+import { fieldClass, primaryButtonClass, textLinkClass } from "@/lib/tap-target";
+
+type Step = "credentials" | "reset-email" | "reset-password";
+
+const ERROR_ID = "si-error";
+
+export function StorefrontSignInClient({ origin }: { origin: string }) {
+  const searchParams = useSearchParams();
+  const redirectTarget = sanitizeAuthRedirect(searchParams.get("redirect_url") ?? undefined, "/dashboard", origin || undefined);
+  const resetEnabled = brand.passwordResetEnabled;
+  const startOnReset = resetEnabled && searchParams.get("reset") === "1";
+
+  const { signIn, isLoaded } = useSignIn();
+  const { setActive } = useClerk();
+  const router = useRouter();
+
+  const [step, setStep] = useState<Step>(startOnReset ? "reset-email" : "credentials");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [nextPassword, setNextPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const skipFocus = useRef(true);
+
+  useEffect(() => {
+    if (skipFocus.current) {
+      skipFocus.current = false;
+      return;
+    }
+    headingRef.current?.focus();
+  }, [step]);
+
+  const invalid = error ? true : undefined;
+
+  async function finish(sessionId: string | null | undefined) {
+    if (!sessionId) {
+      setError("Sign-in did not finish. Try again.");
+      return;
+    }
+    await setActive({ session: sessionId });
+    router.replace(redirectTarget);
+  }
+
+  async function handleCredentials(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!isLoaded || !signIn) return;
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await signIn.create({ identifier: email, password });
+      if (signInStatusCopy(result.status) === "complete") {
+        await finish(result.createdSessionId);
+        return;
+      }
+      setError(BUYER_AUTH_COPY.secondFactor);
+    } catch (err) {
+      setError(buyerCopyForClerkError(err, BUYER_AUTH_COPY.rejected, SIGN_IN_CLERK_CODES));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleResetEmail(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!isLoaded || !signIn || !resetEnabled) return;
+    setError(null);
+    setLoading(true);
+    try {
+      await signIn.create({ strategy: "reset_password_email_code", identifier: email });
+    } catch {
+      // The next screen is the same whether or not the account exists.
+    } finally {
+      const outcome = resetEmailOutcome();
+      setNotice(outcome.message);
+      setStep(outcome.step);
+      setLoading(false);
+    }
+  }
+
+  async function handleResetPassword(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!isLoaded || !signIn || !resetEnabled) return;
+    setError(null);
+    setLoading(true);
+    try {
+      const attempt = await signIn.attemptFirstFactor({ strategy: "reset_password_email_code", code });
+      if (attempt.status === "needs_new_password") {
+        const reset = await signIn.resetPassword({ password: nextPassword });
+        if (signInStatusCopy(reset.status) === "complete") {
+          await finish(reset.createdSessionId);
+          return;
+        }
+      }
+      if (signInStatusCopy(attempt.status) === "complete") {
+        await finish(attempt.createdSessionId);
+        return;
+      }
+      setError(BUYER_AUTH_COPY.resetRejected);
+    } catch (err) {
+      setError(buyerCopyForClerkError(err, BUYER_AUTH_COPY.resetRejected, ["form_code_incorrect", "too_many_requests"]));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm rounded-2xl border border-sand-200 bg-white p-8 dark:border-sand-800 dark:bg-sand-900">
+      <h1
+        ref={headingRef}
+        tabIndex={-1}
+        className="mb-1 text-xl font-bold text-sand-900 dark:text-sand-50"
+      >
+        {step === "credentials" && <>Sign in to {brand.name}</>}
+        {step === "reset-email" && "Reset your password"}
+        {step === "reset-password" && "Choose a new password"}
+      </h1>
+      <p
+        id={ERROR_ID}
+        role="alert"
+        aria-live="assertive"
+        className={error ? "mb-4 rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-base text-red-700 dark:text-red-300" : "sr-only"}
+      >
+        {error}
+      </p>
+      <p
+        role="status"
+        aria-live="polite"
+        className={notice ? "mb-4 text-base text-sand-700 dark:text-sand-200" : "sr-only"}
+      >
+        {notice}
+      </p>
+
+      {step === "credentials" && (
+        <>
+          <p className="mb-6 text-base text-sand-500">Email and password.</p>
+          <form onSubmit={handleCredentials} className="space-y-4">
+            <div>
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="si-email">
+                Email address
+              </label>
+              <input
+                id="si-email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                className={fieldClass}
+                placeholder="you@example.com"
+                aria-invalid={invalid}
+                aria-describedby={ERROR_ID}
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="si-password">
+                Password
+              </label>
+              <input
+                id="si-password"
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                className={fieldClass}
+                placeholder="Your password"
+                aria-invalid={invalid}
+                aria-describedby={ERROR_ID}
+              />
+            </div>
+            <button type="submit" disabled={loading || !isLoaded} className={primaryButtonClass}>
+              {loading ? "Signing in…" : "Continue"}
+            </button>
+          </form>
+          {resetEnabled && (
+            <button
+              type="button"
+              onClick={() => {
+                setStep("reset-email");
+                setError(null);
+                setNotice(null);
+              }}
+              className={`${textLinkClass} mt-2`}
+            >
+              Forgot password
+            </button>
+          )}
+          <p className="mt-2 text-base text-sand-500">
+            New here?{" "}
+            <Link href={`/sign-up?redirect_url=${encodeURIComponent(redirectTarget)}`} className={textLinkClass}>
+              Create account
+            </Link>
+          </p>
+        </>
+      )}
+
+      {step === "reset-email" && resetEnabled && (
+        <>
+          <p className="mb-6 text-base text-sand-500">We email you a code. No one at the shop resets it for you.</p>
+          <form onSubmit={handleResetEmail} className="space-y-4">
+            <div>
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="reset-email">
+                Email address
+              </label>
+              <input
+                id="reset-email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                className={fieldClass}
+                placeholder="you@example.com"
+                aria-invalid={invalid}
+                aria-describedby={ERROR_ID}
+              />
+            </div>
+            <button type="submit" disabled={loading || !isLoaded} className={primaryButtonClass}>
+              {loading ? "Sending code…" : "Email me a reset code"}
+            </button>
+          </form>
+          <button
+            type="button"
+            onClick={() => {
+              setStep("credentials");
+              setError(null);
+              setNotice(null);
+            }}
+            className={`${textLinkClass} mt-2`}
+          >
+            Back to sign in
+          </button>
+        </>
+      )}
+
+      {step === "reset-password" && resetEnabled && (
+        <>
+          <form onSubmit={handleResetPassword} className="space-y-4">
+            <div>
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="reset-code">
+                Reset code
+              </label>
+              <input
+                id="reset-code"
+                type="text"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                required
+                value={code}
+                onChange={(event) => setCode(event.target.value.replace(/\D/g, ""))}
+                className={fieldClass}
+                placeholder="000000"
+                aria-invalid={invalid}
+                aria-describedby={ERROR_ID}
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-base font-medium text-sand-600 dark:text-sand-400" htmlFor="reset-password">
+                New password
+              </label>
+              <input
+                id="reset-password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={8}
+                value={nextPassword}
+                onChange={(event) => setNextPassword(event.target.value)}
+                className={fieldClass}
+                placeholder="Min. 8 characters"
+                aria-invalid={invalid}
+                aria-describedby={ERROR_ID}
+              />
+            </div>
+            <button type="submit" disabled={loading || !isLoaded} className={primaryButtonClass}>
+              {loading ? "Saving…" : "Save new password"}
+            </button>
+          </form>
+        </>
+      )}
+
+      <div id="clerk-captcha" />
+    </div>
+  );
+}

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

@@ -1,24 +1,23 @@
 export const dynamic = "force-dynamic";
 
-import { SignIn } from "@clerk/nextjs";
-import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";
-
-interface Props {
-  searchParams: Promise<{ redirect_url?: string }>;
-}
+import { Suspense } from "react";
+import { headers } from "next/headers";
+import { requestOrigin } from "@/lib/request-origin";
+import { StorefrontSignInClient } from "./StorefrontSignInClient";
 
 export const metadata = { title: "Sign in" };
 
-export default async function SignInPage({ searchParams }: Props) {
-  const { redirect_url } = await searchParams;
-  const redirectUrl = sanitizeAuthRedirect(redirect_url, "/dashboard");
-
+export default async function SignInPage() {
+  const origin = requestOrigin(await headers());
   return (
     <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
-      <SignIn
-        fallbackRedirectUrl={redirectUrl}
-        signUpUrl="/sign-up"
-      />
+      <Suspense
+        fallback={
+          <p className="text-base text-sand-600 dark:text-sand-400">Loading sign in…</p>
+        }
+      >
+        <StorefrontSignInClient origin={origin} />
+      </Suspense>
     </div>
   );
 }