@ticketboothapp/booking 1.2.177 → 1.2.179

package/src/components/booking/MealDrinkAddOnSelector.tsx

@@ -24,6 +24,10 @@ export interface MealDrinkAddOnSelectorProps {
   step2Label?: (total: number) => string;
   /** Optional label for the add-on section (default: "Order lunch?") */
   sectionLabel?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  hideTitle?: boolean;
   /** Minimum total quantity locked by original booking in change flow. */
   minimumTotal?: number;
   suppressPrices?: boolean;
@@ -41,7 +45,7 @@ export function canUseMealDrinkSelector(addOn: AddOn): boolean {
  * into step1 (meal types) and step2 (drink types) for a 2-step selection UI.
  */
 function parseTwoStepVariants(variants: AddOnVariant[]): {
-  step1Options: { id: string; label: string }[];
+  step1Options: { id: string; label: string; description?: string }[];
   step2Options: { id: string; label: string }[];
   getVariantId: (step1Id: string, step2Id: string) => string | null;
 } | null {
@@ -51,6 +55,7 @@ function parseTwoStepVariants(variants: AddOnVariant[]): {
   const step1Options: { id: string; label: string }[] = [];
   const step2Options: { id: string; label: string }[] = [];
   const variantByKey = new Map<string, string>();
+  const step1Descriptions = new Map<string, string[]>();
 
   for (const v of variants) {
     const labelParts = v.label.split(/\s+\+\s+/);
@@ -72,6 +77,10 @@ function parseTwoStepVariants(variants: AddOnVariant[]): {
     if (!step1Options.some((o) => o.id === step1Id)) {
       step1Options.push({ id: step1Id, label: step1Label });
     }
+    step1Descriptions.set(step1Id, [
+      ...(step1Descriptions.get(step1Id) ?? []),
+      v.description?.trim() ?? '',
+    ]);
     if (!step2Options.some((o) => o.id === step2Id)) {
       step2Options.push({ id: step2Id, label: step2Label });
     }
@@ -81,9 +90,17 @@ function parseTwoStepVariants(variants: AddOnVariant[]): {
   const getVariantId = (s1: string, s2: string) => variantByKey.get(`${s1}:${s2}`) ?? null;
 
   if (step1Options.length < 2 || step2Options.length < 2) return null;
+  const describedStep1Options = step1Options.map((option) => {
+    const descriptions = step1Descriptions.get(option.id) ?? [];
+    const uniqueDescriptions = [...new Set(descriptions.filter(Boolean))];
+    const description = descriptions.length > 0 && descriptions.every(Boolean) && uniqueDescriptions.length === 1
+      ? uniqueDescriptions[0]
+      : undefined;
+    return { ...option, description };
+  });
   // 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 };
+  return { step1Options: describedStep1Options, step2Options: sortedStep2, getVariantId };
 }
 
 /**
@@ -94,7 +111,7 @@ function deriveCounts(
   selections: AddOnSelection[],
   getVariantId: (s1: string, s2: string) => string | null,
   step1Ids: string[],
-  step2Ids: string[]
+  step2Ids: string[],
 ): {
   step1Counts: Record<string, number>;
   step2Counts: Record<string, number>;
@@ -128,7 +145,7 @@ function countsToSelections(
   step2Counts: Record<string, number>,
   getVariantId: (s1: string, s2: string) => string | null,
   step1Ids: string[],
-  step2Ids: 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);
@@ -160,25 +177,32 @@ export function MealDrinkAddOnSelector({
   onSelectionsChange,
   currency,
   locale,
-  step2Label = (total) =>
-    `Of your ${total} lunch${total !== 1 ? 'es' : ''}, how many with Water vs Gatorade?`,
-  sectionLabel = '🍽️ Order lunch?',
+  step2Label = (total) => `Of your ${total} lunch${total !== 1 ? 'es' : ''}, how many with Water vs Gatorade?`,
+  sectionLabel = 'Order lunch?',
+  headerClassName,
+  titleClassName,
+  descriptionClassName,
+  hideTitle = false,
   minimumTotal = 0,
   suppressPrices = false,
 }: MealDrinkAddOnSelectorProps) {
   const parsed = useMemo(
     () => (addOn.variantType === 'multi_quantity' && addOn.variants ? parseTwoStepVariants(addOn.variants) : null),
-    [addOn.variantType, addOn.variants]
+    [addOn.variantType, addOn.variants],
   );
 
   const { step1Counts, step2Counts } = useMemo(() => {
-    if (!parsed) return { step1Counts: {} as Record<string, number>, step2Counts: {} as Record<string, number> };
+    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)
+      parsed.step2Options.map((o) => o.id),
     );
   }, [addOn.addOnId, selections, parsed]);
 
@@ -193,11 +217,11 @@ export function MealDrinkAddOnSelector({
         step2CountsNew,
         parsed.getVariantId,
         step1Ids,
-        step2Ids
+        step2Ids,
       );
       onSelectionsChange((prev) => [...prev.filter((s) => s.addOnId !== addOn.addOnId), ...newEntries]);
     },
-    [addOn.addOnId, parsed, onSelectionsChange]
+    [addOn.addOnId, parsed, onSelectionsChange],
   );
 
   if (!parsed) return null;
@@ -210,10 +234,17 @@ export function MealDrinkAddOnSelector({
 
   return (
     <div>
-      <div className="mb-2">
-        <label className="block text-sm font-medium text-stone-700">{sectionLabel}</label>
+      <div className={headerClassName || 'mb-2'}>
+        {!hideTitle ? (
+          <label className={titleClassName || 'block text-sm font-medium text-stone-700'}>
+            {addOn.emoji?.trim() ? `${addOn.emoji.trim()} ` : ''}
+            {sectionLabel}
+          </label>
+        ) : null}
         {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>
+          <p className={descriptionClassName || '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">
@@ -224,8 +255,15 @@ export function MealDrinkAddOnSelector({
               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>
+                <div key={opt.id} className="flex flex-wrap items-center gap-3 p-3 bg-stone-50 rounded-lg">
+                  <span className="min-w-0 flex-1">
+                    <span className="block font-medium text-stone-800">{opt.label}</span>
+                    {opt.description ? (
+                      <span className="mt-0.5 block text-xs font-normal leading-snug text-stone-500">
+                        {opt.description}
+                      </span>
+                    ) : null}
+                  </span>
                   <span className="text-sm text-stone-500 shrink-0">
                     {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale)} ea`}
                   </span>
@@ -234,7 +272,10 @@ export function MealDrinkAddOnSelector({
                       type="button"
                       onClick={() => {
                         if (!canDecrementTotal) return;
-                        const next = { ...step1Counts, [opt.id]: Math.max(0, qty - 1) };
+                        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
@@ -276,14 +317,14 @@ export function MealDrinkAddOnSelector({
         {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">
+            <div className="space-y-2">
               {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 key={opt.id} className="flex items-center gap-3 p-3 bg-stone-50 rounded-lg">
+                    <span className="text-sm text-stone-700 flex-1">{opt.label}</span>
                     <div className="flex items-center gap-1">
                       <button
                         type="button"
@@ -293,7 +334,10 @@ export function MealDrinkAddOnSelector({
                             [opt.id]: qty - 1,
                             [otherId]: otherQty + 1,
                           };
-                          updateSelections(step1Counts, { ...step2Counts, ...next });
+                          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"
@@ -309,7 +353,10 @@ export function MealDrinkAddOnSelector({
                             [opt.id]: qty + 1,
                             [otherId]: otherQty - 1,
                           };
-                          updateSelections(step1Counts, { ...step2Counts, ...next });
+                          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"
@@ -328,12 +375,6 @@ export function MealDrinkAddOnSelector({
             )}
           </div>
         )}
-
-        {totalStep1 > 0 && totalStep2 === totalStep1 && (
-          <p className="text-sm font-medium text-stone-700">
-            {suppressPrices ? 'Total: —' : `Total: ${formatCurrencyAmount(price * totalStep1, currency, locale)}`}
-          </p>
-        )}
       </div>
     </div>
   );

package/src/components/booking/PrivateShuttleAddOnsSection.tsx

@@ -2,7 +2,14 @@ import type { AddOn } from '../../lib/booking-api';
 import { formatCurrencyAmount } from '../../lib/currency';
 import type { Locale } from '../../lib/booking/i18n/config';
 import type { Currency } from './CurrencySwitcher';
+import { AddOnsSection } from './AddOnsSection';
+import { CollapsibleAddOnItem } from './CollapsibleAddOnItem';
 import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
+import { selectedAddOnQuantity } from './add-on-selection-helpers';
+import {
+  EMERALD_LAKE_LUNCH_ADD_ON_ID,
+  privateShuttleLunchAddOnIsVisible,
+} from './private-shuttle-lunch-visibility';
 import styles from './PrivateShuttleBookingFlow.module.css';
 
 export type PrivateShuttleAddOnSelection = {
@@ -21,7 +28,9 @@ export interface PrivateShuttleAddOnsSectionProps {
   selectedDestinationIds: string[];
   currency: Currency;
   locale: Locale;
+  foodRestrictions: string;
   onAddOnSelectionsChange: (update: PrivateShuttleAddOnSelectionUpdate) => void;
+  onFoodRestrictionsChange: (value: string) => void;
 }
 
 export function PrivateShuttleAddOnsSection({
@@ -31,72 +40,130 @@ export function PrivateShuttleAddOnsSection({
   selectedDestinationIds,
   currency,
   locale,
+  foodRestrictions,
   onAddOnSelectionsChange,
+  onFoodRestrictionsChange,
 }: PrivateShuttleAddOnsSectionProps) {
-  if (passengerCount <= 0 || addOns.length === 0) return null;
+  if (passengerCount <= 0) return null;
 
-  const animalsAddOn = addOns.find((addOn) => addOn.addOnId === 'addon_animals');
   const isAnimalsSelected = addOnSelections.some((selection) => selection.addOnId === 'addon_animals');
-  const lunchAddOn = selectedDestinationIds.includes('emerald_lake')
-    ? addOns.find((addOn) => addOn.addOnId === 'addon_el_lunch')
-    : null;
 
   return (
-    <div className={styles.section}>
-      {lunchAddOn && canUseMealDrinkSelector(lunchAddOn) ? (
-        <MealDrinkAddOnSelector
-          addOn={lunchAddOn}
-          selections={addOnSelections}
-          onSelectionsChange={(updater) =>
-            onAddOnSelectionsChange((prev) => updater(prev))
-          }
-          currency={currency}
-          locale={locale}
-        />
-      ) : null}
-      {animalsAddOn ? (
-        <div>
-          <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-            Traveling with animals?
-          </label>
-          <p className="text-sm text-stone-500 mb-2">
-            {animalsAddOn.description || 'Cleaning fee for traveling with animals'}
-          </p>
-          <div className="flex flex-wrap gap-2">
-            <button
-              type="button"
-              onClick={() =>
-                onAddOnSelectionsChange(
-                  addOnSelections.filter((selection) => selection.addOnId !== 'addon_animals'),
-                )
+    <>
+      {addOns.length > 0 ? (
+        <div className={styles.section}>
+          <label className={`${styles.sectionLabel} private-shuttle-section-label`}>Add-ons</label>
+          <div className={styles.addOnItems}>
+            {addOns.map((addOn) => {
+              if (!privateShuttleLunchAddOnIsVisible(addOn.addOnId, selectedDestinationIds)) {
+                return null;
+              }
+              const selectedQuantity = selectedAddOnQuantity(addOn.addOnId, addOnSelections);
+              const emoji = addOn.emoji?.trim();
+              if (addOn.addOnId === EMERALD_LAKE_LUNCH_ADD_ON_ID) {
+                if (!canUseMealDrinkSelector(addOn)) {
+                  return null;
+                }
+                return (
+                  <CollapsibleAddOnItem
+                    key={addOn.addOnId}
+                    title={`${emoji ? `${emoji} ` : ''}Order lunch?`}
+                    selectedQuantity={selectedQuantity}
+                  >
+                    <MealDrinkAddOnSelector
+                      addOn={addOn}
+                      selections={addOnSelections}
+                      onSelectionsChange={(updater) => onAddOnSelectionsChange((prev) => updater(prev))}
+                      currency={currency}
+                      locale={locale}
+                      sectionLabel="Order lunch?"
+                      headerClassName={styles.addOnHeader}
+                      titleClassName={styles.addOnTitle}
+                      descriptionClassName={styles.addOnDescription}
+                      hideTitle
+                    />
+                  </CollapsibleAddOnItem>
+                );
               }
-              className={`${styles.btnTime} private-shuttle-btn-time ${
-                !isAnimalsSelected ? styles.btnTimeSelected : styles.btnTimeDefault
-              }`}
-            >
-              No animals
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                if (isAnimalsSelected) return;
-                onAddOnSelectionsChange([
-                  ...addOnSelections,
-                  { addOnId: 'addon_animals', quantity: 1 },
-                ]);
-              }}
-              className={`${styles.btnTime} private-shuttle-btn-time flex items-center gap-2 ${
-                isAnimalsSelected ? styles.btnTimeSelected : styles.btnTimeDefault
-              }`}
-            >
-              <span>Yes, traveling with animals</span>
-              <span className="text-sm font-semibold opacity-90">
-                +{formatCurrencyAmount(animalsAddOn.price || 0, currency, locale)}
-              </span>
-            </button>
+              if (addOn.addOnId === 'addon_animals') {
+                return (
+                  <CollapsibleAddOnItem
+                    key={addOn.addOnId}
+                    title={`${emoji ? `${emoji} ` : ''}Traveling with animals?`}
+                    selectedQuantity={selectedQuantity}
+                  >
+                    <div className={styles.addOnHeader}>
+                      <p className={styles.addOnDescription}>
+                        {addOn.description || 'Cleaning fee for traveling with animals'}
+                      </p>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      <button
+                        type="button"
+                        onClick={() =>
+                          onAddOnSelectionsChange(
+                            addOnSelections.filter((selection) => selection.addOnId !== 'addon_animals'),
+                          )
+                        }
+                        className={`${styles.btnTime} private-shuttle-btn-time ${
+                          !isAnimalsSelected ? styles.btnTimeSelected : styles.btnTimeDefault
+                        }`}
+                      >
+                        No animals
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (isAnimalsSelected) return;
+                          onAddOnSelectionsChange([...addOnSelections, { addOnId: 'addon_animals', quantity: 1 }]);
+                        }}
+                        className={`${styles.btnTime} private-shuttle-btn-time flex items-center gap-2 ${
+                          isAnimalsSelected ? styles.btnTimeSelected : styles.btnTimeDefault
+                        }`}
+                      >
+                        <span>Yes, traveling with animals</span>
+                        <span className="text-sm font-semibold opacity-90">
+                          +{formatCurrencyAmount(addOn.price || 0, currency, locale)}
+                        </span>
+                      </button>
+                    </div>
+                  </CollapsibleAddOnItem>
+                );
+              }
+              return (
+                <AddOnsSection
+                  key={addOn.addOnId}
+                  addOns={[addOn]}
+                  addOnSelections={addOnSelections}
+                  currency={currency}
+                  locale={locale}
+                  onSelectionsChange={onAddOnSelectionsChange}
+                  embedded
+                  itemHeaderClassName={styles.addOnHeader}
+                  itemTitleClassName={styles.addOnTitle}
+                  itemDescriptionClassName={styles.addOnDescription}
+                />
+              );
+            })}
           </div>
         </div>
       ) : null}
-    </div>
+      <div className={styles.section}>
+        <label htmlFor="food-restrictions" className={`${styles.sectionLabel} private-shuttle-section-label`}>
+          Food restrictions
+        </label>
+        <p className="mb-2 text-sm text-stone-500">
+          Shuttle includes croissants, coffee, tea, hot chocolate, and trail snacks.
+        </p>
+        <textarea
+          id="food-restrictions"
+          value={foodRestrictions}
+          onChange={(event) => onFoodRestrictionsChange(event.target.value)}
+          placeholder="Any dietary restrictions or allergies?"
+          rows={2}
+          className={styles.input}
+        />
+      </div>
+    </>
   );
 }

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

@@ -22,6 +22,32 @@
 
 /* Overridden by booking-flow.css for orange/Poppins - see .private-shuttle-sectionLabel */
 
+.addOnItems {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.addOnHeader {
+  margin-bottom: 0.75rem;
+}
+
+.addOnTitle {
+  display: block;
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif !important;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--accent-orange, #f4511e) !important;
+}
+
+.addOnDescription {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--booking-stone-500, #78716c);
+}
+
 .optionGrid {
   display: grid;
   grid-template-columns: 1fr;

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -58,6 +58,7 @@ import {
   privateShuttleTermsInitiallyAccepted,
   resolveInitialPrivateShuttlePassengerCount,
 } from './private-shuttle-passenger-count';
+import { privateShuttleHiddenLunchAddOnId } from './private-shuttle-lunch-visibility';
 
 interface PrivateShuttleBookingFlowProps {
   product: Product;
@@ -342,9 +343,11 @@ export function PrivateShuttleBookingFlow({
   }, [addOns]);
 
   useEffect(() => {
-    if (!draftItineraryDestinations.includes('emerald_lake')) {
-      setAddOnSelections((prev) => prev.filter((s) => s.addOnId !== 'addon_el_lunch'));
-    }
+    const hiddenLunchAddOnId = privateShuttleHiddenLunchAddOnId(draftItineraryDestinations);
+    setAddOnSelections((prev) => {
+      const next = prev.filter((selection) => selection.addOnId !== hiddenLunchAddOnId);
+      return next.length === prev.length ? prev : next;
+    });
   }, [draftItineraryDestinations]);
 
   const suggestedStartTimes = useMemo(() => {
@@ -922,9 +925,7 @@ export function PrivateShuttleBookingFlow({
             <PrivateShuttlePreferencesSection
               passengerCount={passengerCount}
               childSafetySeatsCount={childSafetySeatsCount}
-              foodRestrictions={foodRestrictions}
               onChildSafetySeatsCountChange={setChildSafetySeatsCount}
-              onFoodRestrictionsChange={setFoodRestrictions}
             />
           )}
 
@@ -936,7 +937,9 @@ export function PrivateShuttleBookingFlow({
               selectedDestinationIds={draftItineraryDestinations}
               currency={currency}
               locale={locale}
+              foodRestrictions={foodRestrictions}
               onAddOnSelectionsChange={setAddOnSelections}
+              onFoodRestrictionsChange={setFoodRestrictions}
             />
           )}
 

package/src/components/booking/PrivateShuttlePreferencesSection.tsx

@@ -3,73 +3,47 @@ import styles from './PrivateShuttleBookingFlow.module.css';
 export interface PrivateShuttlePreferencesSectionProps {
   passengerCount: number;
   childSafetySeatsCount: number;
-  foodRestrictions: string;
   onChildSafetySeatsCountChange: (count: number) => void;
-  onFoodRestrictionsChange: (value: string) => void;
 }
 
 export function PrivateShuttlePreferencesSection({
   passengerCount,
   childSafetySeatsCount,
-  foodRestrictions,
   onChildSafetySeatsCountChange,
-  onFoodRestrictionsChange,
 }: PrivateShuttlePreferencesSectionProps) {
   if (passengerCount <= 0) return null;
 
   return (
-    <>
-      <div className={styles.section}>
-        <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
-          Safety seats for kids
-        </label>
-        <p className="text-sm text-stone-500 mb-2">
-          How many child safety seats do you need?
-        </p>
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => onChildSafetySeatsCountChange(Math.max(0, childSafetySeatsCount - 1))}
-            disabled={childSafetySeatsCount <= 0}
-            className={styles.qtyBtn}
-          >
-            -
-          </button>
-          <span className="w-8 text-center font-medium tabular-nums">
-            {childSafetySeatsCount}
-          </span>
-          <button
-            type="button"
-            onClick={() =>
-              onChildSafetySeatsCountChange(Math.min(passengerCount, childSafetySeatsCount + 1))
-            }
-            disabled={childSafetySeatsCount >= passengerCount}
-            className={styles.qtyBtn}
-          >
-            +
-          </button>
-        </div>
-      </div>
-
-      <div className={styles.section}>
-        <label
-          htmlFor="food-restrictions"
-          className={`${styles.sectionLabel} private-shuttle-section-label`}
+    <div className={styles.section}>
+      <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
+        Safety seats for kids
+      </label>
+      <p className="text-sm text-stone-500 mb-2">
+        How many child safety seats do you need?
+      </p>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => onChildSafetySeatsCountChange(Math.max(0, childSafetySeatsCount - 1))}
+          disabled={childSafetySeatsCount <= 0}
+          className={styles.qtyBtn}
+        >
+          -
+        </button>
+        <span className="w-8 text-center font-medium tabular-nums">
+          {childSafetySeatsCount}
+        </span>
+        <button
+          type="button"
+          onClick={() =>
+            onChildSafetySeatsCountChange(Math.min(passengerCount, childSafetySeatsCount + 1))
+          }
+          disabled={childSafetySeatsCount >= passengerCount}
+          className={styles.qtyBtn}
         >
-          Food restrictions
-        </label>
-        <p className="text-sm text-stone-500 mb-2">
-          Shuttle includes croissants, coffee, tea, hot chocolate, trail snacks.
-        </p>
-        <textarea
-          id="food-restrictions"
-          value={foodRestrictions}
-          onChange={(event) => onFoodRestrictionsChange(event.target.value)}
-          placeholder="Any dietary restrictions or allergies?"
-          rows={2}
-          className={styles.input}
-        />
+          +
+        </button>
       </div>
-    </>
+    </div>
   );
 }

package/src/components/booking/add-on-selection-helpers.ts

@@ -0,0 +1,13 @@
+export type AddOnSelectionLike = {
+  addOnId: string;
+  quantity?: number;
+};
+
+export function selectedAddOnQuantity(addOnId: string, selections: AddOnSelectionLike[]): number {
+  return selections
+    .filter((selection) => selection.addOnId === addOnId)
+    .reduce((total, selection) => {
+      const quantity = selection.quantity ?? 1;
+      return total + (Number.isFinite(quantity) ? Math.max(0, quantity) : 0);
+    }, 0);
+}

package/src/components/booking/change-booking-checkout-builders.ts

@@ -60,7 +60,7 @@ function buildChangeBookingAddOnCheckoutLines(
     const amount = ((addOn.price ?? 0) + (variant?.priceAdjustment ?? 0)) * quantity;
     const label = variant?.label
       ? `${addOn.name} (${variant.label})${quantity > 1 ? ` \u00d7 ${quantity}` : ''}`
-      : addOn.name;
+      : `${addOn.name}${quantity > 1 ? ` \u00d7 ${quantity}` : ''}`;
 
     lines.push({
       label,

package/src/components/booking/private-shuttle-checkout-builders.ts

@@ -87,7 +87,7 @@ function buildPrivateShuttleAddOnLineItems(
     const amount = ((addOn.price ?? 0) + (variant?.priceAdjustment ?? 0)) * quantity;
     const checkoutLabel = variant?.label
       ? `${addOn.name} (${variant.label})${quantity > 1 ? ` \u00d7 ${quantity}` : ''}`
-      : addOn.name;
+      : `${addOn.name}${quantity > 1 ? ` \u00d7 ${quantity}` : ''}`;
 
     checkoutLines.push({
       label: checkoutLabel,
@@ -95,7 +95,7 @@ function buildPrivateShuttleAddOnLineItems(
       type: 'FEE',
     });
     modalFeeLineItems.push({
-      name: addOn.name,
+      name: checkoutLabel,
       totalAmount: amount,
     });
   }