@ticketboothapp/booking 0.1.23 → 1.2.24

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

@@ -1,244 +0,0 @@
-/**
- * Checkout form - contact info, pickup location, terms, submit
- */
-
-.section {
-  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
-  padding-top: 0.5rem;
-  margin-top: -1rem;
-}
-
-.summaryWrapper {
-  margin-bottom: 1rem;
-}
-
-.contactSection {
-  margin-top: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.contactGrid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-}
-
-@media (min-width: 640px) {
-  .contactGrid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--booking-stone-700, #44403c);
-  margin-bottom: 0.5rem;
-}
-
-.required {
-  color: #b91c1c;
-}
-
-.input {
-  width: 100%;
-  padding: 0.875rem 1.25rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--booking-stone-300, #d6d3d1);
-  font-size: 1rem;
-  color: var(--booking-stone-900, #1c1917);
-}
-
-.input:focus {
-  outline: none;
-  border-color: var(--booking-stone-500, #78716c);
-}
-
-.inputError {
-  font-size: 0.75rem;
-  color: #b91c1c;
-  margin-top: 0.375rem;
-}
-
-.contactStaticValue {
-  margin: 0;
-  font-size: 1rem;
-  line-height: 1.4;
-  color: var(--booking-stone-900, #1c1917);
-  font-weight: 500;
-}
-
-.pickupSection {
-  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
-  padding-top: 1.5rem;
-  margin-top: 1.5rem;
-}
-
-.pickupHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.pickupLabel {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--booking-stone-700, #44403c);
-  margin-bottom: 0.25rem;
-}
-
-.pickupName {
-  font-size: 0.875rem;
-  color: var(--booking-stone-900, #1c1917);
-}
-
-.pickupAddress {
-  font-size: 0.75rem;
-  color: var(--booking-stone-500, #78716c);
-}
-
-.pickupNotes {
-  font-size: 0.75rem;
-  color: #b45309;
-  background: #fffbeb;
-  border: 1px solid #fde68a;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.changeBtn {
-  font-size: 0.875rem;
-  color: var(--booking-emerald-600, #059669);
-  text-decoration: underline;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.changeBtn:hover {
-  color: var(--booking-emerald-700, #047857);
-}
-
-.errorBox {
-  padding: 1rem;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 0.5rem;
-  color: #b91c1c;
-  margin-top: 1rem;
-}
-
-.adminSection {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: rgba(254, 243, 199, 0.5);
-  border: 1px solid #fde68a;
-  border-radius: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.adminTitle {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--booking-stone-700, #44403c);
-}
-
-.adminCheckbox {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.adminCheckbox input {
-  margin-top: 0.25rem;
-  height: 1rem;
-  width: 1rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--booking-stone-300, #d6d3d1);
-}
-
-.adminCheckbox span {
-  font-size: 0.875rem;
-  color: var(--booking-stone-600, #57534e);
-}
-
-.termsSection {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: var(--booking-stone-50, #fafaf9);
-  border-radius: 0.5rem;
-  border: 1px solid var(--booking-stone-200, #e7e5e4);
-}
-
-.attributionConfirmSection {
-  margin-top: 0.75rem;
-  padding: 0.85rem 0.95rem;
-  border: 1px solid #bfdbfe;
-  background: #eff6ff;
-  border-radius: 0.5rem;
-}
-
-.attributionSummaryText {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.4;
-  color: #1e3a8a;
-}
-
-.attributionConfirmLabel {
-  margin-top: 0.55rem;
-  display: flex;
-  gap: 0.5rem;
-  align-items: flex-start;
-  cursor: pointer;
-}
-
-.attributionConfirmLabel input {
-  margin-top: 0.2rem;
-}
-
-.attributionConfirmLabel span {
-  font-size: 0.8125rem;
-  line-height: 1.35;
-  color: #1e40af;
-  font-weight: 500;
-}
-
-.submitBtnWrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-}
-
-/* Higher specificity to override .booking-flow-preflight button reset */
-.section .submitBtn {
-  padding: 1rem 1.5rem;
-  min-height: 3.25rem;
-  background: var(--booking-emerald-600, #059669);
-  color: #fff;
-  font-weight: 600;
-  border-radius: 0.5rem;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.section .submitBtn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.secureNote {
-  text-align: center;
-  font-size: 0.875rem;
-  color: var(--booking-stone-500, #78716c);
-  margin-top: 1rem;
-}

package/src/components/booking/CheckoutForm.tsx

@@ -1,364 +0,0 @@
-'use client';
-
-import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
-import { TermsAcceptance } from './TermsAcceptance';
-import { PickupLocationSelector } from './PickupLocationSelector';
-import type { Currency } from './CurrencySwitcher';
-import type { PickupLocation, Destination } from '@/lib/booking-api';
-import styles from './CheckoutForm.module.css';
-import Button, { ButtonHoverColor } from '@/components/button';
-import { AnimatePresence, motion } from 'framer-motion';
-
-type TranslationFn = (key: string, params?: Record<string, string>) => string;
-
-interface CheckoutFormProps {
-  // Price summary
-  priceSummaryLines: PriceSummaryLine[];
-  totalPrice: number;
-  subtotal?: number;
-  taxAmount: number;
-  taxRate?: number;
-  currency: Currency;
-  locale: string;
-  t: TranslationFn;
-  extraBetweenTaxAndTotal: React.ReactNode;
-  /** Overrides PriceSummary final row label (e.g. change booking) */
-  totalSummaryLabel?: string;
-  // Promo (passed as extraBetweenTaxAndTotal content - we'll keep it in parent for now)
-  // Contact info
-  firstName: string;
-  lastName: string;
-  email: string;
-  onFirstNameChange: (value: string) => void;
-  onLastNameChange: (value: string) => void;
-  onEmailChange: (value: string) => void;
-  readOnlyContactFields?: boolean;
-  // Pickup location
-  pickupLocations?: PickupLocation[];
-  destinations?: Destination[];
-  pickupLocationId: string | null;
-  pickupLocationSkipped: boolean;
-  selectedPickupLocation: PickupLocation | null | undefined;
-  highlightedPickupLocationIds?: string[];
-  onLocationSelect: (locationId: string | null, customLocation?: unknown) => void;
-  onSkip: () => void;
-  onChangePickup: () => void;
-  // Terms
-  termsAccepted: boolean;
-  onTermsChange: (checked: boolean) => void;
-  // Admin
-  isAdmin: boolean;
-  skipConfirmationCommunications: boolean;
-  disableAutoCommunications: boolean;
-  onSkipConfirmationChange: (checked: boolean) => void;
-  onDisableCommunicationsChange: (checked: boolean) => void;
-  // Error & submit
-  error: string;
-  loading: boolean;
-  totalQuantity: number;
-  onCheckout: () => void;
-  submitLabel?: string;
-  hideSubmitButton?: boolean;
-  /** Extra disabled state (e.g. change-booking quote still loading) without showing reservation spinner */
-  submitDisabled?: boolean;
-  attributionSummary?: string;
-  attributionConfirmLabel?: string;
-  attributionConfirmed?: boolean;
-  onAttributionConfirmedChange?: (checked: boolean) => void;
-}
-
-export function CheckoutForm({
-  priceSummaryLines,
-  totalPrice,
-  subtotal,
-  taxAmount,
-  taxRate,
-  currency,
-  locale,
-  t,
-  extraBetweenTaxAndTotal,
-  totalSummaryLabel,
-  firstName,
-  lastName,
-  email,
-  onFirstNameChange,
-  onLastNameChange,
-  onEmailChange,
-  readOnlyContactFields = false,
-  pickupLocations,
-  destinations = [],
-  pickupLocationId,
-  pickupLocationSkipped,
-  selectedPickupLocation,
-  highlightedPickupLocationIds,
-  onLocationSelect,
-  onSkip,
-  onChangePickup,
-  termsAccepted,
-  onTermsChange,
-  isAdmin,
-  skipConfirmationCommunications,
-  disableAutoCommunications,
-  onSkipConfirmationChange,
-  onDisableCommunicationsChange,
-  error,
-  loading,
-  totalQuantity,
-  onCheckout,
-  submitLabel,
-  hideSubmitButton = false,
-  submitDisabled = false,
-  attributionSummary,
-  attributionConfirmLabel,
-  attributionConfirmed = false,
-  onAttributionConfirmedChange,
-}: CheckoutFormProps) {
-  return (
-    <div className={styles.section}>
-      <div className={styles.summaryWrapper}>
-        <PriceSummary
-          lines={priceSummaryLines}
-          total={totalPrice}
-          currency={currency}
-          locale={locale as 'en' | 'fr'}
-          subtotal={subtotal}
-          taxAmount={taxAmount}
-          taxRate={taxRate}
-          size="sm"
-          t={t}
-          extraBetweenTaxAndTotal={extraBetweenTaxAndTotal}
-          totalLabel={totalSummaryLabel}
-        />
-      </div>
-
-      {/* Contact info */}
-      <div className={styles.contactSection}>
-        {readOnlyContactFields ? (
-          <>
-            <div className={styles.contactGrid}>
-              <div>
-                <p className={styles.label}>
-                  {t('booking.firstName') || 'First Name'}
-                </p>
-                <p className={styles.contactStaticValue}>{firstName || '—'}</p>
-              </div>
-              <div>
-                <p className={styles.label}>
-                  {t('booking.lastName') || 'Last Name'}
-                </p>
-                <p className={styles.contactStaticValue}>{lastName || '—'}</p>
-              </div>
-            </div>
-            <div>
-              <p className={styles.label}>{t('booking.emailForConfirmation')}</p>
-              <p className={styles.contactStaticValue}>{email || '—'}</p>
-            </div>
-          </>
-        ) : (
-          <>
-            <div className={styles.contactGrid}>
-              <div>
-                <label className={styles.label} htmlFor="booking-firstName">
-                  {t('booking.firstName') || 'First Name'} <span className={styles.required}>*</span>
-                </label>
-                <input
-                  type="text"
-                  name="firstName"
-                  id="booking-firstName"
-                  value={firstName}
-                  onChange={(e) => onFirstNameChange(e.target.value)}
-                  placeholder={t('booking.firstNamePlaceholder') || 'Jane'}
-                  autoComplete="given-name"
-                  required
-                  className={styles.input}
-                />
-              </div>
-              <div>
-                <label className={styles.label} htmlFor="booking-lastName">
-                  {t('booking.lastName') || 'Last Name'} <span className={styles.required}>*</span>
-                </label>
-                <input
-                  type="text"
-                  name="lastName"
-                  id="booking-lastName"
-                  value={lastName}
-                  onChange={(e) => onLastNameChange(e.target.value)}
-                  placeholder={t('booking.lastNamePlaceholder') || 'Smith'}
-                  autoComplete="family-name"
-                  required
-                  className={styles.input}
-                />
-              </div>
-            </div>
-            <div>
-              <label className={styles.label} htmlFor="booking-email">
-                {t('booking.emailForConfirmation')} <span className={styles.required}>*</span>
-              </label>
-              <input
-                type="email"
-                name="email"
-                id="booking-email"
-                value={email}
-                onChange={(e) => onEmailChange(e.target.value)}
-                placeholder={t('common.emailPlaceholder')}
-                autoComplete="email"
-                required
-                className={styles.input}
-              />
-              {email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && (
-                <p className={styles.inputError}>{t('booking.invalidEmail') || 'Please enter a valid email address'}</p>
-              )}
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Pickup location */}
-      {pickupLocations && pickupLocations.length > 0 && (
-        <div id="pickup-location-section" className={styles.pickupSection}>
-          <AnimatePresence mode="wait" initial={false}>
-            {pickupLocationId || pickupLocationSkipped ? (
-              <motion.div
-                key="collapsed"
-                initial={{ opacity: 0, y: -8 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -8 }}
-                transition={{ duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] }}
-                className={styles.pickupCollapsedWrapper}
-              >
-                <div className={styles.pickupHeader}>
-                  <div>
-                    <label className={styles.pickupLabel}>
-                      {t('pickup.pickupLocation')}
-                    </label>
-                    {pickupLocationSkipped ? (
-                      <p className={styles.pickupName}>
-                        {t('booking.pickupLocationUnknown')}
-                      </p>
-                    ) : (
-                      <>
-                        <p className={styles.pickupName}>
-                          {selectedPickupLocation?.name}
-                        </p>
-                        <p className={styles.pickupAddress}>
-                          {selectedPickupLocation?.address}
-                        </p>
-                        {selectedPickupLocation?.notes && (
-                          <p className={styles.pickupNotes}>
-                            {selectedPickupLocation.notes}
-                          </p>
-                        )}
-                      </>
-                    )}
-                  </div>
-                  <button
-                    onClick={onChangePickup}
-                    className={styles.changeBtn}
-                  >
-                    {t('common.change')}
-                  </button>
-                </div>
-              </motion.div>
-            ) : (
-              <motion.div
-                key="expanded"
-                initial={{ opacity: 0, y: -8 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -8 }}
-                transition={{ duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] }}
-                className={styles.pickupExpandedWrapper}
-              >
-                <PickupLocationSelector
-                  pickupLocations={pickupLocations}
-                  selectedLocationId={pickupLocationId}
-                  isSkipped={pickupLocationSkipped}
-                  destinations={destinations}
-                  highlightedPickupLocationIds={highlightedPickupLocationIds}
-                  onLocationSelect={onLocationSelect}
-                  onSkip={onSkip}
-                />
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      )}
-
-      {/* Admin: communication options */}
-      {isAdmin && (
-        <div className={styles.adminSection}>
-          <p className={styles.adminTitle}>Communications (admin)</p>
-          <label className={styles.adminCheckbox}>
-            <input
-              type="checkbox"
-              checked={skipConfirmationCommunications}
-              onChange={(e) => onSkipConfirmationChange(e.target.checked)}
-            />
-            <span>Don&apos;t send confirmation email/SMS/WhatsApp for this booking (you can send manually later). Cancellation and reminder emails still send.</span>
-          </label>
-          <label className={styles.adminCheckbox}>
-            <input
-              type="checkbox"
-              checked={disableAutoCommunications}
-              onChange={(e) => onDisableCommunicationsChange(e.target.checked)}
-            />
-            <span>Disable all auto communications for this booking (no confirmation, cancellation, or reminders). Can be changed later on the booking.</span>
-          </label>
-        </div>
-      )}
-
-      {/* Terms & Conditions */}
-      <div className={styles.termsSection}>
-        <TermsAcceptance
-          checked={termsAccepted}
-          onChange={onTermsChange}
-          t={t}
-        />
-      </div>
-
-      {attributionSummary ? (
-        <div className={styles.attributionConfirmSection}>
-          <p className={styles.attributionSummaryText}>{attributionSummary}</p>
-          {attributionConfirmLabel ? (
-            <label className={styles.attributionConfirmLabel}>
-              <input
-                type="checkbox"
-                checked={attributionConfirmed}
-                onChange={(e) => onAttributionConfirmedChange?.(e.target.checked)}
-              />
-              <span>{attributionConfirmLabel}</span>
-            </label>
-          ) : null}
-        </div>
-      ) : null}
-
-      {/* Error Message */}
-      {error && (
-        <div className={styles.errorBox}>
-          {error}
-        </div>
-      )}
-
-      {!hideSubmitButton && (
-        <div className={styles.submitBtnWrapper}>
-          <Button
-            onClick={onCheckout}
-            isLarge={true}
-            hoverColor={ButtonHoverColor.Turquoise}
-            disabled={
-              loading ||
-              submitDisabled ||
-              !termsAccepted ||
-              Boolean(attributionConfirmLabel && !attributionConfirmed)
-            }
-            className={styles.submitBtn}
-          >
-            {loading ? t('booking.creatingReservation') : (submitLabel || t('booking.continueToPayment'))}
-          </Button>
-        </div>
-      )}
-      <p className={styles.secureNote}>
-        {t('booking.securePayment')}
-      </p>
-    </div>
-  );
-}