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