@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

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/booking/TermsAcceptance.tsx

@@ -0,0 +1,111 @@
+'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 (React node). If not provided, uses full TermsContent from terms-conditions page. */
+  termsContent?: React.ReactNode;
+}
+
+/**
+ * Checkbox to accept terms & conditions, with a "View terms" link that opens
+ * a small modal showing the full text (in-page, not a separate page).
+ * Least intrusive: user can proceed by checking the box; they can open the
+ * modal to read the full terms if they want.
+ */
+export function TermsAcceptance({
+  checked,
+  onChange,
+  t,
+  termsContent,
+}: TermsAcceptanceProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const content = termsContent ?? <TermsContent className="text-xs [&_h1]:text-base [&_h2]:text-sm [&_h3]:text-xs [&_p]:text-xs" />;
+
+  return (
+    <>
+      <label className="flex items-center gap-3 cursor-pointer group">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => onChange(e.target.checked)}
+          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">
+          {t('terms.acceptPrefix')}{' '}
+          <button
+            type="button"
+            id="terms-view-link"
+            onClick={(e) => {
+              e.preventDefault();
+              setModalOpen(true);
+            }}
+            className="text-emerald-600 hover:text-emerald-700 underline focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-1 rounded"
+          >
+            {t('terms.viewTerms')}
+          </button>
+        </span>
+      </label>
+
+      {/* Modal: small overlay with scrollable terms */}
+      {modalOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="terms-modal-title"
+          onClick={() => setModalOpen(false)}
+        >
+          <div
+            className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[80vh] flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-5 py-4 border-b border-stone-200 shrink-0">
+              <h2 id="terms-modal-title" className="text-lg font-semibold text-stone-900">
+                {t('terms.title')}
+              </h2>
+              <button
+                type="button"
+                onClick={() => setModalOpen(false)}
+                className="p-2 rounded-lg text-stone-500 hover:text-stone-700 hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
+                aria-label={t('common.close')}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <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-3 text-sm font-medium text-stone-700 bg-stone-100 rounded-lg hover:bg-stone-200"
+              >
+                {t('common.close')}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  onChange(true);
+                  setModalOpen(false);
+                }}
+                className="px-4 py-3 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700"
+              >
+                {t('terms.acceptAndClose')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}