@salifbiaye/create-boutique 0.1.5 → 0.2.0

package/templates/storefront/src/modules/account/templates/account-layout.tsx

@@ -1,40 +1,36 @@
 import { T } from "@lib/boutique/i18n-client"
 import React from "react"
 
-import UnderlineLink from "@modules/common/components/interactive-link"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
 
 import AccountNav from "../components/account-nav"
-import { HttpTypes } from "@medusajs/types"
 
 interface AccountLayoutProps {
   customer: HttpTypes.StoreCustomer | null
   children: React.ReactNode
 }
 
-const AccountLayout: React.FC<AccountLayoutProps> = ({
-  customer,
-  children,
-}) => {
+/** Espace client : menu latéral (connecté) + contenu, puis carte d'aide. Non connecté : formulaire centré. */
+const AccountLayout: React.FC<AccountLayoutProps> = ({ customer, children }) => {
   return (
-    <div className="flex-1 small:py-12" data-testid="account-page">
-      <div className="flex-1 content-container h-full max-w-5xl mx-auto bg-white flex flex-col">
-        <div className="grid grid-cols-1  small:grid-cols-[240px_1fr] py-12">
-          <div>{customer && <AccountNav customer={customer} />}</div>
-          <div className="flex-1">{children}</div>
-        </div>
-        <div className="flex flex-col small:flex-row items-end justify-between small:border-t border-gray-200 py-12 gap-8">
-          <div>
-            <h3 className="text-xl-semi mb-4"><T k="account.questions" /></h3>
-            <span className="txt-medium">
-              <T k="account.questionsText" />
-            </span>
-          </div>
-          <div>
-            <UnderlineLink href="/legal/contact">
-              <T k="account.contactUs" />
-            </UnderlineLink>
-          </div>
+    <div className="ub-wrap ub-account" data-testid="account-page">
+      <div className={customer ? "ub-account__grid" : "ub-account__solo"}>
+        {customer && <AccountNav customer={customer} />}
+        <div className="ub-account__main">{children}</div>
+      </div>
+      <div className="ub-account__help">
+        <div>
+          <h3 className="ub-head">
+            <T k="account.questions" />
+          </h3>
+          <p>
+            <T k="account.questionsText" />
+          </p>
         </div>
+        <LocalizedClientLink href="/legal/contact" className="ub-btn ub-btn--primary">
+          <T k="account.contactUs" />
+        </LocalizedClientLink>
       </div>
     </div>
   )

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

@@ -1,5 +1,6 @@
 import { HttpTypes } from "@medusajs/types"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import React, { useState } from "react"
 import CountrySelect from "../country-select"
 
@@ -98,10 +99,9 @@ const BillingAddress = ({ cart }: { cart: HttpTypes.StoreCart | null }) => {
           onChange={handleChange}
           data-testid="billing-province-input"
         />
-        <Input
+        <PhoneInput
           label="form.phone"
           name="billing_address.phone"
-          autoComplete="tel"
           value={formData["billing_address.phone"]}
           onChange={handleChange}
           data-testid="billing-phone-input"

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>
+  )
+}

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

@@ -6,6 +6,7 @@ import { t } from "@lib/boutique/i18n"
 import { retrieveCart } from "@lib/data/cart"
 import Button from "./button"
 import { Icon } from "./icons"
+import MobileMenu from "./mobile-menu"
 
 async function CartCount() {
   const cart = await retrieveCart().catch(() => null)
@@ -80,6 +81,7 @@ export default function Nav({ current }: { current?: "home" | "shop" }) {
           <Suspense fallback={<CartFallback />}>
             <CartCount />
           </Suspense>
+          <MobileMenu />
         </div>
         <Button href="/store" small className="ub-nav__cta">
           {t("nav.cta")}