@ticketboothapp/booking 1.2.178 → 1.2.180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.178",
+  "version": "1.2.180",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/AddOnsSection.tsx

@@ -160,7 +160,14 @@ export function AddOnsSection({
                     const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
                     return (
                       <div key={variant.id} className="flex flex-wrap items-center gap-3 p-3 bg-stone-50 rounded-lg">
-                        <span className="text-sm text-stone-800 flex-1">{variant.label}</span>
+                        <span className="min-w-0 flex-1">
+                          <span className="block text-sm text-stone-800">{variant.label}</span>
+                          {variant.description?.trim() ? (
+                            <span className="mt-0.5 block text-xs leading-snug text-stone-500">
+                              {variant.description.trim()}
+                            </span>
+                          ) : null}
+                        </span>
                         <span className="text-sm text-stone-500 shrink-0">
                           {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')} ea`}
                         </span>
@@ -260,7 +267,14 @@ export function AddOnsSection({
                             : 'border-stone-200 bg-stone-50 hover:border-stone-300'
                         }`}
                       >
-                        <span className="text-sm font-medium text-stone-800">{variant.label}</span>
+                        <span className="min-w-0 flex-1">
+                          <span className="block text-sm font-medium text-stone-800">{variant.label}</span>
+                          {variant.description?.trim() ? (
+                            <span className="mt-0.5 block text-xs font-normal leading-snug text-stone-500">
+                              {variant.description.trim()}
+                            </span>
+                          ) : null}
+                        </span>
                         <span className="text-sm text-stone-500">
                           {suppressPrices ? '—' : `+${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')}`}
                         </span>

package/src/components/booking/MealDrinkAddOnSelector.tsx

@@ -45,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 {
@@ -55,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+/);
@@ -76,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 });
     }
@@ -85,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 };
 }
 
 /**
@@ -243,7 +256,14 @@ export function MealDrinkAddOnSelector({
               const canDecrementTotal = totalStep1 > minimumTotal;
               return (
                 <div key={opt.id} className="flex flex-wrap items-center gap-3 p-3 bg-stone-50 rounded-lg">
-                  <span className="font-medium text-stone-800 flex-1">{opt.label}</span>
+                  <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>

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

@@ -9,7 +9,8 @@
 .section {
   padding-top: 1.5rem;
   margin-top: 1.5rem;
-  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
+  /* Keep this explicit: the scoped preflight resets borders on every child. */
+  border-top: 1px solid var(--booking-stone-200, #e7e5e4) !important;
 }
 
 .sectionLabel {

package/src/components/booking/booking-flow.css

@@ -1007,11 +1007,9 @@
   border-top-color: var(--booking-stone-200, #e7e5e4) !important;
 }
 
-/* Line above first receipt row (above ADULT etc.): CheckoutForm / private shuttle section wrappers */
+/* Line above first receipt row (above ADULT etc.): CheckoutForm section wrappers */
 .booking-flow-preflight [class*="CheckoutForm_section"],
-.booking-flow-root [class*="CheckoutForm_section"],
-.booking-flow-preflight [class*="PrivateShuttleBookingFlow_section"],
-.booking-flow-root [class*="PrivateShuttleBookingFlow_section"] {
+.booking-flow-root [class*="CheckoutForm_section"] {
   border-top-width: 1px !important;
   border-top-style: solid !important;
   border-top-color: var(--booking-stone-200, #e7e5e4) !important;

package/src/lib/booking-api.ts

@@ -802,6 +802,7 @@ export interface AddOnVariant {
   id: string;
   label: string;
   priceAdjustment: number;
+  description?: string | null;
 }
 
 export interface AddOn {