create-brainerce-store 1.50.1 → 1.51.0

package/templates/nextjs/designs/passepartout/ui/product/variant-selector.tsx

@@ -0,0 +1,307 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
+import type { InventoryInfo } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface VariantSelectorProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+interface AttributeGroup {
+  name: string;
+  displayType: string;
+  values: Array<{
+    value: string;
+    swatchColor?: string | null;
+    swatchColor2?: string | null;
+    swatchImageUrl?: string | null;
+    variants: ProductVariant[];
+  }>;
+}
+
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const t = useTranslations('productDetail');
+  const currency = useCurrency();
+  const variants = useMemo(() => product.variants || [], [product.variants]);
+
+  // Get swatch metadata from product attribute options
+  const swatchData = useMemo(() => getProductSwatches(product), [product]);
+  const swatchMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        displayType: string;
+        options: Map<
+          string,
+          {
+            swatchColor?: string | null;
+            swatchColor2?: string | null;
+            swatchImageUrl?: string | null;
+          }
+        >;
+      }
+    >();
+    for (const attr of swatchData) {
+      const optMap = new Map<
+        string,
+        {
+          swatchColor?: string | null;
+          swatchColor2?: string | null;
+          swatchImageUrl?: string | null;
+        }
+      >();
+      for (const opt of attr.options) {
+        optMap.set(opt.name, {
+          swatchColor: opt.swatchColor,
+          swatchColor2: opt.swatchColor2,
+          swatchImageUrl: opt.swatchImageUrl,
+        });
+      }
+      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
+    }
+    return map;
+  }, [swatchData]);
+
+  // Build attribute groups from variant data, enriched with swatch info
+  const attributeGroups = useMemo<AttributeGroup[]>(() => {
+    const groups = new Map<string, Map<string, ProductVariant[]>>();
+
+    for (const variant of variants) {
+      const options = getVariantOptions(variant);
+      for (const { name, value } of options) {
+        if (!groups.has(name)) {
+          groups.set(name, new Map());
+        }
+        const valuesMap = groups.get(name)!;
+        if (!valuesMap.has(value)) {
+          valuesMap.set(value, []);
+        }
+        valuesMap.get(value)!.push(variant);
+      }
+    }
+
+    return Array.from(groups.entries()).map(([name, valuesMap]) => {
+      const attrSwatch = swatchMap.get(name);
+      return {
+        name,
+        displayType: attrSwatch?.displayType || 'DROPDOWN',
+        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
+          const optSwatch = attrSwatch?.options.get(value);
+          return {
+            value,
+            swatchColor: optSwatch?.swatchColor,
+            swatchColor2: optSwatch?.swatchColor2,
+            swatchImageUrl: optSwatch?.swatchImageUrl,
+            variants: variantList,
+          };
+        }),
+      };
+    });
+  }, [variants, swatchMap]);
+
+  // Get currently selected attribute values
+  const selectedOptions = useMemo(() => {
+    if (!selectedVariant) return new Map<string, string>();
+    const opts = getVariantOptions(selectedVariant);
+    return new Map(opts.map(({ name, value }) => [name, value]));
+  }, [selectedVariant]);
+
+  // Find the variant that matches all selected attributes
+  function findMatchingVariant(
+    attributeName: string,
+    newValue: string
+  ): ProductVariant | undefined {
+    const nextSelection = new Map(selectedOptions);
+    nextSelection.set(attributeName, newValue);
+
+    return variants.find((v) => {
+      const opts = getVariantOptions(v);
+      return Array.from(nextSelection.entries()).every(([name, value]) =>
+        opts.some((o) => o.name === name && o.value === value)
+      );
+    });
+  }
+
+  if (attributeGroups.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {attributeGroups.map((group) => (
+        <div key={group.name}>
+          <label className="placard mb-3 block font-sans">
+            {group.name}
+            {selectedOptions.get(group.name) && (
+              <span className="text-foreground ms-1">— {selectedOptions.get(group.name)}</span>
+            )}
+          </label>
+          <div className="flex flex-wrap gap-x-2 gap-y-3">
+            {group.values.map(
+              ({
+                value,
+                swatchColor,
+                swatchColor2,
+                swatchImageUrl,
+                variants: matchingVariants,
+              }) => {
+                const isSelected = selectedOptions.get(group.name) === value;
+                const matchedVariant = findMatchingVariant(group.name, value);
+                const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+
+                // Color swatch rendering
+                if (group.displayType === 'COLOR_SWATCH' && swatchColor) {
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      disabled={!isAvailable}
+                      title={value}
+                      onClick={() => {
+                        const variant = matchedVariant || matchingVariants[0];
+                        if (variant) onVariantChange(variant);
+                      }}
+                      className={cn(
+                        'relative h-9 w-9 border transition-colors',
+                        isSelected
+                          ? 'border-foreground'
+                          : isAvailable
+                            ? 'border-border hover:border-foreground'
+                            : 'cursor-not-allowed opacity-40'
+                      )}
+                      style={{
+                        background: swatchColor2
+                          ? `linear-gradient(135deg, ${swatchColor} 50%, ${swatchColor2} 50%)`
+                          : swatchColor,
+                      }}
+                    >
+                      {isSelected && (
+                        <span
+                          aria-hidden="true"
+                          className="bg-accent absolute -bottom-2 start-1/2 h-1 w-1 -translate-x-1/2 rounded-full rtl:translate-x-1/2"
+                        />
+                      )}
+                      {!isAvailable && (
+                        <span
+                          className="bg-muted-foreground block h-full w-full opacity-50"
+                          style={{
+                            backgroundImage:
+                              'linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%)',
+                          }}
+                        />
+                      )}
+                    </button>
+                  );
+                }
+
+                // Image swatch rendering
+                if (group.displayType === 'IMAGE_SWATCH' && swatchImageUrl) {
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      disabled={!isAvailable}
+                      title={value}
+                      onClick={() => {
+                        const variant = matchedVariant || matchingVariants[0];
+                        if (variant) onVariantChange(variant);
+                      }}
+                      className={cn(
+                        'relative h-10 w-10 overflow-visible border transition-colors',
+                        isSelected
+                          ? 'border-foreground'
+                          : isAvailable
+                            ? 'border-border hover:border-foreground'
+                            : 'cursor-not-allowed opacity-40'
+                      )}
+                    >
+                      <img
+                        src={swatchImageUrl}
+                        alt={value}
+                        className="h-full w-full object-cover"
+                      />
+                      {isSelected && (
+                        <span
+                          aria-hidden="true"
+                          className="bg-accent absolute -bottom-2 start-1/2 h-1 w-1 -translate-x-1/2 rounded-full rtl:translate-x-1/2"
+                        />
+                      )}
+                    </button>
+                  );
+                }
+
+                // Default button rendering (BUTTON, DROPDOWN, or fallback)
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    disabled={!isAvailable}
+                    onClick={() => {
+                      const variant = matchedVariant || matchingVariants[0];
+                      if (variant) onVariantChange(variant);
+                    }}
+                    className={cn(
+                      'relative min-h-11 border px-4 py-2.5 text-[0.8125rem] transition-colors',
+                      isSelected
+                        ? 'border-foreground text-foreground'
+                        : isAvailable
+                          ? 'border-border bg-surface text-foreground hover:border-foreground'
+                          : 'border-border text-muted-foreground cursor-not-allowed line-through opacity-40'
+                    )}
+                  >
+                    {value}
+                    {isSelected && (
+                      <span
+                        aria-hidden="true"
+                        className="bg-accent absolute -bottom-2 start-1/2 h-1 w-1 -translate-x-1/2 rounded-full rtl:translate-x-1/2"
+                      />
+                    )}
+                  </button>
+                );
+              }
+            )}
+          </div>
+        </div>
+      ))}
+
+      {/* Variant-specific info */}
+      {selectedVariant && (
+        <div className="text-muted-foreground tabular flex items-center gap-3 pt-1 text-[0.6875rem] tracking-[0.08em]">
+          {selectedVariant.price && (
+            <span>
+              {
+                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
+                  currency,
+                }) as string
+              }
+            </span>
+          )}
+          <span>{getTranslatedStockStatus(selectedVariant.inventory, t)}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getTranslatedStockStatus(
+  inventory: InventoryInfo | null | undefined,
+  t: (key: string) => string
+): string {
+  if (!inventory) return t('outOfStock');
+  const { trackingMode, inStock, available } = inventory;
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
+  return t('availableInStock').replace('{available}', String(available));
+}

