@ticketboothapp/booking 0.1.23 → 1.2.24

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

@@ -1,134 +0,0 @@
-/**
- * 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

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

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

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