Agent Session: Localized Checkout

"use client";

import { AgentSession, AgentSessionTarget, type AgentSessionStep } from "@/components/ui/agent-session";

const script: AgentSessionStep[] = [
  { prompt: "Translate the checkout into German, with prices in euros" },
  {
    run: "npx glossa extract app/checkout",
    ms: 800,
    output: ["14 strings in 3 files", "2 prices · 1 date format"],
  },
  {
    run: "npx glossa translate de --glossary brand.json",
    ms: 1300,
    output: [{ text: "+ messages/de.json   14 strings · reviewed against glossary", tone: "added" }],
  },
  {
    run: "app/checkout/page.tsx",
    tool: "Update",
    ms: 600,
    pace: 300,
    output: [
      { text: '~ "Contact" → "Kontakt"', effect: "contact" },
      { text: '~ "Email" → "E-Mail"', effect: "email" },
      { text: '~ "Shipping" → "Versand"', effect: "shipping" },
      { text: '~ "3–5 days" → "3–5 Werktage"', effect: "days" },
      { text: '~ "$128.00" → "118,00 €"', effect: "total" },
      { text: '~ "Pay now" → "Jetzt bezahlen"', effect: "pay" },
    ],
  },
  {
    say: "The checkout reads in German now, with euro prices from your price list. Delivery says Werktage, business days, which is how German shops write it.",
  },
];

/** The English label until its line lands, then the German one. */
function Swap({ effect, from, to, className }: { effect: string; from: string; to: string; className?: string }) {
  return (
    <AgentSessionTarget effect={effect} fallback={<span className={className}>{from}</span>} className="justify-items-start">
      <span className={className}>{to}</span>
    </AgentSessionTarget>
  );
}

export function AgentSessionLocaleDemo() {
  return (
    <AgentSession
      script={script}
      title="field-and-fold — agent"
      url="localhost:3000/de/checkout"
      className="max-w-5xl [--agent-session-accent:#0d9488] dark:[--agent-session-accent:#2dd4bf]"
    >
      <div className="flex h-full items-start justify-center overflow-hidden bg-stone-50 p-4 text-stone-900 dark:bg-stone-950/40 dark:text-stone-100">
        <div className="w-full max-w-xs">
          <div className="mb-3 flex items-center justify-between">
            <p className="font-serif text-base tracking-tight">Field &amp; Fold</p>
            <p className="text-[11px] text-stone-500">1 item</p>
          </div>

          <div className="flex flex-col gap-3 rounded-2xl bg-white p-3.5 ring-1 ring-stone-950/[0.07] shadow-sm dark:bg-white/[0.04] dark:ring-white/10">
            <section className="flex flex-col gap-1.5">
              <Swap effect="contact" from="Contact" to="Kontakt" className="text-xs font-semibold" />
              <div className="flex h-8 items-center rounded-lg px-2.5 ring-1 ring-stone-950/10 dark:ring-white/10">
                <Swap effect="email" from="Email" to="E-Mail" className="text-[11px] text-stone-400" />
                <span className="ml-auto text-[11px] text-stone-600 dark:text-stone-300">lena@posteo.de</span>
              </div>
            </section>

            <section className="flex flex-col gap-1.5">
              <Swap effect="shipping" from="Shipping" to="Versand" className="text-xs font-semibold" />
              <div className="flex items-center justify-between rounded-lg bg-stone-50 px-2.5 py-2 ring-1 ring-stone-950/10 dark:bg-white/[0.03] dark:ring-white/10">
                <div className="flex flex-col">
                  <span className="text-[11px] font-medium">Standard</span>
                  <Swap effect="days" from="3–5 days" to="3–5 Werktage" className="text-[11px] text-stone-500" />
                </div>
                <span className="text-[11px] text-stone-500">0,00 €</span>
              </div>
            </section>

            <div className="flex items-baseline justify-between border-t border-stone-950/[0.06] pt-3 dark:border-white/10">
              <span className="text-xs text-stone-500">Wool overshirt, oat</span>
              <Swap effect="total" from="$128.00" to="118,00 €" className="text-sm font-semibold tabular-nums" />
            </div>

            <AgentSessionTarget
              effect="pay"
              className="[--agent-session-ring-radius:999px]"
              fallback={<PayButton label="Pay now" />}
            >
              <PayButton label="Jetzt bezahlen" />
            </AgentSessionTarget>
          </div>
        </div>
      </div>
    </AgentSession>
  );
}

function PayButton({ label }: { label: string }) {
  return (
    <span className="flex h-9 w-full items-center justify-center rounded-full bg-stone-900 text-xs font-medium text-white dark:bg-stone-100 dark:text-stone-900">
      {label}
    </span>
  );
}