@erpsquad/common 1.8.40 → 1.8.41

package/dist/views/template-editor/edit-section-modal/edit-section-modal/index.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=,/* empty css                                        */i=,/* empty css                                                  */o=,/* empty css                                          */n=,/* empty css                                          */a=require("@mui/material"),s=require("@mui/icons-material/Close");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}};/* empty css                                */var d=/* @__PURE__ */r(s);const c=t.lazy(()=>Promise.resolve().then(function(){return require("../../../../components/editor/custom-editor/index.js")}));exports.default=({isOpen:s,setIsOpen:r,modalProps:u,section:h,placeholders:p,handleSave:x,handleAddPlaceholder:m,handleEditorReady:j})=>{const g=()=>{r(null)};/* @__PURE__ */
-return e.jsxs(l.default,{open:s,onClose:g,maxWidth:"lg",maxHeight:"md",fullWidth:!0,...u,children:[
-/* @__PURE__ */e.jsxs(a.DialogTitle,{className:"editSectionModal--DialogTitle",children:[
-/* @__PURE__ */e.jsx(i.Typography,{type:"s3",color:"inherit",weight:"medium",children:"Edit Content"}),
-/* @__PURE__ */e.jsxs(a.Box,{display:"flex",alignItems:"center",gap:1,position:"absolute",right:"1%",top:"4px",children:[
-/* @__PURE__ */e.jsx(n.default,{displayEmpty:!0,value:"",size:"small",renderValue:()=>"Add placeholder",fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&(m(e.target.value),e.target.value="")},children:p.map(t=>/* @__PURE__ */e.jsx(a.MenuItem,{value:t.value,children:/* @__PURE__ */e.jsx(i.Typography,{type:"s4",color:"theme.secondary.1000",children:t.label})},t.value))}),
-/* @__PURE__ */e.jsx(a.IconButton,{onClick:g,children:/* @__PURE__ */e.jsx(d.default,{fontSize:"small"})})]})]}),
-/* @__PURE__ */e.jsx(a.DialogContent,{className:"editSectionModal--DialogContents",children:/* @__PURE__ */e.jsx(t.Suspense,{children:/* @__PURE__ */e.jsx(c,{handleEditorReady:j,data:h.content})})}),
-/* @__PURE__ */e.jsx(a.DialogActions,{className:"editSectionModal--DialogAction",children:/* @__PURE__ */e.jsxs(a.Box,{display:"flex",gap:1.5,children:[
-/* @__PURE__ */e.jsx(o.default,{className:"editSectionModal--DialogAction--WhiteBtn",onClick:g,children:"Cancel"}),
-/* @__PURE__ */e.jsx(o.default,{onClick:e=>(e=>{x(e)})(e),children:"Save"})]})})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),i=,/* empty css                                        */t=,/* empty css                                                  */o=,/* empty css                                          */n=,/* empty css                                          */a=;/* empty css                                                        */;/* empty css                                */var d=,/* empty css                                                                    */s=,/* empty css                                                    */r=,/* empty css                                                              */u=,/* empty css                                                                  */c=,/* empty css                                                                        */m=;/* empty css                                                                        */const x=l.lazy(()=>Promise.resolve().then(function(){return require("../../../../components/editor/custom-editor/index.js")}));exports.default=({isOpen:h,setIsOpen:p,modalProps:j,section:g,placeholders:f,handleSave:y,handleAddPlaceholder:q,handleEditorReady:v})=>{const C=()=>{p(null)};/* @__PURE__ */
+return e.jsxs(i.default,{open:h,onClose:C,maxWidth:"lg",maxHeight:"md",fullWidth:!0,...j,children:[
+/* @__PURE__ */e.jsxs(d.default,{className:"editSectionModal--DialogTitle",children:[
+/* @__PURE__ */e.jsx(t.Typography,{type:"s3",color:"inherit",weight:"medium",children:"Edit Content"}),
+/* @__PURE__ */e.jsxs(s.default,{display:"flex",alignItems:"center",gap:1,position:"absolute",right:"1%",top:"4px",children:[
+/* @__PURE__ */e.jsx(n.default,{displayEmpty:!0,value:"",size:"small",renderValue:()=>"Add placeholder",fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&(q(e.target.value),e.target.value="")},children:f.map(l=>/* @__PURE__ */e.jsx(r.default,{value:l.value,children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.1000",children:l.label})},l.value))}),
+/* @__PURE__ */e.jsx(u.default,{onClick:C,children:/* @__PURE__ */e.jsx(a.default,{fontSize:"small"})})]})]}),
+/* @__PURE__ */e.jsx(c.default,{className:"editSectionModal--DialogContents",children:/* @__PURE__ */e.jsx(l.Suspense,{children:/* @__PURE__ */e.jsx(x,{handleEditorReady:v,data:g.content})})}),
+/* @__PURE__ */e.jsx(m.default,{className:"editSectionModal--DialogAction",children:/* @__PURE__ */e.jsxs(s.default,{display:"flex",gap:1.5,children:[
+/* @__PURE__ */e.jsx(o.default,{className:"editSectionModal--DialogAction--WhiteBtn",onClick:C,children:"Cancel"}),
+/* @__PURE__ */e.jsx(o.default,{onClick:e=>(e=>{y(e)})(e),children:"Save"})]})})]})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/edit-section-modal/edit-section-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["CustomEditor","lazy","Promise","resolve","then","require","isOpen","setIsOpen","modalProps","section","placeholders","handleSave","handleAddPlaceholder","handleEditorReady","handleModalClose","jsxs","Modal","open","onClose","maxWidth","maxHeight","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","Box","display","alignItems","gap","position","right","top","Select","displayEmpty","value","size","renderValue","sx","bgcolor","borderRadius","py","onChange","e","target","map","option","MenuItem","label","IconButton","onClick","Close","fontSize","DialogContent","Suspense","data","content","DialogActions","Button","handleContinue"],"mappings":"+jBAuBA,MAAMA,EAAeC,EAAAA,KAAK,IAAMC,QAAAC,UAAAC,KAAA,WAAA,OAAAC,QAAO,2EAcmB,EACzDC,SACAC,YACAC,aACAC,UACAC,eACAC,aACAC,uBACAC,wBAGA,MAAMC,EAAmB,KACxBP,EAAU;AAOX,OACCQ,EAAAA,KAACC,EAAAA,QAAA,CACAC,KAAMX,EACNY,QAASJ,EACTK,SAAS,KACTC,UAAU,KACVC,WAAS,KACLb,EACJc,SAAA;iBAAAP,KAACQ,EAAAA,YAAA,CAAYC,UAAU,gCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDP,KAACe,EAAAA,IAAA,CAAIC,QAAQ,OAAOC,WAAY,SAAUC,IAAK,EAAGC,SAAS,WAAWC,MAAM,KAAKC,IAAI,MACpFd,SAAA;eAAAG,EAAAA,IAACY,EAAAA,QAAA,CACAC,cAAY,EACZC,MAAM,GACNC,KAAK,QACLC,YAAa,IAAM,kBACnBpB,WAAS,EACTqB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOT,QACZ3B,EAAqBmC,EAAEC,OAAOT,OAC9BQ,EAAEC,OAAOT,MAAQ,KAGlBjB,SAAAZ,EAAauC,IAAKC,wBACjBC,EAAAA,SAAA,CAA4BZ,MAAOW,EAAOX,MAC1CjB,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAA4B,EAAOE,SAD7CF,EAAOX;iBAKxBd,IAAC4B,EAAAA,YAAWC,QAASxC,EACpBQ,8BAACiC,UAAA,CAAMC,SAAS;eAInB/B,EAAAA,IAACgC,EAAAA,cAAA,CAAcjC,UAAU,mCACxBF,wBAAAG,EAAAA,IAACiC,EAAAA,SAAA,CACApC,wBAAAG,EAAAA,IAACzB,EAAA,CAAaa,oBAAsC8C,KAAMlD,EAAQmD;iBAGpEnC,IAACoC,EAAAA,eAAcrC,UAAU,iCACxBF,+BAACQ,EAAAA,IAAA,CAAIC,QAAQ,OAAOE,IAAK,IACxBX,SAAA;eAAAG,MAACqC,EAAAA,QAAA,CAAOtC,UAAU,2CAA2C8B,QAASxC,EAAkBQ,SAAA;eACxFG,MAACqC,EAAAA,SAAOR,QAAUP,GArDC,CAACA,IACvBpC,EAAWoC,IAoDgBgB,CAAehB,GAAIzB,SAAA"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["CustomEditor","lazy","Promise","resolve","then","require","isOpen","setIsOpen","modalProps","section","placeholders","handleSave","handleAddPlaceholder","handleEditorReady","handleModalClose","jsxs","Modal","open","onClose","maxWidth","maxHeight","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","Box","display","alignItems","gap","position","right","top","Select","displayEmpty","value","size","renderValue","sx","bgcolor","borderRadius","py","onChange","e","target","map","option","MenuItem","label","IconButton","onClick","Close","fontSize","DialogContent","Suspense","data","content","DialogActions","Button","handleContinue"],"mappings":"s9BAuBA,MAAMA,EAAeC,EAAAA,KAAK,IAAMC,QAAAC,UAAAC,KAAA,WAAA,OAAAC,QAAO,2EAcmB,EACzDC,SACAC,YACAC,aACAC,UACAC,eACAC,aACAC,uBACAC,wBAGA,MAAMC,EAAmB,KACxBP,EAAU;AAOX,OACCQ,EAAAA,KAACC,EAAAA,QAAA,CACAC,KAAMX,EACNY,QAASJ,EACTK,SAAS,KACTC,UAAU,KACVC,WAAS,KACLb,EACJc,SAAA;iBAAAP,KAACQ,EAAAA,QAAA,CAAYC,UAAU,gCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDP,KAACe,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,WAAY,SAAUC,IAAK,EAAGC,SAAS,WAAWC,MAAM,KAAKC,IAAI,MACpFd,SAAA;eAAAG,EAAAA,IAACY,EAAAA,QAAA,CACAC,cAAY,EACZC,MAAM,GACNC,KAAK,QACLC,YAAa,IAAM,kBACnBpB,WAAS,EACTqB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOT,QACZ3B,EAAqBmC,EAAEC,OAAOT,OAC9BQ,EAAEC,OAAOT,MAAQ,KAGlBjB,SAAAZ,EAAauC,IAAKC,wBACjBC,EAAAA,QAAA,CAA4BZ,MAAOW,EAAOX,MAC1CjB,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAA4B,EAAOE,SAD7CF,EAAOX;iBAKxBd,IAAC4B,EAAAA,SAAWC,QAASxC,EACpBQ,8BAACiC,UAAA,CAAMC,SAAS;eAInB/B,EAAAA,IAACgC,EAAAA,QAAA,CAAcjC,UAAU,mCACxBF,wBAAAG,EAAAA,IAACiC,EAAAA,SAAA,CACApC,wBAAAG,EAAAA,IAACzB,EAAA,CAAaa,oBAAsC8C,KAAMlD,EAAQmD;iBAGpEnC,IAACoC,EAAAA,SAAcrC,UAAU,iCACxBF,+BAACQ,EAAAA,QAAA,CAAIC,QAAQ,OAAOE,IAAK,IACxBX,SAAA;eAAAG,MAACqC,EAAAA,QAAA,CAAOtC,UAAU,2CAA2C8B,QAASxC,EAAkBQ,SAAA;eACxFG,MAACqC,EAAAA,SAAOR,QAAUP,GArDC,CAACA,IACvBpC,EAAWoC,IAoDgBgB,CAAehB,GAAIzB,SAAA"}

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.esm.js

@@ -1,8 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
-import { Box, Skeleton, Fade, Tooltip, IconButton, Divider } from "@mui/material";
-import { ZoomIn, ZoomOut, Refresh } from "@mui/icons-material";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import Skeleton from "../../../../node_modules/@mui/material/Skeleton/Skeleton/index.esm.js";
+import Fade from "../../../../node_modules/@mui/material/Fade/Fade/index.esm.js";
+import Tooltip from "../../../../node_modules/@mui/material/Tooltip/Tooltip/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import ZoomIn from "../../../../node_modules/@mui/icons-material/esm/ZoomIn/index.esm.js";
+import Divider from "../../../../node_modules/@mui/material/Divider/Divider/index.esm.js";
+import ZoomOut from "../../../../node_modules/@mui/icons-material/esm/ZoomOut/index.esm.js";
+import Refresh from "../../../../node_modules/@mui/icons-material/esm/Refresh/index.esm.js";
 import { Trash } from "../../../../components/icons/trash/index.esm.js";
 const HtmlThumbnailPreview = ({
   template,

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\r\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\r\nimport { Trash } from '../../../components/icons';\r\nimport Typography from '../../../components/typography/typography';\r\n\r\nconst HtmlThumbnailPreview = ({ \r\n  template, \r\n  width = 300, \r\n  height = 200, \r\n  scale = 0.25,\r\n  showControls = false,\r\n  onClick = null,\r\n  selectedTemplateId = '',\r\n  isFetching = false,\r\n  onDelete,\r\n  minScale = 0.1,\r\n  maxScale = 1,\r\n  scaleStep = 1.2,\r\n  loadingDelay = 500,\r\n  refreshDelay = 300\r\n}) => {\r\n  const [isLoading, setIsLoading] = useState(isFetching || true);\r\n  const [currentScale, setCurrentScale] = useState(scale);\r\n  const [error, setError] = useState(null);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  const containerRef = useRef(null);\r\n  const contentRef = useRef(null);\r\n  const loadingTimeoutRef = useRef(null);\r\n  const refreshTimeoutRef = useRef(null);\r\n\r\n  // Calculate dimensions based on scale\r\n  const scaledWidth = width / currentScale;\r\n  const scaledHeight = height / currentScale;\r\n\r\n  // Cleanup timeouts on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n      if (refreshTimeoutRef.current) {\r\n        clearTimeout(refreshTimeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  // Handle initial loading\r\n  useEffect(() => {\r\n    if (loadingTimeoutRef.current) {\r\n      clearTimeout(loadingTimeoutRef.current);\r\n    }\r\n    \r\n    loadingTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, loadingDelay);\r\n\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n    };\r\n  }, [template.contents, loadingDelay]);\r\n\r\n  // Handle external loading state\r\n  useEffect(() => {\r\n    setIsLoading(isFetching);\r\n  }, [isFetching]);\r\n\r\n  // Memoized event handlers\r\n  const handleZoomIn = useCallback(() => {\r\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\r\n  }, [scaleStep, maxScale]);\r\n\r\n  const handleZoomOut = useCallback(() => {\r\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\r\n  }, [scaleStep, minScale]);\r\n\r\n  const handleRefresh = useCallback(() => {\r\n    setIsLoading(true);\r\n    setError(null);\r\n    \r\n    if (refreshTimeoutRef.current) {\r\n      clearTimeout(refreshTimeoutRef.current);\r\n    }\r\n    \r\n    refreshTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, refreshDelay);\r\n  }, [refreshDelay]);\r\n\r\n  const handleClick = useCallback(() => {\r\n    if (onClick && !isLoading) {\r\n      onClick(template);\r\n    }\r\n  }, [onClick, template, isLoading]);\r\n\r\n  const handleDelete = useCallback((e) => {\r\n    e.stopPropagation(); // Prevent triggering onClick\r\n    if (onDelete && !template?.is_default) {\r\n      onDelete(template);\r\n    }\r\n  }, [onDelete, template]);\r\n\r\n  const handleMouseEnter = useCallback(() => {\r\n    setIsHovered(true);\r\n  }, []);\r\n\r\n  const handleMouseLeave = useCallback(() => {\r\n    setIsHovered(false);\r\n  }, []);\r\n\r\n  // Loading state\r\n  if (isLoading) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'divider'\r\n        }}\r\n      >\r\n        <Skeleton \r\n          variant=\"rectangular\" \r\n          width=\"100%\" \r\n          height=\"100%\" \r\n          animation=\"wave\"\r\n        />\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  // Error state\r\n  if (error) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'error.main',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          backgroundColor: 'error.light',\r\n          color: 'error.contrastText'\r\n        }}\r\n      >\r\n        Failed to load template\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  const isSelected = selectedTemplateId === template._id;\r\n  const canZoomIn = currentScale < maxScale;\r\n  const canZoomOut = currentScale > minScale;\r\n  const canDelete = !template?.is_default;\r\n\r\n  return (\r\n    <Box \r\n      sx={{ position: 'relative', display: 'inline-block' }}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {/* Main Container */}\r\n      <Box\r\n        ref={containerRef}\r\n        onClick={handleClick}\r\n        sx={(theme) => ({\r\n          width,\r\n          height,\r\n          border: '1px solid',\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          position: 'relative',\r\n          cursor: onClick ? 'pointer' : 'default',\r\n          backgroundColor: '#fff',\r\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n          transition: 'all 0.2s ease-in-out',\r\n          '&:hover': onClick ? {\r\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\r\n            transform: 'translateY(-1px)',\r\n          } : {},\r\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\r\n          borderWidth: isSelected ? 2 : 1,\r\n        })}\r\n      >\r\n        {/* Scaled Content Wrapper */}\r\n        <Box\r\n          sx={{\r\n            width: scaledWidth,\r\n            height: scaledHeight,\r\n            transform: `scale(${currentScale})`,\r\n            transformOrigin: 'top left',\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            overflow: 'hidden',\r\n          }}\r\n        >\r\n          {/* HTML Content */}\r\n          <Box\r\n            ref={contentRef}\r\n            sx={{\r\n              width: '100%',\r\n              height: '100%',\r\n              userSelect: 'none',\r\n              pointerEvents: 'none',\r\n              pt: 2,\r\n              '& *': {\r\n                maxWidth: '100% !important',\r\n                boxSizing: 'border-box !important',\r\n              },\r\n              // Reset common problematic styles\r\n              '& body': {\r\n                margin: '0 !important',\r\n                padding: '0 !important',\r\n                overflow: 'hidden !important',\r\n              },\r\n              // Handle images\r\n              '& img': {\r\n                maxWidth: '100% !important',\r\n                height: 'auto !important',\r\n              },\r\n              // Handle tables\r\n              '& table': {\r\n                width: '100% !important',\r\n                tableLayout: 'fixed !important',\r\n              },\r\n              // Prevent absolute positioning issues\r\n              '& *[style*=\"position: absolute\"]': {\r\n                position: 'relative !important',\r\n              },\r\n              '& .email-container': {\r\n                width: '85% !important',\r\n              }\r\n            }}\r\n            dangerouslySetInnerHTML={{ __html: template.contents }}\r\n          />\r\n        </Box>\r\n\r\n        {/* Loading Overlay */}\r\n        {isLoading && (\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: 0,\r\n              left: 0,\r\n              right: 0,\r\n              bottom: 0,\r\n              backgroundColor: 'rgba(255,255,255,0.8)',\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n              zIndex: 2,\r\n            }}\r\n          >\r\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\r\n          </Box>\r\n        )}\r\n\r\n        {/* Selection Indicator */}\r\n        {template?.is_default && (\r\n          <Box\r\n            sx={(theme) => ({\r\n              position: 'absolute',\r\n              top: 8,\r\n              left: 8,\r\n              width: 12,\r\n              height: 12,\r\n              borderRadius: '50%',\r\n              backgroundColor: theme.palette.theme?.primary[800],\r\n              zIndex: 3,\r\n            })}\r\n          />\r\n        )}\r\n      </Box>\r\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\r\n\r\n      {/* Hover Controls */}\r\n      {showControls && (\r\n        <Fade in={isHovered} timeout={200}>\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: -8,\r\n              right: -8,\r\n              display: 'flex',\r\n              gap: 0.5,\r\n              zIndex: 4,\r\n              backgroundColor: 'rgba(255,255,255,0.95)',\r\n              border: '1px solid',\r\n              borderColor: 'grey.300',\r\n              borderRadius: 2,\r\n              padding: 0.5,\r\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\r\n              backdropFilter: 'blur(4px)',\r\n            }}\r\n          >\r\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomIn}\r\n                  disabled={!canZoomIn}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomIn fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomOut}\r\n                  disabled={!canZoomOut}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomOut fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title=\"Refresh Preview\" arrow>\r\n              <IconButton\r\n                size=\"small\"\r\n                onClick={handleRefresh}\r\n                sx={{\r\n                  backgroundColor: 'transparent',\r\n                  '&:hover': { \r\n                    backgroundColor: 'primary.light',\r\n                    color: 'primary.contrastText' \r\n                  },\r\n                }}\r\n              >\r\n                <Refresh fontSize=\"small\" />\r\n              </IconButton>\r\n            </Tooltip>\r\n\r\n            {onDelete && (\r\n              <>\r\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n                <Tooltip \r\n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \r\n                  arrow\r\n                >\r\n                  <span>\r\n                    <IconButton\r\n                      size=\"small\"\r\n                      onClick={handleDelete}\r\n                      disabled={!canDelete}\r\n                      sx={{\r\n                        backgroundColor: 'transparent',\r\n                        '&:hover': !canDelete ? {} : { \r\n                          backgroundColor: 'error.light',\r\n                          color: 'error.contrastText' \r\n                        },\r\n                        '&:disabled': {\r\n                          opacity: 0.5\r\n                        }\r\n                      }}\r\n                    >\r\n                      <Trash fontSize=\"small\" />\r\n                    </IconButton>\r\n                  </span>\r\n                </Tooltip>\r\n              </>\r\n            )}\r\n          </Box>\r\n        </Fade>\r\n      )}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\r\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\r\nimport { Trash } from '../../../components/icons';\r\nimport Typography from '../../../components/typography/typography';\r\n\r\nconst HtmlThumbnailPreview = ({ \r\n  template, \r\n  width = 300, \r\n  height = 200, \r\n  scale = 0.25,\r\n  showControls = false,\r\n  onClick = null,\r\n  selectedTemplateId = '',\r\n  isFetching = false,\r\n  onDelete,\r\n  minScale = 0.1,\r\n  maxScale = 1,\r\n  scaleStep = 1.2,\r\n  loadingDelay = 500,\r\n  refreshDelay = 300\r\n}) => {\r\n  const [isLoading, setIsLoading] = useState(isFetching || true);\r\n  const [currentScale, setCurrentScale] = useState(scale);\r\n  const [error, setError] = useState(null);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  const containerRef = useRef(null);\r\n  const contentRef = useRef(null);\r\n  const loadingTimeoutRef = useRef(null);\r\n  const refreshTimeoutRef = useRef(null);\r\n\r\n  // Calculate dimensions based on scale\r\n  const scaledWidth = width / currentScale;\r\n  const scaledHeight = height / currentScale;\r\n\r\n  // Cleanup timeouts on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n      if (refreshTimeoutRef.current) {\r\n        clearTimeout(refreshTimeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  // Handle initial loading\r\n  useEffect(() => {\r\n    if (loadingTimeoutRef.current) {\r\n      clearTimeout(loadingTimeoutRef.current);\r\n    }\r\n    \r\n    loadingTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, loadingDelay);\r\n\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n    };\r\n  }, [template.contents, loadingDelay]);\r\n\r\n  // Handle external loading state\r\n  useEffect(() => {\r\n    setIsLoading(isFetching);\r\n  }, [isFetching]);\r\n\r\n  // Memoized event handlers\r\n  const handleZoomIn = useCallback(() => {\r\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\r\n  }, [scaleStep, maxScale]);\r\n\r\n  const handleZoomOut = useCallback(() => {\r\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\r\n  }, [scaleStep, minScale]);\r\n\r\n  const handleRefresh = useCallback(() => {\r\n    setIsLoading(true);\r\n    setError(null);\r\n    \r\n    if (refreshTimeoutRef.current) {\r\n      clearTimeout(refreshTimeoutRef.current);\r\n    }\r\n    \r\n    refreshTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, refreshDelay);\r\n  }, [refreshDelay]);\r\n\r\n  const handleClick = useCallback(() => {\r\n    if (onClick && !isLoading) {\r\n      onClick(template);\r\n    }\r\n  }, [onClick, template, isLoading]);\r\n\r\n  const handleDelete = useCallback((e) => {\r\n    e.stopPropagation(); // Prevent triggering onClick\r\n    if (onDelete && !template?.is_default) {\r\n      onDelete(template);\r\n    }\r\n  }, [onDelete, template]);\r\n\r\n  const handleMouseEnter = useCallback(() => {\r\n    setIsHovered(true);\r\n  }, []);\r\n\r\n  const handleMouseLeave = useCallback(() => {\r\n    setIsHovered(false);\r\n  }, []);\r\n\r\n  // Loading state\r\n  if (isLoading) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'divider'\r\n        }}\r\n      >\r\n        <Skeleton \r\n          variant=\"rectangular\" \r\n          width=\"100%\" \r\n          height=\"100%\" \r\n          animation=\"wave\"\r\n        />\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  // Error state\r\n  if (error) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'error.main',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          backgroundColor: 'error.light',\r\n          color: 'error.contrastText'\r\n        }}\r\n      >\r\n        Failed to load template\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  const isSelected = selectedTemplateId === template._id;\r\n  const canZoomIn = currentScale < maxScale;\r\n  const canZoomOut = currentScale > minScale;\r\n  const canDelete = !template?.is_default;\r\n\r\n  return (\r\n    <Box \r\n      sx={{ position: 'relative', display: 'inline-block' }}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {/* Main Container */}\r\n      <Box\r\n        ref={containerRef}\r\n        onClick={handleClick}\r\n        sx={(theme) => ({\r\n          width,\r\n          height,\r\n          border: '1px solid',\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          position: 'relative',\r\n          cursor: onClick ? 'pointer' : 'default',\r\n          backgroundColor: '#fff',\r\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n          transition: 'all 0.2s ease-in-out',\r\n          '&:hover': onClick ? {\r\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\r\n            transform: 'translateY(-1px)',\r\n          } : {},\r\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\r\n          borderWidth: isSelected ? 2 : 1,\r\n        })}\r\n      >\r\n        {/* Scaled Content Wrapper */}\r\n        <Box\r\n          sx={{\r\n            width: scaledWidth,\r\n            height: scaledHeight,\r\n            transform: `scale(${currentScale})`,\r\n            transformOrigin: 'top left',\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            overflow: 'hidden',\r\n          }}\r\n        >\r\n          {/* HTML Content */}\r\n          <Box\r\n            ref={contentRef}\r\n            sx={{\r\n              width: '100%',\r\n              height: '100%',\r\n              userSelect: 'none',\r\n              pointerEvents: 'none',\r\n              pt: 2,\r\n              '& *': {\r\n                maxWidth: '100% !important',\r\n                boxSizing: 'border-box !important',\r\n              },\r\n              // Reset common problematic styles\r\n              '& body': {\r\n                margin: '0 !important',\r\n                padding: '0 !important',\r\n                overflow: 'hidden !important',\r\n              },\r\n              // Handle images\r\n              '& img': {\r\n                maxWidth: '100% !important',\r\n                height: 'auto !important',\r\n              },\r\n              // Handle tables\r\n              '& table': {\r\n                width: '100% !important',\r\n                tableLayout: 'fixed !important',\r\n              },\r\n              // Prevent absolute positioning issues\r\n              '& *[style*=\"position: absolute\"]': {\r\n                position: 'relative !important',\r\n              },\r\n              '& .email-container': {\r\n                width: '85% !important',\r\n              }\r\n            }}\r\n            dangerouslySetInnerHTML={{ __html: template.contents }}\r\n          />\r\n        </Box>\r\n\r\n        {/* Loading Overlay */}\r\n        {isLoading && (\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: 0,\r\n              left: 0,\r\n              right: 0,\r\n              bottom: 0,\r\n              backgroundColor: 'rgba(255,255,255,0.8)',\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n              zIndex: 2,\r\n            }}\r\n          >\r\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\r\n          </Box>\r\n        )}\r\n\r\n        {/* Selection Indicator */}\r\n        {template?.is_default && (\r\n          <Box\r\n            sx={(theme) => ({\r\n              position: 'absolute',\r\n              top: 8,\r\n              left: 8,\r\n              width: 12,\r\n              height: 12,\r\n              borderRadius: '50%',\r\n              backgroundColor: theme.palette.theme?.primary[800],\r\n              zIndex: 3,\r\n            })}\r\n          />\r\n        )}\r\n      </Box>\r\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\r\n\r\n      {/* Hover Controls */}\r\n      {showControls && (\r\n        <Fade in={isHovered} timeout={200}>\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: -8,\r\n              right: -8,\r\n              display: 'flex',\r\n              gap: 0.5,\r\n              zIndex: 4,\r\n              backgroundColor: 'rgba(255,255,255,0.95)',\r\n              border: '1px solid',\r\n              borderColor: 'grey.300',\r\n              borderRadius: 2,\r\n              padding: 0.5,\r\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\r\n              backdropFilter: 'blur(4px)',\r\n            }}\r\n          >\r\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomIn}\r\n                  disabled={!canZoomIn}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomIn fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomOut}\r\n                  disabled={!canZoomOut}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomOut fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title=\"Refresh Preview\" arrow>\r\n              <IconButton\r\n                size=\"small\"\r\n                onClick={handleRefresh}\r\n                sx={{\r\n                  backgroundColor: 'transparent',\r\n                  '&:hover': { \r\n                    backgroundColor: 'primary.light',\r\n                    color: 'primary.contrastText' \r\n                  },\r\n                }}\r\n              >\r\n                <Refresh fontSize=\"small\" />\r\n              </IconButton>\r\n            </Tooltip>\r\n\r\n            {onDelete && (\r\n              <>\r\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n                <Tooltip \r\n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \r\n                  arrow\r\n                >\r\n                  <span>\r\n                    <IconButton\r\n                      size=\"small\"\r\n                      onClick={handleDelete}\r\n                      disabled={!canDelete}\r\n                      sx={{\r\n                        backgroundColor: 'transparent',\r\n                        '&:hover': !canDelete ? {} : { \r\n                          backgroundColor: 'error.light',\r\n                          color: 'error.contrastText' \r\n                        },\r\n                        '&:disabled': {\r\n                          opacity: 0.5\r\n                        }\r\n                      }}\r\n                    >\r\n                      <Trash fontSize=\"small\" />\r\n                    </IconButton>\r\n                  </span>\r\n                </Tooltip>\r\n              </>\r\n            )}\r\n          </Box>\r\n        </Fade>\r\n      )}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":"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"}

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.js

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),o=require("@mui/icons-material"),i=require("../../../../components/typography/typography/index.js"),l=require("../../../../components/icons/trash/index.js");exports.default=({template:n,width:a=300,height:s=200,scale:d=.25,showControls:c=!1,onClick:u=null,selectedTemplateId:h="",isFetching:x=!1,onDelete:p,minScale:m=.1,maxScale:b=1,scaleStep:g=1.2,loadingDelay:f=500,refreshDelay:j=300})=>{const[v,y]=r.useState(x||!0),[C,k]=r.useState(d),[w,T]=r.useState(null),[S,I]=r.useState(!1),B=r.useRef(null),z=r.useRef(null),R=r.useRef(null),M=r.useRef(null),_=a/C,D=s/C;r.useEffect(()=>()=>{R.current&&clearTimeout(R.current),M.current&&clearTimeout(M.current)},[]),r.useEffect(()=>(R.current&&clearTimeout(R.current),R.current=setTimeout(()=>{y(!1)},f),()=>{R.current&&clearTimeout(R.current)}),[n.contents,f]),r.useEffect(()=>{y(x)},[x]);const q=r.useCallback(()=>{k(e=>Math.min(e*g,b))},[g,b]),E=r.useCallback(()=>{k(e=>Math.max(e/g,m))},[g,m]),F=r.useCallback(()=>{y(!0),T(null),M.current&&clearTimeout(M.current),M.current=setTimeout(()=>{y(!1)},j)},[j]),O=r.useCallback(()=>{u&&!v&&u(n)},[u,n,v]),Z=r.useCallback(e=>{e.stopPropagation(),p&&!(null==n?void 0:n.is_default)&&p(n)},[p,n]),L=r.useCallback(()=>{I(!0)},[]),P=r.useCallback(()=>{I(!1)},[]);if(v)/* @__PURE__ */
-return e.jsx(t.Box,{sx:{width:a,height:s,borderRadius:1,overflow:"hidden",border:"1px solid",borderColor:"divider"},children:/* @__PURE__ */e.jsx(t.Skeleton,{variant:"rectangular",width:"100%",height:"100%",animation:"wave"})});if(w)/* @__PURE__ */
-return e.jsx(t.Box,{sx:{width:a,height:s,borderRadius:1,overflow:"hidden",border:"1px solid",borderColor:"error.main",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"error.light",color:"error.contrastText"},children:"Failed to load template"});const W=h===n._id,$=C<b,H=C>m,Y=!(null==n?void 0:n.is_default);/* @__PURE__ */
-return e.jsxs(t.Box,{sx:{position:"relative",display:"inline-block"},onMouseEnter:L,onMouseLeave:P,children:[
-/* @__PURE__ */e.jsxs(t.Box,{ref:B,onClick:O,sx:e=>({width:a,height:s,border:"1px solid",borderRadius:1,overflow:"hidden",position:"relative",cursor:u?"pointer":"default",backgroundColor:"#fff",transition:"all 0.2s ease-in-out","&:hover":u?{boxShadow:"0 4px 16px rgba(0,0,0,0.15)",transform:"translateY(-1px)"}:{},borderColor:W?e.palette.theme.primary[800]:"grey.300",borderWidth:W?2:1}),children:[
-/* @__PURE__ */e.jsx(t.Box,{sx:{width:_,height:D,transform:`scale(${C})`,transformOrigin:"top left",position:"absolute",top:0,left:0,overflow:"hidden"},children:/* @__PURE__ */e.jsx(t.Box,{ref:z,sx:{width:"100%",height:"100%",userSelect:"none",pointerEvents:"none",pt:2,"& *":{maxWidth:"100% !important",boxSizing:"border-box !important"},"& body":{margin:"0 !important",padding:"0 !important",overflow:"hidden !important"},"& img":{maxWidth:"100% !important",height:"auto !important"},"& table":{width:"100% !important",tableLayout:"fixed !important"},'& *[style*="position: absolute"]':{position:"relative !important"},"& .email-container":{width:"85% !important"}},dangerouslySetInnerHTML:{__html:n.contents}})}),v&&/* @__PURE__ */e.jsx(t.Box,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255,255,255,0.8)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:2},children:/* @__PURE__ */e.jsx(t.Skeleton,{variant:"rectangular",width:"90%",height:"90%"})}),(null==n?void 0:n.is_default)&&/* @__PURE__ */e.jsx(t.Box,{sx:e=>{var r;return{position:"absolute",top:8,left:8,width:12,height:12,borderRadius:"50%",backgroundColor:null==(r=e.palette.theme)?void 0:r.primary[800],zIndex:3}}})]}),(null==n?void 0:n.name)&&/* @__PURE__ */e.jsx(i.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",align:"center",sx:{width:a,mt:.5},children:null==n?void 0:n.name}),c&&/* @__PURE__ */e.jsx(t.Fade,{in:S,timeout:200,children:/* @__PURE__ */e.jsxs(t.Box,{sx:{position:"absolute",top:-8,right:-8,display:"flex",gap:.5,zIndex:4,backgroundColor:"rgba(255,255,255,0.95)",border:"1px solid",borderColor:"grey.300",borderRadius:2,padding:.5,boxShadow:"0 4px 12px rgba(0,0,0,0.15)",backdropFilter:"blur(4px)"},children:[
-/* @__PURE__ */e.jsx(t.Tooltip,{title:`Zoom In (${Math.round(100*C)}%)`,arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(t.IconButton,{size:"small",onClick:q,disabled:!$,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(o.ZoomIn,{fontSize:"small"})})})}),
-/* @__PURE__ */e.jsx(t.Divider,{orientation:"vertical",variant:"middle",flexItem:!0}),
-/* @__PURE__ */e.jsx(t.Tooltip,{title:`Zoom Out (${Math.round(100*C)}%)`,arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(t.IconButton,{size:"small",onClick:E,disabled:!H,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(o.ZoomOut,{fontSize:"small"})})})}),
-/* @__PURE__ */e.jsx(t.Divider,{orientation:"vertical",variant:"middle",flexItem:!0}),
-/* @__PURE__ */e.jsx(t.Tooltip,{title:"Refresh Preview",arrow:!0,children:/* @__PURE__ */e.jsx(t.IconButton,{size:"small",onClick:F,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"}},children:/* @__PURE__ */e.jsx(o.Refresh,{fontSize:"small"})})}),p&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(t.Divider,{orientation:"vertical",variant:"middle",flexItem:!0}),
-/* @__PURE__ */e.jsx(t.Tooltip,{title:Y?"Delete Template":"Cannot delete default template",arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(t.IconButton,{size:"small",onClick:Z,disabled:!Y,sx:{backgroundColor:"transparent","&:hover":Y?{backgroundColor:"error.light",color:"error.contrastText"}:{},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(l.Trash,{fontSize:"small"})})})})]})]})})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../components/typography/typography/index.js"),o=require("../../../../node_modules/@mui/material/Box/Box/index.js"),i=require("../../../../node_modules/@mui/material/Skeleton/Skeleton/index.js"),l=require("../../../../node_modules/@mui/material/Fade/Fade/index.js"),a=require("../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),n=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),d=require("../../../../node_modules/@mui/icons-material/esm/ZoomIn/index.js"),s=require("../../../../node_modules/@mui/material/Divider/Divider/index.js"),u=require("../../../../node_modules/@mui/icons-material/esm/ZoomOut/index.js"),c=require("../../../../node_modules/@mui/icons-material/esm/Refresh/index.js"),m=require("../../../../components/icons/trash/index.js");exports.default=({template:x,width:h=300,height:p=200,scale:f=.25,showControls:b=!1,onClick:g=null,selectedTemplateId:j="",isFetching:v=!1,onDelete:y,minScale:C=.1,maxScale:k=1,scaleStep:w=1.2,loadingDelay:T=500,refreshDelay:S=300})=>{const[_,I]=t.useState(v||!0),[q,z]=t.useState(f),[R,M]=t.useState(null),[D,F]=t.useState(!1),E=t.useRef(null),B=t.useRef(null),O=t.useRef(null),Z=t.useRef(null),L=h/q,P=p/q;t.useEffect(()=>()=>{O.current&&clearTimeout(O.current),Z.current&&clearTimeout(Z.current)},[]),t.useEffect(()=>(O.current&&clearTimeout(O.current),O.current=setTimeout(()=>{I(!1)},T),()=>{O.current&&clearTimeout(O.current)}),[x.contents,T]),t.useEffect(()=>{I(v)},[v]);const W=t.useCallback(()=>{z(e=>Math.min(e*w,k))},[w,k]),$=t.useCallback(()=>{z(e=>Math.max(e/w,C))},[w,C]),H=t.useCallback(()=>{I(!0),M(null),Z.current&&clearTimeout(Z.current),Z.current=setTimeout(()=>{I(!1)},S)},[S]),Y=t.useCallback(()=>{g&&!_&&g(x)},[g,x,_]),A=t.useCallback(e=>{e.stopPropagation(),y&&!(null==x?void 0:x.is_default)&&y(x)},[y,x]),G=t.useCallback(()=>{F(!0)},[]),J=t.useCallback(()=>{F(!1)},[]);if(_)/* @__PURE__ */
+return e.jsx(o.default,{sx:{width:h,height:p,borderRadius:1,overflow:"hidden",border:"1px solid",borderColor:"divider"},children:/* @__PURE__ */e.jsx(i.default,{variant:"rectangular",width:"100%",height:"100%",animation:"wave"})});if(R)/* @__PURE__ */
+return e.jsx(o.default,{sx:{width:h,height:p,borderRadius:1,overflow:"hidden",border:"1px solid",borderColor:"error.main",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"error.light",color:"error.contrastText"},children:"Failed to load template"});const K=j===x._id,N=q<k,Q=q>C,U=!(null==x?void 0:x.is_default);/* @__PURE__ */
+return e.jsxs(o.default,{sx:{position:"relative",display:"inline-block"},onMouseEnter:G,onMouseLeave:J,children:[
+/* @__PURE__ */e.jsxs(o.default,{ref:E,onClick:Y,sx:e=>({width:h,height:p,border:"1px solid",borderRadius:1,overflow:"hidden",position:"relative",cursor:g?"pointer":"default",backgroundColor:"#fff",transition:"all 0.2s ease-in-out","&:hover":g?{boxShadow:"0 4px 16px rgba(0,0,0,0.15)",transform:"translateY(-1px)"}:{},borderColor:K?e.palette.theme.primary[800]:"grey.300",borderWidth:K?2:1}),children:[
+/* @__PURE__ */e.jsx(o.default,{sx:{width:L,height:P,transform:`scale(${q})`,transformOrigin:"top left",position:"absolute",top:0,left:0,overflow:"hidden"},children:/* @__PURE__ */e.jsx(o.default,{ref:B,sx:{width:"100%",height:"100%",userSelect:"none",pointerEvents:"none",pt:2,"& *":{maxWidth:"100% !important",boxSizing:"border-box !important"},"& body":{margin:"0 !important",padding:"0 !important",overflow:"hidden !important"},"& img":{maxWidth:"100% !important",height:"auto !important"},"& table":{width:"100% !important",tableLayout:"fixed !important"},'& *[style*="position: absolute"]':{position:"relative !important"},"& .email-container":{width:"85% !important"}},dangerouslySetInnerHTML:{__html:x.contents}})}),_&&/* @__PURE__ */e.jsx(o.default,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255,255,255,0.8)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:2},children:/* @__PURE__ */e.jsx(i.default,{variant:"rectangular",width:"90%",height:"90%"})}),(null==x?void 0:x.is_default)&&/* @__PURE__ */e.jsx(o.default,{sx:e=>{var t;return{position:"absolute",top:8,left:8,width:12,height:12,borderRadius:"50%",backgroundColor:null==(t=e.palette.theme)?void 0:t.primary[800],zIndex:3}}})]}),(null==x?void 0:x.name)&&/* @__PURE__ */e.jsx(r.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",align:"center",sx:{width:h,mt:.5},children:null==x?void 0:x.name}),b&&/* @__PURE__ */e.jsx(l.default,{in:D,timeout:200,children:/* @__PURE__ */e.jsxs(o.default,{sx:{position:"absolute",top:-8,right:-8,display:"flex",gap:.5,zIndex:4,backgroundColor:"rgba(255,255,255,0.95)",border:"1px solid",borderColor:"grey.300",borderRadius:2,padding:.5,boxShadow:"0 4px 12px rgba(0,0,0,0.15)",backdropFilter:"blur(4px)"},children:[
+/* @__PURE__ */e.jsx(a.default,{title:`Zoom In (${Math.round(100*q)}%)`,arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:W,disabled:!N,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(d.default,{fontSize:"small"})})})}),
+/* @__PURE__ */e.jsx(s.default,{orientation:"vertical",variant:"middle",flexItem:!0}),
+/* @__PURE__ */e.jsx(a.default,{title:`Zoom Out (${Math.round(100*q)}%)`,arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:$,disabled:!Q,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(u.default,{fontSize:"small"})})})}),
+/* @__PURE__ */e.jsx(s.default,{orientation:"vertical",variant:"middle",flexItem:!0}),
+/* @__PURE__ */e.jsx(a.default,{title:"Refresh Preview",arrow:!0,children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:H,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"}},children:/* @__PURE__ */e.jsx(c.default,{fontSize:"small"})})}),y&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(s.default,{orientation:"vertical",variant:"middle",flexItem:!0}),
+/* @__PURE__ */e.jsx(a.default,{title:U?"Delete Template":"Cannot delete default template",arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:A,disabled:!U,sx:{backgroundColor:"transparent","&:hover":U?{backgroundColor:"error.light",color:"error.contrastText"}:{},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(m.Trash,{fontSize:"small"})})})})]})]})})]})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\r\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\r\nimport { Trash } from '../../../components/icons';\r\nimport Typography from '../../../components/typography/typography';\r\n\r\nconst HtmlThumbnailPreview = ({ \r\n  template, \r\n  width = 300, \r\n  height = 200, \r\n  scale = 0.25,\r\n  showControls = false,\r\n  onClick = null,\r\n  selectedTemplateId = '',\r\n  isFetching = false,\r\n  onDelete,\r\n  minScale = 0.1,\r\n  maxScale = 1,\r\n  scaleStep = 1.2,\r\n  loadingDelay = 500,\r\n  refreshDelay = 300\r\n}) => {\r\n  const [isLoading, setIsLoading] = useState(isFetching || true);\r\n  const [currentScale, setCurrentScale] = useState(scale);\r\n  const [error, setError] = useState(null);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  const containerRef = useRef(null);\r\n  const contentRef = useRef(null);\r\n  const loadingTimeoutRef = useRef(null);\r\n  const refreshTimeoutRef = useRef(null);\r\n\r\n  // Calculate dimensions based on scale\r\n  const scaledWidth = width / currentScale;\r\n  const scaledHeight = height / currentScale;\r\n\r\n  // Cleanup timeouts on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n      if (refreshTimeoutRef.current) {\r\n        clearTimeout(refreshTimeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  // Handle initial loading\r\n  useEffect(() => {\r\n    if (loadingTimeoutRef.current) {\r\n      clearTimeout(loadingTimeoutRef.current);\r\n    }\r\n    \r\n    loadingTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, loadingDelay);\r\n\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n    };\r\n  }, [template.contents, loadingDelay]);\r\n\r\n  // Handle external loading state\r\n  useEffect(() => {\r\n    setIsLoading(isFetching);\r\n  }, [isFetching]);\r\n\r\n  // Memoized event handlers\r\n  const handleZoomIn = useCallback(() => {\r\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\r\n  }, [scaleStep, maxScale]);\r\n\r\n  const handleZoomOut = useCallback(() => {\r\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\r\n  }, [scaleStep, minScale]);\r\n\r\n  const handleRefresh = useCallback(() => {\r\n    setIsLoading(true);\r\n    setError(null);\r\n    \r\n    if (refreshTimeoutRef.current) {\r\n      clearTimeout(refreshTimeoutRef.current);\r\n    }\r\n    \r\n    refreshTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, refreshDelay);\r\n  }, [refreshDelay]);\r\n\r\n  const handleClick = useCallback(() => {\r\n    if (onClick && !isLoading) {\r\n      onClick(template);\r\n    }\r\n  }, [onClick, template, isLoading]);\r\n\r\n  const handleDelete = useCallback((e) => {\r\n    e.stopPropagation(); // Prevent triggering onClick\r\n    if (onDelete && !template?.is_default) {\r\n      onDelete(template);\r\n    }\r\n  }, [onDelete, template]);\r\n\r\n  const handleMouseEnter = useCallback(() => {\r\n    setIsHovered(true);\r\n  }, []);\r\n\r\n  const handleMouseLeave = useCallback(() => {\r\n    setIsHovered(false);\r\n  }, []);\r\n\r\n  // Loading state\r\n  if (isLoading) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'divider'\r\n        }}\r\n      >\r\n        <Skeleton \r\n          variant=\"rectangular\" \r\n          width=\"100%\" \r\n          height=\"100%\" \r\n          animation=\"wave\"\r\n        />\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  // Error state\r\n  if (error) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'error.main',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          backgroundColor: 'error.light',\r\n          color: 'error.contrastText'\r\n        }}\r\n      >\r\n        Failed to load template\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  const isSelected = selectedTemplateId === template._id;\r\n  const canZoomIn = currentScale < maxScale;\r\n  const canZoomOut = currentScale > minScale;\r\n  const canDelete = !template?.is_default;\r\n\r\n  return (\r\n    <Box \r\n      sx={{ position: 'relative', display: 'inline-block' }}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {/* Main Container */}\r\n      <Box\r\n        ref={containerRef}\r\n        onClick={handleClick}\r\n        sx={(theme) => ({\r\n          width,\r\n          height,\r\n          border: '1px solid',\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          position: 'relative',\r\n          cursor: onClick ? 'pointer' : 'default',\r\n          backgroundColor: '#fff',\r\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n          transition: 'all 0.2s ease-in-out',\r\n          '&:hover': onClick ? {\r\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\r\n            transform: 'translateY(-1px)',\r\n          } : {},\r\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\r\n          borderWidth: isSelected ? 2 : 1,\r\n        })}\r\n      >\r\n        {/* Scaled Content Wrapper */}\r\n        <Box\r\n          sx={{\r\n            width: scaledWidth,\r\n            height: scaledHeight,\r\n            transform: `scale(${currentScale})`,\r\n            transformOrigin: 'top left',\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            overflow: 'hidden',\r\n          }}\r\n        >\r\n          {/* HTML Content */}\r\n          <Box\r\n            ref={contentRef}\r\n            sx={{\r\n              width: '100%',\r\n              height: '100%',\r\n              userSelect: 'none',\r\n              pointerEvents: 'none',\r\n              pt: 2,\r\n              '& *': {\r\n                maxWidth: '100% !important',\r\n                boxSizing: 'border-box !important',\r\n              },\r\n              // Reset common problematic styles\r\n              '& body': {\r\n                margin: '0 !important',\r\n                padding: '0 !important',\r\n                overflow: 'hidden !important',\r\n              },\r\n              // Handle images\r\n              '& img': {\r\n                maxWidth: '100% !important',\r\n                height: 'auto !important',\r\n              },\r\n              // Handle tables\r\n              '& table': {\r\n                width: '100% !important',\r\n                tableLayout: 'fixed !important',\r\n              },\r\n              // Prevent absolute positioning issues\r\n              '& *[style*=\"position: absolute\"]': {\r\n                position: 'relative !important',\r\n              },\r\n              '& .email-container': {\r\n                width: '85% !important',\r\n              }\r\n            }}\r\n            dangerouslySetInnerHTML={{ __html: template.contents }}\r\n          />\r\n        </Box>\r\n\r\n        {/* Loading Overlay */}\r\n        {isLoading && (\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: 0,\r\n              left: 0,\r\n              right: 0,\r\n              bottom: 0,\r\n              backgroundColor: 'rgba(255,255,255,0.8)',\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n              zIndex: 2,\r\n            }}\r\n          >\r\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\r\n          </Box>\r\n        )}\r\n\r\n        {/* Selection Indicator */}\r\n        {template?.is_default && (\r\n          <Box\r\n            sx={(theme) => ({\r\n              position: 'absolute',\r\n              top: 8,\r\n              left: 8,\r\n              width: 12,\r\n              height: 12,\r\n              borderRadius: '50%',\r\n              backgroundColor: theme.palette.theme?.primary[800],\r\n              zIndex: 3,\r\n            })}\r\n          />\r\n        )}\r\n      </Box>\r\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\r\n\r\n      {/* Hover Controls */}\r\n      {showControls && (\r\n        <Fade in={isHovered} timeout={200}>\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: -8,\r\n              right: -8,\r\n              display: 'flex',\r\n              gap: 0.5,\r\n              zIndex: 4,\r\n              backgroundColor: 'rgba(255,255,255,0.95)',\r\n              border: '1px solid',\r\n              borderColor: 'grey.300',\r\n              borderRadius: 2,\r\n              padding: 0.5,\r\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\r\n              backdropFilter: 'blur(4px)',\r\n            }}\r\n          >\r\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomIn}\r\n                  disabled={!canZoomIn}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomIn fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomOut}\r\n                  disabled={!canZoomOut}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomOut fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title=\"Refresh Preview\" arrow>\r\n              <IconButton\r\n                size=\"small\"\r\n                onClick={handleRefresh}\r\n                sx={{\r\n                  backgroundColor: 'transparent',\r\n                  '&:hover': { \r\n                    backgroundColor: 'primary.light',\r\n                    color: 'primary.contrastText' \r\n                  },\r\n                }}\r\n              >\r\n                <Refresh fontSize=\"small\" />\r\n              </IconButton>\r\n            </Tooltip>\r\n\r\n            {onDelete && (\r\n              <>\r\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n                <Tooltip \r\n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \r\n                  arrow\r\n                >\r\n                  <span>\r\n                    <IconButton\r\n                      size=\"small\"\r\n                      onClick={handleDelete}\r\n                      disabled={!canDelete}\r\n                      sx={{\r\n                        backgroundColor: 'transparent',\r\n                        '&:hover': !canDelete ? {} : { \r\n                          backgroundColor: 'error.light',\r\n                          color: 'error.contrastText' \r\n                        },\r\n                        '&:disabled': {\r\n                          opacity: 0.5\r\n                        }\r\n                      }}\r\n                    >\r\n                      <Trash fontSize=\"small\" />\r\n                    </IconButton>\r\n                  </span>\r\n                </Tooltip>\r\n              </>\r\n            )}\r\n          </Box>\r\n        </Fade>\r\n      )}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default HtmlThumbnailPreview;"],"names":["template","width","height","scale","showControls","onClick","selectedTemplateId","isFetching","onDelete","minScale","maxScale","scaleStep","loadingDelay","refreshDelay","isLoading","setIsLoading","useState","currentScale","setCurrentScale","error","setError","isHovered","setIsHovered","containerRef","useRef","contentRef","loadingTimeoutRef","refreshTimeoutRef","scaledWidth","scaledHeight","useEffect","current","clearTimeout","setTimeout","contents","handleZoomIn","useCallback","Math","min","prev","handleZoomOut","max","handleRefresh","handleClick","handleDelete","e","stopPropagation","is_default","handleMouseEnter","handleMouseLeave","jsx","Box","sx","borderRadius","overflow","border","borderColor","children","Skeleton","variant","animation","display","alignItems","justifyContent","backgroundColor","color","isSelected","_id","canZoomIn","canZoomOut","canDelete","jsxs","position","onMouseEnter","onMouseLeave","ref","theme","cursor","transition","boxShadow","transform","palette","primary","borderWidth","transformOrigin","top","left","userSelect","pointerEvents","pt","maxWidth","boxSizing","margin","padding","tableLayout","dangerouslySetInnerHTML","__html","right","bottom","zIndex","_a","name","Typography","type","weight","align","mt","Fade","in","timeout","gap","backdropFilter","Tooltip","title","round","arrow","IconButton","size","disabled","opacity","ZoomIn","fontSize","Divider","orientation","flexItem","ZoomOut","Refresh","Fragment","Trash"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\r\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\r\nimport { Trash } from '../../../components/icons';\r\nimport Typography from '../../../components/typography/typography';\r\n\r\nconst HtmlThumbnailPreview = ({ \r\n  template, \r\n  width = 300, \r\n  height = 200, \r\n  scale = 0.25,\r\n  showControls = false,\r\n  onClick = null,\r\n  selectedTemplateId = '',\r\n  isFetching = false,\r\n  onDelete,\r\n  minScale = 0.1,\r\n  maxScale = 1,\r\n  scaleStep = 1.2,\r\n  loadingDelay = 500,\r\n  refreshDelay = 300\r\n}) => {\r\n  const [isLoading, setIsLoading] = useState(isFetching || true);\r\n  const [currentScale, setCurrentScale] = useState(scale);\r\n  const [error, setError] = useState(null);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  const containerRef = useRef(null);\r\n  const contentRef = useRef(null);\r\n  const loadingTimeoutRef = useRef(null);\r\n  const refreshTimeoutRef = useRef(null);\r\n\r\n  // Calculate dimensions based on scale\r\n  const scaledWidth = width / currentScale;\r\n  const scaledHeight = height / currentScale;\r\n\r\n  // Cleanup timeouts on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n      if (refreshTimeoutRef.current) {\r\n        clearTimeout(refreshTimeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  // Handle initial loading\r\n  useEffect(() => {\r\n    if (loadingTimeoutRef.current) {\r\n      clearTimeout(loadingTimeoutRef.current);\r\n    }\r\n    \r\n    loadingTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, loadingDelay);\r\n\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n    };\r\n  }, [template.contents, loadingDelay]);\r\n\r\n  // Handle external loading state\r\n  useEffect(() => {\r\n    setIsLoading(isFetching);\r\n  }, [isFetching]);\r\n\r\n  // Memoized event handlers\r\n  const handleZoomIn = useCallback(() => {\r\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\r\n  }, [scaleStep, maxScale]);\r\n\r\n  const handleZoomOut = useCallback(() => {\r\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\r\n  }, [scaleStep, minScale]);\r\n\r\n  const handleRefresh = useCallback(() => {\r\n    setIsLoading(true);\r\n    setError(null);\r\n    \r\n    if (refreshTimeoutRef.current) {\r\n      clearTimeout(refreshTimeoutRef.current);\r\n    }\r\n    \r\n    refreshTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, refreshDelay);\r\n  }, [refreshDelay]);\r\n\r\n  const handleClick = useCallback(() => {\r\n    if (onClick && !isLoading) {\r\n      onClick(template);\r\n    }\r\n  }, [onClick, template, isLoading]);\r\n\r\n  const handleDelete = useCallback((e) => {\r\n    e.stopPropagation(); // Prevent triggering onClick\r\n    if (onDelete && !template?.is_default) {\r\n      onDelete(template);\r\n    }\r\n  }, [onDelete, template]);\r\n\r\n  const handleMouseEnter = useCallback(() => {\r\n    setIsHovered(true);\r\n  }, []);\r\n\r\n  const handleMouseLeave = useCallback(() => {\r\n    setIsHovered(false);\r\n  }, []);\r\n\r\n  // Loading state\r\n  if (isLoading) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'divider'\r\n        }}\r\n      >\r\n        <Skeleton \r\n          variant=\"rectangular\" \r\n          width=\"100%\" \r\n          height=\"100%\" \r\n          animation=\"wave\"\r\n        />\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  // Error state\r\n  if (error) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'error.main',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          backgroundColor: 'error.light',\r\n          color: 'error.contrastText'\r\n        }}\r\n      >\r\n        Failed to load template\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  const isSelected = selectedTemplateId === template._id;\r\n  const canZoomIn = currentScale < maxScale;\r\n  const canZoomOut = currentScale > minScale;\r\n  const canDelete = !template?.is_default;\r\n\r\n  return (\r\n    <Box \r\n      sx={{ position: 'relative', display: 'inline-block' }}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {/* Main Container */}\r\n      <Box\r\n        ref={containerRef}\r\n        onClick={handleClick}\r\n        sx={(theme) => ({\r\n          width,\r\n          height,\r\n          border: '1px solid',\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          position: 'relative',\r\n          cursor: onClick ? 'pointer' : 'default',\r\n          backgroundColor: '#fff',\r\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n          transition: 'all 0.2s ease-in-out',\r\n          '&:hover': onClick ? {\r\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\r\n            transform: 'translateY(-1px)',\r\n          } : {},\r\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\r\n          borderWidth: isSelected ? 2 : 1,\r\n        })}\r\n      >\r\n        {/* Scaled Content Wrapper */}\r\n        <Box\r\n          sx={{\r\n            width: scaledWidth,\r\n            height: scaledHeight,\r\n            transform: `scale(${currentScale})`,\r\n            transformOrigin: 'top left',\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            overflow: 'hidden',\r\n          }}\r\n        >\r\n          {/* HTML Content */}\r\n          <Box\r\n            ref={contentRef}\r\n            sx={{\r\n              width: '100%',\r\n              height: '100%',\r\n              userSelect: 'none',\r\n              pointerEvents: 'none',\r\n              pt: 2,\r\n              '& *': {\r\n                maxWidth: '100% !important',\r\n                boxSizing: 'border-box !important',\r\n              },\r\n              // Reset common problematic styles\r\n              '& body': {\r\n                margin: '0 !important',\r\n                padding: '0 !important',\r\n                overflow: 'hidden !important',\r\n              },\r\n              // Handle images\r\n              '& img': {\r\n                maxWidth: '100% !important',\r\n                height: 'auto !important',\r\n              },\r\n              // Handle tables\r\n              '& table': {\r\n                width: '100% !important',\r\n                tableLayout: 'fixed !important',\r\n              },\r\n              // Prevent absolute positioning issues\r\n              '& *[style*=\"position: absolute\"]': {\r\n                position: 'relative !important',\r\n              },\r\n              '& .email-container': {\r\n                width: '85% !important',\r\n              }\r\n            }}\r\n            dangerouslySetInnerHTML={{ __html: template.contents }}\r\n          />\r\n        </Box>\r\n\r\n        {/* Loading Overlay */}\r\n        {isLoading && (\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: 0,\r\n              left: 0,\r\n              right: 0,\r\n              bottom: 0,\r\n              backgroundColor: 'rgba(255,255,255,0.8)',\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n              zIndex: 2,\r\n            }}\r\n          >\r\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\r\n          </Box>\r\n        )}\r\n\r\n        {/* Selection Indicator */}\r\n        {template?.is_default && (\r\n          <Box\r\n            sx={(theme) => ({\r\n              position: 'absolute',\r\n              top: 8,\r\n              left: 8,\r\n              width: 12,\r\n              height: 12,\r\n              borderRadius: '50%',\r\n              backgroundColor: theme.palette.theme?.primary[800],\r\n              zIndex: 3,\r\n            })}\r\n          />\r\n        )}\r\n      </Box>\r\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\r\n\r\n      {/* Hover Controls */}\r\n      {showControls && (\r\n        <Fade in={isHovered} timeout={200}>\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: -8,\r\n              right: -8,\r\n              display: 'flex',\r\n              gap: 0.5,\r\n              zIndex: 4,\r\n              backgroundColor: 'rgba(255,255,255,0.95)',\r\n              border: '1px solid',\r\n              borderColor: 'grey.300',\r\n              borderRadius: 2,\r\n              padding: 0.5,\r\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\r\n              backdropFilter: 'blur(4px)',\r\n            }}\r\n          >\r\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomIn}\r\n                  disabled={!canZoomIn}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomIn fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomOut}\r\n                  disabled={!canZoomOut}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomOut fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title=\"Refresh Preview\" arrow>\r\n              <IconButton\r\n                size=\"small\"\r\n                onClick={handleRefresh}\r\n                sx={{\r\n                  backgroundColor: 'transparent',\r\n                  '&:hover': { \r\n                    backgroundColor: 'primary.light',\r\n                    color: 'primary.contrastText' \r\n                  },\r\n                }}\r\n              >\r\n                <Refresh fontSize=\"small\" />\r\n              </IconButton>\r\n            </Tooltip>\r\n\r\n            {onDelete && (\r\n              <>\r\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n                <Tooltip \r\n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \r\n                  arrow\r\n                >\r\n                  <span>\r\n                    <IconButton\r\n                      size=\"small\"\r\n                      onClick={handleDelete}\r\n                      disabled={!canDelete}\r\n                      sx={{\r\n                        backgroundColor: 'transparent',\r\n                        '&:hover': !canDelete ? {} : { \r\n                          backgroundColor: 'error.light',\r\n                          color: 'error.contrastText' \r\n                        },\r\n                        '&:disabled': {\r\n                          opacity: 0.5\r\n                        }\r\n                      }}\r\n                    >\r\n                      <Trash fontSize=\"small\" />\r\n                    </IconButton>\r\n                  </span>\r\n                </Tooltip>\r\n              </>\r\n            )}\r\n          </Box>\r\n        </Fade>\r\n      )}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default HtmlThumbnailPreview;"],"names":["template","width","height","scale","showControls","onClick","selectedTemplateId","isFetching","onDelete","minScale","maxScale","scaleStep","loadingDelay","refreshDelay","isLoading","setIsLoading","useState","currentScale","setCurrentScale","error","setError","isHovered","setIsHovered","containerRef","useRef","contentRef","loadingTimeoutRef","refreshTimeoutRef","scaledWidth","scaledHeight","useEffect","current","clearTimeout","setTimeout","contents","handleZoomIn","useCallback","Math","min","prev","handleZoomOut","max","handleRefresh","handleClick","handleDelete","e","stopPropagation","is_default","handleMouseEnter","handleMouseLeave","jsx","Box","sx","borderRadius","overflow","border","borderColor","children","Skeleton","variant","animation","display","alignItems","justifyContent","backgroundColor","color","isSelected","_id","canZoomIn","canZoomOut","canDelete","jsxs","position","onMouseEnter","onMouseLeave","ref","theme","cursor","transition","boxShadow","transform","palette","primary","borderWidth","transformOrigin","top","left","userSelect","pointerEvents","pt","maxWidth","boxSizing","margin","padding","tableLayout","dangerouslySetInnerHTML","__html","right","bottom","zIndex","_a","name","Typography","type","weight","align","mt","Fade","in","timeout","gap","backdropFilter","Tooltip","title","round","arrow","IconButton","size","disabled","opacity","ZoomIn","fontSize","Divider","orientation","flexItem","ZoomOut","Refresh","Fragment","Trash"],"mappings":"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"}

package/dist/views/template-editor/template-modal/template-modal/index.esm.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useState, useEffect } from "react";
-import { DialogTitle, Box, MenuItem, IconButton, DialogContent, DialogActions } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import default_1 from "../../../../node_modules/@mui/icons-material/Close/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import Modal from "../../../../components/modal/modal/index.esm.js";
 import { getV1Templates, patchV1TemplatesIdSetDefault, deleteV1TemplatesId } from "../../../../api-client/api.system-feature/api/index.esm.js";
