@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/app/(main)/not-found.tsx

@@ -0,0 +1,21 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Metadata } from "next"
+
+import InteractiveLink from "@modules/common/components/interactive-link"
+
+export const metadata: Metadata = {
+  title: "404",
+  description: "Something went wrong",
+}
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center min-h-[calc(100vh-64px)]">
+      <h1 className="text-2xl-semi text-ui-fg-base"><T k="notFound.title" /></h1>
+      <p className="text-small-regular text-ui-fg-base">
+        <T k="notFound.text" />
+      </p>
+      <InteractiveLink href="/"><T k="notFound.cta" /></InteractiveLink>
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/order/[id]/confirmed/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonOrderConfirmed from "@modules/skeletons/templates/skeleton-order-confirmed"
+
+export default function Loading() {
+  return <SkeletonOrderConfirmed />
+}

package/templates/storefront/src/app/(main)/order/[id]/confirmed/page.tsx

@@ -0,0 +1,23 @@
+import { t } from "@lib/boutique/i18n"
+import { retrieveOrder } from "@lib/data/orders"
+import OrderCompletedTemplate from "@modules/order/templates/order-completed-template"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: Promise<{ id: string }>
+}
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("order.confirmed") }
+}
+
+export default async function OrderConfirmedPage(props: Props) {
+  const params = await props.params
+  const order = await retrieveOrder(params.id).catch(() => null)
+
+  if (!order) {
+    return notFound()
+  }
+
+  return <OrderCompletedTemplate order={order} />
+}

package/templates/storefront/src/app/(main)/order/[id]/transfer/[token]/accept/page.tsx

