@salifbiaye/create-boutique 0.1.4 → 0.2.0

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

@@ -1,14 +1,13 @@
 import { T } from "@lib/boutique/i18n-client"
 import { Radio as RadioGroupOption } from "@headlessui/react"
 import { Text, clx } from "@medusajs/ui"
-import React, { useContext, useMemo, type JSX } from "react"
+import React, { useContext, type JSX } from "react"
 
 import Radio from "@modules/common/components/radio"
 
 import { isManual } from "@lib/constants"
 import SkeletonCardDetails from "@modules/skeletons/components/skeleton-card-details"
-import { CardElement } from "@stripe/react-stripe-js"
-import { StripeCardElementOptions } from "@stripe/stripe-js"
+import { PaymentElement } from "@stripe/react-stripe-js"
 import PaymentTest from "../payment-test"
 import { StripeContext } from "../payment-wrapper/stripe-wrapper"
 
@@ -16,7 +15,7 @@ type PaymentContainerProps = {
   paymentProviderId: string
   selectedPaymentOptionId: string | null
   disabled?: boolean
-  paymentInfoMap: Record<string, { title: string; icon: JSX.Element }>
+  paymentInfoMap: Record<string, { title: React.ReactNode; icon: JSX.Element }>
   children?: React.ReactNode
 }
 