@@ -12,6 +11,12 @@ import { enqueueSnackbar } from "../../../../node_modules/notistack/notistack.es
 import Select from "../../../../components/select/select/index.esm.js";
 import HtmlThumbnailPreview from "../html-thumbnail-preview/index.esm.js";
 import ConfirmPopUp from "../../../../components/confirm-modal/confirm-modal/index.esm.js";
+import DialogTitle from "../../../../node_modules/@mui/material/DialogTitle/DialogTitle/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import DialogContent from "../../../../node_modules/@mui/material/DialogContent/DialogContent/index.esm.js";
+import DialogActions from "../../../../node_modules/@mui/material/DialogActions/DialogActions/index.esm.js";
 const TemplateModal = ({ email, onClose, open, companies = [], templateRoutes }) => {
   var _a;
   const [templates, setTemplates] = useState([]);
@@ -108,7 +113,7 @@ const TemplateModal = ({ email, onClose, open, companies = [], templateRoutes })
                   sx: {
                     color: (theme) => theme.palette.grey[500]
                   },
-                  children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+                  children: /* @__PURE__ */ jsx(default_1, { fontSize: "small" })
                 }
               )
             ] })

package/dist/views/template-editor/template-modal/template-modal/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/template-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useEffect, useState } from 'react';\r\nimport { \r\n  DialogTitle, \r\n  DialogContent, \r\n  DialogActions,\r\n  IconButton,\r\n  Box,\r\n  MenuItem\r\n} from '@mui/material';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Modal from '../../../components/modal/modal';\r\nimport { deleteV1TemplatesId, getV1Templates, patchV1TemplatesIdSetDefault } from '../../../api-client/api.system-feature/api';\r\nimport { getErrorMessage, getToken } from '../../../utils/common';\r\nimport Button from '../../../components/button/button';\r\n// import ModalLoader from '../../../components/loader/modal-loader';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport { enqueueSnackbar } from 'notistack';\r\nimport Select from '../../../components/select/select';\r\nimport HtmlThumbnailPreview from './html-thumbnail-preview';\r\nimport ConfirmPopUp from '../../../components/confirm-modal/confirm-modal';\r\n\r\nconst TemplateModal = ({ email, onClose, open, companies = [], templateRoutes }) => {\r\n  const [templates, setTemplates] = useState([]);\r\n  const [selectedTemplate, setSelectedTemplate] = useState('');\r\n  const [defaultTemplate, setDefaultTemplate] = useState('');\r\n  const [loading, setLoding] = useState(true);\r\n  const [selectedCompany, setSelectedCompany] = React.useState<number>(companies?.[0]?.id || 0);\r\n  const [templateToDelete, setTemplateToDelete] = React.useState<Record<string, any> | null>(null);\r\n  const navigate = useNavigate();\r\n\r\n  const handleClose = () => {\r\n    onClose();\r\n  };\r\n\r\n  const handleTemplateSelect = (id) => {\r\n    setSelectedTemplate(id);\r\n  };\r\n\r\n  const getTemplatesViaSubject = async () => {\r\n    setLoding(true)\r\n    const res = await getV1Templates({ ...getToken(),  filters: `(company_id.eq=${selectedCompany}&subject_id.eq=${email._id})` })\r\n    if(res?.data) {\r\n      const dTemplate = res?.data?.find(t => t.is_default === true)\r\n      setDefaultTemplate(dTemplate)\r\n      setSelectedTemplate(dTemplate?._id)\r\n      setTemplates(res?.data)\r\n    }\r\n\r\n    setLoding(false)\r\n  }\r\n\r\n  const handleDefaultTemplate = async () => {\r\n    try {\r\n      await patchV1TemplatesIdSetDefault({ ...getToken(), id: selectedTemplate })\r\n      enqueueSnackbar('Template has been set as default');\r\n    } catch (error) {\r\n      const m = getErrorMessage(error?.message);\r\n      enqueueSnackbar(m, { variant: 'error' });\r\n    }\r\n  }\r\n\r\n  const handleDeleteTemplate = async () => {\r\n    try {\r\n      if(templateToDelete) {\r\n        await deleteV1TemplatesId({ ...getToken(), id: templateToDelete?._id })\r\n        enqueueSnackbar('Template has been deleted');\r\n        setTemplateToDelete(null)\r\n        await getTemplatesViaSubject()\r\n      }\r\n    } catch (error) {\r\n      const m = getErrorMessage(error?.message);\r\n      enqueueSnackbar(m, { variant: 'error' });\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    getTemplatesViaSubject()\r\n    return () => { setLoding(true) }\r\n  }, [selectedCompany])\r\n\r\n  return (\r\n    <div>\r\n      <Modal \r\n        open={open} \r\n        onClose={handleClose} \r\n        maxWidth=\"lg\" \r\n        fullWidth\r\n        aria-labelledby=\"email-template-selection\"\r\n      >\r\n        {/* {loading && <ModalLoader/>} */}\r\n        <DialogTitle sx={{ marginBottom: '1rem', padding: '0.75rem 1rem 0.75rem 1.5rem', borderBottom: '1px solid #D3D3D4'}}>\r\n          <Typography type='s1' weight='medium' color='theme.secondary.1000' sx={{ width: '100%', textAlign: 'center' }}> Select a Template</Typography>\r\n          <Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n            <Typography type='s3' weight='medium' color='theme.secondary.800'> Company</Typography>\r\n            <Select\r\n              displayEmpty\r\n              value={selectedCompany}\r\n              size='small'\r\n              renderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\r\n              // fullWidth\r\n              // sx={{\r\n              //   bgcolor: 'white',\r\n              //   borderRadius: 1,\r\n              //   '& .MuiSelect-select': { py: 0.75 }\r\n              // }}\r\n              onChange={(e) => {\r\n                if (e.target.value) {\r\n                  setSelectedCompany(e.target.value as number);\r\n                }\r\n              }}>\r\n              {companies.map((option) => (\r\n                <MenuItem key={option.value} value={option.value}>\r\n                  <Typography type='s3' color='theme.secondary.1000'>{option.label}</Typography>\r\n                </MenuItem>\r\n              ))}\r\n            </Select>\r\n            <IconButton\r\n              aria-label=\"close\"\r\n              onClick={handleClose}\r\n              size='small'\r\n              sx={{\r\n                color: (theme) => theme.palette.grey[500],\r\n              }}\r\n            >\r\n              <CloseIcon fontSize='small'/>\r\n            </IconButton>\r\n          </Box>\r\n        </DialogTitle>\r\n        <DialogContent>\r\n          {/* <Grid container spacing={6}> */}\r\n          {!templates.length && (\r\n            // <Grid item xs={12} sx={{ minHeight: 350}}>\r\n              <Box display='flex' alignItems='center' width='100%' height='100%' justifyContent='center'>\r\n                {!loading && <Typography type='s1' weight='medium' color='theme.secondary.1000' sx={{ textAlign: 'center' }}>No templates found</Typography>}\r\n              </Box>\r\n            // </Grid>\r\n          )}\r\n            <Box sx={{ \r\n              display: 'grid', \r\n              gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', \r\n              gap: 2, \r\n              p: 2,\r\n              justifyItems: 'center',\r\n              alignItems: 'center'\r\n            }}>\r\n              {templates.map((template, index) => (\r\n                <HtmlThumbnailPreview\r\n                  key={template._id || index}\r\n                  template={template}\r\n                  width={300}\r\n                  height={200}\r\n                  showControls={true}\r\n                  selectedTemplateId={selectedTemplate}\r\n                  onClick={(template: any) => {\r\n                    handleTemplateSelect(template._id)\r\n                  }}\r\n                  isFetching={loading}\r\n                  onDelete={(template: any) => setTemplateToDelete(template)}\r\n                />\r\n              ))}\r\n            </Box>\r\n          {/* </Grid> */}\r\n        </DialogContent>\r\n        <DialogActions sx={{ p: 2, justifyContent: 'center', borderTop: '1px solid #D3D3D4' }}>\r\n          <Button\r\n            onClick={() => navigate(templateRoutes.EDIT_TEMPLATE(email._id, selectedTemplate), { state: { company_id: selectedCompany } })}\r\n            disabled={!selectedTemplate}\r\n          >\r\n            Continue\r\n          </Button>\r\n          <Button\r\n            onClick={() => handleDefaultTemplate()}\r\n            disabled={!selectedTemplate || defaultTemplate?._id === selectedTemplate}\r\n          >\r\n            Set to Default\r\n          </Button>\r\n        </DialogActions>\r\n      </Modal>\r\n      <ConfirmPopUp\r\n        open={templateToDelete !== null}\r\n        onClose={() => setTemplateToDelete(null)}\r\n        title='Remove Template'\r\n        description='Are you sure you want to delete ?'\r\n        onConfirm={() => handleDeleteTemplate()}\r\n        loading={loading}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default TemplateModal;"],"names":["React","_a","template"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,gBAAgB,CAAC,EAAE,OAAO,SAAS,MAAM,YAAY,CAAA,GAAI,qBAAqB;;AAClF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAA,CAAE;AAC7C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,EAAE;AAC3D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,EAAE;AACzD,QAAM,CAAC,SAAS,SAAS,IAAI,SAAS,IAAI;AAC1C,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,eAAM,WAAiB,4CAAY,OAAZ,mBAAgB,OAAM,CAAC;AAC5F,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,eAAM,SAAqC,IAAI;AAC/F,QAAM,WAAW,YAAA;AAEjB,QAAM,cAAc,MAAM;AACxB,YAAA;AAAA,EACF;AAEA,QAAM,uBAAuB,CAAC,OAAO;AACnC,wBAAoB,EAAE;AAAA,EACxB;AAEA,QAAM,yBAAyB,YAAY;;AACzC,cAAU,IAAI;AACd,UAAM,MAAM,MAAM,eAAe,EAAE,GAAG,SAAA,GAAa,SAAS,kBAAkB,eAAe,kBAAkB,MAAM,GAAG,KAAK;AAC7H,QAAG,2BAAK,MAAM;AACZ,YAAM,aAAYC,MAAA,2BAAK,SAAL,gBAAAA,IAAW,KAAK,CAAA,MAAK,EAAE,eAAe;AACxD,yBAAmB,SAAS;AAC5B,0BAAoB,uCAAW,GAAG;AAClC,mBAAa,2BAAK,IAAI;AAAA,IACxB;AAEA,cAAU,KAAK;AAAA,EACjB;AAEA,QAAM,wBAAwB,YAAY;AACxC,QAAI;AACF,YAAM,6BAA6B,EAAE,GAAG,YAAY,IAAI,kBAAkB;AAC1E,sBAAgB,kCAAkC;AAAA,IACpD,SAAS,OAAO;AACd,YAAM,IAAI,gBAAgB,+BAAO,OAAO;AACxC,sBAAgB,GAAG,EAAE,SAAS,QAAA,CAAS;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,uBAAuB,YAAY;AACvC,QAAI;AACF,UAAG,kBAAkB;AACnB,cAAM,oBAAoB,EAAE,GAAG,SAAA,GAAY,IAAI,qDAAkB,KAAK;AACtE,wBAAgB,2BAA2B;AAC3C,4BAAoB,IAAI;AACxB,cAAM,uBAAA;AAAA,MACR;AAAA,IACF,SAAS,OAAO;AACd,YAAM,IAAI,gBAAgB,+BAAO,OAAO;AACxC,sBAAgB,GAAG,EAAE,SAAS,QAAA,CAAS;AAAA,IACzC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,2BAAA;AACA,WAAO,MAAM;AAAE,gBAAU,IAAI;AAAA,IAAE;AAAA,EACjC,GAAG,CAAC,eAAe,CAAC;AAEpB,8BACG,OAAA,EACC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,UAAS;AAAA,QACT,WAAS;AAAA,QACT,mBAAgB;AAAA,QAGhB,UAAA;AAAA,UAAA,qBAAC,aAAA,EAAY,IAAI,EAAE,cAAc,QAAQ,SAAS,+BAA+B,cAAc,oBAAA,GAC7F,UAAA;AAAA,YAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAAS,OAAM,wBAAuB,IAAI,EAAE,OAAO,QAAQ,WAAW,YAAY,UAAA,sBAAkB;AAAA,YACjI,qBAAC,KAAA,EAAI,SAAQ,QAAO,YAAY,UAAU,KAAK,GAAG,UAAS,YAAW,OAAM,MAAK,KAAI,OACnF,UAAA;AAAA,cAAA,oBAAC,cAAW,MAAK,MAAK,QAAO,UAAS,OAAM,uBAAsB,UAAA,WAAA,CAAQ;AAAA,cAC1E;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,OAAO;AAAA,kBACP,MAAK;AAAA,kBACL,aAAa,CAAC;;AAAU,oCAAQA,MAAA,UAAU,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,MAAjD,gBAAAA,IAAoD,QAAQ;AAAA;AAAA,kBAO5F,UAAU,CAAC,MAAM;AACf,wBAAI,EAAE,OAAO,OAAO;AAClB,yCAAmB,EAAE,OAAO,KAAe;AAAA,oBAC7C;AAAA,kBACF;AAAA,kBACC,UAAA,UAAU,IAAI,CAAC,+BACb,UAAA,EAA4B,OAAO,OAAO,OACzC,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,OAAO,OAAM,KADpD,OAAO,KAEtB,CACD;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEH;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,cAAW;AAAA,kBACX,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,IAAI;AAAA,oBACF,OAAO,CAAC,UAAU,MAAM,QAAQ,KAAK,GAAG;AAAA,kBAAA;AAAA,kBAG1C,UAAA,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC7B,EAAA,CACF;AAAA,UAAA,GACF;AAAA,+BACC,eAAA,EAEE,UAAA;AAAA,YAAA,CAAC,UAAU;AAAA,YAER,oBAAC,KAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,OAAM,QAAO,QAAO,QAAO,gBAAe,UAC/E,UAAA,CAAC,WAAW,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAAS,OAAM,wBAAuB,IAAI,EAAE,WAAW,SAAA,GAAY,UAAA,qBAAA,CAAkB,GACjI;AAAA,YAGF,oBAAC,OAAI,IAAI;AAAA,cACP,SAAS;AAAA,cACT,qBAAqB;AAAA,cACrB,KAAK;AAAA,cACL,GAAG;AAAA,cACH,cAAc;AAAA,cACd,YAAY;AAAA,YAAA,GAEX,UAAA,UAAU,IAAI,CAAC,UAAU,UACxB;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,oBAAoB;AAAA,gBACpB,SAAS,CAACC,cAAkB;AAC1B,uCAAqBA,UAAS,GAAG;AAAA,gBACnC;AAAA,gBACA,YAAY;AAAA,gBACZ,UAAU,CAACA,cAAkB,oBAAoBA,SAAQ;AAAA,cAAA;AAAA,cAVpD,SAAS,OAAO;AAAA,YAAA,CAYxB,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UACA,qBAAC,eAAA,EAAc,IAAI,EAAE,GAAG,GAAG,gBAAgB,UAAU,WAAW,oBAAA,GAC9D,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,MAAM,SAAS,eAAe,cAAc,MAAM,KAAK,gBAAgB,GAAG,EAAE,OAAO,EAAE,YAAY,gBAAA,GAAmB;AAAA,gBAC7H,UAAU,CAAC;AAAA,gBACZ,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,MAAM,sBAAA;AAAA,gBACf,UAAU,CAAC,qBAAoB,mDAAiB,SAAQ;AAAA,gBACzD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,qBAAqB;AAAA,QAC3B,SAAS,MAAM,oBAAoB,IAAI;AAAA,QACvC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,WAAW,MAAM,qBAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/template-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useEffect, useState } from 'react';\r\nimport { \r\n  DialogTitle, \r\n  DialogContent, \r\n  DialogActions,\r\n  IconButton,\r\n  Box,\r\n  MenuItem\r\n} from '@mui/material';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Modal from '../../../components/modal/modal';\r\nimport { deleteV1TemplatesId, getV1Templates, patchV1TemplatesIdSetDefault } from '../../../api-client/api.system-feature/api';\r\nimport { getErrorMessage, getToken } from '../../../utils/common';\r\nimport Button from '../../../components/button/button';\r\n// import ModalLoader from '../../../components/loader/modal-loader';\r\nimport { useNavigate } from 'react-router-dom';\r\nimport { enqueueSnackbar } from 'notistack';\r\nimport Select from '../../../components/select/select';\r\nimport HtmlThumbnailPreview from './html-thumbnail-preview';\r\nimport ConfirmPopUp from '../../../components/confirm-modal/confirm-modal';\r\n\r\nconst TemplateModal = ({ email, onClose, open, companies = [], templateRoutes }) => {\r\n  const [templates, setTemplates] = useState([]);\r\n  const [selectedTemplate, setSelectedTemplate] = useState('');\r\n  const [defaultTemplate, setDefaultTemplate] = useState('');\r\n  const [loading, setLoding] = useState(true);\r\n  const [selectedCompany, setSelectedCompany] = React.useState<number>(companies?.[0]?.id || 0);\r\n  const [templateToDelete, setTemplateToDelete] = React.useState<Record<string, any> | null>(null);\r\n  const navigate = useNavigate();\r\n\r\n  const handleClose = () => {\r\n    onClose();\r\n  };\r\n\r\n  const handleTemplateSelect = (id) => {\r\n    setSelectedTemplate(id);\r\n  };\r\n\r\n  const getTemplatesViaSubject = async () => {\r\n    setLoding(true)\r\n    const res = await getV1Templates({ ...getToken(),  filters: `(company_id.eq=${selectedCompany}&subject_id.eq=${email._id})` })\r\n    if(res?.data) {\r\n      const dTemplate = res?.data?.find(t => t.is_default === true)\r\n      setDefaultTemplate(dTemplate)\r\n      setSelectedTemplate(dTemplate?._id)\r\n      setTemplates(res?.data)\r\n    }\r\n\r\n    setLoding(false)\r\n  }\r\n\r\n  const handleDefaultTemplate = async () => {\r\n    try {\r\n      await patchV1TemplatesIdSetDefault({ ...getToken(), id: selectedTemplate })\r\n      enqueueSnackbar('Template has been set as default');\r\n    } catch (error) {\r\n      const m = getErrorMessage(error?.message);\r\n      enqueueSnackbar(m, { variant: 'error' });\r\n    }\r\n  }\r\n\r\n  const handleDeleteTemplate = async () => {\r\n    try {\r\n      if(templateToDelete) {\r\n        await deleteV1TemplatesId({ ...getToken(), id: templateToDelete?._id })\r\n        enqueueSnackbar('Template has been deleted');\r\n        setTemplateToDelete(null)\r\n        await getTemplatesViaSubject()\r\n      }\r\n    } catch (error) {\r\n      const m = getErrorMessage(error?.message);\r\n      enqueueSnackbar(m, { variant: 'error' });\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    getTemplatesViaSubject()\r\n    return () => { setLoding(true) }\r\n  }, [selectedCompany])\r\n\r\n  return (\r\n    <div>\r\n      <Modal \r\n        open={open} \r\n        onClose={handleClose} \r\n        maxWidth=\"lg\" \r\n        fullWidth\r\n        aria-labelledby=\"email-template-selection\"\r\n      >\r\n        {/* {loading && <ModalLoader/>} */}\r\n        <DialogTitle sx={{ marginBottom: '1rem', padding: '0.75rem 1rem 0.75rem 1.5rem', borderBottom: '1px solid #D3D3D4'}}>\r\n          <Typography type='s1' weight='medium' color='theme.secondary.1000' sx={{ width: '100%', textAlign: 'center' }}> Select a Template</Typography>\r\n          <Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n            <Typography type='s3' weight='medium' color='theme.secondary.800'> Company</Typography>\r\n            <Select\r\n              displayEmpty\r\n              value={selectedCompany}\r\n              size='small'\r\n              renderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\r\n              // fullWidth\r\n              // sx={{\r\n              //   bgcolor: 'white',\r\n              //   borderRadius: 1,\r\n              //   '& .MuiSelect-select': { py: 0.75 }\r\n              // }}\r\n              onChange={(e) => {\r\n                if (e.target.value) {\r\n                  setSelectedCompany(e.target.value as number);\r\n                }\r\n              }}>\r\n              {companies.map((option) => (\r\n                <MenuItem key={option.value} value={option.value}>\r\n                  <Typography type='s3' color='theme.secondary.1000'>{option.label}</Typography>\r\n                </MenuItem>\r\n              ))}\r\n            </Select>\r\n            <IconButton\r\n              aria-label=\"close\"\r\n              onClick={handleClose}\r\n              size='small'\r\n              sx={{\r\n                color: (theme) => theme.palette.grey[500],\r\n              }}\r\n            >\r\n              <CloseIcon fontSize='small'/>\r\n            </IconButton>\r\n          </Box>\r\n        </DialogTitle>\r\n        <DialogContent>\r\n          {/* <Grid container spacing={6}> */}\r\n          {!templates.length && (\r\n            // <Grid item xs={12} sx={{ minHeight: 350}}>\r\n              <Box display='flex' alignItems='center' width='100%' height='100%' justifyContent='center'>\r\n                {!loading && <Typography type='s1' weight='medium' color='theme.secondary.1000' sx={{ textAlign: 'center' }}>No templates found</Typography>}\r\n              </Box>\r\n            // </Grid>\r\n          )}\r\n            <Box sx={{ \r\n              display: 'grid', \r\n              gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', \r\n              gap: 2, \r\n              p: 2,\r\n              justifyItems: 'center',\r\n              alignItems: 'center'\r\n            }}>\r\n              {templates.map((template, index) => (\r\n                <HtmlThumbnailPreview\r\n                  key={template._id || index}\r\n                  template={template}\r\n                  width={300}\r\n                  height={200}\r\n                  showControls={true}\r\n                  selectedTemplateId={selectedTemplate}\r\n                  onClick={(template: any) => {\r\n                    handleTemplateSelect(template._id)\r\n                  }}\r\n                  isFetching={loading}\r\n                  onDelete={(template: any) => setTemplateToDelete(template)}\r\n                />\r\n              ))}\r\n            </Box>\r\n          {/* </Grid> */}\r\n        </DialogContent>\r\n        <DialogActions sx={{ p: 2, justifyContent: 'center', borderTop: '1px solid #D3D3D4' }}>\r\n          <Button\r\n            onClick={() => navigate(templateRoutes.EDIT_TEMPLATE(email._id, selectedTemplate), { state: { company_id: selectedCompany } })}\r\n            disabled={!selectedTemplate}\r\n          >\r\n            Continue\r\n          </Button>\r\n          <Button\r\n            onClick={() => handleDefaultTemplate()}\r\n            disabled={!selectedTemplate || defaultTemplate?._id === selectedTemplate}\r\n          >\r\n            Set to Default\r\n          </Button>\r\n        </DialogActions>\r\n      </Modal>\r\n      <ConfirmPopUp\r\n        open={templateToDelete !== null}\r\n        onClose={() => setTemplateToDelete(null)}\r\n        title='Remove Template'\r\n        description='Are you sure you want to delete ?'\r\n        onConfirm={() => handleDeleteTemplate()}\r\n        loading={loading}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default TemplateModal;"],"names":["React","_a","CloseIcon","template"],"mappings":"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"}

