create-brainerce-store 1.51.0 → 1.52.1

package/templates/nextjs/designs/passepartout/ui/layout/cart-link.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useCart } from '@/core/providers/store-provider';
-
-const CartIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <circle cx="9" cy="21" r="1" />
-    <circle cx="20" cy="21" r="1" />
-    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
-  </svg>
-);
-
-/**
- * Header cart link with a live item-count badge. Also the landing pad for
- * the fly-to-cart animation (`#cart-anchor` + `.cart-bump`).
- */
-export function CartLink() {
-  const { itemCount } = useCart();
-
-  return (
-    <a
-      id="cart-anchor"
-      href="/cart"
-      aria-label="Cart"
-      className="text-muted-foreground hover:text-foreground relative inline-flex h-9 w-9 items-center justify-center transition-colors"
-    >
-      <CartIcon className="h-5 w-5" />
-      {itemCount > 0 && (
-        <span className="bg-primary text-primary-foreground tabular absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.625rem] font-semibold leading-none">
-          {itemCount}
-        </span>
-      )}
-    </a>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/faq-section.tsx

@@ -1,103 +0,0 @@
-/**
- * FAQ accordion — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Two render branches:
- *   1. `faq` has items → accordion of question/answer pairs
- *   2. `faq` is null OR has no items → friendly empty state with a contact
- *      CTA, so the /faq page never looks broken before the merchant seeds.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const t = useTranslations('content');
-  const [openIdx, setOpenIdx] = React.useState<number | null>(0);
-
-  const items = faq?.data?.items ?? [];
-  const heading = faq?.name || t('faqTitle');
-
-  // Empty state — runs when the merchant hasn't created a FAQ row yet,
-  // or the row exists but contains no items. Keep the page non-empty and
-  // give the visitor a path to contact instead of a blank screen.
-  if (!faq || items.length === 0) {
-    return (
-      <section className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground mb-3 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-        <p className="text-muted-foreground mb-6 text-sm sm:text-base">
-          <strong className="text-foreground">{t('faqEmptyTitle')}</strong>
-          <br />
-          {t('faqEmptyBody')}
-        </p>
-        <a
-          href="/contact"
-          className="bg-primary text-primary-foreground inline-flex items-center justify-center rounded-none px-4 py-2 text-sm font-medium transition-colors hover:opacity-90"
-        >
-          {t('faqContactCta')}
-        </a>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{heading}</h1>
-      <ul className="border-border divide-border divide-y rounded-none border">
-        {items.map((item, idx) => {
-          const open = openIdx === idx;
-          return (
-            <li key={idx}>
-              <button
-                type="button"
-                onClick={() => setOpenIdx(open ? null : idx)}
-                aria-expanded={open}
-                className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 p-4 text-start transition-colors"
-              >
-                <span className="text-foreground text-sm font-medium sm:text-base">
-                  {item.question}
-                </span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className={`text-muted-foreground h-4 w-4 transition-transform ${
-                    open ? 'rotate-180' : ''
-                  }`}
-                  aria-hidden="true"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                </svg>
-              </button>
-              {open ? (
-                <div
-                  className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed"
-                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
-                />
-              ) : null}
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/site-footer.tsx

@@ -1,159 +0,0 @@
-/**
- * Storefront footer — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures the footer in the Brainerce dashboard under
- *   Sell → Content → Footer
- *
- * Renders a brand block (store-name + social icons), the merchant's link
- * columns, and a copyright bar. Social icons are inline SVGs so the
- * scaffold stays dependency-free; unknown platforms fall back to a
- * letter avatar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — we render a minimal fallback so the layout never
- *   crashes when the merchant hasn't seeded the footer yet.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface SiteFooterProps {
-  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
-  footer: Content<'FOOTER'> | null;
-  /** Store name shown in the brand block + fallback copyright. */
-  storeName?: string;
-}
-
-type SvgComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-const InstagramIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
-    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
-  </svg>
-);
-
-const FacebookIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
-    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-  </svg>
-);
-
-const XIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-  </svg>
-);
-
-const LinkedInIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" />
-  </svg>
-);
-
-const YouTubeIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-  </svg>
-);
-
-const TikTokIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z" />
-  </svg>
-);
-
-const SOCIAL_ICONS: Record<string, SvgComponent> = {
-  instagram: InstagramIcon,
-  facebook: FacebookIcon,
-  x: XIcon,
-  twitter: XIcon,
-  linkedin: LinkedInIcon,
-  youtube: YouTubeIcon,
-  tiktok: TikTokIcon,
-};
-
-export function SiteFooter({ footer, storeName }: SiteFooterProps) {
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
-    return (
-      <footer className="border-border bg-background text-muted-foreground mt-16 border-t py-8">
-        <div className="mx-auto max-w-7xl px-4 text-center text-[0.6875rem] tracking-[0.08em] sm:px-6 lg:px-8">
-          © {year} {brandLabel}. All rights reserved.
-        </div>
-      </footer>
-    );
-  }
-
-  return (
-    <footer className="border-border bg-background mt-16 border-t">
-      <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
-          <div className="md:col-span-4">
-            <a href="/" className="text-foreground font-serif text-lg font-normal">
-              {brandLabel}
-            </a>
-            {social.length > 0 ? (
-              <div className="mt-4 flex flex-wrap items-center gap-2">
-                {social.map((entry, idx) => {
-                  const key = entry.platform.toLowerCase();
-                  const Icon = SOCIAL_ICONS[key];
-                  return (
-                    <a
-                      key={`${entry.platform}-${idx}`}
-                      href={entry.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={entry.platform}
-                      className="border-border hover:border-foreground hover:text-foreground text-muted-foreground inline-flex h-9 w-9 items-center justify-center border transition-colors"
-                    >
-                      {Icon ? (
-                        <Icon className="h-4 w-4" strokeWidth={1.5} />
-                      ) : (
-                        <span className="text-xs font-medium uppercase">
-                          {entry.platform.charAt(0)}
-                        </span>
-                      )}
-                    </a>
-                  );
-                })}
-              </div>
-            ) : null}
-          </div>
-
-          {columns.length > 0 ? (
-            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
-              {columns.map((col, idx) => (
-                <div key={`${col.title}-${idx}`}>
-                  <h3 className="placard mb-4 font-sans">{col.title}</h3>
-                  <ul className="space-y-2">
-                    {col.links.map((link, linkIdx) => (
-                      <li key={`${link.url}-${linkIdx}`}>
-                        <a
-                          href={link.url}
-                          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                        >
-                          {link.label}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          ) : null}
-        </div>
-
-        <div className="border-border text-muted-foreground mt-12 flex flex-col items-center justify-between gap-2 border-t pt-6 text-[0.6875rem] tracking-[0.08em] sm:flex-row">
-          <span>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</span>
-        </div>
-      </div>
-    </footer>
-  );
-}

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

@@ -1,155 +0,0 @@
-/**
- * Merchant-controlled site header.
- *
- * The merchant configures the header in the Brainerce dashboard under
- *   Sell → Content → Header
- *
- * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
- * with a `<details>` mobile menu that works without client-side JS. Everything
- * is generic — do NOT hardcode nav labels or logo paths here; the merchant
- * edits them in the dashboard and the change propagates within ~5 minutes.
- *
- * If `header` is null (404 from the API, or the merchant deleted the row),
- * we render a minimal static fallback with just the brand label and cart link
- * so the layout never collapses. New stores ship with a seeded HEADER row
- * from the backend (StoresService.seedDefaultContent), so the populated
- * branch is the common case.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { HeaderAccount } from './header-account';
-import { CartLink } from '@/ui/layout/cart-link';
-<% if (i18nEnabled) { %>
-import { LanguageSwitcher } from '@/ui/layout/language-switcher';
-<% } %>
-
-interface SiteHeaderProps {
-  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
-  header: Content<'HEADER'> | null;
-  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
-  storeName?: string;
-}
-
-const MenuIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <line x1="4" y1="6" x2="20" y2="6" />
-    <line x1="4" y1="12" x2="20" y2="12" />
-    <line x1="4" y1="18" x2="20" y2="18" />
-  </svg>
-);
-
-export function SiteHeader({ header, storeName }: SiteHeaderProps) {
-  const data = header?.data;
-  const logo = data?.logo;
-  const navItems = data?.navItems ?? [];
-  const cta = data?.cta;
-  const brandLabel = logo?.alt || storeName || 'Store';
-
-  // Static fallback — runs when the Content API returned null (no HEADER row
-  // for this store yet, or fetch failed). Keep the brand + cart so the page
-  // always has a clickable home link and entry to checkout, but no nav since
-  // the merchant hasn't defined any items.
-  if (!header) {
-    return (
-      <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
-        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-          <a href="/" className="font-serif text-lg font-normal" aria-label={brandLabel}>
-            {brandLabel}
-          </a>
-          <div className="flex items-center gap-2">
-            <% if (i18nEnabled) { %>
-            <LanguageSwitcher />
-            <% } %>
-            <HeaderAccount />
-            <CartLink />
-          </div>
-        </div>
-      </header>
-    );
-  }
-
-  return (
-    <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
-      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-        <a
-          href="/"
-          className="flex items-center gap-2 font-serif font-normal"
-          aria-label={brandLabel}
-        >
-          {logo ? (
-            // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
-            <img src={logo.src} alt={logo.alt} className="h-7 w-auto" />
-          ) : (
-            <span className="text-lg">{brandLabel}</span>
-          )}
-        </a>
-
-        {navItems.length > 0 ? (
-          <nav className="hidden items-center gap-10 md:flex">
-            {navItems.map((item, idx) => (
-              <a
-                key={`${item.url}-${idx}`}
-                href={item.url}
-                className="text-muted-foreground hover:text-foreground group relative text-xs transition-colors"
-              >
-                {item.label}
-                <span className="bg-foreground absolute -bottom-0.5 start-0 end-0 h-px origin-right scale-x-0 transition-transform duration-200 group-hover:scale-x-100" />
-              </a>
-            ))}
-          </nav>
-        ) : null}
-
-        <div className="flex items-center gap-2">
-          {cta ? (
-            <a
-              href={cta.url}
-              className="bg-primary text-primary-foreground hidden items-center justify-center px-4 py-2 text-xs font-semibold transition-colors sm:inline-flex"
-            >
-              {cta.label}
-            </a>
-          ) : null}
-
-          <% if (i18nEnabled) { %>
-          <LanguageSwitcher />
-          <% } %>
-
-          <HeaderAccount />
-
-          <CartLink />
-
-          {navItems.length > 0 ? (
-            <details className="group relative md:hidden">
-              <summary className="text-muted-foreground hover:text-foreground inline-flex h-9 w-9 cursor-pointer list-none items-center justify-center transition-colors [&::-webkit-details-marker]:hidden">
-                <MenuIcon className="h-5 w-5" />
-                <span className="sr-only">Menu</span>
-              </summary>
-              <nav className="border-border bg-surface absolute end-0 top-full z-50 mt-2 w-56 overflow-hidden border">
-                <ul className="py-2">
-                  {navItems.map((item, idx) => (
-                    <li key={`m-${item.url}-${idx}`}>
-                      <a
-                        href={item.url}
-                        className="text-muted-foreground hover:text-foreground hover:bg-muted block px-4 py-3 text-sm transition-colors"
-                      >
-                        {item.label}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            </details>
-          ) : null}
-        </div>
-      </div>
-    </header>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/trust-icons.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useTranslations } from '@/core/lib/translations';
-
-const ICONS = {
-  truck: (
-    <path d="M1 8h11v8H1zM12 10h4l3 3v3h-7zM5.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM16.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
-  ),
-  shield: <path d="M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3z" />,
-  lock: (
-    <>
-      <rect x="5" y="11" width="14" height="9" />
-      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
-    </>
-  ),
-  gift: (
-    <>
-      <rect x="3" y="8" width="18" height="4" />
-      <path d="M5 12v8h14v-8M12 8v12M12 8s-4 0-5-2c-.7-1.4.5-3 2-3 2.5 0 3 5 3 5zM12 8s4 0 5-2c.7-1.4-.5-3-2-3-2.5 0-3 5-3 5z" />
-    </>
-  ),
-};
-
-/**
- * The Israeli trust row — four thin-stroke promises under the grid.
- * (משלוח מהיר · אחריות · תשלום מאובטח · אריזת מתנה)
- */
-export function TrustIcons() {
-  const t = useTranslations('home');
-  const items: Array<{ icon: keyof typeof ICONS; label: string }> = [
-    { icon: 'truck', label: t('trustShipping') },
-    { icon: 'shield', label: t('trustWarranty') },
-    { icon: 'lock', label: t('trustSecure') },
-    { icon: 'gift', label: t('trustGift') },
-  ];
-
-  return (
-    <div className="border-border grid grid-cols-2 gap-x-4 gap-y-8 border-y py-10 md:grid-cols-4">
-      {items.map((item) => (
-        <div key={item.icon} className="flex flex-col items-center gap-3 text-center">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={1.2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="text-accent h-7 w-7"
-            aria-hidden="true"
-          >
-            {ICONS[item.icon]}
-          </svg>
-          <span className="text-muted-foreground text-[0.6875rem] tracking-[0.08em]">
-            {item.label}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}

package/templates/nextjs/designs/passepartout/ui/layout/whatsapp-button.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { useTranslations } from '@/core/lib/translations';
-
-/**
- * Floating WhatsApp contact — a common e-commerce service convention.
- * Sits above the store-bot bubble on the end side (visually left in RTL).
- * WhatsApp green is kept deliberately: recognizability beats palette here.
- *
- * Renders ONLY when `NEXT_PUBLIC_WHATSAPP_PHONE` is set (digits, international
- * format without "+", e.g. 14155550123) — see `.env.local`. The pre-filled
- * message comes from the locale messages (`common.whatsappMessage`).
- */
-const PHONE = process.env.NEXT_PUBLIC_WHATSAPP_PHONE;
-
-export function WhatsAppButton() {
-  const t = useTranslations('common');
-
-  if (!PHONE) return null;
-
-  return (
-    <a
-      href={`https://wa.me/${PHONE}?text=${encodeURIComponent(t('whatsappMessage'))}`}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="WhatsApp"
-      className="fixed bottom-20 end-4 z-40 flex h-11 w-11 items-center justify-center rounded-full bg-[#25D366] text-white shadow-[0_8px_20px_-8px_rgba(0,0,0,0.4)] transition-transform hover:scale-105"
-    >
-      <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6" aria-hidden="true">
-        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.1-.198.05-.371-.025-.52-.074-.149-.668-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
-      </svg>
-    </a>
-  );
-}

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

@@ -1,111 +0,0 @@
-'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 sizeClasses = {
-  sm: 'text-sm',
-  md: 'text-base',
-  lg: 'text-[1.375rem]',
-};
-
-/**
- * Split a formatted price into currency symbol and digits so the symbol can
- * be set small and quiet — a discreet price tag ('₪ 1,240').
- * Falls back to the raw string when the shape is unexpected.
- */
-function splitFormatted(formatted: string): { pre: string; num: string; post: string } | null {
-  const m = formatted.match(/^([^\d-]*)(-?\d[\d.,  \s]*)([^\d]*)$/);
-  if (!m) return null;
-  return { pre: m[1].trim(), num: m[2].trim(), post: m[3].trim() };
-}
-
-function PriceTag({
-  amount,
-  currency,
-  digitsClass,
-  symbolClass,
-  raised,
-  className,
-}: {
-  amount: number;
-  currency: string;
-  digitsClass: string;
-  symbolClass: string;
-  /** PDP-scale auction-catalogue treatment: symbol raised 0.15em. */
-  raised?: boolean;
-  className?: string;
-}) {
-  const formatted = formatPrice(amount, { currency }) as string;
-  const parts = splitFormatted(formatted);
-
-  if (!parts) {
-    return <span className={cn('tabular', digitsClass, className)}>{formatted}</span>;
-  }
-
-  const symbol = cn(symbolClass, raised && 'relative -top-[0.15em]');
-
-  return (
-    <span className={cn('tabular inline-flex items-baseline gap-1', className)}>
-      {parts.pre ? <span className={symbol}>{parts.pre}</span> : null}
-      <span className={digitsClass}>{parts.num}</span>
-      {parts.post ? <span className={symbol}>{parts.post}</span> : null}
-    </span>
-  );
-}
-
-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 raised = size === 'lg';
-
-  return (
-    <span className={cn('inline-flex flex-wrap items-baseline gap-2', sizeClasses[size], className)}>
-      {isOnSale ? (
-        <>
-          <PriceTag
-            amount={sale!}
-            currency={currencyCode}
-            digitsClass="text-destructive"
-            symbolClass="text-accent text-[0.75em]"
-            raised={raised}
-          />
-          <PriceTag
-            amount={basePrice}
-            currency={currencyCode}
-            digitsClass="text-muted-foreground line-through"
-            symbolClass="text-muted-foreground text-[0.75em]"
-            className="text-[0.85em] opacity-60"
-          />
-        </>
-      ) : (
-        <PriceTag
-          amount={basePrice}
-          currency={currencyCode}
-          digitsClass="text-foreground"
-          symbolClass="text-muted-foreground text-[0.75em]"
-          raised={raised}
-        />
-      )}
-    </span>
-  );
-}