@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/components/booking/CheckoutModal.tsx

@@ -0,0 +1,451 @@
+'use client';
+
+import { useState, useEffect, useRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
+import { ENV } from '@/lib/env';
+import { storePendingPurchase, trackBeginCheckout } from '@/lib/analytics';
+import { formatCurrencyAmount } from '@/lib/currency';
+import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '@/lib/booking/i18n/config';
+import type { OrderSummaryTicketLine, OrderSummaryFeeLine, PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
+
+export interface CheckoutModalLineItem {
+  line: OrderSummaryTicketLine;
+  breakdown: PriceBreakdownType | null;
+}
+
+export interface CheckoutModalProps {
+  open: boolean;
+  onClose: () => void;
+  onPaymentSubmitStart?: () => void;
+  onPaymentSubmitError?: () => void;
+  clientSecret: string;
+  reservationReference: string;
+  reservationExpiration?: string;
+  /** Last name for Stripe return_url so success page can poll and redirect to /manage */
+  customerLastName?: string;
+  /** When set (e.g. provider-dashboard), used as Stripe return_url instead of /manage */
+  successUrlOverride?: string;
+  ticketLines: CheckoutModalLineItem[];
+  feeLineItems: OrderSummaryFeeLine[];
+  returnPriceAdjustment: number;
+  cancellationPolicyFee?: number;
+  cancellationPolicyLabel?: string;
+  subtotal: number;
+  tax: number;
+  total: number;
+  promoDiscountAmount?: number;
+  discountLabel?: string | null;
+  totalQuantity: number;
+  isTaxIncludedInPrice: boolean;
+  taxRate?: number;
+  currency: Currency;
+  locale: Locale;
+  t: (key: string, params?: Record<string, string | number>) => string;
+  /** When true, show deposit messaging (balance charged N days before or pay earlier). */
+  isDepositPayment?: boolean;
+  /** Days before booking to charge balance (e.g. 7). */
+  balanceChargeDaysBefore?: number;
+  /**
+   * When `clientSecret` is not yet available, show this instead of the loading placeholder
+   * (e.g. collect email / last name before creating a PaymentIntent).
+   */
+  prePaymentPanel?: ReactNode;
+  changeTotals?: {
+    previousTotal: number;
+    newTotal: number;
+    differenceTotal: number;
+  };
+}
+
+const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY
+  ? loadStripe(ENV.STRIPE_PUBLISHABLE_KEY)
+  : null;
+
+function CheckoutForm({
+  successUrl,
+  onClose,
+  onPaymentSubmitStart,
+  onPaymentSubmitError,
+  t,
+  total,
+  currency,
+  locale,
+}: {
+  successUrl: string;
+  onClose: () => void;
+  onPaymentSubmitStart?: () => void;
+  onPaymentSubmitError?: () => void;
+  t: (key: string) => string;
+  total: number;
+  currency: Currency;
+  locale: Locale;
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setLoading(true);
+    setError(null);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      setError(submitError.message ?? 'Validation failed');
+      setLoading(false);
+      onPaymentSubmitError?.();
+      return;
+    }
+    onPaymentSubmitStart?.();
+    // Store before redirect so success page can fire purchase event
+    storePendingPurchase(total, currency);
+    const { error: confirmError } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: successUrl,
+      },
+    });
+    if (confirmError) {
+      setError(confirmError.message ?? 'Payment failed');
+      onPaymentSubmitError?.();
+    }
+    setLoading(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <PaymentElement />
+      {error && (
+        <p className="text-sm text-red-600" role="alert">
+          {error}
+        </p>
+      )}
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex-1 py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50"
+        >
+          {t('common.cancel') || 'Cancel'}
+        </button>
+        <button
+          type="submit"
+          disabled={!stripe || loading}
+          className="flex-1 py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? (t('booking.paying') || 'Paying...') : `${t('booking.payNow') || 'Pay now'} (${formatCurrencyAmount(total, currency, locale)})`}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export function CheckoutModal({
+  open,
+  onClose,
+  onPaymentSubmitStart,
+  onPaymentSubmitError,
+  clientSecret,
+  reservationReference,
+  reservationExpiration,
+  customerLastName,
+  successUrlOverride,
+  ticketLines,
+  feeLineItems,
+  returnPriceAdjustment,
+  cancellationPolicyFee = 0,
+  cancellationPolicyLabel,
+  subtotal,
+  tax,
+  total,
+  totalQuantity,
+  promoDiscountAmount = 0,
+  discountLabel,
+  isTaxIncludedInPrice,
+  taxRate = 0,
+  currency,
+  locale,
+  t,
+  isDepositPayment = false,
+  balanceChargeDaysBefore = 7,
+  prePaymentPanel,
+  changeTotals,
+}: CheckoutModalProps) {
+  const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+  const manageParams = new URLSearchParams({ reservationRef: reservationReference });
+  if (customerLastName?.trim()) manageParams.set('lastName', customerLastName.trim());
+  if (!successUrlOverride) manageParams.set('booking_complete', '1');
+  const successUrl = successUrlOverride ?? `${baseUrl}/manage-booking?${manageParams.toString()}`;
+
+  const hasFiredBeginCheckout = useRef(false);
+  /** Ensures we only fire expiry close once per modal open (avoids Strict Mode / repeated 0 remainingMs). */
+  const holdExpiryCloseSentRef = useRef(false);
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    if (open && !hasFiredBeginCheckout.current) {
+      hasFiredBeginCheckout.current = true;
+      const items = ticketLines.map(({ line }) => ({
+        id: line.category,
+        name: line.category,
+        qty: line.qty,
+        price: line.itemTotal,
+      }));
+      trackBeginCheckout(total, currency, items);
+    }
+    if (!open) hasFiredBeginCheckout.current = false;
+  }, [open, total, currency, ticketLines]);
+
+  useEffect(() => {
+    if (!open || !reservationExpiration) return;
+    const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [open, reservationExpiration]);
+
+  const expirationMs = reservationExpiration ? Date.parse(reservationExpiration) : NaN;
+  const hasValidExpiration = Number.isFinite(expirationMs);
+  const remainingMs = hasValidExpiration ? Math.max(0, expirationMs - nowMs) : 0;
+  const remainingTotalSeconds = Math.ceil(remainingMs / 1000);
+  const remainingMinutes = Math.floor(remainingTotalSeconds / 60);
+  const remainingSeconds = remainingTotalSeconds % 60;
+  const remainingDisplay = `${String(remainingMinutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+  const holdTone =
+    remainingTotalSeconds <= 120
+      ? 'critical'
+      : remainingTotalSeconds <= 300
+        ? 'warning'
+        : 'normal';
+
+  useEffect(() => {
+    if (!open) {
+      holdExpiryCloseSentRef.current = false;
+      return;
+    }
+    if (!hasValidExpiration || remainingMs > 0) return;
+    if (holdExpiryCloseSentRef.current) return;
+    holdExpiryCloseSentRef.current = true;
+    onClose();
+  }, [open, hasValidExpiration, remainingMs, onClose]);
+
+  if (!open) return null;
+
+  if (!ENV.STRIPE_PUBLISHABLE_KEY) {
+    const noStripe = (
+      <div
+        className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
+        style={{ zIndex: 100_000 }}
+      >
+        <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
+          <h3 className="text-lg font-semibold text-stone-900 mb-2">
+            {t('booking.checkout') || 'Checkout'}
+          </h3>
+          <p className="text-stone-600 mb-4">
+            {t('booking.paymentNotConfigured') || 'Payment is not configured. Please use the standard checkout.'}
+          </p>
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-full py-3 bg-stone-200 text-stone-800 font-medium rounded-lg hover:bg-stone-300"
+          >
+            {t('common.close') || 'Close'}
+          </button>
+        </div>
+      </div>
+    );
+    return typeof document !== 'undefined' ? createPortal(noStripe, document.body) : null;
+  }
+
+  const options = {
+    clientSecret,
+    appearance: {
+      theme: 'stripe' as const,
+      variables: {
+        colorPrimary: '#059669',
+        borderRadius: '8px',
+      },
+    },
+  };
+
+  const checkout = (
+    <div
+      className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
+      style={{ zIndex: 100_000 }}
+    >
+      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col">
+        <div className="p-6 border-b border-stone-200 flex-shrink-0">
+          <div className="flex justify-between items-start">
+            <h3 className="text-lg font-semibold text-stone-900">
+              {t('booking.reviewAndPay') || 'Review & pay'}
+            </h3>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-stone-400 hover:text-stone-600 p-1"
+              aria-label={t('common.close') || '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>
+
+          {/* Order summary — shared PriceSummary component */}
+          <div className="mt-4 min-w-0">
+            <PriceSummary
+              lines={[
+                ...ticketLines.map(({ line, breakdown }): PriceSummaryLine => ({
+                  kind: 'ticket',
+                  category: line.category,
+                  qty: line.qty,
+                  itemTotal: line.itemTotal,
+                  breakdown,
+                })),
+                ...(returnPriceAdjustment !== 0
+                  ? [
+                      {
+                        kind: 'line' as const,
+                        label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+                        amount: returnPriceAdjustment,
+                        type: 'return',
+                      },
+                    ]
+                  : []),
+                ...(cancellationPolicyFee > 0
+                  ? [
+                      {
+                        kind: 'line' as const,
+                        label: cancellationPolicyLabel ?? t('booking.flexibleCancellation') ?? 'Flexible cancellation',
+                        amount: cancellationPolicyFee,
+                        type: 'cancellation',
+                      },
+                    ]
+                  : []),
+                ...feeLineItems.map((fee) => {
+                  const isMoraineLakeRoadAccessFee = fee.name.toLowerCase().includes('moraine') && (fee.name.toLowerCase().includes('access') || fee.name.toLowerCase().includes('road') || fee.name.toLowerCase().includes('license'));
+                  return {
+                    kind: 'line' as const,
+                    label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+                    amount: fee.totalAmount,
+                    type: 'fee',
+                    tooltip: isMoraineLakeRoadAccessFee
+                      ? "Since 2025, Parks Canada charges a per-trip fee for License of Occupation. Based on our capacity, this per-person fee contributes towards Parks Canada's Moraine Lake Road operations."
+                      : undefined,
+                  };
+                }),
+              ]}
+              total={total}
+              currency={currency}
+              locale={locale}
+              subtotal={subtotal !== total ? subtotal : undefined}
+              discountAmount={promoDiscountAmount ?? 0}
+              discountLabel={discountLabel}
+              taxAmount={!isTaxIncludedInPrice && tax > 0 ? tax : 0}
+              taxRate={taxRate}
+              size="sm"
+              t={t}
+              depositMode={isDepositPayment && subtotal > total ? { totalLabel: t('booking.deposit') || 'Deposit', balanceAmount: subtotal - total, fullTotalAmount: subtotal } : undefined}
+              hideSubtotal={isDepositPayment}
+              extraBetweenTaxAndTotal={
+                changeTotals ? (
+                  <div className="space-y-1 pt-2 border-t border-stone-200">
+                    <div className="flex justify-between gap-3 min-w-0 text-sm">
+                      <span className="text-stone-600 min-w-0 truncate">New Total</span>
+                      <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                        {formatCurrencyAmount(changeTotals.newTotal, currency, locale)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between gap-3 min-w-0 text-sm">
+                      <span className="text-stone-600 min-w-0 truncate">Previous Total</span>
+                      <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                        {formatCurrencyAmount(changeTotals.previousTotal, currency, locale)}
+                      </span>
+                    </div>
+                  </div>
+                ) : undefined
+              }
+              totalLabel={changeTotals ? 'New Booking Difference' : undefined}
+            />
+          </div>
+
+          {/* Deposit payment notice */}
+          {isDepositPayment && (
+            <div className="deposit-notice mt-4 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 > 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>
+          )}
+          {hasValidExpiration && (
+            <div
+              className={`mt-4 p-3 rounded-lg border ${
+                holdTone === 'critical'
+                  ? 'bg-red-50 border-red-300'
+                  : holdTone === 'warning'
+                    ? 'bg-amber-50 border-amber-300'
+                    : 'bg-emerald-50 border-emerald-200'
+              }`}
+            >
+              <p
+                className={`text-xs font-semibold ${
+                  holdTone === 'critical'
+                    ? 'text-red-900'
+                    : holdTone === 'warning'
+                      ? 'text-amber-900'
+                      : 'text-emerald-900'
+                }`}
+              >
+                Your reservation is being held for {remainingDisplay}
+              </p>
+              <p
+                className={`mt-1 text-xs ${
+                  holdTone === 'critical'
+                    ? 'text-red-800'
+                    : holdTone === 'warning'
+                      ? 'text-amber-800'
+                      : 'text-emerald-800'
+                }`}
+              >
+                Closing this payment dialog releases the hold and you will need to reserve again.
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="p-6 overflow-y-auto flex-1">
+          {stripePromise && clientSecret ? (
+            <Elements stripe={stripePromise} options={options}>
+              <CheckoutForm
+                successUrl={successUrl}
+                onClose={onClose}
+                onPaymentSubmitStart={onPaymentSubmitStart}
+                onPaymentSubmitError={onPaymentSubmitError}
+                t={t}
+                total={total}
+                currency={currency}
+                locale={locale}
+              />
+            </Elements>
+          ) : prePaymentPanel ? (
+            prePaymentPanel
+          ) : (
+            <p className="text-stone-500">{t('booking.loadingPayment') || 'Loading payment form...'}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+  return typeof document !== 'undefined' ? createPortal(checkout, document.body) : null;
+}

package/src/components/booking/CurrencySwitcher.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+// Available currencies from pricing.json config
+export const CURRENCIES = ['CAD', 'USD', 'EUR', 'GBP', 'AUD'] as const;
+export type Currency = typeof CURRENCIES[number];
+
+const CURRENCY_NAMES: Record<Currency, string> = {
+  CAD: 'CAD',
+  USD: 'USD',
+  EUR: 'EUR',
+  GBP: 'GBP',
+  AUD: 'AUD',
+};
+
+const DEFAULT_CURRENCY: Currency = 'CAD';
+
+export function useCurrency() {
+  const [currency, setCurrencyState] = useState<Currency>(DEFAULT_CURRENCY);
+
+  // Load from localStorage after hydration to avoid SSR mismatch
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem('booking-currency') as Currency | null;
+      if (saved && CURRENCIES.includes(saved)) {
+        setCurrencyState(saved);
+      }
+    } catch (error) {
+      console.warn('Failed to read currency from localStorage:', error);
+    }
+  }, []);
+
+  const setCurrency = (newCurrency: Currency) => {
+    if (!CURRENCIES.includes(newCurrency)) {
+      console.warn(`Invalid currency: ${newCurrency}. Falling back to ${DEFAULT_CURRENCY}`);
+      setCurrencyState(DEFAULT_CURRENCY);
+      return;
+    }
+    
+    setCurrencyState(newCurrency);
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem('booking-currency', newCurrency);
+      } catch (error) {
+        console.warn('Failed to save currency to localStorage:', error);
+      }
+    }
+  };
+
+  return { currency, setCurrency };
+}
+
+interface CurrencySwitcherProps {
+  currency: Currency;
+  onCurrencyChange: (currency: Currency) => void;
+}
+
+export function CurrencySwitcher({ currency, onCurrencyChange }: CurrencySwitcherProps) {
+  return (
+    <div className="flex items-center gap-1.5 sm:gap-2">
+      <span className="text-xs sm:text-sm shrink-0" style={{ color: 'var(--booking-text-muted, #a8a29e)' }}>Currency:</span>
+      <div className="flex flex-wrap gap-0.5 sm:gap-1 rounded-lg overflow-hidden" style={{ border: '1px solid var(--booking-border)', backgroundColor: 'var(--booking-header-bg, #1c1917)' }}>
+        {CURRENCIES.map((curr) => (
+          <button
+            key={curr}
+            onClick={() => onCurrencyChange(curr)}
+            className={`px-2 py-1 sm:px-3 sm:py-1.5 text-xs sm:text-sm font-medium transition-colors ${currency !== curr ? 'hover:opacity-80' : ''}`}
+            style={currency === curr
+              ? { backgroundColor: 'var(--booking-primary)', color: 'white' }
+              : { backgroundColor: 'transparent', color: 'var(--booking-text-muted, #a8a29e)' }
+            }
+          >
+            {CURRENCY_NAMES[curr]}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+

package/src/components/booking/DapFlowCollage.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import ViaViaImage from '@/components/image';
+import ImageModal from '@/components/product-theme-pages/image-modal';
+import styles from './BookingFlowCollage.module.css';
+
+export interface DapFlowCollageProps {
+  /** Bunny CDN image IDs — first is the tall hero, next four fill the asymmetric grid */
+  imageIds: string[];
+  altPrefix?: string;
+}
+
+/** Hero (left) + four-tile grid (right), same layout as BookingFlowCollage without video */
+export function DapFlowCollage({ imageIds, altPrefix = 'Experience' }: DapFlowCollageProps) {
+  const slots = useMemo(() => {
+    const raw = imageIds.map((id) => id.trim()).filter(Boolean);
+    if (raw.length === 0) return [];
+    const out = [...raw];
+    while (out.length < 5) {
+      out.push(out[0]!);
+    }
+    return out.slice(0, 5);
+  }, [imageIds]);
+
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  const imageItems = useMemo(
+    () => slots.map((id, i) => ({ id, alt: `${altPrefix} - ${i + 1}` })),
+    [slots, altPrefix]
+  );
+
+  if (slots.length === 0) return null;
+
+  const heroId = slots[0]!;
+  const gridIds = slots.slice(1, 5);
+
+  return (
+    <div className={styles.collage}>
+      <div className={styles.videoSlot}>
+        <div className={styles.videoWrapper}>
+          <button
+            type="button"
+            className={styles.gridCell}
+            onClick={() => setSelectedIndex(0)}
+            aria-label="View featured image"
+          >
+            <ViaViaImage imageId={heroId} alt={`${altPrefix} - featured`} context="GALLERY" />
+          </button>
+        </div>
+      </div>
+      <div className={styles.imageGrid}>
+        {gridIds.map((id, i) => (
+          <button
+            key={`${id}-${i}`}
+            type="button"
+            className={styles.gridCell}
+            onClick={() => setSelectedIndex(i + 1)}
+            aria-label={`View image ${i + 2}`}
+          >
+            <ViaViaImage imageId={id} alt={`${altPrefix} - ${i + 2}`} context="GALLERY" />
+          </button>
+        ))}
+      </div>
+
+      {selectedIndex !== null && imageItems[selectedIndex] && (
+        <ImageModal
+          selectedImage={imageItems[selectedIndex]!}
+          currentIndex={selectedIndex}
+          totalImages={imageItems.length}
+          images={imageItems}
+          onClose={() => setSelectedIndex(null)}
+          onNext={() => {
+            if (selectedIndex < imageItems.length - 1) {
+              setSelectedIndex(selectedIndex + 1);
+            }
+          }}
+          onPrevious={() => {
+            if (selectedIndex > 0) {
+              setSelectedIndex(selectedIndex - 1);
+            }
+          }}
+          overlayZIndex={10000}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/booking/DapTourDescription.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useMemo } from 'react';
+import { TourDescription } from '@/components/booking/TourDescription';
+import { useLocale, useTranslations } from '@/lib/booking/i18n';
+import { getDapDescription } from '@/lib/dap-descriptions';
+import type { PhotoDapSlug } from '@/lib/photo-dap-config';
+
+export function DapTourDescription({
+  slug,
+  locale: localeProp,
+}: {
+  slug: PhotoDapSlug;
+  locale?: string;
+}) {
+  const { t } = useTranslations();
+  const { locale: contextLocale } = useLocale();
+  const locale = localeProp ?? contextLocale;
+
+  const content = useMemo(() => getDapDescription(slug, locale), [slug, locale]);
+
+  if (!content || (content.paragraphs.length === 0 && (content.sections?.length ?? 0) === 0)) {
+    return null;
+  }
+
+  return (
+    <TourDescription
+      paragraphs={content.paragraphs}
+      review={content.review}
+      sections={content.sections}
+      defaultExpanded={false}
+      toggleLabel={t('booking.seeFullAddOnDescription')}
+    />
+  );
+}