@bikdotai/bik-component-library 0.0.817-beta.6 → 0.0.817-beta.8

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

@@ -1 +1 @@
-{"version":3,"file":"BackTrackComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/BackTrackComponent.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\n\nexport const BackTrackComponent = (props: {\n\tbackTrackMessage?: string;\n\tsetBackTrackMessage?: (backTrackMessage: string) => void;\n}) => {\n\tconst { backTrackMessage, setBackTrackMessage } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!backTrackMessage);\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\twidth: '300px',\n\t\t\t\t\t\tpadding: '20px 0px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\t\tPrevent BackTracking\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\ttype={'multiline'}\n\t\t\t\t\t\tplaceholder={'Enter your text here'}\n\t\t\t\t\t\tlabelText={'Message if user tries backtracking'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\theight={'120px'}\n\t\t\t\t\t\tmaxCharLimit={1024}\n\t\t\t\t\t\tvalue={backTrackMessage}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["BackTrackComponent","props","backTrackMessage","setBackTrackMessage","isChecked","setIsChecked","useState","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","_"],"mappings":"4PAKaA,EAAsBC,GAG7B,CACL,KAAM,CAAE,iBAAAC,EAAkB,oBAAAC,CAAA,EAAwBF,EAC5C,CAACG,EAAWC,CAAY,EAAIC,EAAAA,SAAkB,CAAC,CAACJ,CAAgB,EAEtE,OACCK,EAAAA,OAAAC,WAAA,CAEE,SAAA,CAAAD,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,WAAY,GACZ,UAAW,EACX,MAAO,QACP,QAAS,UAAA,EAGV,SAAA,CAAAA,EAAAA,OAACE,EAAAA,SAAA,CACA,UAAAL,EACA,cAAe,IAAM,CAChBA,GAAaD,GAChBA,EAAoB,EAAE,EAEvBE,EAAa,CAACD,CAAS,CACxB,CAAA,EAPD,OAAA,GAAA,CAAA,SAAA,mIAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,WASCC,EAAAA,WAAA,CAAW,MAAO,CAAE,WAAY,CAAA,EAAK,SAAA,wBAAtC,OAAA,GAAA,CAAA,SAAA,mIAAA,WAAA,GAAA,aAAA,CAAA,EAAAD,MAEA,CAAA,CAAA,EArBD,OAAA,GAAA,CAAA,SAAA,mIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAwBAN,GACAG,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,OAAQ,IACrB,SAAAA,EAAAA,OAACK,EAAAA,MAAA,CACA,KAAM,YACN,YAAa,uBACb,UAAW,qCACX,aAAeC,GAAU,CACpBV,GACHA,EAAoBU,CAAK,CAE3B,EACA,OAAQ,QACR,aAAc,KACd,MAAOX,EACP,YAAW,GACX,SAAWY,GACH,CAAC,GAAM,EAAE,CACjB,EAfD,OAAA,GAAA,CAAA,SAAA,mIAAA,WAAA,GAAA,aAAA,CAAA,EAAAJ,MAAA,CAgBA,EAjBD,OAAA,GAAA,CAAA,SAAA,mIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAkBA,CAAA,CAAA,EA7CF,OAAA,GAAA,CAAA,SAAA,mIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+CA,CAEF"}
+{"version":3,"file":"BackTrackComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/BackTrackComponent.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\n\nexport const BackTrackComponent = (props: {\n\tbackTrackMessage?: string;\n\tsetBackTrackMessage?: (backTrackMessage: string) => void;\n}) => {\n\tconst { backTrackMessage, setBackTrackMessage } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!backTrackMessage);\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\twidth: '300px',\n\t\t\t\t\t\tpadding: '20px 0px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\t\tPrevent BackTracking\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\ttype={'multiline'}\n\t\t\t\t\t\tplaceholder={'Enter your text here'}\n\t\t\t\t\t\tlabelText={'Message if user tries backtracking'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\theight={'120px'}\n\t\t\t\t\t\tmaxCharLimit={1024}\n\t\t\t\t\t\tvalue={backTrackMessage}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["BackTrackComponent","props","backTrackMessage","setBackTrackMessage","isChecked","setIsChecked","useState","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","_"],"mappings":"4PAKaA,EAAsBC,GAG7B,CACL,KAAM,CAAE,iBAAAC,EAAkB,oBAAAC,CAAA,EAAwBF,EAC5C,CAACG,EAAWC,CAAY,EAAIC,EAAAA,SAAkB,CAAC,CAACJ,CAAgB,EAEtE,OACCK,EAAAA,OAAAC,WAAA,CAEE,SAAA,CAAAD,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,WAAY,GACZ,UAAW,EACX,MAAO,QACP,QAAS,UAAA,EAGV,SAAA,CAAAA,EAAAA,OAACE,EAAAA,SAAA,CACA,UAAAL,EACA,cAAe,IAAM,CAChBA,GAAaD,GAChBA,EAAoB,EAAE,EAEvBE,EAAa,CAACD,CAAS,CACxB,CAAA,EAPD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,WASCC,EAAAA,WAAA,CAAW,MAAO,CAAE,WAAY,CAAA,EAAK,SAAA,wBAAtC,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAD,MAEA,CAAA,CAAA,EArBD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAwBAN,GACAG,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,OAAQ,IACrB,SAAAA,EAAAA,OAACK,EAAAA,MAAA,CACA,KAAM,YACN,YAAa,uBACb,UAAW,qCACX,aAAeC,GAAU,CACpBV,GACHA,EAAoBU,CAAK,CAE3B,EACA,OAAQ,QACR,aAAc,KACd,MAAOX,EACP,YAAW,GACX,SAAWY,GACH,CAAC,GAAM,EAAE,CACjB,EAfD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAJ,MAAA,CAgBA,EAjBD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAkBA,CAAA,CAAA,EA7CF,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+CA,CAEF"}

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

@@ -1,23 +1,23 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-dev-runtime"),F=require("lodash/cloneDeep"),D=require("react"),G=require("styled-components"),K=require("../../carousel-preview/CarouselPreview.js"),z=require("./EditWhatsAppCarouselTemplateV2.js"),J=require("../../template-preview/TemplatePreview.js"),n=require("../../template-preview/models/Channels.js"),Q=require("../../TypographyStyle.js"),X=require("../../variable-picker-v3/VariablePicker.js"),i=require("../../../constants/Theme.js"),Z=require("../context/templateModalContext.js"),ee=require("../utils/constants.js"),te=require("../utils/getVariableNameEmail.js"),L=require("../utils/highlightFor.js"),oe=require("./DesktopPreview.js"),ne=require("./EditWebpushTemplate.js"),re=require("./EditWhatsAppTemplateV2.js"),ae=require("./MobilePreview.js"),le=require("./VariableConnectorsPanel.js"),se=require("../../variable-picker-v3/model.js"),H=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},S=H(F),P=H(G),ie=P.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-dev-runtime"),F=require("lodash/cloneDeep"),L=require("react"),G=require("styled-components"),K=require("../../carousel-preview/CarouselPreview.js"),z=require("./EditWhatsAppCarouselTemplateV2.js"),J=require("../../template-preview/TemplatePreview.js"),t=require("../../template-preview/models/Channels.js"),Q=require("../../TypographyStyle.js"),X=require("../../variable-picker-v3/VariablePicker.js"),i=require("../../../constants/Theme.js"),Z=require("../context/templateModalContext.js"),ee=require("../utils/constants.js"),oe=require("../utils/getVariableNameEmail.js"),S=require("../utils/highlightFor.js"),ne=require("./DesktopPreview.js"),te=require("./EditWebpushTemplate.js"),ae=require("./EditWhatsAppTemplateV2.js"),le=require("./MobilePreview.js"),re=require("./VariableConnectorsPanel.js"),se=require("../../variable-picker-v3/model.js"),q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},B=q(F),h=q(G),ie=h.default.div`
 	display: flex;
 	//	height: 100%;
-`,B=P.default.div`
+`,H=h.default.div`
 	max-width: 450px;
-	max-width: ${e=>e.channel===n.CHANNEL_TYPE.EMAIL?"400px":"450px"};
+	max-width: ${e=>e.channel===t.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===t.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
 	border-left: ${i.COLORS.stroke.primary} 1px solid;
 	border-top: ${e=>e.isWhatsappCarousel?`${i.COLORS.stroke.primary} 1px solid`:void 0};
 	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
-`,ce=P.default.div`
+`,de=h.default.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===n.CHANNEL_TYPE.WHATSAPP?`url(${ee.BACKGROUND_PREVIEW_IMAGE});`:"none"};
-	display: ${e=>e.hideDeviceContainerInPreview&&(e.channel===n.CHANNEL_TYPE.WHATSAPP||e.channel===n.CHANNEL_TYPE.RCS)?"flex":"initial"};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===t.CHANNEL_TYPE.WHATSAPP?`url(${ee.BACKGROUND_PREVIEW_IMAGE});`:"none"};
+	display: ${e=>e.hideDeviceContainerInPreview&&(e.channel===t.CHANNEL_TYPE.WHATSAPP||e.channel===t.CHANNEL_TYPE.RCS)?"flex":"initial"};
 	align-items: flex-start;
