@ticketboothapp/booking 1.2.166 → 1.2.168

package/src/components/booking/ChangeBookingTicketsAndAddOnsPanel.tsx

@@ -1,6 +1,10 @@
 import type { AddOn, Availability, ReturnOption } from '../../lib/booking-api';
 import { AddOnsSection, type AddOnSelection } from './AddOnsSection';
 import type { Currency } from './CurrencySwitcher';
+import {
+  incompatibleAddOnSelections,
+  removeAddOnSelections,
+} from './incompatible-add-on-selections';
 import { TicketSelector, type TicketRate } from './TicketSelector';
 
 type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
@@ -29,6 +33,8 @@ export interface ChangeBookingTicketsAndAddOnsPanelProps {
   applyReceiptPaidFloors: boolean;
   ticketUnitFloorByCategory?: Map<string, number>;
   addOns: AddOn[];
+  knownAddOns?: AddOn[];
+  addOnCatalogLoaded?: boolean;
   addOnSelections: AddOnSelection[];
   onAddOnSelectionsChange: AddOnSelectionsChangeHandler;
   minimumTotalByAddOnId?: Map<string, number>;
@@ -56,12 +62,23 @@ export function ChangeBookingTicketsAndAddOnsPanel({
   applyReceiptPaidFloors,
   ticketUnitFloorByCategory,
   addOns,
+  knownAddOns = addOns,
+  addOnCatalogLoaded = false,
   addOnSelections,
   onAddOnSelectionsChange,
   minimumTotalByAddOnId,
   suppressUnitPrices = false,
   suppressAddOnPrices = false,
 }: ChangeBookingTicketsAndAddOnsPanelProps) {
+  const incompatibleSelections = incompatibleAddOnSelections(
+    addOnSelections,
+    addOns,
+    addOnCatalogLoaded,
+  );
+  const incompatibleAddOnIds = Array.from(
+    new Set(incompatibleSelections.map((selection) => selection.addOnId)),
+  );
+
   return (
     <>
       <TicketSelector
@@ -97,6 +114,69 @@ export function ChangeBookingTicketsAndAddOnsPanel({
           suppressPrices={suppressAddOnPrices}
         />
       ) : null}
+
+      {incompatibleAddOnIds.length > 0 ? (
+        <div
+          className="space-y-3 rounded-lg border border-red-300 bg-red-50 p-4"
+          data-testid="incompatible-add-ons"
+        >
+          <div>
+            <h3 className="text-sm font-semibold !text-red-700">
+              Add-on unavailable with selected tour
+            </h3>
+            <p className="mt-1 text-sm text-red-800">
+              This booking still contains an add-on that the selected tour does not offer.
+              Remove it explicitly before recalculating the amendment.
+            </p>
+          </div>
+          {incompatibleAddOnIds.map((addOnId) => {
+            const addOn = knownAddOns.find((candidate) => candidate.addOnId === addOnId);
+            const selections = incompatibleSelections.filter(
+              (selection) => selection.addOnId === addOnId,
+            );
+            const quantity = selections.reduce(
+              (total, selection) => total + Math.max(1, Number(selection.quantity) || 1),
+              0,
+            );
+            const variants = selections
+              .map((selection) => (
+                addOn?.variants.find((variant) => variant.id === selection.variantId)?.label ??
+                (selection.variantId ? 'Selected option' : null)
+              ))
+              .filter((label): label is string => Boolean(label));
+            return (
+              <div
+                key={addOnId}
+                className="flex flex-col gap-3 rounded-md border border-red-200 bg-white p-3 sm:flex-row sm:items-center sm:justify-between"
+              >
+                <div className="text-sm">
+                  <div className="font-medium text-stone-900">{addOn?.name ?? 'Selected add-on'}</div>
+                  <div className="text-stone-600">
+                    {variants.length > 0 ? variants.join(', ') : `Quantity ${quantity}`}
+                  </div>
+                </div>
+                {isAdmin ? (
+                  <button
+                    type="button"
+                    className="rounded-md border border-red-500 bg-white px-3 py-2 text-sm font-semibold text-red-800 hover:bg-red-100"
+                    onClick={() => {
+                      onAddOnSelectionsChange((current) =>
+                        removeAddOnSelections(current, addOnId),
+                      );
+                    }}
+                  >
+                    Remove add-on
+                  </button>
+                ) : (
+                  <p className="text-sm text-red-800">
+                    Choose another tour to keep this add-on.
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
     </>
   );
 }

package/src/components/booking/NewBookingFlow.tsx

@@ -149,10 +149,9 @@ export function NewBookingFlow({
   }, [activeOptions]);
 
   useEffect(() => {
-    if (isAdmin) return;
     const interval = window.setInterval(() => setBookingCutoffNowMs(Date.now()), 60 * 1000);
     return () => window.clearInterval(interval);
-  }, [isAdmin]);
+  }, []);
 
   const bookingCutoffNow = useMemo(() => new Date(bookingCutoffNowMs), [bookingCutoffNowMs]);
   const bookingCutoffMinutes = product.bookingCutoffMinutes ?? null;
@@ -213,6 +212,19 @@ export function NewBookingFlow({
     onProductOptionChange: clearAddOnSelections,
   });
 
+  const previousAddOnIdsRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    const availableIds = new Set(addOns.map((a) => a.addOnId));
+    const previousIds = previousAddOnIdsRef.current;
+    if (previousIds.size > 0) {
+      setAddOnSelections((prev) => {
+        const next = prev.filter((s) => !previousIds.has(s.addOnId) || availableIds.has(s.addOnId));
+        return next.length === prev.length ? prev : next;
+      });
+    }
+    previousAddOnIdsRef.current = availableIds;
+  }, [addOns]);
+
   const hidePickupSkipOption = useMemo(
     () =>
       !isAdmin &&

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

@@ -3,6 +3,28 @@
  * Uses CSS module to avoid Tailwind purging/override issues in booking-flow.
  */
 
+.searchInputWrapper {
+  position: relative;
+}
+
+.searchIcon {
+  position: absolute;
+  top: 50%;
+  left: 1rem;
+  z-index: 1;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #a8a29e;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.searchIcon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 /* Filter pills - horizontal scroll on mobile, scrollbar hidden until scroll (overlay-style) */
 .filterPillsScroll {
   display: flex;

package/src/components/booking/PickupLocationSelector.tsx

@@ -916,9 +916,9 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
       )}
 
       {/* Input with search icon inside - padding ensures text stays to the right of icon */}
-      <div className="relative">
-        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-stone-400">
-          <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div className={styles.searchInputWrapper}>
+        <div className={styles.searchIcon}>
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
           </svg>
         </div>

package/src/components/booking/PriceBreakdown.tsx

@@ -13,6 +13,14 @@ export interface PriceBreakdownProps {
   qty: number;
   itemTotal: number;
   breakdown: PriceBreakdownType | null;
+  unitPriceComparison?: {
+    previousLabel: string;
+    updatedLabel: string;
+    differenceLabel: string;
+    previousUnitAmount: number;
+    updatedUnitAmount: number;
+    differenceUnitAmount: number;
+  };
   currency: Currency;
   locale: Locale;
   editable?: boolean;
@@ -60,6 +68,7 @@ export function PriceBreakdown({
   qty,
   itemTotal,
   breakdown,
+  unitPriceComparison,
   currency,
   locale,
   editable = false,
@@ -214,17 +223,22 @@ export function PriceBreakdown({
               Price Breakdown ({category})
             </div>
             <div className="space-y-1.5">
-              {breakdown.lineItems.map((line) => (
-                <div key={line.id ?? line.name} className="flex justify-between">
-                  <span className="text-stone-400">
-                    {line.name}{line.type === 'base' ? ` (${currency})` : ''}{formatAdjustmentDetail(line.adjustmentType, line.adjustmentValue, line.amountInDisplayCurrency < 0)}
-                  </span>
-                  <span className={line.type === 'adjustment' && line.amountInDisplayCurrency < 0 ? 'text-red-300' : ''}>
-                    {line.type === 'adjustment' && line.amountInDisplayCurrency >= 0 ? '+' : ''}
-                    {formatCurrencyAmount(line.amountInDisplayCurrency, currency, locale)}
-                  </span>
-                </div>
-              ))}
+              {unitPriceComparison && breakdown.lineItems.length > 0 ? (
+                <div className="font-medium text-stone-300">New-date price calculation</div>
+              ) : null}
+              {(!unitPriceComparison || breakdown.lineItems.length > 0) ? (
+                breakdown.lineItems.map((line) => (
+                  <div key={line.id ?? line.name} className="flex justify-between">
+                    <span className="text-stone-400">
+                      {line.name}{line.type === 'base' ? ` (${currency})` : ''}{formatAdjustmentDetail(line.adjustmentType, line.adjustmentValue, line.amountInDisplayCurrency < 0)}
+                    </span>
+                    <span className={line.type === 'adjustment' && line.amountInDisplayCurrency < 0 ? 'text-red-300' : ''}>
+                      {line.type === 'adjustment' && line.amountInDisplayCurrency >= 0 ? '+' : ''}
+                      {formatCurrencyAmount(line.amountInDisplayCurrency, currency, locale)}
+                    </span>
+                  </div>
+                ))
+              ) : null}
               {/* Only show fees and tax in breakdown when rolled up (tax-inclusive); for CAD/USD they're already separate line items. */}
               {breakdown.isTaxIncluded && (
                 <>
@@ -244,10 +258,47 @@ export function PriceBreakdown({
                   </div>
                 </>
               )}
-              <div className="flex justify-between pt-2 mt-2 border-t border-stone-700 font-semibold">
-                <span>Final price ({currency}):</span>
-                <span>{formatCurrencyAmount(breakdown.finalPrice, currency, locale)}</span>
-              </div>
+              {unitPriceComparison && breakdown.lineItems.length > 0 ? (
+                <div className="flex justify-between pt-2 mt-2 border-t border-stone-700 font-semibold">
+                  <span>New-date final price:</span>
+                  <span>{formatCurrencyAmount(breakdown.finalPrice, currency, locale)}</span>
+                </div>
+              ) : null}
+              {unitPriceComparison ? (
+                <>
+                  {breakdown.lineItems.length > 0 ? (
+                    <div className="pt-2 mt-2 border-t border-stone-700 font-medium text-stone-300">
+                      Price difference
+                    </div>
+                  ) : null}
+                  <div className="flex justify-between gap-3">
+                    <span className="text-stone-400">{unitPriceComparison.previousLabel}</span>
+                    <span>{formatCurrencyAmount(unitPriceComparison.previousUnitAmount, currency, locale)}</span>
+                  </div>
+                  <div className="flex justify-between gap-3">
+                    <span className="text-stone-400">{unitPriceComparison.updatedLabel}</span>
+                    <span>{formatCurrencyAmount(unitPriceComparison.updatedUnitAmount, currency, locale)}</span>
+                  </div>
+                  <div className="flex justify-between gap-3 border-t border-stone-700 pt-1.5">
+                    <span className="text-stone-400">{unitPriceComparison.differenceLabel}</span>
+                    <span className={unitPriceComparison.differenceUnitAmount < 0 ? 'text-red-300' : ''}>
+                      {unitPriceComparison.differenceUnitAmount > 0 ? '+' : ''}
+                      {formatCurrencyAmount(unitPriceComparison.differenceUnitAmount, currency, locale)}
+                    </span>
+                  </div>
+                </>
+              ) : (
+                <div className="flex justify-between pt-2 mt-2 border-t border-stone-700 font-semibold">
+                  <span>Final price ({currency}):</span>
+                  <span>{formatCurrencyAmount(breakdown.finalPrice, currency, locale)}</span>
+                </div>
+              )}
+              {unitPriceComparison && qty > 1 ? (
+                <div className="flex justify-between pt-2 mt-2 border-t border-stone-700 font-semibold">
+                  <span>Total difference (× {qty}):</span>
+                  <span>{formatCurrencyAmount(itemTotal, currency, locale)}</span>
+                </div>
+              ) : null}
             </div>
           </div>
         )}

package/src/components/booking/PriceSummary.tsx

@@ -14,11 +14,22 @@ export type PriceSummaryLine =
   | {
       kind: 'ticket';
       lineKey?: string;
+      /** Pricing V2 amendment operation that produced this row, when applicable. */
+      operationId?: string;
       editable?: boolean;
       category: string;
       qty: number;
       itemTotal: number;
       breakdown?: PriceBreakdownType | null;
+      /** Optional server-value comparison for amendment delta rows. */
+      unitPriceComparison?: {
+        previousLabel: string;
+        updatedLabel: string;
+        differenceLabel: string;
+        previousUnitAmount: number;
+        updatedUnitAmount: number;
+        differenceUnitAmount: number;
+      };
     }
   | {
       kind: 'line';
@@ -69,6 +80,8 @@ export interface PriceSummaryProps {
   hideSubtotal?: boolean;
   /** Overrides the final "Total" row label (e.g. change booking: amount due for the change) */
   totalLabel?: string;
+  /** Prefix a positive total with + when the row represents a signed change rather than an absolute total. */
+  showPositiveTotalSign?: boolean;
   /** Render after the total row (e.g. provider price delta + keep-original-price) */
   extraAfterTotal?: ReactNode;
   /** Optional map of editable line input values by line key. */
@@ -171,6 +184,7 @@ export function PriceSummary({
   depositMode,
   hideSubtotal = false,
   totalLabel,
+  showPositiveTotalSign = false,
   extraAfterTotal,
   lineAmountInputs,
   lineLabelInputs,
@@ -211,6 +225,7 @@ export function PriceSummary({
               qty={row.qty}
               itemTotal={row.itemTotal}
               breakdown={row.breakdown ?? null}
+              unitPriceComparison={row.unitPriceComparison}
               currency={currency}
               locale={locale}
               editable={Boolean(row.editable && isBeforeSubtotalBoundary)}
@@ -370,6 +385,7 @@ export function PriceSummary({
                 (t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total')}
             </span>
             <span className="flex-shrink-0 whitespace-nowrap font-semibold text-stone-900">
+              {showPositiveTotalSign && total > 0.005 ? '+' : ''}
               {formatCurrencyAmount(total, currency, locale)}
             </span>
           </div>

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -32,9 +32,12 @@ import { PrivateShuttleStartTimeSection } from './PrivateShuttleStartTimeSection
 import {
   getPrivateShuttleAvailabilityOptionId,
   privateShuttleBookingCutoffMessage,
+  privateShuttleInitialDateKey,
+  privateShuttleStartDateTime,
   privateShuttleStartTimeAllowed,
   resolveHydratedPrivateShuttleAvailability,
 } from './private-shuttle-availability';
+import { formatInTimeZone } from 'date-fns-tz';
 import { usePrivateShuttleAvailability } from './use-private-shuttle-availability';
 import type {
   ProviderDashboardChangeBookingPayload,
@@ -49,6 +52,7 @@ import {
 } from './usePrivateShuttlePriceSummary';
 import { usePrivateShuttlePromoController } from './usePrivateShuttlePromoController';
 import { useBookingViewItemAnalytics } from './useBookingViewItemAnalytics';
+import { resolvePrivateShuttleCancellationPolicyId } from './private-shuttle-cancellation-policy';
 
 interface PrivateShuttleBookingFlowProps {
   product: Product;
@@ -129,7 +133,12 @@ export function PrivateShuttleBookingFlow({
   const isAdmin = permissions.viewerRole === 'admin';
   const isProviderChangeMode = Boolean(initialBooking && onChangeBooking);
 
-  const [selectedDate, setSelectedDate] = useState<string>('');
+  const [selectedDate, setSelectedDate] = useState<string>(() =>
+    privateShuttleInitialDateKey(
+      initialBooking?.dateTime ?? initialValues?.dateTime,
+      companyTimezone,
+    )
+  );
   const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
   const [selectedOption, setSelectedOption] = useState<string>('');
   const [selectedStartTime, setSelectedStartTime] = useState<string>('');
@@ -137,10 +146,16 @@ export function PrivateShuttleBookingFlow({
   const [passengerCount, setPassengerCount] = useState<number>(
     () => initialBooking?.privateShuttleDetails?.passengerCount ?? initialValues?.passengers ?? 1
   );
-  const [email, setEmail] = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [phoneNumber, setPhoneNumber] = useState('');
+  const [email, setEmail] = useState(() => initialBooking?.customer?.email?.trim() ?? '');
+  const [firstName, setFirstName] = useState(
+    () => initialBooking?.customer?.firstName?.trim() ?? ''
+  );
+  const [lastName, setLastName] = useState(
+    () => initialBooking?.customer?.lastName?.trim() ?? ''
+  );
+  const [phoneNumber, setPhoneNumber] = useState(
+    () => initialBooking?.customer?.phoneNumber?.trim() ?? ''
+  );
   const [pickupLocationId, setPickupLocationId] = useState<string | null>(
     () => initialBooking?.pickupLocationId ?? initialValues?.pickupLocationId ?? null
   );
@@ -285,13 +300,35 @@ export function PrivateShuttleBookingFlow({
       setAddOns([]);
       return;
     }
+    const dateTimeForAddOns =
+      selectedDate && selectedStartTime
+        ? formatInTimeZone(
+            privateShuttleStartDateTime(selectedDate, selectedStartTime, companyTimezone),
+            companyTimezone,
+            "yyyy-MM-dd'T'HH:mm:ssXXX",
+          )
+        : selectedDate || undefined;
     getAddOns(product.companyId!, {
       productOptionId: selectedOption,
       preCheckout: true,
+      dateTime: dateTimeForAddOns,
     })
       .then(setAddOns)
       .catch(() => setAddOns([]));
-  }, [selectedOption, product.companyId]);
+  }, [selectedOption, selectedDate, selectedStartTime, product.companyId, companyTimezone]);
+
+  const previousAddOnIdsRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    const availableIds = new Set(addOns.map((a) => a.addOnId));
+    const previousIds = previousAddOnIdsRef.current;
+    if (previousIds.size > 0) {
+      setAddOnSelections((prev) => {
+        const next = prev.filter((s) => !previousIds.has(s.addOnId) || availableIds.has(s.addOnId));
+        return next.length === prev.length ? prev : next;
+      });
+    }
+    previousAddOnIdsRef.current = availableIds;
+  }, [addOns]);
 
   useEffect(() => {
     if (!draftItineraryDestinations.includes('emerald_lake')) {
@@ -520,14 +557,14 @@ export function PrivateShuttleBookingFlow({
   }, [isAdmin, isCustomTimeMode, selectedStartTime, suggestedStartTimes]);
 
   useEffect(() => {
-    if (
-      pricingConfig?.cancellationPolicies &&
-      pricingConfig.cancellationPolicies.length > 0 &&
-      !cancellationPolicyId
-    ) {
-      setCancellationPolicyId(pricingConfig.cancellationPolicies[0].id);
-    }
-  }, [pricingConfig?.cancellationPolicies, cancellationPolicyId]);
+    const policies = pricingConfig?.cancellationPolicies;
+    if (!policies?.length || forcedCancellationPolicy) return;
+    const resolved = resolvePrivateShuttleCancellationPolicyId(
+      cancellationPolicyId,
+      policies.map((policy) => policy.id),
+    );
+    if (resolved !== cancellationPolicyId) setCancellationPolicyId(resolved);
+  }, [pricingConfig?.cancellationPolicies, cancellationPolicyId, forcedCancellationPolicy]);
 
   const handleOptionSelect = (optionId: string) => {
     setSelectedOption(optionId);
@@ -784,6 +821,7 @@ export function PrivateShuttleBookingFlow({
               isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
               onDateSelect={handleDateSelect}
               timezone={companyTimezone}
+              syncVisibleWeekToSelectedDate={isProviderChangeMode || Boolean(initialValues?.dateTime)}
               displayMode="status"
               earliestDate={earliestAvailabilityDate}
               onVisibleRangeChange={handleVisibleRangeChange}