npm - @enerex/template-studio - Versions diffs - 1.1.31 → 1.1.32 - Mend

@enerex/template-studio 1.1.31 → 1.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/enerex-template-editor.es.js +376 -334
package/dist/enerex-template-editor.umd.js +3 -3
package/dist/types/utils/utility.d.ts +5 -0
package/package.json +1 -1

package/dist/enerex-template-editor.es.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { jsx as o, jsxs as S, Fragment as xe } from "react/jsx-runtime";
-import q, { useContext as se, useState as x, useRef as Se, useEffect as N } from "react";
-import { QueryClient as Ce, QueryClientProvider as Ee, useQuery as H, useMutation as ae, useQueryClient as Ie } from "@tanstack/react-query";
-import J from "axios";
-import { Spinner as Q, Form as P, Card as X, Row as _e, Col as O, Button as Z } from "react-bootstrap";
-import { Controller as Ne, useForm as Pe } from "react-hook-form";
-import ee, { components as je } from "react-select";
-const U = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+import { jsx as i, jsxs as E, Fragment as Ie } from "react/jsx-runtime";
+import L, { useContext as de, useState as v, useRef as _e, useEffect as C } from "react";
+import { QueryClient as Ne, QueryClientProvider as Pe, useQuery as z, useMutation as ce, useQueryClient as Ae } from "@tanstack/react-query";
+import ee from "axios";
+import { Spinner as Y, Form as N, Card as te, Row as je, Col as _, Button as ne } from "react-bootstrap";
+import { Controller as Oe, useForm as qe } from "react-hook-form";
+import re, { components as Le } from "react-select";
+const F = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
 <html\r
   dir="ltr"\r
   xmlns:o="urn:schemas-microsoft-com:office:office"\r
@@ -361,38 +361,38 @@ const U = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     </div>\r
   </body>\r
 </html>\r
