@ticketboothapp/booking 1.2.24 → 1.2.25

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

@@ -0,0 +1,134 @@
+/**
+ * Pickup time selector - grid of time slot buttons
+ */
+
+.label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--booking-stone-700, #44403c);
+  margin-bottom: 0.5rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+.btn {
+  padding: 0.875rem 1.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.btnDefault {
+  padding-top: 0.75rem;
+}
+
+.btnWithBadge {
+  padding-top: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  .btnWithBadge {
+    padding-top: 1rem;
+  }
+}
+
+.btnSelected {
+  background: var(--booking-emerald-600, #059669);
+  color: #fff;
+}
+
+.btnAvailable {
+  background: var(--light-orange-background-dark, #f7e4dc);
+  color: var(--booking-stone-700, #44403c);
+}
+
+.btnAvailable:hover {
+  background: var(--light-orange-background, #fff1eb);
+}
+
+.btnDisabled {
+  background: var(--booking-stone-100, #f5f5f4);
+  color: var(--booking-stone-400, #a8a29e);
+  cursor: not-allowed;
+}
+
+.btnSoldOutAdmin {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.btnSoldOutAdmin:hover {
+  background: #fee2e2;
+}
+
+.btnSoldOutLocked {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+  cursor: not-allowed;
+}
+
+.btnSoldOutLocked:hover {
+  background: #fee2e2;
+}
+
+.capacity {
+  font-size: 0.75rem;
+  margin-top: 0.125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Fitted to green selected tile — not pure white (readability) */
+.capacityOnSelected {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.capacityDefault {
+  color: var(--booking-stone-500, #78716c);
+}
+
+.capacityProjected {
+  font-size: 0.7rem;
+  line-height: 1.2;
+  margin-top: 0.25rem;
+  font-weight: 600;
+  text-align: center;
+  color: #b91c1c;
+  font-variant-numeric: tabular-nums;
+}
+
+.badge {
+  position: absolute;
+  top: -0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: 'Poppins', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: lowercase;
+  color: #fff;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  white-space: nowrap;
+  background-color: #ff4d00;
+}
+
+.soldOut {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #b91c1c;
+}

package/src/components/booking/PickupTimeSelector.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import type { Availability } from '@/lib/booking-api';
+import type { ProductOption } from '@/lib/booking-api';
+import styles from './PickupTimeSelector.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+export interface PickupTimeInfo extends Availability {
+  pickupTime: string;
+  displayTime: string;
+  originalTime: string;
+  displayTimeRange?: string;
+}
+
+interface PickupTimeSelectorProps {
+  pickupTimes: PickupTimeInfo[];
+  selectedDateTime: string | null;
+  selectedTicketCount: number;
+  optionsMap: Map<string, ProductOption>;
+  hasAnyMostPopular: boolean;
+  isAdmin: boolean;
+  pickupLocationSkipped: boolean;
+  t: TranslationFn;
+  onTimeSelect: (availability: Availability) => void;
+}
+
+export function PickupTimeSelector({
+  pickupTimes,
+  selectedDateTime,
+  selectedTicketCount,
+  optionsMap,
+  hasAnyMostPopular,
+  isAdmin,
+  pickupLocationSkipped,
+  t,
+  onTimeSelect,
+}: PickupTimeSelectorProps) {
+  return (
+    <div>
+      <label className={styles.label}>
+        {t('booking.selectPickupTime')}
+      </label>
+      <div className={styles.grid}>
+        {pickupTimes.map((timeInfo) => {
+          const isSelected = selectedDateTime === timeInfo.dateTime;
+          const isSoldOut = timeInfo.vacancies === 0;
+          const isInsufficientForParty =
+            selectedTicketCount > 0 && (timeInfo.vacancies ?? 0) < selectedTicketCount;
+          const canSelect = isAdmin || (!isSoldOut && !isInsufficientForParty);
+          const option = timeInfo.productOptionId
+            ? optionsMap.get(timeInfo.productOptionId)
+            : undefined;
+          const isMostPopular = pickupTimes.length > 1 && option?.mostPopular;
+          const totalCap = timeInfo.totalCapacity ?? 0;
+          const booked = timeInfo.bookedCapacity ?? (totalCap - (timeInfo.vacancies ?? 0));
+          const showCapacity = isAdmin && totalCap > 0;
+          const slotVacancies = timeInfo.vacancies;
+          const projectedSeats = booked + selectedTicketCount;
+          const showAdminProjectedLoad =
+            isSelected && showCapacity && selectedTicketCount > slotVacancies;
+          // Selected tile stays green; unselected + admin + tight party uses public-style tile, not "sold out admin" pink
+          const btnClass = (() => {
+            if (isSelected) return styles.btnSelected;
+            if (!isAdmin) {
+              return (isSoldOut || isInsufficientForParty) ? styles.btnSoldOutLocked : styles.btnAvailable;
+            }
+            if (isSoldOut && slotVacancies === 0) return styles.btnSoldOutAdmin;
+            return styles.btnAvailable;
+          })();
+          return (
+            <button
+              key={timeInfo.dateTime}
+              onClick={() => canSelect && onTimeSelect(timeInfo)}
+              disabled={!canSelect}
+              className={`${styles.btn} ${hasAnyMostPopular ? styles.btnWithBadge : styles.btnDefault} ${btnClass}`}
+            >
+              <div>{pickupLocationSkipped && timeInfo.displayTimeRange ? timeInfo.displayTimeRange : timeInfo.displayTime}</div>
+              {showCapacity && (showAdminProjectedLoad ? (
+                <div className={styles.capacityProjected} aria-live="polite">
+                  <div>{t('booking.adminBookingLoadLine1', { projected: projectedSeats })}</div>
+                  <div>{t('booking.adminBookingLoadLine2', { total: totalCap })}</div>
+                </div>
+              ) : (
+                <div
+                  className={`${styles.capacity} ${isSelected ? styles.capacityOnSelected : styles.capacityDefault}`}
+                >
+                  {t('calendar.spotsAvailable', { count: slotVacancies })}
+                </div>
+              ))}
+              {isMostPopular && (
+                <div className={styles.badge}>
+                  {t('booking.mostPopular')}
+                </div>
+              )}
+              {isSoldOut && (
+                <div className={styles.soldOut}>
+                  {t('booking.soldOut')}
+                </div>
+              )}
+              {isInsufficientForParty && !isAdmin && (
+                <div className={styles.soldOut}>
+                  {`Only ${timeInfo.vacancies} spot${timeInfo.vacancies === 1 ? '' : 's'} left, decrease your ticket count below to select this time`}
+                </div>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/booking/PriceBreakdown.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState } from 'react';
+import { formatCurrencyAmount } from '@/lib/currency';
+import type { PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
+import { useTranslations } from '@/lib/booking/i18n';
+import { useBookingApp } from '@/contexts/BookingAppContext';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '@/lib/booking/i18n/config';
+
+export interface PriceBreakdownProps {
+  category: string;
+  qty: number;
+  itemTotal: number;
+  breakdown: PriceBreakdownType | null;
+  currency: Currency;
+  locale: Locale;
+}
+
+/**
+ * Format adjustment details for display (e.g., "+10%", "-30%")
+ * Uses the actual price change sign to determine +/- display
+ */
+function formatAdjustmentDetail(
+  adjustmentType?: string, // 'percentage' or 'fixed'
+  adjustmentValue?: number,
+  isNegativeChange?: boolean // true if changeByCurrency is negative
+): string {
+  if (!adjustmentType || adjustmentValue === undefined) return '';
+  
+  const sign = isNegativeChange ? '-' : '+';
+  const absValue = Math.abs(adjustmentValue);
+  
+  if (adjustmentType === 'percentage') {
+    return ` (${sign}${absValue}%)`;
+  } else if (adjustmentType === 'fixed') {
+    return ` (${sign}C$${absValue.toFixed(2)})`;
+  }
+  return '';
+}
+
+/**
+ * Renders a single price line (e.g. "Adult × 2 — $X"). When the host app grants
+ * permission, shows a hover tooltip with the full price breakdown (base, adjustments,
+ * fee, tax). Used in the booking itinerary summary.
+ */
+export function PriceBreakdown({
+  category,
+  qty,
+  itemTotal,
+  breakdown,
+  currency,
+  locale,
+}: PriceBreakdownProps) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const { t } = useTranslations();
+  const { permissions } = useBookingApp();
+  const canShowBreakdown = breakdown != null && permissions.canViewPriceBreakdown;
+
+  // Calculate base price for discount detection
+  // In public mode, the base price in breakdown already has dynamic increases rolled in
+  const basePricePerPerson = breakdown?.lineItems?.find((l) => l.type === 'base')?.amountInDisplayCurrency;
+  const baseTotal = basePricePerPerson != null ? basePricePerPerson * qty : 0;
+  const hasDiscount = baseTotal > 0 && itemTotal < baseTotal; // only when final < original
+
+  if (!breakdown) {
+    return (
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-stone-600">
+          {category} {qty > 1 ? `× ${qty}` : ''}
+        </span>
+        <span className="text-sm font-medium text-stone-700">
+          {formatCurrencyAmount(itemTotal, currency, locale)}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-3 min-w-0">
+      <span className="text-sm text-stone-600 min-w-0 truncate">
+        {category} {qty > 1 ? `× ${qty}` : ''}
+      </span>
+      <div className="relative flex-shrink-0 whitespace-nowrap">
+        <span
+          className={
+            canShowBreakdown
+              ? 'text-sm font-medium text-stone-700 cursor-help underline decoration-dotted'
+              : 'text-sm font-medium text-stone-700'
+          }
+          onMouseEnter={canShowBreakdown ? () => setShowTooltip(true) : undefined}
+          onMouseLeave={canShowBreakdown ? () => setShowTooltip(false) : undefined}
+        >
+          {hasDiscount ? (
+            <>
+              <span className="line-through text-stone-400">
+                {formatCurrencyAmount(baseTotal, currency, locale)}
+              </span>
+              {' '}
+              <span className="text-emerald-600">
+                {formatCurrencyAmount(itemTotal, currency, locale)}
+              </span>
+            </>
+          ) : (
+            formatCurrencyAmount(itemTotal, currency, locale)
+          )}
+        </span>
+        {canShowBreakdown && showTooltip && (
+          <div className="absolute right-0 top-full mt-2 w-72 p-3 bg-stone-900 text-white text-xs rounded-lg shadow-xl z-50">
+            <div className="font-semibold mb-2 pb-2 border-b border-stone-700">
+              Price Breakdown ({category})
+            </div>
+            <div className="space-y-1.5">
+              {breakdown.lineItems.map((line) => (
+                <div key={line.id ?? line.name} className="flex justify-between">
+                  <span className="text-stone-400">
+                    {line.name}{line.type === 'base' ? ` (${currency})` : ''}{formatAdjustmentDetail(line.adjustmentType, line.adjustmentValue, line.amountInDisplayCurrency < 0)}
+                  </span>
+                  <span className={line.type === 'adjustment' && line.amountInDisplayCurrency < 0 ? 'text-red-300' : ''}>
+                    {line.type === 'adjustment' && line.amountInDisplayCurrency >= 0 ? '+' : ''}
+                    {formatCurrencyAmount(line.amountInDisplayCurrency, currency, locale)}
+                  </span>
+                </div>
+              ))}
+              {/* Only show fees and tax in breakdown when rolled up (tax-inclusive); for CAD/USD they're already separate line items. */}
+              {breakdown.isTaxIncluded && (
+                <>
+                  {breakdown.feeLines.map((fee) => (
+                    <div key={fee.name} className="flex justify-between">
+                      <span className="text-stone-400" title={fee.description}>
+                        {fee.name}:
+                      </span>
+                      <span>{formatCurrencyAmount(fee.feeAmount, currency, locale)}</span>
+                    </div>
+                  ))}
+                  <div className="flex justify-between">
+                    <span className="text-stone-400">
+                      {`${t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees'} (included):`}
+                    </span>
+                    <span>{formatCurrencyAmount(breakdown.taxAmount, currency, locale)}</span>
+                  </div>
+                </>
+              )}
+              <div className="flex justify-between pt-2 mt-2 border-t border-stone-700 font-semibold">
+                <span>Final price ({currency}):</span>
+                <span>{formatCurrencyAmount(breakdown.finalPrice, currency, locale)}</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/booking/PriceSummary.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { formatCurrencyAmount } from '@/lib/currency';
+import type { PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
+import { PriceBreakdown } from './PriceBreakdown';
+import { InfoTooltip } from './InfoTooltip';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '@/lib/booking/i18n/config';
+
+/** One row in the price summary: either a ticket line (with optional breakdown tooltip) or a simple line. */
+export type PriceSummaryLine =
+  | {
+      kind: 'ticket';
+      category: string;
+      qty: number;
+      itemTotal: number;
+      breakdown?: PriceBreakdownType | null;
+    }
+  | {
+      kind: 'line';
+      label: string;
+      amount: number;
+      /** Drives styling: discount (red, -), return add-on (green, +), default (stone). Receipt types: TICKET, FEE, RETURN_OPTION, PROMO_CODE, CANCELLATION_UPGRADE, TAX, etc. */
+      type?: string;
+      quantity?: number | null;
+      /** Optional tooltip text - when set, shows info icon next to label (e.g. for Moraine Lake Road Access Fee) */
+      tooltip?: string;
+    };
+
+export interface PriceSummaryProps {
+  /** Lines to show (tickets with optional breakdown, then fees/return/discount/etc.) */
+  lines: PriceSummaryLine[];
+  /** Total amount (required) */
+  total: number;
+  /** Currency and locale for formatting */
+  currency: Currency;
+  locale: Locale;
+  /** Charges before tax. Shown as "Subtotal" row before tax (receipt: inserted before TAX line; checkout: after lines). */
+  subtotal?: number;
+  /** Checkout mode only: Tax amount when not in lines */
+  taxAmount?: number;
+  taxRate?: number;
+  /** Checkout mode only: Discount amount when not in lines */
+  discountAmount?: number;
+  /** Checkout mode only: Label for discount row */
+  discountLabel?: string | null;
+  /** Size: 'sm' for modal/sidebar (text-sm), 'base' for manage page */
+  size?: 'sm' | 'base';
+  /** Optional i18n; falls back to default strings */
+  t?: (key: string) => string;
+  /** Optional: extra class on the container */
+  className?: string;
+  /** Optional: render between tax row and total row (e.g. promo code input in BookingFlow) */
+  extraBetweenTaxAndTotal?: React.ReactNode;
+  /** Subtotal row spacing: 'compact' for booking flow/Stripe modal, 'relaxed' for /manage (equal top/bottom) */
+  subtotalSpacing?: 'compact' | 'relaxed';
+  /** Deposit mode: show Total (full), Deposit (amount due today), Remaining Balance */
+  depositMode?: { totalLabel: string; balanceAmount: number; fullTotalAmount: number };
+  /** When true (e.g. deposit flow with single line), hide redundant Subtotal row */
+  hideSubtotal?: boolean;
+  /** Overrides the final "Total" row label (e.g. change booking: amount due for the change) */
+  totalLabel?: string;
+}
+
+function getLineAmountClass(type: string | undefined, amount: number): string {
+  const isDiscount = amount < 0 || type === 'PROMO_CODE' || type === 'DISCOUNT' || type === 'GIFT_CARD';
+  const isAddOn = (type === 'RETURN_OPTION' || type === 'return') && amount > 0;
+  if (isDiscount) return 'font-medium text-red-600';
+  if (isAddOn) return 'font-medium text-emerald-600';
+  return 'text-stone-700';
+}
+
+function formatLineAmount(
+  kind: 'line',
+  amount: number,
+  type: string | undefined,
+  currency: Currency,
+  locale: Locale
+): string {
+  const formatted = formatCurrencyAmount(amount, currency, locale);
+  const isAddOn = (type === 'RETURN_OPTION' || type === 'return') && amount > 0;
+  if (isAddOn) return `+${formatted}`;
+  return formatted;
+}
+
+/**
+ * Reusable price breakdown/summary used in:
+ * - BookingFlow sidebar (order summary)
+ * - CheckoutModal ("Review & pay")
+ * - BookingDetails /manage (Payment Summary from receipt)
+ * - PrivateShuttleBookingFlow sidebar
+ */
+export function PriceSummary({
+  lines,
+  total,
+  currency,
+  locale,
+  subtotal,
+  taxAmount = 0,
+  taxRate: _taxRate,
+  discountAmount = 0,
+  discountLabel,
+  size = 'sm',
+  t = (k) => k,
+  className = '',
+  extraBetweenTaxAndTotal,
+  subtotalSpacing = 'compact',
+  depositMode,
+  hideSubtotal = false,
+  totalLabel,
+}: PriceSummaryProps) {
+  const textSize = size === 'sm' ? 'text-sm' : 'text-base';
+  const totalSize = size === 'sm' ? 'text-xl' : 'text-2xl';
+  const subtotalRowClass = subtotalSpacing === 'relaxed'
+    ? 'pt-3 pb-3 mt-2 border-t border-stone-200'
+    : 'mt-2 pt-1.5 border-t border-stone-200';
+
+  let subtotalShown = false;
+
+  return (
+    <div className={`space-y-2 min-w-0 ${className}`}>
+      {lines.map((row, index) => {
+        if (row.kind === 'ticket') {
+          return (
+            <PriceBreakdown
+              key={`${row.category}-${index}`}
+              category={row.category}
+              qty={row.qty}
+              itemTotal={row.itemTotal}
+              breakdown={row.breakdown ?? null}
+              currency={currency}
+              locale={locale}
+            />
+          );
+        }
+        const { label, amount, type, quantity, tooltip } = row;
+        // Receipt mode: insert Subtotal row before first TAX line
+        const isTaxLine = type === 'TAX';
+        const showSubtotalBeforeTax = isTaxLine && subtotal != null && subtotal > 0 && !subtotalShown;
+        if (showSubtotalBeforeTax) subtotalShown = true;
+        return (
+          <div key={`${label}-${index}`}>
+            {showSubtotalBeforeTax && (
+              <div className={`flex justify-between gap-3 min-w-0 ${textSize} ${subtotalRowClass}`}>
+                <span className="text-stone-600 min-w-0 truncate">{t('booking.subtotal') || 'Subtotal'}</span>
+                <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">{formatCurrencyAmount(subtotal!, currency, locale)}</span>
+              </div>
+            )}
+            <div className={`flex justify-between gap-3 min-w-0 ${textSize}`}>
+              <span className="text-stone-600 min-w-0 flex items-center gap-1">
+                <span className="min-w-0 truncate">
+                  {label}
+                  {type === 'TICKET' && quantity != null && quantity > 1 ? ` (x${quantity})` : ''}
+                </span>
+                {tooltip && <InfoTooltip text={tooltip} />}
+              </span>
+              <span className={`flex-shrink-0 whitespace-nowrap font-medium ${getLineAmountClass(type, amount)}`}>
+                {formatLineAmount('line', amount, type, currency, locale)}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Checkout mode: subtotal/tax/discount not in lines (e.g. Stripe Review & pay modal) */}
+      {subtotal != null && !subtotalShown && !hideSubtotal && (subtotal !== total || discountAmount > 0) && (
+        <div className={`flex justify-between gap-3 min-w-0 ${textSize} ${subtotalRowClass}`}>
+          <span className="text-stone-600 min-w-0 truncate">{t('booking.subtotal') || 'Subtotal'}</span>
+          <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">{formatCurrencyAmount(subtotal, currency, locale)}</span>
+        </div>
+      )}
+      {taxAmount > 0 && (
+        <div className={`flex justify-between gap-3 min-w-0 ${textSize}`}>
+          <span className="text-stone-600 min-w-0 truncate">
+            {t('booking.tax') && t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees'}
+          </span>
+          <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+            {formatCurrencyAmount(taxAmount, currency, locale)}
+          </span>
+        </div>
+      )}
+
+      {discountAmount > 0 && (
+        <div className={`flex justify-between gap-3 min-w-0 ${textSize}`}>
+          <span className="text-stone-600 min-w-0 truncate">{discountLabel ?? t('booking.discount') ?? 'Discount'}</span>
+          <span className="flex-shrink-0 whitespace-nowrap font-medium text-red-600">
+            -{formatCurrencyAmount(discountAmount, currency, locale)}
+          </span>
+        </div>
+      )}
+
+      {extraBetweenTaxAndTotal}
+
+      <div className="space-y-0">
+        {depositMode ? (
+          <>
+            <div className={`flex justify-between gap-3 pt-2 border-t border-stone-200 min-w-0 ${totalSize}`}>
+              <span className="font-semibold text-stone-900 min-w-0 truncate">
+                {t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total'}
+              </span>
+              <span className="flex-shrink-0 whitespace-nowrap font-semibold text-stone-900">
+                {formatCurrencyAmount(depositMode.fullTotalAmount, currency, locale)}
+              </span>
+            </div>
+            <div className={`flex justify-between gap-3 min-w-0 pt-1 ${textSize}`}>
+              <span className="text-stone-600 min-w-0 truncate">{depositMode.totalLabel}</span>
+              <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                {formatCurrencyAmount(total, currency, locale)}
+              </span>
+            </div>
+            {depositMode.balanceAmount > 0 && (
+              <div className={`flex justify-between gap-3 min-w-0 pt-1 ${textSize}`}>
+                <span className="text-stone-600 min-w-0 truncate">{t('booking.remainingBalance') || 'Remaining Balance'}</span>
+                <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                  {formatCurrencyAmount(depositMode.balanceAmount, currency, locale)}
+                </span>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className={`flex justify-between gap-3 pt-2 border-t border-stone-200 min-w-0 ${totalSize}`}>
+            <span className="font-semibold text-stone-900 min-w-0 truncate">
+              {totalLabel ??
+                (t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total')}
+            </span>
+            <span className="flex-shrink-0 whitespace-nowrap font-semibold text-stone-900">
+              {formatCurrencyAmount(total, currency, locale)}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}