@ticketboothapp/booking 0.1.11 → 0.1.13

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

@@ -0,0 +1,134 @@
+/**
+ * Pickup time selector - grid of time slot buttons
+ */
+
+.label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--booking-stone-700, #44403c);
+  margin-bottom: 0.5rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+.btn {
+  padding: 0.875rem 1.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.btnDefault {
+  padding-top: 0.75rem;
+}
+
+.btnWithBadge {
+  padding-top: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  .btnWithBadge {
+    padding-top: 1rem;
+  }
+}
+
+.btnSelected {
+  background: var(--booking-emerald-600, #059669);
+  color: #fff;
+}
+
+.btnAvailable {
+  background: var(--light-orange-background-dark, #f7e4dc);
+  color: var(--booking-stone-700, #44403c);
+}
+
+.btnAvailable:hover {
+  background: var(--light-orange-background, #fff1eb);
+}
+
+.btnDisabled {
+  background: var(--booking-stone-100, #f5f5f4);
+  color: var(--booking-stone-400, #a8a29e);
+  cursor: not-allowed;
+}
+
+.btnSoldOutAdmin {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.btnSoldOutAdmin:hover {
+  background: #fee2e2;
+}
+
+.btnSoldOutLocked {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+  cursor: not-allowed;
+}
+
+.btnSoldOutLocked:hover {
+  background: #fee2e2;
+}
+
+.capacity {
+  font-size: 0.75rem;
+  margin-top: 0.125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Fitted to green selected tile — not pure white (readability) */
+.capacityOnSelected {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.capacityDefault {
+  color: var(--booking-stone-500, #78716c);
+}
+
+.capacityProjected {
+  font-size: 0.7rem;
+  line-height: 1.2;
+  margin-top: 0.25rem;
+  font-weight: 600;
+  text-align: center;
+  color: #b91c1c;
+  font-variant-numeric: tabular-nums;
+}
+
+.badge {
+  position: absolute;
+  top: -0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: 'Poppins', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: lowercase;
+  color: #fff;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  white-space: nowrap;
+  background-color: #ff4d00;
+}
+
+.soldOut {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #b91c1c;
+}

package/src/components/booking/PickupTimeSelector.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import type { Availability } from '@/lib/booking-api';
+import type { ProductOption } from '@/lib/booking-api';
+import styles from './PickupTimeSelector.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+export interface PickupTimeInfo extends Availability {
+  pickupTime: string;
+  displayTime: string;
+  originalTime: string;
+  displayTimeRange?: string;
+}
+
+interface PickupTimeSelectorProps {
+  pickupTimes: PickupTimeInfo[];
+  selectedDateTime: string | null;
+  selectedTicketCount: number;
+  optionsMap: Map<string, ProductOption>;
+  hasAnyMostPopular: boolean;
+  isAdmin: boolean;
+  pickupLocationSkipped: boolean;
+  t: TranslationFn;
+  onTimeSelect: (availability: Availability) => void;
+}
+
+export function PickupTimeSelector({
+  pickupTimes,
+  selectedDateTime,
+  selectedTicketCount,
+  optionsMap,
+  hasAnyMostPopular,
+  isAdmin,
+  pickupLocationSkipped,
+  t,
+  onTimeSelect,
+}: PickupTimeSelectorProps) {
+  return (
+    <div>
+      <label className={styles.label}>
+        {t('booking.selectPickupTime')}
+      </label>
+      <div className={styles.grid}>
+        {pickupTimes.map((timeInfo) => {
+          const isSelected = selectedDateTime === timeInfo.dateTime;
+          const isSoldOut = timeInfo.vacancies === 0;
+          const isInsufficientForParty =
+            selectedTicketCount > 0 && (timeInfo.vacancies ?? 0) < selectedTicketCount;
+          const canSelect = isAdmin || (!isSoldOut && !isInsufficientForParty);
+          const option = timeInfo.productOptionId
+            ? optionsMap.get(timeInfo.productOptionId)
+            : undefined;
+          const isMostPopular = pickupTimes.length > 1 && option?.mostPopular;
+          const totalCap = timeInfo.totalCapacity ?? 0;
+          const booked = timeInfo.bookedCapacity ?? (totalCap - (timeInfo.vacancies ?? 0));
+          const showCapacity = isAdmin && totalCap > 0;
+          const slotVacancies = timeInfo.vacancies;
+          const projectedSeats = booked + selectedTicketCount;
+          const showAdminProjectedLoad =
+            isSelected && showCapacity && selectedTicketCount > slotVacancies;
+          // Selected tile stays green; unselected + admin + tight party uses public-style tile, not "sold out admin" pink
+          const btnClass = (() => {
+            if (isSelected) return styles.btnSelected;
+            if (!isAdmin) {
+              return (isSoldOut || isInsufficientForParty) ? styles.btnSoldOutLocked : styles.btnAvailable;
+            }
+            if (isSoldOut && slotVacancies === 0) return styles.btnSoldOutAdmin;
+            return styles.btnAvailable;
+          })();
+          return (
+            <button
+              key={timeInfo.dateTime}
+              onClick={() => canSelect && onTimeSelect(timeInfo)}
+              disabled={!canSelect}
+              className={`${styles.btn} ${hasAnyMostPopular ? styles.btnWithBadge : styles.btnDefault} ${btnClass}`}
+            >
+              <div>{pickupLocationSkipped && timeInfo.displayTimeRange ? timeInfo.displayTimeRange : timeInfo.displayTime}</div>
+              {showCapacity && (showAdminProjectedLoad ? (
+                <div className={styles.capacityProjected} aria-live="polite">
+                  <div>{t('booking.adminBookingLoadLine1', { projected: projectedSeats })}</div>
+                  <div>{t('booking.adminBookingLoadLine2', { total: totalCap })}</div>
+                </div>
+              ) : (
+                <div
+                  className={`${styles.capacity} ${isSelected ? styles.capacityOnSelected : styles.capacityDefault}`}
+                >
+                  {t('calendar.spotsAvailable', { count: slotVacancies })}
+                </div>
+              ))}
+              {isMostPopular && (
+                <div className={styles.badge}>
+                  {t('booking.mostPopular')}
+                </div>
+              )}
+              {isSoldOut && (
+                <div className={styles.soldOut}>
+                  {t('booking.soldOut')}
+                </div>
+              )}
+              {isInsufficientForParty && !isAdmin && (
+                <div className={styles.soldOut}>
+                  {`Only ${timeInfo.vacancies} spot${timeInfo.vacancies === 1 ? '' : 's'} left, decrease your ticket count below to select this time`}
+                </div>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/{PriceBreakdown.tsx → booking/PriceBreakdown.tsx}

@@ -2,11 +2,11 @@
 
 import { useState } from 'react';
 import { formatCurrencyAmount } from '@/lib/currency';
-import type { PriceBreakdown as PriceBreakdownType } from '@/lib/pricing';
-import { useTranslations } from '@/lib/i18n';
+import type { PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
+import { useTranslations } from '@/lib/booking/i18n';
 import { useBookingApp } from '@/contexts/BookingAppContext';
 import type { Currency } from './CurrencySwitcher';
-import type { Locale } from '@/lib/i18n/config';
+import type { Locale } from '@/lib/booking/i18n/config';
 
 export interface PriceBreakdownProps {
   category: string;

package/src/components/{PriceSummary.tsx → booking/PriceSummary.tsx}

@@ -1,10 +1,11 @@
 'use client';
 
 import { formatCurrencyAmount } from '@/lib/currency';
-import type { PriceBreakdown as PriceBreakdownType } from '@/lib/pricing';
+import type { PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
 import { PriceBreakdown } from './PriceBreakdown';
+import { InfoTooltip } from './InfoTooltip';
 import type { Currency } from './CurrencySwitcher';
-import type { Locale } from '@/lib/i18n/config';
+import type { Locale } from '@/lib/booking/i18n/config';
 
 /** One row in the price summary: either a ticket line (with optional breakdown tooltip) or a simple line. */
 export type PriceSummaryLine =
@@ -22,6 +23,8 @@ export type PriceSummaryLine =
       /** Drives styling: discount (red, -), return add-on (green, +), default (stone). Receipt types: TICKET, FEE, RETURN_OPTION, PROMO_CODE, CANCELLATION_UPGRADE, TAX, etc. */
       type?: string;
       quantity?: number | null;
+      /** Optional tooltip text - when set, shows info icon next to label (e.g. for Moraine Lake Road Access Fee) */
+      tooltip?: string;
     };
 
 export interface PriceSummaryProps {
@@ -49,14 +52,14 @@ export interface PriceSummaryProps {
   className?: string;
   /** Optional: render between tax row and total row (e.g. promo code input in BookingFlow) */
   extraBetweenTaxAndTotal?: React.ReactNode;
-  /** Optional: render after total row (e.g. price delta in change booking flow) */
-  extraAfterTotal?: React.ReactNode;
   /** Subtotal row spacing: 'compact' for booking flow/Stripe modal, 'relaxed' for /manage (equal top/bottom) */
   subtotalSpacing?: 'compact' | 'relaxed';
-  /** Deposit mode: use this label instead of "Total", and show Remaining Balance line above */
-  depositMode?: { totalLabel: string; balanceAmount: number };
+  /** Deposit mode: show Total (full), Deposit (amount due today), Remaining Balance */
+  depositMode?: { totalLabel: string; balanceAmount: number; fullTotalAmount: number };
   /** When true (e.g. deposit flow with single line), hide redundant Subtotal row */
   hideSubtotal?: boolean;
+  /** Overrides the final "Total" row label (e.g. change booking: amount due for the change) */
+  totalLabel?: string;
 }
 
 function getLineAmountClass(type: string | undefined, amount: number): string {
@@ -101,13 +104,13 @@ export function PriceSummary({
   t = (k) => k,
   className = '',
   extraBetweenTaxAndTotal,
-  extraAfterTotal,
   subtotalSpacing = 'compact',
   depositMode,
   hideSubtotal = false,
+  totalLabel,
 }: PriceSummaryProps) {
   const textSize = size === 'sm' ? 'text-sm' : 'text-base';
-  const totalSize = size === 'sm' ? 'text-lg' : 'text-2xl';
+  const totalSize = size === 'sm' ? 'text-xl' : 'text-2xl';
   const subtotalRowClass = subtotalSpacing === 'relaxed'
     ? 'pt-3 pb-3 mt-2 border-t border-stone-200'
     : 'mt-2 pt-1.5 border-t border-stone-200';
@@ -130,7 +133,7 @@ export function PriceSummary({
             />
           );
         }
-        const { label, amount, type, quantity } = row;
+        const { label, amount, type, quantity, tooltip } = row;
         // Receipt mode: insert Subtotal row before first TAX line
         const isTaxLine = type === 'TAX';
         const showSubtotalBeforeTax = isTaxLine && subtotal != null && subtotal > 0 && !subtotalShown;
@@ -144,9 +147,12 @@ export function PriceSummary({
               </div>
             )}
             <div className={`flex justify-between gap-3 min-w-0 ${textSize}`}>
-              <span className="text-stone-600 min-w-0 truncate">
-                {label}
-                {type === 'TICKET' && quantity != null && quantity > 1 ? ` (x${quantity})` : ''}
+              <span className="text-stone-600 min-w-0 flex items-center gap-1">
+                <span className="min-w-0 truncate">
+                  {label}
+                  {type === 'TICKET' && quantity != null && quantity > 1 ? ` (x${quantity})` : ''}
+                </span>
+                {tooltip && <InfoTooltip text={tooltip} />}
               </span>
               <span className={`flex-shrink-0 whitespace-nowrap font-medium ${getLineAmountClass(type, amount)}`}>
                 {formatLineAmount('line', amount, type, currency, locale)}
@@ -186,26 +192,43 @@ export function PriceSummary({
       {extraBetweenTaxAndTotal}
 
       <div className="space-y-0">
-        <div className={`flex justify-between gap-3 pt-2 border-t border-stone-200 min-w-0 ${textSize}`}>
-          <span className="font-semibold text-stone-900 min-w-0 truncate">
-            {depositMode
-              ? depositMode.totalLabel
-              : (t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total')}
-          </span>
-          <span className={`flex-shrink-0 whitespace-nowrap font-bold text-stone-900 ${totalSize}`}>
-            {formatCurrencyAmount(total, currency, locale)}
-          </span>
-        </div>
-        {depositMode && depositMode.balanceAmount > 0 && (
-          <div className={`flex justify-between gap-3 min-w-0 pt-1 ${textSize}`}>
-            <span className="text-stone-600 min-w-0 truncate">{t('booking.remainingBalance') || 'Remaining Balance'}</span>
-            <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
-              {formatCurrencyAmount(depositMode.balanceAmount, currency, locale)}
+        {depositMode ? (
+          <>
+            <div className={`flex justify-between gap-3 pt-2 border-t border-stone-200 min-w-0 ${totalSize}`}>
+              <span className="font-semibold text-stone-900 min-w-0 truncate">
+                {t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total'}
+              </span>
+              <span className="flex-shrink-0 whitespace-nowrap font-semibold text-stone-900">
+                {formatCurrencyAmount(depositMode.fullTotalAmount, currency, locale)}
+              </span>
+            </div>
+            <div className={`flex justify-between gap-3 min-w-0 pt-1 ${textSize}`}>
+              <span className="text-stone-600 min-w-0 truncate">{depositMode.totalLabel}</span>
+              <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                {formatCurrencyAmount(total, currency, locale)}
+              </span>
+            </div>
+            {depositMode.balanceAmount > 0 && (
+              <div className={`flex justify-between gap-3 min-w-0 pt-1 ${textSize}`}>
+                <span className="text-stone-600 min-w-0 truncate">{t('booking.remainingBalance') || 'Remaining Balance'}</span>
+                <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                  {formatCurrencyAmount(depositMode.balanceAmount, currency, locale)}
+                </span>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className={`flex justify-between gap-3 pt-2 border-t border-stone-200 min-w-0 ${totalSize}`}>
+            <span className="font-semibold text-stone-900 min-w-0 truncate">
+              {totalLabel ??
+                (t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total')}
+            </span>
+            <span className="flex-shrink-0 whitespace-nowrap font-semibold text-stone-900">
+              {formatCurrencyAmount(total, currency, locale)}
             </span>
           </div>
         )}
       </div>
-      {extraAfterTotal}
     </div>
   );
 }