@bikdotai/bik-component-library 0.0.817-beta.7 → 0.0.817-beta.9

package/dist/cjs/components/template-context-mapper/modalElements/Header.js

@@ -1,24 +1,24 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-dev-runtime"),s=require("../../../assets/icons/desktop_custom.svg.js"),l=require("../../../assets/icons/mobile_custom.svg.js"),m=require("styled-components"),d=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=p(m),u=r.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-dev-runtime"),i=require("../../../assets/icons/desktop_custom.svg.js"),l=require("../../../assets/icons/mobile_custom.svg.js"),s=require("styled-components"),c=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),m=require("../context/templateModalContext.js"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=p(s),u=r.default.div`
 	padding-top: 12px;
 	padding-bottom: 12px;
 	padding-left: 30px;
 	padding-right: 30px;
-	background-color: ${t.COLORS.surface.subdued};
+	background-color: ${o.COLORS.surface.subdued};
 	align-items: center;
 	display: flex;
 	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
 `,b=r.default.div`
 	display: flex;
-	border: 1px solid ${t.COLORS.stroke.primary};
+	border: 1px solid ${o.COLORS.stroke.primary};
 	border-radius: 4px;
 	overflow: hidden;
 	width: min-content;
-`,a=r.default.div`
-	background: ${e=>e.active?t.COLORS.background.brandLight:t.COLORS.background.base};
+`,d=r.default.div`
+	background: ${e=>e.active?o.COLORS.background.brandLight:o.COLORS.background.base};
 	padding: 6px 8px;
 	justify-content: center;
 	align-items: center;
-`,k=r.default(a)`
-	border-left: 1px solid ${t.COLORS.stroke.primary};
-`,f=({showOnlyContent:e})=>{const{device:n,setDevice:i}=c.useTemplateModalContext();return o.jsxDEV(u,{showOnlyContent:e,children:[o.jsxDEV(b,{children:[o.jsxDEV(a,{active:n==="mobile",onClick:()=>i?.("mobile"),children:o.jsxDEV(l.default,{color:n==="mobile"?t.COLORS.content.brand:t.COLORS.content.secondary,height:20,width:20},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:58,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:54,columnNumber:5},void 0),o.jsxDEV(k,{active:n==="desktop",onClick:()=>i?.("desktop"),children:o.jsxDEV(s.default,{color:n==="desktop"?t.COLORS.content.brand:t.COLORS.content.secondary,height:20,width:20},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:72,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:68,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:53,columnNumber:4},void 0),o.jsxDEV(d.BodyPrimary,{style:{color:t.COLORS.content.primary,marginLeft:16},children:[n==="mobile"?"Mobile":"Web"," view"]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:83,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:52,columnNumber:3},void 0)};exports.default=f;
+`,f=r.default(d)`
+	border-left: 1px solid ${o.COLORS.stroke.primary};
+`,x=({showOnlyContent:e})=>{const{device:t,setDevice:a}=m.useTemplateModalContext();return n.jsxDEV(u,{showOnlyContent:e,children:[n.jsxDEV(b,{children:[n.jsxDEV(d,{active:t==="mobile",onClick:()=>a?.("mobile"),children:n.jsxDEV(l.default,{color:t==="mobile"?o.COLORS.content.brand:o.COLORS.content.secondary,height:20,width:20},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:58,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:54,columnNumber:5},void 0),n.jsxDEV(f,{active:t==="desktop",onClick:()=>a?.("desktop"),children:n.jsxDEV(i.default,{color:t==="desktop"?o.COLORS.content.brand:o.COLORS.content.secondary,height:20,width:20},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:72,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:68,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:53,columnNumber:4},void 0),n.jsxDEV(c.BodyPrimary,{style:{color:o.COLORS.content.primary,marginLeft:16},children:[t==="mobile"?"Mobile":"Web"," view"]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:83,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Header.tsx",lineNumber:52,columnNumber:3},void 0)};exports.default=x;
 //# sourceMappingURL=Header.js.map

package/dist/cjs/components/template-context-mapper/modalElements/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Header.tsx"],"sourcesContent":["import DesktopIcon from '@src/assets/icons/desktop_custom.svg';\nimport MobileIcon from '@src/assets/icons/mobile_custom.svg';\nimport styled from 'styled-components';\nimport { BodyPrimary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\n\nconst Container = styled.div<{ showOnlyContent?: boolean }>`\n\tpadding-top: 12px;\n\tpadding-bottom: 12px;\n\tpadding-left: 30px;\n\tpadding-right: 30px;\n\tbackground-color: ${COLORS.surface.subdued};\n\talign-items: center;\n\tdisplay: flex;\n\tfilter: ${(props) =>\n\t\tprops.showOnlyContent\n\t\t\t? 'none'\n\t\t\t: 'drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)'};\n`;\n\nconst DeviceIconWrapper = styled.div`\n\tdisplay: flex;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n\twidth: min-content;\n`;\n\nconst MobileIconHolder = styled.div<{\n\tactive?: boolean;\n}>`\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.brandLight : COLORS.background.base};\n\tpadding: 6px 8px;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nconst DesktopIconHolder = styled(MobileIconHolder)`\n\tborder-left: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport interface HeaderProps {\n\tshowOnlyContent?: boolean;\n}\n\nconst Header = ({ showOnlyContent }: HeaderProps) => {\n\tconst { device, setDevice } = useTemplateModalContext();\n\n\treturn (\n\t\t<Container showOnlyContent={showOnlyContent}>\n\t\t\t<DeviceIconWrapper>\n\t\t\t\t<MobileIconHolder\n\t\t\t\t\tactive={device === 'mobile'}\n\t\t\t\t\tonClick={() => setDevice?.('mobile')}\n\t\t\t\t>\n\t\t\t\t\t<MobileIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'mobile'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</MobileIconHolder>\n\t\t\t\t<DesktopIconHolder\n\t\t\t\t\tactive={device === 'desktop'}\n\t\t\t\t\tonClick={() => setDevice?.('desktop')}\n\t\t\t\t>\n\t\t\t\t\t<DesktopIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'desktop'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</DesktopIconHolder>\n\t\t\t</DeviceIconWrapper>\n\t\t\t<BodyPrimary style={{ color: COLORS.content.primary, marginLeft: 16 }}>\n\t\t\t\t{device === 'mobile' ? 'Mobile' : 'Web'} view\n\t\t\t</BodyPrimary>\n\t\t</Container>\n\t);\n};\n\nexport default Header;\n"],"names":["Container","styled","COLORS","props","DeviceIconWrapper","MobileIconHolder","DesktopIconHolder","Header","showOnlyContent","device","setDevice","useTemplateModalContext","jsxDEV","MobileIcon","this","DesktopIcon","BodyPrimary"],"mappings":"meAOMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKJC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,WAG/BC,GACVA,EAAM,gBACH,OACA,gDAAgD;AAAA,EAG/CC,EAAoBH,EAAAA,QAAO;AAAA;AAAA,qBAEZC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMpCG,EAAmBJ,EAAAA,QAAO;AAAA,eAGhBE,GACdA,EAAM,OAASD,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,EAMhEI,EAAoBL,EAAAA,QAAOI,CAAgB;AAAA,0BACvBH,EAAAA,OAAO,OAAO,OAAO;AAAA,EAOzCK,EAAS,CAAC,CAAE,gBAAAC,KAAmC,CACpD,KAAM,CAAE,OAAAC,EAAQ,UAAAC,CAAA,EAAcC,0BAAA,EAE9B,OACCC,SAACZ,GAAU,gBAAAQ,EACV,SAAA,CAAAI,SAACR,EAAA,CACA,SAAA,CAAAQ,EAAAA,OAACP,EAAA,CACA,OAAQI,IAAW,SACnB,QAAS,IAAMC,IAAY,QAAQ,EAEnC,SAAAE,EAAAA,OAACC,EAAAA,QAAA,CACA,MACCJ,IAAW,SACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,EAPR,OAAA,GAAA,CAAA,SAAA,qJAAA,WAAA,GAAA,aAAA,CAAA,EAAAY,MAAA,CAQA,EAZD,OAAA,GAAA,CAAA,SAAA,qJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAcAF,EAAAA,OAACN,EAAA,CACA,OAAQG,IAAW,UACnB,QAAS,IAAMC,IAAY,SAAS,EAEpC,SAAAE,EAAAA,OAACG,EAAAA,QAAA,CACA,MACCN,IAAW,UACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,EAPR,OAAA,GAAA,CAAA,SAAA,qJAAA,WAAA,GAAA,aAAA,CAAA,EAAAY,MAAA,CAQA,EAZD,OAAA,GAAA,CAAA,SAAA,qJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAaA,CAAA,EA5BD,OAAA,GAAA,CAAA,SAAA,qJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA6BA,EACAF,EAAAA,OAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,MAAOd,EAAAA,OAAO,QAAQ,QAAS,WAAY,EAAA,EAC/D,SAAA,CAAAO,IAAW,SAAW,SAAW,MAAM,OAAA,CAAA,EADzC,OAAA,GAAA,CAAA,SAAA,qJAAA,WAAA,GAAA,aAAA,CAAA,EAAAK,MAEA,CAAA,CAAA,EAjCD,OAAA,GAAA,CAAA,SAAA,qJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAkCA,CAEF"}
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Header.tsx"],"sourcesContent":["import DesktopIcon from '@src/assets/icons/desktop_custom.svg';\nimport MobileIcon from '@src/assets/icons/mobile_custom.svg';\nimport styled from 'styled-components';\nimport { BodyPrimary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\n\nconst Container = styled.div<{ showOnlyContent?: boolean }>`\n\tpadding-top: 12px;\n\tpadding-bottom: 12px;\n\tpadding-left: 30px;\n\tpadding-right: 30px;\n\tbackground-color: ${COLORS.surface.subdued};\n\talign-items: center;\n\tdisplay: flex;\n\tfilter: ${(props) =>\n\t\tprops.showOnlyContent\n\t\t\t? 'none'\n\t\t\t: 'drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)'};\n`;\n\nconst DeviceIconWrapper = styled.div`\n\tdisplay: flex;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n\twidth: min-content;\n`;\n\nconst MobileIconHolder = styled.div<{\n\tactive?: boolean;\n}>`\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.brandLight : COLORS.background.base};\n\tpadding: 6px 8px;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nconst DesktopIconHolder = styled(MobileIconHolder)`\n\tborder-left: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport interface HeaderProps {\n\tshowOnlyContent?: boolean;\n}\n\nconst Header = ({ showOnlyContent }: HeaderProps) => {\n\tconst { device, setDevice } = useTemplateModalContext();\n\n\treturn (\n\t\t<Container showOnlyContent={showOnlyContent}>\n\t\t\t<DeviceIconWrapper>\n\t\t\t\t<MobileIconHolder\n\t\t\t\t\tactive={device === 'mobile'}\n\t\t\t\t\tonClick={() => setDevice?.('mobile')}\n\t\t\t\t>\n\t\t\t\t\t<MobileIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'mobile'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</MobileIconHolder>\n\t\t\t\t<DesktopIconHolder\n\t\t\t\t\tactive={device === 'desktop'}\n\t\t\t\t\tonClick={() => setDevice?.('desktop')}\n\t\t\t\t>\n\t\t\t\t\t<DesktopIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'desktop'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</DesktopIconHolder>\n\t\t\t</DeviceIconWrapper>\n\t\t\t<BodyPrimary style={{ color: COLORS.content.primary, marginLeft: 16 }}>\n\t\t\t\t{device === 'mobile' ? 'Mobile' : 'Web'} view\n\t\t\t</BodyPrimary>\n\t\t</Container>\n\t);\n};\n\nexport default Header;\n"],"names":["Container","styled","COLORS","props","DeviceIconWrapper","MobileIconHolder","DesktopIconHolder","Header","showOnlyContent","device","setDevice","useTemplateModalContext","jsxDEV","MobileIcon","this","DesktopIcon","BodyPrimary"],"mappings":"meAOMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKJC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,WAG/BC,GACVA,EAAM,gBACH,OACA,gDAAgD;AAAA,EAG/CC,EAAoBH,EAAAA,QAAO;AAAA;AAAA,qBAEZC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMpCG,EAAmBJ,EAAAA,QAAO;AAAA,eAGhBE,GACdA,EAAM,OAASD,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,EAMhEI,EAAoBL,EAAAA,QAAOI,CAAgB;AAAA,0BACvBH,EAAAA,OAAO,OAAO,OAAO;AAAA,EAOzCK,EAAS,CAAC,CAAE,gBAAAC,KAAmC,CACpD,KAAM,CAAE,OAAAC,EAAQ,UAAAC,CAAA,EAAcC,0BAAA,EAE9B,OACCC,SAACZ,GAAU,gBAAAQ,EACV,SAAA,CAAAI,SAACR,EAAA,CACA,SAAA,CAAAQ,EAAAA,OAACP,EAAA,CACA,OAAQI,IAAW,SACnB,QAAS,IAAMC,IAAY,QAAQ,EAEnC,SAAAE,EAAAA,OAACC,EAAAA,QAAA,CACA,MACCJ,IAAW,SACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,EAPR,OAAA,GAAA,CAAA,SAAA,sHAAA,WAAA,GAAA,aAAA,CAAA,EAAAY,MAAA,CAQA,EAZD,OAAA,GAAA,CAAA,SAAA,sHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAcAF,EAAAA,OAACN,EAAA,CACA,OAAQG,IAAW,UACnB,QAAS,IAAMC,IAAY,SAAS,EAEpC,SAAAE,EAAAA,OAACG,EAAAA,QAAA,CACA,MACCN,IAAW,UACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,EAPR,OAAA,GAAA,CAAA,SAAA,sHAAA,WAAA,GAAA,aAAA,CAAA,EAAAY,MAAA,CAQA,EAZD,OAAA,GAAA,CAAA,SAAA,sHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAaA,CAAA,EA5BD,OAAA,GAAA,CAAA,SAAA,sHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA6BA,EACAF,EAAAA,OAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,MAAOd,EAAAA,OAAO,QAAQ,QAAS,WAAY,EAAA,EAC/D,SAAA,CAAAO,IAAW,SAAW,SAAW,MAAM,OAAA,CAAA,EADzC,OAAA,GAAA,CAAA,SAAA,sHAAA,WAAA,GAAA,aAAA,CAAA,EAAAK,MAEA,CAAA,CAAA,EAjCD,OAAA,GAAA,CAAA,SAAA,sHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAkCA,CAEF"}

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-dev-runtime"),b=require("react"),v=require("styled-components"),a=require("../../template-preview/TemplatePreview.js"),f=require("../../template-preview/models/Channels.js"),h=require("../../template-preview/models/WhatsAppTemplate.js"),x=require("../context/templateModalContext.js"),n=require("../utils/getPreviewDimension.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},k=s(b),o=s(v),w=o.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-dev-runtime"),b=require("react"),f=require("styled-components"),r=require("../../template-preview/TemplatePreview.js"),v=require("../../template-preview/models/Channels.js"),w=require("../../template-preview/models/WhatsAppTemplate.js"),h=require("../context/templateModalContext.js"),a=require("../utils/getPreviewDimension.js"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},x=l(b),i=l(f),y=i.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${e=>n.getPreviewWidth(e.channel)}px;
+	width: ${e=>a.getPreviewWidth(e.channel)}px;
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,y=o.default.div`
+`,P=i.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,10 +17,10 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,l=k.default.forwardRef(({display_content:e,channel:i,template:m,showSampleValues:p},c)=>{const{pod:d,hideDeviceContainerInPreview:u}=x.useTemplateModalContext(),r={showSampleValues:p,template:m,channel:i,smsSpecificMeta:{smsDisplayContent:e},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:d!==h.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:i==f.CHANNEL_TYPE.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:e,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return u?t.jsxDEV(P,{children:t.jsxDEV(a.TemplatePreview,{...r},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:89,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:88,columnNumber:4},void 0):t.jsxDEV(t.Fragment,{children:t.jsxDEV(w,{channel:i,children:[t.jsxDEV("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n.getPreviewWidth(i),height:443}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:97,columnNumber:5},void 0),t.jsxDEV(y,{ref:c,children:t.jsxDEV(a.TemplatePreview,{...r},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:108,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:107,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:96,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:95,columnNumber:3},void 0)});l.displayName="MobilePreview";const P=o.default.div`
+`,s=x.default.forwardRef(({display_content:e,channel:o,template:m,showSampleValues:d},c)=>{const{pod:p,hideDeviceContainerInPreview:u}=h.useTemplateModalContext(),n={showSampleValues:d,template:m,channel:o,smsSpecificMeta:{smsDisplayContent:e},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:p!==w.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:o==v.CHANNEL_TYPE.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:e,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return u?t.jsxDEV(g,{children:t.jsxDEV(r.TemplatePreview,{...n},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:89,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:88,columnNumber:4},void 0):t.jsxDEV(t.Fragment,{children:t.jsxDEV(y,{channel:o,children:[t.jsxDEV("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:a.getPreviewWidth(o),height:443}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:97,columnNumber:5},void 0),t.jsxDEV(P,{ref:c,children:t.jsxDEV(r.TemplatePreview,{...n},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:108,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:107,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:96,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/MobilePreview.tsx",lineNumber:95,columnNumber:3},void 0)});s.displayName="MobilePreview";const g=i.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`;exports.default=l;
+`;exports.default=s;
 //# sourceMappingURL=MobilePreview.js.map

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobilePreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/MobilePreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {\n\tTemplatePreview,\n\ttype TemplatePreviewProps,\n} from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type {\n\tAllTemplateTypes,\n\tNonNullTemplateTypes,\n} from '@src/components/template-preview/models/types';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { getPreviewWidth } from '../utils/getPreviewDimension';\n\nconst DeviceContainer = styled.div<{ channel: CHANNEL_TYPE }>`\n\tposition: relative;\n\theight: 100%;\n\tborder-radius: 31px;\n\twidth: ${(props) => getPreviewWidth(props.channel)}px;\n\tbackground-color: white;\n\tmargin: auto;\n\toverflow-y: auto;\n`;\n\nconst ContentWrapper = styled.div`\n\tposition: absolute;\n\tflex: 1;\n\tbackground-color: white;\n\tscroll-behavior: smooth;\n\tleft: 12px;\n\ttop: 8px;\n\twidth: calc(100% - 25px);\n\theight: calc(100% - 17px);\n\tborder-radius: 16px;\n\toverflow-y: auto;\n`;\n\nconst MobilePreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tdisplay_content: string;\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t}\n>(({ display_content, channel, template, showSampleValues }, ref) => {\n\tconst { pod, hideDeviceContainerInPreview } = useTemplateModalContext();\n\n\tconst templatePreviewProps: TemplatePreviewProps = {\n\t\tshowSampleValues,\n\t\ttemplate: template as NonNullTemplateTypes,\n\t\tchannel,\n\t\tsmsSpecificMeta: {\n\t\t\tsmsDisplayContent: display_content,\n\t\t},\n\t\twhatsAppSpecificMeta: {\n\t\t\tshowWhatsAppHeader: true,\n\t\t\twhatsAppExtras: pod !== POD.CHATBOT,\n\t\t\tcontainerStyle: {\n\t\t\t\tborder: 'none',\n\t\t\t\tborderBottomRightRadius: 0,\n\t\t\t\tborderBottomLeftRadius: 0,\n\t\t\t\tminHeight: 426,\n\t\t\t\twidth: channel == CHANNEL_TYPE.RCS ? 'unset' : 240,\n\t\t\t},\n\t\t},\n\t\tsize: 'small',\n\t\thideHeader: true,\n\t\temailSpecificMeta: {\n\t\t\temailDisplayContent: display_content,\n\t\t\thideViewButtonForEmail: true,\n\t\t\temailHtmlContainerId: 'template_html_mobile',\n\t\t\tcontainerStyle: {\n\t\t\t\theight: '100%',\n\t\t\t\twidth: '100%',\n\t\t\t},\n\t\t\ttemplateContainerStyles: {\n\t\t\t\theight: '100%',\n\t\t\t},\n\t\t},\n\t\tisPreview: true,\n\t\thidePointerEvents: true,\n\t};\n\n\tif (hideDeviceContainerInPreview) {\n\t\treturn (\n\t\t\t<StyledPlainPreview>\n\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t</StyledPlainPreview>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DeviceContainer channel={channel}>\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tsrc={\n\t\t\t\t\t\t'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a'\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: getPreviewWidth(channel),\n\t\t\t\t\t\theight: 443,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<ContentWrapper ref={ref}>\n\t\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t\t</ContentWrapper>\n\t\t\t</DeviceContainer>\n\t\t</>\n\t);\n});\n\nMobilePreview.displayName = 'MobilePreview';\n\nconst StyledPlainPreview = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n`;\n\nexport default MobilePreview;\n"],"names":["DeviceContainer","styled","props","getPreviewWidth","ContentWrapper","MobilePreview","React","display_content","channel","template","showSampleValues","ref","pod","hideDeviceContainerInPreview","useTemplateModalContext","templatePreviewProps","POD","CHANNEL_TYPE","jsxDEV","StyledPlainPreview","TemplatePreview","this","Fragment"],"mappings":"uhBAeMA,EAAkBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,UAIpBC,GAAUC,EAAAA,gBAAgBD,EAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAM7CE,EAAiBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaxBI,EAAgBC,EAAAA,QAAM,WAQ1B,CAAC,CAAE,gBAAAC,EAAiB,QAAAC,EAAS,SAAAC,EAAU,iBAAAC,CAAA,EAAoBC,IAAQ,CACpE,KAAM,CAAE,IAAAC,EAAK,6BAAAC,CAAA,EAAiCC,0BAAA,EAExCC,EAA6C,CAClD,iBAAAL,EACA,SAAAD,EACA,QAAAD,EACA,gBAAiB,CAChB,kBAAmBD,CAAA,EAEpB,qBAAsB,CACrB,mBAAoB,GACpB,eAAgBK,IAAQI,EAAAA,IAAI,QAC5B,eAAgB,CACf,OAAQ,OACR,wBAAyB,EACzB,uBAAwB,EACxB,UAAW,IACX,MAAOR,GAAWS,eAAa,IAAM,QAAU,GAAA,CAChD,EAED,KAAM,QACN,WAAY,GACZ,kBAAmB,CAClB,oBAAqBV,EACrB,uBAAwB,GACxB,qBAAsB,uBACtB,eAAgB,CACf,OAAQ,OACR,MAAO,MAAA,EAER,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,UAAW,GACX,kBAAmB,EAAA,EAGpB,OAAIM,EAEFK,SAACC,EAAA,CACA,SAAAD,EAAAA,OAACE,kBAAA,CAAiB,GAAGL,CAAA,EAArB,OAAA,GAAA,CAAA,SAAA,4JAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAA2C,CAAA,EAD5C,OAAA,GAAA,CAAA,SAAA,4JAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EAKDH,EAAAA,OAAAI,EAAAA,SAAA,CACC,SAAAJ,EAAAA,OAAClB,EAAA,CAAgB,QAAAQ,EAChB,SAAA,CAAAU,EAAAA,OAAC,MAAA,CACA,IAAI,GACJ,IACC,6NAED,MAAO,CACN,MAAOf,EAAAA,gBAAgBK,CAAO,EAC9B,OAAQ,GAAA,CACT,EARD,OAAA,GAAA,CAAA,SAAA,4JAAA,WAAA,GAAA,aAAA,CAAA,EAAAa,MAAA,WAUCjB,EAAA,CAAe,IAAAO,EACf,SAAAO,EAAAA,OAACE,EAAAA,gBAAA,CAAiB,GAAGL,GAArB,OAAA,GAAA,CAAA,SAAA,4JAAA,WAAA,IAAA,aAAA,CAAA,EAAAM,MAA2C,CAAA,EAD5C,OAAA,GAAA,CAAA,SAAA,4JAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,CAAA,EAbD,OAAA,GAAA,CAAA,SAAA,4JAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAcA,CAAA,EAfD,OAAA,GAAA,CAAA,SAAA,4JAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAgBA,CAEF,CAAC,EAEDhB,EAAc,YAAc,gBAE5B,MAAMc,EAAqBlB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"MobilePreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/MobilePreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {\n\tTemplatePreview,\n\ttype TemplatePreviewProps,\n} from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type {\n\tAllTemplateTypes,\n\tNonNullTemplateTypes,\n} from '@src/components/template-preview/models/types';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { getPreviewWidth } from '../utils/getPreviewDimension';\n\nconst DeviceContainer = styled.div<{ channel: CHANNEL_TYPE }>`\n\tposition: relative;\n\theight: 100%;\n\tborder-radius: 31px;\n\twidth: ${(props) => getPreviewWidth(props.channel)}px;\n\tbackground-color: white;\n\tmargin: auto;\n\toverflow-y: auto;\n`;\n\nconst ContentWrapper = styled.div`\n\tposition: absolute;\n\tflex: 1;\n\tbackground-color: white;\n\tscroll-behavior: smooth;\n\tleft: 12px;\n\ttop: 8px;\n\twidth: calc(100% - 25px);\n\theight: calc(100% - 17px);\n\tborder-radius: 16px;\n\toverflow-y: auto;\n`;\n\nconst MobilePreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tdisplay_content: string;\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t}\n>(({ display_content, channel, template, showSampleValues }, ref) => {\n\tconst { pod, hideDeviceContainerInPreview } = useTemplateModalContext();\n\n\tconst templatePreviewProps: TemplatePreviewProps = {\n\t\tshowSampleValues,\n\t\ttemplate: template as NonNullTemplateTypes,\n\t\tchannel,\n\t\tsmsSpecificMeta: {\n\t\t\tsmsDisplayContent: display_content,\n\t\t},\n\t\twhatsAppSpecificMeta: {\n\t\t\tshowWhatsAppHeader: true,\n\t\t\twhatsAppExtras: pod !== POD.CHATBOT,\n\t\t\tcontainerStyle: {\n\t\t\t\tborder: 'none',\n\t\t\t\tborderBottomRightRadius: 0,\n\t\t\t\tborderBottomLeftRadius: 0,\n\t\t\t\tminHeight: 426,\n\t\t\t\twidth: channel == CHANNEL_TYPE.RCS ? 'unset' : 240,\n\t\t\t},\n\t\t},\n\t\tsize: 'small',\n\t\thideHeader: true,\n\t\temailSpecificMeta: {\n\t\t\temailDisplayContent: display_content,\n\t\t\thideViewButtonForEmail: true,\n\t\t\temailHtmlContainerId: 'template_html_mobile',\n\t\t\tcontainerStyle: {\n\t\t\t\theight: '100%',\n\t\t\t\twidth: '100%',\n\t\t\t},\n\t\t\ttemplateContainerStyles: {\n\t\t\t\theight: '100%',\n\t\t\t},\n\t\t},\n\t\tisPreview: true,\n\t\thidePointerEvents: true,\n\t};\n\n\tif (hideDeviceContainerInPreview) {\n\t\treturn (\n\t\t\t<StyledPlainPreview>\n\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t</StyledPlainPreview>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DeviceContainer channel={channel}>\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tsrc={\n\t\t\t\t\t\t'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a'\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: getPreviewWidth(channel),\n\t\t\t\t\t\theight: 443,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<ContentWrapper ref={ref}>\n\t\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t\t</ContentWrapper>\n\t\t\t</DeviceContainer>\n\t\t</>\n\t);\n});\n\nMobilePreview.displayName = 'MobilePreview';\n\nconst StyledPlainPreview = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n`;\n\nexport default MobilePreview;\n"],"names":["DeviceContainer","styled","props","getPreviewWidth","ContentWrapper","MobilePreview","React","display_content","channel","template","showSampleValues","ref","pod","hideDeviceContainerInPreview","useTemplateModalContext","templatePreviewProps","POD","CHANNEL_TYPE","jsxDEV","StyledPlainPreview","TemplatePreview","this","Fragment"],"mappings":"uhBAeMA,EAAkBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,UAIpBC,GAAUC,EAAAA,gBAAgBD,EAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAM7CE,EAAiBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaxBI,EAAgBC,EAAAA,QAAM,WAQ1B,CAAC,CAAE,gBAAAC,EAAiB,QAAAC,EAAS,SAAAC,EAAU,iBAAAC,CAAA,EAAoBC,IAAQ,CACpE,KAAM,CAAE,IAAAC,EAAK,6BAAAC,CAAA,EAAiCC,0BAAA,EAExCC,EAA6C,CAClD,iBAAAL,EACA,SAAAD,EACA,QAAAD,EACA,gBAAiB,CAChB,kBAAmBD,CAAA,EAEpB,qBAAsB,CACrB,mBAAoB,GACpB,eAAgBK,IAAQI,EAAAA,IAAI,QAC5B,eAAgB,CACf,OAAQ,OACR,wBAAyB,EACzB,uBAAwB,EACxB,UAAW,IACX,MAAOR,GAAWS,eAAa,IAAM,QAAU,GAAA,CAChD,EAED,KAAM,QACN,WAAY,GACZ,kBAAmB,CAClB,oBAAqBV,EACrB,uBAAwB,GACxB,qBAAsB,uBACtB,eAAgB,CACf,OAAQ,OACR,MAAO,MAAA,EAER,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,UAAW,GACX,kBAAmB,EAAA,EAGpB,OAAIM,EAEFK,SAACC,EAAA,CACA,SAAAD,EAAAA,OAACE,kBAAA,CAAiB,GAAGL,CAAA,EAArB,OAAA,GAAA,CAAA,SAAA,6HAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAA2C,CAAA,EAD5C,OAAA,GAAA,CAAA,SAAA,6HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EAKDH,EAAAA,OAAAI,EAAAA,SAAA,CACC,SAAAJ,EAAAA,OAAClB,EAAA,CAAgB,QAAAQ,EAChB,SAAA,CAAAU,EAAAA,OAAC,MAAA,CACA,IAAI,GACJ,IACC,6NAED,MAAO,CACN,MAAOf,EAAAA,gBAAgBK,CAAO,EAC9B,OAAQ,GAAA,CACT,EARD,OAAA,GAAA,CAAA,SAAA,6HAAA,WAAA,GAAA,aAAA,CAAA,EAAAa,MAAA,WAUCjB,EAAA,CAAe,IAAAO,EACf,SAAAO,EAAAA,OAACE,EAAAA,gBAAA,CAAiB,GAAGL,GAArB,OAAA,GAAA,CAAA,SAAA,6HAAA,WAAA,IAAA,aAAA,CAAA,EAAAM,MAA2C,CAAA,EAD5C,OAAA,GAAA,CAAA,SAAA,6HAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,CAAA,EAbD,OAAA,GAAA,CAAA,SAAA,6HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAcA,CAAA,EAfD,OAAA,GAAA,CAAA,SAAA,6HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAgBA,CAEF,CAAC,EAEDhB,EAAc,YAAc,gBAE5B,MAAMc,EAAqBlB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/template-context-mapper/modalElements/ProductBox.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),m=require("../../../assets/icons/box.svg.js"),c=require("../../../assets/icons/delete.svg.js"),d=require("../../../assets/icons/edit.svg.js"),p=require("styled-components"),u=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),i=require("../../icon-button/IconButton.js"),b=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},f=b(p),x=f.default.div`
-	width: ${t=>t.width};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),d=require("../../../assets/icons/box.svg.js"),c=require("../../../assets/icons/delete.svg.js"),m=require("../../../assets/icons/edit.svg.js"),u=require("styled-components"),p=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),r=require("../../icon-button/IconButton.js"),f=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},x=f(u),y=x.default.div`
+	width: ${o=>o.width};
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
@@ -44,5 +44,5 @@
 			color: #000000;
 		}
 	}
-`,h=t=>{const{cardBody:s,deleteItem:l,editItem:r,hideIcon:a}=t;return e.jsxDEV(x,{width:"100%",children:[!a&&e.jsxDEV("div",{style:{width:36,height:36},children:e.jsxDEV(m.default,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:71,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:70,columnNumber:5},void 0),e.jsxDEV("div",{className:"card-body",children:e.jsxDEV(u.TitleSmall,{color:n.COLORS.content.secondary,children:s},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:75,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:74,columnNumber:4},void 0),e.jsxDEV("div",{style:{display:"flex",alignItems:"center"},children:[r&&e.jsxDEV(i.IconButton,{style:{display:"flex"},Icon:()=>e.jsxDEV(d.default,{width:24,height:24,color:n.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:82,columnNumber:8},void 0),onClick:o=>{r(),o.stopPropagation()}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:79,columnNumber:6},void 0),e.jsxDEV(i.IconButton,{style:{display:"flex",color:"#919191"},Icon:()=>e.jsxDEV(c.default,{width:24,height:24,color:n.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:97,columnNumber:7},void 0),onClick:o=>{l(),o.stopPropagation()}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:94,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:77,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:68,columnNumber:3},void 0)};exports.ProductBox=h;
+`,b=o=>{const{cardBody:i,deleteItem:s,editItem:l,hideIcon:a}=o;return e.jsxDEV(y,{width:"100%",children:[!a&&e.jsxDEV("div",{style:{width:36,height:36},children:e.jsxDEV(d.default,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:71,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:70,columnNumber:5},void 0),e.jsxDEV("div",{className:"card-body",children:e.jsxDEV(p.TitleSmall,{color:t.COLORS.content.secondary,children:i},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:75,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:74,columnNumber:4},void 0),e.jsxDEV("div",{style:{display:"flex",alignItems:"center"},children:[l&&e.jsxDEV(r.IconButton,{style:{display:"flex"},Icon:()=>e.jsxDEV(m.default,{width:24,height:24,color:t.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:82,columnNumber:8},void 0),onClick:n=>{l(),n.stopPropagation()}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:79,columnNumber:6},void 0),e.jsxDEV(r.IconButton,{style:{display:"flex",color:"#919191"},Icon:()=>e.jsxDEV(c.default,{width:24,height:24,color:t.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:97,columnNumber:7},void 0),onClick:n=>{s(),n.stopPropagation()}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:94,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:77,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/ProductBox.tsx",lineNumber:68,columnNumber:3},void 0)};exports.ProductBox=b;
 //# sourceMappingURL=ProductBox.js.map

package/dist/cjs/components/template-context-mapper/modalElements/ProductBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductBox.js","sources":["../../../../../src/components/template-context-mapper/modalElements/ProductBox.tsx"],"sourcesContent":["import BoxIcon from '@src/assets/icons/box.svg';\nimport DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nconst SimpleCardStyle = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 14px;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground: #ffffff;\n\n\tborder: 1px solid #e0e0e0;\n\tborder-radius: 4px;\n\n\t.card-body {\n\t\twidth: 256px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\n\t\t&__dynamic {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #731dcf;\n\n\t\t\t&__desc {\n\t\t\t\tfont-family: 'Inter';\n\t\t\t\tfont-style: normal;\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tcolor: #616161;\n\t\t\t}\n\t\t}\n\n\t\t&__simple {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #000000;\n\t\t}\n\t}\n`;\n\ninterface ProductBoxProps {\n\tcardBody: string;\n\tdeleteItem: any;\n\teditItem?: any;\n\thideIcon?: boolean;\n}\n\nexport const ProductBox = (props: ProductBoxProps) => {\n\tconst { cardBody, deleteItem, editItem, hideIcon } = props;\n\n\treturn (\n\t\t<SimpleCardStyle width={'100%'}>\n\t\t\t{!hideIcon && (\n\t\t\t\t<div style={{ width: 36, height: 36 }}>\n\t\t\t\t\t<BoxIcon />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"card-body\">\n\t\t\t\t<TitleSmall color={COLORS.content.secondary}>{cardBody}</TitleSmall>\n\t\t\t</div>\n\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t{editItem && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\t\teditItem();\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<IconButton\n\t\t\t\t\tstyle={{ display: 'flex', color: '#919191' }}\n\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\tdeleteItem();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</SimpleCardStyle>\n\t);\n};\n"],"names":["SimpleCardStyle","styled","props","ProductBox","cardBody","deleteItem","editItem","hideIcon","jsxDEV","BoxIcon","this","TitleSmall","COLORS","IconButton","EditIcon","e","DeleteIcon"],"mappings":"ieAQMA,EAAkBC,EAAAA,QAAO;AAAA,UACpBC,GAAUA,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsDnBC,EAAcD,GAA2B,CACrD,KAAM,CAAE,SAAAE,EAAU,WAAAC,EAAY,SAAAC,EAAU,SAAAC,GAAaL,EAErD,OACCM,EAAAA,OAACR,EAAA,CAAgB,MAAO,OACtB,SAAA,CAAA,CAACO,GACDC,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAA,EAAAA,OAACC,EAAAA,QAAA,CAAA,EAAD,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAS,CAAA,EADV,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EAEDF,EAAAA,OAAC,MAAA,CAAI,UAAU,YACd,SAAAA,EAAAA,OAACG,cAAW,MAAOC,EAAAA,OAAO,QAAQ,UAAY,SAAAR,CAAA,EAA9C,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAuD,CAAA,EADxD,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EACAF,SAAC,OAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,UACzC,SAAA,CAAAF,GACAE,EAAAA,OAACK,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,MAAA,EAClB,KAAM,IACLL,EAAAA,OAACM,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,WAAA,EAHvB,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAF,MAAA,EAMD,QAAUK,GAAW,CACpBT,EAAA,EACAS,EAAE,gBAAA,CACH,CAAA,EAZD,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAL,MAAA,EAeDF,EAAAA,OAACK,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,OAAQ,MAAO,SAAA,EACjC,KAAM,IACLL,EAAAA,OAACQ,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOJ,EAAAA,OAAO,QAAQ,WAAA,EAHvB,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAF,MAAA,EAMD,QAAUK,GAAW,CACpBV,EAAA,EACAU,EAAE,gBAAA,CACH,CAAA,EAZD,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAL,MAAA,CAaA,CAAA,EA9BD,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+BA,CAAA,CAAA,EAxCD,OAAA,GAAA,CAAA,SAAA,yJAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAyCA,CAEF"}
+{"version":3,"file":"ProductBox.js","sources":["../../../../../src/components/template-context-mapper/modalElements/ProductBox.tsx"],"sourcesContent":["import BoxIcon from '@src/assets/icons/box.svg';\nimport DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nconst SimpleCardStyle = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 14px;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground: #ffffff;\n\n\tborder: 1px solid #e0e0e0;\n\tborder-radius: 4px;\n\n\t.card-body {\n\t\twidth: 256px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\n\t\t&__dynamic {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #731dcf;\n\n\t\t\t&__desc {\n\t\t\t\tfont-family: 'Inter';\n\t\t\t\tfont-style: normal;\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tcolor: #616161;\n\t\t\t}\n\t\t}\n\n\t\t&__simple {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #000000;\n\t\t}\n\t}\n`;\n\ninterface ProductBoxProps {\n\tcardBody: string;\n\tdeleteItem: any;\n\teditItem?: any;\n\thideIcon?: boolean;\n}\n\nexport const ProductBox = (props: ProductBoxProps) => {\n\tconst { cardBody, deleteItem, editItem, hideIcon } = props;\n\n\treturn (\n\t\t<SimpleCardStyle width={'100%'}>\n\t\t\t{!hideIcon && (\n\t\t\t\t<div style={{ width: 36, height: 36 }}>\n\t\t\t\t\t<BoxIcon />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"card-body\">\n\t\t\t\t<TitleSmall color={COLORS.content.secondary}>{cardBody}</TitleSmall>\n\t\t\t</div>\n\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t{editItem && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\t\teditItem();\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<IconButton\n\t\t\t\t\tstyle={{ display: 'flex', color: '#919191' }}\n\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\tdeleteItem();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</SimpleCardStyle>\n\t);\n};\n"],"names":["SimpleCardStyle","styled","props","ProductBox","cardBody","deleteItem","editItem","hideIcon","jsxDEV","BoxIcon","this","TitleSmall","COLORS","IconButton","EditIcon","e","DeleteIcon"],"mappings":"ieAQMA,EAAkBC,EAAAA,QAAO;AAAA,UACpBC,GAAUA,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsDnBC,EAAcD,GAA2B,CACrD,KAAM,CAAE,SAAAE,EAAU,WAAAC,EAAY,SAAAC,EAAU,SAAAC,GAAaL,EAErD,OACCM,EAAAA,OAACR,EAAA,CAAgB,MAAO,OACtB,SAAA,CAAA,CAACO,GACDC,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAA,EAAAA,OAACC,EAAAA,QAAA,CAAA,EAAD,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAS,CAAA,EADV,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EAEDF,EAAAA,OAAC,MAAA,CAAI,UAAU,YACd,SAAAA,EAAAA,OAACG,cAAW,MAAOC,EAAAA,OAAO,QAAQ,UAAY,SAAAR,CAAA,EAA9C,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAuD,CAAA,EADxD,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EACAF,SAAC,OAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,UACzC,SAAA,CAAAF,GACAE,EAAAA,OAACK,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,MAAA,EAClB,KAAM,IACLL,EAAAA,OAACM,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,WAAA,EAHvB,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAF,MAAA,EAMD,QAAUK,GAAW,CACpBT,EAAA,EACAS,EAAE,gBAAA,CACH,CAAA,EAZD,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAL,MAAA,EAeDF,EAAAA,OAACK,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,OAAQ,MAAO,SAAA,EACjC,KAAM,IACLL,EAAAA,OAACQ,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOJ,EAAAA,OAAO,QAAQ,WAAA,EAHvB,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAF,MAAA,EAMD,QAAUK,GAAW,CACpBV,EAAA,EACAU,EAAE,gBAAA,CACH,CAAA,EAZD,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAL,MAAA,CAaA,CAAA,EA9BD,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+BA,CAAA,CAAA,EAxCD,OAAA,GAAA,CAAA,SAAA,0HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAyCA,CAEF"}

package/dist/cjs/components/template-context-mapper/modalElements/QueryParamsComponent.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),h=require("../../../assets/icons/delete.svg.js"),x=require("../../../assets/icons/PlusIcon.js"),d=require("react"),v=require("styled-components"),N=require("../../button/Button.js"),C=require("../../checkBox/CheckBox.js"),D=require("../../icon-button/IconButton.js"),y=require("../../input/Input.js"),E=require("../../TypographyStyle.js"),g=require("../../../constants/Theme.js"),P=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},j=P(v),Q=n=>{const{params:l,onChange:m,isError:b,variableValue:f}=n,[c,k]=d.useState(l.length>0),[i,r]=d.useState(l);return d.useEffect(()=>{r(l)},[f]),e.jsxDEV(V,{children:[e.jsxDEV("div",{style:{display:"flex"},children:[e.jsxDEV(C.CheckBox,{isChecked:c,onValueChange:t=>{r([]),m([]),k(t)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:31,columnNumber:5},void 0),e.jsxDEV(E.TitleSmall,{style:{marginLeft:8},children:"Add custom query params"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:39,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:30,columnNumber:4},void 0),c&&i.map((t,u)=>e.jsxDEV("div",{style:{display:"flex",gap:"8px"},children:[e.jsxDEV(y.Input,{placeholder:"Key",value:t.key,onChangeText:a=>{const s=i.map((o,p)=>p===u?{...o,key:a}:o);r(s),m(s)},state:b&&!t.key.length?"invalid":"none"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:48,columnNumber:8},void 0),e.jsxDEV(y.Input,{placeholder:"Value",value:t.value,onChangeText:a=>{const s=i.map((o,p)=>p===u?{...o,value:a}:o);r(s),m(s)},state:b&&!t.value.length?"invalid":"none"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:68,columnNumber:8},void 0),e.jsxDEV(D.IconButton,{Icon:h.default,width:20,height:20,onClick:()=>{const a=i.filter((s,o)=>o!=u);r(a),m(a)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:88,columnNumber:8},void 0)]},u,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:47,columnNumber:7},void 0)),c&&l.length<10&&e.jsxDEV(N.Button,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>e.jsxDEV("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:e.jsxDEV(x.default,{width:16,height:16,color:g.COLORS.content.secondary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:123,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:114,columnNumber:7},void 0),onClick:()=>{const t=[...i,{key:"",value:""}];r(t),m(t)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:105,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:29,columnNumber:3},void 0)},V=j.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),N=require("../../../assets/icons/delete.svg.js"),h=require("../../../assets/icons/PlusIcon.js"),p=require("react"),C=require("styled-components"),v=require("../../button/Button.js"),D=require("../../checkBox/CheckBox.js"),E=require("../../icon-button/IconButton.js"),f=require("../../input/Input.js"),g=require("../../TypographyStyle.js"),k=require("../../../constants/Theme.js"),P=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},j=P(C),w=t=>{const{params:i,onChange:l,isError:y,variableValue:b}=t,[c,x]=p.useState(i.length>0),[m,r]=p.useState(i);return p.useEffect(()=>{r(i)},[b]),e.jsxDEV(Q,{children:[e.jsxDEV("div",{style:{display:"flex"},children:[e.jsxDEV(D.CheckBox,{isChecked:c,onValueChange:n=>{r([]),l([]),x(n)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:31,columnNumber:5},void 0),e.jsxDEV(g.TitleSmall,{style:{marginLeft:8},children:"Add custom query params"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:39,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:30,columnNumber:4},void 0),c&&m.map((n,u)=>e.jsxDEV("div",{style:{display:"flex",gap:"8px"},children:[e.jsxDEV(f.Input,{placeholder:"Key",value:n.key,onChangeText:a=>{const s=m.map((o,d)=>d===u?{...o,key:a}:o);r(s),l(s)},state:y&&!n.key.length?"invalid":"none"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:48,columnNumber:8},void 0),e.jsxDEV(f.Input,{placeholder:"Value",value:n.value,onChangeText:a=>{const s=m.map((o,d)=>d===u?{...o,value:a}:o);r(s),l(s)},state:y&&!n.value.length?"invalid":"none"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:68,columnNumber:8},void 0),e.jsxDEV(E.IconButton,{Icon:N.default,width:20,height:20,onClick:()=>{const a=m.filter((s,o)=>o!=u);r(a),l(a)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:88,columnNumber:8},void 0)]},u,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:47,columnNumber:7},void 0)),c&&i.length<10&&e.jsxDEV(v.Button,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>e.jsxDEV("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:e.jsxDEV(h.default,{width:16,height:16,color:k.COLORS.content.secondary},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:123,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:114,columnNumber:7},void 0),onClick:()=>{const n=[...m,{key:"",value:""}];r(n),l(n)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:105,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx",lineNumber:29,columnNumber:3},void 0)},Q=j.default.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -8,5 +8,5 @@
 		justify-content: center;
 		padding: 12px !important;
 	}
-`;exports.QueryParamsComponent=Q;
+`;exports.QueryParamsComponent=w;
 //# sourceMappingURL=QueryParamsComponent.js.map

package/dist/cjs/components/template-context-mapper/modalElements/QueryParamsComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryParamsComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button/Button';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { IconButton } from '@src/components/icon-button/IconButton';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const QueryParamsComponent = (props: {\n\tparams: { key: string; value: string }[];\n\tonChange: (params: { key: string; value: string }[]) => void;\n\tisError: boolean;\n\tvariableValue?: string;\n}) => {\n\tconst { params, onChange, isError, variableValue } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(params.length > 0);\n\tconst [paramsLocal, setParamsLocal] =\n\t\tuseState<{ key: string; value: string }[]>(params);\n\n\t// When variable value changes, reset params\n\tuseEffect(() => {\n\t\tsetParamsLocal(params);\n\t}, [variableValue]);\n\n\treturn (\n\t\t<StyledQueryParamsComponent>\n\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\tonValueChange={(checked: boolean) => {\n\t\t\t\t\t\tsetParamsLocal([]);\n\t\t\t\t\t\tonChange([]);\n\t\t\t\t\t\tsetIsChecked(checked);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\tAdd custom query params\n\t\t\t\t</TitleSmall>\n\t\t\t</div>\n\n\t\t\t{isChecked &&\n\t\t\t\tparamsLocal.map((param, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div style={{ display: 'flex', gap: '8px' }} key={index}>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Key'}\n\t\t\t\t\t\t\t\tvalue={param.key}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tkey: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.key.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Value'}\n\t\t\t\t\t\t\t\tvalue={param.value}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.value.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tIcon={DeleteIcon}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.filter(\n\t\t\t\t\t\t\t\t\t\t(_, curIndex) => curIndex != index,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t{isChecked && params.length < 10 && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonText={'Add Params'}\n\t\t\t\t\tbuttonType={'dashRegular'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tIconComponent={() => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\twidth: '20px',\n\t\t\t\t\t\t\t\theight: '20px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst temp = [...paramsLocal, { key: '', value: '' }];\n\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</StyledQueryParamsComponent>\n\t);\n};\n\nconst StyledQueryParamsComponent = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\n\t.button-container {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 12px !important;\n\t}\n`;\n"],"names":["QueryParamsComponent","props","params","onChange","isError","variableValue","isChecked","setIsChecked","useState","paramsLocal","setParamsLocal","useEffect","StyledQueryParamsComponent","jsxDEV","CheckBox","checked","this","TitleSmall","param","index","Input","input","temp","p","i","IconButton","DeleteIcon","_","curIndex","Button","PlusIcon","COLORS","styled"],"mappings":"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"}
+{"version":3,"file":"QueryParamsComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button/Button';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { IconButton } from '@src/components/icon-button/IconButton';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const QueryParamsComponent = (props: {\n\tparams: { key: string; value: string }[];\n\tonChange: (params: { key: string; value: string }[]) => void;\n\tisError: boolean;\n\tvariableValue?: string;\n}) => {\n\tconst { params, onChange, isError, variableValue } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(params.length > 0);\n\tconst [paramsLocal, setParamsLocal] =\n\t\tuseState<{ key: string; value: string }[]>(params);\n\n\t// When variable value changes, reset params\n\tuseEffect(() => {\n\t\tsetParamsLocal(params);\n\t}, [variableValue]);\n\n\treturn (\n\t\t<StyledQueryParamsComponent>\n\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\tonValueChange={(checked: boolean) => {\n\t\t\t\t\t\tsetParamsLocal([]);\n\t\t\t\t\t\tonChange([]);\n\t\t\t\t\t\tsetIsChecked(checked);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\tAdd custom query params\n\t\t\t\t</TitleSmall>\n\t\t\t</div>\n\n\t\t\t{isChecked &&\n\t\t\t\tparamsLocal.map((param, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div style={{ display: 'flex', gap: '8px' }} key={index}>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Key'}\n\t\t\t\t\t\t\t\tvalue={param.key}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tkey: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.key.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Value'}\n\t\t\t\t\t\t\t\tvalue={param.value}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.value.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tIcon={DeleteIcon}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.filter(\n\t\t\t\t\t\t\t\t\t\t(_, curIndex) => curIndex != index,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t{isChecked && params.length < 10 && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonText={'Add Params'}\n\t\t\t\t\tbuttonType={'dashRegular'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tIconComponent={() => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\twidth: '20px',\n\t\t\t\t\t\t\t\theight: '20px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst temp = [...paramsLocal, { key: '', value: '' }];\n\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</StyledQueryParamsComponent>\n\t);\n};\n\nconst StyledQueryParamsComponent = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\n\t.button-container {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 12px !important;\n\t}\n`;\n"],"names":["QueryParamsComponent","props","params","onChange","isError","variableValue","isChecked","setIsChecked","useState","paramsLocal","setParamsLocal","useEffect","StyledQueryParamsComponent","jsxDEV","CheckBox","checked","this","TitleSmall","param","index","Input","input","temp","p","i","IconButton","DeleteIcon","_","curIndex","Button","PlusIcon","COLORS","styled"],"mappings":"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"}

package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),V=require("../../../assets/icons/click.svg.js"),O=require("../../../assets/icons/speedometer.svg.js"),d=require("react"),S=require("../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js"),R=require("../../modals/styledModal.js"),P=require("../../tag/Tag.js"),s=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),y=require("../styles/TemplateAnalyticsStyles.js"),E=require("../utils/TemplateConstants.js"),M=require("./TemplateAnalyticsSkeleton.js"),I=l=>{const{templateAnalytics:t,onClose:i,onProceed:r,onCancel:a,headingTitle:m,headingSubtitle:p,templateId:k}=l,{templateQuality:n=s.TEMPLATE_QUALITY.GREEN,fetchAnalytics:u}=t||{},{Icon:D,title:N,subline:C,sublineTextType:g,sublineColor:L}=E.TEMPLATE_QUALITY_MAP[n||s.TEMPLATE_QUALITY.GREEN],[U,W]=d.useState(l?.analyticsData||{}),[b,v]=d.useState(!0);d.useEffect(()=>{if(l?.analyticsData){v(!1);return}u?.(k||"").then(x=>{x.analytics&&W(x.analytics),v(!1)})},[]);const f=d.useMemo(()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:r,disabled:b},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{i?.(),a?.()},disabled:b}}),[n,b,r,i,a]),j=g||c.Caption;return e.jsxDEV(R.StyledModal,{open:!0,headingTitle:m,tintedHeader:!0,modalHeaderStyles:{backgroundColor:o.COLORS.surface.subdued},onBackPress:()=>{i?.()},headingSubtitle:p,footerShadow:!0,primaryButton:f.primaryButton,secondaryButton:f.secondaryButton,onClose:()=>{i?.()},width:"700px",children:e.jsxDEV(y.TemplateContainer,{children:[n!==s.TEMPLATE_QUALITY.UNKNOWN&&e.jsxDEV(y.LeftPanelContainer,{children:e.jsxDEV("div",{className:"inside--container",children:[e.jsxDEV("div",{className:"icon--container",style:{background:n===s.TEMPLATE_QUALITY.GREEN?o.COLORS.background.positive.light:o.COLORS.background.warning.light},children:e.jsxDEV(D,{width:40,height:40,color:n===s.TEMPLATE_QUALITY.GREEN?o.COLORS.content.positive:o.COLORS.content.warning},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:117,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:108,columnNumber:8},void 0),N&&e.jsxDEV(c.TitleRegular,{style:{textAlign:"center"},children:N},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:129,columnNumber:9},void 0),e.jsxDEV(j,{style:{textAlign:"center",color:L||o.COLORS.content.primary},children:C},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:133,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:107,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:106,columnNumber:6},void 0),b?e.jsxDEV(M.TemplateAnalyticsSkeleton,{fullWidth:n===s.TEMPLATE_QUALITY.UNKNOWN},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:145,columnNumber:6},void 0):e.jsxDEV(T,{analyticsData:U,fullWidth:n===s.TEMPLATE_QUALITY.UNKNOWN},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:149,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:104,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:87,columnNumber:3},void 0)},T=l=>{const{analyticsData:t,skipTitle:i,fullWidth:r}=l;return e.jsxDEV(y.RightPanelContainer,{fullWidth:r,children:[i?e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:173,columnNumber:5},void 0):e.jsxDEV(c.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:168,columnNumber:5},void 0),e.jsxDEV("div",{className:"mt-3",children:E.ANALYTICS_ENGAGEMENT_MAP.map((a,m)=>e.jsxDEV(h,{icon:a.icon,title:a.title,value:t[a.valName]||0,percentValue:a.percentValName?t[a.percentValName]:null},m,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:177,columnNumber:6},void 0))},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:175,columnNumber:4},void 0),t?.clickAnalytics&&Object.keys(t?.clickAnalytics)&&Object.keys(t?.clickAnalytics).length?e.jsxDEV(e.Fragment,{children:[e.jsxDEV(c.TitleSmall,{color:o.COLORS.content.secondary,children:"Clicked"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:193,columnNumber:6},void 0),e.jsxDEV("div",{className:"mt-3",children:Object.entries(t.clickAnalytics).map(([a,m],p)=>e.jsxDEV(h,{icon:V.default,title:a,value:m.totalClicks||0,percentValue:m.clickPercentage},p,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:197,columnNumber:9},void 0))},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:194,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:192,columnNumber:5},void 0):e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:209,columnNumber:5},void 0),t?.performance?.qualityTimeLine&&t.performance.qualityTimeLine.length>0?e.jsxDEV(e.Fragment,{children:[e.jsxDEV(c.TitleSmall,{color:o.COLORS.content.secondary,children:"Performance"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:215,columnNumber:6},void 0),e.jsxDEV("div",{className:"mt-3",children:e.jsxDEV(A,{qualityTimeLine:t.performance.qualityTimeLine},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:217,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:216,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:214,columnNumber:5},void 0):e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:223,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:166,columnNumber:3},void 0)},h=l=>{const{icon:t,title:i,value:r,percentValue:a}=l;return e.jsxDEV("div",{className:"each--analytics--container",children:[e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsxDEV("div",{className:"each--icon--container",children:e.jsxDEV(t,{width:"16px",height:"16px",color:o.COLORS.background.brand},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:240,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:239,columnNumber:5},void 0),e.jsxDEV(c.Caption,{children:i},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:242,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:238,columnNumber:4},void 0),e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[a?e.jsxDEV(P.Tag,{tagText:`${a}%`||0,theme:"light",type:"neutral"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:246,columnNumber:6},void 0):e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:248,columnNumber:6},void 0),e.jsxDEV(y.CustomTitleMedium,{children:r},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:250,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:244,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:237,columnNumber:3},void 0)},A=l=>{const{qualityTimeLine:t}=l,i=n=>{switch(n){case s.TEMPLATE_QUALITY.GREEN:return 2;case s.TEMPLATE_QUALITY.YELLOW:return 1;case s.TEMPLATE_QUALITY.RED:return .2;default:return 0}},r=n=>{switch(n){case 2:return"High";case 1:return"Medium";case .2:return"Low";default:return"Unknown"}},a=t.map(i),m=t.map((n,u)=>`T${u+1}`),p=n=>{switch(n){case s.TEMPLATE_QUALITY.GREEN:return o.COLORS.content.positive;case s.TEMPLATE_QUALITY.YELLOW:return o.COLORS.content.warning;case s.TEMPLATE_QUALITY.RED:return o.COLORS.content.negative;default:return o.COLORS.content.secondary}},k=t.map(n=>p(n));return e.jsxDEV("div",{className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${o.COLORS.background.inactive}`},children:[e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8,width:"50%"},children:[e.jsxDEV("div",{className:"each--icon--container",children:e.jsxDEV(O.default,{width:16,height:16,color:o.COLORS.content.secondary},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:325,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:324,columnNumber:5},void 0),e.jsxDEV(c.Caption,{children:"Quality timeline"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:331,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:323,columnNumber:4},void 0),e.jsxDEV("div",{className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80},children:e.jsxDEV(S.LineChart,{datas:[{data:a,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:k}],labels:m,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:n=>{const u=n.parsed.y;return`${r(u)}`},titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:341,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:333,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:311,columnNumber:3},void 0)};exports.AnalyticsItem=h;exports.QualityTimelineChart=A;exports.RightPanelTemplateAnalytics=T;exports.TemplateAnalyticsComponent=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),V=require("../../../assets/icons/click.svg.js"),O=require("../../../assets/icons/speedometer.svg.js"),y=require("react"),S=require("../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js"),R=require("../../modals/styledModal.js"),P=require("../../tag/Tag.js"),l=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),b=require("../styles/TemplateAnalyticsStyles.js"),D=require("../utils/TemplateConstants.js"),M=require("./TemplateAnalyticsSkeleton.js"),I=m=>{const{templateAnalytics:t,onClose:s,onProceed:i,onCancel:o,headingTitle:r,headingSubtitle:d,templateId:N}=m,{templateQuality:n=l.TEMPLATE_QUALITY.GREEN,fetchAnalytics:p}=t||{},{Icon:k,title:x,subline:v,sublineTextType:g,sublineColor:w}=D.TEMPLATE_QUALITY_MAP[n||l.TEMPLATE_QUALITY.GREEN],[L,U]=y.useState(m?.analyticsData||{}),[u,E]=y.useState(!0);y.useEffect(()=>{if(m?.analyticsData){E(!1);return}p?.(N||"").then(A=>{A.analytics&&U(A.analytics),E(!1)})},[]);const T=y.useMemo(()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:i,disabled:u},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{s?.(),o?.()},disabled:u}}),[n,u,i,s,o]),j=g||c.Caption;return e.jsxDEV(R.StyledModal,{open:!0,headingTitle:r,tintedHeader:!0,modalHeaderStyles:{backgroundColor:a.COLORS.surface.subdued},onBackPress:()=>{s?.()},headingSubtitle:d,footerShadow:!0,primaryButton:T.primaryButton,secondaryButton:T.secondaryButton,onClose:()=>{s?.()},width:"700px",children:e.jsxDEV(b.TemplateContainer,{children:[n!==l.TEMPLATE_QUALITY.UNKNOWN&&e.jsxDEV(b.LeftPanelContainer,{children:e.jsxDEV("div",{className:"inside--container",children:[e.jsxDEV("div",{className:"icon--container",style:{background:n===l.TEMPLATE_QUALITY.GREEN?a.COLORS.background.positive.light:a.COLORS.background.warning.light},children:e.jsxDEV(k,{width:40,height:40,color:n===l.TEMPLATE_QUALITY.GREEN?a.COLORS.content.positive:a.COLORS.content.warning},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:117,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:108,columnNumber:8},void 0),x&&e.jsxDEV(c.TitleRegular,{style:{textAlign:"center"},children:x},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:129,columnNumber:9},void 0),e.jsxDEV(j,{style:{textAlign:"center",color:w||a.COLORS.content.primary},children:v},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:133,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:107,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:106,columnNumber:6},void 0),u?e.jsxDEV(M.TemplateAnalyticsSkeleton,{fullWidth:n===l.TEMPLATE_QUALITY.UNKNOWN},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:145,columnNumber:6},void 0):e.jsxDEV(C,{analyticsData:L,fullWidth:n===l.TEMPLATE_QUALITY.UNKNOWN},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:149,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:104,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:87,columnNumber:3},void 0)},C=m=>{const{analyticsData:t,skipTitle:s,fullWidth:i}=m;return e.jsxDEV(b.RightPanelContainer,{fullWidth:i,children:[s?e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:173,columnNumber:5},void 0):e.jsxDEV(c.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:168,columnNumber:5},void 0),e.jsxDEV("div",{className:"mt-3",children:D.ANALYTICS_ENGAGEMENT_MAP.map((o,r)=>e.jsxDEV(f,{icon:o.icon,title:o.title,value:t[o.valName]||0,percentValue:o.percentValName?t[o.percentValName]:null},r,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:177,columnNumber:6},void 0))},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:175,columnNumber:4},void 0),t?.clickAnalytics&&Object.keys(t?.clickAnalytics)&&Object.keys(t?.clickAnalytics).length?e.jsxDEV(e.Fragment,{children:[e.jsxDEV(c.TitleSmall,{color:a.COLORS.content.secondary,children:"Clicked"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:193,columnNumber:6},void 0),e.jsxDEV("div",{className:"mt-3",children:Object.entries(t.clickAnalytics).map(([o,r],d)=>e.jsxDEV(f,{icon:V.default,title:o,value:r.totalClicks||0,percentValue:r.clickPercentage},d,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:197,columnNumber:9},void 0))},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:194,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:192,columnNumber:5},void 0):e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:209,columnNumber:5},void 0),t?.performance?.qualityTimeLine&&t.performance.qualityTimeLine.length>0?e.jsxDEV(e.Fragment,{children:[e.jsxDEV(c.TitleSmall,{color:a.COLORS.content.secondary,children:"Performance"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:215,columnNumber:6},void 0),e.jsxDEV("div",{className:"mt-3",children:e.jsxDEV(h,{qualityTimeLine:t.performance.qualityTimeLine},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:217,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:216,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:214,columnNumber:5},void 0):e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:223,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:166,columnNumber:3},void 0)},f=m=>{const{icon:t,title:s,value:i,percentValue:o}=m;return e.jsxDEV("div",{className:"each--analytics--container",children:[e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsxDEV("div",{className:"each--icon--container",children:e.jsxDEV(t,{width:"16px",height:"16px",color:a.COLORS.background.brand},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:240,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:239,columnNumber:5},void 0),e.jsxDEV(c.Caption,{children:s},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:242,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:238,columnNumber:4},void 0),e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[o?e.jsxDEV(P.Tag,{tagText:`${o}%`||0,theme:"light",type:"neutral"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:246,columnNumber:6},void 0):e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:248,columnNumber:6},void 0),e.jsxDEV(b.CustomTitleMedium,{children:i},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:250,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:244,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:237,columnNumber:3},void 0)},h=m=>{const{qualityTimeLine:t}=m,s=n=>{switch(n){case l.TEMPLATE_QUALITY.GREEN:return 2;case l.TEMPLATE_QUALITY.YELLOW:return 1;case l.TEMPLATE_QUALITY.RED:return .2;default:return 0}},i=n=>{switch(n){case 2:return"High";case 1:return"Medium";case .2:return"Low";default:return"Unknown"}},o=t.map(s),r=t.map((n,p)=>`T${p+1}`),d=n=>{switch(n){case l.TEMPLATE_QUALITY.GREEN:return a.COLORS.content.positive;case l.TEMPLATE_QUALITY.YELLOW:return a.COLORS.content.warning;case l.TEMPLATE_QUALITY.RED:return a.COLORS.content.negative;default:return a.COLORS.content.secondary}},N=t.map(n=>d(n));return e.jsxDEV("div",{className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${a.COLORS.background.inactive}`},children:[e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8,width:"50%"},children:[e.jsxDEV("div",{className:"each--icon--container",children:e.jsxDEV(O.default,{width:16,height:16,color:a.COLORS.content.secondary},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:325,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:324,columnNumber:5},void 0),e.jsxDEV(c.Caption,{children:"Quality timeline"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:331,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:323,columnNumber:4},void 0),e.jsxDEV("div",{className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80},children:e.jsxDEV(S.LineChart,{datas:[{data:o,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:N}],labels:r,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:n=>{const p=n.parsed.y;return`${i(p)}`},titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:341,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:333,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx",lineNumber:311,columnNumber:3},void 0)};exports.AnalyticsItem=f;exports.QualityTimelineChart=h;exports.RightPanelTemplateAnalytics=C;exports.TemplateAnalyticsComponent=I;
 //# sourceMappingURL=TemplateAnalyticsComponent.js.map

package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateAnalyticsComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx"],"sourcesContent":["import ClickIcon from '@src/assets/icons/click.svg';\nimport SpeedMeterIcon from '@src/assets/icons/speedometer.svg';\nimport { useEffect, useMemo, useState } from 'react';\nimport { LineChart } from '@src/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart';\nimport type { Type } from '@src/components/button/model';\nimport { StyledModal } from '@src/components/modals/styledModal';\nimport { Tag } from '@src/components/tag/Tag';\nimport {\n\tTEMPLATE_QUALITY,\n\ttype TemplateAnalyticsComponentI,\n\ttype TemplateAnalyticsDataI,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tCustomTitleMedium,\n\tLeftPanelContainer,\n\tRightPanelContainer,\n\tTemplateContainer,\n} from '../styles/TemplateAnalyticsStyles';\nimport {\n\tANALYTICS_ENGAGEMENT_MAP,\n\tTEMPLATE_QUALITY_MAP,\n} from '../utils/TemplateConstants';\nimport { TemplateAnalyticsSkeleton } from './TemplateAnalyticsSkeleton';\n\nexport const TemplateAnalyticsComponent = (\n\tprops: TemplateAnalyticsComponentI,\n) => {\n\tconst {\n\t\ttemplateAnalytics,\n\t\tonClose,\n\t\tonProceed,\n\t\tonCancel,\n\t\theadingTitle,\n\t\theadingSubtitle,\n\t\ttemplateId,\n\t} = props;\n\tconst { templateQuality = TEMPLATE_QUALITY.GREEN, fetchAnalytics } =\n\t\ttemplateAnalytics || {};\n\n\tconst { Icon, title, subline, sublineTextType, sublineColor } =\n\t\tTEMPLATE_QUALITY_MAP[templateQuality || TEMPLATE_QUALITY.GREEN];\n\tconst [analyticsData, setAnalyticsData] = useState<TemplateAnalyticsDataI>(\n\t\t(props?.analyticsData || {}) as TemplateAnalyticsDataI,\n\t);\n\n\tconst [isLoading, setIsLoading] = useState(true);\n\n\tuseEffect(() => {\n\t\tif (props?.analyticsData) {\n\t\t\tsetIsLoading(false);\n\t\t\treturn;\n\t\t}\n\t\tfetchAnalytics?.(templateId || '').then((data) => {\n\t\t\tdata.analytics && setAnalyticsData(data.analytics);\n\t\t\tsetIsLoading(false);\n\t\t});\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\tconst buttonConfig = useMemo(() => {\n\t\treturn {\n\t\t\tprimaryButton: {\n\t\t\t\tbuttonText: 'Proceed with selection',\n\t\t\t\tbuttonType: 'primary' as Type,\n\t\t\t\tonClick: onProceed,\n\t\t\t\tdisabled: isLoading,\n\t\t\t},\n\t\t\tsecondaryButton: {\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray' as Type,\n\t\t\t\tonClick: () => {\n\t\t\t\t\tonClose?.();\n\t\t\t\t\tonCancel?.();\n\t\t\t\t},\n\t\t\t\tdisabled: isLoading,\n\t\t\t},\n\t\t};\n\t}, [templateQuality, isLoading, onProceed, onClose, onCancel]);\n\tconst TextType = sublineTextType || Caption;\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\theadingTitle={headingTitle}\n\t\t\ttintedHeader={true}\n\t\t\tmodalHeaderStyles={{ backgroundColor: COLORS.surface.subdued }}\n\t\t\tonBackPress={() => {\n\t\t\t\tonClose?.();\n\t\t\t}}\n\t\t\theadingSubtitle={headingSubtitle}\n\t\t\tfooterShadow\n\t\t\tprimaryButton={buttonConfig.primaryButton}\n\t\t\tsecondaryButton={buttonConfig.secondaryButton}\n\t\t\tonClose={() => {\n\t\t\t\tonClose?.();\n\t\t\t}}\n\t\t\twidth=\"700px\"\n\t\t>\n\t\t\t<TemplateContainer>\n\t\t\t\t{templateQuality !== TEMPLATE_QUALITY.UNKNOWN && (\n\t\t\t\t\t<LeftPanelContainer>\n\t\t\t\t\t\t<div className=\"inside--container\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"icon--container\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\ttemplateQuality === TEMPLATE_QUALITY.GREEN\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.background.warning.light,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\t\t\t\theight={40}\n\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\ttemplateQuality === TEMPLATE_QUALITY.GREEN\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.warning\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t\t<TitleRegular style={{ textAlign: 'center' }}>\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TextType\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t\tcolor: sublineColor || COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{subline}\n\t\t\t\t\t\t\t</TextType>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</LeftPanelContainer>\n\t\t\t\t)}\n\t\t\t\t{isLoading ? (\n\t\t\t\t\t<TemplateAnalyticsSkeleton\n\t\t\t\t\t\tfullWidth={templateQuality === TEMPLATE_QUALITY.UNKNOWN}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<RightPanelTemplateAnalytics\n\t\t\t\t\t\tanalyticsData={analyticsData!}\n\t\t\t\t\t\tfullWidth={templateQuality === TEMPLATE_QUALITY.UNKNOWN}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TemplateContainer>\n\t\t</StyledModal>\n\t);\n};\n\nexport const RightPanelTemplateAnalytics = (props: {\n\tanalyticsData: TemplateAnalyticsDataI;\n\tskipTitle?: boolean;\n\tfullWidth?: boolean;\n}) => {\n\tconst { analyticsData, skipTitle, fullWidth } = props;\n\treturn (\n\t\t<RightPanelContainer fullWidth={fullWidth}>\n\t\t\t{!skipTitle ? (\n\t\t\t\t<TitleSmall>\n\t\t\t\t\tHere are your template&apos;s delivery & engagement stats for the last\n\t\t\t\t\t30 days\n\t\t\t\t</TitleSmall>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t<div className=\"mt-3\">\n\t\t\t\t{ANALYTICS_ENGAGEMENT_MAP.map((data, index) => (\n\t\t\t\t\t<AnalyticsItem\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\ticon={data.icon}\n\t\t\t\t\t\ttitle={data.title}\n\t\t\t\t\t\tvalue={analyticsData[data.valName] || 0}\n\t\t\t\t\t\tpercentValue={\n\t\t\t\t\t\t\tdata.percentValName ? analyticsData[data.percentValName] : null\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t{analyticsData?.clickAnalytics &&\n\t\t\tObject.keys(analyticsData?.clickAnalytics) &&\n\t\t\tObject.keys(analyticsData?.clickAnalytics).length ? (\n\t\t\t\t<>\n\t\t\t\t\t<TitleSmall color={COLORS.content.secondary}>Clicked</TitleSmall>\n\t\t\t\t\t<div className=\"mt-3\">\n\t\t\t\t\t\t{Object.entries(analyticsData.clickAnalytics).map(\n\t\t\t\t\t\t\t([key, data], index) => (\n\t\t\t\t\t\t\t\t<AnalyticsItem\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\ticon={ClickIcon}\n\t\t\t\t\t\t\t\t\ttitle={key}\n\t\t\t\t\t\t\t\t\tvalue={data.totalClicks || 0}\n\t\t\t\t\t\t\t\t\tpercentValue={data.clickPercentage}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{analyticsData?.performance?.qualityTimeLine &&\n\t\t\tanalyticsData.performance.qualityTimeLine.length > 0 ? (\n\t\t\t\t<>\n\t\t\t\t\t<TitleSmall color={COLORS.content.secondary}>Performance</TitleSmall>\n\t\t\t\t\t<div className=\"mt-3\">\n\t\t\t\t\t\t<QualityTimelineChart\n\t\t\t\t\t\t\tqualityTimeLine={analyticsData.performance.qualityTimeLine}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t</RightPanelContainer>\n\t);\n};\n\nexport const AnalyticsItem = (props: {\n\ticon: React.ElementType;\n\ttitle: string;\n\tvalue: number;\n\tpercentValue?: number;\n}) => {\n\tconst { icon: Icon, title, value, percentValue } = props;\n\treturn (\n\t\t<div className=\"each--analytics--container\">\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t<div className=\"each--icon--container\">\n\t\t\t\t\t<Icon width=\"16px\" height=\"16px\" color={COLORS.background.brand} />\n\t\t\t\t</div>\n\t\t\t\t<Caption>{title}</Caption>\n\t\t\t</div>\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t{percentValue ? (\n\t\t\t\t\t<Tag tagText={`${percentValue}%` || 0} theme=\"light\" type=\"neutral\" />\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t\t<CustomTitleMedium>{value}</CustomTitleMedium>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const QualityTimelineChart = (props: {\n\tqualityTimeLine: TEMPLATE_QUALITY[];\n}) => {\n\tconst { qualityTimeLine } = props;\n\n\t// Convert quality values to numeric data for the chart\n\tconst qualityToNumber = (quality: TEMPLATE_QUALITY): number => {\n\t\tswitch (quality) {\n\t\t\tcase TEMPLATE_QUALITY.GREEN:\n\t\t\t\treturn 2;\n\t\t\tcase TEMPLATE_QUALITY.YELLOW:\n\t\t\t\treturn 1;\n\t\t\tcase TEMPLATE_QUALITY.RED:\n\t\t\t\treturn 0.2;\n\t\t\tdefault:\n\t\t\t\treturn 0;\n\t\t}\n\t};\n\n\t// Convert back to quality names for tooltips\n\tconst numberToQuality = (value: number): string => {\n\t\tswitch (value) {\n\t\t\tcase 2:\n\t\t\t\treturn 'High';\n\t\t\tcase 1:\n\t\t\t\treturn 'Medium';\n\t\t\tcase 0.2:\n\t\t\t\treturn 'Low';\n\t\t\tdefault:\n\t\t\t\treturn 'Unknown';\n\t\t}\n\t};\n\n\tconst chartData = qualityTimeLine.map(qualityToNumber);\n\tconst chartLabels = qualityTimeLine.map((_, index) => `T${index + 1}`);\n\n\tconst getQualityColor = (quality: TEMPLATE_QUALITY): string => {\n\t\tswitch (quality) {\n\t\t\tcase TEMPLATE_QUALITY.GREEN:\n\t\t\t\treturn COLORS.content.positive;\n\t\t\tcase TEMPLATE_QUALITY.YELLOW:\n\t\t\t\treturn COLORS.content.warning;\n\t\t\tcase TEMPLATE_QUALITY.RED:\n\t\t\t\treturn COLORS.content.negative;\n\t\t\tdefault:\n\t\t\t\treturn COLORS.content.secondary;\n\t\t}\n\t};\n\n\t// Create point colors array based on quality values\n\tconst pointColors = qualityTimeLine.map((quality) =>\n\t\tgetQualityColor(quality),\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"each--analytics--container\"\n\t\t\tstyle={{\n\t\t\t\tpadding: 16,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\twidth: '100%',\n\t\t\t\tborderRadius: 8,\n\t\t\t\tborder: `1px solid ${COLORS.background.inactive}`,\n\t\t\t}}\n\t\t>\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8, width: '50%' }}>\n\t\t\t\t<div className=\"each--icon--container\">\n\t\t\t\t\t<SpeedMeterIcon\n\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\theight={16}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<Caption>Quality timeline</Caption>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"d-flex align--center\"\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '50%',\n\t\t\t\t\theight: '62px',\n\t\t\t\t\tmarginTop: -80,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<LineChart\n\t\t\t\t\tdatas={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tdata: chartData,\n\t\t\t\t\t\t\tlineColor: 'green',\n\t\t\t\t\t\t\tlineWidth: 1,\n\t\t\t\t\t\t\tgradientColor: {\n\t\t\t\t\t\t\t\tstart: '#E6F4E7',\n\t\t\t\t\t\t\t\tend: '#E6F4E7',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tgradient: true,\n\t\t\t\t\t\t\tpointColors: pointColors, // Pass the array of colors for each point\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t\tlabels={chartLabels}\n\t\t\t\t\tlegends={[]}\n\t\t\t\t\tcanvasHeight={120}\n\t\t\t\t\tmaintainAspectRatio={false}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={4}\n\t\t\t\t\tstepSize={1}\n\t\t\t\t\tisNewStyles={true}\n\t\t\t\t\tpointRadius={3.5}\n\t\t\t\t\tscaleText={{\n\t\t\t\t\t\txDrawBorder: false,\n\t\t\t\t\t\tyDrawBorder: false,\n\t\t\t\t\t}}\n\t\t\t\t\tticksLabelCallback={() => ''}\n\t\t\t\t\tlabelCallback={(context) => {\n\t\t\t\t\t\tconst value = context.parsed.y;\n\t\t\t\t\t\treturn `${numberToQuality(value)}`;\n\t\t\t\t\t}}\n\t\t\t\t\ttitleTooltipCallback={() => ''}\n\t\t\t\t\tcustomYHeaders={{\n\t\t\t\t\t\t0: '',\n\t\t\t\t\t\t1: '',\n\t\t\t\t\t\t2: '',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["TemplateAnalyticsComponent","props","templateAnalytics","onClose","onProceed","onCancel","headingTitle","headingSubtitle","templateId","templateQuality","TEMPLATE_QUALITY","fetchAnalytics","Icon","title","subline","sublineTextType","sublineColor","TEMPLATE_QUALITY_MAP","analyticsData","setAnalyticsData","useState","isLoading","setIsLoading","useEffect","data","buttonConfig","useMemo","TextType","Caption","jsxDEV","StyledModal","COLORS","TemplateContainer","LeftPanelContainer","this","TitleRegular","TemplateAnalyticsSkeleton","RightPanelTemplateAnalytics","skipTitle","fullWidth","RightPanelContainer","Fragment","TitleSmall","index","AnalyticsItem","key","ClickIcon","QualityTimelineChart","value","percentValue","Tag","CustomTitleMedium","qualityTimeLine","qualityToNumber","quality","numberToQuality","chartData","chartLabels","_","getQualityColor","pointColors","SpeedMeterIcon","LineChart","context"],"mappings":"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"}
+{"version":3,"file":"TemplateAnalyticsComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.tsx"],"sourcesContent":["import ClickIcon from '@src/assets/icons/click.svg';\nimport SpeedMeterIcon from '@src/assets/icons/speedometer.svg';\nimport { useEffect, useMemo, useState } from 'react';\nimport { LineChart } from '@src/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart';\nimport type { Type } from '@src/components/button/model';\nimport { StyledModal } from '@src/components/modals/styledModal';\nimport { Tag } from '@src/components/tag/Tag';\nimport {\n\tTEMPLATE_QUALITY,\n\ttype TemplateAnalyticsComponentI,\n\ttype TemplateAnalyticsDataI,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tCustomTitleMedium,\n\tLeftPanelContainer,\n\tRightPanelContainer,\n\tTemplateContainer,\n} from '../styles/TemplateAnalyticsStyles';\nimport {\n\tANALYTICS_ENGAGEMENT_MAP,\n\tTEMPLATE_QUALITY_MAP,\n} from '../utils/TemplateConstants';\nimport { TemplateAnalyticsSkeleton } from './TemplateAnalyticsSkeleton';\n\nexport const TemplateAnalyticsComponent = (\n\tprops: TemplateAnalyticsComponentI,\n) => {\n\tconst {\n\t\ttemplateAnalytics,\n\t\tonClose,\n\t\tonProceed,\n\t\tonCancel,\n\t\theadingTitle,\n\t\theadingSubtitle,\n\t\ttemplateId,\n\t} = props;\n\tconst { templateQuality = TEMPLATE_QUALITY.GREEN, fetchAnalytics } =\n\t\ttemplateAnalytics || {};\n\n\tconst { Icon, title, subline, sublineTextType, sublineColor } =\n\t\tTEMPLATE_QUALITY_MAP[templateQuality || TEMPLATE_QUALITY.GREEN];\n\tconst [analyticsData, setAnalyticsData] = useState<TemplateAnalyticsDataI>(\n\t\t(props?.analyticsData || {}) as TemplateAnalyticsDataI,\n\t);\n\n\tconst [isLoading, setIsLoading] = useState(true);\n\n\tuseEffect(() => {\n\t\tif (props?.analyticsData) {\n\t\t\tsetIsLoading(false);\n\t\t\treturn;\n\t\t}\n\t\tfetchAnalytics?.(templateId || '').then((data) => {\n\t\t\tdata.analytics && setAnalyticsData(data.analytics);\n\t\t\tsetIsLoading(false);\n\t\t});\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\tconst buttonConfig = useMemo(() => {\n\t\treturn {\n\t\t\tprimaryButton: {\n\t\t\t\tbuttonText: 'Proceed with selection',\n\t\t\t\tbuttonType: 'primary' as Type,\n\t\t\t\tonClick: onProceed,\n\t\t\t\tdisabled: isLoading,\n\t\t\t},\n\t\t\tsecondaryButton: {\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray' as Type,\n\t\t\t\tonClick: () => {\n\t\t\t\t\tonClose?.();\n\t\t\t\t\tonCancel?.();\n\t\t\t\t},\n\t\t\t\tdisabled: isLoading,\n\t\t\t},\n\t\t};\n\t}, [templateQuality, isLoading, onProceed, onClose, onCancel]);\n\tconst TextType = sublineTextType || Caption;\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\theadingTitle={headingTitle}\n\t\t\ttintedHeader={true}\n\t\t\tmodalHeaderStyles={{ backgroundColor: COLORS.surface.subdued }}\n\t\t\tonBackPress={() => {\n\t\t\t\tonClose?.();\n\t\t\t}}\n\t\t\theadingSubtitle={headingSubtitle}\n\t\t\tfooterShadow\n\t\t\tprimaryButton={buttonConfig.primaryButton}\n\t\t\tsecondaryButton={buttonConfig.secondaryButton}\n\t\t\tonClose={() => {\n\t\t\t\tonClose?.();\n\t\t\t}}\n\t\t\twidth=\"700px\"\n\t\t>\n\t\t\t<TemplateContainer>\n\t\t\t\t{templateQuality !== TEMPLATE_QUALITY.UNKNOWN && (\n\t\t\t\t\t<LeftPanelContainer>\n\t\t\t\t\t\t<div className=\"inside--container\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"icon--container\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\ttemplateQuality === TEMPLATE_QUALITY.GREEN\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.background.warning.light,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\t\t\t\theight={40}\n\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\ttemplateQuality === TEMPLATE_QUALITY.GREEN\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.warning\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t\t<TitleRegular style={{ textAlign: 'center' }}>\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TextType\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t\tcolor: sublineColor || COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{subline}\n\t\t\t\t\t\t\t</TextType>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</LeftPanelContainer>\n\t\t\t\t)}\n\t\t\t\t{isLoading ? (\n\t\t\t\t\t<TemplateAnalyticsSkeleton\n\t\t\t\t\t\tfullWidth={templateQuality === TEMPLATE_QUALITY.UNKNOWN}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<RightPanelTemplateAnalytics\n\t\t\t\t\t\tanalyticsData={analyticsData!}\n\t\t\t\t\t\tfullWidth={templateQuality === TEMPLATE_QUALITY.UNKNOWN}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TemplateContainer>\n\t\t</StyledModal>\n\t);\n};\n\nexport const RightPanelTemplateAnalytics = (props: {\n\tanalyticsData: TemplateAnalyticsDataI;\n\tskipTitle?: boolean;\n\tfullWidth?: boolean;\n}) => {\n\tconst { analyticsData, skipTitle, fullWidth } = props;\n\treturn (\n\t\t<RightPanelContainer fullWidth={fullWidth}>\n\t\t\t{!skipTitle ? (\n\t\t\t\t<TitleSmall>\n\t\t\t\t\tHere are your template&apos;s delivery & engagement stats for the last\n\t\t\t\t\t30 days\n\t\t\t\t</TitleSmall>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t<div className=\"mt-3\">\n\t\t\t\t{ANALYTICS_ENGAGEMENT_MAP.map((data, index) => (\n\t\t\t\t\t<AnalyticsItem\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\ticon={data.icon}\n\t\t\t\t\t\ttitle={data.title}\n\t\t\t\t\t\tvalue={analyticsData[data.valName] || 0}\n\t\t\t\t\t\tpercentValue={\n\t\t\t\t\t\t\tdata.percentValName ? analyticsData[data.percentValName] : null\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t{analyticsData?.clickAnalytics &&\n\t\t\tObject.keys(analyticsData?.clickAnalytics) &&\n\t\t\tObject.keys(analyticsData?.clickAnalytics).length ? (\n\t\t\t\t<>\n\t\t\t\t\t<TitleSmall color={COLORS.content.secondary}>Clicked</TitleSmall>\n\t\t\t\t\t<div className=\"mt-3\">\n\t\t\t\t\t\t{Object.entries(analyticsData.clickAnalytics).map(\n\t\t\t\t\t\t\t([key, data], index) => (\n\t\t\t\t\t\t\t\t<AnalyticsItem\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\ticon={ClickIcon}\n\t\t\t\t\t\t\t\t\ttitle={key}\n\t\t\t\t\t\t\t\t\tvalue={data.totalClicks || 0}\n\t\t\t\t\t\t\t\t\tpercentValue={data.clickPercentage}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{analyticsData?.performance?.qualityTimeLine &&\n\t\t\tanalyticsData.performance.qualityTimeLine.length > 0 ? (\n\t\t\t\t<>\n\t\t\t\t\t<TitleSmall color={COLORS.content.secondary}>Performance</TitleSmall>\n\t\t\t\t\t<div className=\"mt-3\">\n\t\t\t\t\t\t<QualityTimelineChart\n\t\t\t\t\t\t\tqualityTimeLine={analyticsData.performance.qualityTimeLine}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t</RightPanelContainer>\n\t);\n};\n\nexport const AnalyticsItem = (props: {\n\ticon: React.ElementType;\n\ttitle: string;\n\tvalue: number;\n\tpercentValue?: number;\n}) => {\n\tconst { icon: Icon, title, value, percentValue } = props;\n\treturn (\n\t\t<div className=\"each--analytics--container\">\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t<div className=\"each--icon--container\">\n\t\t\t\t\t<Icon width=\"16px\" height=\"16px\" color={COLORS.background.brand} />\n\t\t\t\t</div>\n\t\t\t\t<Caption>{title}</Caption>\n\t\t\t</div>\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t{percentValue ? (\n\t\t\t\t\t<Tag tagText={`${percentValue}%` || 0} theme=\"light\" type=\"neutral\" />\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t\t<CustomTitleMedium>{value}</CustomTitleMedium>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const QualityTimelineChart = (props: {\n\tqualityTimeLine: TEMPLATE_QUALITY[];\n}) => {\n\tconst { qualityTimeLine } = props;\n\n\t// Convert quality values to numeric data for the chart\n\tconst qualityToNumber = (quality: TEMPLATE_QUALITY): number => {\n\t\tswitch (quality) {\n\t\t\tcase TEMPLATE_QUALITY.GREEN:\n\t\t\t\treturn 2;\n\t\t\tcase TEMPLATE_QUALITY.YELLOW:\n\t\t\t\treturn 1;\n\t\t\tcase TEMPLATE_QUALITY.RED:\n\t\t\t\treturn 0.2;\n\t\t\tdefault:\n\t\t\t\treturn 0;\n\t\t}\n\t};\n\n\t// Convert back to quality names for tooltips\n\tconst numberToQuality = (value: number): string => {\n\t\tswitch (value) {\n\t\t\tcase 2:\n\t\t\t\treturn 'High';\n\t\t\tcase 1:\n\t\t\t\treturn 'Medium';\n\t\t\tcase 0.2:\n\t\t\t\treturn 'Low';\n\t\t\tdefault:\n\t\t\t\treturn 'Unknown';\n\t\t}\n\t};\n\n\tconst chartData = qualityTimeLine.map(qualityToNumber);\n\tconst chartLabels = qualityTimeLine.map((_, index) => `T${index + 1}`);\n\n\tconst getQualityColor = (quality: TEMPLATE_QUALITY): string => {\n\t\tswitch (quality) {\n\t\t\tcase TEMPLATE_QUALITY.GREEN:\n\t\t\t\treturn COLORS.content.positive;\n\t\t\tcase TEMPLATE_QUALITY.YELLOW:\n\t\t\t\treturn COLORS.content.warning;\n\t\t\tcase TEMPLATE_QUALITY.RED:\n\t\t\t\treturn COLORS.content.negative;\n\t\t\tdefault:\n\t\t\t\treturn COLORS.content.secondary;\n\t\t}\n\t};\n\n\t// Create point colors array based on quality values\n\tconst pointColors = qualityTimeLine.map((quality) =>\n\t\tgetQualityColor(quality),\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"each--analytics--container\"\n\t\t\tstyle={{\n\t\t\t\tpadding: 16,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\twidth: '100%',\n\t\t\t\tborderRadius: 8,\n\t\t\t\tborder: `1px solid ${COLORS.background.inactive}`,\n\t\t\t}}\n\t\t>\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8, width: '50%' }}>\n\t\t\t\t<div className=\"each--icon--container\">\n\t\t\t\t\t<SpeedMeterIcon\n\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\theight={16}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<Caption>Quality timeline</Caption>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"d-flex align--center\"\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '50%',\n\t\t\t\t\theight: '62px',\n\t\t\t\t\tmarginTop: -80,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<LineChart\n\t\t\t\t\tdatas={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tdata: chartData,\n\t\t\t\t\t\t\tlineColor: 'green',\n\t\t\t\t\t\t\tlineWidth: 1,\n\t\t\t\t\t\t\tgradientColor: {\n\t\t\t\t\t\t\t\tstart: '#E6F4E7',\n\t\t\t\t\t\t\t\tend: '#E6F4E7',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tgradient: true,\n\t\t\t\t\t\t\tpointColors: pointColors, // Pass the array of colors for each point\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t\tlabels={chartLabels}\n\t\t\t\t\tlegends={[]}\n\t\t\t\t\tcanvasHeight={120}\n\t\t\t\t\tmaintainAspectRatio={false}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={4}\n\t\t\t\t\tstepSize={1}\n\t\t\t\t\tisNewStyles={true}\n\t\t\t\t\tpointRadius={3.5}\n\t\t\t\t\tscaleText={{\n\t\t\t\t\t\txDrawBorder: false,\n\t\t\t\t\t\tyDrawBorder: false,\n\t\t\t\t\t}}\n\t\t\t\t\tticksLabelCallback={() => ''}\n\t\t\t\t\tlabelCallback={(context) => {\n\t\t\t\t\t\tconst value = context.parsed.y;\n\t\t\t\t\t\treturn `${numberToQuality(value)}`;\n\t\t\t\t\t}}\n\t\t\t\t\ttitleTooltipCallback={() => ''}\n\t\t\t\t\tcustomYHeaders={{\n\t\t\t\t\t\t0: '',\n\t\t\t\t\t\t1: '',\n\t\t\t\t\t\t2: '',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["TemplateAnalyticsComponent","props","templateAnalytics","onClose","onProceed","onCancel","headingTitle","headingSubtitle","templateId","templateQuality","TEMPLATE_QUALITY","fetchAnalytics","Icon","title","subline","sublineTextType","sublineColor","TEMPLATE_QUALITY_MAP","analyticsData","setAnalyticsData","useState","isLoading","setIsLoading","useEffect","data","buttonConfig","useMemo","TextType","Caption","jsxDEV","StyledModal","COLORS","TemplateContainer","LeftPanelContainer","this","TitleRegular","TemplateAnalyticsSkeleton","RightPanelTemplateAnalytics","skipTitle","fullWidth","RightPanelContainer","Fragment","TitleSmall","index","AnalyticsItem","key","ClickIcon","QualityTimelineChart","value","percentValue","Tag","CustomTitleMedium","qualityTimeLine","qualityToNumber","quality","numberToQuality","chartData","chartLabels","_","getQualityColor","pointColors","SpeedMeterIcon","LineChart","context"],"mappings":"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"}

package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),n=require("../../shimmer/ShimmerComponent/BikShimmer.js"),o=require("../styles/TemplateAnalyticsStyles.js"),l=m=>{const{skipTitleShimmer:s,fullWidth:a}=m;return e.jsxDEV(o.RightPanelContainer,{fullWidth:a,children:[e.jsxDEV("div",{children:s?e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:22,columnNumber:6},void 0):e.jsxDEV(n.BikShimmer,{boxes:[{width:"76px",height:"18px"}]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:13,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:11,columnNumber:4},void 0),e.jsxDEV("div",{className:"mt-3",children:[0,1,2].map(i=>e.jsxDEV(t,{},i,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:27,columnNumber:6},void 0))},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:25,columnNumber:4},void 0),e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{children:e.jsxDEV(n.BikShimmer,{boxes:[{width:"76px",height:"18px"}]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:32,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:31,columnNumber:5},void 0),e.jsxDEV("div",{className:"mt-3",children:e.jsxDEV(t,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:42,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:41,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:30,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:10,columnNumber:3},void 0)},t=()=>e.jsxDEV("div",{className:"each--analytics--container",children:[e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsxDEV(n.BikShimmer,{boxes:[{width:"24px",height:"24px"}]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:53,columnNumber:5},void 0),e.jsxDEV(n.BikShimmer,{boxes:[{width:"69px",height:"11px"}]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:61,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:52,columnNumber:4},void 0),e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsxDEV(n.BikShimmer,{boxes:[{width:"43px",height:"18px"}]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:71,columnNumber:5},void 0),e.jsxDEV(n.BikShimmer,{boxes:[{width:"69px",height:"28px"}]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:79,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:70,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:51,columnNumber:3},void 0);exports.TemplateAnalyticsSkeleton=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),n=require("../../shimmer/ShimmerComponent/BikShimmer.js"),a=require("../styles/TemplateAnalyticsStyles.js"),i=t=>{const{skipTitleShimmer:l,fullWidth:m}=t;return e.jsxDEV(a.RightPanelContainer,{fullWidth:m,children:[e.jsxDEV("div",{children:l?e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:22,columnNumber:6},void 0):e.jsxDEV(n.BikShimmer,{boxes:[{width:"76px",height:"18px"}]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:13,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:11,columnNumber:4},void 0),e.jsxDEV("div",{className:"mt-3",children:[0,1,2].map(s=>e.jsxDEV(o,{},s,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:27,columnNumber:6},void 0))},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:25,columnNumber:4},void 0),e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{children:e.jsxDEV(n.BikShimmer,{boxes:[{width:"76px",height:"18px"}]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:32,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:31,columnNumber:5},void 0),e.jsxDEV("div",{className:"mt-3",children:e.jsxDEV(o,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:42,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:41,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:30,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:10,columnNumber:3},void 0)},o=()=>e.jsxDEV("div",{className:"each--analytics--container",children:[e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsxDEV(n.BikShimmer,{boxes:[{width:"24px",height:"24px"}]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:53,columnNumber:5},void 0),e.jsxDEV(n.BikShimmer,{boxes:[{width:"69px",height:"11px"}]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:61,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:52,columnNumber:4},void 0),e.jsxDEV("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsxDEV(n.BikShimmer,{boxes:[{width:"43px",height:"18px"}]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:71,columnNumber:5},void 0),e.jsxDEV(n.BikShimmer,{boxes:[{width:"69px",height:"28px"}]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:79,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:70,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx",lineNumber:51,columnNumber:3},void 0);exports.TemplateAnalyticsSkeleton=i;
 //# sourceMappingURL=TemplateAnalyticsSkeleton.js.map

package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateAnalyticsSkeleton.js","sources":["../../../../../src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx"],"sourcesContent":["import { BikShimmer } from '@src/components/shimmer/ShimmerComponent/BikShimmer';\nimport { RightPanelContainer } from '../styles/TemplateAnalyticsStyles';\n\nexport const TemplateAnalyticsSkeleton = (props: {\n\tskipTitleShimmer?: boolean;\n\tfullWidth?: boolean;\n}) => {\n\tconst { skipTitleShimmer, fullWidth } = props;\n\treturn (\n\t\t<RightPanelContainer fullWidth={fullWidth}>\n\t\t\t<div>\n\t\t\t\t{!skipTitleShimmer ? (\n\t\t\t\t\t<BikShimmer\n\t\t\t\t\t\tboxes={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\twidth: '76px',\n\t\t\t\t\t\t\t\theight: '18px',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"mt-3\">\n\t\t\t\t{[0, 1, 2].map((index) => (\n\t\t\t\t\t<EachSkeleton key={index} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<>\n\t\t\t\t<div>\n\t\t\t\t\t<BikShimmer\n\t\t\t\t\t\tboxes={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\twidth: '76px',\n\t\t\t\t\t\t\t\theight: '18px',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"mt-3\">\n\t\t\t\t\t<EachSkeleton />\n\t\t\t\t</div>\n\t\t\t</>\n\t\t</RightPanelContainer>\n\t);\n};\n\nconst EachSkeleton: React.FC = () => {\n\treturn (\n\t\t<div className=\"each--analytics--container\">\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '69px',\n\t\t\t\t\t\t\theight: '11px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '43px',\n\t\t\t\t\t\t\theight: '18px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '69px',\n\t\t\t\t\t\t\theight: '28px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["TemplateAnalyticsSkeleton","props","skipTitleShimmer","fullWidth","jsxDEV","RightPanelContainer","Fragment","this","BikShimmer","index","EachSkeleton"],"mappings":"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"}
+{"version":3,"file":"TemplateAnalyticsSkeleton.js","sources":["../../../../../src/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.tsx"],"sourcesContent":["import { BikShimmer } from '@src/components/shimmer/ShimmerComponent/BikShimmer';\nimport { RightPanelContainer } from '../styles/TemplateAnalyticsStyles';\n\nexport const TemplateAnalyticsSkeleton = (props: {\n\tskipTitleShimmer?: boolean;\n\tfullWidth?: boolean;\n}) => {\n\tconst { skipTitleShimmer, fullWidth } = props;\n\treturn (\n\t\t<RightPanelContainer fullWidth={fullWidth}>\n\t\t\t<div>\n\t\t\t\t{!skipTitleShimmer ? (\n\t\t\t\t\t<BikShimmer\n\t\t\t\t\t\tboxes={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\twidth: '76px',\n\t\t\t\t\t\t\t\theight: '18px',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"mt-3\">\n\t\t\t\t{[0, 1, 2].map((index) => (\n\t\t\t\t\t<EachSkeleton key={index} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<>\n\t\t\t\t<div>\n\t\t\t\t\t<BikShimmer\n\t\t\t\t\t\tboxes={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\twidth: '76px',\n\t\t\t\t\t\t\t\theight: '18px',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"mt-3\">\n\t\t\t\t\t<EachSkeleton />\n\t\t\t\t</div>\n\t\t\t</>\n\t\t</RightPanelContainer>\n\t);\n};\n\nconst EachSkeleton: React.FC = () => {\n\treturn (\n\t\t<div className=\"each--analytics--container\">\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '69px',\n\t\t\t\t\t\t\theight: '11px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"d-flex align--center\" style={{ gap: 8 }}>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '43px',\n\t\t\t\t\t\t\theight: '18px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: '69px',\n\t\t\t\t\t\t\theight: '28px',\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["TemplateAnalyticsSkeleton","props","skipTitleShimmer","fullWidth","jsxDEV","RightPanelContainer","Fragment","this","BikShimmer","index","EachSkeleton"],"mappings":"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"}

package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),b=require("../../template-preview/models/Channels.js"),v=require("./Body.js"),k=require("./Header.js"),f=({channel:n,showVariableMapping:o,variableListFromProps:a,showOnlyContent:t,whatsappSpecificPickerMeta:r,showVariableModal:l,discountCode:s,setDiscountCode:i,variableListForImage:m,showSampleValues:c,fileName:p,setFileName:u,skipDefaultVariableContent:d})=>e.jsxDEV("div",{style:{paddingBottom:0},children:e.jsxDEV("div",{children:[n===b.CHANNEL_TYPE.EMAIL&&e.jsxDEV(k.default,{showOnlyContent:t},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:43,columnNumber:6},void 0),e.jsxDEV(v.default,{variableListFromProps:a,whatsappSpecificPickerMeta:r,showVariableMapping:!!o,showOnlyContent:t,showVariableModal:l,discountCode:s,setDiscountCode:i,variableListForImage:m,showSampleValues:c,fileName:p,setFileName:u,skipDefaultVariableContent:d},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:45,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:41,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:40,columnNumber:3},void 0);exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),b=require("../../template-preview/models/Channels.js"),f=require("./Body.js"),N=require("./Header.js"),x=({channel:t,showVariableMapping:o,variableListFromProps:l,showOnlyContent:n,whatsappSpecificPickerMeta:a,showVariableModal:r,discountCode:s,setDiscountCode:m,variableListForImage:i,showSampleValues:d,fileName:c,setFileName:u,skipDefaultVariableContent:p})=>e.jsxDEV("div",{style:{paddingBottom:0},children:e.jsxDEV("div",{children:[t===b.CHANNEL_TYPE.EMAIL&&e.jsxDEV(N.default,{showOnlyContent:n},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:43,columnNumber:6},void 0),e.jsxDEV(f.default,{variableListFromProps:l,whatsappSpecificPickerMeta:a,showVariableMapping:!!o,showOnlyContent:n,showVariableModal:r,discountCode:s,setDiscountCode:m,variableListForImage:i,showSampleValues:d,fileName:c,setFileName:u,skipDefaultVariableContent:p},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:45,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:41,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/TemplateSelectModalContent.tsx",lineNumber:40,columnNumber:3},void 0);exports.default=x;
 //# sourceMappingURL=TemplateSelectModalContent.js.map