@erpsquad/common 1.8.40 → 1.8.42

package/dist/views/privateRoute/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-router-dom"),r=require("../../constants/pathnames/pathname/index.js"),s=require("../../hooks/useAuth/index.js"),u=require("../../components/loader/index.js");const a=()=>{const{user:a,loading:o}=s.useAuth();return o?/* @__PURE__ */e.jsx(u.default,{}):a?/* @__PURE__ */e.jsx(t.Outlet,{}):/* @__PURE__ */e.jsx(t.Navigate,{to:r.Pathname.LOGIN})};exports.PrivateRoute=a,exports.default=a;
+//# sourceMappingURL=index.js.map

package/dist/views/privateRoute/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/views/privateRoute.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Navigate, Outlet } from \"react-router-dom\";\r\n\r\nimport { Pathname } from \"../constants/pathnames/pathname\";\r\nimport { useAuth } from \"../hooks/useAuth\";\r\nimport Loader from \"../components/loader\";\r\n\r\nexport const PrivateRoute = () => {\r\n  const { user, loading } = useAuth();\r\n\r\n  return loading ? (\r\n    <Loader />\r\n  ) : user ? (\r\n    <Outlet />\r\n  ) : (\r\n    <Navigate to={Pathname.LOGIN} />\r\n  );\r\n};\r\n\r\nexport default PrivateRoute;\r\n"],"names":["PrivateRoute","user","loading","useAuth","jsx","Loader","Outlet","Navigate","to","Pathname","LOGIN"],"mappings":"sRAOO,MAAMA,EAAe,KAC1B,MAAMC,KAAEA,EAAAC,QAAMA,GAAYC,YAE1B,OAAOD,iBACLE,EAAAA,IAACC,EAAAA,QAAA,CAAA,GACCJ,iBACFG,MAACE,EAAAA,OAAA,CAAA,kBAEDF,EAAAA,IAACG,EAAAA,SAAA,CAASC,GAAIC,EAAAA,SAASC"}

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
 import SectionFlowEditor from "../../components/SectionFlowEditor/index.esm.js";
 /* empty css                             */
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
 const AddTemplate = ({ modulePath, module, type }) => {
   return /* @__PURE__ */ jsx(Box, { sx: { minHeight: "100vh", bgcolor: "grey.50" }, children: /* @__PURE__ */ jsx(SectionFlowEditor, { modulePath, module, type }) });
 };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material"),t=;/* empty css                                        */,/* empty css                          */exports.default=({modulePath:i,module:o,type:s})=>/* @__PURE__ */e.jsx(r.Box,{sx:{minHeight:"100vh",bgcolor:"grey.50"},children:/* @__PURE__ */e.jsx(t.default,{modulePath:i,module:o,type:s})});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=;/* empty css                                        */;/* empty css                          */var t=;/* empty css                                                    */exports.default=({modulePath:o,module:d,type:i})=>/* @__PURE__ */e.jsx(t.default,{sx:{minHeight:"100vh",bgcolor:"grey.50"},children:/* @__PURE__ */e.jsx(r.default,{modulePath:o,module:d,type:i})});
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/add-template/add-template/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/add-template/add-template.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport { Box } from '@mui/material';\r\nimport SectionFlowEditor from '../components/SectionFlowEditor';\r\nimport './add-template.scss';\r\nimport { ITemplateFormProps } from '../utils/types';\r\n\r\nconst AddTemplate: React.FC<ITemplateFormProps> = ({ modulePath, module, type}) => {\r\n  return (\r\n    <Box sx={{ minHeight: '100vh', bgcolor: 'grey.50' }}>\r\n      <SectionFlowEditor modulePath={modulePath} module={module} type={type}/>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default AddTemplate;"],"names":["modulePath","module","type","jsx","Box","sx","minHeight","bgcolor","children","SectionFlowEditor"],"mappings":"oPAMkD,EAAGA,aAAYC,OAAAA,EAAQC,yBAErEC,EAAAA,IAACC,EAAAA,IAAA,CAAIC,GAAI,CAAEC,UAAW,QAASC,QAAS,WACtCC,wBAAAL,EAAAA,IAACM,UAAA,CAAkBT,aAAwBC,OAAAA,EAAgBC"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/add-template/add-template.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport { Box } from '@mui/material';\r\nimport SectionFlowEditor from '../components/SectionFlowEditor';\r\nimport './add-template.scss';\r\nimport { ITemplateFormProps } from '../utils/types';\r\n\r\nconst AddTemplate: React.FC<ITemplateFormProps> = ({ modulePath, module, type}) => {\r\n  return (\r\n    <Box sx={{ minHeight: '100vh', bgcolor: 'grey.50' }}>\r\n      <SectionFlowEditor modulePath={modulePath} module={module} type={type}/>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default AddTemplate;"],"names":["modulePath","module","type","jsx","Box","sx","minHeight","bgcolor","children","SectionFlowEditor"],"mappings":"kSAMkD,EAAGA,aAAYC,OAAAA,EAAQC,yBAErEC,EAAAA,IAACC,EAAAA,QAAA,CAAIC,GAAI,CAAEC,UAAW,QAASC,QAAS,WACtCC,wBAAAL,EAAAA,IAACM,UAAA,CAAkBT,aAAwBC,OAAAA,EAAgBC"}

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

@@ -4,11 +4,16 @@ import Modal from "../../../../components/modal/modal/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import Button from "../../../../components/button/button/index.esm.js";
 import Select from "../../../../components/select/select/index.esm.js";
-import { DialogTitle, IconButton, DialogContent, MenuItem, DialogActions, Box } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import default_1 from "../../../../node_modules/@mui/icons-material/Close/index.esm.js";
 /* empty css                                        */
 import { enqueueSnackbar } from "../../../../node_modules/notistack/notistack.esm/index.esm.js";
 import { useNavigate } from "react-router-dom";
