@ticketboothapp/booking 1.2.184 → 1.2.186

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.184",
+  "version": "1.2.186",
   "private": false,
   "sideEffects": [
     "**/*.css",
@@ -11,6 +11,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./background-video": "./src/components/BackgroundVideo.tsx",
     "./booking-flow.css": "./src/components/booking/booking-flow.css",
     "./runtime": "./src/runtime/index.ts",
     "./contexts/booking-app-context": "./src/contexts/BookingAppContext.tsx",

package/src/components/BackgroundVideo.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ForwardedRef,
+  type VideoHTMLAttributes,
+} from 'react';
+
+export type BackgroundVideoLoading = 'eager' | 'viewport';
+
+export interface BackgroundVideoProps
+  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'children' | 'poster' | 'preload' | 'src'> {
+  src: string;
+  webm?: string;
+  poster?: string;
+  preload?: 'auto' | 'metadata' | 'none';
+  loading?: BackgroundVideoLoading;
+  className?: string;
+  style?: CSSProperties;
+}
+
+function assignRef(ref: ForwardedRef<HTMLVideoElement>, value: HTMLVideoElement | null) {
+  if (typeof ref === 'function') ref(value);
+  else if (ref) ref.current = value;
+}
+
+/**
+ * Lightweight background video with real multi-format sources. Viewport videos
+ * do not request media until they are near the screen and pause again offscreen.
+ */
+export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(
+  function BackgroundVideo(
+    {
+      src,
+      webm,
+      poster,
+      preload,
+      loading = 'viewport',
+      className,
+      style,
+      autoPlay = true,
+      muted = true,
+      loop = true,
+      playsInline = true,
+      ...videoProps
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+    const [shouldLoad, setShouldLoad] = useState(loading === 'eager');
+    const [shouldPlay, setShouldPlay] = useState(loading === 'eager');
+
+    const setVideoRef = useCallback((element: HTMLVideoElement | null) => {
+      videoRef.current = element;
+      assignRef(forwardedRef, element);
+    }, [forwardedRef]);
+
+    useEffect(() => {
+      if (loading === 'eager') {
+        setShouldLoad(true);
+        setShouldPlay(true);
+        return;
+      }
+
+      const container = containerRef.current;
+      if (!container || typeof IntersectionObserver === 'undefined') {
+        setShouldLoad(true);
+        setShouldPlay(true);
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) setShouldLoad(true);
+          setShouldPlay(entry.isIntersecting);
+        },
+        { rootMargin: '300px 0px' },
+      );
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, [loading]);
+
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video || !shouldLoad || !autoPlay) return;
+      if (shouldPlay) void video.play().catch(() => undefined);
+      else video.pause();
+    }, [autoPlay, shouldLoad, shouldPlay, src, webm]);
+
+    return (
+      <div
+        ref={containerRef}
+        className={[className, 'next-video-bg'].filter(Boolean).join(' ')}
+        style={{ width: '100%', height: '100%', display: 'grid', ...style }}
+      >
+        <video
+          {...videoProps}
+          ref={setVideoRef}
+          className="next-video-bg-video"
+          autoPlay={autoPlay && shouldPlay}
+          muted={muted}
+          loop={loop}
+          playsInline={playsInline}
+          poster={poster}
+          preload={shouldLoad ? (preload ?? (loading === 'eager' ? 'auto' : 'metadata')) : 'none'}
+          style={{
+            gridArea: '1 / 1',
+            width: '100%',
+            height: '100%',
+            minHeight: 0,
+            objectFit: 'cover',
+          }}
+        >
+          {shouldLoad && webm ? <source src={webm} type="video/webm" /> : null}
+          {shouldLoad ? <source src={src} type="video/mp4" /> : null}
+        </video>
+      </div>
+    );
+  },
+);

package/src/components/booking/AdminChangeBookingContent.tsx

