@ticketboothapp/booking 1.2.24 → 1.2.25

package/src/components/booking/ItineraryPlaceholder.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import styles from './ItineraryPlaceholder.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+interface ItineraryPlaceholderProps {
+  formattedDate: string;
+  t: TranslationFn;
+}
+
+export function ItineraryPlaceholder({ formattedDate, t }: ItineraryPlaceholderProps) {
+  return (
+    <div className={styles.box}>
+      <h3 className={styles.title}>
+        {t('booking.buildYourItinerary')}
+        {formattedDate && (
+          <span className={styles.dateSubtitle}> · {formattedDate}</span>
+        )}
+      </h3>
+      <p className={styles.hint}>
+        {t('booking.selectPickupTimeToSeeItinerary') || 'Select a pickup time below to see your schedule.'}
+      </p>
+    </div>
+  );
+}

package/src/components/booking/MealDrinkAddOnSelector.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+import { useMemo, useCallback } from 'react';
+import { formatCurrencyAmount } from '@/lib/currency';
+import type { AddOn, AddOnVariant } from '@/lib/booking-api';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '@/lib/booking/i18n/config';
+
+export interface AddOnSelection {
+  addOnId: string;
+  variantId?: string;
+  quantity?: number;
+}
+
+export interface MealDrinkAddOnSelectorProps {
+  addOn: AddOn;
+  selections: AddOnSelection[];
+  onSelectionsChange: (updater: (prev: AddOnSelection[]) => AddOnSelection[]) => void;
+  currency: Currency;
+  locale: Locale;
+  /** Optional label override for step 1 (default: "Meals") */
+  step1Label?: string;
+  /** Optional label override for step 2 (default: "Of your N lunch(es), how many with Water vs Gatorade?") */
+  step2Label?: (total: number) => string;
+  /** Optional label for the add-on section (default: "Order lunch?") */
+  sectionLabel?: string;
+  /** Minimum total quantity locked by original booking in change flow. */
+  minimumTotal?: number;
+}
+
+/**
+ * Check if an add-on can use the 2-step meal+drink selector UI.
+ */
+export function canUseMealDrinkSelector(addOn: AddOn): boolean {
+  return parseTwoStepVariants(addOn.variants ?? []) !== null;
+}
+
+/**
+ * Parses multi_quantity add-on variants that follow a "{meal} + {drink}" pattern
+ * into step1 (meal types) and step2 (drink types) for a 2-step selection UI.
+ */
+function parseTwoStepVariants(variants: AddOnVariant[]): {
+  step1Options: { id: string; label: string }[];
+  step2Options: { id: string; label: string }[];
+  getVariantId: (step1Id: string, step2Id: string) => string | null;
+} | null {
+  if (!variants?.length) return null;
+
+  const step2Suffixes = ['_water', '_gatorade'];
+  const step1Options: { id: string; label: string }[] = [];
+  const step2Options: { id: string; label: string }[] = [];
+  const variantByKey = new Map<string, string>();
+
+  for (const v of variants) {
+    const labelParts = v.label.split(/\s+\+\s+/);
+    if (labelParts.length !== 2) return null;
+
+    const [step1Label, step2Label] = labelParts.map((s) => s.trim());
+    let step1Id = '';
+    let step2Id = '';
+
+    for (const suffix of step2Suffixes) {
+      if (v.id.endsWith(suffix)) {
+        step2Id = suffix.slice(1);
+        step1Id = v.id.slice(0, -suffix.length);
+        break;
+      }
+    }
+    if (!step1Id || !step2Id) return null;
+
+    if (!step1Options.some((o) => o.id === step1Id)) {
+      step1Options.push({ id: step1Id, label: step1Label });
+    }
+    if (!step2Options.some((o) => o.id === step2Id)) {
+      step2Options.push({ id: step2Id, label: step2Label });
+    }
+    variantByKey.set(`${step1Id}:${step2Id}`, v.id);
+  }
+
+  const getVariantId = (s1: string, s2: string) => variantByKey.get(`${s1}:${s2}`) ?? null;
+
+  if (step1Options.length < 2 || step2Options.length < 2) return null;
+  // Sort step2 so "water" comes first when reducing meals (cap water at total, rest to other)
+  const sortedStep2 = [...step2Options].sort((a, b) => (a.id === 'water' ? -1 : b.id === 'water' ? 1 : 0));
+  return { step1Options, step2Options: sortedStep2, getVariantId };
+}
+
+/**
+ * Derive step1 counts and step2 counts from addOnSelections for a given add-on.
+ */
+function deriveCounts(
+  addOnId: string,
+  selections: AddOnSelection[],
+  getVariantId: (s1: string, s2: string) => string | null,
+  step1Ids: string[],
+  step2Ids: string[]
+): {
+  step1Counts: Record<string, number>;
+  step2Counts: Record<string, number>;
+} {
+  const step1Counts: Record<string, number> = Object.fromEntries(step1Ids.map((id) => [id, 0]));
+  const step2Counts: Record<string, number> = Object.fromEntries(step2Ids.map((id) => [id, 0]));
+
+  for (const sel of selections) {
+    if (sel.addOnId !== addOnId || !sel.variantId) continue;
+    const qty = sel.quantity ?? 1;
+    for (const s1 of step1Ids) {
+      for (const s2 of step2Ids) {
+        if (getVariantId(s1, s2) === sel.variantId) {
+          step1Counts[s1] = (step1Counts[s1] ?? 0) + qty;
+          step2Counts[s2] = (step2Counts[s2] ?? 0) + qty;
+          break;
+        }
+      }
+    }
+  }
+  return { step1Counts, step2Counts };
+}
+
+/**
+ * Convert step1 and step2 counts back to addOnSelections (variant entries).
+ * Assumes step2 is a split of the total (water + gatorade = total).
+ */
+function countsToSelections(
+  addOnId: string,
+  step1Counts: Record<string, number>,
+  step2Counts: Record<string, number>,
+  getVariantId: (s1: string, s2: string) => string | null,
+  step1Ids: string[],
+  step2Ids: string[]
+): AddOnSelection[] {
+  const total = Object.values(step1Counts).reduce((a, b) => a + b, 0);
+  const step2Total = Object.values(step2Counts).reduce((a, b) => a + b, 0);
+  if (total === 0 || total !== step2Total) return [];
+
+  const step1Slots: string[] = [];
+  for (const id of step1Ids) {
+    for (let i = 0; i < (step1Counts[id] ?? 0); i++) step1Slots.push(id);
+  }
+  const step2Slots: string[] = [];
+  for (const id of step2Ids) {
+    for (let i = 0; i < (step2Counts[id] ?? 0); i++) step2Slots.push(id);
+  }
+
+  const variantCounts: Record<string, number> = {};
+  for (let i = 0; i < step1Slots.length; i++) {
+    const vid = getVariantId(step1Slots[i], step2Slots[i]);
+    if (vid) variantCounts[vid] = (variantCounts[vid] ?? 0) + 1;
+  }
+
+  return Object.entries(variantCounts)
+    .filter(([, qty]) => qty > 0)
+    .map(([variantId, quantity]) => ({ addOnId, variantId, quantity }));
+}
+
+export function MealDrinkAddOnSelector({
+  addOn,
+  selections,
+  onSelectionsChange,
+  currency,
+  locale,
+  step2Label = (total) =>
+    `Of your ${total} lunch${total !== 1 ? 'es' : ''}, how many with Water vs Gatorade?`,
+  sectionLabel = '🍽️ Order lunch?',
+  minimumTotal = 0,
+}: MealDrinkAddOnSelectorProps) {
+  const parsed = useMemo(
+    () => (addOn.variantType === 'multi_quantity' && addOn.variants ? parseTwoStepVariants(addOn.variants) : null),
+    [addOn.variantType, addOn.variants]
+  );
+
+  const { step1Counts, step2Counts } = useMemo(() => {
+    if (!parsed) return { step1Counts: {} as Record<string, number>, step2Counts: {} as Record<string, number> };
+    return deriveCounts(
+      addOn.addOnId,
+      selections,
+      parsed.getVariantId,
+      parsed.step1Options.map((o) => o.id),
+      parsed.step2Options.map((o) => o.id)
+    );
+  }, [addOn.addOnId, selections, parsed]);
+
+  const updateSelections = useCallback(
+    (step1CountsNew: Record<string, number>, step2CountsNew: Record<string, number>) => {
+      if (!parsed) return;
+      const step1Ids = parsed.step1Options.map((o) => o.id);
+      const step2Ids = parsed.step2Options.map((o) => o.id);
+      const newEntries = countsToSelections(
+        addOn.addOnId,
+        step1CountsNew,
+        step2CountsNew,
+        parsed.getVariantId,
+        step1Ids,
+        step2Ids
+      );
+      onSelectionsChange((prev) => [...prev.filter((s) => s.addOnId !== addOn.addOnId), ...newEntries]);
+    },
+    [addOn.addOnId, parsed, onSelectionsChange]
+  );
+
+  if (!parsed) return null;
+
+  const price = addOn.price ?? 0;
+  const totalStep1 = Object.values(step1Counts).reduce((a, b) => a + b, 0);
+  const totalStep2 = Object.values(step2Counts).reduce((a, b) => a + b, 0);
+  const step1Ids = parsed.step1Options.map((o) => o.id);
+  const step2Ids = parsed.step2Options.map((o) => o.id);
+
+  return (
+    <div>
+      <div className="mb-2">
+        <label className="block text-sm font-medium text-stone-700">{sectionLabel}</label>
+        {addOn.description && (
+          <p className="text-sm text-stone-500 mt-0.5">{addOn.description} - lunch packages include sandwich, a drink, and a banana bread snack.</p>
+        )}
+      </div>
+      <div className="space-y-4">
+        {/* Step 1: Meal type quantities (no "Meals" subheading) */}
+        <div>
+          <div className="space-y-2">
+            {parsed.step1Options.map((opt) => {
+              const qty = step1Counts[opt.id] ?? 0;
+              const canDecrementTotal = totalStep1 > minimumTotal;
+              return (
+                <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
+                  </span>
+                  <div className="flex items-center gap-1 shrink-0">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (!canDecrementTotal) return;
+                        const next = { ...step1Counts, [opt.id]: Math.max(0, qty - 1) };
+                        const total = Object.values(next).reduce((a, b) => a + b, 0);
+                        const drinks =
+                          total > 0
+                            ? {
+                                [step2Ids[0]]: Math.min(step2Counts[step2Ids[0]] ?? 0, total),
+                                [step2Ids[1]]: total - Math.min(step2Counts[step2Ids[0]] ?? 0, total),
+                              }
+                            : step2Ids.reduce((acc, id) => ({ ...acc, [id]: 0 }), {} as Record<string, number>);
+                        updateSelections(next, drinks);
+                      }}
+                      disabled={qty <= 0 || !canDecrementTotal}
+                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                    >
+                      −
+                    </button>
+                    <span className="w-6 text-center font-medium tabular-nums text-sm">{qty}</span>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const next = { ...step1Counts, [opt.id]: qty + 1 };
+                        const drinks = {
+                          [step2Ids[0]]: (step2Counts[step2Ids[0]] ?? 0) + 1,
+                          [step2Ids[1]]: step2Counts[step2Ids[1]] ?? 0,
+                        };
+                        updateSelections(next, drinks);
+                      }}
+                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 text-sm"
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Step 2: Drink split (Water vs Gatorade) — zero-sum between options */}
+        {totalStep1 > 0 && (
+          <div className="pt-3 border-t border-stone-200">
+            <p className="text-xs font-medium text-stone-600 mb-2">{step2Label(totalStep1)}</p>
+            <div className="flex flex-wrap items-center gap-4">
+              {parsed.step2Options.map((opt) => {
+                const qty = step2Counts[opt.id] ?? 0;
+                const otherId = step2Ids.find((id) => id !== opt.id)!;
+                const otherQty = step2Counts[otherId] ?? 0;
+                return (
+                  <div key={opt.id} className="flex items-center gap-2">
+                    <span className="text-sm text-stone-700">{opt.label}</span>
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (qty <= 0) return;
+                          const next = {
+                            [opt.id]: qty - 1,
+                            [otherId]: otherQty + 1,
+                          };
+                          updateSelections(step1Counts, { ...step2Counts, ...next });
+                        }}
+                        disabled={qty <= 0}
+                        className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                      >
+                        −
+                      </button>
+                      <span className="w-6 text-center font-medium tabular-nums text-sm">{qty}</span>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (otherQty <= 0) return;
+                          const next = {
+                            [opt.id]: qty + 1,
+                            [otherId]: otherQty - 1,
+                          };
+                          updateSelections(step1Counts, { ...step2Counts, ...next });
+                        }}
+                        disabled={otherQty <= 0}
+                        className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            {totalStep2 !== totalStep1 && (
+              <p className="text-xs text-amber-600 mt-2">
+                {parsed.step2Options.map((o) => o.label).join(' + ')} must equal {totalStep1}
+              </p>
+            )}
+          </div>
+        )}
+
+        {totalStep1 > 0 && totalStep2 === totalStep1 && (
+          <p className="text-sm font-medium text-stone-700">
+            Total: {formatCurrencyAmount(price * totalStep1, currency, locale)}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/booking/PickupLocationSelector.module.css

@@ -0,0 +1,124 @@
+/**
+ * PickupLocationSelector layout - 2-column on desktop, stacked on mobile.
+ * Uses CSS module to avoid Tailwind purging/override issues in booking-flow.
+ */
+
+/* Filter pills - horizontal scroll on mobile, scrollbar hidden until scroll (overlay-style) */
+.filterPillsScroll {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; /* Firefox - hide scrollbar */
+  -ms-overflow-style: none; /* IE/Edge - hide scrollbar */
+}
+.filterPillsScroll::-webkit-scrollbar {
+  display: none; /* Chrome, Safari - hide scrollbar */
+}
+.filterPillsScroll > div:first-child {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  gap: 0.5rem;
+}
+.filterPillsScroll > div:first-child > button,
+.filterPillsScroll > button {
+  flex-shrink: 0;
+}
+
+/* Skip modal buttons - override booking-flow-preflight button reset */
+.skipModalNevermindBtn {
+  padding: 0.5rem 1.25rem !important;
+  font-weight: 500 !important;
+  font-size: 0.875rem !important;
+  color: #57534e !important;
+  background-color: #f5f5f4 !important;
+  border: 1px solid #e7e5e4 !important;
+  border-radius: 0.5rem;
+  transition: color 0.2s, background-color 0.2s;
+}
+.skipModalNevermindBtn:hover {
+  color: #1c1917 !important;
+  background-color: #e7e5e4 !important;
+}
+
+.skipModalUnderstandBtn {
+  padding: 0.5rem 1.5rem !important;
+  min-width: 6rem;
+}
+
+.twoColLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .twoColLayout {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+
+.leftColumn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Scrollable list - same height as map */
+.locationList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow-y: auto;
+  height: 14rem; /* matches mapWrapper mobile */
+}
+
+@media (min-width: 768px) {
+  .locationList {
+    height: 18rem; /* matches mapWrapper desktop */
+  }
+}
+
+.rightColumn {
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .rightColumn {
+    width: 20rem; /* 320px - md:w-80 */
+    flex-shrink: 0;
+    position: sticky;
+    top: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .rightColumn {
+    width: 24rem; /* 384px - lg:w-96 */
+  }
+}
+
+/* Constrain map height - Google Maps adds inline styles that can override */
+.mapWrapper {
+  width: 100%;
+  height: 14rem; /* 224px - h-56 */
+  border-radius: 0.5rem;
+  border: 1px solid #d6d3d1;
+  overflow: hidden;
+}
+
+@media (min-width: 768px) {
+  .mapWrapper {
+    height: 18rem; /* 288px - h-72 */
+  }
+}
+
+/* Map container - fixed height to prevent Google Maps from expanding */
+.mapWrapper > div {
+  height: 100% !important;
+  min-height: 0 !important;
+}