@carrierllc/mcp 0.13.41 → 0.13.47

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

@@ -4,37 +4,157 @@ export const dynamic = "force-dynamic";
  *
  * Post-payment landing page.
  *
- * The user arrives here after a successful Stripe Checkout payment.
- * Query params from Stripe: ?templateId=<id>&session_id=<stripe_session_id>
+ * Query params: ?templateId=<id>&session_id=<session id>
  *
  * Flow:
- *   1. Show payment success confirmation.
- *   2. If already signed in → redirect to /activate/[orderId] immediately.
- *   3. If not signed in → show email + password sign-up form (no phone).
- *   4. After sign-up/sign-in → redirect to /activate/[orderId].
+ *   1. A mock session id is an error. No payment was taken.
+ *   2. A completed session that is still unpaid is processing.
+ *   3. An open or expired unpaid session did not go through.
+ *   4. A failed read is unavailable.
+ *   5. A session for another shop is refused here. No email is shown.
+ *   6. A settled session for this shop shows a confirmation before any account step.
  *
- * The orderId is derived from the Stripe session_id (or templateId as fallback)
- * so the activate page can look up the order.
+ * The orderId is the session id so the activate page can look up the order.
  */
-import { redirect } from "next/navigation";
-import { Suspense } from "react";
+import { cache, Suspense, type ReactNode } from "react";
+import brand from "@/brand.config";
+import { confirmationDocumentTitle, shortOrderReference } from "@/lib/checkout-copy";
+import { mockSessionProblem } from "@/lib/checkout-return";
 import { verifyCheckoutSession } from "@/lib/verify-checkout-session";
 import { CheckoutSuccessClient } from "./CheckoutSuccessClient";
-
-export const metadata = { title: "Payment successful" };
+import { FocusHeading } from "./FocusHeading";
 
 interface Props {
   searchParams: Promise<{ session_id?: string; templateId?: string }>;
 }
 
