@ticketboothapp/booking 0.1.22 → 1.2.24

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

@@ -1,164 +0,0 @@
-/**
- * Ticket selector - quantity controls per ticket category
- */
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--booking-stone-700, #44403c);
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  background: var(--booking-stone-50, #fafaf9);
-  border-radius: 0.5rem;
-}
-
-.category {
-  font-weight: 500;
-  color: var(--booking-stone-900, #1c1917);
-}
-
-.ageHint {
-  font-size: 0.75rem;
-  font-weight: 400;
-  color: var(--booking-stone-500, #78716c);
-  margin-left: 0.25rem;
-}
-
-.price {
-  font-size: 0.875rem;
-  color: var(--booking-stone-500, #78716c);
-}
-
-.priceStrikethrough {
-  text-decoration: line-through;
-  color: var(--booking-stone-400, #a8a29e);
-}
-
-.priceDiscount {
-  color: var(--booking-emerald-600, #059669);
-  font-weight: 500;
-}
-
-.controls {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.qtyBtn {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  transition: all 0.2s;
-}
-
-.qtyBtnDecrement {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  background: #fff;
-  border: 1px solid var(--booking-stone-300, #d6d3d1);
-  color: var(--booking-stone-600, #57534e);
-  transition: all 0.2s;
-}
-
-.qtyBtnDecrement:hover:not(:disabled) {
-  background: var(--booking-stone-100, #f5f5f4);
-}
-
-.qtyBtnDecrement:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--booking-stone-100, #f5f5f4);
-  color: var(--booking-stone-400, #a8a29e);
-  border-color: var(--booking-stone-200, #e7e5e4);
-}
-
-.qtyBtnIncrement {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  background: #fff;
-  border: 1px solid var(--booking-stone-300, #d6d3d1);
-  color: var(--booking-stone-600, #57534e);
-  transition: all 0.2s;
-}
-
-.qtyBtnIncrement:hover:not(:disabled) {
-  background: var(--booking-stone-100, #f5f5f4);
-}
-
-.qtyBtnIncrement:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--booking-stone-100, #f5f5f4);
-  color: var(--booking-stone-400, #a8a29e);
-  border-color: var(--booking-stone-200, #e7e5e4);
-}
-
-.qtyBtnOverbook {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  background: #fee2e2;
-  border: 2px solid #ef4444;
-  color: #b91c1c;
-  cursor: pointer;
-}
-
-.qtyBtnOverbook:hover {
-  background: #fecaca;
-}
-
-.qtyValue {
-  width: 2rem;
-  text-align: center;
-  font-weight: 500;
-  color: var(--booking-stone-900, #1c1917);
-}
-
-.overbookWarning {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #b91c1c;
-  margin-top: 1.75rem;
-  padding-top: 0.5rem;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}

package/src/components/booking/TicketSelector.tsx

@@ -1,199 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { parseISO } from 'date-fns';
-import { enUS, fr } from 'date-fns/locale';
-import { formatInTimeZone } from 'date-fns-tz';
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { Currency } from './CurrencySwitcher';
-import styles from './TicketSelector.module.css';
-
-type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
-
-export interface TicketRate {
-  category: string;
-  rateId: string;
-  available: number;
-  price: number;
-  priceCAD: number;
-  baseInDisplayCurrency?: number;
-  appliedAdjustments?: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }>;
-}
-
-interface TicketSelectorProps {
-  pricing: TicketRate[];
-  quantities: Record<string, number>;
-  totalQuantity: number;
-  /** Min vacancies across pickup (and return when selected); party cannot exceed this without overbooking. */
-  selectedVacancies: number;
-  /** Company TZ + leg datetimes for overbooking copy (departure vs return vs both). */
-  companyTimezone: string;
-  pickupDateTime: string;
-  pickupVacancies: number;
-  returnDateTime: string | null;
-  returnVacancies: number | null;
-  resourceCount: number | null;
-  currency: Currency;
-  locale: string;
-  isAdmin: boolean;
-  isSimplifiedPricingView: boolean;
-  t: TranslationFn;
-  onQuantityChange: (category: string, delta: number) => void;
-  /**
-   * When set (e.g. change booking), decrement is disabled at or below these counts per category.
-   * Categories omitted are treated as minimum 0.
-   */
-  minimumQuantities?: Record<string, number>;
-  /** Optional per-category unit floor (change flow). Keys are uppercased categories (e.g. ADULT). */
-  ticketUnitFloorByCategory?: Map<string, number>;
-}
-
-export function TicketSelector({
-  pricing,
-  quantities,
-  totalQuantity,
-  selectedVacancies,
-  companyTimezone,
-  pickupDateTime,
-  pickupVacancies,
-  returnDateTime,
-  returnVacancies,
-  resourceCount,
-  currency,
-  locale,
-  isAdmin,
-  isSimplifiedPricingView,
-  t,
-  onQuantityChange,
-  minimumQuantities,
-  ticketUnitFloorByCategory,
-}: TicketSelectorProps) {
-  /** Party size vs tighter of pickup/return vacancies (parent passes min of both legs). */
-  const isOverbookedTickets = totalQuantity > selectedVacancies;
-  const isOverbooked = isOverbookedTickets;
-
-  const overbookingDetailMessage = useMemo(() => {
-    if (!isOverbooked) return null;
-    const dateFnsLocale = locale === 'fr' ? fr : enUS;
-    const timePattern = locale === 'fr' ? 'HH:mm' : 'h:mm a';
-    const timeLabel = (iso: string) => {
-      try {
-        return formatInTimeZone(parseISO(iso), companyTimezone, timePattern, { locale: dateFnsLocale });
-      } catch {
-        return '';
-      }
-    };
-    const pickupT = timeLabel(pickupDateTime);
-    const puv = pickupVacancies;
-    if (returnVacancies == null) {
-      return t('booking.overbookingWarnDeparture', { count: puv, time: pickupT });
-    }
-    if (puv < returnVacancies) {
-      return t('booking.overbookingWarnDeparture', { count: puv, time: pickupT });
-    }
-    if (returnVacancies < puv) {
-      const retT = returnDateTime != null ? timeLabel(returnDateTime) : '';
-      return t('booking.overbookingWarnReturn', { count: returnVacancies, time: retT });
-    }
-    return t('booking.overbookingWarnBoth', { count: puv });
-  }, [
-    isOverbooked,
-    companyTimezone,
-    pickupDateTime,
-    pickupVacancies,
-    returnDateTime,
-    returnVacancies,
-    t,
-    locale,
-  ]);
-
-  return (
-    <div>
-      <div className={styles.header}>
-        <label className={styles.label}>
-          {t('booking.tickets')}
-        </label>
-      </div>
-      <div className={styles.list}>
-        {pricing.map((rate) => {
-          const qty = quantities[rate.category] || 0;
-          const floorUnitPrice = ticketUnitFloorByCategory?.get(rate.category.toUpperCase());
-          const effectiveUnitPrice =
-            floorUnitPrice != null ? Math.max(rate.price ?? 0, floorUnitPrice) : (rate.price ?? 0);
-          const minQty = minimumQuantities
-            ? Math.max(0, minimumQuantities[rate.category] ?? 0)
-            : 0;
-          const decrementDisabled = qty <= 0 || (minimumQuantities != null && qty <= minQty);
-          const isPublicMode = isSimplifiedPricingView;
-          let displayBasePrice = rate.baseInDisplayCurrency ?? 0;
-          if (isPublicMode && rate.appliedAdjustments) {
-            const dynamicIncreases = rate.appliedAdjustments
-              .filter(adj => adj.type === 'dynamic' && (adj.changeByCurrency?.[currency] ?? 0) > 0)
-              .reduce((sum, adj) => sum + (adj.changeByCurrency?.[currency] ?? 0), 0);
-            displayBasePrice += dynamicIncreases;
-          }
-          const hasDiscount = displayBasePrice > 0 && effectiveUnitPrice < displayBasePrice;
-
-          return (
-            <div key={rate.category} className={styles.row}>
-              <div>
-                <p className={styles.category}>
-                  {rate.category}
-                  {rate.category === 'CHILD' && (
-                    <span className={styles.ageHint}>(2-10)</span>
-                  )}
-                  {rate.category === 'INFANT' && (
-                    <span className={styles.ageHint}>(Under 2)</span>
-                  )}
-                </p>
-                <p className={styles.price}>
-                  {hasDiscount ? (
-                    <>
-                      <span className={styles.priceStrikethrough}>
-                        {formatCurrencyAmount(displayBasePrice, currency, locale as 'en' | 'fr')}
-                      </span>
-                      {' '}
-                      <span className={styles.priceDiscount}>
-                        {formatCurrencyAmount(effectiveUnitPrice, currency, locale as 'en' | 'fr')}
-                      </span>
-                    </>
-                  ) : (
-                    formatCurrencyAmount(effectiveUnitPrice, currency, locale as 'en' | 'fr')
-                  )}
-                </p>
-              </div>
-              <div className={styles.controls}>
-                <button
-                  type="button"
-                  onClick={() => onQuantityChange(rate.category, -1)}
-                  disabled={decrementDisabled}
-                  className={styles.qtyBtnDecrement}
-                >
-                  −
-                </button>
-                <span className={styles.qtyValue}>
-                  {qty}
-                </span>
-                <button
-                  onClick={() => onQuantityChange(rate.category, 1)}
-                  disabled={!isAdmin && totalQuantity >= selectedVacancies}
-                  className={isAdmin && isOverbookedTickets ? styles.qtyBtnOverbook : styles.qtyBtnIncrement}
-                >
-                  +
-                </button>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {isAdmin && isOverbooked && overbookingDetailMessage && (
-        <p className={styles.overbookWarning} role="status">
-          {overbookingDetailMessage}
-          {resourceCount != null
-            ? ` ${t('booking.overbookingResourcesSuffix', { count: resourceCount })}`
-            : ''}
-        </p>
-      )}
-    </div>
-  );
-}

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

@@ -1,304 +0,0 @@
-.root {
-  margin: 1rem 0;
-  padding-bottom: 1rem;
-}
-
-/* Higher specificity to override booking-flow-preflight button reset */
-.root .mainToggle {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 0.625rem 2.5rem 0.625rem 1rem;
-  background: var(--light-orange-background-dark);
-  border-radius: 0.5rem;
-  border: none;
-  cursor: pointer;
-  font-family: 'Poppins', sans-serif !important;
-  font-size: 1.125rem;
-  font-weight: 700;
-  text-transform: lowercase;
-  color: var(--accent-orange) !important;
-  text-align: left;
-  transition: opacity 0.2s;
-}
-
-.root .mainToggle:hover {
-  opacity: 0.9;
-}
-
-.root .mainToggle .toggleIcon {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%) rotate(0deg);
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  color: var(--accent-orange);
-  transition: transform 0.3s ease;
-}
-
-.root .mainToggle .toggleIcon svg {
-  display: block;
-  transition: transform 0.3s ease;
-}
-
-/* Same as FAQ accordion: indicator rotates -90deg when open (HeroUI accordionItem) */
-.root .mainToggle .toggleIconExpanded {
-  transform: translateY(-50%) rotate(-90deg);
-}
-
-/* Counter-rotate minus so it stays horizontal when container rotates */
-.root .mainToggle .toggleIconExpanded svg {
-  transform: rotate(180deg);
-}
-
-@media (min-width: 768px) {
-  .root .mainToggle {
-    font-size: 1.375rem;
-  }
-}
-
-.contentWrapper {
-  display: grid;
-  grid-template-rows: 0fr;
-  opacity: 0;
-  transition: grid-template-rows 0.5s ease-in-out, opacity 0.45s ease-in-out;
-}
-
-.contentWrapper.contentExpanded {
-  grid-template-rows: 1fr;
-  opacity: 1;
-}
-
-.contentWrapper > .content {
-  min-height: 0;
-  overflow: hidden;
-}
-
-.content {
-  margin-top: 0;
-  padding: 0;
-  transition: padding 0.3s ease-in-out;
-}
-
-.contentWrapper.contentExpanded > .content {
-  padding: 16px;
-}
-
-/* Higher specificity to override booking-flow-preflight p/blockquote { margin: 0 } */
-.content .paragraph {
-  margin: 0 0 1rem 0;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  color: var(--primary-text);
-}
-
-.content .paragraph a,
-.content .review a,
-.content .bulletItem a {
-  color: var(--accent-orange);
-  text-decoration: underline;
-}
-
-.content .paragraph a:hover,
-.content .review a:hover,
-.content .bulletItem a:hover {
-  text-decoration-thickness: 2px;
-}
-
-.content .review {
-  margin: 1.25rem 0;
-  padding: 1rem 1.25rem;
-  background: var(--booking-stone-50, #fafaf9);
-  border-left: 4px solid var(--accent-orange);
-  border-radius: 0 0.5rem 0.5rem 0;
-}
-
-.content .review .reviewText {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.9375rem;
-  font-style: italic;
-  line-height: 1.6;
-  color: var(--booking-text, #1c1917);
-}
-
-.reviewName {
-  display: block;
-  font-size: 0.875rem;
-  font-style: normal;
-  color: var(--booking-text-muted, #78716c);
-}
-
-.bulletList {
-  margin: 0;
-  padding-left: 1.25rem;
-  list-style: disc;
-}
-
-.content > .bulletList {
-  margin-bottom: 1rem;
-}
-
-.bulletItem {
-  margin-bottom: 0.35rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--primary-text);
-}
-
-.bulletItem:last-child {
-  margin-bottom: 0;
-}
-
-.nestedSection {
-  margin-top: 0.75rem;
-}
-
-/* Higher specificity to override booking-flow-preflight button reset */
-.root .nestedToggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 0.9375rem;
-  font-weight: 700 !important;
-  color: var(--accent-orange) !important;
-  text-align: left;
-  transition: opacity 0.2s;
-}
-
-.root .nestedToggle:hover {
-  opacity: 0.8;
-}
-
-.root .nestedToggle .chevron {
-  flex-shrink: 0;
-  margin-left: 0;
-  color: var(--accent-orange);
-  transition: transform 0.3s ease;
-}
-
-.root .nestedToggle[aria-expanded='true'] .chevron {
-  transform: rotate(90deg);
-}
-
-.nestedContentWrapper {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s ease-in-out;
-}
-
-.nestedContentWrapper.nestedContentOpen {
-  grid-template-rows: 1fr;
-}
-
-.nestedContentWrapper > .nestedContent {
-  min-height: 0;
-  overflow: hidden;
-}
-
-.nestedContent {
-  margin-top: 0.5rem;
-  padding-left: 0;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--primary-text);
-}
-
-.nestedContent .paragraph {
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.nestedContent .paragraph:last-child {
-  margin-bottom: 0;
-}
-
-.sectionHtml {
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--primary-text);
-  white-space: pre-line;
-}
-
-.sectionHtmlLines {
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--primary-text);
-}
-
-.sectionLineHeading {
-  margin-bottom: 0.25rem;
-}
-
-.sectionLineIndented {
-  padding-left: 1rem;
-  margin-bottom: 0.25rem;
-}
-
-.sectionHtmlLines .sectionLineIndented:last-child,
-.sectionHtmlLines .sectionLineHeading:last-child {
-  margin-bottom: 0;
-}
-
-.sectionSubsections {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.sectionSubsectionTitle {
-  font-weight: 700;
-  margin-bottom: 0.35rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--primary-text);
-}
-
-.sectionSubsectionTitle:last-child {
-  margin-bottom: 0;
-}
-
-.sectionSubsection .bulletList {
-  margin-top: 0;
-}
-
-.sectionHtmlLines a {
-  color: var(--accent-orange);
-  text-decoration: underline;
-}
-
-.sectionHtml p {
-  margin: 0 0 0.5rem 0;
-}
-
-.sectionHtml p:last-child {
-  margin-bottom: 0;
-}
-
-.sectionHtml ul {
-  margin: 0.5rem 0 0 0;
-  padding-left: 1.25rem;
-  list-style: disc;
-}
-
-.sectionHtml li {
-  margin-bottom: 0.35rem;
-}
-
-.sectionHtml li:last-child {
-  margin-bottom: 0;
-}
-
-.sectionHtml a {
-  color: var(--accent-orange);
-  text-decoration: underline;
-}