@carrierllc/mcp 0.13.40 → 0.13.47

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

@@ -2,18 +2,20 @@
 /**
  * CheckoutSuccessClient
  *
- * Shown after Stripe payment success.
+ * Shown after a paid Stripe Checkout session for this shop.
  *
- * - If already signed in: redirect immediately to /activate/[orderId].
- * - If not signed in: show email + password sign-up form (no phone).
- *   After sign-up or sign-in, redirect to /activate/[orderId].
+ * The confirmation stays on screen for signed-in and signed-out buyers.
+ * Creating an account is an inline step so the buyer can install the eSIM;
+ * it does not take another payment.
  *
- * The orderId is verified server-side before this component renders.
+ * The order reference drawn here is a short tail. The full session id is only
+ * used in the activate URL.
  */
-import { useState, FormEvent, useEffect, useCallback } from "react";
+import { useState, FormEvent, useEffect, useCallback, useRef } from "react";
 import { useSignUp, useSignIn } from "@clerk/nextjs";
 import { useClerk, useAuth } from "@clerk/nextjs";
 import { useRouter } from "next/navigation";
+import { accountStepError, buyerFacingError, shortOrderReference } from "@/lib/checkout-copy";
 import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
 
 type AuthMode = "signup" | "signin";
@@ -24,6 +26,65 @@ interface Props {
   sessionId: string;
   templateId: string;
   purchaserEmail: string | null;
+  supportHref: string;
+}
+
+class ClaimFailure extends Error {
+  readonly status: number;
+  constructor(status: number) {
+    super("claim failed");
+    this.name = "ClaimFailure";
+    this.status = status;
+  }
+}
+
+const filledButtonClass =
+  "inline-flex min-h-11 w-full items-center justify-center rounded-lg px-4 text-base font-semibold disabled:opacity-50";
+const filledButtonStyle = { background: "var(--brand-accent)", color: "var(--brand-on-accent)" };
+const fieldClass =
+  "w-full min-h-11 rounded-lg border border-sand-500 bg-sand-50 px-3 text-base text-sand-900 placeholder:text-sand-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand-accent-text)] dark:bg-sand-950 dark:text-sand-50 dark:placeholder:text-sand-200";
+
+function FieldError({ id, message }: { id: string; message: string | null }) {
+  if (!message) return null;
+  return (
+    <p
+      id={id}
+      role="alert"
+      aria-live="polite"
+      className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-base text-[#9F1239] dark:text-[#FECDD3]"
+    >
+      {message}
+    </p>
+  );
+}
+
+function Confirmation({ reference, supportHref }: { reference: string; supportHref: string }) {
+  const heading = useRef<HTMLHeadingElement>(null);
+  useEffect(() => {
+    heading.current?.focus();
+  }, []);
+  return (
+    <div role="status" className="rounded-2xl border border-sand-200 bg-white px-6 py-4 text-center dark:border-sand-800 dark:bg-sand-900">
+      <h1 ref={heading} tabIndex={-1} className="text-lg font-semibold text-[#166534] dark:text-[#BBF7D0]">
+        Payment confirmed
+      </h1>
+      <p className="mt-1 text-base text-sand-700 dark:text-sand-200">
+        Your payment is complete. No further charge is made on this page.
+      </p>
+      <p className="mt-2 max-w-full truncate font-mono text-base text-sand-700 dark:text-sand-200">
+        Order {reference}
+      </p>
+      <p className="mt-2 text-base text-sand-700 dark:text-sand-200">
+        Next, save this eSIM to an account. We email the QR code once that account is ready.
+      </p>
+      <a
+        href={supportHref}
+        className="mt-4 inline-flex min-h-11 items-center justify-center text-base text-[var(--brand-accent-text)]"
+      >
+        Contact support
+      </a>
+    </div>
+  );
 }
 
 export function CheckoutSuccessClient({
@@ -31,6 +92,7 @@ export function CheckoutSuccessClient({
   sessionId,
   templateId,
   purchaserEmail,
+  supportHref,
 }: Props) {
   const { isLoaded: authLoaded, isSignedIn } = useAuth();
   const { signUp, isLoaded: signUpLoaded } = useSignUp();
@@ -38,6 +100,7 @@ export function CheckoutSuccessClient({
   const { setActive } = useClerk();
   const router = useRouter();
 
+  const reference = shortOrderReference(orderId);
   const activateUrl = `/activate/${encodeURIComponent(orderId)}`;
   const [mode, setMode] = useState<AuthMode>("signup");
   const [flowStep, setStep] = useState<FlowStep>("idle");
@@ -52,21 +115,25 @@ export function CheckoutSuccessClient({
   const emailLocked = Boolean(purchaserEmail);
 
   const claimOrderAndRedirect = useCallback(async () => {
-      const res = await fetch("/api/checkout/claim", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sessionId, templateId }),
-      });
-      if (!res.ok) {
-        const err = (await res.json()) as { error?: string };
-        throw new Error(err.error ?? "Failed to link your purchase to this account");
+    const res = await fetch("/api/checkout/claim", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId, templateId }),
+    });
+    if (!res.ok) {
+      try {
+        await res.json();
+      } catch {
+        // Unreadable bodies are not buyer copy.
       }
-      router.replace(activateUrl);
+      throw new ClaimFailure(res.status);
+    }
+    router.replace(activateUrl);
   }, [activateUrl, router, sessionId, templateId]);
 
   const handleClaimError = useCallback((err: unknown) => {
     setStep("claim-error");
-    setError(err instanceof Error ? err.message : "Failed to link your purchase to this account");
+    setError(buyerFacingError(err instanceof ClaimFailure ? err.status : 0));
   }, []);
 
   async function startClaimAndRedirect() {
@@ -75,7 +142,6 @@ export function CheckoutSuccessClient({
     await claimOrderAndRedirect().catch(handleClaimError);
   }
 
-  // If already signed in, claim the paid order before activating.
   useEffect(() => {
     if (!authLoaded) return;
     if (isSignedIn) {
@@ -83,17 +149,6 @@ export function CheckoutSuccessClient({
     }
   }, [authLoaded, isSignedIn, claimOrderAndRedirect, handleClaimError]);
 
-  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."
-    );
-  }
-
-  // ── Sign-up flow ──────────────────────────────────────────────────────────
-
   async function handleSignUp(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     if (!signUpLoaded || !signUp) return;
@@ -108,7 +163,7 @@ export function CheckoutSuccessClient({
       await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
       setStep("verify");
     } catch (err) {
-      setError(clerkErrMsg(err));
+      setError(accountStepError(err));
     } finally {
       setLoading(false);
     }
@@ -129,14 +184,12 @@ export function CheckoutSuccessClient({
         setError(completion.message);
       }
     } catch (err) {
-      setError(clerkErrMsg(err));
+      setError(accountStepError(err));
     } finally {
       setLoading(false);
     }
   }
 
-  // ── Sign-in flow ──────────────────────────────────────────────────────────
-
   async function handleSignIn(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     if (!signInLoaded || !signIn) return;
@@ -158,107 +211,86 @@ export function CheckoutSuccessClient({
         setError("Sign-in incomplete. Please try again.");
       }
     } catch (err) {
-      setError(clerkErrMsg(err));
+      setError(accountStepError(err));
     } finally {
       setLoading(false);
     }
   }
 
-  // ── Render ────────────────────────────────────────────────────────────────
+  const invalid = error ? true : undefined;
+  const showAccount = step === "credentials" || step === "verify";
 
-  if (step === "idle" || step === "redirecting") {
-    return (
-      <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">
-            {step === "redirecting" ? "Activating your eSIM…" : "Loading…"}
-          </p>
-        </div>
-      </div>
-    );
-  }
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-16">
+      <div className="w-full max-w-md space-y-6">
+        <Confirmation reference={reference} supportHref={supportHref} />
 
-  if (step === "claim-error") {
-    return (
-      <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-16">
-        <div className="w-full max-w-md space-y-6 text-center">
-          <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4">
-            <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
+        {step === "idle" || step === "redirecting" ? (
+          <div className="text-center">
+            <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
+            <p className="mt-3 text-base text-sand-700 dark:text-sand-200">
+              {step === "redirecting" ? "Activating your eSIM…" : "Loading…"}
+            </p>
           </div>
-          <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur space-y-4">
-            <p className="text-sm text-sand-700 dark:text-sand-200">We could not link this purchase to your account.</p>
-            {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>
-            )}
+        ) : null}
+
+        {step === "claim-error" ? (
+          <div className="space-y-4 rounded-2xl border border-sand-200 bg-white p-8 text-center dark:border-sand-800 dark:bg-sand-900">
+            <p className="text-base text-sand-700 dark:text-sand-200">
+              We could not link this purchase to your account.
+            </p>
+            <FieldError id="claim-error" message={error} />
             <button
               type="button"
               onClick={() => void startClaimAndRedirect()}
-              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+              className={filledButtonClass}
+              style={filledButtonStyle}
             >
               Try again
             </button>
           </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-16">
-      <div className="w-full max-w-md space-y-6">
-        {/* Payment success banner */}
-        <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4 text-center">
-          <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
-          <p className="mt-1 text-sm text-emerald-200/70">
-            Create an account to activate your eSIM.
-          </p>
-        </div>
+        ) : null}
 
-        {/* Auth card */}
-        <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur">
-          {/* Mode toggle */}
+        {showAccount ? (
+        <div className="rounded-2xl border border-sand-200 bg-white p-8 dark:border-sand-800 dark:bg-sand-900">
           {step === "credentials" && (
-            <div className="flex rounded-lg border border-sand-200 dark:border-sand-800 p-1 mb-6">
+            <div className="mb-6 flex rounded-lg border border-sand-200 p-1 dark:border-sand-800">
               <button
                 type="button"
+                aria-pressed={mode === "signup"}
                 onClick={() => { setMode("signup"); setError(null); }}
-                className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
-                  mode === "signup"
-                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
-                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
+                className={`inline-flex min-h-11 flex-1 items-center justify-center rounded-md text-base font-medium ${
+                  mode === "signup" ? "" : "text-sand-700 dark:text-sand-200"
                 }`}
+                style={mode === "signup" ? filledButtonStyle : undefined}
               >
                 Create account
               </button>
               <button
                 type="button"
+                aria-pressed={mode === "signin"}
                 onClick={() => { setMode("signin"); setError(null); }}
-                className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
-                  mode === "signin"
-                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
-                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
+                className={`inline-flex min-h-11 flex-1 items-center justify-center rounded-md text-base font-medium ${
+                  mode === "signin" ? "" : "text-sand-700 dark:text-sand-200"
                 }`}
+                style={mode === "signin" ? filledButtonStyle : undefined}
               >
                 Sign in
               </button>
             </div>
           )}
 
-          {/* Sign-up: credentials step */}
           {step === "credentials" && mode === "signup" && (
             <>
-              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Create your account</h2>
-              <p className="text-xs text-sand-500 mb-5">
+              <h2 className="mb-1 text-base font-semibold text-sand-900 dark:text-sand-50">Create your account</h2>
+              <p className="mb-5 text-base text-sand-700 dark:text-sand-200">
                 {emailLocked
                   ? "Use the email from your checkout to create your account."
-                  : "Email and password — no phone required."}
+                  : "Email and password. No phone required."}
               </p>
               <form onSubmit={handleSignUp} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-email">
+                  <label className="mb-1 block text-base font-medium text-sand-700 dark:text-sand-200" htmlFor="su-email">
                     Email address
                   </label>
                   <input
@@ -269,12 +301,14 @@ export function CheckoutSuccessClient({
                     readOnly={emailLocked}
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                    aria-invalid={invalid}
+                    aria-describedby={error ? "su-error" : undefined}
+                    className={fieldClass}
                     placeholder="you@example.com"
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-password">
+                  <label className="mb-1 block text-base font-medium text-sand-700 dark:text-sand-200" htmlFor="su-password">
                     Password
                   </label>
                   <input
@@ -285,19 +319,18 @@ export function CheckoutSuccessClient({
                     minLength={8}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                    aria-invalid={invalid}
+                    aria-describedby={error ? "su-error" : undefined}
+                    className={fieldClass}
                     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>
-                )}
+                <FieldError id="su-error" message={error} />
                 <button
                   type="submit"
                   disabled={loading || !signUpLoaded}
-                  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"
+                  className={filledButtonClass}
+                  style={filledButtonStyle}
                 >
                   {loading ? "Creating account…" : "Create account & activate eSIM"}
                 </button>
@@ -305,18 +338,17 @@ export function CheckoutSuccessClient({
             </>
           )}
 
-          {/* Sign-in: credentials step */}
           {step === "credentials" && mode === "signin" && (
             <>
-              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Sign in</h2>
-              <p className="text-xs text-sand-500 mb-5">
+              <h2 className="mb-1 text-base font-semibold text-sand-900 dark:text-sand-50">Sign in</h2>
+              <p className="mb-5 text-base text-sand-700 dark:text-sand-200">
                 {emailLocked
                   ? "Sign in with the email from your checkout to activate your eSIM."
                   : "Sign in to activate your eSIM."}
               </p>
               <form onSubmit={handleSignIn} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-email">
+                  <label className="mb-1 block text-base font-medium text-sand-700 dark:text-sand-200" htmlFor="si-email">
                     Email address
                   </label>
                   <input
@@ -327,12 +359,14 @@ export function CheckoutSuccessClient({
                     readOnly={emailLocked}
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                    aria-invalid={invalid}
+                    aria-describedby={error ? "si-error" : undefined}
+                    className={fieldClass}
                     placeholder="you@example.com"
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-password">
+                  <label className="mb-1 block text-base font-medium text-sand-700 dark:text-sand-200" htmlFor="si-password">
                     Password
                   </label>
                   <input
@@ -342,19 +376,18 @@ export function CheckoutSuccessClient({
                     required
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                    aria-invalid={invalid}
+                    aria-describedby={error ? "si-error" : undefined}
+                    className={fieldClass}
                     placeholder="Your password"
                   />
                 </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>
-                )}
+                <FieldError id="si-error" message={error} />
                 <button
                   type="submit"
                   disabled={loading || !signInLoaded}
-                  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"
+                  className={filledButtonClass}
+                  style={filledButtonStyle}
                 >
                   {loading ? "Signing in…" : "Sign in & activate eSIM"}
                 </button>
@@ -362,16 +395,15 @@ export function CheckoutSuccessClient({
             </>
           )}
 
-          {/* Email verification step */}
           {step === "verify" && (
             <>
-              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Check your email</h2>
-              <p className="text-xs text-sand-500 mb-5">
-                We sent a 6-digit code to <span className="text-sand-600 dark:text-sand-300">{email}</span>.
+              <h2 className="mb-1 text-base font-semibold text-sand-900 dark:text-sand-50">Check your email</h2>
+              <p className="mb-5 text-base text-sand-700 dark:text-sand-200">
+                We sent a 6-digit code to <span className="text-[var(--brand-accent-text)]">{email}</span>.
               </p>
               <form onSubmit={handleVerify} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="verify-code">
+                  <label className="mb-1 block text-base font-medium text-sand-700 dark:text-sand-200" htmlFor="verify-code">
                     Verification code
                   </label>
                   <input
@@ -383,19 +415,18 @@ export function CheckoutSuccessClient({
                     maxLength={6}
                     value={code}
                     onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
-                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-center text-lg tracking-[0.4em] text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
+                    aria-invalid={invalid}
+                    aria-describedby={error ? "verify-error" : undefined}
+                    className={`${fieldClass} text-center tracking-[0.4em]`}
                     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>
-                )}
+                <FieldError id="verify-error" message={error} />
                 <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"
+                  className={filledButtonClass}
+                  style={filledButtonStyle}
                 >
                   {loading ? "Verifying…" : "Verify & activate eSIM"}
                 </button>
@@ -403,17 +434,20 @@ export function CheckoutSuccessClient({
               <button
                 type="button"
                 onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
-                className="mt-4 w-full text-center text-xs text-sand-400 hover:text-sand-500"
+                className="mt-4 inline-flex min-h-11 w-full items-center justify-center text-base text-[var(--brand-accent-text)]"
               >
-                ← Back
+                Back
               </button>
             </>
           )}
         </div>
+        ) : null}
 
-        <p className="text-center text-xs text-sand-400">
-          Your payment is confirmed. Account setup is required to receive your eSIM QR code.
-        </p>
+        {showAccount ? (
+          <p className="text-center text-base text-sand-700 dark:text-sand-200">
+            Create an account here to install the eSIM. This step does not charge you again.
+          </p>
+        ) : null}
       </div>
     </div>
   );

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

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+/** The only heading on a confirmation outcome. Focused once, when it mounts. */
+export function FocusHeading({ children }: { children: ReactNode }) {
+  const heading = useRef<HTMLHeadingElement>(null);
+  useEffect(() => {
+    heading.current?.focus();
+  }, []);
+  return (
+    <h1
+      ref={heading}
+      tabIndex={-1}
+      className="text-2xl font-semibold text-sand-900 dark:text-sand-50"
+    >
+      {children}
+    </h1>
+  );
+}