@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/{MealDrinkAddOnSelector.tsx → booking/MealDrinkAddOnSelector.tsx}

@@ -2,9 +2,9 @@
 
 import { useMemo, useCallback } from 'react';
 import { formatCurrencyAmount } from '@/lib/currency';
-import type { AddOn, AddOnVariant } from '@/lib/api';
+import type { AddOn, AddOnVariant } from '@/lib/booking-api';
 import type { Currency } from './CurrencySwitcher';
-import type { Locale } from '@/lib/i18n/config';
+import type { Locale } from '@/lib/booking/i18n/config';
 
 export interface AddOnSelection {
   addOnId: string;
@@ -24,6 +24,8 @@ export interface MealDrinkAddOnSelectorProps {
   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;
 }
 
 /**
@@ -157,10 +159,10 @@ export function MealDrinkAddOnSelector({
   onSelectionsChange,
   currency,
   locale,
-  step1Label = 'Meals',
   step2Label = (total) =>
     `Of your ${total} lunch${total !== 1 ? 'es' : ''}, how many with Water vs Gatorade?`,
-  sectionLabel = 'Order lunch?',
+  sectionLabel = '🍽️ Order lunch?',
+  minimumTotal = 0,
 }: MealDrinkAddOnSelectorProps) {
   const parsed = useMemo(
     () => (addOn.variantType === 'multi_quantity' && addOn.variants ? parseTwoStepVariants(addOn.variants) : null),
@@ -206,24 +208,30 @@ export function MealDrinkAddOnSelector({
 
   return (
     <div>
-      <label className="block text-sm font-medium text-stone-700 mb-2">{sectionLabel}</label>
-      {addOn.description && (
-        <p className="text-sm text-stone-500 mb-3">{addOn.description}</p>
-      )}
+      <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 */}
+        {/* Step 1: Meal type quantities (no "Meals" subheading) */}
         <div>
-          <p className="text-xs font-medium text-stone-600 mb-2">{step1Label}</p>
           <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 min-w-0 flex-1">{opt.label}</span>
-                  <div className="flex items-center gap-1">
+                  <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 =
@@ -235,7 +243,7 @@ export function MealDrinkAddOnSelector({
                             : step2Ids.reduce((acc, id) => ({ ...acc, [id]: 0 }), {} as Record<string, number>);
                         updateSelections(next, drinks);
                       }}
-                      disabled={qty <= 0}
+                      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"
                     >
                       −

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;
+}