@kb0912/notification-brevo 2.0.3 → 2.0.4

package/.medusa/server/src/admin/index.js

@@ -145,69 +145,6 @@ const config$1 = adminSdk.defineRouteConfig({
   label: "Email Analytics",
   icon: icons.ChartBar
 });
-const MultiSelectModal = ({
-  title,
-  options,
-  selected,
-  onClose,
-  onSave
-}) => {
-  const [search, setSearch] = react.useState("");
-  const [checked, setChecked] = react.useState(new Set(selected));
-  const filtered = options.filter(
-    (o) => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase())
-  );
-  const toggle = (val) => {
-    setChecked((prev) => {
-      const next = new Set(prev);
-      next.has(val) ? next.delete(val) : next.add(val);
-      return next;
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-2xl w-[420px] max-h-[520px] flex flex-col", onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-4 border-b", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "font-semibold text-base", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          className: "mt-2",
-          placeholder: "Search...",
-          value: search,
-          onChange: (e) => setSearch(e.target.value)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-3", children: [
-      filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle text-sm", children: "No results" }),
-      filtered.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-3 py-1.5 cursor-pointer hover:bg-ui-bg-base-hover rounded px-2 -mx-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            className: "accent-ui-fg-interactive w-4 h-4",
-            checked: checked.has(opt.value),
-            onChange: () => toggle(opt.value)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: opt.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-ui-fg-subtle font-mono ml-auto", children: opt.value.toUpperCase() })
-      ] }, opt.value))
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-3 border-t flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-xs text-ui-fg-subtle", children: [
-        checked.size,
-        " selected"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", onClick: () => {
-          onSave(Array.from(checked));
-          onClose();
-        }, children: "Apply" })
-      ] })
-    ] })
-  ] }) });
-};
 const BrevoSettingsPage = () => {
   const [settings, setSettings] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
@@ -216,6 +153,7 @@ const BrevoSettingsPage = () => {
   const [currencies, setCurrencies] = react.useState([]);
   const [countries, setCountries] = react.useState([]);
   const [modal, setModal] = react.useState(null);
+  const [drawerSearch, setDrawerSearch] = react.useState("");
   react.useEffect(() => {
     Promise.all([
       fetch("/admin/brevo-plugin-settings", { credentials: "include" }).then((r) => r.json()),
@@ -1040,16 +978,66 @@ const BrevoSettingsPage = () => {
         ] })
       ] })
     ] }) }),
