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

@enerex/template-studio 1.1.32 → 1.1.34

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 (6) hide show

package/dist/enerex-template-editor.es.js +272 -271
package/dist/enerex-template-editor.umd.js +3 -3
package/dist/template-studio.css +1 -1
package/dist/types/context/configuration-provider.d.ts +1 -0
package/dist/types/queries/types.d.ts +1 -0
package/package.json +1 -1

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

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

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

@@ -1,4 +1,4 @@
-(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
+(function(w,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):(w=typeof globalThis<"u"?globalThis:w||self,n(w.EnerexTemplateEditor={},w.jsxRuntime,w.React,w.reactQuery,w.axios,w.reactBootstrap,w.reactHookForm,w.Select$1))})(this,function(w,n,p,E,J,g,X,z){"use strict";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
@@ -354,8 +354,8 @@
     </div>\r
   </body>\r
 </html>\r
-`,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:{}};/*!
+`,Z=p.createContext(void 0),oe=({children:e,configs:s})=>{const[i,o]=p.useState(s.clientId),[r,t]=p.useState(s.apiKey),[l,d]=p.useState(s.enerexIdentifier),[m,C]=p.useState(s.projectId),[q,v]=p.useState(s.userEmail),S=x=>{t(x.apiKey),o(x.clientId),C(x.projectId),d(x.enerexIdentifier),v(x.userEmail)};return n.jsx(Z.Provider,{value:{clientId:i,apiKey:r,setConfiguration:S,enerexIdentifier:l,projectId:m,userEmail:q},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 l=await J.get(`${e}${r}`,t??s);if(l.status===200)return l.data}catch(l){throw l}},post:async(r,t,l)=>{try{const d=await J.post(`${e}${r}`,t,l??s);if(d.status===200)return d.data}catch(d){throw d}}}),M={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:i}=_(),o={headers:{client_id:s,"x-api-key":i}},{get:r,post:t}=Q(M.API_BASE_URL,o);return n.jsx(R.Provider,{value:{get:r,post:t},children:e})},de=({children:e})=>{const s=new E.QueryClient;return n.jsx(ae,{children:n.jsx(E.QueryClientProvider,{client:s,children:e})})},ce=e=>{const s=Array.from(new Set(e.map(o=>o.category))),i=[];return s.forEach(o=>{const r=e.filter(t=>t.category===o).map(t=>({label:t.label,value:t.value,hint:t.hint,hidden:t.hidden}));i.push({category:o,entries:r})}),i},j=()=>{const e=p.useContext(R);if(e)return e;throw new Error("useHttpClient must be used within a HttpClientProvider")},A={Template_list:"/Template/list/",Template:"/Template/GetTemplate/",MergeTags:"/Template/TemplateMergeTags/",ExcludeCategory:"/Template/GetExcludeCategories/",SaveTemplate:"/Template/save-update/",TemplateTypes:"/Template/TemplateTypes/"},pe=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getTemplateTags"],queryFn:async r=>await e.get(`${A.MergeTags}${i}/${s}`)})},me=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getExcludeCategory"],queryFn:async r=>await e.get(`${A.ExcludeCategory}${i}/${s}`)})},ue=({templateHTML:e,className:s="",loading:i=!1})=>{const{post:o}=Q(),{data:r}=pe(),{data:t}=me(),[l,d]=p.useState(e??{html:F,css:""}),{userEmail:m}=_(),C=p.useRef(null),q="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",v="https://plugins.stripo.email/api/v1/auth";p.useEffect(()=>{(async()=>(await S(),r&&t&&await x(M.EDITOR_SCRIPT_URL)))()},[r,t]);async function S(){window.Zone||await new Promise((c,h)=>{const y=document.createElement("script");y.src="https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";const b=document.querySelector("script[nonce]")?.nonce;b&&y.setAttribute("nonce",b),y.onload=()=>c(),y.onerror=()=>h(new Error("Failed to load zone.js")),document.head.appendChild(y)})}async function x(c){let h=document.getElementById("UiEditorScript");h||(h=document.createElement("script"),h.id="UiEditorScript",h.src=c,h.onload=async()=>{await P()},document.body.appendChild(h)),await new Promise(y=>h.addEventListener("load",()=>y(),{once:!0}))}const P=async()=>{const c=C.current;if(!c){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 h={html:l.html,css:l.css,modulesExcludedCategories:t??[],forceRecreate:!0,metadata:{emailId:m,userId:"1",avatarUrl:q},locale:"en",onTokenRefreshRequest:async y=>{const b={pluginId:M.EDITOR_PLUGIN_ID,secretKey:M.EDITOR_SECRET_KEY,userId:m,role:"user"},N=await o(v,b);N?.token&&y(N.token)},mergeTags:ce(r??[])};for(const[y,b]of Object.entries({codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton"}))c.ownerDocument&&c.getRootNode()instanceof ShadowRoot&&c.getRootNode().querySelector(b)&&(h[y]=b);await window.UIEditor.initEditor(c,h)};return n.jsx("div",{className:"position-relative",children:n.jsxs("div",{className:`editor-container ${s}`,children:[i&&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:C})]})})},ee=({label:e,register:s,validation:i,required:o=!1,name:r,error:t,className:l="",...d})=>n.jsxs(g.Form.Group,{className:l+" mb-1",children:[e?n.jsxs(g.Form.Label,{className:"mb-3 d-block form-label",children:[e,o&&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,{...i}):{},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=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getTemplatesList"],queryFn:async r=>await e.get(`${A.Template_list}${i}/${s}`)})};function G(e){return e.sort((s,i)=>s.name.localeCompare(i.name))}function ge(e){const s=new Map,i=[];e.forEach(t=>s.set(t.id,t));let o=e.filter(t=>t.parent_id===0),r=0;for(;o.length>0;){i.push({level:r,data:o});const t=o.map(d=>d.id);o=e.filter(d=>t.includes(d.parent_id)),r++}return i}function V(e,s){const o=ge(e).find(r=>r.level===s);return o?o.data:[]}const ye=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:r})=>{if(r)return await e.get(`${A.Template}${s}/${r}/${i}`)}})},he=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getTemplateTypes"],queryFn:async r=>await e.get(`${A.TemplateTypes}${s}/${i}`)})};function be(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var K={exports:{}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/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"})});
+*/var te;function Te(){return te||(te=1,function(e){(function(){var s={}.hasOwnProperty;function i(){for(var t="",l=0;l<arguments.length;l++){var d=arguments[l];d&&(t=r(t,o(d)))}return t}function o(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return i.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var l="";for(var d in t)s.call(t,d)&&t[d]&&(l=r(l,d));return l}function r(t,l){return l?t?t+" "+l:t+l:t}e.exports?(i.default=i,e.exports=i):window.classNames=i})()}(K)),K.exports}var we=Te();const ne=be(we),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:i,multiple:o=!1,placeholder:r,validation:t,labelKey:l="name",disabled:d,isInvalid:m,value:C,onChange:q,uncontrolled:v,menuPlacement:S="auto",closeOnSelect:x=!0})=>{const P={control:c=>({...c,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:c=>({...c,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:c=>({...c,zIndex:9999}),multiValueRemove:c=>({...c,display:d?"none":"block"})};return v?n.jsx(z,{components:{Option:re},isOptionDisabled:c=>!!c.isSeparator,className:ne({"is-invalid":m}),styles:P,classNamePrefix:"react-select",isMulti:o,options:i,onChange:q,placeholder:r,menuPortalTarget:document.body,value:C,getOptionLabel:typeof l=="string"?c=>c[l]:l,getOptionValue:c=>c.id,isDisabled:d,menuPlacement:S,closeMenuOnSelect:x}):n.jsx(X.Controller,{control:s,name:e,rules:t,render:({field:{onChange:c,value:h,onBlur:y}})=>n.jsx(z,{components:{Option:re},isOptionDisabled:b=>!!b.isSeparator,className:ne({"is-invalid":m}),styles:P,classNamePrefix:"react-select",isMulti:o,options:i,onBlur:y,onChange:c,placeholder:r,menuPortalTarget:document.body,value:h,getOptionLabel:typeof l=="string"?b=>b[l]:l,getOptionValue:b=>b.id,isDisabled:d,menuPlacement:S,closeMenuOnSelect:x},h?JSON.stringify(h):"reset")})},U=({label:e,name:s,validation:i,control:o,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:o,options:t.options??[],validation:i,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=j();E.useQueryClient();const{enerexIdentifier:s,projectId:i}=_();return E.useMutation({mutationKey:["saveTemplate"],mutationFn:async r=>(r.enerexIdentifier=s??"",r.projectId=i??"",await e.post(`${A.SaveTemplate}`,r))})},k={id:"",name:"New (Blank)"},se={id:"",name:"Separator",isSeparator:!0},Se=({onSelectItem:e,templateLoading:s,onReset:i})=>{const{register:o,handleSubmit:r,clearErrors:t,setValue:l,control:d,watch:m,reset:C,setError:q,formState:{errors:v}}=X.useForm({defaultValues:{templateName:"",subTemplateType:void 0,subTemplateType2:void 0,subject:"",templateType:void 0,template:k},mode:"onChange"}),{data:S,refetch:x,isLoading:P}=fe(),[c,h]=p.useState([]),[y,b]=p.useState(),[N,le]=p.useState(),{mutateAsync:Ce,isPending:O}=ye(),{mutateAsync:Ie,isPending:H}=xe(),{data:$,isLoading:ie}=he(),[_e,Ne]=p.useState([]),[L,W]=p.useState([]),[D,B]=p.useState([]);p.useEffect(()=>{if($){let a=$.filter(f=>f.id!=null),u=V(a,0);Ne(G(u))}},[$]);const qe=(a,u)=>{let f=[];return a.forEach((I,T)=>{u.includes(T)&&T!==0&&f.push(se),f.push(I)}),f};p.useEffect(()=>{s(!!O)},[O]),p.useEffect(()=>{S?.sort((a,u)=>a.readonly!==u.readonly?(a.readonly?0:1)-(u.readonly?0:1):a.name.localeCompare(u.name)),h(S??[])},[S]);const Pe=async a=>{b(a),a&&!a.readonly?(l("templateName",a?.name),t()):(l("templateName",""),l("subject",""));const u=await Ce({id:a?.id});le(u||void 0)};p.useEffect(()=>{if(l("template",k),m("templateType")){let a=$?.filter(f=>f.id!==void 0)??[],u=V(a,1);W(G(u.filter(f=>f.parent_id.toString()===`${m("templateType")?.id}`))),l("subTemplateType",void 0),l("subTemplateType2",void 0)}},[m("templateType")]),p.useEffect(()=>{if(l("template",k),m("subTemplateType")){let a=$?.filter(f=>f.id!==void 0)??[],u=V(a,2);B(G(u.filter(f=>f.parent_id.toString()===`${m("subTemplateType")?.id}`))),l("subTemplateType2",void 0)}},[m("subTemplateType")]),p.useEffect(()=>{l("template",k)},[m("subTemplateType2")]),p.useEffect(()=>{let a=c.find(u=>u.id===m("template")?.id);Pe(a)},[m("template")]),p.useEffect(()=>{N&&y?(e(N),l("subject",N.subject??"")):e(void 0)},[N,y,e]);const je=()=>{let a=[k],u="templateType";D.length>0?u="subTemplateType2":L.length>0&&(u="subTemplateType");let f=c.filter(T=>(T.type?.toString()===m(u)?.id.toString()||T.type===null)&&m(u)?.id!=null),I=qe(f,[f.findIndex(T=>!T.readonly)]);return I.length>0&&(a.push(se),a=[...a,...I.map(T=>({id:T.id,name:Ae(f,T.id),isSeparator:T.isSeparator}))]),a.length?a:[]},Ae=(a,u)=>{let f=a.find(I=>I.id===u);return f?`${f.displayName}`:""},Oe=a=>{window.StripoEditorApi.actionsApi.getTemplateData(async u=>{let f=a.template.id,I="";y?.readonly&&(f="",I=a.template.id);let T=c.find(De=>De.name===a.templateName.trim());if(T&&T.id!==f){q("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let Y=a.templateType.id;D&&D.length>0?Y=a.subTemplateType2.id:L&&L.length>0&&(Y=a.subTemplateType.id);const Le={enerexIdentifier:"",projectId:"",templateId:f,templateType:Y,name:a.templateName.trim(),html:u.html,css:u.css,subject:a.templateType.id==="2"?a?.subject??"":"",parent_id:I};await Ie(Le)&&(t(),C(),W([]),B([]),x())})};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(Oe),children:n.jsx("div",{className:"template-list-container gap-3",children:n.jsxs(g.Row,{children:[n.jsx(g.Col,{children:n.jsx(U,{label:"Category",control:d,error:v,options:_e,required:!0,validation:{required:{value:!0,message:"Select a category"}},...o("templateType")})}),L&&L.length>0&&n.jsx(g.Col,{children:n.jsx(U,{label:"Type",control:d,error:v,options:L,required:!0,validation:{required:{value:!0,message:"Select a type"}},...o("subTemplateType")})}),D&&D.length>0&&n.jsx(g.Col,{children:n.jsx(U,{label:"Sub Type",control:d,error:v,options:D,required:!0,validation:{required:{value:!0,message:"Select a subtype"}},...o("subTemplateType2")})}),n.jsx(g.Col,{children:n.jsx(U,{label:"Template",control:d,error:v,options:je(),required:!1,...o("template")})}),n.jsx(g.Col,{children:n.jsx(ee,{label:"Name",register:o,error:v,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}})}),m("templateType")?.id==="2"&&n.jsx(g.Col,{children:n.jsx(ee,{label:"Subject",register:o,error:v,required:!1,name:"subject"})}),n.jsxs(g.Col,{className:"d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding",children:[n.jsx(g.Button,{style:{width:"70px"},variant:"primary",disabled:P||O||H||ie,onClick:()=>{b(void 0),C(),W([]),B([]),i()},children:O||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"}),(m("templateType")?.id.toString()!=="2"||(m("templateType")?.id.toString()==="2"&&(y?.id??""))!=="")&&n.jsx(n.Fragment,{children:n.jsx(g.Button,{type:"submit",variant:"primary",style:{width:"80px"},disabled:P||O||H||ie,children:O||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..."})}):y?.readonly?"Save as":"Save"})})]})]})})})})})},Ee=({config:e})=>{const[s,i]=p.useState(),[o,r]=p.useState(!1),t=d=>{if(i(d),window.StripoEditorApi&&window.StripoEditorApi.actionsApi){let m=F;window.StripoEditorApi.actionsApi.updateHtmlAndCss(d?.html??m,d?.css??"","")}},l=()=>{r(!1),i(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(F,"","")};return n.jsx(oe,{configs:e,children:n.jsx(de,{children:n.jsxs("div",{className:"root-widget",children:[n.jsx(Se,{templateLoading:r,onSelectItem:t,onReset:l}),n.jsx(ue,{templateHTML:{css:s?.css??"",html:s?.html??F},loading:!1,className:"col-span-5"})]})})})};w.EditorWidget=Ee,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/dist/template-studio.css CHANGED Viewed

	@@ -1 +1 @@
1	- .root-widget{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;-moz-osx-font-smoothing:grayscale;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}.root-widget code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.root-widget .ng-star-inserted{display:none}.root-widget .wraped-text{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.root-widget .required:after{content:" *";color:#fa5c7c}.root-widget button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}.root-widget button:hover{border-color:#646cff}.root-widget button:focus,.root-widget button:focus-visible{outline:4px auto -webkit-focus-ring-color}.root-widget .loader-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}.root-widget .info-icon{height:14px}.root-widget .info-icon img{width:100%;height:100%}.dark-popover{left:50%;transform:translate(-50%) translateY(-8px);z-index:9999;width:50px!important;font-size:.85rem!important;padding:.5rem;background-color:#1e1e1e!important;color:#f1f1f1;border:1px solid #444}.dark-popover.bs-popover-top>.popover-arrow:before,.dark-popover.bs-popover-bottom>.popover-arrow:before,.dark-popover.bs-popover-left>.popover-arrow:before,.dark-popover.bs-popover-right>.popover-arrow:before{border-color:transparent!important}.dark-popover.bs-popover-top>.popover-arrow:after{border-top-color:#1e1e1e!important}.dark-popover.bs-popover-bottom>.popover-arrow:after{border-bottom-color:#1e1e1e!important}.dark-popover.bs-popover-left>.popover-arrow:after{border-left-color:#1e1e1e!important}.dark-popover.bs-popover-right>.popover-arrow:after{border-right-color:#1e1e1e!important}.template-list-container{max-height:350px;overflow-y:auto}.react-select__control--is-focused{border-color:var(--ct-input-border-color)!important;box-shadow:none!important}.react-select__option{color:var(--ct-input-color)!important;background-color:#fff!important}.react-select__option:hover,.react-select__option--is-focused,.react-select__option--is-selected{color:var(--ct-input-color)!important;background-color:#deebff!important}.root-widget label{font-weight:600!important}.root-widget input{padding-block:1px!important;padding-inline:2px!important}.root-widget .form-control{display:block!important;outline:none!important;box-shadow:none!important;width:100%!important;~~padding:.45rem .9rem!important;~~font-~~size:.9rem!important;font-~~weight:400!important;line-height:1.5!important;color:var(--ct-input-color)!important;background-color:var(--ct-input-bg)!important;background-clip:padding-box!important;border:1px solid var(--ct-input-border-color)!important;appearance:none!important;border-radius:.25rem!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.root-widget .btn{--bs-btn-padding-x: ~~.9rem~~ !important;--bs-btn-padding-y: ~~.25rem~~ !important;--bs-btn-font-size: .9rem !important;--bs-btn-font-weight: 400 !important;--bs-btn-line-height: 1.5 !important;--bs-btn-color: #6c757d !important;--bs-btn-bg: transparent !important;--bs-btn-border-width: 1px !important;--bs-btn-border-color: transparent !important;--bs-btn-border-radius: .15rem !important;--bs-btn-hover-border-color: transparent !important;--bs-btn-box-shadow: 0px 2px 6px 0px !important;--bs-btn-disabled-opacity: .65 !important;--bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-btn-focus-shadow-rgb), .5) !important;display:inline-block!important;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x)!important;font-family:var(--bs-btn-font-family)!important;font-size:var(--bs-btn-font-size)!important;font-weight:var(--bs-btn-font-weight)!important;line-height:var(--bs-btn-line-height)!important;color:var(--bs-btn-color)!important;text-align:center!important;vertical-align:middle!important;cursor:pointer!important;-webkit-user-select:none!important;user-select:none!important;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color)!important;border-radius:var(--bs-btn-border-radius)!important;background-color:var(--bs-btn-bg)!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.root-widget .btn-primary{--bs-btn-color: #fff !important;--bs-btn-bg: #131c45 !important;--bs-btn-border-color: #131c45 !important;--bs-btn-hover-color: #fff !important;--bs-btn-hover-bg: #10183b !important;--bs-btn-hover-border-color: #0f1637 !important;--bs-btn-focus-shadow-rgb: 54, 62, 97 !important;--bs-btn-active-color: #fff !important;--bs-btn-active-bg: #0f1637 !important;--bs-btn-active-border-color: #0e1534 !important;--bs-btn-active-shadow: var(--ct-btn-active-box-shadow) !important;--bs-btn-disabled-color: #fff !important;--bs-btn-disabled-bg: #131c45 !important;--bs-btn-disabled-border-color: #131c45 !important}.root-widget .logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.root-widget .logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.root-widget .logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.root-widget .requiredField:after{content:"";font-family:FontAwesome;position:absolute;left:10px;top:10px;color:red}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.root-widget .card{padding:.3em}.root-widget .read-the-docs{color:#888}.root-widget .row{margin:0!important}.root-widget{--ct-input-border-color: #ced4da !important}#stripoEditorContainer{height:calc(100% + -0px)}.editor-container{height:100vh;position:absolute;min-width:1200px;width:100%;overflow:auto}.root-widget .loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffc;display:flex;justify-content:center;align-items:center;z-index:1000}
1	+ .root-widget{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;-moz-osx-font-smoothing:grayscale;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}.root-widget code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.root-widget .ng-star-inserted{display:none}.root-widget .wraped-text{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.root-widget .required:after{content:" *";color:#fa5c7c}.root-widget button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}.root-widget button:hover{border-color:#646cff}.root-widget button:focus,.root-widget button:focus-visible{outline:4px auto -webkit-focus-ring-color}.root-widget .loader-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}.root-widget .info-icon{height:14px}.root-widget .info-icon img{width:100%;height:100%}.dark-popover{left:50%;transform:translate(-50%) translateY(-8px);z-index:9999;width:50px!important;font-size:.85rem!important;padding:.5rem;background-color:#1e1e1e!important;color:#f1f1f1;border:1px solid #444}.dark-popover.bs-popover-top>.popover-arrow:before,.dark-popover.bs-popover-bottom>.popover-arrow:before,.dark-popover.bs-popover-left>.popover-arrow:before,.dark-popover.bs-popover-right>.popover-arrow:before{border-color:transparent!important}.dark-popover.bs-popover-top>.popover-arrow:after{border-top-color:#1e1e1e!important}.dark-popover.bs-popover-bottom>.popover-arrow:after{border-bottom-color:#1e1e1e!important}.dark-popover.bs-popover-left>.popover-arrow:after{border-left-color:#1e1e1e!important}.dark-popover.bs-popover-right>.popover-arrow:after{border-right-color:#1e1e1e!important}.template-list-container{max-height:350px;overflow-y:auto}.react-select__control--is-focused{border-color:var(--ct-input-border-color)!important;box-shadow:none!important}.react-select__option{color:var(--ct-input-color)!important;background-color:#fff!important}.react-select__option:hover,.react-select__option--is-focused,.react-select__option--is-selected{color:var(--ct-input-color)!important;background-color:#deebff!important}.root-widget label{font-weight:600!important}.root-widget input{padding-block:1px!important;padding-inline:2px!important}.root-widget .form-control{display:block!important;min-height:33px;outline:none!important;box-shadow:none!important;width:100%!important;font-weight:400!important;line-height:1.5!important;color:var(--ct-input-color)!important;background-color:var(--ct-input-bg)!important;background-clip:padding-box!important;border:1px solid var(--ct-input-border-color)!important;appearance:none!important;border-radius:.25rem!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.root-widget .btn{--bs-btn-padding-x: 12px !important;--bs-btn-padding-y: 5px !important;--bs-btn-font-size: .9rem !important;--bs-btn-font-weight: 400 !important;--bs-btn-line-height: 1.5 !important;--bs-btn-color: #6c757d !important;--bs-btn-bg: transparent !important;--bs-btn-border-width: 1px !important;--bs-btn-border-color: transparent !important;--bs-btn-border-radius: .15rem !important;--bs-btn-hover-border-color: transparent !important;--bs-btn-box-shadow: 0px 2px 6px 0px !important;--bs-btn-disabled-opacity: .65 !important;--bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-btn-focus-shadow-rgb), .5) !important;display:inline-block!important;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x)!important;font-family:var(--bs-btn-font-family)!important;font-size:var(--bs-btn-font-size)!important;font-weight:var(--bs-btn-font-weight)!important;line-height:var(--bs-btn-line-height)!important;color:var(--bs-btn-color)!important;text-align:center!important;vertical-align:middle!important;cursor:pointer!important;-webkit-user-select:none!important;user-select:none!important;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color)!important;border-radius:var(--bs-btn-border-radius)!important;background-color:var(--bs-btn-bg)!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.root-widget .btn-primary{--bs-btn-color: #fff !important;--bs-btn-bg: #131c45 !important;--bs-btn-border-color: #131c45 !important;--bs-btn-hover-color: #fff !important;--bs-btn-hover-bg: #10183b !important;--bs-btn-hover-border-color: #0f1637 !important;--bs-btn-focus-shadow-rgb: 54, 62, 97 !important;--bs-btn-active-color: #fff !important;--bs-btn-active-bg: #0f1637 !important;--bs-btn-active-border-color: #0e1534 !important;--bs-btn-active-shadow: var(--ct-btn-active-box-shadow) !important;--bs-btn-disabled-color: #fff !important;--bs-btn-disabled-bg: #131c45 !important;--bs-btn-disabled-border-color: #131c45 !important}.root-widget .logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.root-widget .logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.root-widget .logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.root-widget .requiredField:after{content:"";font-family:FontAwesome;position:absolute;left:10px;top:10px;color:red}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.root-widget .card{padding:.3em}.root-widget .read-the-docs{color:#888}.root-widget .row{margin:0!important}.root-widget{--ct-input-border-color: #ced4da !important}.root-widget .btn-padding{padding-top:40px}#stripoEditorContainer{height:calc(100% + -0px)}.editor-container{height:100vh;position:absolute;min-width:1200px;width:100%;overflow:auto}.root-widget .loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffc;display:flex;justify-content:center;align-items:center;z-index:1000}

package/dist/types/context/configuration-provider.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export interface IConfigSettings {
     apiKey: string;
     enerexIdentifier?: string;
     projectId?: string;
+    userEmail?: string;
 }
 interface ConfigProvidersProp extends SingleChildProp {
     configs: IConfigSettings;

package/dist/types/queries/types.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export type InputTemplatesList = {
 export type ITemplatesList = {
     id: string;
     name: string;
+    displayName: string;
     type: number;
     projectId: number;
     readonly: boolean;

package/package.json CHANGED Viewed

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