@ticketboothapp/booking 1.2.55 → 1.2.58

package/src/components/booking/PriceBreakdown.tsx

@@ -15,6 +15,11 @@ export interface PriceBreakdownProps {
   breakdown: PriceBreakdownType | null;
   currency: Currency;
   locale: Locale;
+  editable?: boolean;
+  editableValue?: string;
+  onEditableChange?: (value: string) => void;
+  onEditableBlur?: () => void;
+  onEditableReset?: () => void;
 }
 
 /**
@@ -39,6 +44,10 @@ function formatAdjustmentDetail(
   return '';
 }
 
+function getCurrencySymbol(currency: Currency, locale: Locale): string {
+  return formatCurrencyAmount(0, currency, locale).replace(/[0-9\s,.-]/g, '') || currency;
+}
+
 /**
  * Renders a single price line (e.g. "Adult × 2 — $X"). When the host app grants
  * permission, shows a hover tooltip with the full price breakdown (base, adjustments,
@@ -51,11 +60,17 @@ export function PriceBreakdown({
   breakdown,
   currency,
   locale,
+  editable = false,
+  editableValue,
+  onEditableChange,
+  onEditableBlur,
+  onEditableReset,
 }: PriceBreakdownProps) {
   const [showTooltip, setShowTooltip] = useState(false);
   const { t } = useTranslations();
   const { permissions } = useBookingApp();
   const canShowBreakdown = breakdown != null && permissions.canViewPriceBreakdown;
+  const currencySymbol = getCurrencySymbol(currency, locale);
 
   // Calculate base price for discount detection
   // In public mode, the base price in breakdown already has dynamic increases rolled in
@@ -69,9 +84,34 @@ export function PriceBreakdown({
         <span className="text-sm text-stone-600">
           {category} {qty > 1 ? `× ${qty}` : ''}
         </span>
-        <span className="text-sm font-medium text-stone-700">
-          {formatCurrencyAmount(itemTotal, currency, locale)}
-        </span>
+        {editable && onEditableChange ? (
+          <div className="flex items-center gap-1">
+            {onEditableReset ? (
+              <button
+                type="button"
+                className="rounded p-0.5 text-stone-400 hover:bg-stone-100 hover:text-stone-700"
+                onClick={onEditableReset}
+                aria-label={`Reset ${category} amount`}
+                title="Reset to quoted value"
+              >
+                <span className="inline-block h-3.5 w-3.5 text-center text-xs leading-[14px]">↺</span>
+              </button>
+            ) : null}
+            <span className="text-sm text-stone-500">{currencySymbol}</span>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+              value={editableValue ?? String(itemTotal)}
+              onChange={(e) => onEditableChange(e.target.value)}
+              onBlur={onEditableBlur}
+            />
+          </div>
+        ) : (
+          <span className="text-sm font-medium text-stone-700">
+            {formatCurrencyAmount(itemTotal, currency, locale)}
+          </span>
+        )}
       </div>
     );
   }
@@ -82,30 +122,55 @@ export function PriceBreakdown({
         {category} {qty > 1 ? `× ${qty}` : ''}
       </span>
       <div className="relative flex-shrink-0 whitespace-nowrap">
-        <span
-          className={
-            canShowBreakdown
-              ? 'text-sm font-medium text-stone-700 cursor-help underline decoration-dotted'
-              : 'text-sm font-medium text-stone-700'
-          }
-          onMouseEnter={canShowBreakdown ? () => setShowTooltip(true) : undefined}
-          onMouseLeave={canShowBreakdown ? () => setShowTooltip(false) : undefined}
-        >
-          {hasDiscount ? (
-            <>
-              <span className="line-through text-stone-400">
-                {formatCurrencyAmount(baseTotal, currency, locale)}
-              </span>
-              {' '}
-              <span className="text-emerald-600">
-                {formatCurrencyAmount(itemTotal, currency, locale)}
-              </span>
-            </>
-          ) : (
-            formatCurrencyAmount(itemTotal, currency, locale)
-          )}
-        </span>
-        {canShowBreakdown && showTooltip && (
+        {editable && onEditableChange ? (
+          <div className="flex items-center gap-1">
+            {onEditableReset ? (
+              <button
+                type="button"
+                className="rounded p-0.5 text-stone-400 hover:bg-stone-100 hover:text-stone-700"
+                onClick={onEditableReset}
+                aria-label={`Reset ${category} amount`}
+                title="Reset to quoted value"
+              >
+                <span className="inline-block h-3.5 w-3.5 text-center text-xs leading-[14px]">↺</span>
+              </button>
+            ) : null}
+            <span className="text-sm text-stone-500">{currencySymbol}</span>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+              value={editableValue ?? String(itemTotal)}
+              onChange={(e) => onEditableChange(e.target.value)}
+              onBlur={onEditableBlur}
+            />
+          </div>
+        ) : (
+          <span
+            className={
+              canShowBreakdown
+                ? 'text-sm font-medium text-stone-700 cursor-help underline decoration-dotted'
+                : 'text-sm font-medium text-stone-700'
+            }
+            onMouseEnter={canShowBreakdown ? () => setShowTooltip(true) : undefined}
+            onMouseLeave={canShowBreakdown ? () => setShowTooltip(false) : undefined}
+          >
+            {hasDiscount ? (
+              <>
+                <span className="line-through text-stone-400">
+                  {formatCurrencyAmount(baseTotal, currency, locale)}
+                </span>
+                {' '}
+                <span className="text-emerald-600">
+                  {formatCurrencyAmount(itemTotal, currency, locale)}
+                </span>
+              </>
+            ) : (
+              formatCurrencyAmount(itemTotal, currency, locale)
+            )}
+          </span>
+        )}
+        {!editable && 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

@@ -1,5 +1,6 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import { formatCurrencyAmount } from '../../lib/currency';
 import type { PriceBreakdown as PriceBreakdownType } from '../../lib/booking/pricing';
 import { PriceBreakdown } from './PriceBreakdown';
@@ -12,6 +13,8 @@ import styles from './PriceSummary.module.css';
 export type PriceSummaryLine =
   | {
       kind: 'ticket';
+      lineKey?: string;
+      editable?: boolean;
       category: string;
       qty: number;
       itemTotal: number;
@@ -19,6 +22,7 @@ export type PriceSummaryLine =
     }
   | {
       kind: 'line';
+      lineKey?: string;
       label: string;
       amount: number;
       /** Drives styling: discount (red, -), return add-on (green, +), default (stone). Receipt types: TICKET, FEE, RETURN_OPTION, PROMO_CODE, CANCELLATION_UPGRADE, TAX, etc. */
