@bikdotai/bik-component-library 0.0.686 → 0.0.687-beta.1

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

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import o from"../../../assets/icons/arrow_back.svg.js";import a from"../../../assets/icons/info.svg.js";import"../../curtain/CurtainHelper.js";import{PickerType as r}from"../../variable-picker-v3/model.js";import{useState as s,useEffect as l}from"react";import{Button as n}from"../../button/Button.js";import{BikImageCropper as p}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import{PureSpinner as d}from"../../spinner/Spinner.js";import{InputWithVariables as m}from"../../input-with-vars/InputWithVariables.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as c,COLORS as g}from"../../../constants/Theme.js";import{HEADER_TYPES as h}from"../../template-preview/models/TemplateMeta.js";import{POD as u}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{TitleRegular as f,TitleMedium as v,BodySecondary as b,BodyCaption as j}from"../../TypographyStyle.js";import{validateURL as y}from"../../../utils/validator.js";import x from"../../../assets/icons/file.svg.js";import C from"../../../assets/icons/filePdf.svg.js";import I from"../../../assets/icons/image.svg.js";import M from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as w}from"../context/templateModalContext.js";import{isVariable as k}from"../utils/validateIsUrl.js";const E=E=>{let{setOpenEditMedia:O,mediaComponentFormat:A,variableListForImage:V,openEditMedia:T,uploadMedia:B,fileRef:D,useEditWhatsappTemplateMediaResponse:P,skipAddVariable:U}=E;const{pod:L,setHideCrossButton:G,setHideFooterButton:R}=w(),[W,S]=s(""),[H,$]=s(void 0),[F,_]=s(!1),[z,N]=s("");let q;if(l((()=>(R(!0),()=>{R(!1)})),[]),l((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&$(e)}),[P.loading]),q=A===h.IMAGE?"image/png, image/jpeg":A===h.VIDEO?"video/mp4":"application/pdf",!T)return e(t,{});const J=()=>A===h.IMAGE?"Image":A===h.VIDEO?"Video":"Document";return i(t,{children:[i("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e(o,{onClick:e=>{e.stopPropagation(),O(!1),S("")},style:{cursor:"pointer"},width:16,height:16}),e(f,{children:"Update Media"})]})),i("div",Object.assign({style:{position:"relative",padding:16,borderRadius:4,border:F?`1px dashed ${c.colorsV2.stroke.negative.vibrant}`:`1px dashed ${c.colorsV2.stroke.primary}`,backgroundColor:c.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:P.loading?"flex":"initial"}},{children:[i("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[P.loading?e(d,{width:"40px",height:"40px",color:g.content.brand}):e("div",Object.assign({style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:c.colorsV2.background.base}},{children:A===h.IMAGE?e(I,{width:40,height:40}):A===h.VIDEO?e(x,{width:40,height:40}):e(C,{width:40,height:40})})),e(v,{children:P.loading?"Upload in progress...":A===h.IMAGE?"Upload an image":A===h.VIDEO?"Upload a video":"Upload a document"}),e(b,Object.assign({color:g.content.secondary},{children:P.loading?`Your ${A.toLowerCase()} is getting loaded. This may take a couple of minutes.`:A===h.IMAGE?"JPEG/ PNG format • Max 5MB":A===h.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!P.loading&&i(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:e(m,{labelText:`${J()} URL`,onPickerToggle:e=>{G(!!e)},pickerType:r.EMBEDDED,portalElement:null!=H?H:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{N(e.actualValue),_(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:W,prevVariable:{actualValue:"",variableType:"string"},variablesList:V,placeHolder:U?"Enter URL":"Enter URL/Add variable",showAddButton:L!==u.CAMPAIGN||!U&&A===h.IMAGE})})),i("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(j,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(n,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:M,onClick:()=>{B(),_(!1)},size:"medium"})}))]}),F&&i("div",Object.assign({style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4}},{children:[e(a,{width:16,height:16,color:g.content.negative}),e(j,Object.assign({style:{color:g.content.negative}},{children:`Select ${J()}`}))]}))]})),!P.loading&&e("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",marginTop:8}},{children:e(n,{buttonText:`Add ${J()}`,onClick:()=>{z?y(z)||k(z)?(B(z),O(!1),S(""),_(!1)):S("Enter valid URL"):_(!0)}})})),e("input",{ref:D,style:{display:"none"},type:"file",onChange:P.handleImageUpload,accept:q}),!!P.selectedImage&&e(p,{aspectRatio:15/8,src:P.selectedImage,onCropComplete:P.onCropComplete,onCancel:()=>{P.setLoading(!1),P.setSelectedImage(""),D.current&&(D.current.value="")}})]})};export{E as default};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import i from"../../../assets/icons/arrow_back.svg.js";import a from"../../../assets/icons/info.svg.js";import"../../curtain/CurtainHelper.js";import{PickerType as r}from"../../variable-picker-v3/model.js";import{useState as s,useEffect as l}from"react";import{Button as n}from"../../button/Button.js";import{BikImageCropper as p}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import{DEFAULT_THEME as d,COLORS as m}from"../../../constants/Theme.js";import{PureSpinner as c}from"../../spinner/Spinner.js";import{TitleRegular as g,TitleMedium as h,BodySecondary as u,BodyCaption as f}from"../../TypographyStyle.js";import"../../states/StateComponent.styled.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import{InputWithVariables as v}from"../../input-with-vars/InputWithVariables.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{HEADER_TYPES as y}from"../../template-preview/models/TemplateMeta.js";import{POD as x}from"../../template-preview/models/WhatsAppTemplate.js";import{validateURL as b}from"../../../utils/validator.js";import j from"../../../assets/icons/file.svg.js";import C from"../../../assets/icons/filePdf.svg.js";import I from"../../../assets/icons/image.svg.js";import M from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as w}from"../context/templateModalContext.js";import{isVariable as k}from"../utils/validateIsUrl.js";const E=E=>{let{setOpenEditMedia:A,mediaComponentFormat:V,variableListForImage:T,openEditMedia:B,uploadMedia:D,fileRef:P,useEditWhatsappTemplateMediaResponse:U,skipAddVariable:L}=E;const{pod:G,setHideCrossButton:R,setHideFooterButton:W}=w(),[O,S]=s(""),[H,$]=s(void 0),[F,z]=s(!1),[N,q]=s("");let J;if(l((()=>(W(!0),()=>{W(!1)})),[]),l((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&$(e)}),[U.loading]),J=V===y.IMAGE?"image/png, image/jpeg":V===y.VIDEO?"video/mp4":"application/pdf",!B)return e(t,{});const Y=()=>V===y.IMAGE?"Image":V===y.VIDEO?"Video":"Document";return o(t,{children:[o("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e(i,{onClick:e=>{e.stopPropagation(),A(!1),S("")},style:{cursor:"pointer"},width:16,height:16}),e(g,{children:"Update Media"})]}),o("div",{style:{position:"relative",padding:16,borderRadius:4,border:F?`1px dashed ${d.colorsV2.stroke.negative.vibrant}`:`1px dashed ${d.colorsV2.stroke.primary}`,backgroundColor:d.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:U.loading?"flex":"initial"},children:[o("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[U.loading?e(c,{width:"40px",height:"40px",color:m.content.brand}):e("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:d.colorsV2.background.base},children:V===y.IMAGE?e(I,{width:40,height:40}):V===y.VIDEO?e(j,{width:40,height:40}):e(C,{width:40,height:40})}),e(h,{children:U.loading?"Upload in progress...":V===y.IMAGE?"Upload an image":V===y.VIDEO?"Upload a video":"Upload a document"}),e(u,{color:m.content.secondary,children:U.loading?`Your ${V.toLowerCase()} is getting loaded. This may take a couple of minutes.`:V===y.IMAGE?"JPEG/ PNG format • Max 5MB":V===y.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"})]}),!U.loading&&o(t,{children:[e("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e(v,{labelText:`${Y()} URL`,onPickerToggle:e=>{R(!!e)},pickerType:r.EMBEDDED,portalElement:null!=H?H:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{q(e.actualValue),z(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:O,prevVariable:{actualValue:"",variableType:"string"},variablesList:T,placeHolder:L?"Enter URL":"Enter URL/Add variable",showAddButton:G!==x.CAMPAIGN||!L&&V===y.IMAGE})}),o("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(f,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]}),e("div",{style:{display:"flex",width:"100%"},children:e(n,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:M,onClick:()=>{D(),z(!1)},size:"medium"})})]}),F&&o("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e(a,{width:16,height:16,color:m.content.negative}),e(f,{style:{color:m.content.negative},children:`Select ${Y()}`})]})]}),!U.loading&&e("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e(n,{buttonText:`Add ${Y()}`,onClick:()=>{N?b(N)||k(N)?(D(N),A(!1),S(""),z(!1)):S("Enter valid URL"):z(!0)}})}),e("input",{ref:P,style:{display:"none"},type:"file",onChange:U.handleImageUpload,accept:J}),!!U.selectedImage&&e(p,{aspectRatio:15/8,src:U.selectedImage,onCropComplete:U.onCropComplete,onCancel:()=>{U.setLoading(!1),U.setSelectedImage(""),P.current&&(P.current.value="")}})]})};export{E as default};

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import o from"../../../assets/icons/broken_media_image.svg.js";import r from"../../../assets/icons/document_pdf.svg.js";import s from"../../../assets/icons/edit.svg.js";import n from"../../../assets/icons/refresh.svg.js";import l from"styled-components";import{ShimmerImage as a}from"../../shimmer-image/ShimmerImage.js";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as c}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as m,BodySecondary as p,Caption as g}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as f}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{Container as j,ImageContainer as y,RightComponent as u}from"./EditMediaV2.style.js";const v=l.div`
+import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import o from"../../../assets/icons/broken_media_image.svg.js";import r from"../../../assets/icons/document_pdf.svg.js";import l from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"styled-components";import{ShimmerImage as a}from"../../shimmer-image/ShimmerImage.js";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as m}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as c,BodySecondary as p,Caption as h}from"../../TypographyStyle.js";import g from"../../../utils/StringUtils.js";import{COLORS as f}from"../../../constants/Theme.js";import{useTemplateModalContext as y}from"../context/templateModalContext.js";import{Container as u,ImageContainer as v,RightComponent as b}from"./EditMediaV2.style.js";const j=n.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	height: 100%;
@@ -6,4 +6,4 @@ import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import o from"..
 	cursor: pointer;
 	display: flex;
 	align-items: center;
-`,x=l=>{const{imageName:x,error:w,isLoading:O,mediaType:k,selectedVariable:L,setOpenEditMedia:C}=l,E=null==x?void 0:x[0].split("/"),M=null==E?void 0:E[E.length-1],{disableEditVariable:S}=b();return e(j,{children:[i(y,Object.assign({error:!!w,onClick:()=>null==C?void 0:C(!0)},{children:w?i(o,{width:56,height:56}):O?i(d,{size:"small"}):L?i(a,{imageUrl:"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",width:56,height:56}):k===c.IMAGE?i(a,{imageUrl:null==x?void 0:x[0],width:56,height:56}):k===c.VIDEO?i("video",Object.assign({src:x[0],style:{width:56,height:56}},{children:i("track",{default:!0,kind:"captions",srcLang:"en",src:x[0]})})):i(r,{width:18,height:22,color:f.content.placeholder})})),e(u,{children:[i("div",Object.assign({style:{flex:w?"unset":1}},{children:x&&w?i(t,{}):O?i(m,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):i(p,Object.assign({style:{color:f.content.primary,marginLeft:8}},{children:L||h.toCapitilize(null==k?void 0:k.toLowerCase())||M}))})),!!w&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"}},{children:[e(p,Object.assign({style:{color:f.content.negative}},{children:["Error loading this ",null==k?void 0:k.toLowerCase(),". Retry"]})),i(g,Object.assign({style:{color:f.content.secondary}},{children:w}))]}))]}),!S&&!O&&i(v,Object.assign({onClick:()=>null==C?void 0:C(!0),onKeyDown:()=>null==C?void 0:C(!0),role:"presentation"},{children:w?i(n,{color:f.content.brand,width:24,height:24}):i(s,{width:24,height:24,color:f.content.placeholder})}))]})};export{x as default};
+`,x=n=>{const{imageName:x,error:w,isLoading:k,mediaType:L,selectedVariable:C,setOpenEditMedia:E}=n,M=null==x?void 0:x[0].split("/"),S=null==M?void 0:M[M.length-1],{disableEditVariable:T}=y();return e(u,{children:[i(v,{error:!!w,onClick:()=>null==E?void 0:E(!0),children:w?i(o,{width:56,height:56}):k?i(d,{size:"small"}):C?i(a,{imageUrl:"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",width:56,height:56}):L===m.IMAGE?i(a,{imageUrl:null==x?void 0:x[0],width:56,height:56}):L===m.VIDEO?i("video",{src:x[0],style:{width:56,height:56},children:i("track",{default:!0,kind:"captions",srcLang:"en",src:x[0]})}):i(r,{width:18,height:22,color:f.content.placeholder})}),e(b,{children:[i("div",{style:{flex:w?"unset":1},children:x&&w?i(t,{}):k?i(c,{style:{marginLeft:8},children:"Your media is getting loaded..."}):i(p,{style:{color:f.content.primary,marginLeft:8},children:C||g.toCapitilize(null==L?void 0:L.toLowerCase())||S})}),!!w&&e("div",{style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"},children:[e(p,{style:{color:f.content.negative},children:["Error loading this ",null==L?void 0:L.toLowerCase(),". Retry"]}),i(h,{style:{color:f.content.secondary},children:w})]})]}),!T&&!k&&i(j,{onClick:()=>null==E?void 0:E(!0),onKeyDown:()=>null==E?void 0:E(!0),role:"presentation",children:w?i(s,{color:f.content.brand,width:24,height:24}):i(l,{width:24,height:24,color:f.content.placeholder})})]})};export{x as default};

package/dist/esm/components/template-context-mapper/modalElements/EditWebpushTemplate.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{cloneDeep as a}from"lodash";import{useState as n,useEffect as o,useMemo as l,useRef as r}from"react";import{Input as s}from"../../input/Input.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";const E=E=>{let{template:j,onTemplateChange:V,whatsappSpecificPickerMeta:x,showVariableModal:L}=E;var y,w,I;const[O,k]=n(null),[B,R]=n(null),{variableList:A,disableEditVariable:U,originalVariableList:W,setOriginalVariableList:F}=m(),{processWebpushTemplate:H,isValidUrl:D}=u(),[P,S]=n(null),[G,N]=n(null),[$,K]=n(null);o((()=>{A&&H(j,A,W,U).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;k(t),null==F||F(t),null==V||V(Object.assign({},i)),R(a)}))}),[A,U]);const{descriptionComponents:q,bodyVariables:z,titleVariables:J}=l((()=>{if(O&&B){const e=c(B,O);return P||S(e.iconImage),G||N(e.bannerImage),$||K(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[O,B]),{uploadMediaLink:Q,uploadMediaFiles:X,validateMimeType:Y}=x,Z=r(null),_=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"icon"),validateMimeType:Y,mediaComponent:P,fileRef:Z}),ee=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"image"),validateMimeType:Y,mediaComponent:G,fileRef:Z});function te(e,t){const i=Object.assign({},j),n=a(i);"icon"===t?(n.webpushBroadcastConfig.icon=[e],S([e])):"image"===t&&(n.webpushBroadcastConfig.image=[e],N([e])),null==V||V(Object.assign({},n))}function ie(e,t,i){var n;const o=Object.assign({},j),l=a(o),r="custom"===t&&"string"==typeof e,s=null===(n=null==l?void 0:l.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(s&&s.length>0){s[i]=r?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:s});l.webpushBroadcastConfig=t}null==V||V(l)}const ae=_.openEditMedia?_:ee.openEditMedia?ee:null;if(ae)return e(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(h,{mediaComponentFormat:p.IMAGE,uploadMedia:ae.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:ae,setOpenEditMedia:ae.setOpenEditMedia,openEditMedia:ae.openEditMedia,editIconRef:ae.editIconRef,fileRef:Z,skipAddVariable:!0})}));return t(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[P&&P.length?e(g,{children:e(b,{imageName:P,handleImageChange:_.handleImageChange,mediaType:p.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,G&&G.length?e(g,{children:e(b,{imageName:G,handleImageChange:ee.handleImageChange,mediaType:p.IMAGE,error:ee.error,isLoading:ee.loading,setOpenEditMedia:ee.setOpenEditMedia})}):null,(null==z?void 0:z.length)||(null==J?void 0:J.length)?e(C,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==q?void 0:q.map(((t,i)=>e(v,{originalVariableList:O,originalList:W,channel:d.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:L},i))),$&&$.length?e("div",Object.assign({style:{padding:"16px 14px"}},{children:e(s,{labelText:"Redirection Link",id:"redirection-link",value:$[0].replace("https://",""),errorMessage:D($[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:U?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var t;const i=`https://${e}`;K([i]);const n=a(j);(null===(t=n.webpushBroadcastConfig)||void 0===t?void 0:t.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[i]),null==V||V(Object.assign({},n))}(e)}})})):e(i,{}),(null===(w=null===(y=null==O?void 0:O.buttons)||void 0===y?void 0:y.filter((e=>"URL"===e.type)))||void 0===w?void 0:w.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==O?void 0:O.buttons)||void 0===I?void 0:I.map(((t,i)=>e(T,{variableListIndex:i,CTAoptions:null==x?void 0:x.CTAoptions,button:t,currentVariableList:O,updateSelectedURLTemplateBtn:ie},`${i}`)))]}))};export{E as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{cloneDeep as a}from"lodash";import{useState as o,useEffect as n,useMemo as l,useRef as r}from"react";import{Input as d}from"../../input/Input.js";import{CHANNEL_TYPE as p}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";var y=Object.defineProperty,E=Object.defineProperties,V=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,x=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable,j=(e,t,i)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,I=(e,t)=>{for(var i in t||(t={}))x.call(t,i)&&j(e,i,t[i]);if(w)for(var i of w(t))L.call(t,i)&&j(e,i,t[i]);return e};const O=y=>{let{template:w,onTemplateChange:x,whatsappSpecificPickerMeta:L,showVariableModal:j}=y;var O,k,B;const[R,A]=o(null),[P,U]=o(null),{variableList:W,disableEditVariable:F,originalVariableList:H,setOriginalVariableList:D}=m(),{processWebpushTemplate:S,isValidUrl:G}=u(),[N,$]=o(null),[K,q]=o(null),[z,J]=o(null);n((()=>{W&&S(w,W,H,F).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;A(t),null==D||D(t),null==x||x(I({},i)),U(a)}))}),[W,F]);const{descriptionComponents:Q,bodyVariables:X,titleVariables:Y}=l((()=>{if(R&&P){const e=c(P,R);return N||$(e.iconImage),K||q(e.bannerImage),z||J(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[R,P]),{uploadMediaLink:Z,uploadMediaFiles:_,validateMimeType:ee}=L,te=r(null),ie=f({uploadMediaLink:Z,uploadMediaFiles:_,updateTemplateImageUrl:e=>oe(e,"icon"),validateMimeType:ee,mediaComponent:N,fileRef:te}),ae=f({uploadMediaLink:Z,uploadMediaFiles:_,updateTemplateImageUrl:e=>oe(e,"image"),validateMimeType:ee,mediaComponent:K,fileRef:te});function oe(e,t){const i=I({},w),o=a(i);"icon"===t?(o.webpushBroadcastConfig.icon=[e],$([e])):"image"===t&&(o.webpushBroadcastConfig.image=[e],q([e])),null==x||x(I({},o))}function ne(e,t,i){var o;const n=I({},w),l=a(n),r="custom"===t&&"string"==typeof e,d=null==(o=null==l?void 0:l.webpushBroadcastConfig)?void 0:o.buttons;if(d&&d.length>0){d[i]=r?e:"string"!=typeof e?e.placeHolder:"";const t=(p=I({},l.webpushBroadcastConfig),E(p,V({buttons:d})));l.webpushBroadcastConfig=t}var p;null==x||x(l)}const le=ie.openEditMedia?ie:ae.openEditMedia?ae:null;if(le)return e(M,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(h,{mediaComponentFormat:s.IMAGE,uploadMedia:le.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:le,setOpenEditMedia:le.setOpenEditMedia,openEditMedia:le.openEditMedia,editIconRef:le.editIconRef,fileRef:te,skipAddVariable:!0})});return t(M,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"},children:[N&&N.length?e(g,{children:e(b,{imageName:N,handleImageChange:ie.handleImageChange,mediaType:s.IMAGE,error:ie.error,isLoading:ie.loading,setOpenEditMedia:ie.setOpenEditMedia})}):null,K&&K.length?e(g,{children:e(b,{imageName:K,handleImageChange:ae.handleImageChange,mediaType:s.IMAGE,error:ae.error,isLoading:ae.loading,setOpenEditMedia:ae.setOpenEditMedia})}):null,(null==X?void 0:X.length)||(null==Y?void 0:Y.length)?e(C,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==Q?void 0:Q.map(((t,i)=>e(v,{originalVariableList:R,originalList:H,channel:p.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:j},i))),z&&z.length?e("div",{style:{padding:"16px 14px"},children:e(d,{labelText:"Redirection Link",id:"redirection-link",value:z[0].replace("https://",""),errorMessage:G(z[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:F?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var t;const i=`https://${e}`;J([i]);const o=a(w);(null==(t=o.webpushBroadcastConfig)?void 0:t.redirectionLink)&&(o.webpushBroadcastConfig.redirectionLink=[i]),null==x||x(I({},o))}(e)}})}):e(i,{}),(null==(k=null==(O=null==R?void 0:R.buttons)?void 0:O.filter((e=>"URL"===e.type)))?void 0:k.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null==(B=null==R?void 0:R.buttons)?void 0:B.map(((t,i)=>e(T,{variableListIndex:i,CTAoptions:null==L?void 0:L.CTAoptions,button:t,currentVariableList:R,updateSelectedURLTemplateBtn:ne},`${i}`)))]})};export{O as default};

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import"../../../node_modules/@bikdotai/bik-models/growth/models/bik-store.js";import o from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import n from"../../../assets/icons/chevronRight.svg.js";import r from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as d,useEffect as s}from"react";import{Button as c}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import{ProductPickerModal as u}from"../../product-picker-v2/modal.js";import{ScreenName as m}from"../../product-picker-v2/type.js";import{Badge as v}from"../Badge/index.js";import{useTemplateModalContext as h}from"../context/templateModalContext.js";import g from"./EditWhatsAppTemplateV2.js";import{ProductBox as f}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as y}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{isRCSChannel as j}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleMedium as x,TitleRegular as C,BodySecondary as I,BodyCaption as k}from"../../TypographyStyle.js";import{__exports as w}from"../../../_virtual/bik-store.js";const O=O=>{let{template:P,whatsappSpecificPickerMeta:T,showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}=O;var A,M,V,D,F,R,W,_;const{selectedCarouselIndex:$,setTemplate:q,pickerConf:N,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:K,setCarouselProducts:J,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,setVariableCallback:ee,setShowVariablePicker:te,sliderRef:le}=h(),[oe,ie]=d(j(null==P?void 0:P.channel)?"Carousel Cards":-1==$?"First Message (Step 1/2)":z?"Product Carousel "+((null===(M=null===(A=null==P?void 0:P.mapping)||void 0===A?void 0:A.body)||void 0===M?void 0:M.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(D=null===(V=null==P?void 0:P.mapping)||void 0===V?void 0:V.body)||void 0===D?void 0:D.length)?"(Step 2/2)":"")),[ne,re]=d(!1),[ae,de]=d(!1),se=$===(null!=H?H:-1)-1,ce=(null!=$?$:-1)<1;s((()=>{var e,t,l,o;ie(j(null==P?void 0:P.channel)?"Carousel Cards":-1==$?"First Message (Step 1/2)":z?"Product Carousel "+((null===(t=null===(e=null==P?void 0:P.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(l=null==P?void 0:P.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[$]);const pe=e=>{null==J||J([{name:"variable",productName:e.actualValue}])};return s((()=>{-1===$&&j(null==P?void 0:P.channel)&&(null==Z||Z(0))}),[$,null==P?void 0:P.channel]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!j(null==P?void 0:P.channel)&&null!=$&&$>=0&&!!(null===(R=null===(F=null==P?void 0:P.mapping)||void 0===F?void 0:F.body)||void 0===R?void 0:R.length)&&t(p,{Icon:o,onClick:()=>{null==Z||Z(-1)}}),t(x,Object.assign({style:{marginLeft:10}},{children:oe}))]})),z&&(null!==(W=null==K?void 0:K.length)&&void 0!==W?W:0)>0&&null!=$&&$>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(f,{editItem:()=>{1===(null==K?void 0:K.length)&&"variable"===K[0].name?(ee((()=>pe)),te(!0)):re(!ne)},cardBody:1===(null==K?void 0:K.length)&&"variable"===K[0].name?`${K[0].productName}`:`${null==K?void 0:K.length} Products Selected`,hideIcon:1===(null==K?void 0:K.length)&&"variable"===K[0].name,deleteItem:()=>{var e;if(1===(null==K?void 0:K.length)&&"variable"===K[0].name)return void(null==J||J([]));const t=a(Object.assign({},P));t&&(U&&U.length>0?null==U||U.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!==(o=U[l])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==q||q(t)),null==J||J([]),null==Y||Y()}}),K&&(null==K?void 0:K.length)>0&&"variable"!=K[0].name&&t(c,{disabled:(null!==(_=null==K?void 0:K.length)&&void 0!==_?_:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{de(!0),re(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==K?void 0:K.length)&&null!=$&&$>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(C,{children:"Product(s)"}),t(I,{children:`Select ${null!=H?H:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:Q?16:12,marginRight:Q?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(c,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${y.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(r,{width:18,height:18,color:y.content.secondary})})),onClick:e=>{re(!0)}}),G===b.CHATBOT&&e(l,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(k,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(c,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${y.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(r,{width:18,height:18,color:y.content.secondary})})),onClick:e=>{ee((()=>pe)),te(!0)}})]})]})),Q&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(v,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=$?$:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:y.surface.hovered,alignItems:"center"}},{children:[t(p,{Icon:i,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:y.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickPrev(),(null!=$?$:-1)<1||null==Z||Z((e=>e-1))}}),t(C,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:y.content.secondary},{children:`Card ${(null!=$?$:0)+1}/${H}`})),t(p,{Icon:n,width:8,height:14,disabled:se,svgStyle:se?{}:{color:y.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickNext(),(null!=$?$:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),t(g,{whatsappSpecificPickerMeta:T,template:P,onTemplateChange:e=>{null==q||q(e)},showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}),ne&&N&&t(u,{zIndex:200,startupScreen:ae?m.RearrangeProducts:m.Collections,rearrangeEnabled:!0,storeId:N.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[i]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=K?K:[]),collectionFetcher:N.fetchCollections,productFetcher:N.fetchProducts,onAdd:(e,t)=>{var l,o,i,n,r,d;de(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const a=e[t].products;if(void 0!==a&&Object.keys(a).length)for(const e of Object.keys(a)){const c=a[e].variants;if(void 0!==c&&Object.keys(c).length)for(const p of Object.keys(c)){const{name:u,image:m,quantity:v,displayOrder:h}=c[p],g={name:u,image:null!==(o=null!=m?m:null===(l=a[e])||void 0===l?void 0:l.image)&&void 0!==o?o:"",quantity:v,variantId:p,productId:e,displayOrder:h,collectionId:t,productName:null!==(n=null===(i=a[e])||void 0===i?void 0:i.name)&&void 0!==n?n:"",productImage:null!==(d=null===(r=a[e])||void 0===r?void 0:r.image)&&void 0!==d?d:""};s.push(g)}}}const c=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),p=s.map((e=>e.image)),u=a(Object.assign({},P));u&&(p.forEach(((e,t)=>{var l;u.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==U?void 0:U[t])&&void 0!==l?l:""]})),null==q||q(u)),null==J||J(c),re(!1)},searchInCollectionFetcher:N.searchInCollection,searchFetcher:N.searchProducts,visible:ne,onClose:()=>{re(!1)},exactLimit:null!=H?H:1,appType:N.appType||w.ApplicationType.BIK})]}))};export{O as default};
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import"../../../node_modules/@bikdotai/bik-models/growth/models/bik-store.js";import o from"../../../assets/icons/arrow_back.svg.js";import n from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import i from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as d,useEffect as s}from"react";import{Button as c}from"../../button/Button.js";import{IconButton as u}from"../../icon-button/IconButton.js";import{ProductPickerModal as p}from"../../product-picker-v2/modal.js";import{ScreenName as m}from"../../product-picker-v2/type.js";import{Badge as h}from"../Badge/index.js";import{useTemplateModalContext as v}from"../context/templateModalContext.js";import g from"./EditWhatsAppTemplateV2.js";import{ProductBox as y}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as f}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import{isRCSChannel as x}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleMedium as C,TitleRegular as I,BodySecondary as j,BodyCaption as w}from"../../TypographyStyle.js";import{__exports as k}from"../../../_virtual/bik-store.js";var P=Object.defineProperty,T=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,E=(e,t,l)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,L=(e,t)=>{for(var l in t||(t={}))S.call(t,l)&&E(e,l,t[l]);if(T)for(var l of T(t))O.call(t,l)&&E(e,l,t[l]);return e};var B=P=>{let{template:T,whatsappSpecificPickerMeta:S,showVariableModal:O,variableListForImage:E,discountCode:B,setDiscountCode:A}=P;var V,D,F,M,R,W,_,$;const{selectedCarouselIndex:q,setTemplate:N,pickerConf:z,isProductCarouselType:G,pod:H,cardCount:K,carouselProducts:J,setCarouselProducts:Q,isError:U,cardImages:X,disableEditVariable:Y,onDeleteSelectedProducts:Z,setSelectedCarouselIndex:ee,setVariableCallback:te,setShowVariablePicker:le,sliderRef:oe}=v(),[ne,re]=d(x(null==T?void 0:T.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":G?"Product Carousel "+((null==(D=null==(V=null==T?void 0:T.mapping)?void 0:V.body)?void 0:D.length)?"(Step 2/2)":""):"Carousel Cards "+((null==(M=null==(F=null==T?void 0:T.mapping)?void 0:F.body)?void 0:M.length)?"(Step 2/2)":"")),[ie,ae]=d(!1),[de,se]=d(!1),ce=q===(null!=K?K:-1)-1,ue=(null!=q?q:-1)<1;s((()=>{var e,t,l,o;re(x(null==T?void 0:T.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":G?"Product Carousel "+((null==(t=null==(e=null==T?void 0:T.mapping)?void 0:e.body)?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null==(o=null==(l=null==T?void 0:T.mapping)?void 0:l.body)?void 0:o.length)?"(Step 2/2)":""))}),[q]);const pe=e=>{null==Q||Q([{name:"variable",productName:e.actualValue}])};return s((()=>{-1===q&&x(null==T?void 0:T.channel)&&(null==ee||ee(0))}),[q,null==T?void 0:T.channel]),e("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[!x(null==T?void 0:T.channel)&&null!=q&&q>=0&&!!(null==(W=null==(R=null==T?void 0:T.mapping)?void 0:R.body)?void 0:W.length)&&t(u,{Icon:o,onClick:()=>{null==ee||ee(-1)}}),t(C,{style:{marginLeft:10},children:ne})]}),G&&(null!=(_=null==J?void 0:J.length)?_:0)>0&&null!=q&&q>=0&&e("div",{style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"},children:[t(y,{editItem:()=>{1===(null==J?void 0:J.length)&&"variable"===J[0].name?(te((()=>pe)),le(!0)):ae(!ie)},cardBody:1===(null==J?void 0:J.length)&&"variable"===J[0].name?`${J[0].productName}`:`${null==J?void 0:J.length} Products Selected`,hideIcon:1===(null==J?void 0:J.length)&&"variable"===J[0].name,deleteItem:()=>{var e;if(1===(null==J?void 0:J.length)&&"variable"===J[0].name)return void(null==Q||Q([]));const t=a(L({},T));t&&(X&&X.length>0?null==X||X.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!=(o=X[l])?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null==(e=null==t?void 0:t.components[1].cards)||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==N||N(t)),null==Q||Q([]),null==Z||Z()}}),J&&(null==J?void 0:J.length)>0&&"variable"!=J[0].name&&t(c,{disabled:(null!=($=null==J?void 0:J.length)?$:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{se(!0),ae(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]}),!Y&&G&&0===(null==J?void 0:J.length)&&null!=q&&q>=0&&e(l,{children:[e("div",{style:{marginLeft:12},children:[t(I,{children:"Product(s)"}),t(j,{children:`Select ${null!=K?K:1} products`})]}),e("div",{style:{marginTop:16,marginBottom:16,marginLeft:U?16:12,marginRight:U?16:12,flexDirection:"column",display:"flex",alignItems:"center"},children:[t(c,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:U?`2px dashed ${f.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:U?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",{style:{display:"flex",width:18,height:18},children:t(i,{width:18,height:18,color:f.content.secondary})}),onClick:e=>{ae(!0)}}),H===b.CHATBOT&&e(l,{children:[e("div",{style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"},children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(w,{style:{color:"#616161",overflow:"unset"},children:"OR"}),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]}),t(c,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:U?`2px dashed ${f.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:U?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",{style:{display:"flex"},children:t(i,{width:18,height:18,color:f.content.secondary})}),onClick:e=>{te((()=>pe)),le(!0)}})]})]}),U&&t("div",{style:{marginLeft:10,marginBottom:16},children:t(h,{padding:"8px",errorText:"Please add products"})})]}),!G&&(null!=q?q:-1)>-1&&e("div",{style:{display:"flex",background:f.surface.hovered,alignItems:"center"},children:[t(u,{Icon:n,disabled:ue,width:8,height:14,svgStyle:ue?{}:{color:f.content.secondary},onClick:()=>{var e;null==(e=null==oe?void 0:oe.current)||e.slickPrev(),(null!=q?q:-1)<1||null==ee||ee((e=>e-1))}}),t(I,{style:{flex:1,display:"flex",justifyContent:"center"},color:f.content.secondary,children:`Card ${(null!=q?q:0)+1}/${K}`}),t(u,{Icon:r,width:8,height:14,disabled:ce,svgStyle:ce?{}:{color:f.content.secondary},onClick:()=>{var e;null==(e=null==oe?void 0:oe.current)||e.slickNext(),(null!=q?q:-1)>=(null!=K?K:-1)-1||null==ee||ee((e=>e+1))}})]}),t(g,{whatsappSpecificPickerMeta:S,template:T,onTemplateChange:e=>{null==N||N(e)},showVariableModal:O,variableListForImage:E,discountCode:B,setDiscountCode:A}),ie&&z&&t(p,{zIndex:200,startupScreen:de?m.RearrangeProducts:m.Collections,rearrangeEnabled:!0,storeId:z.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,n=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[n]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=J?J:[]),collectionFetcher:z.fetchCollections,productFetcher:z.fetchProducts,onAdd:(e,t)=>{var l,o,n,r,i,d;se(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const a=e[t].products;if(void 0!==a&&Object.keys(a).length)for(const e of Object.keys(a)){const c=a[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:h,displayOrder:v}=c[u],g={name:p,image:null!=(o=null!=m?m:null==(l=a[e])?void 0:l.image)?o:"",quantity:h,variantId:u,productId:e,displayOrder:v,collectionId:t,productName:null!=(r=null==(n=a[e])?void 0:n.name)?r:"",productImage:null!=(d=null==(i=a[e])?void 0:i.image)?d:""};s.push(g)}}}const c=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=s.map((e=>e.image)),p=a(L({},T));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!=(l=null==X?void 0:X[t])?l:""]})),null==N||N(p)),null==Q||Q(c),ae(!1)},searchInCollectionFetcher:z.searchInCollection,searchFetcher:z.searchProducts,visible:ie,onClose:()=>{ae(!1)},exactLimit:null!=K?K:1,appType:z.appType||k.ApplicationType.BIK})]})};export{B as default};

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js

@@ -1,7 +1,7 @@
-import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as t}from"../../variable-picker-v3/model.js";import{cloneDeep as i}from"lodash";import{useRef as l,useState as a,useEffect as s}from"react";import d from"styled-components";import{Input as r}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as c}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as v}from"../../template-preview/models/TemplateMeta.js";import{POD as m}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as g}from"../utils/constants.js";import{getAllDataFromTemplateComponent as h}from"../utils/getDataFromTemplateComponent.js";import{isVariable as f}from"../utils/validateIsUrl.js";import{validateInputName as j,validateInputNameChatbot as C}from"../utils/validateName.js";import{BackTrackComponent as O}from"./BackTrackComponent.js";import{DiscountCodeComponent as T}from"./DiscountCodeComponent.js";import x from"./EditMediaModal.js";import y from"./EditMediaV2.js";import{EditTemplateMediaContainer as V}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as E}from"./useEditWhtasappTemplateMedia.js";import B from"./VariableConnector.js";import{Container as M}from"./VariableConnectorsPanel.js";import k from"./VariableConnectorWhatsApp.js";import I from"./VariableEditorHeader.js";import w from"./WhatsAppTemplateCardButtonV2.js";const L=d=>{let{template:L,onTemplateChange:U,whatsappSpecificPickerMeta:P,showVariableModal:H,variableListForImage:N,setDiscountCode:D,fileName:A,setFileName:_}=d;var F,q,Q,S,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,ve,me,be,ge,he,fe,je,Ce,Oe,Te,xe,ye,Ve;const Ee=L.isCarouselType,{originalVariableList:Be,pod:Me,extras:ke,selectedCarouselIndex:Ie,isProductCarouselType:we,disableCopyCode:Le,isError:Re,cardIndex:Ue}=b(),{descriptionComponents:Pe,urlBtns:He,qrbBtns:Ne,imageComponent:De,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}=h(L),qe=l(null),[Qe,Se]=a(!1),[Ye,Ke]=a(-1===Ie?{descriptionComponents:Pe,urlBtns:He,qrbBtns:Ne,imageComponent:De,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}:{}),{uploadMediaLink:We,uploadMediaFiles:$e,validateMimeType:Ge}=P,Xe=E({uploadMediaLink:We,uploadMediaFiles:$e,updateTemplateImageUrl:function(e,o){var n,t,l,a,s,d,r,p;let u;u=null!=Ie&&Ie>-1?{components:null===(t=null===(n=L.components[Ue])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie].components,mapping:null===(a=null===(l=null==L?void 0:L.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Ie]}:Object.assign({},L);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:o,example:{header_handle:[e]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=Ie&&Ie>-1){const e=i(L);e.components[Ue].cards[Ie].components=u.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[Ie]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==U||U(Object.assign({},e)),Je(!0)}else null==U||U(Object.assign({},u))},validateMimeType:Ge,mediaComponent:Ee?Ye.imageComponent:De,fileRef:qe}),[ze,Je]=a(!1),[Ze,eo]=a(A),[oo,no]=a();function to(e,o,n){var t,l,a,s,d,r,p,u,v,m;const b=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},L).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},L).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},L),g=i(b),h="custom"===o&&"string"==typeof e,f=h?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},L).components.map((e=>{var o;return c(e.type)?Object.assign(Object.assign({},e),{cards:null===(o=e.cards)||void 0===o?void 0:o.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var o,t,i;if("BUTTONS"===e.type){const l=null===(o=e.buttons)||void 0===o?void 0:o.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),t=null===(s=null===(a=Object.assign({},L).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map(((o,t)=>t===n?h?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":o))})})),l=i(L);return l.components=o,l.mapping.cards=t,void(null==U||U(Object.assign({},l)))}const j=null==g?void 0:g.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const t=null===(d=null==g?void 0:g.components[j].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=g.components)||void 0===r?void 0:r[j])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},g.components[j]),{buttons:s}),c=null===(v=g.mapping)||void 0===v?void 0:v.buttons;c&&c.length>0&&(c[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},g.mapping),{buttons:c});g.mapping=m;const b=[...g.components];b[j]=d,g.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?Se(!0):(Se(!1),null==D||D(""))}if(null!=Ie&&Ie>-1){const e=i(L);e.components[Ue].cards[Ie].components=g.components,e.mapping.cards[Ie]=g.mapping,null==U||U(Object.assign({},e))}else null==U||U(g)}function io(e,o,n){var t,l,a,s,d,r,p;const u=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},L).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},L).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},L);if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},L).components.map((o=>{var t;return c(o.type)?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const a=null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==o?void 0:o.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),t=i(L);return t.components=o,void(null==U||U(Object.assign({},t)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const o=null===(s=null===(a=null==u?void 0:u.components[v])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(o){let t=o[n];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[v])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[v]),{buttons:i}),a=[...u.components];a[v]=l,u.components=a}}if(null!=Ie&&Ie>-1){const e=i(L);e.components[Ue].cards[Ie].components=u.components,null==U||U(Object.assign({},e))}else null==U||U(u)}s((()=>{var e,o;if(null===(e=L.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Se(!0);else{Se(!1);const e=null===(o=null==ke?void 0:ke.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}}),[L]),s((()=>{var e,o,n,t;if(null!=Ie&&Ie>-1){const i={components:null===(o=null===(e=L.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==L?void 0:L.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=h(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u})}else if(null!=Ie&&-1===Ie){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a}=h(L);Ke({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a})}}),[Ie]),s((()=>{var e,o,n,t;if(null!=Ie&&Ie>-1&&ze){const i={components:null===(o=null===(e=L.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==L?void 0:L.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=h(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}),Je(!1)}}),[ze]);s((()=>{Re&&Me===m.CHATBOT&&(()=>{if(!A)return void no("PDF name is Required");const e=C(A);null==_||_(null!=A?A:""),no(e?"Please enter a valid PDF name":void 0)})()}),[Re]);const lo=Ee?Ye.imageComponent:De;return Xe.openEditMedia?e(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(x,{mediaComponentFormat:null!==(F=lo.format)&&void 0!==F?F:v.IMAGE,uploadMedia:Xe.uploadMedia,variableListForImage:N||[],useEditWhatsappTemplateMediaResponse:Xe,setOpenEditMedia:Xe.setOpenEditMedia,openEditMedia:Xe.openEditMedia,editIconRef:Xe.editIconRef,fileRef:qe})})):o(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:we?"420px":"auto"}},{children:[!!Ye.imageComponent&&!we&&!u(null==L?void 0:L.channel)&&o(V,{children:[e(y,{imageName:null!==(Q=null===(q=null==lo?void 0:lo.example)||void 0===q?void 0:q.header_handle)&&void 0!==Q?Q:[],handleImageChange:Xe.handleImageChange,mediaType:null==lo?void 0:lo.format,error:Xe.error,isLoading:Xe.loading,setOpenEditMedia:Xe.setOpenEditMedia,selectedVariable:f(null!==(K=null===(Y=null===(S=null==lo?void 0:lo.example)||void 0===S?void 0:S.header_handle)||void 0===Y?void 0:Y[0])&&void 0!==K?K:"")?null===($=null===(W=null==lo?void 0:lo.example)||void 0===W?void 0:W.header_handle)||void 0===$?void 0:$[0]:(null===(X=null===(G=null==L?void 0:L.mapping)||void 0===G?void 0:G.header)||void 0===X?void 0:X[0])?null===(J=null===(z=null==L?void 0:L.mapping)||void 0===z?void 0:z.header)||void 0===J?void 0:J[0]:Xe.selectedVariable}),(null==De?void 0:De.format)==v.DOCUMENT?e(R,{children:Me===m.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:oo||void 0,onChange:e=>{var o;no(""),null==_||_(null!==(o=null==e?void 0:e.actualValue)&&void 0!==o?o:"")},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=A?A:"",variableType:"string"},variablesList:N,showAddButton:!0}):e(r,{labelText:"PDF Name",placeholder:"Enter the name",value:Ze,errorMessage:oo||void 0,onBlur:()=>{if(!Ze)return null==_||_(""),void no("PDF name is Required");const e=j(Ze);null==_||_(Ze),no(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{no(""),eo(e)}})}):e(n,{})]}),(null===(Z=Ye.bodyVariables)||void 0===Z?void 0:Z.length)>0&&e(I,{containerStyle:{paddingTop:Ye.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(ee=Ye.descriptionComponents)||void 0===ee?void 0:ee.map(((o,n)=>e(k,{originalVariableList:null!=Ie&&Ie>-1?Be.cards[Ie]:Be,type:o.type,descriptionComponent:o.component,showVariableModal:H},n))),(null===(te=null===(ne=null!=Ie&&Ie>-1?null===(oe=Be.cards[Ie])||void 0===oe?void 0:oe.buttons:null==Be?void 0:Be.buttons)||void 0===ne?void 0:ne.filter((e=>"URL"===e.type)))||void 0===te?void 0:te.length)>0&&e(I,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(ae=null===(le=null!=Ie&&Ie>-1?null===(ie=Be.cards[Ie])||void 0===ie?void 0:ie.buttons:null==Be?void 0:Be.buttons)||void 0===le?void 0:le.filter((e=>Me===m.CHATBOT||"URL"===e.type)))||void 0===ae?void 0:ae.map(((o,n)=>{const t=o.buttonVariable===g;if("URL"===o.type)return e(w,{variableListIndex:n,disableEdit:t,CTAoptions:null==P?void 0:P.CTAoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedURLTemplateBtn:to},`${n}_${Ie}`)})),Me===m.CHATBOT&&(null===(de=null===(se=Ne[0])||void 0===se?void 0:se.component)||void 0===de?void 0:de.buttons)&&(null===(ue=null===(pe=null===(re=Ne[0])||void 0===re?void 0:re.component)||void 0===pe?void 0:pe.buttons)||void 0===ue?void 0:ue.length)>0&&e(O,{backTrackMessage:null===(ce=null==ke?void 0:ke.backTrackExtra)||void 0===ce?void 0:ce[0],setBackTrackMessage:null===(ve=null==ke?void 0:ke.backTrackExtra)||void 0===ve?void 0:ve[1]}),!u(null==L?void 0:L.channel)&&(null===(ge=null===(be=null!=Ie&&Ie>-1?null===(me=Be.cards[Ie])||void 0===me?void 0:me.buttons:null==Be?void 0:Be.buttons)||void 0===be?void 0:be.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ge?void 0:ge.length)>0&&(Me!==m.CHATBOT?e(I,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e(O,{backTrackMessage:null===(he=null==ke?void 0:ke.backTrackExtra)||void 0===he?void 0:he[0],setBackTrackMessage:null===(fe=null==ke?void 0:ke.backTrackExtra)||void 0===fe?void 0:fe[1]})),!u(null==L?void 0:L.channel)&&(null===(Oe=null===(Ce=null!=Ie&&Ie>-1?null===(je=Be.cards[Ie])||void 0===je?void 0:je.buttons:null==Be?void 0:Be.buttons)||void 0===Ce?void 0:Ce.filter((e=>"QUICK_REPLY"===e.type)))||void 0===Oe?void 0:Oe.map(((o,n)=>{if("QUICK_REPLY"===o.type&&Me!==m.CHATBOT)return e(w,{variableListIndex:n,QRBoptions:null==P?void 0:P.QRBoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedQRBTemplateBtn:io},`${n}_${Ie}`)}))),Me===m.CHATBOT&&Qe&&e(T,{discountCode:null===(Te=null==ke?void 0:ke.discountCodeExtra)||void 0===Te?void 0:Te[0],setDiscountCode:null===(xe=null==ke?void 0:ke.discountCodeExtra)||void 0===xe?void 0:xe[1]}),null===(Ve=null!=Ie&&Ie>-1?null===(ye=Be.cards[Ie])||void 0===ye?void 0:ye.buttons:null==Be?void 0:Be.buttons)||void 0===Ve?void 0:Ve.map(((o,t)=>{var i,l,a,s,d;if("COPY_CODE"===o.type)return e(n,{children:Le?e("div",Object.assign({style:{marginBottom:20,borderRadius:4,padding:"8px 10px"}},{children:e(r,{state:"disabled",labelText:null!==(i=o.text)&&void 0!==i?i:"Copy Code",value:null!==(l=o.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})})):e(B,{index:t,variable:{variableName:null!==(a=o.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=o.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=o.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:o.type},t)})}))]}))},R=d.div`
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as l}from"../../variable-picker-v3/model.js";import{cloneDeep as o}from"lodash";import{useRef as i,useState as a,useEffect as r}from"react";import d from"styled-components";import{Input as s}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as m}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as c}from"../../template-preview/models/TemplateMeta.js";import{POD as v}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as f}from"../utils/constants.js";import{getAllDataFromTemplateComponent as h}from"../utils/getDataFromTemplateComponent.js";import{isVariable as g}from"../utils/validateIsUrl.js";import{validateInputName as C,validateInputNameChatbot as T}from"../utils/validateName.js";import{BackTrackComponent as y}from"./BackTrackComponent.js";import{DiscountCodeComponent as x}from"./DiscountCodeComponent.js";import V from"./EditMediaModal.js";import E from"./EditMediaV2.js";import{EditTemplateMediaContainer as B}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as M}from"./useEditWhtasappTemplateMedia.js";import k from"./VariableConnector.js";import{Container as I}from"./VariableConnectorsPanel.js";import w from"./VariableConnectorWhatsApp.js";import j from"./VariableEditorHeader.js";import O from"./WhatsAppTemplateCardButtonV2.js";var L=Object.defineProperty,R=Object.defineProperties,P=Object.getOwnPropertyDescriptors,U=Object.getOwnPropertySymbols,D=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable,N=(e,n,t)=>n in e?L(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,A=(e,n)=>{for(var t in n||(n={}))D.call(n,t)&&N(e,t,n[t]);if(U)for(var t of U(n))H.call(n,t)&&N(e,t,n[t]);return e},_=(e,n)=>R(e,P(n));const F=d=>{let{template:L,onTemplateChange:R,whatsappSpecificPickerMeta:P,showVariableModal:U,variableListForImage:D,setDiscountCode:H,fileName:N,setFileName:F}=d;var q,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,le,oe,ie,ae,re,de,se,pe,ue,me,ce,ve,be,fe,he,ge,Ce,Te,ye,xe,Ve,Ee,Be,Me,ke;const Ie=L.isCarouselType,{originalVariableList:we,pod:je,extras:Oe,selectedCarouselIndex:Le,isProductCarouselType:Re,disableCopyCode:Pe,isError:Ue,cardIndex:De}=b(),{descriptionComponents:He,urlBtns:Ne,qrbBtns:Ae,imageComponent:_e,bodyVariables:Fe,headerVariables:Se,titleVariables:qe}=h(L),Qe=i(null),[Ye,Ke]=a(!1),[We,$e]=a(-1===Le?{descriptionComponents:He,urlBtns:Ne,qrbBtns:Ae,imageComponent:_e,bodyVariables:Fe,headerVariables:Se,titleVariables:qe}:{}),{uploadMediaLink:Ge,uploadMediaFiles:Xe,validateMimeType:ze}=P,Je=M({uploadMediaLink:Ge,uploadMediaFiles:Xe,updateTemplateImageUrl:function(e,n){var t,l,i,a,r,d,s,p;let u;u=null!=Le&&Le>-1?{components:null==(l=null==(t=L.components[De])?void 0:t.cards)?void 0:l[Le].components,mapping:null==(a=null==(i=null==L?void 0:L.mapping)?void 0:i.cards)?void 0:a[Le]}:A({},L);const m=null==(r=null==u?void 0:u.components)?void 0:r.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==m&&m>-1&&(null==u?void 0:u.components[m])){const t=_(A({},u.components[m]),{format:n,example:{header_handle:[e]}}),l=[...u.components];l[m]=t,u=_(A({},u),{components:l})}u.mapping&&(u.mapping=_(A({},u.mapping),{header:void 0}));if(null!=Le&&Le>-1){const e=o(L);e.components[De].cards[Le].components=u.components,(null==(d=null==e?void 0:e.mapping)?void 0:d.cards)&&(null==(s=null==e?void 0:e.mapping)?void 0:s.cards.length)>0&&(e.mapping.cards[Le]=null!=(p=u.mapping)?p:{}),null==R||R(A({},e)),en(!0)}else null==R||R(A({},u))},validateMimeType:ze,mediaComponent:Ie?We.imageComponent:_e,fileRef:Qe}),[Ze,en]=a(!1),[nn,tn]=a(N),[ln,on]=a();function an(e,n,t){var l,i,a,r,d,s,p,u,c,v;const b=null!=Le&&Le>-1?{components:null==(l=A({},L).components[De].cards)?void 0:l[Le].components,mapping:null==(i=A({},L).mapping.cards)?void 0:i[Le]}:A({},L),f=o(b),h="custom"===n&&"string"==typeof e,g=h?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Le&&Le>-1&&Re){const n=A({},L).components.map((e=>{var n;return m(e.type)?_(A({},e),{cards:null==(n=e.cards)?void 0:n.map((e=>_(A({},e),{components:e.components.map((e=>{var n,l,o;if("BUTTONS"===e.type){const i=null==(n=e.buttons)?void 0:n.filter((e=>"URL"===e.type));let a=null!=(l=null==i?void 0:i[t])?l:{};a=_(A({},a),{url:"https://d.bik.ai/{{1}}",example:[g]});const r=null==(o=e.buttons)?void 0:o.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return _(A({},e),{buttons:r})}return e}))})))}):e})),l=null==(r=null==(a=A({},L).mapping)?void 0:a.cards)?void 0:r.map((n=>{var l;return _(A({},n),{buttons:null==(l=null==n?void 0:n.buttons)?void 0:l.map(((n,l)=>l===t?h?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":n))})})),i=o(L);return i.components=n,i.mapping.cards=l,void(null==R||R(A({},i)))}const C=null==f?void 0:f.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==C&&C>-1){const l=null==(d=null==f?void 0:f.components[C].buttons)?void 0:d.filter((e=>"URL"===e.type));if((null==l?void 0:l.length)>0){const o="custom"===n&&"string"==typeof e,i=o?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=l[t];a=_(A({},a),{url:"https://d.bik.ai/{{1}}",example:[i]});const r=[...null!=(u=null==(p=null==(s=f.components)?void 0:s[C])?void 0:p.buttons)?u:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=_(A({},f.components[C]),{buttons:r}),m=null==(c=f.mapping)?void 0:c.buttons;m&&m.length>0&&(m[t]=o?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const v=_(A({},f.mapping),{buttons:m});f.mapping=v;const b=[...f.components];b[C]=d,f.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null==(v=e.placeHolder)?void 0:v.slice(2,-2))?Ke(!0):(Ke(!1),null==H||H(""))}if(null!=Le&&Le>-1){const e=o(L);e.components[De].cards[Le].components=f.components,e.mapping.cards[Le]=f.mapping,null==R||R(A({},e))}else null==R||R(f)}function rn(e,n,t){var l,i,a,r,d,s,p;const u=null!=Le&&Le>-1?{components:null==(l=A({},L).components[De].cards)?void 0:l[Le].components,mapping:null==(i=A({},L).mapping.cards)?void 0:i[Le]}:A({},L);if(null!=Le&&Le>-1&&Re){const n=A({},L).components.map((n=>{var l;return m(n.type)?_(A({},n),{cards:null==(l=n.cards)?void 0:l.map((n=>_(A({},n),{components:n.components.map((n=>{var l,o,i;if("BUTTONS"===n.type){const a=null==(l=null==n?void 0:n.buttons)?void 0:l.filter((e=>"QUICK_REPLY"===e.type));let r=null!=(o=null==a?void 0:a[t])?o:{};r=_(A({},r),{flowId:e.flowId,flowName:e.flowName});const d=null==(i=null==n?void 0:n.buttons)?void 0:i.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==r?void 0:r.text)?r:e));return _(A({},n),{buttons:d})}return n}))})))}):n})),l=o(L);return l.components=n,void(null==R||R(A({},l)))}const c=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null==(r=null==(a=null==u?void 0:u.components[c])?void 0:a.buttons)?void 0:r.filter((e=>"QUICK_REPLY"===e.type));if(n){let l=n[t];l=_(A({},l),{flowId:e.flowId,flowName:e.flowName});const o=[...null!=(p=null==(s=null==(d=u.components)?void 0:d[c])?void 0:s.buttons)?p:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),i=_(A({},u.components[c]),{buttons:o}),a=[...u.components];a[c]=i,u.components=a}}if(null!=Le&&Le>-1){const e=o(L);e.components[De].cards[Le].components=u.components,null==R||R(A({},e))}else null==R||R(u)}r((()=>{var e,n;if(null==(e=L.mapping.buttons)?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Ke(!0);else{Ke(!1);const e=null==(n=null==Oe?void 0:Oe.discountCodeExtra)?void 0:n[1];null==e||e("")}}),[L]),r((()=>{var e,n,t,l;if(null!=Le&&Le>-1){const o={components:null==(n=null==(e=L.components[De])?void 0:e.cards)?void 0:n[Le].components,mapping:null==(l=null==(t=null==L?void 0:L.mapping)?void 0:t.cards)?void 0:l[Le]},{descriptionComponents:i,urlBtns:a,qrbBtns:r,imageComponent:d,bodyVariables:s,headerVariables:p,titleVariables:u}=h(o);$e({descriptionComponents:i,urlBtns:a,qrbBtns:r,imageComponent:d,bodyVariables:s,headerVariables:p,titleVariables:u})}else if(null!=Le&&-1===Le){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:l,bodyVariables:o,headerVariables:i,titleVariables:a}=h(L);$e({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:l,bodyVariables:o,headerVariables:i,titleVariables:a})}}),[Le]),r((()=>{var e,n,t,l;if(null!=Le&&Le>-1&&Ze){const o={components:null==(n=null==(e=L.components[De])?void 0:e.cards)?void 0:n[Le].components,mapping:null==(l=null==(t=null==L?void 0:L.mapping)?void 0:t.cards)?void 0:l[Le]},{descriptionComponents:i,urlBtns:a,qrbBtns:r,imageComponent:d,bodyVariables:s,headerVariables:p,titleVariables:u}=h(o);$e({descriptionComponents:i,urlBtns:a,qrbBtns:r,imageComponent:d,bodyVariables:s,headerVariables:p,titleVariables:u}),en(!1)}}),[Ze]);r((()=>{Ue&&je===v.CHATBOT&&(()=>{if(!N)return void on("PDF name is Required");const e=T(N);null==F||F(null!=N?N:""),on(e?"Please enter a valid PDF name":void 0)})()}),[Ue]);const dn=Ie?We.imageComponent:_e;return Je.openEditMedia?e(I,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(V,{mediaComponentFormat:null!=(q=dn.format)?q:c.IMAGE,uploadMedia:Je.uploadMedia,variableListForImage:D||[],useEditWhatsappTemplateMediaResponse:Je,setOpenEditMedia:Je.setOpenEditMedia,openEditMedia:Je.openEditMedia,editIconRef:Je.editIconRef,fileRef:Qe})}):n(I,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Re?"420px":"auto"},children:[!!We.imageComponent&&!Re&&!u(null==L?void 0:L.channel)&&n(B,{children:[e(E,{imageName:null!=(Y=null==(Q=null==dn?void 0:dn.example)?void 0:Q.header_handle)?Y:[],handleImageChange:Je.handleImageChange,mediaType:null==dn?void 0:dn.format,error:Je.error,isLoading:Je.loading,setOpenEditMedia:Je.setOpenEditMedia,selectedVariable:g(null!=($=null==(W=null==(K=null==dn?void 0:dn.example)?void 0:K.header_handle)?void 0:W[0])?$:"")?null==(X=null==(G=null==dn?void 0:dn.example)?void 0:G.header_handle)?void 0:X[0]:(null==(J=null==(z=null==L?void 0:L.mapping)?void 0:z.header)?void 0:J[0])?null==(ee=null==(Z=null==L?void 0:L.mapping)?void 0:Z.header)?void 0:ee[0]:Je.selectedVariable}),(null==_e?void 0:_e.format)==c.DOCUMENT?e(S,{children:je===v.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:ln||void 0,onChange:e=>{var n;on(""),null==F||F(null!=(n=null==e?void 0:e.actualValue)?n:"")},pickerType:l.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=N?N:"",variableType:"string"},variablesList:D,showAddButton:!0}):e(s,{labelText:"PDF Name",placeholder:"Enter the name",value:nn,errorMessage:ln||void 0,onBlur:()=>{if(!nn)return null==F||F(""),void on("PDF name is Required");const e=C(nn);null==F||F(nn),on(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{on(""),tn(e)}})}):e(t,{})]}),(null==(ne=We.bodyVariables)?void 0:ne.length)>0&&e(j,{containerStyle:{paddingTop:We.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==(te=We.descriptionComponents)?void 0:te.map(((n,t)=>e(w,{originalVariableList:null!=Le&&Le>-1?we.cards[Le]:we,type:n.type,descriptionComponent:n.component,showVariableModal:U},t))),(null==(ie=null==(oe=null!=Le&&Le>-1?null==(le=we.cards[Le])?void 0:le.buttons:null==we?void 0:we.buttons)?void 0:oe.filter((e=>"URL"===e.type)))?void 0:ie.length)>0&&e(j,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null==(de=null==(re=null!=Le&&Le>-1?null==(ae=we.cards[Le])?void 0:ae.buttons:null==we?void 0:we.buttons)?void 0:re.filter((e=>je===v.CHATBOT||"URL"===e.type)))?void 0:de.map(((n,t)=>{const l=n.buttonVariable===f;if("URL"===n.type)return e(O,{variableListIndex:t,disableEdit:l,CTAoptions:null==P?void 0:P.CTAoptions,button:n,currentVariableList:A({},null!=Le&&Le>-1?we.cards[Le]:we),updateSelectedURLTemplateBtn:an},`${t}_${Le}`)})),je===v.CHATBOT&&(null==(pe=null==(se=Ae[0])?void 0:se.component)?void 0:pe.buttons)&&(null==(ce=null==(me=null==(ue=Ae[0])?void 0:ue.component)?void 0:me.buttons)?void 0:ce.length)>0&&e(y,{backTrackMessage:null==(ve=null==Oe?void 0:Oe.backTrackExtra)?void 0:ve[0],setBackTrackMessage:null==(be=null==Oe?void 0:Oe.backTrackExtra)?void 0:be[1]}),!u(null==L?void 0:L.channel)&&(null==(ge=null==(he=null!=Le&&Le>-1?null==(fe=we.cards[Le])?void 0:fe.buttons:null==we?void 0:we.buttons)?void 0:he.filter((e=>"QUICK_REPLY"===e.type)))?void 0:ge.length)>0&&(je!==v.CHATBOT?e(j,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e(y,{backTrackMessage:null==(Ce=null==Oe?void 0:Oe.backTrackExtra)?void 0:Ce[0],setBackTrackMessage:null==(Te=null==Oe?void 0:Oe.backTrackExtra)?void 0:Te[1]})),!u(null==L?void 0:L.channel)&&(null==(Ve=null==(xe=null!=Le&&Le>-1?null==(ye=we.cards[Le])?void 0:ye.buttons:null==we?void 0:we.buttons)?void 0:xe.filter((e=>"QUICK_REPLY"===e.type)))?void 0:Ve.map(((n,t)=>{if("QUICK_REPLY"===n.type&&je!==v.CHATBOT)return e(O,{variableListIndex:t,QRBoptions:null==P?void 0:P.QRBoptions,button:n,currentVariableList:A({},null!=Le&&Le>-1?we.cards[Le]:we),updateSelectedQRBTemplateBtn:rn},`${t}_${Le}`)}))),je===v.CHATBOT&&Ye&&e(x,{discountCode:null==(Ee=null==Oe?void 0:Oe.discountCodeExtra)?void 0:Ee[0],setDiscountCode:null==(Be=null==Oe?void 0:Oe.discountCodeExtra)?void 0:Be[1]}),null==(ke=null!=Le&&Le>-1?null==(Me=we.cards[Le])?void 0:Me.buttons:null==we?void 0:we.buttons)?void 0:ke.map(((n,l)=>{var o,i,a,r,d;if("COPY_CODE"===n.type)return e(t,{children:Pe?e("div",{style:{marginBottom:20,borderRadius:4,padding:"8px 10px"},children:e(s,{state:"disabled",labelText:null!=(o=n.text)?o:"Copy Code",value:null!=(i=n.buttonVariable)?i:"",onChangeText:()=>{}})}):e(k,{index:l,variable:{variableName:null!=(a=n.text)?a:"Copy Code",updatedValue:null!=(r=n.buttonVariable)?r:"",type:"string",isEditableVariable:!0,index:null!=(d=n.index)?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:n.type},l)})}))]})},S=d.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;export{L as default};
+`;export{F as default};

package/dist/esm/components/template-context-mapper/modalElements/Footer.js

@@ -1,15 +1,15 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import{useState as r,useEffect as i}from"react";import s from"styled-components";import{Button as l}from"../../button/Button.js";import{Tag as p}from"../../tag/Tag.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as a}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as n}from"../../template-preview/models/Channels.js";import{isRCSChannel as m}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleRegular as d}from"../../TypographyStyle.js";import{Badge as c}from"../Badge/index.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";const v=s.div`
-	background: ${a.surface.standard};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"../../../assets/icons/info.svg.js";import{useState as o,useEffect as i}from"react";import l from"styled-components";import{Button as n}from"../../button/Button.js";import{Tag as p}from"../../tag/Tag.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as s}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{CHANNEL_TYPE as a}from"../../template-preview/models/Channels.js";import{isRCSChannel as m}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleRegular as d}from"../../TypographyStyle.js";import{Badge as c}from"../Badge/index.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";const h=l.div`
+	background: ${s.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${a.stroke.primary};
+	border-top-color: ${s.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 0 24px;
 	display: flex;
-	justify-content: ${e=>{var t;return null!==(t=e.justifyContent)&&void 0!==t?t:"end"}};
+	justify-content: ${e=>{var t;return null!=(t=e.justifyContent)?t:"end"}};
 	align-items: center;
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	height: ${e=>e.isWhatsappCarousel?64:80}px;
-`,h=s=>{let{isWhatsappCarousel:h,onSelect:x,footerButtonText:g,footerInfoText:f}=s;var j,b,w,y;const{isError:T,selectedCarouselIndex:C,setSelectedCarouselIndex:S,setErrorIndexes:W,template:k,showVariablePicker:A,hideFooterButton:P}=u(),[I,$]=r(h?"Next":"Select template");return i((()=>{g?$(g):h&&-1===C?$("Next"):h&&null!=C&&C>-1&&$("Save & Select Template")}),[C]),e(v,Object.assign({isWhatsappCarousel:h,justifyContent:h&&(null===(b=null===(j=null==k?void 0:k.mapping)||void 0===j?void 0:j.body)||void 0===b?void 0:b.length)?"space-between":"end"},{children:[m((null==k?void 0:k.channel)||n.WHATSAPP)?t(d,{}):h&&null!=C&&C>=-1&&!!(null===(y=null===(w=null==k?void 0:k.mapping)||void 0===w?void 0:w.body)||void 0===y?void 0:y.length)&&t(d,Object.assign({color:a.text.secondary},{children:`Step ${-1===C?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[T&&t(c,{errorText:"Some inputs are missing or incorrect. Please check"}),!T&&f&&t("div",Object.assign({style:{marginRight:12}},{children:t(p,{tagText:f,LeadingIcon:o})})),!P&&t(l,{disabled:A,id:"select-template-btn",buttonText:I,size:h?"small":"large",onClick:function(){h&&-1===C&&S?S(0):(null==W||W([]),x())}})]}))]}))};export{h as default};
+`,x=l=>{let{isWhatsappCarousel:x,onSelect:f,footerButtonText:g,footerInfoText:v}=l;var b,j,y,w;const{isError:C,selectedCarouselIndex:T,setSelectedCarouselIndex:S,setErrorIndexes:W,template:k,showVariablePicker:P,hideFooterButton:A}=u(),[I,$]=o(x?"Next":"Select template");return i((()=>{g?$(g):x&&-1===T?$("Next"):x&&null!=T&&T>-1&&$("Save & Select Template")}),[T]),e(h,{isWhatsappCarousel:x,justifyContent:x&&(null==(j=null==(b=null==k?void 0:k.mapping)?void 0:b.body)?void 0:j.length)?"space-between":"end",children:[m((null==k?void 0:k.channel)||a.WHATSAPP)?t(d,{}):x&&null!=T&&T>=-1&&!!(null==(w=null==(y=null==k?void 0:k.mapping)?void 0:y.body)?void 0:w.length)&&t(d,{color:s.text.secondary,children:`Step ${-1===T?1:2}/2`}),e("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[C&&t(c,{errorText:"Some inputs are missing or incorrect. Please check"}),!C&&v&&t("div",{style:{marginRight:12},children:t(p,{tagText:v,LeadingIcon:r})}),!A&&t(n,{disabled:P,id:"select-template-btn",buttonText:I,size:x?"small":"large",onClick:function(){x&&-1===T&&S?S(0):(null==W||W([]),f())}})]})]})};export{x as default};

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

@@ -1,23 +1,23 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const c=i.div`
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import t from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const c=i.div`
 	padding-top: 12px;
 	padding-bottom: 12px;
 	padding-left: 30px;
 	padding-right: 30px;
-	background-color: ${s.surface.subdued};
+	background-color: ${d.surface.subdued};
 	align-items: center;
 	display: flex;
-	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
-`,a=i.div`
+	filter: ${o=>o.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
+`,l=i.div`
 	display: flex;
-	border: 1px solid ${s.stroke.primary};
+	border: 1px solid ${d.stroke.primary};
 	border-radius: 4px;
 	overflow: hidden;
 	width: min-content;
-`,l=i.div`
-	background: ${e=>e.active?s.background.brandLight:s.background.base};
+`,p=i.div`
+	background: ${o=>o.active?d.background.brandLight:d.background.base};
 	padding: 6px 8px;
 	justify-content: center;
 	align-items: center;
-`,p=i(l)`
-	border-left: 1px solid ${s.stroke.primary};
-`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:g}=d();return e(c,Object.assign({showOnlyContent:m},{children:[e(a,{children:[t(l,Object.assign({active:"mobile"===b,onClick:()=>null==g?void 0:g("mobile")},{children:t(n,{color:"mobile"===b?s.content.brand:s.content.secondary,height:20,width:20})})),t(p,Object.assign({active:"desktop"===b,onClick:()=>null==g?void 0:g("desktop")},{children:t(o,{color:"desktop"===b?s.content.brand:s.content.secondary,height:20,width:20})}))]}),e(r,Object.assign({style:{color:s.content.primary,marginLeft:16}},{children:["mobile"===b?"Mobile":"Web"," view"]}))]}))};export{m as default};
+`,a=i(p)`
+	border-left: 1px solid ${d.stroke.primary};
+`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:h}=s();return o(c,{showOnlyContent:m,children:[o(l,{children:[e(p,{active:"mobile"===b,onClick:()=>null==h?void 0:h("mobile"),children:e(n,{color:"mobile"===b?d.content.brand:d.content.secondary,height:20,width:20})}),e(a,{active:"desktop"===b,onClick:()=>null==h?void 0:h("desktop"),children:e(t,{color:"desktop"===b?d.content.brand:d.content.secondary,height:20,width:20})})]}),o(r,{style:{color:d.content.primary,marginLeft:16},children:["mobile"===b?"Mobile":"Web"," view"]})]})};export{m as default};

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as s}from"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as p}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{getPreviewWidth as n}from"../utils/getPreviewDimension.js";const m=o.div`
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import o from"react";import r from"styled-components";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as n}from"../utils/getPreviewDimension.js";var m=Object.defineProperty,c=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,f=(e,t,i)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,w=(e,t)=>{for(var i in t||(t={}))h.call(t,i)&&f(e,i,t[i]);if(c)for(var i of c(t))d.call(t,i)&&f(e,i,t[i]);return e};const b=r.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,c=o.div`
+`,v=r.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,9 +17,9 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=a.forwardRef(((a,o)=>{let{display_content:h,channel:f,template:w,showSampleValues:b}=a;const{pod:v,hideDeviceContainerInPreview:g}=l(),u={showSampleValues:b,template:w,channel:f,smsSpecificMeta:{smsDisplayContent:h},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:v!==s.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:f==p.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:h,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return g?e(d,{children:e(r,Object.assign({},u))}):e(t,{children:i(m,Object.assign({channel:f},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n(f),height:443}}),e(c,Object.assign({ref:o},{children:e(r,Object.assign({},u))}))]}))})}));h.displayName="MobilePreview";const d=o.div`
+`,u=o.forwardRef(((o,r)=>{let{display_content:m,channel:c,template:h,showSampleValues:d}=o;const{pod:f,hideDeviceContainerInPreview:u}=s(),y={showSampleValues:d,template:h,channel:c,smsSpecificMeta:{smsDisplayContent:m},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:f!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:c==l.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:m,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return u?e(g,{children:e(a,w({},y))}):e(t,{children:i(b,{channel:c,children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n(c),height:443}}),e(v,{ref:r,children:e(a,w({},y))})]})})}));u.displayName="MobilePreview";const g=r.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`;export{h as default};
+`;export{u as default};

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

@@ -1,4 +1,4 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/box.svg.js";import i from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/edit.svg.js";import s from"styled-components";import{IconButton as r}from"../../icon-button/IconButton.js";import{TitleSmall as l}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";const d=s.div`
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/box.svg.js";import i from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/edit.svg.js";import r from"styled-components";import{IconButton as l}from"../../icon-button/IconButton.js";import{TitleSmall as s}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";const d=r.div`
 	width: ${t=>t.width};
 	padding: 12px;
 	display: flex;
@@ -44,4 +44,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/
 			color: #000000;
 		}
 	}
-`,a=s=>{const{cardBody:a,deleteItem:f,editItem:p,hideIcon:m}=s;return t(d,Object.assign({width:"100%"},{children:[!m&&e("div",Object.assign({style:{width:36,height:36}},{children:e(o,{})})),e("div",Object.assign({className:"card-body"},{children:e(l,Object.assign({color:c.content.secondary},{children:a}))})),t("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[p&&e(r,{style:{display:"flex"},Icon:()=>e(n,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{p(),t.stopPropagation()}}),e(r,{style:{display:"flex",color:"#919191"},Icon:()=>e(i,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{f(),t.stopPropagation()}})]}))]}))};export{a as ProductBox};
+`,f=r=>{const{cardBody:f,deleteItem:p,editItem:a,hideIcon:m}=r;return t(d,{width:"100%",children:[!m&&o("div",{style:{width:36,height:36},children:o(e,{})}),o("div",{className:"card-body",children:o(s,{color:c.content.secondary,children:f})}),t("div",{style:{display:"flex",alignItems:"center"},children:[a&&o(l,{style:{display:"flex"},Icon:()=>o(n,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{a(),t.stopPropagation()}}),o(l,{style:{display:"flex",color:"#919191"},Icon:()=>o(i,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{p(),t.stopPropagation()}})]})]})};export{f as ProductBox};

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/icons/delete.svg.js";import o from"../../../assets/icons/PlusIcon.js";import{useState as s,useEffect as i}from"react";import a from"styled-components";import{Button as r}from"../../button/Button.js";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";const h=a=>{const{params:h,onChange:u,isError:y,variableValue:f}=a,[j,x]=s(h.length>0),[b,v]=s(h);return i((()=>{v(h)}),[f]),e(g,{children:[e("div",Object.assign({style:{display:"flex"}},{children:[t(l,{isChecked:j,onValueChange:e=>{v([]),u([]),x(e)}}),t(m,Object.assign({style:{marginLeft:8}},{children:"Add custom query params"}))]})),j&&b.map(((o,s)=>e("div",Object.assign({style:{display:"flex",gap:"8px"}},{children:[t(p,{placeholder:"Key",value:o.key,onChangeText:e=>{const t=b.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{key:e}):t));v(t),u(t)},state:y&&!o.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:o.value,onChangeText:e=>{const t=b.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{value:e}):t));v(t),u(t)},state:y&&!o.value.length?"invalid":"none"}),t(c,{Icon:n,width:20,height:20,onClick:()=>{const e=b.filter(((e,t)=>t!=s));v(e),u(e)}})]}),s))),j&&h.length<10&&t(r,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"}},{children:t(o,{width:16,height:16,color:d.content.secondary})})),onClick:()=>{const e=[...b,{key:"",value:""}];v(e),u(e)}})]})},g=a.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/PlusIcon.js";import{useState as r,useEffect as i}from"react";import l from"styled-components";import{Button as a}from"../../button/Button.js";import{CheckBox as s}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";var y=Object.defineProperty,u=Object.defineProperties,h=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,j=(e,t,o)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,v=(e,t)=>{for(var o in t||(t={}))g.call(t,o)&&j(e,o,t[o]);if(f)for(var o of f(t))x.call(t,o)&&j(e,o,t[o]);return e},b=(e,t)=>u(e,h(t));const C=l=>{const{params:y,onChange:u,isError:h,variableValue:f}=l,[g,x]=r(y.length>0),[j,C]=r(y);return i((()=>{C(y)}),[f]),e(k,{children:[e("div",{style:{display:"flex"},children:[t(s,{isChecked:g,onValueChange:e=>{C([]),u([]),x(e)}}),t(m,{style:{marginLeft:8},children:"Add custom query params"})]}),g&&j.map(((n,r)=>e("div",{style:{display:"flex",gap:"8px"},children:[t(p,{placeholder:"Key",value:n.key,onChangeText:e=>{const t=j.map(((t,o)=>o===r?b(v({},t),{key:e}):t));C(t),u(t)},state:h&&!n.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:n.value,onChangeText:e=>{const t=j.map(((t,o)=>o===r?b(v({},t),{value:e}):t));C(t),u(t)},state:h&&!n.value.length?"invalid":"none"}),t(c,{Icon:o,width:20,height:20,onClick:()=>{const e=j.filter(((e,t)=>t!=r));C(e),u(e)}})]},r))),g&&y.length<10&&t(a,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:t(n,{width:16,height:16,color:d.content.secondary})}),onClick:()=>{const e=[...j,{key:"",value:""}];C(e),u(e)}})]})},k=l.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -8,4 +8,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/
 		justify-content: center;
 		padding: 12px !important;
 	}
-`;export{h as QueryParamsComponent};
+`;export{C as QueryParamsComponent};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import i from"../../../assets/icons/click.svg.js";import{useState as a,useEffect as c,useMemo as s}from"react";import{StyledModal as r}from"../../modals/styledModal.js";import{Tag as o}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,TitleSmall as p,Caption as u}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as h,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as j}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as T,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const f=n=>{const{templateAnalytics:i,onClose:o,onProceed:p,onCancel:b,headingTitle:j,headingSubtitle:k,templateId:f}=n,{templateQuality:N=d.GREEN,fetchAnalytics:O}=i||{},{icon:C,title:A,subline:B,sublineTextType:w,sublineColor:E}=T[N||d.GREEN],[S,G]=a({}),[P,V]=a(!0);c((()=>{null==O||O(f||"").then((e=>{e.analytics&&G(e.analytics),V(!1)}))}),[]);const R=s((()=>N===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:p,disabled:P},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==o||o(),null==b||b()},disabled:P}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==o||o(),null==b||b()},disabled:P},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:p,disabled:P}}),[N,P]),H=w||u;return e(r,Object.assign({open:!0,headingTitle:j,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==o||o()},headingSubtitle:k,footerShadow:!0,primaryButton:R.primaryButton,secondaryButton:R.secondaryButton,onClose:()=>{null==o||o()},width:"700px"},{children:t(h,{children:[e(g,{children:t("div",Object.assign({className:"inside--container"},{children:[C&&e("div",Object.assign({className:"icon--container"},{children:e(l,{width:40,height:40,color:y.content.warning})})),A&&e(m,Object.assign({style:{textAlign:"center"}},{children:A})),e(H,Object.assign({style:{textAlign:"center",color:E||y.content.primary}},{children:B}))]}))}),P?e(v,{}):e(x,{analyticsData:S,skipTitle:N==d.GREEN})]})}))},x=l=>{const{analyticsData:a,skipTitle:c}=l;return t(b,{children:[c?e(n,{}):e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",Object.assign({className:"mt-3"},{children:k.map(((t,n)=>e(N,{icon:t.icon,title:t.title,value:a[t.valName]||0,percentValue:t.percentValName?a[t.percentValName]:null},n)))})),(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics).length?t(n,{children:[e(p,Object.assign({color:y.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(a.clickAnalytics).map(((t,n)=>{let[l,a]=t;return e(N,{icon:i,title:l,value:a.totalClicks||0,percentValue:a.clickPercentage},n)}))}))]}):e(n,{})]})},N=l=>{const{icon:i,title:a,value:c,percentValue:s}=l;return t("div",Object.assign({className:"each--analytics--container"},{children:[t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e("div",Object.assign({className:"each--icon--container"},{children:e(i,{width:"16px",height:"16px",color:y.background.brand})})),e(u,{children:a})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?e(o,{tagText:`${s}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(j,{children:c})]}))]}))};export{N as AnalyticsItem,x as RightPanelTemplateAnalytics,f as TemplateAnalyticsComponent};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import n from"../../../assets/icons/alert_triangle.svg.js";import i from"../../../assets/icons/click.svg.js";import{useState as a,useEffect as r,useMemo as c}from"react";import{StyledModal as o}from"../../modals/styledModal.js";import{Tag as s}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,TitleSmall as p,Caption as u}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as h,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as T}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as k,ANALYTICS_ENGAGEMENT_MAP as v}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as f}from"./TemplateAnalyticsSkeleton.js";const x=l=>{const{templateAnalytics:i,onClose:s,onProceed:p,onCancel:b,headingTitle:T,headingSubtitle:v,templateId:x}=l,{templateQuality:j=d.GREEN,fetchAnalytics:C}=i||{},{icon:A,title:B,subline:w,sublineTextType:E,sublineColor:S}=k[j||d.GREEN],[G,P]=a({}),[V,R]=a(!0);r((()=>{null==C||C(x||"").then((e=>{e.analytics&&P(e.analytics),R(!1)}))}),[]);const H=c((()=>j===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:p,disabled:V},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==s||s(),null==b||b()},disabled:V}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==s||s(),null==b||b()},disabled:V},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:p,disabled:V}}),[j,V]),O=E||u;return e(o,{open:!0,headingTitle:T,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==s||s()},headingSubtitle:v,footerShadow:!0,primaryButton:H.primaryButton,secondaryButton:H.secondaryButton,onClose:()=>{null==s||s()},width:"700px",children:t(h,{children:[e(g,{children:t("div",{className:"inside--container",children:[A&&e("div",{className:"icon--container",children:e(n,{width:40,height:40,color:y.content.warning})}),B&&e(m,{style:{textAlign:"center"},children:B}),e(O,{style:{textAlign:"center",color:S||y.content.primary},children:w})]})}),V?e(f,{}):e(N,{analyticsData:G,skipTitle:j==d.GREEN})]})})},N=n=>{const{analyticsData:a,skipTitle:r}=n;return t(b,{children:[r?e(l,{}):e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:v.map(((t,l)=>e(j,{icon:t.icon,title:t.title,value:a[t.valName]||0,percentValue:t.percentValName?a[t.percentValName]:null},l)))}),(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics).length?t(l,{children:[e(p,{color:y.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(a.clickAnalytics).map(((t,l)=>{let[n,a]=t;return e(j,{icon:i,title:n,value:a.totalClicks||0,percentValue:a.clickPercentage},l)}))})]}):e(l,{})]})},j=n=>{const{icon:i,title:a,value:r,percentValue:c}=n;return t("div",{className:"each--analytics--container",children:[t("div",{className:"d-flex align--center",style:{gap:8},children:[e("div",{className:"each--icon--container",children:e(i,{width:"16px",height:"16px",color:y.background.brand})}),e(u,{children:a})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[c?e(s,{tagText:`${c}%`||0,theme:"light",type:"neutral"}):e(l,{}),e(T,{children:r})]})]})};export{j as AnalyticsItem,N as RightPanelTemplateAnalytics,x as TemplateAnalyticsComponent};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as s}from"react/jsx-runtime";import{BikShimmer as t}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as h}from"../styles/TemplateAnalyticsStyles.js";const c=c=>{const{skipTitleShimmer:a}=c;return e(h,{children:[i("div",{children:a?i(s,{}):i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>i(n,{},e)))})),e(s,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:i(n,{})}))]})]})},n=()=>e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"24px",height:"24px"}]}),i(t,{boxes:[{width:"69px",height:"11px"}]})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"43px",height:"18px"}]}),i(t,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{c as TemplateAnalyticsSkeleton};
+import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{BikShimmer as h}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as s}from"../styles/TemplateAnalyticsStyles.js";const r=r=>{const{skipTitleShimmer:m}=r;return e(s,{children:[i("div",{children:m?i(t,{}):i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:[0,1,2].map((e=>i(l,{},e)))}),e(t,{children:[i("div",{children:i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:i(l,{})})]})]})},l=()=>e("div",{className:"each--analytics--container",children:[e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"24px",height:"24px"}]}),i(h,{boxes:[{width:"69px",height:"11px"}]})]}),e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"43px",height:"18px"}]}),i(h,{boxes:[{width:"69px",height:"28px"}]})]})]});export{r as TemplateAnalyticsSkeleton};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as t}from"../../template-preview/models/Channels.js";import i from"./Body.js";import o from"./Header.js";const s=s=>{let{channel:r,showVariableMapping:l,variableListFromProps:n,showOnlyContent:p,whatsappSpecificPickerMeta:m,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:b,fileName:f,setFileName:u,skipDefaultVariableContent:C}=s;return e("div",Object.assign({style:{paddingBottom:0}},{children:a("div",{children:[r===t.EMAIL&&e(o,{showOnlyContent:p}),e(i,{variableListFromProps:n,whatsappSpecificPickerMeta:m,showVariableMapping:!!l,showOnlyContent:p,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:b,fileName:f,setFileName:u,skipDefaultVariableContent:C})]})}))};export{s as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import t from"./Body.js";import i from"./Header.js";const s=s=>{let{channel:r,showVariableMapping:l,variableListFromProps:n,showOnlyContent:p,whatsappSpecificPickerMeta:m,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:f,fileName:u,setFileName:b,skipDefaultVariableContent:C}=s;return e("div",{style:{paddingBottom:0},children:a("div",{children:[r===o.EMAIL&&e(i,{showOnlyContent:p}),e(t,{variableListFromProps:n,whatsappSpecificPickerMeta:m,showVariableMapping:!!l,showOnlyContent:p,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:f,fileName:u,setFileName:b,skipDefaultVariableContent:C})]})})};export{s as default};