@ticketboothapp/booking 0.1.22 → 1.2.24

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

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

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

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

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

@@ -1,111 +0,0 @@
-'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>
-      )}
-    </>
-  );
-}