@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/booking/ItineraryPlaceholder.tsx

@@ -1,26 +0,0 @@
-'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

@@ -1,338 +0,0 @@
-'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

@@ -1,124 +0,0 @@
-/**
- * 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;
-}