@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

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

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

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