@ticketboothapp/booking 1.2.122 → 1.2.124

package/src/components/booking/PrivateShuttleCheckoutDialogs.tsx

@@ -0,0 +1,106 @@
+import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
+import { CheckoutModal } from './CheckoutModal';
+import type {
+  PrivateShuttleAdminChoiceData,
+  PrivateShuttleCheckoutModalData,
+} from './private-shuttle-payment-choice-runner';
+import type { ChangeBookingSuccessUrlFactory } from './change-booking-payment-modal-builders';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '../../lib/booking/i18n/config';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+export interface PrivateShuttleCheckoutDialogsProps {
+  showAdminPaymentChoice: boolean;
+  adminChoiceData: PrivateShuttleAdminChoiceData | null;
+  checkoutModalData: PrivateShuttleCheckoutModalData | null;
+  showCheckoutModal: boolean;
+  checkoutClientSecret: string;
+  currency: Currency;
+  locale: Locale;
+  loading: boolean;
+  error: string;
+  getSuccessUrl?: ChangeBookingSuccessUrlFactory;
+  t: TranslationFn;
+  onPayNow: () => void;
+  onConfirmWithoutPayment: () => void;
+  onAdminPaymentChoiceCancel: () => void;
+  onCheckoutClose: () => void;
+  onPaymentSubmitStart: () => void;
+  onPaymentSubmitError: () => void;
+}
+
+export function PrivateShuttleCheckoutDialogs({
+  showAdminPaymentChoice,
+  adminChoiceData,
+  checkoutModalData,
+  showCheckoutModal,
+  checkoutClientSecret,
+  currency,
+  locale,
+  loading,
+  error,
+  getSuccessUrl,
+  t,
+  onPayNow,
+  onConfirmWithoutPayment,
+  onAdminPaymentChoiceCancel,
+  onCheckoutClose,
+  onPaymentSubmitStart,
+  onPaymentSubmitError,
+}: PrivateShuttleCheckoutDialogsProps) {
+  return (
+    <>
+      <AdminPaymentChoiceModal
+        open={!!(showAdminPaymentChoice && adminChoiceData)}
+        totalAmount={adminChoiceData?.totalAmount ?? 0}
+        currency={currency}
+        loading={loading}
+        error={error}
+        onPayNow={onPayNow}
+        onConfirmWithoutPayment={onConfirmWithoutPayment}
+        onCancel={onAdminPaymentChoiceCancel}
+      />
+      {checkoutModalData && (
+        <CheckoutModal
+          open={showCheckoutModal}
+          onClose={onCheckoutClose}
+          onPaymentSubmitStart={onPaymentSubmitStart}
+          onPaymentSubmitError={onPaymentSubmitError}
+          clientSecret={checkoutClientSecret}
+          reservationReference={checkoutModalData.reservationReference}
+          reservationExpiration={checkoutModalData.reservationExpiration}
+          customerLastName={checkoutModalData.customerLastName}
+          successUrlOverride={
+            getSuccessUrl
+              ? getSuccessUrl({
+                  reservationRef: checkoutModalData.reservationReference,
+                  lastName: checkoutModalData.customerLastName ?? '',
+                  focusDate: checkoutModalData.bookingDate,
+                })
+              : undefined
+          }
+          ticketLines={checkoutModalData.ticketLines}
+          feeLineItems={checkoutModalData.feeLineItems}
+          returnPriceAdjustment={checkoutModalData.returnPriceAdjustment}
+          cancellationPolicyFee={checkoutModalData.cancellationPolicyFee ?? 0}
+          cancellationPolicyLabel={checkoutModalData.cancellationPolicyLabel}
+          subtotal={checkoutModalData.subtotal}
+          tax={checkoutModalData.tax}
+          total={checkoutModalData.total}
+          promoDiscountAmount={checkoutModalData.promoDiscountAmount ?? 0}
+          discountLabel={checkoutModalData.discountLabel}
+          summaryOverride={checkoutModalData.summaryOverride}
+          totalQuantity={checkoutModalData.totalQuantity}
+          isTaxIncludedInPrice={checkoutModalData.isTaxIncludedInPrice}
+          taxRate={checkoutModalData.taxRate}
+          currency={currency}
+          locale={locale}
+          t={t}
+          isDepositPayment={checkoutModalData.isDepositPayment}
+          balanceChargeDaysBefore={checkoutModalData.balanceChargeDaysBefore}
+        />
+      )}
+    </>
+  );
+}

