@salifbiaye/create-boutique 0.7.1 → 0.7.2

package/templates/backend/src/admin/routes/personnaliser/page.tsx

@@ -0,0 +1,407 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { Adjustments, ArrowUturnLeft, Clock, CodeEditor, DocumentText, Language, MagnifyingGlass, XMark } from "@medusajs/icons"
+import { Badge, Button, Container, Heading, Input, Select, Switch, Tabs, Text, Textarea, toast, usePrompt } from "@medusajs/ui"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useEffect, useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { sdk } from "../../lib/client"
+
+type TextRow = { key: string; default: string | null; all: string | null; own: string | null }
+type TextsResponse = { language: string; defaultsAvailable: boolean; texts: TextRow[] }
+type Version = { id: string; css: string; use_file: boolean; note: string | null; author: string | null; created_at: string }
+type CssResponse = { current: Version | null; versions: Version[]; file: string | null }
+type Boutiques = { boutiques: { slug: string; sales_channel_id: string }[] }
+
+const fmt = (iso: string, lang: string) => new Date(iso).toLocaleString(lang === "fr" ? "fr-FR" : "en-US", { dateStyle: "medium", timeStyle: "short" })
+const kb = (s: string) => `${(new Blob([s]).size / 1024).toFixed(1)} Ko`
+
+/**
+ * Page « Personnaliser » : changer sans reconstruire les textes de l'interface des boutiques et leur style (CSS).
+ * Tout apparaît sur les sites en une minute environ.
+ */
+const CustomizePage = () => {
+  const { t } = useTranslation()
+  return (
+    <Container className="divide-y p-0">
+      <div className="px-6 py-4">
+        <Heading level="h1">{t("customize.title")}</Heading>
+        <Text size="small" className="text-ui-fg-subtle mt-1">
+          {t("customize.description")}
+        </Text>
+      </div>
+      <Tabs defaultValue="texts">
+        <div className="px-6 pt-4">
+          <Tabs.List>
+            <Tabs.Trigger value="texts">
+              <span className="flex items-center gap-2">
+                <Language /> {t("customize.tabs.texts")}
+              </span>
+            </Tabs.Trigger>
+            <Tabs.Trigger value="css">
+              <span className="flex items-center gap-2">
+                <CodeEditor /> {t("customize.tabs.css")}
+              </span>
+            </Tabs.Trigger>
+          </Tabs.List>
+        </div>
+        <Tabs.Content value="texts">
+          <TextsTab />
+        </Tabs.Content>
+        <Tabs.Content value="css">
+          <CssTab />
+        </Tabs.Content>
+      </Tabs>
+    </Container>
+  )
+}
+
+// ─────────────────────────── Textes du site ───────────────────────────
+
+function TextsTab() {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const [scope, setScope] = useState("all")
+  const [search, setSearch] = useState("")
+  const [onlyChanged, setOnlyChanged] = useState(false)
+  const [edits, setEdits] = useState<Record<string, string | null>>({})
+
+  const { data: shops } = useQuery({ queryKey: ["boutique-campaigns"], queryFn: () => sdk.client.fetch<Boutiques>("/admin/boutique-campaigns") })
+  const { data, isLoading } = useQuery({
+    queryKey: ["customization-texts", scope],
+    queryFn: () => sdk.client.fetch<TextsResponse>(`/admin/customization/texts?scope=${scope}`),
+  })
+  useEffect(() => setEdits({}), [scope])
+
+  const save = useMutation({
+    mutationFn: () => sdk.client.fetch<{ changed: number }>("/admin/customization/texts", { method: "POST", body: { scope, values: edits } }),
+    onSuccess: (r) => {
+      setEdits({})
+      queryClient.invalidateQueries({ queryKey: ["customization-texts"] })
+      toast.success(t("customize.texts.saved", { count: r.changed }))
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const stored = (r: TextRow) => (scope === "all" ? r.all : r.own)
+  const value = (r: TextRow) => (r.key in edits ? edits[r.key] : stored(r))
+  /** Texte affiché sans remplacement à ce niveau : boutique → projet → origine */
+  const inherited = (r: TextRow) => (scope === "all" ? r.default : (r.all ?? r.default)) ?? ""
+
+  const rows = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return (data?.texts ?? []).filter((r) => {
+      if (onlyChanged && !stored(r) && !(r.key in edits)) return false
+      if (!q) return true
+      return [r.key, r.default, r.all, r.own].some((v) => v?.toLowerCase().includes(q))
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, search, onlyChanged, edits, scope])
+
+  const groups = useMemo(() => {
+    const m = new Map<string, TextRow[]>()
+    for (const r of rows) {
+      const g = r.key.split(".")[0]
+      m.set(g, [...(m.get(g) ?? []), r])
+    }
+    return [...m.entries()]
+  }, [rows])
+
+  const dirty = Object.keys(edits).length
+  const changedCount = (data?.texts ?? []).filter((r) => stored(r)).length
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-end gap-3 px-6 py-4">
+        <div className="w-64">
+          <Text size="xsmall" className="text-ui-fg-subtle mb-1">
+            {t("customize.texts.scope")}
+          </Text>
+          <Select value={scope} onValueChange={setScope}>
+            <Select.Trigger>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value="all">{t("customize.texts.allStores")}</Select.Item>
+              {(shops?.boutiques ?? []).map((b) => (
+                <Select.Item key={b.sales_channel_id} value={b.sales_channel_id}>
+                  {b.slug}
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select>
+        </div>
+        <div className="relative min-w-60 flex-1">
+          <MagnifyingGlass className="text-ui-fg-muted pointer-events-none absolute left-2 top-1/2 -translate-y-1/2" />
+          <Input className="pl-8" placeholder={t("customize.texts.search")} value={search} onChange={(e) => setSearch(e.target.value)} />
+        </div>
+        <label className="flex items-center gap-2 pb-1.5">
+          <Switch checked={onlyChanged} onCheckedChange={setOnlyChanged} />
+          <Text size="small">{t("customize.texts.onlyChanged", { count: changedCount })}</Text>
+        </label>
+      </div>
+      <Text size="small" className="text-ui-fg-subtle px-6 pb-3">
+        {scope === "all" ? t("customize.texts.helpAll") : t("customize.texts.helpOne")}
+      </Text>
+      {data && !data.defaultsAvailable && (
+        <Text size="small" className="text-ui-fg-error px-6 pb-3">
+          {t("customize.texts.noDefaults")}
+        </Text>
+      )}
+
+      {isLoading ? (
+        <Text className="text-ui-fg-subtle px-6 py-8">{t("customize.loading")}</Text>
+      ) : !rows.length ? (
+        <Text className="text-ui-fg-subtle px-6 py-8">{t("customize.texts.none")}</Text>
+      ) : (
+        <div className="divide-y border-t">
+          {groups.map(([group, list]) => (
+            <section key={group} className="px-6 py-4">
+              <Text size="small" weight="plus" className="text-ui-fg-subtle mb-2 uppercase tracking-wide">
+                {group} <span className="text-ui-fg-muted font-normal normal-case">· {list.length}</span>
+              </Text>
+              <div className="grid gap-3">
+                {list.map((r) => {
+                  const v = value(r)
+                  const changed = r.key in edits
+                  return (
+                    <div key={r.key} className="grid items-start gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_auto]">
+                      <div className="min-w-0">
+                        <code className="text-ui-fg-muted block truncate text-xs">{r.key}</code>
+                        <Text size="small" className="text-ui-fg-subtle line-clamp-2">
+                          {inherited(r) || "—"}
+                        </Text>
+                      </div>
+                      <Input
+                        size="small"
+                        value={v ?? ""}
+                        placeholder={inherited(r)}
+                        onChange={(e) => setEdits((old) => ({ ...old, [r.key]: e.target.value === "" ? null : e.target.value }))}
+                        className={changed ? "ring-ui-border-interactive ring-1" : ""}
+                      />
+                      <div className="flex items-center gap-2 pt-1">
+                        {stored(r) && !changed && <Badge size="2xsmall" color="blue">{t("customize.texts.custom")}</Badge>}
+                        {scope !== "all" && r.all && !stored(r) && <Badge size="2xsmall" color="grey">{t("customize.texts.fromProject")}</Badge>}
+                        {(stored(r) || changed) && (
+                          <Button
+                            size="small"
+                            variant="transparent"
+                            title={t("customize.texts.reset")}
+                            onClick={() => setEdits((old) => (stored(r) ? { ...old, [r.key]: null } : Object.fromEntries(Object.entries(old).filter(([k]) => k !== r.key))))}
+                          >
+                            <ArrowUturnLeft />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </section>
+          ))}
+        </div>
+      )}
+
+      {dirty > 0 && (
+        <div className="bg-ui-bg-base sticky bottom-0 flex items-center justify-between gap-3 border-t px-6 py-3 shadow-elevation-flyout">
+          <Text size="small">{t("customize.texts.pending", { count: dirty })}</Text>
+          <div className="flex gap-2">
+            <Button size="small" variant="secondary" onClick={() => setEdits({})}>
+              {t("customize.cancel")}
+            </Button>
+            <Button size="small" isLoading={save.isPending} onClick={() => save.mutate()}>
+              {t("customize.save")}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─────────────────────────── Style (CSS) ───────────────────────────
+
+function CssTab() {
+  const { t, i18n } = useTranslation()
+  const queryClient = useQueryClient()
+  const prompt = usePrompt()
+  const { data, isLoading } = useQuery({ queryKey: ["customization-css"], queryFn: () => sdk.client.fetch<CssResponse>("/admin/customization/css") })
+  const [css, setCss] = useState("")
+  const [useFile, setUseFile] = useState(true)
+  const [note, setNote] = useState("")
+  const [showFile, setShowFile] = useState(false)
+
+  const saved = data?.current
+  const reload = () => {
+    setCss(saved?.css ?? "")
+    setUseFile(saved ? saved.use_file : true)
+    setNote("")
+  }
+  useEffect(reload, [saved?.id]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const dirty = css !== (saved?.css ?? "") || useFile !== (saved ? saved.use_file : true)
+  const done = (msg: string) => {
+    queryClient.invalidateQueries({ queryKey: ["customization-css"] })
+    toast.success(msg)
+  }
+  const save = useMutation({
+    mutationFn: (body: { css: string; use_file: boolean; note?: string }) => sdk.client.fetch("/admin/customization/css", { method: "POST", body }),
+    onSuccess: () => done(t("customize.css.saved")),
+    onError: (e: Error) => toast.error(e.message),
+  })
+  const restore = useMutation({
+    mutationFn: (id: string) => sdk.client.fetch("/admin/customization/css/restore", { method: "POST", body: { id } }),
+    onSuccess: () => done(t("customize.css.restored")),
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const resetTheme = async () => {
+    const ok = await prompt({ title: t("customize.css.themeTitle"), description: t("customize.css.themeText"), confirmText: t("customize.css.themeConfirm"), cancelText: t("customize.cancel") })
+    if (ok) save.mutate({ css: "", use_file: false, note: t("customize.css.themeNote") })
+  }
+  const restoreVersion = async (v: Version) => {
+    const ok = await prompt({ title: t("customize.css.restoreTitle"), description: t("customize.css.restoreText", { date: fmt(v.created_at, i18n.language) }), confirmText: t("customize.css.restore"), cancelText: t("customize.cancel") })
+    if (ok) restore.mutate(v.id)
+  }
+
+  /** Tabulation dans l'éditeur : 2 espaces au lieu de changer de champ */
+  const onKey = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== "Tab") return
+    e.preventDefault()
+    const el = e.currentTarget
+    const { selectionStart: a, selectionEnd: b } = el
+    const next = `${css.slice(0, a)}  ${css.slice(b)}`
+    setCss(next)
+    requestAnimationFrame(() => el.setSelectionRange(a + 2, a + 2))
+  }
+
+  if (isLoading) return <Text className="text-ui-fg-subtle px-6 py-8">{t("customize.loading")}</Text>
+
+  return (
+    <div className="grid gap-0 lg:grid-cols-[minmax(0,1fr)_340px] lg:divide-x">
+      <div className="px-6 py-4">
+        <Text size="small" className="text-ui-fg-subtle mb-3">
+          {t("customize.css.help")}
+        </Text>
+        <Textarea
+          value={css}
+          onChange={(e) => setCss(e.target.value)}
+          onKeyDown={onKey}
+          rows={22}
+          spellCheck={false}
+          className="font-mono text-xs leading-5"
+          placeholder={t("customize.css.placeholder")}
+        />
+        <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
+          <Text size="xsmall" className="text-ui-fg-muted">
+            {kb(css)} · {dirty ? t("customize.css.unsaved") : saved ? t("customize.css.appliedSince", { date: fmt(saved.created_at, i18n.language) }) : t("customize.css.none")}
+          </Text>
+          <label className="flex items-center gap-2">
+            <Switch checked={useFile} onCheckedChange={setUseFile} />
+            <Text size="small">{t("customize.css.useFile")}</Text>
+          </label>
+        </div>
+        <div className="mt-4 flex flex-wrap items-center gap-2">
+          <Input size="small" className="max-w-xs" placeholder={t("customize.css.notePlaceholder")} value={note} onChange={(e) => setNote(e.target.value)} />
+          <Button size="small" disabled={!dirty} isLoading={save.isPending} onClick={() => save.mutate({ css, use_file: useFile, note: note || undefined })}>
+            {t("customize.save")}
+          </Button>
+          <Button size="small" variant="secondary" disabled={!dirty} onClick={reload}>
+            <ArrowUturnLeft /> {t("customize.css.discard")}
+          </Button>
+          <Button size="small" variant="secondary" onClick={resetTheme}>
+            {t("customize.css.theme")}
+          </Button>
+        </div>
+
+        <div className="mt-6 rounded-lg border">
+          <button type="button" className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left" onClick={() => setShowFile((s) => !s)}>
+            <span className="flex items-center gap-2">
+              <DocumentText />
+              <Text size="small" weight="plus">
+                {t("customize.css.file")}
+              </Text>
+              <Badge size="2xsmall" color={useFile ? "green" : "grey"}>
+                {useFile ? t("customize.css.fileOn") : t("customize.css.fileOff")}
+              </Badge>
+            </span>
+            <Text size="xsmall" className="text-ui-fg-muted">
+              {data?.file == null ? t("customize.css.fileMissing") : `${kb(data.file)} · ${showFile ? t("customize.css.hide") : t("customize.css.show")}`}
+            </Text>
+          </button>
+          {showFile && data?.file != null && (
+            <div className="border-t">
+              <Text size="xsmall" className="text-ui-fg-subtle px-4 pt-3">
+                {t("customize.css.fileHelp")}
+              </Text>
+              <pre className="bg-ui-bg-subtle text-ui-fg-subtle max-h-96 overflow-auto px-4 py-3 font-mono text-xs leading-5">{data.file}</pre>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <aside className="px-6 py-4">
+        <Text size="small" weight="plus" className="mb-3 flex items-center gap-2">
+          <Clock /> {t("customize.css.history")}
+        </Text>
+        {!data?.versions.length ? (
+          <Text size="small" className="text-ui-fg-subtle">
+            {t("customize.css.noHistory")}
+          </Text>
+        ) : (
+          <ul className="grid gap-2">
+            {data.versions.map((v, i) => (
+              <li key={v.id} className="rounded-lg border px-3 py-2">
+                <div className="flex items-center justify-between gap-2">
+                  <Text size="xsmall" weight="plus">
+                    {fmt(v.created_at, i18n.language)}
+                  </Text>
+                  {i === 0 && (
+                    <Badge size="2xsmall" color="green">
+                      {t("customize.css.applied")}
+                    </Badge>
+                  )}
+                </div>
+                <Text size="xsmall" className="text-ui-fg-subtle line-clamp-2">
+                  {v.note || (v.css ? t("customize.css.noNote") : t("customize.css.empty"))}
+                </Text>
+                <Text size="xsmall" className="text-ui-fg-muted">
+                  {[v.author, kb(v.css), v.use_file ? t("customize.css.withFile") : t("customize.css.withoutFile")].filter(Boolean).join(" · ")}
+                </Text>
+                <div className="mt-1.5 flex gap-1">
+                  <Button
+                    size="small"
+                    variant="transparent"
+                    onClick={() => {
+                      setCss(v.css)
+                      setUseFile(v.use_file)
+                    }}
+                  >
+                    {t("customize.css.load")}
+                  </Button>
+                  {i > 0 && (
+                    <Button size="small" variant="transparent" onClick={() => restoreVersion(v)}>
+                      <ArrowUturnLeft /> {t("customize.css.restore")}
+                    </Button>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+        {dirty && (
+          <Button size="small" variant="transparent" className="mt-2" onClick={reload}>
+            <XMark /> {t("customize.css.discard")}
+          </Button>
+        )}
+      </aside>
+    </div>
+  )
+}
+
+export const config = defineRouteConfig({
+  label: "customize.nav",
+  translationNs: "translation",
+  icon: Adjustments,
+})
+
+export default CustomizePage

package/templates/backend/src/api/admin/customization/css/restore/route.ts

@@ -0,0 +1,21 @@
+import { AuthenticatedMedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { actorEmail } from "../../../../../lib/customization"
+import { CUSTOMIZATION_MODULE } from "../../../../../modules/customization"
+import type CustomizationModuleService from "../../../../../modules/customization/service"
+import type { CssRestoreInput } from "../../../../../modules/customization/validators"
+import { saveCssWorkflow } from "../../../../../workflows/customization"
+
+/**
+ * POST /admin/customization/css/restore { id } : remet une ancienne version en la recopiant comme nouvelle version
+ * (l'historique n'est jamais réécrit : on peut toujours revenir à l'état d'avant).
+ */
+export async function POST(req: AuthenticatedMedusaRequest<CssRestoreInput>, res: MedusaResponse) {
+  const service: CustomizationModuleService = req.scope.resolve(CUSTOMIZATION_MODULE)
+  const old = await service.retrieveCssVersion(req.validatedBody.id)
+  const author = await actorEmail(req.scope, req.auth_context?.actor_id)
+  const date = new Date(old.created_at).toISOString().slice(0, 16).replace("T", " ")
+  const { result } = await saveCssWorkflow(req.scope).run({
+    input: { css: old.css, use_file: old.use_file, note: `Restauration de la version du ${date}`, author },
+  })
+  res.json({ version: { id: result.id, created_at: result.created_at } })
+}

package/templates/backend/src/api/admin/customization/css/route.ts

@@ -0,0 +1,37 @@
+import { AuthenticatedMedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { actorEmail, customCssFile } from "../../../../lib/customization"
+import { CUSTOMIZATION_MODULE } from "../../../../modules/customization"
+import type CustomizationModuleService from "../../../../modules/customization/service"
+import type { CssInput } from "../../../../modules/customization/validators"
+import { saveCssWorkflow } from "../../../../workflows/customization"
+
+const view = (v: { id: string; css: string; use_file: boolean; note: string | null; author: string | null; created_at: Date | string }) => ({
+  id: v.id,
+  css: v.css,
+  use_file: v.use_file,
+  note: v.note,
+  author: v.author,
+  created_at: v.created_at,
+})
+
+/**
+ * GET /admin/customization/css : version appliquée (la plus récente), historique (30 dernières) et contenu du
+ * fichier custom.css du projet (lecture seule : il se modifie dans le code, voir PERSONNALISER.md).
+ */
+export async function GET(req: AuthenticatedMedusaRequest, res: MedusaResponse) {
+  const service: CustomizationModuleService = req.scope.resolve(CUSTOMIZATION_MODULE)
+  const versions = await service.listCssVersions({}, { order: { created_at: "DESC" }, take: 30 })
+  res.json({
+    current: versions[0] ? view(versions[0]) : null,
+    versions: versions.map(view),
+    file: customCssFile(),
+  })
+}
+
+/** POST /admin/customization/css : enregistre une nouvelle version (appliquée aux boutiques en ~1 minute) */
+export async function POST(req: AuthenticatedMedusaRequest<CssInput>, res: MedusaResponse) {
+  const { css, use_file, note } = req.validatedBody
+  const author = await actorEmail(req.scope, req.auth_context?.actor_id)
+  const { result } = await saveCssWorkflow(req.scope).run({ input: { css, use_file, note: note || null, author } })
+  res.json({ version: view(result) })
+}

package/templates/backend/src/api/admin/customization/texts/route.ts

@@ -0,0 +1,38 @@
+import { AuthenticatedMedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { MedusaError } from "@medusajs/framework/utils"
+import { defaultTexts } from "../../../../lib/customization"
+import { readProject } from "../../../../lib/project"
+import { CUSTOMIZATION_MODULE } from "../../../../modules/customization"
+import type CustomizationModuleService from "../../../../modules/customization/service"
+import { SCOPE_RE, type TextsInput } from "../../../../modules/customization/validators"
+import { saveSiteTextsWorkflow } from "../../../../workflows/customization"
+
+/**
+ * GET /admin/customization/texts?scope=all|<sales channel> : chaque texte d'interface avec sa valeur d'origine,
+ * celle remplacée pour tout le projet et celle remplacée pour la boutique choisie.
+ */
+export async function GET(req: AuthenticatedMedusaRequest, res: MedusaResponse) {
+  const scope = String(req.query.scope ?? "all")
+  if (!SCOPE_RE.test(scope)) throw new MedusaError(MedusaError.Types.INVALID_DATA, "boutique invalide")
+  const { language } = readProject()
+  const origin = defaultTexts(language)
+  const service: CustomizationModuleService = req.scope.resolve(CUSTOMIZATION_MODULE)
+  const all = await service.listSiteTexts({ scope: "all" }, { take: 5000 })
+  const own = scope === "all" ? [] : await service.listSiteTexts({ scope }, { take: 5000 })
+  const allMap = new Map(all.map((t) => [t.key, t.value]))
+  const ownMap = new Map(own.map((t) => [t.key, t.value]))
+  const keys = [...new Set([...Object.keys(origin ?? {}), ...allMap.keys(), ...ownMap.keys()])].sort()
+
+  res.json({
+    language,
+    // Fichiers d'origine absents (projet pas encore mis à jour) : on liste seulement les textes déjà remplacés
+    defaultsAvailable: origin !== null,
+    texts: keys.map((key) => ({ key, default: origin?.[key] ?? null, all: allMap.get(key) ?? null, own: ownMap.get(key) ?? null })),
+  })
+}
+
+/** POST /admin/customization/texts : { scope, values: { clé: texte | null } } (null = texte d'origine) */
+export async function POST(req: AuthenticatedMedusaRequest<TextsInput>, res: MedusaResponse) {
+  const { result } = await saveSiteTextsWorkflow(req.scope).run({ input: req.validatedBody })
+  res.json(result)
+}

package/templates/backend/src/api/middlewares.ts

@@ -5,6 +5,7 @@ import { ActiveBoutique } from "./admin/active-boutique/route"
 import { BoutiqueOnline } from "./admin/boutique-online/[salesChannelId]/route"
 import { OrderLookup } from "./store/order-lookup/route"
 import { ReviewInput, ReviewStatusInput } from "../modules/product-review/validators"
+import { CssInput, CssRestoreInput, TextsInput } from "../modules/customization/validators"
 
 // Anti force brute (par IP) : connexion admin, mot de passe oublié, suivi de commande.
 const loginLimit = rateLimit({ name: "connexion", max: 10, windowMs: 15 * 60 * 1000 })
@@ -22,6 +23,9 @@ export default defineMiddlewares({
     },
     { matcher: "/admin/active-boutique", method: "POST", middlewares: [validateAndTransformBody(ActiveBoutique)] },
     { matcher: "/admin/boutique-online/:salesChannelId", method: "POST", middlewares: [validateAndTransformBody(BoutiqueOnline)] },
+    { matcher: "/admin/customization/texts", method: "POST", middlewares: [validateAndTransformBody(TextsInput)] },
+    { matcher: "/admin/customization/css", method: "POST", middlewares: [validateAndTransformBody(CssInput)] },
+    { matcher: "/admin/customization/css/restore", method: "POST", middlewares: [validateAndTransformBody(CssRestoreInput)] },
     { matcher: "/auth/user/emailpass", method: "POST", middlewares: [loginLimit] },
     { matcher: "/auth/user/emailpass/reset-password", method: "POST", middlewares: [resetLimit] },
     { matcher: "/auth/customer/emailpass", method: "POST", middlewares: [loginLimit] },

package/templates/backend/src/api/store/customization/route.ts

@@ -0,0 +1,21 @@
+import { MedusaStoreRequest, MedusaResponse } from "@medusajs/framework/http"
+import { CUSTOMIZATION_MODULE } from "../../../modules/customization"
+import type CustomizationModuleService from "../../../modules/customization/service"
+
+/**
+ * GET /store/customization : personnalisation de LA boutique qui appelle (sales channel de sa publishable key) :
+ * textes remplacés (projet entier, puis ceux de la boutique, prioritaires) et style appliqué.
+ * Aucun paramètre ne permet de lire ceux d'une autre boutique.
+ */
+export async function GET(req: MedusaStoreRequest, res: MedusaResponse) {
+  const salesChannelIds = req.publishable_key_context?.sales_channel_ids ?? []
+  const service: CustomizationModuleService = req.scope.resolve(CUSTOMIZATION_MODULE)
+  const rows = await service.listSiteTexts({ scope: ["all", ...salesChannelIds] }, { take: 5000 })
+  const texts: Record<string, string> = {}
+  for (const r of rows.filter((r) => r.scope === "all")) texts[r.key] = r.value
+  for (const r of rows.filter((r) => r.scope !== "all")) texts[r.key] = r.value
+  const [current] = await service.listCssVersions({}, { order: { created_at: "DESC" }, take: 1 })
+
+  res.setHeader("Cache-Control", "public, max-age=60")
+  res.json({ texts, css: current?.css ?? "", use_file: current ? current.use_file : true, version: current?.id ?? null })
+}

package/templates/backend/src/lib/customization.ts

@@ -0,0 +1,43 @@
+import fs from "node:fs"
+import path from "node:path"
+import { ContainerRegistrationKeys } from "@medusajs/framework/utils"
+import type { MedusaContainer } from "@medusajs/framework/types"
+
+/**
+ * Fichiers du storefront montés en lecture seule dans le backend (docker-compose généré par le CLI) :
+ * textes d'interface d'origine (locales/<langue>.json) et fichier custom.css du projet.
+ */
+export const LOCALES_DIR = process.env.LOCALES_DIR || "/app/locales"
+export const CUSTOM_CSS_FILE = process.env.CUSTOM_CSS_FILE || "/app/custom/custom.css"
+
+const readJson = (file: string): Record<string, string> => {
+  try {
+    return JSON.parse(fs.readFileSync(file, "utf8"))
+  } catch {
+    return {}
+  }
+}
+
+/** Textes d'origine de l'interface dans la langue du projet (repli en anglais), ou null si les fichiers manquent */
+export function defaultTexts(language: string): Record<string, string> | null {
+  const en = readJson(path.join(LOCALES_DIR, "en.json"))
+  const own = language === "en" ? en : readJson(path.join(LOCALES_DIR, `${language}.json`))
+  if (!Object.keys(en).length && !Object.keys(own).length) return null
+  return { ...en, ...own }
+}
+
+export function customCssFile(): string | null {
+  try {
+    return fs.readFileSync(CUSTOM_CSS_FILE, "utf8")
+  } catch {
+    return null
+  }
+}
+
+/** E-mail de l'utilisateur admin connecté (auteur d'une version du style) */
+export async function actorEmail(scope: MedusaContainer, actorId?: string): Promise<string | null> {
+  if (!actorId) return null
+  const query = scope.resolve(ContainerRegistrationKeys.QUERY)
+  const { data } = await query.graph({ entity: "user", fields: ["email"], filters: { id: actorId } })
+  return (data[0] as { email?: string } | undefined)?.email ?? null
+}

package/templates/backend/src/modules/customization/index.ts

@@ -0,0 +1,9 @@
+import { Module } from "@medusajs/framework/utils"
+import CustomizationModuleService from "./service"
+
+/** Personnalisation sans reconstruire : textes d'interface remplacés et style (CSS) versionné */
+export const CUSTOMIZATION_MODULE = "siteCustomization"
+
+export default Module(CUSTOMIZATION_MODULE, {
+  service: CustomizationModuleService,
+})

package/templates/backend/src/modules/customization/migrations/Migration20261001080000.ts

@@ -0,0 +1,21 @@
+import { Migration } from "@medusajs/framework/mikro-orm/migrations"
+
+// Écrite à la main (même forme que celles de `medusa db:generate`, qui exige une base joignable).
+export class Migration20261001080000 extends Migration {
+  override async up(): Promise<void> {
+    this.addSql(
+      `create table if not exists "site_text" ("id" text not null, "scope" text not null, "key" text not null, "value" text not null, "created_at" timestamptz not null default now(), "updated_at" timestamptz not null default now(), "deleted_at" timestamptz null, constraint "site_text_pkey" primary key ("id"));`
+    )
+    this.addSql(`CREATE UNIQUE INDEX IF NOT EXISTS "IDX_site_text_scope_key_unique" ON "site_text" ("scope", "key") WHERE deleted_at IS NULL;`)
+    this.addSql(`CREATE INDEX IF NOT EXISTS "IDX_site_text_deleted_at" ON "site_text" ("deleted_at") WHERE deleted_at IS NULL;`)
+    this.addSql(
+      `create table if not exists "site_css_version" ("id" text not null, "css" text not null, "use_file" boolean not null default true, "note" text null, "author" text null, "created_at" timestamptz not null default now(), "updated_at" timestamptz not null default now(), "deleted_at" timestamptz null, constraint "site_css_version_pkey" primary key ("id"));`
+    )
+    this.addSql(`CREATE INDEX IF NOT EXISTS "IDX_site_css_version_deleted_at" ON "site_css_version" ("deleted_at") WHERE deleted_at IS NULL;`)
+  }
+
+  override async down(): Promise<void> {
+    this.addSql(`drop table if exists "site_text" cascade;`)
+    this.addSql(`drop table if exists "site_css_version" cascade;`)
+  }
+}

package/templates/backend/src/modules/customization/models/css-version.ts

@@ -0,0 +1,16 @@
+import { model } from "@medusajs/framework/utils"
+
+/**
+ * Version du style personnalisé (admin → Personnaliser → Style). Chaque enregistrement crée une version ;
+ * la plus récente est appliquée aux boutiques (sans reconstruire). Historique gardé pour revenir en arrière.
+ * use_file = appliquer aussi le fichier storefront/src/styles/custom.css du projet ; css vide + use_file faux = thème d'origine.
+ */
+const CssVersion = model.define("site_css_version", {
+  id: model.id({ prefix: "scss" }).primaryKey(),
+  css: model.text(),
+  use_file: model.boolean().default(true),
+  note: model.text().nullable(),
+  author: model.text().nullable(),
+})
+
+export default CssVersion