@salifbiaye/create-boutique 0.3.6 → 0.4.0

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
-  "repository": { "type": "git", "url": "git+https://github.com/salifbiaye/create-boutique.git" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/salifbiaye/create-boutique.git"
+  },
   "license": "UNLICENSED",
   "bin": {
     "create-boutique": "cli/dist/index.js"

package/templates/storefront/locales/en.json

@@ -308,5 +308,20 @@
   "checkout.testMode.text": "Card payments are in test mode: you will not be charged. Use the test card below with any future expiry date (e.g. 12/34) and any CVC (e.g. 123).",
   "harvest.gift": "Gift wrapping",
   "harvest.giftSub": "Free on request",
-  "harvest.strip": "The season in pictures"
+  "harvest.strip": "The season in pictures",
+  "gala.midnight": "Midnight in",
+  "gala.strokes": "The 12 strokes of midnight",
+  "gala.strokesSub": "Twelve deals to end the year in style.",
+  "cinema.catalog": "Browse the catalog",
+  "cinema.next": "Up next",
+  "cinema.top": "Top 10 this week",
+  "cinema.badgeStock": "Limited stock",
+  "cinema.badgeShipping": "48h delivery",
+  "album.offer": "The Christmas offer",
+  "tech.flash": "Flash deals",
+  "tech.flashTitle": "The best deals, for 24 hours",
+  "tech.deal": "Top deal",
+  "tech.all": "See all",
+  "tech.warranty": "2-year warranty",
+  "tech.warrantySub": "On all tech"
 }

package/templates/storefront/locales/fr.json

@@ -308,5 +308,20 @@
   "checkout.testMode.text": "Le paiement par carte est en mode test : aucune somme ne sera débitée. Utilisez la carte de test ci-dessous, avec une date d'expiration future (ex. 12/34) et n'importe quel code (ex. 123).",
   "harvest.gift": "Emballage cadeau",
   "harvest.giftSub": "Offert sur demande",
-  "harvest.strip": "La saison en images"
+  "harvest.strip": "La saison en images",
+  "gala.midnight": "Minuit dans",
+  "gala.strokes": "Les 12 coups de minuit",
+  "gala.strokesSub": "Douze offres pour finir l'année en beauté.",
+  "cinema.catalog": "Voir le catalogue",
+  "cinema.next": "À suivre",
+  "cinema.top": "Top 10 de la semaine",
+  "cinema.badgeStock": "Stock limité",
+  "cinema.badgeShipping": "Livraison 48 h",
+  "album.offer": "L'offre de Noël",
+  "tech.flash": "Flash deals",
+  "tech.flashTitle": "Les meilleures offres, pour 24 h",
+  "tech.deal": "Offre phare",
+  "tech.all": "Tout voir",
+  "tech.warranty": "Garantie 2 ans",
+  "tech.warrantySub": "Sur toute la tech"
 }

package/templates/storefront/src/app/(main)/page.tsx

@@ -11,6 +11,10 @@ import CategoryTiles from "@modules/ub/category-tiles"
 import { ProductGrid } from "@modules/ub/product-card"
 import { DealsFold, DealsSpotlight } from "@modules/ub/showcase"
 import { HarvestBanner, HarvestGrid, HarvestHero, HarvestServices, HarvestStrip } from "@modules/ub/harvest"
+import { GalaFoil, GalaHero, GalaMidnight, GalaSelection, GalaStrokes } from "@modules/ub/gala"
+import { CinemaHero, CinemaRow, CinemaScreening, CinemaTop } from "@modules/ub/cinema"
+import { TechBento, TechFinal, TechFlash, TechGrid, TechHero, TechSpecs, TechTicker } from "@modules/ub/tech"
+import { AlbumGarland, AlbumHero, AlbumPolaroids, AlbumStory, AlbumTicket } from "@modules/ub/album"
 import { getBoutique } from "@lib/boutique/config"
 import type { Campaign } from "@lib/boutique/campaign"
 