@@ -26,6 +30,8 @@ export type PriceSummaryLine =
       quantity?: number | null;
       /** Optional tooltip text - when set, shows info icon next to label (e.g. for Moraine Lake Road Access Fee) */
       tooltip?: string;
+      /** Optional: render amount as inline editable input when handler is provided. */
+      editable?: boolean;
     };
 
 export interface PriceSummaryProps {
@@ -53,6 +59,8 @@ export interface PriceSummaryProps {
   className?: string;
   /** Optional: render between tax row and total row (e.g. promo code input in BookingFlow) */
   extraBetweenTaxAndTotal?: React.ReactNode;
+  /** Optional: render inside receipt before subtotal/tax rows. */
+  extraBeforeSubtotal?: React.ReactNode;
   /** Subtotal row spacing: 'compact' for booking flow/Stripe modal, 'relaxed' for /manage (equal top/bottom) */
   subtotalSpacing?: 'compact' | 'relaxed';
   /** Deposit mode: show Total (full), Deposit (amount due today), Remaining Balance */
@@ -61,6 +69,16 @@ export interface PriceSummaryProps {
   hideSubtotal?: boolean;
   /** Overrides the final "Total" row label (e.g. change booking: amount due for the change) */
   totalLabel?: string;
+  /** 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. */
+  lineAmountInputs?: Record<string, string>;
+  /** Optional change handler for inline editable line amounts. */
+  onLineAmountInputChange?: (lineKey: string, value: string) => void;
+  /** Optional blur handler for enforcing display format (e.g. 2 decimals). */
+  onLineAmountInputBlur?: (lineKey: string) => void;
+  /** Optional reset handler for inline editable line amounts. */
+  onLineAmountReset?: (lineKey: string) => void;
 }
 
 function getLineAmountClass(type: string | undefined, amount: number): string {
@@ -84,6 +102,10 @@ function formatLineAmount(
   return formatted;
 }
 
+function getCurrencySymbol(currency: Currency, locale: Locale): string {
+  return formatCurrencyAmount(0, currency, locale).replace(/[0-9\s,.-]/g, '') || currency;
+}
+
 /**
  * Reusable price breakdown/summary used in:
  * - BookingFlow sidebar (order summary)
@@ -105,13 +127,20 @@ export function PriceSummary({
   t = (k) => k,
   className = '',
   extraBetweenTaxAndTotal,
+  extraBeforeSubtotal,
   subtotalSpacing = 'compact',
   depositMode,
   hideSubtotal = false,
   totalLabel,
+  extraAfterTotal,
+  lineAmountInputs,
+  onLineAmountInputChange,
+  onLineAmountInputBlur,
+  onLineAmountReset,
 }: PriceSummaryProps) {
   const textSize = size === 'sm' ? 'text-sm' : 'text-base';
   const totalSize = size === 'sm' ? 'text-xl' : 'text-2xl';
+  const currencySymbol = getCurrencySymbol(currency, locale);
   const subtotalRowClass = subtotalSpacing === 'relaxed'
     ? `pt-3 pb-3 mt-2 ${styles.ruleAbove}`
     : `mt-2 pt-1.5 ${styles.ruleAbove}`;
@@ -131,10 +160,27 @@ export function PriceSummary({
               breakdown={row.breakdown ?? null}
               currency={currency}
               locale={locale}
+              editable={row.editable}
+              editableValue={row.lineKey ? lineAmountInputs?.[row.lineKey] : undefined}
+              onEditableChange={
+                row.editable && row.lineKey && onLineAmountInputChange
+                  ? (value) => onLineAmountInputChange(row.lineKey!, value)
+                  : undefined
+              }
+              onEditableBlur={
+                row.editable && row.lineKey && onLineAmountInputBlur
+                  ? () => onLineAmountInputBlur(row.lineKey!)
+                  : undefined
+              }
+              onEditableReset={
+                row.editable && row.lineKey && onLineAmountReset
+                  ? () => onLineAmountReset(row.lineKey!)
+                  : undefined
+              }
             />
           );
         }
-        const { label, amount, type, quantity, tooltip } = row;
+        const { lineKey, label, amount, type, quantity, tooltip, editable } = row;
         // Receipt mode: insert Subtotal row before first TAX line
         const isTaxLine = type === 'TAX';
         const showSubtotalBeforeTax = isTaxLine && subtotal != null && subtotal > 0 && !subtotalShown;
@@ -155,13 +201,39 @@ export function PriceSummary({
                 </span>
                 {tooltip && <InfoTooltip text={tooltip} />}
               </span>
-              <span className={`flex-shrink-0 whitespace-nowrap font-medium ${getLineAmountClass(type, amount)}`}>
-                {formatLineAmount('line', amount, type, currency, locale)}
-              </span>
+              {editable && lineKey && onLineAmountInputChange ? (
+                <div className="flex items-center gap-1">
+                  {onLineAmountReset ? (
+                    <button
+                      type="button"
+                      className="rounded p-0.5 text-stone-400 hover:bg-stone-100 hover:text-stone-700"
+                      onClick={() => onLineAmountReset(lineKey)}
+                      aria-label={`Reset ${label} amount`}
+                      title="Reset to quoted value"
+                    >
+                      <span className="inline-block h-3.5 w-3.5 text-center text-xs leading-[14px]">↺</span>
+                    </button>
+                  ) : null}
+                  <span className="text-sm text-stone-500">{currencySymbol}</span>
+                  <input
+                    type="text"
+                    inputMode="decimal"
+                    className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+                    value={lineAmountInputs?.[lineKey] ?? String(amount)}
+                    onChange={(e) => onLineAmountInputChange(lineKey, e.target.value)}
+                    onBlur={() => onLineAmountInputBlur?.(lineKey)}
+                  />
+                </div>
+              ) : (
+                <span className={`flex-shrink-0 whitespace-nowrap font-medium ${getLineAmountClass(type, amount)}`}>
+                  {formatLineAmount('line', amount, type, currency, locale)}
+                </span>
+              )}
             </div>
           </div>
         );
       })}
+      {extraBeforeSubtotal}
 
       {/* Checkout mode: subtotal/tax/discount not in lines (e.g. Stripe Review & pay modal) */}
       {subtotal != null && !subtotalShown && !hideSubtotal && (subtotal !== total || discountAmount > 0) && (
@@ -230,6 +302,7 @@ export function PriceSummary({
           </div>
         )}
       </div>
+      {extraAfterTotal}
     </div>
   );
 }

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -58,6 +58,10 @@ import {
 } from '../../lib/booking/source-metadata';
 import type { VideoSources } from '../../constants/products';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
+import type {
+  ProviderDashboardChangeBookingPayload,
+  ProviderDashboardInitialBooking,
+} from './provider-dashboard-change-booking';
 import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
 
 interface PrivateShuttleBookingFlowProps {
@@ -99,6 +103,9 @@ interface PrivateShuttleBookingFlowProps {
     specialRequest?: string | null;
     notes?: string | null;
   };
+  /** Provider dashboard change-booking (TicketBooth `BookingWidget` initialBooking + onChangeBooking). */
+  initialBooking?: ProviderDashboardInitialBooking;
+  onChangeBooking?: (data: ProviderDashboardChangeBookingPayload) => Promise<void>;
 }
 
 const RESOURCE_CAPACITY = 13;
@@ -151,6 +158,8 @@ export function PrivateShuttleBookingFlow({
   availabilityPricingProfileId,
   availabilityCancellationPolicyProfileId,
   initialValues,
+  initialBooking,
+  onChangeBooking,
 }: PrivateShuttleBookingFlowProps) {
   const { strings: defaultStrings, analytics, catalog } = useBookingHost();
   const { t } = useTranslations();
@@ -168,6 +177,7 @@ export function PrivateShuttleBookingFlow({
   } = useBookingApp();
   const availabilitiesCache = useAvailabilitiesCache();
   const isAdmin = permissions.viewerRole === 'admin';
+  const isProviderChangeMode = Boolean(initialBooking && onChangeBooking);
 
   const [availabilities, setAvailabilities] = useState<Availability[]>([]);
   const [selectedDate, setSelectedDate] = useState<string>('');
@@ -175,11 +185,15 @@ export function PrivateShuttleBookingFlow({
   const [selectedOption, setSelectedOption] = useState<string>('');
   const [selectedStartTime, setSelectedStartTime] = useState<string>('');
   const [isCustomTimeMode, setIsCustomTimeMode] = useState(false);
-  const [passengerCount, setPassengerCount] = useState<number>(1);
+  const [passengerCount, setPassengerCount] = useState<number>(
+    () => initialBooking?.privateShuttleDetails?.passengerCount ?? initialValues?.passengers ?? 1
+  );
   const [email, setEmail] = useState('');
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
-  const [pickupLocationId, setPickupLocationId] = useState<string | null>(null);
+  const [pickupLocationId, setPickupLocationId] = useState<string | null>(
+    () => initialBooking?.pickupLocationId ?? initialValues?.pickupLocationId ?? null
+  );
   const hasAutoSelectedPartnerDateRef = useRef(false);
   const hasAutoSelectedPartnerPickupRef = useRef(false);
   const handleDateSelectRef = useRef<(date: string) => void>(() => {});
@@ -191,7 +205,15 @@ export function PrivateShuttleBookingFlow({
   const [foodRestrictions, setFoodRestrictions] = useState('');
   const [addOnSelections, setAddOnSelections] = useState<
     Array<{ addOnId: string; variantId?: string; quantity?: number }>
-  >([]);
+  >(() =>
+    initialBooking?.addOnSelections?.length
+      ? initialBooking.addOnSelections.map((s) => ({
+          addOnId: s.addOnId,
+          variantId: s.variantId,
+          quantity: s.quantity ?? 1,
+        }))
+      : []
+  );
   const [addOns, setAddOns] = useState<AddOn[]>([]);
   const [loading, setLoading] = useState(false);
   const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
@@ -230,14 +252,18 @@ export function PrivateShuttleBookingFlow({
   const [skipConfirmationCommunications, setSkipConfirmationCommunications] = useState(false);
   const [disableAutoCommunications, setDisableAutoCommunications] = useState(false);
   const [showAdminPaymentChoice, setShowAdminPaymentChoice] = useState(false);
-  const [promoCodeInput, setPromoCodeInput] = useState('');
-  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(null);
+  const [promoCodeInput, setPromoCodeInput] = useState(() => initialBooking?.promoCode?.trim() ?? '');
+  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(
+    () => initialBooking?.promoCode?.trim() || null
+  );
   const [promoCodeError, setPromoCodeError] = useState('');
   const [promoCodeValidating, setPromoCodeValidating] = useState(false);
   const [promoDiscountAmount, setPromoDiscountAmount] = useState(0);
   const [isGiftCard, setIsGiftCard] = useState(false);
   const [isVoucher, setIsVoucher] = useState(false);
-  const [additionalHoursCount, setAdditionalHoursCount] = useState(0);
+  const [additionalHoursCount, setAdditionalHoursCount] = useState(
+    () => initialBooking?.additionalHoursCount ?? initialValues?.additionalHoursCount ?? 0
+  );
   const [isSpecialRequestMode, setIsSpecialRequestMode] = useState(false);
   const [specialRequestInputValue, setSpecialRequestInputValue] = useState('');
   const [adminChoiceData, setAdminChoiceData] = useState<{
@@ -267,7 +293,9 @@ export function PrivateShuttleBookingFlow({
     discountLabel?: string | null;
   } | null>(null);
   const [pricingConfig, setPricingConfig] = useState<PricingConfig | null>(null);
-  const [cancellationPolicyId, setCancellationPolicyId] = useState<string | null>(null);
+  const [cancellationPolicyId, setCancellationPolicyId] = useState<string | null>(
+    () => initialBooking?.cancellationPolicyId ?? null
+  );
   const [precomputedPrices, setPrecomputedPrices] = useState<PrecomputedPricesByCategory | null>(null);
   const [resourcePriceByCurrency, setResourcePriceByCurrency] = useState<Record<string, number> | null>(null);
   const [resourcePriceByOption, setResourcePriceByOption] = useState<
@@ -1199,21 +1227,23 @@ export function PrivateShuttleBookingFlow({
       setError(t('booking.selectPickupLocation'));
       return;
     }
-    if (!email) {
-      setError(t('booking.enterEmail') || 'Please enter your email address');
-      return;
-    }
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      setError(t('booking.invalidEmail') || 'Please enter a valid email address');
-      return;
-    }
-    if (!firstName?.trim()) {
-      setError(t('booking.enterFirstName') || 'Please enter your first name');
-      return;
-    }
-    if (!lastName?.trim()) {
-      setError(t('booking.enterLastName') || 'Please enter your last name');
-      return;
+    if (!isProviderChangeMode) {
+      if (!email) {
+        setError(t('booking.enterEmail') || 'Please enter your email address');
+        return;
+      }
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setError(t('booking.invalidEmail') || 'Please enter a valid email address');
+        return;
+      }
+      if (!firstName?.trim()) {
+        setError(t('booking.enterFirstName') || 'Please enter your first name');
+        return;
+      }
+      if (!lastName?.trim()) {
+        setError(t('booking.enterLastName') || 'Please enter your last name');
+        return;
+      }
     }
 
     setLoading(true);
@@ -1226,6 +1256,31 @@ export function PrivateShuttleBookingFlow({
         setLoading(false);
         return;
       }
+      if (isProviderChangeMode && onChangeBooking) {
+        const bookingItems = [{ category: 'RESOURCE' as const, count: billableResourceCount }];
+        const [hours, minutes] = selectedStartTime.split(':').map(Number);
+        const startTimeISO = `${selectedDate}T${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00-06:00`;
+        await onChangeBooking({
+          productId: selectedOption,
+          dateTime: selectedDate,
+          bookingItems,
+          returnAvailabilityId: null,
+          pickupLocationId: pickupLocationId ?? null,
+          travelerHotel:
+            selectedPickupLocation?.name ?? customPickupAddress ?? initialBooking?.travelerHotel ?? null,
+          startTime: startTimeISO,
+          passengerCount,
+          childSafetySeatsCount: childSafetySeatsCount > 0 ? childSafetySeatsCount : null,
+          foodRestrictions: foodRestrictions.trim() || null,
+          addOnSelections: addOnSelections.length > 0 ? addOnSelections : null,
+          cancellationPolicyId: cancellationPolicyId ?? initialBooking?.cancellationPolicyId ?? null,
+          promoCode: appliedPromoCode ?? null,
+          newTotalAmount: totalPrice,
+          additionalHoursCount: isAdmin ? additionalHoursCount : null,
+        });
+        setLoading(false);
+        return;
+      }
       const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
         clientChannelSource: inferClientBookingSourceFromProductIds(product.productId, selectedOption),
         forcePartnerPortalChannel: partnerPortalBooking,
@@ -2649,11 +2704,12 @@ export function PrivateShuttleBookingFlow({
                     className={styles.submitBtn}
                   >
                     {loading
-                      ? (t('booking.creatingReservation') || 'Creating reservation...')
-                      : (flowUi?.partnerDeferredInvoiceSubmitLabel ||
-                        t('booking.continueToPayment') ||
-                        'Continue to Payment')}{' '}
-                    ({formatCurrencyAmount(depositInfo ? depositInfo.depositAmount : totalPrice, currency, locale as 'en' | 'fr')})
+                      ? isProviderChangeMode
+                        ? 'Processing…'
+                        : (t('booking.creatingReservation') || 'Creating reservation...')
+                      : isProviderChangeMode
+                        ? `Change booking (${formatCurrencyAmount(depositInfo ? depositInfo.depositAmount : totalPrice, currency, locale as 'en' | 'fr')})`
+                        : `${flowUi?.partnerDeferredInvoiceSubmitLabel || t('booking.continueToPayment') || 'Continue to Payment'} (${formatCurrencyAmount(depositInfo ? depositInfo.depositAmount : totalPrice, currency, locale as 'en' | 'fr')})`}
                   </button>
                   <p className={styles.secureNote}>
                     {t('booking.securePayment') || 'Secure payment powered by Stripe'}

package/src/components/booking/TermsAcceptance.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useBookingHost } from '../../runtime';
+import { DefaultTermsContent } from './DefaultTermsContent';
 
 export interface TermsAcceptanceProps {
   checked: boolean;
@@ -25,7 +26,7 @@ export function TermsAcceptance({
   termsContent,
 }: TermsAcceptanceProps) {
   const { slots } = useBookingHost();
-  const TermsContent = slots.TermsContent;
+  const TermsContent = slots.TermsContent ?? DefaultTermsContent;
   const [modalOpen, setModalOpen] = useState(false);
   const content =
     termsContent ?? (

package/src/components/booking/booking-flow-ui.ts

@@ -1,3 +1,43 @@
+export type ProviderDashboardPricingLine = {
+  lineKey: string;
+  label: string;
+  amount: number;
+  editable: boolean;
+  type?: string;
+};
+
+export type ProviderDashboardChangePricingUi = {
+  loading?: boolean;
+  error?: string | null;
+  helperText?: string;
+  quotedLines?: ProviderDashboardPricingLine[];
+  lineAmountInputs?: Record<string, string>;
+  onLineAmountInputChange?: (lineKey: string, value: string) => void;
+  onLineAmountInputBlur?: (lineKey: string) => void;
+  onLineAmountReset?: (lineKey: string) => void;
+  additionalAdjustments?: Array<{
+    id: string;
+    label: string;
+    amountInput: string;
+    mode: 'DISCOUNT' | 'CHARGE';
+    originalLabel?: string;
+    originalAmountInput?: string;
+    originalMode?: 'DISCOUNT' | 'CHARGE';
+  }>;
+  onAddAdditionalAdjustment?: () => void;
+  onUpdateAdditionalAdjustment?: (
+    id: string,
+    patch: Partial<{ label: string; amountInput: string; mode: 'DISCOUNT' | 'CHARGE' }>
+  ) => void;
+  onRemoveAdditionalAdjustment?: (id: string) => void;
+  totalsPreview?: {
+    subtotalBeforeTax: number;
+    taxAmount: number;
+    totalAmount: number;
+    currency: string;
+  } | null;
+};
+
 /**
  * Optional UI/behavior overrides for booking flows.
  * Omitted fields keep main-site / change-booking defaults.
@@ -23,6 +63,8 @@ export interface BookingFlowUiOptions {
    * when a host page has its own sticky chrome (e.g. partner portal header + tabs).
    */
   itineraryStickyTopOffsetPx?: number;
+  /** Provider dashboard change flow: quote/override panel shown immediately before confirm CTA. */
+  providerDashboardChangePricingUi?: ProviderDashboardChangePricingUi;
 }
 
 /**

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

@@ -301,13 +301,16 @@
   color: #b91c1c !important;
 }
 
-/* Clickable "your pickup location" etc. - style as link (blue, underlined) like ticketbooth */
+/* Clickable "your pickup location" etc. should stay booking green */
 .booking-flow-preflight button.text-stone-400.underline,
 .booking-flow-preflight button.text-stone-400.underline:hover {
-  color: var(--booking-primary) !important;
+  color: var(--booking-emerald-600, #059669) !important;
   background: none;
   border: none;
 }
+.booking-flow-preflight button.text-stone-400.underline:hover {
+  color: var(--booking-emerald-700, #047857) !important;
+}
 
 /* ========== Itinerary section - orange bg, Poppins, lowercase (match TourDescription) ========== */
 .booking-flow-preflight [class*="ItineraryBox_box"],
@@ -907,6 +910,38 @@
   border-bottom-width: 1px !important;
 }
 
+/* Change-booking compare: single vertical / horizontal rule between current vs new (preflight-safe) */
+/* Same as column total row: `border-t border-stone-200/80` in change-booking-compare.tsx */
+.booking-flow-preflight .booking-change-compare-divider,
+.booking-flow-root .booking-change-compare-divider {
+  flex-shrink: 0 !important;
+  border: none !important;
+  background-color: color-mix(
+    in srgb,
+    var(--booking-stone-200, #e7e5e4) 80%,
+    transparent
+  ) !important;
+}
+@media (max-width: 767px) {
+  .booking-flow-preflight .booking-change-compare-divider,
+  .booking-flow-root .booking-change-compare-divider {
+    height: 1px !important;
+    width: 100% !important;
+    min-height: 1px !important;
+  }
+}
+@media (min-width: 768px) {
+  .booking-flow-preflight .booking-change-compare-divider,
+  .booking-flow-root .booking-change-compare-divider {
+    width: 1px !important;
+    align-self: stretch !important;
+    height: auto !important;
+    min-height: 3rem !important;
+    margin-top: 0.875rem !important;
+    margin-bottom: 0.875rem !important;
+  }
+}
+
 /* PriceSummary.ruleAbove — explicit module border beats preflight `* { border-width: 0 }` */
 .booking-flow-preflight [class*="PriceSummary_ruleAbove"],
 .booking-flow-root [class*="PriceSummary_ruleAbove"] {