@ticketboothapp/booking 1.2.72 → 1.2.75

package/src/components/booking/PickupLocationDialog.tsx

@@ -0,0 +1,397 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { formatBookingRefForDisplay } from '../../lib/format-booking-ref';
+import {
+  fetchProducts,
+  updatePickupLocation,
+  previewPickupLocationChange,
+  type Product,
+} from '../../lib/booking-api';
+import { PickupLocationSelector } from './PickupLocationSelector';
+import { useTranslations } from '../../lib/booking/i18n';
+import styles from './PickupLocationDialog.module.css';
+
+function findProductWithPickupLocations(
+  products: Product[],
+  bookingProductId: string
+): Product | null {
+  for (const p of products) {
+    if (p.productId === bookingProductId) return p;
+    if (p.pickupLocations?.some((loc) => loc.id === bookingProductId)) return p;
+    const opt = (p as Product & { options?: { optionId: string }[] })?.options?.find(
+      (o) => o.optionId === bookingProductId
+    );
+    if (opt) return p;
+  }
+  return null;
+}
+
+/** Itinerary rows shown on manage-booking (may include optional label/time from API). */
+export interface PickupDialogItineraryStep {
+  label?: string | null;
+  time?: string | null;
+  stepType?: string | null;
+  place?: string | null;
+}
+
+/** Minimal booking shape required by the manage-booking pickup dialog. */
+export interface PickupLocationDialogBooking {
+  bookingReference: string;
+  companyId?: string | null;
+  productId: string;
+  pickupLocationId?: string | null;
+  travelerHotel?: string | null;
+  customer?: { lastName?: string | null } | null;
+  productType?: string | null;
+  itineraryDisplay?: PickupDialogItineraryStep[] | null;
+}
+
+export interface PickupLocationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  booking: PickupLocationDialogBooking;
+  /** Prefer URL query `ref` / `bookingReference` when present (e.g. manage-booking page). */
+  bookingReferenceFromUrl?: string | null;
+  onSuccess: (updatedBooking: unknown) => void;
+}
+
+function getPickupTimeFromItinerary(itinerary: PickupDialogItineraryStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const pickupStep = itinerary.find((s) => s.stepType === 'pickup');
+  return pickupStep?.time?.trim() || 'TBD';
+}
+
+function getDropoffTimeFromItinerary(itinerary: PickupDialogItineraryStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const dropOffStep = [...itinerary].reverse().find((s) => s.stepType === 'drop_off');
+  return dropOffStep?.time?.trim() || 'TBD';
+}
+
+function getItineraryStepLabel(step: PickupDialogItineraryStep, includeTime = false): string {
+  if (step.label?.trim()) {
+    const base = step.label.trim();
+    return includeTime && step.time?.trim() ? `${base} ${step.time.trim()}` : base;
+  }
+  const place = step.place?.trim();
+  const placeDisplay =
+    place === 'your_pickup_location'
+      ? 'your pickup location'
+      : place === 'the_destination'
+        ? 'the destination'
+        : place ?? '';
+  const timePart = includeTime && step.time?.trim() ? ` ${step.time.trim()}` : '';
+  switch (step.stepType) {
+    case 'pickup':
+      return placeDisplay ? `Pickup at ${placeDisplay}${timePart}` : `Pickup${timePart}`;
+    case 'drop_off':
+      return placeDisplay ? `Drop off at ${placeDisplay}${timePart}` : `Drop-off${timePart}`;
+    case 'arrive':
+      return placeDisplay ? `Arrive at ${placeDisplay}${timePart}` : `Arrive${timePart}`;
+    case 'depart':
+      return placeDisplay ? `Depart ${placeDisplay}${timePart}` : `Depart${timePart}`;
+    case 'trip_end':
+      return 'Trip ends';
+    case 'draft':
+      return placeDisplay || 'Stop';
+    default:
+      return placeDisplay || (step.stepType ?? 'Step');
+  }
+}
+
+export function PickupLocationDialog({
+  isOpen,
+  onClose,
+  booking,
+  bookingReferenceFromUrl = '',
+  onSuccess,
+}: PickupLocationDialogProps) {
+  const { t } = useTranslations();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
+    booking.pickupLocationId ?? null
+  );
+  const [selectedLocationName, setSelectedLocationName] = useState<string | null>(null);
+  const [selectedCustomAddress, setSelectedCustomAddress] = useState<string | null>(
+    booking.travelerHotel ?? null
+  );
+  const [saving, setSaving] = useState(false);
+  const [previewItinerary, setPreviewItinerary] = useState<PickupDialogItineraryStep[] | null>(null);
+
+  const refFromUrl = (bookingReferenceFromUrl ?? '').trim();
+  const refFromBooking =
+    formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference || '';
+  const effectiveBookingRef = (refFromUrl || refFromBooking).trim();
+
+  const companyId = booking.companyId ?? '';
+  const lastName = booking.customer?.lastName ?? '';
+  const isPrivateShuttle = booking.productType === 'PRIVATE_SHUTTLE';
+
+  const product = useMemo(
+    () => findProductWithPickupLocations(products, booking.productId),
+    [products, booking.productId]
+  );
+  const pickupLocations = product?.pickupLocations ?? [];
+  const destinations = product?.destinations ?? [];
+
+  const loadProducts = useCallback(async () => {
+    if (!companyId?.trim()) {
+      setError('Missing company information');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchProducts(companyId);
+      setProducts(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load pickup locations');
+    } finally {
+      setLoading(false);
+    }
+  }, [companyId]);
+
+  useEffect(() => {
+    if (isOpen && companyId) loadProducts();
+  }, [isOpen, companyId, loadProducts]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedLocationId(booking.pickupLocationId ?? null);
+      setSelectedLocationName(null);
+      setSelectedCustomAddress(booking.travelerHotel ?? null);
+      setPreviewItinerary(null);
+    }
+  }, [isOpen, booking.pickupLocationId, booking.travelerHotel]);
+
+  const selectedPickupName = useMemo(() => {
+    if (selectedCustomAddress) return selectedCustomAddress;
+    if (selectedLocationId) {
+      return (
+        selectedLocationName ??
+        pickupLocations.find((l) => l.id === selectedLocationId)?.name ??
+        selectedLocationId
+      );
+    }
+    return null;
+  }, [selectedLocationId, selectedLocationName, selectedCustomAddress, pickupLocations]);
+
+  const hasValidSelection = Boolean(selectedLocationId || selectedCustomAddress);
+  const hasChanged =
+    selectedLocationId !== (booking.pickupLocationId ?? null) ||
+    selectedCustomAddress !== (booking.travelerHotel ?? null);
+
+  useEffect(() => {
+    if (!isOpen || !hasValidSelection || !hasChanged || !lastName?.trim()) {
+      setPreviewItinerary(null);
+      return;
+    }
+    let cancelled = false;
+    const payload = selectedCustomAddress
+      ? { travelerHotel: selectedCustomAddress }
+      : selectedLocationId
+        ? { pickupLocationId: selectedLocationId }
+        : null;
+    if (!payload) return;
+    previewPickupLocationChange(effectiveBookingRef, lastName, payload)
+      .then((data) => {
+        if (!cancelled && data?.itineraryDisplay) {
+          setPreviewItinerary(data.itineraryDisplay as PickupDialogItineraryStep[]);
+        } else {
+          setPreviewItinerary(null);
+        }
+      })
+      .catch(() => setPreviewItinerary(null));
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isOpen,
+    hasValidSelection,
+    hasChanged,
+    selectedLocationId,
+    selectedCustomAddress,
+    effectiveBookingRef,
+    lastName,
+  ]);
+
+  const currentPickupName =
+    booking.travelerHotel ||
+    (booking.pickupLocationId
+      ? pickupLocations.find((l) => l.id === booking.pickupLocationId)?.name ?? booking.pickupLocationId
+      : null);
+
+  const itineraryDisplay = booking.itineraryDisplay ?? [];
+  const pickupOrDropOffSteps = itineraryDisplay.filter(
+    (s) => s.stepType === 'pickup' || s.stepType === 'drop_off'
+  );
+
+  const handleSave = async () => {
+    if (!lastName?.trim()) {
+      setError('Last name is required to update pickup');
+      return;
+    }
+    if (!hasValidSelection) {
+      setError('Please select a pickup location');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      let payload: { pickupLocationId?: string; travelerHotel?: string };
+      if (selectedCustomAddress) {
+        payload = { travelerHotel: selectedCustomAddress };
+      } else if (selectedLocationId) {
+        payload = { pickupLocationId: selectedLocationId, travelerHotel: selectedLocationName ?? undefined };
+      } else {
+        setError('Please select a pickup location');
+        setSaving(false);
+        return;
+      }
+
+      const updated = await updatePickupLocation(effectiveBookingRef, lastName, payload);
+      onSuccess(updated);
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to update pickup location');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="pickup-dialog-title"
+    >
+      <div className={`${styles.modal} ${styles.pickupDialogRoot}`} onClick={(e) => e.stopPropagation()}>
+        <div
+          className={styles.header}
+          style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center' }}
+        >
+          <span className={styles.headerSpacer} aria-hidden />
+          <h2
+            id="pickup-dialog-title"
+            className={styles.title}
+            style={{ textAlign: 'center', justifySelf: 'center' }}
+          >
+            {t('pickup.title') || 'Select pickup location'}
+          </h2>
+          <button type="button" onClick={onClose} className={styles.closeBtn} aria-label="Close">
+            <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className={styles.content}>
+          {loading ? (
+            <div className={styles.loading}>Loading pickup locations…</div>
+          ) : error && !pickupLocations.length ? (
+            <div className={styles.error}>{error}</div>
+          ) : pickupLocations.length === 0 ? (
+            <div className={styles.empty}>No pickup locations available for this tour.</div>
+          ) : (
+            <>
+              <div className={styles.currentPickupSection}>
+                <p className={styles.currentPickupLabel}>Current pickup</p>
+                <p className={styles.currentPickupName}>
+                  {currentPickupName ?? (t('booking.pickupLocationUnknown') || "I don't know")}
+                </p>
+                {(booking.pickupLocationId || booking.travelerHotel) && (
+                  <p className={styles.currentPickupTimes}>
+                    Pickup: {getPickupTimeFromItinerary(itineraryDisplay)} · Drop-off:{' '}
+                    {getDropoffTimeFromItinerary(itineraryDisplay)}
+                  </p>
+                )}
+              </div>
+              <div
+                className={`${styles.selectorWrapper} ${styles.selectorWrapperConstrained}`}
+                style={{ fontFamily: "'Figtree', sans-serif" }}
+              >
+                <PickupLocationSelector
+                  hideTitle
+                  hideSkipOption
+                  pickupLocations={pickupLocations}
+                  selectedLocationId={selectedLocationId}
+                  selectedCustomAddress={selectedCustomAddress}
+                  allowCustomLocation={isPrivateShuttle}
+                  restrictCustomLocationToServiceArea={isPrivateShuttle}
+                  destinations={destinations}
+                  onLocationSelect={(locationId, customLocation, locationName) => {
+                    setError('');
+                    if (customLocation) {
+                      setSelectedLocationId(null);
+                      setSelectedLocationName(null);
+                      setSelectedCustomAddress(customLocation.address);
+                    } else {
+                      setSelectedLocationId(locationId);
+                      setSelectedLocationName(locationName ?? null);
+                      setSelectedCustomAddress(null);
+                    }
+                  }}
+                />
+              </div>
+
+              {hasValidSelection && hasChanged && pickupOrDropOffSteps.length > 0 && (
+                <div className={styles.itineraryPreview}>
+                  <h3 className={styles.previewTitle}>Itinerary changes</h3>
+                  <p className={styles.previewIntro}>
+                    Your itinerary will be updated with the new pickup location:
+                  </p>
+                  <ul className={styles.previewList}>
+                    {pickupOrDropOffSteps.map((step, i) => {
+                      const previewStep = previewItinerary?.find((s) => s.stepType === step.stepType);
+                      const newTime = previewStep?.time?.trim();
+                      const newLabel =
+                        step.stepType === 'pickup'
+                          ? selectedPickupName
+                            ? `Pickup at ${selectedPickupName}${newTime ? ` ${newTime}` : ''}`
+                            : t('booking.pickupLocationUnknown') || "I don't know"
+                          : step.stepType === 'drop_off'
+                            ? selectedPickupName
+                              ? `Drop off at ${selectedPickupName}${newTime ? ` ${newTime}` : ''}`
+                              : t('booking.pickupLocationUnknown') || "I don't know"
+                            : getItineraryStepLabel(previewStep ?? step, true);
+                      return (
+                        <li key={i} className={styles.previewItem}>
+                          <span className={styles.previewOld}>{getItineraryStepLabel(step, true)}</span>
+                          <span className={styles.previewArrow}>→</span>
+                          <span className={styles.previewNew}>{newLabel}</span>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+
+              {error && <div className={styles.error}>{error}</div>}
+
+              <div className={styles.footer}>
+                <button type="button" className={`${styles.footerBtn} ${styles.footerBtnOutline}`} onClick={onClose}>
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className={`${styles.footerBtn} ${styles.footerBtnPrimary}`}
+                  onClick={handleSave}
+                  disabled={!hasValidSelection || !hasChanged || saving}
+                >
+                  {saving ? 'Saving…' : 'Save pickup location'}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/booking/PriceSummary.tsx

@@ -147,6 +147,17 @@ export function PriceSummary({
 
   let subtotalShown = false;
 
+  /** When lines include a TAX row, subtotal is rendered inside the loop before that row — slot content must sit there too, not after all lines (else it ends up below tax). */
+  const firstTaxLineIndex = lines.findIndex(
+    (r) => r.kind === 'line' && String(r.type ?? '').toUpperCase() === 'TAX',
+  );
+  const embedSubtotalBeforeTaxInLines =
+    firstTaxLineIndex >= 0 && subtotal != null && subtotal > 0;
+  const extraSlotBeforeEmbeddedSubtotal =
+    embedSubtotalBeforeTaxInLines && extraBeforeSubtotal ? extraBeforeSubtotal : null;
+  const extraSlotBeforeCheckoutSubtotal =
+    !embedSubtotalBeforeTaxInLines && extraBeforeSubtotal ? extraBeforeSubtotal : null;
+
   return (
     <div className={`space-y-2 min-w-0 ${className}`}>
       {lines.map((row, index) => {
@@ -185,8 +196,11 @@ export function PriceSummary({
         const isTaxLine = type === 'TAX';
         const showSubtotalBeforeTax = isTaxLine && subtotal != null && subtotal > 0 && !subtotalShown;
         if (showSubtotalBeforeTax) subtotalShown = true;
+        const slotHere =
+          showSubtotalBeforeTax && index === firstTaxLineIndex ? extraSlotBeforeEmbeddedSubtotal : null;
         return (
           <div key={`${label}-${index}`}>
+            {slotHere}
             {showSubtotalBeforeTax && (
               <div className={`flex justify-between gap-3 min-w-0 ${textSize} ${subtotalRowClass}`}>
                 <span className="text-stone-600 min-w-0 truncate">{t('booking.subtotal') || 'Subtotal'}</span>
@@ -233,7 +247,7 @@ export function PriceSummary({
           </div>
         );
       })}
-      {extraBeforeSubtotal}
+      {extraSlotBeforeCheckoutSubtotal}
 
       {/* Checkout mode: subtotal/tax/discount not in lines (e.g. Stripe Review & pay modal) */}
       {subtotal != null && !subtotalShown && !hideSubtotal && (subtotal !== total || discountAmount > 0) && (

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

@@ -279,6 +279,42 @@
   box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
 }
 
+/**
+ * Admin “custom receipt line” row: scoped preflight sets `input, button { padding: 0 }` with
+ * higher specificity than Tailwind padding utilities, so insets must be restored here.
+ */
+.booking-flow-preflight .admin-custom-receipt-line input.admin-custom-receipt-input[type='text'] {
+  box-sizing: border-box;
+  padding: 0.625rem 0.875rem;
+  min-height: 2.75rem;
+}
+.booking-flow-preflight .admin-custom-receipt-line input.admin-custom-receipt-input-amount[type='text'] {
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  min-height: 2.75rem;
+}
+.booking-flow-preflight .admin-custom-receipt-line .admin-custom-receipt-segment {
+  box-sizing: border-box;
+  padding: 0.5rem 0.65rem;
+  min-height: 2.75rem;
+}
+@media (min-width: 360px) {
+  .booking-flow-preflight .admin-custom-receipt-line .admin-custom-receipt-segment {
+    padding: 0.5rem 0.75rem;
+  }
+}
+.booking-flow-preflight .admin-custom-receipt-line .admin-custom-receipt-remove {
+  box-sizing: border-box;
+  padding: 0.5rem;
+  min-height: 2.75rem;
+  min-width: 2.75rem;
+}
+.booking-flow-preflight .admin-custom-receipt-line-add {
+  box-sizing: border-box;
+  padding: 0.5rem 0.85rem;
+  min-height: 2.5rem;
+}
+
 /* Labels */
 .booking-flow-preflight label {
   font-family: var(--booking-font-sans);

package/src/components/booking/provider-dashboard-change-booking.ts

@@ -20,6 +20,7 @@ export type ProviderDashboardChangeBookingPayload = {
   pricingAdjustment?: {
     mode: 'AUTO' | 'MANUAL_LINES';
     lineOverrides?: Array<{ lineKey: string; amount: number; reason?: string }>;
+    /** Signed major-unit rows; may include admin custom receipt lines merged with provider inline adjustments. */
     additionalAdjustments?: Array<{ label: string; amount: number }>;
   } | null;
   capacitySeatCredit?: {

package/src/index.ts

@@ -44,6 +44,13 @@ export type {
 export { getItineraryStepLabel } from './lib/booking/itinerary-display';
 export { PARTNER_EMBEDDED_BOOKING_FLOW_UI_BASE } from './components/booking/booking-flow-ui';
 export { default as BookingDialog } from './components/booking/BookingDialog';
+export { PickupLocationDialog } from './components/booking/PickupLocationDialog';
+export type {
+  PickupLocationDialogBooking,
+  PickupLocationDialogProps,
+  PickupDialogItineraryStep,
+} from './components/booking/PickupLocationDialog';
+export { formatBookingRefForDisplay } from './lib/format-booking-ref';
 export { default as BookingProductGrid } from './components/booking/BookingProductGrid';
 export { DefaultTermsContent as TermsContent } from './components/booking/DefaultTermsContent';
 

package/src/lib/booking-api.ts

@@ -855,6 +855,12 @@ export interface ChangeBookingQuoteRequest {
   newAddOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }>;
   /** Full new-booking total shown in the UI; server verifies within tolerance then uses this for the session so charge matches screen. */
   clientProposedTotal?: number;
+  /**
+   * Optional signed manual lines (admin/provider custom receipt rows). When present, the server should fold these
+   * amounts into pricing / stored receipt so totals align with the client (same semantics as provider dashboard
+   * `pricingAdjustment.additionalAdjustments`).
+   */
+  manualLineAdjustments?: Array<{ label: string; amount: number }>;
   /** Optional change-flow capacity hint so API can exclude current booking seats from sold counts. */
   capacitySeatCredit?: {
     enabled: boolean;

package/src/lib/format-booking-ref.ts

@@ -0,0 +1,12 @@
+/**
+ * Format booking reference for display and URLs.
+ * Strips the bookRef_ prefix so users see the short form. Backend accepts both forms.
+ */
+export function formatBookingRefForDisplay(ref: string | null | undefined): string {
+  if (!ref || typeof ref !== 'string') return '';
+  const trimmed = ref.trim();
+  if (trimmed.toLowerCase().startsWith('bookref_')) {
+    return trimmed.slice(8);
+  }
+  return trimmed;
+}