@salifbiaye/create-boutique 0.1.1

package/templates/backend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "usine-backend",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Backend Usine à Boutiques (Medusa v2) — un backend partagé par toutes les boutiques du projet",
+  "scripts": {
+    "build": "medusa build",
+    "dev": "medusa develop",
+    "start": "medusa start",
+    "seed": "medusa exec ./src/scripts/seed.ts"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "3.1141.0",
+    "@medusajs/admin-sdk": "2.21.2",
+    "@medusajs/cli": "2.21.2",
+    "@medusajs/framework": "2.21.2",
+    "@medusajs/medusa": "2.21.2",
+    "csv-parse": "7.0.3",
+    "resend": "6.30.0"
+  },
+  "devDependencies": {
+    "@swc/core": "1.16.2",
+    "@types/node": "24.19.0",
+    "@types/react": "18.3.31",
+    "@types/react-dom": "18.3.7",
+    "prop-types": "15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "ts-node": "10.9.2",
+    "typescript": "5.9.3",
+    "vite": "5.4.21"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "overrides": {
+    "lodash": "4.18.1"
+  }
+}

package/templates/backend/src/admin/README.md

@@ -0,0 +1,33 @@
+# Admin Customizations
+
+You can extend the Medusa Admin to add widgets and new pages. Your customizations interact with API routes to provide merchants with custom functionalities.
+
+> Learn more about Admin Extensions in [this documentation](https://docs.medusajs.com/learn/fundamentals/admin).
+
+## Example: Create a Widget
+
+A widget is a React component that can be injected into an existing page in the admin dashboard.
+
+For example, create the file `src/admin/widgets/product-widget.tsx` with the following content:
+
+```tsx title="src/admin/widgets/product-widget.tsx"
+import { defineWidgetConfig } from "@medusajs/admin-sdk"
+
+// The widget
+const ProductWidget = () => {
+  return (
+    <div>
+      <h2>Product Widget</h2>
+    </div>
+  )
+}
+
+// The widget's configurations
+export const config = defineWidgetConfig({
+  zone: "product.details.after",
+})
+
+export default ProductWidget
+```
+
+This inserts a widget with the text “Product Widget” at the end of a product’s details page.

package/templates/backend/src/admin/components/image-field.tsx

@@ -0,0 +1,61 @@
+import { Trash } from "@medusajs/icons"
+import { Button, Label, toast } from "@medusajs/ui"
+import { useMutation } from "@tanstack/react-query"
+import { useTranslation } from "react-i18next"
+import { sdk } from "../lib/client"
+
+const IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp"]
+const IMAGE_MAX = 5 * 1024 * 1024
+
+/**
+ * Champ image : envoi au stockage du projet (module File de Medusa) puis URL renvoyée.
+ * Types jpg/png/webp, 5 Mo max (vérifiés ici ; le backend revérifie l'extension de l'URL).
+ */
+export function ImageField({
+  label,
+  value,
+  onChange,
+  previewClassName = "h-20 w-32 object-cover",
+}: {
+  label: string
+  value: string
+  onChange: (url: string) => void
+  previewClassName?: string
+}) {
+  const { t } = useTranslation()
+
+  const upload = useMutation({
+    mutationFn: (file: File) => sdk.admin.upload.create({ files: [file] }),
+    onSuccess: ({ files }) => onChange(files[0].url),
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const onFile = (file?: File) => {
+    if (!file) return
+    if (!IMAGE_TYPES.includes(file.type)) return toast.error(t("campaigns.errors.imageType"))
+    if (file.size > IMAGE_MAX) return toast.error(t("campaigns.errors.imageSize"))
+    upload.mutate(file)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Label size="small">{label}</Label>
+      {value && (
+        <div className="flex items-center gap-3">
+          <img src={value} alt="" className={`rounded-md bg-ui-bg-subtle ${previewClassName}`} />
+          <Button size="small" variant="secondary" onClick={() => onChange("")}>
+            <Trash />
+            {t("campaigns.fields.removeImage")}
+          </Button>
+        </div>
+      )}
+      <input
+        type="file"
+        accept={IMAGE_TYPES.join(",")}
+        disabled={upload.isPending}
+        onChange={(e) => onFile(e.target.files?.[0])}
+        className="txt-compact-small text-ui-fg-subtle"
+      />
+    </div>
+  )
+}

package/templates/backend/src/admin/i18n/README.md

@@ -0,0 +1,58 @@
+# Admin Customizations Translations
+
+The Medusa Admin dashboard supports multiple languages for its interface. Medusa uses [react-i18next](https://react.i18next.com/) to manage translations in the admin dashboard.
+
+To add translations, create JSON translation files for each language under the `src/admin/i18n/json` directory. For example, create the `src/admin/i18n/json/en.json` file with the following content:
+
+```json
+{
+  "brands": {
+    "title": "Brands",
+    "description": "Manage your product brands"
+  },
+  "done": "Done"
+}
+```
+
+Then, export the translations in `src/admin/i18n/index.ts`:
+
+```ts
+import en from "./json/en.json" with { type: "json" }
+
+export default {
+  en: {
+    translation: en,
+  },
+}
+```
+
+Finally, use translations in your admin widgets and routes using the `useTranslation` hook:
+
+```tsx
+import { defineWidgetConfig } from "@medusajs/admin-sdk"
+import { Button, Container, Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+const ProductWidget = () => {
+  const { t } = useTranslation()
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("brands.title")}</Heading>
+        <p>{t("brands.description")}</p>
+      </div>
+      <div className="flex justify-end px-6 py-4">
+        <Button variant="primary">{t("done")}</Button>
+      </div>
+    </Container>
+  )
+}
+
+export const config = defineWidgetConfig({
+  zone: "product.details.before",
+})
+
+export default ProductWidget
+```
+
+Learn more about translating admin extensions in the [Translate Admin Customizations](https://docs.medusajs.com/learn/fundamentals/admin/translations) documentation.

package/templates/backend/src/admin/i18n/index.ts

@@ -0,0 +1,8 @@
+import en from "./json/en.json" with { type: "json" }
+import fr from "./json/fr.json" with { type: "json" }
+
+// Libellés de la page « Campagnes » : langue de l'utilisateur admin, anglais par défaut.
+export default {
+  en: { translation: en },
+  fr: { translation: fr },
+}

package/templates/backend/src/admin/i18n/json/en.json

@@ -0,0 +1,66 @@
+{
+  "campaigns": {
+    "nav": "Campaigns",
+    "title": "Campaigns",
+    "description": "Texts, dates and hero image of each of your stores. Changes appear on the store within a minute.",
+    "store": "Store",
+    "dates": "Dates",
+    "status": "Status",
+    "edit": "Edit",
+    "noCampaign": "No campaign",
+    "upcoming": "Upcoming",
+    "live": "Live",
+    "ended": "Ended",
+    "save": "Save",
+    "cancel": "Cancel",
+    "saved": "Campaign saved",
+    "reset": "Reset to theme texts",
+    "resetDone": "Theme texts restored",
+    "emptyHint": "Leave empty to use the theme text.",
+    "sections": {
+      "dates": "Dates",
+      "hero": "Hero",
+      "topbar": "Top bar messages",
+      "promo": "Promo banner",
+      "vars": "Variables used by theme texts",
+      "identity": "Identity"
+    },
+    "fields": {
+      "startsAt": "Starts at",
+      "endsAt": "Ends at",
+      "nextCampaign": "Next campaign (store shown when this one ends)",
+      "none": "None",
+      "discount": "Discount (e.g. 30%)",
+      "freeShipping": "Free shipping threshold (e.g. $50)",
+      "eyebrow": "Eyebrow",
+      "title": "Title",
+      "highlight": "Highlighted words (colored in the title)",
+      "sub": "Subtitle",
+      "cta": "Button",
+      "cta2": "Second button",
+      "bubble": "Bubble (3 short texts)",
+      "text": "Text",
+      "seal": "Seal",
+      "message": "Message {{n}}",
+      "heroImage": "Hero image (jpg, png or webp, max 5 MB)",
+      "removeImage": "Remove image",
+      "logo": "Logo (also used as the browser icon)",
+      "countdown": "Countdown",
+      "countdownTheme": "As the theme",
+      "countdownYes": "Always show",
+      "countdownNo": "Never show",
+      "promoImage": "Promo banner image"
+    },
+    "errors": {
+      "imageType": "Image must be jpg, png or webp",
+      "imageSize": "Image must be 5 MB or less",
+      "dates": "The start date must be before the end date"
+    },
+    "category": {
+      "title": "Category image",
+      "hint": "Shown on the category tiles of the stores.",
+      "save": "Save image",
+      "saved": "Image saved"
+    }
+  }
+}

package/templates/backend/src/admin/i18n/json/fr.json

@@ -0,0 +1,66 @@
+{
+  "campaigns": {
+    "nav": "Campagnes",
+    "title": "Campagnes",
+    "description": "Textes, dates et visuel de chacune de vos boutiques. Les modifications apparaissent sur la boutique en une minute.",
+    "store": "Boutique",
+    "dates": "Dates",
+    "status": "Statut",
+    "edit": "Modifier",
+    "noCampaign": "Aucune campagne",
+    "upcoming": "À venir",
+    "live": "En cours",
+    "ended": "Terminée",
+    "save": "Enregistrer",
+    "cancel": "Annuler",
+    "saved": "Campagne enregistrée",
+    "reset": "Réinitialiser aux textes du thème",
+    "resetDone": "Textes du thème rétablis",
+    "emptyHint": "Laissez vide pour garder le texte du thème.",
+    "sections": {
+      "dates": "Dates",
+      "hero": "Bannière principale",
+      "topbar": "Messages de la barre du haut",
+      "promo": "Bandeau promo",
+      "vars": "Variables des textes du thème",
+      "identity": "Identité"
+    },
+    "fields": {
+      "startsAt": "Début",
+      "endsAt": "Fin",
+      "nextCampaign": "Campagne suivante (boutique proposée à la fin de celle-ci)",
+      "none": "Aucune",
+      "discount": "Remise (ex. 30%)",
+      "freeShipping": "Seuil de livraison offerte (ex. 50 €)",
+      "eyebrow": "Sur-titre",
+      "title": "Titre",
+      "highlight": "Mots mis en couleur dans le titre",
+      "sub": "Sous-titre",
+      "cta": "Bouton",
+      "cta2": "Second bouton",
+      "bubble": "Bulle (3 textes courts)",
+      "text": "Texte",
+      "seal": "Pastille",
+      "message": "Message {{n}}",
+      "heroImage": "Visuel principal (jpg, png ou webp, 5 Mo max)",
+      "removeImage": "Retirer le visuel",
+      "logo": "Logo (sert aussi d'icône de l'onglet)",
+      "countdown": "Compte à rebours",
+      "countdownTheme": "Comme le thème",
+      "countdownYes": "Toujours afficher",
+      "countdownNo": "Ne jamais afficher",
+      "promoImage": "Image du bandeau promo"
+    },
+    "errors": {
+      "imageType": "L'image doit être en jpg, png ou webp",
+      "imageSize": "L'image doit faire 5 Mo maximum",
+      "dates": "La date de début doit précéder la date de fin"
+    },
+    "category": {
+      "title": "Image de la catégorie",
+      "hint": "Affichée sur les tuiles catégories des boutiques.",
+      "save": "Enregistrer l'image",
+      "saved": "Image enregistrée"
+    }
+  }
+}

package/templates/backend/src/admin/lib/client.ts

@@ -0,0 +1,9 @@
+import Medusa from "@medusajs/js-sdk"
+
+export const sdk = new Medusa({
+  baseUrl: import.meta.env.VITE_BACKEND_URL || "/",
+  debug: import.meta.env.DEV,
+  auth: {
+    type: "session",
+  },
+})

package/templates/backend/src/admin/routes/boutique-campaigns/campaign-drawer.tsx

@@ -0,0 +1,286 @@
+import { ArrowPath } from "@medusajs/icons"
+import { Button, Drawer, Input, Label, Select, Text, Textarea, toast } from "@medusajs/ui"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { ImageField } from "../../components/image-field"
+import { sdk } from "../../lib/client"
+
+type Texts = {
+  topbar?: string[]
+  hero?: Partial<Record<"eyebrow" | "title" | "highlight" | "sub" | "cta" | "cta2", string>> & { bubble?: string[]; image?: string }
+  promo?: Partial<Record<"eyebrow" | "title" | "text" | "cta" | "seal" | "image", string>>
+}
+
+export type Campaign = Texts & {
+  startsAt: string
+  endsAt: string
+  nextCampaign?: string
+  vars?: { discount?: string; freeShipping?: string }
+  logo?: string
+  showCountdown?: boolean
+}
+
+export type Boutique = {
+  sales_channel_id: string
+  slug: string
+  description?: string | null
+  campaign: Campaign | null
+}
+
+// datetime-local (heure locale) <-> ISO
+const toLocal = (iso?: string) => {
+  if (!iso) return ""
+  const d = new Date(iso)
+  return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16)
+}
+const fromLocal = (v: string) => new Date(v).toISOString()
+
+// Champ vide = texte du thème : on n'envoie que les champs remplis.
+const clean = <T extends Record<string, unknown>>(o: T): Partial<T> | undefined => {
+  const out = Object.fromEntries(
+    Object.entries(o).filter(([, v]) => (Array.isArray(v) ? v.some((x) => String(x).trim()) : typeof v === "string" ? v.trim() : v !== undefined))
+  ) as Partial<T>
+  return Object.keys(out).length ? out : undefined
+}
+
+/** Panneau d'édition de la campagne d'une boutique. */
+export function CampaignDrawer({
+  boutique,
+  others,
+  queryKey,
+  onClose,
+}: {
+  boutique: Boutique
+  others: string[]
+  queryKey: string[]
+  onClose: () => void
+}) {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const c = boutique.campaign
+
+  const [startsAt, setStartsAt] = useState(toLocal(c?.startsAt))
+  const [endsAt, setEndsAt] = useState(toLocal(c?.endsAt))
+  const [nextCampaign, setNextCampaign] = useState(c?.nextCampaign ?? "")
+  const [vars, setVars] = useState({ discount: c?.vars?.discount ?? "", freeShipping: c?.vars?.freeShipping ?? "" })
+  const [topbar, setTopbar] = useState<string[]>([0, 1, 2].map((i) => c?.topbar?.[i] ?? ""))
+  const [hero, setHero] = useState({
+    eyebrow: c?.hero?.eyebrow ?? "",
+    title: c?.hero?.title ?? "",
+    highlight: c?.hero?.highlight ?? "",
+    sub: c?.hero?.sub ?? "",
+    cta: c?.hero?.cta ?? "",
+    cta2: c?.hero?.cta2 ?? "",
+  })
+  const [bubble, setBubble] = useState<string[]>([0, 1, 2].map((i) => c?.hero?.bubble?.[i] ?? ""))
+  const [promo, setPromo] = useState({
+    eyebrow: c?.promo?.eyebrow ?? "",
+    title: c?.promo?.title ?? "",
+    text: c?.promo?.text ?? "",
+    cta: c?.promo?.cta ?? "",
+    seal: c?.promo?.seal ?? "",
+  })
+  const [heroImage, setHeroImage] = useState(c?.hero?.image ?? "")
+  const [promoImage, setPromoImage] = useState(c?.promo?.image ?? "")
+  const [logo, setLogo] = useState(c?.logo ?? "")
+  const [countdown, setCountdown] = useState(c?.showCountdown == null ? "theme" : c.showCountdown ? "yes" : "no")
+
+  const save = useMutation({
+    mutationFn: (body: Record<string, unknown>) =>
+      sdk.client.fetch(`/admin/boutique-campaigns/${boutique.sales_channel_id}`, { method: "POST", body }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey })
+      toast.success(t("campaigns.saved"))
+      onClose()
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  // Images et options conservées par « Réinitialiser » (seuls les textes reviennent au thème)
+  const media = () => ({
+    heroImage: heroImage || null,
+    promoImage: promoImage || null,
+    logo: logo || null,
+    showCountdown: countdown === "theme" ? null : countdown === "yes",
+  })
+
+  const dates = () => {
+    if (!startsAt || !endsAt || new Date(startsAt) >= new Date(endsAt)) {
+      toast.error(t("campaigns.errors.dates"))
+      return null
+    }
+    return { startsAt: fromLocal(startsAt), endsAt: fromLocal(endsAt) }
+  }
+
+  const submit = () => {
+    const d = dates()
+    if (!d) return
+    save.mutate({
+      ...d,
+      nextCampaign: nextCampaign || null,
+      vars: clean(vars) ?? null,
+      ...media(),
+      topbar: topbar.some((m) => m.trim()) ? topbar.filter((m) => m.trim()) : undefined,
+      hero: clean({ ...hero, bubble: bubble.some((b) => b.trim()) ? bubble : undefined }),
+      promo: clean(promo),
+    })
+  }
+
+  /** Vide tous les textes : la boutique reprend les textes par défaut de son thème (dates et visuel gardés). */
+  const reset = () => {
+    const d = dates()
+    if (!d) return
+    save.mutate({ ...d, nextCampaign: nextCampaign || null, vars: clean(vars) ?? null, ...media() }, {
+      onSuccess: () => toast.success(t("campaigns.resetDone")),
+    })
+  }
+
+  const field = (label: string, value: string, onChange: (v: string) => void, multiline = false) => (
+    <div className="flex flex-col gap-y-1">
+      <Label size="small">{label}</Label>
+      {multiline ? (
+        <Textarea value={value} onChange={(e) => onChange(e.target.value)} />
+      ) : (
+        <Input size="small" value={value} onChange={(e) => onChange(e.target.value)} />
+      )}
+    </div>
+  )
+
+  const section = (title: string, children: React.ReactNode) => (
+    <div className="flex flex-col gap-y-3">
+      <Text size="small" weight="plus" leading="compact">
+        {title}
+      </Text>
+      {children}
+    </div>
+  )
+
+  return (
+    <Drawer open onOpenChange={(open) => !open && onClose()}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>{boutique.slug}</Drawer.Title>
+          <Drawer.Description>{t("campaigns.emptyHint")}</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body className="flex flex-col gap-y-8 overflow-y-auto">
+          {section(
+            t("campaigns.sections.identity"),
+            <>
+              <ImageField label={t("campaigns.fields.logo")} value={logo} onChange={setLogo} previewClassName="h-12 w-auto object-contain p-1" />
+              <div className="flex flex-col gap-y-1">
+                <Label size="small">{t("campaigns.fields.countdown")}</Label>
+                <Select value={countdown} onValueChange={setCountdown}>
+                  <Select.Trigger>
+                    <Select.Value />
+                  </Select.Trigger>
+                  <Select.Content>
+                    <Select.Item value="theme">{t("campaigns.fields.countdownTheme")}</Select.Item>
+                    <Select.Item value="yes">{t("campaigns.fields.countdownYes")}</Select.Item>
+                    <Select.Item value="no">{t("campaigns.fields.countdownNo")}</Select.Item>
+                  </Select.Content>
+                </Select>
+              </div>
+            </>
+          )}
+
+          {section(
+            t("campaigns.sections.dates"),
+            <>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-col gap-y-1">
+                  <Label size="small">{t("campaigns.fields.startsAt")}</Label>
+                  <Input size="small" type="datetime-local" value={startsAt} onChange={(e) => setStartsAt(e.target.value)} />
+                </div>
+                <div className="flex flex-col gap-y-1">
+                  <Label size="small">{t("campaigns.fields.endsAt")}</Label>
+                  <Input size="small" type="datetime-local" value={endsAt} onChange={(e) => setEndsAt(e.target.value)} />
+                </div>
+              </div>
+              <div className="flex flex-col gap-y-1">
+                <Label size="small">{t("campaigns.fields.nextCampaign")}</Label>
+                <Select value={nextCampaign || "none"} onValueChange={(v) => setNextCampaign(v === "none" ? "" : v)}>
+                  <Select.Trigger>
+                    <Select.Value />
+                  </Select.Trigger>
+                  <Select.Content>
+                    <Select.Item value="none">{t("campaigns.fields.none")}</Select.Item>
+                    {others.map((slug) => (
+                      <Select.Item key={slug} value={slug}>
+                        {slug}
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select>
+              </div>
+            </>
+          )}
+
+          {section(
+            t("campaigns.sections.vars"),
+            <div className="grid grid-cols-2 gap-3">
+              {field(t("campaigns.fields.discount"), vars.discount, (v) => setVars({ ...vars, discount: v }))}
+              {field(t("campaigns.fields.freeShipping"), vars.freeShipping, (v) => setVars({ ...vars, freeShipping: v }))}
+            </div>
+          )}
+
+          {section(
+            t("campaigns.sections.hero"),
+            <>
+              {field(t("campaigns.fields.eyebrow"), hero.eyebrow, (v) => setHero({ ...hero, eyebrow: v }))}
+              {field(t("campaigns.fields.title"), hero.title, (v) => setHero({ ...hero, title: v }))}
+              {field(t("campaigns.fields.highlight"), hero.highlight, (v) => setHero({ ...hero, highlight: v }))}
+              {field(t("campaigns.fields.sub"), hero.sub, (v) => setHero({ ...hero, sub: v }), true)}
+              <div className="grid grid-cols-2 gap-3">
+                {field(t("campaigns.fields.cta"), hero.cta, (v) => setHero({ ...hero, cta: v }))}
+                {field(t("campaigns.fields.cta2"), hero.cta2, (v) => setHero({ ...hero, cta2: v }))}
+              </div>
+              <div className="flex flex-col gap-y-1">
+                <Label size="small">{t("campaigns.fields.bubble")}</Label>
+                <div className="grid grid-cols-3 gap-2">
+                  {bubble.map((b, i) => (
+                    <Input key={i} size="small" value={b} onChange={(e) => setBubble(bubble.map((x, j) => (j === i ? e.target.value : x)))} />
+                  ))}
+                </div>
+              </div>
+              <ImageField label={t("campaigns.fields.heroImage")} value={heroImage} onChange={setHeroImage} />
+            </>
+          )}
+
+          {section(
+            t("campaigns.sections.topbar"),
+            <>{topbar.map((m, i) => field(t("campaigns.fields.message", { n: i + 1 }), m, (v) => setTopbar(topbar.map((x, j) => (j === i ? v : x)))))}</>
+          )}
+
+          {section(
+            t("campaigns.sections.promo"),
+            <>
+              {field(t("campaigns.fields.eyebrow"), promo.eyebrow, (v) => setPromo({ ...promo, eyebrow: v }))}
+              {field(t("campaigns.fields.title"), promo.title, (v) => setPromo({ ...promo, title: v }))}
+              {field(t("campaigns.fields.text"), promo.text, (v) => setPromo({ ...promo, text: v }), true)}
+              <div className="grid grid-cols-2 gap-3">
+                {field(t("campaigns.fields.cta"), promo.cta, (v) => setPromo({ ...promo, cta: v }))}
+                {field(t("campaigns.fields.seal"), promo.seal, (v) => setPromo({ ...promo, seal: v }))}
+              </div>
+              <ImageField label={t("campaigns.fields.promoImage")} value={promoImage} onChange={setPromoImage} />
+            </>
+          )}
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Button size="small" variant="secondary" onClick={reset} disabled={save.isPending} className="mr-auto">
+            <ArrowPath />
+            {t("campaigns.reset")}
+          </Button>
+          <Drawer.Close asChild>
+            <Button size="small" variant="secondary" disabled={save.isPending}>
+              {t("campaigns.cancel")}
+            </Button>
+          </Drawer.Close>
+          <Button size="small" onClick={submit} isLoading={save.isPending} disabled={save.isPending}>
+            {t("campaigns.save")}
+          </Button>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  )
+}