@salifbiaye/create-boutique 0.1.4 → 0.2.0

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
 }

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

@@ -68,6 +68,8 @@ export const themeSchema = z.object({
   id: z.string().regex(SLUG),
   name: z.string().min(1),
   reference: z.string().optional(),
+  /** Variante : reprend la mise en page (règles CSS) de ce thème, avec la palette de styles/ub/variants.css. */
+  layout: z.string().regex(SLUG).optional(),
   fonts: z.object({
     head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
     body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),

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

@@ -1,5 +1,6 @@
 import React from "react"
 import { CreditCard } from "@medusajs/icons"
+import { T } from "@lib/boutique/i18n-client"
 
 import Ideal from "@modules/common/icons/ideal"
 import Bancontact from "@modules/common/icons/bancontact"
@@ -8,14 +9,14 @@ import PayPal from "@modules/common/icons/paypal"
 /* Map of payment provider_id to their title and icon. Add in any payment providers you want to use. */
 export const paymentInfoMap: Record<
   string,
-  { title: string; icon: React.JSX.Element }
+  { title: React.ReactNode; icon: React.JSX.Element }
 > = {
   pp_stripe_stripe: {
-    title: "Credit card",
+    title: <T k="checkout.cardAndWallets" />,
     icon: <CreditCard />,
   },
   "pp_medusa-payments_default": {
-    title: "Credit card",
+    title: <T k="checkout.cardAndWallets" />,
     icon: <CreditCard />,
   },
   "pp_stripe-ideal_stripe": {
@@ -31,7 +32,7 @@ export const paymentInfoMap: Record<
     icon: <PayPal />,
   },
   pp_system_default: {
-    title: "Manual Payment",
+    title: <T k="checkout.manualPayment" />,
     icon: <CreditCard />,
   },
   // Add more payment providers here

package/templates/storefront/src/modules/account/components/account-nav/index.tsx

@@ -1,197 +1,70 @@
 "use client"
 
-
 import { T } from "@lib/boutique/i18n-client"
-import { clx } from "@medusajs/ui"
 import { ArrowRightOnRectangle } from "@medusajs/icons"
 import { usePathname } from "next/navigation"
 
-import ChevronDown from "@modules/common/icons/chevron-down"
-import User from "@modules/common/icons/user"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
 import MapPin from "@modules/common/icons/map-pin"
 import Package from "@modules/common/icons/package"
-import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import User from "@modules/common/icons/user"
+import { Icon } from "@modules/ub/icons"
 import { HttpTypes } from "@medusajs/types"
 import { signout } from "@lib/data/customer"
 
-const AccountNav = ({
-  customer,
-}: {
-  customer: HttpTypes.StoreCustomer | null
-}) => {
-  const route = usePathname()
+const LINKS = [
+  { href: "/account", key: "account.overview", testId: "overview-link", icon: <Icon name="home" /> },
+  { href: "/account/profile", key: "account.profile", testId: "profile-link", icon: <User size={20} /> },
+  { href: "/account/addresses", key: "account.addresses", testId: "addresses-link", icon: <MapPin size={20} /> },
+  { href: "/account/orders", key: "account.orders", testId: "orders-link", icon: <Package size={20} /> },
+]
 
-  const handleLogout = async () => {
-    await signout()
-  }
+/** Menu du compte : carte client (initiales, nom, e-mail) + liens avec icônes ; pastilles défilantes sur mobile. */
+const AccountNav = ({ customer }: { customer: HttpTypes.StoreCustomer | null }) => {
+  const route = usePathname()
+  const initials = `${customer?.first_name?.[0] ?? ""}${customer?.last_name?.[0] ?? ""}`.toUpperCase() || "•"
+  const name = [customer?.first_name, customer?.last_name].filter(Boolean).join(" ")
 
   return (
-    <div>
-      <div className="small:hidden" data-testid="mobile-account-nav">
-        {route !== "/account" ? (
-          <LocalizedClientLink
-            href="/account"
-            className="flex items-center gap-x-2 text-small-regular py-2"
-            data-testid="account-main-link"
-          >
-            <>
-              <ChevronDown className="transform rotate-90" />
-              <span><T k="account.title" /></span>
-            </>
-          </LocalizedClientLink>
-        ) : (
-          <>
-            <div className="text-xl-semi mb-4 px-8">
-              Hello {customer?.first_name}
-            </div>
-            <div className="text-base-regular">
-              <ul>
-                <li>
-                  <LocalizedClientLink
-                    href="/account/profile"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                    data-testid="profile-link"
-                  >
-                    <>
-                      <div className="flex items-center gap-x-2">
-                        <User size={20} />
-                        <span><T k="account.profile" /></span>
-                      </div>
-                      <ChevronDown className="transform -rotate-90" />
-                    </>
-                  </LocalizedClientLink>
-                </li>
-                <li>
-                  <LocalizedClientLink
-                    href="/account/addresses"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                    data-testid="addresses-link"
-                  >
-                    <>
-                      <div className="flex items-center gap-x-2">
-                        <MapPin size={20} />
-                        <span><T k="account.addresses" /></span>
-                      </div>
-                      <ChevronDown className="transform -rotate-90" />
-                    </>
-                  </LocalizedClientLink>
-                </li>
-                <li>
-                  <LocalizedClientLink
-                    href="/account/orders"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                    data-testid="orders-link"
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <Package size={20} />
-                      <span><T k="account.orders" /></span>
-                    </div>
-                    <ChevronDown className="transform -rotate-90" />
-                  </LocalizedClientLink>
-                </li>
-                <li>
-                  <button
-                    type="button"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8 w-full"
-                    onClick={handleLogout}
-                    data-testid="logout-button"
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <ArrowRightOnRectangle />
-                      <span><T k="account.logout" /></span>
-                    </div>
-                    <ChevronDown className="transform -rotate-90" />
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </>
-        )}
+    <aside className="ub-accnav" data-testid="account-nav">
+      <div className="ub-accnav__me">
+        <span className="ub-accnav__avatar" aria-hidden>
+          {initials}
+        </span>
+        <span className="ub-accnav__who">
+          <b>{name || <T k="account.title" />}</b>
+          {customer?.email && <small>{customer.email}</small>}
+        </span>
       </div>
-      <div className="hidden small:block" data-testid="account-nav">
-        <div>
-          <div className="pb-4">
-            <h3 className="text-base-semi">Account</h3>
-          </div>
-          <div className="text-base-regular">
-            <ul className="flex mb-0 justify-start items-start flex-col gap-y-4">
-              <li>
-                <AccountNavLink
-                  href="/account"
-                  route={route!}
-                  data-testid="overview-link"
-                >
-                  <T k="account.overview" />
-                </AccountNavLink>
-              </li>
-              <li>
-                <AccountNavLink
-                  href="/account/profile"
-                  route={route!}
-                  data-testid="profile-link"
-                >
-                  <T k="account.profile" />
-                </AccountNavLink>
-              </li>
-              <li>
-                <AccountNavLink
-                  href="/account/addresses"
-                  route={route!}
-                  data-testid="addresses-link"
+      <nav aria-label="account">
+        <ul className="ub-accnav__list">
+          {LINKS.map((l) => {
+            const active = l.href === "/account" ? route === l.href : route?.startsWith(l.href)
+            return (
+              <li key={l.href}>
+                <LocalizedClientLink
+                  href={l.href}
+                  className="ub-accnav__link"
+                  aria-current={active ? "page" : undefined}
+                  data-testid={l.testId}
                 >
-                  <T k="account.addresses" />
-                </AccountNavLink>
+                  <span className="ub-accnav__ic">{l.icon}</span>
+                  <T k={l.key} />
+                </LocalizedClientLink>
               </li>
-              <li>
-                <AccountNavLink
-                  href="/account/orders"
-                  route={route!}
-                  data-testid="orders-link"
-                >
-                  <T k="account.orders" />
-                </AccountNavLink>
-              </li>
-              <li className="text-grey-700">
-                <button
-                  type="button"
-                  onClick={handleLogout}
-                  data-testid="logout-button"
-                >
-                  <T k="account.logout" />
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-type AccountNavLinkProps = {
-  href: string
-  route: string
-  children: React.ReactNode
-  "data-testid"?: string
-}
-
-const AccountNavLink = ({
-  href,
-  route,
-  children,
-  "data-testid": dataTestId,
-}: AccountNavLinkProps) => {
-  const active = route === href
-  return (
-    <LocalizedClientLink
-      href={href}
-      className={clx("text-ui-fg-subtle hover:text-ui-fg-base", {
-        "text-ui-fg-base font-semibold": active,
-      })}
-      data-testid={dataTestId}
-    >
-      {children}
-    </LocalizedClientLink>
+            )
+          })}
+          <li>
+            <button type="button" className="ub-accnav__link ub-accnav__logout" onClick={() => signout()} data-testid="logout-button">
+              <span className="ub-accnav__ic">
+                <ArrowRightOnRectangle />
+              </span>
+              <T k="account.logout" />
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </aside>
   )
 }
 

package/templates/storefront/src/modules/account/components/address-card/add-address.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState, useActionState } from "react"
 import useToggleState from "@lib/hooks/use-toggle-state"
 import CountrySelect from "@modules/checkout/components/country-select"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import Modal from "@modules/common/components/modal"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
 import { HttpTypes } from "@medusajs/types"
@@ -130,10 +131,9 @@ const AddAddress = ({
                 autoComplete="country"
                 data-testid="country-select"
               />
-              <Input
+              <PhoneInput
                 label="form.phone"
                 name="phone"
-                autoComplete="phone"
                 data-testid="phone-input"
               />
             </div>

package/templates/storefront/src/modules/account/components/address-card/edit-address-modal.tsx

@@ -9,6 +9,7 @@ import { Button, Heading, Text, clx } from "@medusajs/ui"
 import useToggleState from "@lib/hooks/use-toggle-state"
 import CountrySelect from "@modules/checkout/components/country-select"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import Modal from "@modules/common/components/modal"
 import Spinner from "@modules/common/icons/spinner"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
@@ -204,10 +205,9 @@ const EditAddress: React.FC<EditAddressProps> = ({
                 defaultValue={address.country_code || undefined}
                 data-testid="country-select"
               />
-              <Input
+              <PhoneInput
                 label="form.phone"
                 name="phone"
-                autoComplete="phone"
                 defaultValue={address.phone || undefined}
                 data-testid="phone-input"
               />