@salifbiaye/create-boutique 0.3.0 → 0.3.2

package/cli/dist/generate.js

@@ -231,9 +231,12 @@ const day = (d, add = 0, end = false) => {
 };
 /** Événement d'un thème : « black-friday-2 » → « black-friday ». */
 const baseTheme = (theme) => theme.replace(/-\d+$/, "");
-/** Visuel du hero dans seed/images : hero-<slug>.*, sinon hero-<thème>.*, sinon hero.* (importé par le seed). */
-function heroImage(images, slug, theme) {
-    for (const name of [`hero-${slug}`, `hero-${theme}`, "hero"]) {
+/**
+ * Visuel de campagne dans seed/images (importé par le seed) : <prefix>-<slug>.*, sinon <prefix>-<thème>.*, sinon <prefix>.*
+ * prefix = "hero" (bannière du haut) ou "promo" (bandeau promo).
+ */
+function heroImage(images, slug, theme, prefix = "hero") {
+    for (const name of [`${prefix}-${slug}`, `${prefix}-${theme}`, prefix]) {
         const found = images.find((f) => /\.(png|jpe?g|webp)$/i.test(f) && f.replace(/\.[^.]+$/, "").toLowerCase() === name);
         if (found)
             return found;
@@ -295,6 +298,9 @@ export function writeCampaignFiles(dir, p, language) {
         const hero = heroImage(images, b.slug, b.theme);
         if (hero)
             Object.assign(campaign, { hero: { image: hero } });
+        const promo = heroImage(images, b.slug, b.theme, "promo");
+        if (promo)
+            Object.assign(campaign, { promo: { image: promo } });
         fs.writeFileSync(file, JSON.stringify(campaign, null, 2) + "\n");
     }
 }

package/docs/guide-complet.en.html

@@ -207,6 +207,15 @@ create-boutique check .                  # a test order in each store: OK / KO</
 <div class="box info">Not to be confused with Medusa's <span class="menu">Promotions → Campaigns</span>, which groups discount codes with a budget (B10).</div>
 <div class="box warn">Campaign texts and dates only <b>display</b> the offer ("up to −35%", countdown). They apply <b>no discount</b>: create the discount itself in <span class="menu">Promotions</span> (B10) or <span class="menu">Price Lists</span> (B5), with the same dates, and check that the text matches.</div>
 
+<h3>Run a new sale (sale prices + countdown in sync)</h3>
+<p>At creation, the catalogue's sale prices go into a price list <b>"Promotions jusqu'au &lt;date&gt;"</b> that ends with the store's campaign: the countdown and the discounts end together. For a new sale:</p>
+<ol>
+<li><span class="menu">Pricing</span> → open the "Promotions jusqu'au …" list (or <b>Create</b> a <b>Sale</b> list) → <b>Edit</b>: new <b>start and end dates</b>. To change prices: <b>Prices</b> tab → sale price per product and currency.</li>
+<li><span class="menu">Campaigns</span> → the store → <b>Edit</b>: set <b>exactly the same</b> start and end dates, update the texts ("up to −40%", Discount variable) and images → <b>Save</b>.</li>
+<li>Check the site (about 1 minute): countdown, sale prices and percentages.</li>
+</ol>
+<div class="box info">The countdown shows the campaign end date; actual prices come from the price list. Same dates in both places = a consistent sale. After the end date, prices go back to normal and the store shows "This sale has ended".</div>
+
 <h2>B10. Discount codes and promotions</h2>
 <p><span class="menu">Promotions → Create</span>:</p>
 <table>

package/docs/guide-complet.fr.html

@@ -207,6 +207,15 @@ create-boutique check .                  # une commande test dans chaque boutiqu
 <div class="box info">Ne pas confondre avec <span class="menu">Promotions → Campagnes</span> de Medusa, qui regroupe des codes promo avec un budget (B10).</div>
 <div class="box warn">Les textes et les dates de campagne ne font qu'<b>afficher</b> l'offre (« jusqu'à −35 % », compte à rebours). Ils n'appliquent <b>aucune remise</b> : créez la remise elle-même dans <span class="menu">Promotions</span> (B10) ou <span class="menu">Listes de prix</span> (B5), avec les mêmes dates, et vérifiez que le texte correspond.</div>
 
+<h3>Relancer une promo (prix barrés + compte à rebours alignés)</h3>
+<p>À la création, les prix barrés du catalogue sont regroupés dans une liste de prix <b>« Promotions jusqu'au &lt;date&gt; »</b> qui s'arrête à la fin de la campagne de la boutique : le compte à rebours et les remises finissent ensemble. Pour une nouvelle promo :</p>
+<ol>
+<li><span class="menu">Tarification</span> → ouvrir la liste « Promotions jusqu'au … » (ou <b>Créer</b> une liste de type <b>Soldes</b>) → <b>Modifier</b> : nouvelles <b>dates de début et de fin</b>. Pour changer les prix : onglet <b>Prix</b> → prix soldé par produit et par devise.</li>
+<li><span class="menu">Campagnes</span> → la boutique → <b>Modifier</b> : mettre <b>exactement les mêmes dates</b> de début et de fin, adapter les textes (« jusqu'à −40 % », variables Remise) et les images → <b>Enregistrer</b>.</li>
+<li>Vérifier sur le site (environ 1 minute) : compte à rebours, prix barrés et pourcentages.</li>
+</ol>
+<div class="box info">Le compte à rebours affiche la date de fin de la campagne ; les prix réels dépendent de la liste de prix. Mêmes dates aux deux endroits = une promo cohérente. Après la date de fin : les prix redeviennent normaux et la boutique affiche « Cette vente est terminée ».</div>
+
 <h2>B10. Codes promo et promotions</h2>
 <p><span class="menu">Promotions → Créer</span> :</p>
 <table>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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" },

package/templates/backend/src/scripts/seed.ts

@@ -272,7 +272,15 @@ export default async function seed({ container }: ExecArgs) {
 
   // ---------- Produits : seed/products.csv ----------
   const themeOf = Object.fromEntries(project.boutiques.map((b) => [b.slug, b.theme]))
-  await importProducts({ container, logger, currencies, channelIds, themeOf, locationId: location.id, profileId: profile.id, productService })
+  // Fin de campagne de chaque boutique (config/campaigns/<slug>.json) : les prix barrés s'arrêtent avec le compte à rebours
+  const endsOf = Object.fromEntries(
+    project.boutiques.map((b) => {
+      const file = path.join(CONFIG_DIR, "campaigns", `${b.slug}.json`)
+      const ends = fs.existsSync(file) ? (JSON.parse(fs.readFileSync(file, "utf8")).endsAt as string | undefined) : undefined
+      return [b.slug, ends]
+    })
+  )
+  await importProducts({ container, logger, currencies, channelIds, themeOf, endsOf, locationId: location.id, profileId: profile.id, productService })
 
   logger.info("[seed] terminé")
 }
@@ -306,6 +314,7 @@ async function importProducts({
   currencies,
   channelIds,
   themeOf,
+  endsOf,
   locationId,
   profileId,
   productService,
@@ -316,6 +325,8 @@ async function importProducts({
   channelIds: Record<string, string>
   /** slug → thème, pour la colonne « themes » du CSV */
   themeOf: Record<string, string>
+  /** slug → fin de campagne (ISO) : date de fin des prix barrés des produits de cette boutique */
+  endsOf: Record<string, string | undefined>
   locationId: string
   profileId: string
   productService: { listProducts: (f: { handle: string[] }, c: { select: string[] }) => Promise<{ handle: string }[]> }
@@ -340,7 +351,7 @@ async function importProducts({
     return url
   }
 
-  const salePrices: { variantKey: string; currency_code: string; amount: number }[] = []
+  const salePrices: { variantKey: string; currency_code: string; amount: number; endsAt?: string }[] = []
   const products: CreateProductWorkflowInputDTO[] = []
   for (const r of toCreate) {
     const missing = currencies.filter((c) => !r[`price_${c}`])
@@ -358,6 +369,8 @@ async function importProducts({
         ? Object.keys(channelIds).filter((slug) => list(r.themes).includes(themeOf[slug]))
         : Object.keys(channelIds)
     if (!boutiques.length) logger.warn(`[seed] ${r.handle} : aucune boutique ne correspond (colonnes boutiques/themes)`)
+    // Fin des prix barrés = fin de campagne la plus tardive parmi les boutiques du produit
+    const endsAt = boutiques.map((b) => endsOf[b]).filter((d): d is string => !!d).sort().pop()
 
     const prices = Object.keys(r)
       .filter((k) => /^price_[a-z]{3}$/.test(k) && r[k])
@@ -367,7 +380,7 @@ async function importProducts({
         const compareAt = Number(r[`compare_at_price_${currency_code}`] || 0)
         // Prix barré : le prix de base est le prix « avant », le prix réel passe par une price list « sale ».
         if (compareAt > price) {
-          for (const v of values) salePrices.push({ variantKey: `${r.handle}::${v}`, currency_code, amount: price })
+          for (const v of values) salePrices.push({ variantKey: `${r.handle}::${v}`, currency_code, amount: price, endsAt })
           return { currency_code, amount: compareAt }
         }
         return { currency_code, amount: price }
@@ -409,22 +422,26 @@ async function importProducts({
   )
   if (levels.length) await createInventoryLevelsWorkflow(container).run({ input: { inventory_levels: levels } })
 
-  // Prix promo (compare_at_price_*) : une price list « sale » pour les produits importés
+  // Prix promo (compare_at_price_*) : une price list « sale » par date de fin de campagne. Active tout de suite,
+  // elle s'arrête avec le compte à rebours de la boutique (modifiable ensuite dans admin → Tarification).
   if (salePrices.length) {
     const variantId = new Map(variants.map((v) => [`${v.product!.handle}::${v.title}`, v.id]))
+    const groups = new Map<string, typeof salePrices>()
+    for (const p of salePrices) groups.set(p.endsAt ?? "", [...(groups.get(p.endsAt ?? "") ?? []), p])
+    const day = (iso: string) => new Date(iso).toISOString().slice(0, 10)
     await createPriceListsWorkflow(container).run({
       input: {
-        price_lists_data: [
-          {
-            title: `Promotions (import ${new Date().toISOString().slice(0, 10)})`,
-            description: "Prix barrés importés depuis seed/products.csv",
-            status: "active",
-            prices: salePrices
-              .filter((p) => variantId.has(p.variantKey))
-              .map((p) => ({ variant_id: variantId.get(p.variantKey)!, currency_code: p.currency_code, amount: p.amount })),
-          },
-        ],
+        price_lists_data: [...groups].map(([endsAt, prices]) => ({
+          title: endsAt ? `Promotions jusqu'au ${day(endsAt)}` : `Promotions (import ${day(new Date().toISOString())})`,
+          description: "Prix barrés importés depuis seed/products.csv ; fin = fin de la campagne des boutiques concernées",
+          status: "active" as const,
+          ...(endsAt ? { ends_at: endsAt } : {}),
+          prices: prices
+            .filter((p) => variantId.has(p.variantKey))
+            .map((p) => ({ variant_id: variantId.get(p.variantKey)!, currency_code: p.currency_code, amount: p.amount })),
+        })),
       },
     })
+    logger.info(`[seed] prix barrés : ${groups.size} liste(s) de prix, fin alignée sur les campagnes`)
   }
 }

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

@@ -77,6 +77,20 @@ async function HarvestProducts({ campaign }: { campaign: Campaign }) {
   )
 }
 
+/** Bandeau promo avec, à défaut d'image de campagne, la photo du produit le plus remisé. */
+async function Promo({ 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 best = [...products].filter((p) => p.thumbnail).sort((a, b) => off(b) - off(a))[0]
+  return <PromoBanner campaign={campaign} fallbackImage={best?.thumbnail ?? undefined} />
+}
+
 function GridFallback() {
   return <div className="ub-section" aria-busy="true" style={{ minHeight: 320 }} />
 }
@@ -114,7 +128,9 @@ export default async function Home() {
       <Suspense fallback={<GridFallback />}>
         <Showcase part="spotlight" eyebrow={campaign.hero.eyebrow} />
       </Suspense>
-      <PromoBanner campaign={campaign} />
+      <Suspense fallback={<GridFallback />}>
+        <Promo campaign={campaign} />
+      </Suspense>
       <Suspense fallback={<GridFallback />}>
         <Products title={campaign.sections?.products ?? t("section.products")} />
       </Suspense>

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

@@ -145,9 +145,10 @@ export function TrustBar({ freeShipping }: { freeShipping?: string }) {
   )
 }
 
-export function PromoBanner({ campaign }: { campaign: Campaign }) {
+/** Bandeau promo. Image : celle de la campagne (admin → Campagnes), sinon `fallbackImage` (photo d'un produit remisé). */
+export function PromoBanner({ campaign, fallbackImage }: { campaign: Campaign; fallbackImage?: string }) {
   const { promo } = campaign
-  const promoImage = promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined
+  const promoImage = (promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined) ?? fallbackImage
 
   return (
     <section className="ub-section" style={{ paddingTop: 0 }}>