@bikdotai/bik-component-library 0.0.533-beta.8 → 0.0.533

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/PlusIcon.js"),t=require("react"),r=require("../../checkBox/CheckBox.js"),a=require("../../TypographyStyle.js"),i=require("../context/templateModalContext.js"),n=require("./VariableConnectorsPanel.js"),o=require("../../input/Input.js");exports.DiscountCodeComponent=l=>{const{discountCode:c,setDiscountCode:d}=l,[u,j]=t.useState(""),[x,h]=t.useState(!!c),[g,p]=t.useState(!1),{setVariableCallback:b,setShowVariablePicker:C}=i.useTemplateModalContext(),f=t.useRef(),v=t.useRef();t.useEffect((()=>{d&&u&&d(c+u)}),[u]);const m=e=>{j(e.actualValue)};return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(r.CheckBox,{isChecked:x,onValueChange:()=>{x&&d&&(d(""),j("")),h(!x)}}),e.jsx(a.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),x&&e.jsxs("div",Object.assign({ref:f,style:{margin:10}},{children:[e.jsx(o.Input,{placeholder:"Enter your discount code",onChangeText:e=>{d&&d(e)},value:c,onFocus:()=>{p(!0)},onBlur:e=>{var s;"addVar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?(f.current&&f.current.focus(),p(!0)):p(!1)},noErrorHint:!0,validate:e=>[!0,""]}),g&&e.jsx(n.AddVariableStyled,Object.assign({ref:v,id:"addVar",onClick:e=>{e.stopPropagation(),b((()=>m)),C(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:14,height:14,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/PlusIcon.js"),a=require("react"),s=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var i=require("../../input/Input.js");require("../../tooltips/Tooltip.js"),require("../../../constants/Theme.js"),require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var t=require("../../TypographyStyle.js"),l=require("../../checkBox/CheckBox.js"),d=require("./VariableConnectorsPanel.js");exports.DiscountCodeComponent=o=>{const{discountCode:n,setDiscountCode:u,variableList:c}=o,[j,b]=a.useState(""),[h,v]=a.useState(!!n),[x,g]=a.useState(!1),[V,p]=a.useState(!1),q=a.useRef(),m=a.useRef();return a.useEffect((()=>{u&&j&&u(n+j)}),[j]),e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(l.CheckBox,{isChecked:h,onValueChange:()=>{h&&u&&(u(""),b("")),v(!h)}}),e.jsx(t.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),h&&e.jsxs("div",Object.assign({ref:q,style:{margin:10}},{children:[e.jsx(i.Input,{placeholder:"Enter your discount code",onChangeText:e=>{u&&u(e)},value:n,onFocus:()=>{g(!0)},onBlur:e=>{var r;"addVar"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)?(q.current&&q.current.focus(),g(!0)):(g(!1),p(!1))},noErrorHint:!0,validate:e=>[!0,""]}),x&&e.jsx(d.AddVariableStyled,Object.assign({ref:m,id:"addVar",onClick:e=>{e.stopPropagation(),p(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(r.default,{width:14,height:14,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),V&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=c?c:[],showVariable:V,setShowVariable:p,variableValue:j,setVariableValue:b,placeholder:"Add a variable",customTrigger:e=>{b(e.actualValue),g(!1)}})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var s=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var o=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js");var n=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:f,openEditMedia:y,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:q}=E;console.log("Variable list for image",f);const{pod:I}=h.useTemplateModalContext(),[T,A]=a.useState("");let P;if(P=b===n.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===n.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!y)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${o.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:o.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:q.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[q.loading?e.jsx(s.PureSpinner,{width:"40px",height:"40px",color:o.COLORS.content.brand}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:o.DEFAULT_THEME.colorsV2.background.base}},{children:b===n.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===n.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:q.loading?"Upload in progress...":b===n.HEADER_TYPES.IMAGE?"Upload an image":b===n.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:q.loading?`Your ${b.toLowerCase()} is getting loaded. This may take a couple of minutes.`:b===n.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===n.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!q.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:T,prevVariable:{actualValue:"",variableType:"string"},variablesList:f,placeHolder:"Enter URL/Add variable",showAddButton:I!==d.POD.CAMPAIGN||b===n.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:q.handleImageUpload,accept:P}),!!q.selectedImage&&e.jsx(r.BikImageCropper,{aspectRatio:15/8,src:q.selectedImage,onCropComplete:q.onCropComplete,onCancel:()=>{q.setLoading(!1),q.setSelectedImage(""),M.current&&(M.current.value="")}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var s=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var o=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:y,openEditMedia:f,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:I}=E;const{pod:T}=h.useTemplateModalContext(),[q,A]=a.useState("");let P;if(P=b===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!f)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${n.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:n.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:I.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[I.loading?e.jsx(s.PureSpinner,{width:"40px",height:"40px",color:n.COLORS.content.brand}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:n.DEFAULT_THEME.colorsV2.background.base}},{children:b===o.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===o.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:I.loading?"Upload in progress...":b===o.HEADER_TYPES.IMAGE?"Upload an image":b===o.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:n.COLORS.content.secondary},{children:I.loading?`Your ${b.toLowerCase()} is getting loaded. This may take a couple of minutes.`:b===o.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===o.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!I.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:q,prevVariable:{actualValue:"",variableType:"string"},variablesList:y,showSideVariablePanel:!0,placeHolder:"Enter URL/Add variable",showAddButton:T!==d.POD.CAMPAIGN||b===o.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:I.handleImageUpload,accept:P}),!!I.selectedImage&&e.jsx(r.BikImageCropper,{aspectRatio:15/8,src:I.selectedImage,onCropComplete:I.onCropComplete,onCancel:()=>{I.setLoading(!1),I.setSelectedImage(""),M.current&&(M.current.value="")}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.d.ts

@@ -5,6 +5,7 @@ export interface EditWhatsAppCarouselTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppCarouselTemplate;
     showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
@@ -20,5 +21,5 @@ export interface CarouselProduct {
     productName: string;
     productImage: string;
 }
-declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppCarouselTemplateV2;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts

@@ -8,11 +8,12 @@ export interface EditWhatsAppTemplateV2Props {
     template: WhatsAppTemplate | WhatsAppCarouselTemplate;
     onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate) => void;
     showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     fileName?: string;
     setFileName?: (name: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),o=require("react"),t=require("styled-components"),i=require("../../input/Input.js"),l=require("../../template-preview/models/TemplateMeta.js"),a=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),d=require("../utils/getDataFromTemplateComponent.js"),u=require("../utils/validateIsUrl.js"),r=require("../utils/validateName.js"),p=require("./BackTrackComponent.js"),c=require("./DiscountCodeComponent.js"),v=require("./EditMediaModal.js"),m=require("./EditMediaV2.js"),b=require("./EditMediaV2.style.js"),g=require("./useEditWhtasappTemplateMedia.js"),f=require("./VariableConnector.js"),h=require("./VariableConnectorsPanel.js"),j=require("./VariableConnectorWhatsApp.js"),O=require("./VariableEditorHeader.js"),C=require("./WhatsAppTemplateCardButtonV2.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const T=x(t).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("styled-components"),i=require("../../input/Input.js"),l=require("../../template-preview/models/TemplateMeta.js"),a=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),u=require("../utils/getDataFromTemplateComponent.js"),r=require("../utils/validateIsUrl.js"),p=require("../utils/validateName.js"),c=require("./BackTrackComponent.js"),v=require("./DiscountCodeComponent.js"),m=require("./EditMediaModal.js"),b=require("./EditMediaV2.js"),g=require("./EditMediaV2.style.js"),f=require("./useEditWhtasappTemplateMedia.js"),h=require("./VariableConnector.js"),j=require("./VariableConnectorsPanel.js"),C=require("./VariableConnectorWhatsApp.js"),O=require("./VariableEditorHeader.js"),x=require("./WhatsAppTemplateCardButtonV2.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const y=T(o).default.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;exports.default=t=>{let{template:x,onTemplateChange:y,whatsappSpecificPickerMeta:E,showVariableModal:V,variableListForImage:B,setDiscountCode:k,fileName:M,setFileName:q}=t;var I,D,R,L,U,P,w,A,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,oe,te,ie,le,ae,se,de,ue,re,pe,ce,ve,me,be;const ge=x.isCarouselType,{originalVariableList:fe,pod:he,extras:je,selectedCarouselIndex:Oe,isProductCarouselType:Ce}=s.useTemplateModalContext(),{descriptionComponents:xe,urlBtns:Te,qrbBtns:ye,imageComponent:Ee,bodyVariables:Ve,headerVariables:Be}=d.getAllDataFromTemplateComponent(x),ke=o.useRef(null),[Me,qe]=o.useState(!1),[Ie,De]=o.useState(-1===Oe?{descriptionComponents:xe,urlBtns:Te,qrbBtns:ye,imageComponent:Ee,bodyVariables:Ve,headerVariables:Be}:{}),{uploadMediaLink:Re,uploadMediaFiles:Le}=E,Ue=g.useEditWhatsappTemplateMedia({uploadMediaLink:Re,uploadMediaFiles:Le,updateTemplateImageUrl:function(e,o){var t,i,l,a,s,d,u,r;let p;p=null!=Oe&&Oe>-1?{components:null===(i=null===(t=x.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[Oe].components,mapping:null===(a=null===(l=null==x?void 0:x.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Oe]}:Object.assign({},x);const c=null===(s=null==p?void 0:p.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==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:o,example:{header_handle:[e]}}),t=[...p.components];t[c]=n,p=Object.assign(Object.assign({},p),{components:t})}p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0}));if(null!=Oe&&Oe>-1){const e=n.cloneDeep(x);e.components[1].cards[Oe].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(u=null==e?void 0:e.mapping)||void 0===u?void 0:u.cards.length)>0&&(e.mapping.cards[Oe]=null!==(r=p.mapping)&&void 0!==r?r:{}),null==y||y(Object.assign({},e)),we(!0)}else null==y||y(Object.assign({},p))},mediaComponent:ge?Ie.imageComponent:Ee,fileRef:ke}),[Pe,we]=o.useState(!1),[Ae,Ne]=o.useState(M),[Se,_e]=o.useState();function Fe(e,o,t){var i,l,a,s,d,u,r,p,c,v;const m=null!=Oe&&Oe>-1?{components:null===(i=Object.assign({},x).components[1].cards)||void 0===i?void 0:i[Oe].components,mapping:null===(l=Object.assign({},x).mapping.cards)||void 0===l?void 0:l[Oe]}:Object.assign({},x),b=n.cloneDeep(m),g="custom"===o&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Oe&&Oe>-1&&Ce){const o=Object.assign({},x).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,o,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let a=null!==(o=null==l?void 0:l[t])&&void 0!==o?o:{};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})),i=null===(s=null===(a=Object.assign({},x).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((n=>{var o;return Object.assign(Object.assign({},n),{buttons:null===(o=null==n?void 0:n.buttons)||void 0===o?void 0:o.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(x);return l.components=o,l.mapping.cards=i,void(null==y||y(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==h&&h>-1){const n=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.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=n[t];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(p=null===(r=null===(u=b.components)||void 0===u?void 0:u[h])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[t]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?qe(!0):(qe(!1),null==k||k(""))}if(null!=Oe&&Oe>-1){const e=n.cloneDeep(x);e.components[1].cards[Oe].components=b.components,e.mapping.cards[Oe]=b.mapping,null==y||y(Object.assign({},e))}else null==y||y(b)}function He(e,o,t){var i,l,a,s,d,u,r;const p=null!=Oe&&Oe>-1?{components:null===(i=Object.assign({},x).components[1].cards)||void 0===i?void 0:i[Oe].components,mapping:null===(l=Object.assign({},x).mapping.cards)||void 0===l?void 0:l[Oe]}:Object.assign({},x);if(null!=Oe&&Oe>-1&&Ce){const o=Object.assign({},x).components.map((n=>{var o;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(o=n.cards)||void 0===o?void 0:o.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var o,i,l;if("BUTTONS"===n.type){const a=null===(o=null==n?void 0:n.buttons)||void 0===o?void 0:o.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[t])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==n?void 0:n.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({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(x);return i.components=o,void(null==y||y(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null===(a=null==p?void 0:p.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let o=n[t];o=Object.assign(Object.assign({},o),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(u=null===(d=p.components)||void 0===d?void 0:d[c])||void 0===u?void 0:u.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==o?void 0:o.text)?o:e)),l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),a=[...p.components];a[c]=l,p.components=a}}if(null!=Oe&&Oe>-1){const e=n.cloneDeep(x);e.components[1].cards[Oe].components=p.components,null==y||y(Object.assign({},e))}else null==y||y(p)}o.useEffect((()=>{var e,n;if(null===(e=x.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))qe(!0);else{qe(!1);const e=null===(n=null==je?void 0:je.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[x]),o.useEffect((()=>{var e,n,o,t;if(null!=Oe&&Oe>-1){const i={components:null===(n=null===(e=x.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Oe].components,mapping:null===(t=null===(o=null==x?void 0:x.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[Oe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:u,bodyVariables:r,headerVariables:p}=d.getAllDataFromTemplateComponent(i);De({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:u,bodyVariables:r,headerVariables:p})}else if(null!=Oe&&-1===Oe){const{descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:l}=d.getAllDataFromTemplateComponent(x);De({descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Oe]),o.useEffect((()=>{var e,n,o,t;if(null!=Oe&&Oe>-1&&Pe){const i={components:null===(n=null===(e=x.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Oe].components,mapping:null===(t=null===(o=null==x?void 0:x.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[Oe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:u,bodyVariables:r,headerVariables:p}=d.getAllDataFromTemplateComponent(i);De({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:u,bodyVariables:r,headerVariables:p}),we(!1)}}),[Pe]);const Qe=ge?Ie.imageComponent:Ee;return Ue.openEditMedia?e.jsx(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(v.default,{mediaComponentFormat:null!==(I=Qe.format)&&void 0!==I?I:l.HEADER_TYPES.IMAGE,uploadMedia:Ue.uploadMedia,variableListForImage:B||[],useEditWhatsappTemplateMediaResponse:Ue,setOpenEditMedia:Ue.setOpenEditMedia,openEditMedia:Ue.openEditMedia,editIconRef:Ue.editIconRef,fileRef:ke})})):e.jsxs(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Ce?"420px":"auto"}},{children:[!!Ie.imageComponent&&!Ce&&e.jsxs(b.EditTemplateMediaContainer,{children:[e.jsx(m.default,{imageName:null!==(R=null===(D=null==Qe?void 0:Qe.example)||void 0===D?void 0:D.header_handle)&&void 0!==R?R:[],handleImageChange:Ue.handleImageChange,mediaType:null==Qe?void 0:Qe.format,error:Ue.error,isLoading:Ue.loading,setOpenEditMedia:Ue.setOpenEditMedia,selectedVariable:u.isVariable(null!==(P=null===(U=null===(L=null==Qe?void 0:Qe.example)||void 0===L?void 0:L.header_handle)||void 0===U?void 0:U[0])&&void 0!==P?P:"")?null===(A=null===(w=null==Qe?void 0:Qe.example)||void 0===w?void 0:w.header_handle)||void 0===A?void 0:A[0]:(null===(S=null===(N=null==x?void 0:x.mapping)||void 0===N?void 0:N.header)||void 0===S?void 0:S[0])?null===(F=null===(_=null==x?void 0:x.mapping)||void 0===_?void 0:_.header)||void 0===F?void 0:F[0]:Ue.selectedVariable}),(null==Ee?void 0:Ee.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(T,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Ae,errorMessage:Se||void 0,onBlur:()=>{if(!Ae)return null==q||q(""),void _e("PDF name is Required");const e=r.validateInputName(Ae);null==q||q(Ae),_e(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{_e(""),Ne(e)}})}):e.jsx(e.Fragment,{})]}),(null===(H=Ie.bodyVariables)||void 0===H?void 0:H.length)>0&&e.jsx(O.default,{containerStyle:{paddingTop:Ie.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===(Q=Ie.descriptionComponents)||void 0===Q?void 0:Q.map(((n,o)=>e.jsx(j.default,{originalVariableList:null!=Oe&&Oe>-1?fe.cards[Oe]:fe,type:n.type,descriptionComponent:n.component,showVariableModal:V},o))),(null===(W=null===(K=null!=Oe&&Oe>-1?null===(Y=fe.cards[Oe])||void 0===Y?void 0:Y.buttons:null==fe?void 0:fe.buttons)||void 0===K?void 0:K.filter((e=>"URL"===e.type)))||void 0===W?void 0:W.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(X=null===(G=null!=Oe&&Oe>-1?null===($=fe.cards[Oe])||void 0===$?void 0:$.buttons:null==fe?void 0:fe.buttons)||void 0===G?void 0:G.filter((e=>he===a.POD.CHATBOT||"URL"===e.type)))||void 0===X?void 0:X.map(((n,o)=>{if("URL"===n.type)return e.jsx(C.default,{variableListIndex:o,CTAoptions:null==E?void 0:E.CTAoptions,button:n,currentVariableList:null!=Oe&&Oe>-1?Object.assign({},fe.cards[Oe]):Object.assign({},fe),updateSelectedURLTemplateBtn:Fe},`${o}_${Oe}`)})),he===a.POD.CHATBOT&&(null===(J=null===(z=ye[0])||void 0===z?void 0:z.component)||void 0===J?void 0:J.buttons)&&(null===(ne=null===(ee=null===(Z=ye[0])||void 0===Z?void 0:Z.component)||void 0===ee?void 0:ee.buttons)||void 0===ne?void 0:ne.length)>0&&e.jsx(p.BackTrackComponent,{backTrackMessage:null===(oe=null==je?void 0:je.backTrackExtra)||void 0===oe?void 0:oe[0],setBackTrackMessage:null===(te=null==je?void 0:je.backTrackExtra)||void 0===te?void 0:te[1]}),(null===(ae=null===(le=null!=Oe&&Oe>-1?null===(ie=fe.cards[Oe])||void 0===ie?void 0:ie.buttons:null==fe?void 0:fe.buttons)||void 0===le?void 0:le.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ae?void 0:ae.length)>0&&(he!==a.POD.CHATBOT?e.jsx(O.default,{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.jsx(p.BackTrackComponent,{backTrackMessage:null===(se=null==je?void 0:je.backTrackExtra)||void 0===se?void 0:se[0],setBackTrackMessage:null===(de=null==je?void 0:je.backTrackExtra)||void 0===de?void 0:de[1]})),null===(pe=null===(re=null!=Oe&&Oe>-1?null===(ue=fe.cards[Oe])||void 0===ue?void 0:ue.buttons:null==fe?void 0:fe.buttons)||void 0===re?void 0:re.filter((e=>"QUICK_REPLY"===e.type)))||void 0===pe?void 0:pe.map(((n,o)=>{if("QUICK_REPLY"===n.type&&he!==a.POD.CHATBOT)return e.jsx(C.default,{variableListIndex:o,QRBoptions:null==E?void 0:E.QRBoptions,button:n,currentVariableList:null!=Oe&&Oe>-1?Object.assign({},fe.cards[Oe]):Object.assign({},fe),updateSelectedQRBTemplateBtn:He},`${o}_${Oe}`)})),he===a.POD.CHATBOT&&Me&&e.jsx(c.DiscountCodeComponent,{discountCode:null===(ce=null==je?void 0:je.discountCodeExtra)||void 0===ce?void 0:ce[0],setDiscountCode:null===(ve=null==je?void 0:je.discountCodeExtra)||void 0===ve?void 0:ve[1]}),null===(be=null!=Oe&&Oe>-1?null===(me=fe.cards[Oe])||void 0===me?void 0:me.buttons:null==fe?void 0:fe.buttons)||void 0===be?void 0:be.map(((n,o)=>{var t,i,l;if("COPY_CODE"===n.type)return e.jsx(f.default,{index:o,variable:{variableName:null!==(t=n.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:n.type},o)}))]}))};
+`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,discountCode:L,setDiscountCode:q,fileName:D,setFileName:I}=o;var R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,ue,re,pe,ce,ve,me,be,ge,fe,he;const je=T.isCarouselType,{originalVariableList:Ce,pod:Oe,extras:xe,selectedCarouselIndex:Te,isProductCarouselType:ye}=s.useTemplateModalContext(),{descriptionComponents:Ee,urlBtns:Ve,qrbBtns:Be,imageComponent:ke,bodyVariables:Me,headerVariables:Le}=u.getAllDataFromTemplateComponent(T),qe=t.useRef(null),De=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Ie,Re]=t.useState(!1),[Ue,Pe]=t.useState(-1===Te?{descriptionComponents:Ee,urlBtns:Ve,qrbBtns:Be,imageComponent:ke,bodyVariables:Me,headerVariables:Le}:{}),{uploadMediaLink:Ae,uploadMediaFiles:we}=V,Ne=f.useEditWhatsappTemplateMedia({uploadMediaLink:Ae,uploadMediaFiles:we,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,u,r;let p;p=null!=Te&&Te>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Te].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Te]}:Object.assign({},T);const c=null===(s=null==p?void 0:p.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==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0}));if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(u=null==e?void 0:e.mapping)||void 0===u?void 0:u.cards.length)>0&&(e.mapping.cards[Te]=null!==(r=p.mapping)&&void 0!==r?r:{}),null==E||E(Object.assign({},e)),_e(!0)}else null==E||E(Object.assign({},p))},mediaComponent:je?Ue.imageComponent:ke,fileRef:qe}),[Se,_e]=t.useState(!1),[Fe,He]=t.useState(D),[Qe,Ye]=t.useState();function Ke(e,t,o){var i,l,a,s,d,u,r,p,c,v;const m=null!=Te&&Te>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},T),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Te&&Te>-1&&ye){const t=Object.assign({},T).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[o])&&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})),i=null===(s=null===(a=Object.assign({},T).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(T);return l.components=t,l.mapping.cards=i,void(null==E||E(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==h&&h>-1){const n=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=n[o];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(p=null===(r=null===(u=b.components)||void 0===u?void 0:u[h])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Re(!0):(Re(!1),null==q||q(""))}if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=b.components,e.mapping.cards[Te]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function We(e,t,o){var i,l,a,s,d,u,r;const p=null!=Te&&Te>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},T);if(null!=Te&&Te>-1&&ye){const t=Object.assign({},T).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const a=null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[o])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==n?void 0:n.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({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null===(a=null==p?void 0:p.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(u=null===(d=p.components)||void 0===d?void 0:d[c])||void 0===u?void 0:u.buttons)&&void 0!==r?r:[]].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({},p.components[c]),{buttons:i}),a=[...p.components];a[c]=l,p.components=a}}if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=p.components,null==E||E(Object.assign({},e))}else null==E||E(p)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Re(!0);else{Re(!1);const e=null===(n=null==xe?void 0:xe.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=u.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Te&&-1===Te){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=u.getAllDataFromTemplateComponent(T);Pe({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Te]),t.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1&&Se){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=u.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),_e(!1)}}),[Se]);const $e=je?Ue.imageComponent:ke;return Ne.openEditMedia?e.jsx(j.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(R=$e.format)&&void 0!==R?R:l.HEADER_TYPES.IMAGE,uploadMedia:Ne.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:Ne,setOpenEditMedia:Ne.setOpenEditMedia,openEditMedia:Ne.openEditMedia,editIconRef:Ne.editIconRef,fileRef:qe})})):e.jsxs(j.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:ye?"420px":"auto"}},{children:[!!Ue.imageComponent&&!ye&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(P=null===(U=null==$e?void 0:$e.example)||void 0===U?void 0:U.header_handle)&&void 0!==P?P:[],handleImageChange:Ne.handleImageChange,mediaType:null==$e?void 0:$e.format,error:Ne.error,isLoading:Ne.loading,setOpenEditMedia:Ne.setOpenEditMedia,selectedVariable:r.isVariable(null!==(N=null===(w=null===(A=null==$e?void 0:$e.example)||void 0===A?void 0:A.header_handle)||void 0===w?void 0:w[0])&&void 0!==N?N:"")?null===(_=null===(S=null==$e?void 0:$e.example)||void 0===S?void 0:S.header_handle)||void 0===_?void 0:_[0]:(null===(H=null===(F=null==T?void 0:T.mapping)||void 0===F?void 0:F.header)||void 0===H?void 0:H[0])?null===(Y=null===(Q=null==T?void 0:T.mapping)||void 0===Q?void 0:Q.header)||void 0===Y?void 0:Y[0]:Ne.selectedVariable}),(null==ke?void 0:ke.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Fe,errorMessage:Qe||void 0,onBlur:()=>{if(!Fe)return null==I||I(""),void Ye("PDF name is Required");const e=p.validateInputName(Fe);null==I||I(Fe),Ye(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Ye(""),He(e)}})}):e.jsx(e.Fragment,{})]}),(null===(K=Ue.bodyVariables)||void 0===K?void 0:K.length)>0&&e.jsx(O.default,{containerStyle:{paddingTop:Ue.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===(W=Ue.descriptionComponents)||void 0===W?void 0:W.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=Te&&Te>-1?Ce.cards[Te]:Ce,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===(X=null===(G=null!=Te&&Te>-1?null===($=Ce.cards[Te])||void 0===$?void 0:$.buttons:null==Ce?void 0:Ce.buttons)||void 0===G?void 0:G.filter((e=>"URL"===e.type)))||void 0===X?void 0:X.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(Z=null===(J=null!=Te&&Te>-1?null===(z=Ce.cards[Te])||void 0===z?void 0:z.buttons:null==Ce?void 0:Ce.buttons)||void 0===J?void 0:J.filter((e=>Oe===a.POD.CHATBOT||"URL"===e.type)))||void 0===Z?void 0:Z.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedURLTemplateBtn:Ke,variableList:k},`${t}_${Te}`)})),Oe===a.POD.CHATBOT&&(null===(ne=null===(ee=Be[0])||void 0===ee?void 0:ee.component)||void 0===ne?void 0:ne.buttons)&&(null===(ie=null===(oe=null===(te=Be[0])||void 0===te?void 0:te.component)||void 0===oe?void 0:oe.buttons)||void 0===ie?void 0:ie.length)>0&&e.jsx(c.BackTrackComponent,{backTrackMessage:null===(le=null==xe?void 0:xe.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==xe?void 0:xe.backTrackExtra)||void 0===ae?void 0:ae[1]}),(null===(ue=null===(de=null!=Te&&Te>-1?null===(se=Ce.cards[Te])||void 0===se?void 0:se.buttons:null==Ce?void 0:Ce.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ue?void 0:ue.length)>0&&(Oe!==a.POD.CHATBOT?e.jsx(O.default,{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.jsx(c.BackTrackComponent,{backTrackMessage:null===(re=null==xe?void 0:xe.backTrackExtra)||void 0===re?void 0:re[0],setBackTrackMessage:null===(pe=null==xe?void 0:xe.backTrackExtra)||void 0===pe?void 0:pe[1]})),null===(me=null===(ve=null!=Te&&Te>-1?null===(ce=Ce.cards[Te])||void 0===ce?void 0:ce.buttons:null==Ce?void 0:Ce.buttons)||void 0===ve?void 0:ve.filter((e=>"QUICK_REPLY"===e.type)))||void 0===me?void 0:me.map(((n,t)=>{if("QUICK_REPLY"===n.type&&Oe!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedQRBTemplateBtn:We},`${t}_${Te}`)})),Oe===a.POD.CHATBOT&&Ie&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(be=null==xe?void 0:xe.discountCodeExtra)||void 0===be?void 0:be[0],setDiscountCode:null===(ge=null==xe?void 0:xe.discountCodeExtra)||void 0===ge?void 0:ge[1],variableList:k}),null===(he=null!=Te&&Te>-1?null===(fe=Ce.cards[Te])||void 0===fe?void 0:fe.buttons:null==Ce?void 0:Ce.buttons)||void 0===he?void 0:he.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(h.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:De,componentType:"BUTTONS"},t)}))]}))};

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=o(t),n=o(i);const c=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t),p=o(i);const c=p.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,d=n.default.div`
+`,d=p.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,7 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=p.default.forwardRef(((t,i)=>{let{display_content:o,channel:p,template:n,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:v}=s.useTemplateModalContext(),w={showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return v?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},w))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:p},{children:[e.jsx("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:l.getPreviewWidth(p),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},w))}))]}))})}));h.displayName="MobilePreview";const m=n.default.div`
+`,h=n.default.forwardRef(((t,i)=>{let{display_content:o,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),f={showSampleValues:h,template:p,channel:n,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{children:[e.jsx("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:l.getPreviewWidth(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));h.displayName="MobilePreview";const m=p.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -8,13 +8,13 @@ export interface TemplateSelectModalContentProps {
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     showSampleValues?: boolean;
     fileName?: string;
     setFileName?: (name: string) => void;
-    variableListFromProps?: VariableListInterfaceV2[];
 }
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, variableListFromProps, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
 export default TemplateSelectModalContent;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
-import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;
@@ -12,8 +12,8 @@ export interface VariableConnectorProps {
     variable: CUSTOM_VARIABLE;
     index: number;
     showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
     setShowDiscountCheckBox?: any;
-    buttonType?: BUTTON_TYPE;
     componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
     CTAoptions?: ButtonPlaceHolderOptions[];
 }

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../custom-date-time/CustomDateTime.js"),o=require("../../dropdown/Dropdown.js"),u=require("../../input/Input.js"),d=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),c=require("../../template-preview/models/Channels.js"),p=require("../../template-preview/models/WhatsAppTemplate.js"),m=require("../../TypographyStyle.js"),v=require("../../../utils/StringUtils.js"),b=require("../../../constants/Theme.js"),g=require("../context/templateModalContext.js"),O=require("../custom-hooks/useAdditionalVariables.js"),j=require("../utils/getVariableNameEmail.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=x(n);const _=y.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),n=require("react"),i=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../custom-date-time/CustomDateTime.js"),u=require("../../dropdown/Dropdown.js"),d=require("../../input/Input.js"),c=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),p=require("../../template-preview/models/Channels.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),O=require("../context/templateModalContext.js"),j=require("../utils/getVariableNameEmail.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=x(i);const y=h.default.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===c.CHANNEL_TYPE.EMAIL?b.COLORS.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===p.CHANNEL_TYPE.EMAIL?g.COLORS.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,h=y.default.div`
+`,_=h.default.div`
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -13,4 +13,4 @@
 	background-color: rgba(0, 0, 0, 0.1);
 	z-index: 1000;
 	cursor: not-allowed;
-`,f={value:"custom_link",label:"Custom URL"},T={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"};exports.Container=_,exports.default=n=>{let{onFocus:x,variable:y,index:N,showVariableModal:C,setShowDiscountCheckBox:P,componentType:A,CTAoptions:V,buttonType:S}=n;var L,k,D,B,H;const[w,Y]=i.useState(!1),[U,R]=i.useState(""),[q,M]=i.useState([]),[I,W]=i.useState(),[$,z]=i.useState(!1),{variableList:Z,setVariableList:F,setVariableCallback:G,setShowVariablePicker:K,device:J,channel:Q,isError:X,originalVariableList:ee,template:te,templateSelectionTriggered:le,setTemplate:ae,setDisplayContent:ie,setOriginalVariableList:ne,globalNormalizedPlaceholders:se,enabledCustomText:oe,pod:ue,selectedCarouselIndex:de,isProductCarouselType:re,disableEditVariable:ce,disableEditExpiry:pe,templateErrorIndexes:me}=g.useTemplateModalContext();function ve(e,t){var l,a,i;const n=e;R(""),W(n),Q===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ge(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Oe||Oe(null!==(a=y.index)&&void 0!==a?a:0,n.value,!0)):(null==Oe||Oe(null!==(i=y.index)&&void 0!==i?i:0,"",!0,n.value),ge("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ge(n.value,"url"===n.bikPlaceholderType?"link":"string"):(R(""),ge("",n.value))}function be(e,t){var l;R(t);const a="custom_link"===(null==I?void 0:I.value)&&t?t.includes("https")?t:`https://${t}`:t;ge(a,"static_expiry"===e?"string":e),Q===c.CHANNEL_TYPE.WHATSAPP&&(null==Oe||Oe(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ge(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Q!==c.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(N+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===J?"template_html_mobile":"template_html_desktop"),n=Q===c.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const s=ee.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ne||ne(s)}if(Q===c.CHANNEL_TYPE.WHATSAPP){if(null!=de&&de>-1&&re){const l=Object.assign({},ee).cards.map(((l,a)=>{var i,n;return"BODY"===A?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))}):"BUTTONS"===A?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ne||ne((e=>Object.assign(Object.assign({},e),{cards:l}))))}const l=null!=de&&de>-1?ee.cards[de]:ee;let u=l.body,d=l.header,r=l.buttons;if("BODY"===A?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===A?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===A&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=de&&de>-1){const e=a.cloneDeep(ee.cards);e[de]={header:d,body:u,buttons:r},null==ne||ne((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ne||ne((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function Oe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=de&&de>-1&&re){const s=Object.assign({},te).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(te);if(l){const l=null===(n=Object.assign({},te).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===A)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===A&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=te.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==ae||ae(o))}const p=null!=de&&de>-1?{components:null===(s=Object.assign({},te).components[1].cards)||void 0===s?void 0:s[de].components,mapping:null===(o=Object.assign({},te).mapping.cards)||void 0===o?void 0:o[de]}:Object.assign({},te),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===A){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===A)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===A&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===A&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===A&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=de&&de>-1&&te){const e=a.cloneDeep(te);e.components[1].cards[de].components=p.components,e.mapping.cards[de]=p.mapping,null==ae||ae(e)}else null==ae||ae(Object.assign({},p))}i.useEffect((()=>{w&&(null==x||x())}),[w]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===J?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);Q===c.CHANNEL_TYPE.EMAIL&&(null==ie||ie(o))}()}),[le]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(Q!==c.CHANNEL_TYPE.MESSAGE||oe){"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[f,T]}),W(f)):"date_time"===(null==y?void 0:y.type)?(l.push({label:"",options:[f,T]}),W(E)):(l.push({label:"",options:[f,T,E]}),W(T));const e=null!=se?se:[];M([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=se?se:[];M([{label:"",options:[T,f]},...e]),a=[{label:"",options:[T,f]},...e]}if((Q===c.CHANNEL_TYPE.WHATSAPP||Q===c.CHANNEL_TYPE.EMAIL||Q===c.CHANNEL_TYPE.MESSAGE)&&y.updatedValue)if(r.placeHolderNamePattern.test(y.updatedValue)&&Q===c.CHANNEL_TYPE.WHATSAPP||y.updatedValue.startsWith("{{")&&Q!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ue===p.POD.CHATBOT&&"BUTTONS"===A){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(y,a,Q);e.value&&W(e)}else"date_time"===y.type?(W(E),R(y.updatedValue),Oe(null!==(e=y.index)&&void 0!==e?e:0,y.updatedValue)):(null===(t=y.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(W(f),R(y.updatedValue.split("https://")[1])):(W(T),R(y.updatedValue))}()}),[de]),i.useEffect((()=>{J&&I&&U&&setTimeout((()=>{ge("custom_link"===(null==I?void 0:I.value)&&U?U.includes("https")?U:`https://${U}`:U,I.value)}),100)}),[J]),i.useEffect((()=>{!$&&I&&y.updatedValue&&setTimeout((()=>{ge("custom_link"===(null==I?void 0:I.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,I.value),z(!0)}),100)}),[I]);const je=e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"static_expiry"}):ve({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e.jsxs(_,Object.assign({channel:Q,focused:w,onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:X&&!I?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(L=y.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==I?void 0:I.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,Object.assign({numberOfLines:1},{children:ue===p.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(k=null==I?void 0:I.value)&&void 0!==k?k:"")?null==I?void 0:I.label:null==I?void 0:I.value:d.truncate(null!==(D=null==I?void 0:I.label)&&void 0!==D?D:"",20,!0)})),ce||"date_time"===(null==y?void 0:y.type)&&pe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(S===p.BUTTON_TYPE.URL&&ue===p.POD.CHATBOT){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});F(e)}else if("limited_time_offer"===A){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});F(e)}else if(S===p.BUTTON_TYPE.COPY_CODE){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});F(e)}})(),G((()=>je)),K(!0)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:ce,options:q,isSearchable:!1,onSelect:ve,defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),("custom_text"===(null==I?void 0:I.value)||"custom_link"===(null==I?void 0:I.value))&&e.jsx(u.Input,{state:ce?"disabled":"none",labelText:"custom_text"===(null==I?void 0:I.value)?"Custom text value":"custom_link"===(null==I?void 0:I.value)?"Custom URL value":"",id:`variable-value-${null==I?void 0:I.value}-${N}`,value:U,errorMessage:X&&(null===(B=null==me?void 0:me.buttons)||void 0===B?void 0:B.includes(null!==(H=null==y?void 0:y.index)&&void 0!==H?H:-1))?U&&0!==U.trim().length?"custom_link"!==I.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${U.trim()}`)&&0!==U.trim().length?"custom_link"!==I.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===A&&"custom_link"!==I.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==I?void 0:I.value)?2e3:"BUTTONS"===A?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===I.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{be(I.value,e)}}),"static_expiry"===(null==I?void 0:I.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[ce&&e.jsx(h,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:U?l.format(new Date(U),"hh:mm a"):l.format(new Date,"hh:mm a"),date:U?new Date(U):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{be("static_expiry",e.toISOString())}})]}))]}))};
+`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=i=>{let{onFocus:x,variable:h,index:N,showVariableModal:C,variableList:A,setShowDiscountCheckBox:S,componentType:P,CTAoptions:V}=i;var k,L,D,B,H;const[w,Y]=n.useState(!1),[U,q]=n.useState(""),[R,M]=n.useState([]),[I,W]=n.useState(),[$,z]=n.useState(!1),[Z,F]=n.useState(!1),{device:G,channel:K,isError:J,originalVariableList:Q,template:X,templateSelectionTriggered:ee,setTemplate:te,setDisplayContent:le,setOriginalVariableList:ae,globalNormalizedPlaceholders:ne,enabledCustomText:ie,pod:se,selectedCarouselIndex:oe,isProductCarouselType:ue,disableEditVariable:de,disableEditExpiry:ce,templateErrorIndexes:re}=O.useTemplateModalContext();function pe(){var e,t;const l=[];let a=[];if(K!==p.CHANNEL_TYPE.MESSAGE||ie){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),W(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),W(T)):(l.push({label:"",options:[f,E,T]}),W(E));const e=null!=ne?ne:[];M([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ne?ne:[];M([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((K===p.CHANNEL_TYPE.WHATSAPP||K===p.CHANNEL_TYPE.EMAIL||K===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(r.placeHolderNamePattern.test(h.updatedValue)&&K===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&K!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(se===m.POD.CHATBOT&&"BUTTONS"===P){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(h,a,K);e.value&&W(e)}else"date_time"===h.type?(W(T),q(h.updatedValue),ge(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(W(f),q(h.updatedValue.split("https://")[1])):(W(E),q(h.updatedValue))}function me(e,t){var l,a,n;const i=e;q(""),W(i),K===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(be(null!==(l=i.value)&&void 0!==l?l:"","string"),null==ge||ge(null!==(a=h.index)&&void 0!==a?a:0,i.value,!0)):(null==ge||ge(null!==(n=h.index)&&void 0!==n?n:0,"",!0,i.value),be("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?be(i.value,"url"===i.bikPlaceholderType?"link":"string"):(q(""),be("",i.value))}function ve(e,t){var l;q(t);const a="custom_link"===(null==I?void 0:I.value)&&t?t.includes("https")?t:`https://${t}`:t;be(a,"static_expiry"===e?"string":e),K===p.CHANNEL_TYPE.WHATSAPP&&(null==ge||ge(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function be(e,t){var l,n,i,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(K!==p.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(N+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),i=K===p.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=Q.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ae||ae(s)}if(K===p.CHANNEL_TYPE.WHATSAPP){if(null!=oe&&oe>-1&&ue){const l=Object.assign({},Q).cards.map(((l,a)=>{var n,i;return"BODY"===P?Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))}):"BUTTONS"===P?Object.assign(Object.assign({},l),{buttons:null===(i=l.buttons)||void 0===i?void 0:i.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ae||ae((e=>Object.assign(Object.assign({},e),{cards:l}))))}const l=null!=oe&&oe>-1?Q.cards[oe]:Q;let u=l.body,d=l.header,c=l.buttons;if("BODY"===P?u=null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===P?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===P&&(c=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=oe&&oe>-1){const e=a.cloneDeep(Q.cards);e[oe]={header:d,body:u,buttons:c},null==ae||ae((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ae||ae((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:c})))}}function ge(e,t,l,n){var i,s,o,u,d,c,r;if(null!=oe&&oe>-1&&ue){const s=Object.assign({},X).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,n,i,s,o,u;if("BODY"===l.type&&"BODY"===P){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(o=null===(s=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}return l}if("BUTTONS"===l.type&&"BUTTONS"===P){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(X);if(l){const l=null===(i=Object.assign({},X).mapping.cards)||void 0===i?void 0:i.map(((l,a)=>{var i,s,o;if("BODY"===P)return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===P&&(null==l?void 0:l.buttons)){let i=-1,u=-1;return null===(s=X.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(i++,l===e&&"URL"==t.type&&(u=i))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===n?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==te||te(o))}const p=null!=oe&&oe>-1?{components:null===(s=Object.assign({},X).components[1].cards)||void 0===s?void 0:s[oe].components,mapping:null===(o=Object.assign({},X).mapping.cards)||void 0===o?void 0:o[oe]}:Object.assign({},X),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,s,o,u,d,c,r;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(o=null===(s=null===(i=p.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(c=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===P){const a=null===(r=l.buttons)||void 0===r?void 0:r.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===P&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===P&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===P&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,a=-1;m.forEach((t=>{var n;"BUTTONS"===t.type&&(null===(n=t.buttons)||void 0===n||n.forEach(((t,n)=>{"URL"===t.type&&(l++,n===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===n?"((customPlaceholderName))":t:e))})}if(null!=oe&&oe>-1&&X){const e=a.cloneDeep(X);e.components[1].cards[oe].components=p.components,e.mapping.cards[oe]=p.mapping,null==te||te(e)}else null==te||te(Object.assign({},p))}return n.useEffect((()=>{w&&(null==x||x())}),[w]),n.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===G?"template_html_mobile":"template_html_desktop",s=document.getElementById(i),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==s?void 0:s.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);K===p.CHANNEL_TYPE.EMAIL&&(null==le||le(o))}()}),[ee]),n.useEffect((()=>{pe()}),[]),n.useEffect((()=>{pe()}),[oe]),n.useEffect((()=>{G&&I&&U&&setTimeout((()=>{be("custom_link"===(null==I?void 0:I.value)&&U?U.includes("https")?U:`https://${U}`:U,I.value)}),100)}),[G]),n.useEffect((()=>{!Z&&I&&h.updatedValue&&setTimeout((()=>{be("custom_link"===(null==I?void 0:I.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,I.value),F(!0)}),100)}),[I]),e.jsxs(y,Object.assign({channel:K,focused:w,onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:J&&!I?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==I?void 0:I.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:se===m.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(L=null==I?void 0:I.value)&&void 0!==L?L:"")?null==I?void 0:I.label:null==I?void 0:I.value:c.truncate(null!==(D=null==I?void 0:I.label)&&void 0!==D?D:"",20,!0)})),de||"date_time"===(null==h?void 0:h.type)&&ce?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{z(!$)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:de,options:R,isSearchable:!1,onSelect:me,defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),("custom_text"===(null==I?void 0:I.value)||"custom_link"===(null==I?void 0:I.value))&&e.jsx(d.Input,{state:de?"disabled":"none",labelText:"custom_text"===(null==I?void 0:I.value)?"Custom text value":"custom_link"===(null==I?void 0:I.value)?"Custom URL value":"",id:`variable-value-${null==I?void 0:I.value}-${N}`,value:U,errorMessage:J&&(null===(B=null==re?void 0:re.buttons)||void 0===B?void 0:B.includes(null!==(H=null==h?void 0:h.index)&&void 0!==H?H:-1))?U&&0!==U.trim().length?"custom_link"!==I.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${U.trim()}`)&&0!==U.trim().length?"custom_link"!==I.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===P&&"custom_link"!==I.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==I?void 0:I.value)?2e3:"BUTTONS"===P?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===I.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ve(I.value,e)}}),"static_expiry"===(null==I?void 0:I.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[de&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:U?l.format(new Date(U),"hh:mm a"):l.format(new Date,"hh:mm a"),date:U?new Date(U):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ve("static_expiry",e.toISOString())}})]})),$&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:$,setShowVariable:z,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!1),"{{custom.url}}"===e.actualValue?me({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?me({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?me({label:e.displayName,selected:!0,value:"static_expiry"}):me({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts

@@ -1,3 +1,4 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type ComponentType = WhatsAppTemplate['components'][0];
 export interface VariableConnectorWhatsAppProps {
@@ -5,6 +6,7 @@ export interface VariableConnectorWhatsAppProps {
     descriptionComponent: ComponentType;
     type: ComponentType['type'];
     showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
 }
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnectorWhatsApp;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),r=require("./VariableConnector.js");exports.default=d=>{let{descriptionComponent:n,type:o,showVariableModal:s}=d;var p,c,x,u,b,v;const{originalVariableList:y,disableEditVariable:m,selectedCarouselIndex:j}=t.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(p=null!=j&&j>-1?y.cards[j].body:null==y?void 0:y.body)||void 0===p?void 0:p.map(((t,d)=>m||!t.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",d+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),d):e.jsx(r.default,{index:d,variable:t,showVariableModal:s,componentType:n.type},`${d}-${t.index}`)))}):"HEADER"===n.type?e.jsx("div",{children:null===(c=null!=j&&j>-1?y.cards[j].header:null==y?void 0:y.header)||void 0===c?void 0:c.map(((t,d)=>t.isEditableVariable?e.jsx(r.default,{index:d,variable:t,showVariableModal:s,componentType:n.type},`${d}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",d+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),d)))}):"limited_time_offer"===n.type?e.jsx("div",{children:e.jsx(r.default,{index:0,variable:{variableName:null!==(u=null===(x=null==n?void 0:n.limited_time_offer)||void 0===x?void 0:x.text)&&void 0!==u?u:"Expires after",updatedValue:null!==(v=null===(b=n.example)||void 0===b?void 0:b.limited_time_offer)&&void 0!==v?v:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:s,componentType:n.type},`${n.type}`)}):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),r=require("../custom-hooks/useAdditionalVariables.js"),d=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:o,type:n,showVariableModal:p,variableList:b}=s;var c,u,x,v,y,m;const{originalVariableList:j,disableEditVariable:h,selectedCarouselIndex:V}=t.useTemplateModalContext(),g=r.useAdditionalVariables({variableList:b,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});return"BODY"===o.type?e.jsx("div",{children:null===(c=null!=V&&V>-1?j.cards[V].body:null==j?void 0:j.body)||void 0===c?void 0:c.map(((t,r)=>h||!t.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===n?"Header":""," Locked variable ",r+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r):e.jsx(d.default,{index:r,variable:t,showVariableModal:p,variableList:b,componentType:o.type},`${r}-${t.index}`)))}):"HEADER"===o.type?e.jsx("div",{children:null===(u=null!=V&&V>-1?j.cards[V].header:null==j?void 0:j.header)||void 0===u?void 0:u.map(((t,r)=>t.isEditableVariable?e.jsx(d.default,{index:r,variable:t,showVariableModal:p,variableList:b,componentType:o.type},`${r}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===n?"Header":""," Locked variable ",r+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r)))}):"limited_time_offer"===o.type?e.jsx("div",{children:e.jsx(d.default,{index:0,variable:{variableName:null!==(v=null===(x=null==o?void 0:o.limited_time_offer)||void 0===x?void 0:x.text)&&void 0!==v?v:"Expires after",updatedValue:null!==(m=null===(y=o.example)||void 0===y?void 0:y.limited_time_offer)&&void 0!==m?m:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:p,variableList:g,componentType:o.type},`${o.type}`)}):e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts

@@ -1,10 +1,12 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface VariableConnectorsProps {
     onFocus?: (variableIndex: number) => void;
     showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
 }
-declare const VariableConnectors: ({ onFocus, showVariableModal, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnectors;
 export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("react"),a=require("styled-components"),s=require("../../checkBox/CheckBox.js"),r=require("../../input/Input.js"),l=require("../../tooltips/Tooltip.js"),n=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),c=require("../../../assets/icons/plus.svg.js"),d=require("../context/templateModalContext.js"),u=require("./VariableConnector.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=h(a);const p=x.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js");var s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../context/templateModalContext.js"),h=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const p=b.default.div`
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,g=x.default.button`
+`,j=b.default.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@
 		align-items: center;
 		gap: 5px;
 	}
-`;exports.AddVariableStyled=g,exports.Container=p,exports.default=a=>{let{onFocus:h,showVariableModal:x,discountCode:j,setDiscountCode:b}=a;const{originalVariableList:f,disableEditVariable:y,setVariableCallback:m,setShowVariablePicker:v}=d.useTemplateModalContext(),[O,C]=i.useState(!1),[k,S]=i.useState(!1),[V,w]=i.useState(""),[q,T]=i.useState(!1),B=i.useRef(),E=i.useRef();i.useEffect((()=>{b&&b(j+V)}),[V]),i.useEffect((()=>{f.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),j&&T&&T(!0))}))}),[f]);const L=e=>{w(e.actualValue)};return e.jsxs(p,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(n.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(l.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(t.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(n.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==f?void 0:f.map(((t,i)=>!t.isEditableVariable||y?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(n.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",i+1]})),e.jsx(r.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),i):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(u.default,{index:i,variable:t,onFocus:()=>null==h?void 0:h(i),showVariableModal:x,setShowDiscountCheckBox:C})}),i))),(O||j)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(s.CheckBox,{isChecked:q,onValueChange:()=>{q&&b&&b(""),T(!q)}}),e.jsx(n.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),q&&e.jsxs("div",Object.assign({ref:B,style:{margin:10}},{children:[e.jsx(r.Input,{placeholder:"Enter your discount code",onChangeText:e=>{b&&b(e)},value:j,onFocus:()=>{S(!0)},onBlur:e=>{var t;"addVar"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.id)?(B.current&&B.current.focus(),S(!0)):S(!1)},noErrorHint:!0,validate:e=>[!0,""]}),k&&e.jsx(g,Object.assign({ref:E,id:"addVar",onClick:e=>{e.stopPropagation(),m((()=>L)),v(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(c.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]}))]})};
+`;exports.AddVariableStyled=j,exports.Container=p,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[q,S]=t.useState(!1),[C,w]=t.useState(!1),[k,T]=t.useState(""),[B,L]=t.useState(!1),E=t.useRef(),A=t.useRef();return t.useEffect((()=>{v&&v(f+k)}),[k]),t.useEffect((()=>{y.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(O(!0),f&&L&&L(!0))}))}),[y]),e.jsxs(p,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((a,t)=>!a.isEditableVariable||m?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(h.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:g,setShowDiscountCheckBox:O})}),t))),(V||f)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&v&&v(""),L(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{v&&v(e)},value:f,onFocus:()=>{S(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),S(!0)):(S(!1),w(!1))},noErrorHint:!0,validate:e=>[!0,""]}),q&&e.jsx(j,Object.assign({ref:A,id:"addVar",onClick:e=>{e.stopPropagation(),w(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),C&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:C,setShowVariable:w,variableValue:k,setVariableValue:T,placeholder:"Add a variable",customTrigger:e=>{T(e.actualValue),S(!1)}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts

@@ -1,3 +1,4 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
 import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
 import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
@@ -10,7 +11,8 @@ export interface WhatsAppTemplateCardButtonV2Props {
     button: TEMPLATE_BUTTON;
     CTAoptions?: ButtonPlaceHolderOptions[];
     QRBoptions?: ButtonPlaceHolderOptions[];
+    variableList?: VariableListInterfaceV2[];
     variableListIndex: number;
 }
-declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, currentVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, currentVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
 export default WhatsAppTemplateCardButtonV2;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:O,currentVariableList:v,CTAoptions:x,QRBoptions:f}=p;var y,L,h,R;const[U,V]=l.useState(""),[T,C]=l.useState(),{isError:I,disableEditVariable:w,pod:q,selectedCarouselIndex:P,originalVariableList:E,setOriginalVariableList:N,isProductCarouselType:S}=c.useTemplateModalContext();function _(e){if(V(e),null!=P&&P>-1&&S){const l=t.cloneDeep(E);if("URL"===m.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==N||N((e=>Object.assign(Object.assign({},e),{cards:t}))),null==g||g(`https://${e}`,"custom",j)}return}let l=v.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=P&&P>-1?E.cards[P]:E);if(a.buttons=s,null!=P&&P>-1){const e=[...E.cards];e[P]=a,null==N||N((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==N||N((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==g||g(`https://${e}`,"custom",j)}return l.useEffect((()=>{var e;if(m.buttonVariable&&n.editableVarPattern.test(m.buttonVariable))C(i.CUSTOM_URL_NAME),V((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&C(t[e])}}),[]),q!==o.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:w,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,l){const s=e;C(s);const a=("URL"===m.type?x:f).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=P&&P>-1&&S){const e=t.cloneDeep(E);if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j),null==N||N((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",j),null==N||N((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===m.type){let t=v.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j)}else{let t=v.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=v.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",j)}const l=Object.assign({},null!=P&&P>-1?E.cards[P]:E);if(l.buttons=e,null!=P&&P>-1){const e=[...E.cards];e[P]=l,null==N||N((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==N||N((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else _("")},defaultOptions:T?[Object.assign(Object.assign({},T),{selected:!0})]:[]})})),"custom_link"===(null==T?void 0:T.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:w?"disabled":"none",errorMessage:I?U?d.validateIsUrl(U)?"":"Enter valid URL":"Required field":"",value:U,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:_,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(y=m.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(L=m.example)||void 0===L?void 0:L[0]}`:null!==(h=m.buttonVariable)&&void 0!==h?h:"",type:"link",isEditableVariable:!0,index:null!==(R=m.index)&&void 0!==R?R:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:m.type,CTAoptions:x})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),b=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=j=>{let{variableListIndex:m,button:g,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:O,currentVariableList:x,CTAoptions:f,QRBoptions:y,variableList:L}=j;var h,R,U,V;const[C,T]=l.useState(""),[I,w]=l.useState(),q=d.useAdditionalVariables({variableList:L,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:N,disableEditVariable:P,pod:E,selectedCarouselIndex:S,originalVariableList:_,setOriginalVariableList:B,isProductCarouselType:H}=c.useTemplateModalContext();function M(e){if(T(e),null!=S&&S>-1&&H){const l=t.cloneDeep(_);if("URL"===g.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[m];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==B||B((e=>Object.assign(Object.assign({},e),{cards:t}))),null==v||v(`https://${e}`,"custom",m)}return}let l=x.buttons.filter((e=>"URL"===e.type))[m];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=S&&S>-1?_.cards[S]:_);if(a.buttons=s,null!=S&&S>-1){const e=[..._.cards];e[S]=a,null==B||B((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==B||B((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==v||v(`https://${e}`,"custom",m)}return l.useEffect((()=>{var e;if(g.buttonVariable&&n.editableVarPattern.test(g.buttonVariable))w(i.CUSTOM_URL_NAME),T((null===(e=g.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===g.type?f:y;e="URL"===g.type?t.findIndex((e=>e.placeHolder===g.buttonVariable)):t.findIndex((e=>e.label===g.flowName)),e>-1&&w(t[e])}}),[]),E!==o.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[g.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:P,options:"URL"===g.type?f:y,isSearchable:!0,onSelect:function(e,l){const s=e;w(s);const a=("URL"===g.type?f:y).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=S&&S>-1&&H){const e=t.cloneDeep(_);if("URL"===g.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[m];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",m),null==B||B((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===g.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[m];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",m),null==B||B((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===g.type){let t=x.buttons.filter((e=>"URL"===e.type))[m];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",m)}else{let t=x.buttons.filter((e=>"QUICK_REPLY"===e.type))[m];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=x.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",m)}const l=Object.assign({},null!=S&&S>-1?_.cards[S]:_);if(l.buttons=e,null!=S&&S>-1){const e=[..._.cards];e[S]=l,null==B||B((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==B||B((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else M("")},defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),"custom_link"===(null==I?void 0:I.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:P?"disabled":"none",errorMessage:N?C?b.validateIsUrl(C)?"":"Enter valid URL":"Required field":"",value:C,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:M,maxCharLimit:2e3})}))]}):e.jsx(p.default,{index:m,variable:{variableName:null!==(h=g.text)&&void 0!==h?h:"",updatedValue:"((customPlaceholderName))"===g.buttonVariable?`${null===(R=g.example)||void 0===R?void 0:R[0]}`:null!==(U=g.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(V=g.index)&&void 0!==V?V:0},showVariableModal:!0,componentType:"BUTTONS",variableList:q,CTAoptions:f})};

package/dist/cjs/components/template-preview/helpers/VariableEditorHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../helpers/BaseWhatsappContentLang.helper.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js");var r=require("../constants/regexPatterns.js");const a=new e.BaseWhatsappContentLangHelper;exports.VariableEditorHelper=class{format(e,l){var t;if(!e)return"";const n=new RegExp(r.variablePattern,"g"),p=e.match(n),c=null!==(t=null==l?void 0:l.map((e=>{let{placeholder:r}=e;return r})))&&void 0!==t?t:[],o=e.split(r.variablePattern).map(((e,r)=>{var a;const t=null==p?void 0:p[r];if(t){const r=t.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),n=c.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return n>-1?e+'<code style="color: #731DCF">'+(null===(a=null==l?void 0:l[n])||void 0===a?void 0:a.value)+"</code>":e+t}return e})).join("");return a.getHTML(o)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../helpers/BaseWhatsappContentLang.helper.js");require("../../curtain/CurtainHelper.js");var r=require("../constants/regexPatterns.js");const a=new e.BaseWhatsappContentLangHelper;exports.VariableEditorHelper=class{format(e,l){var t;if(!e)return"";const n=new RegExp(r.variablePattern,"g"),p=e.match(n),c=null!==(t=null==l?void 0:l.map((e=>{let{placeholder:r}=e;return r})))&&void 0!==t?t:[],o=e.split(r.variablePattern).map(((e,r)=>{var a;const t=null==p?void 0:p[r];if(t){const r=t.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),n=c.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return n>-1?e+'<code style="color: #731DCF">'+(null===(a=null==l?void 0:l[n])||void 0===a?void 0:a.value)+"</code>":e+t}return e})).join("");return a.getHTML(o)}};

package/dist/cjs/helpers/index.d.ts

@@ -1,4 +1,3 @@
 export * from './BaseWhatsappContentLang.helper';
 export * from '../components/curtain/CurtainHelper';
 export * from '../utils/resizeImage';
-export * from '../components/variable-picker-v3/model';