@ticketboothapp/booking 1.2.122 → 1.2.124

package/src/components/booking/PriceBreakdown.tsx

@@ -130,8 +130,16 @@ export function PriceBreakdown({
     );
   }
 
+  const editableHoverHandlers =
+    editable && canShowBreakdown
+      ? {
+          onMouseEnter: () => setShowTooltip(true),
+          onMouseLeave: () => setShowTooltip(false),
+        }
+      : {};
+
   return (
-    <div className="flex items-center justify-between gap-3 min-w-0">
+    <div className="flex items-center justify-between gap-3 min-w-0" {...editableHoverHandlers}>
       {editable && onEditableLabelChange ? (
         <input
           type="text"
@@ -141,7 +149,13 @@ export function PriceBreakdown({
           aria-label={`Edit ${category} label`}
         />
       ) : (
-        <span className="text-sm text-stone-600 min-w-0 truncate">
+        <span
+          className={
+            editable && canShowBreakdown
+              ? 'text-sm text-stone-600 min-w-0 truncate cursor-help underline decoration-dotted underline-offset-2'
+              : 'text-sm text-stone-600 min-w-0 truncate'
+          }
+        >
           {category} {qty > 1 ? `× ${qty}` : ''}
         </span>
       )}
@@ -194,7 +208,7 @@ export function PriceBreakdown({
             )}
           </span>
         )}
-        {!editable && canShowBreakdown && showTooltip && (
+        {canShowBreakdown && showTooltip && (
           <div className="absolute right-0 top-full mt-2 w-72 p-3 bg-stone-900 text-white text-xs rounded-lg shadow-xl z-50">
             <div className="font-semibold mb-2 pb-2 border-b border-stone-700">
               Price Breakdown ({category})

package/src/components/booking/PriceSummary.tsx

@@ -86,7 +86,12 @@ export interface PriceSummaryProps {
 }
 
 function getLineAmountClass(type: string | undefined, amount: number): string {
-  const isDiscount = amount < 0 || type === 'PROMO_CODE' || type === 'DISCOUNT' || type === 'GIFT_CARD';
+  const isDiscount =
+    amount < 0 ||
+    type === 'PROMO_CODE' ||
+    type === 'DISCOUNT' ||
+    type === 'GIFT_CARD' ||
+    type === 'PAYMENT_CREDIT';
   const isAddOn = (type === 'RETURN_OPTION' || type === 'return') && amount > 0;
   if (isDiscount) return 'font-medium text-red-600';
   if (isAddOn) return 'font-medium text-emerald-600';
@@ -106,6 +111,18 @@ function formatLineAmount(
   return formatted;
 }
 
+function displaySummaryLineLabel(label: string, type: string | undefined): string {
+  const normalizedType = String(type ?? '').trim().toUpperCase();
+  const normalizedLabel = label.trim().toLowerCase();
+  if (
+    (normalizedType === 'GIFT_CARD' || normalizedType === 'PAYMENT_CREDIT') &&
+    (normalizedLabel === 'gift card' || normalizedLabel === 'payment credit')
+  ) {
+    return 'Gift card comp';
+  }
+  return label;
+}
+
 function shouldAppendQuantitySuffix(type: string | undefined, label: string, quantity: number | null | undefined): boolean {
   if (quantity == null || quantity <= 1) return false;
   const normalizedType = String(type ?? '').trim().toUpperCase();
@@ -223,6 +240,7 @@ export function PriceSummary({
           );
         }
         const { lineKey, label, amount, type, quantity, tooltip, editable } = row;
+        const shownLabel = displaySummaryLineLabel(label, type);
         // Receipt mode: insert Subtotal row before first TAX line
         const isTaxLine = type === 'TAX';
         const showSubtotalBeforeTax = isTaxLine && subtotal != null && subtotal > 0 && !subtotalShown;
@@ -250,8 +268,8 @@ export function PriceSummary({
                   />
                 ) : (
                   <span className="min-w-0 truncate">
-                    {label}
-                    {shouldAppendQuantitySuffix(type, label, quantity) ? ` (x${quantity})` : ''}
+                    {shownLabel}
+                    {shouldAppendQuantitySuffix(type, shownLabel, quantity) ? ` (x${quantity})` : ''}
                   </span>
                 )}
                 {tooltip && <InfoTooltip text={tooltip} />}

package/src/components/booking/PrivateShuttleAddOnsSection.tsx

@@ -0,0 +1,102 @@
+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 { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+export type PrivateShuttleAddOnSelection = {
+  addOnId: string;
+  variantId?: string;
+  quantity?: number;
+};
+type PrivateShuttleAddOnSelectionUpdate =
+  | PrivateShuttleAddOnSelection[]
+  | ((prev: PrivateShuttleAddOnSelection[]) => PrivateShuttleAddOnSelection[]);
+
+export interface PrivateShuttleAddOnsSectionProps {
+  passengerCount: number;
+  addOns: AddOn[];
+  addOnSelections: PrivateShuttleAddOnSelection[];
+  selectedDestinationIds: string[];
+  currency: Currency;
+  locale: Locale;
+  onAddOnSelectionsChange: (update: PrivateShuttleAddOnSelectionUpdate) => void;
+}
+
+export function PrivateShuttleAddOnsSection({
+  passengerCount,
+  addOns,
+  addOnSelections,
+  selectedDestinationIds,
+  currency,
+  locale,
+  onAddOnSelectionsChange,
+}: PrivateShuttleAddOnsSectionProps) {
+  if (passengerCount <= 0 || addOns.length === 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'),
+                )
+              }
+              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>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}