+const filledLinkClass =
+  "mt-8 inline-flex min-h-11 items-center justify-center rounded-full px-6 text-base font-semibold";
+const supportLinkClass =
+  "mt-4 inline-flex min-h-11 items-center justify-center text-base text-[var(--brand-accent-text)]";
+
+const PROCESSING_STATUS =
+  "You don't need to pay again. Refresh in a minute to check again. Use Check again any time.";
+
+const verifyForPage = cache(verifyCheckoutSession);
+
+export async function generateMetadata({ searchParams }: Props): Promise<{ title: string }> {
+  const params = await searchParams;
+  if (mockSessionProblem(params.session_id)) return { title: confirmationDocumentTitle("mock") };
+  const verification = await verifyForPage(params.session_id ?? "", params.templateId ?? "");
+  return { title: confirmationDocumentTitle(verification) };
+}
+
+function retryHref(sessionId: string, templateId: string): string {
+  const params = new URLSearchParams({ session_id: sessionId, templateId });
+  return `/checkout/success?${params.toString()}`;
+}
+
+function FilledLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <a
+      href={href}
+      className={filledLinkClass}
+      style={{ background: "var(--brand-accent)", color: "var(--brand-on-accent)" }}
+    >
+      {children}
+    </a>
+  );
+}
+
+function SupportLink() {
+  return (
+    <a href={brand.supportUrl} className={supportLinkClass}>
+      Contact support
+    </a>
+  );
+}
+
+function Outcome({
+  title,
+  status,
+  alert,
+  action,
+}: {
+  title: string;
+  status?: string;
+  alert?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <main className="mx-auto max-w-lg px-4 py-24 text-center">
+      <FocusHeading>{title}</FocusHeading>
+      {status ? (
+        <p role="status" className="mt-3 text-base text-sand-700 dark:text-sand-200">
+          {status}
+        </p>
+      ) : null}
+      {alert ? (
+        <p role="alert" className="mt-3 text-base text-sand-700 dark:text-sand-200">
+          {alert}
+        </p>
+      ) : null}
+      {action}
+      <SupportLink />
+    </main>
+  );
+}
+
 export default async function CheckoutSuccessPage({ searchParams }: Props) {
   const params = await searchParams;
   const sessionId = params.session_id ?? "";
   const templateId = params.templateId ?? "";
+  const problem = mockSessionProblem(sessionId);
+  if (problem) {
+    return (
+      <Outcome
+        title={problem.title}
+        alert={problem.message}
+        action={<FilledLink href="/shop">Back to plans</FilledLink>}
+      />
+    );
+  }
 
-  const verification = await verifyCheckoutSession(sessionId, templateId);
+  const verification = await verifyForPage(sessionId, templateId);
   if (!verification.ok) {
-    redirect("/shop");
+    switch (verification.status) {
+      case "processing":
+        return (
+          <Outcome
+            title="You don't need to pay again"
+            status={PROCESSING_STATUS}
+            action={<FilledLink href={retryHref(sessionId, templateId)}>Check again</FilledLink>}
+          />
+        );
+      case "unpaid":
+        return (
+          <Outcome
+            title="Payment did not go through"
+            alert="No eSIM was issued."
+            action={<FilledLink href="/shop">Back to plans</FilledLink>}
+          />
+        );
+      case "unavailable":
+        return (
+          <Outcome
+            title="We couldn't confirm your payment yet"
+            status={`If you paid, you don't need to pay again. Check again in a minute, or contact support with reference ${shortOrderReference(sessionId)}.`}
+            action={<FilledLink href={retryHref(sessionId, templateId)}>Check again</FilledLink>}
+          />
+        );
+      case "rejected":
+        return (
+          <Outcome
+            title="This payment could not be confirmed"
+            alert="This checkout does not match this shop, so nothing was issued."
+            action={<FilledLink href="/shop">Back to plans</FilledLink>}
+          />
+        );
+      default: {
+        const unhandled: never = verification.status;
+        return unhandled;
+      }
+    }
   }
 
   return (
@@ -43,7 +163,7 @@ export default async function CheckoutSuccessPage({ searchParams }: Props) {
         <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
           <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-sand-600 dark:text-sand-400">Loading…</p>
+            <p className="text-base text-sand-700 dark:text-sand-200">Loading…</p>
           </div>
         </div>
       }
@@ -53,6 +173,7 @@ export default async function CheckoutSuccessPage({ searchParams }: Props) {
         sessionId={sessionId}
         templateId={templateId}
         purchaserEmail={verification.purchaserEmail}
+        supportHref={brand.supportUrl}
       />
     </Suspense>
   );

package/templates/storefront/src/app/dashboard/EsimControls.tsx

@@ -14,6 +14,7 @@
  */
 
 import { useCallback, useState } from "react";
+import { buyerFacingError } from "@/lib/buyer-error";
 import {
   daysUntil,
   formatBytes,
@@ -35,10 +36,12 @@ type Loadable<T> =
   | { phase: "ready"; value: T }
   | { phase: "error"; message: string };
 
-const GENERIC_ERROR = "We couldn't reach your plan just now. Try again in a moment.";
-
-async function readJson<T>(res: Response): Promise<T & { error?: string }> {
-  return (await res.json().catch(() => ({}))) as T & { error?: string };
+async function readJson<T>(res: Response): Promise<T> {
+  try {
+    return (await res.json()) as T;
+  } catch {
+    return {} as T;
+  }
 }
 
 export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props) {
@@ -66,10 +69,10 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
       setUsage(
         usageRes.value.ok && payload.usage
           ? { phase: "ready", value: payload.usage }
-          : { phase: "error", message: payload.error ?? GENERIC_ERROR },
+          : { phase: "error", message: buyerFacingError("plan", payload) },
       );
     } else {
-      setUsage({ phase: "error", message: GENERIC_ERROR });
+      setUsage({ phase: "error", message: buyerFacingError("plan") });
     }
 
     if (topUpRes.status === "fulfilled") {
@@ -77,10 +80,10 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
       setTopUps(
         topUpRes.value.ok && Array.isArray(payload.options)
           ? { phase: "ready", value: payload.options }
-          : { phase: "error", message: payload.error ?? GENERIC_ERROR },
+          : { phase: "error", message: buyerFacingError("plan", payload) },
       );
     } else {
-      setTopUps({ phase: "error", message: GENERIC_ERROR });
+      setTopUps({ phase: "error", message: buyerFacingError("plan") });
     }
   }, [base]);
 
@@ -103,14 +106,11 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
         }),
       });
       const payload = await readJson<{ url?: string }>(res);
