@ticketboothapp/booking 0.1.11 → 0.1.12

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

@@ -0,0 +1,164 @@
+/**
+ * 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

@@ -0,0 +1,199 @@
+'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

@@ -0,0 +1,304 @@
+.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;
+}