package/dist/views/template-editor/template-modal/template-modal/index.js

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("@mui/material"),a=require("@mui/icons-material/Close"),i=require("../../../../components/typography/typography/index.js"),n=require("../../../../components/modal/modal/index.js"),o=require("../../../../api-client/api.system-feature/api/index.js"),r=require("../../../../utils/common/index.js"),s=require("../../../../components/button/button/index.js"),d=require("react-router-dom"),u=require("../../../../node_modules/notistack/notistack.esm/index.js"),c=require("../../../../components/select/select/index.js"),m=require("../html-thumbnail-preview/index.js"),p=require("../../../../components/confirm-modal/confirm-modal/index.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=/* @__PURE__ */h(t),g=/* @__PURE__ */h(a);exports.default=({email:a,onClose:h,open:y,companies:f=[],templateRoutes:j})=>{var v;const[b,T]=t.useState([]),[q,C]=t.useState(""),[S,_]=t.useState(""),[k,w]=t.useState(!0),[D,I]=x.default.useState((null==(v=null==f?void 0:f[0])?void 0:v.id)||0),[E,B]=x.default.useState(null),A=d.useNavigate(),M=()=>{h()},V=async()=>{var e;w(!0);const t=await o.getV1Templates({...r.getToken(),filters:`(company_id.eq=${D}&subject_id.eq=${a._id})`});if(null==t?void 0:t.data){const l=null==(e=null==t?void 0:t.data)?void 0:e.find(e=>!0===e.is_default);_(l),C(null==l?void 0:l._id),T(null==t?void 0:t.data)}w(!1)};return t.useEffect(()=>(V(),()=>{w(!0)}),[D]),/* @__PURE__ */e.jsxs("div",{children:[
-/* @__PURE__ */e.jsxs(n.default,{open:y,onClose:M,maxWidth:"lg",fullWidth:!0,"aria-labelledby":"email-template-selection",children:[
-/* @__PURE__ */e.jsxs(l.DialogTitle,{sx:{marginBottom:"1rem",padding:"0.75rem 1rem 0.75rem 1.5rem",borderBottom:"1px solid #D3D3D4"},children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../../../node_modules/@mui/icons-material/Close/index.js"),i=require("../../../../components/typography/typography/index.js"),a=require("../../../../components/modal/modal/index.js"),n=require("../../../../api-client/api.system-feature/api/index.js"),o=require("../../../../utils/common/index.js"),r=require("../../../../components/button/button/index.js"),s=require("react-router-dom"),d=require("../../../../node_modules/notistack/notistack.esm/index.js"),u=require("../../../../components/select/select/index.js"),m=require("../html-thumbnail-preview/index.js"),c=require("../../../../components/confirm-modal/confirm-modal/index.js"),p=require("../../../../node_modules/@mui/material/DialogTitle/DialogTitle/index.js"),x=require("../../../../node_modules/@mui/material/Box/Box/index.js"),h=require("../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),g=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),f=require("../../../../node_modules/@mui/material/DialogContent/DialogContent/index.js"),y=require("../../../../node_modules/@mui/material/DialogActions/DialogActions/index.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=/* @__PURE__ */j(t);exports.default=({email:j,onClose:q,open:b,companies:T=[],templateRoutes:_})=>{var C;const[D,S]=t.useState([]),[k,w]=t.useState(""),[I,E]=t.useState(""),[A,B]=t.useState(!0),[M,V]=v.default.useState((null==(C=null==T?void 0:T[0])?void 0:C.id)||0),[z,N]=v.default.useState(null),P=s.useNavigate(),R=()=>{q()},W=async()=>{var e;B(!0);const t=await n.getV1Templates({...o.getToken(),filters:`(company_id.eq=${M}&subject_id.eq=${j._id})`});if(null==t?void 0:t.data){const l=null==(e=null==t?void 0:t.data)?void 0:e.find(e=>!0===e.is_default);E(l),w(null==l?void 0:l._id),S(null==t?void 0:t.data)}B(!1)};return t.useEffect(()=>(W(),()=>{B(!0)}),[M]),/* @__PURE__ */e.jsxs("div",{children:[
+/* @__PURE__ */e.jsxs(a.default,{open:b,onClose:R,maxWidth:"lg",fullWidth:!0,"aria-labelledby":"email-template-selection",children:[
+/* @__PURE__ */e.jsxs(p.default,{sx:{marginBottom:"1rem",padding:"0.75rem 1rem 0.75rem 1.5rem",borderBottom:"1px solid #D3D3D4"},children:[
 /* @__PURE__ */e.jsx(i.Typography,{type:"s1",weight:"medium",color:"theme.secondary.1000",sx:{width:"100%",textAlign:"center"},children:" Select a Template"}),
-/* @__PURE__ */e.jsxs(l.Box,{display:"flex",alignItems:"center",gap:1,position:"absolute",right:"1%",top:"4px",children:[
+/* @__PURE__ */e.jsxs(x.default,{display:"flex",alignItems:"center",gap:1,position:"absolute",right:"1%",top:"4px",children:[
 /* @__PURE__ */e.jsx(i.Typography,{type:"s3",weight:"medium",color:"theme.secondary.800",children:" Company"}),
-/* @__PURE__ */e.jsx(c.default,{displayEmpty:!0,value:D,size:"small",renderValue:e=>{var t;return e?null==(t=f.find(t=>t.value===e))?void 0:t.label:"Select Company"},onChange:e=>{e.target.value&&I(e.target.value)},children:f.map(t=>/* @__PURE__ */e.jsx(l.MenuItem,{value:t.value,children:/* @__PURE__ */e.jsx(i.Typography,{type:"s3",color:"theme.secondary.1000",children:t.label})},t.value))}),
-/* @__PURE__ */e.jsx(l.IconButton,{"aria-label":"close",onClick:M,size:"small",sx:{color:e=>e.palette.grey[500]},children:/* @__PURE__ */e.jsx(g.default,{fontSize:"small"})})]})]}),
-/* @__PURE__ */e.jsxs(l.DialogContent,{children:[!b.length&&
-/* @__PURE__ */e.jsx(l.Box,{display:"flex",alignItems:"center",width:"100%",height:"100%",justifyContent:"center",children:!k&&/* @__PURE__ */e.jsx(i.Typography,{type:"s1",weight:"medium",color:"theme.secondary.1000",sx:{textAlign:"center"},children:"No templates found"})}),
-/* @__PURE__ */e.jsx(l.Box,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(300px, 1fr))",gap:2,p:2,justifyItems:"center",alignItems:"center"},children:b.map((t,l)=>/* @__PURE__ */e.jsx(m.default,{template:t,width:300,height:200,showControls:!0,selectedTemplateId:q,onClick:e=>{var t;t=e._id,C(t)},isFetching:k,onDelete:e=>B(e)},t._id||l))})]}),
-/* @__PURE__ */e.jsxs(l.DialogActions,{sx:{p:2,justifyContent:"center",borderTop:"1px solid #D3D3D4"},children:[
-/* @__PURE__ */e.jsx(s.default,{onClick:()=>A(j.EDIT_TEMPLATE(a._id,q),{state:{company_id:D}}),disabled:!q,children:"Continue"}),
-/* @__PURE__ */e.jsx(s.default,{onClick:()=>(async()=>{try{await o.patchV1TemplatesIdSetDefault({...r.getToken(),id:q}),u.enqueueSnackbar("Template has been set as default")}catch(e){const t=r.getErrorMessage(null==e?void 0:e.message);u.enqueueSnackbar(t,{variant:"error"})}})(),disabled:!q||(null==S?void 0:S._id)===q,children:"Set to Default"})]})]}),
-/* @__PURE__ */e.jsx(p.default,{open:null!==E,onClose:()=>B(null),title:"Remove Template",description:"Are you sure you want to delete ?",onConfirm:()=>(async()=>{try{E&&(await o.deleteV1TemplatesId({...r.getToken(),id:null==E?void 0:E._id}),u.enqueueSnackbar("Template has been deleted"),B(null),await V())}catch(e){const t=r.getErrorMessage(null==e?void 0:e.message);u.enqueueSnackbar(t,{variant:"error"})}})(),loading:k})]})};
+/* @__PURE__ */e.jsx(u.default,{displayEmpty:!0,value:M,size:"small",renderValue:e=>{var t;return e?null==(t=T.find(t=>t.value===e))?void 0:t.label:"Select Company"},onChange:e=>{e.target.value&&V(e.target.value)},children:T.map(t=>/* @__PURE__ */e.jsx(h.default,{value:t.value,children:/* @__PURE__ */e.jsx(i.Typography,{type:"s3",color:"theme.secondary.1000",children:t.label})},t.value))}),
+/* @__PURE__ */e.jsx(g.default,{"aria-label":"close",onClick:R,size:"small",sx:{color:e=>e.palette.grey[500]},children:/* @__PURE__ */e.jsx(l.default,{fontSize:"small"})})]})]}),
+/* @__PURE__ */e.jsxs(f.default,{children:[!D.length&&
+/* @__PURE__ */e.jsx(x.default,{display:"flex",alignItems:"center",width:"100%",height:"100%",justifyContent:"center",children:!A&&/* @__PURE__ */e.jsx(i.Typography,{type:"s1",weight:"medium",color:"theme.secondary.1000",sx:{textAlign:"center"},children:"No templates found"})}),
+/* @__PURE__ */e.jsx(x.default,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(300px, 1fr))",gap:2,p:2,justifyItems:"center",alignItems:"center"},children:D.map((t,l)=>/* @__PURE__ */e.jsx(m.default,{template:t,width:300,height:200,showControls:!0,selectedTemplateId:k,onClick:e=>{var t;t=e._id,w(t)},isFetching:A,onDelete:e=>N(e)},t._id||l))})]}),
+/* @__PURE__ */e.jsxs(y.default,{sx:{p:2,justifyContent:"center",borderTop:"1px solid #D3D3D4"},children:[
+/* @__PURE__ */e.jsx(r.default,{onClick:()=>P(_.EDIT_TEMPLATE(j._id,k),{state:{company_id:M}}),disabled:!k,children:"Continue"}),
+/* @__PURE__ */e.jsx(r.default,{onClick:()=>(async()=>{try{await n.patchV1TemplatesIdSetDefault({...o.getToken(),id:k}),d.enqueueSnackbar("Template has been set as default")}catch(e){const t=o.getErrorMessage(null==e?void 0:e.message);d.enqueueSnackbar(t,{variant:"error"})}})(),disabled:!k||(null==I?void 0:I._id)===k,children:"Set to Default"})]})]}),
+/* @__PURE__ */e.jsx(c.default,{open:null!==z,onClose:()=>N(null),title:"Remove Template",description:"Are you sure you want to delete ?",onConfirm:()=>(async()=>{try{z&&(await n.deleteV1TemplatesId({...o.getToken(),id:null==z?void 0:z._id}),d.enqueueSnackbar("Template has been deleted"),N(null),await W())}catch(e){const t=o.getErrorMessage(null==e?void 0:e.message);d.enqueueSnackbar(t,{variant:"error"})}})(),loading:A})]})};
 //# sourceMappingURL=index.js.map