@@ -196,6 +196,7 @@ const checkoutPanelPropKeys = [
   'onUpdateAdminCustomReceiptLine',
   'onRemoveAdminCustomReceiptLine',
   'onApplyAdminCustomReceiptLines',
+  'onSetAdminReceiptLineOverride',
   'firstName',
   'lastName',
   'email',

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -337,6 +337,7 @@ export function AdminChangeBookingFlow({
     handleUpdateAdminCustomReceiptLine,
     handleRemoveAdminCustomReceiptLine,
     handleApplyAdminCustomReceiptLines: handleApplyAdminCustomReceiptLineDrafts,
+    handleSetAdminReceiptLineOverride,
   } = useAdminCustomReceiptLines(
     selectedChangeProductId,
     latestChangeQuote?.reversibleAdjustments,
@@ -1299,6 +1300,7 @@ export function AdminChangeBookingFlow({
         onUpdateAdminCustomReceiptLine: handleUpdateAdminCustomReceiptLine,
         onRemoveAdminCustomReceiptLine: handleRemoveAdminCustomReceiptLine,
         onApplyAdminCustomReceiptLines: handleApplyAdminCustomReceiptLines,
+        onSetAdminReceiptLineOverride: handleSetAdminReceiptLineOverride,
         onFirstNameChange: setFirstName, onLastNameChange: setLastName, onEmailChange: setEmail,
         onClearError: () => setError(''),
         pickupLocations: product.pickupLocations, destinations: product.destinations, highlightedPickupLocationIds,

package/src/components/booking/AdminChangeCheckoutPanel.tsx

@@ -80,6 +80,13 @@ export interface AdminChangeCheckoutPanelProps {
   onUpdateAdminCustomReceiptLine: (id: string, patch: AdminCustomReceiptLinePatch) => void;
   onRemoveAdminCustomReceiptLine: (id: string) => void;
   onApplyAdminCustomReceiptLines: () => void;
+  onSetAdminReceiptLineOverride: (input: {
+    componentId: string;
+    lineKey: string;
+    label: string;
+    baseAmount: number;
+    targetAmount: number;
+  }) => void;
   firstName: string;
   lastName: string;
   email: string;
@@ -131,7 +138,6 @@ export function AdminChangeCheckoutPanel({
   changeFlowAmountDue,
   receiptSubtotal,
   receiptTax,
-  receiptTotal,
   originalReceipt,
   priceSummaryLinesIncludeTaxRow,
   serverAmendmentLines,
@@ -172,6 +178,7 @@ export function AdminChangeCheckoutPanel({
   onUpdateAdminCustomReceiptLine,
   onRemoveAdminCustomReceiptLine,
   onApplyAdminCustomReceiptLines,
+  onSetAdminReceiptLineOverride,
   firstName,
   lastName,
   email,
@@ -232,7 +239,9 @@ export function AdminChangeCheckoutPanel({
       showProviderPricingInlineEditor={showProviderPricingInlineEditor}
       providerPricingUi={providerPricingUi}
       showAdminCustomLineEditor={showAdminCustomLineEditor}
-      adminCustomReceiptLines={adminCustomReceiptLines}
+      adminCustomReceiptLines={adminCustomReceiptLines.filter(
+        (line) => !line.overrideComponentId,
+      )}
       hasPendingAdminCustomReceiptLineChanges={hasPendingAdminCustomReceiptLineChanges}
       pendingAdminCustomReceiptLineIds={pendingAdminCustomReceiptLineIds}
       adjustmentComponentOptions={adjustmentComponentOptions}
@@ -273,6 +282,8 @@ export function AdminChangeCheckoutPanel({
         promoEditor={promoEditor}
         promoCode={promoCode}
         adjustments={pricingAdjustments}
+        adminCustomReceiptLines={adminCustomReceiptLines}
+        onSetReceiptLineOverride={onSetAdminReceiptLineOverride}
       />
     ) : null;
 

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import type {
   AdminAmendmentOperationSnapshot,
   AdminAmendmentRefundDisposition,
@@ -10,6 +10,7 @@ import type { ChangeBookingFlowProps } from './booking-flow-types';
 import type { Currency } from './CurrencySwitcher';
 import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
 import { collapseAdminPromoLines } from './admin-change-receipt-lines';
+import type { AdminCustomReceiptLine } from './useAdminCustomReceiptLines';
 import {
   noRefundRemovedValue,
   refundDecisionsComplete,
@@ -63,6 +64,14 @@ export interface AdminChangeReceiptComparisonProps {
   refundQuoteLoading?: boolean;
   sourceProductName?: string | null;
   targetProductName?: string | null;
+  adminCustomReceiptLines?: AdminCustomReceiptLine[];
+  onSetReceiptLineOverride?: (input: {
+    componentId: string;
+    lineKey: string;
+    label: string;
+    baseAmount: number;
+    targetAmount: number;
+  }) => void;
 }
 
 function normalizeLocale(locale: string): Locale {
@@ -117,7 +126,10 @@ export function AdminChangeReceiptComparison({
   removedValueByOperationId = {},
   refundDispositionsByOperationId = {},
   refundQuoteLoading = false,
+  adminCustomReceiptLines = [],
+  onSetReceiptLineOverride,
 }: AdminChangeReceiptComparisonProps) {
+  const [overrideDrafts, setOverrideDrafts] = useState<Record<string, string>>({});
   const readableQuoteError = friendlyChangeBookingError(quoteError);
   const displayLocale = normalizeLocale(locale);
   const existingLines = originalLines(originalReceipt);
@@ -202,9 +214,99 @@ export function AdminChangeReceiptComparison({
     existingLines,
     familyConversionReceiptLines,
   );
-  const summaryDisplayLines = isProductFamilyConversion
+  const rawSummaryDisplayLines = isProductFamilyConversion
     ? familyConversionReceiptLines
     : amendmentDisplayLines;
+  const overrideByComponentId = new Map(
+    adminCustomReceiptLines.flatMap((line) =>
+      line.overrideComponentId ? [[line.overrideComponentId, line] as const] : [],
+    ),
+  );
+  const allSummaryDisplayLines = rawSummaryDisplayLines
+    .filter((line) => !(line.kind === 'line' && line.label.startsWith('Override · ')))
+    .map((line) => {
+      const type = line.kind === 'ticket' ? 'TICKET' : String(line.type ?? '').toUpperCase();
+      const protectedType = ['TAX', 'PROMO_CODE', 'DISCOUNT', 'GIFT_CARD', 'PAYMENT_CREDIT', 'BOOKING_CHANGE']
+        .includes(type);
+      return {
+        ...line,
+        editable: Boolean(
+          !protectedType && line.componentId && line.lineKey && onSetReceiptLineOverride,
+        ),
+      };
+    });
+  const isRemovedSummaryLine = (line: PriceSummaryLine) => {
+    if (!line.editable || !line.componentId) return false;
+    const override = overrideByComponentId.get(line.componentId);
+    if (!override) return false;
+    const baseAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
+    const targetAmount = baseAmount + override.amountSign * Number(override.amountInput);
+    return Number.isFinite(targetAmount) && Math.abs(targetAmount) < 0.005;
+  };
+  const summaryDisplayLines = allSummaryDisplayLines.filter(
+    (line) => !isRemovedSummaryLine(line),
+  );
+  const removedSummaryDisplayLines = allSummaryDisplayLines.filter(isRemovedSummaryLine);
+  const quotedOverrideAmountInputs = Object.fromEntries(
+    summaryDisplayLines.flatMap((line) => {
+      if (!line.componentId || !line.lineKey) return [];
+      const baseAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
+      const override = overrideByComponentId.get(line.componentId);
+      const target = override
+        ? baseAmount + (override.amountSign ?? 1) * Number(override.amountInput)
+        : baseAmount;
+      return [[line.lineKey, Number.isFinite(target) ? target.toFixed(2) : baseAmount.toFixed(2)]];
+    }),
+  );
+  const handleOverrideChange = (lineKey: string, value: string) => {
+    setOverrideDrafts((current) => ({ ...current, [lineKey]: value }));
+  };
+  const handleOverrideBlur = (lineKey: string) => {
+    const line = summaryDisplayLines.find((candidate) => candidate.lineKey === lineKey);
+    const targetAmount = Number(overrideDrafts[lineKey] ?? quotedOverrideAmountInputs[lineKey]);
+    if (!line?.componentId || !Number.isFinite(targetAmount)) return;
+    const baseAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
+    onSetReceiptLineOverride?.({
+      componentId: line.componentId,
+      lineKey,
+      label: line.kind === 'ticket' ? line.category : line.label,
+      baseAmount,
+      targetAmount,
+    });
+    setOverrideDrafts((current) => {
+      const next = { ...current };
+      delete next[lineKey];
+      return next;
+    });
+  };
+  const handleOverrideRemove = (lineKey: string) => {
+    const line = summaryDisplayLines.find((candidate) => candidate.lineKey === lineKey);
+    if (!line?.componentId) return;
+    const baseAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
+    onSetReceiptLineOverride?.({
+      componentId: line.componentId,
+      lineKey,
+      label: line.kind === 'ticket' ? line.category : line.label,
+      baseAmount,
+      targetAmount: 0,
+    });
+    setOverrideDrafts((current) => {
+      const next = { ...current };
+      delete next[lineKey];
+      return next;
+    });
+  };
+  const handleOverrideRestore = (line: PriceSummaryLine) => {
+    if (!line.componentId || !line.lineKey) return;
+    const baseAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
+    onSetReceiptLineOverride?.({
+      componentId: line.componentId,
+      lineKey: line.lineKey,
+      label: line.kind === 'ticket' ? line.category : line.label,
+      baseAmount,
+      targetAmount: baseAmount,
+    });
+  };
   const summarySubtotal = isProductFamilyConversion
     ? familyConversionReceiptLines.reduce((sum, line) => {
         if (line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX') return sum;
@@ -291,29 +393,55 @@ export function AdminChangeReceiptComparison({
             <div className="rounded-md border border-dashed border-stone-300 bg-white/70 px-3 py-4 text-center">
               <p className="text-sm font-medium text-stone-700">Loading price change…</p>
             </div>
-          ) : summaryDisplayLines.length === 0 && Math.abs(amountDue) < 0.005 && removedWithoutRefund > 0 ? (
+          ) : summaryDisplayLines.length === 0 && removedSummaryDisplayLines.length === 0 && Math.abs(amountDue) < 0.005 && removedWithoutRefund > 0 ? (
             <div className="rounded-md border border-dashed border-stone-300 bg-white/70 px-3 py-4 text-center">
               <p className="text-sm font-medium text-stone-800">No refund will be created</p>
               <p className="mt-1 text-xs text-stone-600">
                 {formatCurrencyAmount(removedWithoutRefund, currency, displayLocale)} of booking value will be removed without customer credit.
               </p>
             </div>
-          ) : summaryDisplayLines.length === 0 && Math.abs(amountDue) < 0.005 ? (
+          ) : summaryDisplayLines.length === 0 && removedSummaryDisplayLines.length === 0 && Math.abs(amountDue) < 0.005 ? (
             <div className="rounded-md border border-dashed border-stone-300 bg-white/70 px-3 py-4 text-center">
               <p className="text-sm font-medium text-stone-700">No pricing changes</p>
             </div>
           ) : (
-            <PriceSummary
-              lines={summaryDisplayLines}
-              total={summaryTotal ?? amountDue}
-              totalLabel={summaryTotalLabel}
-              showPositiveTotalSign={!isProductFamilyConversion}
-              currency={currency}
-              locale={displayLocale}
-              subtotal={summarySubtotal}
-              size="sm"
-              t={t}
-            />
+            <div>
+              <PriceSummary
+                lines={summaryDisplayLines}
+                total={summaryTotal ?? amountDue}
+                totalLabel={summaryTotalLabel}
+                showPositiveTotalSign={!isProductFamilyConversion}
+                currency={currency}
+                locale={displayLocale}
+                subtotal={summarySubtotal}
+                size="sm"
+                t={t}
+                lineAmountInputs={{ ...quotedOverrideAmountInputs, ...overrideDrafts }}
+                onLineAmountInputChange={handleOverrideChange}
+                onLineAmountInputBlur={handleOverrideBlur}
+                onLineRemove={handleOverrideRemove}
+              />
+              {removedSummaryDisplayLines.length > 0 ? (
+                <div className="mt-3 border-t border-stone-200 pt-2 text-xs text-stone-500">
+                  <span className="font-medium text-stone-600">Removed lines:</span>{' '}
+                  {removedSummaryDisplayLines.map((line, index) => {
+                    const label = line.kind === 'ticket' ? line.category : line.label;
+                    return (
+                      <span key={line.lineKey ?? `${label}-${index}`}>
+                        {index > 0 ? ', ' : ''}{label}{' '}
+                        <button
+                          type="button"
+                          className="font-medium text-stone-700 underline underline-offset-2 hover:text-stone-950"
+                          onClick={() => handleOverrideRestore(line)}
+                        >
+                          Undo
+                        </button>
+                      </span>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </div>
           )}
         </section>
       </div>

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

@@ -68,7 +68,7 @@
   min-height: 100% !important;
 }
 
-/* Constrain next-video BackgroundPlayer output */
+/* Constrain the shared background video output. */
 .videoSlot :global(video),
 .videoSlot :global(.next-video-bg-video),
 .videoSlot :global(.next-video-bg-poster),

package/src/components/booking/BookingFlowCollage.tsx

@@ -2,7 +2,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback } from 'react';
-import BackgroundPlayer from 'next-video/background-player';
+import { BackgroundVideo } from '../BackgroundVideo';
 import type { VideoSources } from '../../constants/products';
 import { resolvePublicAssetUrl, useBookingHost } from '../../runtime';
 import { useTranslations } from '../../lib/booking/i18n';
@@ -100,9 +100,11 @@ export function BookingFlowCollage({
     <div className={`${styles.collage} ${!hasGridImages ? styles.videoOnly : ''}`}>
       <div className={styles.videoSlot}>
         <div className={styles.videoWrapper}>
-          <BackgroundPlayer
+          <BackgroundVideo
             ref={videoRef}
             {...videoForCollage}
+            loading="eager"
+            preload="auto"
             autoPlay
             muted
             loop

package/src/components/booking/BookingProductGrid.tsx

@@ -10,7 +10,7 @@ import {
 import { resolvePublicAssetUrl, useBookingHost } from '../../runtime';
 import { useLocale, useTranslations } from '../../lib/booking/i18n';
 import type { Product } from '../../constants/products';
-import BackgroundPlayer from 'next-video/background-player';
+import { BackgroundVideo } from '../BackgroundVideo';
 import styles from './BookingProductGrid.module.css';
 
 /** Locale strings needed by the product grid tiles (Via Via host). */
@@ -48,7 +48,7 @@ const FILTER_PRODUCT_IDS: Record<string, string[]> = {
 export const FILTER_IDS = ['all', 'sunrise', 'moraine-lake', 'lake-louise', 'emerald-lake', 'private'] as const;
 export type FilterId = (typeof FILTER_IDS)[number];
 
-/** Only `src` / `webm` — never spread catalog `VideoSources` onto BackgroundPlayer (`longSrc`/`longWebm` are not valid DOM props). */
+/** Only `src` / `webm` — never spread catalog long-source fields onto the DOM. */
 function backgroundPlayerSources(
   product: Product,
   staticAssetOrigin: string,
@@ -220,8 +220,10 @@ function BookingProductTileExpanded({
               <path d="M10 6l8 6-8 6" />
             </motion.svg>
           </button>
-          <BackgroundPlayer
+          <BackgroundVideo
             {...backgroundPlayerSources(product, env.STATIC_ASSET_ORIGIN)}
+            loading="eager"
+            preload="auto"
             autoPlay
             muted
             loop

package/src/components/booking/PriceBreakdown.tsx

@@ -28,6 +28,7 @@ export interface PriceBreakdownProps {
   onEditableChange?: (value: string) => void;
   onEditableBlur?: () => void;
   onEditableReset?: () => void;
+  onEditableRemove?: () => void;
   editableLabelValue?: string;
   onEditableLabelChange?: (value: string) => void;
 }
@@ -76,6 +77,7 @@ export function PriceBreakdown({
   onEditableChange,
   onEditableBlur,
   onEditableReset,
+  onEditableRemove,
   editableLabelValue,
   onEditableLabelChange,
 }: PriceBreakdownProps) {
@@ -129,6 +131,17 @@ export function PriceBreakdown({
               onChange={(e) => onEditableChange(e.target.value)}
               onBlur={onEditableBlur}
             />
+            {onEditableRemove ? (
+              <button
+                type="button"
+                className="rounded p-0.5 text-stone-400 hover:bg-red-50 hover:text-red-600"
+                onClick={onEditableRemove}
+                aria-label={`Remove ${category} line`}
+                title="Remove line"
+              >
+                <span className="inline-block h-4 w-4 text-center text-base leading-4">×</span>
+              </button>
+            ) : null}
           </div>
         ) : (
           <span className="text-sm font-medium text-stone-700">
@@ -191,6 +204,17 @@ export function PriceBreakdown({
               onChange={(e) => onEditableChange(e.target.value)}
               onBlur={onEditableBlur}
             />
+            {onEditableRemove ? (
+              <button
+                type="button"
+                className="rounded p-0.5 text-stone-400 hover:bg-red-50 hover:text-red-600"
+                onClick={onEditableRemove}
+                aria-label={`Remove ${category} line`}
+                title="Remove line"
+              >
+                <span className="inline-block h-4 w-4 text-center text-base leading-4">×</span>
+              </button>
+            ) : null}
           </div>
         ) : (
           <span

package/src/components/booking/PriceSummary.tsx

@@ -16,6 +16,7 @@ export type PriceSummaryLine =
       lineKey?: string;
       /** Pricing V2 amendment operation that produced this row, when applicable. */
       operationId?: string;
+      componentId?: string;
       editable?: boolean;
       category: string;
       qty: number;
@@ -34,6 +35,7 @@ export type PriceSummaryLine =
   | {
       kind: 'line';
       lineKey?: string;
+      componentId?: 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. */
@@ -96,6 +98,8 @@ export interface PriceSummaryProps {
   onLineAmountInputBlur?: (lineKey: string) => void;
   /** Optional reset handler for inline editable line amounts. */
   onLineAmountReset?: (lineKey: string) => void;
+  /** Optional remove handler for inline editable lines. */
+  onLineRemove?: (lineKey: string) => void;
 }
 
 function getLineAmountClass(type: string | undefined, amount: number): string {
@@ -172,7 +176,6 @@ export function PriceSummary({
   locale,
   subtotal,
   taxAmount = 0,
-  taxRate: _taxRate,
   discountAmount = 0,
   discountLabel,
   size = 'sm',
@@ -192,6 +195,7 @@ export function PriceSummary({
   onLineLabelInputChange,
   onLineAmountInputBlur,
   onLineAmountReset,
+  onLineRemove,
 }: PriceSummaryProps) {
   const textSize = size === 'sm' ? 'text-sm' : 'text-base';
   const totalSize = size === 'sm' ? 'text-xl' : 'text-2xl';
@@ -245,6 +249,11 @@ export function PriceSummary({
                   ? () => onLineAmountReset(row.lineKey!)
                   : undefined
               }
+              onEditableRemove={
+                row.editable && isBeforeSubtotalBoundary && row.lineKey && onLineRemove
+                  ? () => onLineRemove(row.lineKey!)
+                  : undefined
+              }
               editableLabelValue={row.lineKey ? lineLabelInputs?.[row.lineKey] : undefined}
               onEditableLabelChange={
                 row.editable && isBeforeSubtotalBoundary && row.lineKey && onLineLabelInputChange
@@ -311,6 +320,17 @@ export function PriceSummary({
                     onChange={(e) => onLineAmountInputChange(lineKey, e.target.value)}
                     onBlur={() => onLineAmountInputBlur?.(lineKey)}
                   />
+                  {isBeforeSubtotalBoundary && onLineRemove ? (
+                    <button
+                      type="button"
+                      className="rounded p-0.5 text-stone-400 hover:bg-red-50 hover:text-red-600"
+                      onClick={() => onLineRemove(lineKey)}
+                      aria-label={`Remove ${label} line`}
+                      title="Remove line"
+                    >
+                      <span className="inline-block h-4 w-4 text-center text-base leading-4">×</span>
+                    </button>
+                  ) : null}
                 </div>
               ) : (
                 <span className={`flex-shrink-0 whitespace-nowrap font-medium ${getLineAmountClass(type, amount)}`}>

package/src/components/booking/useAdminCustomReceiptLines.ts

@@ -19,6 +19,9 @@ export type AdminCustomReceiptLine = {
   sourceAdjustmentId?: string;
   replacementAdjustmentId?: string;
   isDirty?: boolean;
+  overrideComponentId?: string;
+  overrideBaseAmount?: number;
+  overrideLineKey?: string;
 };
 
 type AdminCustomReceiptLinePatch = Partial<
@@ -40,6 +43,10 @@ export function lineFromActiveAdjustment(
   replacementAdjustmentId: string,
 ): AdminCustomReceiptLine {
   const percentage = adjustment.mode !== 'FIXED_AMOUNT';
+  const overrideComponentId =
+    adjustment.reasonCode === 'LINE_ITEM_OVERRIDE' && adjustment.affectedComponentIds.length === 1
+      ? adjustment.affectedComponentIds[0]
+      : undefined;
   return {
     id: `existing:${adjustment.adjustmentId}`,
     label:
@@ -59,6 +66,7 @@ export function lineFromActiveAdjustment(
     sourceAdjustmentId: adjustment.adjustmentId,
     replacementAdjustmentId,
     isDirty: false,
+    overrideComponentId,
   };
 }
 
@@ -146,6 +154,56 @@ export function useAdminCustomReceiptLines(
     setAppliedRemovedExistingAdjustmentIds(removedExistingAdjustmentIds);
   }, [adminCustomReceiptLines, removedExistingAdjustmentIds]);
 
+  const handleSetAdminReceiptLineOverride = useCallback((input: {
+    componentId: string;
+    lineKey: string;
+    label: string;
+    baseAmount: number;
+    targetAmount: number;
+  }) => {
+    const delta = Math.round((input.targetAmount - input.baseAmount) * 100) / 100;
+    const existing = adminCustomReceiptLines.find(
+      (line) => line.overrideComponentId === input.componentId,
+    );
+    const sourceAdjustmentId = existing?.sourceAdjustmentId;
+    const restoringQuotedLine = Math.abs(delta) < 0.005;
+    const next = Math.abs(delta) < 0.005
+      ? adminCustomReceiptLines.filter((line) => line.id !== existing?.id)
+      : [
+          ...adminCustomReceiptLines.filter((line) => line.id !== existing?.id),
+          {
+            id: existing?.id ?? nextDraftId('admin-rcpt'),
+            label: `Override · ${input.label}`,
+            amountInput: Math.abs(delta).toFixed(2),
+            amountSign: (delta < 0 ? -1 : 1) as 1 | -1,
+            calculation: 'FIXED_AMOUNT' as const,
+            scope: 'SELECTED_COMPONENTS' as const,
+            selectedComponentIds: [input.componentId],
+            taxBehavior: delta < 0 ? 'PRE_TAX_DISCOUNT' as const : 'TAXABLE' as const,
+            reasonCode: 'LINE_ITEM_OVERRIDE',
+            overrideComponentId: input.componentId,
+            overrideBaseAmount: input.baseAmount,
+            overrideLineKey: input.lineKey,
+            ...(existing?.sourceAdjustmentId
+              ? {
+                  sourceAdjustmentId: existing.sourceAdjustmentId,
+                  replacementAdjustmentId: existing.replacementAdjustmentId,
+                  isDirty: true,
+                }
+              : {}),
+          },
+        ];
+    if (sourceAdjustmentId) {
+      const updateRemovedIds = (current: string[]) => restoringQuotedLine
+        ? Array.from(new Set([...current, sourceAdjustmentId]))
+        : current.filter((id) => id !== sourceAdjustmentId);
+      setRemovedExistingAdjustmentIds(updateRemovedIds);
+      setAppliedRemovedExistingAdjustmentIds(updateRemovedIds);
+    }
+    setAdminCustomReceiptLines(next);
+    setAppliedAdminCustomReceiptLines(next);
+  }, [adminCustomReceiptLines, nextDraftId]);
+
   useEffect(() => {
     if (previousResetKeyRef.current === resetKey) return;
     previousResetKeyRef.current = resetKey;
@@ -225,5 +283,6 @@ export function useAdminCustomReceiptLines(
     handleUpdateAdminCustomReceiptLine,
     handleRemoveAdminCustomReceiptLine,
     handleApplyAdminCustomReceiptLines,
+    handleSetAdminReceiptLineOverride,
   };
 }

package/src/index.ts

@@ -62,6 +62,8 @@ export type {
 export { formatBookingRefForDisplay } from './lib/format-booking-ref';
 export { default as BookingProductGrid } from './components/booking/BookingProductGrid';
 export { DefaultTermsContent as TermsContent } from './components/booking/DefaultTermsContent';
+export { BackgroundVideo } from './components/BackgroundVideo';
+export type { BackgroundVideoLoading, BackgroundVideoProps } from './components/BackgroundVideo';
 
 export type {
   BookingAppMode,

package/src/lib/booking/change-booking-server-preview.ts

@@ -212,7 +212,9 @@ export function mapQuoteLineItemsToPriceSummaryLines(
           : type;
       out.push({
         kind: 'ticket',
+        lineKey: isPricingV2Line(item) ? item.lineId ?? undefined : undefined,
         operationId: isPricingV2Line(item) ? item.metadata?.operationId : undefined,
+        componentId: isPricingV2Line(item) ? item.metadata?.componentId : undefined,
         category,
         qty: qty > 0 ? qty : 1,
         itemTotal: amount,
@@ -234,7 +236,9 @@ export function mapQuoteLineItemsToPriceSummaryLines(
     ) {
       out.push({
         kind: 'ticket',
+        lineKey: isPricingV2Line(item) ? item.lineId ?? undefined : undefined,
         operationId: isPricingV2Line(item) ? item.metadata?.operationId : undefined,
+        componentId: isPricingV2Line(item) ? item.metadata?.componentId : undefined,
         category: lettersOnly,
         qty,
         itemTotal: amount,
@@ -247,6 +251,8 @@ export function mapQuoteLineItemsToPriceSummaryLines(
     /** Align with checkout drift keys (`ChangeBookingFlow` uses `type: 'return'`). */
     out.push({
       kind: 'line',
+      lineKey: isPricingV2Line(item) ? item.lineId ?? undefined : undefined,
+      componentId: isPricingV2Line(item) ? item.metadata?.componentId : undefined,
       label: label || type || 'Line',
       amount,
       type,

package/src/strings/en.json

@@ -240,7 +240,7 @@
   "home": {
     "hero": {
       "tagline": "Tours to Moraine Lake, Lake Louise, Emerald Lake & more for families, friends, and unforgettable days",
-      "googleReviewsCount": "1500+ reviews",
+      "googleReviewsCount": "2500+ reviews",
       "centerCallout": "now open ✨"
     },
     "seasonClosure": {

package/src/strings/es.json

@@ -39,7 +39,7 @@
   "home": {
     "hero": {
       "tagline": "Descubre Moraine Lake, Lake Louise, y mucho más. Excursiones inolvidables para todos los públicos.",
-      "googleReviewsCount": "Mas de 1500 opioniones",
+      "googleReviewsCount": "Mas de 2500 opioniones",
       "centerCallout": "ahora abierto ✨"
     },
     "seasonClosure": {

package/src/strings/fr.json

@@ -39,7 +39,7 @@
   "home": {
     "hero": {
       "tagline": "Partez à la découverte du lac Moraine, du lac Louise, du lac Émeraude et plus encore ! Excursions en famille ou entre amis, pour vivre une expérience inoubliable",
-      "googleReviewsCount": "1500+ avis",
+      "googleReviewsCount": "2500+ avis",
       "centerCallout": "maintenant ouvert ✨"
     },
     "seasonClosure": {

package/test/change-booking-helpers.test.ts

@@ -234,6 +234,31 @@ test('existing admin adjustment hydrates for immutable reverse-and-replace editi
   assert.deepEqual(reverseAdjustmentIdsForAdminCustomLines([], ['admin-rcpt-1']), ['admin-rcpt-1']);
 });
 
+test('saved line-item override hydrates its targeted receipt component', () => {
+  const line = lineFromActiveAdjustment({
+    adjustmentId: 'override-adult-1',
+    operationId: 'op-override-adult-1',
+    mode: 'FIXED_AMOUNT',
+    scope: 'SELECTED_COMPONENTS',
+    basisCents: 19_799,
+    amountCents: 19_799,
+    taxDeltaCents: 990,
+    affectedComponentIds: ['adult-component'],
+    taxBehavior: 'TAXABLE',
+    reasonCode: 'LINE_ITEM_OVERRIDE',
+    reason: 'Override · Refund · ADULT',
+    createdAt: '2026-08-09T00:00:00Z',
+  }, 'replacement-override-adult-1');
+
+  assert.equal(line.overrideComponentId, 'adult-component');
+  assert.deepEqual(line.selectedComponentIds, ['adult-component']);
+  assert.equal(line.sourceAdjustmentId, 'override-adult-1');
+  assert.deepEqual(
+    reverseAdjustmentIdsForAdminCustomLines([{ ...line, isDirty: true }]),
+    ['override-adult-1'],
+  );
+});
+
 test('private resource quantity is not carried into a regular-tour conversion', () => {
   const quantities = deriveCompatibleInitialBookingQuantities(
     [{ category: 'RESOURCE', count: 1 }],
@@ -314,6 +339,28 @@ test('legacy booking-change comparison rows are omitted from the purchase breakd
   );
 });
 
+test('Pricing V2 amendment rows retain line and component identity for admin overrides', () => {
+  const [line] = mapQuoteLineItemsToPriceSummaryLines([
+    {
+      lineId: 'component_adult:amendment:gross',
+      type: 'TICKET',
+      label: 'Refund · ADULT',
+      amount: -197.99,
+      quantity: 9,
+      billable: true,
+      metadata: {
+        category: 'ADULT',
+        operationId: 'op_move_adult',
+        componentId: 'component_adult',
+      },
+    },
+  ]);
+
+  assert.equal(line?.lineKey, 'component_adult:amendment:gross');
+  assert.equal(line?.componentId, 'component_adult');
+  assert.equal(line?.kind === 'ticket' ? line.operationId : null, 'op_move_adult');
+});
+
 test('server preview exposes the resulting receipt separately from ledger allocation lines', () => {
   const preview = buildChangeBookingServerPreview(
     quote({