@salifbiaye/create-boutique 0.5.0 → 0.7.0

package/templates/storefront/src/modules/ub/arena.tsx

@@ -0,0 +1,182 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { type P, discountLabel, discountOf, heroImageOf, imageOf, priceOf, splitTitle, spaced } from "./home-kit"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Arène » (Jeux 1, theme.json → "home": "arena") : clair, bleu roi et flamme, coupes en biais. Hero : texte + le visuel entier dans un grand panneau à coin coupé.
+ * Hero (mot mis en avant en dégradé de flamme, chronomètre = fin de l'offre), podium (les 3 plus fortes remises :
+ * or au centre, argent, bronze), couloirs de course (une offre par couloir), bande « record à battre ».
+ * Aucun nom ni symbole protégé (pas d'anneaux, pas « olympique »). CSS : styles/ub/arena.css.
+ */
+
+export function ArenaHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-ar-hero">
+      <div className="ub-wrap ub-ar-hero__in">
+        <div className="ub-ar-hero__text">
+          {hero.eyebrow && (
+            <p className="ub-ar-kicker">
+              <span className="ub-ar-flame" aria-hidden />
+              {hero.eyebrow}
+            </p>
+          )}
+          <h1 className="ub-ar-title">
+            {before} {hl && <span className="ub-ar-title__hl">{hl}</span>}{spaced(after)}
+          </h1>
+          {hero.sub && <p className="ub-ar-sub">{hero.sub}</p>}
+          <div className="ub-ar-actions">
+            <Link href="/store" className="ub-ar-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <a href="#podium" className="ub-ar-btn ub-ar-btn--ghost">
+                {hero.cta2}
+              </a>
+            )}
+          </div>
+          {/* Chronomètre : remise + temps restant */}
+          <div className="ub-ar-chrono">
+            {off && (
+              <p className="ub-ar-chrono__off">
+                <small>{hero.bubble?.[0]}</small>
+                <b>{off}</b>
+              </p>
+            )}
+            {campaign.showCountdown !== false && (
+              <div className="ub-ar-chrono__time">
+                <small>{t("arena.chrono")}</small>
+                <CampaignCountdown endsAt={campaign.endsAt} />
+              </div>
+            )}
+          </div>
+        </div>
+        {/* Grand panneau à coin coupé : le visuel entier (jamais recadré ni agrandi) */}
+        <figure className="ub-ar-poster">
+          <span className="ub-ar-poster__img">{image ? <FadeImg src={image} alt="" priority /> : <span className="ub-ph" />}</span>
+        </figure>
+      </div>
+    </section>
+  )
+}
+
+/** Podium : les 3 plus fortes remises, l'or au centre (plus haut), l'argent à gauche, le bronze à droite. */
+export function ArenaPodium({ products }: { products: P[] }) {
+  const top = products.filter(imageOf).slice(0, 3)
+  if (top.length < 3) return null
+  const steps = [
+    { p: top[1], place: 2, cls: "is-silver" },
+    { p: top[0], place: 1, cls: "is-gold" },
+    { p: top[2], place: 3, cls: "is-bronze" },
+  ]
+  return (
+    <section className="ub-ar-section" id="podium">
+      <div className="ub-wrap">
+        <header className="ub-ar-head">
+          <p className="ub-ar-kicker">{t("arena.podiumKicker")}</p>
+          <h2 className="ub-ar-h2">{t("arena.podium")}</h2>
+        </header>
+        <ol className="ub-ar-podium">
+          {steps.map(({ p, place, cls }) => {
+            const { price, onSale } = priceOf(p)
+            return (
+              <li key={p.id} className={cls}>
+                <Link href={`/products/${p.handle}`} className="ub-ar-step">
+                  <span className="ub-ar-step__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  <span className="ub-ar-step__name">{p.title}</span>
+                  {price && (
+                    <span className="ub-ar-price">
+                      <b>{price.calculated_price}</b>
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                  <span className="ub-ar-step__block">
+                    <span className="ub-ar-medal">{place}</span>
+                    <small>{t(`arena.place${place}`)}</small>
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+/** Couloirs de course : une offre par couloir, la remise en « temps » à l'arrivée. */
+export function ArenaLanes({ products, title }: { products: P[]; title: string }) {
+  const items = products.filter(imageOf).slice(3, 11)
+  if (!items.length) return null
+  return (
+    <section className="ub-ar-section">
+      <div className="ub-wrap">
+        <header className="ub-ar-head ub-ar-head--row">
+          <h2 className="ub-ar-h2">{title}</h2>
+          <Link href="/store" className="ub-ar-more">
+            {t("arena.all")} <Icon name="arrowRight" />
+          </Link>
+        </header>
+        <ol className="ub-ar-lanes">
+          {items.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            const pct = Math.round(discountOf(p) * 100)
+            return (
+              <li key={p.id}>
+                <Link href={`/products/${p.handle}`} className="ub-ar-lane">
+                  <span className="ub-ar-lane__n">{i + 1}</span>
+                  <span className="ub-ar-lane__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  <span className="ub-ar-lane__name">{p.title}</span>
+                  <span className="ub-ar-lane__track" aria-hidden>
+                    <i style={{ width: `${Math.max(12, pct * 1.6)}%` }} />
+                  </span>
+                  {price && (
+                    <span className="ub-ar-price">
+                      <b>{price.calculated_price}</b>
+                      {onSale && pct > 0 && <em>-{pct}%</em>}
+                    </span>
+                  )}
+                </Link>
+              </li>
+            )
+          })}
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+/** Record à battre : bande promo, ligne d'arrivée. */
+export function ArenaRecord({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  return (
+    <section className="ub-ar-section">
+      <div className="ub-wrap">
+        <div className="ub-ar-record">
+          <span className="ub-ar-record__finish" aria-hidden />
+          <div>
+            {promo?.eyebrow && <p className="ub-ar-kicker">{promo.eyebrow}</p>}
+            <h2 className="ub-ar-h2">{promo?.title ?? campaign.hero.title}</h2>
+            {promo?.text && <p className="ub-ar-lead">{promo.text}</p>}
+          </div>
+          <Link href="/store" className="ub-ar-btn">
+            {promo?.cta ?? campaign.hero.cta} <Icon name="arrowRight" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/campaign-blocks.tsx

@@ -5,6 +5,7 @@ import { t } from "@lib/boutique/i18n"
 import Button from "./button"
 import Countdown from "./countdown"
 import { Icon, type IconName } from "./icons"
+import FadeImg from "./fade-img"
 
 /** Titre avec le mot mis en couleur : `highlight` est retrouvé dans `title` (sinon ajouté à la fin), rendu en <em>. Jamais de HTML. */
 export function HighlightedTitle({ title, highlight }: { title: string; highlight?: string }) {
@@ -99,7 +100,7 @@ export function Hero({ campaign }: { campaign: Campaign }) {
           <div className="ub-hero__blob" />
           {image ? (
             // eslint-disable-next-line @next/next/no-img-element
-            <img className="ub-hero__photo" src={image} alt={t("hero.photo")} fetchPriority="high" decoding="async" />
+            <FadeImg className="ub-hero__photo" src={image} alt={t("hero.photo")} priority />
           ) : (
             <div className="ub-hero__photo ub-ph" role="img" aria-label={t("hero.photo")} />
           )}
@@ -173,7 +174,7 @@ export function PromoBanner({ campaign, fallbackImage }: { campaign: Campaign; f
           {promoImage ? (
             <div className="ub-promo__media" style={{ display: "block", overflow: "hidden" }}>
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={promoImage} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+              <FadeImg src={promoImage} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
             </div>
           ) : (
             <div className="ub-promo__media ub-ph" />

package/templates/storefront/src/modules/ub/campaign-ended.tsx

@@ -2,26 +2,40 @@ import { getBoutique } from "@lib/boutique/config"
 import { t } from "@lib/boutique/i18n"
 import Button from "./button"
 
-/** Page « This sale has ended » + lien vers la campagne suivante du client (autre boutique du projet). */
-export default function CampaignEnded({ nextUrl }: { nextUrl?: string }) {
+/**
+ * Site fermé (admin → Campagnes → Hors ligne) : page affichée à la place de la boutique.
+ * Restent accessibles : compte, suivi de commande, panier (un client en train de payer finit sa commande).
+ */
+export default function BoutiqueClosed({ nextUrl }: { nextUrl?: string }) {
   const { storeName } = getBoutique()
 
   return (
-    <section className="ub-hero">
-      <div className="ub-wrap" style={{ padding: "96px 24px", textAlign: "center", display: "grid", gap: 24, justifyItems: "center" }}>
-        <h1 className="ub-hero__title ub-head">{t("ended.title")}</h1>
-        <p className="ub-hero__sub">{t("ended.text", { storeName })}</p>
-        {nextUrl ? (
+    <section className="ub-closed">
+      {/* Page fermée : ne pas l'indexer (React place la balise dans <head>) */}
+      <meta name="robots" content="noindex" />
+      <div className="ub-wrap ub-closed__in">
+        <span className="ub-closed__icon" aria-hidden>
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="5" y="11" width="14" height="9" rx="2" />
+            <path d="M8 11V8a4 4 0 0 1 8 0v3" />
+          </svg>
+        </span>
+        <h1 className="ub-closed__title ub-head">{t("closed.title")}</h1>
+        <p className="ub-closed__text">{t("closed.text", { storeName })}</p>
+        {nextUrl && (
           // Lien absolu vers une autre boutique du même projet (URL connue par project.json).
           <a className="ub-btn ub-btn--primary" href={nextUrl}>
-            <span>{t("ended.cta")}</span>
+            <span>{t("closed.cta")}</span>
           </a>
-        ) : (
-          <p className="ub-hero__sub">{t("ended.soon")}</p>
         )}
-        <Button href="/account" variant="ghost">
-          {t("nav.account")}
-        </Button>
+        <div className="ub-closed__actions">
+          <Button href="/order/track" variant="ghost">
+            {t("closed.track")}
+          </Button>
+          <Button href="/account" variant="ghost">
+            {t("nav.account")}
+          </Button>
+        </div>
       </div>
     </section>
   )

package/templates/storefront/src/modules/ub/cinema.tsx

@@ -6,6 +6,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
 import { Icon } from "./icons"
 import SurpriseButton from "./surprise-button"
 
@@ -36,6 +37,7 @@ export function CinemaHero({ campaign, next }: { campaign: Campaign; next: P[] }
 
   return (
     <section className="ub-cn-hero" style={image ? { ["--cn-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      {image && <HeroImage src={image} position="center" />}
       <div className="ub-wrap ub-cn-hero__in">
         <div className="ub-cn-hero__poster">
           {hero.eyebrow && <p className="ub-cn-tag">{hero.eyebrow}</p>}

package/templates/storefront/src/modules/ub/cookie-banner.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useEffect, useState } from "react"
+import { useT } from "@lib/boutique/i18n-client"
+
+const KEY = "ub_cookies"
+
+/**
+ * Bandeau cookies. Le site n'utilise que des cookies nécessaires (panier, connexion, boutique du panier) : la loi
+ * n'exige pas de consentement pour ceux-là, le bandeau informe et se ferme pour de bon (choix gardé dans le navigateur).
+ * Si un jour des cookies de mesure ou de publicité sont ajoutés : passer `optional` à true pour proposer
+ * « Accepter / Refuser », et ne charger ces outils que si localStorage[ub_cookies] === "all".
+ * Apparence : variables du thème (couleurs, police, arrondis) → s'accorde à chaque boutique. CSS : styles/ub/pages.css.
+ */
+export default function CookieBanner({ optional = false }: { optional?: boolean }) {
+  const t = useT()
+  const [open, setOpen] = useState(false)
+  const path = usePathname()
+
+  useEffect(() => {
+    try {
+      if (!localStorage.getItem(KEY)) setOpen(true)
+    } catch {
+      // stockage bloqué : on n'insiste pas
+    }
+  }, [])
+
+  const close = (choice: "necessary" | "all") => {
+    try {
+      localStorage.setItem(KEY, choice)
+    } catch {
+      // ignoré
+    }
+    setOpen(false)
+  }
+
+  // Jamais pendant le paiement : rien ne doit gêner ni recouvrir le bouton de commande
+  if (!open || path.startsWith("/checkout")) return null
+  return (
+    <aside className="ub-cookies" role="region" aria-label={t("cookies.title")}>
+      <div className="ub-cookies__text">
+        <b className="ub-cookies__title">{t("cookies.title")}</b>
+        <p>
+          {t(optional ? "cookies.textOptional" : "cookies.text")}{" "}
+          <Link href="/legal/privacy">{t("cookies.more")}</Link>
+        </p>
+      </div>
+      <div className="ub-cookies__actions">
+        {optional && (
+          <button type="button" className="ub-cookies__btn ub-cookies__btn--ghost" onClick={() => close("necessary")}>
+            {t("cookies.refuse")}
+          </button>
+        )}
+        <button type="button" className="ub-cookies__btn" onClick={() => close(optional ? "all" : "necessary")}>
+          {t(optional ? "cookies.accept" : "cookies.ok")}
+        </button>
+      </div>
+    </aside>
+  )
+}

package/templates/storefront/src/modules/ub/gala.tsx

@@ -6,6 +6,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
 import { Icon } from "./icons"
 import SurpriseButton from "./surprise-button"
 
@@ -31,6 +32,7 @@ export function GalaHero({ campaign }: { campaign: Campaign }) {
 
   return (
     <section className="ub-gl-hero" style={image ? { ["--gl-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      {image && <HeroImage src={image} position="right center" />}
       <div className="ub-gl-hero__sparkle" aria-hidden />
       <div className="ub-wrap ub-gl-hero__in">
         <div className="ub-gl-hero__text">

package/templates/storefront/src/modules/ub/grimoire.tsx

@@ -6,6 +6,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
 import { Icon } from "./icons"
 import SurpriseButton from "./surprise-button"
 
@@ -25,24 +26,27 @@ const priceOf = (p: P) => {
 const ARCANA = ["XIII", "XVIII", "XV"]
 
 export function GrimoireHero({ campaign }: { campaign: Campaign }) {
-  const { hero } = campaign
+  const { hero, promo } = campaign
   const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
   if (image) preload(image, { as: "image", fetchPriority: "high" })
   const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
+  const discount = hero.bubble?.[1] ? `-${String(hero.bubble[1]).replace(/^-/, "")}` : undefined
+  const badges = [promo?.seal, t("cinema.badgeStock"), t("cinema.badgeShipping")].filter(Boolean) as string[]
   const before = hl ? hero.title.slice(0, hero.title.indexOf(hl)).trim() : hero.title
   const after = hl ? hero.title.slice(hero.title.indexOf(hl) + hl.length).trim() : ""
 
   return (
     <section className="ub-gr-hero" style={image ? { ["--gr-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      {image && <HeroImage src={image} position="center 35%" />}
       <div className="ub-gr-hero__bg" aria-hidden />
       <div className="ub-wrap ub-gr-hero__in">
-        {hero.eyebrow && <p className="ub-gr-eyebrow">{hero.eyebrow}</p>}
-        <h1 className="ub-gr-title">
-          {before && <span className="ub-gr-title__line">{before}</span>}
-          {hl && <span className="ub-gr-title__line ub-gr-title__hl">{hl}</span>}
-          {after && <span className="ub-gr-title__line">{after}</span>}
-        </h1>
-        <div className="ub-gr-hero__foot">
+        <div className="ub-gr-hero__main">
+          {hero.eyebrow && <p className="ub-gr-eyebrow">{hero.eyebrow}</p>}
+          <h1 className="ub-gr-title">
+            {before && <span className="ub-gr-title__line">{before}</span>}
+            {hl && <span className="ub-gr-title__line ub-gr-title__hl">{hl}</span>}
+            {after && <span className="ub-gr-title__line">{after}</span>}
+          </h1>
           {hero.sub && <p className="ub-gr-sub">{hero.sub}</p>}
           <div className="ub-gr-actions">
             <Link href="/store" className="ub-gr-btn ub-gr-btn--solid">
@@ -56,6 +60,29 @@ export function GrimoireHero({ campaign }: { campaign: Campaign }) {
             <SurpriseButton event="halloween" label={t("fx.surprise.halloween")} />
           </div>
         </div>
+        {/* Étiquette de fiole : remise, offre, compte à rebours et arguments (remplit le côté droit) */}
+        <aside className="ub-gr-label">
+          <p className="ub-gr-label__kicker">{promo?.eyebrow ?? hero.eyebrow}</p>
+          {discount && (
+            <p className="ub-gr-label__big">
+              {hero.bubble?.[0] && <small>{hero.bubble[0]}</small>}
+              <b>{discount}</b>
+            </p>
+          )}
+          {promo?.title && <p className="ub-gr-label__title">{promo.title}</p>}
+          {campaign.showCountdown !== false && (
+            <div className="ub-gr-label__cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+          <ul className="ub-gr-label__list">
+            {badges.map((b) => (
+              <li key={b}>
+                <Icon name="sparkle" /> {b}
+              </li>
+            ))}
+          </ul>
+        </aside>
       </div>
     </section>
   )

package/templates/storefront/src/modules/ub/harvest.tsx

@@ -9,6 +9,7 @@ import { CampaignCountdown } from "./campaign-blocks"
 import { Icon, type IconName } from "./icons"
 
 import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
 /**
  * Accueil « Harvest » (thèmes Thanksgiving, theme.json → "home": "harvest") : structure différente de l'accueil
  * standard. Hero plein cadre avec titre condensé géant + mot manuscrit et bas en vague (« tache »), services en ligne,
@@ -42,7 +43,7 @@ export function HarvestHero({ campaign }: { campaign: Campaign }) {
 
   return (
     <section className="ub-hv-hero" style={image ? { ["--hv-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
-      {image && <div className="ub-hv-hero__bg" aria-hidden />}
+      {image && <HeroImage src={image} position="right center" className="ub-hv-hero__bg" />}
       <div className="ub-wrap ub-hv-hero__in">
         <div className="ub-hv-hero__text">
           {hero.eyebrow && <p className="ub-hv-eyebrow">{hero.eyebrow}</p>}

package/templates/storefront/src/modules/ub/hero-image.tsx

@@ -0,0 +1,14 @@
+import FadeImg from "./fade-img"
+
+/**
+ * Image de fond d'un hero, comme les photos produits : fond animé pendant le chargement, puis apparition en fondu
+ * (plus d'image qui s'affiche par morceaux). Chargée en priorité (préchargée par le hero). Aucune animation de zoom.
+ * Couche absolue derrière le contenu : le hero doit être en position relative avec `isolation: isolate`.
+ */
+export default function HeroImage({ src, position = "center", className = "" }: { src: string; position?: string; className?: string }) {
+  return (
+    <span className={`ub-heroimg${className ? ` ${className}` : ""}`} aria-hidden>
+      <FadeImg src={src} alt="" priority style={{ objectPosition: position }} />
+    </span>
+  )
+}

package/templates/storefront/src/modules/ub/home-kit.ts

@@ -0,0 +1,45 @@
+import type { Campaign } from "@lib/boutique/campaign"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+
+/** Petits outils communs aux accueils thématiques (Riviera, Sunset, Vestiaire, Training, Arène, Mosaïque). */
+export type P = HttpTypes.StoreProduct
+
+export const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+
+export function priceOf(p: P) {
+  const { cheapestPrice } = getProductPrice({ product: p })
+  return { price: cheapestPrice, onSale: cheapestPrice?.price_type === "sale" }
+}
+
+/** Remise (0 à 1) la plus forte parmi les variantes. */
+export function discountOf(p: P) {
+  return Math.max(
+    0,
+    ...(p.variants ?? []).map((v) => {
+      const c = v.calculated_price
+      return c?.original_amount && c.calculated_amount != null ? 1 - c.calculated_amount / c.original_amount : 0
+    })
+  )
+}
+
+/** Image du hero (URL absolue du stockage) ou rien. */
+export const heroImageOf = (campaign: Campaign) => {
+  const image = campaign.hero.image
+  return image && /^https?:\/\//.test(image) ? image : undefined
+}
+
+/** Titre coupé autour du mot mis en avant : avant / mot / après. */
+export function splitTitle(title: string, highlight?: string) {
+  const hl = highlight && title.includes(highlight) ? highlight : undefined
+  if (!hl) return { before: title, hl: undefined, after: "" }
+  const i = title.indexOf(hl)
+  return { before: title.slice(0, i).trim(), hl, after: title.slice(i + hl.length).trim() }
+}
+
+/** Suite du titre après le mot mis en avant : précédée d'une espace, sauf ponctuation (« brillent, » et non « brillent , »). */
+export const spaced = (after: string) => (after && !/^[,.;:!?…)»]/.test(after) ? ` ${after}` : after)
+
+/** Remise affichée : « -40% » depuis la bulle de la campagne. */
+export const discountLabel = (campaign: Campaign) =>
+  campaign.hero.bubble?.[1] ? `-${String(campaign.hero.bubble[1]).replace(/^-/, "")}` : undefined