create-brainerce-store 1.73.0 → 1.74.0

package/templates/nextjs/ui-canvas/cart/tax-estimate-line.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+/**
+ * Non-binding tax preview for the cart.
+ *
+ * Shoppers in VAT markets expect a tax figure before they reach the address
+ * form, and "calculated at checkout" reads as an unpleasant surprise waiting
+ * to happen. `estimateTax` gives them a number early without pretending it is
+ * final.
+ *
+ * ⛔ NEVER PRESENT THIS AS THE REAL TAX. The authoritative calculation runs at
+ * checkout against the full shipping address. A preview has no province, so a
+ * Canadian estimate shows federal GST alone and the provincial PST/QST joins
+ * it at checkout. That is what `note` is for, and why the "calculated at
+ * checkout" caveat stays on the row even when a figure is showing.
+ *
+ * ⛔ NO ESTIMATE IS RENDERED when `appliesTax` is false, which is what an
+ * empty or freshly created store returns: tax is off, no country reached us,
+ * or no active rate covers it. In that case (and when the call fails, and
+ * while it is in flight, and on an empty cart) this falls back to EXACTLY the
+ * row the cart shipped with before the estimate existed: "Tax / calculated at
+ * checkout". There is no spinner, no error box, and no empty amount.
+ *
+ * `getStoreTaxClasses()` would let you add a separate "9% VAT" transparency
+ * badge, but `rateName` + `rate` already come back on this response and say
+ * the same thing, so a second request would buy nothing.
+ */
+
+import { useEffect, useState } from 'react';
+import type { TaxEstimateResponse } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCart, useRegion } from '@/core/providers/store-provider';
+
+export function useTaxEstimate(): TaxEstimateResponse | null {
+  const { totals } = useCart();
+  // The same country the region lookup already extracted from the edge. Asking
+  // for it twice would be two sources that can disagree.
+  const { buyerCountry } = useRegion();
+  const [estimate, setEstimate] = useState<TaxEstimateResponse | null>(null);
+  const subtotal = totals.subtotal;
+
+  useEffect(() => {
+    // An empty cart has nothing to tax. Skipping the call also keeps a
+    // brand-new store from firing a request on every page load forever.
+    if (!(subtotal > 0)) {
+      setEstimate(null);
+      return;
+    }
+    let cancelled = false;
+    getClient()
+      .estimateTax({ ...(buyerCountry ? { country: buyerCountry } : {}), subtotal })
+      .then((result) => {
+        if (!cancelled) setEstimate(result);
+      })
+      .catch(() => {
+        // Swallowed on purpose. A tax preview is a courtesy; it must never
+        // take the cart down with it. The caller falls back to the plain
+        // "calculated at checkout" row.
+        if (!cancelled) setEstimate(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [subtotal, buyerCountry]);
+
+  return estimate;
+}
+
+/* DESIGN ME — unstyled on purpose (canvas mode). The rules that are NOT yours
+   to change: no estimate is rendered when `appliesTax` is false or the call
+   failed, `note` is rendered verbatim, and the "calculated at checkout" caveat
+   stays beside the figure. */
+export function TaxEstimateLine() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const estimate = useTaxEstimate();
+
+  if (!estimate || !estimate.appliesTax) {
+    return (
+      <div className="flex items-center justify-between gap-4">
+        <dt>{tc('tax')}</dt>
+        <dd>{t('taxAtCheckout')}</dd>
+      </div>
+    );
+  }
+
+  const label =
+    estimate.rateName && estimate.rate != null
+      ? `${estimate.rateName} ${estimate.rate}%`
+      : (estimate.rateName ?? tc('tax'));
+
+  return (
+    <div>
+      <div className="flex items-center justify-between gap-4">
+        <dt>{label}</dt>
+        <dd>{formatPrice(estimate.estimatedTax, { currency: estimate.currency }) as string}</dd>
+      </div>
+      <p>{t('taxAtCheckout')}</p>
+      {estimate.note ? <p>{estimate.note}</p> : null}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/home/home-client.tsx

@@ -1,26 +1,24 @@
-'use client';
-
-import { useStoreInfo } from '@/core/providers/store-provider';
-import { useHomeData } from '@/core/hooks/use-home-data';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { DiscountBannerStrip } from './discount-banner-strip';
-import { HeroSection } from './hero-section';
-import { FeaturedProductsSection } from './featured-products-section';
-
-export function HomeClient() {
-  const { storeInfo, loading: storeLoading } = useStoreInfo();
-  const { products, banners, loading } = useHomeData();
-
-  if (storeLoading || loading) {
-    return <LoadingSpinner size="lg" />;
-  }
-
-  return (
-    <div>
-      {/* DESIGN ME — homepage composition: discount banners + hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <DiscountBannerStrip banners={banners} />
-      <HeroSection storeName={storeInfo?.name} />
-      <FeaturedProductsSection products={products} />
-    </div>
-  );
-}
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { HeroSection } from './hero-section';
+import { FeaturedProductsSection } from './featured-products-section';
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, loading } = useHomeData();
+
+  if (storeLoading || loading) {
+    return <LoadingSpinner size="lg" />;
+  }
+
+  return (
+    <div>
+      {/* DESIGN ME — homepage composition: hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. Discount banners are NOT composed here: the root layout renders <DiscountBannerStrip> below the header on every page, so adding one here is a second, later-arriving copy of the same strip. */}
+      <HeroSection storeName={storeInfo?.name} />
+      <FeaturedProductsSection products={products} />
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/layout/region-switcher.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+/**
+ * Region / currency switcher.
+ *
+ * ⛔ RENDERS NOTHING on a single-region store, which is almost every store.
+ * `regions.length <= 1` returns null before any markup: an empty or
+ * one-option dropdown in the header is worse than no switcher at all, and the
+ * whole regions feature is meant to be invisible until a merchant actually
+ * adds a second region.
+ *
+ * ⛔ It also renders nothing when the regions call FAILED. A brand-new store
+ * is empty and the call can fail (channel not live yet, backend hiccup); the
+ * provider swallows that and leaves `regions` at `[]`, which lands in the same
+ * early return. There is no error box and no skeleton, because a shopper has
+ * no idea what a region is and nothing here is worth interrupting them for.
+ *
+ * Why a manual switcher exists at all when the edge already guesses: the guess
+ * is an IP, and an IP is wrong for travellers, expats, VPNs and anyone behind
+ * a corporate egress. The shopper is the authority on where they are, and
+ * their choice is stored in a cookie so the SERVER renders the same prices on
+ * the next navigation instead of the client re-pricing after hydration.
+ *
+ * The labels are store data (`region.name`, `region.currency`), not UI copy,
+ * so this component needs no translation keys in any locale.
+ */
+
+import { useRegion } from '@/core/providers/store-provider';
+
+/* DESIGN ME — unstyled on purpose (canvas mode). The two rules that are NOT
+   yours to change: the early return on `regions.length <= 1`, and the fact
+   that the labels come from store data rather than a translation key. */
+export function RegionSwitcher() {
+  const { regions, region, setRegion } = useRegion();
+
+  if (regions.length <= 1 || !region) return null;
+
+  return (
+    <select
+      value={region.id}
+      onChange={(e) => setRegion(e.target.value)}
+      aria-label="Select region and currency"
+    >
+      {regions.map((r) => (
+        <option key={r.id} value={r.id}>
+          {r.name} ({r.currency})
+        </option>
+      ))}
+    </select>
+  );
+}

package/templates/nextjs/ui-canvas/layout/site-header.tsx.ejs

@@ -21,6 +21,7 @@ import { HeaderAccount } from './header-account';
 <% if (i18nEnabled) { %>
 import { LanguageSwitcher } from '@/ui/layout/language-switcher';
 <% } %>
+import { RegionSwitcher } from '@/ui/layout/region-switcher';
 
 interface SiteHeaderProps {
   /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
@@ -51,6 +52,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
             <% if (i18nEnabled) { %>
             <LanguageSwitcher />
             <% } %>
+            <RegionSwitcher />
             <HeaderAccount />
             <Link href="/cart" aria-label="Cart">
               Cart
@@ -92,6 +94,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
           <% if (i18nEnabled) { %>
           <LanguageSwitcher />
           <% } %>
+          <RegionSwitcher />
 
           <HeaderAccount />
 

package/templates/nextjs/ui-canvas/product/frequently-bought-together.tsx

@@ -1,168 +1,174 @@
-'use client';
-
-import { useState } from 'react';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { Product, ProductRecommendation } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useCart, useStoreInfo } from '@/core/providers/store-provider';
-import { useCurrency } from '@/core/lib/use-currency';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface FrequentlyBoughtTogetherProps {
-  items: ProductRecommendation[];
-  currentProduct: Product;
-  className?: string;
-}
-
-function getEffectivePrice(item: { basePrice: string; salePrice?: string | null }): number {
-  const sale = item.salePrice ? parseFloat(item.salePrice) : null;
-  const base = parseFloat(item.basePrice);
-  return sale != null && sale < base ? sale : base;
-}
-
-function ProductThumb({
-  name,
-  imageUrl,
-  price,
-  currency,
-  checked,
-  onToggle,
-  disabled,
-}: {
-  name: string;
-  imageUrl: string | null;
-  price: number;
-  currency: string;
-  checked: boolean;
-  onToggle?: () => void;
-  disabled?: boolean;
-}) {
-  return (
-    <label className="inline-flex items-center gap-2">
-      {onToggle && <input type="checkbox" checked={checked} onChange={onToggle} disabled={disabled} />}
-      {/* `relative` + fixed box are layout-critical for next/image fill */}
-      <span className="relative block h-20 w-20">
-        {imageUrl ? <Image src={imageUrl} alt={name} fill sizes="80px" /> : null}
-      </span>
-      <span>{name}</span>
-      <span>{formatPrice(price, { currency }) as string}</span>
-    </label>
-  );
-}
-
-/**
- * DESIGN ME — "frequently bought together" bundle on the product page:
- * current product + selectable cross-sells + combined total + add-all button;
- * items come from useProductPage().recommendations.crossSells, the feature
- * gate from useStoreInfo().upsell.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function FrequentlyBoughtTogether({
-  items,
-  currentProduct,
-  className,
-}: FrequentlyBoughtTogetherProps) {
-  // Hooks must be called unconditionally and in the same order on every
-  // render — keep all of them above any early `return null` branch.
-  const { storeInfo } = useStoreInfo();
-  const { refreshCart } = useCart();
-  const t = useTranslations('productDetail');
-  const currency = useCurrency();
-
-  // Only show up to 3 cross-sells
-  const crossSells = items.slice(0, 3);
-
-  const [selected, setSelected] = useState<Set<string>>(() => new Set(crossSells.map((i) => i.id)));
-  const [adding, setAdding] = useState(false);
-
-  if (!storeInfo?.upsell?.frequentlyBoughtTogetherEnabled) return null;
-  if (crossSells.length === 0) return null;
-
-  const currentPrice = getEffectivePrice(currentProduct);
-  const currentImage = currentProduct.images?.[0];
-  const currentImageUrl = currentImage
-    ? typeof currentImage === 'string'
-      ? currentImage
-      : currentImage.url
-    : null;
-
-  const totalPrice = crossSells
-    .filter((item) => selected.has(item.id))
-    .reduce((sum, item) => sum + getEffectivePrice(item), currentPrice);
-
-  const toggleItem = (id: string) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-
-  async function handleAddAll() {
-    if (adding || selected.size === 0) return;
-    try {
-      setAdding(true);
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      const selectedItems = crossSells.filter((item) => selected.has(item.id));
-      for (const item of selectedItems) {
-        await client.smartAddToCart({ productId: item.id, quantity: 1 });
-      }
-      await refreshCart();
-    } catch (err) {
-      console.error('Failed to add items to cart:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <section className={cn(className)}>
-      <h2>{t('frequentlyBoughtTogether')}</h2>
-
-      <div className="flex flex-wrap items-center gap-3">
-        {/* Current product (always included, no checkbox) */}
-        <ProductThumb
-          name={currentProduct.name}
-          imageUrl={currentImageUrl}
-          price={currentPrice}
-          currency={currency}
-          checked={true}
-          disabled
-        />
-
-        {crossSells.map((item) => {
-          const img = item.images?.[0];
-          const imgUrl = img ? (typeof img === 'string' ? img : img.url) : null;
-          return (
-            <div key={item.id} className="flex items-center gap-3">
-              <span aria-hidden="true">+</span>
-              <ProductThumb
-                name={item.name}
-                imageUrl={imgUrl}
-                price={getEffectivePrice(item)}
-                currency={currency}
-                checked={selected.has(item.id)}
-                onToggle={() => toggleItem(item.id)}
-              />
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Total + Add button */}
-      <div className="flex flex-wrap items-center gap-4">
-        <span>{t('totalPrice', { price: formatPrice(totalPrice, { currency }) as string })}</span>
-        <button type="button" onClick={handleAddAll} disabled={adding || selected.size === 0}>
-          {adding ? t('addingAll') : t('addSelectedToCart')}
-        </button>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { Product, ProductRecommendation } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCart, useStoreInfo } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface FrequentlyBoughtTogetherProps {
+  items: ProductRecommendation[];
+  currentProduct: Product;
+  className?: string;
+}
+
+// ⛔ STORE CURRENCY THROUGHOUT, deliberately. The cross-sells are
+// `ProductRecommendation`, a trimmed shape with no displayPrice/displayCurrency,
+// so there is nothing to convert them to. Converting only `currentProduct`
+// (which is a full Product and does carry FX fields) would add a euro amount to
+// two dollar amounts and print the result as one total. One currency wins, and
+// it has to be the one the cart actually charges.
+function getEffectivePrice(item: { basePrice: string; salePrice?: string | null }): number {
+  const sale = item.salePrice ? parseFloat(item.salePrice) : null;
+  const base = parseFloat(item.basePrice);
+  return sale != null && sale < base ? sale : base;
+}
+
+function ProductThumb({
+  name,
+  imageUrl,
+  price,
+  currency,
+  checked,
+  onToggle,
+  disabled,
+}: {
+  name: string;
+  imageUrl: string | null;
+  price: number;
+  currency: string;
+  checked: boolean;
+  onToggle?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label className="inline-flex items-center gap-2">
+      {onToggle && <input type="checkbox" checked={checked} onChange={onToggle} disabled={disabled} />}
+      {/* `relative` + fixed box are layout-critical for next/image fill */}
+      <span className="relative block h-20 w-20">
+        {imageUrl ? <Image src={imageUrl} alt={name} fill sizes="80px" /> : null}
+      </span>
+      <span>{name}</span>
+      <span>{formatPrice(price, { currency }) as string}</span>
+    </label>
+  );
+}
+
+/**
+ * DESIGN ME — "frequently bought together" bundle on the product page:
+ * current product + selectable cross-sells + combined total + add-all button;
+ * items come from useProductPage().recommendations.crossSells, the feature
+ * gate from useStoreInfo().upsell.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function FrequentlyBoughtTogether({
+  items,
+  currentProduct,
+  className,
+}: FrequentlyBoughtTogetherProps) {
+  // Hooks must be called unconditionally and in the same order on every
+  // render — keep all of them above any early `return null` branch.
+  const { storeInfo } = useStoreInfo();
+  const { refreshCart } = useCart();
+  const t = useTranslations('productDetail');
+  const currency = useCurrency();
+
+  // Only show up to 3 cross-sells
+  const crossSells = items.slice(0, 3);
+
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(crossSells.map((i) => i.id)));
+  const [adding, setAdding] = useState(false);
+
+  if (!storeInfo?.upsell?.frequentlyBoughtTogetherEnabled) return null;
+  if (crossSells.length === 0) return null;
+
+  const currentPrice = getEffectivePrice(currentProduct);
+  const currentImage = currentProduct.images?.[0];
+  const currentImageUrl = currentImage
+    ? typeof currentImage === 'string'
+      ? currentImage
+      : currentImage.url
+    : null;
+
+  const totalPrice = crossSells
+    .filter((item) => selected.has(item.id))
+    .reduce((sum, item) => sum + getEffectivePrice(item), currentPrice);
+
+  const toggleItem = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  async function handleAddAll() {
+    if (adding || selected.size === 0) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      const selectedItems = crossSells.filter((item) => selected.has(item.id));
+      for (const item of selectedItems) {
+        await client.smartAddToCart({ productId: item.id, quantity: 1 });
+      }
+      await refreshCart();
+    } catch (err) {
+      console.error('Failed to add items to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <section className={cn(className)}>
+      <h2>{t('frequentlyBoughtTogether')}</h2>
+
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Current product (always included, no checkbox) */}
+        <ProductThumb
+          name={currentProduct.name}
+          imageUrl={currentImageUrl}
+          price={currentPrice}
+          currency={currency}
+          checked={true}
+          disabled
+        />
+
+        {crossSells.map((item) => {
+          const img = item.images?.[0];
+          const imgUrl = img ? (typeof img === 'string' ? img : img.url) : null;
+          return (
+            <div key={item.id} className="flex items-center gap-3">
+              <span aria-hidden="true">+</span>
+              <ProductThumb
+                name={item.name}
+                imageUrl={imgUrl}
+                price={getEffectivePrice(item)}
+                currency={currency}
+                checked={selected.has(item.id)}
+                onToggle={() => toggleItem(item.id)}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Total + Add button */}
+      <div className="flex flex-wrap items-center gap-4">
+        <span>{t('totalPrice', { price: formatPrice(totalPrice, { currency }) as string })}</span>
+        <button type="button" onClick={handleAddAll} disabled={adding || selected.size === 0}>
+          {adding ? t('addingAll') : t('addSelectedToCart')}
+        </button>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/product/product-card.tsx

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import { Link, useRouter } from '@/core/lib/navigation';
 import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { Product } from 'brainerce';
-import { getProductPriceInfo, getVariantPrice, formatPrice } from 'brainerce';
+import { getProductPriceInfo, formatPrice } from 'brainerce';
+import { pickDisplayPrice, pickDisplayPriceRange } from '@/core/lib/display-price';
 import { useTranslations } from '@/core/lib/translations';
 import { PriceDisplay } from '@/ui/product/price-display';
 import { StockBadge } from '@/ui/product/stock-badge';
@@ -19,57 +20,14 @@ interface ProductCardProps {
   className?: string;
 }
 
-/**
- * Pick the price + currency to render for a given product (PRD §23 FX overlay).
- *
- * When the storefront passed `regionId` to `getProducts({ regionId })` AND the
- * region currency differs from the store currency, the backend attaches
- * additive `displayPrice` / `displayCurrency` fields. Otherwise we fall back
- * to the canonical store-currency `basePrice` / `salePrice`. Either way the
- * cart still charges in the store currency — this only affects display.
- */
-function pickDisplayPrice(
-  product: Product,
-  fallbackCurrency: string
-): { price: number | undefined; salePrice: number | null; currency: string } {
-  if (product.displayPrice != null && product.displayCurrency) {
-    const sale = product.displaySalePrice != null ? parseFloat(product.displaySalePrice) : null;
-    return {
-      // `displayPrice` is the base price converted to the region currency —
-      // it goes into the PriceDisplay `price` (base) slot, NOT the sale slot.
-      price: parseFloat(product.displayPrice),
-      salePrice: sale != null && !Number.isNaN(sale) ? sale : null,
-      currency: product.displayCurrency,
-    };
-  }
-  // Same-currency fallback. `getProductPriceInfo.price` is the EFFECTIVE
-  // charged amount (= salePrice when on sale, base otherwise); `originalPrice`
-  // is the base. Map them to PriceDisplay's (price = base, salePrice = sale).
-  const { price: effective, originalPrice, isOnSale } = getProductPriceInfo(product);
-  return {
-    price: originalPrice,
-    salePrice: isOnSale ? effective : null,
-    currency: fallbackCurrency,
-  };
-}
-
 function VariantPriceRange({ product }: { product: Product }) {
-  const currency = useCurrency();
-
-  let min: number;
-  let max: number;
-  if (product.priceMin && product.priceMax) {
-    min = parseFloat(product.priceMin);
-    max = parseFloat(product.priceMax);
-  } else {
-    const variants = product.variants ?? [];
-    if (variants.length === 0) return null;
-    const prices = variants.map((v) => getVariantPrice(v, product.basePrice));
-    min = Math.min(...prices);
-    max = Math.max(...prices);
-  }
-
-  if (isNaN(min) || isNaN(max)) return null;
+  const fallbackCurrency = useCurrency();
+  // ⛔ Region-aware. A range built from priceMin/priceMax alone stays in the
+  // store currency while the single-price card beside it converts, so a
+  // variable product would quote a different currency from its neighbours.
+  const range = pickDisplayPriceRange(product, fallbackCurrency);
+  if (!range) return null;
+  const { min, max, currency } = range;
 
   return (
     <span>