@ticketboothapp/booking 0.1.22 → 1.2.24

package/src/components/booking/CheckoutModal.tsx

@@ -1,451 +0,0 @@
-'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

@@ -1,81 +0,0 @@
-'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

@@ -1,88 +0,0 @@
-'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

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