@ticketboothapp/booking 1.2.55 → 1.2.58

package/src/components/booking/change-booking-compare.module.css

@@ -0,0 +1,97 @@
+/**
+ * Compact compare cards: Figtree only (no Poppins). Small type + tight spacing for dialog embeds.
+ */
+
+.column {
+  overflow: hidden;
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--light-orange-background);
+  /* Cascade to itinerary `<span>`s that only use Tailwind weight/color classes */
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+}
+
+.kicker {
+  margin: 0 0 0.375rem 0;
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  line-height: 1.2;
+  color: var(--grey-text, var(--booking-text-muted, #78716c));
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0;
+  margin: 0 0 0.2rem 0;
+}
+
+.label {
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--primary-text, var(--booking-text, #1c1917));
+  margin-right: 0.3em;
+}
+
+.value {
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--primary-text, var(--booking-text, #1c1917));
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+.itineraryBlock {
+  margin: 0.15rem 0 0.2rem 0;
+}
+
+.itineraryList {
+  margin: 0.2rem 0 0 0;
+  padding: 0;
+  list-style: none;
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--primary-text, var(--booking-text, #1c1917));
+}
+
+.itineraryList li + li {
+  margin-top: 0.125rem;
+}
+
+.totalRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem 0.75rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgba(231, 229, 228, 0.8);
+}
+
+.totalLabel {
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--primary-text, var(--booking-text, #1c1917));
+}
+
+.totalAmount {
+  font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+  color: var(--primary-text, var(--booking-text, #1c1917));
+}

package/src/components/booking/change-booking-compare.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import styles from './change-booking-compare.module.css';
+
+export type ItineraryStepLine = { time: string | null; label: string };
+
+export type ChangeHighlightVariant = 'current' | 'new';
+
+/** Same date formatting as manage-booking / ChangeBookingDialog (Mountain Time label). */
+export function formatBookingDateForChangeCompare(dateTime: string | null | undefined): string {
+  if (!dateTime) return '—';
+  try {
+    const date = new Date(dateTime);
+    return date.toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      timeZone: 'America/Denver',
+    });
+  } catch {
+    return dateTime;
+  }
+}
+
+export function formatBookingItemsForCompare(
+  items: Array<{ category: string; count: number }> | null | undefined,
+): string {
+  if (!items?.length) return '—';
+  const labels: Record<string, string> = {
+    ADULT: 'adult',
+    CHILD: 'child',
+    INFANT: 'infant',
+    SENIOR: 'senior',
+    STUDENT: 'student',
+  };
+  const parts = items
+    .filter((item) => item.count > 0)
+    .map((item) => {
+      const label = labels[item.category] || item.category.toLowerCase();
+      return `${item.count} ${label}${item.count !== 1 ? 's' : ''}`;
+    });
+  return parts.length > 0 ? parts.join(', ') : '—';
+}
+
+export function computeItineraryStepChanged(
+  stepsA: ItineraryStepLine[] | null,
+  stepsB: ItineraryStepLine[] | null,
+): boolean[] | undefined {
+  if (!stepsA) return undefined;
+  return stepsA.map((a, i) => {
+    const b = stepsB?.[i];
+    return !b || a.time !== b.time || a.label !== b.label;
+  });
+}
+
+/** True when the two rendered itinerary lines are the same. */
+export function itinerariesEqualForChangeCompare(
+  a: ItineraryStepLine[] | null,
+  b: ItineraryStepLine[] | null,
+): boolean {
+  const lenA = a?.length ?? 0;
+  const lenB = b?.length ?? 0;
+  if (lenA === 0 && lenB === 0) return true;
+  if (lenA !== lenB || !a || !b) return false;
+  return a.every((step, i) => {
+    const o = b[i];
+    return step.time === o.time && step.label === o.label;
+  });
+}
+
+/**
+ * When the flow reports “changes” but the compare cards show the same date, tickets line,
+ * itinerary, and total, hide the second column and skip strike-through/bold.
+ */
+export function changeBookingCompareColumnsVisuallyMatch(params: {
+  dateCurrent: string;
+  dateNew: string;
+  ticketsCurrent: string;
+  ticketsNew: string;
+  itineraryCurrent: ItineraryStepLine[] | null;
+  itineraryNew: ItineraryStepLine[] | null;
+  totalCurrent: string;
+  totalNew: string;
+}): boolean {
+  return (
+    params.dateCurrent === params.dateNew &&
+    params.ticketsCurrent === params.ticketsNew &&
+    params.totalCurrent === params.totalNew &&
+    itinerariesEqualForChangeCompare(params.itineraryCurrent, params.itineraryNew)
+  );
+}
+
+export function BookingChangeSummaryColumn({
+  kicker,
+  tourName,
+  dateStr,
+  ticketsStr,
+  itinerarySteps,
+  highlightVariant,
+  totalFormatted,
+  dateChanged = false,
+  ticketsChanged = false,
+  itineraryStepChanged,
+}: {
+  kicker: string;
+  tourName: string;
+  dateStr: string;
+  ticketsStr: string;
+  itinerarySteps: ItineraryStepLine[] | null;
+  highlightVariant: ChangeHighlightVariant;
+  /** e.g. "C$123.45" */
+  totalFormatted: string;
+  dateChanged?: boolean;
+  ticketsChanged?: boolean;
+  itineraryStepChanged?: boolean[];
+}) {
+  const dateClass =
+    highlightVariant === 'current' && dateChanged
+      ? 'line-through text-stone-500'
+      : highlightVariant === 'new' && dateChanged
+        ? 'font-semibold text-stone-900'
+        : '';
+  const ticketsClass =
+    highlightVariant === 'current' && ticketsChanged
+      ? 'line-through text-stone-500'
+      : highlightVariant === 'new' && ticketsChanged
+        ? 'font-semibold text-stone-900'
+        : '';
+
+  return (
+    <div className={`booking-change-summary-column ${styles.column}`}>
+      <p className={styles.kicker}>{kicker}</p>
+
+      {/* Same pattern as manage-booking `BookingDetails`: label + value on one baseline row */}
+      <div className={styles.row}>
+        <span className={styles.label}>Tour:</span>
+        <span className={styles.value}>{tourName.trim()}</span>
+      </div>
+      <div className={styles.row}>
+        <span className={styles.label}>Date:</span>
+        <span className={styles.value}>
+          {dateClass ? <span className={dateClass}>{dateStr}</span> : dateStr}
+        </span>
+      </div>
+      <div className={styles.row}>
+        <span className={styles.label}>Tickets:</span>
+        <span className={styles.value}>
+          {ticketsClass ? <span className={ticketsClass}>{ticketsStr}</span> : ticketsStr}
+        </span>
+      </div>
+
+      <div className={styles.itineraryBlock}>
+        <div className={styles.row}>
+          <span className={styles.label}>Itinerary:</span>
+        </div>
+        {itinerarySteps && itinerarySteps.length > 0 ? (
+          <ul className={styles.itineraryList}>
+            {itinerarySteps.map((step, i) => (
+              <li
+                key={i}
+                className={
+                  itineraryStepChanged?.[i]
+                    ? highlightVariant === 'current'
+                      ? 'line-through text-stone-500'
+                      : 'font-semibold text-stone-900'
+                    : undefined
+                }
+              >
+                {step.time ? (
+                  <>
+                    <span
+                      className={
+                        itineraryStepChanged?.[i]
+                          ? highlightVariant === 'current'
+                            ? 'font-medium text-stone-500'
+                            : 'font-semibold text-stone-900'
+                          : 'font-medium text-stone-800'
+                      }
+                    >
+                      {step.time}
+                    </span>
+                    <span
+                      className={
+                        itineraryStepChanged?.[i] && highlightVariant === 'new'
+                          ? 'text-stone-400'
+                          : 'text-stone-500'
+                      }
+                    >
+                      {' '}
+                      ·{' '}
+                    </span>
+                    <span
+                      className={
+                        itineraryStepChanged?.[i] && highlightVariant === 'new'
+                          ? 'font-semibold text-stone-900'
+                          : undefined
+                      }
+                    >
+                      {step.label}
+                    </span>
+                  </>
+                ) : (
+                  <span
+                    className={
+                      itineraryStepChanged?.[i] && highlightVariant === 'new'
+                        ? 'font-semibold text-stone-900'
+                        : undefined
+                    }
+                  >
+                    {step.label}
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className={`${styles.value} mt-1 text-stone-500`}>—</p>
+        )}
+      </div>
+
+      <div className={styles.totalRow}>
+        <span className={styles.totalLabel}>Total:</span>
+        <span className={styles.totalAmount}>{totalFormatted}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import type { Currency } from './CurrencySwitcher';
+
+/** Payload passed to `onChangeBooking` when applying a dashboard-managed booking change. */
+export type ProviderDashboardChangeBookingPayload = {
+  productId: string;
+  dateTime: string;
+  bookingItems: Array<{ category: string; count: number }>;
+  returnAvailabilityId?: string | null;
+  pickupLocationId?: string | null;
+  travelerHotel?: string | null;
+  startTime?: string | null;
+  passengerCount?: number | null;
+  childSafetySeatsCount?: number | null;
+  foodRestrictions?: string | null;
+  addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
+  cancellationPolicyId?: string | null;
+  promoCode?: string | null;
+  newTotalAmount?: number;
+  additionalHoursCount?: number | null;
+  pricingAdjustment?: {
+    mode: 'AUTO' | 'MANUAL_LINES';
+    lineOverrides?: Array<{ lineKey: string; amount: number; reason?: string }>;
+    additionalAdjustments?: Array<{ label: string; amount: number }>;
+  } | null;
+};
+
+/** Seeds the flow when opening provider change-booking (matches TicketBooth `BookingWidget` `initialBooking`). */
+export type ProviderDashboardInitialBooking = {
+  bookingReference: string;
+  productId: string;
+  availabilityId?: string;
+  dateTime: string;
+  originalTotalAmount?: number;
+  originalCurrency?: Currency | string;
+  originalPromoAmount?: number;
+  originalPromoLabel?: string | null;
+  bookingItems: Array<{ category: string; count: number }>;
+  returnAvailabilityId?: string | null;
+  pickupLocationId?: string | null;
+  travelerHotel?: string | null;
+  startTime?: string | null;
+  privateShuttleDetails?: { passengerCount?: number };
+  cancellationPolicyId?: string | null;
+  promoCode?: string | null;
+  additionalHoursCount?: number | null;
+  addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
+};

package/src/index.ts

@@ -13,11 +13,30 @@ export {
 
 /** Canonical Via Via booking UI — same modules as `@/components/booking/*` on the site. */
 export { BookingFlow } from './components/booking/BookingFlow';
+export type { ChangeFlowSelectionPreview } from './components/booking/BookingFlow';
 export { PrivateShuttleBookingFlow } from './components/booking/PrivateShuttleBookingFlow';
 export type { BookingFlowUiOptions } from './components/booking/booking-flow-ui';
+export type {
+  ProviderDashboardChangeBookingPayload,
+  ProviderDashboardInitialBooking,
+} from './components/booking/provider-dashboard-change-booking';
+export {
+  BookingChangeSummaryColumn,
+  changeBookingCompareColumnsVisuallyMatch,
+  computeItineraryStepChanged,
+  formatBookingDateForChangeCompare,
+  formatBookingItemsForCompare,
+  itinerariesEqualForChangeCompare,
+} from './components/booking/change-booking-compare';
+export type {
+  ItineraryStepLine,
+  ChangeHighlightVariant,
+} from './components/booking/change-booking-compare';
+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 { default as BookingProductGrid } from './components/booking/BookingProductGrid';
+export { DefaultTermsContent as TermsContent } from './components/booking/DefaultTermsContent';
 
 export type {
   BookingAppMode,

package/src/runtime/types.ts

@@ -51,7 +51,8 @@ export interface BookingRuntimeSlots {
   ProductTag: BookingSlotComponent;
   PillVariant: unknown;
   ImageModal: BookingSlotComponent;
-  TermsContent: BookingSlotComponent;
+  /** Optional override; package supplies a full default terms component when omitted. */
+  TermsContent?: BookingSlotComponent;
   PlusIcon: ComponentType<SVGProps<SVGSVGElement>>;
   MinusIcon: ComponentType<SVGProps<SVGSVGElement>>;
   /** Via Via `ButtonHoverColor` enum from `@/components/button`. */