@@ -91,6 +95,78 @@ async function Promo({ campaign }: { campaign: Campaign }) {
   return <PromoBanner campaign={campaign} fallbackImage={best?.thumbnail ?? undefined} />
 }
 
+/** Accueil « Cinéma » (thèmes Halloween) : produits triés par remise pour le Top 10 et « À suivre ». */
+async function CinemaPage({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  const off = (p: (typeof products)[number]) =>
+    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
+    }))
+  const sorted = [...products].sort((a, b) => off(b) - off(a))
+  return (
+    <>
+      <CinemaHero campaign={campaign} next={sorted} />
+      <CinemaRow products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <CinemaTop products={sorted} />
+      <CinemaScreening campaign={campaign} image={sorted.find((p) => p.thumbnail)?.thumbnail ?? undefined} />
+    </>
+  )
+}
+
+/** Accueil « Album » (thèmes Noël). */
+async function AlbumPage({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  return (
+    <>
+      <AlbumStory campaign={campaign} products={products} />
+      <AlbumGarland />
+      <AlbumPolaroids products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <AlbumGarland />
+      <AlbumTicket campaign={campaign} />
+    </>
+  )
+}
+
+/** Accueil « Tech » (thèmes Cyber Monday) : offres les plus remisées en « Flash deals » et dans le bento. */
+async function TechPage({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 16, fields: "*categories,*collection" } })
+  const off = (p: (typeof products)[number]) =>
+    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
+    }))
+  const sorted = [...products].sort((a, b) => off(b) - off(a))
+  return (
+    <>
+      <TechFlash campaign={campaign} products={sorted} />
+      <TechBento campaign={campaign} products={sorted.length > 12 ? sorted.slice(8) : [...sorted].reverse()} />
+      <TechGrid products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <TechFinal campaign={campaign} />
+    </>
+  )
+}
+
+/** Accueil « Gala » (thèmes Nouvel An). */
+async function GalaProducts({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  return (
+    <>
+      <GalaSelection products={products} title={campaign.sections?.products ?? t("section.products")} />
+      <GalaStrokes products={products} />
+      <GalaFoil campaign={campaign} />
+    </>
+  )
+}
+
 function GridFallback() {
   return <div className="ub-section" aria-busy="true" style={{ minHeight: 320 }} />
 }
@@ -103,6 +179,53 @@ export default async function Home() {
     return <CampaignEnded nextUrl={campaign.nextCampaignUrl} />
   }
 
+  if (getBoutique().theme.home === "tech") {
+    return (
+      <div className="ub-tech">
+        <TechHero campaign={campaign} />
+        <TechTicker campaign={campaign} />
+        <TechSpecs freeShipping={campaign.freeShipping} />
+        <Suspense fallback={<GridFallback />}>
+          <TechPage campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  if (getBoutique().theme.home === "album") {
+    return (
+      <div className="ub-album">
+        <AlbumHero campaign={campaign} />
+        <AlbumGarland />
+        <Suspense fallback={<GridFallback />}>
+          <AlbumPage campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  if (getBoutique().theme.home === "cinema") {
+    return (
+      <div className="ub-cinema">
+        <Suspense fallback={<GridFallback />}>
+          <CinemaPage campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  if (getBoutique().theme.home === "gala") {
+    return (
+      <div className="ub-gala">
+        <GalaHero campaign={campaign} />
+        <GalaMidnight campaign={campaign} />
+        <Suspense fallback={<GridFallback />}>
+          <GalaProducts campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
   if (getBoutique().theme.home === "harvest") {
     return (
       <div className="ub-harvest">

package/templates/storefront/src/app/layout.tsx

@@ -14,6 +14,10 @@ import "styles/ub/forms.css"
 import "styles/ub/account.css"
 import "styles/ub/black-friday.css"
 import "styles/ub/harvest.css"
+import "styles/ub/gala.css"
+import "styles/ub/cinema.css"
+import "styles/ub/album.css"
+import "styles/ub/tech.css"
 import "styles/ub/media.css"
 import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"

package/templates/storefront/src/lib/boutique/schema.ts

@@ -71,7 +71,7 @@ export const themeSchema = z.object({
   /** Variante : reprend la mise en page (règles CSS) de ce thème, avec la palette de styles/ub/variants.css. */
   layout: z.string().regex(SLUG).optional(),
   /** Page d'accueil : « default » (sections standard) ou « harvest » (accueil éditorial des thèmes Thanksgiving) */
-  home: z.enum(["default", "harvest"]).optional(),
+  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech"]).optional(),
   fonts: z.object({
     head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
     body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),

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

@@ -0,0 +1,137 @@
+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"
+
+/**
+ * Accueil « Album » (thèmes Noël, theme.json → "home": "album") : un album de Noël fait main.
+ * Hero velours avec titre calligraphié, guirlande, panneau en bois + photos suspendues, polaroïds avec étiquettes
+ * en papier déchiré, ticket d'offre perforé. CSS : styles/ub/album.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+
+export function AlbumHero({ 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" })
+  return (
+    <section className="ub-al-hero" style={image ? { ["--al-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      <span className="ub-al-hero__curtain" aria-hidden />
+      <div className="ub-wrap ub-al-hero__in">
+        {hero.eyebrow && <p className="ub-al-eyebrow">{hero.eyebrow}</p>}
+        <h1 className="ub-al-title">{hero.title}</h1>
+        {hero.sub && <p className="ub-al-sub">{hero.sub}</p>}
+        <Link href="/store" className="ub-al-btn">
+          {hero.cta}
+        </Link>
+      </div>
+    </section>
+  )
+}
+
+/** Guirlande de sapin avec boules (séparateur entre les sections). */
+export function AlbumGarland() {
+  return <div className="ub-al-garland" aria-hidden />
+}
+
+/** Section verte : panneau en bois (texte du bandeau promo) et deux photos suspendues. */
+export function AlbumStory({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const promo = campaign.promo
+  const photos = products.filter(imageOf).slice(0, 2)
+  return (
+    <section className="ub-al-story">
+      <div className="ub-wrap ub-al-story__in">
+        <div className="ub-al-hang">
+          {photos.map((p, i) => (
+            <Link key={p.id} href={`/products/${p.handle}`} className="ub-al-hang__item" style={{ ["--i" as string]: i }} aria-label={p.title ?? ""}>
+              <span className="ub-al-hang__ribbon" aria-hidden />
+              <span className="ub-al-frame">
+                <FadeImg src={imageOf(p)} alt="" />
+              </span>
+            </Link>
+          ))}
+        </div>
+        <div className="ub-al-sign">
+          {promo?.eyebrow && <p className="ub-al-sign__eyebrow">{promo.eyebrow}</p>}
+          <h2 className="ub-al-h2">{promo?.title ?? campaign.hero.title}</h2>
+          {promo?.text && <p>{promo.text}</p>}
+          <span className="ub-al-sign__snow" aria-hidden />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Section crème : polaroïds inclinés avec ruban adhésif + étiquettes en papier déchiré (nom, prix). */
+export function AlbumPolaroids({ products, title }: { products: P[]; title: string }) {
+  const items = products.slice(0, 6)
+  if (!items.length) return null
+  return (
+    <section className="ub-al-cream">
+      <div className="ub-wrap">
+        <h2 className="ub-al-h2 ub-al-h2--script">{title}</h2>
+        <ul className="ub-al-list">
+          {items.map((p, i) => {
+            const { cheapestPrice: price } = getProductPrice({ product: p })
+            const onSale = price?.price_type === "sale"
+            const image = imageOf(p)
+            return (
+              <li key={p.id} className="ub-al-item" style={{ ["--i" as string]: i }}>
+                <Link href={`/products/${p.handle}`} className="ub-al-polaroid">
+                  <span className="ub-al-tape" aria-hidden />
+                  <span className="ub-al-polaroid__img">{image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}</span>
+                </Link>
+                <Link href={`/products/${p.handle}`} className="ub-al-label">
+                  <b>{p.title}</b>
+                  {price && (
+                    <span>
+                      {price.calculated_price}
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                  {onSale && price?.percentage_diff && <em>-{price.percentage_diff}%</em>}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+        <div className="ub-al-more">
+          <Link href="/store" className="ub-al-btn ub-al-btn--dark">
+            {t("section.viewAll")}
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Section rouge : ticket d'offre perforé avec compte à rebours. */
+export function AlbumTicket({ campaign }: { campaign: Campaign }) {
+  const { hero, promo } = campaign
+  return (
+    <section className="ub-al-red">
+      <div className="ub-wrap">
+        <h2 className="ub-al-h2 ub-al-h2--script ub-al-h2--light">{t("album.offer")}</h2>
+        <div className="ub-al-ticket">
+          <div className="ub-al-ticket__main">
+            {promo?.seal && <p className="ub-al-sign__eyebrow">{promo.seal}</p>}
+            <p className="ub-al-ticket__big">{hero.bubble?.[1] ? `-${String(hero.bubble[1]).replace(/^-/, "")}` : promo?.title}</p>
+            <p>{hero.sub}</p>
+          </div>
+          <div className="ub-al-ticket__stub">
+            {campaign.showCountdown !== false && <CampaignCountdown endsAt={campaign.endsAt} />}
+            <Link href="/store" className="ub-al-btn">
+              {promo?.cta ?? hero.cta}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,180 @@
+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 « Cinéma » (thèmes Halloween, theme.json → "home": "cinema") : la boutique comme une affiche de film.
+ * Hero plein cadre (titre condensé + mot au pinceau, fiche « séance » à droite, « À suivre »), rangée d'affiches,
+ * Top 10 à grands chiffres, bannière « séance de minuit » au format cinéma. CSS : styles/ub/cinema.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 CinemaHero({ campaign, next }: { campaign: Campaign; next: P[] }) {
+  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 before = hl ? hero.title.slice(0, hero.title.indexOf(hl)).replace(/[\s,;:–-]+$/, "") : hero.title
+  const after = hl ? hero.title.slice(hero.title.indexOf(hl) + hl.length).trim() : ""
+  const badges = [hero.bubble?.[1] ? `-${String(hero.bubble[1]).replace(/^-/, "")}` : undefined, promo?.seal, t("cinema.badgeStock"), t("cinema.badgeShipping")].filter(
+    Boolean
+  ) as string[]
+  const upNext = next.filter(imageOf).slice(0, 2)
+
+  return (
+    <section className="ub-cn-hero" style={image ? { ["--cn-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      <div className="ub-wrap ub-cn-hero__in">
+        <div className="ub-cn-hero__poster">
+          {hero.eyebrow && <p className="ub-cn-tag">{hero.eyebrow}</p>}
+          <h1 className="ub-cn-title">
+            <span className="ub-cn-title__main">{before}</span>
+            {hl && <span className="ub-cn-title__hl">{hl}</span>}
+            {after && <span className="ub-cn-title__main">{after}</span>}
+          </h1>
+          <Link href="/store" className="ub-cn-fav">
+            <Icon name="sparkle" /> {hero.cta2 ?? t("cinema.catalog")}
+          </Link>
+        </div>
+
+        <aside className="ub-cn-panel">
+          <h2 className="ub-cn-panel__title">{promo?.title ?? hero.title}</h2>
+          <ul className="ub-cn-badges">
+            {badges.map((b) => (
+              <li key={b}>{b}</li>
+            ))}
+          </ul>
+          <p className="ub-cn-panel__text">{hero.sub}</p>
+          <div className="ub-cn-panel__actions">
+            <Link href="/store" className="ub-cn-btn ub-cn-btn--play">
+              <span aria-hidden>▶</span> {hero.cta}
+            </Link>
+            <Link href="/store" className="ub-cn-btn ub-cn-btn--ghost">
+              {t("cinema.catalog")}
+            </Link>
+          </div>
+          {upNext.length > 0 && (
+            <div className="ub-cn-next">
+              <p>{t("cinema.next")}</p>
+              <ul>
+                {upNext.map((p) => (
+                  <li key={p.id}>
+                    <Link href={`/products/${p.handle}`} aria-label={p.title ?? ""}>
+                      <FadeImg src={imageOf(p)} alt="" />
+                      <span className="ub-cn-next__play" aria-hidden>
+                        ▶
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </aside>
+      </div>
+    </section>
+  )
+}
+
+/** Rangée d'affiches (format 2:3) à faire défiler, titre et prix sur l'image. */
+export function CinemaRow({ products, title }: { products: P[]; title: string }) {
+  const items = products.slice(0, 10)
+  if (!items.length) return null
+  return (
+    <section className="ub-cn-section">
+      <div className="ub-wrap ub-cn-head">
+        <h2 className="ub-cn-h2">{title}</h2>
+        <Link href="/store" className="ub-cn-more">
+          {t("section.viewAll")} <Icon name="arrowRight" />
+        </Link>
+      </div>
+      <ul className="ub-cn-row">
+        {items.map((p) => {
+          const { price, onSale } = priceOf(p)
+          const image = imageOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-cn-poster">
+                {image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}
+                {onSale && price?.percentage_diff && <span className="ub-cn-poster__off">-{price.percentage_diff}%</span>}
+                <span className="ub-cn-poster__info">
+                  <b>{p.title}</b>
+                  {price && (
+                    <span>
+                      {price.calculated_price}
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                </span>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}
+
+/** Top 10 : grands chiffres détourés derrière les affiches (les plus remisés d'abord). */
+export function CinemaTop({ products }: { products: P[] }) {
+  const items = products.filter(imageOf).slice(0, 10)
+  if (items.length < 3) return null
+  return (
+    <section className="ub-cn-section">
+      <div className="ub-wrap ub-cn-head">
+        <h2 className="ub-cn-h2">{t("cinema.top")}</h2>
+      </div>
+      <ol className="ub-cn-row ub-cn-top">
+        {items.map((p, i) => (
+          <li key={p.id}>
+            <Link href={`/products/${p.handle}`} className="ub-cn-top__item" aria-label={`${i + 1}. ${p.title ?? ""}`}>
+              <span className="ub-cn-top__num" aria-hidden>
+                {i + 1}
+              </span>
+              <span className="ub-cn-poster ub-cn-poster--small">
+                <FadeImg src={imageOf(p)} alt="" />
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </section>
+  )
+}
+
+/** Bannière « séance de minuit » : format cinéma (bandes noires), texte du bandeau promo, compte à rebours. */
+export function CinemaScreening({ campaign, image }: { campaign: Campaign; image?: string }) {
+  const promo = campaign.promo
+  if (!promo) return null
+  const bg = (promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined) ?? image
+  return (
+    <section className="ub-wrap ub-cn-section">
+      <div className="ub-cn-screen" style={bg ? { ["--cn-screen" as string]: `url("${bg}")` } : undefined}>
+        <div className="ub-cn-screen__text">
+          {promo.eyebrow && <p className="ub-cn-tag">{promo.eyebrow}</p>}
+          <h2 className="ub-cn-h2">{promo.title}</h2>
+          {promo.text && <p>{promo.text}</p>}
+          {campaign.showCountdown !== false && (
+            <div className="ub-cn-screen__cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+          <Link href="/store" className="ub-cn-btn ub-cn-btn--play">
+            <span aria-hidden>▶</span> {promo.cta ?? t("nav.cta")}
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}