@salifbiaye/create-boutique 0.5.0 → 0.7.0

package/templates/storefront/src/lib/constants.tsx

@@ -35,6 +35,19 @@ export const paymentInfoMap: Record<
     title: <T k="checkout.manualPayment" />,
     icon: <CreditCard />,
   },
+  // Agrégateurs d'Afrique de l'Ouest : le client paie sur leur page (Wave, Orange Money, carte…), puis revient
+  pp_paytech_paytech: {
+    title: <T k="checkout.payPaytech" />,
+    icon: <CreditCard />,
+  },
+  pp_paydunya_paydunya: {
+    title: <T k="checkout.payPaydunya" />,
+    icon: <CreditCard />,
+  },
+  pp_naboopay_naboopay: {
+    title: <T k="checkout.payNaboopay" />,
+    icon: <CreditCard />,
+  },
   // Add more payment providers here
 }
 
@@ -48,6 +61,10 @@ export const isStripeLike = (providerId?: string) => {
 export const isPaypal = (providerId?: string) => {
   return providerId?.startsWith("pp_paypal")
 }
+/** Paiement sur la page de l'agrégateur (PayTech, PayDunya, NabooPay), puis retour sur la boutique */
+export const isRedirectPay = (providerId?: string) =>
+  !!providerId && /^pp_(paytech|paydunya|naboopay)_/.test(providerId)
+
 export const isManual = (providerId?: string) => {
   return providerId?.startsWith("pp_system_default")
 }

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/lib/data/review-actions.ts

@@ -0,0 +1,28 @@
+"use server"
+
+import { sdk } from "@lib/config"
+
+export type ReviewFormState = { ok?: boolean; error?: "invalid" | "duplicate" | "expired" | "tooMany" | "failed" }
+
+/** Envoi d'un avis depuis la page « Laisser un avis » : le backend vérifie le jeton, la commande et le produit. */
+export async function submitReview(_prev: ReviewFormState, form: FormData): Promise<ReviewFormState> {
+  const rating = Number(form.get("rating"))
+  const body = {
+    token: String(form.get("token") ?? ""),
+    product_id: String(form.get("product_id") ?? ""),
+    rating,
+    title: String(form.get("title") ?? "").trim() || undefined,
+    comment: String(form.get("comment") ?? "").trim(),
+    author_name: String(form.get("author_name") ?? "").trim(),
+  }
+  if (!(rating >= 1 && rating <= 5) || body.comment.length < 10 || !body.author_name || /[<>]/.test(body.comment + body.author_name + (body.title ?? ""))) {
+    return { error: "invalid" }
+  }
+  try {
+    await sdk.client.fetch("/store/reviews", { method: "POST", body, cache: "no-store" })
+    return { ok: true }
+  } catch (e) {
+    const status = (e as { status?: number }).status
+    return { error: status === 429 ? "tooMany" : status === 409 || status === 422 ? "duplicate" : status === 400 || status === 401 || status === 403 || status === 404 ? "expired" : "failed" }
+  }
+}

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

@@ -0,0 +1,64 @@
+import "server-only"
+
+import { cache } from "react"
+import { sdk } from "@lib/config"
+
+/**
+ * Avis clients (backend : module productReview). Lecture en cache 1 min : un avis validé dans l'admin
+ * apparaît sur le site en une minute. Toute erreur = « pas d'avis » (jamais une page cassée).
+ */
+export type Review = { id: string; product_id: string; author_name: string; rating: number; title: string | null; comment: string; created_at: string }
+export type ReviewSummary = { average: number; count: number; distribution: [number, number, number, number, number] }
+export type LatestReview = Review & { product: { title: string; handle: string; thumbnail: string | null } }
+export type ReviewOrder = {
+  number: number
+  first_name: string
+  products: { product_id: string; title: string; handle?: string; thumbnail?: string; reviewed: boolean }[]
+}
+
+const CACHED = { method: "GET" as const, next: { revalidate: 60 }, cache: "force-cache" as const }
+const EMPTY: ReviewSummary = { average: 0, count: 0, distribution: [0, 0, 0, 0, 0] }
+
+export const getProductReviews = cache(async (productId: string, limit = 6) => {
+  try {
+    return await sdk.client.fetch<{ reviews: Review[]; count: number; summary: ReviewSummary }>(
+      `/store/reviews?product_id=${encodeURIComponent(productId)}&limit=${limit}`,
+      CACHED
+    )
+  } catch {
+    return { reviews: [] as Review[], count: 0, summary: EMPTY }
+  }
+})
+
+/** Note moyenne et nombre d'avis par produit (cartes produits) */
+export async function getReviewSummaries(productIds: string[]): Promise<Record<string, { average: number; count: number }>> {
+  const ids = [...new Set(productIds)].filter(Boolean).sort()
+  if (!ids.length) return {}
+  try {
+    const { summaries } = await sdk.client.fetch<{ summaries: Record<string, { average: number; count: number }> }>(
+      `/store/reviews/summary?product_ids=${ids.map(encodeURIComponent).join(",")}`,
+      CACHED
+    )
+    return summaries
+  } catch {
+    return {}
+  }
+}
+
+export const getLatestReviews = cache(async (limit = 6): Promise<LatestReview[]> => {
+  try {
+    const { reviews } = await sdk.client.fetch<{ reviews: LatestReview[] }>(`/store/reviews/latest?limit=${limit}`, CACHED)
+    return reviews
+  } catch {
+    return []
+  }
+})
+
+/** Page « Laisser un avis » : produits de la commande du lien (jamais en cache : dépend du jeton) */
+export async function getReviewOrder(token: string): Promise<ReviewOrder | null> {
+  try {
+    return await sdk.client.fetch<ReviewOrder>(`/store/reviews/order?token=${encodeURIComponent(token)}`, { method: "GET", cache: "no-store" })
+  } catch {
+    return null
+  }
+}

package/templates/storefront/src/modules/checkout/components/payment/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 
-import { T } from "@lib/boutique/i18n-client"
+import { T, useT } from "@lib/boutique/i18n-client"
 import { RadioGroup } from "@headlessui/react"
-import { isStripeLike, paymentInfoMap } from "@lib/constants"
+import { isRedirectPay, isStripeLike, paymentInfoMap } from "@lib/constants"
 import { initiatePaymentSession } from "@lib/data/cart"
 import { CheckCircleSolid, CreditCard } from "@medusajs/icons"
 import { Button, Container, Heading, Text, clx } from "@medusajs/ui"
@@ -43,6 +43,25 @@ const Payment = ({
   const pathname = usePathname()
 
   const isOpen = searchParams.get("step") === "payment"
+  const t = useT()
+
+  /**
+   * Paiement sur la page d'un agrégateur (PayTech, PayDunya, NabooPay) : adresse de retour sur cette boutique
+   * (vérifiée par le backend) et client (NabooPay l'exige). Le montant, lui, est toujours calculé par Medusa.
+   */
+  const redirectData = () => {
+    const a = cart.shipping_address ?? cart.billing_address
+    const base = `${window.location.origin}/checkout?step=review`
+    return {
+      return_url: `${base}&pay_return=1`,
+      cancel_url: `${base}&pay_return=cancel`,
+      label: t("checkout.orderLabel"),
+      first_name: a?.first_name ?? undefined,
+      last_name: a?.last_name ?? undefined,
+      phone: a?.phone ?? undefined,
+      email: cart.email ?? undefined,
+    }
+  }
 
   const setPaymentMethod = async (method: string) => {
     setError(null)
@@ -85,9 +104,11 @@ const Payment = ({
       const checkActiveSession =
         activeSession?.provider_id === selectedPaymentMethod
 
-      if (!checkActiveSession) {
+      // Agrégateur : toujours un paiement neuf (montant et client à jour)
+      if (!checkActiveSession || isRedirectPay(selectedPaymentMethod)) {
         await initiatePaymentSession(cart, {
           provider_id: selectedPaymentMethod,
+          ...(isRedirectPay(selectedPaymentMethod) ? { data: redirectData() } : {}),
         })
       }
 
@@ -100,7 +121,8 @@ const Payment = ({
         )
       }
     } catch (err: any) {
-      setError(err.message)
+      // Agrégateur (clés, montant, service indisponible) : message clair, le détail est dans les logs du backend
+      setError(isRedirectPay(selectedPaymentMethod) ? t("checkout.payInitError") : err.message)
     } finally {
       setIsLoading(false)
     }

package/templates/storefront/src/modules/checkout/components/payment-button/index.tsx

@@ -2,7 +2,7 @@
 
 
 import { T } from "@lib/boutique/i18n-client"
-import { isManual, isStripeLike } from "@lib/constants"
+import { isManual, isRedirectPay, isStripeLike } from "@lib/constants"
 import { placeOrder } from "@lib/data/cart"
 import { HttpTypes } from "@medusajs/types"
 import { Button } from "@medusajs/ui"
@@ -28,7 +28,9 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
     (cart.shipping_methods?.length ?? 0) < 1
 
   const paymentSession = cart.payment_collection?.payment_sessions?.[0]
-  const redirectStatus = useSearchParams().get("redirect_status")
+  const params = useSearchParams()
+  const redirectStatus = params.get("redirect_status")
+  const payReturn = params.get("pay_return")
 
   switch (true) {
     case isStripeLike(paymentSession?.provider_id) && !!redirectStatus:
@@ -45,6 +47,15 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
           data-testid={dataTestId}
         />
       )
+    case isRedirectPay(paymentSession?.provider_id):
+      return (
+        <RedirectPayButton
+          notReady={notReady}
+          redirectUrl={typeof paymentSession?.data?.redirect_url === "string" ? paymentSession.data.redirect_url : undefined}
+          payReturn={payReturn}
+          data-testid={dataTestId}
+        />
+      )
     case isManual(paymentSession?.provider_id):
       return (
         <ManualTestPaymentButton notReady={notReady} data-testid={dataTestId} />
@@ -54,6 +65,78 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
   }
 }
 
+/**
+ * Agrégateur (PayTech, PayDunya, NabooPay) : « Payer maintenant » envoie le client sur la page de paiement.
+ * Au retour (?pay_return=1), la commande est validée : le backend demande le statut à l'agrégateur (on ne croit jamais
+ * l'URL de retour). Paiement encore en cours (Wave peut prendre un moment) : message + « Vérifier à nouveau » ;
+ * de toute façon la notification de l'agrégateur validera la commande côté serveur.
+ */
+const RedirectPayButton = ({
+  notReady,
+  redirectUrl,
+  payReturn,
+  "data-testid": dataTestId,
+}: {
+  notReady: boolean
+  redirectUrl?: string
+  payReturn: string | null
+  "data-testid"?: string
+}) => {
+  const [busy, setBusy] = useState(payReturn === "1")
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const started = useRef(false)
+
+  const confirm = () => {
+    setBusy(true)
+    setErrorMessage(null)
+    placeOrder()
+      .catch((err) => setErrorMessage(err.message))
+      .finally(() => setBusy(false))
+  }
+
+  useEffect(() => {
+    if (payReturn !== "1" || started.current) return
+    started.current = true
+    confirm()
+  }, [payReturn])
+
+  if (payReturn === "1") {
+    return (
+      <>
+        <Button size="large" isLoading={busy} disabled={busy} onClick={confirm} data-testid={dataTestId}>
+          <T k={busy ? "checkout.payChecking" : "checkout.payRetry"} />
+        </Button>
+        {errorMessage && (
+          <p className="text-small-regular text-ui-fg-subtle mt-2" role="status">
+            <T k="checkout.paymentPending" />
+          </p>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Button
+        size="large"
+        disabled={notReady || !redirectUrl}
+        isLoading={busy}
+        onClick={() => {
+          if (!redirectUrl) return
+          setBusy(true)
+          window.location.assign(redirectUrl)
+        }}
+        data-testid={dataTestId}
+      >
+        <T k="checkout.payRedirect" />
+      </Button>
+      <p className="text-small-regular text-ui-fg-subtle mt-2" role="status">
+        <T k={payReturn === "cancel" ? "checkout.payCancelled" : "checkout.payRedirectHint"} />
+      </p>
+    </>
+  )
+}
+
 /** Retour d'un moyen de paiement à redirection (Klarna, banque…) : Stripe renvoie sur /checkout?step=review&redirect_status=… */
 const StripeRedirectReturn = ({ status, children }: { status: string; children: React.ReactNode }) => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null)

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/modules/products/templates/index.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react"
+import { ProductReviews } from "@modules/ub/reviews"
 import { notFound } from "next/navigation"
 import { HttpTypes } from "@medusajs/types"
 
@@ -110,6 +111,10 @@ export default function ProductTemplate({ product, region, images }: ProductTemp
         </div>
       </section>
 
+      <Suspense fallback={null}>
+        <ProductReviews productId={product.id} />
+      </Suspense>
+
       <Suspense fallback={null}>
         <Related product={product} />
       </Suspense>

package/templates/storefront/src/modules/store/components/shop-search.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useRef, useState, useTransition } from "react"
+
+/**
+ * Recherche de la page « Boutique » : résultats pendant la frappe (pause de 350 ms), en gardant catégorie et tri.
+ * Formulaire GET classique : fonctionne aussi sans JavaScript (Entrée). Focus automatique si l'URL finit par #recherche
+ * (icône loupe de l'en-tête sur mobile).
+ */
+export default function ShopSearch({ placeholder, clearLabel }: { placeholder: string; clearLabel: string }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const params = useSearchParams()
+  const [value, setValue] = useState(params.get("q") ?? "")
+  const [pending, start] = useTransition()
+  const input = useRef<HTMLInputElement>(null)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  useEffect(() => {
+    if (window.location.hash === "#recherche") input.current?.focus()
+  }, [])
+
+  const go = (q: string) => {
+    const next = new URLSearchParams(params)
+    if (q.trim()) next.set("q", q.trim())
+    else next.delete("q")
+    next.delete("page")
+    const s = next.toString()
+    start(() => router.replace(s ? `${pathname}?${s}` : pathname, { scroll: false }))
+  }
+
+  return (
+    <form
+      className="ub-shopsearch"
+      role="search"
+      action="/store"
+      aria-busy={pending}
+      onSubmit={(e) => {
+        e.preventDefault()
+        clearTimeout(timer.current)
+        go(value)
+      }}
+    >
+      <svg viewBox="0 0 24 24" aria-hidden>
+        <circle cx="11" cy="11" r="6.5" />
+        <path d="M20 20l-4.2-4.2" />
+      </svg>
+      <input
+        ref={input}
+        id="recherche"
+        type="search"
+        name="q"
+        value={value}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        autoComplete="off"
+        onChange={(e) => {
+          const q = e.target.value
+          setValue(q)
+          clearTimeout(timer.current)
+          timer.current = setTimeout(() => go(q), 350)
+        }}
+      />
+      {/* Filtres gardés quand le formulaire est envoyé sans JavaScript */}
+      {params.get("sortBy") && <input type="hidden" name="sortBy" value={params.get("sortBy") ?? ""} />}
+      {params.get("category") && <input type="hidden" name="category" value={params.get("category") ?? ""} />}
+      {value && (
+        <button
+          type="button"
+          className="ub-shopsearch__clear"
+          aria-label={clearLabel}
+          onClick={() => {
+            setValue("")
+            clearTimeout(timer.current)
+            go("")
+            input.current?.focus()
+          }}
+        >
+          ×
+        </button>
+      )}
+    </form>
+  )
+}

package/templates/storefront/src/modules/store/templates/index.tsx

@@ -8,6 +8,8 @@ import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-g
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 import { CampaignCountdown } from "@modules/ub/campaign-blocks"
 
+import ShopSearch from "@modules/store/components/shop-search"
+
 import PaginatedProducts from "./paginated-products"
 
 const SORTS: [SortOptions, string][] = [
@@ -17,21 +19,24 @@ const SORTS: [SortOptions, string][] = [
 ]
 
 /** Lien de la page boutique en gardant les autres filtres (serveur, sans JavaScript). */
-const shopHref = (q: { sortBy?: string; category?: string }) => {
+const shopHref = (q: { sortBy?: string; category?: string; q?: string }) => {
   const params = new URLSearchParams(Object.entries(q).filter(([, v]) => v) as [string, string][])
   const s = params.toString()
   return s ? `/store?${s}` : "/store"
 }
 
-/** Page « Boutique » : bandeau de campagne, catégories en pastilles, tri en boutons, grille. */
+/** Page « Boutique » : bandeau de campagne, catégories en pastilles, recherche, tri en boutons, grille. */
 const StoreTemplate = async ({
   sortBy,
   page,
   category,
+  q,
 }: {
   sortBy?: SortOptions
   page?: string
   category?: string
+  /** Recherche (titre, description… : recherche plein texte de Medusa, limitée au canal de vente de la boutique) */
+  q?: string
 }) => {
   const pageNumber = page ? parseInt(page) : 1
   const sort = sortBy || "created_at"
@@ -52,7 +57,7 @@ const StoreTemplate = async ({
               </span>
             )}
             <h1 className="ub-head ub-shophero__title" data-testid="store-page-title">
-              {active?.name ?? campaign.sections?.products ?? t("footer.all")}
+              {q ? t("shop.results", { q }) : (active?.name ?? campaign.sections?.products ?? t("footer.all"))}
             </h1>
             {campaign.promo?.text && <p className="ub-shophero__sub">{campaign.promo.text}</p>}
           </div>
@@ -68,13 +73,13 @@ const StoreTemplate = async ({
       <div className="ub-wrap ub-shop" data-testid="category-container">
         <div className="ub-shop__bar">
           <nav className="ub-chips" aria-label={t("section.categories")}>
-            <Link href={shopHref({ sortBy })} className="ub-chip" aria-current={!active ? "page" : undefined}>
+            <Link href={shopHref({ sortBy, q })} className="ub-chip" aria-current={!active ? "page" : undefined}>
               {t("shop.all")}
             </Link>
             {topLevel.map((c) => (
               <Link
                 key={c.id}
-                href={shopHref({ sortBy, category: c.handle })}
+                href={shopHref({ sortBy, category: c.handle, q })}
                 className="ub-chip"
                 aria-current={active?.id === c.id ? "page" : undefined}
               >
@@ -82,11 +87,14 @@ const StoreTemplate = async ({
               </Link>
             ))}
           </nav>
+          <Suspense fallback={<div className="ub-shopsearch" />}>
+            <ShopSearch placeholder={t("nav.search")} clearLabel={t("shop.clear")} />
+          </Suspense>
           <nav className="ub-sort" aria-label={t("store.sortBy")}>
             {SORTS.map(([value, key]) => (
               <Link
                 key={value}
-                href={shopHref({ sortBy: value === "created_at" ? undefined : value, category })}
+                href={shopHref({ sortBy: value === "created_at" ? undefined : value, category, q })}
                 className="ub-sort__opt"
                 aria-current={sort === value ? "true" : undefined}
                 scroll={false}
@@ -96,8 +104,8 @@ const StoreTemplate = async ({
             ))}
           </nav>
         </div>
-        <Suspense key={`${sort}-${category}-${pageNumber}`} fallback={<SkeletonProductGrid />}>
-          <PaginatedProducts sortBy={sort} page={pageNumber} categoryId={active?.id} showCount />
+        <Suspense key={`${sort}-${category}-${pageNumber}-${q}`} fallback={<SkeletonProductGrid />}>
+          <PaginatedProducts sortBy={sort} page={pageNumber} categoryId={active?.id} q={q} showCount />
         </Suspense>
       </div>
     </>

package/templates/storefront/src/modules/store/templates/paginated-products.tsx

@@ -13,6 +13,7 @@ type PaginatedProductsParams = {
   category_id?: string[]
   id?: string[]
   order?: string
+  q?: string
 }
 
 export default async function PaginatedProducts({
@@ -21,6 +22,7 @@ export default async function PaginatedProducts({
   collectionId,
   categoryId,
   productsIds,
+  q,
   showCount,
 }: {
   sortBy?: SortOptions
@@ -28,6 +30,8 @@ export default async function PaginatedProducts({
   collectionId?: string
   categoryId?: string
   productsIds?: string[]
+  /** Recherche plein texte (Medusa) */
+  q?: string
   /** Affiche « N produits » au-dessus de la grille */
   showCount?: boolean
 }) {
@@ -43,6 +47,10 @@ export default async function PaginatedProducts({
     queryParams["category_id"] = [categoryId]
   }
 
+  if (q) {
+    queryParams["q"] = q
+  }
+
   if (productsIds) {
     queryParams["id"] = productsIds
   }
@@ -70,9 +78,13 @@ export default async function PaginatedProducts({
   return (
     <>
       {showCount && <p className="ub-shop__count">{t("shop.count", { count: String(count) })}</p>}
-      <div data-testid="products-list">
-        <ProductGrid products={products} />
-      </div>
+      {q && !products.length ? (
+        <p className="ub-shop__empty">{t("shop.noResults", { q })}</p>
+      ) : (
+        <div data-testid="products-list">
+          <ProductGrid products={products} />
+        </div>
+      )}
       {totalPages > 1 && (
         <Pagination
           data-testid="product-pagination"

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

@@ -7,6 +7,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import SurpriseButton from "./surprise-button"
 import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
 
 /**
  * Accueil « Album » (thèmes Noël, theme.json → "home": "album") : un album de Noël fait main.
@@ -23,6 +24,7 @@ export function AlbumHero({ campaign }: { campaign: Campaign }) {
   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}>
+      {image && <HeroImage src={image} position="center" />}
       <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>}