create-brainerce-store 1.85.0 → 1.86.0

package/templates/nextjs/designs/atelier/app-overlay/layout.tsx.ejs

@@ -131,7 +131,7 @@ export default async function RootLayout({
   const storeName = resolveStoreName(storeInfo);
 
   return (
-    <html lang={locale} dir={dir}>
+    <html lang={locale} dir={dir} data-scroll-behavior="smooth">
       <head>
         <script
           type="application/ld+json"
@@ -310,7 +310,7 @@ export default async function RootLayout({
   const storeName = resolveStoreName(storeInfo);
 
   return (
-    <html lang="<%= language %>" dir="<%= direction %>">
+    <html lang="<%= language %>" dir="<%= direction %>" data-scroll-behavior="smooth">
       <head>
         <script
           type="application/ld+json"

package/templates/nextjs/designs/atelier/ui/product/price-display.tsx

@@ -1,69 +1,90 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface PriceDisplayProps {
-  price: string | number;
-  salePrice?: string | number | null;
-  currency?: string;
-  className?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-const CURRENT: Record<NonNullable<PriceDisplayProps['size']>, string> = {
-  sm: 'text-sm font-semibold',
-  md: 'text-base font-semibold',
-  lg: 'text-2xl font-semibold',
-};
-const STRUCK: Record<NonNullable<PriceDisplayProps['size']>, string> = {
-  sm: 'text-xs',
-  md: 'text-sm',
-  lg: 'text-base',
-};
-
-/**
- * Price renderer used by cards, product page and recommendations; computes
- * sale state + discount % from props (currency via useCurrency()).
- * Never hardcode currency symbols — formatPrice handles them.
- */
-export function PriceDisplay({
-  price,
-  salePrice,
-  currency,
-  className,
-  size = 'md',
-}: PriceDisplayProps) {
-  const currencyCode = useCurrency(currency);
-
-  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
-  const sale =
-    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
-  const isOnSale = sale !== null && sale < basePrice;
-
-  const discountPercent =
-    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
-
-  return (
-    <span data-size={size} className={cn('inline-flex flex-wrap items-baseline gap-2', className)}>
-      {isOnSale ? (
-        <>
-          <span className={cn(CURRENT[size], 'text-foreground')}>
-            {formatPrice(sale!, { currency: currencyCode }) as string}
-          </span>
-          <s className={cn(STRUCK[size], 'text-muted-foreground')}>
-            {formatPrice(basePrice, { currency: currencyCode }) as string}
-          </s>
-          {discountPercent > 0 && (
-            <span className="badge-destructive self-center">-{discountPercent}%</span>
-          )}
-        </>
-      ) : (
-        <span className={cn(CURRENT[size], 'text-foreground')}>
-          {formatPrice(basePrice, { currency: currencyCode }) as string}
-        </span>
-      )}
-    </span>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { cn } from '@/core/lib/utils';
+
+interface PriceDisplayProps {
+  price: string | number;
+  salePrice?: string | number | null;
+  currency?: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const CURRENT: Record<NonNullable<PriceDisplayProps['size']>, string> = {
+  sm: 'text-sm font-semibold',
+  md: 'text-base font-semibold',
+  lg: 'text-2xl font-semibold',
+};
+const STRUCK: Record<NonNullable<PriceDisplayProps['size']>, string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+/**
+ * Price renderer used by cards, product page and recommendations; computes
+ * sale state + discount % from props (currency via useCurrency()).
+ * Never hardcode currency symbols — formatPrice handles them.
+ */
+export function PriceDisplay({
+  price,
+  salePrice,
+  currency,
+  className,
+  size = 'md',
+}: PriceDisplayProps) {
+  const currencyCode = useCurrency(currency);
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('common');
+
+  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
+  const sale =
+    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
+  const isOnSale = sale !== null && sale < basePrice;
+
+  const discountPercent =
+    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
+
+  // FX overlay disclosure (see core/lib/display-price.ts): `currency` is the
+  // region-converted DISPLAY currency when it differs from the store's own
+  // base currency. The shopper is still charged in the base currency at
+  // checkout, so every converted price needs a visible "estimated" cue.
+  const isConverted = !!currency && !!storeInfo?.currency && currency !== storeInfo.currency;
+
+  return (
+    <span data-size={size} className={cn('inline-flex flex-wrap items-baseline gap-2', className)}>
+      {isOnSale ? (
+        <>
+          <span className={cn(CURRENT[size], 'text-foreground')}>
+            {formatPrice(sale!, { currency: currencyCode }) as string}
+          </span>
+          <s className={cn(STRUCK[size], 'text-muted-foreground')}>
+            {formatPrice(basePrice, { currency: currencyCode }) as string}
+          </s>
+          {discountPercent > 0 && (
+            <span className="badge-destructive self-center">-{discountPercent}%</span>
+          )}
+        </>
+      ) : (
+        <span className={cn(CURRENT[size], 'text-foreground')}>
+          {formatPrice(basePrice, { currency: currencyCode }) as string}
+        </span>
+      )}
+      {isConverted && (
+        <span
+          className="text-muted-foreground cursor-help self-center text-xs font-normal underline decoration-dotted"
+          title={t('estimatedPriceTooltip', {
+            currency: currencyCode,
+            baseCurrency: storeInfo!.currency,
+          })}
+        >
+          {t('estimatedPrice')}
+        </span>
+      )}
+    </span>
+  );
+}

package/templates/nextjs/designs/atelier/ui/product/product-client-section.tsx

@@ -330,7 +330,6 @@ export function ProductClientSection({
                     className="flex items-center gap-3 p-3"
                   >
                     {c.image ? (
-                      // eslint-disable-next-line @next/next/no-img-element
                       <img
                         src={c.image}
                         alt={c.name}
@@ -491,6 +490,9 @@ export function ProductClientSection({
             <section className="mt-8">
               <h2 className="mb-3 text-xl">{t('description')}</h2>
               {'html' in description ? (
+                // Security: merchant-authored product description HTML,
+                // sanitized via `sanitizeProductHtml` (isomorphic-dompurify,
+                // allowlisted tags) before injecting.
                 <div
                   className="prose-store"
                   dangerouslySetInnerHTML={{ __html: sanitizeProductHtml(description.html) }}

package/templates/nextjs/ui-canvas/product/price-display.tsx

@@ -1,52 +1,73 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface PriceDisplayProps {
-  price: string | number;
-  salePrice?: string | number | null;
-  currency?: string;
-  className?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-/**
- * DESIGN ME — price renderer used by cards, product page and recommendations;
- * computes sale state + discount % from props (currency via useCurrency()).
- * Never hardcode currency symbols — formatPrice handles them.
- *
- * 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 PriceDisplay({
-  price,
-  salePrice,
-  currency,
-  className,
-  size = 'md',
-}: PriceDisplayProps) {
-  const currencyCode = useCurrency(currency);
-
-  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
-  const sale =
-    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
-  const isOnSale = sale !== null && sale < basePrice;
-
-  const discountPercent =
-    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
-
-  return (
-    <span data-size={size} className={cn('inline-flex items-center gap-2', className)}>
-      {isOnSale ? (
-        <>
-          <span>{formatPrice(sale!, { currency: currencyCode }) as string}</span>
-          <s>{formatPrice(basePrice, { currency: currencyCode }) as string}</s>
-          {discountPercent > 0 && <span>-{discountPercent}%</span>}
-        </>
-      ) : (
-        <span>{formatPrice(basePrice, { currency: currencyCode }) as string}</span>
-      )}
-    </span>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { cn } from '@/core/lib/utils';
+
+interface PriceDisplayProps {
+  price: string | number;
+  salePrice?: string | number | null;
+  currency?: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * DESIGN ME — price renderer used by cards, product page and recommendations;
+ * computes sale state + discount % from props (currency via useCurrency()).
+ * Never hardcode currency symbols — formatPrice handles them.
+ *
+ * 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 PriceDisplay({
+  price,
+  salePrice,
+  currency,
+  className,
+  size = 'md',
+}: PriceDisplayProps) {
+  const currencyCode = useCurrency(currency);
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('common');
+
+  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
+  const sale =
+    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
+  const isOnSale = sale !== null && sale < basePrice;
+
+  const discountPercent =
+    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
+
+  // FX overlay disclosure (see core/lib/display-price.ts): `currency` is the
+  // region-converted DISPLAY currency when it differs from the store's own
+  // base currency. The shopper is still charged in the base currency at
+  // checkout, so every converted price needs a visible "estimated" cue.
+  const isConverted = !!currency && !!storeInfo?.currency && currency !== storeInfo.currency;
+
+  return (
+    <span data-size={size} className={cn('inline-flex items-center gap-2', className)}>
+      {isOnSale ? (
+        <>
+          <span>{formatPrice(sale!, { currency: currencyCode }) as string}</span>
+          <s>{formatPrice(basePrice, { currency: currencyCode }) as string}</s>
+          {discountPercent > 0 && <span>-{discountPercent}%</span>}
+        </>
+      ) : (
+        <span>{formatPrice(basePrice, { currency: currencyCode }) as string}</span>
+      )}
+      {isConverted && (
+        <span
+          className="text-muted-foreground cursor-help text-xs"
+          title={t('estimatedPriceTooltip', {
+            currency: currencyCode,
+            baseCurrency: storeInfo!.currency,
+          })}
+        >
+          {t('estimatedPrice')}
+        </span>
+      )}
+    </span>
+  );
+}