create-brainerce-store 1.84.0 → 1.86.0

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

@@ -1,110 +1,113 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { ProductRecommendation } from 'brainerce';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { cn } from '@/core/lib/utils';
-
-interface RecommendationCardProps {
-  item: ProductRecommendation;
-  className?: string;
-}
-
-function RecommendationCard({ item, className }: RecommendationCardProps) {
-  const firstImage = item.images?.[0];
-  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
-  const slug = item.slug || item.id;
-  // ⛔ NOT region-converted, and it cannot be. `ProductRecommendation` is a
-  // trimmed shape that carries `basePrice` / `salePrice` only: the backend
-  // attaches no displayPrice/displayCurrency to it, so there is no converted
-  // amount to render and converting here would mean inventing an FX rate.
-  // These tiles stay in the store currency on a multi-region store. Do not
-  // "fix" it with a client-side conversion.
-  const basePrice = parseFloat(item.basePrice);
-  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
-  const isOnSale = salePrice != null && salePrice < basePrice;
-  // ⛔ No price on a KIT tile. The recommendations endpoint does not resolve
-  // kits, so `item.basePrice` here is the kit's stored PLACEHOLDER — right only
-  // for FIXED pricing and wrong for every SUM / SUM_MINUS_PERCENT kit. Showing
-  // it would quote a price the product page then contradicts. The tile still
-  // links through, and the product page reads the resolved price from the API.
-  // Do NOT recompute a kit price on the client.
-  const priceIsUnresolved = item.type === 'KIT';
-
-  return (
-    <Link
-      href={`/products/${slug}`}
-      className={cn('group card card-hover block overflow-hidden', className)}
-    >
-      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-      <span className="relative block aspect-square overflow-hidden bg-secondary">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-            className="img-zoom object-cover"
-          />
-        ) : null}
-      </span>
-      <span className="block space-y-1 p-4">
-        <span className="block text-sm font-semibold leading-snug text-foreground group-hover:text-primary">
-          {item.name}
-        </span>
-        {priceIsUnresolved ? null : (
-          <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
-        )}
-      </span>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/** Recommendation strip on the product page (upsells / related). */
-export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn('border-t pt-10', className)}>
-      <h2 className="mb-6 text-2xl">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
-        {items.slice(0, 4).map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-interface CartRecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-/** Cross-sell strip on the cart page ("you might also need"). */
-export function CartRecommendationSection({
-  title,
-  items,
-  className,
-}: CartRecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <section className={cn('border-t pt-10', className)}>
-      <h2 className="mb-6 text-2xl">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
-        {items.slice(0, 4).map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
+import type { ProductRecommendation } from 'brainerce';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { cn } from '@/core/lib/utils';
+
+interface RecommendationCardProps {
+  item: ProductRecommendation;
+  className?: string;
+}
+
+function RecommendationCard({ item, className }: RecommendationCardProps) {
+  const firstImage = item.images?.[0];
+  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
+  const slug = item.slug || item.id;
+  // ⛔ NOT region-converted, and it cannot be. `ProductRecommendation` is a
+  // trimmed shape that carries `basePrice` / `salePrice` only: the backend
+  // attaches no displayPrice/displayCurrency to it, so there is no converted
+  // amount to render and converting here would mean inventing an FX rate.
+  // These tiles stay in the store currency on a multi-region store. Do not
+  // "fix" it with a client-side conversion.
+  const basePrice = parseFloat(item.basePrice);
+  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
+  const isOnSale = salePrice != null && salePrice < basePrice;
+  // ⛔ No price on a KIT tile. The recommendations endpoint does not resolve
+  // kits, so `item.basePrice` here is the kit's stored PLACEHOLDER — right only
+  // for FIXED pricing and wrong for every SUM / SUM_MINUS_PERCENT kit. Showing
+  // it would quote a price the product page then contradicts. The tile still
+  // links through, and the product page reads the resolved price from the API.
+  // Do NOT recompute a kit price on the client.
+  const priceIsUnresolved = item.type === 'KIT';
+
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className={cn('group card card-hover block overflow-hidden', className)}
+    >
+      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+      <span className="relative block aspect-square overflow-hidden bg-secondary">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+            className="img-zoom object-cover"
+          />
+        ) : (
+          <NoPhotoTile name={item.name} />
+        )}
+      </span>
+      <span className="block space-y-1 p-4">
+        <span className="block text-sm font-semibold leading-snug text-foreground group-hover:text-primary">
+          {item.name}
+        </span>
+        {priceIsUnresolved ? null : (
+          <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+        )}
+      </span>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/** Recommendation strip on the product page (upsells / related). */
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn('border-t pt-10', className)}>
+      <h2 className="mb-6 text-2xl">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
+        {items.slice(0, 4).map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/** Cross-sell strip on the cart page ("you might also need"). */
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn('border-t pt-10', className)}>
+      <h2 className="mb-6 text-2xl">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
+        {items.slice(0, 4).map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/no-photo-tile.tsx

@@ -0,0 +1,73 @@
+/**
+ * Deliberate no-photo state for any image well in the pack.
+ *
+ * A brand-new store is seeded with names and prices only, so every product
+ * opens without a photo. Leaving the well as a bare `bg-secondary` square
+ * makes the grid look broken; this fills it with the same atmosphere the rest
+ * of the design uses (sand / forest washes, display serif) so the state reads
+ * as designed. The first uploaded image replaces it automatically.
+ *
+ * Fills its `relative` parent like a `fill` image would. Always decorative:
+ * every caller already names the product accessibly beside the well (card
+ * heading, cart line, page title), so the tile is `aria-hidden`.
+ */
+import { cn } from '@/core/lib/utils';
+
+/** First user-perceived character of the name, safe for surrogate pairs. */
+function initialOf(name: string): string {
+  return Array.from(name.trim())[0] ?? '';
+}
+
+const INITIAL_SIZE = {
+  sm: 'text-lg',
+  md: 'text-4xl sm:text-5xl',
+  lg: 'text-6xl sm:text-7xl',
+} as const;
+
+export function NoPhotoTile({
+  name,
+  tone = 'sand',
+  size = 'md',
+  showName = false,
+  className,
+}: {
+  name: string;
+  /** `sand` on light wells, `forest` for the hero's lead card. */
+  tone?: 'sand' | 'forest';
+  size?: 'sm' | 'md' | 'lg';
+  /** Print the full name under the initial (hero / category tiles). */
+  showName?: boolean;
+  className?: string;
+}) {
+  const forest = tone === 'forest';
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'absolute inset-0 flex flex-col items-center justify-center gap-2 overflow-hidden p-4 text-center',
+        forest ? 'wash-forest text-primary-foreground' : 'wash-sand text-primary',
+        className
+      )}
+    >
+      <span
+        className={cn(
+          'font-display select-none leading-none',
+          INITIAL_SIZE[size],
+          forest ? 'text-primary-foreground/70' : 'text-primary/45'
+        )}
+      >
+        {initialOf(name)}
+      </span>
+      {showName && (
+        <span
+          className={cn(
+            'line-clamp-2 max-w-full text-sm font-semibold leading-snug',
+            forest ? 'text-primary-foreground/85' : 'text-foreground/80'
+          )}
+        >
+          {name}
+        </span>
+      )}
+    </span>
+  );
+}

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>
+  );
+}