@@ -66,6 +65,19 @@ const PaymentContainer: React.FC<PaymentContainerProps> = ({
 
 export default PaymentContainer
 
+/** Noms affichés des moyens de paiement Stripe (Payment Element) ; « card » est traduit. */
+const WALLET_NAMES: Record<string, string> = {
+  apple_pay: "Apple Pay",
+  google_pay: "Google Pay",
+  link: "Link",
+  klarna: "Klarna",
+  paypal: "PayPal",
+}
+
+export const paymentTypeLabel = (type: string | null) =>
+  !type ? null : type === "card" ? <T k="checkout.card" /> : WALLET_NAMES[type] ?? type
+
+/** Stripe Payment Element : carte, Apple Pay, Google Pay… selon l'appareil et les moyens activés dans Stripe. */
 export const StripeCardContainer = ({
   paymentProviderId,
   selectedPaymentOptionId,
@@ -75,29 +87,12 @@ export const StripeCardContainer = ({
   setError,
   setCardComplete,
 }: Omit<PaymentContainerProps, "children"> & {
-  setCardBrand: (brand: string) => void
+  setCardBrand: (type: string | null) => void
   setError: (error: string | null) => void
   setCardComplete: (complete: boolean) => void
 }) => {
   const stripeReady = useContext(StripeContext)
 
-  const useOptions: StripeCardElementOptions = useMemo(() => {
-    return {
-      style: {
-        base: {
-          fontFamily: "inherit",
-          color: "#424270",
-          "::placeholder": {
-            color: "rgb(107 114 128)",
-          },
-        },
-      },
-      classes: {
-        base: "pt-3 pb-1 block w-full h-11 px-4 mt-0 bg-ui-bg-field border rounded-md appearance-none focus:outline-none focus:ring-0 focus:shadow-borders-interactive-with-active border-ui-border-base hover:bg-ui-bg-field-hover transition-all duration-300 ease-in-out",
-      },
-    }
-  }, [])
-
   return (
     <PaymentContainer
       paymentProviderId={paymentProviderId}
@@ -108,18 +103,17 @@ export const StripeCardContainer = ({
       {selectedPaymentOptionId === paymentProviderId &&
         (stripeReady ? (
           <div className="my-4 transition-all duration-150 ease-in-out">
-            <Text className="txt-medium-plus text-ui-fg-base mb-1">
+            <Text className="txt-medium-plus text-ui-fg-base mb-3">
               <T k="checkout.cardDetails" />
             </Text>
-            <CardElement
-              options={useOptions as StripeCardElementOptions}
+            <PaymentElement
+              options={{ layout: { type: "tabs", defaultCollapsed: false }, wallets: { applePay: "auto", googlePay: "auto" } }}
               onChange={(e) => {
-                setCardBrand(
-                  e.brand && e.brand.charAt(0).toUpperCase() + e.brand.slice(1)
-                )
-                setError(e.error?.message || null)
+                setCardBrand(e.value?.type ?? null)
+                setError(null)
                 setCardComplete(e.complete)
               }}
+              onLoadError={(e) => setError(e.error?.message ?? null)}
             />
           </div>
         ) : (

package/templates/storefront/src/modules/checkout/components/payment-wrapper/stripe-wrapper.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { Stripe, StripeElementsOptions } from "@stripe/stripe-js"
+import { Appearance, Stripe, StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js"
 import { Elements } from "@stripe/react-stripe-js"
 import { HttpTypes } from "@medusajs/types"
-import { createContext } from "react"
+import { createContext, useEffect, useState } from "react"
 
 type StripeWrapperProps = {
   paymentSession: HttpTypes.StorePaymentSession
@@ -14,15 +14,53 @@ type StripeWrapperProps = {
 
 export const StripeContext = createContext(false)
 
+/** Valeur calculée (rgb…) d'une variable CSS du thème : Stripe n'accepte pas var(--x) ni color-mix. */
+function themeColor(name: string): string | undefined {
+  const probe = document.createElement("span")
+  probe.style.color = `var(${name})`
+  document.body.appendChild(probe)
+  const value = getComputedStyle(probe).color
+  probe.remove()
+  return value || undefined
+}
+
+function isDark(rgb?: string): boolean {
+  const [r, g, b] = (rgb?.match(/\d+(\.\d+)?/g) ?? []).map(Number)
+  if ([r, g, b].some((v) => v === undefined)) return false
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 128
+}
+
+/** Bloc de paiement Stripe aux couleurs du thème de la boutique (lu dans les variables CSS de data-theme). */
+function themeAppearance(): Appearance {
+  const background = themeColor("--bg")
+  const radius = getComputedStyle(document.documentElement).getPropertyValue("--ub-r-card").trim()
+  return {
+    theme: isDark(background) ? "night" : "stripe",
+    variables: {
+      colorPrimary: themeColor("--primary"),
+      colorBackground: themeColor("--surface") ?? background,
+      colorText: themeColor("--ink"),
+      colorTextSecondary: themeColor("--ink-muted"),
+      colorDanger: "#df1b41",
+      fontFamily: getComputedStyle(document.body).fontFamily,
+      borderRadius: radius && radius.endsWith("px") ? radius : "8px",
+    },
+  }
+}
+
 const StripeWrapper: React.FC<StripeWrapperProps> = ({
   paymentSession,
   stripeKey,
   stripePromise,
   children,
 }) => {
-  const options: StripeElementsOptions = {
-    clientSecret: paymentSession!.data?.client_secret as string | undefined,
-  }
+  // Calculé après montage (document indisponible au rendu serveur) ; Elements applique la mise à jour.
+  const [appearance, setAppearance] = useState<Appearance | undefined>()
+  const [locale, setLocale] = useState<StripeElementLocale>("auto")
+  useEffect(() => {
+    setAppearance(themeAppearance())
+    setLocale((document.documentElement.lang || "auto") as StripeElementLocale)
+  }, [])
 
   if (!stripeKey) {
     throw new Error(
@@ -42,9 +80,16 @@ const StripeWrapper: React.FC<StripeWrapperProps> = ({
     )
   }
 
+  const options: StripeElementsOptions = {
+    clientSecret: paymentSession.data.client_secret as string,
+    appearance,
+    locale,
+  }
+
   return (
     <StripeContext.Provider value={true}>
-      <Elements options={options} stripe={stripePromise}>
+      {/* key : un nouveau PaymentIntent (panier modifié) recrée les Elements */}
+      <Elements key={options.clientSecret} options={options} stripe={stripePromise}>
         {children}
       </Elements>
     </StripeContext.Provider>

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

@@ -2,6 +2,7 @@ import { HttpTypes } from "@medusajs/types"
 import { Container } from "@medusajs/ui"
 import Checkbox from "@modules/common/components/checkbox"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import { mapKeys } from "lodash"
 import React, { useEffect, useMemo, useState } from "react"
 import AddressSelect from "../address-select"
@@ -203,10 +204,9 @@ const ShippingAddress = ({
           required
           data-testid="shipping-email-input"
         />
-        <Input
+        <PhoneInput
           label="form.phone"
           name="shipping_address.phone"
-          autoComplete="tel"
           value={formData["shipping_address.phone"]}
           onChange={handleChange}
           data-testid="shipping-phone-input"

package/templates/storefront/src/modules/common/components/phone-input/index.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import {
+  AsYouType,
+  getCountries,
+  getCountryCallingCode,
+  parsePhoneNumberFromString,
+  type CountryCode,
+} from "libphonenumber-js/min"
+import { useLocale, useT } from "@lib/boutique/i18n-client"
+
+type Props = {
+  name: string
+  label: string
+  /** Valeur contrôlée (formulaires du checkout) ; sinon defaultValue (formulaires simples) */
+  value?: string
+  defaultValue?: string
+  /** Reçoit un pseudo-événement (seuls target.name et target.value sont remplis), comme les autres champs */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  required?: boolean
+  "data-testid"?: string
+}
+
+const flag = (cc: string) => String.fromCodePoint(...[...cc.toUpperCase()].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65))
+
+/**
+ * Numéro de téléphone avec indicatif : pays (drapeau + indicatif) + numéro national formaté à la saisie.
+ * Envoie un seul champ `name` au format international (+221 76 727 04 89). Pays par défaut = pays de la boutique.
+ */
+export default function PhoneInput({ name, label, value, defaultValue, onChange, required, "data-testid": testId }: Props) {
+  const t = useT()
+  const locale = useLocale()
+  const boutiqueCountry = (locale.split("-")[1] ?? "US").toUpperCase() as CountryCode
+
+  const initial = useMemo(() => {
+    const parsed = parsePhoneNumberFromString(value ?? defaultValue ?? "")
+    return parsed?.country
+      ? { country: parsed.country, national: parsed.formatNational() }
+      : { country: getCountries().includes(boutiqueCountry) ? boutiqueCountry : ("US" as CountryCode), national: value ?? defaultValue ?? "" }
+    // Valeur initiale seulement : ensuite le champ est piloté par la saisie.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  const [country, setCountry] = useState<CountryCode>(initial.country)
+  const [national, setNational] = useState(initial.national)
+
+  const countries = useMemo(() => {
+    const names = new Intl.DisplayNames([locale], { type: "region" })
+    return getCountries()
+      .map((cc) => ({ cc, name: names.of(cc) ?? cc, code: getCountryCallingCode(cc) }))
+      .sort((a, b) => a.name.localeCompare(b.name, locale))
+  }, [locale])
+
+  const full = (cc: CountryCode, nat: string) => {
+    const digits = nat.replace(/[^\d]/g, "")
+    if (!digits) return ""
+    const parsed = parsePhoneNumberFromString(digits, cc)
+    return parsed ? parsed.formatInternational() : `+${getCountryCallingCode(cc)} ${digits}`
+  }
+  const emit = (cc: CountryCode, nat: string) =>
+    onChange?.({ target: { name, value: full(cc, nat) } } as unknown as React.ChangeEvent<HTMLInputElement>)
+  const invalid = national.replace(/\D/g, "").length > 3 && !parsePhoneNumberFromString(national.replace(/[^\d]/g, ""), country)?.isValid()
+
+  return (
+    <div className="ub-phone" data-invalid={invalid || undefined}>
+      <label className="ub-phone__country">
+        <span className="ub-phone__flag" aria-hidden>
+          {flag(country)} +{getCountryCallingCode(country)}
+        </span>
+        <select
+          aria-label={t("form.country")}
+          value={country}
+          onChange={(e) => {
+            const cc = e.target.value as CountryCode
+            setCountry(cc)
+            emit(cc, national)
+          }}
+        >
+          {countries.map((c) => (
+            <option key={c.cc} value={c.cc}>
+              {flag(c.cc)} {c.name} (+{c.code})
+            </option>
+          ))}
+        </select>
+      </label>
+      <div className="ub-phone__field">
+        <input
+          id={`${name}-national`}
+          type="tel"
+          inputMode="tel"
+          autoComplete="tel-national"
+          placeholder=" "
+          required={required}
+          value={national}
+          data-testid={testId}
+          onChange={(e) => {
+            const nat = new AsYouType(country).input(e.target.value)
+            setNational(nat)
+            emit(country, nat)
+          }}
+        />
+        <label htmlFor={`${name}-national`}>
+          {t(label)}
+          {required && <span className="text-rose-500">*</span>}
+        </label>
+      </div>
+      <input type="hidden" name={name} value={full(country, national)} />
+    </div>
+  )
+}

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

@@ -1,41 +1,106 @@
 import { Suspense } from "react"
+import Link from "next/link"
 
+import { campaignStatus, getCampaign } from "@lib/boutique/campaign"
 import { t } from "@lib/boutique/i18n"
-
+import { listCategories } from "@lib/data/categories"
 import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-grid"
-import RefinementList from "@modules/store/components/refinement-list"
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import { CampaignCountdown } from "@modules/ub/campaign-blocks"
 
 import PaginatedProducts from "./paginated-products"
 
-const StoreTemplate = ({
+const SORTS: [SortOptions, string][] = [
+  ["created_at", "store.latest"],
+  ["price_asc", "store.priceAsc"],
+  ["price_desc", "store.priceDesc"],
+]
+
+/** Lien de la page boutique en gardant les autres filtres (serveur, sans JavaScript). */
+const shopHref = (q: { sortBy?: string; category?: 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. */
+const StoreTemplate = async ({
   sortBy,
   page,
+  category,
 }: {
   sortBy?: SortOptions
   page?: string
+  category?: string
 }) => {
   const pageNumber = page ? parseInt(page) : 1
   const sort = sortBy || "created_at"
+  const [campaign, categories] = await Promise.all([getCampaign(), listCategories().catch(() => [])])
+  const topLevel = categories.filter((c) => !c.parent_category_id)
+  const active = topLevel.find((c) => c.handle === category)
+  const live = campaignStatus(campaign) === "live"
 
   return (
-    <div
-      className="flex flex-col small:flex-row small:items-start py-6 content-container"
-      data-testid="category-container"
-    >
-      <RefinementList sortBy={sort} />
-      <div className="w-full">
-        <div className="mb-8 text-2xl-semi">
-          <h1 className="ub-head" data-testid="store-page-title">{t("footer.all")}</h1>
+    <>
+      <section className="ub-shophero">
+        <div className="ub-wrap ub-shophero__in">
+          <div>
+            {campaign.hero.eyebrow && (
+              <span className="ub-eyebrow">
+                <span className="ub-eyebrow__dot" />
+                {campaign.hero.eyebrow}
+              </span>
+            )}
+            <h1 className="ub-head ub-shophero__title" data-testid="store-page-title">
+              {active?.name ?? campaign.sections?.products ?? t("footer.all")}
+            </h1>
+            {campaign.promo?.text && <p className="ub-shophero__sub">{campaign.promo.text}</p>}
+          </div>
+          {live && campaign.showCountdown !== false && (
+            <div className="ub-shophero__cd">
+              <small>{campaign.promo?.seal ?? t("countdown.label")}</small>
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </div>
+      </section>
+
+      <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}>
+              {t("shop.all")}
+            </Link>
+            {topLevel.map((c) => (
+              <Link
+                key={c.id}
+                href={shopHref({ sortBy, category: c.handle })}
+                className="ub-chip"
+                aria-current={active?.id === c.id ? "page" : undefined}
+              >
+                {c.name}
+              </Link>
+            ))}
+          </nav>
+          <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 })}
+                className="ub-sort__opt"
+                aria-current={sort === value ? "true" : undefined}
+                scroll={false}
+              >
+                {t(key)}
+              </Link>
+            ))}
+          </nav>
         </div>
-        <Suspense fallback={<SkeletonProductGrid />}>
-          <PaginatedProducts
-            sortBy={sort}
-            page={pageNumber}
-          />
+        <Suspense key={`${sort}-${category}-${pageNumber}`} fallback={<SkeletonProductGrid />}>
+          <PaginatedProducts sortBy={sort} page={pageNumber} categoryId={active?.id} showCount />
         </Suspense>
       </div>
-    </div>
+    </>
   )
 }
 

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

@@ -1,3 +1,4 @@
+import { t } from "@lib/boutique/i18n"
 import { listProductsWithSort } from "@lib/data/products"
 import { getRegion } from "@lib/data/regions"
 import { ProductGrid } from "@modules/ub/product-card"
@@ -20,12 +21,15 @@ export default async function PaginatedProducts({
   collectionId,
   categoryId,
   productsIds,
+  showCount,
 }: {
   sortBy?: SortOptions
   page: number
   collectionId?: string
   categoryId?: string
   productsIds?: string[]
+  /** Affiche « N produits » au-dessus de la grille */
+  showCount?: boolean
 }) {
   const queryParams: PaginatedProductsParams = {
     limit: 12,
@@ -65,6 +69,7 @@ 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>

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

@@ -27,7 +27,7 @@ export function HighlightedTitle({ title, highlight }: { title: string; highligh
   )
 }
 
-async function CampaignCountdown({ endsAt }: { endsAt: string }) {
+export async function CampaignCountdown({ endsAt }: { endsAt: string }) {
   await connection()
   return (
     <Countdown

package/templates/storefront/src/modules/ub/contact-page.tsx

@@ -0,0 +1,78 @@
+import Link from "next/link"
+
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+import { Icon, type IconName } from "./icons"
+
+/** Page Contact : bandeau, cartes d'action (e-mail, suivi, livraison, retours) et FAQ (details natifs, sans JS). */
+export default function ContactPage() {
+  const { storeName, merchantEmail } = getBoutique()
+
+  const cards: { icon: IconName; title: string; text: string; href: string; cta: string; external?: boolean }[] = [
+    ...(merchantEmail
+      ? [{ icon: "headset" as IconName, title: t("contact.email.title"), text: t("contact.email.text"), href: `mailto:${merchantEmail}`, cta: merchantEmail, external: true }]
+      : []),
+    { icon: "truck", title: t("contact.track.title"), text: t("contact.track.text"), href: "/order/track", cta: t("contact.track.cta") },
+    { icon: "shield", title: t("contact.shipping.title"), text: t("contact.shipping.text"), href: "/legal/shipping", cta: t("contact.more") },
+    { icon: "returns", title: t("contact.returns.title"), text: t("contact.returns.text"), href: "/legal/returns", cta: t("contact.more") },
+  ]
+  const faq = [1, 2, 3, 4].map((i) => [t(`contact.faq.q${i}`), t(`contact.faq.a${i}`, { storeName })])
+
+  return (
+    <>
+      <section className="ub-shophero ub-contacthero">
+        <div className="ub-wrap ub-shophero__in">
+          <div>
+            <span className="ub-eyebrow">
+              <span className="ub-eyebrow__dot" />
+              {t("contact.eyebrow")}
+            </span>
+            <h1 className="ub-head ub-shophero__title">{t("contact.title")}</h1>
+            <p className="ub-shophero__sub">{t("legal.contact.body", { storeName })}</p>
+          </div>
+          <div className="ub-contacthero__badge">
+            <b>{t("contact.badge.value")}</b>
+            <small>{t("contact.badge.label")}</small>
+          </div>
+        </div>
+      </section>
+
+      <section className="ub-section">
+        <div className="ub-wrap">
+          <ul className="ub-contact__cards">
+            {cards.map((c) => (
+              <li key={c.href} className="ub-contact__card">
+                <span className="ub-contact__ic">
+                  <Icon name={c.icon} />
+                </span>
+                <h2 className="ub-head">{c.title}</h2>
+                <p>{c.text}</p>
+                {c.external ? (
+                  <a href={c.href} className="ub-contact__cta">
+                    {c.cta} <Icon name="arrowRight" />
+                  </a>
+                ) : (
+                  <Link href={c.href} className="ub-contact__cta">
+                    {c.cta} <Icon name="arrowRight" />
+                  </Link>
+                )}
+              </li>
+            ))}
+          </ul>
+
+          <div className="ub-contact__faq">
+            <h2 className="ub-head">{t("pdp.faq")}</h2>
+            <div>
+              {faq.map(([q, a], i) => (
+                <details key={i} className="ub-faq" open={i === 0}>
+                  <summary>{q}</summary>
+                  <p>{a}</p>
+                </details>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

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

@@ -1,17 +1,38 @@
 import Link from "next/link"
+import { campaignStatus, getCampaign } from "@lib/boutique/campaign"
 import { getBoutique } from "@lib/boutique/config"
 import { t } from "@lib/boutique/i18n"
+import Button from "./button"
+import { HighlightedTitle } from "./campaign-blocks"
 import { Logo } from "./nav"
 
 // Simples libellés : en production, remplacer par les marques officielles fournies par Stripe.
 const PAYMENTS = ["VISA", "Mastercard", "Amex", "Apple Pay", "Google Pay"]
 
-export default function Footer() {
+/** Pied de page : bandeau d'appel à l'action (textes de la campagne) puis bloc sombre arrondi. */
+export default async function Footer() {
   const { storeName } = getBoutique()
+  const campaign = await getCampaign()
+  const live = campaignStatus(campaign) !== "ended"
 
   return (
-    <footer className="ub-footer">
-      <div className="ub-wrap">
+    <div className="ub-footwrap">
+      {live && (
+        <section className="ub-footcta" aria-label={campaign.hero.eyebrow ?? storeName}>
+          <span className="ub-footcta__shape ub-footcta__shape--a" aria-hidden />
+          <span className="ub-footcta__shape ub-footcta__shape--b" aria-hidden />
+          {campaign.hero.eyebrow && <span className="ub-footcta__eyebrow">{campaign.hero.eyebrow}</span>}
+          <h2 className="ub-head ub-footcta__title">
+            <HighlightedTitle title={campaign.hero.title} highlight={campaign.hero.highlight} />
+          </h2>
+          {campaign.promo?.text && <p className="ub-footcta__sub">{campaign.promo.text}</p>}
+          <Button href="/store" className="ub-footcta__btn">
+            {campaign.hero.cta ?? t("nav.cta")}
+          </Button>
+        </section>
+      )}
+
+      <footer className="ub-footer">
         <div className="ub-footer__top">
           <div>
             <Logo />
@@ -50,7 +71,7 @@ export default function Footer() {
             ))}
           </div>
         </div>
-      </div>
-    </footer>
+      </footer>
+    </div>
   )
 }

package/templates/storefront/src/modules/ub/mobile-menu.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useEffect, useRef } from "react"
+import { useT } from "@lib/boutique/i18n-client"
+
+/**
+ * Menu mobile (écrans < 900 px, où les liens du bandeau sont masqués) : <details> natif pour ouvrir/fermer,
+ * refermé automatiquement à chaque changement de page.
+ */
+export default function MobileMenu() {
+  const t = useT()
+  const pathname = usePathname()
+  const ref = useRef<HTMLDetailsElement>(null)
+  useEffect(() => {
+    if (ref.current) ref.current.open = false
+  }, [pathname])
+
+  const links: [string, string][] = [
+    ["/", "nav.home"],
+    ["/store", "nav.shop"],
+    ["/order/track", "nav.track"],
+    ["/legal/contact", "nav.contact"],
+    ["/account", "nav.account"],
+  ]
+
+  return (
+    <details className="ub-burger" ref={ref}>
+      <summary className="ub-icon" aria-label={t("nav.menu")}>
+        <span className="ub-burger__bars" aria-hidden>
+          <i />
+          <i />
+          <i />
+        </span>
+      </summary>
+      <nav className="ub-burger__panel" aria-label={t("nav.main")}>
+        {links.map(([href, key]) => (
+          <Link key={href} href={href} aria-current={pathname === href ? "page" : undefined}>
+            {t(key)}
+          </Link>
+        ))}
+        <Link href="/store" className="ub-btn ub-btn--primary ub-burger__cta">
+          {t("nav.cta")}
+        </Link>
+      </nav>
+    </details>
+  )
+}