@@ -0,0 +1,42 @@
+import { T } from "@lib/boutique/i18n-client"
+import { acceptTransferRequest } from "@lib/data/orders"
+import { Heading, Text } from "@medusajs/ui"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  const { success, error } = await acceptTransferRequest(id, token)
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-2/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        {success && (
+          <>
+            <Heading level="h1" className="text-xl text-zinc-900">
+              <T k="order.transferAccepted" />
+            </Heading>
+            <Text className="text-zinc-600">
+              Order {id} has been successfully transfered to the new owner.
+            </Text>
+          </>
+        )}
+        {!success && (
+          <>
+            <Text className="text-zinc-600">
+              <T k="order.transferAcceptError" />
+            </Text>
+            {error && (
+              <Text className="text-red-500">Error message: {error}</Text>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/order/[id]/transfer/[token]/decline/page.tsx

@@ -0,0 +1,42 @@
+import { T } from "@lib/boutique/i18n-client"
+import { declineTransferRequest } from "@lib/data/orders"
+import { Heading, Text } from "@medusajs/ui"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  const { success, error } = await declineTransferRequest(id, token)
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-2/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        {success && (
+          <>
+            <Heading level="h1" className="text-xl text-zinc-900">
+              <T k="order.transferDeclined" />
+            </Heading>
+            <Text className="text-zinc-600">
+              Transfer of order {id} has been successfully declined.
+            </Text>
+          </>
+        )}
+        {!success && (
+          <>
+            <Text className="text-zinc-600">
+              <T k="order.transferDeclineError" />
+            </Text>
+            {error && (
+              <Text className="text-red-500">Error message: {error}</Text>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/order/[id]/transfer/[token]/page.tsx

@@ -0,0 +1,35 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Heading, Text } from "@medusajs/ui"
+import TransferActions from "@modules/order/components/transfer-actions"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-2/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        <Heading level="h1" className="text-xl text-zinc-900">
+          <T k="order.transferTitle" vars={{ id }} />
+        </Heading>
+        <Text className="text-zinc-600">
+          <T k="order.transferText1" vars={{ id }} />
+        </Text>
+        <div className="w-full h-px bg-zinc-200" />
+        <Text className="text-zinc-600">
+          <T k="order.transferText2" />
+        </Text>
+        <Text className="text-zinc-600">
+          <T k="order.transferText3" />
+        </Text>
+        <div className="w-full h-px bg-zinc-200" />
+        <TransferActions id={id} token={token} />
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/order/track/page.tsx

@@ -0,0 +1,32 @@
+import { Suspense } from "react"
+import { Metadata } from "next"
+import Link from "next/link"
+import { t } from "@lib/boutique/i18n"
+import TrackForm from "@modules/ub/track-form"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("track.title") }
+}
+
+/** Suivi de commande sans compte : n° de commande + e-mail (vérifiés par le backend). */
+export default function TrackOrderPage() {
+  return (
+    <section className="ub-section">
+      <div className="ub-wrap" style={{ maxWidth: 720, display: "grid", gap: 16 }}>
+        <h1 className="ub-head" style={{ fontSize: 36, lineHeight: "44px" }}>
+          {t("track.title")}
+        </h1>
+        <p>{t("track.intro")}</p>
+        <Suspense fallback={<div aria-busy="true" style={{ minHeight: 200 }} />}>
+          <TrackForm />
+        </Suspense>
+        <p style={{ fontSize: 14 }}>
+          {t("track.account")}{" "}
+          <Link href="/account" style={{ textDecoration: "underline" }}>
+            {t("track.cta")}
+          </Link>
+        </p>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/app/(main)/page.tsx

@@ -0,0 +1,68 @@
+import { Suspense } from "react"
+import { connection } from "next/server"
+
+import { campaignStatus, getCampaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { listCategories } from "@lib/data/categories"
+import { listProducts } from "@lib/data/products"
+import { Hero, PromoBanner, SectionHead, TrustBar } from "@modules/ub/campaign-blocks"
+import CampaignEnded from "@modules/ub/campaign-ended"
+import CategoryTiles from "@modules/ub/category-tiles"
+import { ProductGrid } from "@modules/ub/product-card"
+
+async function Categories({ title }: { title: string }) {
+  const categories = await listCategories().catch(() => [])
+  if (!categories.length) return null
+
+  return (
+    <section className="ub-section">
+      <div className="ub-wrap">
+        <SectionHead title={title} href="/store" />
+        <CategoryTiles categories={categories} />
+      </div>
+    </section>
+  )
+}
+
+async function Products({ title }: { title: string }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 8, fields: "*categories,*collection" } })
+  if (!products.length) return null
+
+  return (
+    <section className="ub-section">
+      <div className="ub-wrap">
+        <SectionHead title={title} href="/store" />
+        <ProductGrid products={products} />
+      </div>
+    </section>
+  )
+}
+
+function GridFallback() {
+  return <div className="ub-section" aria-busy="true" style={{ minHeight: 320 }} />
+}
+
+export default async function Home() {
+  await connection()
+  const campaign = await getCampaign()
+
+  if (campaignStatus(campaign) === "ended") {
+    return <CampaignEnded nextUrl={campaign.nextCampaignUrl} />
+  }
+
+  return (
+    <>
+      <Hero campaign={campaign} />
+      <TrustBar freeShipping={campaign.freeShipping} />
+      <Suspense fallback={<GridFallback />}>
+        <Categories title={campaign.sections?.categories ?? t("section.categories")} />
+      </Suspense>
+      <PromoBanner campaign={campaign} />
+      <Suspense fallback={<GridFallback />}>
+        <Products title={campaign.sections?.products ?? t("section.products")} />
+      </Suspense>
+    </>
+  )
+}

package/templates/storefront/src/app/(main)/products/[handle]/page.tsx

@@ -0,0 +1,86 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { listProducts } from "@lib/data/products"
+import { getRegion } from "@lib/data/regions"
+import ProductTemplate from "@modules/products/templates"
+import { HttpTypes } from "@medusajs/types"
+
+type Props = {
+  params: Promise<{ handle: string }>
+  searchParams: Promise<{ v_id?: string }>
+}
+
+function getImagesForVariant(
+  product: HttpTypes.StoreProduct,
+  selectedVariantId?: string
+) {
+  if (!selectedVariantId || !product.variants) {
+    return product.images
+  }
+
+  const variant = product.variants!.find((v) => v.id === selectedVariantId)
+  if (!variant || !variant.images?.length) {
+    return product.images
+  }
+
+  const imageIdsMap = new Map((variant.images ?? []).map((i) => [i.id, true]))
+  return product.images!.filter((i) => imageIdsMap.has(i.id))
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
+  const { handle } = params
+  const region = await getRegion()
+
+  if (!region) {
+    notFound()
+  }
+
+  const product = await listProducts({
+    queryParams: { handle },
+  }).then(({ response }) => response.products[0])
+
+  if (!product) {
+    notFound()
+  }
+
+  return {
+    title: product.title,
+    description: `${product.title}`,
+    openGraph: {
+      title: product.title,
+      description: `${product.title}`,
+      images: product.thumbnail ? [product.thumbnail] : [],
+    },
+  }
+}
+
+export default async function ProductPage(props: Props) {
+  const params = await props.params
+  const region = await getRegion()
+  const searchParams = await props.searchParams
+
+  const selectedVariantId = searchParams.v_id
+
+  if (!region) {
+    notFound()
+  }
+
+  const pricedProduct = await listProducts({
+    queryParams: { handle: params.handle },
+  }).then(({ response }) => response.products[0])
+
+  if (!pricedProduct) {
+    notFound()
+  }
+
+  const images = getImagesForVariant(pricedProduct, selectedVariantId) ?? []
+
+  return (
+    <ProductTemplate
+      product={pricedProduct}
+      region={region}
+      images={images}
+    />
+  )
+}

package/templates/storefront/src/app/(main)/store/page.tsx

@@ -0,0 +1,28 @@
+import { t } from "@lib/boutique/i18n"
+import { Metadata } from "next"
+
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import StoreTemplate from "@modules/store/templates"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("footer.all") }
+}
+
+type Params = {
+  searchParams: Promise<{
+    sortBy?: SortOptions
+    page?: string
+  }>
+}
+
+export default async function StorePage(props: Params) {
+  const searchParams = await props.searchParams;
+  const { sortBy, page } = searchParams
+
+  return (
+    <StoreTemplate
+      sortBy={sortBy}
+      page={page}
+    />
+  )
+}

package/templates/storefront/src/app/api/health/route.ts

@@ -0,0 +1,13 @@
+import { getBoutique } from "@lib/boutique/config"
+
+export const dynamic = "force-dynamic"
+
+/** Healthcheck Docker : 200 si la config de la boutique est chargée. */
+export function GET() {
+  try {
+    const { slug } = getBoutique()
+    return Response.json({ status: "ok", boutique: slug })
+  } catch {
+    return Response.json({ status: "error" }, { status: 503 })
+  }
+}

package/templates/storefront/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import { getCampaign } from "@lib/boutique/campaign"
+import { getBoutique } from "@lib/boutique/config"
+import { themeFontClasses } from "@lib/boutique/fonts"
+import { messages } from "@lib/boutique/i18n"
+import { I18nProvider } from "@lib/boutique/i18n-client"
+import { Metadata } from "next"
+import "styles/globals.css"
+import "styles/ub/tokens.css"
+import "styles/ub/bundle.css"
+import "styles/ub/fonts.css"
+import "styles/ub/medusa-ui.css"
+import "styles/ub/overrides.css"
+
+// Tout dépend de la boutique de l'instance (lue à l'exécution) : rien n'est pré-rendu au build.
+export const dynamic = "force-dynamic"
+
+export async function generateMetadata(): Promise<Metadata> {
+  const b = getBoutique()
+  // Favicon = logo de la boutique s'il existe (admin → Campagnes)
+  const logo = await getCampaign()
+    .then((c) => c.logo)
+    .catch(() => undefined)
+  return {
+    metadataBase: new URL(b.siblings[b.slug]),
+    title: { default: b.storeName, template: `%s | ${b.storeName}` },
+    ...(logo ? { icons: { icon: logo, apple: logo } } : {}),
+  }
+}
+
+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)}>
+      <body className="ub">
+        <I18nProvider messages={messages("")}>
+          <main className="relative">{props.children}</main>
+        </I18nProvider>
+      </body>
+    </html>
+  )
+}

