@ticketboothapp/booking 0.1.11 → 0.1.12

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

@@ -0,0 +1,166 @@
+/**
+ * Promo row — all layout in this module so it matches on viavia (full Tailwind) and in
+ * embedded hosts (e.g. provider dashboard) that only load booking-flow.css, not every Tailwind utility.
+ */
+
+/* Mobile: label above field (like CheckoutForm). sm+: label left of field. */
+.promoRow {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.25rem;
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
+  min-width: 0;
+}
+
+@media (min-width: 640px) {
+  .promoRow {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+.promoLabel {
+  flex-shrink: 0;
+  white-space: nowrap;
+  color: var(--booking-stone-600, #57534e);
+}
+
+.promoFieldRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.promoDiscount {
+  margin-left: auto;
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-weight: 500;
+  color: #dc2626;
+}
+
+.promoErrorInline {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #dc2626;
+  white-space: nowrap;
+}
+
+.inputWrap {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .inputWrap {
+    max-width: 250px;
+  }
+}
+
+/* Box with icons inside (x and check) */
+.input {
+  width: 100%;
+  min-width: 0;
+  padding: 0.375rem 2.25rem 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--booking-stone-300, #d6d3d1);
+  background: #fff;
+  color: var(--booking-stone-900, #1c1917);
+  box-sizing: border-box;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--booking-stone-500, #78716c);
+}
+
+.input:read-only {
+  background: var(--booking-stone-50, #fafaf9);
+  cursor: default;
+  padding-right: 3.5rem;
+}
+
+/* X and check icons inside the box - dashboard style */
+.removeBtn {
+  position: absolute;
+  right: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border-radius: 9999px;
+  color: var(--booking-stone-500, #78716c);
+  background: var(--booking-stone-200, #e7e5e4);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.removeBtn:hover {
+  background: var(--booking-stone-300, #d6d3d1);
+  color: var(--booking-stone-700, #44403c);
+}
+
+.loading {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: var(--booking-stone-100, #f5f5f4);
+  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.errorIcon {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: #ef4444;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Check icon - inside box, next to remove btn */
+.appliedBadge {
+  position: absolute;
+  right: 2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: var(--booking-emerald-500, #10b981);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+

package/src/components/booking/PromoCodeInput.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { Check, X } from 'lucide-react';
+import { formatCurrencyAmount } from '@/lib/currency';
+import type { Currency } from './CurrencySwitcher';
+import styles from './PromoCodeInput.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+interface PromoCodeInputProps {
+  promoCodeInput: string;
+  appliedPromoCode: string | null;
+  promoCodeError: string;
+  promoCodeValidating: boolean;
+  promoDiscountAmount: number;
+  currency: Currency;
+  locale: string;
+  t: TranslationFn;
+  onInputChange: (value: string) => void;
+  onApply: () => void;
+  onRemove: () => void;
+  locked?: boolean;
+}
+
+export function PromoCodeInput({
+  promoCodeInput,
+  appliedPromoCode,
+  promoCodeError,
+  promoCodeValidating,
+  promoDiscountAmount,
+  currency,
+  locale,
+  t,
+  onInputChange,
+  onApply,
+  onRemove,
+  locked = false,
+}: PromoCodeInputProps) {
+  return (
+    <div className={styles.promoRow}>
+      <label htmlFor="booking-promo-code" className={styles.promoLabel}>
+        {t('booking.optionalPromoCode') || 'Promo / voucher / gift card'}
+      </label>
+      <div className={styles.promoFieldRow}>
+        <div className={styles.inputWrap}>
+          <input
+            type="text"
+            name="promoCode"
+            id="booking-promo-code"
+            value={promoCodeInput}
+            onChange={(e) => onInputChange(e.target.value.toUpperCase())}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                onApply();
+              }
+            }}
+            placeholder={t('booking.promoCodePlaceholder')}
+            autoComplete="off"
+            readOnly={locked || !!appliedPromoCode}
+            disabled={locked}
+            className={styles.input}
+          />
+          {appliedPromoCode ? (
+            <>
+              <span className={styles.appliedBadge} aria-label={t('booking.promoApplied', { code: appliedPromoCode })}>
+                <Check className="w-3.5 h-3.5" strokeWidth={3} />
+              </span>
+              {!locked && (
+                <button
+                  type="button"
+                  onClick={onRemove}
+                  className={styles.removeBtn}
+                  aria-label={t('booking.removePromo')}
+                >
+                  <X className="w-4 h-4" strokeWidth={2.5} />
+                </button>
+              )}
+            </>
+          ) : promoCodeValidating ? (
+            <span className={styles.loading} aria-hidden />
+          ) : promoCodeError ? (
+            <span className={styles.errorIcon} aria-label={promoCodeError}>
+              <X className="w-3 h-3" strokeWidth={3} />
+            </span>
+          ) : null}
+        </div>
+        {promoDiscountAmount > 0 && (
+          <span className={styles.promoDiscount}>
+            -{formatCurrencyAmount(promoDiscountAmount, currency, locale as 'en' | 'fr')}
+          </span>
+        )}
+        {promoCodeError && (
+          <span className={styles.promoErrorInline}>{promoCodeError}</span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,173 @@
+/**
+ * Return time selector - list of return options with stay summary
+ */
+
+.label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--booking-stone-700, #44403c);
+  margin-bottom: 1rem;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.btn {
+  width: 100%;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 2px solid;
+  transition: all 0.2s;
+  text-align: left;
+  position: relative;
+}
+
+.btnSelected {
+  border-color: var(--booking-emerald-600, #059669);
+  background: var(--booking-emerald-600, #059669);
+  color: #fff;
+}
+
+.btnSelected .time,
+.btnSelected .location {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.btnSelected .staySummary {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.btnSelected .price {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.btnAvailable {
+  border-color: var(--booking-stone-200, #e7e5e4);
+  background: var(--light-orange-background-dark, #f7e4dc);
+}
+
+.btnAvailable:hover {
+  border-color: #6ee7b7;
+  background: var(--light-orange-background, #fff1eb);
+}
+
+.btnDisabled {
+  border-color: var(--booking-stone-200, #e7e5e4);
+  background: var(--booking-stone-100, #f5f5f4);
+  color: var(--booking-stone-400, #a8a29e);
+  cursor: not-allowed;
+}
+
+.btnSoldOutAdmin {
+  border-color: #fca5a5;
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.btnSoldOutAdmin:hover {
+  border-color: #fca5a5;
+  background: #fee2e2;
+}
+
+.btnSoldOutLocked {
+  border-color: #fca5a5;
+  background: #fee2e2;
+  color: #b91c1c;
+  cursor: not-allowed;
+}
+
+.btnSoldOutLocked:hover {
+  border-color: #fca5a5;
+  background: #fee2e2;
+}
+
+.badge {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.25rem;
+  font-family: 'Poppins', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: lowercase;
+  color: #fff;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  background-color: #ff4d00;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.details {
+  flex: 1;
+}
+
+.time {
+  font-weight: 500;
+  color: var(--booking-stone-900, #1c1917);
+}
+
+.location {
+  font-size: 0.75rem;
+  color: var(--booking-stone-600, #57534e);
+  margin-top: 0.125rem;
+}
+
+.capacity {
+  font-size: 0.75rem;
+  color: var(--booking-stone-500, #78716c);
+  margin-top: 0.125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.btnSelected .capacityDefault {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.capacityProjected {
+  font-size: 0.7rem;
+  line-height: 1.2;
+  margin-top: 0.25rem;
+  font-weight: 600;
+  color: #b91c1c;
+  font-variant-numeric: tabular-nums;
+}
+
+.staySummary {
+  font-size: 0.75rem;
+  color: var(--booking-stone-500, #78716c);
+  margin-top: 0.25rem;
+  font-weight: 600;
+}
+
+.soldOut {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-top: 0.25rem;
+  color: #b91c1c;
+}
+
+.price {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-left: 1rem;
+}
+
+.priceIncluded {
+  color: var(--booking-stone-600, #57534e);
+}
+
+.pricePositive {
+  color: var(--booking-emerald-600, #059669);
+}
+
+.priceNegative {
+  color: #b91c1c;
+}

package/src/components/booking/ReturnTimeSelector.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { parseISO } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import { formatCurrencyAmount } from '@/lib/currency';
+import type { ReturnOption } from '@/lib/booking-api';
+import type { Currency } from './CurrencySwitcher';
+import styles from './ReturnTimeSelector.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+interface ReturnTimeSelectorProps {
+  returnOptions: ReturnOption[];
+  selectedReturnOption: ReturnOption | null;
+  selectedTicketCount: number;
+  companyTimezone: string;
+  currency: Currency;
+  locale: string;
+  isAdmin: boolean;
+  t: TranslationFn;
+  onReturnSelect: (option: ReturnOption) => void;
+  getStaySummary: (returnDateTime: Date) => string | null;
+}
+
+export function ReturnTimeSelector({
+  returnOptions,
+  selectedReturnOption,
+  selectedTicketCount,
+  companyTimezone,
+  currency,
+  locale,
+  isAdmin,
+  t,
+  onReturnSelect,
+  getStaySummary,
+}: ReturnTimeSelectorProps) {
+  const sortedReturnOptions = [...returnOptions].sort((a, b) => {
+    const timeA = parseISO(a.dateTime).getTime();
+    const timeB = parseISO(b.dateTime).getTime();
+    return timeA - timeB;
+  });
+
+  return (
+    <div>
+      <label className={styles.label}>
+        {t('booking.selectReturnTime') || 'Select Return Time'}
+      </label>
+
+      <div className={styles.list}>
+        {sortedReturnOptions.map((returnOption, index) => {
+          const returnDateTime = parseISO(returnOption.dateTime);
+          const displayTime = formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a');
+          const isSelected = selectedReturnOption?.returnAvailabilityId === returnOption.returnAvailabilityId;
+          const isSoldOut = returnOption.vacancies === 0;
+          const returnVacancies = returnOption.vacancies;
+          const returnTotalCap = returnOption.totalCapacity ?? 0;
+          const returnBooked =
+            returnOption.bookedCapacity ?? (returnTotalCap - returnVacancies);
+          const projectedSeats = returnBooked + selectedTicketCount;
+          const isInsufficientForParty =
+            selectedTicketCount > 0 && (returnOption.vacancies ?? 0) < selectedTicketCount;
+          const canSelectReturn = isAdmin || (!isSoldOut && !isInsufficientForParty);
+          const priceAdjustmentPerPerson = returnOption.priceAdjustmentByCurrency?.[currency] ?? 0;
+          const returnOptionsCount = returnOptions.length;
+          const isMostPopular = returnOptionsCount > 1 && index === 0;
+          const staySummary = getStaySummary(returnDateTime);
+          const showAdminProjectedLoad =
+            isSelected && isAdmin && returnTotalCap > 0 && selectedTicketCount > returnVacancies;
+          const btnClass = (() => {
+            if (isSelected) return styles.btnSelected;
+            if (!isAdmin) {
+              return (isSoldOut || isInsufficientForParty) ? styles.btnSoldOutLocked : styles.btnAvailable;
+            }
+            if (isSoldOut && returnVacancies === 0) return styles.btnSoldOutAdmin;
+            return styles.btnAvailable;
+          })();
+          const priceClass = priceAdjustmentPerPerson === 0
+            ? styles.priceIncluded
+            : priceAdjustmentPerPerson > 0
+            ? styles.pricePositive
+            : styles.priceNegative;
+
+          return (
+            <button
+              key={returnOption.returnAvailabilityId}
+              onClick={() => canSelectReturn && onReturnSelect(returnOption)}
+              disabled={!canSelectReturn}
+              className={`${styles.btn} ${btnClass} ${isSelected ? 'booking-return-selected' : ''}`}
+            >
+              {isMostPopular && (
+                <div className={styles.badge}>
+                  {t('booking.mostPopular')}
+                </div>
+              )}
+              <div className={styles.content}>
+                <div className={styles.details}>
+                  <div className={styles.time}>{displayTime}</div>
+                  <div className={styles.location}>from {returnOption.returnLocation}</div>
+                  {isAdmin && returnTotalCap > 0 && (showAdminProjectedLoad ? (
+                    <div className={styles.capacityProjected} aria-live="polite">
+                      <div>{t('booking.adminBookingLoadLine1', { projected: projectedSeats })}</div>
+                      <div>{t('booking.adminBookingLoadLine2', { total: returnTotalCap })}</div>
+                    </div>
+                  ) : (
+                    <div
+                      className={
+                        isSelected
+                          ? `${styles.capacity} ${styles.capacityDefault}`
+                          : styles.capacity
+                      }
+                    >
+                      {t('calendar.spotsAvailable', { count: returnVacancies })}
+                    </div>
+                  ))}
+                  {staySummary && (
+                    <div className={styles.staySummary}>
+                      {staySummary}
+                    </div>
+                  )}
+                  {isSoldOut && (
+                    <div className={styles.soldOut}>
+                      {t('booking.soldOut')}
+                    </div>
+                  )}
+                  {isInsufficientForParty && !isAdmin && (
+                    <div className={styles.soldOut}>
+                      {`Only ${returnOption.vacancies} spot${returnOption.vacancies === 1 ? '' : 's'} left, decrease your ticket count below to select this time`}
+                    </div>
+                  )}
+                </div>
+                <div className={`${styles.price} ${priceClass}`}>
+                  {priceAdjustmentPerPerson === 0
+                    ? 'Included'
+                    : priceAdjustmentPerPerson > 0
+                    ? `+${formatCurrencyAmount(priceAdjustmentPerPerson, currency, locale as 'en' | 'fr')} per person`
+                    : `${formatCurrencyAmount(priceAdjustmentPerPerson, currency, locale as 'en' | 'fr')} per person`}
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -1,14 +1,15 @@
 'use client';
 
 import { useState } from 'react';
+import { TermsContent } from '@/components/terms/TermsContent';
 
 export interface TermsAcceptanceProps {
   checked: boolean;
   onChange: (checked: boolean) => void;
   /** Translation function for labels */
   t: (key: string) => string;
-  /** Optional custom terms content (HTML or plain text). If not provided, uses t('terms.content'). */
-  termsContent?: string;
+  /** Optional custom terms content (React node). If not provided, uses full TermsContent from terms-conditions page. */
+  termsContent?: React.ReactNode;
 }
 
 /**
@@ -24,16 +25,16 @@ export function TermsAcceptance({
   termsContent,
 }: TermsAcceptanceProps) {
   const [modalOpen, setModalOpen] = useState(false);
-  const content = termsContent ?? t('terms.content');
+  const content = termsContent ?? <TermsContent className="text-xs [&_h1]:text-base [&_h2]:text-sm [&_h3]:text-xs [&_p]:text-xs" />;
 
   return (
     <>
-      <label className="flex items-start gap-3 cursor-pointer group">
+      <label className="flex items-center gap-3 cursor-pointer group">
         <input
           type="checkbox"
           checked={checked}
           onChange={(e) => onChange(e.target.checked)}
-          className="mt-1 rounded border-stone-300 text-emerald-600 focus:ring-emerald-500"
+          className="shrink-0 rounded border-stone-300 text-emerald-600 focus:ring-emerald-500"
           aria-describedby="terms-view-link"
         />
         <span className="text-sm text-stone-700">
@@ -80,14 +81,14 @@ export function TermsAcceptance({
                 </svg>
               </button>
             </div>
-            <div className="flex-1 overflow-y-auto px-5 py-4 text-sm text-stone-600 whitespace-pre-wrap">
+            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4">
               {content}
             </div>
             <div className="px-5 py-4 border-t border-stone-200 shrink-0 flex gap-3 justify-end">
               <button
                 type="button"
                 onClick={() => setModalOpen(false)}
-                className="px-4 py-2 text-sm font-medium text-stone-700 bg-stone-100 rounded-lg hover:bg-stone-200"
+                className="px-4 py-3 text-sm font-medium text-stone-700 bg-stone-100 rounded-lg hover:bg-stone-200"
               >
                 {t('common.close')}
               </button>
@@ -97,7 +98,7 @@ export function TermsAcceptance({
                   onChange(true);
                   setModalOpen(false);
                 }}
-                className="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700"
+                className="px-4 py-3 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700"
               >
                 {t('terms.acceptAndClose')}
               </button>