package/templates/nextjs/designs/passepartout/ui/shared/fly-to-cart.ts

@@ -0,0 +1,85 @@
+/**
+ * "Fly to cart" — a small round thumbnail of the product lifts off from the
+ * image and drifts into the header cart icon, which then bumps.
+ *
+ * RTL gotcha: next/image renders its <img> with `inset: 0`; a naive clone
+ * keeps that, and in an RTL document an over-constrained left+right resolves
+ * to RIGHT — pinning the clone to the wrong edge. `inset: auto` first.
+ *
+ * Pure presentation; no-ops under prefers-reduced-motion or when either end
+ * of the flight is missing.
+ */
+export function flyToCart(source: HTMLElement | null) {
+  if (!source || typeof document === 'undefined') return;
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const target = document.getElementById('cart-anchor');
+  if (!target) return;
+
+  const img = source.querySelector('img') ?? source;
+  const from = img.getBoundingClientRect();
+  const to = target.getBoundingClientRect();
+  if (from.width === 0 || to.width === 0) return;
+
+  const SIZE = 64;
+  const startX = from.left + from.width / 2 - SIZE / 2;
+  const startY = from.top + from.height / 2 - SIZE / 2;
+
+  const clone = img.cloneNode(true) as HTMLElement;
+  Object.assign(clone.style, {
+    inset: 'auto', // kill next/image's inset:0 BEFORE top/left (RTL right-wins)
+    position: 'fixed',
+    top: `${startY}px`,
+    left: `${startX}px`,
+    width: `${SIZE}px`,
+    height: `${SIZE}px`,
+    borderRadius: '9999px',
+    objectFit: 'cover',
+    zIndex: '9999',
+    pointerEvents: 'none',
+    margin: '0',
+    border: '1px solid hsl(38 18% 88%)',
+    boxShadow: '0 10px 24px -10px hsl(28 30% 22% / 0.45)',
+    background: '#fff',
+  });
+  document.body.appendChild(clone);
+
+  const dx = to.left + to.width / 2 - (startX + SIZE / 2);
+  const dy = to.top + to.height / 2 - (startY + SIZE / 2);
+
+  const flight = clone.animate(
+    [
+      { transform: 'translate(0, 0) scale(0.6)', opacity: 0 },
+      { transform: 'translate(0, -14px) scale(1)', opacity: 1, offset: 0.18 },
+      {
+        transform: `translate(${dx * 0.55}px, ${dy * 0.55 - 56}px) scale(0.75)`,
+        opacity: 1,
+        offset: 0.62,
+      },
+      { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },
+    ],
+    { duration: 750, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }
+  );
+
+  const land = () => {
+    clone.remove();
+    target.classList.add('cart-bump');
+    window.setTimeout(() => target.classList.remove('cart-bump'), 450);
+  };
+  flight.onfinish = land;
+  // Failsafe — never leave a stray clone in the DOM (tab switch, WAAPI hiccup)
+  window.setTimeout(() => {
+    if (clone.isConnected) land();
+  }, 1100);
+}
+
+/** Picks the first visible element matching the selector — for PDPs that
+ *  render separate mobile/desktop galleries. */
+export function firstVisible(selector: string): HTMLElement | null {
+  if (typeof document === 'undefined') return null;
+  for (const el of document.querySelectorAll<HTMLElement>(selector)) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) return el;
+  }
+  return null;
+}