package/templates/storefront/src/app/not-found.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next"
+import { t } from "@lib/boutique/i18n"
+import Button from "@modules/ub/button"
+
+export const metadata: Metadata = {
+  title: "404",
+}
+
+export default function NotFound() {
+  return (
+    <section className="ub-section">
+      <div className="ub-wrap" style={{ display: "grid", gap: 16, justifyItems: "center", textAlign: "center", padding: "96px 24px" }}>
+        <h1 className="ub-head" style={{ fontSize: 40, lineHeight: "48px" }}>
+          {t("notFound.title")}
+        </h1>
+        <p>{t("notFound.text")}</p>
+        <Button href="/">{t("notFound.cta")}</Button>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/instrumentation-node.ts

@@ -0,0 +1,18 @@
+import { getCampaign } from "@lib/boutique/campaign"
+import { getBoutique } from "@lib/boutique/config"
+
+/**
+ * On charge et valide la config de la boutique (project.json, thème, publishable key,
+ * fichier de campagne). En cas d'erreur, le process s'arrête avec un message clair
+ * au lieu de servir une boutique cassée. Rien à valider pendant `next build`.
+ */
+if (process.env.NEXT_PHASE !== "phase-production-build") {
+  try {
+    const b = getBoutique()
+    await getCampaign()
+    console.log(`[boutique] ${b.slug} — thème ${b.theme.id}, ${b.locale}, ${b.currency.toUpperCase()}`)
+  } catch (e) {
+    console.error(`\n${(e as Error).message}\n`)
+    process.exit(1)
+  }
+}

package/templates/storefront/src/instrumentation.ts

@@ -0,0 +1,9 @@
+/**
+ * Démarrage de l'instance : voir instrumentation-node.ts (validation de la
+ * config de la boutique, arrêt du process si elle est invalide).
+ */
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./instrumentation-node")
+  }
+}

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

