@ticketboothapp/booking 1.2.177 → 1.2.178

package/package.json

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

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

@@ -1,10 +1,41 @@
-/**
- * Add-ons section - label styled like tickets, cancellation policy (via booking-flow.css preflight)
- */
+.section {
+  padding-top: 1.5rem;
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin-top: 1rem;
+}
 
 .label {
   display: block;
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  font-size: 1.5rem;
+  font-weight: 800;
+  line-height: 1.2;
+  color: var(--accent-orange, #f4511e);
+}
+
+.itemHeader {
+  margin-bottom: 0.75rem;
+}
+
+.itemTitle {
+  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;
+}
+
+.itemDescription {
+  margin: 0.25rem 0 0;
   font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--booking-stone-700, #44403c);
+  line-height: 1.5;
+  color: var(--booking-stone-500, #78716c);
 }

package/src/components/booking/AddOnsSection.tsx

@@ -2,11 +2,22 @@
 
 import { formatCurrencyAmount } from '../../lib/currency';
 import type { AddOn } from '../../lib/booking-api';
+import { CollapsibleAddOnItem } from './CollapsibleAddOnItem';
 import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
+import { selectedAddOnQuantity } from './add-on-selection-helpers';
 import type { Currency } from './CurrencySwitcher';
 import styles from './AddOnsSection.module.css';
 
-export type AddOnSelection = { addOnId: string; variantId?: string; quantity?: number };
+export type AddOnSelection = {
+  addOnId: string;
+  variantId?: string;
+  quantity?: number;
+};
+
+function addOnTitle(addOn: AddOn, label = addOn.name): string {
+  const emoji = addOn.emoji?.trim();
+  return emoji ? `${emoji} ${label}` : label;
+}
 
 interface AddOnsSectionProps {
   addOns: AddOn[];
@@ -16,6 +27,11 @@ interface AddOnsSectionProps {
   onSelectionsChange: (selections: AddOnSelection[] | ((prev: AddOnSelection[]) => AddOnSelection[])) => void;
   minimumTotalByAddOnId?: Map<string, number>;
   suppressPrices?: boolean;
+  embedded?: boolean;
+  className?: string;
+  itemHeaderClassName?: string;
+  itemTitleClassName?: string;
+  itemDescriptionClassName?: string;
 }
 
 export function AddOnsSection({
@@ -26,162 +42,238 @@ export function AddOnsSection({
   onSelectionsChange,
   minimumTotalByAddOnId,
   suppressPrices = false,
+  embedded = false,
+  className,
+  itemHeaderClassName,
+  itemTitleClassName,
+  itemDescriptionClassName,
 }: AddOnsSectionProps) {
+  const layoutClassName = embedded ? className || 'space-y-4' : `${styles.section}${className ? ` ${className}` : ''}`;
+  const headerClassName = itemHeaderClassName || styles.itemHeader;
+  const titleClassName = itemTitleClassName || styles.itemTitle;
+  const descriptionClassName = itemDescriptionClassName || styles.itemDescription;
+
   return (
-    <div className="border-t border-stone-200 pt-6 space-y-4">
-      <label className={styles.label}>
-        Add-ons
-      </label>
-      {addOns.map((addOn) => {
-        const minTotalForAddOn = minimumTotalByAddOnId?.get(addOn.addOnId) ?? 0;
-        if (addOn.variantType === 'none') {
-          const isSelected = addOnSelections.some((s) => s.addOnId === addOn.addOnId);
-          const canToggleOff = minTotalForAddOn <= 0;
-          return (
-            <div key={addOn.addOnId}>
-              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-              {addOn.description && (
-                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-              )}
-              <button
-                type="button"
-                onClick={() => {
-                  onSelectionsChange((prev) => {
-                    if (isSelected) {
-                      if (!canToggleOff) return prev;
-                      return prev.filter((s) => s.addOnId !== addOn.addOnId);
-                    }
-                    return [...prev, { addOnId: addOn.addOnId, quantity: 1 }];
-                  });
-                }}
-                className={`flex items-center justify-between w-full p-4 rounded-lg border-2 text-left transition-colors ${
-                  isSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
-                }`}
-              >
-                <span className="font-medium text-stone-900">
-                  {isSelected ? `Yes, add ${addOn.name}` : `No ${addOn.name}`}
-                </span>
-                <span className="text-sm font-semibold text-stone-700">
-                  {suppressPrices ? '—' : `+${formatCurrencyAmount(addOn.price ?? 0, currency, locale as 'en' | 'fr')}`}
-                </span>
-              </button>
-            </div>
-          );
-        }
-        if (addOn.variantType === 'multi_quantity' && addOn.variants?.length) {
-          if (canUseMealDrinkSelector(addOn)) {
+    <div className={layoutClassName}>
+      {!embedded ? <label className={styles.label}>Add-ons</label> : null}
+      <div className={!embedded ? styles.items : undefined}>
+        {addOns.map((addOn) => {
+          const minTotalForAddOn = minimumTotalByAddOnId?.get(addOn.addOnId) ?? 0;
+          const usesMealSelector = addOn.variantType === 'multi_quantity' && canUseMealDrinkSelector(addOn);
+          const title = addOnTitle(addOn, usesMealSelector ? 'Order lunch?' : addOn.name);
+          const selectedQuantity = selectedAddOnQuantity(addOn.addOnId, addOnSelections);
+          if (addOn.variantType === 'none') {
+            const selection = addOnSelections.find((s) => s.addOnId === addOn.addOnId);
+            const quantity = Math.max(0, selection?.quantity ?? 0);
+            const canDecrement = quantity > minTotalForAddOn;
             return (
-              <MealDrinkAddOnSelector
+              <CollapsibleAddOnItem
                 key={addOn.addOnId}
-                addOn={addOn}
-                selections={addOnSelections}
-                onSelectionsChange={onSelectionsChange}
-                currency={currency}
-                locale={locale as 'en' | 'fr'}
-                minimumTotal={minTotalForAddOn}
-                suppressPrices={suppressPrices}
-              />
-            );
-          }
-          return (
-            <div key={addOn.addOnId}>
-              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-              {addOn.description && (
-                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-              )}
-              <div className="space-y-2">
-                {addOn.variants.map((variant) => {
-                  const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId && s.variantId === variant.id);
-                  const qty = sel?.quantity ?? 0;
-                  const currentTotalForAddOn = addOnSelections
-                    .filter((s) => s.addOnId === addOn.addOnId)
-                    .reduce((sum, s) => sum + Math.max(1, Number(s.quantity) || 1), 0);
-                  const canDecrement = qty > 0 && currentTotalForAddOn > minTotalForAddOn;
-                  const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
-                  return (
-                    <div key={variant.id} className="flex items-center gap-3 p-3 bg-stone-50 rounded-lg">
-                      <span className="text-sm text-stone-800">{variant.label}</span>
-                      <div className="flex items-center gap-2 shrink-0">
-                        <button
-                          type="button"
-                          onClick={() => {
-                            onSelectionsChange((prev) => {
-                              const next = Math.max(0, qty - 1);
-                              const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
-                              if (next > 0) return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: next }];
-                              return rest;
-                            });
-                          }}
-                          disabled={!canDecrement}
-                          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={() => {
-                            onSelectionsChange((prev) => {
-                              const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
-                              return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: qty + 1 }];
-                            });
-                          }}
-                          className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 text-sm"
-                        >
-                          +
-                        </button>
-                        <span className="text-sm font-medium text-stone-700 w-16 text-right">
-                          {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')} ea`}
-                        </span>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        }
-        if (addOn.variantType === 'single_choice' && addOn.variants?.length) {
-          const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId);
-          const hasLockedInitialSelection = minTotalForAddOn > 0;
-          return (
-            <div key={addOn.addOnId}>
-              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-              {addOn.description && (
-                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-              )}
-              <div className="space-y-2">
-                {addOn.variants.map((variant) => {
-                  const isSelected = sel?.variantId === variant.id;
-                  const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
-                  return (
+                title={title}
+                selectedQuantity={selectedQuantity}
+              >
+                <div className={headerClassName}>
+                  {addOn.description && <p className={descriptionClassName}>{addOn.description}</p>}
+                </div>
+                <div className="flex flex-wrap items-center gap-3 rounded-lg bg-stone-50 p-3">
+                  <span className="flex-1 text-sm text-stone-800">Quantity</span>
+                  <span className="shrink-0 text-sm text-stone-500">
+                    {suppressPrices
+                      ? '—'
+                      : `${formatCurrencyAmount(addOn.price ?? 0, currency, locale as 'en' | 'fr')} ea`}
+                  </span>
+                  <div className="flex shrink-0 items-center gap-2">
                     <button
-                      key={variant.id}
                       type="button"
                       onClick={() => {
                         onSelectionsChange((prev) => {
+                          if (!canDecrement) return prev;
+                          const next = Math.max(0, quantity - 1);
                           const rest = prev.filter((s) => s.addOnId !== addOn.addOnId);
-                          if (isSelected) return hasLockedInitialSelection ? prev : rest;
-                          return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: 1 }];
+                          return next > 0 ? [...rest, { addOnId: addOn.addOnId, quantity: next }] : rest;
                         });
                       }}
-                      className={`flex items-center justify-between w-full p-3 rounded-lg border-2 text-left transition-colors ${
-                        isSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
-                      }`}
+                      disabled={!canDecrement}
+                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-sm text-stone-600 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50"
                     >
-                      <span className="text-sm font-medium text-stone-800">{variant.label}</span>
-                      <span className="text-sm font-semibold text-stone-700">
-                        {suppressPrices ? '—' : `+${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')}`}
-                      </span>
+                      −
                     </button>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        }
-        return null;
-      })}
+                    <span className="w-6 text-center text-sm font-medium tabular-nums">{quantity}</span>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onSelectionsChange((prev) => {
+                          const rest = prev.filter((s) => s.addOnId !== addOn.addOnId);
+                          return [...rest, { addOnId: addOn.addOnId, quantity: quantity + 1 }];
+                        });
+                      }}
+                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-sm text-stone-600 hover:bg-stone-50"
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              </CollapsibleAddOnItem>
+            );
+          }
+          if (addOn.variantType === 'multi_quantity' && addOn.variants?.length) {
+            if (usesMealSelector) {
+              return (
+                <CollapsibleAddOnItem
+                  key={addOn.addOnId}
+                  title={title}
+                  selectedQuantity={selectedQuantity}
+                >
+                  <MealDrinkAddOnSelector
+                    addOn={addOn}
+                    selections={addOnSelections}
+                    onSelectionsChange={onSelectionsChange}
+                    currency={currency}
+                    locale={locale as 'en' | 'fr'}
+                    minimumTotal={minTotalForAddOn}
+                    suppressPrices={suppressPrices}
+                    headerClassName={headerClassName}
+                    titleClassName={titleClassName}
+                    descriptionClassName={descriptionClassName}
+                    hideTitle
+                  />
+                </CollapsibleAddOnItem>
+              );
+            }
+            return (
+              <CollapsibleAddOnItem
+                key={addOn.addOnId}
+                title={title}
+                selectedQuantity={selectedQuantity}
+              >
+                <div className={headerClassName}>
+                  {addOn.description && <p className={descriptionClassName}>{addOn.description}</p>}
+                </div>
+                <div className="space-y-2">
+                  {addOn.variants.map((variant) => {
+                    const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId && s.variantId === variant.id);
+                    const qty = sel?.quantity ?? 0;
+                    const currentTotalForAddOn = addOnSelections
+                      .filter((s) => s.addOnId === addOn.addOnId)
+                      .reduce((sum, s) => sum + Math.max(1, Number(s.quantity) || 1), 0);
+                    const canDecrement = qty > 0 && currentTotalForAddOn > minTotalForAddOn;
+                    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="text-sm text-stone-500 shrink-0">
+                          {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')} ea`}
+                        </span>
+                        <div className="flex items-center gap-2 shrink-0">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              onSelectionsChange((prev) => {
+                                const next = Math.max(0, qty - 1);
+                                const rest = prev.filter(
+                                  (s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id),
+                                );
+                                if (next > 0)
+                                  return [
+                                    ...rest,
+                                    {
+                                      addOnId: addOn.addOnId,
+                                      variantId: variant.id,
+                                      quantity: next,
+                                    },
+                                  ];
+                                return rest;
+                              });
+                            }}
+                            disabled={!canDecrement}
+                            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={() => {
+                              onSelectionsChange((prev) => {
+                                const rest = prev.filter(
+                                  (s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id),
+                                );
+                                return [
+                                  ...rest,
+                                  {
+                                    addOnId: addOn.addOnId,
+                                    variantId: variant.id,
+                                    quantity: qty + 1,
+                                  },
+                                ];
+                              });
+                            }}
+                            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>
+              </CollapsibleAddOnItem>
+            );
+          }
+          if (addOn.variantType === 'single_choice' && addOn.variants?.length) {
+            const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId);
+            const hasLockedInitialSelection = minTotalForAddOn > 0;
+            return (
+              <CollapsibleAddOnItem
+                key={addOn.addOnId}
+                title={title}
+                selectedQuantity={selectedQuantity}
+              >
+                <div className={headerClassName}>
+                  {addOn.description && <p className={descriptionClassName}>{addOn.description}</p>}
+                </div>
+                <div className="space-y-2">
+                  {addOn.variants.map((variant) => {
+                    const isSelected = sel?.variantId === variant.id;
+                    const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
+                    return (
+                      <button
+                        key={variant.id}
+                        type="button"
+                        onClick={() => {
+                          onSelectionsChange((prev) => {
+                            const rest = prev.filter((s) => s.addOnId !== addOn.addOnId);
+                            if (isSelected) return hasLockedInitialSelection ? prev : rest;
+                            return [
+                              ...rest,
+                              {
+                                addOnId: addOn.addOnId,
+                                variantId: variant.id,
+                                quantity: 1,
+                              },
+                            ];
+                          });
+                        }}
+                        className={`flex items-center justify-between w-full p-3 rounded-lg border-2 text-left transition-colors ${
+                          isSelected
+                            ? 'border-emerald-500 bg-emerald-50'
+                            : 'border-stone-200 bg-stone-50 hover:border-stone-300'
+                        }`}
+                      >
+                        <span className="text-sm font-medium text-stone-800">{variant.label}</span>
+                        <span className="text-sm text-stone-500">
+                          {suppressPrices ? '—' : `+${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')}`}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </CollapsibleAddOnItem>
+            );
+          }
+          return null;
+        })}
+      </div>
     </div>
   );
 }

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -203,6 +203,8 @@ export function AdminChangeBookingFlow({
   } = useBookingAvailabilityAddOns({
     selectedAvailability,
     companyId: product.companyId,
+    ignoreCutoff: true,
+    companyTimezone,
   });
   const [knownAddOns, setKnownAddOns] = useState<AddOn[]>([]);
   const mergeKnownAddOns = useCallback((rows: AddOn[]) => {
@@ -227,7 +229,6 @@ export function AdminChangeBookingFlow({
     if (!product.companyId) return;
     getAddOns(product.companyId, {
       preCheckout: true,
-      dateTime: initialValues?.dateTime?.trim() || undefined,
     })
       .then((rows) => {
         if (!cancelled) mergeKnownAddOns(rows);
@@ -238,7 +239,7 @@ export function AdminChangeBookingFlow({
     return () => {
       cancelled = true;
     };
-  }, [product.companyId, initialValues?.dateTime, mergeKnownAddOns]);
+  }, [product.companyId, mergeKnownAddOns]);
   const addOnCatalogLoaded =
     availabilityProductOptionId != null &&
     loadedProductOptionId === availabilityProductOptionId;

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

@@ -0,0 +1,72 @@
+.card {
+  overflow: hidden;
+  border: 1px solid var(--booking-stone-200, #e7e5e4);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+
+.summary {
+  display: flex;
+  min-height: 2.875rem;
+  cursor: pointer;
+  list-style: none;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  transition: background-color 150ms ease;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary:hover {
+  background: var(--booking-stone-50, #fafaf9);
+}
+
+.summary:focus-visible {
+  outline: 2px solid var(--accent-orange, #f4511e);
+  outline-offset: -2px;
+}
+
+.title {
+  min-width: 0;
+  flex: 1;
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif !important;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--booking-stone-900, #1c1917) !important;
+}
+
+.selection {
+  flex: none;
+  border-radius: 9999px;
+  background: var(--booking-stone-100, #f5f5f4);
+  padding: 0.125rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--booking-stone-600, #57534e);
+}
+
+.selectionActive {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: none;
+  color: var(--booking-stone-500, #78716c);
+  transition: transform 150ms ease;
+}
+
+.card[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.content {
+  border-top: 1px solid var(--booking-stone-100, #f5f5f4);
+  padding: 0.75rem 0.875rem;
+}

package/src/components/booking/CollapsibleAddOnItem.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import styles from './CollapsibleAddOnItem.module.css';
+
+export interface CollapsibleAddOnItemProps {
+  title: string;
+  selectedQuantity?: number;
+  children: ReactNode;
+}
+
+export function CollapsibleAddOnItem({
+  title,
+  selectedQuantity = 0,
+  children,
+}: CollapsibleAddOnItemProps) {
+  return (
+    <details className={styles.card}>
+      <summary className={styles.summary}>
+        <span className={styles.title}>{title}</span>
+        {selectedQuantity > 0 ? (
+          <span className={`${styles.selection} ${styles.selectionActive}`}>
+            {selectedQuantity} selected
+          </span>
+        ) : null}
+        <svg
+          className={styles.chevron}
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          aria-hidden="true"
+        >
+          <path d="m5 7.5 5 5 5-5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </summary>
+      <div className={styles.content}>{children}</div>
+    </details>
+  );
+}