package/templates/nextjs/designs/passepartout/ui/shared/loading-spinner.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-1.5 w-1.5',
+  md: 'h-2 w-2',
+  lg: 'h-2.5 w-2.5',
+};
+
+/**
+ * The breathing dot — a single brass dot pulsing opacity 0.3 → 1.
+ * A spinner, however styled, still spins; the dot is the only loading
+ * state consistent with a site where motion confirms touch.
+ */
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const t = useTranslations('common');
+  return (
+    <div
+      className={cn('breathing-dot', sizeClasses[size], className)}
+      role="status"
+      aria-label={t('loading')}
+    >
+      <span className="sr-only">{t('loading')}</span>
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/cart/cart-bundle-offer.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface CartBundleOfferCardProps {
+  offer: CartBundleOfferType;
+  cartId: string;
+  onAdd: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — bundle offer card on the cart page: offered products with
+ * original vs. discounted prices + add-bundle button; offers come from
+ * useCartPage().bundles.
+ */
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [adding, setAdding] = useState(false);
+
+  const offered = offer.offeredProducts;
+
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
+
+  async function handleAdd() {
+    if (adding) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      // No variant selections in the default template — products with
+      // variants are best handled with a dedicated picker per offered item.
+      await client.addBundleToCart(cartId, offer.id);
+      onAdd();
+    } catch (err) {
+      console.error('Failed to add bundle:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <article className={cn(className)}>
+      <h4>{offer.name}</h4>
+      {offer.description && <p>{offer.description}</p>}
+
+      <ul>
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              {/* `relative` + fixed box are layout-critical for next/image fill */}
+              <span className="relative block h-12 w-12">
+                {imageUrl ? <Image src={imageUrl} alt={p.name} fill sizes="48px" /> : null}
+              </span>
+              <span>{p.name}</span>
+              <s>{formatPrice(parseFloat(p.originalPrice), { currency }) as string}</s>
+              <span>{formatPrice(parseFloat(p.discountedPrice), { currency }) as string}</span>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="flex items-center gap-2">
+        <s>{formatPrice(totalOriginal, { currency }) as string}</s>
+        <span>{formatPrice(totalDiscounted, { currency }) as string}</span>
+        <span>-{discountLabel}</span>
+        <button type="button" onClick={handleAdd} disabled={adding}>
+          {adding ? t('addingBundle') : t('addBundleItem')}
+        </button>
+      </div>
+    </article>
+  );
+}

package/templates/nextjs/ui-canvas/cart/cart-item.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartItem as CartItemType } from 'brainerce';
+import { getCartItemImage, formatPrice } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — single cart line: image, name, variant, unit price, quantity
+ * controls, remove, line total; the `item` prop comes from useCartPage().cart.
+ */
+export function CartItem({ item, onUpdate, className }: CartItemProps) {
+  const t = useTranslations('common');
+  const td = useTranslations('productDetail');
+  const currency = useCurrency();
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const productName = item.product.name;
+  const imageUrl = getCartItemImage(item);
+  const variantName = item.variant?.name;
+  const unitPrice = parseFloat(item.unitPrice);
+  const lineTotal = unitPrice * item.quantity;
+
+  async function handleQuantityChange(newQuantity: number) {
+    if (newQuantity < 1 || updating) return;
+
+    try {
+      setUpdating(true);
+      const client = getClient();
+      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to update quantity:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove item:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  return (
+    <div className={cn('flex items-start gap-4', className)}>
+      {/* Image — `relative` + fixed box are layout-critical for next/image fill */}
+      <div className="relative h-20 w-20">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={productName} fill sizes="80px" />
+        ) : (
+          <span className="sr-only">{productName}</span>
+        )}
+      </div>
+
+      {/* Details */}
+      <div>
+        <h3>{productName}</h3>
+
+        {/* Variant name */}
+        {variantName && <p>{variantName}</p>}
+
+        {/* Unit price */}
+        <p>{formatPrice(unitPrice, { currency }) as string}</p>
+
+        {/* Quantity controls */}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              aria-label={td('decreaseQuantity')}
+            >
+              -
+            </button>
+            <span aria-live="polite">
+              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating}
+              aria-label={td('increaseQuantity')}
+            >
+              +
+            </button>
+          </div>
+
+          <button type="button" onClick={handleRemove} disabled={removing}>
+            {removing ? t('removing') : t('remove')}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <span>{formatPrice(lineTotal, { currency }) as string}</span>
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/cart/cart-nudges.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type { CartNudge } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface CartNudgesProps {
+  nudges: CartNudge[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — discount-rule nudges on the cart page ("add X more for Y");
+ * texts come from useCartPage().cart.nudges.
+ */
+export function CartNudges({ nudges, className }: CartNudgesProps) {
+  if (nudges.length === 0) return null;
+
+  return (
+    <ul className={cn(className)} aria-label="Cart suggestions">
+      {nudges.map((nudge) => (
+        <li key={nudge.ruleId}>{nudge.text}</li>
+      ))}
+    </ul>
+  );
+}