@ticketboothapp/booking 1.2.123 → 1.2.125

package/src/components/booking/PrivateShuttlePassengerSection.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import {
+  PRIVATE_SHUTTLE_RESOURCE_CAPACITY,
+} from './usePrivateShuttlePriceSummary';
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+interface PrivateShuttlePassengerSectionProps {
+  passengerCount: number;
+  resourceCount: number;
+  billableResourceCount: number;
+  maxVacancies: number;
+  isSpecialRequestMode: boolean;
+  specialRequestInputValue: string;
+  onPassengerCountChange: (count: number) => void;
+  onPassengerCountOverride: (count: number) => void;
+  onSpecialRequestModeChange: (enabled: boolean) => void;
+  onSpecialRequestInputValueChange: (value: string) => void;
+}
+
+export function PrivateShuttlePassengerSection({
+  passengerCount,
+  resourceCount,
+  billableResourceCount,
+  maxVacancies,
+  isSpecialRequestMode,
+  specialRequestInputValue,
+  onPassengerCountChange,
+  onPassengerCountOverride,
+  onSpecialRequestModeChange,
+  onSpecialRequestInputValueChange,
+}: PrivateShuttlePassengerSectionProps) {
+  const passengerSelectMin = 1;
+  const specialRequestMin = maxVacancies + 1;
+
+  return (
+    <div className={styles.section}>
+      <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
+        Number of Passengers
+      </label>
+      <div className={styles.passengerBox}>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <div className="font-medium text-stone-900">Passengers</div>
+            <div className="text-sm text-stone-600">
+              {resourceCount} {resourceCount === 1 ? 'shuttle' : 'shuttles'} needed
+            </div>
+          </div>
+          {isSpecialRequestMode ? (
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2">
+              <input
+                type="number"
+                min={specialRequestMin}
+                max={100}
+                value={specialRequestInputValue || String(passengerCount)}
+                onChange={(e) => {
+                  const raw = e.target.value;
+                  onSpecialRequestInputValueChange(raw);
+                  const val = parseInt(raw, 10);
+                  if (!Number.isNaN(val) && val >= specialRequestMin && val <= 100) {
+                    onPassengerCountOverride(val);
+                  }
+                }}
+                onBlur={() => {
+                  const val = parseInt(specialRequestInputValue, 10);
+                  const clamped = Math.max(
+                    specialRequestMin,
+                    Math.min(100, Number.isNaN(val) ? specialRequestMin : val)
+                  );
+                  onPassengerCountOverride(clamped);
+                  onSpecialRequestInputValueChange(String(clamped));
+                }}
+                className={`${styles.input} ${styles.passengerInput}`}
+                style={{ minWidth: '4.5rem', textAlign: 'center' }}
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  onSpecialRequestModeChange(false);
+                  onSpecialRequestInputValueChange('');
+                  onPassengerCountOverride(Math.max(1, maxVacancies));
+                }}
+                className="text-sm text-stone-600 underline hover:text-stone-800"
+              >
+                Back to standard ({maxVacancies} max)
+              </button>
+            </div>
+          ) : passengerSelectMin <= maxVacancies ? (
+            <select
+              value={passengerCount}
+              onChange={(e) => onPassengerCountChange(Number(e.target.value))}
+              className={`${styles.input} ${styles.passengerSelect}`}
+              style={{ minWidth: '4.5rem', textAlign: 'center' }}
+            >
+              {Array.from(
+                {
+                  length: Math.max(1, maxVacancies - passengerSelectMin + 1),
+                },
+                (_, i) => i + passengerSelectMin
+              ).map((n) => (
+                <option key={n} value={n}>
+                  {n}
+                </option>
+              ))}
+            </select>
+          ) : null}
+        </div>
+        <div className="text-xs text-stone-500 mt-2">
+          Each shuttle can accommodate up to {PRIVATE_SHUTTLE_RESOURCE_CAPACITY} passengers.
+          {resourceCount > 1 && (
+            <span>
+              {' '}
+              You&apos;ll need {resourceCount} shuttles for {passengerCount}{' '}
+              passengers.
+            </span>
+          )}
+        </div>
+        {maxVacancies > 0 && !isSpecialRequestMode ? (
+          <div className="mt-3 pt-3 border-t border-stone-200 text-right">
+            <button
+              type="button"
+              onClick={() => {
+                const initial = maxVacancies + 1;
+                onSpecialRequestModeChange(true);
+                onPassengerCountOverride(initial);
+                onSpecialRequestInputValueChange(String(initial));
+              }}
+              className={`${styles.specialRequestLink} text-emerald-600 hover:text-emerald-700 underline`}
+            >
+              Special request for more than {maxVacancies} passengers
+            </button>
+          </div>
+        ) : null}
+        {isSpecialRequestMode && passengerCount > maxVacancies ? (
+          <div className="mt-3 pt-3 border-t border-stone-200">
+            <p className="text-sm text-amber-700 bg-amber-50 p-3 rounded-lg">
+              The team will review your request to ensure we can pull{' '}
+              {resourceCount} {resourceCount === 1 ? 'shuttle' : 'shuttles'}{' '}
+              from our fleet. You&apos;ll pay the full amount for {resourceCount}{' '}
+              {resourceCount === 1 ? 'shuttle' : 'shuttles'}; we&apos;ve reserved{' '}
+              {billableResourceCount} at standard capacity and the team will add the rest.
+            </p>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/booking/PrivateShuttlePickupSection.tsx

@@ -0,0 +1,91 @@
+import type { Destination, PickupLocation } from '../../lib/booking-api';
+import { PickupLocationSelector } from './PickupLocationSelector';
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+export interface PrivateShuttlePickupSectionProps {
+  passengerCount: number;
+  pickupLocations?: PickupLocation[];
+  destinations?: Destination[];
+  pickupLocationId: string | null;
+  customPickupAddress: string | null;
+  pickupLocationSkipped: boolean;
+  selectedPickupLocation?: PickupLocation | null;
+  highlightedPickupLocationIds?: string[];
+  t: TranslationFn;
+  onLocationSelect: (locationId: string | null, customAddress: string | null) => void;
+  onSkip: () => void;
+  onReset: () => void;
+}
+
+export function PrivateShuttlePickupSection({
+  passengerCount,
+  pickupLocations,
+  destinations,
+  pickupLocationId,
+  customPickupAddress,
+  pickupLocationSkipped,
+  selectedPickupLocation,
+  highlightedPickupLocationIds,
+  t,
+  onLocationSelect,
+  onSkip,
+  onReset,
+}: PrivateShuttlePickupSectionProps) {
+  if (passengerCount <= 0 || !pickupLocations?.length) return null;
+
+  return (
+    <div id="pickup-location-section" className={styles.section}>
+      {pickupLocationId || customPickupAddress || pickupLocationSkipped ? (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
+                {t('pickup.pickupLocation') || 'Pickup Location'}
+              </label>
+              {pickupLocationSkipped ? (
+                <p className="text-sm text-stone-900">
+                  {t('booking.pickupLocationUnknown')}
+                </p>
+              ) : customPickupAddress ? (
+                <p className="text-sm text-stone-900">{customPickupAddress}</p>
+              ) : (
+                <>
+                  <p className="text-sm text-stone-900">
+                    {selectedPickupLocation?.name}
+                  </p>
+                  <p className="text-xs text-stone-500">
+                    {selectedPickupLocation?.address}
+                  </p>
+                </>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={onReset}
+              className={styles.changeBtn}
+            >
+              {t('common.change') || 'Change'}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <PickupLocationSelector
+          pickupLocations={pickupLocations}
+          selectedLocationId={pickupLocationId}
+          selectedCustomAddress={customPickupAddress}
+          highlightedPickupLocationIds={highlightedPickupLocationIds}
+          allowCustomLocation
+          restrictCustomLocationToServiceArea
+          isSkipped={pickupLocationSkipped}
+          destinations={destinations}
+          onLocationSelect={(locationId, customLocation) => {
+            onLocationSelect(locationId, customLocation?.address ?? null);
+          }}
+          onSkip={onSkip}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/booking/PrivateShuttlePreferencesSection.tsx

@@ -0,0 +1,75 @@
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+export interface PrivateShuttlePreferencesSectionProps {
+  passengerCount: number;
+  childSafetySeatsCount: number;
+  foodRestrictions: string;
+  onChildSafetySeatsCountChange: (count: number) => void;
+  onFoodRestrictionsChange: (value: string) => void;
+}
+
+export function PrivateShuttlePreferencesSection({
+  passengerCount,
+  childSafetySeatsCount,
+  foodRestrictions,
+  onChildSafetySeatsCountChange,
+  onFoodRestrictionsChange,
+}: PrivateShuttlePreferencesSectionProps) {
+  if (passengerCount <= 0) return null;
+
+  return (
+    <>
+      <div className={styles.section}>
+        <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
+          Safety seats for kids
+        </label>
+        <p className="text-sm text-stone-500 mb-2">
+          How many child safety seats do you need?
+        </p>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => onChildSafetySeatsCountChange(Math.max(0, childSafetySeatsCount - 1))}
+            disabled={childSafetySeatsCount <= 0}
+            className={styles.qtyBtn}
+          >
+            -
+          </button>
+          <span className="w-8 text-center font-medium tabular-nums">
+            {childSafetySeatsCount}
+          </span>
+          <button
+            type="button"
+            onClick={() =>
+              onChildSafetySeatsCountChange(Math.min(passengerCount, childSafetySeatsCount + 1))
+            }
+            disabled={childSafetySeatsCount >= passengerCount}
+            className={styles.qtyBtn}
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.section}>
+        <label
+          htmlFor="food-restrictions"
+          className={`${styles.sectionLabel} private-shuttle-section-label`}
+        >
+          Food restrictions
+        </label>
+        <p className="text-sm text-stone-500 mb-2">
+          Shuttle includes croissants, coffee, tea, hot chocolate, trail snacks.
+        </p>
+        <textarea
+          id="food-restrictions"
+          value={foodRestrictions}
+          onChange={(event) => onFoodRestrictionsChange(event.target.value)}
+          placeholder="Any dietary restrictions or allergies?"
+          rows={2}
+          className={styles.input}
+        />
+      </div>
+    </>
+  );
+}

package/src/components/booking/PrivateShuttleStartTimeSection.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
+import styles from './PrivateShuttleBookingFlow.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+interface PrivateShuttleStartTimeSectionProps {
+  suggestedStartTimes: string[];
+  selectedStartTime: string;
+  isCustomTimeMode: boolean;
+  companyTimezone: string;
+  t: TranslationFn;
+  onStartTimeSelect: (time: string) => void;
+  onCustomTimeRequest: () => void;
+  onCustomTimeChange: (time: string) => void;
+}
+
+export function PrivateShuttleStartTimeSection({
+  suggestedStartTimes,
+  selectedStartTime,
+  isCustomTimeMode,
+  companyTimezone,
+  t,
+  onStartTimeSelect,
+  onCustomTimeRequest,
+  onCustomTimeChange,
+}: PrivateShuttleStartTimeSectionProps) {
+  return (
+    <div className={styles.section}>
+      <label className={`${styles.sectionLabel} private-shuttle-section-label`}>
+        {t('booking.selectPickupTime')}
+      </label>
+      {(suggestedStartTimes.length > 0 || isCustomTimeMode) && (
+        <div className="flex flex-wrap gap-2">
+          {suggestedStartTimes.map((time) => {
+            const isSelected = !isCustomTimeMode && selectedStartTime === time;
+            const [hours, minutes] = time.split(':').map(Number);
+            const timeInTz = fromZonedTime(new Date(2000, 0, 1, hours, minutes, 0), companyTimezone);
+            const displayTime = formatInTimeZone(timeInTz, companyTimezone, 'h:mm a');
+            return (
+              <button
+                key={time}
+                type="button"
+                onClick={() => onStartTimeSelect(time)}
+                className={`${styles.btnTime} private-shuttle-btn-time ${
+                  isSelected ? styles.btnTimeSelected : styles.btnTimeDefault
+                }`}
+              >
+                {displayTime}
+              </button>
+            );
+          })}
+          {suggestedStartTimes.length > 0 && (
+            <button
+              type="button"
+              onClick={onCustomTimeRequest}
+              className={`${styles.btnTime} private-shuttle-btn-time ${
+                isCustomTimeMode ? styles.btnTimeSelected : styles.btnTimeDefault
+              }`}
+            >
+              {t('booking.requestDifferentTime')}
+            </button>
+          )}
+        </div>
+      )}
+      {(isCustomTimeMode || suggestedStartTimes.length === 0) && (
+        <div className="mt-3">
+          <label
+            htmlFor="custom-pickup-time"
+            className={styles.labelSecondary}
+          >
+            {suggestedStartTimes.length === 0
+              ? t('booking.preferredPickupTime')
+              : t('booking.requestDifferentTime')}
+          </label>
+          <input
+            id="custom-pickup-time"
+            type="time"
+            value={selectedStartTime}
+            onChange={(e) => onCustomTimeChange(e.target.value)}
+            className={styles.inputTime}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/booking/StandardBookingCheckoutDialogs.tsx

@@ -0,0 +1,106 @@
+import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
+import { CheckoutModal } from './CheckoutModal';
+import type {
+  StandardAdminChoiceData,
+  StandardCheckoutModalData,
+} from './standard-booking-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 StandardBookingCheckoutDialogsProps {
+  showAdminPaymentChoice: boolean;
+  adminChoiceData: StandardAdminChoiceData | null;
+  checkoutModalData: StandardCheckoutModalData | 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 StandardBookingCheckoutDialogs({
+  showAdminPaymentChoice,
+  adminChoiceData,
+  checkoutModalData,
+  showCheckoutModal,
+  checkoutClientSecret,
+  currency,
+  locale,
+  loading,
+  error,
+  getSuccessUrl,
+  t,
+  onPayNow,
+  onConfirmWithoutPayment,
+  onAdminPaymentChoiceCancel,
+  onCheckoutClose,
+  onPaymentSubmitStart,
+  onPaymentSubmitError,
+}: StandardBookingCheckoutDialogsProps) {
+  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={
+            checkoutModalData.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}
+          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}
+          changeTotals={checkoutModalData.changeTotals}
+          currency={currency}
+          locale={locale}
+          t={t}
+        />
+      )}
+    </>
+  );
+}

package/src/components/booking/StandardBookingCheckoutSection.tsx

@@ -0,0 +1,185 @@
+import type { Destination, PickupLocation } from '../../lib/booking-api';
+import type { NewBookingFlowProps } from './booking-flow-types';
+import { CheckoutForm } from './CheckoutForm';
+import type { Currency } from './CurrencySwitcher';
+import { PromoCodeInput } from './PromoCodeInput';
+import type { PriceSummaryLine } from './PriceSummary';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+export interface StandardBookingCheckoutSectionProps {
+  priceSummaryLines: PriceSummaryLine[];
+  totalPrice: number;
+  subtotal?: number;
+  taxAmount: number;
+  taxRate?: number;
+  currency: Currency;
+  locale: string;
+  t: TranslationFn;
+  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;
+  selectedDate: string;
+  pickupLocations?: PickupLocation[];
+  destinations?: Destination[];
+  pickupLocationId: string | null;
+  pickupLocationSkipped: boolean;
+  selectedPickupLocation?: PickupLocation | null;
+  highlightedPickupLocationIds?: NewBookingFlowProps['highlightedPickupLocationIds'];
+  hidePickupSkipOption: boolean;
+  onLocationSelect: (locationId: string | null) => void;
+  onSkipPickup: () => void;
+  onChangePickup: () => void;
+  termsAccepted: boolean;
+  onTermsChange: (checked: boolean) => void;
+  isAdmin: boolean;
+  skipConfirmationCommunications: boolean;
+  disableAutoCommunications: boolean;
+  onSkipConfirmationChange: (checked: boolean) => void;
+  onDisableCommunicationsChange: (checked: boolean) => void;
+  error: string;
+  loading: boolean;
+  totalQuantity: number;
+  onCheckout: () => void;
+  submitLabel?: string;
+  hideSubmitButton: boolean;
+  attributionSummary?: string;
+  attributionConfirmLabel?: string;
+  attributionConfirmed: boolean;
+  onAttributionConfirmedChange: (checked: boolean) => void;
+}
+
+export function StandardBookingCheckoutSection({
+  priceSummaryLines,
+  totalPrice,
+  subtotal,
+  taxAmount,
+  taxRate,
+  currency,
+  locale,
+  t,
+  promoCodeInput,
+  appliedPromoCode,
+  promoCodeError,
+  promoCodeValidating,
+  promoDiscountAmount,
+  onPromoInputChange,
+  onPromoApply,
+  onPromoRemove,
+  firstName,
+  lastName,
+  email,
+  phoneNumber,
+  onFirstNameChange,
+  onLastNameChange,
+  onEmailChange,
+  onPhoneNumberChange,
+  selectedDate,
+  pickupLocations,
+  destinations,
+  pickupLocationId,
+  pickupLocationSkipped,
+  selectedPickupLocation,
+  highlightedPickupLocationIds,
+  hidePickupSkipOption,
+  onLocationSelect,
+  onSkipPickup,
+  onChangePickup,
+  termsAccepted,
+  onTermsChange,
+  isAdmin,
+  skipConfirmationCommunications,
+  disableAutoCommunications,
+  onSkipConfirmationChange,
+  onDisableCommunicationsChange,
+  error,
+  loading,
+  totalQuantity,
+  onCheckout,
+  submitLabel,
+  hideSubmitButton,
+  attributionSummary,
+  attributionConfirmLabel,
+  attributionConfirmed,
+  onAttributionConfirmedChange,
+}: StandardBookingCheckoutSectionProps) {
+  return (
+    <CheckoutForm
+      priceSummaryLines={priceSummaryLines}
+      totalPrice={totalPrice}
+      totalSummaryLabel={undefined}
+      subtotal={subtotal}
+      taxAmount={taxAmount}
+      taxRate={taxRate}
+      currency={currency}
+      locale={locale}
+      t={t}
+      extraBetweenTaxAndTotal={
+        <PromoCodeInput
+          promoCodeInput={promoCodeInput}
+          appliedPromoCode={appliedPromoCode}
+          promoCodeError={promoCodeError}
+          promoCodeValidating={promoCodeValidating}
+          promoDiscountAmount={promoDiscountAmount}
+          currency={currency}
+          locale={locale}
+          t={t}
+          onInputChange={onPromoInputChange}
+          onApply={onPromoApply}
+          onRemove={onPromoRemove}
+        />
+      }
+      firstName={firstName}
+      lastName={lastName}
+      email={email}
+      onFirstNameChange={onFirstNameChange}
+      onLastNameChange={onLastNameChange}
+      onEmailChange={onEmailChange}
+      phoneNumber={phoneNumber}
+      onPhoneNumberChange={onPhoneNumberChange}
+      readOnlyContactFields={false}
+      pickupLocations={selectedDate && pickupLocations && pickupLocations.length > 0 ? pickupLocations : undefined}
+      destinations={destinations}
+      pickupLocationId={pickupLocationId}
+      pickupLocationSkipped={pickupLocationSkipped}
+      selectedPickupLocation={selectedPickupLocation}
+      highlightedPickupLocationIds={highlightedPickupLocationIds}
+      hidePickupSkipOption={hidePickupSkipOption}
+      onLocationSelect={onLocationSelect}
+      onSkip={onSkipPickup}
+      onChangePickup={onChangePickup}
+      termsAccepted={termsAccepted}
+      onTermsChange={onTermsChange}
+      isAdmin={isAdmin}
+      showCommunicationAdminSection
+      skipConfirmationCommunications={skipConfirmationCommunications}
+      disableAutoCommunications={disableAutoCommunications}
+      onSkipConfirmationChange={onSkipConfirmationChange}
+      onDisableCommunicationsChange={onDisableCommunicationsChange}
+      error={error}
+      loading={loading}
+      totalQuantity={totalQuantity}
+      onCheckout={onCheckout}
+      submitLabel={submitLabel}
+      hideSubmitButton={hideSubmitButton}
+      submitDisabled={false}
+      attributionSummary={attributionSummary}
+      attributionConfirmLabel={attributionConfirmLabel}
+      attributionConfirmed={attributionConfirmed}
+      onAttributionConfirmedChange={onAttributionConfirmedChange}
+    />
+  );
+}