@@ -0,0 +1,116 @@
+import "server-only"
+
+import fs from "node:fs"
+import path from "node:path"
+import { cache } from "react"
+import { sdk } from "@lib/config"
+import { CONFIG_DIR, THEMES_DIR, BoutiqueConfigError, getBoutique, parseOrThrow } from "./config"
+import { campaignFileSchema, campaignTextsSchema, type CampaignTexts } from "./schema"
+
+export type Campaign = CampaignTexts & {
+  startsAt: string
+  endsAt: string
+  /** URL de la boutique suivante du client, si définie */
+  nextCampaignUrl?: string
+  /** Seuil de livraison offerte, déjà formaté (ex. "$50") */
+  freeShipping?: string
+  /** Logo (URL) ; absent = pastille de couleur + nom */
+  logo?: string
+  /** Compte à rebours : undefined = selon le thème (CSS), true = toujours, false = jamais */
+  showCountdown?: boolean
+}
+
+function readJsonIfExists(file: string): unknown | undefined {
+  if (!fs.existsSync(file)) return undefined
+  try {
+    return JSON.parse(fs.readFileSync(file, "utf8"))
+  } catch (e) {
+    throw new BoutiqueConfigError(`JSON invalide dans ${file} : ${(e as Error).message}`)
+  }
+}
+
+/** Textes par défaut du thème dans la langue du projet, repli en anglais. */
+function themeTexts(themeId: string, language: string): CampaignTexts {
+  for (const lang of [language, "en"]) {
+    const file = path.join(THEMES_DIR, themeId, `campaign.${lang}.json`)
+    const data = readJsonIfExists(file)
+    if (data !== undefined) return parseOrThrow(campaignTextsSchema, data, file)
+  }
+  throw new BoutiqueConfigError(`aucun texte par défaut pour le thème « ${themeId} » (campaign.en.json manquant)`)
+}
+
+/** Remplace {discount}, {endDate}, {freeShipping} ; une variable inconnue ou vide disparaît (jamais de clé à l'écran). */
+function fill(text: string, vars: Record<string, string | undefined>): string {
+  return text
+    .replace(/\{(\w+)\}/g, (_, k: string) => vars[k] ?? "")
+    .replace(/\s{2,}/g, " ")
+    .trim()
+}
+
+function fillAll<T>(value: T, vars: Record<string, string | undefined>): T {
+  if (typeof value === "string") return fill(value, vars) as T
+  if (Array.isArray(value)) return value.map((v) => fillAll(v, vars)) as T
+  if (value && typeof value === "object") {
+    return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, fillAll(v, vars)])) as T
+  }
+  return value
+}
+
+/**
+ * Campagne enregistrée pour la boutique. Source de vérité : la base Medusa, modifiée dans
+ * l'admin « Campagnes » (GET /store/campaign, cache 60 s : une modification apparaît en
+ * une minute sans redémarrage). Secours : config/campaigns/<slug>.json, valeur initiale
+ * importée par le seed, si le backend n'a pas encore de campagne pour cette boutique.
+ */
+async function storedCampaign(slug: string): Promise<unknown> {
+  try {
+    const { campaign } = await sdk.client.fetch<{ campaign: unknown }>("/store/campaign", {
+      method: "GET",
+      next: { revalidate: 60 },
+      cache: "force-cache",
+    })
+    return campaign
+  } catch {
+    const file = path.join(/*turbopackIgnore: true*/ CONFIG_DIR, "campaigns", `${slug}.json`)
+    const raw = readJsonIfExists(file)
+    if (raw === undefined) {
+      throw new BoutiqueConfigError(`aucune campagne pour ${slug} : ni dans le backend, ni dans ${file}`)
+    }
+    return raw
+  }
+}
+
+/** Campagne affichée : textes enregistrés + textes par défaut du thème + variables. */
+export const getCampaign = cache(async (): Promise<Campaign> => {
+  const b = getBoutique()
+  const defaults = themeTexts(b.theme.id, b.language)
+  const own = parseOrThrow(campaignFileSchema, await storedCampaign(b.slug), `campagne ${b.slug}`)
+
+  const endDate = new Intl.DateTimeFormat(b.locale, { month: "long", day: "numeric" }).format(new Date(own.endsAt))
+  const vars = { discount: own.vars?.discount, freeShipping: own.vars?.freeShipping, endDate }
+
+  const texts: CampaignTexts = {
+    topbar: own.topbar ?? defaults.topbar,
+    hero: { ...defaults.hero, ...own.hero },
+    promo: { ...defaults.promo, ...own.promo },
+    sections: defaults.sections || own.sections ? { ...defaults.sections!, ...own.sections } : undefined,
+  }
+
+  return {
+    ...fillAll(texts, vars),
+    startsAt: own.startsAt,
+    endsAt: own.endsAt,
+    nextCampaignUrl: own.nextCampaign ? b.siblings[own.nextCampaign] : undefined,
+    freeShipping: own.vars?.freeShipping,
+    logo: own.logo,
+    showCountdown: own.showCountdown,
+  }
+})
+
+export type CampaignStatus = "upcoming" | "live" | "ended"
+
+export function campaignStatus(c: Pick<Campaign, "startsAt" | "endsAt">, now = Date.now()): CampaignStatus {
+  if (now < Date.parse(c.startsAt)) return "upcoming"
+  if (now > Date.parse(c.endsAt)) return "ended"
+  return "live"
+}