+import DialogTitle from "../../../../node_modules/@mui/material/DialogTitle/DialogTitle/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 MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import DialogActions from "../../../../node_modules/@mui/material/DialogActions/DialogActions/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
 const CompanySelectionModal = ({
   isOpen,
   setIsOpen,
@@ -43,7 +48,7 @@ const CompanySelectionModal = ({
       children: [
         /* @__PURE__ */ jsxs(DialogTitle, { className: "companySelectionModal--DialogTitle", children: [
           /* @__PURE__ */ jsx(Typography, { type: "s3", color: "inherit", weight: "medium", children: "Select Company" }),
-          /* @__PURE__ */ jsx(IconButton, { onClick: handleModalClose, children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) })
+          /* @__PURE__ */ jsx(IconButton, { onClick: handleModalClose, children: /* @__PURE__ */ jsx(default_1, { fontSize: "small" }) })
         ] }),
         /* @__PURE__ */ jsx(DialogContent, { className: "companySelectionModal--DialogContents", children: /* @__PURE__ */ jsx(
           Select,

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/company-selection-modal/company-selection-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React 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 './company-selection-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nimport { enqueueSnackbar } from 'notistack';\r\nimport { useNavigate } from 'react-router-dom';\r\n\r\ninterface CompanySelectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: IEmail | null) => void;\r\n\tmodalProps?: DialogProps;\r\n\temail: IEmail;\r\n\tcompanies: Record<string, any>[];\r\n\ttemplateRoutes: Record<string, any>\r\n}\r\n\r\nconst CompanySelectionModal: React.FC<CompanySelectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tcompanies,\r\n\temail,\r\n\ttemplateRoutes\r\n}) => {\r\n\r\n\tconst navigate = useNavigate();\r\n\tconst [selectedCompany, setSelectedCompany] = React.useState<number>(0);\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = () => {\r\n\t\tif(!selectedCompany) {\r\n\t\t\tenqueueSnackbar('Please select a company', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t} else if(!email) {\r\n\t\t\tenqueueSnackbar('Something went wrong for a subject', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tnavigate(templateRoutes.ADD_TEMPLATE(email._id), { state: { company_id: selectedCompany }})\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='xs'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='companySelectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tSelect Company\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t</IconButton>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='companySelectionModal--DialogContents'>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\tvalue={selectedCompany}\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\trenderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\tsetSelectedCompany(e.target.value as number);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t{companies.map((option) => (\r\n\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\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</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='companySelectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='companySelectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={() => handleContinue()} disabled={!selectedCompany}>Continue</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 CompanySelectionModal;\r\n"],"names":["React","Close"],"mappings":";;;;;;;;;;;AAkCA,MAAM,wBAA8D,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAM;AAEL,QAAM,WAAW,YAAA;AACjB,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,eAAM,SAAiB,CAAC;AAEtE,QAAM,mBAAmB,MAAM;AAC9B,cAAU,IAAI;AAAA,EACf;AAEA,QAAM,iBAAiB,MAAM;AAC5B,QAAG,CAAC,iBAAiB;AACpB,sBAAgB,2BAA2B,EAAE,SAAS,QAAA,CAAS;AAC/D;AAAA,IACD,WAAU,CAAC,OAAO;AACjB,sBAAgB,sCAAsC,EAAE,SAAS,QAAA,CAAS;AAC1E;AAAA,IACD;AAEA,aAAS,eAAe,aAAa,MAAM,GAAG,GAAG,EAAE,OAAO,EAAE,YAAY,gBAAA,GAAkB;AAAA,EAC3F;AAEA,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,UAAA;AAAA,QAAA,qBAAC,aAAA,EAAY,WAAU,sCACtB,UAAA;AAAA,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,WAAU,QAAO,UAAS,UAAA,iBAAA,CAEtD;AAAA,UACA,oBAAC,cAAW,SAAS,kBACpB,8BAACC,WAAA,EAAM,UAAS,SAAQ,EAAA,CACzB;AAAA,QAAA,GACD;AAAA,QACA,oBAAC,eAAA,EAAc,WAAU,yCACxB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,cAAY;AAAA,YACZ,OAAO;AAAA,YACP,MAAK;AAAA,YACL,aAAa,CAAC;;AAAU,8BAAQ,eAAU,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,MAAjD,mBAAoD,QAAQ;AAAA;AAAA,YAC5F,WAAS;AAAA,YACT,IAAI;AAAA,cACH,SAAS;AAAA,cACT,cAAc;AAAA,cACd,uBAAuB,EAAE,IAAI,KAAA;AAAA,YAAK;AAAA,YAEnC,UAAU,CAAC,MAAM;AAChB,kBAAI,EAAE,OAAO,OAAO;AACnB,mCAAmB,EAAE,OAAO,KAAe;AAAA,cAC5C;AAAA,YACD;AAAA,YACC,UAAA,UAAU,IAAI,CAAC,+BACd,UAAA,EAA4B,OAAO,OAAO,OAC1C,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,OAAO,OAAM,KADnD,OAAO,KAEtB,CACA;AAAA,UAAA;AAAA,QAAA,GAEH;AAAA,QACA,oBAAC,iBAAc,WAAU,uCACxB,+BAAC,KAAA,EAAI,SAAQ,QAAO,KAAK,KACxB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,WAAU,iDAAgD,SAAS,kBAAkB,UAAA,UAAM;AAAA,UACnG,oBAAC,UAAO,SAAS,MAAM,kBAAkB,UAAU,CAAC,iBAAiB,UAAA,WAAA,CAAQ;AAAA,QAAA,EAAA,CAC9E,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/company-selection-modal/company-selection-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React 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 './company-selection-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nimport { enqueueSnackbar } from 'notistack';\r\nimport { useNavigate } from 'react-router-dom';\r\n\r\ninterface CompanySelectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: IEmail | null) => void;\r\n\tmodalProps?: DialogProps;\r\n\temail: IEmail;\r\n\tcompanies: Record<string, any>[];\r\n\ttemplateRoutes: Record<string, any>\r\n}\r\n\r\nconst CompanySelectionModal: React.FC<CompanySelectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tcompanies,\r\n\temail,\r\n\ttemplateRoutes\r\n}) => {\r\n\r\n\tconst navigate = useNavigate();\r\n\tconst [selectedCompany, setSelectedCompany] = React.useState<number>(0);\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = () => {\r\n\t\tif(!selectedCompany) {\r\n\t\t\tenqueueSnackbar('Please select a company', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t} else if(!email) {\r\n\t\t\tenqueueSnackbar('Something went wrong for a subject', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tnavigate(templateRoutes.ADD_TEMPLATE(email._id), { state: { company_id: selectedCompany }})\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='xs'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='companySelectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tSelect Company\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t</IconButton>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='companySelectionModal--DialogContents'>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\tvalue={selectedCompany}\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\trenderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\tsetSelectedCompany(e.target.value as number);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t{companies.map((option) => (\r\n\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\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</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='companySelectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='companySelectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={() => handleContinue()} disabled={!selectedCompany}>Continue</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 CompanySelectionModal;\r\n"],"names":["React","Close"],"mappings":";;;;;;;;;;;;;;;;AAkCA,MAAM,wBAA8D,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAM;AAEL,QAAM,WAAW,YAAA;AACjB,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,eAAM,SAAiB,CAAC;AAEtE,QAAM,mBAAmB,MAAM;AAC9B,cAAU,IAAI;AAAA,EACf;AAEA,QAAM,iBAAiB,MAAM;AAC5B,QAAG,CAAC,iBAAiB;AACpB,sBAAgB,2BAA2B,EAAE,SAAS,QAAA,CAAS;AAC/D;AAAA,IACD,WAAU,CAAC,OAAO;AACjB,sBAAgB,sCAAsC,EAAE,SAAS,QAAA,CAAS;AAC1E;AAAA,IACD;AAEA,aAAS,eAAe,aAAa,MAAM,GAAG,GAAG,EAAE,OAAO,EAAE,YAAY,gBAAA,GAAkB;AAAA,EAC3F;AAEA,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,UAAA;AAAA,QAAA,qBAAC,aAAA,EAAY,WAAU,sCACtB,UAAA;AAAA,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,WAAU,QAAO,UAAS,UAAA,iBAAA,CAEtD;AAAA,UACA,oBAAC,cAAW,SAAS,kBACpB,8BAACC,WAAA,EAAM,UAAS,SAAQ,EAAA,CACzB;AAAA,QAAA,GACD;AAAA,QACA,oBAAC,eAAA,EAAc,WAAU,yCACxB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,cAAY;AAAA,YACZ,OAAO;AAAA,YACP,MAAK;AAAA,YACL,aAAa,CAAC;;AAAU,8BAAQ,eAAU,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,MAAjD,mBAAoD,QAAQ;AAAA;AAAA,YAC5F,WAAS;AAAA,YACT,IAAI;AAAA,cACH,SAAS;AAAA,cACT,cAAc;AAAA,cACd,uBAAuB,EAAE,IAAI,KAAA;AAAA,YAAK;AAAA,YAEnC,UAAU,CAAC,MAAM;AAChB,kBAAI,EAAE,OAAO,OAAO;AACnB,mCAAmB,EAAE,OAAO,KAAe;AAAA,cAC5C;AAAA,YACD;AAAA,YACC,UAAA,UAAU,IAAI,CAAC,+BACd,UAAA,EAA4B,OAAO,OAAO,OAC1C,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,OAAO,OAAM,KADnD,OAAO,KAEtB,CACA;AAAA,UAAA;AAAA,QAAA,GAEH;AAAA,QACA,oBAAC,iBAAc,WAAU,uCACxB,+BAAC,KAAA,EAAI,SAAQ,QAAO,KAAK,KACxB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,WAAU,iDAAgD,SAAS,kBAAkB,UAAA,UAAM;AAAA,UACnG,oBAAC,UAAO,SAAS,MAAM,kBAAkB,UAAU,CAAC,iBAAiB,UAAA,WAAA,CAAQ;AAAA,QAAA,EAAA,CAC9E,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),l=,/* empty css                                        */t=,/* empty css                                                  */n=,/* empty css                                          */o=,/* empty css                                          */i=require("@mui/material"),r=require("@mui/icons-material/Close");;/* empty css                                     */var s=,/* empty css                                                      */c=require("react-router-dom");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=/* @__PURE__ */u(a),m=/* @__PURE__ */u(r);exports.default=({isOpen:a,setIsOpen:r,modalProps:u,companies:p,email:x,templateRoutes:h})=>{const y=c.useNavigate(),[j,g]=d.default.useState(0),f=()=>{r(null)};/* @__PURE__ */
-return e.jsxs(l.default,{open:a,onClose:f,maxWidth:"xs",fullWidth:!0,...u,children:[
-/* @__PURE__ */e.jsxs(i.DialogTitle,{className:"companySelectionModal--DialogTitle",children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),a=,/* empty css                                        */t=,/* empty css                                                  */i=,/* empty css                                          */n=,/* empty css                                          */o=;/* empty css                                                        */;/* empty css                                     */var r=,/* empty css                                                      */s=require("react-router-dom"),u=,/* empty css                                                                    */d=,/* empty css                                                                  */c=,/* empty css                                                                        */m=,/* empty css                                                              */p=,/* empty css                                                                        */x=;/* empty css                                                    */function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=/* @__PURE__ */j(l);exports.default=({isOpen:l,setIsOpen:j,modalProps:y,companies:f,email:g,templateRoutes:q})=>{const v=s.useNavigate(),[C,_]=h.default.useState(0),b=()=>{j(null)};/* @__PURE__ */
+return e.jsxs(a.default,{open:l,onClose:b,maxWidth:"xs",fullWidth:!0,...y,children:[
+/* @__PURE__ */e.jsxs(u.default,{className:"companySelectionModal--DialogTitle",children:[
 /* @__PURE__ */e.jsx(t.Typography,{type:"s3",color:"inherit",weight:"medium",children:"Select Company"}),
-/* @__PURE__ */e.jsx(i.IconButton,{onClick:f,children:/* @__PURE__ */e.jsx(m.default,{fontSize:"small"})})]}),
-/* @__PURE__ */e.jsx(i.DialogContent,{className:"companySelectionModal--DialogContents",children:/* @__PURE__ */e.jsx(o.default,{displayEmpty:!0,value:j,size:"small",renderValue:e=>{var a;return e?null==(a=p.find(a=>a.value===e))?void 0:a.label:"Select Company"},fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&g(e.target.value)},children:p.map(a=>/* @__PURE__ */e.jsx(i.MenuItem,{value:a.value,children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.1000",children:a.label})},a.value))})}),
-/* @__PURE__ */e.jsx(i.DialogActions,{className:"companySelectionModal--DialogAction",children:/* @__PURE__ */e.jsxs(i.Box,{display:"flex",gap:1.5,children:[
-/* @__PURE__ */e.jsx(n.default,{className:"companySelectionModal--DialogAction--WhiteBtn",onClick:f,children:"Cancel"}),
-/* @__PURE__ */e.jsx(n.default,{onClick:()=>{j?x?y(h.ADD_TEMPLATE(x._id),{state:{company_id:j}}):s.enqueueSnackbar("Something went wrong for a subject",{variant:"error"}):s.enqueueSnackbar("Please select a company",{variant:"error"})},disabled:!j,children:"Continue"})]})})]})};
+/* @__PURE__ */e.jsx(d.default,{onClick:b,children:/* @__PURE__ */e.jsx(o.default,{fontSize:"small"})})]}),
+/* @__PURE__ */e.jsx(c.default,{className:"companySelectionModal--DialogContents",children:/* @__PURE__ */e.jsx(n.default,{displayEmpty:!0,value:C,size:"small",renderValue:e=>{var l;return e?null==(l=f.find(l=>l.value===e))?void 0:l.label:"Select Company"},fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&_(e.target.value)},children:f.map(l=>/* @__PURE__ */e.jsx(m.default,{value:l.value,children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.1000",children:l.label})},l.value))})}),
+/* @__PURE__ */e.jsx(p.default,{className:"companySelectionModal--DialogAction",children:/* @__PURE__ */e.jsxs(x.default,{display:"flex",gap:1.5,children:[
+/* @__PURE__ */e.jsx(i.default,{className:"companySelectionModal--DialogAction--WhiteBtn",onClick:b,children:"Cancel"}),
+/* @__PURE__ */e.jsx(i.default,{onClick:()=>{C?g?v(q.ADD_TEMPLATE(g._id),{state:{company_id:C}}):r.enqueueSnackbar("Something went wrong for a subject",{variant:"error"}):r.enqueueSnackbar("Please select a company",{variant:"error"})},disabled:!C,children:"Continue"})]})})]})};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/company-selection-modal/company-selection-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React 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 './company-selection-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nimport { enqueueSnackbar } from 'notistack';\r\nimport { useNavigate } from 'react-router-dom';\r\n\r\ninterface CompanySelectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: IEmail | null) => void;\r\n\tmodalProps?: DialogProps;\r\n\temail: IEmail;\r\n\tcompanies: Record<string, any>[];\r\n\ttemplateRoutes: Record<string, any>\r\n}\r\n\r\nconst CompanySelectionModal: React.FC<CompanySelectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tcompanies,\r\n\temail,\r\n\ttemplateRoutes\r\n}) => {\r\n\r\n\tconst navigate = useNavigate();\r\n\tconst [selectedCompany, setSelectedCompany] = React.useState<number>(0);\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = () => {\r\n\t\tif(!selectedCompany) {\r\n\t\t\tenqueueSnackbar('Please select a company', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t} else if(!email) {\r\n\t\t\tenqueueSnackbar('Something went wrong for a subject', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tnavigate(templateRoutes.ADD_TEMPLATE(email._id), { state: { company_id: selectedCompany }})\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='xs'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='companySelectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tSelect Company\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t</IconButton>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='companySelectionModal--DialogContents'>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\tvalue={selectedCompany}\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\trenderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\tsetSelectedCompany(e.target.value as number);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t{companies.map((option) => (\r\n\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\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</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='companySelectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='companySelectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={() => handleContinue()} disabled={!selectedCompany}>Continue</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 CompanySelectionModal;\r\n"],"names":["isOpen","setIsOpen","modalProps","companies","email","templateRoutes","navigate","useNavigate","selectedCompany","setSelectedCompany","React","useState","handleModalClose","jsxs","Modal","open","onClose","maxWidth","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","IconButton","onClick","Close","fontSize","DialogContent","Select","displayEmpty","value","size","renderValue","_a","find","option","label","sx","bgcolor","borderRadius","py","onChange","e","target","map","MenuItem","DialogActions","Box","display","gap","Button","ADD_TEMPLATE","_id","state","company_id","enqueueSnackbar","variant","disabled"],"mappings":"mtBAkCoE,EACnEA,SACAC,YACAC,aACAC,YACAC,QACAC,qBAGA,MAAMC,EAAWC,EAAAA,eACVC,EAAiBC,GAAsBC,EAAAA,QAAMC,SAAiB,GAE/DC,EAAmB,KACxBX,EAAU;AAeX,OACCY,EAAAA,KAACC,EAAAA,QAAA,CACAC,KAAMf,EACNgB,QAASJ,EACTK,SAAS,KACTC,WAAS,KACLhB,EACJiB,SAAA;iBAAAN,KAACO,EAAAA,YAAA,CAAYC,UAAU,qCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDG,IAACK,EAAAA,YAAWC,QAAShB,EACpBO,8BAACU,UAAA,CAAMC,SAAS;eAGlBR,EAAAA,IAACS,EAAAA,cAAA,CAAcV,UAAU,wCACxBF,wBAAAG,EAAAA,IAACU,EAAAA,QAAA,CACAC,cAAY,EACZC,MAAO1B,EACP2B,KAAK,QACLC,YAAcF,UAAU,OAAAA,EAAQ,OAAAG,EAAAlC,EAAUmC,KAAMC,GAAWA,EAAOL,QAAUA,SAA5C,EAAAG,EAAoDG,MAAQ,kBAC5FtB,WAAS,EACTuB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOb,OACZzB,EAAmBqC,EAAEC,OAAOb,QAG7Bf,SAAAhB,EAAU6C,IAAKT,wBACdU,EAAAA,SAAA,CAA4Bf,MAAOK,EAAOL,MAC1Cf,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAAoB,EAAOC,SAD7CD,EAAOL;iBAMzBZ,IAAC4B,EAAAA,eAAc7B,UAAU,sCACxBF,+BAACgC,EAAAA,IAAA,CAAIC,QAAQ,OAAOC,IAAK,IACxBlC,SAAA;eAAAG,MAACgC,EAAAA,QAAA,CAAOjC,UAAU,gDAAgDO,QAAShB,EAAkBO,SAAA;eAC7FG,MAACgC,EAAAA,SAAO1B,QAAS,KArDhBpB,EAGOJ,EAKXE,EAASD,EAAekD,aAAanD,EAAMoD,KAAM,CAAEC,MAAO,CAAEC,WAAYlD,KAJvEmD,EAAAA,gBAAgB,qCAAsC,CAAEC,QAAS,UAHjED,EAAAA,gBAAgB,0BAA2B,CAAEC,QAAS,WAoDXC,UAAWrD,EAAiBW,SAAA"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/company-selection-modal/company-selection-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React 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 './company-selection-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nimport { enqueueSnackbar } from 'notistack';\r\nimport { useNavigate } from 'react-router-dom';\r\n\r\ninterface CompanySelectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: IEmail | null) => void;\r\n\tmodalProps?: DialogProps;\r\n\temail: IEmail;\r\n\tcompanies: Record<string, any>[];\r\n\ttemplateRoutes: Record<string, any>\r\n}\r\n\r\nconst CompanySelectionModal: React.FC<CompanySelectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tcompanies,\r\n\temail,\r\n\ttemplateRoutes\r\n}) => {\r\n\r\n\tconst navigate = useNavigate();\r\n\tconst [selectedCompany, setSelectedCompany] = React.useState<number>(0);\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = () => {\r\n\t\tif(!selectedCompany) {\r\n\t\t\tenqueueSnackbar('Please select a company', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t} else if(!email) {\r\n\t\t\tenqueueSnackbar('Something went wrong for a subject', { variant: 'error' });\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tnavigate(templateRoutes.ADD_TEMPLATE(email._id), { state: { company_id: selectedCompany }})\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='xs'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='companySelectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tSelect Company\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t</IconButton>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='companySelectionModal--DialogContents'>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\tvalue={selectedCompany}\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\trenderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tsx={{\r\n\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\tsetSelectedCompany(e.target.value as number);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t{companies.map((option) => (\r\n\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\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</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='companySelectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='companySelectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={() => handleContinue()} disabled={!selectedCompany}>Continue</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 CompanySelectionModal;\r\n"],"names":["isOpen","setIsOpen","modalProps","companies","email","templateRoutes","navigate","useNavigate","selectedCompany","setSelectedCompany","React","useState","handleModalClose","jsxs","Modal","open","onClose","maxWidth","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","IconButton","onClick","Close","fontSize","DialogContent","Select","displayEmpty","value","size","renderValue","_a","find","option","label","sx","bgcolor","borderRadius","py","onChange","e","target","map","MenuItem","DialogActions","Box","display","gap","Button","ADD_TEMPLATE","_id","state","company_id","enqueueSnackbar","variant","disabled"],"mappings":"krCAkCoE,EACnEA,SACAC,YACAC,aACAC,YACAC,QACAC,qBAGA,MAAMC,EAAWC,EAAAA,eACVC,EAAiBC,GAAsBC,EAAAA,QAAMC,SAAiB,GAE/DC,EAAmB,KACxBX,EAAU;AAeX,OACCY,EAAAA,KAACC,EAAAA,QAAA,CACAC,KAAMf,EACNgB,QAASJ,EACTK,SAAS,KACTC,WAAS,KACLhB,EACJiB,SAAA;iBAAAN,KAACO,EAAAA,QAAA,CAAYC,UAAU,qCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDG,IAACK,EAAAA,SAAWC,QAAShB,EACpBO,8BAACU,UAAA,CAAMC,SAAS;eAGlBR,EAAAA,IAACS,EAAAA,QAAA,CAAcV,UAAU,wCACxBF,wBAAAG,EAAAA,IAACU,EAAAA,QAAA,CACAC,cAAY,EACZC,MAAO1B,EACP2B,KAAK,QACLC,YAAcF,UAAU,OAAAA,EAAQ,OAAAG,EAAAlC,EAAUmC,KAAMC,GAAWA,EAAOL,QAAUA,SAA5C,EAAAG,EAAoDG,MAAQ,kBAC5FtB,WAAS,EACTuB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOb,OACZzB,EAAmBqC,EAAEC,OAAOb,QAG7Bf,SAAAhB,EAAU6C,IAAKT,wBACdU,EAAAA,QAAA,CAA4Bf,MAAOK,EAAOL,MAC1Cf,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAAoB,EAAOC,SAD7CD,EAAOL;iBAMzBZ,IAAC4B,EAAAA,SAAc7B,UAAU,sCACxBF,+BAACgC,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,IAAK,IACxBlC,SAAA;eAAAG,MAACgC,EAAAA,QAAA,CAAOjC,UAAU,gDAAgDO,QAAShB,EAAkBO,SAAA;eAC7FG,MAACgC,EAAAA,SAAO1B,QAAS,KArDhBpB,EAGOJ,EAKXE,EAASD,EAAekD,aAAanD,EAAMoD,KAAM,CAAEC,MAAO,CAAEC,WAAYlD,KAJvEmD,EAAAA,gBAAgB,qCAAsC,CAAEC,QAAS,UAHjED,EAAAA,gBAAgB,0BAA2B,CAAEC,QAAS,WAoDXC,UAAWrD,EAAiBW,SAAA"}

package/dist/views/template-editor/components/EditorCanvas/index.esm.js

@@ -2,11 +2,13 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useMemo, useState, useRef, useEffect } from "react";
 import { useDroppable } from "../../../../node_modules/@dnd-kit/core/dist/core.esm/index.esm.js";
 import EditorSection from "../EditorSection/index.esm.js";
-import { Box, Container, Paper } from "@mui/material";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import SectionFormatPanel from "../SectionFormatPanel/index.esm.js";
 import EditorSidebar from "../EditorSidebar/index.esm.js";
 import { generateEmailPreview, generateHeaderFooterPreview } from "../../utils/common/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import Container from "../../../../node_modules/@mui/material/Container/Container/index.esm.js";
+import Paper from "../../../../node_modules/@mui/material/Paper/Paper/index.esm.js";
 const CANVAS_TYPES = {
   HEADER: "header",
   MAIN: "main",

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/components/EditorCanvas.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, { useState, useEffect, useRef, useMemo } from 'react';\r\nimport { useDroppable } from '@dnd-kit/core';\r\nimport EditorSection from './EditorSection';\r\nimport { Box, Container, Paper } from '@mui/material';\r\nimport Typography from '../../../components/typography/typography';\r\nimport SectionFormatPanel from './SectionFormatPanel';\r\nimport EditorSidebar from './EditorSidebar';\r\nimport { generateEmailPreview, generateHeaderFooterPreview } from '../utils/common';\r\nimport { EnhancedSectionData } from '../types/editor';\r\n\r\nconst CANVAS_TYPES = {\r\n  HEADER: 'header',\r\n  MAIN: 'main',\r\n  FOOTER: 'footer'\r\n};\r\n\r\ninterface DropPosition {\r\n  id: string | null;\r\n  type: 'before' | 'after' | 'inside' | 'left' | 'right';\r\n  canvasType: string;\r\n}\r\n\r\ninterface EditorCanvasProps {\r\n  sections: EnhancedSectionData[];\r\n  headerSections: EnhancedSectionData[];\r\n  footerSections: EnhancedSectionData[];\r\n  activeId: string | null;\r\n  overSection: string | null;\r\n  selectedSection: string | null;\r\n  onSelectSection: (id: string | null) => void;\r\n  onUpdateSection: (id: string, data: any, canvasType?: string) => void;\r\n  onSplitSection: (id: string, content1: string, content2: string, canvasType?: string) => void;\r\n  onDeleteSection: (id: string, canvasType?: string) => void;\r\n  preview: boolean;\r\n  placeholders: Record<string, any>[];\r\n  isEditingHeaderFooter: boolean;\r\n  relation_table:any[];\r\n  handleSave?: () => Promise<void>;\r\n}\r\n\r\nconst EditorCanvas: React.FC<EditorCanvasProps> = ({\r\n  sections,\r\n  headerSections,\r\n  footerSections,\r\n  activeId,\r\n  selectedSection,\r\n  onSelectSection,\r\n  onUpdateSection,\r\n  onSplitSection,\r\n  onDeleteSection,\r\n  preview,\r\n  placeholders,\r\n  isEditingHeaderFooter,\r\n  handleSave,\r\n  relation_table\r\n}) => {\r\n  // Convert placeholders to the expected format\r\n  const formattedPlaceholders = useMemo(() => {\r\n    return placeholders.map((p: Record<string, any>) => ({\r\n      value: p.value || p.key || '',\r\n      label: p.label || p.name || String(p.value || p.key || '')\r\n    }));\r\n  }, [placeholders]);\r\n\r\n  const { setNodeRef: setMainCanvasRef } = useDroppable({ id: 'main-canvas' });\r\n  const { setNodeRef: setHeaderCanvasRef } = useDroppable({ id: 'header-canvas' });\r\n  const { setNodeRef: setFooterCanvasRef } = useDroppable({ id: 'footer-canvas' });\r\n\r\n  const selectedSectionData = useMemo(() => {\r\n    return [...sections, ...headerSections, ...footerSections].find((section) => section.id === selectedSection);\r\n  }, [sections, selectedSection]);\r\n\r\n  const [dropTarget, setDropTarget] = useState<DropPosition>({ \r\n    id: null, \r\n    type: 'inside',\r\n    canvasType: CANVAS_TYPES.MAIN\r\n  });\r\n  const [isDraggingFromSidebar, setIsDraggingFromSidebar] = useState(false);\r\n  const [isSectionEditing, setIsSectionEditing] = useState(false);\r\n  \r\n  const lastUpdateTimeRef = useRef(0);\r\n  const lastPositionRef = useRef({ x: 0, y: 0 });\r\n  const activeIdRef = useRef<string | null>(null);\r\n  const mainCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const headerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const footerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  \r\n  const DEBOUNCE_MS = 200;\r\n  const MIN_MOUSE_MOVE = 15;\r\n  const POSITION_HYSTERESIS = 0.1;\r\n\r\n  const getTargetSections = (canvasType: string) => {\r\n    switch (canvasType) {\r\n      case CANVAS_TYPES.HEADER:\r\n        return headerSections;\r\n      case CANVAS_TYPES.FOOTER:\r\n        return footerSections;\r\n      default:\r\n        return sections;\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    activeIdRef.current = activeId;\r\n    \r\n    if (activeId && String(activeId).includes('sidebar-')) {\r\n      setIsDraggingFromSidebar(true);\r\n      \r\n      if (sections?.length > 0) {\r\n        updateDropTarget(sections[0].id, 'before', CANVAS_TYPES.MAIN);\r\n      } else if (headerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(headerSections[0].id, 'before', CANVAS_TYPES.HEADER);\r\n      } else if (footerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(footerSections[0].id, 'before', CANVAS_TYPES.FOOTER);\r\n      } else {\r\n        updateDropTarget(null, 'inside', CANVAS_TYPES.MAIN);\r\n      }\r\n    } else if (!activeId) {\r\n      setIsDraggingFromSidebar(false);\r\n      setDropTarget({ id: null, type: 'inside', canvasType: CANVAS_TYPES.MAIN });\r\n    }\r\n  }, [activeId, sections, headerSections, footerSections, isEditingHeaderFooter]);\r\n\r\n  const updateDropTarget = (id: string | null, type: DropPosition['type'], canvasType: string) => {\r\n    const now = Date.now();\r\n    if (now - lastUpdateTimeRef.current < DEBOUNCE_MS) return;\r\n    \r\n    if (dropTarget.id !== id || dropTarget.type !== type || dropTarget.canvasType !== canvasType) {\r\n      lastUpdateTimeRef.current = now;\r\n      setDropTarget({ id, type, canvasType });\r\n    }\r\n  };\r\n\r\n  const handleMouseMove = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const dx = e.clientX - lastPositionRef.current.x;\r\n    const dy = e.clientY - lastPositionRef.current.y;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n    \r\n    if (distance < MIN_MOUSE_MOVE) return;\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n    \r\n    const elementsUnderCursor = document.elementsFromPoint(e.clientX, e.clientY);\r\n    const sectionElement = elementsUnderCursor.find(el => \r\n      el.hasAttribute('data-section-id')\r\n    );\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (!sectionElement) {\r\n      if (targetSections.length === 0) {\r\n        updateDropTarget(null, 'inside', canvasType);\r\n      } else if (isDraggingFromSidebar) {\r\n        updateDropTarget(targetSections[targetSections.length - 1].id, 'after', canvasType);\r\n      }\r\n      return;\r\n    }\r\n    \r\n    const sectionId = sectionElement.getAttribute('data-section-id');\r\n    if (!sectionId) return;\r\n    \r\n    const sectionCanvasType = sectionElement.hasAttribute('data-canvas-type') \r\n      ? sectionElement.getAttribute('data-canvas-type') as string\r\n      : canvasType;\r\n    \r\n    const rect = sectionElement.getBoundingClientRect();\r\n    const relativeY = e.clientY - rect.top;\r\n    const relativeX = e.clientX - rect.left;\r\n    const sectionHeight = rect.height;\r\n    const sectionWidth = rect.width;\r\n    \r\n    const canvasSections = getTargetSections(sectionCanvasType);\r\n    const section = canvasSections.find(s => s.id === sectionId);\r\n    \r\n    const isSplitGroup = sectionId.startsWith('split-group-');\r\n    \r\n    if (isSplitGroup || (section && section.isSplitPair)) {\r\n      if (relativeX < sectionWidth * (0.5 - POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'left', sectionCanvasType);\r\n      } else if (relativeX > sectionWidth * (0.5 + POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'right', sectionCanvasType);\r\n      } else {\r\n        updateDropTarget(sectionId, 'inside', sectionCanvasType);\r\n      }\r\n    } else {\r\n      let position: DropPosition['type'] = dropTarget.type;\r\n      if (relativeY < sectionHeight * (0.3 - POSITION_HYSTERESIS)) {\r\n        position = 'before';\r\n      } else if (relativeY > sectionHeight * (0.7 + POSITION_HYSTERESIS)) {\r\n        position = 'after';\r\n      } else {\r\n        position = 'inside';\r\n      }\r\n      updateDropTarget(sectionId, position, sectionCanvasType);\r\n    }\r\n  };\r\n\r\n  const handleMouseEnter = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current || !isDraggingFromSidebar) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (targetSections.length > 0) {\r\n      updateDropTarget(targetSections[0].id, 'before', canvasType);\r\n    } else {\r\n      updateDropTarget(null, 'inside', canvasType);\r\n    }\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n  };\r\n\r\n  const renderSectionsForCanvas = (canvasSections: EnhancedSectionData[], canvasType: string) => {\r\n    const result: React.ReactNode[] = [];\r\n    const processedGroups = new Set<string>();\r\n    let i = 0;\r\n    \r\n    const renderDropIndicator = (key: string, isHorizontal = false) => (\r\n      <Box\r\n        key={key}\r\n        sx={{\r\n          [isHorizontal ? 'width' : 'height']: '50px',\r\n          border: '2px dashed',\r\n          borderColor: 'primary.main',\r\n          borderRadius: 1,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          bgcolor: 'rgba(25, 118, 210, 0.04)',\r\n          [isHorizontal ? 'mx' : 'mb']: 2,\r\n          opacity: 0,\r\n          animation: 'fadeIn 0.3s ease-in-out forwards',\r\n          '@keyframes fadeIn': {\r\n            '0%': { opacity: 0, transform: isHorizontal ? 'translateX(-10px)' : 'translateY(-10px)' },\r\n            '100%': { opacity: 1, transform: 'translate(0)' },\r\n          },\r\n        }}\r\n      >\r\n        <Typography type='s2' color='primary' weight='medium'>\r\n          Drop here\r\n        </Typography>\r\n      </Box>\r\n    );\r\n\r\n    if (isDraggingFromSidebar && \r\n        canvasSections?.length > 0 && \r\n        dropTarget.type === 'before' && \r\n        dropTarget.id === canvasSections[0].id &&\r\n        dropTarget.canvasType === canvasType) {\r\n      result.push(renderDropIndicator(`drop-before-first-${canvasType}`));\r\n    }\r\n    \r\n    while (i < canvasSections?.length) {\r\n      const section = canvasSections[i];\r\n      const sectionId = section.id;\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'before' && \r\n          dropTarget.canvasType === canvasType && \r\n          !(isDraggingFromSidebar && i === 0)) {\r\n        result.push(renderDropIndicator(`drop-before-${sectionId}-${canvasType}`));\r\n      }\r\n      \r\n      if (!section.isSplitPair) {\r\n        result.push(\r\n          <Box \r\n            key={section.id} \r\n            data-section-id={section.id} \r\n            data-canvas-type={canvasType}\r\n          >\r\n            <EditorSection\r\n              section={section}\r\n              isSelected={selectedSection === section.id}\r\n              isDragging={activeId === section.id}\r\n              isOver={dropTarget.id === section.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n              onSelect={() => onSelectSection(section.id)}\r\n              onUpdate={(content, extra) => {\r\n                onUpdateSection(section.id, { content, ...extra }, canvasType); \r\n                onSelectSection(null);\r\n              }}\r\n              onSplit={(content1, content2) => onSplitSection(section.id, content1, content2, canvasType)}\r\n              onDelete={() => onDeleteSection(section.id, canvasType)}\r\n              placeholders={formattedPlaceholders}\r\n              setIsSectionEditing={setIsSectionEditing}\r\n            />\r\n          </Box>\r\n        );\r\n        i++;\r\n      } else {\r\n        const splitGroupId = section.splitGroupId;\r\n        if (splitGroupId && processedGroups.has(splitGroupId)) {\r\n          i++;\r\n          continue;\r\n        }\r\n        \r\n        const splitSections = canvasSections.filter(s => s.splitGroupId === splitGroupId);\r\n        if (splitSections.length > 0) {\r\n          if (splitGroupId) processedGroups.add(splitGroupId);\r\n          \r\n          const splitRow = (\r\n            <Box \r\n              key={`split-row-${splitGroupId}`} \r\n              sx={{ \r\n                display: 'flex', \r\n                gap: 2, \r\n                mb: 2, \r\n                bgcolor: 'rgba(0, 0, 0, 0.02)', \r\n                p: 1, \r\n                borderRadius: 1 \r\n              }} \r\n              data-section-id={`split-group-${splitGroupId}`}\r\n              data-canvas-type={canvasType}\r\n            >\r\n              {splitSections.map((splitSection, index) => (\r\n                <React.Fragment key={splitSection.id}>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'left' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-left-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                  <Box\r\n                    sx={{\r\n                      width: splitSection.splitWidth ? `${splitSection.splitWidth}%` : `${100 / splitSections.length}%`,\r\n                      transition: 'width 0.3s ease-in-out',\r\n                    }}\r\n                    data-section-id={splitSection.id}\r\n                    data-canvas-type={canvasType}\r\n                  >\r\n                    <EditorSection\r\n                      section={splitSection}\r\n                      isSelected={selectedSection === splitSection.id}\r\n                      isDragging={activeId === splitSection.id}\r\n                      isOver={dropTarget.id === splitSection.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n                      onSelect={() => onSelectSection(splitSection.id)}\r\n                      onUpdate={(content, extra) => {\r\n                        onUpdateSection(splitSection.id, { content, ...extra }, canvasType); \r\n                        onSelectSection(null);\r\n                      }}\r\n                      onSplit={(content1, content2) => onSplitSection(splitSection.id, content1, content2, canvasType)}\r\n                      onDelete={() => onDeleteSection(splitSection.id, canvasType)}\r\n                      placeholders={formattedPlaceholders}\r\n                      setIsSectionEditing={setIsSectionEditing}\r\n                    />\r\n                  </Box>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'right' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-right-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                </React.Fragment>\r\n              ))}\r\n            </Box>\r\n          );\r\n          result.push(splitRow);\r\n          i += splitSections.length;\r\n        } else {\r\n          i++;\r\n        }\r\n      }\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'after' && \r\n          dropTarget.canvasType === canvasType) {\r\n        result.push(renderDropIndicator(`drop-after-${sectionId}-${canvasType}`));\r\n      }\r\n    }\r\n    \r\n    if ((canvasSections?.length === 0 && activeId && dropTarget.canvasType === canvasType) || \r\n        (canvasSections?.length === 0 && isDraggingFromSidebar && dropTarget.canvasType === canvasType)) {\r\n      result.push(renderDropIndicator(`drop-empty-canvas-${canvasType}`));\r\n    }\r\n    \r\n    return result;\r\n  };\r\n\r\n  const renderedMainSections = useMemo(() => \r\n    renderSectionsForCanvas(sections, CANVAS_TYPES.MAIN), \r\n    [sections, dropTarget, activeId, isDraggingFromSidebar, selectedSection]\r\n  );\r\n  \r\n  const renderedHeaderSections = useMemo(() => \r\n    renderSectionsForCanvas(headerSections, CANVAS_TYPES.HEADER),\r\n    [headerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n  \r\n  const renderedFooterSections = useMemo(() => \r\n    renderSectionsForCanvas(footerSections, CANVAS_TYPES.FOOTER),\r\n    [footerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n\r\n  const renderPreview = () => {\r\n    // const allSections = [...headerSections, ...sections, ...footerSections];\r\n    return <Box dangerouslySetInnerHTML={{ __html: generateEmailPreview(sections, headerSections, footerSections) }} />;\r\n  };\r\n\r\n  const renderCanvas = (\r\n    title: string, \r\n    canvasType: string, \r\n    renderedSections: React.ReactNode[], \r\n    setCanvasRef: (node: HTMLElement | null) => void,\r\n    ref: React.MutableRefObject<HTMLDivElement | null>,\r\n    visible: boolean = true\r\n  ) => {\r\n    if (!visible) return null;\r\n    \r\n    return (\r\n      <Box sx={{ mb: 3 }}>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && headerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n              sx= {{\r\n                    boxShadow: 'none !important',\r\n                    \".MuiAccordionSummary-root\": {\r\n                      backgroundColor: '#fafafa !important',\r\n                      border: `0 !important`,\r\n                      p: 0,\r\n                      pb: 1,\r\n                      // mb: 1,\r\n                      m:0,\r\n                      minHeight: 'unset'\r\n                    }\r\n                }}\r\n            >\r\n              <AccordionSummary\r\n                expandIcon={<ExpandMoreIcon />}\r\n                aria-controls=\"panel1-content\"\r\n                id=\"panel1-header\"\r\n              > */}\r\n                <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'}>Header</Typography>\r\n              {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(headerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n        )}\r\n        <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mb: 1 }}>{title}</Typography>\r\n        <Paper\r\n          ref={(node) => {\r\n            setCanvasRef(node);\r\n            ref.current = node;\r\n          }}\r\n          elevation={0}\r\n          sx={{\r\n            p: 4,\r\n            border: '1px dashed',\r\n            borderColor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n              ? 'primary.main' \r\n              : 'primary.light',\r\n            borderRadius: 1,\r\n            bgcolor: 'background.paper',\r\n            position: 'relative',\r\n            minHeight: title === 'Header' || title === 'Footer' ? '100px' : '200px',\r\n            transition: 'border-color 0.3s ease, background-color 0.3s ease',\r\n            '&:hover': {\r\n              bgcolor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n                ? 'rgba(25, 118, 210, 0.04)' \r\n                : 'background.paper',\r\n            },\r\n            pointerEvents: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 'none' \r\n              : 'auto',\r\n            opacity: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 0.5 \r\n              : 1,\r\n          }}\r\n          onClick={() => {\r\n            if ((canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter) return;\r\n            onSelectSection(null);\r\n          }}\r\n          onMouseMove={(e) => handleMouseMove(e, canvasType)}\r\n          onMouseEnter={(e) => handleMouseEnter(e, canvasType)}\r\n        >\r\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\r\n            {renderedSections}\r\n            {getTargetSections(canvasType)?.length === 0 && \r\n             !activeId && \r\n             !isDraggingFromSidebar && (\r\n              <Box sx={{ borderRadius: 1, p: 2, textAlign: 'center', color: 'text.secondary' }}>\r\n                <Typography type='s2' color='theme.secondary.600' weight='medium'>\r\n                  Drag Sections from side panel to start building the {title.toLowerCase()}\r\n                </Typography>\r\n              </Box>\r\n            )}\r\n          </Box>\r\n        </Paper>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && footerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n            sx= {{\r\n                  boxShadow: 'none !important',\r\n                  \".MuiAccordionSummary-root\": {\r\n                    backgroundColor: '#fafafa !important',\r\n                    border: `0 !important`,\r\n                    p: 0,\r\n                    pb: 1,\r\n                    // mb: 1,\r\n                    m:0,\r\n                    minHeight: 'unset'\r\n                  }\r\n              }}\r\n          >\r\n            <AccordionSummary\r\n              expandIcon={<ExpandMoreIcon />}\r\n              aria-controls=\"panel1-content\"\r\n              id=\"panel1-header\"\r\n            > */}\r\n              <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mt: 1 }}>Footer</Typography>\r\n            {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(footerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n          )}\r\n      </Box>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\r\n      <Box sx={{ flex: 1, overflow: 'auto', height: 'calc(100vh - 104px)' }}>\r\n        <Container maxWidth=\"lg\" sx={{ py: 4 }}>\r\n          {preview ? (\r\n            renderPreview()\r\n          ) : (\r\n            <>\r\n              {renderCanvas(\r\n                'Header', \r\n                CANVAS_TYPES.HEADER, \r\n                renderedHeaderSections, \r\n                setHeaderCanvasRef, \r\n                headerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Content', \r\n                CANVAS_TYPES.MAIN, \r\n                renderedMainSections, \r\n                setMainCanvasRef, \r\n                mainCanvasRef,\r\n                !isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Footer', \r\n                CANVAS_TYPES.FOOTER, \r\n                renderedFooterSections, \r\n                setFooterCanvasRef, \r\n                footerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n            </>\r\n          )}\r\n        </Container>\r\n      </Box>\r\n      <Box\r\n        sx={{\r\n          width: 400,\r\n          flexShrink: 0,\r\n          position: 'sticky',\r\n          top: 0,\r\n          alignSelf: 'flex-start',\r\n          height: 'calc(100vh - 104px)',\r\n          overflowY: 'auto',\r\n          borderLeft: '1px solid',\r\n          borderColor: 'divider',\r\n          bgcolor: 'background.paper',\r\n          zIndex: 1,\r\n        }}\r\n      >\r\n        {(selectedSection && !selectedSectionData?.is_edited_from_source && !isSectionEditing) ? (\r\n          <SectionFormatPanel\r\n            section={selectedSectionData}\r\n            onClose={() => onSelectSection(null)}\r\n            onUpdate={(data) => {\r\n              if (selectedSection) {\r\n                const canvasType = headerSections.some(s => s.id === selectedSection)\r\n                  ? CANVAS_TYPES.HEADER\r\n                  : footerSections.some(s => s.id === selectedSection)\r\n                    ? CANVAS_TYPES.FOOTER\r\n                    : CANVAS_TYPES.MAIN;\r\n                onUpdateSection(selectedSection, data, canvasType);\r\n              }\r\n            }}\r\n            placeholders={placeholders}\r\n            handleSave={handleSave}\r\n            relation_table={relation_table}\r\n          />\r\n        ) : (\r\n          <EditorSidebar />\r\n        )}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default EditorCanvas;"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/components/EditorCanvas.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, { useState, useEffect, useRef, useMemo } from 'react';\r\nimport { useDroppable } from '@dnd-kit/core';\r\nimport EditorSection from './EditorSection';\r\nimport { Box, Container, Paper } from '@mui/material';\r\nimport Typography from '../../../components/typography/typography';\r\nimport SectionFormatPanel from './SectionFormatPanel';\r\nimport EditorSidebar from './EditorSidebar';\r\nimport { generateEmailPreview, generateHeaderFooterPreview } from '../utils/common';\r\nimport { EnhancedSectionData } from '../types/editor';\r\n\r\nconst CANVAS_TYPES = {\r\n  HEADER: 'header',\r\n  MAIN: 'main',\r\n  FOOTER: 'footer'\r\n};\r\n\r\ninterface DropPosition {\r\n  id: string | null;\r\n  type: 'before' | 'after' | 'inside' | 'left' | 'right';\r\n  canvasType: string;\r\n}\r\n\r\ninterface EditorCanvasProps {\r\n  sections: EnhancedSectionData[];\r\n  headerSections: EnhancedSectionData[];\r\n  footerSections: EnhancedSectionData[];\r\n  activeId: string | null;\r\n  overSection: string | null;\r\n  selectedSection: string | null;\r\n  onSelectSection: (id: string | null) => void;\r\n  onUpdateSection: (id: string, data: any, canvasType?: string) => void;\r\n  onSplitSection: (id: string, content1: string, content2: string, canvasType?: string) => void;\r\n  onDeleteSection: (id: string, canvasType?: string) => void;\r\n  preview: boolean;\r\n  placeholders: Record<string, any>[];\r\n  isEditingHeaderFooter: boolean;\r\n  relation_table:any[];\r\n  handleSave?: () => Promise<void>;\r\n}\r\n\r\nconst EditorCanvas: React.FC<EditorCanvasProps> = ({\r\n  sections,\r\n  headerSections,\r\n  footerSections,\r\n  activeId,\r\n  selectedSection,\r\n  onSelectSection,\r\n  onUpdateSection,\r\n  onSplitSection,\r\n  onDeleteSection,\r\n  preview,\r\n  placeholders,\r\n  isEditingHeaderFooter,\r\n  handleSave,\r\n  relation_table\r\n}) => {\r\n  // Convert placeholders to the expected format\r\n  const formattedPlaceholders = useMemo(() => {\r\n    return placeholders.map((p: Record<string, any>) => ({\r\n      value: p.value || p.key || '',\r\n      label: p.label || p.name || String(p.value || p.key || '')\r\n    }));\r\n  }, [placeholders]);\r\n\r\n  const { setNodeRef: setMainCanvasRef } = useDroppable({ id: 'main-canvas' });\r\n  const { setNodeRef: setHeaderCanvasRef } = useDroppable({ id: 'header-canvas' });\r\n  const { setNodeRef: setFooterCanvasRef } = useDroppable({ id: 'footer-canvas' });\r\n\r\n  const selectedSectionData = useMemo(() => {\r\n    return [...sections, ...headerSections, ...footerSections].find((section) => section.id === selectedSection);\r\n  }, [sections, selectedSection]);\r\n\r\n  const [dropTarget, setDropTarget] = useState<DropPosition>({ \r\n    id: null, \r\n    type: 'inside',\r\n    canvasType: CANVAS_TYPES.MAIN\r\n  });\r\n  const [isDraggingFromSidebar, setIsDraggingFromSidebar] = useState(false);\r\n  const [isSectionEditing, setIsSectionEditing] = useState(false);\r\n  \r\n  const lastUpdateTimeRef = useRef(0);\r\n  const lastPositionRef = useRef({ x: 0, y: 0 });\r\n  const activeIdRef = useRef<string | null>(null);\r\n  const mainCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const headerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  const footerCanvasRef = useRef<HTMLDivElement | null>(null);\r\n  \r\n  const DEBOUNCE_MS = 200;\r\n  const MIN_MOUSE_MOVE = 15;\r\n  const POSITION_HYSTERESIS = 0.1;\r\n\r\n  const getTargetSections = (canvasType: string) => {\r\n    switch (canvasType) {\r\n      case CANVAS_TYPES.HEADER:\r\n        return headerSections;\r\n      case CANVAS_TYPES.FOOTER:\r\n        return footerSections;\r\n      default:\r\n        return sections;\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    activeIdRef.current = activeId;\r\n    \r\n    if (activeId && String(activeId).includes('sidebar-')) {\r\n      setIsDraggingFromSidebar(true);\r\n      \r\n      if (sections?.length > 0) {\r\n        updateDropTarget(sections[0].id, 'before', CANVAS_TYPES.MAIN);\r\n      } else if (headerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(headerSections[0].id, 'before', CANVAS_TYPES.HEADER);\r\n      } else if (footerSections?.length > 0 && isEditingHeaderFooter) {\r\n        updateDropTarget(footerSections[0].id, 'before', CANVAS_TYPES.FOOTER);\r\n      } else {\r\n        updateDropTarget(null, 'inside', CANVAS_TYPES.MAIN);\r\n      }\r\n    } else if (!activeId) {\r\n      setIsDraggingFromSidebar(false);\r\n      setDropTarget({ id: null, type: 'inside', canvasType: CANVAS_TYPES.MAIN });\r\n    }\r\n  }, [activeId, sections, headerSections, footerSections, isEditingHeaderFooter]);\r\n\r\n  const updateDropTarget = (id: string | null, type: DropPosition['type'], canvasType: string) => {\r\n    const now = Date.now();\r\n    if (now - lastUpdateTimeRef.current < DEBOUNCE_MS) return;\r\n    \r\n    if (dropTarget.id !== id || dropTarget.type !== type || dropTarget.canvasType !== canvasType) {\r\n      lastUpdateTimeRef.current = now;\r\n      setDropTarget({ id, type, canvasType });\r\n    }\r\n  };\r\n\r\n  const handleMouseMove = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const dx = e.clientX - lastPositionRef.current.x;\r\n    const dy = e.clientY - lastPositionRef.current.y;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n    \r\n    if (distance < MIN_MOUSE_MOVE) return;\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n    \r\n    const elementsUnderCursor = document.elementsFromPoint(e.clientX, e.clientY);\r\n    const sectionElement = elementsUnderCursor.find(el => \r\n      el.hasAttribute('data-section-id')\r\n    );\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (!sectionElement) {\r\n      if (targetSections.length === 0) {\r\n        updateDropTarget(null, 'inside', canvasType);\r\n      } else if (isDraggingFromSidebar) {\r\n        updateDropTarget(targetSections[targetSections.length - 1].id, 'after', canvasType);\r\n      }\r\n      return;\r\n    }\r\n    \r\n    const sectionId = sectionElement.getAttribute('data-section-id');\r\n    if (!sectionId) return;\r\n    \r\n    const sectionCanvasType = sectionElement.hasAttribute('data-canvas-type') \r\n      ? sectionElement.getAttribute('data-canvas-type') as string\r\n      : canvasType;\r\n    \r\n    const rect = sectionElement.getBoundingClientRect();\r\n    const relativeY = e.clientY - rect.top;\r\n    const relativeX = e.clientX - rect.left;\r\n    const sectionHeight = rect.height;\r\n    const sectionWidth = rect.width;\r\n    \r\n    const canvasSections = getTargetSections(sectionCanvasType);\r\n    const section = canvasSections.find(s => s.id === sectionId);\r\n    \r\n    const isSplitGroup = sectionId.startsWith('split-group-');\r\n    \r\n    if (isSplitGroup || (section && section.isSplitPair)) {\r\n      if (relativeX < sectionWidth * (0.5 - POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'left', sectionCanvasType);\r\n      } else if (relativeX > sectionWidth * (0.5 + POSITION_HYSTERESIS)) {\r\n        updateDropTarget(sectionId, 'right', sectionCanvasType);\r\n      } else {\r\n        updateDropTarget(sectionId, 'inside', sectionCanvasType);\r\n      }\r\n    } else {\r\n      let position: DropPosition['type'] = dropTarget.type;\r\n      if (relativeY < sectionHeight * (0.3 - POSITION_HYSTERESIS)) {\r\n        position = 'before';\r\n      } else if (relativeY > sectionHeight * (0.7 + POSITION_HYSTERESIS)) {\r\n        position = 'after';\r\n      } else {\r\n        position = 'inside';\r\n      }\r\n      updateDropTarget(sectionId, position, sectionCanvasType);\r\n    }\r\n  };\r\n\r\n  const handleMouseEnter = (e: React.MouseEvent, canvasType: string) => {\r\n    if (!activeIdRef.current || !isDraggingFromSidebar) return;\r\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\r\n    \r\n    const targetSections = getTargetSections(canvasType);\r\n    \r\n    if (targetSections.length > 0) {\r\n      updateDropTarget(targetSections[0].id, 'before', canvasType);\r\n    } else {\r\n      updateDropTarget(null, 'inside', canvasType);\r\n    }\r\n    \r\n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\r\n  };\r\n\r\n  const renderSectionsForCanvas = (canvasSections: EnhancedSectionData[], canvasType: string) => {\r\n    const result: React.ReactNode[] = [];\r\n    const processedGroups = new Set<string>();\r\n    let i = 0;\r\n    \r\n    const renderDropIndicator = (key: string, isHorizontal = false) => (\r\n      <Box\r\n        key={key}\r\n        sx={{\r\n          [isHorizontal ? 'width' : 'height']: '50px',\r\n          border: '2px dashed',\r\n          borderColor: 'primary.main',\r\n          borderRadius: 1,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          bgcolor: 'rgba(25, 118, 210, 0.04)',\r\n          [isHorizontal ? 'mx' : 'mb']: 2,\r\n          opacity: 0,\r\n          animation: 'fadeIn 0.3s ease-in-out forwards',\r\n          '@keyframes fadeIn': {\r\n            '0%': { opacity: 0, transform: isHorizontal ? 'translateX(-10px)' : 'translateY(-10px)' },\r\n            '100%': { opacity: 1, transform: 'translate(0)' },\r\n          },\r\n        }}\r\n      >\r\n        <Typography type='s2' color='primary' weight='medium'>\r\n          Drop here\r\n        </Typography>\r\n      </Box>\r\n    );\r\n\r\n    if (isDraggingFromSidebar && \r\n        canvasSections?.length > 0 && \r\n        dropTarget.type === 'before' && \r\n        dropTarget.id === canvasSections[0].id &&\r\n        dropTarget.canvasType === canvasType) {\r\n      result.push(renderDropIndicator(`drop-before-first-${canvasType}`));\r\n    }\r\n    \r\n    while (i < canvasSections?.length) {\r\n      const section = canvasSections[i];\r\n      const sectionId = section.id;\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'before' && \r\n          dropTarget.canvasType === canvasType && \r\n          !(isDraggingFromSidebar && i === 0)) {\r\n        result.push(renderDropIndicator(`drop-before-${sectionId}-${canvasType}`));\r\n      }\r\n      \r\n      if (!section.isSplitPair) {\r\n        result.push(\r\n          <Box \r\n            key={section.id} \r\n            data-section-id={section.id} \r\n            data-canvas-type={canvasType}\r\n          >\r\n            <EditorSection\r\n              section={section}\r\n              isSelected={selectedSection === section.id}\r\n              isDragging={activeId === section.id}\r\n              isOver={dropTarget.id === section.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n              onSelect={() => onSelectSection(section.id)}\r\n              onUpdate={(content, extra) => {\r\n                onUpdateSection(section.id, { content, ...extra }, canvasType); \r\n                onSelectSection(null);\r\n              }}\r\n              onSplit={(content1, content2) => onSplitSection(section.id, content1, content2, canvasType)}\r\n              onDelete={() => onDeleteSection(section.id, canvasType)}\r\n              placeholders={formattedPlaceholders}\r\n              setIsSectionEditing={setIsSectionEditing}\r\n            />\r\n          </Box>\r\n        );\r\n        i++;\r\n      } else {\r\n        const splitGroupId = section.splitGroupId;\r\n        if (splitGroupId && processedGroups.has(splitGroupId)) {\r\n          i++;\r\n          continue;\r\n        }\r\n        \r\n        const splitSections = canvasSections.filter(s => s.splitGroupId === splitGroupId);\r\n        if (splitSections.length > 0) {\r\n          if (splitGroupId) processedGroups.add(splitGroupId);\r\n          \r\n          const splitRow = (\r\n            <Box \r\n              key={`split-row-${splitGroupId}`} \r\n              sx={{ \r\n                display: 'flex', \r\n                gap: 2, \r\n                mb: 2, \r\n                bgcolor: 'rgba(0, 0, 0, 0.02)', \r\n                p: 1, \r\n                borderRadius: 1 \r\n              }} \r\n              data-section-id={`split-group-${splitGroupId}`}\r\n              data-canvas-type={canvasType}\r\n            >\r\n              {splitSections.map((splitSection, index) => (\r\n                <React.Fragment key={splitSection.id}>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'left' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-left-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                  <Box\r\n                    sx={{\r\n                      width: splitSection.splitWidth ? `${splitSection.splitWidth}%` : `${100 / splitSections.length}%`,\r\n                      transition: 'width 0.3s ease-in-out',\r\n                    }}\r\n                    data-section-id={splitSection.id}\r\n                    data-canvas-type={canvasType}\r\n                  >\r\n                    <EditorSection\r\n                      section={splitSection}\r\n                      isSelected={selectedSection === splitSection.id}\r\n                      isDragging={activeId === splitSection.id}\r\n                      isOver={dropTarget.id === splitSection.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\r\n                      onSelect={() => onSelectSection(splitSection.id)}\r\n                      onUpdate={(content, extra) => {\r\n                        onUpdateSection(splitSection.id, { content, ...extra }, canvasType); \r\n                        onSelectSection(null);\r\n                      }}\r\n                      onSplit={(content1, content2) => onSplitSection(splitSection.id, content1, content2, canvasType)}\r\n                      onDelete={() => onDeleteSection(splitSection.id, canvasType)}\r\n                      placeholders={formattedPlaceholders}\r\n                      setIsSectionEditing={setIsSectionEditing}\r\n                    />\r\n                  </Box>\r\n                  {dropTarget.id === splitSection.id && \r\n                   dropTarget.type === 'right' && \r\n                   dropTarget.canvasType === canvasType && (\r\n                    renderDropIndicator(`drop-right-${splitSection.id}-${canvasType}`, true)\r\n                  )}\r\n                </React.Fragment>\r\n              ))}\r\n            </Box>\r\n          );\r\n          result.push(splitRow);\r\n          i += splitSections.length;\r\n        } else {\r\n          i++;\r\n        }\r\n      }\r\n      \r\n      if (dropTarget.id === sectionId && \r\n          dropTarget.type === 'after' && \r\n          dropTarget.canvasType === canvasType) {\r\n        result.push(renderDropIndicator(`drop-after-${sectionId}-${canvasType}`));\r\n      }\r\n    }\r\n    \r\n    if ((canvasSections?.length === 0 && activeId && dropTarget.canvasType === canvasType) || \r\n        (canvasSections?.length === 0 && isDraggingFromSidebar && dropTarget.canvasType === canvasType)) {\r\n      result.push(renderDropIndicator(`drop-empty-canvas-${canvasType}`));\r\n    }\r\n    \r\n    return result;\r\n  };\r\n\r\n  const renderedMainSections = useMemo(() => \r\n    renderSectionsForCanvas(sections, CANVAS_TYPES.MAIN), \r\n    [sections, dropTarget, activeId, isDraggingFromSidebar, selectedSection]\r\n  );\r\n  \r\n  const renderedHeaderSections = useMemo(() => \r\n    renderSectionsForCanvas(headerSections, CANVAS_TYPES.HEADER),\r\n    [headerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n  \r\n  const renderedFooterSections = useMemo(() => \r\n    renderSectionsForCanvas(footerSections, CANVAS_TYPES.FOOTER),\r\n    [footerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\r\n  );\r\n\r\n  const renderPreview = () => {\r\n    // const allSections = [...headerSections, ...sections, ...footerSections];\r\n    return <Box dangerouslySetInnerHTML={{ __html: generateEmailPreview(sections, headerSections, footerSections) }} />;\r\n  };\r\n\r\n  const renderCanvas = (\r\n    title: string, \r\n    canvasType: string, \r\n    renderedSections: React.ReactNode[], \r\n    setCanvasRef: (node: HTMLElement | null) => void,\r\n    ref: React.MutableRefObject<HTMLDivElement | null>,\r\n    visible: boolean = true\r\n  ) => {\r\n    if (!visible) return null;\r\n    \r\n    return (\r\n      <Box sx={{ mb: 3 }}>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && headerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n              sx= {{\r\n                    boxShadow: 'none !important',\r\n                    \".MuiAccordionSummary-root\": {\r\n                      backgroundColor: '#fafafa !important',\r\n                      border: `0 !important`,\r\n                      p: 0,\r\n                      pb: 1,\r\n                      // mb: 1,\r\n                      m:0,\r\n                      minHeight: 'unset'\r\n                    }\r\n                }}\r\n            >\r\n              <AccordionSummary\r\n                expandIcon={<ExpandMoreIcon />}\r\n                aria-controls=\"panel1-content\"\r\n                id=\"panel1-header\"\r\n              > */}\r\n                <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'}>Header</Typography>\r\n              {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(headerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n        )}\r\n        <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mb: 1 }}>{title}</Typography>\r\n        <Paper\r\n          ref={(node) => {\r\n            setCanvasRef(node);\r\n            ref.current = node;\r\n          }}\r\n          elevation={0}\r\n          sx={{\r\n            p: 4,\r\n            border: '1px dashed',\r\n            borderColor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n              ? 'primary.main' \r\n              : 'primary.light',\r\n            borderRadius: 1,\r\n            bgcolor: 'background.paper',\r\n            position: 'relative',\r\n            minHeight: title === 'Header' || title === 'Footer' ? '100px' : '200px',\r\n            transition: 'border-color 0.3s ease, background-color 0.3s ease',\r\n            '&:hover': {\r\n              bgcolor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \r\n                ? 'rgba(25, 118, 210, 0.04)' \r\n                : 'background.paper',\r\n            },\r\n            pointerEvents: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 'none' \r\n              : 'auto',\r\n            opacity: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \r\n              ? 0.5 \r\n              : 1,\r\n          }}\r\n          onClick={() => {\r\n            if ((canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter) return;\r\n            onSelectSection(null);\r\n          }}\r\n          onMouseMove={(e) => handleMouseMove(e, canvasType)}\r\n          onMouseEnter={(e) => handleMouseEnter(e, canvasType)}\r\n        >\r\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\r\n            {renderedSections}\r\n            {getTargetSections(canvasType)?.length === 0 && \r\n             !activeId && \r\n             !isDraggingFromSidebar && (\r\n              <Box sx={{ borderRadius: 1, p: 2, textAlign: 'center', color: 'text.secondary' }}>\r\n                <Typography type='s2' color='theme.secondary.600' weight='medium'>\r\n                  Drag Sections from side panel to start building the {title.toLowerCase()}\r\n                </Typography>\r\n              </Box>\r\n            )}\r\n          </Box>\r\n        </Paper>\r\n        {CANVAS_TYPES.MAIN === canvasType && visible && footerSections.length > 0 && (\r\n          <>\r\n            {/* <Accordion\r\n            sx= {{\r\n                  boxShadow: 'none !important',\r\n                  \".MuiAccordionSummary-root\": {\r\n                    backgroundColor: '#fafafa !important',\r\n                    border: `0 !important`,\r\n                    p: 0,\r\n                    pb: 1,\r\n                    // mb: 1,\r\n                    m:0,\r\n                    minHeight: 'unset'\r\n                  }\r\n              }}\r\n          >\r\n            <AccordionSummary\r\n              expandIcon={<ExpandMoreIcon />}\r\n              aria-controls=\"panel1-content\"\r\n              id=\"panel1-header\"\r\n            > */}\r\n              <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mt: 1 }}>Footer</Typography>\r\n            {/* </AccordionSummary> */}\r\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(footerSections) }} />\r\n            {/* </Accordion> */}\r\n          </>\r\n          )}\r\n      </Box>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\r\n      <Box sx={{ flex: 1, overflow: 'auto', height: 'calc(100vh - 104px)' }}>\r\n        <Container maxWidth=\"lg\" sx={{ py: 4 }}>\r\n          {preview ? (\r\n            renderPreview()\r\n          ) : (\r\n            <>\r\n              {renderCanvas(\r\n                'Header', \r\n                CANVAS_TYPES.HEADER, \r\n                renderedHeaderSections, \r\n                setHeaderCanvasRef, \r\n                headerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Content', \r\n                CANVAS_TYPES.MAIN, \r\n                renderedMainSections, \r\n                setMainCanvasRef, \r\n                mainCanvasRef,\r\n                !isEditingHeaderFooter\r\n              )}\r\n              {renderCanvas(\r\n                'Footer', \r\n                CANVAS_TYPES.FOOTER, \r\n                renderedFooterSections, \r\n                setFooterCanvasRef, \r\n                footerCanvasRef,\r\n                isEditingHeaderFooter\r\n              )}\r\n            </>\r\n          )}\r\n        </Container>\r\n      </Box>\r\n      <Box\r\n        sx={{\r\n          width: 400,\r\n          flexShrink: 0,\r\n          position: 'sticky',\r\n          top: 0,\r\n          alignSelf: 'flex-start',\r\n          height: 'calc(100vh - 104px)',\r\n          overflowY: 'auto',\r\n          borderLeft: '1px solid',\r\n          borderColor: 'divider',\r\n          bgcolor: 'background.paper',\r\n          zIndex: 1,\r\n        }}\r\n      >\r\n        {(selectedSection && !selectedSectionData?.is_edited_from_source && !isSectionEditing) ? (\r\n          <SectionFormatPanel\r\n            section={selectedSectionData}\r\n            onClose={() => onSelectSection(null)}\r\n            onUpdate={(data) => {\r\n              if (selectedSection) {\r\n                const canvasType = headerSections.some(s => s.id === selectedSection)\r\n                  ? CANVAS_TYPES.HEADER\r\n                  : footerSections.some(s => s.id === selectedSection)\r\n                    ? CANVAS_TYPES.FOOTER\r\n                    : CANVAS_TYPES.MAIN;\r\n                onUpdateSection(selectedSection, data, canvasType);\r\n              }\r\n            }}\r\n            placeholders={placeholders}\r\n            handleSave={handleSave}\r\n            relation_table={relation_table}\r\n          />\r\n        ) : (\r\n          <EditorSidebar />\r\n        )}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default EditorCanvas;"],"names":["React"],"mappings":"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"}

package/dist/views/template-editor/components/EditorCanvas/index.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),n=require("../EditorSection/index.js"),r=require("@mui/material"),o=require("../../../../components/typography/typography/index.js"),s=require("../SectionFormatPanel/index.js"),a=require("../EditorSidebar/index.js"),d=require("../../utils/common/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=/* @__PURE__ */l(t);const p="header",u="main",h="footer";exports.default=({sections:l,headerSections:x,footerSections:y,activeId:f,selectedSection:g,onSelectSection:m,onUpdateSection:v,onSplitSection:b,onDeleteSection:j,preview:S,placeholders:w,isEditingHeaderFooter:T,handleSave:R,relation_table:_})=>{const M=t.useMemo(()=>w.map(e=>({value:e.value||e.key||"",label:e.label||e.name||String(e.value||e.key||"")})),[w]),{setNodeRef:$}=i.useDroppable({id:"main-canvas"}),{setNodeRef:B}=i.useDroppable({id:"header-canvas"}),{setNodeRef:D}=i.useDroppable({id:"footer-canvas"}),F=t.useMemo(()=>[...l,...x,...y].find(e=>e.id===g),[l,g]),[I,k]=t.useState({id:null,type:"inside",canvasType:u}),[P,q]=t.useState(!1),[C,H]=t.useState(!1),E=t.useRef(0),Y=t.useRef({x:0,y:0}),X=t.useRef(null),A=t.useRef(null),L=t.useRef(null),U=t.useRef(null),W=e=>{switch(e){case p:return x;case h:return y;default:return l}};t.useEffect(()=>{X.current=f,f&&String(f).includes("sidebar-")?(q(!0),(null==l?void 0:l.length)>0?N(l[0].id,"before",u):(null==x?void 0:x.length)>0&&T?N(x[0].id,"before",p):(null==y?void 0:y.length)>0&&T?N(y[0].id,"before",h):N(null,"inside",u)):f||(q(!1),k({id:null,type:"inside",canvasType:u}))},[f,l,x,y,T]);const N=(e,t,i)=>{const n=Date.now();n-E.current<200||I.id===e&&I.type===t&&I.canvasType===i||(E.current=n,k({id:e,type:t,canvasType:i}))},O=(t,i)=>{const s=[],a=/* @__PURE__ */new Set;let d=0;const l=(t,i=!1)=>/* @__PURE__ */e.jsx(r.Box,{sx:{[i?"width":"height"]:"50px",border:"2px dashed",borderColor:"primary.main",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",bgcolor:"rgba(25, 118, 210, 0.04)",[i?"mx":"mb"]:2,opacity:0,animation:"fadeIn 0.3s ease-in-out forwards","@keyframes fadeIn":{"0%":{opacity:0,transform:i?"translateX(-10px)":"translateY(-10px)"},"100%":{opacity:1,transform:"translate(0)"}}},children:/* @__PURE__ */e.jsx(o.Typography,{type:"s2",color:"primary",weight:"medium",children:"Drop here"})},t);for(P&&(null==t?void 0:t.length)>0&&"before"===I.type&&I.id===t[0].id&&I.canvasType===i&&s.push(l(`drop-before-first-${i}`));d<(null==t?void 0:t.length);){const o=t[d],p=o.id;if(I.id!==p||"before"!==I.type||I.canvasType!==i||P&&0===d||s.push(l(`drop-before-${p}-${i}`)),o.isSplitPair){const p=o.splitGroupId;if(p&&a.has(p)){d++;continue}const u=t.filter(e=>e.splitGroupId===p);if(u.length>0){p&&a.add(p);const t=/* @__PURE__ */e.jsx(r.Box,{sx:{display:"flex",gap:2,mb:2,bgcolor:"rgba(0, 0, 0, 0.02)",p:1,borderRadius:1},"data-section-id":`split-group-${p}`,"data-canvas-type":i,children:u.map((t,o)=>/* @__PURE__ */e.jsxs(c.default.Fragment,{children:[I.id===t.id&&"left"===I.type&&I.canvasType===i&&l(`drop-left-${t.id}-${i}`,!0),
-/* @__PURE__ */e.jsx(r.Box,{sx:{width:t.splitWidth?`${t.splitWidth}%`:100/u.length+"%",transition:"width 0.3s ease-in-out"},"data-section-id":t.id,"data-canvas-type":i,children:/* @__PURE__ */e.jsx(n.default,{section:t,isSelected:g===t.id,isDragging:f===t.id,isOver:I.id===t.id&&"inside"===I.type&&I.canvasType===i,onSelect:()=>m(t.id),onUpdate:(e,n)=>{v(t.id,{content:e,...n},i),m(null)},onSplit:(e,n)=>b(t.id,e,n,i),onDelete:()=>j(t.id,i),placeholders:M,setIsSectionEditing:H})}),I.id===t.id&&"right"===I.type&&I.canvasType===i&&l(`drop-right-${t.id}-${i}`,!0)]},t.id))},`split-row-${p}`);s.push(t),d+=u.length}else d++}else s.push(
-/* @__PURE__ */e.jsx(r.Box,{"data-section-id":o.id,"data-canvas-type":i,children:/* @__PURE__ */e.jsx(n.default,{section:o,isSelected:g===o.id,isDragging:f===o.id,isOver:I.id===o.id&&"inside"===I.type&&I.canvasType===i,onSelect:()=>m(o.id),onUpdate:(e,t)=>{v(o.id,{content:e,...t},i),m(null)},onSplit:(e,t)=>b(o.id,e,t,i),onDelete:()=>j(o.id,i),placeholders:M,setIsSectionEditing:H})},o.id)),d++;I.id===p&&"after"===I.type&&I.canvasType===i&&s.push(l(`drop-after-${p}-${i}`))}return(0===(null==t?void 0:t.length)&&f&&I.canvasType===i||0===(null==t?void 0:t.length)&&P&&I.canvasType===i)&&s.push(l(`drop-empty-canvas-${i}`)),s},G=t.useMemo(()=>O(l,u),[l,I,f,P,g]),z=t.useMemo(()=>O(x,p),[x,I,f,P,g,T]),J=t.useMemo(()=>O(y,h),[y,I,f,P,g,T]),K=(t,i,n,s,a,l=!0)=>{var c;return l?/* @__PURE__ */e.jsxs(r.Box,{sx:{mb:3},children:[u===i&&l&&x.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",children:"Header"}),
-/* @__PURE__ */e.jsx(r.Paper,{sx:{mb:1,boxShadow:"none",opacity:.5},dangerouslySetInnerHTML:{__html:d.generateHeaderFooterPreview(x)}})]}),
-/* @__PURE__ */e.jsx(o.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",sx:{mb:1},children:t}),
-/* @__PURE__ */e.jsx(r.Paper,{ref:e=>{s(e),a.current=e},elevation:0,sx:{p:4,border:"1px dashed",borderColor:P&&I.canvasType===i?"primary.main":"primary.light",borderRadius:1,bgcolor:"background.paper",position:"relative",minHeight:"Header"===t||"Footer"===t?"100px":"200px",transition:"border-color 0.3s ease, background-color 0.3s ease","&:hover":{bgcolor:P&&I.canvasType===i?"rgba(25, 118, 210, 0.04)":"background.paper"},pointerEvents:i!==p&&i!==h||T?"auto":"none",opacity:i!==p&&i!==h||T?1:.5},onClick:()=>{(i!==p&&i!==h||T)&&m(null)},onMouseMove:e=>((e,t)=>{if(!X.current)return;if(t!==u&&!T)return;const i=e.clientX-Y.current.x,n=e.clientY-Y.current.y;if(Math.sqrt(i*i+n*n)<15)return;Y.current={x:e.clientX,y:e.clientY};const r=document.elementsFromPoint(e.clientX,e.clientY).find(e=>e.hasAttribute("data-section-id")),o=W(t);if(!r)return void(0===o.length?N(null,"inside",t):P&&N(o[o.length-1].id,"after",t));const s=r.getAttribute("data-section-id");if(!s)return;const a=r.hasAttribute("data-canvas-type")?r.getAttribute("data-canvas-type"):t,d=r.getBoundingClientRect(),l=e.clientY-d.top,c=e.clientX-d.left,p=d.height,h=d.width,x=W(a).find(e=>e.id===s);if(s.startsWith("split-group-")||x&&x.isSplitPair)N(s,c<.4*h?"left":c>.6*h?"right":"inside",a);else{let e=I.type;e=l<.19999999999999998*p?"before":l>.7999999999999999*p?"after":"inside",N(s,e,a)}})(e,i),onMouseEnter:e=>((e,t)=>{if(!X.current||!P)return;if(t!==u&&!T)return;const i=W(t);i.length>0?N(i[0].id,"before",t):N(null,"inside",t),Y.current={x:e.clientX,y:e.clientY}})(e,i),children:/* @__PURE__ */e.jsxs(r.Box,{sx:{display:"flex",flexDirection:"column",gap:2},children:[n,0===(null==(c=W(i))?void 0:c.length)&&!f&&!P&&/* @__PURE__ */e.jsx(r.Box,{sx:{borderRadius:1,p:2,textAlign:"center",color:"text.secondary"},children:/* @__PURE__ */e.jsxs(o.Typography,{type:"s2",color:"theme.secondary.600",weight:"medium",children:["Drag Sections from side panel to start building the ",t.toLowerCase()]})})]})}),u===i&&l&&y.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",sx:{mt:1},children:"Footer"}),
-/* @__PURE__ */e.jsx(r.Paper,{sx:{mb:1,boxShadow:"none",opacity:.5},dangerouslySetInnerHTML:{__html:d.generateHeaderFooterPreview(y)}})]})]}):null};/* @__PURE__ */
-return e.jsxs(r.Box,{sx:{display:"flex",flex:1,overflow:"hidden"},children:[
-/* @__PURE__ */e.jsx(r.Box,{sx:{flex:1,overflow:"auto",height:"calc(100vh - 104px)"},children:/* @__PURE__ */e.jsx(r.Container,{maxWidth:"lg",sx:{py:4},children:S?/* @__PURE__ */e.jsx(r.Box,{dangerouslySetInnerHTML:{__html:d.generateEmailPreview(l,x,y)}}):/* @__PURE__ */e.jsxs(e.Fragment,{children:[K("Header",p,z,B,L,T),K("Content",u,G,$,A,!T),K("Footer",h,J,D,U,T)]})})}),
-/* @__PURE__ */e.jsx(r.Box,{sx:{width:400,flexShrink:0,position:"sticky",top:0,alignSelf:"flex-start",height:"calc(100vh - 104px)",overflowY:"auto",borderLeft:"1px solid",borderColor:"divider",bgcolor:"background.paper",zIndex:1},children:!g||(null==F?void 0:F.is_edited_from_source)||C?/* @__PURE__ */e.jsx(a.default,{}):/* @__PURE__ */e.jsx(s.default,{section:F,onClose:()=>m(null),onUpdate:e=>{if(g){const t=x.some(e=>e.id===g)?p:y.some(e=>e.id===g)?h:u;v(g,e,t)}},placeholders:w,handleSave:R,relation_table:_})})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),n=require("../EditorSection/index.js"),r=require("../../../../components/typography/typography/index.js"),o=require("../SectionFormatPanel/index.js"),a=require("../EditorSidebar/index.js"),d=require("../../utils/common/index.js"),s=require("../../../../node_modules/@mui/material/Box/Box/index.js"),l=require("../../../../node_modules/@mui/material/Container/Container/index.js"),c=require("../../../../node_modules/@mui/material/Paper/Paper/index.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=/* @__PURE__ */u(t);const h="header",f="main",x="footer";exports.default=({sections:u,headerSections:y,footerSections:g,activeId:m,selectedSection:v,onSelectSection:b,onUpdateSection:j,onSplitSection:S,onDeleteSection:w,preview:T,placeholders:_,isEditingHeaderFooter:R,handleSave:M,relation_table:$})=>{const q=t.useMemo(()=>_.map(e=>({value:e.value||e.key||"",label:e.label||e.name||String(e.value||e.key||"")})),[_]),{setNodeRef:D}=i.useDroppable({id:"main-canvas"}),{setNodeRef:F}=i.useDroppable({id:"header-canvas"}),{setNodeRef:I}=i.useDroppable({id:"footer-canvas"}),k=t.useMemo(()=>[...u,...y,...g].find(e=>e.id===v),[u,v]),[C,H]=t.useState({id:null,type:"inside",canvasType:f}),[P,E]=t.useState(!1),[Y,X]=t.useState(!1),A=t.useRef(0),L=t.useRef({x:0,y:0}),U=t.useRef(null),W=t.useRef(null),B=t.useRef(null),N=t.useRef(null),O=e=>{switch(e){case h:return y;case x:return g;default:return u}};t.useEffect(()=>{U.current=m,m&&String(m).includes("sidebar-")?(E(!0),(null==u?void 0:u.length)>0?G(u[0].id,"before",f):(null==y?void 0:y.length)>0&&R?G(y[0].id,"before",h):(null==g?void 0:g.length)>0&&R?G(g[0].id,"before",x):G(null,"inside",f)):m||(E(!1),H({id:null,type:"inside",canvasType:f}))},[m,u,y,g,R]);const G=(e,t,i)=>{const n=Date.now();n-A.current<200||C.id===e&&C.type===t&&C.canvasType===i||(A.current=n,H({id:e,type:t,canvasType:i}))},z=(t,i)=>{const o=[],a=/* @__PURE__ */new Set;let d=0;const l=(t,i=!1)=>/* @__PURE__ */e.jsx(s.default,{sx:{[i?"width":"height"]:"50px",border:"2px dashed",borderColor:"primary.main",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",bgcolor:"rgba(25, 118, 210, 0.04)",[i?"mx":"mb"]:2,opacity:0,animation:"fadeIn 0.3s ease-in-out forwards","@keyframes fadeIn":{"0%":{opacity:0,transform:i?"translateX(-10px)":"translateY(-10px)"},"100%":{opacity:1,transform:"translate(0)"}}},children:/* @__PURE__ */e.jsx(r.Typography,{type:"s2",color:"primary",weight:"medium",children:"Drop here"})},t);for(P&&(null==t?void 0:t.length)>0&&"before"===C.type&&C.id===t[0].id&&C.canvasType===i&&o.push(l(`drop-before-first-${i}`));d<(null==t?void 0:t.length);){const r=t[d],c=r.id;if(C.id!==c||"before"!==C.type||C.canvasType!==i||P&&0===d||o.push(l(`drop-before-${c}-${i}`)),r.isSplitPair){const c=r.splitGroupId;if(c&&a.has(c)){d++;continue}const u=t.filter(e=>e.splitGroupId===c);if(u.length>0){c&&a.add(c);const t=/* @__PURE__ */e.jsx(s.default,{sx:{display:"flex",gap:2,mb:2,bgcolor:"rgba(0, 0, 0, 0.02)",p:1,borderRadius:1},"data-section-id":`split-group-${c}`,"data-canvas-type":i,children:u.map((t,r)=>/* @__PURE__ */e.jsxs(p.default.Fragment,{children:[C.id===t.id&&"left"===C.type&&C.canvasType===i&&l(`drop-left-${t.id}-${i}`,!0),
+/* @__PURE__ */e.jsx(s.default,{sx:{width:t.splitWidth?`${t.splitWidth}%`:100/u.length+"%",transition:"width 0.3s ease-in-out"},"data-section-id":t.id,"data-canvas-type":i,children:/* @__PURE__ */e.jsx(n.default,{section:t,isSelected:v===t.id,isDragging:m===t.id,isOver:C.id===t.id&&"inside"===C.type&&C.canvasType===i,onSelect:()=>b(t.id),onUpdate:(e,n)=>{j(t.id,{content:e,...n},i),b(null)},onSplit:(e,n)=>S(t.id,e,n,i),onDelete:()=>w(t.id,i),placeholders:q,setIsSectionEditing:X})}),C.id===t.id&&"right"===C.type&&C.canvasType===i&&l(`drop-right-${t.id}-${i}`,!0)]},t.id))},`split-row-${c}`);o.push(t),d+=u.length}else d++}else o.push(
+/* @__PURE__ */e.jsx(s.default,{"data-section-id":r.id,"data-canvas-type":i,children:/* @__PURE__ */e.jsx(n.default,{section:r,isSelected:v===r.id,isDragging:m===r.id,isOver:C.id===r.id&&"inside"===C.type&&C.canvasType===i,onSelect:()=>b(r.id),onUpdate:(e,t)=>{j(r.id,{content:e,...t},i),b(null)},onSplit:(e,t)=>S(r.id,e,t,i),onDelete:()=>w(r.id,i),placeholders:q,setIsSectionEditing:X})},r.id)),d++;C.id===c&&"after"===C.type&&C.canvasType===i&&o.push(l(`drop-after-${c}-${i}`))}return(0===(null==t?void 0:t.length)&&m&&C.canvasType===i||0===(null==t?void 0:t.length)&&P&&C.canvasType===i)&&o.push(l(`drop-empty-canvas-${i}`)),o},J=t.useMemo(()=>z(u,f),[u,C,m,P,v]),K=t.useMemo(()=>z(y,h),[y,C,m,P,v,R]),Q=t.useMemo(()=>z(g,x),[g,C,m,P,v,R]),V=(t,i,n,o,a,l=!0)=>{var u;return l?/* @__PURE__ */e.jsxs(s.default,{sx:{mb:3},children:[f===i&&l&&y.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(r.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",children:"Header"}),
+/* @__PURE__ */e.jsx(c.default,{sx:{mb:1,boxShadow:"none",opacity:.5},dangerouslySetInnerHTML:{__html:d.generateHeaderFooterPreview(y)}})]}),
+/* @__PURE__ */e.jsx(r.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",sx:{mb:1},children:t}),
+/* @__PURE__ */e.jsx(c.default,{ref:e=>{o(e),a.current=e},elevation:0,sx:{p:4,border:"1px dashed",borderColor:P&&C.canvasType===i?"primary.main":"primary.light",borderRadius:1,bgcolor:"background.paper",position:"relative",minHeight:"Header"===t||"Footer"===t?"100px":"200px",transition:"border-color 0.3s ease, background-color 0.3s ease","&:hover":{bgcolor:P&&C.canvasType===i?"rgba(25, 118, 210, 0.04)":"background.paper"},pointerEvents:i!==h&&i!==x||R?"auto":"none",opacity:i!==h&&i!==x||R?1:.5},onClick:()=>{(i!==h&&i!==x||R)&&b(null)},onMouseMove:e=>((e,t)=>{if(!U.current)return;if(t!==f&&!R)return;const i=e.clientX-L.current.x,n=e.clientY-L.current.y;if(Math.sqrt(i*i+n*n)<15)return;L.current={x:e.clientX,y:e.clientY};const r=document.elementsFromPoint(e.clientX,e.clientY).find(e=>e.hasAttribute("data-section-id")),o=O(t);if(!r)return void(0===o.length?G(null,"inside",t):P&&G(o[o.length-1].id,"after",t));const a=r.getAttribute("data-section-id");if(!a)return;const d=r.hasAttribute("data-canvas-type")?r.getAttribute("data-canvas-type"):t,s=r.getBoundingClientRect(),l=e.clientY-s.top,c=e.clientX-s.left,u=s.height,p=s.width,h=O(d).find(e=>e.id===a);if(a.startsWith("split-group-")||h&&h.isSplitPair)G(a,c<.4*p?"left":c>.6*p?"right":"inside",d);else{let e=C.type;e=l<.19999999999999998*u?"before":l>.7999999999999999*u?"after":"inside",G(a,e,d)}})(e,i),onMouseEnter:e=>((e,t)=>{if(!U.current||!P)return;if(t!==f&&!R)return;const i=O(t);i.length>0?G(i[0].id,"before",t):G(null,"inside",t),L.current={x:e.clientX,y:e.clientY}})(e,i),children:/* @__PURE__ */e.jsxs(s.default,{sx:{display:"flex",flexDirection:"column",gap:2},children:[n,0===(null==(u=O(i))?void 0:u.length)&&!m&&!P&&/* @__PURE__ */e.jsx(s.default,{sx:{borderRadius:1,p:2,textAlign:"center",color:"text.secondary"},children:/* @__PURE__ */e.jsxs(r.Typography,{type:"s2",color:"theme.secondary.600",weight:"medium",children:["Drag Sections from side panel to start building the ",t.toLowerCase()]})})]})}),f===i&&l&&g.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(r.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",sx:{mt:1},children:"Footer"}),
+/* @__PURE__ */e.jsx(c.default,{sx:{mb:1,boxShadow:"none",opacity:.5},dangerouslySetInnerHTML:{__html:d.generateHeaderFooterPreview(g)}})]})]}):null};/* @__PURE__ */
+return e.jsxs(s.default,{sx:{display:"flex",flex:1,overflow:"hidden"},children:[
+/* @__PURE__ */e.jsx(s.default,{sx:{flex:1,overflow:"auto",height:"calc(100vh - 104px)"},children:/* @__PURE__ */e.jsx(l.default,{maxWidth:"lg",sx:{py:4},children:T?/* @__PURE__ */e.jsx(s.default,{dangerouslySetInnerHTML:{__html:d.generateEmailPreview(u,y,g)}}):/* @__PURE__ */e.jsxs(e.Fragment,{children:[V("Header",h,K,F,B,R),V("Content",f,J,D,W,!R),V("Footer",x,Q,I,N,R)]})})}),
+/* @__PURE__ */e.jsx(s.default,{sx:{width:400,flexShrink:0,position:"sticky",top:0,alignSelf:"flex-start",height:"calc(100vh - 104px)",overflowY:"auto",borderLeft:"1px solid",borderColor:"divider",bgcolor:"background.paper",zIndex:1},children:!v||(null==k?void 0:k.is_edited_from_source)||Y?/* @__PURE__ */e.jsx(a.default,{}):/* @__PURE__ */e.jsx(o.default,{section:k,onClose:()=>b(null),onUpdate:e=>{if(v){const t=y.some(e=>e.id===v)?h:g.some(e=>e.id===v)?x:f;j(v,e,t)}},placeholders:_,handleSave:M,relation_table:$})})]})};
 //# sourceMappingURL=index.js.map