package/src/components/booking/PrivateShuttleCheckoutSection.tsx

@@ -0,0 +1,333 @@
+'use client';
+
+import { formatCurrencyAmount } from '../../lib/currency';
+import type { PricingConfig } from '../../lib/booking-api';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '../../lib/booking/i18n/config';
+import { CancellationPolicySelector } from './CancellationPolicySelector';
+import { CheckoutOptionalPhoneFields } from './CheckoutOptionalPhoneFields';
+import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+import { PromoCodeInput } from './PromoCodeInput';
+import { TermsAcceptance } from './TermsAcceptance';
+import type { PrivateShuttleDepositInfo } from './private-shuttle-checkout-builders';
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+interface PrivateShuttleCheckoutSectionProps {
+  currency: Currency;
+  locale: Locale;
+  t: TranslationFn;
+  isAdmin: boolean;
+  isProviderChangeMode: boolean;
+  priceSummaryLines: PriceSummaryLine[];
+  depositInfo: PrivateShuttleDepositInfo | null;
+  balanceChargeDaysBefore?: number | null;
+  totalPrice: number;
+  effectiveTaxAmount: number;
+  taxRate: number;
+  effectivePromoDiscountAmount: number;
+  activePromoCode: string | null;
+  promoCodeInput: string;
+  appliedPromoCode: string | null;
+  promoCodeError: string;
+  promoCodeValidating: boolean;
+  promoDiscountAmount: number;
+  onPromoInputChange: (value: string) => void;
+  onPromoApply: () => void;
+  onPromoRemove: () => void;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+  onFirstNameChange: (value: string) => void;
+  onLastNameChange: (value: string) => void;
+  onEmailChange: (value: string) => void;
+  onPhoneNumberChange: (value: string) => void;
+  cancellationPolicies?: PricingConfig['cancellationPolicies'];
+  cancellationPolicyId: string | null;
+  onCancellationPolicySelect: (policyId: string) => void;
+  skipConfirmationCommunications: boolean;
+  disableAutoCommunications: boolean;
+  onSkipConfirmationChange: (value: boolean) => void;
+  onDisableCommunicationsChange: (value: boolean) => void;
+  termsAccepted: boolean;
+  onTermsAcceptedChange: (checked: boolean) => void;
+  error: string;
+  partnerAttributionSummary?: string;
+  partnerAttributionConfirmLabel?: string;
+  partnerAttributionConfirmed: boolean;
+  onPartnerAttributionConfirmedChange: (checked: boolean) => void;
+  showCheckoutModal: boolean;
+  showAdminPaymentChoice: boolean;
+  loading: boolean;
+  onCheckout: () => void;
+  partnerDeferredInvoiceSubmitLabel?: string;
+}
+
+export function PrivateShuttleCheckoutSection({
+  currency,
+  locale,
+  t,
+  isAdmin,
+  isProviderChangeMode,
+  priceSummaryLines,
+  depositInfo,
+  balanceChargeDaysBefore,
+  totalPrice,
+  effectiveTaxAmount,
+  taxRate,
+  effectivePromoDiscountAmount,
+  activePromoCode,
+  promoCodeInput,
+  appliedPromoCode,
+  promoCodeError,
+  promoCodeValidating,
+  promoDiscountAmount,
+  onPromoInputChange,
+  onPromoApply,
+  onPromoRemove,
+  firstName,
+  lastName,
+  email,
+  phoneNumber,
+  onFirstNameChange,
+  onLastNameChange,
+  onEmailChange,
+  onPhoneNumberChange,
+  cancellationPolicies,
+  cancellationPolicyId,
+  onCancellationPolicySelect,
+  skipConfirmationCommunications,
+  disableAutoCommunications,
+  onSkipConfirmationChange,
+  onDisableCommunicationsChange,
+  termsAccepted,
+  onTermsAcceptedChange,
+  error,
+  partnerAttributionSummary,
+  partnerAttributionConfirmLabel,
+  partnerAttributionConfirmed,
+  onPartnerAttributionConfirmedChange,
+  showCheckoutModal,
+  showAdminPaymentChoice,
+  loading,
+  onCheckout,
+  partnerDeferredInvoiceSubmitLabel,
+}: PrivateShuttleCheckoutSectionProps) {
+  const amountDueToday = depositInfo ? depositInfo.depositAmount : totalPrice;
+  const formattedAmountDueToday = formatCurrencyAmount(amountDueToday, currency, locale);
+  const hasCancellationPolicies = Boolean(cancellationPolicies?.length);
+
+  return (
+    <>
+      <div className={`${styles.section} mt-6`}>
+        <PriceSummary
+          lines={priceSummaryLines}
+          total={amountDueToday}
+          currency={currency}
+          locale={locale}
+          taxAmount={effectiveTaxAmount}
+          taxRate={taxRate}
+          discountAmount={effectivePromoDiscountAmount}
+          discountLabel={activePromoCode ? `Promo: ${activePromoCode}` : undefined}
+          extraBetweenTaxAndTotal={
+            isAdmin ? (
+              <PromoCodeInput
+                promoCodeInput={promoCodeInput}
+                appliedPromoCode={appliedPromoCode}
+                promoCodeError={promoCodeError}
+                promoCodeValidating={promoCodeValidating}
+                promoDiscountAmount={promoDiscountAmount}
+                currency={currency}
+                locale={locale}
+                t={t}
+                onInputChange={onPromoInputChange}
+                onApply={onPromoApply}
+                onRemove={onPromoRemove}
+              />
+            ) : null
+          }
+          size="sm"
+          t={t}
+          depositMode={
+            depositInfo
+              ? {
+                  totalLabel: t('booking.deposit') || 'Deposit',
+                  balanceAmount: depositInfo.balanceAmount,
+                  fullTotalAmount: depositInfo.totalPrice,
+                }
+              : undefined
+          }
+          hideSubtotal={!!depositInfo}
+        />
+        {depositInfo && (
+          <div className="deposit-notice mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800">
+            <p className="text-xs font-medium">
+              {(t('booking.depositPaymentNotice') !== 'booking.depositPaymentNotice'
+                ? t('booking.depositPaymentNotice')
+                : null) ?? "You're paying the deposit today."}
+            </p>
+            <p className="mt-1 text-xs text-amber-700/90">
+              {balanceChargeDaysBefore && balanceChargeDaysBefore > 0
+                ? (t('booking.balanceChargeNotice', { days: balanceChargeDaysBefore }) !== 'booking.balanceChargeNotice'
+                    ? t('booking.balanceChargeNotice', { days: balanceChargeDaysBefore })
+                    : `The remaining balance will be charged ${balanceChargeDaysBefore} days before your booking. You can also pay it earlier from your Manage Booking page.`)
+                : (t('booking.balancePayEarlier') !== 'booking.balancePayEarlier'
+                    ? t('booking.balancePayEarlier')
+                    : 'You can pay the remaining balance anytime from your Manage Booking page.')}
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-stone-200 pt-6 space-y-4">
+        <div className="space-y-4">
+          <div className={styles.contactGrid}>
+            <div>
+              <label className={styles.sectionLabel}>
+                {t('booking.firstName')} <span className={styles.required}>*</span>
+              </label>
+              <input
+                type="text"
+                value={firstName}
+                onChange={(e) => onFirstNameChange(e.target.value)}
+                placeholder={t('booking.firstNamePlaceholder')}
+                className={styles.input}
+              />
+            </div>
+            <div>
+              <label className={styles.sectionLabel}>
+                {t('booking.lastName')} <span className={styles.required}>*</span>
+              </label>
+              <input
+                type="text"
+                value={lastName}
+                onChange={(e) => onLastNameChange(e.target.value)}
+                placeholder={t('booking.lastNamePlaceholder')}
+                className={styles.input}
+              />
+            </div>
+          </div>
+          <div>
+            <label className={styles.sectionLabel}>
+              {t('common.emailForConfirmation')} <span className={styles.required}>*</span>
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => onEmailChange(e.target.value)}
+              placeholder={t('common.emailPlaceholder')}
+              className={styles.input}
+            />
+          </div>
+          <CheckoutOptionalPhoneFields
+            idPrefix="shuttle"
+            labelClassName={styles.sectionLabel}
+            phoneNumber={phoneNumber}
+            onPhoneNumberChange={onPhoneNumberChange}
+            t={t}
+          />
+          {hasCancellationPolicies && (
+            <div>
+              <CancellationPolicySelector
+                policies={[...(cancellationPolicies ?? [])].sort((a, b) => {
+                  const feeA = a.feeByCurrency[currency] ?? 0;
+                  const feeB = b.feeByCurrency[currency] ?? 0;
+                  return feeA - feeB;
+                })}
+                selectedPolicyId={cancellationPolicyId}
+                currency={currency}
+                locale={locale}
+                t={t}
+                onPolicySelect={onCancellationPolicySelect}
+                rowSubtitle={
+                  <>
+                    <b>Your deposit today is 100% refundable</b> - only once we align on an itinerary
+                    that you approve, will your deposit be locked in.
+                  </>
+                }
+              />
+            </div>
+          )}
+          {isAdmin && (
+            <div className="space-y-2 p-4 bg-amber-50/50 rounded-lg">
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={skipConfirmationCommunications}
+                  onChange={(e) => onSkipConfirmationChange(e.target.checked)}
+                />
+                <span className="text-sm">
+                  Don&apos;t send confirmation for this booking
+                </span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={disableAutoCommunications}
+                  onChange={(e) => onDisableCommunicationsChange(e.target.checked)}
+                />
+                <span className="text-sm">Disable all auto communications</span>
+              </label>
+            </div>
+          )}
+          <div className="mt-4 p-4 bg-stone-50 rounded-lg border-2 border-stone-300">
+            <TermsAcceptance
+              checked={termsAccepted}
+              onChange={onTermsAcceptedChange}
+              t={t}
+            />
+          </div>
+        </div>
+        {error && (
+          <div className={styles.errorBox}>
+            {error}
+          </div>
+        )}
+        {partnerAttributionSummary ? (
+          <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+            <p className="m-0 text-sm text-blue-900">{partnerAttributionSummary}</p>
+            {partnerAttributionConfirmLabel ? (
+              <label className="mt-2 flex cursor-pointer items-start gap-2">
+                <input
+                  type="checkbox"
+                  checked={partnerAttributionConfirmed}
+                  onChange={(e) => onPartnerAttributionConfirmedChange(e.target.checked)}
+                />
+                <span className="text-xs font-medium leading-5 text-blue-800">
+                  {partnerAttributionConfirmLabel}
+                </span>
+              </label>
+            ) : null}
+          </div>
+        ) : null}
+        {!showCheckoutModal && !showAdminPaymentChoice ? (
+          <>
+            <button
+              type="button"
+              onClick={onCheckout}
+              disabled={
+                loading ||
+                !termsAccepted ||
+                Boolean(partnerAttributionConfirmLabel && !partnerAttributionConfirmed)
+              }
+              className={styles.submitBtn}
+            >
+              {loading
+                ? isProviderChangeMode
+                  ? 'Processing...'
+                  : (t('booking.creatingReservation') || 'Creating reservation...')
+                : isProviderChangeMode
+                  ? `Change booking (${formattedAmountDueToday})`
+                  : `${partnerDeferredInvoiceSubmitLabel || t('booking.continueToPayment') || 'Continue to Payment'} (${formattedAmountDueToday})`}
+            </button>
+            <p className={styles.secureNote}>
+              {t('booking.securePayment') || 'Secure payment powered by Stripe'}
+            </p>
+          </>
+        ) : null}
+      </div>
+    </>
+  );
+}

package/src/components/booking/PrivateShuttleItinerarySection.tsx

@@ -0,0 +1,95 @@
+import type { Product } from '../../lib/booking-api';
+import { formatCurrencyAmount } from '../../lib/currency';
+import type { Locale } from '../../lib/booking/i18n/config';
+import type { Currency } from './CurrencySwitcher';
+import { ItineraryBuilder } from './ItineraryBuilder';
+import {
+  PRIVATE_SHUTTLE_ADDITIONAL_HOUR_PRICE,
+} from './usePrivateShuttlePriceSummary';
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+type ItineraryBuilderConfig = NonNullable<Product['itineraryBuilder']>;
+
+export interface PrivateShuttleItinerarySectionProps {
+  itineraryBuilder?: ItineraryBuilderConfig;
+  optionBlacklist: string[];
+  selectedDestinationIds: string[];
+  planningNotes: string;
+  isAdmin: boolean;
+  additionalHoursCount: number;
+  additionalHoursAmount: number;
+  currency: Currency;
+  locale: Locale;
+  onDestinationsChange: (destinationIds: string[]) => void;
+  onPlanningNotesChange: (notes: string) => void;
+  onAdditionalHoursChange: (count: number) => void;
+}
+
+export function PrivateShuttleItinerarySection({
+  itineraryBuilder,
+  optionBlacklist,
+  selectedDestinationIds,
+  planningNotes,
+  isAdmin,
+  additionalHoursCount,
+  additionalHoursAmount,
+  currency,
+  locale,
+  onDestinationsChange,
+  onPlanningNotesChange,
+  onAdditionalHoursChange,
+}: PrivateShuttleItinerarySectionProps) {
+  if (!itineraryBuilder) return null;
+
+  return (
+    <div className={`${styles.section} itinerary-builder-section`}>
+      <ItineraryBuilder
+        destinations={itineraryBuilder.destinations}
+        optionBlacklist={optionBlacklist}
+        selectedDestinationIds={selectedDestinationIds}
+        planningNotes={planningNotes}
+        onDestinationsChange={onDestinationsChange}
+        onPlanningNotesChange={onPlanningNotesChange}
+      />
+      {isAdmin && (
+        <div className={styles.adminBox}>
+          <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
+            Add on hours (admin)
+          </label>
+          <p className="text-sm text-stone-600 mb-3">
+            Each additional hour adds{' '}
+            {formatCurrencyAmount(PRIVATE_SHUTTLE_ADDITIONAL_HOUR_PRICE, currency, locale)}{' '}
+            and extends the tour duration.
+          </p>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => onAdditionalHoursChange(Math.max(0, additionalHoursCount - 1))}
+              disabled={additionalHoursCount <= 0}
+              className={styles.qtyBtn}
+            >
+              -
+            </button>
+            <span className="w-8 text-center font-medium tabular-nums">
+              {additionalHoursCount}
+            </span>
+            <button
+              type="button"
+              onClick={() => onAdditionalHoursChange(additionalHoursCount + 1)}
+              className={styles.qtyBtn}
+            >
+              +
+            </button>
+            <span className="text-sm text-stone-600">
+              {additionalHoursCount === 0
+                ? 'No extra hours'
+                : additionalHoursCount === 1
+                  ? `+1 hour - ${formatCurrencyAmount(PRIVATE_SHUTTLE_ADDITIONAL_HOUR_PRICE, currency, locale)}`
+                  : `+${additionalHoursCount} hours - ${formatCurrencyAmount(additionalHoursAmount, currency, locale)}`}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/booking/PrivateShuttleMediaIntro.tsx

@@ -0,0 +1,62 @@
+import { useBookingHost } from '../../runtime';
+import type { Locale } from '../../lib/booking/i18n/config';
+import type { VideoSources } from '../../constants/products';
+import { BookingFlowCollage } from './BookingFlowCollage';
+import { TourDescription } from './TourDescription';
+
+export interface PrivateShuttleMediaIntroProps {
+  productId?: string;
+  productName: string;
+  locale: Locale;
+  showCollage?: boolean;
+  showTourDescription?: boolean;
+}
+
+export function PrivateShuttleMediaIntro({
+  productId,
+  productName,
+  locale,
+  showCollage = true,
+  showTourDescription = true,
+}: PrivateShuttleMediaIntroProps) {
+  const { strings: defaultStrings, catalog } = useBookingHost();
+  const config = productId
+    ? (catalog.getProductByIdOrSlug(productId) as {
+        display?: {
+          collageImageIds?: string[];
+          imageIds?: string[];
+        };
+      } | null)
+    : null;
+  const displayProducts = catalog.getProducts(defaultStrings) as Record<
+    string,
+    { id: string; videoUrl?: VideoSources }
+  >;
+  const displayProduct = Object.values(displayProducts).find((candidate) => candidate.id === productId);
+  const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
+  const hasVideo = !!displayProduct?.videoUrl;
+  const hasImages = collageImageIds.length > 0;
+
+  return (
+    <>
+      {productId && showCollage && (hasVideo || hasImages) && (
+        <div className="booking-collage-wrapper">
+          <BookingFlowCollage
+            video={displayProduct?.videoUrl}
+            videoPosterImageId={config?.display?.imageIds?.[0]}
+            imageIds={
+              hasImages
+                ? collageImageIds
+                : (config?.display?.imageIds?.[0] ? [config.display.imageIds[0]] : [])
+            }
+            altPrefix={productName}
+          />
+        </div>
+      )}
+
+      {showTourDescription && (
+        <TourDescription productSlug={productId} locale={locale} />
+      )}
+    </>
+  );
+}

package/src/components/booking/PrivateShuttleOptionSection.tsx

@@ -0,0 +1,81 @@
+import type { Product } from '../../lib/booking-api';
+import { formatCurrencyAmount } from '../../lib/currency';
+import type { Locale } from '../../lib/booking/i18n/config';
+import type { Currency } from './CurrencySwitcher';
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+type ProductOption = NonNullable<Product['options']>[number];
+
+export interface PrivateShuttleOptionSectionProps {
+  selectedDate: string;
+  options: ProductOption[];
+  selectedOption: string;
+  currency: Currency;
+  locale: Locale;
+  t: TranslationFn;
+  getOptionPrice: (optionId: string) => number;
+  onOptionSelect: (optionId: string) => void;
+}
+
+export function PrivateShuttleOptionSection({
+  selectedDate,
+  options,
+  selectedOption,
+  currency,
+  locale,
+  t,
+  getOptionPrice,
+  onOptionSelect,
+}: PrivateShuttleOptionSectionProps) {
+  if (!selectedDate || options.length === 0) return null;
+
+  return (
+    <div className={styles.section}>
+      <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
+        {t('booking.selectTourOption')}
+      </label>
+      <div className={styles.optionGrid}>
+        {[...options]
+          .sort((a, b) => (b.mostPopular ? 1 : 0) - (a.mostPopular ? 1 : 0))
+          .map((option) => {
+            const isSelected = selectedOption === option.optionId;
+            const baseDurationMinutes = option.privateShuttleConfig?.baseDurationMinutes ?? 0;
+            const hours = baseDurationMinutes / 60;
+            const price = getOptionPrice(option.optionId);
+            const formattedPrice = formatCurrencyAmount(price, currency, locale);
+            const hoursRounded = Math.round(hours);
+            const isMostPopular = options.length > 1 && option.mostPopular;
+            return (
+              <button
+                key={option.optionId}
+                type="button"
+                onClick={() => onOptionSelect(option.optionId)}
+                className={`${styles.btnOption} private-shuttle-btn-option ${
+                  isMostPopular ? styles.btnOptionWithBadge : ''
+                } ${isSelected ? styles.btnOptionSelected : styles.btnOptionDefault}`}
+              >
+                <div className="font-semibold">{option.name}</div>
+                {price > 0 && hours >= 1 && (
+                  <div
+                    className={`mt-1 text-xs ${
+                      isSelected ? 'text-emerald-100' : 'text-stone-500'
+                    }`}
+                  >
+                    {(t('booking.startingAtForHours') ?? 'Starting at {price} per shuttle for {hours}.')
+                      .replace('{price}', formattedPrice)
+                      .replace('{hours}', `${hoursRounded} ${t('booking.hoursUnit') || 'hours'}`)}
+                  </div>
+                )}
+                {isMostPopular && (
+                  <span className={styles.badge}>
+                    {t('booking.mostPopular')}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+      </div>
+    </div>
+  );
+}