-`,me=e=>{const{showVariableMapping:h,showOnlyContent:q,whatsappSpecificPickerMeta:b,showVariableModal:c,discountCode:f,setDiscountCode:E,variableListForImage:x,showSampleValues:m,variableListFromProps:y,fileName:U,setFileName:W,skipDefaultVariableContent:C}=e,N=D.useRef(),k=D.useRef(),{variableList:M,setVariableList:v,variableCallback:R,showVariablePicker:T,setShowVariablePicker:w,device:s,display_content:g,channel:t,template:a,setTemplate:A,isWhatsappCarousel:d,isProductCarouselType:j,hideDeviceContainerInPreview:Y,onDefaultVariableSelect:I}=Z.useTemplateModalContext();function O(r){const l=document?.getElementById(s==="mobile"?"template_html_mobile":"template_html_desktop"),p=te.getVariableNameForEmailByIndex(r+1),V=t===n.CHANNEL_TYPE.EMAIL?l?.contentWindow?.document.getElementById(p):document.getElementById(p),u=$(V),_=V?.offsetLeft;s==="desktop"?u&&N.current&&(l?.contentWindow?.scrollTo(_??0,u),L.highlightFor(p,i.COLORS.background.warning.light,2,t,s)):u&&k.current&&(l?.contentWindow?.scrollTo(_??0,u),L.highlightFor(p,i.COLORS.background.warning.light,2,t,s))}const $=r=>{let l=0;for(;r;)l+=r.offsetTop,r=r.offsetParent;return l};return o.jsxDEV(ie,{children:[o.jsxDEV(ce,{showOnlyContent:q,showVariableMapping:h,isWhatsappCarousel:d,hideDeviceContainerInPreview:Y,channel:t,skipDefaultVariableContent:C,children:s==="mobile"?o.jsxDEV(ae.default,{ref:k,display_content:g??"",channel:t,template:a,showSampleValues:m},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:209,columnNumber:6},void 0):(t===n.CHANNEL_TYPE.WHATSAPP||t===n.CHANNEL_TYPE.RCS)&&d?o.jsxDEV(K.CarouselPreview,{ref:N,channel:t,template:a,showSampleValues:m,isPreview:!1,showArrows:!0},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:219,columnNumber:6},void 0):t===n.CHANNEL_TYPE.WEBPUSH?o.jsxDEV(J.TemplatePreview,{showSampleValues:m,channel:t,hideHeader:!0,template:a},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:228,columnNumber:6},void 0):t!==n.CHANNEL_TYPE.MESSAGE?o.jsxDEV(oe.default,{ref:N,channel:t,display_content:g??"",showSampleValues:m},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:235,columnNumber:6},void 0):o.jsxDEV(o.Fragment,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:242,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:200,columnNumber:4},void 0),(j||h)&&o.jsxDEV(B,{channel:t,isWhatsappCarousel:d,showVariableMapping:!0,children:[o.jsxDEV("div",{style:{height:"100%",width:t==="whatsapp"?428:400,display:T?"block":"none"},children:o.jsxDEV(X.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{v(S.default(y)),w(!1)},onSelect:r=>{R(r),v(S.default(y)),w(!1)},type:se.PickerType.EMBEDDED,data:M??[],onDefaultVariableSelect:I,skipDefaultVariableContent:C},Math.random(),!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:258,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:251,columnNumber:6},void 0),o.jsxDEV("div",{style:{padding:"16px 14px",width:t==="whatsapp"||t=="webpush"||t=="rcs"?428:400,display:T?"none":"block"},children:t!==n.CHANNEL_TYPE.WHATSAPP&&t!==n.CHANNEL_TYPE?.RCS?t==n.CHANNEL_TYPE.WEBPUSH?o.jsxDEV(ne.default,{whatsappSpecificPickerMeta:b,template:a,onTemplateChange:r=>{A?.(r)},showVariableModal:c},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:293,columnNumber:9},void 0):o.jsxDEV(le.default,{onFocus:t===n.CHANNEL_TYPE.EMAIL?O:void 0,showVariableModal:c,discountCode:f,setDiscountCode:E},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:302,columnNumber:9},void 0):(t===n.CHANNEL_TYPE.WHATSAPP||t===n.CHANNEL_TYPE.RCS)&&d?o.jsxDEV(z.default,{whatsappSpecificPickerMeta:b,template:a,showVariableModal:c,variableListForImage:x,discountCode:f,setDiscountCode:E},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:316,columnNumber:8},void 0):o.jsxDEV(re.default,{whatsappSpecificPickerMeta:b,template:a,onTemplateChange:r=>{A?.(r)},showVariableModal:c,variableListForImage:x,discountCode:f,setDiscountCode:E,fileName:U,setFileName:W},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:325,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:278,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:246,columnNumber:5},void 0),[n.CHANNEL_TYPE.WHATSAPP,n.CHANNEL_TYPE.SMS].includes(t)&&!h&&!j&&o.jsxDEV(B,{children:o.jsxDEV(Q.BodySecondary,{color:i.COLORS.content.secondary,style:{fontStyle:"italic"},children:"Click on ‘Select template’ below to use it"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:346,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:345,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:199,columnNumber:3},void 0)};exports.default=me;
+`,me=e=>{const{showVariableMapping:b,showOnlyContent:U,whatsappSpecificPickerMeta:f,showVariableModal:d,discountCode:E,setDiscountCode:N,variableListForImage:x,showSampleValues:m,variableListFromProps:P,fileName:j,setFileName:W,skipDefaultVariableContent:w}=e,y=L.useRef(),C=L.useRef(),{variableList:M,setVariableList:v,variableCallback:R,showVariablePicker:D,setShowVariablePicker:T,device:s,display_content:g,channel:o,template:l,setTemplate:k,isWhatsappCarousel:c,isProductCarouselType:A,hideDeviceContainerInPreview:Y,onDefaultVariableSelect:I}=Z.useTemplateModalContext();function O(a){const r=document?.getElementById(s==="mobile"?"template_html_mobile":"template_html_desktop"),p=oe.getVariableNameForEmailByIndex(a+1),V=o===t.CHANNEL_TYPE.EMAIL?r?.contentWindow?.document.getElementById(p):document.getElementById(p),u=$(V),_=V?.offsetLeft;s==="desktop"?u&&y.current&&(r?.contentWindow?.scrollTo(_??0,u),S.highlightFor(p,i.COLORS.background.warning.light,2,o,s)):u&&C.current&&(r?.contentWindow?.scrollTo(_??0,u),S.highlightFor(p,i.COLORS.background.warning.light,2,o,s))}const $=a=>{let r=0;for(;a;)r+=a.offsetTop,a=a.offsetParent;return r};return n.jsxDEV(ie,{children:[n.jsxDEV(de,{showOnlyContent:U,showVariableMapping:b,isWhatsappCarousel:c,hideDeviceContainerInPreview:Y,channel:o,skipDefaultVariableContent:w,children:s==="mobile"?n.jsxDEV(le.default,{ref:C,display_content:g??"",channel:o,template:l,showSampleValues:m},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:209,columnNumber:6},void 0):(o===t.CHANNEL_TYPE.WHATSAPP||o===t.CHANNEL_TYPE.RCS)&&c?n.jsxDEV(K.CarouselPreview,{ref:y,channel:o,template:l,showSampleValues:m,isPreview:!1,showArrows:!0},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:219,columnNumber:6},void 0):o===t.CHANNEL_TYPE.WEBPUSH?n.jsxDEV(J.TemplatePreview,{showSampleValues:m,channel:o,hideHeader:!0,template:l},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:228,columnNumber:6},void 0):o!==t.CHANNEL_TYPE.MESSAGE?n.jsxDEV(ne.default,{ref:y,channel:o,display_content:g??"",showSampleValues:m},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:235,columnNumber:6},void 0):n.jsxDEV(n.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:242,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:200,columnNumber:4},void 0),(A||b)&&n.jsxDEV(H,{channel:o,isWhatsappCarousel:c,showVariableMapping:!0,children:[n.jsxDEV("div",{style:{height:"100%",width:o==="whatsapp"?428:400,display:D?"block":"none"},children:n.jsxDEV(X.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{v(B.default(P)),T(!1)},onSelect:a=>{R(a),v(B.default(P)),T(!1)},type:se.PickerType.EMBEDDED,data:M??[],onDefaultVariableSelect:I,skipDefaultVariableContent:w},Math.random(),!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:258,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:251,columnNumber:6},void 0),n.jsxDEV("div",{style:{padding:"16px 14px",width:o==="whatsapp"||o=="webpush"||o=="rcs"?428:400,display:D?"none":"block"},children:o!==t.CHANNEL_TYPE.WHATSAPP&&o!==t.CHANNEL_TYPE?.RCS?o==t.CHANNEL_TYPE.WEBPUSH?n.jsxDEV(te.default,{whatsappSpecificPickerMeta:f,template:l,onTemplateChange:a=>{k?.(a)},showVariableModal:d},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:293,columnNumber:9},void 0):n.jsxDEV(re.default,{onFocus:o===t.CHANNEL_TYPE.EMAIL?O:void 0,showVariableModal:d,discountCode:E,setDiscountCode:N},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:302,columnNumber:9},void 0):(o===t.CHANNEL_TYPE.WHATSAPP||o===t.CHANNEL_TYPE.RCS)&&c?n.jsxDEV(z.default,{whatsappSpecificPickerMeta:f,template:l,showVariableModal:d,variableListForImage:x,discountCode:E,setDiscountCode:N},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:316,columnNumber:8},void 0):n.jsxDEV(ae.default,{whatsappSpecificPickerMeta:f,template:l,onTemplateChange:a=>{k?.(a)},showVariableModal:d,variableListForImage:x,discountCode:E,setDiscountCode:N,fileName:j,setFileName:W},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:325,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:278,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:246,columnNumber:5},void 0),[t.CHANNEL_TYPE.WHATSAPP,t.CHANNEL_TYPE.SMS].includes(o)&&!b&&!A&&n.jsxDEV(H,{children:n.jsxDEV(Q.BodySecondary,{color:i.COLORS.content.secondary,style:{fontStyle:"italic"},children:"Click on ‘Select template’ below to use it"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:346,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:345,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:199,columnNumber:3},void 0)};exports.default=me;
 //# sourceMappingURL=Body.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Body.tsx"],"sourcesContent":["import { PickerType, type VariableV3 } from '@src/helpers';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { CarouselPreview } from '@src/components/carousel-preview/CarouselPreview';\nimport EditWhatsAppCarouselTemplateV2 from '@src/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type { AllTemplateTypes } from '@src/components/template-preview/models/types';\nimport type { WebpushTemplateType } from '@src/components/template-preview/models/WebpushTemplate';\nimport type { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport type {\n\tWhatsAppPickerMeta,\n\tWhatsAppTemplate,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { VariablePicker } from '@src/components/variable-picker-v3/VariablePicker';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { BACKGROUND_PREVIEW_IMAGE } from '../utils/constants';\nimport { getVariableNameForEmailByIndex } from '../utils/getVariableNameEmail';\nimport { highlightFor } from '../utils/highlightFor';\nimport DesktopPreview from './DesktopPreview';\nimport EditWebpushTemplate from './EditWebpushTemplate';\nimport EditWhatsAppTemplateV2 from './EditWhatsAppTemplateV2';\nimport MobilePreview from './MobilePreview';\nimport VariableConnectorsPanel from './VariableConnectorsPanel';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\t//\theight: 100%;\n`;\n\nconst RightPanelContainer = styled.div<{\n\tchannel?: CHANNEL_TYPE;\n\tisWhatsappCarousel?: boolean;\n\tshowVariableMapping?: boolean;\n}>`\n\tmax-width: 450px;\n\tmax-width: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.EMAIL ? '400px' : '450px'};\n\n\theight: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP ? '500px' : '475px'};\n\toverflow-y: auto;\n\tpadding-bottom: 24px;\n\tborder-left: ${COLORS.stroke.primary} 1px solid;\n\tborder-top: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? `${COLORS.stroke.primary} 1px solid`\n\t\t\t: undefined};\n\t${(props) => !props.showVariableMapping && 'width: 340px; height: 500px'};\n`;\n\nconst LeftPanelContainer = styled.div<{\n\tshowOnlyContent?: boolean;\n\tshowVariableMapping?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thideDeviceContainerInPreview?: boolean;\n\tchannel?: CHANNEL_TYPE;\n\tskipDefaultVariableContent?: boolean;\n}>`\n\tpadding: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? undefined\n\t\t\t: props.showOnlyContent\n\t\t\t? '16px 14px'\n\t\t\t: '16px 32px'};\n\tflex: 1;\n\theight: ${(props) =>\n\t\tprops.isWhatsappCarousel || props.hideDeviceContainerInPreview\n\t\t\t? '500px'\n\t\t\t: '475px'};\n\toverflow-y: auto;\n\tbackground-image: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP\n\t\t\t? `url(${BACKGROUND_PREVIEW_IMAGE});`\n\t\t\t: 'none'};\n\tdisplay: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\t(props.channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\tprops.channel === CHANNEL_TYPE.RCS)\n\t\t\t? 'flex'\n\t\t\t: 'initial'};\n\talign-items: flex-start;\n`;\n\nexport interface BodyProps {\n\tshowVariableMapping: boolean;\n\tshowOnlyContent?: boolean;\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tshowSampleValues?: boolean;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n\tvariableListFromProps?: VariableListInterfaceV2[];\n\tskipDefaultVariableContent?: boolean;\n}\n\nconst Body = (props: BodyProps) => {\n\tconst {\n\t\tshowVariableMapping,\n\t\tshowOnlyContent,\n\t\twhatsappSpecificPickerMeta,\n\t\tshowVariableModal,\n\t\tdiscountCode,\n\t\tsetDiscountCode,\n\t\tvariableListForImage,\n\t\tshowSampleValues,\n\t\tvariableListFromProps,\n\t\tfileName,\n\t\tsetFileName,\n\t\tskipDefaultVariableContent,\n\t} = props;\n\tconst desktopPreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\tconst mobilePreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\n\tconst {\n\t\tvariableList,\n\t\tsetVariableList,\n\t\tvariableCallback,\n\t\tshowVariablePicker,\n\t\tsetShowVariablePicker,\n\t\tdevice,\n\t\tdisplay_content,\n\t\tchannel,\n\t\ttemplate,\n\t\tsetTemplate,\n\t\tisWhatsappCarousel,\n\t\tisProductCarouselType,\n\t\thideDeviceContainerInPreview,\n\t\tonDefaultVariableSelect,\n\t} = useTemplateModalContext();\n\t/**\n\t * UI handler to add scroll and highlighter whenever any variable connector in focused\n\t * @param variableNumber variable index\n\t */\n\tfunction handleVariableConnectorClickUI(variableNumber: number) {\n\t\tconst iframe = document?.getElementById(\n\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop',\n\t\t) as HTMLIFrameElement;\n\n\t\tconst variableId = getVariableNameForEmailByIndex(variableNumber + 1);\n\t\tconst targetElement =\n\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t? iframe?.contentWindow?.document.getElementById(variableId)\n\t\t\t\t: document.getElementById(variableId);\n\t\tconst toTopPos = getOffsetTop(targetElement!);\n\n\t\tconst toLeftPos = targetElement?.offsetLeft;\n\n\t\tif (device === 'desktop') {\n\t\t\tif (toTopPos && desktopPreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// desktopPreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\tif (toTopPos && mobilePreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// mobilePreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos - 253);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getOffsetTop = (element: HTMLElement) => {\n\t\tlet offsetTop = 0;\n\n\t\twhile (element) {\n\t\t\toffsetTop += element.offsetTop;\n\t\t\telement = element.offsetParent as HTMLElement;\n\t\t}\n\t\treturn offsetTop;\n\t};\n\n\treturn (\n\t\t<Container>\n\t\t\t<LeftPanelContainer\n\t\t\t\tshowOnlyContent={showOnlyContent}\n\t\t\t\tshowVariableMapping={showVariableMapping}\n\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\thideDeviceContainerInPreview={hideDeviceContainerInPreview}\n\t\t\t\tchannel={channel}\n\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t>\n\t\t\t\t{device === 'mobile' ? (\n\t\t\t\t\t<MobilePreview\n\t\t\t\t\t\tref={mobilePreviewRef}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t<CarouselPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tisPreview={false}\n\t\t\t\t\t\tshowArrows={true}\n\t\t\t\t\t/>\n\t\t\t\t) : channel === CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t/>\n\t\t\t\t) : channel !== CHANNEL_TYPE.MESSAGE ? (\n\t\t\t\t\t<DesktopPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\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</LeftPanelContainer>\n\t\t\t{(isProductCarouselType || showVariableMapping) && (\n\t\t\t\t<RightPanelContainer\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tshowVariableMapping={true}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\twidth: channel === 'whatsapp' ? 428 : 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'block' : 'none',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\tkey={Math.random()}\n\t\t\t\t\t\t\thideHeaderCross\n\t\t\t\t\t\t\tshowHeader\n\t\t\t\t\t\t\tshowBackButton\n\t\t\t\t\t\t\tonBackButtonClick={() => {\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\t\tvariableCallback(variable);\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\tdata={variableList ?? []}\n\t\t\t\t\t\t\tonDefaultVariableSelect={onDefaultVariableSelect}\n\t\t\t\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpadding: '16px 14px',\n\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\tchannel === 'whatsapp' ||\n\t\t\t\t\t\t\t\tchannel == 'webpush' ||\n\t\t\t\t\t\t\t\tchannel == 'rcs'\n\t\t\t\t\t\t\t\t\t? 428\n\t\t\t\t\t\t\t\t\t: 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'none' : 'block', //cannot unmount the component as it will lose the state\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{channel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE?.RCS ? (\n\t\t\t\t\t\t\tchannel == CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t\t\t\t<EditWebpushTemplate\n\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\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<VariableConnectorsPanel\n\t\t\t\t\t\t\t\t\tonFocus={\n\t\t\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t\t\t\t\t\t\t\t? handleVariableConnectorClickUI\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t\t\t<EditWhatsAppCarouselTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditWhatsAppTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\tfileName={fileName}\n\t\t\t\t\t\t\t\tsetFileName={setFileName}\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</RightPanelContainer>\n\t\t\t)}\n\t\t\t{[CHANNEL_TYPE.WHATSAPP, CHANNEL_TYPE.SMS].includes(channel) &&\n\t\t\t\t!showVariableMapping &&\n\t\t\t\t!isProductCarouselType && (\n\t\t\t\t\t<RightPanelContainer>\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tstyle={{ fontStyle: 'italic' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tClick on ‘Select template’ below to use it\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</RightPanelContainer>\n\t\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default Body;\n"],"names":["Container","styled","RightPanelContainer","props","CHANNEL_TYPE","COLORS","LeftPanelContainer","BACKGROUND_PREVIEW_IMAGE","Body","showVariableMapping","showOnlyContent","whatsappSpecificPickerMeta","showVariableModal","discountCode","setDiscountCode","variableListForImage","showSampleValues","variableListFromProps","fileName","setFileName","skipDefaultVariableContent","desktopPreviewRef","useRef","mobilePreviewRef","variableList","setVariableList","variableCallback","showVariablePicker","setShowVariablePicker","device","display_content","channel","template","setTemplate","isWhatsappCarousel","isProductCarouselType","hideDeviceContainerInPreview","onDefaultVariableSelect","useTemplateModalContext","handleVariableConnectorClickUI","variableNumber","iframe","variableId","getVariableNameForEmailByIndex","targetElement","toTopPos","getOffsetTop","toLeftPos","highlightFor","element","offsetTop","jsxDEV","MobilePreview","this","CarouselPreview","TemplatePreview","DesktopPreview","Fragment","VariablePicker","cloneDeep","variable","PickerType","EditWebpushTemplate","VariableConnectorsPanel","EditWhatsAppCarouselTemplateV2","EditWhatsAppTemplateV2","BodySecondary"],"mappings":"giCA6BMA,GAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA,EAKnBC,EAAsBD,EAAAA,QAAO;AAAA;AAAA,cAMpBE,GACbA,EAAM,UAAYC,EAAAA,aAAa,MAAQ,QAAU,OAAO;AAAA;AAAA,WAE9CD,GACVA,EAAM,UAAYC,EAAAA,aAAa,SAAW,QAAU,OAAO;AAAA;AAAA;AAAA,gBAG7CC,EAAAA,OAAO,OAAO,OAAO;AAAA,eACrBF,GACdA,EAAM,mBACH,GAAGE,SAAO,OAAO,OAAO,aACxB,MAAS;AAAA,GACVF,GAAU,CAACA,EAAM,qBAAuB,6BAA6B;AAAA,EAGnEG,GAAqBL,EAAAA,QAAO;AAAA,YAQrBE,GACXA,EAAM,mBACH,OACAA,EAAM,gBACN,YACA,WAAW;AAAA;AAAA,WAEJA,GACVA,EAAM,oBAAsBA,EAAM,6BAC/B,QACA,OAAO;AAAA;AAAA,qBAEUA,GACpBA,EAAM,8BACNA,EAAM,UAAYC,eAAa,SAC5B,OAAOG,GAAAA,wBAAwB,KAC/B,MAAM;AAAA,YACEJ,GACXA,EAAM,+BACLA,EAAM,UAAYC,EAAAA,aAAa,UAC/BD,EAAM,UAAYC,EAAAA,aAAa,KAC7B,OACA,SAAS;AAAA;AAAA,EAmBRI,GAAQL,GAAqB,CAClC,KAAM,CACL,oBAAAM,EACA,gBAAAC,EACA,2BAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,iBAAAC,EACA,sBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,2BAAAC,CAAA,EACGjB,EACEkB,EACLC,EAAAA,OAAA,EACKC,EACLD,EAAAA,OAAA,EAEK,CACL,aAAAE,EACA,gBAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,sBAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,sBAAAC,EACA,6BAAAC,EACA,wBAAAC,CAAA,EACGC,0BAAA,EAKJ,SAASC,EAA+BC,EAAwB,CAC/D,MAAMC,EAAS,UAAU,eACxBZ,IAAW,SAAW,uBAAyB,uBAAA,EAG1Ca,EAAaC,GAAAA,+BAA+BH,EAAiB,CAAC,EAC9DI,EACLb,IAAY3B,eAAa,MACtBqC,GAAQ,eAAe,SAAS,eAAeC,CAAU,EACzD,SAAS,eAAeA,CAAU,EAChCG,EAAWC,EAAaF,CAAc,EAEtCG,EAAYH,GAAe,WAE7Bf,IAAW,UACVgB,GAAYxB,EAAkB,UACjCoB,GAAQ,eAAe,SAASM,GAAa,EAAGF,CAAQ,EAGxDG,EAAAA,aACCN,EACArC,SAAO,WAAW,QAAQ,MAC1B,EACA0B,EACAF,CAAA,GAIEgB,GAAYtB,EAAiB,UAChCkB,GAAQ,eAAe,SAASM,GAAa,EAAGF,CAAQ,EAGxDG,EAAAA,aACCN,EACArC,SAAO,WAAW,QAAQ,MAC1B,EACA0B,EACAF,CAAA,EAIJ,CAEA,MAAMiB,EAAgBG,GAAyB,CAC9C,IAAIC,EAAY,EAEhB,KAAOD,GACNC,GAAaD,EAAQ,UACrBA,EAAUA,EAAQ,aAEnB,OAAOC,CACR,EAEA,gBACElD,GAAA,CACA,SAAA,CAAAmD,EAAAA,OAAC7C,GAAA,CACA,gBAAAI,EACA,oBAAAD,EACA,mBAAAyB,EACA,6BAAAE,EACA,QAAAL,EACA,2BAAAX,EAEC,aAAW,SACX+B,EAAAA,OAACC,GAAAA,QAAA,CACA,IAAK7B,EACL,gBAAiBO,GAAmB,GACpC,QAAAC,EACA,SAAAC,EACA,iBAAAhB,CAAA,EALD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAqC,MAAA,GAOItB,IAAY3B,EAAAA,aAAa,UAC5B2B,IAAY3B,eAAa,MACzB8B,EACDiB,EAAAA,OAACG,EAAAA,gBAAA,CACA,IAAKjC,EACL,QAAAU,EACA,SAAAC,EACA,iBAAAhB,EACA,UAAW,GACX,WAAY,EAAA,EANb,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAqC,MAAA,EAQGtB,IAAY3B,eAAa,QAC5B+C,EAAAA,OAACI,EAAAA,gBAAA,CACA,iBAAAvC,EACA,QAAAe,EACA,WAAU,GACV,SAAAC,CAAA,EAJD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAqB,MAAA,EAMGtB,IAAY3B,eAAa,QAC5B+C,EAAAA,OAACK,GAAAA,QAAA,CACA,IAAKnC,EACL,QAAAU,EACA,gBAAiBD,GAAmB,GACpC,iBAAAd,CAAA,EAJD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAqC,MAAA,EAOAF,EAAAA,OAAAM,EAAAA,SAAA,GAAA,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAJ,MAAE,CAAA,EA1CJ,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,GA6CElB,GAAyB1B,IAC1B0C,EAAAA,OAACjD,EAAA,CACA,QAAA6B,EACA,mBAAAG,EACA,oBAAqB,GAErB,SAAA,CAAAiB,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,OAAQ,OACR,MAAOpB,IAAY,WAAa,IAAM,IACtC,QAASJ,EAAqB,QAAU,MAAA,EAGzC,SAAAwB,EAAAA,OAACO,EAAAA,eAAA,CAEA,gBAAe,GACf,WAAU,GACV,eAAc,GACd,kBAAmB,IAAM,CACxBjC,EAAgBkC,EAAAA,QAAU1C,CAAqB,CAAC,EAChDW,EAAsB,EAAK,CAC5B,EACA,SAAWgC,GAAyB,CACnClC,EAAiBkC,CAAQ,EACzBnC,EAAgBkC,EAAAA,QAAU1C,CAAqB,CAAC,EAChDW,EAAsB,EAAK,CAC5B,EACA,KAAMiC,GAAAA,WAAW,SACjB,KAAMrC,GAAgB,CAAA,EACtB,wBAAAa,EACA,2BAAAjB,CAAA,EAhBK,KAAK,OAAA,EADX,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAiC,MAAA,CAkBA,EAzBD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,EA2BAF,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,YACT,MACCpB,IAAY,YACZA,GAAW,WACXA,GAAW,MACR,IACA,IACJ,QAASJ,EAAqB,OAAS,OAAA,EAGvC,SAAAI,IAAY3B,eAAa,UAC1B2B,IAAY3B,gBAAc,IACzB2B,GAAW3B,eAAa,QACvB+C,EAAAA,OAACW,GAAAA,QAAA,CACA,2BAAAnD,EACA,SAAAqB,EACA,iBAAmBA,GAA+B,CACjDC,IAAcD,CAAQ,CACvB,EACA,kBAAApB,CAAA,EAND,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAyC,MAAA,EASAF,EAAAA,OAACY,GAAAA,QAAA,CACA,QACChC,IAAY3B,EAAAA,aAAa,MACtBmC,EACA,OAEJ,kBAAA3B,EACA,aAAAC,EACA,gBAAAC,CAAA,EARD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAuC,MAAA,GAWGtB,IAAY3B,EAAAA,aAAa,UAC5B2B,IAAY3B,eAAa,MACzB8B,EACDiB,EAAAA,OAACa,EAAAA,QAAA,CACA,2BAAArD,EACA,SAAAqB,EACA,kBAAApB,EACA,qBAAAG,EACA,aAAAF,EACA,gBAAAC,CAAA,EAND,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAuC,MAAA,EASAF,EAAAA,OAACc,GAAAA,QAAA,CACA,2BAAAtD,EACA,SAAAqB,EACA,iBAAmBA,GAA+B,CACjDC,IAAcD,CAAQ,CACvB,EACA,kBAAApB,EACA,qBAAAG,EACA,aAAAF,EACA,gBAAAC,EACA,SAAAI,EACA,YAAAC,CAAA,EAXD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAkC,MAAA,CAYA,EA3DF,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CA6DA,CAAA,EA7FD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,EAgGA,CAACjD,EAAAA,aAAa,SAAUA,EAAAA,aAAa,GAAG,EAAE,SAAS2B,CAAO,GAC1D,CAACtB,GACD,CAAC0B,YACCjC,EAAA,CACA,SAAAiD,EAAAA,OAACe,EAAAA,cAAA,CACA,MAAO7D,EAAAA,OAAO,QAAQ,UACtB,MAAO,CAAE,UAAW,QAAA,EACpB,SAAA,4CAAA,EAHD,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAgD,MAAA,CAKA,EAND,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAOA,CAAA,CAAA,EAzJH,OAAA,GAAA,CAAA,SAAA,qHAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MA2JA,CAEF"}
+{"version":3,"file":"Body.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Body.tsx"],"sourcesContent":["import { PickerType, type VariableV3 } from '@src/helpers';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { CarouselPreview } from '@src/components/carousel-preview/CarouselPreview';\nimport EditWhatsAppCarouselTemplateV2 from '@src/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type { AllTemplateTypes } from '@src/components/template-preview/models/types';\nimport type { WebpushTemplateType } from '@src/components/template-preview/models/WebpushTemplate';\nimport type { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport type {\n\tWhatsAppPickerMeta,\n\tWhatsAppTemplate,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { VariablePicker } from '@src/components/variable-picker-v3/VariablePicker';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { BACKGROUND_PREVIEW_IMAGE } from '../utils/constants';\nimport { getVariableNameForEmailByIndex } from '../utils/getVariableNameEmail';\nimport { highlightFor } from '../utils/highlightFor';\nimport DesktopPreview from './DesktopPreview';\nimport EditWebpushTemplate from './EditWebpushTemplate';\nimport EditWhatsAppTemplateV2 from './EditWhatsAppTemplateV2';\nimport MobilePreview from './MobilePreview';\nimport VariableConnectorsPanel from './VariableConnectorsPanel';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\t//\theight: 100%;\n`;\n\nconst RightPanelContainer = styled.div<{\n\tchannel?: CHANNEL_TYPE;\n\tisWhatsappCarousel?: boolean;\n\tshowVariableMapping?: boolean;\n}>`\n\tmax-width: 450px;\n\tmax-width: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.EMAIL ? '400px' : '450px'};\n\n\theight: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP ? '500px' : '475px'};\n\toverflow-y: auto;\n\tpadding-bottom: 24px;\n\tborder-left: ${COLORS.stroke.primary} 1px solid;\n\tborder-top: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? `${COLORS.stroke.primary} 1px solid`\n\t\t\t: undefined};\n\t${(props) => !props.showVariableMapping && 'width: 340px; height: 500px'};\n`;\n\nconst LeftPanelContainer = styled.div<{\n\tshowOnlyContent?: boolean;\n\tshowVariableMapping?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thideDeviceContainerInPreview?: boolean;\n\tchannel?: CHANNEL_TYPE;\n\tskipDefaultVariableContent?: boolean;\n}>`\n\tpadding: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? undefined\n\t\t\t: props.showOnlyContent\n\t\t\t? '16px 14px'\n\t\t\t: '16px 32px'};\n\tflex: 1;\n\theight: ${(props) =>\n\t\tprops.isWhatsappCarousel || props.hideDeviceContainerInPreview\n\t\t\t? '500px'\n\t\t\t: '475px'};\n\toverflow-y: auto;\n\tbackground-image: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP\n\t\t\t? `url(${BACKGROUND_PREVIEW_IMAGE});`\n\t\t\t: 'none'};\n\tdisplay: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\t(props.channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\tprops.channel === CHANNEL_TYPE.RCS)\n\t\t\t? 'flex'\n\t\t\t: 'initial'};\n\talign-items: flex-start;\n`;\n\nexport interface BodyProps {\n\tshowVariableMapping: boolean;\n\tshowOnlyContent?: boolean;\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tshowSampleValues?: boolean;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n\tvariableListFromProps?: VariableListInterfaceV2[];\n\tskipDefaultVariableContent?: boolean;\n}\n\nconst Body = (props: BodyProps) => {\n\tconst {\n\t\tshowVariableMapping,\n\t\tshowOnlyContent,\n\t\twhatsappSpecificPickerMeta,\n\t\tshowVariableModal,\n\t\tdiscountCode,\n\t\tsetDiscountCode,\n\t\tvariableListForImage,\n\t\tshowSampleValues,\n\t\tvariableListFromProps,\n\t\tfileName,\n\t\tsetFileName,\n\t\tskipDefaultVariableContent,\n\t} = props;\n\tconst desktopPreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\tconst mobilePreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\n\tconst {\n\t\tvariableList,\n\t\tsetVariableList,\n\t\tvariableCallback,\n\t\tshowVariablePicker,\n\t\tsetShowVariablePicker,\n\t\tdevice,\n\t\tdisplay_content,\n\t\tchannel,\n\t\ttemplate,\n\t\tsetTemplate,\n\t\tisWhatsappCarousel,\n\t\tisProductCarouselType,\n\t\thideDeviceContainerInPreview,\n\t\tonDefaultVariableSelect,\n\t} = useTemplateModalContext();\n\t/**\n\t * UI handler to add scroll and highlighter whenever any variable connector in focused\n\t * @param variableNumber variable index\n\t */\n\tfunction handleVariableConnectorClickUI(variableNumber: number) {\n\t\tconst iframe = document?.getElementById(\n\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop',\n\t\t) as HTMLIFrameElement;\n\n\t\tconst variableId = getVariableNameForEmailByIndex(variableNumber + 1);\n\t\tconst targetElement =\n\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t? iframe?.contentWindow?.document.getElementById(variableId)\n\t\t\t\t: document.getElementById(variableId);\n\t\tconst toTopPos = getOffsetTop(targetElement!);\n\n\t\tconst toLeftPos = targetElement?.offsetLeft;\n\n\t\tif (device === 'desktop') {\n\t\t\tif (toTopPos && desktopPreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// desktopPreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\tif (toTopPos && mobilePreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// mobilePreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos - 253);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getOffsetTop = (element: HTMLElement) => {\n\t\tlet offsetTop = 0;\n\n\t\twhile (element) {\n\t\t\toffsetTop += element.offsetTop;\n\t\t\telement = element.offsetParent as HTMLElement;\n\t\t}\n\t\treturn offsetTop;\n\t};\n\n\treturn (\n\t\t<Container>\n\t\t\t<LeftPanelContainer\n\t\t\t\tshowOnlyContent={showOnlyContent}\n\t\t\t\tshowVariableMapping={showVariableMapping}\n\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\thideDeviceContainerInPreview={hideDeviceContainerInPreview}\n\t\t\t\tchannel={channel}\n\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t>\n\t\t\t\t{device === 'mobile' ? (\n\t\t\t\t\t<MobilePreview\n\t\t\t\t\t\tref={mobilePreviewRef}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t<CarouselPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tisPreview={false}\n\t\t\t\t\t\tshowArrows={true}\n\t\t\t\t\t/>\n\t\t\t\t) : channel === CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t/>\n\t\t\t\t) : channel !== CHANNEL_TYPE.MESSAGE ? (\n\t\t\t\t\t<DesktopPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\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</LeftPanelContainer>\n\t\t\t{(isProductCarouselType || showVariableMapping) && (\n\t\t\t\t<RightPanelContainer\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tshowVariableMapping={true}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\twidth: channel === 'whatsapp' ? 428 : 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'block' : 'none',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\tkey={Math.random()}\n\t\t\t\t\t\t\thideHeaderCross\n\t\t\t\t\t\t\tshowHeader\n\t\t\t\t\t\t\tshowBackButton\n\t\t\t\t\t\t\tonBackButtonClick={() => {\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\t\tvariableCallback(variable);\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\tdata={variableList ?? []}\n\t\t\t\t\t\t\tonDefaultVariableSelect={onDefaultVariableSelect}\n\t\t\t\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpadding: '16px 14px',\n\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\tchannel === 'whatsapp' ||\n\t\t\t\t\t\t\t\tchannel == 'webpush' ||\n\t\t\t\t\t\t\t\tchannel == 'rcs'\n\t\t\t\t\t\t\t\t\t? 428\n\t\t\t\t\t\t\t\t\t: 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'none' : 'block', //cannot unmount the component as it will lose the state\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{channel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE?.RCS ? (\n\t\t\t\t\t\t\tchannel == CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t\t\t\t<EditWebpushTemplate\n\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\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<VariableConnectorsPanel\n\t\t\t\t\t\t\t\t\tonFocus={\n\t\t\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t\t\t\t\t\t\t\t? handleVariableConnectorClickUI\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t\t\t<EditWhatsAppCarouselTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditWhatsAppTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\tfileName={fileName}\n\t\t\t\t\t\t\t\tsetFileName={setFileName}\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</RightPanelContainer>\n\t\t\t)}\n\t\t\t{[CHANNEL_TYPE.WHATSAPP, CHANNEL_TYPE.SMS].includes(channel) &&\n\t\t\t\t!showVariableMapping &&\n\t\t\t\t!isProductCarouselType && (\n\t\t\t\t\t<RightPanelContainer>\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tstyle={{ fontStyle: 'italic' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tClick on ‘Select template’ below to use it\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</RightPanelContainer>\n\t\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default Body;\n"],"names":["Container","styled","RightPanelContainer","props","CHANNEL_TYPE","COLORS","LeftPanelContainer","BACKGROUND_PREVIEW_IMAGE","Body","showVariableMapping","showOnlyContent","whatsappSpecificPickerMeta","showVariableModal","discountCode","setDiscountCode","variableListForImage","showSampleValues","variableListFromProps","fileName","setFileName","skipDefaultVariableContent","desktopPreviewRef","useRef","mobilePreviewRef","variableList","setVariableList","variableCallback","showVariablePicker","setShowVariablePicker","device","display_content","channel","template","setTemplate","isWhatsappCarousel","isProductCarouselType","hideDeviceContainerInPreview","onDefaultVariableSelect","useTemplateModalContext","handleVariableConnectorClickUI","variableNumber","iframe","variableId","getVariableNameForEmailByIndex","targetElement","toTopPos","getOffsetTop","toLeftPos","highlightFor","element","offsetTop","jsxDEV","MobilePreview","this","CarouselPreview","TemplatePreview","DesktopPreview","Fragment","VariablePicker","cloneDeep","variable","PickerType","EditWebpushTemplate","VariableConnectorsPanel","EditWhatsAppCarouselTemplateV2","EditWhatsAppTemplateV2","BodySecondary"],"mappings":"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"}

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

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),m=require("react"),p=require("styled-components"),c=require("../../spinner/Spinner.js"),d=require("../../template-preview/TemplatePreview.js"),u=require("../../template-preview/models/Channels.js"),o=require("../../../constants/Theme.js"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},b=s(m),n=s(p),f=n.default.div`
-	background: ${o.COLORS.surface.standard};
-	border: 1px solid ${o.COLORS.stroke.primary};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),m=require("react"),d=require("styled-components"),p=require("../../spinner/Spinner.js"),c=require("../../template-preview/TemplatePreview.js"),u=require("../../template-preview/models/Channels.js"),n=require("../../../constants/Theme.js"),s=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},b=s(m),r=s(d),f=r.default.div`
+	background: ${n.COLORS.surface.standard};
+	border: 1px solid ${n.COLORS.stroke.primary};
 	border-radius: 8px;
 	overflow-y: auto;
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,h=n.default.div`
+`,x=r.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${o.COLORS.stroke.primary};
-`,r=n.default.div`
+	border-bottom-color: ${n.COLORS.stroke.primary};
+`,t=r.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,i=b.default.forwardRef(({display_content:t,showSampleValues:a},l)=>e.jsxDEV(f,{ref:l,children:[e.jsxDEV(h,{children:[e.jsxDEV(r,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:40,columnNumber:5},void 0),e.jsxDEV(r,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:41,columnNumber:5},void 0),e.jsxDEV(r,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:42,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:39,columnNumber:4},void 0),e.jsxDEV("div",{children:t?e.jsxDEV(d.TemplatePreview,{showSampleValues:a,channel:u.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:t,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:46,columnNumber:6},void 0):e.jsxDEV("div",{style:{padding:20},children:e.jsxDEV(c.Spinner,{size:"small"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:65,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:64,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:44,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:38,columnNumber:3},void 0));i.displayName="DesktopPreview";exports.default=i;
+`,i=b.default.forwardRef(({display_content:o,showSampleValues:a},l)=>e.jsxDEV(f,{ref:l,children:[e.jsxDEV(x,{children:[e.jsxDEV(t,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:40,columnNumber:5},void 0),e.jsxDEV(t,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:41,columnNumber:5},void 0),e.jsxDEV(t,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:42,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:39,columnNumber:4},void 0),e.jsxDEV("div",{children:o?e.jsxDEV(c.TemplatePreview,{showSampleValues:a,channel:u.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:46,columnNumber:6},void 0):e.jsxDEV("div",{style:{padding:20},children:e.jsxDEV(p.Spinner,{size:"small"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:65,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:64,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:44,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:38,columnNumber:3},void 0));i.displayName="DesktopPreview";exports.default=i;
 //# sourceMappingURL=DesktopPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopPreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DesktopPreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner/Spinner';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { COLORS } from '@src/constants/Theme';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\toverflow-y: auto;\n\t/* max-height: 420px; */\n\tscroll-behavior: smooth;\n\theight: 100%;\n`;\n\nconst PreviewHeader = styled.div`\n\tpadding: 18px 24px 12px;\n\tdisplay: flex;\n\tgap: 4px;\n\tborder-bottom-width: 1px;\n\tborder-bottom-color: ${COLORS.stroke.primary};\n`;\n\nconst Dot = styled.div`\n\twidth: 6px;\n\theight: 6px;\n\tbackground: #d9d9d9;\n\tborder-radius: 3px;\n`;\n\nconst DesktopPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{ display_content: string; channel: CHANNEL_TYPE; showSampleValues?: boolean }\n>(({ display_content, showSampleValues }, previewRef) => {\n\treturn (\n\t\t<Container ref={previewRef}>\n\t\t\t<PreviewHeader>\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t</PreviewHeader>\n\t\t\t<div>\n\t\t\t\t{display_content ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={CHANNEL_TYPE.EMAIL}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\temailSpecificMeta={{\n\t\t\t\t\t\t\temailDisplayContent: display_content,\n\t\t\t\t\t\t\thideViewButtonForEmail: true,\n\t\t\t\t\t\t\temailHtmlContainerId: 'template_html_desktop',\n\t\t\t\t\t\t\tcontainerStyle: {\n\t\t\t\t\t\t\t\theight: 441,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttemplateContainerStyles: {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\thidePointerEvents={true}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div style={{ padding: 20 }}>\n\t\t\t\t\t\t<Spinner size=\"small\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Container>\n\t);\n});\nDesktopPreview.displayName = 'DesktopPreview';\n\nexport default DesktopPreview;\n"],"names":["Container","styled","COLORS","PreviewHeader","Dot","DesktopPreview","React","display_content","showSampleValues","previewRef","jsxDEV","this","TemplatePreview","CHANNEL_TYPE","Spinner"],"mappings":"0cAOMA,EAAYC,EAAAA,QAAO;AAAA,eACVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCC,EAAgBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKLC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvCE,EAAMH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAObI,EAAiBC,EAAAA,QAAM,WAG3B,CAAC,CAAE,gBAAAC,EAAiB,iBAAAC,CAAA,EAAoBC,IAExCC,EAAAA,OAACV,EAAA,CAAU,IAAKS,EACf,SAAA,CAAAC,SAACP,EAAA,CACA,SAAA,CAAAO,EAAAA,OAACN,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,CAAA,CAAA,EAHN,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAIA,EACAD,EAAAA,OAAC,OACC,SAAAH,EACAG,EAAAA,OAACE,EAAAA,gBAAA,CACA,iBAAAJ,EACA,QAASK,EAAAA,aAAa,MACtB,WAAU,GACV,kBAAmB,CAClB,oBAAqBN,EACrB,uBAAwB,GACxB,qBAAsB,wBACtB,eAAgB,CACf,OAAQ,GAAA,EAET,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,kBAAmB,EAAA,EAfpB,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAAA,EAkBAD,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,QAAS,EAAA,EACtB,SAAAA,EAAAA,OAACI,EAAAA,QAAA,CAAQ,KAAK,OAAA,EAAd,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAH,MAAsB,CAAA,EADvB,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,EAtBF,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAwBA,CAAA,CAAA,EA9BD,OAAA,GAAA,CAAA,SAAA,+HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+BA,CAED,EACDN,EAAe,YAAc"}
+{"version":3,"file":"DesktopPreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DesktopPreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner/Spinner';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { COLORS } from '@src/constants/Theme';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\toverflow-y: auto;\n\t/* max-height: 420px; */\n\tscroll-behavior: smooth;\n\theight: 100%;\n`;\n\nconst PreviewHeader = styled.div`\n\tpadding: 18px 24px 12px;\n\tdisplay: flex;\n\tgap: 4px;\n\tborder-bottom-width: 1px;\n\tborder-bottom-color: ${COLORS.stroke.primary};\n`;\n\nconst Dot = styled.div`\n\twidth: 6px;\n\theight: 6px;\n\tbackground: #d9d9d9;\n\tborder-radius: 3px;\n`;\n\nconst DesktopPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{ display_content: string; channel: CHANNEL_TYPE; showSampleValues?: boolean }\n>(({ display_content, showSampleValues }, previewRef) => {\n\treturn (\n\t\t<Container ref={previewRef}>\n\t\t\t<PreviewHeader>\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t</PreviewHeader>\n\t\t\t<div>\n\t\t\t\t{display_content ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={CHANNEL_TYPE.EMAIL}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\temailSpecificMeta={{\n\t\t\t\t\t\t\temailDisplayContent: display_content,\n\t\t\t\t\t\t\thideViewButtonForEmail: true,\n\t\t\t\t\t\t\temailHtmlContainerId: 'template_html_desktop',\n\t\t\t\t\t\t\tcontainerStyle: {\n\t\t\t\t\t\t\t\theight: 441,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttemplateContainerStyles: {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\thidePointerEvents={true}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div style={{ padding: 20 }}>\n\t\t\t\t\t\t<Spinner size=\"small\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Container>\n\t);\n});\nDesktopPreview.displayName = 'DesktopPreview';\n\nexport default DesktopPreview;\n"],"names":["Container","styled","COLORS","PreviewHeader","Dot","DesktopPreview","React","display_content","showSampleValues","previewRef","jsxDEV","this","TemplatePreview","CHANNEL_TYPE","Spinner"],"mappings":"0cAOMA,EAAYC,EAAAA,QAAO;AAAA,eACVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCC,EAAgBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKLC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvCE,EAAMH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAObI,EAAiBC,EAAAA,QAAM,WAG3B,CAAC,CAAE,gBAAAC,EAAiB,iBAAAC,CAAA,EAAoBC,IAExCC,EAAAA,OAACV,EAAA,CAAU,IAAKS,EACf,SAAA,CAAAC,SAACP,EAAA,CACA,SAAA,CAAAO,EAAAA,OAACN,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,CAAA,CAAA,EAHN,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAIA,EACAD,EAAAA,OAAC,OACC,SAAAH,EACAG,EAAAA,OAACE,EAAAA,gBAAA,CACA,iBAAAJ,EACA,QAASK,EAAAA,aAAa,MACtB,WAAU,GACV,kBAAmB,CAClB,oBAAqBN,EACrB,uBAAwB,GACxB,qBAAsB,wBACtB,eAAgB,CACf,OAAQ,GAAA,EAET,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,kBAAmB,EAAA,EAfpB,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAAA,EAkBAD,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,QAAS,EAAA,EACtB,SAAAA,EAAAA,OAACI,EAAAA,QAAA,CAAQ,KAAK,OAAA,EAAd,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAH,MAAsB,CAAA,EADvB,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,EAtBF,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAwBA,CAAA,CAAA,EA9BD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+BA,CAED,EACDN,EAAe,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),x=require("../../../assets/icons/PlusIcon.js"),n=require("react"),C=require("../../checkBox/CheckBox.js"),N=require("../../input/Input.js"),k=require("../../TypographyStyle.js"),D=require("../context/templateModalContext.js"),V=require("./VariableConnectorsPanel.js"),E=m=>{const{discountCode:s,setDiscountCode:o}=m,[a,i]=n.useState(""),[r,u]=n.useState(!!s),[d,l]=n.useState(!1),{setVariableCallback:p,setShowVariablePicker:b}=D.useTemplateModalContext(),c=n.useRef(),f=n.useRef();n.useEffect(()=>{o&&a&&o(s+a)},[a]);const h=t=>{i(t.actualValue)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[e.jsxDEV(C.CheckBox,{isChecked:r,onValueChange:()=>{r&&o&&(o(""),i("")),u(!r)}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:44,columnNumber:6},void 0),e.jsxDEV(k.TitleSmall,{style:{marginLeft:8},children:"Add discount code"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:54,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:36,columnNumber:5},void 0),r&&e.jsxDEV("div",{ref:c,style:{margin:10},children:[e.jsxDEV(N.Input,{placeholder:"Enter your discount code",onChangeText:t=>{o&&o(t)},value:s,onFocus:()=>{l(!0)},onBlur:t=>{t.relatedTarget?.id==="addVar"?(c.current&&c.current.focus(),l(!0)):l(!1)},noErrorHint:!0,validate:t=>[!0,""]},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:59,columnNumber:6},void 0),d&&e.jsxDEV(V.AddVariableStyled,{ref:f,id:"addVar",onClick:t=>{t.stopPropagation(),p(()=>h),b(!0)},children:e.jsxDEV("div",{className:"add",children:[e.jsxDEV(x.default,{width:14,height:14,color:"white"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:96,columnNumber:9},void 0),e.jsxDEV("div",{className:"variable",children:"Add variable"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:97,columnNumber:9},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:95,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:86,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:58,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:34,columnNumber:3},void 0)};exports.DiscountCodeComponent=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),C=require("../../../assets/icons/PlusIcon.js"),t=require("react"),D=require("../../checkBox/CheckBox.js"),N=require("../../input/Input.js"),y=require("../../TypographyStyle.js"),V=require("../context/templateModalContext.js"),h=require("./VariableConnectorsPanel.js"),E=d=>{const{discountCode:r,setDiscountCode:n}=d,[a,m]=t.useState(""),[s,c]=t.useState(!!r),[u,l]=t.useState(!1),{setVariableCallback:p,setShowVariablePicker:b}=V.useTemplateModalContext(),i=t.useRef(),f=t.useRef();t.useEffect(()=>{n&&a&&n(r+a)},[a]);const x=o=>{m(o.actualValue)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[e.jsxDEV(D.CheckBox,{isChecked:s,onValueChange:()=>{s&&n&&(n(""),m("")),c(!s)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:44,columnNumber:6},void 0),e.jsxDEV(y.TitleSmall,{style:{marginLeft:8},children:"Add discount code"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:54,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:36,columnNumber:5},void 0),s&&e.jsxDEV("div",{ref:i,style:{margin:10},children:[e.jsxDEV(N.Input,{placeholder:"Enter your discount code",onChangeText:o=>{n&&n(o)},value:r,onFocus:()=>{l(!0)},onBlur:o=>{o.relatedTarget?.id==="addVar"?(i.current&&i.current.focus(),l(!0)):l(!1)},noErrorHint:!0,validate:o=>[!0,""]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:59,columnNumber:6},void 0),u&&e.jsxDEV(h.AddVariableStyled,{ref:f,id:"addVar",onClick:o=>{o.stopPropagation(),p(()=>x),b(!0)},children:e.jsxDEV("div",{className:"add",children:[e.jsxDEV(C.default,{width:14,height:14,color:"white"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:96,columnNumber:9},void 0),e.jsxDEV("div",{className:"variable",children:"Add variable"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:97,columnNumber:9},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:95,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:86,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:58,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:34,columnNumber:3},void 0)};exports.DiscountCodeComponent=E;
 //# sourceMappingURL=DiscountCodeComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DiscountCodeComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { AddVariableStyled } from './VariableConnectorsPanel';\n\nexport const DiscountCodeComponent = (props: {\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}) => {\n\tconst { discountCode, setDiscountCode } = props;\n\tconst [variableValue, setVariableValue] = useState<string>('');\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!discountCode);\n\tconst [showAddVariable, setShowAddVariable] = useState<boolean>(false);\n\tconst { setVariableCallback, setShowVariablePicker } =\n\t\tuseTemplateModalContext();\n\n\tconst superRef = useRef<any>();\n\tconst varRef = useRef<any>();\n\n\tuseEffect(() => {\n\t\tif (setDiscountCode && variableValue) {\n\t\t\tsetDiscountCode(discountCode + variableValue);\n\t\t}\n\t}, [variableValue]);\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetVariableValue(variable.actualValue);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode('');\n\t\t\t\t\t\t\t\tsetVariableValue('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>Add discount code</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div ref={superRef} style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tplaceholder={'Enter your discount code'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={discountCode}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\tif (e.relatedTarget?.id === 'addVar') {\n\t\t\t\t\t\t\t\tif (superRef.current) {\n\t\t\t\t\t\t\t\t\t(superRef.current as any).focus();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetShowAddVariable(false);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showAddVariable && (\n\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\tref={varRef}\n\t\t\t\t\t\t\tid={'addVar'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t<PlusIcon width={14} height={14} color=\"white\" />\n\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DiscountCodeComponent","props","discountCode","setDiscountCode","variableValue","setVariableValue","useState","isChecked","setIsChecked","showAddVariable","setShowAddVariable","setVariableCallback","setShowVariablePicker","useTemplateModalContext","superRef","useRef","varRef","useEffect","handleVariableCallback","variable","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","e","_","AddVariableStyled","PlusIcon"],"mappings":"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"}
+{"version":3,"file":"DiscountCodeComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { AddVariableStyled } from './VariableConnectorsPanel';\n\nexport const DiscountCodeComponent = (props: {\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}) => {\n\tconst { discountCode, setDiscountCode } = props;\n\tconst [variableValue, setVariableValue] = useState<string>('');\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!discountCode);\n\tconst [showAddVariable, setShowAddVariable] = useState<boolean>(false);\n\tconst { setVariableCallback, setShowVariablePicker } =\n\t\tuseTemplateModalContext();\n\n\tconst superRef = useRef<any>();\n\tconst varRef = useRef<any>();\n\n\tuseEffect(() => {\n\t\tif (setDiscountCode && variableValue) {\n\t\t\tsetDiscountCode(discountCode + variableValue);\n\t\t}\n\t}, [variableValue]);\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetVariableValue(variable.actualValue);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode('');\n\t\t\t\t\t\t\t\tsetVariableValue('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>Add discount code</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div ref={superRef} style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tplaceholder={'Enter your discount code'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={discountCode}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\tif (e.relatedTarget?.id === 'addVar') {\n\t\t\t\t\t\t\t\tif (superRef.current) {\n\t\t\t\t\t\t\t\t\t(superRef.current as any).focus();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetShowAddVariable(false);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showAddVariable && (\n\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\tref={varRef}\n\t\t\t\t\t\t\tid={'addVar'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t<PlusIcon width={14} height={14} color=\"white\" />\n\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DiscountCodeComponent","props","discountCode","setDiscountCode","variableValue","setVariableValue","useState","isChecked","setIsChecked","showAddVariable","setShowAddVariable","setVariableCallback","setShowVariablePicker","useTemplateModalContext","superRef","useRef","varRef","useEffect","handleVariableCallback","variable","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","e","_","AddVariableStyled","PlusIcon"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),S=require("../../../assets/icons/arrow_back.svg.js"),I=require("../../../assets/icons/info.svg.js"),a=require("react"),M=require("../../button/Button.js"),A=require("../../image-cropper/BikImageCropper.js"),C=require("../../input-with-vars/InputWithVariables.js"),q=require("../../spinner/Spinner.js"),n=require("../../template-preview/models/TemplateMeta.js"),B=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../../TypographyStyle.js"),H=require("../../../utils/validator.js"),l=require("../../../constants/Theme.js"),_=require("../../../assets/icons/file.svg.js"),L=require("../../../assets/icons/filePdf.svg.js"),w=require("../../../assets/icons/image.svg.js"),O=require("../../../assets/icons/upload.svg.js"),R=require("../context/templateModalContext.js"),Y=require("../utils/validateIsUrl.js"),G=require("../../variable-picker-v3/model.js"),$=({setOpenEditMedia:b,mediaComponentFormat:o,variableListForImage:k,openEditMedia:g,uploadMedia:E,fileRef:m,useEditWhatsappTemplateMediaResponse:t,skipAddVariable:f})=>{const{pod:y,setHideCrossButton:x,setHideFooterButton:h}=R.useTemplateModalContext(),[j,u]=a.useState(""),[v,D]=a.useState(void 0),[N,s]=a.useState(!1),[c,P]=a.useState("");a.useEffect(()=>(h(!0),()=>{h(!1)}),[]),a.useEffect(()=>{const r=document.querySelector('[class*="ModalWrapper"]');r&&D(r)},[t.loading]);let d;if(o===n.HEADER_TYPES.IMAGE?d="image/png, image/jpeg":o===n.HEADER_TYPES.VIDEO?d="video/mp4":d="application/pdf",!g)return e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:84,columnNumber:10},void 0);const p=()=>o===n.HEADER_TYPES.IMAGE?"Image":o===n.HEADER_TYPES.VIDEO?"Video":"Document",V=()=>t.loading?"Upload in progress...":o===n.HEADER_TYPES.IMAGE?"Upload an image":o===n.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document",U=()=>t.loading?`Your ${o.toLowerCase()} is getting loaded. This may take a couple of minutes.`:o===n.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":o===n.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB",T=r=>{x(!!r)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e.jsxDEV(S.default,{onClick:r=>{r.stopPropagation(),b(!1),u("")},style:{cursor:"pointer"},width:16,height:16},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:137,columnNumber:5},void 0),e.jsxDEV(i.TitleRegular,{children:"Update Media"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:147,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:129,columnNumber:4},void 0),e.jsxDEV("div",{style:{position:"relative",padding:16,borderRadius:4,border:N?`1px dashed ${l.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${l.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:l.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:t.loading?"flex":"initial"},children:[e.jsxDEV("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[t.loading?e.jsxDEV(q.PureSpinner,{width:"40px",height:"40px",color:l.COLORS.content.brand},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:177,columnNumber:7},void 0):e.jsxDEV("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:l.DEFAULT_THEME.colorsV2.background.base},children:o===n.HEADER_TYPES.IMAGE?e.jsxDEV(w.default,{width:40,height:40},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:195,columnNumber:9},void 0):o===n.HEADER_TYPES.VIDEO?e.jsxDEV(_.default,{width:40,height:40},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:197,columnNumber:9},void 0):e.jsxDEV(L.default,{width:40,height:40},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:199,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:183,columnNumber:7},void 0),e.jsxDEV(i.TitleMedium,{children:V()},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:203,columnNumber:6},void 0),e.jsxDEV(i.BodySecondary,{color:l.COLORS.content.secondary,children:U()},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:204,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:166,columnNumber:5},void 0),!t.loading&&e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e.jsxDEV(C.InputWithVariables,{labelText:`${p()} URL`,onPickerToggle:T,pickerType:G.PickerType.EMBEDDED,portalElement:v??document.body,noMaxCharCheck:!0,allowMix:!1,onChange:r=>{P(r.actualValue),s(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:j,prevVariable:{actualValue:"",variableType:"string"},variablesList:k,placeHolder:f?"Enter URL":"Enter URL/Add variable",showAddButton:y===B.POD.CAMPAIGN?!f&&o===n.HEADER_TYPES.IMAGE:!0},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:213,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:210,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:249,columnNumber:8},void 0),e.jsxDEV(i.BodyCaption,{children:"Or upload media from device"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:252,columnNumber:8},void 0),e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:253,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:240,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",width:"100%"},children:e.jsxDEV(M.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:O.default,onClick:()=>{E(),s(!1)},size:"medium"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:258,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:257,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:209,columnNumber:6},void 0),N&&e.jsxDEV("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e.jsxDEV(I.default,{width:16,height:16,color:l.COLORS.content.negative},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:283,columnNumber:7},void 0),e.jsxDEV(i.BodyCaption,{style:{color:l.COLORS.content.negative},children:`Select ${p()}`},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:284,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:273,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:149,columnNumber:4},void 0),!t.loading&&e.jsxDEV("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e.jsxDEV(M.Button,{buttonText:`Add ${p()}`,onClick:()=>{if(!c){s(!0);return}if(!H.validateURL(c)&&!Y.isVariable(c)){u("Enter valid URL");return}E(c),b(!1),u(""),s(!1)}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:295,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:292,columnNumber:5},void 0),e.jsxDEV("input",{ref:m,style:{display:"none"},type:"file",onChange:t.handleImageUpload,accept:d},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:316,columnNumber:4},void 0),!!t.selectedImage&&e.jsxDEV(A.BikImageCropper,{aspectRatio:15/8,src:t.selectedImage,onCropComplete:t.onCropComplete,onCancel:()=>{t.setLoading(!1),t.setSelectedImage(""),m.current&&(m.current.value="")}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:324,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:128,columnNumber:3},void 0)};exports.default=$;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),S=require("../../../assets/icons/arrow_back.svg.js"),I=require("../../../assets/icons/info.svg.js"),r=require("react"),D=require("../../button/Button.js"),A=require("../../image-cropper/BikImageCropper.js"),P=require("../../input-with-vars/InputWithVariables.js"),C=require("../../spinner/Spinner.js"),t=require("../../template-preview/models/TemplateMeta.js"),q=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../../TypographyStyle.js"),B=require("../../../utils/validator.js"),a=require("../../../constants/Theme.js"),H=require("../../../assets/icons/file.svg.js"),_=require("../../../assets/icons/filePdf.svg.js"),L=require("../../../assets/icons/image.svg.js"),O=require("../../../assets/icons/upload.svg.js"),R=require("../context/templateModalContext.js"),Y=require("../utils/validateIsUrl.js"),G=require("../../variable-picker-v3/model.js"),$=({setOpenEditMedia:b,mediaComponentFormat:n,variableListForImage:M,openEditMedia:g,uploadMedia:E,fileRef:c,useEditWhatsappTemplateMediaResponse:o,skipAddVariable:f})=>{const{pod:v,setHideCrossButton:x,setHideFooterButton:y}=R.useTemplateModalContext(),[h,u]=r.useState(""),[k,V]=r.useState(void 0),[N,s]=r.useState(!1),[d,U]=r.useState("");r.useEffect(()=>(y(!0),()=>{y(!1)}),[]),r.useEffect(()=>{const l=document.querySelector('[class*="ModalWrapper"]');l&&V(l)},[o.loading]);let m;if(n===t.HEADER_TYPES.IMAGE?m="image/png, image/jpeg":n===t.HEADER_TYPES.VIDEO?m="video/mp4":m="application/pdf",!g)return e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:84,columnNumber:10},void 0);const p=()=>n===t.HEADER_TYPES.IMAGE?"Image":n===t.HEADER_TYPES.VIDEO?"Video":"Document",w=()=>o.loading?"Upload in progress...":n===t.HEADER_TYPES.IMAGE?"Upload an image":n===t.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document",j=()=>o.loading?`Your ${n.toLowerCase()} is getting loaded. This may take a couple of minutes.`:n===t.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":n===t.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB",T=l=>{x(!!l)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e.jsxDEV(S.default,{onClick:l=>{l.stopPropagation(),b(!1),u("")},style:{cursor:"pointer"},width:16,height:16},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:137,columnNumber:5},void 0),e.jsxDEV(i.TitleRegular,{children:"Update Media"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:147,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:129,columnNumber:4},void 0),e.jsxDEV("div",{style:{position:"relative",padding:16,borderRadius:4,border:N?`1px dashed ${a.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${a.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:a.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:o.loading?"flex":"initial"},children:[e.jsxDEV("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[o.loading?e.jsxDEV(C.PureSpinner,{width:"40px",height:"40px",color:a.COLORS.content.brand},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:177,columnNumber:7},void 0):e.jsxDEV("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:a.DEFAULT_THEME.colorsV2.background.base},children:n===t.HEADER_TYPES.IMAGE?e.jsxDEV(L.default,{width:40,height:40},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:195,columnNumber:9},void 0):n===t.HEADER_TYPES.VIDEO?e.jsxDEV(H.default,{width:40,height:40},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:197,columnNumber:9},void 0):e.jsxDEV(_.default,{width:40,height:40},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:199,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:183,columnNumber:7},void 0),e.jsxDEV(i.TitleMedium,{children:w()},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:203,columnNumber:6},void 0),e.jsxDEV(i.BodySecondary,{color:a.COLORS.content.secondary,children:j()},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:204,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:166,columnNumber:5},void 0),!o.loading&&e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e.jsxDEV(P.InputWithVariables,{labelText:`${p()} URL`,onPickerToggle:T,pickerType:G.PickerType.EMBEDDED,portalElement:k??document.body,noMaxCharCheck:!0,allowMix:!1,onChange:l=>{U(l.actualValue),s(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:h,prevVariable:{actualValue:"",variableType:"string"},variablesList:M,placeHolder:f?"Enter URL":"Enter URL/Add variable",showAddButton:v===q.POD.CAMPAIGN?!f&&n===t.HEADER_TYPES.IMAGE:!0},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:213,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:210,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:249,columnNumber:8},void 0),e.jsxDEV(i.BodyCaption,{children:"Or upload media from device"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:252,columnNumber:8},void 0),e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:253,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:240,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",width:"100%"},children:e.jsxDEV(D.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:O.default,onClick:()=>{E(),s(!1)},size:"medium"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:258,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:257,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:209,columnNumber:6},void 0),N&&e.jsxDEV("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e.jsxDEV(I.default,{width:16,height:16,color:a.COLORS.content.negative},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:283,columnNumber:7},void 0),e.jsxDEV(i.BodyCaption,{style:{color:a.COLORS.content.negative},children:`Select ${p()}`},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:284,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:273,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:149,columnNumber:4},void 0),!o.loading&&e.jsxDEV("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e.jsxDEV(D.Button,{buttonText:`Add ${p()}`,onClick:()=>{if(!d){s(!0);return}if(!B.validateURL(d)&&!Y.isVariable(d)){u("Enter valid URL");return}E(d),b(!1),u(""),s(!1)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:295,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:292,columnNumber:5},void 0),e.jsxDEV("input",{ref:c,style:{display:"none"},type:"file",onChange:o.handleImageUpload,accept:m},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:316,columnNumber:4},void 0),!!o.selectedImage&&e.jsxDEV(A.BikImageCropper,{aspectRatio:15/8,src:o.selectedImage,onCropComplete:o.onCropComplete,onCancel:()=>{o.setLoading(!1),o.setSelectedImage(""),c.current&&(c.current.value="")}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:324,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:128,columnNumber:3},void 0)};exports.default=$;
 //# sourceMappingURL=EditMediaModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditMediaModal.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { PickerType } from '@src/helpers';\nimport React, { useEffect, useState } from 'react';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Button } from '@src/components/button/Button';\nimport { BikImageCropper } from '@src/components/image-cropper/BikImageCropper';\nimport { InputWithVariables } from '@src/components/input-with-vars/InputWithVariables';\nimport { PureSpinner } from '@src/components/spinner/Spinner';\nimport { HEADER_TYPES } from '@src/components/template-preview/models/TemplateMeta';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { validateURL } from '@src/utils/validator';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport FileIcon from '../../../assets/icons/file.svg';\nimport FilePdfIcon from '../../../assets/icons/filePdf.svg';\nimport ImageIcon from '../../../assets/icons/image.svg';\nimport UploadIcon from '../../../assets/icons/upload.svg';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { isVariable } from '../utils/validateIsUrl';\nimport type { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';\n\ninterface EditMediaModalProps {\n\tsetOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;\n\topenEditMedia: boolean;\n\tmediaComponentFormat: HEADER_TYPES;\n\tvariableListForImage: VariableListInterfaceV2[];\n\tuploadMedia: (urlOrVariable?: string) => void;\n\teditIconRef: React.MutableRefObject<HTMLDivElement | null>;\n\tfileRef: React.MutableRefObject<HTMLInputElement | null>;\n\tuseEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;\n\tskipAddVariable?: boolean;\n}\nconst EditMediaModal: React.FC<EditMediaModalProps> = ({\n\tsetOpenEditMedia,\n\tmediaComponentFormat,\n\tvariableListForImage,\n\topenEditMedia,\n\tuploadMedia,\n\tfileRef,\n\tuseEditWhatsappTemplateMediaResponse,\n\tskipAddVariable,\n}) => {\n\tconst { pod, setHideCrossButton, setHideFooterButton } =\n\t\tuseTemplateModalContext();\n\n\tconst [errorMessage, setErrorMessage] = useState('');\n\tconst [portalElement, setPortalElement] = useState<HTMLElement | undefined>(\n\t\tundefined,\n\t);\n\tconst [mediaError, setMediaError] = useState<boolean>(false);\n\tconst [mediaValue, setMediaValue] = useState<string>('');\n\n\tuseEffect(() => {\n\t\tsetHideFooterButton(true);\n\t\treturn () => {\n\t\t\tsetHideFooterButton(false);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\t// grab styled modal container to show modal on the complete thing\n\t\tconst element = document.querySelector('[class*=\"ModalWrapper\"]');\n\t\tif (element) {\n\t\t\tsetPortalElement(element as HTMLElement);\n\t\t}\n\t}, [useEditWhatsappTemplateMediaResponse.loading]);\n\n\tlet mediaType: string;\n\tif (mediaComponentFormat === HEADER_TYPES.IMAGE) {\n\t\tmediaType = 'image/png, image/jpeg';\n\t} else if (mediaComponentFormat === HEADER_TYPES.VIDEO) {\n\t\tmediaType = 'video/mp4';\n\t} else {\n\t\tmediaType = 'application/pdf';\n\t}\n\n\tif (!openEditMedia) {\n\t\treturn <></>;\n\t}\n\n\tconst getButtonText = () => {\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Video'\n\t\t\t: 'Document';\n\t};\n\n\tconst getTitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn 'Upload in progress...';\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Upload an image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Upload a video'\n\t\t\t: 'Upload a document';\n\t};\n\n\tconst getSubtitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn `Your ${mediaComponentFormat.toLowerCase()} is getting loaded. This may take a couple of minutes.`;\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'JPEG/ PNG format • Max 5MB'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'MP4 format video • Max 16MB'\n\t\t\t: 'PDF format document • Max 100MB';\n\t};\n\n\tconst handlePickerToggle = (isOpen: boolean) => {\n\t\tif (isOpen) {\n\t\t\tsetHideCrossButton(true);\n\t\t} else {\n\t\t\tsetHideCrossButton(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: '10px',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tmarginBottom: '16px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BackIcon\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\twidth={16}\n\t\t\t\t\theight={16}\n\t\t\t\t/>\n\t\t\t\t<TitleRegular>Update Media</TitleRegular>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\tpadding: 16,\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\tborder: mediaError\n\t\t\t\t\t\t? `1px dashed ${DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`\n\t\t\t\t\t\t: `1px dashed ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.subdued,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tdisplay: useEditWhatsappTemplateMediaResponse.loading\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'initial',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmarginBottom: 24,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{useEditWhatsappTemplateMediaResponse.loading ? (\n\t\t\t\t\t\t<PureSpinner\n\t\t\t\t\t\t\twidth={'40px'}\n\t\t\t\t\t\t\theight={'40px'}\n\t\t\t\t\t\t\tcolor={COLORS.content.brand}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: 64,\n\t\t\t\t\t\t\t\twidth: 64,\n\t\t\t\t\t\t\t\tborderRadius: '100%',\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\tbackgroundColor: DEFAULT_THEME.colorsV2.background.base,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{mediaComponentFormat === HEADER_TYPES.IMAGE ? (\n\t\t\t\t\t\t\t\t<ImageIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : mediaComponentFormat === HEADER_TYPES.VIDEO ? (\n\t\t\t\t\t\t\t\t<FileIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<FilePdfIcon width={40} height={40} />\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\t<TitleMedium>{getTitleText()}</TitleMedium>\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{getSubtitleText()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: '6px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<InputWithVariables\n\t\t\t\t\t\t\t\tlabelText={`${getButtonText()} URL`}\n\t\t\t\t\t\t\t\tonPickerToggle={handlePickerToggle}\n\t\t\t\t\t\t\t\tpickerType={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tportalElement={portalElement ?? document.body}\n\t\t\t\t\t\t\t\tnoMaxCharCheck={true}\n\t\t\t\t\t\t\t\tallowMix={false}\n\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\tsetMediaValue(text.actualValue);\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVarHeader\n\t\t\t\t\t\t\t\tvarHeaderText=\"Select variable\"\n\t\t\t\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\t\t\t\tprevVariable={{ actualValue: '', variableType: 'string' }}\n\t\t\t\t\t\t\t\tvariablesList={variableListForImage}\n\t\t\t\t\t\t\t\tplaceHolder={\n\t\t\t\t\t\t\t\t\tskipAddVariable ? 'Enter URL' : 'Enter URL/Add variable'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowAddButton={\n\t\t\t\t\t\t\t\t\tpod === POD.CAMPAIGN\n\t\t\t\t\t\t\t\t\t\t? !skipAddVariable &&\n\t\t\t\t\t\t\t\t\t\t  mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t\t\t\t\t\t\t\t: true\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\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: 'space-between',\n\t\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t\t\tmarginBottom: '12px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<BodyCaption>Or upload media from device</BodyCaption>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div style={{ display: 'flex', width: '100%' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Upload\"\n\t\t\t\t\t\t\t\tbuttonType=\"dashBold\"\n\t\t\t\t\t\t\t\tLeadingIcon={UploadIcon}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tuploadMedia();\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tsize={'medium'}\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\t{mediaError && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tbottom: -24,\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<InfoIcon width={16} height={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t{`Select ${getButtonText()}`}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={`Add ${getButtonText()}`}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!mediaValue) {\n\t\t\t\t\t\t\t\tsetMediaError(true);\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (!validateURL(mediaValue) && !isVariable(mediaValue)) {\n\t\t\t\t\t\t\t\tsetErrorMessage('Enter valid URL');\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tuploadMedia(mediaValue);\n\t\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<input\n\t\t\t\tref={fileRef}\n\t\t\t\tstyle={{ display: 'none' }}\n\t\t\t\ttype=\"file\"\n\t\t\t\tonChange={useEditWhatsappTemplateMediaResponse.handleImageUpload}\n\t\t\t\taccept={mediaType}\n\t\t\t/>\n\t\t\t{!!useEditWhatsappTemplateMediaResponse.selectedImage && (\n\t\t\t\t<BikImageCropper\n\t\t\t\t\taspectRatio={15 / 8}\n\t\t\t\t\tsrc={useEditWhatsappTemplateMediaResponse.selectedImage}\n\t\t\t\t\tonCropComplete={useEditWhatsappTemplateMediaResponse.onCropComplete}\n\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setLoading(false);\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setSelectedImage('');\n\t\t\t\t\t\tif (fileRef.current) {\n\t\t\t\t\t\t\tfileRef.current.value = '';\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default EditMediaModal;\n"],"names":["EditMediaModal","setOpenEditMedia","mediaComponentFormat","variableListForImage","openEditMedia","uploadMedia","fileRef","useEditWhatsappTemplateMediaResponse","skipAddVariable","pod","setHideCrossButton","setHideFooterButton","useTemplateModalContext","errorMessage","setErrorMessage","useState","portalElement","setPortalElement","mediaError","setMediaError","mediaValue","setMediaValue","useEffect","element","mediaType","HEADER_TYPES","jsxDEV","Fragment","this","getButtonText","getTitleText","getSubtitleText","handlePickerToggle","isOpen","BackIcon","e","TitleRegular","DEFAULT_THEME","PureSpinner","COLORS","ImageIcon","FileIcon","FilePdfIcon","TitleMedium","BodySecondary","InputWithVariables","PickerType","text","POD","BodyCaption","Button","UploadIcon","InfoIcon","validateURL","isVariable","BikImageCropper"],"mappings":"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"}
+{"version":3,"file":"EditMediaModal.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { PickerType } from '@src/helpers';\nimport React, { useEffect, useState } from 'react';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Button } from '@src/components/button/Button';\nimport { BikImageCropper } from '@src/components/image-cropper/BikImageCropper';\nimport { InputWithVariables } from '@src/components/input-with-vars/InputWithVariables';\nimport { PureSpinner } from '@src/components/spinner/Spinner';\nimport { HEADER_TYPES } from '@src/components/template-preview/models/TemplateMeta';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { validateURL } from '@src/utils/validator';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport FileIcon from '../../../assets/icons/file.svg';\nimport FilePdfIcon from '../../../assets/icons/filePdf.svg';\nimport ImageIcon from '../../../assets/icons/image.svg';\nimport UploadIcon from '../../../assets/icons/upload.svg';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { isVariable } from '../utils/validateIsUrl';\nimport type { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';\n\ninterface EditMediaModalProps {\n\tsetOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;\n\topenEditMedia: boolean;\n\tmediaComponentFormat: HEADER_TYPES;\n\tvariableListForImage: VariableListInterfaceV2[];\n\tuploadMedia: (urlOrVariable?: string) => void;\n\teditIconRef: React.MutableRefObject<HTMLDivElement | null>;\n\tfileRef: React.MutableRefObject<HTMLInputElement | null>;\n\tuseEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;\n\tskipAddVariable?: boolean;\n}\nconst EditMediaModal: React.FC<EditMediaModalProps> = ({\n\tsetOpenEditMedia,\n\tmediaComponentFormat,\n\tvariableListForImage,\n\topenEditMedia,\n\tuploadMedia,\n\tfileRef,\n\tuseEditWhatsappTemplateMediaResponse,\n\tskipAddVariable,\n}) => {\n\tconst { pod, setHideCrossButton, setHideFooterButton } =\n\t\tuseTemplateModalContext();\n\n\tconst [errorMessage, setErrorMessage] = useState('');\n\tconst [portalElement, setPortalElement] = useState<HTMLElement | undefined>(\n\t\tundefined,\n\t);\n\tconst [mediaError, setMediaError] = useState<boolean>(false);\n\tconst [mediaValue, setMediaValue] = useState<string>('');\n\n\tuseEffect(() => {\n\t\tsetHideFooterButton(true);\n\t\treturn () => {\n\t\t\tsetHideFooterButton(false);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\t// grab styled modal container to show modal on the complete thing\n\t\tconst element = document.querySelector('[class*=\"ModalWrapper\"]');\n\t\tif (element) {\n\t\t\tsetPortalElement(element as HTMLElement);\n\t\t}\n\t}, [useEditWhatsappTemplateMediaResponse.loading]);\n\n\tlet mediaType: string;\n\tif (mediaComponentFormat === HEADER_TYPES.IMAGE) {\n\t\tmediaType = 'image/png, image/jpeg';\n\t} else if (mediaComponentFormat === HEADER_TYPES.VIDEO) {\n\t\tmediaType = 'video/mp4';\n\t} else {\n\t\tmediaType = 'application/pdf';\n\t}\n\n\tif (!openEditMedia) {\n\t\treturn <></>;\n\t}\n\n\tconst getButtonText = () => {\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Video'\n\t\t\t: 'Document';\n\t};\n\n\tconst getTitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn 'Upload in progress...';\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Upload an image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Upload a video'\n\t\t\t: 'Upload a document';\n\t};\n\n\tconst getSubtitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn `Your ${mediaComponentFormat.toLowerCase()} is getting loaded. This may take a couple of minutes.`;\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'JPEG/ PNG format • Max 5MB'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'MP4 format video • Max 16MB'\n\t\t\t: 'PDF format document • Max 100MB';\n\t};\n\n\tconst handlePickerToggle = (isOpen: boolean) => {\n\t\tif (isOpen) {\n\t\t\tsetHideCrossButton(true);\n\t\t} else {\n\t\t\tsetHideCrossButton(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: '10px',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tmarginBottom: '16px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BackIcon\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\twidth={16}\n\t\t\t\t\theight={16}\n\t\t\t\t/>\n\t\t\t\t<TitleRegular>Update Media</TitleRegular>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\tpadding: 16,\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\tborder: mediaError\n\t\t\t\t\t\t? `1px dashed ${DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`\n\t\t\t\t\t\t: `1px dashed ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.subdued,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tdisplay: useEditWhatsappTemplateMediaResponse.loading\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'initial',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmarginBottom: 24,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{useEditWhatsappTemplateMediaResponse.loading ? (\n\t\t\t\t\t\t<PureSpinner\n\t\t\t\t\t\t\twidth={'40px'}\n\t\t\t\t\t\t\theight={'40px'}\n\t\t\t\t\t\t\tcolor={COLORS.content.brand}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: 64,\n\t\t\t\t\t\t\t\twidth: 64,\n\t\t\t\t\t\t\t\tborderRadius: '100%',\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\tbackgroundColor: DEFAULT_THEME.colorsV2.background.base,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{mediaComponentFormat === HEADER_TYPES.IMAGE ? (\n\t\t\t\t\t\t\t\t<ImageIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : mediaComponentFormat === HEADER_TYPES.VIDEO ? (\n\t\t\t\t\t\t\t\t<FileIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<FilePdfIcon width={40} height={40} />\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\t<TitleMedium>{getTitleText()}</TitleMedium>\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{getSubtitleText()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: '6px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<InputWithVariables\n\t\t\t\t\t\t\t\tlabelText={`${getButtonText()} URL`}\n\t\t\t\t\t\t\t\tonPickerToggle={handlePickerToggle}\n\t\t\t\t\t\t\t\tpickerType={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tportalElement={portalElement ?? document.body}\n\t\t\t\t\t\t\t\tnoMaxCharCheck={true}\n\t\t\t\t\t\t\t\tallowMix={false}\n\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\tsetMediaValue(text.actualValue);\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVarHeader\n\t\t\t\t\t\t\t\tvarHeaderText=\"Select variable\"\n\t\t\t\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\t\t\t\tprevVariable={{ actualValue: '', variableType: 'string' }}\n\t\t\t\t\t\t\t\tvariablesList={variableListForImage}\n\t\t\t\t\t\t\t\tplaceHolder={\n\t\t\t\t\t\t\t\t\tskipAddVariable ? 'Enter URL' : 'Enter URL/Add variable'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowAddButton={\n\t\t\t\t\t\t\t\t\tpod === POD.CAMPAIGN\n\t\t\t\t\t\t\t\t\t\t? !skipAddVariable &&\n\t\t\t\t\t\t\t\t\t\t  mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t\t\t\t\t\t\t\t: true\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\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: 'space-between',\n\t\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t\t\tmarginBottom: '12px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<BodyCaption>Or upload media from device</BodyCaption>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div style={{ display: 'flex', width: '100%' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Upload\"\n\t\t\t\t\t\t\t\tbuttonType=\"dashBold\"\n\t\t\t\t\t\t\t\tLeadingIcon={UploadIcon}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tuploadMedia();\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tsize={'medium'}\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\t{mediaError && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tbottom: -24,\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<InfoIcon width={16} height={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t{`Select ${getButtonText()}`}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={`Add ${getButtonText()}`}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!mediaValue) {\n\t\t\t\t\t\t\t\tsetMediaError(true);\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (!validateURL(mediaValue) && !isVariable(mediaValue)) {\n\t\t\t\t\t\t\t\tsetErrorMessage('Enter valid URL');\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tuploadMedia(mediaValue);\n\t\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<input\n\t\t\t\tref={fileRef}\n\t\t\t\tstyle={{ display: 'none' }}\n\t\t\t\ttype=\"file\"\n\t\t\t\tonChange={useEditWhatsappTemplateMediaResponse.handleImageUpload}\n\t\t\t\taccept={mediaType}\n\t\t\t/>\n\t\t\t{!!useEditWhatsappTemplateMediaResponse.selectedImage && (\n\t\t\t\t<BikImageCropper\n\t\t\t\t\taspectRatio={15 / 8}\n\t\t\t\t\tsrc={useEditWhatsappTemplateMediaResponse.selectedImage}\n\t\t\t\t\tonCropComplete={useEditWhatsappTemplateMediaResponse.onCropComplete}\n\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setLoading(false);\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setSelectedImage('');\n\t\t\t\t\t\tif (fileRef.current) {\n\t\t\t\t\t\t\tfileRef.current.value = '';\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default EditMediaModal;\n"],"names":["EditMediaModal","setOpenEditMedia","mediaComponentFormat","variableListForImage","openEditMedia","uploadMedia","fileRef","useEditWhatsappTemplateMediaResponse","skipAddVariable","pod","setHideCrossButton","setHideFooterButton","useTemplateModalContext","errorMessage","setErrorMessage","useState","portalElement","setPortalElement","mediaError","setMediaError","mediaValue","setMediaValue","useEffect","element","mediaType","HEADER_TYPES","jsxDEV","Fragment","this","getButtonText","getTitleText","getSubtitleText","handlePickerToggle","isOpen","BackIcon","e","TitleRegular","DEFAULT_THEME","PureSpinner","COLORS","ImageIcon","FileIcon","FilePdfIcon","TitleMedium","BodySecondary","InputWithVariables","PickerType","text","POD","BodyCaption","Button","UploadIcon","InfoIcon","validateURL","isVariable","BikImageCropper"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),f=require("../../../assets/icons/broken_media_image.svg.js"),E=require("../../../assets/icons/document_pdf.svg.js"),x=require("../../../assets/icons/edit.svg.js"),N=require("../../../assets/icons/refresh.svg.js"),y=require("styled-components"),p=require("../../shimmer-image/ShimmerImage.js"),k=require("../../spinner/Spinner.js"),u=require("../../template-preview/models/TemplateMeta.js"),a=require("../../TypographyStyle.js"),V=require("../../../utils/StringUtils.js"),o=require("../../../constants/Theme.js"),g=require("../context/templateModalContext.js"),l=require("./EditMediaV2.style.js"),j=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},M=j(y),v="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",D=M.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),E=require("../../../assets/icons/broken_media_image.svg.js"),x=require("../../../assets/icons/document_pdf.svg.js"),y=require("../../../assets/icons/edit.svg.js"),N=require("../../../assets/icons/refresh.svg.js"),h=require("styled-components"),p=require("../../shimmer-image/ShimmerImage.js"),D=require("../../spinner/Spinner.js"),u=require("../../template-preview/models/TemplateMeta.js"),r=require("../../TypographyStyle.js"),V=require("../../../utils/StringUtils.js"),t=require("../../../constants/Theme.js"),g=require("../context/templateModalContext.js"),m=require("./EditMediaV2.style.js"),M=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},w=M(h),v="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",k=w.default.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	height: 100%;
-	border-left: 1px solid ${o.COLORS.stroke.primary};
+	border-left: 1px solid ${t.COLORS.stroke.primary};
 	cursor: pointer;
 	display: flex;
 	align-items: center;
-`,U=t=>{const{imageName:r,error:n,isLoading:s,mediaType:i,selectedVariable:c,setOpenEditMedia:m}=t,d=r?.[0].split("/"),b=d?.[d.length-1],{disableEditVariable:h}=g.useTemplateModalContext();return e.jsxDEV(l.Container,{children:[e.jsxDEV(l.ImageContainer,{error:!!n,onClick:()=>m?.(!0),children:n?e.jsxDEV(f.default,{width:56,height:56},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:61,columnNumber:6},void 0):s?e.jsxDEV(k.Spinner,{size:"small"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:63,columnNumber:6},void 0):c?e.jsxDEV(p.ShimmerImage,{imageUrl:v,width:56,height:56},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:65,columnNumber:6},void 0):i===u.HEADER_TYPES.IMAGE?e.jsxDEV(p.ShimmerImage,{imageUrl:r?.[0],width:56,height:56},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:71,columnNumber:6},void 0):i===u.HEADER_TYPES.VIDEO?e.jsxDEV("video",{src:r[0],style:{width:56,height:56},children:e.jsxDEV("track",{default:!0,kind:"captions",srcLang:"en",src:r[0]},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:74,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:73,columnNumber:6},void 0):e.jsxDEV(E.default,{width:18,height:22,color:o.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:77,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:59,columnNumber:4},void 0),e.jsxDEV(l.RightComponent,{children:[e.jsxDEV("div",{style:{flex:n?"unset":1},children:r&&n?e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:91,columnNumber:7},void 0):s?e.jsxDEV(a.BodyCaption,{style:{marginLeft:8},children:"Your media is getting loaded..."},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:93,columnNumber:7},void 0):e.jsxDEV(a.BodySecondary,{style:{color:o.COLORS.content.primary,marginLeft:8},children:c||V.default.toCapitilize(i?.toLowerCase())||b},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:101,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:85,columnNumber:5},void 0),!!n&&e.jsxDEV("div",{style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"},children:[e.jsxDEV(a.BodySecondary,{style:{color:o.COLORS.content.negative},children:["Error loading this ",i?.toLowerCase(),". Retry"]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:123,columnNumber:7},void 0),e.jsxDEV(a.Caption,{style:{color:o.COLORS.content.secondary},children:n},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:126,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:115,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:84,columnNumber:4},void 0),!h&&!s&&e.jsxDEV(D,{onClick:()=>m?.(!0),onKeyDown:()=>m?.(!0),role:"presentation",children:n?e.jsxDEV(N.default,{color:o.COLORS.content.brand,width:24,height:24},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:139,columnNumber:7},void 0):e.jsxDEV(x.default,{width:24,height:24,color:o.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:141,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:133,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:58,columnNumber:3},void 0)};exports.default=U;
+`,U=n=>{const{imageName:i,error:o,isLoading:s,mediaType:a,selectedVariable:d,setOpenEditMedia:l}=n,c=i?.[0].split("/"),b=c?.[c.length-1],{disableEditVariable:f}=g.useTemplateModalContext();return e.jsxDEV(m.Container,{children:[e.jsxDEV(m.ImageContainer,{error:!!o,onClick:()=>l?.(!0),children:o?e.jsxDEV(E.default,{width:56,height:56},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:61,columnNumber:6},void 0):s?e.jsxDEV(D.Spinner,{size:"small"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:63,columnNumber:6},void 0):d?e.jsxDEV(p.ShimmerImage,{imageUrl:v,width:56,height:56},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:65,columnNumber:6},void 0):a===u.HEADER_TYPES.IMAGE?e.jsxDEV(p.ShimmerImage,{imageUrl:i?.[0],width:56,height:56},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:71,columnNumber:6},void 0):a===u.HEADER_TYPES.VIDEO?e.jsxDEV("video",{src:i[0],style:{width:56,height:56},children:e.jsxDEV("track",{default:!0,kind:"captions",srcLang:"en",src:i[0]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:74,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:73,columnNumber:6},void 0):e.jsxDEV(x.default,{width:18,height:22,color:t.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:77,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:59,columnNumber:4},void 0),e.jsxDEV(m.RightComponent,{children:[e.jsxDEV("div",{style:{flex:o?"unset":1},children:i&&o?e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:91,columnNumber:7},void 0):s?e.jsxDEV(r.BodyCaption,{style:{marginLeft:8},children:"Your media is getting loaded..."},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:93,columnNumber:7},void 0):e.jsxDEV(r.BodySecondary,{style:{color:t.COLORS.content.primary,marginLeft:8},children:d||V.default.toCapitilize(a?.toLowerCase())||b},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:101,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:85,columnNumber:5},void 0),!!o&&e.jsxDEV("div",{style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"},children:[e.jsxDEV(r.BodySecondary,{style:{color:t.COLORS.content.negative},children:["Error loading this ",a?.toLowerCase(),". Retry"]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:123,columnNumber:7},void 0),e.jsxDEV(r.Caption,{style:{color:t.COLORS.content.secondary},children:o},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:126,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:115,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:84,columnNumber:4},void 0),!f&&!s&&e.jsxDEV(k,{onClick:()=>l?.(!0),onKeyDown:()=>l?.(!0),role:"presentation",children:o?e.jsxDEV(N.default,{color:t.COLORS.content.brand,width:24,height:24},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:139,columnNumber:7},void 0):e.jsxDEV(y.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/EditMediaV2.tsx",lineNumber:141,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:133,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaV2.tsx",lineNumber:58,columnNumber:3},void 0)};exports.default=U;
 //# sourceMappingURL=EditMediaV2.js.map