-      if (!res.ok || !payload.url) throw new Error(payload.error ?? GENERIC_ERROR);
+      if (!res.ok || !payload.url) throw new Error("plan");
       window.location.assign(payload.url);
     } catch (err) {
       setBuying(null);
-      setTopUps({
-        phase: "error",
-        message: err instanceof Error ? err.message : GENERIC_ERROR,
-      });
+      setTopUps({ phase: "error", message: buyerFacingError("plan", err) });
     }
   }
 
@@ -119,15 +119,12 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
     try {
       const res = await fetch(`${base}/cancel`, { method: "POST" });
       const payload = await readJson<{ cancelledAt?: string }>(res);
-      if (!res.ok) throw new Error(payload.error ?? GENERIC_ERROR);
+      if (!res.ok) throw new Error("plan");
       setCancelled(true);
       setConfirmingCancel(false);
       setCancelState({ phase: "ready", value: true });
     } catch (err) {
-      setCancelState({
-        phase: "error",
-        message: err instanceof Error ? err.message : GENERIC_ERROR,
-      });
+      setCancelState({ phase: "error", message: buyerFacingError("plan", err) });
     }
   }
 
@@ -137,7 +134,7 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
         type="button"
         onClick={toggle}
         aria-expanded={open}
-        className="text-sm font-medium text-sand-600 hover:text-sand-900 dark:text-sand-400 dark:hover:text-sand-50"
+        className="inline-flex min-h-11 items-center text-base font-medium text-sand-600 hover:text-sand-900 dark:text-sand-400 dark:hover:text-sand-50"
       >
         {open ? "Hide plan details" : "Usage, top-up and cancel"}
       </button>
@@ -178,8 +175,7 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
                       type="button"
                       onClick={() => void buyTopUp(option)}
                       disabled={buying !== null}
-                      className="rounded-full px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
-                      style={{ background: "var(--brand-accent)" }}
+                      className="inline-flex min-h-11 items-center rounded-full bg-[var(--brand-accent)] px-4 text-base font-semibold text-[var(--brand-on-accent)] transition-opacity hover:opacity-90 disabled:opacity-50"
                     >
                       {buying === option.id
                         ? "Opening checkout…"
@@ -211,14 +207,14 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
                     type="button"
                     onClick={() => void doCancel()}
                     disabled={cancelState.phase === "loading"}
-                    className="rounded-full bg-red-600 px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                    className="inline-flex min-h-11 items-center rounded-full bg-red-600 px-5 text-base font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
                   >
                     {cancelState.phase === "loading" ? "Cancelling…" : "Yes, cancel it"}
                   </button>
                   <button
                     type="button"
                     onClick={() => setConfirmingCancel(false)}
-                    className="rounded-full border border-sand-300 px-5 py-2 text-sm text-sand-900 dark:border-sand-700 dark:text-sand-50"
+                    className="inline-flex min-h-11 items-center rounded-full border border-sand-300 px-5 text-base text-sand-900 dark:border-sand-700 dark:text-sand-50"
                   >
                     Keep it
                   </button>
@@ -231,7 +227,7 @@ export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props)
               <button
                 type="button"
                 onClick={() => setConfirmingCancel(true)}
-                className="text-sm font-medium text-sand-500 underline underline-offset-4 hover:text-sand-900 dark:hover:text-sand-50"
+                className="inline-flex min-h-11 items-center text-base font-medium text-sand-700 underline underline-offset-4 hover:text-sand-900 dark:text-sand-200 dark:hover:text-sand-50"
               >
                 Cancel this plan
               </button>

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

@@ -9,31 +9,50 @@ export const dynamic = "force-dynamic";
  * outcomes, all of them stated rather than implied: no orders, orders we could
  * read, and orders we could not read.
  */
-import { auth } from "@clerk/nextjs/server";
 import { redirect } from "next/navigation";
+import { buyerUserId } from "@/lib/buyer-session";
 import { listClaimedOrderIds } from "@/lib/checkout-order-claim";
 import { fetchOrder } from "@/vendor/carrier/client";
 import type { EsimOrder, OrderStatus } from "@/vendor/carrier/types";
+import { shortOrderReference, supportOrderHref } from "@/lib/order-reference";
 import { EsimControls } from "./EsimControls";
