@salifbiaye/create-boutique 0.1.5 → 0.2.0

package/cli/dist/commands.js

@@ -3,7 +3,7 @@ import fs from "node:fs";
 import path from "node:path";
 import pc from "picocolors";
 import { compose, composeOutput, isRunning } from "./docker.js";
-import { composeYaml, readEnv, refreshEnv, writeCampaignFiles, writeReadme } from "./generate.js";
+import { readEnv, refreshEnv, writeCampaignFiles, writeCompose, writeReadme } from "./generate.js";
 import { copyTemplate, templateVersion } from "./paths.js";
 import { nextFreePort, reservedByOthers, reservePorts } from "./ports.js";
 import { currencies, effective, readProject, validateProject, writeJsonSchema, writeProject, ProjectError, SLUG } from "./project.js";
@@ -64,7 +64,7 @@ export async function apply(dir, opts = { up: true }) {
         throw new ProjectError(`port(s) déjà réservé(s) par un autre projet : ${clash.join(", ")}`);
     writeCampaignFiles(target, p, p.defaults.language);
     writeJsonSchema(target);
-    fs.writeFileSync(path.join(target, "docker-compose.yml"), composeYaml(p));
+    writeCompose(target, p);
     refreshEnv(target, p);
     writeReadme(target, p);
     reservePorts(target, [p.apiPort, p.storagePort, ...p.boutiques.map((b) => b.port)]);
@@ -155,7 +155,7 @@ export async function set(dir, o, opts) {
 // ─────────────────────────── themes ───────────────────────────
 export function themes() {
     for (const t of listThemes())
-        console.log(`${t.id.padEnd(16)} ${t.name.padEnd(16)} langues : ${t.languages.join(", ")}`);
+        console.log(`${t.id.padEnd(16)} ${t.name.padEnd(26)} langues : ${t.languages.join(", ")}`);
 }
 // ─────────────────────────── update ───────────────────────────
 /** Remplace storefront/ et backend/ par la version actuelle du template (config, seed, .env et données conservés). */

package/cli/dist/create.js

@@ -3,7 +3,7 @@ import path from "node:path";
 import * as p from "@clack/prompts";
 import pc from "picocolors";
 import { z } from "zod";
-import { composeYaml, writeCampaignFiles, writeEnv, writeReadme } from "./generate.js";
+import { writeCampaignFiles, writeCompose, writeEnv, writeReadme } from "./generate.js";
 import { writeGuides } from "./guide.js";
 import { copyDir, copyTemplate, templateVersion } from "./paths.js";
 import { nextFreePort, reservedByOthers, reservePorts } from "./ports.js";
@@ -159,8 +159,8 @@ export async function create(dir, input, opts) {
     // Récapitulatif
     const width = Math.max(...proj.boutiques.map((b) => b.slug.length)) + 2;
     const lines = [
-        ...proj.boutiques.map((b) => `${b.slug.padEnd(width)}${b.theme.padEnd(14)}→ http://localhost:${b.port}`),
-        `${"Backend / admin".padEnd(width + 14)}→ http://localhost:${proj.apiPort}/app`,
+        ...proj.boutiques.map((b) => `${b.slug.padEnd(width)}${b.theme.padEnd(16)}→ http://localhost:${b.port}`),
+        `${"Backend / admin".padEnd(width + 16)}→ http://localhost:${proj.apiPort}/app`,
         `Devise ${a.currency.toUpperCase()} · pays ${a.country.toUpperCase()} · langue ${a.language}`,
         `Paiement : ${a.stripeSk ? "Stripe + manuel" : "manuel (Stripe : non configuré)"}`,
         `Catalogue : ${a.products ?? "aucun (à ajouter dans l'admin)"}`,
@@ -179,12 +179,12 @@ export async function create(dir, input, opts) {
     copyTemplate("backend", target);
     writeProject(target, proj);
     writeJsonSchema(target);
-    writeCampaignFiles(target, proj, a.language);
     fs.mkdirSync(path.join(target, "seed", "images"), { recursive: true });
     if (a.products)
         fs.copyFileSync(path.resolve(a.products), path.join(target, "seed", "products.csv"));
     if (a.images)
         copyDir(path.resolve(a.images), path.join(target, "seed", "images"));
+    writeCampaignFiles(target, proj, a.language); // après les images : hero.* devient le visuel du hero
     writeEnv(target, proj, {
         adminEmail: a.email,
         stripePk: a.stripePk,
@@ -193,7 +193,7 @@ export async function create(dir, input, opts) {
         resendKey: a.resendKey,
         emailFrom: a.emailFrom,
     });
-    fs.writeFileSync(path.join(target, "docker-compose.yml"), composeYaml(proj));
+    writeCompose(target, proj);
     writeReadme(target, proj);
     fs.writeFileSync(path.join(target, ".gitignore"), ".env\nbackups/\nnode_modules/\n");
     reservePorts(target, [proj.apiPort, proj.storagePort, ...proj.boutiques.map((b) => b.port)]);

package/cli/dist/generate.js

@@ -4,11 +4,14 @@ import path from "node:path";
 import { currencies, effective } from "./project.js";
 const secret = () => crypto.randomBytes(32).toString("base64url");
 // ─────────────────────────── docker-compose.yml ───────────────────────────
+/** Production (urls présent) : ports des containers seulement sur 127.0.0.1, Caddy seul exposé (80/443). */
+const bind = (p, port) => (p.urls ? `127.0.0.1:${port}` : String(port));
+const host = (url) => new URL(url).host;
 export function composeYaml(p) {
     const services = p.boutiques
         .map((b) => `  storefront-${b.slug}:
     <<: *storefront
-    ports: ["${b.port}:8000"]
+    ports: ["${bind(p, b.port)}:8000"]
     environment: { <<: *storefront-env, BOUTIQUE: ${b.slug} }
 `)
         .join("\n");
@@ -44,7 +47,7 @@ ${services}
       DATABASE_URL: postgres://medusa:\${POSTGRES_PASSWORD}@postgres:5432/medusa?sslmode=disable
       REDIS_URL: redis://redis:6379
       S3_ENDPOINT: http://storage:9000
-    ports: ["${p.apiPort}:9000"]           # API + admin (/app)
+    ports: ["${bind(p, p.apiPort)}:9000"]           # API + admin (/app)
     volumes:
       - ./config:/app/config:ro    # boutiques, devises, pays → régions, sales channels, clés
       - ./seed:/app/seed:ro        # products.csv + images à importer
@@ -85,30 +88,68 @@ ${services}
       RUSTFS_SECRET_KEY: \${S3_SECRET_ACCESS_KEY}
     # Seule exception au « pas de port public » : les navigateurs chargent les images ici.
     # Le backend rend le bucket lisible (lecture seule) ; l'écriture exige les identifiants.
-    ports: ["${p.storagePort}:9000"]
+    ports: ["${bind(p, p.storagePort)}:9000"]
     volumes: [storage_data:/data]
     healthcheck:
       test: ["CMD-SHELL", "curl -fsS http://127.0.0.1:9000/health >/dev/null || exit 1"]
       interval: 5s
       retries: 20
-
+${p.urls ? caddyService : ""}
 volumes:
   pg_data:
   redis_data:
   storage_data:
-  keys:
+  keys:${p.urls ? "\n  caddy_data:\n  caddy_config:" : ""}
+`;
+}
+const caddyService = `
+  # ───────── Production : https automatique (Let's Encrypt), un domaine par boutique ─────────
+  caddy:
+    image: caddy:2-alpine
+    restart: unless-stopped
+    ports: ["80:80", "443:443"]
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - caddy_data:/data
+      - caddy_config:/config
+    depends_on:
+      backend: { condition: service_healthy }
 `;
+/** Caddyfile (production) : chaque domaine vers son container ; certificats https obtenus et renouvelés par Caddy. */
+export function caddyfile(p) {
+    const site = (url, upstream) => `${host(url)} {
+	encode zstd gzip
+	reverse_proxy ${upstream}
+}
+`;
+    return [
+        "# GÉNÉRÉ par create-boutique à partir de config/project.json — ne pas modifier à la main.",
+        ...p.boutiques.filter((b) => b.url).map((b) => site(b.url, `storefront-${b.slug}:8000`)),
+        site(p.urls.api, "backend:9000"),
+        site(p.urls.files, "storage:9000"),
+    ].join("\n");
+}
+/** Écrit docker-compose.yml (+ Caddyfile en production, supprimé sinon). */
+export function writeCompose(dir, p) {
+    fs.writeFileSync(path.join(dir, "docker-compose.yml"), composeYaml(p));
+    const file = path.join(dir, "Caddyfile");
+    if (p.urls)
+        fs.writeFileSync(file, caddyfile(p));
+    else if (fs.existsSync(file))
+        fs.rmSync(file);
 }
 /** Variables qui dépendent de project.json (réécrites à chaque apply). Les secrets ne sont jamais régénérés. */
 function derivedEnv(p) {
     const origins = p.boutiques.map((b) => b.url ?? `http://localhost:${b.port}`);
-    const admin = `http://localhost:${p.apiPort}`;
+    const trim = (u) => u.replace(/\/+$/, "");
+    const admin = trim(p.urls?.api ?? `http://localhost:${p.apiPort}`);
+    const files = trim(p.urls?.files ?? `http://localhost:${p.storagePort}`);
     return {
         PROJECT: p.project,
         STORE_CORS: origins.join(","),
         ADMIN_CORS: admin,
         AUTH_CORS: admin,
-        S3_FILE_URL: `http://localhost:${p.storagePort}/medusa`,
+        S3_FILE_URL: `${files}/medusa`,
     };
 }
 export function writeEnv(dir, p, s) {
@@ -188,11 +229,23 @@ const day = (d, add = 0, end = false) => {
     x.setUTCHours(end ? 23 : 0, end ? 59 : 0, end ? 59 : 0, 0);
     return x;
 };
+/** É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"]) {
+        const found = images.find((f) => /\.(png|jpe?g|webp)$/i.test(f) && f.replace(/\.[^.]+$/, "").toLowerCase() === name);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
 /** Dates de la prochaine occurrence de la campagne (si la saison est passée, l'année suivante). */
 export function campaignDates(theme, now = new Date()) {
     const build = (y) => {
         const tg = thanksgiving(y);
-        switch (theme) {
+        // Variantes (black-friday-2…) : mêmes dates que leur événement
+        switch (baseTheme(theme)) {
             case "halloween":
                 return [new Date(Date.UTC(y, 9, 20)), day(new Date(Date.UTC(y, 9, 31)), 0, true)];
             case "thanksgiving":
@@ -222,7 +275,9 @@ export function writeCampaignFiles(dir, p, language) {
     fs.mkdirSync(campaignsDir, { recursive: true });
     const locale = `${language}-${p.defaults.country.toUpperCase()}`;
     // Campagne suivante : prochaine boutique dans l'ordre des saisons.
-    const ordered = [...p.boutiques].sort((a, b) => THEME_ORDER.indexOf(a.theme) - THEME_ORDER.indexOf(b.theme));
+    const ordered = [...p.boutiques].sort((a, b) => THEME_ORDER.indexOf(baseTheme(a.theme)) - THEME_ORDER.indexOf(baseTheme(b.theme)));
+    const imagesDir = path.join(dir, "seed", "images");
+    const images = fs.existsSync(imagesDir) ? fs.readdirSync(imagesDir) : [];
     for (const b of p.boutiques) {
         const file = path.join(campaignsDir, `${b.slug}.json`);
         if (fs.existsSync(file))
@@ -235,8 +290,11 @@ export function writeCampaignFiles(dir, p, language) {
         const campaign = {
             ...campaignDates(b.theme),
             ...(next ? { nextCampaign: next } : {}),
-            vars: { discount: DISCOUNT[b.theme] ?? "20%", freeShipping },
+            vars: { discount: DISCOUNT[b.theme] ?? DISCOUNT[baseTheme(b.theme)] ?? "20%", freeShipping },
         };
+        const hero = heroImage(images, b.slug, b.theme);
+        if (hero)
+            Object.assign(campaign, { hero: { image: hero } });
         fs.writeFileSync(file, JSON.stringify(campaign, null, 2) + "\n");
     }
 }

package/cli/dist/project.js

@@ -16,6 +16,8 @@ export const projectSchema = z.object({
     templateVersion: z.string().optional(),
     apiPort: z.number().int().min(1).max(65535).default(9000),
     storagePort: z.number().int().min(1).max(65535).default(9100),
+    /** Production : adresses publiques (https) du backend/admin et des images. Présent = Caddy + https dans le compose. */
+    urls: z.strictObject({ api: z.url(), files: z.url() }).optional(),
     defaults: z.looseObject({
         storeName: z.string().min(1).max(60),
         currency: code3,

package/cli/dist/themes.js

@@ -3,7 +3,11 @@ import path from "node:path";
 import { THEMES_DIR } from "./paths.js";
 // Ordre des saisons ; un thème ajouté plus tard se range après, par ordre alphabétique.
 const SEASONS = ["halloween", "thanksgiving", "black-friday", "cyber-monday", "noel", "nouvel-an"];
-const rank = (id) => (SEASONS.includes(id) ? SEASONS.indexOf(id) : SEASONS.length);
+// Variantes (halloween-2…) : rangées juste après leur événement.
+const rank = (id) => {
+    const base = id.replace(/-\d+$/, "");
+    return SEASONS.includes(base) ? SEASONS.indexOf(base) : SEASONS.length;
+};
 /** Registre des thèmes : un dossier templates/storefront/themes/<id>/ avec theme.json. */
 export function listThemes() {
     if (!fs.existsSync(THEMES_DIR))

package/package.json

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

package/templates/backend/src/lib/emails.ts

@@ -24,10 +24,17 @@ const DICTS: Record<string, typeof en> = { en, fr }
 const THEMES: Record<string, { primary: string; onPrimary: string }> = {
   halloween: { primary: "#ff7a1a", onPrimary: "#0e0c14" },
   thanksgiving: { primary: "#c2410c", onPrimary: "#ffffff" },
-  "black-friday": { primary: "#f97316", onPrimary: "#09090b" },
+  "black-friday": { primary: "#ffd400", onPrimary: "#0a0a0a" },
   "cyber-monday": { primary: "#4a2bd6", onPrimary: "#ffffff" },
   noel: { primary: "#b91c1c", onPrimary: "#ffffff" },
   "nouvel-an": { primary: "#d9b54a", onPrimary: "#111018" },
+  // Variantes (2e site par événement)
+  "halloween-2": { primary: "#a3e635", onPrimary: "#0b0a10" },
+  "thanksgiving-2": { primary: "#2f5d3a", onPrimary: "#ffffff" },
+  "black-friday-2": { primary: "#ff6a00", onPrimary: "#0a0a0a" },
+  "cyber-monday-2": { primary: "#22d3ee", onPrimary: "#04111a" },
+  "noel-2": { primary: "#d4af37", onPrimary: "#0f1d17" },
+  "nouvel-an-2": { primary: "#f5b5c8", onPrimary: "#0c0f24" },
 }
 
 export const escapeHtml = (s: unknown) =>

package/templates/backend/src/scripts/campaign-import.ts

@@ -6,6 +6,7 @@ import { ExecArgs } from "@medusajs/framework/types"
 import { ContainerRegistrationKeys, Modules } from "@medusajs/framework/utils"
 import { CampaignFile, CampaignInput } from "../modules/campaign/validators"
 import { upsertCampaignWorkflow } from "../workflows/upsert-campaign"
+import { uploadSeedImage } from "./seed"
 
 export default async function campaignImport({ container }: ExecArgs) {
   const logger = container.resolve(ContainerRegistrationKeys.LOGGER)
@@ -14,6 +15,7 @@ export default async function campaignImport({ container }: ExecArgs) {
   const data: Record<string, unknown> = JSON.parse(Buffer.from(raw, "base64").toString("utf8"))
 
   const salesChannels = container.resolve(Modules.SALES_CHANNEL)
+  const image = async (v?: string) => (v ? uploadSeedImage(container, v) : undefined)
   let count = 0
   for (const [slug, value] of Object.entries(data)) {
     const [channel] = await salesChannels.listSalesChannels({ name: slug })
@@ -25,10 +27,10 @@ export default async function campaignImport({ container }: ExecArgs) {
       ...file,
       hero: file.hero ? hero : undefined,
       promo: file.promo ? promo : undefined,
-      // Seules les URL sont reprises (un nom de fichier n'est pas une image stockée).
-      heroImage: heroImage && /^https?:\/\//.test(heroImage) ? heroImage : undefined,
-      promoImage: promoImage && /^https?:\/\//.test(promoImage) ? promoImage : undefined,
-      logo: file.logo && /^https?:\/\//.test(file.logo) ? file.logo : undefined,
+      // URL gardées telles quelles ; un nom de fichier de seed/images est envoyé au stockage.
+      heroImage: await image(heroImage),
+      promoImage: await image(promoImage),
+      logo: await image(file.logo),
     })
     await upsertCampaignWorkflow(container).run({ input: { sales_channel_id: channel.id, campaign } })
     count++

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

@@ -271,13 +271,14 @@ export default async function seed({ container }: ExecArgs) {
   }
 
   // ---------- Produits : seed/products.csv ----------
-  await importProducts({ container, logger, currencies, channelIds, locationId: location.id, profileId: profile.id, productService })
+  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 })
 
   logger.info("[seed] terminé")
 }
 
 /** Envoie seed/images/<nom> au stockage et renvoie son URL (URL http(s) renvoyée telle quelle). */
-async function uploadSeedImage(container: ExecArgs["container"], name: string): Promise<string | undefined> {
+export async function uploadSeedImage(container: ExecArgs["container"], name: string): Promise<string | undefined> {
   if (/^https?:\/\//.test(name)) return name
   const file = path.join(SEED_DIR, "images", path.basename(name))
   if (!fs.existsSync(file)) return undefined
@@ -304,6 +305,7 @@ async function importProducts({
   logger,
   currencies,
   channelIds,
+  themeOf,
   locationId,
   profileId,
   productService,
@@ -312,6 +314,8 @@ async function importProducts({
   logger: { info: (m: string) => void; warn: (m: string) => void }
   currencies: string[]
   channelIds: Record<string, string>
+  /** slug → thème, pour la colonne « themes » du CSV */
+  themeOf: Record<string, string>
   locationId: string
   profileId: string
   productService: { listProducts: (f: { handle: string[] }, c: { select: string[] }) => Promise<{ handle: string }[]> }
@@ -345,7 +349,15 @@ async function importProducts({
     const images = (await Promise.all((r.images || "").split("|").filter(Boolean).map(imageUrl))).filter((u): u is string => !!u)
     const optionTitle = r.variant_option || "Default option"
     const values = r.variant_values ? r.variant_values.split("|").map((v) => v.trim()) : ["Default option value"]
-    const boutiques = r.boutiques ? r.boutiques.split("|").map((s) => s.trim()) : Object.keys(channelIds)
+    // Boutiques du produit : colonne « boutiques » (slugs), ou « themes » (toutes les boutiques de ces thèmes,
+    // réutilisable d'un projet à l'autre), sinon toutes les boutiques.
+    const list = (v: string) => v.split("|").map((x) => x.trim()).filter(Boolean)
+    const boutiques = r.boutiques
+      ? list(r.boutiques)
+      : r.themes
+        ? 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)`)
 
     const prices = Object.keys(r)
       .filter((k) => /^price_[a-z]{3}$/.test(k) && r[k])

package/templates/storefront/locales/en.json

@@ -270,5 +270,37 @@
   "track.error.notFound": "No order matches this number and email.",
   "track.error.tooMany": "Too many attempts. Please try again in a few minutes.",
   "track.error.invalid": "Please enter a valid order number and email.",
-  "track.account": "You have an account?"
+  "track.account": "You have an account?",
+  "shop.all": "All",
+  "shop.count": "{count} products",
+  "contact.eyebrow": "Customer care",
+  "contact.title": "Got a question? We're here.",
+  "contact.badge.value": "24h",
+  "contact.badge.label": "average reply time",
+  "contact.email.title": "Email us",
+  "contact.email.text": "Questions about a product, an order or a refund: we reply within 24 business hours.",
+  "contact.track.title": "Track my order",
+  "contact.track.text": "Your order number and email are all you need to see where your parcel is.",
+  "contact.track.cta": "Track my parcel",
+  "contact.shipping.title": "Shipping",
+  "contact.shipping.text": "Delivery times, destinations and shipping costs, shown before you pay.",
+  "contact.returns.title": "Returns and refunds",
+  "contact.returns.text": "30 days to change your mind, refunded to your original payment method.",
+  "contact.more": "Learn more",
+  "contact.faq.q1": "When will I receive my order?",
+  "contact.faq.a1": "Delivery times depend on the shipping method you choose and are shown at checkout. You get an email with tracking as soon as it ships.",
+  "contact.faq.q2": "How do I return an item?",
+  "contact.faq.a2": "Email us within 30 days with your order number and we'll send return instructions. Refunds are issued as soon as we receive it.",
+  "contact.faq.q3": "Is payment secure?",
+  "contact.faq.a3": "Yes. Payments are processed by Stripe (card, Apple Pay, Google Pay): {storeName} never sees or stores your card details.",
+  "contact.faq.q4": "Can I change or cancel my order?",
+  "contact.faq.a4": "Yes, as long as it hasn't shipped: contact us as soon as possible with your order number.",
+  "section.fold": "Top deals right now",
+  "section.spotlight": "The deals that go first",
+  "card.viewShort": "View",
+  "form.country": "Country",
+  "account.keepShopping": "Shop the deals",
+  "account.profileDone": "Profile completed",
+  "account.completeProfile": "Complete your profile (phone, billing address) to check out faster.",
+  "nav.menu": "Menu"
 }

package/templates/storefront/locales/fr.json

@@ -270,5 +270,37 @@
   "track.error.notFound": "Aucune commande ne correspond à ce numéro et à cet e-mail.",
   "track.error.tooMany": "Trop de tentatives. Réessayez dans quelques minutes.",
   "track.error.invalid": "Saisissez un numéro de commande et un e-mail valides.",
-  "track.account": "Vous avez un compte ?"
+  "track.account": "Vous avez un compte ?",
+  "shop.all": "Tout",
+  "shop.count": "{count} produits",
+  "contact.eyebrow": "Service client",
+  "contact.title": "Une question ? On est là.",
+  "contact.badge.value": "24 h",
+  "contact.badge.label": "délai de réponse moyen",
+  "contact.email.title": "Écrivez-nous",
+  "contact.email.text": "Une question sur un produit, une commande ou un remboursement : réponse sous 24 h ouvrées.",
+  "contact.track.title": "Suivre ma commande",
+  "contact.track.text": "Numéro de commande et e-mail suffisent pour voir où en est votre colis.",
+  "contact.track.cta": "Suivre mon colis",
+  "contact.shipping.title": "Livraison",
+  "contact.shipping.text": "Délais, zones desservies et frais de port, affichés avant le paiement.",
+  "contact.returns.title": "Retours et remboursements",
+  "contact.returns.text": "30 jours pour changer d'avis, remboursement sur le moyen de paiement utilisé.",
+  "contact.more": "En savoir plus",
+  "contact.faq.q1": "Quand vais-je recevoir ma commande ?",
+  "contact.faq.a1": "Les délais dépendent du mode de livraison choisi et sont affichés au moment de la commande. Vous recevez un e-mail avec le numéro de suivi dès l'expédition.",
+  "contact.faq.q2": "Comment retourner un article ?",
+  "contact.faq.a2": "Écrivez-nous dans les 30 jours avec votre numéro de commande : nous vous envoyons les instructions de retour. Le remboursement est fait dès réception.",
+  "contact.faq.q3": "Le paiement est-il sécurisé ?",
+  "contact.faq.a3": "Oui. Les paiements sont traités par Stripe (carte, Apple Pay, Google Pay) : {storeName} ne voit ni ne stocke jamais vos données de carte.",
+  "contact.faq.q4": "Puis-je modifier ou annuler ma commande ?",
+  "contact.faq.a4": "Tant qu'elle n'est pas expédiée, oui : contactez-nous au plus vite avec votre numéro de commande.",
+  "section.fold": "Les offres phares",
+  "section.spotlight": "Les offres qui partent en premier",
+  "card.viewShort": "Voir",
+  "form.country": "Pays",
+  "account.keepShopping": "Voir les offres",
+  "account.profileDone": "Profil complété",
+  "account.completeProfile": "Complétez votre profil (téléphone, adresse de facturation) pour commander plus vite.",
+  "nav.menu": "Menu"
 }

package/templates/storefront/package-lock.json

@@ -15,6 +15,7 @@
         "@radix-ui/react-accordion": "1.2.20",
         "@stripe/react-stripe-js": "5.6.1",
         "@stripe/stripe-js": "8.11.0",
+        "libphonenumber-js": "1.13.14",
         "lodash": "4.18.1",
         "next": "16.3.6",
         "qs": "6.16.0",
@@ -7408,6 +7409,12 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.13.14",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.13.14.tgz",
+      "integrity": "sha512-llihgCcx0BFLksecLP+x1J+6JDE1GsXS1RN/LoPF6qcwpeQcnjj0lcvZxY8AzbEpYwyZWPZW/nDuqkqzm3amiw==",
+      "license": "MIT"
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",

package/templates/storefront/package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-accordion": "1.2.20",
     "@stripe/react-stripe-js": "5.6.1",
     "@stripe/stripe-js": "8.11.0",
+    "libphonenumber-js": "1.13.14",
     "lodash": "4.18.1",
     "next": "16.3.6",
     "qs": "6.16.0",

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

@@ -2,6 +2,7 @@ import { Metadata } from "next"
 import { notFound } from "next/navigation"
 import { getBoutique } from "@lib/boutique/config"
 import { t } from "@lib/boutique/i18n"
+import ContactPage from "@modules/ub/contact-page"
 
 const PAGES = ["shipping", "returns", "privacy", "terms", "contact"] as const
 type Page = (typeof PAGES)[number]
@@ -18,8 +19,9 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 export default async function LegalPage(props: Props) {
   const { page } = await props.params
   if (!isPage(page)) notFound()
+  if (page === "contact") return <ContactPage />
 
-  const { storeName, merchantEmail } = getBoutique()
+  const { storeName } = getBoutique()
 
   return (
     <section className="ub-section">
@@ -28,14 +30,6 @@ export default async function LegalPage(props: Props) {
           {t(`legal.${page}`)}
         </h1>
         <p>{t(`legal.${page}.body`, { storeName })}</p>
-        {page === "contact" && merchantEmail && (
-          <p style={{ marginTop: 16 }}>
-            {t("legal.contact.email", { email: "" })}
-            <a href={`mailto:${merchantEmail}`} style={{ textDecoration: "underline" }}>
-              {merchantEmail}
-            </a>
-          </p>
-        )}
       </div>
     </section>
   )

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

@@ -9,6 +9,7 @@ import { Hero, PromoBanner, SectionHead, TrustBar } from "@modules/ub/campaign-b
 import CampaignEnded from "@modules/ub/campaign-ended"
 import CategoryTiles from "@modules/ub/category-tiles"
 import { ProductGrid } from "@modules/ub/product-card"
+import { DealsFold, DealsSpotlight } from "@modules/ub/showcase"
 
 async function Categories({ title }: { title: string }) {
   const categories = await listCategories().catch(() => [])
@@ -40,6 +41,24 @@ async function Products({ title }: { title: string }) {
   )
 }
 
+/** Vitrines interactives : accordion « offres phares » puis grande carte sombre (produits les plus remisés d'abord). */
+async function Showcase({ part, eyebrow }: { part: "fold" | "spotlight"; eyebrow?: string }) {
+  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 part === "fold" ? (
+    <DealsFold products={sorted} title={t("section.fold")} />
+  ) : (
+    <DealsSpotlight products={sorted.slice(5)} eyebrow={eyebrow} title={t("section.spotlight")} />
+  )
+}
+
 function GridFallback() {
   return <div className="ub-section" aria-busy="true" style={{ minHeight: 320 }} />
 }
@@ -56,9 +75,15 @@ export default async function Home() {
     <>
       <Hero campaign={campaign} />
       <TrustBar freeShipping={campaign.freeShipping} />
+      <Suspense fallback={<GridFallback />}>
+        <Showcase part="fold" />
+      </Suspense>
       <Suspense fallback={<GridFallback />}>
         <Categories title={campaign.sections?.categories ?? t("section.categories")} />
       </Suspense>
+      <Suspense fallback={<GridFallback />}>
+        <Showcase part="spotlight" eyebrow={campaign.hero.eyebrow} />
+      </Suspense>
       <PromoBanner campaign={campaign} />
       <Suspense fallback={<GridFallback />}>
         <Products title={campaign.sections?.products ?? t("section.products")} />

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

@@ -12,17 +12,19 @@ type Params = {
   searchParams: Promise<{
     sortBy?: SortOptions
     page?: string
+    category?: string
   }>
 }
 
 export default async function StorePage(props: Params) {
   const searchParams = await props.searchParams;
-  const { sortBy, page } = searchParams
+  const { sortBy, page, category } = searchParams
 
   return (
     <StoreTemplate
       sortBy={sortBy}
       page={page}
+      category={category}
     />
   )
 }

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

@@ -7,6 +7,13 @@ import { Metadata } from "next"
 import "styles/globals.css"
 import "styles/ub/tokens.css"
 import "styles/ub/bundle.css"
+import "styles/ub/variants.css"
+import "styles/ub/pages.css"
+import "styles/ub/showcase.css"
+import "styles/ub/forms.css"
+import "styles/ub/account.css"
+import "styles/ub/black-friday.css"
+import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"
 import "styles/ub/medusa-ui.css"
 import "styles/ub/overrides.css"
@@ -31,9 +38,9 @@ export default function RootLayout(props: { children: React.ReactNode }) {
   const b = getBoutique()
 
   return (
-    <html lang={b.locale} data-theme={b.theme.id} data-mode="light" className={themeFontClasses(b.theme)}>
+    <html lang={b.locale} data-theme={b.theme.layout ?? b.theme.id} data-variant={b.theme.layout ? b.theme.id : undefined} data-mode="light" className={themeFontClasses(b.theme)}>
       <body className="ub">
-        <I18nProvider messages={messages("")}>
+        <I18nProvider messages={messages("")} locale={b.locale}>
           <main className="relative">{props.children}</main>
         </I18nProvider>
       </body>

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

@@ -95,6 +95,7 @@ function load(): Boutique {
   }
 
   const theme = loadTheme(entry.theme)
+  if (theme.layout) loadTheme(theme.layout) // variante : la mise en page empruntée doit exister
 
   const keyFile = path.join(/*turbopackIgnore: true*/ KEYS_DIR, slug)
   let publishableKey = ""

package/templates/storefront/src/lib/boutique/i18n-client.tsx

@@ -5,15 +5,23 @@ import { createContext, useContext } from "react"
 type Dict = Record<string, string>
 
 const I18nContext = createContext<Dict>({})
+/** Locale de l'instance (ex. fr-SN) : langue du site + pays de la boutique. */
+const LocaleContext = createContext("en-US")
 
 /**
  * Dictionnaire de l'instance pour les composants client (checkout, panier, compte).
  * Rempli par le layout racine (serveur) avec locales/<lang>.json + repli anglais.
  */
-export function I18nProvider({ messages, children }: { messages: Dict; children: React.ReactNode }) {
-  return <I18nContext.Provider value={messages}>{children}</I18nContext.Provider>
+export function I18nProvider({ messages, locale = "en-US", children }: { messages: Dict; locale?: string; children: React.ReactNode }) {
+  return (
+    <LocaleContext.Provider value={locale}>
+      <I18nContext.Provider value={messages}>{children}</I18nContext.Provider>
+    </LocaleContext.Provider>
+  )
 }
 
+export const useLocale = () => useContext(LocaleContext)
+
 export function format(text: string, vars?: Record<string, string | number>) {
   return vars ? text.replace(/\{(\w+)\}/g, (m, k: string) => (k in vars ? String(vars[k]) : m)) : text
 }