@salifbiaye/create-boutique 0.5.0 → 0.6.0

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

@@ -33,6 +33,9 @@ const overridable = {
 export const projectSchema = z.object({
   project: z.string().regex(SLUG),
   templateVersion: z.string().optional(),
+  /** single : un seul site (site.port, site.url) qui affiche la boutique active (choisie dans l'admin) */
+  mode: z.enum(["multi", "single"]).default("multi"),
+  site: z.object({ port: z.number().int().min(1).max(65535), url: z.url().optional() }).optional(),
   defaults: z
     .object({
       ...overridable,
@@ -48,7 +51,7 @@ export const projectSchema = z.object({
         .object({
           slug: z.string().regex(SLUG, "slug : minuscules, chiffres et tirets"),
           theme: z.string().regex(SLUG),
-          port: z.number().int().min(1).max(65535),
+          port: z.number().int().min(1).max(65535).optional(),
           url: z.url().optional(),
           storeName: overridable.storeName.optional(),
           currency: overridable.currency.optional(),

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

@@ -2,21 +2,45 @@ import "server-only"
 
 import { getBoutique } from "@lib/boutique/config"
 import Medusa, { FetchArgs, FetchInput } from "@medusajs/js-sdk"
+import { cookies } from "next/headers"
 
 // URL interne du backend (réseau Docker) : jamais exposée au navigateur.
 const MEDUSA_BACKEND_URL = process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
 
-let client: Medusa | undefined
+/** Cookie : boutique où le panier a été créé (mode single, cf. setCartId). */
+export const CART_BOUTIQUE_COOKIE = "_ub_cart_boutique"
+
+// Requêtes liées au panier : elles utilisent la clé de la boutique du panier, pas celle affichée.
+const CART_PATHS = /^\/?store\/(carts|payment-collections|shipping-options)\b/
 
 /**
- * Client Medusa de la boutique : la publishable key vient de KEYS_DIR/<slug>,
+ * Mode single : un client qui a commencé son panier avant un changement de boutique le termine
+ * dans sa boutique d'origine (même canal de vente, mêmes prix et même livraison). Mode multi : sans effet.
+ */
+async function cartKey(input: FetchInput): Promise<string | undefined> {
+  if (process.env.BOUTIQUE !== "auto" || !CART_PATHS.test(String(input))) return undefined
+  try {
+    const slug = (await cookies()).get(CART_BOUTIQUE_COOKIE)?.value
+    if (!slug || slug === getBoutique().slug) return undefined
+    return getBoutique(slug).publishableKey
+  } catch {
+    // Boutique retirée du projet, ou appel hors requête : clé de la boutique affichée
+    return undefined
+  }
+}
+
+const clients = new Map<string, Medusa>()
+
+/**
+ * Client Medusa de la boutique affichée : la publishable key vient de KEYS_DIR/<slug>,
  * lue à l'exécution (pas de variable NEXT_PUBLIC_* figée au build).
- * Créé au premier usage pour que `next build` n'ait besoin d'aucune boutique.
+ * Un client par boutique (mode single : la boutique active change sans redémarrage).
  */
 function getClient(): Medusa {
-  if (client) return client
-
   const boutique = getBoutique()
+  const existing = clients.get(boutique.slug)
+  if (existing) return existing
+
   const medusa = new Medusa({
     baseUrl: MEDUSA_BACKEND_URL,
     debug: process.env.NODE_ENV === "development",
@@ -26,12 +50,17 @@ function getClient(): Medusa {
   // Langue fixée par l'instance : les traductions Medusa suivent la langue du projet.
   const originalFetch = medusa.client.fetch.bind(medusa.client)
   medusa.client.fetch = async <T>(input: FetchInput, init?: FetchArgs): Promise<T> => {
-    const headers = { "x-medusa-locale": boutique.locale, ...(init?.headers ?? {}) }
+    const key = await cartKey(input)
+    const headers = {
+      "x-medusa-locale": boutique.locale,
+      ...(key ? { "x-publishable-api-key": key } : {}),
+      ...(init?.headers ?? {}),
+    }
     return originalFetch(input, { ...init, headers })
   }
 
-  client = medusa
-  return client
+  clients.set(boutique.slug, medusa)
+  return medusa
 }
 
 export const sdk = new Proxy({} as Medusa, {

package/templates/storefront/src/lib/data/cart.ts

@@ -9,6 +9,7 @@ import {
   getAuthHeaders,
   getCacheOptions,
   getCacheTag,
+  cartFromOtherBoutique,
   getCartId,
   removeCartId,
   setCartId,
@@ -54,7 +55,9 @@ export async function retrieveCart(cartId?: string, fields?: string) {
 export async function getOrSetCart() {
   const region = await getRegion()
 
-  let cart = await retrieveCart(undefined, "id,region_id")
+  // Mode single : un nouvel article ajouté après un changement de boutique démarre un panier dans la boutique en ligne
+  // (l'ancien panier appartient à l'autre canal de vente et ne peut pas recevoir ses produits).
+  let cart = (await cartFromOtherBoutique()) ? null : await retrieveCart(undefined, "id,region_id")
 
   const headers = {
     ...(await getAuthHeaders()),

package/templates/storefront/src/lib/data/cookies.ts

@@ -1,5 +1,6 @@
 import "server-only"
-import { getBoutique } from "@lib/boutique/config"
+import { getBoutique, isSingleSite } from "@lib/boutique/config"
+import { CART_BOUTIQUE_COOKIE } from "@lib/config"
 import { cookies as nextCookies } from "next/headers"
 
 /**
@@ -7,9 +8,10 @@ import { cookies as nextCookies } from "next/headers"
  * toutes les boutiques du projet les partagent. Chaque nom est donc suffixé
  * par le slug, pour qu'un panier ou une session d'une boutique n'apparaisse
  * jamais dans une autre.
+ * Mode single : un seul site, noms fixes : le client reste connecté et garde son panier quand la boutique change.
  */
 export const cookieName = (base: "jwt" | "cart_id" | "cache_id" | "onboarding") =>
-  `_medusa_${base}_${getBoutique().slug}`
+  `_medusa_${base}_${isSingleSite() ? "site" : getBoutique().slug}`
 
 export const getAuthHeaders = async (): Promise<
   { authorization: string } | {}
@@ -93,6 +95,15 @@ export const setCartId = async (cartId: string) => {
     ...secureCookie,
     maxAge: 60 * 60 * 24 * 7,
   })
+  // Boutique du panier (mode single) : le client finit son panier dans cette boutique même si le site change
+  cookies.set(CART_BOUTIQUE_COOKIE, getBoutique().slug, { ...secureCookie, maxAge: 60 * 60 * 24 * 7 })
+}
+
+/** Mode single : le panier en cours a été commencé dans une autre boutique que celle en ligne maintenant. */
+export const cartFromOtherBoutique = async () => {
+  if (!isSingleSite()) return false
+  const slug = (await nextCookies()).get(CART_BOUTIQUE_COOKIE)?.value
+  return !!slug && slug !== getBoutique().slug
 }
 
 export const removeCartId = async () => {
@@ -100,4 +111,5 @@ export const removeCartId = async () => {
   cookies.set(cookieName("cart_id"), "", {
     maxAge: -1,
   })
+  cookies.set(CART_BOUTIQUE_COOKIE, "", { maxAge: -1 })
 }

package/templates/storefront/src/modules/checkout/components/shipping-address/index.tsx

@@ -1,3 +1,4 @@
+import { useLocale } from "@lib/boutique/i18n-client"
 import { HttpTypes } from "@medusajs/types"
 import { Container } from "@medusajs/ui"
 import Checkbox from "@modules/common/components/checkbox"
@@ -19,6 +20,10 @@ const ShippingAddress = ({
   checked: boolean
   onChange: () => void
 }) => {
+  // Pays de la boutique (fin de la locale, ex. fr-FR → fr) proposé par défaut s'il est livré
+  const locale = useLocale()
+  const homeCountry = locale.split("-")[1]?.toLowerCase() ?? ""
+  const defaultCountry = cart?.region?.countries?.some((c) => c.iso_2 === homeCountry) ? homeCountry : ""
   const [formData, setFormData] = useState<Record<string, any>>({
     "shipping_address.first_name": cart?.shipping_address?.first_name || "",
     "shipping_address.last_name": cart?.shipping_address?.last_name || "",
@@ -26,7 +31,7 @@ const ShippingAddress = ({
     "shipping_address.company": cart?.shipping_address?.company || "",
     "shipping_address.postal_code": cart?.shipping_address?.postal_code || "",
     "shipping_address.city": cart?.shipping_address?.city || "",
-    "shipping_address.country_code": cart?.shipping_address?.country_code || "",
+    "shipping_address.country_code": cart?.shipping_address?.country_code || defaultCountry,
     "shipping_address.province": cart?.shipping_address?.province || "",
     "shipping_address.phone": cart?.shipping_address?.phone || "",
     email: cart?.email || "",

package/templates/storefront/src/proxy.ts

@@ -45,7 +45,8 @@ export function proxy(request: NextRequest) {
   request.headers.set("content-security-policy", csp)
   request.headers.set("x-nonce", nonce)
 
-  const cacheCookie = `_medusa_cache_id_${process.env.BOUTIQUE}`
+  // Même nom que lib/data/cookies.ts (mode single : « site », commun à toutes les boutiques)
+  const cacheCookie = `_medusa_cache_id_${process.env.BOUTIQUE === "auto" ? "site" : process.env.BOUTIQUE}`
   const newCacheId = request.cookies.has(cacheCookie) ? null : crypto.randomUUID()
   if (newCacheId) {
     // Visible dès cette requête par les server components…

package/templates/storefront/src/styles/ub/motion.css

@@ -46,7 +46,8 @@
   :is(.ub-hero, .ub-hv-hero, .ub-gl-hero, .ub-cn-hero, .ub-al-hero, .ub-tc-hero, .ub-gr-hero) :is(a, button) { animation: ub-hero-in 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
   @keyframes ub-hero-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
   /* Fond du hero : très lente respiration */
-  :is(.ub-hv-hero__bg, .ub-tc-hero__cover img, .ub-gr-hero__bg) { animation: ub-drift 22s ease-in-out infinite alternate; }
+  /* Seulement les fonds qui couvrent tout le hero (un visuel posé sur une partie, fondu par un dégradé, laisserait voir son bord) */
+  :is(.ub-hv-hero__bg, .ub-gr-hero__bg) { animation: ub-drift 22s ease-in-out infinite alternate; }
   @keyframes ub-drift { to { transform: scale(1.05) translate3d(-1%, -1%, 0); } }
 
   /* ---------- Cartes produits : survol ---------- */

package/templates/storefront/src/styles/ub/tech.css

@@ -37,10 +37,10 @@
 }
 
 /* ---------- En-tête et pied de page ---------- */
-[data-theme="cyber-monday"]:not([data-variant]) .ub-nav { background: rgb(11 7 22 / 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-nav { background: #0b0716; border-bottom: 1px solid var(--border); }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-search { background: var(--surface); border-color: var(--border); color: var(--ink); }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-nav__cta { background: var(--primary); color: #fff; box-shadow: var(--tc-glow); }
-[data-variant="cyber-monday-2"] .ub-nav { background: rgb(255 255 255 / 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
+[data-variant="cyber-monday-2"] .ub-nav { background: #ffffff; border-bottom: 1px solid var(--border); }
 [data-variant="cyber-monday-2"] .ub-nav__cta { background: var(--ink); color: #fff; }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-footwrap { --foot-bg: #120b24; --foot-ink: var(--ink); --cta-bg: var(--primary); --cta-ink: #ffffff; }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-footwrap .ub-footer { border: 1px solid var(--border); }
@@ -93,7 +93,7 @@
 /* Cyber Monday 1 : le visuel fait partie du fond (comme Black Friday) : posé à droite sur toute la hauteur,
    fondu dans le noir à gauche, en haut et en bas. Pas de cadre, pas d'ombre. */
 .ub-tc-hero[data-has-image] .ub-tc-hero__beam { display: none; }
-.ub-tc-hero__cover { position: absolute; inset: 0 0 0 34%; z-index: -1; }
+.ub-tc-hero__cover { position: absolute; inset: 0 0 0 34%; z-index: -1; overflow: hidden; }
 .ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: ub-tc-fadein 1.2s ease both; }
 .ub-tc-hero__cover::after {
   content: "";