npm - @enerex/template-studio - Versions diffs - 1.1.22 → 1.1.24 - Mend

@enerex/template-studio 1.1.22 → 1.1.24

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 +238 -253
package/dist/enerex-template-editor.umd.js +3 -3
package/dist/types/queries/types.d.ts +2 -0
package/package.json +1 -1

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

@@ -1,11 +1,11 @@
-import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import I, { useContext as ee, useState as S, useEffect as _ } from "react";
-import { QueryClient as pe, QueryClientProvider as me, useQuery as O, useMutation as te, useQueryClient as ue } from "@tanstack/react-query";
+import { jsx as s, jsxs as v } from "react/jsx-runtime";
+import I, { useContext as J, useState as S, useEffect as C } from "react";
+import { QueryClient as ce, QueryClientProvider as pe, useQuery as q, useMutation as Z, useQueryClient as me } from "@tanstack/react-query";
 import V from "axios";
-import { Spinner as U, Form as E, Card as K, Row as z, Col as $, Button as G } from "react-bootstrap";
+import { Spinner as B, Form as E, Card as K, Row as ue, Col as P, Button as z } from "react-bootstrap";
 import { Controller as ge, useForm as fe } from "react-hook-form";
-import Q from "react-select";
-const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+import G from "react-select";
+const R = `<!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,7 +361,7 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     </div>\r
   </body>\r
 </html>\r
-`, ne = I.createContext(
+`, ee = I.createContext(
   void 0
 ), ye = ({
   children: t,
@@ -369,29 +369,29 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
 }) => {
   const [i, l] = I.useState(r.clientId), [n, e] = I.useState(r.apiKey), [a, o] = I.useState(
     r.enerexIdentifier
-  ), [p, h] = I.useState(r.userName), [f, b] = I.useState(r.projectId), w = (m) => {
-    e(m.apiKey), l(m.clientId), b(m.projectId), o(m.enerexIdentifier), h(m.userName);
+  ), [c, y] = I.useState(r.userName), [f, h] = I.useState(r.projectId), b = (m) => {
+    e(m.apiKey), l(m.clientId), h(m.projectId), o(m.enerexIdentifier), y(m.userName);
   };
   return /* @__PURE__ */ s(
-    ne.Provider,
+    ee.Provider,
     {
       value: {
         clientId: i,
         apiKey: n,
-        setConfiguration: w,
+        setConfiguration: b,
         enerexIdentifier: a,
         projectId: f,
-        userName: p
+        userName: c
       },
       children: t
     }
   );
-}, v = () => {
-  const t = ee(ne);
+}, T = () => {
+  const t = J(ee);
   if (!t)
     throw new Error("widgetConfig must be used within a ConfigProvider");
   return t;
-}, re = (t = "", r) => ({ get: async (n, e) => {
+}, te = (t = "", r) => ({ get: async (n, e) => {
   try {
     const a = await V.get(
       `${t}${n}`,
@@ -414,14 +414,14 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   } catch (o) {
     throw o;
   }
-} }), k = {
+} }), $ = {
   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...
-}, se = I.createContext({
+}, ne = I.createContext({
   get: () => {
     throw new Error("HttpClientContext.get not implemented");
   },
@@ -429,16 +429,16 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     throw new Error("HttpClientContext.post not implemented");
   }
 }), he = ({ children: t }) => {
-  const { clientId: r, apiKey: i } = v(), l = {
+  const { clientId: r, apiKey: i } = T(), l = {
     headers: {
       client_id: r,
       "x-api-key": i
     }
-  }, { get: n, post: e } = re(k.API_BASE_URL, l);
-  return /* @__PURE__ */ s(se.Provider, { value: { get: n, post: e }, children: t });
+  }, { get: n, post: e } = te($.API_BASE_URL, l);
+  return /* @__PURE__ */ s(ne.Provider, { value: { get: n, post: e }, children: t });
 }, be = ({ children: t }) => {
-  const r = new pe();
-  return /* @__PURE__ */ s(he, { children: /* @__PURE__ */ s(me, { client: r, children: t }) });
+  const r = new ce();
+  return /* @__PURE__ */ s(he, { children: /* @__PURE__ */ s(pe, { client: r, children: t }) });
 }, we = (t) => {
   const r = Array.from(new Set(t.map((l) => l.category))), i = [];
   return r.forEach((l) => {
@@ -450,12 +450,12 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     }));
     i.push({ category: l, entries: n });
   }), i;
-}, A = () => {
-  const t = ee(se);
+}, _ = () => {
+  const t = J(ne);
   if (t)
     return t;
   throw new Error("useHttpClient must be used within a HttpClientProvider");
-}, P = {
+}, A = {
   Template_list: "/Template/list/",
   Template: "/Template/GetTemplate/",
   MergeTags: "/Template/TemplateMergeTags/",
@@ -463,19 +463,19 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   SaveTemplate: "/Template/save-update/",
   TemplateTypes: "/Template/TemplateTypes/"
 }, ve = () => {
-  const t = A(), { enerexIdentifier: r, projectId: i } = v();
-  return O({
+  const t = _(), { enerexIdentifier: r, projectId: i } = T();
+  return q({
     queryKey: ["getTemplateTags"],
     queryFn: async (n) => await t.get(
-      `${P.MergeTags}${i}/${r}`
+      `${A.MergeTags}${i}/${r}`
     )
   });
 }, Te = () => {
-  const t = A(), { enerexIdentifier: r, projectId: i } = v();
-  return O({
+  const t = _(), { enerexIdentifier: r, projectId: i } = T();
+  return q({
     queryKey: ["getExcludeCategory"],
     queryFn: async (n) => await t.get(
-      `${P.ExcludeCategory}${i}/${r}`
+      `${A.ExcludeCategory}${i}/${r}`
     )
   });
 }, xe = ({
@@ -483,13 +483,13 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   className: r = "",
   loading: i = !1
 }) => {
-  const { post: l } = re(), { data: n } = ve(), { data: e } = Te(), [a, o] = S(
-    t ?? { html: D, css: "" }
-  ), { enerexIdentifier: p, projectId: h, userName: f } = v(), b = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", w = "https://plugins.stripo.email/api/v1/auth";
-  _(() => {
+  const { post: l } = te(), { data: n } = ve(), { data: e } = Te(), [a, o] = S(
+    t ?? { html: R, css: "" }
+  ), { enerexIdentifier: c, projectId: y, userName: f } = T(), h = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", b = "https://plugins.stripo.email/api/v1/auth";
+  C(() => {
     if (n && e && !document.getElementById("UiEditorScript")) {
       const u = document.createElement("script");
-      u.id = "UiEditorScript", u.type = "module", u.src = k.EDITOR_SCRIPT_URL, u.onload = m, document.body.appendChild(u);
+      u.id = "UiEditorScript", u.type = "module", u.src = $.EDITOR_SCRIPT_URL, u.onload = m, document.body.appendChild(u);
     }
   }, [n, e]);
   const m = async () => {
@@ -501,19 +501,19 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
         modulesExcludedCategories: e ?? [],
         forceRecreate: !0,
         metadata: {
-          emailId: `${h}_${p}`,
+          emailId: `${y}_${c}`,
           userId: "1",
           username: f,
-          avatarUrl: b
+          avatarUrl: h
         },
         locale: "en",
         onTokenRefreshRequest: async function(u) {
-          const c = {
-            pluginId: k.EDITOR_PLUGIN_ID,
-            secretKey: k.EDITOR_SECRET_KEY,
+          const p = {
+            pluginId: $.EDITOR_PLUGIN_ID,
+            secretKey: $.EDITOR_SECRET_KEY,
             userId: "12",
             role: "user"
-          }, g = await l(w, c);
+          }, g = await l(b, p);
           g && u(g.token);
         },
         codeEditorButtonSelector: "#codeEditor",
@@ -525,9 +525,9 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
       }
     );
   };
-  return /* @__PURE__ */ s("div", { className: "position-relative", children: /* @__PURE__ */ y("div", { className: `editor-container ${r}`, children: [
+  return /* @__PURE__ */ s("div", { className: "position-relative", children: /* @__PURE__ */ v("div", { className: `editor-container ${r}`, children: [
     i && /* @__PURE__ */ s("div", { className: "loading-overlay", children: /* @__PURE__ */ s(
-      U,
+      B,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
@@ -539,7 +539,7 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     /* @__PURE__ */ s("div", { id: "externalSystemContainer" }),
     /* @__PURE__ */ s("div", { id: "stripoEditorContainer" })
   ] }) });
-}, W = ({
+}, Q = ({
   label: t,
   register: r,
   validation: i,
@@ -548,8 +548,8 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   error: e,
   className: a = "",
   ...o
-}) => /* @__PURE__ */ y(E.Group, { className: a + " mb-1", children: [
-  t ? /* @__PURE__ */ y(E.Label, { className: "mb-3 d-block form-label", children: [
+}) => /* @__PURE__ */ v(E.Group, { className: a + " mb-1", children: [
+  t ? /* @__PURE__ */ v(E.Label, { className: "mb-3 d-block form-label", children: [
     t,
     l && /* @__PURE__ */ s("label", { className: "text-danger", children: "*" })
   ] }) : null,
@@ -568,45 +568,45 @@ const D = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   ),
   e && e[n] ? /* @__PURE__ */ s(E.Control.Feedback, { type: "invalid", children: e[n].message }) : null
 ] }), Ce = () => {
-  const t = A(), { enerexIdentifier: r, projectId: i } = v();
-  return O({
+  const t = _(), { enerexIdentifier: r, projectId: i } = T();
+  return q({
     queryKey: ["getTemplatesList"],
     queryFn: async (n) => await t.get(
-      `${P.Template_list}${i}/${r}`
+      `${A.Template_list}${i}/${r}`
     )
   });
 }, Ie = () => {
-  const t = A(), { enerexIdentifier: r, projectId: i } = v();
-  return te({
+  const t = _(), { enerexIdentifier: r, projectId: i } = T();
+  return Z({
     mutationKey: ["getTemplate"],
     mutationFn: async ({ id: n }) => {
       if (n)
         return await t.get(
-          `${P.Template}${r}/${n}/${i}`
+          `${A.Template}${r}/${n}/${i}`
         );
     }
   });
 }, Se = () => {
-  const t = A(), { enerexIdentifier: r, projectId: i } = v();
-  return O({
+  const t = _(), { enerexIdentifier: r, projectId: i } = T();
+  return q({
     queryKey: ["getTemplateTypes"],
     queryFn: async (n) => await t.get(
-      `${P.TemplateTypes}${r}/${i}`
+      `${A.TemplateTypes}${r}/${i}`
     )
   });
 };
 function Ee(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var B = { exports: {} };
+var k = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var Y;
+var W;
 function Ne() {
-  return Y || (Y = 1, function(t) {
+  return W || (W = 1, function(t) {
     (function() {
       var r = {}.hasOwnProperty;
       function i() {
@@ -635,10 +635,10 @@ function Ne() {
       }
       t.exports ? (i.default = i, t.exports = i) : window.classNames = i;
     })();
-  }(B)), B.exports;
+  }(k)), k.exports;
 }
 var _e = Ne();
-const X = /* @__PURE__ */ Ee(_e), Ae = ({
+const Y = /* @__PURE__ */ Ee(_e), Ae = ({
   name: t = "",
   control: r,
   options: i,
@@ -647,25 +647,25 @@ const X = /* @__PURE__ */ Ee(_e), Ae = ({
   validation: e,
   labelKey: a = "name",
   disabled: o,
-  isInvalid: p,
-  value: h,
+  isInvalid: c,
+  value: y,
   onChange: f,
-  uncontrolled: b,
-  menuPlacement: w = "auto",
+  uncontrolled: h,
+  menuPlacement: b = "auto",
   closeOnSelect: m = !0
 }) => {
   const u = {
-    control: (c) => ({
-      ...c,
+    control: (p) => ({
+      ...p,
       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)",
-      backgroundImage: p ? '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",
+      borderColor: c ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
+      backgroundImage: c ? '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: p ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
+        borderColor: c ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
       },
       "& .react-select__single-value": {
         color: "var(--ct-input-color) !important"
@@ -677,26 +677,26 @@ const X = /* @__PURE__ */ Ee(_e), Ae = ({
         display: "none"
       }
     }),
-    menu: (c) => ({
-      ...c,
+    menu: (p) => ({
+      ...p,
       marginTop: 0,
       width: "max-content",
       minWidth: "100%"
     }),
-    menuPortal: (c) => ({
-      ...c,
+    menuPortal: (p) => ({
+      ...p,
       zIndex: 9999
     }),
-    multiValueRemove: (c) => ({
-      ...c,
+    multiValueRemove: (p) => ({
+      ...p,
       display: o ? "none" : "block"
     })
   };
-  return b ? /* @__PURE__ */ s(
-    Q,
+  return h ? /* @__PURE__ */ s(
+    G,
     {
-      className: X({
-        "is-invalid": p
+      className: Y({
+        "is-invalid": c
       }),
       styles: u,
       classNamePrefix: "react-select",
@@ -705,11 +705,11 @@ const X = /* @__PURE__ */ Ee(_e), Ae = ({
       onChange: f,
       placeholder: n,
       menuPortalTarget: document.body,
-      value: h,
-      getOptionLabel: typeof a == "string" ? (c) => c[a] : a,
-      getOptionValue: (c) => c.id,
+      value: y,
+      getOptionLabel: typeof a == "string" ? (p) => p[a] : a,
+      getOptionValue: (p) => p.id,
       isDisabled: o,
-      menuPlacement: w,
+      menuPlacement: b,
       closeMenuOnSelect: m
     }
   ) : /* @__PURE__ */ s(
@@ -718,40 +718,40 @@ const X = /* @__PURE__ */ Ee(_e), Ae = ({
       control: r,
       name: t,
       rules: e,
-      render: ({ field: { onChange: c, value: g, onBlur: q } }) => /* @__PURE__ */ s(
-        Q,
+      render: ({ field: { onChange: p, value: g, onBlur: j } }) => /* @__PURE__ */ s(
+        G,
         {
-          className: X({
-            "is-invalid": p
+          className: Y({
+            "is-invalid": c
           }),
           styles: u,
           classNamePrefix: "react-select",
           isMulti: l,
           options: i,
-          onBlur: q,
-          onChange: c,
+          onBlur: j,
+          onChange: p,
           placeholder: n,
           menuPortalTarget: document.body,
           value: g,
-          getOptionLabel: typeof a == "string" ? (T) => T[a] : a,
-          getOptionValue: (T) => T.id,
+          getOptionLabel: typeof a == "string" ? (w) => w[a] : a,
+          getOptionValue: (w) => w.id,
           isDisabled: o,
-          menuPlacement: w,
+          menuPlacement: b,
           closeMenuOnSelect: m
         },
         g ? JSON.stringify(g) : "reset"
       )
     }
   );
-}, J = ({
+}, X = ({
   label: t,
   name: r,
   validation: i,
   control: l,
   error: n,
   ...e
-}) => /* @__PURE__ */ y(E.Group, { className: "mb-1", children: [
-  t && /* @__PURE__ */ y(E.Label, { className: "mb-3 d-block form-label", children: [
+}) => /* @__PURE__ */ v(E.Group, { className: "mb-1", children: [
+  t && /* @__PURE__ */ v(E.Label, { className: "mb-3 d-block form-label", children: [
     t,
     " ",
     e.required && /* @__PURE__ */ s("span", { className: "text-danger", children: "*" })
@@ -768,17 +768,17 @@ const X = /* @__PURE__ */ Ee(_e), Ae = ({
   ),
   n && n[r] ? /* @__PURE__ */ s(E.Control.Feedback, { type: "invalid", children: n[r].message }) : null
 ] }), Pe = () => {
-  const t = A();
-  ue();
-  const { enerexIdentifier: r, projectId: i } = v();
-  return te({
+  const t = _();
+  me();
+  const { enerexIdentifier: r, projectId: i } = T();
+  return Z({
     mutationKey: ["saveTemplate"],
     mutationFn: async (n) => (n.enerexIdentifier = r ?? "", n.projectId = i ?? "", await t.post(
-      `${P.SaveTemplate}`,
+      `${A.SaveTemplate}`,
       n
     ))
   });
-}, Z = { id: "", name: "New (Blank)" }, je = ({
+}, O = { id: "", name: "New (Blank)" }, je = ({
   onSelectItem: t,
   templateLoading: r,
   onReset: i
@@ -789,206 +789,191 @@ const X = /* @__PURE__ */ Ee(_e), Ae = ({
     clearErrors: e,
     setValue: a,
     control: o,
-    watch: p,
-    reset: h,
+    watch: c,
+    reset: y,
     formState: { errors: f }
   } = fe({
     defaultValues: {
       templateName: "",
       subject: "",
       templateType: void 0,
-      template: Z
+      template: O
     },
     mode: "onChange"
   }), {
-    data: b,
-    refetch: w,
+    data: h,
+    refetch: b,
     isLoading: m
-  } = Ce(), [u, c] = S([]), [g, q] = S(), [T, H] = S(), { mutateAsync: ie, isPending: N } = Ie(), { mutateAsync: ae, isPending: L } = Pe(), { data: j, isLoading: M } = Se(), [F, le] = S([]);
-  _(() => {
-    j && le(
-      j.filter((d) => d.id !== void 0).map((d) => ({
+  } = Ce(), [u, p] = S([]), [g, j] = S(), [w, U] = S(), { mutateAsync: re, isPending: N } = Ie(), { mutateAsync: se, isPending: L } = Pe(), { data: D, isLoading: H } = Se(), [ie, ae] = S([]);
+  C(() => {
+    D && ae(
+      D.filter((d) => d.id !== void 0).map((d) => ({
         id: `${d.id}`,
         name: d.name
       }))
     );
-  }, [j]), _(() => {
+  }, [D]), C(() => {
     r(!!N);
-  }, [N]), _(() => {
-    c(b ?? []);
-  }, [b]);
-  const oe = async (d) => {
-    if (q(d), d) {
-      if (a("templateName", d?.name), j && j.find((C) => C.id === d.type)) {
-        const C = F.find((R) => R.id === `${d.type}`);
-        C && a("templateType", C);
-      }
-      e();
-    } else
-      a("templateName", "");
-    const x = await ie({ id: d?.id });
-    H(x || void 0);
+  }, [N]), C(() => {
+    p(h ?? []);
+  }, [h]);
+  const le = async (d) => {
+    j(d), d ? (a("templateName", d?.name), e()) : (a("templateName", ""), a("subject", ""));
+    const x = await re({ id: d?.id });
+    U(x || void 0);
   };
-  _(() => {
-    let d = u.find((x) => x.id === p("template")?.id);
-    oe(d);
-  }, [p("template")]), _(() => {
-    t(T && g ? T : void 0);
-  }, [T, g, t]);
-  const de = (d) => {
+  C(() => {
+    a("template", O);
+  }, [c("templateType")]), C(() => {
+    let d = u.find((x) => x.id === c("template")?.id);
+    le(d);
+  }, [c("template")]), C(() => {
+    w && g ? (t(w), a("subject", w.subject ?? "")) : t(void 0);
+  }, [w, g, t]);
+  const oe = (d) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
       async (x) => {
-        let C = d.template.id, R = "";
-        g?.type === null && (C = "", R = d.template.id);
-        const ce = {
+        let M = d.template.id, F = "";
+        g?.readonly && (M = "", F = d.template.id);
+        const de = {
           enerexIdentifier: "",
           projectId: "",
-          templateId: C,
+          templateId: M,
           templateType: d.templateType.id,
           name: d.templateName,
           html: x.html,
           css: x.css,
-          subject: d?.subject ?? "",
-          parent_id: R
+          subject: d.templateType.id === "2" ? d?.subject ?? "" : "",
+          parent_id: F
         };
-        await ae(ce) && (e(), h(), w());
+        await se(de) && (e(), y(), b());
       }
     );
   };
-  return /* @__PURE__ */ s(K, { className: "border border-0 text-start", children: /* @__PURE__ */ s(K.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ s("form", { onSubmit: n(de), children: /* @__PURE__ */ y("div", { className: "template-list-container gap-3", children: [
-    /* @__PURE__ */ y(z, { children: [
-      /* @__PURE__ */ s($, { md: 3, children: /* @__PURE__ */ s(
-        J,
-        {
-          label: "Type",
-          control: o,
-          error: f,
-          options: F,
-          required: !0,
-          validation: {
-            required: {
-              value: !0,
-              message: "Template Type is required"
-            }
-          },
-          ...l("templateType")
-        }
-      ) }),
-      /* @__PURE__ */ s($, { md: 3, children: /* @__PURE__ */ s(
-        J,
-        {
-          label: "Template",
-          control: o,
-          error: f,
-          options: [
-            Z,
-            ...u.filter(
-              (d) => d.type?.toString() === p("templateType")?.id || d.type === null
-            ).map((d) => ({
-              id: d.id,
-              name: d.name
-            }))
-          ],
-          required: !1,
-          ...l("template")
-        }
-      ) }),
-      /* @__PURE__ */ s($, { md: 3, children: /* @__PURE__ */ s(
-        W,
-        {
-          label: "Name",
-          register: l,
-          error: f,
-          required: !0,
-          name: "templateName",
-          validation: {
-            required: {
-              value: !0,
-              message: "Template Name is required"
-            }
+  return /* @__PURE__ */ s(K, { className: "border border-0 text-start", children: /* @__PURE__ */ s(K.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ s("form", { onSubmit: n(oe), children: /* @__PURE__ */ s("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ v(ue, { children: [
+    /* @__PURE__ */ s(P, { children: /* @__PURE__ */ s(
+      X,
+      {
+        label: "Type",
+        control: o,
+        error: f,
+        options: ie,
+        required: !0,
+        validation: {
+          required: {
+            value: !0,
+            message: "Select a type"
+          }
+        },
+        ...l("templateType")
+      }
+    ) }),
+    /* @__PURE__ */ s(P, { children: /* @__PURE__ */ s(
+      X,
+      {
+        label: "Template",
+        control: o,
+        error: f,
+        options: [
+          O,
+          ...u.filter(
+            (d) => (d.type?.toString() === c("templateType")?.id || d.type === null) && c("templateType")?.id != null
+          ).map((d) => ({
+            id: d.id,
+            name: d.name
+          }))
+        ],
+        required: !1,
+        ...l("template")
+      }
+    ) }),
+    /* @__PURE__ */ s(P, { children: /* @__PURE__ */ s(
+      Q,
+      {
+        label: "Name",
+        register: l,
+        error: f,
+        required: !0,
+        name: "templateName",
+        validation: {
+          required: {
+            value: !0,
+            message: "Enter a name"
           }
         }
-      ) }),
-      /* @__PURE__ */ y(
-        $,
-        {
-          md: 3,
-          className: "d-flex align-items-end justify-content-end gap-2 mb-3",
-          children: [
-            /* @__PURE__ */ s(
-              G,
-              {
-                style: { width: "70px" },
-                variant: "primary",
-                disabled: m || N || L || M,
-                onClick: () => {
-                  q(void 0), h(), i();
-                },
-                children: N || L ? /* @__PURE__ */ s(
-                  U,
-                  {
-                    animation: "border",
-                    style: { width: "11px", height: "11px" },
-                    size: "sm",
-                    role: "status",
-                    className: "me-1",
-                    children: /* @__PURE__ */ s("span", { className: "visually-hidden", children: "Loading..." })
-                  }
-                ) : "Clear"
-              }
-            ),
-            /* @__PURE__ */ s(
-              G,
-              {
-                type: "submit",
-                variant: "primary",
-                style: { width: "80px" },
-                disabled: m || N || L || M,
-                children: N || L ? /* @__PURE__ */ s(
-                  U,
-                  {
-                    animation: "border",
-                    style: { width: "11px", height: "11px" },
-                    size: "sm",
-                    role: "status",
-                    className: "me-1",
-                    children: /* @__PURE__ */ s("span", { className: "visually-hidden", children: "Loading..." })
-                  }
-                ) : (g?.id ?? "") === "" ? "Save" : (g?.projectId ?? "") === 0 ? "Save as" : "Save"
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    p("templateType")?.id === "2" && /* @__PURE__ */ s(z, { children: /* @__PURE__ */ s($, { md: 12, children: /* @__PURE__ */ s(
-      W,
+      }
+    ) }),
+    c("templateType")?.id === "2" && /* @__PURE__ */ s(P, { children: /* @__PURE__ */ s(
+      Q,
       {
-        className: "mt-3",
         label: "Subject",
         register: l,
         error: f,
         required: !1,
         name: "subject"
       }
-    ) }) })
-  ] }) }) }) });
+    ) }),
+    /* @__PURE__ */ v(P, { className: "d-flex align-items-end justify-content-end gap-2 mb-3", children: [
+      /* @__PURE__ */ s(
+        z,
+        {
+          style: { width: "70px" },
+          variant: "primary",
+          disabled: m || N || L || H,
+          onClick: () => {
+            j(void 0), y(), i();
+          },
+          children: N || L ? /* @__PURE__ */ s(
+            B,
+            {
+              animation: "border",
+              style: { width: "11px", height: "11px" },
+              size: "sm",
+              role: "status",
+              className: "me-1",
+              children: /* @__PURE__ */ s("span", { className: "visually-hidden", children: "Loading..." })
+            }
+          ) : "Clear"
+        }
+      ),
+      (c("templateType")?.id !== "2" || (g?.id ?? "") !== "") && /* @__PURE__ */ s(
+        z,
+        {
+          type: "submit",
+          variant: "primary",
+          style: { width: "80px" },
+          disabled: m || N || L || H,
+          children: N || L ? /* @__PURE__ */ s(
+            B,
+            {
+              animation: "border",
+              style: { width: "11px", height: "11px" },
+              size: "sm",
+              role: "status",
+              className: "me-1",
+              children: /* @__PURE__ */ s("span", { className: "visually-hidden", children: "Loading..." })
+            }
+          ) : g?.readonly ? "Save as" : "Save"
+        }
+      )
+    ] })
+  ] }) }) }) }) });
 }, Ue = ({ config: t }) => {
   const [r, i] = S(), [l, n] = S(!1);
-  return /* @__PURE__ */ s(ye, { configs: t, children: /* @__PURE__ */ s(be, { children: /* @__PURE__ */ y("div", { className: "root-widget", children: [
+  return /* @__PURE__ */ s(ye, { configs: t, children: /* @__PURE__ */ s(be, { children: /* @__PURE__ */ v("div", { className: "root-widget", children: [
     /* @__PURE__ */ s(
       je,
       {
         templateLoading: n,
         onSelectItem: (o) => {
           i(o), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-            o?.html ?? D,
+            o?.html ?? R,
             o?.css ?? "",
             ""
           );
         },
         onReset: () => {
-          n(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(D, "", "");
+          n(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(R, "", "");
         }
       }
     ),
@@ -997,7 +982,7 @@ const X = /* @__PURE__ */ Ee(_e), Ae = ({
       {
         templateHTML: {
           css: r?.css ?? "",
-          html: r?.html ?? D
+          html: r?.html ?? R
         },
         loading: l,
         className: "col-span-5"

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

@@ -1,4 +1,4 @@
-(function(f,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):(f=typeof globalThis<"u"?globalThis:f||self,n(f.EnerexTemplateEditor={},f.jsxRuntime,f.React,f.reactQuery,f.axios,f.reactBootstrap,f.reactHookForm,f.Select$1))})(this,function(f,n,c,w,O,p,F,M){"use strict";const A=`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+(function(f,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):(f=typeof globalThis<"u"?globalThis:f||self,n(f.EnerexTemplateEditor={},f.jsxRuntime,f.React,f.reactQuery,f.axios,f.reactBootstrap,f.reactHookForm,f.Select$1))})(this,function(f,n,c,w,D,p,O,F){"use strict";const j=`<!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
-`,U=c.createContext(void 0),Q=({children:t,configs:s})=>{const[i,o]=c.useState(s.clientId),[r,e]=c.useState(s.apiKey),[l,a]=c.useState(s.enerexIdentifier),[u,v]=c.useState(s.userName),[b,x]=c.useState(s.projectId),C=g=>{e(g.apiKey),o(g.clientId),x(g.projectId),a(g.enerexIdentifier),v(g.userName)};return n.jsx(U.Provider,{value:{clientId:i,apiKey:r,setConfiguration:C,enerexIdentifier:l,projectId:b,userName:u},children:t})},T=()=>{const t=c.useContext(U);if(!t)throw new Error("widgetConfig must be used within a ConfigProvider");return t},H=(t="",s)=>({get:async(r,e)=>{try{const l=await O.get(`${t}${r}`,e??s);if(l.status===200)return l.data}catch(l){throw l}},post:async(r,e,l)=>{try{const a=await O.post(`${t}${r}`,e,l??s);if(a.status===200)return a.data}catch(a){throw a}}}),j={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"},V=c.createContext({get:()=>{throw new Error("HttpClientContext.get not implemented")},post:()=>{throw new Error("HttpClientContext.post not implemented")}}),Z=({children:t})=>{const{clientId:s,apiKey:i}=T(),o={headers:{client_id:s,"x-api-key":i}},{get:r,post:e}=H(j.API_BASE_URL,o);return n.jsx(V.Provider,{value:{get:r,post:e},children:t})},R=({children:t})=>{const s=new w.QueryClient;return n.jsx(Z,{children:n.jsx(w.QueryClientProvider,{client:s,children:t})})},ee=t=>{const s=Array.from(new Set(t.map(o=>o.category))),i=[];return s.forEach(o=>{const r=t.filter(e=>e.category===o).map(e=>({label:e.label,value:e.value,hint:e.hint,hidden:e.hidden}));i.push({category:o,entries:r})}),i},N=()=>{const t=c.useContext(V);if(t)return t;throw new Error("useHttpClient must be used within a HttpClientProvider")},_={Template_list:"/Template/list/",Template:"/Template/GetTemplate/",MergeTags:"/Template/TemplateMergeTags/",ExcludeCategory:"/Template/GetExcludeCategories/",SaveTemplate:"/Template/save-update/",TemplateTypes:"/Template/TemplateTypes/"},te=()=>{const t=N(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getTemplateTags"],queryFn:async r=>await t.get(`${_.MergeTags}${i}/${s}`)})},ne=()=>{const t=N(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getExcludeCategory"],queryFn:async r=>await t.get(`${_.ExcludeCategory}${i}/${s}`)})},re=({templateHTML:t,className:s="",loading:i=!1})=>{const{post:o}=H(),{data:r}=te(),{data:e}=ne(),[l,a]=c.useState(t??{html:A,css:""}),{enerexIdentifier:u,projectId:v,userName:b}=T(),x="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",C="https://plugins.stripo.email/api/v1/auth";c.useEffect(()=>{if(r&&e&&!document.getElementById("UiEditorScript")){const y=document.createElement("script");y.id="UiEditorScript",y.type="module",y.src=j.EDITOR_SCRIPT_URL,y.onload=g,document.body.appendChild(y)}},[r,e]);const g=async()=>{window.UIEditor.initEditor(document.querySelector("#stripoEditorContainer"),{html:l.html,css:l.css,modulesExcludedCategories:e??[],forceRecreate:!0,metadata:{emailId:`${v}_${u}`,userId:"1",username:b,avatarUrl:x},locale:"en",onTokenRefreshRequest:async function(y){const m={pluginId:j.EDITOR_PLUGIN_ID,secretKey:j.EDITOR_SECRET_KEY,userId:"12",role:"user"},h=await o(C,m);h&&y(h.token)},codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton",mergeTags:ee(r??[])})};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(p.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"})]})})},K=({label:t,register:s,validation:i,required:o=!1,name:r,error:e,className:l="",...a})=>n.jsxs(p.Form.Group,{className:l+" mb-1",children:[t?n.jsxs(p.Form.Label,{className:"mb-3 d-block form-label",children:[t,o&&n.jsx("label",{className:"text-danger",children:"*"})]}):null,n.jsx(p.Form.Control,{name:r,type:"text",...a,isInvalid:!!(e&&e[r]),...s?s(r,{...i}):{},className:`react-select__control ${e&&e[r]&&"border border-danger"}`}),e&&e[r]?n.jsx(p.Form.Control.Feedback,{type:"invalid",children:e[r].message}):null]}),se=()=>{const t=N(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getTemplatesList"],queryFn:async r=>await t.get(`${_.Template_list}${i}/${s}`)})},ie=()=>{const t=N(),{enerexIdentifier:s,projectId:i}=T();return w.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:r})=>{if(r)return await t.get(`${_.Template}${s}/${r}/${i}`)}})},le=()=>{const t=N(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getTemplateTypes"],queryFn:async r=>await t.get(`${_.TemplateTypes}${s}/${i}`)})};function oe(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var D={exports:{}};/*!
+`,M=c.createContext(void 0),J=({children:t,configs:s})=>{const[i,o]=c.useState(s.clientId),[r,e]=c.useState(s.apiKey),[l,a]=c.useState(s.enerexIdentifier),[m,v]=c.useState(s.userName),[b,x]=c.useState(s.projectId),C=g=>{e(g.apiKey),o(g.clientId),x(g.projectId),a(g.enerexIdentifier),v(g.userName)};return n.jsx(M.Provider,{value:{clientId:i,apiKey:r,setConfiguration:C,enerexIdentifier:l,projectId:b,userName:m},children:t})},T=()=>{const t=c.useContext(M);if(!t)throw new Error("widgetConfig must be used within a ConfigProvider");return t},U=(t="",s)=>({get:async(r,e)=>{try{const l=await D.get(`${t}${r}`,e??s);if(l.status===200)return l.data}catch(l){throw l}},post:async(r,e,l)=>{try{const a=await D.post(`${t}${r}`,e,l??s);if(a.status===200)return a.data}catch(a){throw a}}}),q={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"},H=c.createContext({get:()=>{throw new Error("HttpClientContext.get not implemented")},post:()=>{throw new Error("HttpClientContext.post not implemented")}}),Q=({children:t})=>{const{clientId:s,apiKey:i}=T(),o={headers:{client_id:s,"x-api-key":i}},{get:r,post:e}=U(q.API_BASE_URL,o);return n.jsx(H.Provider,{value:{get:r,post:e},children:t})},Z=({children:t})=>{const s=new w.QueryClient;return n.jsx(Q,{children:n.jsx(w.QueryClientProvider,{client:s,children:t})})},R=t=>{const s=Array.from(new Set(t.map(o=>o.category))),i=[];return s.forEach(o=>{const r=t.filter(e=>e.category===o).map(e=>({label:e.label,value:e.value,hint:e.hint,hidden:e.hidden}));i.push({category:o,entries:r})}),i},I=()=>{const t=c.useContext(H);if(t)return t;throw new Error("useHttpClient must be used within a HttpClientProvider")},N={Template_list:"/Template/list/",Template:"/Template/GetTemplate/",MergeTags:"/Template/TemplateMergeTags/",ExcludeCategory:"/Template/GetExcludeCategories/",SaveTemplate:"/Template/save-update/",TemplateTypes:"/Template/TemplateTypes/"},ee=()=>{const t=I(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getTemplateTags"],queryFn:async r=>await t.get(`${N.MergeTags}${i}/${s}`)})},te=()=>{const t=I(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getExcludeCategory"],queryFn:async r=>await t.get(`${N.ExcludeCategory}${i}/${s}`)})},ne=({templateHTML:t,className:s="",loading:i=!1})=>{const{post:o}=U(),{data:r}=ee(),{data:e}=te(),[l,a]=c.useState(t??{html:j,css:""}),{enerexIdentifier:m,projectId:v,userName:b}=T(),x="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",C="https://plugins.stripo.email/api/v1/auth";c.useEffect(()=>{if(r&&e&&!document.getElementById("UiEditorScript")){const y=document.createElement("script");y.id="UiEditorScript",y.type="module",y.src=q.EDITOR_SCRIPT_URL,y.onload=g,document.body.appendChild(y)}},[r,e]);const g=async()=>{window.UIEditor.initEditor(document.querySelector("#stripoEditorContainer"),{html:l.html,css:l.css,modulesExcludedCategories:e??[],forceRecreate:!0,metadata:{emailId:`${v}_${m}`,userId:"1",username:b,avatarUrl:x},locale:"en",onTokenRefreshRequest:async function(y){const u={pluginId:q.EDITOR_PLUGIN_ID,secretKey:q.EDITOR_SECRET_KEY,userId:"12",role:"user"},h=await o(C,u);h&&y(h.token)},codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton",mergeTags:R(r??[])})};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(p.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"})]})})},V=({label:t,register:s,validation:i,required:o=!1,name:r,error:e,className:l="",...a})=>n.jsxs(p.Form.Group,{className:l+" mb-1",children:[t?n.jsxs(p.Form.Label,{className:"mb-3 d-block form-label",children:[t,o&&n.jsx("label",{className:"text-danger",children:"*"})]}):null,n.jsx(p.Form.Control,{name:r,type:"text",...a,isInvalid:!!(e&&e[r]),...s?s(r,{...i}):{},className:`react-select__control ${e&&e[r]&&"border border-danger"}`}),e&&e[r]?n.jsx(p.Form.Control.Feedback,{type:"invalid",children:e[r].message}):null]}),re=()=>{const t=I(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getTemplatesList"],queryFn:async r=>await t.get(`${N.Template_list}${i}/${s}`)})},se=()=>{const t=I(),{enerexIdentifier:s,projectId:i}=T();return w.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:r})=>{if(r)return await t.get(`${N.Template}${s}/${r}/${i}`)}})},le=()=>{const t=I(),{enerexIdentifier:s,projectId:i}=T();return w.useQuery({queryKey:["getTemplateTypes"],queryFn:async r=>await t.get(`${N.TemplateTypes}${s}/${i}`)})};function ie(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var L={exports:{}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/var z;function ae(){return z||(z=1,function(t){(function(){var s={}.hasOwnProperty;function i(){for(var e="",l=0;l<arguments.length;l++){var a=arguments[l];a&&(e=r(e,o(a)))}return e}function o(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return i.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var l="";for(var a in e)s.call(e,a)&&e[a]&&(l=r(l,a));return l}function r(e,l){return l?e?e+" "+l:e+l:e}t.exports?(i.default=i,t.exports=i):window.classNames=i})()}(D)),D.exports}var de=ae();const G=oe(de),ce=({name:t="",control:s,options:i,multiple:o=!1,placeholder:r,validation:e,labelKey:l="name",disabled:a,isInvalid:u,value:v,onChange:b,uncontrolled:x,menuPlacement:C="auto",closeOnSelect:g=!0})=>{const y={control:m=>({...m,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:m=>({...m,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:m=>({...m,zIndex:9999}),multiValueRemove:m=>({...m,display:a?"none":"block"})};return x?n.jsx(M,{className:G({"is-invalid":u}),styles:y,classNamePrefix:"react-select",isMulti:o,options:i,onChange:b,placeholder:r,menuPortalTarget:document.body,value:v,getOptionLabel:typeof l=="string"?m=>m[l]:l,getOptionValue:m=>m.id,isDisabled:a,menuPlacement:C,closeMenuOnSelect:g}):n.jsx(F.Controller,{control:s,name:t,rules:e,render:({field:{onChange:m,value:h,onBlur:L}})=>n.jsx(M,{className:G({"is-invalid":u}),styles:y,classNamePrefix:"react-select",isMulti:o,options:i,onBlur:L,onChange:m,placeholder:r,menuPortalTarget:document.body,value:h,getOptionLabel:typeof l=="string"?S=>S[l]:l,getOptionValue:S=>S.id,isDisabled:a,menuPlacement:C,closeMenuOnSelect:g},h?JSON.stringify(h):"reset")})},W=({label:t,name:s,validation:i,control:o,error:r,...e})=>n.jsxs(p.Form.Group,{className:"mb-1",children:[t&&n.jsxs(p.Form.Label,{className:"mb-3 d-block form-label",children:[t," ",e.required&&n.jsx("span",{className:"text-danger",children:"*"})]}),n.jsx(ce,{control:o,options:e.options??[],validation:i,isInvalid:r&&!!r[s],name:s}),r&&r[s]?n.jsx(p.Form.Control.Feedback,{type:"invalid",children:r[s].message}):null]}),pe=()=>{const t=N();w.useQueryClient();const{enerexIdentifier:s,projectId:i}=T();return w.useMutation({mutationKey:["saveTemplate"],mutationFn:async r=>(r.enerexIdentifier=s??"",r.projectId=i??"",await t.post(`${_.SaveTemplate}`,r))})},Y={id:"",name:"New (Blank)"},me=({onSelectItem:t,templateLoading:s,onReset:i})=>{const{register:o,handleSubmit:r,clearErrors:e,setValue:l,control:a,watch:u,reset:v,formState:{errors:b}}=F.useForm({defaultValues:{templateName:"",subject:"",templateType:void 0,template:Y},mode:"onChange"}),{data:x,refetch:C,isLoading:g}=se(),[y,m]=c.useState([]),[h,L]=c.useState(),[S,B]=c.useState(),{mutateAsync:fe,isPending:q}=ie(),{mutateAsync:ge,isPending:$}=pe(),{data:P,isLoading:X}=le(),[J,ye]=c.useState([]);c.useEffect(()=>{P&&ye(P.filter(d=>d.id!==void 0).map(d=>({id:`${d.id}`,name:d.name})))},[P]),c.useEffect(()=>{s(!!q)},[q]),c.useEffect(()=>{m(x??[])},[x]);const he=async d=>{if(L(d),d){if(l("templateName",d?.name),P&&P.find(I=>I.id===d.type)){const I=J.find(k=>k.id===`${d.type}`);I&&l("templateType",I)}e()}else l("templateName","");const E=await fe({id:d?.id});B(E||void 0)};c.useEffect(()=>{let d=y.find(E=>E.id===u("template")?.id);he(d)},[u("template")]),c.useEffect(()=>{t(S&&h?S:void 0)},[S,h,t]);const be=d=>{window.StripoEditorApi.actionsApi.getTemplateData(async E=>{let I=d.template.id,k="";h?.type===null&&(I="",k=d.template.id);const we={enerexIdentifier:"",projectId:"",templateId:I,templateType:d.templateType.id,name:d.templateName,html:E.html,css:E.css,subject:d?.subject??"",parent_id:k};await ge(we)&&(e(),v(),C())})};return n.jsx(p.Card,{className:"border border-0 text-start",children:n.jsx(p.Card.Body,{className:"pe-0 ps-2",children:n.jsx("form",{onSubmit:r(be),children:n.jsxs("div",{className:"template-list-container gap-3",children:[n.jsxs(p.Row,{children:[n.jsx(p.Col,{md:3,children:n.jsx(W,{label:"Type",control:a,error:b,options:J,required:!0,validation:{required:{value:!0,message:"Template Type is required"}},...o("templateType")})}),n.jsx(p.Col,{md:3,children:n.jsx(W,{label:"Template",control:a,error:b,options:[Y,...y.filter(d=>d.type?.toString()===u("templateType")?.id||d.type===null).map(d=>({id:d.id,name:d.name}))],required:!1,...o("template")})}),n.jsx(p.Col,{md:3,children:n.jsx(K,{label:"Name",register:o,error:b,required:!0,name:"templateName",validation:{required:{value:!0,message:"Template Name is required"}}})}),n.jsxs(p.Col,{md:3,className:"d-flex align-items-end justify-content-end gap-2 mb-3",children:[n.jsx(p.Button,{style:{width:"70px"},variant:"primary",disabled:g||q||$||X,onClick:()=>{L(void 0),v(),i()},children:q||$?n.jsx(p.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"}),n.jsx(p.Button,{type:"submit",variant:"primary",style:{width:"80px"},disabled:g||q||$||X,children:q||$?n.jsx(p.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):(h?.id??"")===""?"Save":(h?.projectId??"")===0?"Save as":"Save"})]})]}),u("templateType")?.id==="2"&&n.jsx(p.Row,{children:n.jsx(p.Col,{md:12,children:n.jsx(K,{className:"mt-3",label:"Subject",register:o,error:b,required:!1,name:"subject"})})})]})})})})},ue=({config:t})=>{const[s,i]=c.useState(),[o,r]=c.useState(!1),e=a=>{i(a),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(a?.html??A,a?.css??"","")},l=()=>{r(!1),i(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(A,"","")};return n.jsx(Q,{configs:t,children:n.jsx(R,{children:n.jsxs("div",{className:"root-widget",children:[n.jsx(me,{templateLoading:r,onSelectItem:e,onReset:l}),n.jsx(re,{templateHTML:{css:s?.css??"",html:s?.html??A},loading:o,className:"col-span-5"})]})})})};f.EditorWidget=ue,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
+*/var K;function oe(){return K||(K=1,function(t){(function(){var s={}.hasOwnProperty;function i(){for(var e="",l=0;l<arguments.length;l++){var a=arguments[l];a&&(e=r(e,o(a)))}return e}function o(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return i.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var l="";for(var a in e)s.call(e,a)&&e[a]&&(l=r(l,a));return l}function r(e,l){return l?e?e+" "+l:e+l:e}t.exports?(i.default=i,t.exports=i):window.classNames=i})()}(L)),L.exports}var ae=oe();const z=ie(ae),de=({name:t="",control:s,options:i,multiple:o=!1,placeholder:r,validation:e,labelKey:l="name",disabled:a,isInvalid:m,value:v,onChange:b,uncontrolled:x,menuPlacement:C="auto",closeOnSelect:g=!0})=>{const y={control:u=>({...u,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:u=>({...u,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:u=>({...u,zIndex:9999}),multiValueRemove:u=>({...u,display:a?"none":"block"})};return x?n.jsx(F,{className:z({"is-invalid":m}),styles:y,classNamePrefix:"react-select",isMulti:o,options:i,onChange:b,placeholder:r,menuPortalTarget:document.body,value:v,getOptionLabel:typeof l=="string"?u=>u[l]:l,getOptionValue:u=>u.id,isDisabled:a,menuPlacement:C,closeMenuOnSelect:g}):n.jsx(O.Controller,{control:s,name:t,rules:e,render:({field:{onChange:u,value:h,onBlur:P}})=>n.jsx(F,{className:z({"is-invalid":m}),styles:y,classNamePrefix:"react-select",isMulti:o,options:i,onBlur:P,onChange:u,placeholder:r,menuPortalTarget:document.body,value:h,getOptionLabel:typeof l=="string"?S=>S[l]:l,getOptionValue:S=>S.id,isDisabled:a,menuPlacement:C,closeMenuOnSelect:g},h?JSON.stringify(h):"reset")})},G=({label:t,name:s,validation:i,control:o,error:r,...e})=>n.jsxs(p.Form.Group,{className:"mb-1",children:[t&&n.jsxs(p.Form.Label,{className:"mb-3 d-block form-label",children:[t," ",e.required&&n.jsx("span",{className:"text-danger",children:"*"})]}),n.jsx(de,{control:o,options:e.options??[],validation:i,isInvalid:r&&!!r[s],name:s}),r&&r[s]?n.jsx(p.Form.Control.Feedback,{type:"invalid",children:r[s].message}):null]}),ce=()=>{const t=I();w.useQueryClient();const{enerexIdentifier:s,projectId:i}=T();return w.useMutation({mutationKey:["saveTemplate"],mutationFn:async r=>(r.enerexIdentifier=s??"",r.projectId=i??"",await t.post(`${N.SaveTemplate}`,r))})},$={id:"",name:"New (Blank)"},pe=({onSelectItem:t,templateLoading:s,onReset:i})=>{const{register:o,handleSubmit:r,clearErrors:e,setValue:l,control:a,watch:m,reset:v,formState:{errors:b}}=O.useForm({defaultValues:{templateName:"",subject:"",templateType:void 0,template:$},mode:"onChange"}),{data:x,refetch:C,isLoading:g}=re(),[y,u]=c.useState([]),[h,P]=c.useState(),[S,W]=c.useState(),{mutateAsync:ue,isPending:_}=se(),{mutateAsync:fe,isPending:A}=ce(),{data:k,isLoading:B}=le(),[ge,ye]=c.useState([]);c.useEffect(()=>{k&&ye(k.filter(d=>d.id!==void 0).map(d=>({id:`${d.id}`,name:d.name})))},[k]),c.useEffect(()=>{s(!!_)},[_]),c.useEffect(()=>{u(x??[])},[x]);const he=async d=>{P(d),d?(l("templateName",d?.name),e()):(l("templateName",""),l("subject",""));const E=await ue({id:d?.id});W(E||void 0)};c.useEffect(()=>{l("template",$)},[m("templateType")]),c.useEffect(()=>{let d=y.find(E=>E.id===m("template")?.id);he(d)},[m("template")]),c.useEffect(()=>{S&&h?(t(S),l("subject",S.subject??"")):t(void 0)},[S,h,t]);const be=d=>{window.StripoEditorApi.actionsApi.getTemplateData(async E=>{let Y=d.template.id,X="";h?.readonly&&(Y="",X=d.template.id);const we={enerexIdentifier:"",projectId:"",templateId:Y,templateType:d.templateType.id,name:d.templateName,html:E.html,css:E.css,subject:d.templateType.id==="2"?d?.subject??"":"",parent_id:X};await fe(we)&&(e(),v(),C())})};return n.jsx(p.Card,{className:"border border-0 text-start",children:n.jsx(p.Card.Body,{className:"pe-0 ps-2",children:n.jsx("form",{onSubmit:r(be),children:n.jsx("div",{className:"template-list-container gap-3",children:n.jsxs(p.Row,{children:[n.jsx(p.Col,{children:n.jsx(G,{label:"Type",control:a,error:b,options:ge,required:!0,validation:{required:{value:!0,message:"Select a type"}},...o("templateType")})}),n.jsx(p.Col,{children:n.jsx(G,{label:"Template",control:a,error:b,options:[$,...y.filter(d=>(d.type?.toString()===m("templateType")?.id||d.type===null)&&m("templateType")?.id!=null).map(d=>({id:d.id,name:d.name}))],required:!1,...o("template")})}),n.jsx(p.Col,{children:n.jsx(V,{label:"Name",register:o,error:b,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}})}),m("templateType")?.id==="2"&&n.jsx(p.Col,{children:n.jsx(V,{label:"Subject",register:o,error:b,required:!1,name:"subject"})}),n.jsxs(p.Col,{className:"d-flex align-items-end justify-content-end gap-2 mb-3",children:[n.jsx(p.Button,{style:{width:"70px"},variant:"primary",disabled:g||_||A||B,onClick:()=>{P(void 0),v(),i()},children:_||A?n.jsx(p.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!=="2"||(h?.id??"")!=="")&&n.jsx(p.Button,{type:"submit",variant:"primary",style:{width:"80px"},disabled:g||_||A||B,children:_||A?n.jsx(p.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):h?.readonly?"Save as":"Save"})]})]})})})})})},me=({config:t})=>{const[s,i]=c.useState(),[o,r]=c.useState(!1),e=a=>{i(a),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(a?.html??j,a?.css??"","")},l=()=>{r(!1),i(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(j,"","")};return n.jsx(J,{configs:t,children:n.jsx(Z,{children:n.jsxs("div",{className:"root-widget",children:[n.jsx(pe,{templateLoading:r,onSelectItem:e,onReset:l}),n.jsx(ne,{templateHTML:{css:s?.css??"",html:s?.html??j},loading:o,className:"col-span-5"})]})})})};f.EditorWidget=me,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

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

@@ -7,6 +7,7 @@ export type ITemplatesList = {
     name: string;
     type: number;
     projectId: number;
+    readonly: boolean;
 };
 export type ITemplate = {
     templateID: string;
@@ -16,6 +17,7 @@ export type ITemplate = {
     active: string;
     enerexIdentifier: string;
     projectId: string;
+    subject: string;
     templateType: number;
 };
 export type ITemplateTypes = {

package/package.json CHANGED Viewed

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