@salifbiaye/create-boutique 0.3.5 → 0.4.0

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

@@ -0,0 +1,178 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Gala » (thèmes Nouvel An, theme.json → "home": "gala") : noir, or et argent.
+ * Variante 1 : texte à gauche. Variante 2 (data-variant) : tout centré, l'année en grand chiffre argenté.
+ * Sections : hero plein cadre, bande « minuit » (compte à rebours), sélection encadrée d'or,
+ * « les 12 coups de minuit » (chiffres romains), bannière feuille d'or. CSS : styles/ub/gala.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+const ROMAN = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"]
+
+export function GalaHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = 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 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() : ""
+  const year = new Date(campaign.endsAt).getFullYear()
+
+  return (
+    <section className="ub-gl-hero" style={image ? { ["--gl-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      <div className="ub-gl-hero__sparkle" aria-hidden />
+      <div className="ub-wrap ub-gl-hero__in">
+        <div className="ub-gl-hero__text">
+          {hero.eyebrow && <p className="ub-gl-eyebrow">{hero.eyebrow}</p>}
+          {/* Variante 2 : l'année en très grand (masquée en variante 1 par le CSS) */}
+          <p className="ub-gl-year" aria-hidden>
+            {year}
+          </p>
+          <h1 className="ub-gl-title">
+            <span className="ub-gl-title__a">{before}</span>
+            {hl && before && " "}
+            {hl &&<span className="ub-gl-title__b">{hl}</span>}
+            {after && <span className="ub-gl-title__a"> {after}</span>}
+          </h1>
+          {hero.sub && <p className="ub-gl-sub">{hero.sub}</p>}
+          <div className="ub-gl-actions">
+            <Link href="/store" className="ub-gl-btn ub-gl-btn--solid">
+              {hero.cta}
+            </Link>
+            {hero.cta2 && (
+              <Link href="/store" className="ub-gl-btn ub-gl-btn--ghost">
+                {hero.cta2}
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Bande « minuit » : grand compte à rebours doré + texte promo + bouton. */
+export function GalaMidnight({ campaign }: { campaign: Campaign }) {
+  if (campaign.showCountdown === false) return null
+  return (
+    <section className="ub-gl-midnight">
+      <div className="ub-wrap ub-gl-midnight__in">
+        <div>
+          <p className="ub-gl-eyebrow">{t("gala.midnight")}</p>
+          <div className="ub-gl-midnight__cd">
+            <CampaignCountdown endsAt={campaign.endsAt} />
+          </div>
+        </div>
+        <div className="ub-gl-midnight__text">
+          {campaign.promo?.title && <h2 className="ub-gl-h2">{campaign.promo.title}</h2>}
+          {campaign.promo?.text && <p>{campaign.promo.text}</p>}
+          <Link href="/store" className="ub-gl-link">
+            {campaign.promo?.cta ?? t("nav.cta")} <Icon name="arrowRight" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function price(p: P) {
+  const { cheapestPrice } = getProductPrice({ product: p })
+  return { price: cheapestPrice, onSale: cheapestPrice?.price_type === "sale" }
+}
+
+/** Sélection : cartes sombres avec cadre intérieur doré, prix en or. */
+export function GalaSelection({ products, title }: { products: P[]; title: string }) {
+  const items = products.slice(0, 6)
+  if (!items.length) return null
+  return (
+    <section className="ub-wrap ub-gl-section">
+      <div className="ub-gl-head">
+        <span className="ub-gl-rule" aria-hidden />
+        <h2 className="ub-gl-h2">{title}</h2>
+        <span className="ub-gl-rule" aria-hidden />
+      </div>
+      <ul className="ub-gl-grid">
+        {items.map((p) => {
+          const { price: pr, onSale } = price(p)
+          const image = imageOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-gl-card">
+                <span className="ub-gl-card__media">
+                  {image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}
+                  {onSale && pr?.percentage_diff && <span className="ub-gl-card__off">-{pr.percentage_diff}%</span>}
+                </span>
+                <span className="ub-gl-card__name">{p.title}</span>
+                {pr && (
+                  <span className="ub-gl-card__price">
+                    <b>{pr.calculated_price}</b>
+                    {onSale && <s>{pr.original_price}</s>}
+                  </span>
+                )}
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}
+
+/** « Les 12 coups de minuit » : jusqu'à 12 offres numérotées en chiffres romains, défilement horizontal. */
+export function GalaStrokes({ products }: { products: P[] }) {
+  const items = products.slice(0, 12)
+  if (items.length < 4) return null
+  return (
+    <section className="ub-gl-section ub-gl-strokes">
+      <div className="ub-wrap ub-gl-head ub-gl-head--left">
+        <h2 className="ub-gl-h2">{t("gala.strokes")}</h2>
+        <p>{t("gala.strokesSub")}</p>
+      </div>
+      <ol className="ub-gl-strokes__row">
+        {items.map((p, i) => {
+          const { price: pr } = price(p)
+          const image = imageOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-gl-stroke">
+                <span className="ub-gl-stroke__num" aria-hidden>
+                  {ROMAN[i]}
+                </span>
+                <span className="ub-gl-stroke__img">{image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}</span>
+                <span className="ub-gl-stroke__name">{p.title}</span>
+                {pr && <b className="ub-gl-stroke__price">{pr.calculated_price}</b>}
+              </Link>
+            </li>
+          )
+        })}
+      </ol>
+    </section>
+  )
+}
+
+/** Bannière feuille d'or : titre du hero, bouton noir. */
+export function GalaFoil({ campaign }: { campaign: Campaign }) {
+  return (
+    <section className="ub-wrap ub-gl-section">
+      <div className="ub-gl-foil">
+        <span className="ub-gl-foil__confetti" aria-hidden />
+        {campaign.hero.eyebrow && <p className="ub-gl-eyebrow">{campaign.hero.eyebrow}</p>}
+        <h2 className="ub-gl-h2">{campaign.hero.title}</h2>
+        {campaign.hero.sub && <p>{campaign.hero.sub}</p>}
+        <Link href="/store" className="ub-gl-btn ub-gl-btn--dark">
+          {campaign.hero.cta}
+        </Link>
+      </div>
+    </section>
+  )
+}

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

@@ -1,4 +1,5 @@
 import Link from "next/link"
+import { preload } from "react-dom"
 import type { Campaign } from "@lib/boutique/campaign"
 import { getBoutique } from "@lib/boutique/config"
 import { t } from "@lib/boutique/i18n"
@@ -7,6 +8,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import { Icon, type IconName } from "./icons"
 
+import FadeImg from "./fade-img"
 /**
  * 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,
@@ -28,6 +30,8 @@ function Drip() {
 export function HarvestHero({ campaign }: { campaign: Campaign }) {
   const { hero } = campaign
   const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  // Image de fond (CSS) : préchargée en priorité pour qu'elle arrive avant le reste de la page
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
   // Mot manuscrit : en fin de titre, il passe sur sa propre ligne sous le titre condensé ; au milieu de la phrase,
   // il reste à sa place (sinon la phrase devient incompréhensible).
   const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
@@ -120,7 +124,7 @@ export function HarvestGrid({ products, title, sub }: { products: P[]; title: st
                 <span className="ub-hv-card__media">
                   {image ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img src={image} alt="" loading="lazy" />
+                    <FadeImg src={image} alt="" />
                   ) : (
                     <span className="ub-ph" />
                   )}
@@ -186,7 +190,7 @@ export function HarvestStrip({ products }: { products: P[] }) {
           <li key={p.id}>
             <Link href={`/products/${p.handle}`} aria-label={p.title ?? ""}>
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={imageOf(p)} alt="" loading="lazy" />
+              <FadeImg src={imageOf(p)} alt="" />
             </Link>
           </li>
         ))}

package/templates/storefront/src/modules/ub/product-card.tsx

@@ -4,6 +4,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { Icon } from "./icons"
 
+import FadeImg from "./fade-img"
 /** Carte produit des maquettes. Prix calculés par Medusa pour la région de la boutique. */
 export default function ProductCard({ product }: { product: HttpTypes.StoreProduct }) {
   const { cheapestPrice: price } = getProductPrice({ product })
@@ -24,7 +25,7 @@ export default function ProductCard({ product }: { product: HttpTypes.StoreProdu
       >
         {image && (
           // eslint-disable-next-line @next/next/no-img-element
-          <img src={image} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+          <FadeImg src={image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
         )}
       </Link>
       <div className="ub-card__body">

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

@@ -4,6 +4,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { Icon } from "./icons"
 
+import FadeImg from "./fade-img"
 type P = HttpTypes.StoreProduct
 const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
 const priceOf = (p: P) => {
@@ -32,7 +33,7 @@ export function DealsFold({ products, title }: { products: P[]; title: string })
                 <Link href={`/products/${p.handle}`} className="ub-fold__link" aria-label={t("card.view", { name: p.title ?? "" })}>
                   {image ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img className="ub-fold__img" src={image} alt="" loading="lazy" />
+                    <FadeImg className="ub-fold__img" src={image} alt="" />
                   ) : (
                     <span className="ub-fold__img ub-ph" />
                   )}
@@ -92,7 +93,7 @@ export function DealsSpotlight({ products, eyebrow, title }: { products: P[]; ey
                   <div key={p.id} className="ub-spot__media" data-i={i}>
                     {image ? (
                       // eslint-disable-next-line @next/next/no-img-element
-                      <img src={image} alt={p.title ?? ""} loading="lazy" />
+                      <FadeImg src={image} alt={p.title ?? ""} />
                     ) : (
                       <span className="ub-ph" />
                     )}

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

@@ -0,0 +1,279 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { Icon, type IconName } from "./icons"
+
+/**
+ * Accueil « Tech » (thèmes Cyber Monday, theme.json → "home": "tech") : la boutique comme un lancement produit.
+ * Cyber Monday 1 : nuit violette, texte à gauche, visuel néon sur le côté.
+ * Cyber Monday 2 (data-variant) : blanc, le visuel couvre tout le hero, mot en lettres « tuiles ».
+ * Sections : hero, bandeau défilant, « Flash deals » (compte à rebours + cartes), bento de l'offre phare,
+ * grille « Deals du moment », bannière finale. CSS : styles/ub/tech.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+const priceOf = (p: P) => {
+  const { cheapestPrice } = getProductPrice({ product: p })
+  return { price: cheapestPrice, onSale: cheapestPrice?.price_type === "sale" }
+}
+
+export function TechHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = 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 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() : ""
+  const [b1, b2, b3] = hero.bubble ?? []
+
+  return (
+    <section className="ub-tc-hero" data-has-image={image ? "" : undefined}>
+      <div className="ub-tc-hero__grid" aria-hidden />
+      <div className="ub-tc-hero__beam" aria-hidden />
+      {/* Cyber Monday 2 : le visuel couvre tout le hero (masqué par le CSS en variante 1) */}
+      {image && (
+        <div className="ub-tc-hero__cover" aria-hidden>
+          <img src={image} alt="" fetchPriority="high" decoding="async" />
+        </div>
+      )}
+      <div className="ub-wrap ub-tc-hero__in">
+        <div className="ub-tc-hero__text">
+          {hero.eyebrow && (
+            <p className="ub-tc-chip">
+              <span className="ub-tc-chip__dot" aria-hidden />
+              {hero.eyebrow}
+            </p>
+          )}
+          <h1 className="ub-tc-title">
+            {before && <span className="ub-tc-title__a">{before} </span>}
+            {hl && (
+              <span className="ub-tc-title__hl">
+                {/* Variante 2 : une tuile par lettre (comme les lettres du visuel) */}
+                {[...hl].map((c, i) => (
+                  <span key={i} className={c === " " ? "ub-tc-tile ub-tc-tile--sp" : "ub-tc-tile"}>
+                    {c}
+                  </span>
+                ))}
+              </span>
+            )}
+            {after && <span className="ub-tc-title__a"> {after}</span>}
+          </h1>
+          {hero.sub && <p className="ub-tc-sub">{hero.sub}</p>}
+          <div className="ub-tc-actions">
+            <Link href="/store" className="ub-tc-btn ub-tc-btn--solid">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <Link href="/store" className="ub-tc-btn ub-tc-btn--ghost">
+                {hero.cta2}
+              </Link>
+            )}
+          </div>
+          {campaign.showCountdown !== false && (
+            <div className="ub-tc-hero__cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </div>
+        {/* Cyber Monday 1 : visuel sur le côté, cadre lumineux + pastille de remise */}
+        <div className="ub-tc-hero__side">
+          {image ? <img src={image} alt={t("hero.photo")} fetchPriority="high" decoding="async" /> : <span className="ub-ph" />}
+          {b2 && (
+            <p className="ub-tc-badge">
+              <small>{b1}</small>
+              <b>{b2}</b>
+              <small>{b3}</small>
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Bandeau défilant (textes de la barre du haut + remise), dupliqué pour une boucle continue. */
+export function TechTicker({ campaign }: { campaign: Campaign }) {
+  const items = [campaign.hero.eyebrow, ...(campaign.topbar ?? [])].filter(Boolean) as string[]
+  if (!items.length) return null
+  const row = (hidden?: boolean) => (
+    <ul className="ub-tc-ticker__row" aria-hidden={hidden || undefined}>
+      {items.map((s, i) => (
+        <li key={i}>
+          <Icon name="sparkle" /> {s}
+        </li>
+      ))}
+    </ul>
+  )
+  return (
+    <div className="ub-tc-ticker">
+      <div className="ub-tc-ticker__track">
+        {row()}
+        {row(true)}
+      </div>
+    </div>
+  )
+}
+
+function Card({ p, rank }: { p: P; rank?: number }) {
+  const { price, onSale } = priceOf(p)
+  const image = imageOf(p)
+  return (
+    <Link href={`/products/${p.handle}`} className="ub-tc-card">
+      <span className="ub-tc-card__media">
+        {image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}
+        {onSale && price?.percentage_diff && <span className="ub-tc-off">-{price.percentage_diff}%</span>}
+        {rank != null && <span className="ub-tc-card__rank">#{String(rank).padStart(2, "0")}</span>}
+      </span>
+      <span className="ub-tc-card__body">
+        <span className="ub-tc-card__name">{p.title}</span>
+        {price && (
+          <span className="ub-tc-card__price">
+            <b>{price.calculated_price}</b>
+            {onSale && <s>{price.original_price}</s>}
+          </span>
+        )}
+      </span>
+      <span className="ub-tc-card__go" aria-hidden>
+        <Icon name="arrowUpRight" />
+      </span>
+    </Link>
+  )
+}
+
+/** « Flash deals » : compte à rebours façon écran + les offres les plus remisées en défilement horizontal. */
+export function TechFlash({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const items = products.slice(0, 8)
+  if (!items.length) return null
+  return (
+    <section className="ub-tc-section ub-tc-flash">
+      <div className="ub-wrap">
+        <div className="ub-tc-flash__head">
+          <div>
+            <p className="ub-tc-kicker">
+              <Icon name="sparkle" /> {t("tech.flash")}
+            </p>
+            <h2 className="ub-tc-h2">{campaign.promo?.title ?? t("tech.flashTitle")}</h2>
+          </div>
+          {campaign.showCountdown !== false && (
+            <div className="ub-tc-flash__cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </div>
+        <ol className="ub-tc-flash__row">
+          {items.map((p, i) => (
+            <li key={p.id}>
+              <Card p={p} rank={i + 1} />
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+/** Bento : l'offre phare en grande carte + 4 cartes. */
+export function TechBento({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const [hero, ...rest] = products.filter((p) => imageOf(p))
+  if (!hero) return null
+  const { price, onSale } = priceOf(hero)
+  const image = imageOf(hero)
+  return (
+    <section className="ub-tc-section">
+      <div className="ub-wrap ub-tc-bento">
+        <Link href={`/products/${hero.handle}`} className="ub-tc-bento__main">
+          <span className="ub-tc-bento__img">{image && <FadeImg src={image} alt="" />}</span>
+          <span className="ub-tc-bento__txt">
+            <span className="ub-tc-kicker">{campaign.promo?.eyebrow ?? t("tech.deal")}</span>
+            <span className="ub-tc-bento__name">{hero.title}</span>
+            {price && (
+              <span className="ub-tc-card__price ub-tc-card__price--lg">
+                <b>{price.calculated_price}</b>
+                {onSale && <s>{price.original_price}</s>}
+                {onSale && price.percentage_diff && <span className="ub-tc-off">-{price.percentage_diff}%</span>}
+              </span>
+            )}
+            <span className="ub-tc-btn ub-tc-btn--solid">
+              {campaign.promo?.cta ?? t("nav.cta")} <Icon name="arrowRight" />
+            </span>
+          </span>
+        </Link>
+        {rest.slice(0, 4).map((p) => (
+          <Card key={p.id} p={p} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+/** Grille de tous les produits. */
+export function TechGrid({ products, title }: { products: P[]; title: string }) {
+  if (!products.length) return null
+  return (
+    <section className="ub-tc-section">
+      <div className="ub-wrap">
+        <div className="ub-tc-head">
+          <h2 className="ub-tc-h2">{title}</h2>
+          <Link href="/store" className="ub-tc-link">
+            {t("tech.all")} <Icon name="arrowRight" />
+          </Link>
+        </div>
+        <ul className="ub-tc-grid">
+          {products.map((p) => (
+            <li key={p.id}>
+              <Card p={p} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Avantages (livraison, paiement, retours) en ligne, style fiche technique. */
+export function TechSpecs({ freeShipping }: { freeShipping?: string }) {
+  const specs: [IconName, string, string][] = [
+    ["truck", t("trust.shipping"), freeShipping ? t("trust.shippingSub", { freeShipping }) : t("trust.shippingSubAll")],
+    ["lock", t("trust.secure"), t("trust.secureSub")],
+    ["returns", t("trust.returns"), t("trust.returnsSub")],
+    ["shield", t("tech.warranty"), t("tech.warrantySub")],
+  ]
+  return (
+    <section className="ub-wrap ub-tc-specs">
+      {specs.map(([ic, a, b]) => (
+        <div key={a} className="ub-tc-spec">
+          <Icon name={ic} />
+          <span>
+            <b>{a}</b>
+            <small>{b}</small>
+          </span>
+        </div>
+      ))}
+    </section>
+  )
+}
+
+/** Bannière finale : texte promo + bouton, sur fond lumineux (variante 1) ou noir (variante 2). */
+export function TechFinal({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  if (!promo?.title) return null
+  return (
+    <section className="ub-wrap ub-tc-section">
+      <div className="ub-tc-final">
+        <div className="ub-tc-final__glow" aria-hidden />
+        {promo.eyebrow && <p className="ub-tc-kicker">{promo.eyebrow}</p>}
+        <h2 className="ub-tc-final__title">{promo.title}</h2>
+        {promo.text && <p className="ub-tc-final__text">{promo.text}</p>}
+        <Link href="/store" className="ub-tc-btn ub-tc-btn--solid">
+          {promo.cta ?? t("nav.cta")} <Icon name="arrowRight" />
+        </Link>
+      </div>
+    </section>
+  )
+}