+import brand from "@/brand.config";
 
 export const metadata = { title: "Dashboard" };
 
+const PAID_DETAIL = "Getting your eSIM ready. You don't need to pay again.";
+
 const STATUS_LABEL: Record<OrderStatus, string> = {
   pending: "Payment received",
   provisioning: "Setting up",
-  ready: "Active",
+  ready: "Ready to install",
   failed: "Needs attention",
 };
 
+function orderState(order: EsimOrder | null): { label: string; detail: string | null } {
+  if (!order) return { label: "Payment received", detail: PAID_DETAIL };
+  if (order.cancelledAt) return { label: "Cancelled", detail: null };
+  switch (order.status) {
+    case "pending":
+      return { label: STATUS_LABEL.pending, detail: PAID_DETAIL };
+    case "provisioning":
+      return { label: STATUS_LABEL.provisioning, detail: PAID_DETAIL };
+    case "ready":
+      return { label: STATUS_LABEL.ready, detail: null };
+    case "failed":
+      return { label: STATUS_LABEL.failed, detail: null };
+    default: {
+      const unknown: never = order.status;
+      return unknown;
+    }
+  }
+}
+
 function EmptyState() {
   return (
     <div className="rounded-2xl border border-sand-200 bg-white p-12 text-center dark:border-sand-800 dark:bg-sand-900">
-      <p className="text-sand-500">No active eSIMs yet.</p>
-      <a
-        href="/shop"
-        className="mt-4 inline-block rounded-full px-6 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
-        style={{ background: "var(--brand-accent)" }}
-      >
+      <p className="text-sand-700 dark:text-sand-200">No active eSIMs yet.</p>
+      <a href="/shop" className="mt-4 inline-flex min-h-11 items-center justify-center rounded-full bg-[var(--brand-accent)] px-6 text-base font-semibold text-[var(--brand-on-accent)] transition-opacity hover:opacity-90">
         Browse plans
       </a>
     </div>
@@ -41,30 +60,26 @@ function EmptyState() {
 }
 
 function OrderRow({ orderId, order }: { orderId: string; order: EsimOrder | null }) {
+  const state = orderState(order);
   return (
     <li className="rounded-2xl border border-sand-200 bg-white p-6 dark:border-sand-800 dark:bg-sand-900">
       <div className="flex flex-wrap items-baseline justify-between gap-2">
         <p className="font-medium text-sand-900 dark:text-sand-50">
-          {order?.planName ?? order?.templateId ?? "eSIM order"}
+          {order?.planName ?? "eSIM order"}
         </p>
-        <span className="text-xs text-sand-500">
-          {order
-            ? order.cancelledAt
-              ? "Cancelled"
-              : STATUS_LABEL[order.status]
-            : "Status unavailable"}
-        </span>
+        <span className="text-xs text-sand-700 dark:text-sand-200">{state.label}</span>
       </div>
-      <p className="mt-1 font-mono text-xs break-all text-sand-400">{orderId}</p>
-      {order?.iccid && <p className="mt-1 text-xs text-sand-500">ICCID {order.iccid}</p>}
+      {state.detail ? <p className="mt-2 text-sm text-sand-700 dark:text-sand-200">{state.detail}</p> : null}
+      <p className="mt-1 text-xs text-sand-600">{shortOrderReference(orderId)}</p>
+      {order?.iccid && <p className="mt-1 text-xs text-sand-700 dark:text-sand-200">ICCID {order.iccid}</p>}
       {!order && (
-        <p className="mt-2 text-xs text-sand-500">
+        <p className="mt-2 text-xs text-sand-700 dark:text-sand-200">
           We couldn&apos;t reach this order just now. Your purchase is safe — try again shortly.
         </p>
       )}
       <a
         href={`/activate/${encodeURIComponent(orderId)}`}
-        className="mt-4 inline-block text-sm font-semibold text-[var(--brand-accent)] hover:underline"
+        className="mt-4 inline-flex min-h-11 items-center text-base font-semibold text-[var(--brand-accent-text)] hover:underline"
       >
         {order?.status === "ready" ? "View QR code" : "View order"} →
       </a>
@@ -79,7 +94,7 @@ function OrderRow({ orderId, order }: { orderId: string; order: EsimOrder | null
 }
 
 export default async function DashboardPage() {
-  const { userId } = await auth();
+  const userId = await buyerUserId();
   if (!userId) redirect("/sign-in?redirect_url=/dashboard");
 
   const orderIds = await listClaimedOrderIds(userId);
@@ -89,7 +104,9 @@ export default async function DashboardPage() {
       return { orderId, order: lookup.ok ? lookup.order : null };
     }),
   );
-  const unreadable = orders.filter((entry) => entry.order === null).length;
+  const missing = orders.filter((entry) => entry.order === null);
+  const unreadable = missing.length;
+  const supportSubject = missing.length === 1 ? missing[0]?.orderId ?? "orders" : "orders";
 
   return (
     <div className="mx-auto max-w-4xl px-4 py-16">
@@ -104,7 +121,10 @@ export default async function DashboardPage() {
           {unreadable > 0 && (
             <p className="mb-6 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-sand-700 dark:text-sand-200">
               We couldn&apos;t load {unreadable === orders.length ? "your orders" : "some of your orders"}{" "}
-              right now. Nothing is lost — refresh in a minute, or contact us with the order number.
+              right now. Nothing is lost — refresh in a minute, or{" "}
+              <a className="inline-flex min-h-11 items-center font-medium text-[var(--brand-accent-text)]" href={supportOrderHref(brand.supportEmail, supportSubject)}>
+                email {brand.supportEmail}
+              </a>
             </p>
           )}
           <ul className="space-y-4">

package/templates/storefront/src/app/globals.css

@@ -37,10 +37,18 @@
     --brand-accent: #FF6B35;
     --brand-accent-dark: #D9461C;
     --brand-accent-light: #FFB088;
+    /* #111111 on #FF6B35 is 6.66:1. White on that fill is 2.84:1. */
+    --brand-on-accent: #111111;
+    /* #C2410C is 5.18:1 on white and 4.95:1 on #FAFAF7. */
+    --brand-accent-text: #C2410C;
+    /* #C2410C is 4.95:1 on the light page. Dark focus is set below. */
+    --brand-focus: #C2410C;
   }
 
   html[data-theme="dark"] {
     color-scheme: dark;
+    --brand-accent-text: #FF8A5C;
+    --brand-focus: #FF8A5C;
   }
 
   * { box-sizing: border-box; }
@@ -74,11 +82,6 @@
     background-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
   }
 
-  :focus-visible {
-    outline: 2px solid var(--brand-accent);
-    outline-offset: 2px;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
@@ -87,3 +90,39 @@
     }
   }
 }
+
+/* Unlayered so these beat Tailwind utilities.
+   Fields under 16px make iOS zoom. Tap targets under 44px fail the phone pass. */
+html,
+body {
+  max-width: 100%;
+  overflow-x: clip;
+}
+
+header :where(a, button),
+footer :where(a, button),
+#main-content :where(a, button) {
+  min-height: 2.75rem;
+}
+
+#main-content :where(input, select, textarea) {
+  font-size: 1rem;
+  min-height: 2.75rem;
+}
+
+/* Unlayered so the ring beats any utility, including outline-none.
+   Dark accent text is #FF8A5C. #C2410C is only 3.43:1 on #1A1812.
+   Dark focus is #FFB088 (8.18:1 on #2C291F). #C2410C is 2.81:1 on that sand.
+   sand-500 #78725F is 3.69:1 on #1A1812. #9C9480 is 5.88:1 there and 4.82:1 on #2C291F.
+   sand-600 #5C5644 is 2.64:1 on #0F0E0A. #A39A86 is 6.92:1 there. */
+html[data-theme="dark"] {
+  --brand-accent-text: #FF8A5C;
+  --brand-focus: #FFB088;
+  --color-sand-500: #9C9480;
+  --color-sand-600: #A39A86;
+}
+
+:focus-visible {
+  outline: 2px solid var(--brand-focus);
+  outline-offset: 2px;
+}

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

