@ticketboothapp/booking 1.2.60 → 1.2.62

package/src/components/booking/ChangeBookingPricingDriftPanel.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { formatCurrencyAmount } from '../../lib/currency';
+import { roundMoney } from '../../lib/booking/change-flow-pricing';
+import type { ChangeBookingPricingDriftRow } from '../../lib/booking/change-booking-pricing-drift';
+import type { ChangeBookingQuoteTicketPricingTrace } from '../../lib/booking-api';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '../../lib/booking/i18n/config';
+
+export type ChangeBookingDriftTicketCartRow = {
+  category: string;
+  qty: number;
+  /** List/catalog unit from the current ticket picker (major units). */
+  listUnitMajor: number;
+  /** Effective unit after change-flow rules (line total ÷ qty). */
+  effectiveUnitMajor: number;
+  lineTotalMajor: number;
+};
+
+function fmt(amount: number | null | undefined, currency: Currency, locale: Locale): string {
+  if (amount == null || !Number.isFinite(amount)) return '—';
+  return formatCurrencyAmount(amount, currency, locale);
+}
+
+export function ChangeBookingPricingDriftPanel(props: {
+  rows: ChangeBookingPricingDriftRow[];
+  /** Client / app rolled-up new booking total (major units). */
+  clientTotal?: number;
+  /** Server price-check total (major units). */
+  serverTotal?: number;
+  /** clientTotal − serverTotal when both defined. */
+  totalDelta?: number | null;
+  currency: Currency;
+  locale: Locale;
+  /** Optional title above the table. */
+  title?: ReactNode;
+  /** Extra note under the table (e.g. data source for temporary BE comparison payloads). */
+  footnote?: ReactNode;
+  /** Per-category ticket math from the live app cart (qty, list unit, effective unit, line total). */
+  ticketCartDetail?: ChangeBookingDriftTicketCartRow[];
+  /** Optional BE snapshot: locked vs live units and Rule A/B branch (when API sends `ticketPricingTrace`). */
+  serverTicketPricingTrace?: ChangeBookingQuoteTicketPricingTrace | null;
+}): ReactNode {
+  const {
+    rows,
+    clientTotal,
+    serverTotal,
+    totalDelta,
+    currency,
+    locale,
+    title = 'Where the difference comes from (app vs server price check)',
+    footnote,
+    ticketCartDetail,
+    serverTicketPricingTrace,
+  } = props;
+
+  const showTotals =
+    clientTotal != null &&
+    serverTotal != null &&
+    totalDelta != null &&
+    Math.abs(totalDelta) >= 0.005;
+
+  if (rows.length === 0 && !showTotals) return null;
+
+  const showTicketCols = rows.some((r) => r.key.startsWith('ticket:'));
+
+  function unitFmt(amount: number | null | undefined, qty: number | null | undefined): string {
+    if (amount == null || qty == null || qty <= 0 || !Number.isFinite(amount)) return '—';
+    return fmt(roundMoney(amount / qty), currency, locale);
+  }
+
+  return (
+    <div className="mt-3 rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm shadow-sm">
+      <div className="mb-2 font-medium text-stone-800">{title}</div>
+      <div className="mb-3 rounded-md border border-sky-100 bg-sky-50/80 px-2.5 py-2 text-[11px] leading-snug text-stone-800">
+        <span className="font-semibold text-stone-900">Why these differ — </span>
+        List = catalog for this slot; effective = per-seat charge after change rules (floors, date/option). When the API
+        sends <span className="font-mono text-[10px]">ticketPricingTrace</span>, compare BE live vs locked units below.
+        Tiny drift can still be rounding (per ticket vs rolled-up line).
+      </div>
+      {ticketCartDetail && ticketCartDetail.length > 0 ? (
+        <div className="mb-4 rounded-md border border-stone-100 bg-stone-50/80 px-2 py-2">
+          <div className="mb-1.5 text-xs font-medium text-stone-700">In-app ticket math (change flow)</div>
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[320px] border-collapse text-left text-[11px] text-stone-700">
+              <thead>
+                <tr className="border-b border-stone-200 text-[10px] uppercase tracking-wide text-stone-500">
+                  <th className="py-1 pr-2 font-medium">Category</th>
+                  <th className="py-1 pr-2 text-right font-medium">Qty</th>
+                  <th className="py-1 pr-2 text-right font-medium">List / ticket</th>
+                  <th className="py-1 pr-2 text-right font-medium">Effective / ticket</th>
+                  <th className="py-1 text-right font-medium">Line total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {ticketCartDetail.map((r) => (
+                  <tr key={r.category} className="border-t border-stone-100">
+                    <td className="py-1.5 pr-2">{r.category}</td>
+                    <td className="py-1.5 pr-2 text-right tabular-nums">{r.qty}</td>
+                    <td className="py-1.5 pr-2 text-right tabular-nums">{fmt(r.listUnitMajor, currency, locale)}</td>
+                    <td className="py-1.5 pr-2 text-right tabular-nums">{fmt(r.effectiveUnitMajor, currency, locale)}</td>
+                    <td className="py-1.5 text-right tabular-nums font-medium">{fmt(r.lineTotalMajor, currency, locale)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <p className="mt-1.5 text-[10px] leading-snug text-stone-500">
+            List uses current picker pricing; effective is ticket line total ÷ qty (receipt floors / option rules).
+          </p>
+        </div>
+      ) : null}
+      {serverTicketPricingTrace && serverTicketPricingTrace.ticketLines.length > 0 ? (
+        <div className="mb-4 rounded-md border border-emerald-100 bg-emerald-50/70 px-2 py-2">
+          <div className="mb-1.5 text-xs font-medium text-emerald-950">Server ticket math (BE trace)</div>
+          <p className="mb-2 text-[10px] leading-snug text-emerald-950/90">
+            Same parent product:{' '}
+            <span className="font-semibold">{serverTicketPricingTrace.sameParentProduct ? 'yes' : 'no'}</span>
+            {' · '}
+            Unchanged itinerary:{' '}
+            <span className="font-semibold">{serverTicketPricingTrace.unchangedItinerary ? 'yes' : 'no'}</span>
+            <br />
+            Parents{' '}
+            <span className="font-mono text-[10px]">
+              {serverTicketPricingTrace.bookingParentProductId} → {serverTicketPricingTrace.requestedParentProductId}
+            </span>
+            {' · '}
+            Options{' '}
+            <span className="font-mono text-[10px]">
+              {serverTicketPricingTrace.bookingOptionId} → {serverTicketPricingTrace.requestedOptionId}
+            </span>
+          </p>
+          {serverTicketPricingTrace.lockedTicketUnitPriceByCategory &&
+          Object.keys(serverTicketPricingTrace.lockedTicketUnitPriceByCategory).length > 0 ? (
+            <p className="mb-2 font-mono text-[10px] text-emerald-950/90">
+              Locked from receipt:{' '}
+              {Object.entries(serverTicketPricingTrace.lockedTicketUnitPriceByCategory)
+                .map(([k, v]) => `${k}=${fmt(v, currency, locale)}`)
+                .join(' · ')}
+            </p>
+          ) : null}
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[360px] border-collapse text-left text-[11px] text-emerald-950">
+              <thead>
+                <tr className="border-b border-emerald-200 text-[10px] uppercase tracking-wide text-emerald-800/90">
+                  <th className="py-1 pr-2 font-medium">Cat</th>
+                  <th className="py-1 pr-2 font-medium">Rule</th>
+                  <th className="py-1 pr-2 text-right font-medium">Live/u</th>
+                  <th className="py-1 pr-2 text-right font-medium">Lock/u</th>
+                  <th className="py-1 pr-2 text-right font-medium">Prot+incr</th>
+                  <th className="py-1 text-right font-medium">Line amt</th>
+                </tr>
+              </thead>
+              <tbody>
+                {serverTicketPricingTrace.ticketLines.map((ln, i) => (
+                  <tr key={`${ln.category}-${ln.rule}-${i}`} className="border-t border-emerald-100">
+                    <td className="py-1.5 pr-2">{ln.category}</td>
+                    <td className="max-w-[140px] py-1.5 pr-2 font-mono text-[10px] leading-tight">{ln.rule}</td>
+                    <td className="py-1.5 pr-2 text-right tabular-nums">{fmt(ln.liveUnitMajorUnits, currency, locale)}</td>
+                    <td className="py-1.5 pr-2 text-right tabular-nums">
+                      {ln.lockedUnitMajorUnits != null ? fmt(ln.lockedUnitMajorUnits, currency, locale) : '—'}
+                    </td>
+                    <td className="py-1.5 pr-2 text-right tabular-nums text-emerald-900/90">
+                      {ln.protectedQty}+{ln.incrementalQty}
+                    </td>
+                    <td className="py-1.5 text-right tabular-nums font-medium">
+                      {fmt(ln.ticketLineAmountMajorUnits, currency, locale)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ) : null}
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[280px] border-collapse text-left text-xs text-stone-700">
+          <thead>
+            <tr className="border-b border-stone-200 text-[11px] uppercase tracking-wide text-stone-500">
+              <th className="py-1.5 pr-2 font-medium">Line</th>
+              {showTicketCols ? (
+                <>
+                  <th className="py-1.5 pr-2 text-right font-medium">Qty</th>
+                  <th className="py-1.5 pr-2 text-right font-medium">App / ticket</th>
+                  <th className="py-1.5 pr-2 text-right font-medium">Srv / ticket</th>
+                </>
+              ) : null}
+              <th className="py-1.5 pr-2 text-right font-medium">In app</th>
+              <th className="py-1.5 pr-2 text-right font-medium">Server</th>
+              <th className="py-1.5 text-right font-medium">Δ</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r) => {
+              const highlight = r.delta != null && Math.abs(r.delta) >= 0.005;
+              const isTicketRow = r.key.startsWith('ticket:');
+              const qtyDisp =
+                r.clientQty != null && r.clientQty > 0
+                  ? r.clientQty
+                  : r.serverQty != null && r.serverQty > 0
+                    ? r.serverQty
+                    : null;
+              return (
+                <tr
+                  key={r.key}
+                  className={
+                    highlight ? 'border-t border-stone-100 bg-amber-50/80' : 'border-t border-stone-100'
+                  }
+                >
+                  <td className="max-w-[200px] py-1.5 pr-2 align-top">{r.label}</td>
+                  {showTicketCols ? (
+                    <>
+                      <td className="whitespace-nowrap py-1.5 pr-2 text-right tabular-nums text-stone-600">
+                        {isTicketRow && qtyDisp != null ? qtyDisp : '—'}
+                      </td>
+                      <td className="whitespace-nowrap py-1.5 pr-2 text-right tabular-nums text-stone-600">
+                        {isTicketRow ? unitFmt(r.clientAmount, r.clientQty ?? qtyDisp) : '—'}
+                      </td>
+                      <td className="whitespace-nowrap py-1.5 pr-2 text-right tabular-nums text-stone-600">
+                        {isTicketRow ? unitFmt(r.serverAmount, r.serverQty ?? qtyDisp) : '—'}
+                      </td>
+                    </>
+                  ) : null}
+                  <td className="whitespace-nowrap py-1.5 pr-2 text-right tabular-nums">
+                    {fmt(r.clientAmount, currency, locale)}
+                  </td>
+                  <td className="whitespace-nowrap py-1.5 pr-2 text-right tabular-nums">
+                    {fmt(r.serverAmount, currency, locale)}
+                  </td>
+                  <td
+                    className={`whitespace-nowrap py-1.5 text-right tabular-nums ${
+                      highlight ? 'font-medium text-amber-950' : 'text-stone-500'
+                    }`}
+                  >
+                    {r.delta != null && Number.isFinite(r.delta) ? fmt(r.delta, currency, locale) : '—'}
+                  </td>
+                </tr>
+              );
+            })}
+            {showTotals ? (
+              <tr className="border-t-2 border-stone-300 bg-stone-50 font-semibold text-stone-900">
+                <td className="py-2 pr-2">New booking total</td>
+                {showTicketCols ? (
+                  <>
+                    <td className="py-2 pr-2" />
+                    <td className="py-2 pr-2" />
+                    <td className="py-2 pr-2" />
+                  </>
+                ) : null}
+                <td className="py-2 pr-2 text-right tabular-nums">{fmt(clientTotal, currency, locale)}</td>
+                <td className="py-2 pr-2 text-right tabular-nums">{fmt(serverTotal, currency, locale)}</td>
+                <td className="py-2 text-right tabular-nums text-amber-950">{fmt(totalDelta ?? null, currency, locale)}</td>
+              </tr>
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+      <p className="mt-2 text-[11px] leading-snug text-stone-500">
+        Δ is <span className="font-medium">in app minus server</span>. Rows highlighted when the difference is at least
+        one cent.
+      </p>
+      {footnote ? (
+        <p className="mt-1 text-[11px] leading-snug text-stone-600">{footnote}</p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/booking/CheckoutForm.tsx

@@ -71,6 +71,8 @@ interface CheckoutFormProps {
   hideSubmitButton?: boolean;
   /** Extra disabled state (e.g. change-booking quote still loading) without showing reservation spinner */
   submitDisabled?: boolean;
+  /** When set, replaces the price summary block entirely (e.g. self-serve change — no FE dollar amounts). */
+  replacePriceSummary?: ReactNode;
   attributionSummary?: string;
   attributionConfirmLabel?: string;
   attributionConfirmed?: boolean;
@@ -125,6 +127,7 @@ export function CheckoutForm({
   submitLabel,
   hideSubmitButton = false,
   submitDisabled = false,
+  replacePriceSummary,
   attributionSummary,
   attributionConfirmLabel,
   attributionConfirmed = false,
@@ -141,25 +144,32 @@ export function CheckoutForm({
   return (
     <div className={styles.section}>
       <div className={styles.summaryWrapper}>
-        <PriceSummary
-          lines={priceSummaryLines}
-          total={totalPrice}
-          currency={currency}
-          locale={locale as 'en' | 'fr'}
-          subtotal={subtotal}
-          taxAmount={taxAmount}
-          taxRate={taxRate}
-          size="sm"
-          t={t}
-          extraBetweenTaxAndTotal={extraBetweenTaxAndTotal}
-          totalLabel={totalSummaryLabel}
-          extraAfterTotal={extraAfterTotal}
-          lineAmountInputs={lineAmountInputs}
-          onLineAmountInputChange={onLineAmountInputChange}
-          onLineAmountInputBlur={onLineAmountInputBlur}
-          onLineAmountReset={onLineAmountReset}
-          extraBeforeSubtotal={extraBeforeSubtotal}
-        />
+        {replacePriceSummary ? (
+          <>
+            {replacePriceSummary}
+            <div className="mt-4">{extraBetweenTaxAndTotal}</div>
+          </>
+        ) : (
+          <PriceSummary
+            lines={priceSummaryLines}
+            total={totalPrice}
+            currency={currency}
+            locale={locale as 'en' | 'fr'}
+            subtotal={subtotal}
+            taxAmount={taxAmount}
+            taxRate={taxRate}
+            size="sm"
+            t={t}
+            extraBetweenTaxAndTotal={extraBetweenTaxAndTotal}
+            totalLabel={totalSummaryLabel}
+            extraAfterTotal={extraAfterTotal}
+            lineAmountInputs={lineAmountInputs}
+            onLineAmountInputChange={onLineAmountInputChange}
+            onLineAmountInputBlur={onLineAmountInputBlur}
+            onLineAmountReset={onLineAmountReset}
+            extraBeforeSubtotal={extraBeforeSubtotal}
+          />
+        )}
       </div>
 
       {/* Contact info */}

package/src/components/booking/CurrencySwitcher.tsx

@@ -14,7 +14,7 @@ const CURRENCY_NAMES: Record<Currency, string> = {
   AUD: 'AUD',
 };
 
-const DEFAULT_CURRENCY: Currency = 'CAD';
+export const DEFAULT_CURRENCY: Currency = 'CAD';
 
 export function useCurrency() {
   const [currency, setCurrencyState] = useState<Currency>(DEFAULT_CURRENCY);

package/src/components/booking/MealDrinkAddOnSelector.tsx

@@ -26,6 +26,7 @@ export interface MealDrinkAddOnSelectorProps {
   sectionLabel?: string;
   /** Minimum total quantity locked by original booking in change flow. */
   minimumTotal?: number;
+  suppressPrices?: boolean;
 }
 
 /**
@@ -163,6 +164,7 @@ export function MealDrinkAddOnSelector({
     `Of your ${total} lunch${total !== 1 ? 'es' : ''}, how many with Water vs Gatorade?`,
   sectionLabel = '🍽️ Order lunch?',
   minimumTotal = 0,
+  suppressPrices = false,
 }: MealDrinkAddOnSelectorProps) {
   const parsed = useMemo(
     () => (addOn.variantType === 'multi_quantity' && addOn.variants ? parseTwoStepVariants(addOn.variants) : null),
@@ -225,7 +227,7 @@ export function MealDrinkAddOnSelector({
                 <div key={opt.id} className="flex items-center gap-3">
                   <span className="font-medium text-stone-800">{opt.label}</span>
                   <span className="text-sm text-stone-500 shrink-0">
-                    {formatCurrencyAmount(price, currency, locale)} ea
+                    {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale)} ea`}
                   </span>
                   <div className="flex items-center gap-1 shrink-0">
                     <button
@@ -329,7 +331,7 @@ export function MealDrinkAddOnSelector({
 
         {totalStep1 > 0 && totalStep2 === totalStep1 && (
           <p className="text-sm font-medium text-stone-700">
-            Total: {formatCurrencyAmount(price * totalStep1, currency, locale)}
+            {suppressPrices ? 'Total: —' : `Total: ${formatCurrencyAmount(price * totalStep1, currency, locale)}`}
           </p>
         )}
       </div>