-`, le = q.createContext(
+`, pe = L.createContext(
   void 0
-), Ae = ({
+), Re = ({
   children: e,
   configs: r
 }) => {
-  const [i, a] = q.useState(r.clientId), [n, t] = q.useState(r.apiKey), [s, d] = q.useState(
+  const [o, l] = L.useState(r.clientId), [n, t] = L.useState(r.apiKey), [s, d] = L.useState(
     r.enerexIdentifier
-  ), [p, E] = q.useState(r.projectId), T = (y) => {
-    t(y.apiKey), a(y.clientId), E(y.projectId), d(y.enerexIdentifier);
+  ), [p, x] = L.useState(r.projectId), I = (g) => {
+    t(g.apiKey), l(g.clientId), x(g.projectId), d(g.enerexIdentifier);
   };
-  return /* @__PURE__ */ o(
-    le.Provider,
+  return /* @__PURE__ */ i(
+    pe.Provider,
     {
       value: {
-        clientId: i,
+        clientId: o,
         apiKey: n,
-        setConfiguration: T,
+        setConfiguration: I,
         enerexIdentifier: s,
         projectId: p
       },
       children: e
     }
   );
-}, C = () => {
-  const e = se(le);
+}, P = () => {
+  const e = de(pe);
   if (!e)
     throw new Error("widgetConfig must be used within a ConfigProvider");
   return e;
-}, de = (e = "", r) => ({ get: async (n, t) => {
+}, me = (e = "", r) => ({ get: async (n, t) => {
   try {
-    const s = await J.get(
+    const s = await ee.get(
       `${e}${n}`,
       t ?? r
     );
@@ -403,7 +403,7 @@ const U = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   }
 }, post: async (n, t, s) => {
   try {
-    const d = await J.post(
+    const d = await ee.post(
       `${e}${n}`,
       t,
       s ?? r
@@ -413,104 +413,104 @@ const U = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   } catch (d) {
     throw d;
   }
-} }), F = {
+} }), H = {
   EDITOR_SCRIPT_URL: "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",
   EDITOR_PLUGIN_ID: "1afdc3161ec7409a8627a1c8561d45f5",
   EDITOR_SECRET_KEY: "54ba748ed7e94f2e929555783acb03da",
   API_BASE_URL: "https://dev-socket.enerex.com/common/api"
   //API_BASE_URL: "https://localhost:44338/api",
   // more env variables...
-}, ce = q.createContext({
+}, ue = L.createContext({
   get: () => {
     throw new Error("HttpClientContext.get not implemented");
   },
   post: () => {
     throw new Error("HttpClientContext.post not implemented");
   }
-}), Re = ({ children: e }) => {
-  const { clientId: r, apiKey: i } = C(), a = {
+}), De = ({ children: e }) => {
+  const { clientId: r, apiKey: o } = P(), l = {
     headers: {
       client_id: r,
-      "x-api-key": i
+      "x-api-key": o
     }
-  }, { get: n, post: t } = de(F.API_BASE_URL, a);
-  return /* @__PURE__ */ o(ce.Provider, { value: { get: n, post: t }, children: e });
-}, Oe = ({ children: e }) => {
-  const r = new Ce();
-  return /* @__PURE__ */ o(Re, { children: /* @__PURE__ */ o(Ee, { client: r, children: e }) });
-}, qe = (e) => {
-  const r = Array.from(new Set(e.map((a) => a.category))), i = [];
-  return r.forEach((a) => {
-    const n = e.filter((t) => t.category === a).map((t) => ({
+  }, { get: n, post: t } = me(H.API_BASE_URL, l);
+  return /* @__PURE__ */ i(ue.Provider, { value: { get: n, post: t }, children: e });
+}, $e = ({ children: e }) => {
+  const r = new Ne();
+  return /* @__PURE__ */ i(De, { children: /* @__PURE__ */ i(Pe, { client: r, children: e }) });
+}, ke = (e) => {
+  const r = Array.from(new Set(e.map((l) => l.category))), o = [];
+  return r.forEach((l) => {
+    const n = e.filter((t) => t.category === l).map((t) => ({
       label: t.label,
       value: t.value,
       hint: t.hint,
       hidden: t.hidden
     }));
-    i.push({ category: a, entries: n });
-  }), i;
-}, D = () => {
-  const e = se(ce);
+    o.push({ category: l, entries: n });
+  }), o;
+}, R = () => {
+  const e = de(ue);
   if (e)
     return e;
   throw new Error("useHttpClient must be used within a HttpClientProvider");
-}, L = {
+}, D = {
   Template_list: "/Template/list/",
   Template: "/Template/GetTemplate/",
   MergeTags: "/Template/TemplateMergeTags/",
   ExcludeCategory: "/Template/GetExcludeCategories/",
   SaveTemplate: "/Template/save-update/",
   TemplateTypes: "/Template/TemplateTypes/"
-}, De = () => {
-  const e = D(), { enerexIdentifier: r, projectId: i } = C();
-  return H({
+}, Be = () => {
+  const e = R(), { enerexIdentifier: r, projectId: o } = P();
+  return z({
     queryKey: ["getTemplateTags"],
     queryFn: async (n) => await e.get(
-      `${L.MergeTags}${i}/${r}`
+      `${D.MergeTags}${o}/${r}`
     )
   });
-}, Le = () => {
-  const e = D(), { enerexIdentifier: r, projectId: i } = C();
-  return H({
+}, Me = () => {
+  const e = R(), { enerexIdentifier: r, projectId: o } = P();
+  return z({
     queryKey: ["getExcludeCategory"],
     queryFn: async (n) => await e.get(
-      `${L.ExcludeCategory}${i}/${r}`
+      `${D.ExcludeCategory}${o}/${r}`
     )
   });
-}, W = Date.now().toString(36) + Math.random().toString(36).substr(2);
-console.log("uniqueId", W);
-const $e = ({
+}, J = Date.now().toString(36) + Math.random().toString(36).substr(2);
+console.log("uniqueId", J);
+const Ue = ({
   templateHTML: e,
   className: r = "",
-  loading: i = !1
+  loading: o = !1
 }) => {
-  const { post: a } = de(), { data: n } = De(), { data: t } = Le(), [s, d] = x(
-    e ?? { html: U, css: "" }
-  ), { enerexIdentifier: p, projectId: E } = C(), T = Se(null), y = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", v = "https://plugins.stripo.email/api/v1/auth";
-  N(() => {
-    (async () => (await j(), n && t && await I(F.EDITOR_SCRIPT_URL)))();
+  const { post: l } = me(), { data: n } = Be(), { data: t } = Me(), [s, d] = v(
+    e ?? { html: F, css: "" }
+  ), p = _e(null), x = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", I = "https://plugins.stripo.email/api/v1/auth";
+  C(() => {
+    (async () => (await g(), n && t && await S(H.EDITOR_SCRIPT_URL)))();
   }, [n, t]);
-  async function j() {
-    window.Zone || await new Promise((f, u) => {
-      const g = document.createElement("script");
-      g.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
-      const b = document.querySelector("script[nonce]")?.nonce;
-      b && g.setAttribute("nonce", b), g.onload = () => f(), g.onerror = () => u(new Error("Failed to load zone.js")), document.head.appendChild(g);
+  async function g() {
+    window.Zone || await new Promise((y, c) => {
+      const f = document.createElement("script");
+      f.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
+      const h = document.querySelector("script[nonce]")?.nonce;
+      h && f.setAttribute("nonce", h), f.onload = () => y(), f.onerror = () => c(new Error("Failed to load zone.js")), document.head.appendChild(f);
     });
   }
-  async function I(f) {
-    let u = document.getElementById(
+  async function S(y) {
+    let c = document.getElementById(
       "UiEditorScript"
     );
-    u || (u = document.createElement("script"), u.id = "UiEditorScript", u.src = f, u.onload = async () => {
-      await m();
-    }, document.body.appendChild(u)), await new Promise(
-      (g) => u.addEventListener("load", () => g(), { once: !0 })
+    c || (c = document.createElement("script"), c.id = "UiEditorScript", c.src = y, c.onload = async () => {
+      await A();
+    }, document.body.appendChild(c)), await new Promise(
+      (f) => c.addEventListener("load", () => f(), { once: !0 })
     );
   }
-  const m = async () => {
-    const f = T.current;
-    if (!f) {
+  const A = async () => {
+    const y = p.current;
+    if (!y) {
       console.error("Missing #stripoEditorContainer in DOM");
       return;
     }
@@ -518,45 +518,45 @@ const $e = ({
       console.error("UIEditor script not loaded or not exposing initEditor");
       return;
     }
-    const u = {
+    const c = {
       html: s.html,
       css: s.css,
       modulesExcludedCategories: t ?? [],
       forceRecreate: !0,
       metadata: {
-        emailId: W,
+        emailId: J,
         userId: "1",
         // username: userName,
-        avatarUrl: y
+        avatarUrl: x
       },
       locale: "en",
-      onTokenRefreshRequest: async (g) => {
-        const b = {
-          pluginId: F.EDITOR_PLUGIN_ID,
-          secretKey: F.EDITOR_SECRET_KEY,
-          userId: W,
+      onTokenRefreshRequest: async (f) => {
+        const h = {
+          pluginId: H.EDITOR_PLUGIN_ID,
+          secretKey: H.EDITOR_SECRET_KEY,
+          userId: J,
           role: "user"
-        }, A = await a(
-          v,
-          b
+        }, w = await l(
+          I,
+          h
         );
-        A?.token && g(A.token);
+        w?.token && f(w.token);
       },
-      mergeTags: qe(n ?? [])
+      mergeTags: ke(n ?? [])
     };
-    for (const [g, b] of Object.entries({
+    for (const [f, h] of Object.entries({
       codeEditorButtonSelector: "#codeEditor",
       undoButtonSelector: "#undoButton",
       redoButtonSelector: "#redoButton",
       mobileViewButtonSelector: "#mobileViewButton",
       desktopViewButtonSelector: "#desktopViewButton"
     }))
-      f.ownerDocument && f.getRootNode() instanceof ShadowRoot && f.getRootNode().querySelector(b) && (u[g] = b);
-    await window.UIEditor.initEditor(f, u);
+      y.ownerDocument && y.getRootNode() instanceof ShadowRoot && y.getRootNode().querySelector(h) && (c[f] = h);
+    await window.UIEditor.initEditor(y, c);
   };
-  return /* @__PURE__ */ o("div", { className: "position-relative", children: /* @__PURE__ */ S("div", { className: `editor-container ${r}`, children: [
-    i && /* @__PURE__ */ o("div", { className: "loading-overlay", children: /* @__PURE__ */ o(
-      Q,
+  return /* @__PURE__ */ i("div", { className: "position-relative", children: /* @__PURE__ */ E("div", { className: `editor-container ${r}`, children: [
+    o && /* @__PURE__ */ i("div", { className: "loading-overlay", children: /* @__PURE__ */ i(
+      Y,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
@@ -565,97 +565,114 @@ const $e = ({
         className: "me-1"
       }
     ) }),
-    /* @__PURE__ */ o("div", { id: "externalSystemContainer" }),
-    /* @__PURE__ */ o("div", { id: "stripoEditorContainer", ref: T })
+    /* @__PURE__ */ i("div", { id: "externalSystemContainer" }),
+    /* @__PURE__ */ i("div", { id: "stripoEditorContainer", ref: p })
   ] }) });
-}, te = ({
+}, ie = ({
   label: e,
   register: r,
-  validation: i,
-  required: a = !1,
+  validation: o,
+  required: l = !1,
   name: n,
   error: t,
   className: s = "",
   ...d
-}) => /* @__PURE__ */ S(P.Group, { className: s + " mb-1", children: [
-  e ? /* @__PURE__ */ S(P.Label, { className: "mb-3 d-block form-label", children: [
+}) => /* @__PURE__ */ E(N.Group, { className: s + " mb-1", children: [
+  e ? /* @__PURE__ */ E(N.Label, { className: "mb-3 d-block form-label", children: [
     e,
-    a && /* @__PURE__ */ o("label", { className: "text-danger", children: "*" })
+    l && /* @__PURE__ */ i("label", { className: "text-danger", children: "*" })
   ] }) : null,
-  /* @__PURE__ */ o(
-    P.Control,
+  /* @__PURE__ */ i(
+    N.Control,
     {
       name: n,
       type: "text",
       ...d,
       isInvalid: !!(t && t[n]),
       ...r ? r(n, {
-        ...i
+        ...o
       }) : {},
       className: `react-select__control ${t && t[n] && "border border-danger"}`
     }
   ),
-  t && t[n] ? /* @__PURE__ */ o(P.Control.Feedback, { type: "invalid", children: t[n].message }) : null
-] }), ke = () => {
-  const e = D(), { enerexIdentifier: r, projectId: i } = C();
-  return H({
+  t && t[n] ? /* @__PURE__ */ i(N.Control.Feedback, { type: "invalid", children: t[n].message }) : null
+] }), Fe = () => {
+  const e = R(), { enerexIdentifier: r, projectId: o } = P();
+  return z({
     queryKey: ["getTemplatesList"],
     queryFn: async (n) => await e.get(
-      `${L.Template_list}${i}/${r}`
+      `${D.Template_list}${o}/${r}`
     )
   });
 };
-function z(e) {
-  return e.sort((r, i) => r.name.localeCompare(i.name));
+function K(e) {
+  return e.sort((r, o) => r.name.localeCompare(o.name));
+}
+function He(e) {
+  const r = /* @__PURE__ */ new Map(), o = [];
+  e.forEach((t) => r.set(t.id, t));
+  let l = e.filter((t) => t.parent_id === 0), n = 0;
+  for (; l.length > 0; ) {
+    o.push({ level: n, data: l });
+    const t = l.map((d) => d.id);
+    l = e.filter(
+      (d) => t.includes(d.parent_id)
+    ), n++;
+  }
+  return o;
 }
-const Be = () => {
-  const e = D(), { enerexIdentifier: r, projectId: i } = C();
-  return ae({
+function Q(e, r) {
+  const l = He(e).find((n) => n.level === r);
+  return l ? l.data : [];
+}
+const ze = () => {
+  const e = R(), { enerexIdentifier: r, projectId: o } = P();
+  return ce({
     mutationKey: ["getTemplate"],
     mutationFn: async ({ id: n }) => {
       if (n)
         return await e.get(
-          `${L.Template}${r}/${n}/${i}`
+          `${D.Template}${r}/${n}/${o}`
         );
     }
   });
-}, Me = () => {
-  const e = D(), { enerexIdentifier: r, projectId: i } = C();
-  return H({
+}, Ge = () => {
+  const e = R(), { enerexIdentifier: r, projectId: o } = P();
+  return z({
     queryKey: ["getTemplateTypes"],
     queryFn: async (n) => await e.get(
-      `${L.TemplateTypes}${r}/${i}`
+      `${D.TemplateTypes}${r}/${o}`
     )
   });
 };
-function Ue(e) {
+function Ve(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var V = { exports: {} };
+var W = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var ne;
-function Fe() {
-  return ne || (ne = 1, function(e) {
+var oe;
+function Ke() {
+  return oe || (oe = 1, function(e) {
     (function() {
       var r = {}.hasOwnProperty;
-      function i() {
+      function o() {
         for (var t = "", s = 0; s < arguments.length; s++) {
           var d = arguments[s];
-          d && (t = n(t, a(d)));
+          d && (t = n(t, l(d)));
         }
         return t;
       }
-      function a(t) {
+      function l(t) {
         if (typeof t == "string" || typeof t == "number")
           return t;
         if (typeof t != "object")
           return "";
         if (Array.isArray(t))
-          return i.apply(null, t);
+          return o.apply(null, t);
         if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
           return t.toString();
         var s = "";
@@ -666,12 +683,12 @@ function Fe() {
       function n(t, s) {
         return s ? t ? t + " " + s : t + s : t;
       }
-      e.exports ? (i.default = i, e.exports = i) : window.classNames = i;
+      e.exports ? (o.default = o, e.exports = o) : window.classNames = o;
     })();
-  }(V)), V.exports;
+  }(W)), W.exports;
 }
-var He = Fe();
-const re = /* @__PURE__ */ Ue(He), oe = (e) => e.data.isSeparator ? /* @__PURE__ */ o("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ o(
+var Qe = Ke();
+const se = /* @__PURE__ */ Ve(Qe), le = (e) => e.data.isSeparator ? /* @__PURE__ */ i("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ i(
   "hr",
   {
     style: {
@@ -681,25 +698,25 @@ const re = /* @__PURE__ */ Ue(He), oe = (e) => e.data.isSeparator ? /* @__PURE__
       margin: 0
     }
   }
-) }) : /* @__PURE__ */ o(je.Option, { ...e }), ze = ({
+) }) : /* @__PURE__ */ i(Le.Option, { ...e }), We = ({
   name: e = "",
   control: r,
-  options: i,
-  multiple: a = !1,
+  options: o,
+  multiple: l = !1,
   placeholder: n,
   validation: t,
   labelKey: s = "name",
   disabled: d,
   isInvalid: p,
-  value: E,
-  onChange: T,
-  uncontrolled: y,
-  menuPlacement: v = "auto",
-  closeOnSelect: j = !0
+  value: x,
+  onChange: I,
+  uncontrolled: g,
+  menuPlacement: S = "auto",
+  closeOnSelect: A = !0
 }) => {
-  const I = {
-    control: (m) => ({
-      ...m,
+  const y = {
+    control: (c) => ({
+      ...c,
       minHeight: "33px",
       // state.isFocused can display different borderColor if you need it
       borderColor: p ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
@@ -720,247 +737,272 @@ const re = /* @__PURE__ */ Ue(He), oe = (e) => e.data.isSeparator ? /* @__PURE__
         display: "none"
       }
     }),
-    menu: (m) => ({
-      ...m,
+    menu: (c) => ({
+      ...c,
       marginTop: 0,
       width: "max-content",
       minWidth: "100%"
     }),
-    menuPortal: (m) => ({
-      ...m,
+    menuPortal: (c) => ({
+      ...c,
       zIndex: 9999
     }),
-    multiValueRemove: (m) => ({
-      ...m,
+    multiValueRemove: (c) => ({
+      ...c,
       display: d ? "none" : "block"
     })
   };
-  return y ? /* @__PURE__ */ o(
-    ee,
+  return g ? /* @__PURE__ */ i(
+    re,
     {
-      components: { Option: oe },
-      isOptionDisabled: (m) => !!m.isSeparator,
-      className: re({
+      components: { Option: le },
+      isOptionDisabled: (c) => !!c.isSeparator,
+      className: se({
         "is-invalid": p
       }),
-      styles: I,
+      styles: y,
       classNamePrefix: "react-select",
-      isMulti: a,
-      options: i,
-      onChange: T,
+      isMulti: l,
+      options: o,
+      onChange: I,
       placeholder: n,
       menuPortalTarget: document.body,
-      value: E,
-      getOptionLabel: typeof s == "string" ? (m) => m[s] : s,
-      getOptionValue: (m) => m.id,
+      value: x,
+      getOptionLabel: typeof s == "string" ? (c) => c[s] : s,
+      getOptionValue: (c) => c.id,
       isDisabled: d,
-      menuPlacement: v,
-      closeMenuOnSelect: j
+      menuPlacement: S,
+      closeMenuOnSelect: A
     }
-  ) : /* @__PURE__ */ o(
-    Ne,
+  ) : /* @__PURE__ */ i(
+    Oe,
     {
       control: r,
       name: e,
       rules: t,
-      render: ({ field: { onChange: m, value: f, onBlur: u } }) => /* @__PURE__ */ o(
-        ee,
+      render: ({ field: { onChange: c, value: f, onBlur: h } }) => /* @__PURE__ */ i(
+        re,
         {
-          components: { Option: oe },
-          isOptionDisabled: (g) => !!g.isSeparator,
-          className: re({
+          components: { Option: le },
+          isOptionDisabled: (w) => !!w.isSeparator,
+          className: se({
             "is-invalid": p
           }),
-          styles: I,
+          styles: y,
           classNamePrefix: "react-select",
-          isMulti: a,
-          options: i,
-          onBlur: u,
-          onChange: m,
+          isMulti: l,
+          options: o,
+          onBlur: h,
+          onChange: c,
           placeholder: n,
           menuPortalTarget: document.body,
           value: f,
-          getOptionLabel: typeof s == "string" ? (g) => g[s] : s,
-          getOptionValue: (g) => g.id,
+          getOptionLabel: typeof s == "string" ? (w) => w[s] : s,
+          getOptionValue: (w) => w.id,
           isDisabled: d,
-          menuPlacement: v,
-          closeMenuOnSelect: j
+          menuPlacement: S,
+          closeMenuOnSelect: A
         },
         f ? JSON.stringify(f) : "reset"
       )
     }
   );
-}, K = ({
+}, M = ({
   label: e,
   name: r,
-  validation: i,
-  control: a,
+  validation: o,
+  control: l,
   error: n,
   ...t
-}) => /* @__PURE__ */ S(P.Group, { className: "mb-1", children: [
-  e && /* @__PURE__ */ S(P.Label, { className: "mb-3 d-block form-label", children: [
+}) => /* @__PURE__ */ E(N.Group, { className: "mb-1", children: [
+  e && /* @__PURE__ */ E(N.Label, { className: "mb-3 d-block form-label", children: [
     e,
     " ",
-    t.required && /* @__PURE__ */ o("span", { className: "text-danger", children: "*" })
+    t.required && /* @__PURE__ */ i("span", { className: "text-danger", children: "*" })
   ] }),
-  /* @__PURE__ */ o(
-    ze,
+  /* @__PURE__ */ i(
+    We,
     {
-      control: a,
+      control: l,
       options: t.options ?? [],
-      validation: i,
+      validation: o,
       isInvalid: n && !!n[r],
       name: r
     }
   ),
-  n && n[r] ? /* @__PURE__ */ o(P.Control.Feedback, { type: "invalid", children: n[r].message }) : null
-] }), Ve = () => {
-  const e = D();
-  Ie();
-  const { enerexIdentifier: r, projectId: i } = C();
-  return ae({
+  n && n[r] ? /* @__PURE__ */ i(N.Control.Feedback, { type: "invalid", children: n[r].message }) : null
+] }), Ye = () => {
+  const e = R();
+  Ae();
+  const { enerexIdentifier: r, projectId: o } = P();
+  return ce({
     mutationKey: ["saveTemplate"],
-    mutationFn: async (n) => (n.enerexIdentifier = r ?? "", n.projectId = i ?? "", await e.post(
-      `${L.SaveTemplate}`,
+    mutationFn: async (n) => (n.enerexIdentifier = r ?? "", n.projectId = o ?? "", await e.post(
+      `${D.SaveTemplate}`,
       n
     ))
   });
-}, G = {
+}, U = {
   id: "",
   name: "New (Blank)"
-}, ie = {
+}, ae = {
   id: "",
   name: "Separator",
   isSeparator: !0
-}, Ke = ({
+}, Je = ({
   onSelectItem: e,
   templateLoading: r,
-  onReset: i
+  onReset: o
 }) => {
   const {
-    register: a,
+    register: l,
     handleSubmit: n,
     clearErrors: t,
     setValue: s,
     control: d,
     watch: p,
-    reset: E,
-    setError: T,
-    formState: { errors: y }
-  } = Pe({
+    reset: x,
+    setError: I,
+    formState: { errors: g }
+  } = qe({
     defaultValues: {
       templateName: "",
       subTemplateType: void 0,
+      subTemplateType2: void 0,
       subject: "",
       templateType: void 0,
-      template: G
+      template: U
     },
     mode: "onChange"
   }), {
-    data: v,
-    refetch: j,
-    isLoading: I
-  } = ke(), [m, f] = x([]), [u, g] = x(), [b, A] = x(), { mutateAsync: pe, isPending: R } = Be(), { mutateAsync: me, isPending: k } = Ve(), { data: B, isLoading: Y } = Me(), [ue, ge] = x([]), [_, M] = x([]);
-  N(() => {
-    if (B) {
-      let l = B.filter((c) => c.id != null).sort((c, w) => c.name.localeCompare(w.name));
-      ge(
-        z(l.filter((c) => c.parent_id === 0))
-      ), M(
-        z(
-          l.filter(
-            (c) => c.parent_id.toString() === `${p("templateType")?.id}`
-          )
-        )
-      );
+    data: S,
+    refetch: A,
+    isLoading: y
+  } = Fe(), [c, f] = v([]), [h, w] = v(), [k, X] = v(), { mutateAsync: fe, isPending: j } = ze(), { mutateAsync: ge, isPending: B } = Ye(), { data: $, isLoading: Z } = Ge(), [ye, he] = v([]), [O, G] = v([]), [q, be] = v([]);
+  C(() => {
+    if ($) {
+      let a = $.filter((u) => u.id != null), m = Q(a, 0);
+      he(K(m));
     }
-  }, [B]);
-  const fe = (l, c) => {
-    let w = [];
-    return l.forEach((h, $) => {
-      c.includes($) && $ !== 0 && w.push(ie), w.push(h);
-    }), w;
+  }, [$]);
+  const we = (a, m) => {
+    let u = [];
+    return a.forEach((T, b) => {
+      m.includes(b) && b !== 0 && u.push(ae), u.push(T);
+    }), u;
   };
-  N(() => {
-    r(!!R);
-  }, [R]), N(() => {
-    v?.sort((l, c) => l.readonly !== c.readonly ? (l.readonly ? 0 : 1) - (c.readonly ? 0 : 1) : l.name.localeCompare(c.name)), f(v ?? []);
-  }, [v]);
-  const ye = async (l) => {
-    g(l), l && !l.readonly ? (s("templateName", l?.name), t()) : (s("templateName", ""), s("subject", ""));
-    const c = await pe({ id: l?.id });
-    A(c || void 0);
+  C(() => {
+    r(!!j);
+  }, [j]), C(() => {
+    S?.sort((a, m) => a.readonly !== m.readonly ? (a.readonly ? 0 : 1) - (m.readonly ? 0 : 1) : a.name.localeCompare(m.name)), f(S ?? []);
+  }, [S]);
+  const Te = async (a) => {
+    w(a), a && !a.readonly ? (s("templateName", a?.name), t()) : (s("templateName", ""), s("subject", ""));
+    const m = await fe({ id: a?.id });
+    X(m || void 0);
   };
-  N(() => {
-    if (s("template", G), p("templateType")) {
-      let l = B?.filter((c) => c.id !== void 0) ?? [];
-      M(
-        z(
-          l.filter(
-            (c) => c.parent_id.toString() === `${p("templateType")?.id}`
+  C(() => {
+    if (s("template", U), p("templateType")) {
+      let a = $?.filter((u) => u.id !== void 0) ?? [], m = Q(a, 1);
+      G(
+        K(
+          m.filter(
+            (u) => u.parent_id.toString() === `${p("templateType")?.id}`
           )
         )
       ), s("subTemplateType", void 0);
     }
-  }, [p("templateType")]), N(() => {
-    let l = m.find((c) => c.id === p("template")?.id);
-    ye(l);
-  }, [p("template")]), N(() => {
-    b && u ? (e(b), s("subject", b.subject ?? "")) : e(void 0);
-  }, [b, u, e]);
-  const he = () => {
-    let l = [G], c = m.filter(
-      (h) => (h.type?.toString() === p(
-        _.length > 0 ? "subTemplateType" : "templateType"
-      )?.id.toString() || h.type === null) && p(_.length > 0 ? "subTemplateType" : "templateType")?.id != null
-    ), w = fe(c, [c.findIndex((h) => !h.readonly)]);
-    return w.length > 0 && (l.push(ie), l = [
-      ...l,
-      ...w.map((h) => ({
-        id: h.id,
-        name: h.name,
-        isSeparator: h.isSeparator
+  }, [p("templateType")]), C(() => {
+    if (s("template", U), p("subTemplateType")) {
+      let a = $?.filter((u) => u.id !== void 0) ?? [], m = Q(a, 2);
+      be(
+        K(
+          m.filter(
+            (u) => u.parent_id.toString() === `${p("subTemplateType")?.id}`
+          )
+        )
+      ), s("subTemplateType2", void 0);
+    }
+  }, [p("subTemplateType")]), C(() => {
+    let a = c.find((m) => m.id === p("template")?.id);
+    Te(a);
+  }, [p("template")]), C(() => {
+    k && h ? (e(k), s("subject", k.subject ?? "")) : e(void 0);
+  }, [k, h, e]);
+  const ve = () => {
+    let a = [U], m = "templateType";
+    q.length > 0 ? m = "subTemplateType2" : O.length > 0 && (m = "subTemplateType");
+    let u = c.filter(
+      (b) => (b.type?.toString() === p(m)?.id.toString() || b.type === null) && p(m)?.id != null
+    ), T = we(u, [u.findIndex((b) => !b.readonly)]);
+    return T.length > 0 && (a.push(ae), a = [
+      ...a,
+      ...T.map((b) => ({
+        id: b.id,
+        name: xe(u, b.id),
+        isSeparator: b.isSeparator
       }))
-    ]), l.length ? l : [];
-  }, be = (l) => {
+    ]), a.length ? a : [];
+  }, xe = (a, m) => {
+    let u = a.find((T) => T.id === m);
+    return u ? `${u.readonly ? "Default - " : "Custom - "} ${u.name}` : "";
+  }, Se = (a) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
-      async (c) => {
-        let w = l.template.id, h = "";
-        u?.readonly && (w = "", h = l.template.id);
-        let $ = m.find(
-          (ve) => ve.name === l.templateName.trim()
+      async (m) => {
+        let u = a.template.id, T = "";
+        h?.readonly && (u = "", T = a.template.id);
+        let b = c.find(
+          (Ee) => Ee.name === a.templateName.trim()
         );
-        if ($ && $.id !== w) {
-          T("templateName", {
+        if (b && b.id !== u) {
+          I("templateName", {
             type: "validate",
             message: "Template name already exists. Please choose a different name."
           });
           return;
         }
-        let we = !!(_ && _.length > 0);
-        const Te = {
+        let V = a.templateType.id;
+        q && q.length > 0 ? V = a.subTemplateType2.id : O && O.length > 0 && (V = a.subTemplateType.id);
+        const Ce = {
           enerexIdentifier: "",
           projectId: "",
-          templateId: w,
-          templateType: we ? l.subTemplateType.id : l.templateType.id,
-          name: l.templateName.trim(),
-          html: c.html,
-          css: c.css,
-          subject: l.templateType.id === "2" ? l?.subject ?? "" : "",
-          parent_id: h
+          templateId: u,
+          templateType: V,
+          name: a.templateName.trim(),
+          html: m.html,
+          css: m.css,
+          subject: a.templateType.id === "2" ? a?.subject ?? "" : "",
+          parent_id: T
         };
-        await me(Te) && (t(), E(), M([]), j());
+        await ge(Ce) && (t(), x(), G([]), A());
       }
     );
   };
-  return /* @__PURE__ */ o(X, { className: "border border-0 text-start", children: /* @__PURE__ */ o(X.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ o("form", { onSubmit: n(be), children: /* @__PURE__ */ o("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ S(_e, { children: [
-    /* @__PURE__ */ o(O, { children: /* @__PURE__ */ o(
-      K,
+  return /* @__PURE__ */ i(te, { className: "border border-0 text-start", children: /* @__PURE__ */ i(te.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ i("form", { onSubmit: n(Se), children: /* @__PURE__ */ i("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ E(je, { children: [
+    /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+      M,
+      {
+        label: "Category",
+        control: d,
+        error: g,
+        options: ye,
+        required: !0,
+        validation: {
+          required: {
+            value: !0,
+            message: "Select a category"
+          }
+        },
+        ...l("templateType")
+      }
+    ) }),
+    O && O.length > 0 && /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+      M,
       {
         label: "Type",
         control: d,
-        error: y,
-        options: ue,
+        error: g,
+        options: O,
         required: !0,
         validation: {
           required: {
@@ -968,43 +1010,43 @@ const re = /* @__PURE__ */ Ue(He), oe = (e) => e.data.isSeparator ? /* @__PURE__
             message: "Select a type"
           }
         },
-        ...a("templateType")
+        ...l("subTemplateType")
       }
     ) }),
-    _ && _.length > 0 && /* @__PURE__ */ o(O, { children: /* @__PURE__ */ o(
-      K,
+    q && q.length > 0 && /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+      M,
       {
         label: "Sub Type",
         control: d,
-        error: y,
-        options: _,
+        error: g,
+        options: q,
         required: !0,
         validation: {
           required: {
             value: !0,
-            message: "Select a type"
+            message: "Select a subtype"
           }
         },
-        ...a("subTemplateType")
+        ...l("subTemplateType2")
       }
     ) }),
-    /* @__PURE__ */ o(O, { children: /* @__PURE__ */ o(
-      K,
+    /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+      M,
       {
         label: "Template",
         control: d,
-        error: y,
-        options: he(),
+        error: g,
+        options: ve(),
         required: !1,
-        ...a("template")
+        ...l("template")
       }
     ) }),
-    /* @__PURE__ */ o(O, { children: /* @__PURE__ */ o(
-      te,
+    /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+      ie,
       {
         label: "Name",
-        register: a,
-        error: y,
+        register: l,
+        error: g,
         required: !0,
         name: "templateName",
         validation: {
@@ -1015,71 +1057,71 @@ const re = /* @__PURE__ */ Ue(He), oe = (e) => e.data.isSeparator ? /* @__PURE__
         }
       }
     ) }),
-    p("templateType")?.id === "2" && /* @__PURE__ */ o(O, { children: /* @__PURE__ */ o(
-      te,
+    p("templateType")?.id === "2" && /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+      ie,
       {
         label: "Subject",
-        register: a,
-        error: y,
+        register: l,
+        error: g,
         required: !1,
         name: "subject"
       }
     ) }),
-    /* @__PURE__ */ S(O, { className: "d-flex align-items-end justify-content-end gap-2 mb-3", children: [
-      /* @__PURE__ */ o(
-        Z,
+    /* @__PURE__ */ E(_, { className: "d-flex align-items-end justify-content-end gap-2 mb-3", children: [
+      /* @__PURE__ */ i(
+        ne,
         {
           style: { width: "70px" },
           variant: "primary",
-          disabled: I || R || k || Y,
+          disabled: y || j || B || Z,
           onClick: () => {
-            g(void 0), E(), M([]), i();
+            w(void 0), x(), G([]), o();
           },
-          children: R || k ? /* @__PURE__ */ o(
-            Q,
+          children: j || B ? /* @__PURE__ */ i(
+            Y,
             {
               animation: "border",
               style: { width: "11px", height: "11px" },
               size: "sm",
               role: "status",
               className: "me-1",
-              children: /* @__PURE__ */ o("span", { className: "visually-hidden", children: "Loading..." })
+              children: /* @__PURE__ */ i("span", { className: "visually-hidden", children: "Loading..." })
             }
           ) : "Clear"
         }
       ),
-      (p("templateType")?.id.toString() !== "2" || (p("templateType")?.id.toString() === "2" && (u?.id ?? "")) !== "") && /* @__PURE__ */ o(xe, { children: /* @__PURE__ */ o(
-        Z,
+      (p("templateType")?.id.toString() !== "2" || (p("templateType")?.id.toString() === "2" && (h?.id ?? "")) !== "") && /* @__PURE__ */ i(Ie, { children: /* @__PURE__ */ i(
+        ne,
         {
           type: "submit",
           variant: "primary",
           style: { width: "80px" },
-          disabled: I || R || k || Y,
-          children: R || k ? /* @__PURE__ */ o(
-            Q,
+          disabled: y || j || B || Z,
+          children: j || B ? /* @__PURE__ */ i(
+            Y,
             {
               animation: "border",
               style: { width: "11px", height: "11px" },
               size: "sm",
               role: "status",
               className: "me-1",
-              children: /* @__PURE__ */ o("span", { className: "visually-hidden", children: "Loading..." })
+              children: /* @__PURE__ */ i("span", { className: "visually-hidden", children: "Loading..." })
             }
-          ) : u?.readonly ? "Save as" : "Save"
+          ) : h?.readonly ? "Save as" : "Save"
         }
       ) })
     ] })
   ] }) }) }) }) });
-}, tt = ({ config: e }) => {
-  const [r, i] = x(), [a, n] = x(!1);
-  return /* @__PURE__ */ o(Ae, { configs: e, children: /* @__PURE__ */ o(Oe, { children: /* @__PURE__ */ S("div", { className: "root-widget", children: [
-    /* @__PURE__ */ o(
-      Ke,
+}, st = ({ config: e }) => {
+  const [r, o] = v(), [l, n] = v(!1);
+  return /* @__PURE__ */ i(Re, { configs: e, children: /* @__PURE__ */ i($e, { children: /* @__PURE__ */ E("div", { className: "root-widget", children: [
+    /* @__PURE__ */ i(
+      Je,
       {
         templateLoading: n,
         onSelectItem: (d) => {
-          if (i(d), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
-            let p = U;
+          if (o(d), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
+            let p = F;
             window.StripoEditorApi.actionsApi.updateHtmlAndCss(
               d?.html ?? p,
               d?.css ?? "",
@@ -1088,20 +1130,20 @@ const re = /* @__PURE__ */ Ue(He), oe = (e) => e.data.isSeparator ? /* @__PURE__
           }
         },
         onReset: () => {
-          n(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-            U,
+          n(!1), o(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+            F,
             "",
             ""
           );
         }
       }
     ),
-    /* @__PURE__ */ o(
-      $e,
+    /* @__PURE__ */ i(
+      Ue,
       {
         templateHTML: {
           css: r?.css ?? "",
-          html: r?.html ?? U
+          html: r?.html ?? F
         },
         loading: !1,
         className: "col-span-5"
@@ -1110,5 +1152,5 @@ const re = /* @__PURE__ */ Ue(He), oe = (e) => e.data.isSeparator ? /* @__PURE__
   ] }) }) });
 };
 export {
-  tt as EditorWidget
+  st as EditorWidget
 };

package/dist/enerex-template-editor.umd.js CHANGED Viewed

@@ -1,4 +1,4 @@
-(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@tanstack/react-query"),require("axios"),require("react-bootstrap"),require("react-hook-form"),require("react-select")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@tanstack/react-query","axios","react-bootstrap","react-hook-form","react-select"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.EnerexTemplateEditor={},w.jsxRuntime,w.React,w.reactQuery,w.axios,w.reactBootstrap,w.reactHookForm,w.Select$1))})(this,function(w,e,p,S,B,u,Y,H){"use strict";const L=`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+(function(v,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@tanstack/react-query"),require("axios"),require("react-bootstrap"),require("react-hook-form"),require("react-select")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@tanstack/react-query","axios","react-bootstrap","react-hook-form","react-select"],n):(v=typeof globalThis<"u"?globalThis:v||self,n(v.EnerexTemplateEditor={},v.jsxRuntime,v.React,v.reactQuery,v.axios,v.reactBootstrap,v.reactHookForm,v.Select$1))})(this,function(v,n,p,S,J,g,X,z){"use strict";const k=`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
 <html\r
   dir="ltr"\r
   xmlns:o="urn:schemas-microsoft-com:office:office"\r
@@ -354,8 +354,8 @@
     </div>\r
   </body>\r
 </html>\r
-`,J=p.createContext(void 0),se=({children:t,configs:s})=>{const[o,l]=p.useState(s.clientId),[r,n]=p.useState(s.apiKey),[i,d]=p.useState(s.enerexIdentifier),[m,_]=p.useState(s.projectId),E=b=>{n(b.apiKey),l(b.clientId),_(b.projectId),d(b.enerexIdentifier)};return e.jsx(J.Provider,{value:{clientId:o,apiKey:r,setConfiguration:E,enerexIdentifier:i,projectId:m},children:t})},C=()=>{const t=p.useContext(J);if(!t)throw new Error("widgetConfig must be used within a ConfigProvider");return t},X=(t="",s)=>({get:async(r,n)=>{try{const i=await B.get(`${t}${r}`,n??s);if(i.status===200)return i.data}catch(i){throw i}},post:async(r,n,i)=>{try{const d=await B.post(`${t}${r}`,n,i??s);if(d.status===200)return d.data}catch(d){throw d}}}),$={EDITOR_SCRIPT_URL:"https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",EDITOR_PLUGIN_ID:"1afdc3161ec7409a8627a1c8561d45f5",EDITOR_SECRET_KEY:"54ba748ed7e94f2e929555783acb03da",API_BASE_URL:"https://dev-socket.enerex.com/common/api"},Z=p.createContext({get:()=>{throw new Error("HttpClientContext.get not implemented")},post:()=>{throw new Error("HttpClientContext.post not implemented")}}),oe=({children:t})=>{const{clientId:s,apiKey:o}=C(),l={headers:{client_id:s,"x-api-key":o}},{get:r,post:n}=X($.API_BASE_URL,l);return e.jsx(Z.Provider,{value:{get:r,post:n},children:t})},ie=({children:t})=>{const s=new S.QueryClient;return e.jsx(oe,{children:e.jsx(S.QueryClientProvider,{client:s,children:t})})},le=t=>{const s=Array.from(new Set(t.map(l=>l.category))),o=[];return s.forEach(l=>{const r=t.filter(n=>n.category===l).map(n=>({label:n.label,value:n.value,hint:n.hint,hidden:n.hidden}));o.push({category:l,entries:r})}),o},j=()=>{const t=p.useContext(Z);if(t)return t;throw new Error("useHttpClient must be used within a HttpClientProvider")},P={Template_list:"/Template/list/",Template:"/Template/GetTemplate/",MergeTags:"/Template/TemplateMergeTags/",ExcludeCategory:"/Template/GetExcludeCategories/",SaveTemplate:"/Template/save-update/",TemplateTypes:"/Template/TemplateTypes/"},ae=()=>{const t=j(),{enerexIdentifier:s,projectId:o}=C();return S.useQuery({queryKey:["getTemplateTags"],queryFn:async r=>await t.get(`${P.MergeTags}${o}/${s}`)})},de=()=>{const t=j(),{enerexIdentifier:s,projectId:o}=C();return S.useQuery({queryKey:["getExcludeCategory"],queryFn:async r=>await t.get(`${P.ExcludeCategory}${o}/${s}`)})},z=Date.now().toString(36)+Math.random().toString(36).substr(2);console.log("uniqueId",z);const ce=({templateHTML:t,className:s="",loading:o=!1})=>{const{post:l}=X(),{data:r}=ae(),{data:n}=de(),[i,d]=p.useState(t??{html:L,css:""}),{enerexIdentifier:m,projectId:_}=C(),E=p.useRef(null),b="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",I="https://plugins.stripo.email/api/v1/auth";p.useEffect(()=>{(async()=>(await A(),r&&n&&await N($.EDITOR_SCRIPT_URL)))()},[r,n]);async function A(){window.Zone||await new Promise((h,g)=>{const y=document.createElement("script");y.src="https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";const v=document.querySelector("script[nonce]")?.nonce;v&&y.setAttribute("nonce",v),y.onload=()=>h(),y.onerror=()=>g(new Error("Failed to load zone.js")),document.head.appendChild(y)})}async function N(h){let g=document.getElementById("UiEditorScript");g||(g=document.createElement("script"),g.id="UiEditorScript",g.src=h,g.onload=async()=>{await f()},document.body.appendChild(g)),await new Promise(y=>g.addEventListener("load",()=>y(),{once:!0}))}const f=async()=>{const h=E.current;if(!h){console.error("Missing #stripoEditorContainer in DOM");return}if(!window.UIEditor||typeof window.UIEditor.initEditor!="function"){console.error("UIEditor script not loaded or not exposing initEditor");return}const g={html:i.html,css:i.css,modulesExcludedCategories:n??[],forceRecreate:!0,metadata:{emailId:z,userId:"1",avatarUrl:b},locale:"en",onTokenRefreshRequest:async y=>{const v={pluginId:$.EDITOR_PLUGIN_ID,secretKey:$.EDITOR_SECRET_KEY,userId:z,role:"user"},O=await l(I,v);O?.token&&y(O.token)},mergeTags:le(r??[])};for(const[y,v]of Object.entries({codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton"}))h.ownerDocument&&h.getRootNode()instanceof ShadowRoot&&h.getRootNode().querySelector(v)&&(g[y]=v);await window.UIEditor.initEditor(h,g)};return e.jsx("div",{className:"position-relative",children:e.jsxs("div",{className:`editor-container ${s}`,children:[o&&e.jsx("div",{className:"loading-overlay",children:e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1"})}),e.jsx("div",{id:"externalSystemContainer"}),e.jsx("div",{id:"stripoEditorContainer",ref:E})]})})},Q=({label:t,register:s,validation:o,required:l=!1,name:r,error:n,className:i="",...d})=>e.jsxs(u.Form.Group,{className:i+" mb-1",children:[t?e.jsxs(u.Form.Label,{className:"mb-3 d-block form-label",children:[t,l&&e.jsx("label",{className:"text-danger",children:"*"})]}):null,e.jsx(u.Form.Control,{name:r,type:"text",...d,isInvalid:!!(n&&n[r]),...s?s(r,{...o}):{},className:`react-select__control ${n&&n[r]&&"border border-danger"}`}),n&&n[r]?e.jsx(u.Form.Control.Feedback,{type:"invalid",children:n[r].message}):null]}),pe=()=>{const t=j(),{enerexIdentifier:s,projectId:o}=C();return S.useQuery({queryKey:["getTemplatesList"],queryFn:async r=>await t.get(`${P.Template_list}${o}/${s}`)})};function V(t){return t.sort((s,o)=>s.name.localeCompare(o.name))}const me=()=>{const t=j(),{enerexIdentifier:s,projectId:o}=C();return S.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:r})=>{if(r)return await t.get(`${P.Template}${s}/${r}/${o}`)}})},ue=()=>{const t=j(),{enerexIdentifier:s,projectId:o}=C();return S.useQuery({queryKey:["getTemplateTypes"],queryFn:async r=>await t.get(`${P.TemplateTypes}${s}/${o}`)})};function fe(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var K={exports:{}};/*!
+`,Z=p.createContext(void 0),ie=({children:e,configs:s})=>{const[l,i]=p.useState(s.clientId),[r,t]=p.useState(s.apiKey),[o,d]=p.useState(s.enerexIdentifier),[u,E]=p.useState(s.projectId),N=h=>{t(h.apiKey),i(h.clientId),E(h.projectId),d(h.enerexIdentifier)};return n.jsx(Z.Provider,{value:{clientId:l,apiKey:r,setConfiguration:N,enerexIdentifier:o,projectId:u},children:e})},_=()=>{const e=p.useContext(Z);if(!e)throw new Error("widgetConfig must be used within a ConfigProvider");return e},Q=(e="",s)=>({get:async(r,t)=>{try{const o=await J.get(`${e}${r}`,t??s);if(o.status===200)return o.data}catch(o){throw o}},post:async(r,t,o)=>{try{const d=await J.post(`${e}${r}`,t,o??s);if(d.status===200)return d.data}catch(d){throw d}}}),$={EDITOR_SCRIPT_URL:"https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",EDITOR_PLUGIN_ID:"1afdc3161ec7409a8627a1c8561d45f5",EDITOR_SECRET_KEY:"54ba748ed7e94f2e929555783acb03da",API_BASE_URL:"https://dev-socket.enerex.com/common/api"},R=p.createContext({get:()=>{throw new Error("HttpClientContext.get not implemented")},post:()=>{throw new Error("HttpClientContext.post not implemented")}}),ae=({children:e})=>{const{clientId:s,apiKey:l}=_(),i={headers:{client_id:s,"x-api-key":l}},{get:r,post:t}=Q($.API_BASE_URL,i);return n.jsx(R.Provider,{value:{get:r,post:t},children:e})},de=({children:e})=>{const s=new S.QueryClient;return n.jsx(ae,{children:n.jsx(S.QueryClientProvider,{client:s,children:e})})},ce=e=>{const s=Array.from(new Set(e.map(i=>i.category))),l=[];return s.forEach(i=>{const r=e.filter(t=>t.category===i).map(t=>({label:t.label,value:t.value,hint:t.hint,hidden:t.hidden}));l.push({category:i,entries:r})}),l},q=()=>{const e=p.useContext(R);if(e)return e;throw new Error("useHttpClient must be used within a HttpClientProvider")},P={Template_list:"/Template/list/",Template:"/Template/GetTemplate/",MergeTags:"/Template/TemplateMergeTags/",ExcludeCategory:"/Template/GetExcludeCategories/",SaveTemplate:"/Template/save-update/",TemplateTypes:"/Template/TemplateTypes/"},pe=()=>{const e=q(),{enerexIdentifier:s,projectId:l}=_();return S.useQuery({queryKey:["getTemplateTags"],queryFn:async r=>await e.get(`${P.MergeTags}${l}/${s}`)})},ue=()=>{const e=q(),{enerexIdentifier:s,projectId:l}=_();return S.useQuery({queryKey:["getExcludeCategory"],queryFn:async r=>await e.get(`${P.ExcludeCategory}${l}/${s}`)})},G=Date.now().toString(36)+Math.random().toString(36).substr(2);console.log("uniqueId",G);const me=({templateHTML:e,className:s="",loading:l=!1})=>{const{post:i}=Q(),{data:r}=pe(),{data:t}=ue(),[o,d]=p.useState(e??{html:k,css:""}),u=p.useRef(null),E="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",N="https://plugins.stripo.email/api/v1/auth";p.useEffect(()=>{(async()=>(await h(),r&&t&&await I($.EDITOR_SCRIPT_URL)))()},[r,t]);async function h(){window.Zone||await new Promise((b,c)=>{const y=document.createElement("script");y.src="https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";const w=document.querySelector("script[nonce]")?.nonce;w&&y.setAttribute("nonce",w),y.onload=()=>b(),y.onerror=()=>c(new Error("Failed to load zone.js")),document.head.appendChild(y)})}async function I(b){let c=document.getElementById("UiEditorScript");c||(c=document.createElement("script"),c.id="UiEditorScript",c.src=b,c.onload=async()=>{await j()},document.body.appendChild(c)),await new Promise(y=>c.addEventListener("load",()=>y(),{once:!0}))}const j=async()=>{const b=u.current;if(!b){console.error("Missing #stripoEditorContainer in DOM");return}if(!window.UIEditor||typeof window.UIEditor.initEditor!="function"){console.error("UIEditor script not loaded or not exposing initEditor");return}const c={html:o.html,css:o.css,modulesExcludedCategories:t??[],forceRecreate:!0,metadata:{emailId:G,userId:"1",avatarUrl:E},locale:"en",onTokenRefreshRequest:async y=>{const w={pluginId:$.EDITOR_PLUGIN_ID,secretKey:$.EDITOR_SECRET_KEY,userId:G,role:"user"},x=await i(N,w);x?.token&&y(x.token)},mergeTags:ce(r??[])};for(const[y,w]of Object.entries({codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton"}))b.ownerDocument&&b.getRootNode()instanceof ShadowRoot&&b.getRootNode().querySelector(w)&&(c[y]=w);await window.UIEditor.initEditor(b,c)};return n.jsx("div",{className:"position-relative",children:n.jsxs("div",{className:`editor-container ${s}`,children:[l&&n.jsx("div",{className:"loading-overlay",children:n.jsx(g.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1"})}),n.jsx("div",{id:"externalSystemContainer"}),n.jsx("div",{id:"stripoEditorContainer",ref:u})]})})},ee=({label:e,register:s,validation:l,required:i=!1,name:r,error:t,className:o="",...d})=>n.jsxs(g.Form.Group,{className:o+" mb-1",children:[e?n.jsxs(g.Form.Label,{className:"mb-3 d-block form-label",children:[e,i&&n.jsx("label",{className:"text-danger",children:"*"})]}):null,n.jsx(g.Form.Control,{name:r,type:"text",...d,isInvalid:!!(t&&t[r]),...s?s(r,{...l}):{},className:`react-select__control ${t&&t[r]&&"border border-danger"}`}),t&&t[r]?n.jsx(g.Form.Control.Feedback,{type:"invalid",children:t[r].message}):null]}),fe=()=>{const e=q(),{enerexIdentifier:s,projectId:l}=_();return S.useQuery({queryKey:["getTemplatesList"],queryFn:async r=>await e.get(`${P.Template_list}${l}/${s}`)})};function V(e){return e.sort((s,l)=>s.name.localeCompare(l.name))}function ge(e){const s=new Map,l=[];e.forEach(t=>s.set(t.id,t));let i=e.filter(t=>t.parent_id===0),r=0;for(;i.length>0;){l.push({level:r,data:i});const t=i.map(d=>d.id);i=e.filter(d=>t.includes(d.parent_id)),r++}return l}function K(e,s){const i=ge(e).find(r=>r.level===s);return i?i.data:[]}const ye=()=>{const e=q(),{enerexIdentifier:s,projectId:l}=_();return S.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:r})=>{if(r)return await e.get(`${P.Template}${s}/${r}/${l}`)}})},he=()=>{const e=q(),{enerexIdentifier:s,projectId:l}=_();return S.useQuery({queryKey:["getTemplateTypes"],queryFn:async r=>await e.get(`${P.TemplateTypes}${s}/${l}`)})};function be(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var W={exports:{}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/var R;function ge(){return R||(R=1,function(t){(function(){var s={}.hasOwnProperty;function o(){for(var n="",i=0;i<arguments.length;i++){var d=arguments[i];d&&(n=r(n,l(d)))}return n}function l(n){if(typeof n=="string"||typeof n=="number")return n;if(typeof n!="object")return"";if(Array.isArray(n))return o.apply(null,n);if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]"))return n.toString();var i="";for(var d in n)s.call(n,d)&&n[d]&&(i=r(i,d));return i}function r(n,i){return i?n?n+" "+i:n+i:n}t.exports?(o.default=o,t.exports=o):window.classNames=o})()}(K)),K.exports}var ye=ge();const ee=fe(ye),te=t=>t.data.isSeparator?e.jsx("div",{style:{padding:0,margin:"2px 0"},children:e.jsx("hr",{style:{border:0,borderTop:"1px solid #bdbdbdff",padding:0,margin:0}})}):e.jsx(H.components.Option,{...t}),he=({name:t="",control:s,options:o,multiple:l=!1,placeholder:r,validation:n,labelKey:i="name",disabled:d,isInvalid:m,value:_,onChange:E,uncontrolled:b,menuPlacement:I="auto",closeOnSelect:A=!0})=>{const N={control:f=>({...f,minHeight:"33px",borderColor:m?"var(--bs-form-invalid-border-color) !important":"var(--ct-input-border-color)",backgroundImage:m?'url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23fa5c7c%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23fa5c7c%27 stroke=%27none%27/%3e%3c/svg%3e")':"none",backgroundRepeat:"no-repeat",backgroundPosition:"right calc(0.375em + 0.225rem) center",backgroundSize:"calc(0.75em + 0.45rem) calc(0.75em + 0.45rem)","&:hover":{borderColor:m?"var(--bs-form-invalid-border-color)":"var(--ct-input-border-color)"},"& .react-select__single-value":{color:"var(--ct-input-color) !important"},"& .react-select__placeholder":{color:"var(--ct-input-placeholder-color) !important"},"& .react-select__indicators":{display:"none"}}),menu:f=>({...f,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:f=>({...f,zIndex:9999}),multiValueRemove:f=>({...f,display:d?"none":"block"})};return b?e.jsx(H,{components:{Option:te},isOptionDisabled:f=>!!f.isSeparator,className:ee({"is-invalid":m}),styles:N,classNamePrefix:"react-select",isMulti:l,options:o,onChange:E,placeholder:r,menuPortalTarget:document.body,value:_,getOptionLabel:typeof i=="string"?f=>f[i]:i,getOptionValue:f=>f.id,isDisabled:d,menuPlacement:I,closeMenuOnSelect:A}):e.jsx(Y.Controller,{control:s,name:t,rules:n,render:({field:{onChange:f,value:h,onBlur:g}})=>e.jsx(H,{components:{Option:te},isOptionDisabled:y=>!!y.isSeparator,className:ee({"is-invalid":m}),styles:N,classNamePrefix:"react-select",isMulti:l,options:o,onBlur:g,onChange:f,placeholder:r,menuPortalTarget:document.body,value:h,getOptionLabel:typeof i=="string"?y=>y[i]:i,getOptionValue:y=>y.id,isDisabled:d,menuPlacement:I,closeMenuOnSelect:A},h?JSON.stringify(h):"reset")})},G=({label:t,name:s,validation:o,control:l,error:r,...n})=>e.jsxs(u.Form.Group,{className:"mb-1",children:[t&&e.jsxs(u.Form.Label,{className:"mb-3 d-block form-label",children:[t," ",n.required&&e.jsx("span",{className:"text-danger",children:"*"})]}),e.jsx(he,{control:l,options:n.options??[],validation:o,isInvalid:r&&!!r[s],name:s}),r&&r[s]?e.jsx(u.Form.Control.Feedback,{type:"invalid",children:r[s].message}):null]}),be=()=>{const t=j();S.useQueryClient();const{enerexIdentifier:s,projectId:o}=C();return S.useMutation({mutationKey:["saveTemplate"],mutationFn:async r=>(r.enerexIdentifier=s??"",r.projectId=o??"",await t.post(`${P.SaveTemplate}`,r))})},W={id:"",name:"New (Blank)"},ne={id:"",name:"Separator",isSeparator:!0},we=({onSelectItem:t,templateLoading:s,onReset:o})=>{const{register:l,handleSubmit:r,clearErrors:n,setValue:i,control:d,watch:m,reset:_,setError:E,formState:{errors:b}}=Y.useForm({defaultValues:{templateName:"",subTemplateType:void 0,subject:"",templateType:void 0,template:W},mode:"onChange"}),{data:I,refetch:A,isLoading:N}=pe(),[f,h]=p.useState([]),[g,y]=p.useState(),[v,O]=p.useState(),{mutateAsync:ve,isPending:D}=me(),{mutateAsync:xe,isPending:F}=be(),{data:M,isLoading:re}=ue(),[Se,Ce]=p.useState([]),[q,U]=p.useState([]);p.useEffect(()=>{if(M){let a=M.filter(c=>c.id!=null).sort((c,x)=>c.name.localeCompare(x.name));Ce(V(a.filter(c=>c.parent_id===0))),U(V(a.filter(c=>c.parent_id.toString()===`${m("templateType")?.id}`)))}},[M]);const Ee=(a,c)=>{let x=[];return a.forEach((T,k)=>{c.includes(k)&&k!==0&&x.push(ne),x.push(T)}),x};p.useEffect(()=>{s(!!D)},[D]),p.useEffect(()=>{I?.sort((a,c)=>a.readonly!==c.readonly?(a.readonly?0:1)-(c.readonly?0:1):a.name.localeCompare(c.name)),h(I??[])},[I]);const Ie=async a=>{y(a),a&&!a.readonly?(i("templateName",a?.name),n()):(i("templateName",""),i("subject",""));const c=await ve({id:a?.id});O(c||void 0)};p.useEffect(()=>{if(i("template",W),m("templateType")){let a=M?.filter(c=>c.id!==void 0)??[];U(V(a.filter(c=>c.parent_id.toString()===`${m("templateType")?.id}`))),i("subTemplateType",void 0)}},[m("templateType")]),p.useEffect(()=>{let a=f.find(c=>c.id===m("template")?.id);Ie(a)},[m("template")]),p.useEffect(()=>{v&&g?(t(v),i("subject",v.subject??"")):t(void 0)},[v,g,t]);const _e=()=>{let a=[W],c=f.filter(T=>(T.type?.toString()===m(q.length>0?"subTemplateType":"templateType")?.id.toString()||T.type===null)&&m(q.length>0?"subTemplateType":"templateType")?.id!=null),x=Ee(c,[c.findIndex(T=>!T.readonly)]);return x.length>0&&(a.push(ne),a=[...a,...x.map(T=>({id:T.id,name:T.name,isSeparator:T.isSeparator}))]),a.length?a:[]},Ne=a=>{window.StripoEditorApi.actionsApi.getTemplateData(async c=>{let x=a.template.id,T="";g?.readonly&&(x="",T=a.template.id);let k=f.find(Pe=>Pe.name===a.templateName.trim());if(k&&k.id!==x){E("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let qe=!!(q&&q.length>0);const je={enerexIdentifier:"",projectId:"",templateId:x,templateType:qe?a.subTemplateType.id:a.templateType.id,name:a.templateName.trim(),html:c.html,css:c.css,subject:a.templateType.id==="2"?a?.subject??"":"",parent_id:T};await xe(je)&&(n(),_(),U([]),A())})};return e.jsx(u.Card,{className:"border border-0 text-start",children:e.jsx(u.Card.Body,{className:"pe-0 ps-2",children:e.jsx("form",{onSubmit:r(Ne),children:e.jsx("div",{className:"template-list-container gap-3",children:e.jsxs(u.Row,{children:[e.jsx(u.Col,{children:e.jsx(G,{label:"Type",control:d,error:b,options:Se,required:!0,validation:{required:{value:!0,message:"Select a type"}},...l("templateType")})}),q&&q.length>0&&e.jsx(u.Col,{children:e.jsx(G,{label:"Sub Type",control:d,error:b,options:q,required:!0,validation:{required:{value:!0,message:"Select a type"}},...l("subTemplateType")})}),e.jsx(u.Col,{children:e.jsx(G,{label:"Template",control:d,error:b,options:_e(),required:!1,...l("template")})}),e.jsx(u.Col,{children:e.jsx(Q,{label:"Name",register:l,error:b,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}})}),m("templateType")?.id==="2"&&e.jsx(u.Col,{children:e.jsx(Q,{label:"Subject",register:l,error:b,required:!1,name:"subject"})}),e.jsxs(u.Col,{className:"d-flex align-items-end justify-content-end gap-2 mb-3",children:[e.jsx(u.Button,{style:{width:"70px"},variant:"primary",disabled:N||D||F||re,onClick:()=>{y(void 0),_(),U([]),o()},children:D||F?e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Clear"}),(m("templateType")?.id.toString()!=="2"||(m("templateType")?.id.toString()==="2"&&(g?.id??""))!=="")&&e.jsx(e.Fragment,{children:e.jsx(u.Button,{type:"submit",variant:"primary",style:{width:"80px"},disabled:N||D||F||re,children:D||F?e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})}):g?.readonly?"Save as":"Save"})})]})]})})})})})},Te=({config:t})=>{const[s,o]=p.useState(),[l,r]=p.useState(!1),n=d=>{if(o(d),window.StripoEditorApi&&window.StripoEditorApi.actionsApi){let m=L;window.StripoEditorApi.actionsApi.updateHtmlAndCss(d?.html??m,d?.css??"","")}},i=()=>{r(!1),o(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(L,"","")};return e.jsx(se,{configs:t,children:e.jsx(ie,{children:e.jsxs("div",{className:"root-widget",children:[e.jsx(we,{templateLoading:r,onSelectItem:n,onReset:i}),e.jsx(ce,{templateHTML:{css:s?.css??"",html:s?.html??L},loading:!1,className:"col-span-5"})]})})})};w.EditorWidget=Te,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+*/var te;function we(){return te||(te=1,function(e){(function(){var s={}.hasOwnProperty;function l(){for(var t="",o=0;o<arguments.length;o++){var d=arguments[o];d&&(t=r(t,i(d)))}return t}function i(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return l.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var o="";for(var d in t)s.call(t,d)&&t[d]&&(o=r(o,d));return o}function r(t,o){return o?t?t+" "+o:t+o:t}e.exports?(l.default=l,e.exports=l):window.classNames=l})()}(W)),W.exports}var Te=we();const ne=be(Te),re=e=>e.data.isSeparator?n.jsx("div",{style:{padding:0,margin:"2px 0"},children:n.jsx("hr",{style:{border:0,borderTop:"1px solid #bdbdbdff",padding:0,margin:0}})}):n.jsx(z.components.Option,{...e}),ve=({name:e="",control:s,options:l,multiple:i=!1,placeholder:r,validation:t,labelKey:o="name",disabled:d,isInvalid:u,value:E,onChange:N,uncontrolled:h,menuPlacement:I="auto",closeOnSelect:j=!0})=>{const b={control:c=>({...c,minHeight:"33px",borderColor:u?"var(--bs-form-invalid-border-color) !important":"var(--ct-input-border-color)",backgroundImage:u?'url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23fa5c7c%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23fa5c7c%27 stroke=%27none%27/%3e%3c/svg%3e")':"none",backgroundRepeat:"no-repeat",backgroundPosition:"right calc(0.375em + 0.225rem) center",backgroundSize:"calc(0.75em + 0.45rem) calc(0.75em + 0.45rem)","&:hover":{borderColor:u?"var(--bs-form-invalid-border-color)":"var(--ct-input-border-color)"},"& .react-select__single-value":{color:"var(--ct-input-color) !important"},"& .react-select__placeholder":{color:"var(--ct-input-placeholder-color) !important"},"& .react-select__indicators":{display:"none"}}),menu:c=>({...c,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:c=>({...c,zIndex:9999}),multiValueRemove:c=>({...c,display:d?"none":"block"})};return h?n.jsx(z,{components:{Option:re},isOptionDisabled:c=>!!c.isSeparator,className:ne({"is-invalid":u}),styles:b,classNamePrefix:"react-select",isMulti:i,options:l,onChange:N,placeholder:r,menuPortalTarget:document.body,value:E,getOptionLabel:typeof o=="string"?c=>c[o]:o,getOptionValue:c=>c.id,isDisabled:d,menuPlacement:I,closeMenuOnSelect:j}):n.jsx(X.Controller,{control:s,name:e,rules:t,render:({field:{onChange:c,value:y,onBlur:w}})=>n.jsx(z,{components:{Option:re},isOptionDisabled:x=>!!x.isSeparator,className:ne({"is-invalid":u}),styles:b,classNamePrefix:"react-select",isMulti:i,options:l,onBlur:w,onChange:c,placeholder:r,menuPortalTarget:document.body,value:y,getOptionLabel:typeof o=="string"?x=>x[o]:o,getOptionValue:x=>x.id,isDisabled:d,menuPlacement:I,closeMenuOnSelect:j},y?JSON.stringify(y):"reset")})},M=({label:e,name:s,validation:l,control:i,error:r,...t})=>n.jsxs(g.Form.Group,{className:"mb-1",children:[e&&n.jsxs(g.Form.Label,{className:"mb-3 d-block form-label",children:[e," ",t.required&&n.jsx("span",{className:"text-danger",children:"*"})]}),n.jsx(ve,{control:i,options:t.options??[],validation:l,isInvalid:r&&!!r[s],name:s}),r&&r[s]?n.jsx(g.Form.Control.Feedback,{type:"invalid",children:r[s].message}):null]}),xe=()=>{const e=q();S.useQueryClient();const{enerexIdentifier:s,projectId:l}=_();return S.useMutation({mutationKey:["saveTemplate"],mutationFn:async r=>(r.enerexIdentifier=s??"",r.projectId=l??"",await e.post(`${P.SaveTemplate}`,r))})},F={id:"",name:"New (Blank)"},se={id:"",name:"Separator",isSeparator:!0},Se=({onSelectItem:e,templateLoading:s,onReset:l})=>{const{register:i,handleSubmit:r,clearErrors:t,setValue:o,control:d,watch:u,reset:E,setError:N,formState:{errors:h}}=X.useForm({defaultValues:{templateName:"",subTemplateType:void 0,subTemplateType2:void 0,subject:"",templateType:void 0,template:F},mode:"onChange"}),{data:I,refetch:j,isLoading:b}=fe(),[c,y]=p.useState([]),[w,x]=p.useState(),[U,le]=p.useState(),{mutateAsync:Ee,isPending:A}=ye(),{mutateAsync:Ie,isPending:H}=xe(),{data:D,isLoading:oe}=he(),[_e,Ne]=p.useState([]),[O,B]=p.useState([]),[L,qe]=p.useState([]);p.useEffect(()=>{if(D){let a=D.filter(f=>f.id!=null),m=K(a,0);Ne(V(m))}},[D]);const Pe=(a,m)=>{let f=[];return a.forEach((C,T)=>{m.includes(T)&&T!==0&&f.push(se),f.push(C)}),f};p.useEffect(()=>{s(!!A)},[A]),p.useEffect(()=>{I?.sort((a,m)=>a.readonly!==m.readonly?(a.readonly?0:1)-(m.readonly?0:1):a.name.localeCompare(m.name)),y(I??[])},[I]);const je=async a=>{x(a),a&&!a.readonly?(o("templateName",a?.name),t()):(o("templateName",""),o("subject",""));const m=await Ee({id:a?.id});le(m||void 0)};p.useEffect(()=>{if(o("template",F),u("templateType")){let a=D?.filter(f=>f.id!==void 0)??[],m=K(a,1);B(V(m.filter(f=>f.parent_id.toString()===`${u("templateType")?.id}`))),o("subTemplateType",void 0)}},[u("templateType")]),p.useEffect(()=>{if(o("template",F),u("subTemplateType")){let a=D?.filter(f=>f.id!==void 0)??[],m=K(a,2);qe(V(m.filter(f=>f.parent_id.toString()===`${u("subTemplateType")?.id}`))),o("subTemplateType2",void 0)}},[u("subTemplateType")]),p.useEffect(()=>{let a=c.find(m=>m.id===u("template")?.id);je(a)},[u("template")]),p.useEffect(()=>{U&&w?(e(U),o("subject",U.subject??"")):e(void 0)},[U,w,e]);const Ae=()=>{let a=[F],m="templateType";L.length>0?m="subTemplateType2":O.length>0&&(m="subTemplateType");let f=c.filter(T=>(T.type?.toString()===u(m)?.id.toString()||T.type===null)&&u(m)?.id!=null),C=Pe(f,[f.findIndex(T=>!T.readonly)]);return C.length>0&&(a.push(se),a=[...a,...C.map(T=>({id:T.id,name:Oe(f,T.id),isSeparator:T.isSeparator}))]),a.length?a:[]},Oe=(a,m)=>{let f=a.find(C=>C.id===m);return f?`${f.readonly?"Default - ":"Custom - "} ${f.name}`:""},Le=a=>{window.StripoEditorApi.actionsApi.getTemplateData(async m=>{let f=a.template.id,C="";w?.readonly&&(f="",C=a.template.id);let T=c.find(ke=>ke.name===a.templateName.trim());if(T&&T.id!==f){N("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let Y=a.templateType.id;L&&L.length>0?Y=a.subTemplateType2.id:O&&O.length>0&&(Y=a.subTemplateType.id);const De={enerexIdentifier:"",projectId:"",templateId:f,templateType:Y,name:a.templateName.trim(),html:m.html,css:m.css,subject:a.templateType.id==="2"?a?.subject??"":"",parent_id:C};await Ie(De)&&(t(),E(),B([]),j())})};return n.jsx(g.Card,{className:"border border-0 text-start",children:n.jsx(g.Card.Body,{className:"pe-0 ps-2",children:n.jsx("form",{onSubmit:r(Le),children:n.jsx("div",{className:"template-list-container gap-3",children:n.jsxs(g.Row,{children:[n.jsx(g.Col,{children:n.jsx(M,{label:"Category",control:d,error:h,options:_e,required:!0,validation:{required:{value:!0,message:"Select a category"}},...i("templateType")})}),O&&O.length>0&&n.jsx(g.Col,{children:n.jsx(M,{label:"Type",control:d,error:h,options:O,required:!0,validation:{required:{value:!0,message:"Select a type"}},...i("subTemplateType")})}),L&&L.length>0&&n.jsx(g.Col,{children:n.jsx(M,{label:"Sub Type",control:d,error:h,options:L,required:!0,validation:{required:{value:!0,message:"Select a subtype"}},...i("subTemplateType2")})}),n.jsx(g.Col,{children:n.jsx(M,{label:"Template",control:d,error:h,options:Ae(),required:!1,...i("template")})}),n.jsx(g.Col,{children:n.jsx(ee,{label:"Name",register:i,error:h,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}})}),u("templateType")?.id==="2"&&n.jsx(g.Col,{children:n.jsx(ee,{label:"Subject",register:i,error:h,required:!1,name:"subject"})}),n.jsxs(g.Col,{className:"d-flex align-items-end justify-content-end gap-2 mb-3",children:[n.jsx(g.Button,{style:{width:"70px"},variant:"primary",disabled:b||A||H||oe,onClick:()=>{x(void 0),E(),B([]),l()},children:A||H?n.jsx(g.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Clear"}),(u("templateType")?.id.toString()!=="2"||(u("templateType")?.id.toString()==="2"&&(w?.id??""))!=="")&&n.jsx(n.Fragment,{children:n.jsx(g.Button,{type:"submit",variant:"primary",style:{width:"80px"},disabled:b||A||H||oe,children:A||H?n.jsx(g.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):w?.readonly?"Save as":"Save"})})]})]})})})})})},Ce=({config:e})=>{const[s,l]=p.useState(),[i,r]=p.useState(!1),t=d=>{if(l(d),window.StripoEditorApi&&window.StripoEditorApi.actionsApi){let u=k;window.StripoEditorApi.actionsApi.updateHtmlAndCss(d?.html??u,d?.css??"","")}},o=()=>{r(!1),l(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(k,"","")};return n.jsx(ie,{configs:e,children:n.jsx(de,{children:n.jsxs("div",{className:"root-widget",children:[n.jsx(Se,{templateLoading:r,onSelectItem:t,onReset:o}),n.jsx(me,{templateHTML:{css:s?.css??"",html:s?.html??k},loading:!1,className:"col-span-5"})]})})})};v.EditorWidget=Ce,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/dist/types/utils/utility.d.ts CHANGED Viewed

@@ -2,3 +2,8 @@ import type { ITemplateTypes } from "../queries/types";
 export declare const generateFileName: (originalName: string, existingNames?: string[]) => string;
 export declare function toReactSelectMixed(data: ITemplateTypes[]): any[];
 export declare function sortingTemplateTypeByName(list: ITemplateTypes[]): ITemplateTypes[];
+export declare function groupBy(array: any[]): {
+    level: number;
+    data: any[];
+}[];
+export declare function groupByLevel(array: any[], level: number): any[];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@enerex/template-studio",
-  "version": "1.1.31",
+  "version": "1.1.32",
   "main": "./dist/enerex-template-editor.umd.js",
   "module": "./dist/enerex-template-editor.es.js",
   "types": "./dist/types/index.d.ts",