@@ -17,11 +17,11 @@ export default function HelpPage() {
       <HowItWorks />
       <div className="mx-auto max-w-3xl px-4 pt-10 text-sm text-sand-600 dark:text-sand-400">
         Need a human?{" "}
-        <a href={`mailto:${brand.supportEmail}`} className="font-medium" style={{ color: "var(--brand-accent)" }}>
+        <a href={`mailto:${brand.supportEmail}`} className="font-medium" style={{ color: "var(--brand-accent-text)" }}>
           {brand.supportEmail}
         </a>
         {" · "}
-        <a href="/contact" className="font-medium" style={{ color: "var(--brand-accent)" }}>
+        <a href="/contact" className="font-medium" style={{ color: "var(--brand-accent-text)" }}>
           All channels
         </a>
       </div>

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

@@ -9,8 +9,11 @@ import { BrandStyles } from "@/components/theme/BrandStyles";
 import { StorefrontNav } from "@/components/nav/StorefrontNav";
 import { StorefrontFooter } from "@/components/footer/StorefrontFooter";
 import brand from "@/brand.config";
+import { applyClerkInstanceEnv } from "@/lib/clerk-instance";
 import "./globals.css";
 
+applyClerkInstanceEnv();
+
 export const metadata: Metadata = {
   title: {
     default: `${brand.name} — ${brand.tagline}`,
@@ -46,12 +49,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <ThemeScript />
         <BrandStyles />
       </head>
-      <body>
+      <body className="overflow-x-clip">
         <Providers>
           <a
             href="#main-content"
-            className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-20 focus:z-[100] focus:rounded-lg focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-white"
-            style={{ background: "var(--brand-accent)" }}
+            className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-20 focus:z-[100] focus:inline-flex focus:min-h-11 focus:items-center focus:rounded-lg focus:bg-[var(--brand-accent)] focus:px-4 focus:text-base focus:font-semibold focus:text-[var(--brand-on-accent)]"
           >
             Skip to main content
           </a>

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

@@ -2,33 +2,53 @@ import { HeroSection } from "@/components/landing/HeroSection";
 import { HowItWorks } from "@/components/landing/HowItWorks";
 import { FinalCTA } from "@/components/landing/FinalCTA";
 import { FaqSection } from "@/components/faq/FaqSection";
+import { CountrySearch } from "@/components/shop/CountrySearch";
 import { fetchTemplates } from "@/vendor/carrier/client";
+import { TierPlanBoard } from "@/components/landing/TierPlanBoard";
 import { PlanCard } from "@/components/landing/PlanCard";
+import brand from "@/brand.config";
+import { catalogCanSearchCountries, countryCatalogMode } from "@/lib/catalog-countries";
+import { presentTierCatalog } from "@/vendor/carrier/tiers";
 
 export default async function HomePage() {
   const plans = await fetchTemplates();
-  const featured = plans.slice(0, 3);
+  const untiered = presentTierCatalog(plans, { lightningEnabled: brand.lightningTier }).untiered;
+  const showCountries = catalogCanSearchCountries(
+    plans,
+    countryCatalogMode(process.env.NEXT_PUBLIC_COUNTRY_CATALOG),
+  );
 
   return (
     <>
       <HeroSection />
 
+      {showCountries && (
+        <section className="py-16">
+          <CountrySearch plans={plans} />
+        </section>
+      )}
+
       <section className="px-4 py-20">
         <div className="mx-auto max-w-6xl">
-          <p className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-sand-500">
+          <p className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-sand-700 dark:text-sand-200">
             Plans
           </p>
           <h2 className="mt-2 text-center text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
             Popular plans
           </h2>
-          <p className="mx-auto mt-3 max-w-lg text-center text-sand-600 dark:text-sand-400">
+          <p className="mx-auto mt-3 max-w-lg text-center text-sand-700 dark:text-sand-200">
             Instant activation. No contracts. Price next to the limit.
           </p>
-          <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
-            {featured.map((plan, i) => (
-              <PlanCard key={plan.id} plan={plan} featured={i === 1} href={`/checkout/${plan.id}`} />
-            ))}
+          <div className="mt-12">
+            <TierPlanBoard plans={plans} mode="link" lightningEnabled={brand.lightningTier} />
           </div>
+          {untiered.length > 0 ? (
+            <div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-3">
+              {untiered.map((plan) => (
+                <PlanCard key={plan.id} plan={plan} href={`/checkout/${plan.id}`} />
+              ))}
+            </div>
+          ) : null}
         </div>
       </section>