-    modal && settings && /* @__PURE__ */ jsxRuntime.jsx(
-      MultiSelectModal,
-      {
-        title: modal.title,
-        options: modal.options,
-        selected: settings[modal.key] || [],
-        onClose: () => setModal(null),
-        onSave: (values) => update(modal.key, values)
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer, { open: !!modal, onOpenChange: (open) => {
+      if (!open) {
+        setModal(null);
+        setDrawerSearch("");
       }
-    )
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { children: (modal == null ? void 0 : modal.title) || "" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { className: "overflow-y-auto", children: modal && (() => {
+        const [search, setSearch] = [drawerSearch, setDrawerSearch];
+        const currentSelected = new Set((settings == null ? void 0 : settings[modal.key]) || []);
+        const filtered = modal.options.filter(
+          (o) => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase())
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              placeholder: "Search...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-0.5", children: [
+            filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle text-sm py-4 text-center", children: "No results" }),
+            filtered.map((opt) => {
+              const isChecked = currentSelected.has(opt.value);
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
+                {
+                  className: "flex items-center gap-3 py-2 px-3 cursor-pointer hover:bg-ui-bg-base-hover rounded-lg",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Checkbox,
+                      {
+                        checked: isChecked,
+                        onCheckedChange: () => {
+                          const arr = (settings == null ? void 0 : settings[modal.key]) || [];
+                          const next = isChecked ? arr.filter((c) => c !== opt.value) : [...arr, opt.value];
+                          update(modal.key, next);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm flex-1", children: opt.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-ui-fg-subtle font-mono", children: opt.value.toUpperCase() })
+                  ]
+                },
+                opt.value
+              );
+            })
+          ] })
+        ] });
+      })() }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-xs text-ui-fg-subtle", children: [
+          ((settings == null ? void 0 : settings[(modal == null ? void 0 : modal.key) || ""]) || []).length,
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: () => setModal(null), children: "Done" })
+      ] }) })
+    ] }) })
   ] });
 };
 const config = adminSdk.defineRouteConfig({

package/.medusa/server/src/admin/index.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
-import { Container, Text, Heading, Badge, Table, toast, Toaster, Button, Label, Input, Switch, Select } from "@medusajs/ui";
+import { Container, Text, Heading, Badge, Table, toast, Toaster, Button, Label, Input, Switch, Select, Drawer, Checkbox } from "@medusajs/ui";
 import { ChartBar, EnvelopeSolid } from "@medusajs/icons";
 import { useState, useEffect } from "react";
 const EVENT_LABELS = {
@@ -144,69 +144,6 @@ const config$1 = defineRouteConfig({
   label: "Email Analytics",
   icon: ChartBar
 });
-const MultiSelectModal = ({
-  title,
-  options,
-  selected,
-  onClose,
-  onSave
-}) => {
-  const [search, setSearch] = useState("");
-  const [checked, setChecked] = useState(new Set(selected));
-  const filtered = options.filter(
-    (o) => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase())
-  );
-  const toggle = (val) => {
-    setChecked((prev) => {
-      const next = new Set(prev);
-      next.has(val) ? next.delete(val) : next.add(val);
-      return next;
-    });
-  };
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-2xl w-[420px] max-h-[520px] flex flex-col", onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 border-b", children: [
-      /* @__PURE__ */ jsx(Text, { className: "font-semibold text-base", children: title }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          className: "mt-2",
-          placeholder: "Search...",
-          value: search,
-          onChange: (e) => setSearch(e.target.value)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-3", children: [
-      filtered.length === 0 && /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-sm", children: "No results" }),
-      filtered.map((opt) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 py-1.5 cursor-pointer hover:bg-ui-bg-base-hover rounded px-2 -mx-2", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            className: "accent-ui-fg-interactive w-4 h-4",
-            checked: checked.has(opt.value),
-            onChange: () => toggle(opt.value)
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm", children: opt.label }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-ui-fg-subtle font-mono ml-auto", children: opt.value.toUpperCase() })
-      ] }, opt.value))
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "px-5 py-3 border-t flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs(Text, { className: "text-xs text-ui-fg-subtle", children: [
-        checked.size,
-        " selected"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => {
-          onSave(Array.from(checked));
-          onClose();
-        }, children: "Apply" })
-      ] })
-    ] })
-  ] }) });
-};
 const BrevoSettingsPage = () => {
   const [settings, setSettings] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -215,6 +152,7 @@ const BrevoSettingsPage = () => {
   const [currencies, setCurrencies] = useState([]);
   const [countries, setCountries] = useState([]);
   const [modal, setModal] = useState(null);
+  const [drawerSearch, setDrawerSearch] = useState("");
   useEffect(() => {
     Promise.all([
       fetch("/admin/brevo-plugin-settings", { credentials: "include" }).then((r) => r.json()),
@@ -1039,16 +977,66 @@ const BrevoSettingsPage = () => {
         ] })
       ] })
     ] }) }),
-    modal && settings && /* @__PURE__ */ jsx(
-      MultiSelectModal,
-      {
-        title: modal.title,
-        options: modal.options,
-        selected: settings[modal.key] || [],
-        onClose: () => setModal(null),
-        onSave: (values) => update(modal.key, values)
+    /* @__PURE__ */ jsx(Drawer, { open: !!modal, onOpenChange: (open) => {
+      if (!open) {
+        setModal(null);
+        setDrawerSearch("");
       }
-    )
+    }, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+      /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { children: (modal == null ? void 0 : modal.title) || "" }) }),
+      /* @__PURE__ */ jsx(Drawer.Body, { className: "overflow-y-auto", children: modal && (() => {
+        const [search, setSearch] = [drawerSearch, setDrawerSearch];
+        const currentSelected = new Set((settings == null ? void 0 : settings[modal.key]) || []);
+        const filtered = modal.options.filter(
+          (o) => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase())
+        );
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Search...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-0.5", children: [
+            filtered.length === 0 && /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-sm py-4 text-center", children: "No results" }),
+            filtered.map((opt) => {
+              const isChecked = currentSelected.has(opt.value);
+              return /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: "flex items-center gap-3 py-2 px-3 cursor-pointer hover:bg-ui-bg-base-hover rounded-lg",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: isChecked,
+                        onCheckedChange: () => {
+                          const arr = (settings == null ? void 0 : settings[modal.key]) || [];
+                          const next = isChecked ? arr.filter((c) => c !== opt.value) : [...arr, opt.value];
+                          update(modal.key, next);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "text-sm flex-1", children: opt.label }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs text-ui-fg-subtle font-mono", children: opt.value.toUpperCase() })
+                  ]
+                },
+                opt.value
+              );
+            })
+          ] })
+        ] });
+      })() }),
+      /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ jsxs(Text, { className: "text-xs text-ui-fg-subtle", children: [
+          ((settings == null ? void 0 : settings[(modal == null ? void 0 : modal.key) || ""]) || []).length,
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: () => setModal(null), children: "Done" })
+      ] }) })
+    ] }) })
   ] });
 };
 const config = defineRouteConfig({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kb0912/notification-brevo",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Sending email notification using Brevo.",
   "author": "KB (https://medusajs.com)",
   "license": "MIT",