@ticketboothapp/booking 1.2.123 → 1.2.125

package/src/components/booking/AdminChangeProductSwitcher.tsx

@@ -0,0 +1,50 @@
+import type { Product } from '../../lib/booking-api';
+
+export interface AdminChangeProductSwitcherProps {
+  visible: boolean;
+  products: Product[];
+  selectedProductId: string;
+  disabled: boolean;
+  error?: string | null;
+  onProductChange: (productId: string) => void;
+}
+
+export function AdminChangeProductSwitcher({
+  visible,
+  products,
+  selectedProductId,
+  disabled,
+  error,
+  onProductChange,
+}: AdminChangeProductSwitcherProps) {
+  if (!visible) return null;
+
+  return (
+    <div className="mb-6 rounded-lg border border-stone-200 bg-stone-50 p-4">
+      <label
+        className="mb-2 block text-sm font-medium text-stone-800"
+        htmlFor="admin-change-product-select"
+      >
+        Product
+      </label>
+      <select
+        id="admin-change-product-select"
+        className="w-full rounded-md border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
+        value={selectedProductId}
+        disabled={disabled}
+        onChange={(e) => onProductChange(e.target.value)}
+      >
+        {products.map((product) => (
+          <option key={product.productId} value={product.productId}>
+            {product.name}
+          </option>
+        ))}
+      </select>
+      {error ? (
+        <div className="mt-2 text-xs text-amber-800">
+          Product list could not be refreshed. Showing the current product only.
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -0,0 +1,167 @@
+import { useMemo, type ReactNode } from 'react';
+import type { AdminFeAuthoritativeReceipt } from '../../lib/booking-api';
+import { roundMoney } from '../../lib/booking/change-flow-pricing';
+import { mapQuoteLineItemsToPriceSummaryLines } from '../../lib/booking/change-booking-server-preview';
+import type { PriceBreakdown as PriceBreakdownData } from '../../lib/booking/pricing';
+import { formatCurrencyAmount } from '../../lib/currency';
+import type { Locale } from '../../lib/booking/i18n/config';
+import type { ChangeBookingFlowProps } from './booking-flow-types';
+import type { Currency } from './CurrencySwitcher';
+import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+type OriginalReceipt = NonNullable<ChangeBookingFlowProps['originalReceipt']>;
+
+export interface AdminChangeReceiptComparisonProps {
+  originalReceipt: OriginalReceipt;
+  newReceipt: Pick<AdminFeAuthoritativeReceipt, 'subtotal' | 'tax' | 'total'>;
+  newPriceSummaryLines: PriceSummaryLine[];
+  newPriceSummaryLinesIncludeTaxRow: boolean;
+  amountDue: number;
+  amountDueLabel: string;
+  currency: Currency;
+  locale: string;
+  t: TranslationFn;
+  taxRate?: number;
+  newReceiptAdjustments?: ReactNode;
+  lineAmountInputs?: Record<string, string>;
+  onLineAmountInputChange?: (lineKey: string, value: string) => void;
+  onLineAmountInputBlur?: (lineKey: string) => void;
+  onLineAmountReset?: (lineKey: string) => void;
+  lineLabelInputs?: Record<string, string>;
+}
+
+function normalizeLocale(locale: string): Locale {
+  return locale === 'fr' ? 'fr' : 'en';
+}
+
+function hasTaxLine(lines: PriceSummaryLine[]): boolean {
+  return lines.some(
+    (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX',
+  );
+}
+
+function storedReceiptTicketBreakdown(line: Extract<PriceSummaryLine, { kind: 'ticket' }>): PriceBreakdownData {
+  const qty = Math.max(1, line.qty);
+  const unitAmount = roundMoney(line.itemTotal / qty);
+  return {
+    lineItems: [
+      {
+        type: 'base',
+        name: 'Stored receipt unit',
+        amountInDisplayCurrency: unitAmount,
+      },
+    ],
+    subtotalAfterAdjustments: unitAmount,
+    feeLines: [],
+    taxRate: 0,
+    taxAmount: 0,
+    isTaxIncluded: false,
+    finalPrice: unitAmount,
+  };
+}
+
+function withStoredReceiptBreakdowns(lines: PriceSummaryLine[]): PriceSummaryLine[] {
+  return lines.map((line) => {
+    if (line.kind !== 'ticket' || line.breakdown) return line;
+    return {
+      ...line,
+      breakdown: storedReceiptTicketBreakdown(line),
+    };
+  });
+}
+
+function mapOriginalReceiptLines(originalReceipt: OriginalReceipt): PriceSummaryLine[] {
+  if (!originalReceipt.lineItems?.length) return [];
+  return withStoredReceiptBreakdowns(mapQuoteLineItemsToPriceSummaryLines(originalReceipt.lineItems));
+}
+
+export function AdminChangeReceiptComparison({
+  originalReceipt,
+  newReceipt,
+  newPriceSummaryLines,
+  newPriceSummaryLinesIncludeTaxRow,
+  amountDue,
+  amountDueLabel,
+  currency,
+  locale,
+  t,
+  taxRate,
+  newReceiptAdjustments,
+  lineAmountInputs,
+  onLineAmountInputChange,
+  onLineAmountInputBlur,
+  onLineAmountReset,
+  lineLabelInputs,
+}: AdminChangeReceiptComparisonProps) {
+  const displayLocale = normalizeLocale(locale);
+  const originalReceiptLines = useMemo(
+    () => mapOriginalReceiptLines(originalReceipt),
+    [originalReceipt],
+  );
+  const originalLinesIncludeTaxRow = hasTaxLine(originalReceiptLines);
+  const originalCurrency = originalReceipt.currency ?? currency;
+  const amountDueClass =
+    amountDue < -0.005
+      ? 'text-emerald-700'
+      : amountDue > 0.005
+        ? 'text-stone-900'
+        : 'text-stone-700';
+
+  return (
+    <div className="space-y-3 min-w-0 overflow-visible">
+      <div className="grid gap-4 md:grid-cols-2">
+        <section className="min-w-0 overflow-visible rounded-lg border border-stone-200 bg-stone-50/70 p-3">
+          <div className="mb-3 flex items-center justify-between gap-3">
+            <h3 className="text-sm font-semibold text-stone-900">Current receipt</h3>
+            <span className="shrink-0 text-xs font-medium text-stone-500">
+              {formatCurrencyAmount(originalReceipt.total, originalCurrency, displayLocale)}
+            </span>
+          </div>
+          <PriceSummary
+            lines={originalReceiptLines}
+            total={originalReceipt.total}
+            currency={originalCurrency}
+            locale={displayLocale}
+            subtotal={originalReceipt.subtotal}
+            taxAmount={!originalLinesIncludeTaxRow ? originalReceipt.tax : 0}
+            taxRate={taxRate}
+            size="sm"
+            t={t}
+          />
+        </section>
+        <section className="min-w-0 overflow-visible rounded-lg border border-stone-300 bg-white p-3 shadow-sm">
+          <div className="mb-3 flex items-center justify-between gap-3">
+            <h3 className="text-sm font-semibold text-stone-900">New receipt</h3>
+            <span className="shrink-0 text-xs font-medium text-stone-500">
+              {formatCurrencyAmount(newReceipt.total, currency, displayLocale)}
+            </span>
+          </div>
+          <PriceSummary
+            lines={newPriceSummaryLines}
+            total={newReceipt.total}
+            currency={currency}
+            locale={displayLocale}
+            subtotal={newReceipt.subtotal}
+            taxAmount={!newPriceSummaryLinesIncludeTaxRow ? newReceipt.tax : 0}
+            taxRate={taxRate}
+            size="sm"
+            t={t}
+            extraBeforeSubtotal={newReceiptAdjustments}
+            lineAmountInputs={lineAmountInputs}
+            onLineAmountInputChange={onLineAmountInputChange}
+            onLineAmountInputBlur={onLineAmountInputBlur}
+            onLineAmountReset={onLineAmountReset}
+            lineLabelInputs={lineLabelInputs}
+          />
+        </section>
+      </div>
+      <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-stone-200 bg-stone-50 px-3 py-2">
+        <span className="text-sm font-semibold text-stone-900">{amountDueLabel}</span>
+        <span className={`text-lg font-semibold tabular-nums ${amountDueClass}`}>
+          {formatCurrencyAmount(amountDue, currency, displayLocale)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/booking/ChangeBookingCalendarPanel.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import type { ReactNode, RefObject } from 'react';
+import type { Availability } from '../../lib/booking-api';
+import { Calendar } from './Calendar';
+import type { Currency } from './CurrencySwitcher';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+export interface ChangeBookingCalendarPanelProps {
+  visibleAvailabilityCount: number;
+  loadingAvailabilities: boolean;
+  isFetchingMoreAvailabilities: boolean;
+  availabilitiesByDate: Record<string, Availability[]>;
+  selectedDate: string;
+  onSelectedDateChange: (date: string) => void;
+  onDateSelect: (date: string) => void;
+  suppressCalendarDateScroll?: boolean;
+  contentRef?: RefObject<HTMLDivElement | null>;
+  useWindowScroll: boolean;
+  timezone: string;
+  earliestDate: Date | null;
+  onVisibleRangeChange: (startDate: Date, endDate: Date) => void;
+  currency: Currency;
+  showCapacity: boolean;
+  extraDiscountPercent?: number;
+  capDiscountBadgesToBookingDate?: string | null;
+  selectableSoldOutDate?: string | null;
+  partySizeRequiredForCalendarSelection?: number;
+  getEffectiveVacancies?: (availability: Availability) => number;
+  t: TranslationFn;
+  children: ReactNode;
+}
+
+export function ChangeBookingCalendarPanel({
+  visibleAvailabilityCount,
+  loadingAvailabilities,
+  isFetchingMoreAvailabilities,
+  availabilitiesByDate,
+  selectedDate,
+  onSelectedDateChange,
+  onDateSelect,
+  suppressCalendarDateScroll,
+  contentRef,
+  useWindowScroll,
+  timezone,
+  earliestDate,
+  onVisibleRangeChange,
+  currency,
+  showCapacity,
+  extraDiscountPercent,
+  capDiscountBadgesToBookingDate,
+  selectableSoldOutDate,
+  partySizeRequiredForCalendarSelection,
+  getEffectiveVacancies,
+  t,
+  children,
+}: ChangeBookingCalendarPanelProps) {
+  const handleDateSelect = (date: string) => {
+    onSelectedDateChange(date);
+    onDateSelect(date);
+    if (suppressCalendarDateScroll) return;
+
+    setTimeout(() => {
+      const container = contentRef?.current;
+      if (!useWindowScroll && container && container.scrollHeight > container.clientHeight + 16) {
+        container.scrollBy({ top: 400, behavior: 'smooth' });
+      } else if (typeof window !== 'undefined') {
+        window.scrollBy({ top: 400, behavior: 'smooth' });
+      }
+    }, 100);
+  };
+
+  if (loadingAvailabilities && visibleAvailabilityCount === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 gap-4">
+        <div className="booking-loading-spinner" aria-hidden />
+        <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+      </div>
+    );
+  }
+
+  if (visibleAvailabilityCount === 0) {
+    return (
+      <div className="text-center py-8 text-stone-500">
+        {t('booking.noAvailability')}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div>
+        <div className="relative">
+          {loadingAvailabilities ? (
+            <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
+              <div className="flex flex-col items-center gap-3">
+                <div className="booking-loading-spinner" aria-hidden />
+                <div className="text-stone-600">{t('booking.loadingTimes')}</div>
+              </div>
+            </div>
+          ) : null}
+          <Calendar
+            availabilitiesByDate={availabilitiesByDate}
+            selectedDate={selectedDate}
+            syncVisibleWeekToSelectedDate
+            selectableSoldOutDate={selectableSoldOutDate}
+            partySizeRequiredForCalendarSelection={partySizeRequiredForCalendarSelection}
+            getEffectiveVacancies={getEffectiveVacancies}
+            isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
+            onDateSelect={handleDateSelect}
+            timezone={timezone}
+            earliestDate={earliestDate}
+            onVisibleRangeChange={onVisibleRangeChange}
+            currency={currency}
+            showCapacity={showCapacity}
+            extraDiscountPercent={extraDiscountPercent}
+            capDiscountBadgesToBookingDate={capDiscountBadgesToBookingDate}
+          />
+        </div>
+      </div>
+
+      {children}
+    </>
+  );
+}

package/src/components/booking/ChangeBookingCheckoutPanel.tsx

@@ -0,0 +1,204 @@
+import type { ReactNode } from 'react';
+import type { Destination, PickupLocation } from '../../lib/booking-api';
+import { CheckoutForm } from './CheckoutForm';
+import type { Currency } from './CurrencySwitcher';
+import type { PriceSummaryLine } from './PriceSummary';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+export interface ChangeBookingCheckoutPanelProps {
+  priceSummaryLines: PriceSummaryLine[];
+  replacePriceSummary?: ReactNode;
+  totalPrice: number;
+  subtotal: number;
+  taxAmount: number;
+  taxRate?: number;
+  currency: Currency;
+  locale: string;
+  t: TranslationFn;
+  firstName: string;
+  lastName: string;
+  email: string;
+  onFirstNameChange: (value: string) => void;
+  onLastNameChange: (value: string) => void;
+  onEmailChange: (value: string) => void;
+  onClearError: () => void;
+  selectedDate: string;
+  pickupLocations?: PickupLocation[];
+  destinations?: Destination[];
+  pickupLocationId: string | null;
+  pickupLocationSkipped: boolean;
+  selectedPickupLocation?: PickupLocation | null;
+  highlightedPickupLocationIds?: string[];
+  hidePickupSkipOption: boolean;
+  onPickupLocationIdChange: (locationId: string | null) => void;
+  onPickupLocationSkippedChange: (skipped: boolean) => void;
+  termsAccepted: boolean;
+  onTermsAcceptedChange: (checked: boolean) => void;
+  onTermsAcceptedAtChange: (value: string | null) => void;
+  error: string;
+  loading: boolean;
+  totalQuantity: number;
+  onCheckout: () => void;
+  submitLabel?: string;
+  showCheckoutModal: boolean;
+  hasEffectiveChangeSelection: boolean;
+  isChangeQuoteBlocked: boolean;
+  submitDisabled: boolean;
+  attributionSummary?: string;
+  attributionConfirmLabel?: string;
+  attributionConfirmed: boolean;
+  onAttributionConfirmedChange: (checked: boolean) => void;
+  priceSummaryLinesIncludeTaxRow: boolean;
+  isTaxIncludedInPrice: boolean;
+  displayChangeFlowTax: number;
+}
+
+export function ChangeBookingCheckoutPanel({
+  priceSummaryLines,
+  replacePriceSummary,
+  totalPrice,
+  subtotal,
+  taxAmount,
+  taxRate,
+  currency,
+  locale,
+  t,
+  firstName,
+  lastName,
+  email,
+  onFirstNameChange,
+  onLastNameChange,
+  onEmailChange,
+  onClearError,
+  selectedDate,
+  pickupLocations,
+  destinations,
+  pickupLocationId,
+  pickupLocationSkipped,
+  selectedPickupLocation,
+  highlightedPickupLocationIds,
+  hidePickupSkipOption,
+  onPickupLocationIdChange,
+  onPickupLocationSkippedChange,
+  termsAccepted,
+  onTermsAcceptedChange,
+  onTermsAcceptedAtChange,
+  error,
+  loading,
+  totalQuantity,
+  onCheckout,
+  submitLabel,
+  showCheckoutModal,
+  hasEffectiveChangeSelection,
+  isChangeQuoteBlocked,
+  submitDisabled,
+  attributionSummary,
+  attributionConfirmLabel,
+  attributionConfirmed,
+  onAttributionConfirmedChange,
+  priceSummaryLinesIncludeTaxRow,
+  isTaxIncludedInPrice,
+  displayChangeFlowTax,
+}: ChangeBookingCheckoutPanelProps) {
+  const totalSummaryLabel =
+    t('booking.totalOwedForBookingChange') &&
+    t('booking.totalOwedForBookingChange') !== 'booking.totalOwedForBookingChange'
+      ? t('booking.totalOwedForBookingChange')
+      : 'Total owed for booking difference';
+
+  return (
+    <CheckoutForm
+      priceSummaryLines={priceSummaryLines}
+      replacePriceSummary={replacePriceSummary}
+      totalPrice={totalPrice}
+      totalSummaryLabel={totalSummaryLabel}
+      subtotal={subtotal}
+      taxAmount={
+        !isTaxIncludedInPrice &&
+        displayChangeFlowTax > 0 &&
+        !priceSummaryLinesIncludeTaxRow
+          ? taxAmount
+          : 0
+      }
+      taxRate={taxRate}
+      currency={currency}
+      locale={locale}
+      t={t}
+      extraBetweenTaxAndTotal={null}
+      extraBeforeSubtotal={undefined}
+      firstName={firstName}
+      lastName={lastName}
+      email={email}
+      onFirstNameChange={(value) => {
+        onFirstNameChange(value);
+        onClearError();
+      }}
+      onLastNameChange={(value) => {
+        onLastNameChange(value);
+        onClearError();
+      }}
+      onEmailChange={(value) => {
+        onEmailChange(value);
+        onClearError();
+      }}
+      readOnlyContactFields
+      pickupLocations={selectedDate && pickupLocations && pickupLocations.length > 0 ? pickupLocations : undefined}
+      destinations={destinations}
+      pickupLocationId={pickupLocationId}
+      pickupLocationSkipped={pickupLocationSkipped}
+      selectedPickupLocation={selectedPickupLocation}
+      highlightedPickupLocationIds={highlightedPickupLocationIds}
+      hidePickupSkipOption={hidePickupSkipOption}
+      onLocationSelect={(locationId) => {
+        onPickupLocationIdChange(locationId);
+        onClearError();
+        if (locationId === null && pickupLocationSkipped) {
+          onPickupLocationSkippedChange(false);
+        } else if (locationId !== null) {
+          onPickupLocationSkippedChange(false);
+        }
+      }}
+      onSkip={() => {
+        if (hidePickupSkipOption) return;
+        onPickupLocationSkippedChange(true);
+        onPickupLocationIdChange(null);
+        onClearError();
+      }}
+      onChangePickup={() => {
+        onPickupLocationIdChange(null);
+        onPickupLocationSkippedChange(false);
+      }}
+      termsAccepted={termsAccepted}
+      onTermsChange={(checked) => {
+        onTermsAcceptedChange(checked);
+        onTermsAcceptedAtChange(checked ? new Date().toISOString() : null);
+      }}
+      isAdmin={false}
+      showCommunicationAdminSection={false}
+      skipConfirmationCommunications={false}
+      disableAutoCommunications={false}
+      onSkipConfirmationChange={() => {}}
+      onDisableCommunicationsChange={() => {}}
+      error={error}
+      loading={loading}
+      totalQuantity={totalQuantity}
+      onCheckout={onCheckout}
+      submitLabel={submitLabel}
+      hideSubmitButton={
+        showCheckoutModal ||
+        !hasEffectiveChangeSelection ||
+        isChangeQuoteBlocked
+      }
+      submitDisabled={submitDisabled}
+      attributionSummary={attributionSummary}
+      attributionConfirmLabel={attributionConfirmLabel}
+      attributionConfirmed={attributionConfirmed}
+      onAttributionConfirmedChange={onAttributionConfirmedChange}
+      lineAmountInputs={undefined}
+      onLineAmountInputChange={undefined}
+      onLineAmountInputBlur={undefined}
+      onLineAmountReset={undefined}
+    />
+  );
+}