@bikdotai/bik-component-library 0.0.512 → 0.0.513-beta.0

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

@@ -26,6 +26,7 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
+	height: 100%;
 `,n=e.div`
 	padding-bottom: 0px;
 	min-width: 285px;

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

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

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

@@ -15,5 +15,5 @@ export interface EditWhatsAppTemplateV2Props {
     fileName?: string;
     setFileName?: (name: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as n,useRef as i,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,mediaComponent:m,uploadMediaFiles:u,fileRef:f}=d,{template:v,selectedCarouselIndex:g,setTemplate:h}=s(),[b,I]=n(void 0),[y,j]=n(),[E,M]=n(!1),[O,U]=n(""),[C,k]=n(!1),[w,A]=n(),N=i(null);function T(o){var n;return e(this,void 0,void 0,(function*(){const e=new l;if(o instanceof Blob){const i=e.validate({file:o});if(i)U(i),k(!1),M(!1);else{const e=m.format===a.IMAGE,i=yield u({file:o,fileName:b,isImage:e});if(i.success){const[e]=o.type.split("/");p(null!==(n=i.url)&&void 0!==n?n:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else k(!1),U("An unknown technical error occurred");k(!1),M(!1)}}else U("An unknown technical error occurred"),k(!1)}))}function x(){var e;(null===(e=null==f?void 0:f.current)||void 0===e?void 0:e.click)&&f.current.click()}return t((()=>{I(void 0),A(void 0),j(void 0),M(!1),k(!1),U("")}),[g]),{uploadMedia:function(n){var i,t,s,d,u,f;return e(this,void 0,void 0,(function*(){if(U(""),j(""),n)if(n.startsWith("https"))try{if(k(!0),c){const e=yield c(n),{type:o,size:t,success:s}=e;if(s){const n=(new l).validate({linkData:{type:o,size:t}});if(n)return U(n),void k(!1);const[s]=o.split("/");p(null!==(i=e.url)&&void 0!==i?i:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),U("An unknown technical error occurred");k(!1)}else{const e=yield fetch(n),o=yield e.blob();yield T(o)}}catch(e){k(!1),U("An unknown technical error occurred")}else if(r(n)){let e;if(j(n),e=null!=g&&g>-1?{components:null===(s=null===(t=v.components[1])||void 0===t?void 0:t.cards)||void 0===s?void 0:s[g].components,mapping:null===(u=null===(d=null==v?void 0:v.mapping)||void 0===d?void 0:d.cards)||void 0===u?void 0:u[g]}:Object.assign({},v),e.components){const o=null===(f=null==e?void 0:e.components)||void 0===f?void 0:f.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const i=Object.assign(Object.assign({},e.components[o]),{format:m.format,example:{header_handle:[n]}}),t=[...e.components];t[o]=i,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[n]})),k(!1),null!=g&&g>-1){const n=o(v);n.components[1].cards[g].components=e.components,n.mapping.cards[g]=e.mapping,null==h||h(Object.assign({},n))}else null==h||h(Object.assign({},e))}else k(!1),U("Invalid URL or variable");else x()}))},processImageUpload:T,handleImageUpload:function(e){var o;U(""),k(!0);const n=null===(o=e.target.files)||void 0===o?void 0:o[0];if(m.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==n?void 0:n.name)},n&&e.readAsDataURL(n)}else T(n)},handleImageChange:x,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),U("");const e=yield fetch(o),n=yield e.blob();yield T(n),A(void 0),M(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:y,setSelectedVariable:j,openEditMedia:E,setOpenEditMedia:M,selectedImage:w,setSelectedImage:A,loading:C,setLoading:k,error:O,setError:U}};export{d as useEditWhatsappTemplateMedia};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as n,useRef as i,useEffect as l}from"react";import{FileUploaderHelper as t}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,mediaComponent:u,uploadMediaFiles:m,fileRef:f}=d,{template:v,selectedCarouselIndex:g,setTemplate:h}=s(),[b,I]=n(void 0),[y,M]=n(),[j,C]=n(!1),[E,O]=n(""),[U,k]=n(!1),[w,A]=n(),N=i(null);function T(o){var n;return e(this,void 0,void 0,(function*(){const e=new t;if(o instanceof Blob){const i=e.validate({file:o});if(i)O(i),k(!1),C(!1);else{const e=u.format===a.IMAGE,i=yield m({file:o,fileName:b,isImage:e});if(i.success){const[e]=o.type.split("/");p(null!==(n=i.url)&&void 0!==n?n:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else O("An unknown technical error occurred");k(!1),C(!1)}}else O("An unknown technical error occurred"),k(!1)}))}function x(){var e;console.log("handleImageChange",f,null==f?void 0:f.current),(null===(e=null==f?void 0:f.current)||void 0===e?void 0:e.click)&&f.current.click()}return l((()=>{I(void 0),A(void 0),M(void 0),C(!1),k(!1),O("")}),[g]),{uploadMedia:function(n){var i,l,s,d,m,b;return e(this,void 0,void 0,(function*(){if(O(""),M(""),console.log("uef uploadMedia",f,null==f?void 0:f.current),n)if(n.startsWith("https"))try{if(k(!0),console.log("uploadMediaLink",c),c){const e=yield c(n),{type:o,size:l,success:s}=e;if(s){const n=(new t).validate({linkData:{type:o,size:l}});if(n)return O(n),void k(!1);const[s]=o.split("/");p(null!==(i=e.url)&&void 0!==i?i:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else O("An unknown technical error occurred");k(!1)}else{const e=yield fetch(n),o=yield e.blob();yield T(o)}}catch(e){O("An unknown technical error occurred")}else if(r(n)){let e;if(M(n),e=null!=g&&g>-1?{components:null===(s=null===(l=v.components[1])||void 0===l?void 0:l.cards)||void 0===s?void 0:s[g].components,mapping:null===(m=null===(d=null==v?void 0:v.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[g]}:Object.assign({},v),e.components){const o=null===(b=null==e?void 0:e.components)||void 0===b?void 0:b.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const i=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[n]}}),l=[...e.components];l[o]=i,e.components=l}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[n]})),k(!1),null!=g&&g>-1){const n=o(v);n.components[1].cards[g].components=e.components,n.mapping.cards[g]=e.mapping,null==h||h(Object.assign({},n))}else null==h||h(Object.assign({},e))}else k(!1),O("Invalid URL or variable");else x()}))},processImageUpload:T,handleImageUpload:function(e){var o;O(""),k(!0);const n=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==n?void 0:n.name)},n&&e.readAsDataURL(n)}else T(n)},handleImageChange:x,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),O("");const e=yield fetch(o),n=yield e.blob();yield T(n),A(void 0),C(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:y,setSelectedVariable:M,openEditMedia:j,setOpenEditMedia:C,selectedImage:w,setSelectedImage:A,loading:U,setLoading:k,error:E,setError:O}};export{d as useEditWhatsappTemplateMedia};

package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js

@@ -1,10 +1,10 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as a}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{getPreviewPropLen as n}from"../utils/getPreviewPropLen.js";import m from"./ChatHeader.js";import{ChatUIV2 as c}from"./ChatUiV2.js";const d=o.div`
-	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a})`};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import r from"styled-components";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as s}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{getPreviewPropLen as p}from"../utils/getPreviewPropLen.js";import n from"./ChatHeader.js";import{ChatUIV2 as d}from"./ChatUiV2.js";const m=r.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f')"};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
-`,l=o(i)`
-	color: ${p.content.primary};
-`,h=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===n(o)?e(t,{children:o.zeroStateComponent}):a?e(c,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(d,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(m,{}),r("div",Object.assign({style:{padding:"small"===o.size?"12px 32px 12px 12px":`16px ${o.isWhatsappCarousel?"0px":"56px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(l,{children:"Preview"})})),e(c,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{h as WhatsappLikePreviewV2};
+`,c=r(s)`
+	color: ${i.content.primary};
+`,l=r=>{const{hideDeviceContainerInPreview:s}=a();return 3===p(r)?e(o,{children:r.zeroStateComponent}):s?e(d,Object.assign({showHeader:r.showHeader},r)):e(o,{children:t(m,Object.assign({style:r.containerStyle,showHeader:r.showHeader,isWhatsappCarousel:r.isWhatsappCarousel},{children:[r.showHeader&&e(n,{}),t("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":`16px ${r.isWhatsappCarousel?"0px":"56px"} ${r.isWhatsappCarousel?"2px":"16px"} 16px`}},{children:[!r.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(c,{children:"Preview"})})),e(d,Object.assign({showHeader:r.showHeader},r))]}))]}))})};export{l as WhatsappLikePreviewV2};

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

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

package/dist/esm/components/variable-picker-v3/Content.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { VariablePickerV3Props } from './model';
+type Props = VariablePickerV3Props;
+export declare const VariablePickerContent: React.FC<Props>;
+export {};

package/dist/esm/components/variable-picker-v3/Content.js

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as o,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/arrow_back.svg.js";import n from"../../assets/icons/plus.svg.js";import r from"../../assets/icons/triangle_error.svg.js";import{useState as l,useEffect as a}from"react";import{COLORS as c}from"../../constants/Theme.js";import{BikAccordion as d}from"../accordion/Accordion.js";import{IconButton as h}from"../icon-button/IconButton.js";import{Input as m}from"../input/Input.js";import{ListItem as p}from"../list-item/ListItem.js";import{Switch as g}from"../switch/Switch.js";import{Tooltip as b}from"../tooltips/Tooltip.js";import{TitleRegular as y,BodySecondary as f,BodyCaption as v,TitleSmall as u}from"../TypographyStyle.js";import{VariablePickerContext as j}from"./context.js";import x from"./NoResult.js";import{showOnlyRecommendedVariables as k}from"./recommendVaribles.js";import{searchVariables as S}from"./searchVariables.js";import{HeaderWrapper as O,RecommendWrapper as w,BackHeader as N,Container as I}from"./styles.js";import C from"./SubHeaderItems.js";const B=B=>{const{data:T,onSelect:R,showHeader:V,showBackButton:H,onBackButtonClick:P}=B,[_,L]=l(T),[$,A]=l(""),[z,D]=l([]),[K,q]=l(""),[E,F]=l(!1),[G,J]=l([]);a((()=>{z.length>0?J([z[z.length-1]]):J(T)}),[z]);const M=e=>{let t=104;return z.length>0&&(t+=54),`calc(${e}px - ${t}px)`};return t(j.Provider,Object.assign({value:{variables:_,searchText:$,subHeaderStack:z,showRecommended:E,setSubHeaderStack:D,setSearchText:A,setVariables:L,setShowRecommended:F}},{children:o("div",Object.assign({tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:4},onClick:e=>e.stopPropagation()},{children:[(V||H)&&o(O,{children:[H&&t(h,{Icon:()=>t(i,{width:16,height:16,style:{display:"flex",color:c.content.primary}}),onClick:P}),V&&t(y,{children:"Select Variable"})]}),t("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:c.surface.subdued}},{children:t(m,{id:"search-bar-v3-picker",onBlur:e=>{B.onSearchBlur&&B.onSearchBlur(e)},value:$,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||q("");const t=S(e,G,z);if(E){const e=k(t,z);L(e)}else L(t);A(e);const o=z.length>0?z[z.length-1].displayName:"home";q(o)}})})),o(w,{children:[t(f,Object.assign({style:{color:c.content.secondary}},{children:"Only Recommended"})),t(g,{value:E,onValueChange:t=>e(void 0,void 0,void 0,(function*(){yield(t=>e(void 0,void 0,void 0,(function*(){if(F(t),t){const e=k(_,z);L(e)}else if(z.length>0){const e=K==z[z.length-1].displayName;if($.length>0&&e){const e=S($,G,z);L(e)}else L([z[z.length-1].variables])}else if($.length>0){const e=S($,G,z);L(e)}else L(T)})))(t)}))})]}),z.length>0&&o(N,{children:[t("div",Object.assign({style:{position:"absolute",left:16}},{children:t(h,{id:"back-btn-v3",style:{display:"flex"},Icon:()=>t(i,{width:12,height:12,style:{color:c.content.secondary}}),onClick:e=>{e.stopPropagation();let t=$;const o=[...z],s=o.pop();if(D(o),s.displayName===K&&(A(""),t=""),t.length>0){const e=o.length>0?[o[o.length-1]]:T,s=S(t,e,o);if(E){const e=k(s,o);L(e)}else L(s)}else if(o.length>0)if(E){const e=k([o[o.length-1].variables],o);L(e)}else L([o[o.length-1].variables]);else if(E){const e=k(T,z);L(e)}else L(T)}})})),t(v,Object.assign({style:{color:c.content.secondary}},{children:z[z.length-1].displayName}))]}),t(s,{children:_.length>0?t(I,Object.assign({height:M(500)},{children:_.map(((e,s)=>e.displayName&&void 0!==e.variables?t("div",Object.assign({style:{borderBottom:`1px solid ${c.stroke.primary}`}},{children:t(d,Object.assign({headerPadding:"12px 16px",header:t(u,Object.assign({style:{color:c.content.secondary}},{children:e.displayName}))},{children:t(C,{variable:e.variables,onSelect:R})}))}),s):e.displayName?t(p,{version:"2.0",leadingIcon:t(n,{width:14,height:14}),customListItemLabel:o("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[t(f,Object.assign({style:{fontSize:"14px",color:c.text.primary}},{children:e.displayName})),!e.isAvailable&&t(b,Object.assign({body:"Not Recommended"},{children:t("div",Object.assign({style:{display:"flex"}},{children:t(r,{width:16,height:16,color:c.content.secondary})}))}))]})),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{R(e)}},s):t(C,{variable:e,onSelect:R},s)))})):t(x,{height:M(500),searchText:$})})]}))}))};export{B as VariablePickerContent};

package/dist/esm/components/variable-picker-v3/NoResult.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    height: string;
+    searchText?: string;
+};
+declare const NoResult: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default NoResult;

package/dist/esm/components/variable-picker-v3/NoResult.js

@@ -0,0 +1,17 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"../../assets/icons/search.svg.js";import n from"styled-components";import{COLORS as o}from"../../constants/Theme.js";import{TitleMedium as i,BodySecondary as s}from"../TypographyStyle.js";const c=n=>e(a,Object.assign({height:n.height},{children:[t(d,{children:t(r,{width:24,height:24,color:o.background.brand})}),e("div",Object.assign({style:{textAlign:"center"}},{children:[t(i,{children:"No results found"}),n.searchText?t(s,Object.assign({style:{color:o.content.secondary,marginTop:8}},{children:`Sorry we could not find any results for "${n.searchText}"`})):t(s,Object.assign({style:{color:o.content.secondary,marginTop:8}},{children:"Sorry we could not find any variables"}))]}))]})),a=n.div`
+	display: flex;
+	gap: 16px;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 0 16px;
+	height: ${e=>e.height};
+`,d=n.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: ${o.background.brandLight};
+	width: 48px;
+	height: 48px;
+	border-radius: 24px;
+`;export{c as default};

package/dist/esm/components/variable-picker-v3/SubHeaderItems.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SubHeader, VariableV3 } from './model';
+type SubHeaderProps = {
+    onSelect: (variable: VariableV3) => void;
+    variable: {
+        [key: string]: SubHeader | VariableV3;
+    };
+};
+declare const SubHeaderItem: React.FC<SubHeaderProps>;
+export default SubHeaderItem;

package/dist/esm/components/variable-picker-v3/SubHeaderItems.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as s,jsxs as t}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import o from"../../assets/icons/plus.svg.js";import r from"../../assets/icons/sub_category.svg.js";import a from"../../assets/icons/triangle_error.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{ListItem as n}from"../list-item/ListItem.js";import{Tooltip as c}from"../tooltips/Tooltip.js";import{BodySecondary as m}from"../TypographyStyle.js";import{useVariablePickerContext as d}from"./context.js";import{showOnlyRecommendedVariables as p}from"./recommendVaribles.js";const b=b=>{const{onSelect:g,variable:h}=b,{subHeaderStack:y,setSubHeaderStack:f,setVariables:j,showRecommended:v}=d();return e(s,{children:Object.keys(h).map(((s,d)=>void 0===h[s].variables?e(n,{version:"2.0",leadingIcon:e(o,{width:14,height:14}),customListItemLabel:t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[e(m,Object.assign({style:{fontSize:"14px",color:l.text.primary}},{children:h[s].displayName})),!h[s].isAvailable&&e(c,Object.assign({body:"Not Recommended"},{children:e("div",Object.assign({style:{display:"flex"}},{children:e(a,{width:16,height:16,color:l.content.secondary})}))}))]})),listItem:{label:h[s].displayName,value:h[s].displayName},subText:h[s].description||"",onClick:()=>{g(h[s])}},d):e(n,{version:"2.0",listItem:{label:h[s].displayName,value:h[s].displayName},customListItemLabel:e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:e(m,Object.assign({style:{fontSize:"14px",color:l.text.primary}},{children:h[s].displayName}))})),leadingIcon:e(r,{width:14,height:14}),subText:h[s].description||"",trailingIcon:e(i,{width:10,height:10,color:"#212121"}),onClick:()=>{const e=[...y,h[s]];if(f(e),v){const t=p([h[s].variables],e);j(t)}else j([h[s].variables])}},d)))})};export{b as default};

package/dist/esm/components/variable-picker-v3/VariablePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { VariablePickerV3Props } from './model';
+type Props = VariablePickerV3Props;
+export declare const VariablePicker: React.FC<Props>;
+export default VariablePicker;

package/dist/esm/components/variable-picker-v3/VariablePicker.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as s}from"react/jsx-runtime";import t from"../../assets/icons/cross.svg.js";import{COLORS as e}from"../../constants/Theme.js";import{CloseButtonContainer as r}from"../modals/modal.styled.js";import{VariablePickerContent as i}from"./Content.js";import{PickerType as n}from"./model.js";const m=m=>{const{type:c}=m;return c==n.FLOATER?o("div",Object.assign({style:{boxShadow:"0px 2px 8px 0px #0000001F",width:m.width?m.width:344,borderRadius:4}},{children:[s(i,Object.assign({},m)),s(r,Object.assign({onClick:()=>{m.onClose&&m.onClose()}},{children:s(t,{height:20,width:20,color:e.content.secondary})}))]})):s(i,Object.assign({},m))};export{m as VariablePicker,m as default};

package/dist/esm/components/variable-picker-v3/context.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const VariablePickerContext: React.Context<{
+    searchText: string;
+    setSearchText: React.Dispatch<React.SetStateAction<string>>;
+    subHeaderStack: any[];
+    setSubHeaderStack: React.Dispatch<React.SetStateAction<any[]>>;
+    variables: any[];
+    setVariables: React.Dispatch<React.SetStateAction<any[]>>;
+    showRecommended: boolean;
+    setShowRecommended: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export declare const useVariablePickerContext: () => {
+    searchText: string;
+    setSearchText: React.Dispatch<React.SetStateAction<string>>;
+    subHeaderStack: any[];
+    setSubHeaderStack: React.Dispatch<React.SetStateAction<any[]>>;
+    variables: any[];
+    setVariables: React.Dispatch<React.SetStateAction<any[]>>;
+    showRecommended: boolean;
+    setShowRecommended: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/esm/components/variable-picker-v3/context.js

@@ -0,0 +1 @@
+import e,{useContext as t}from"react";const a=e.createContext({searchText:"",setSearchText:()=>{},subHeaderStack:[],setSubHeaderStack:()=>{},variables:[],setVariables:()=>{},showRecommended:!1,setShowRecommended:()=>{}}),r=()=>t(a);export{a as VariablePickerContext,r as useVariablePickerContext};

package/dist/esm/components/variable-picker-v3/index.d.ts

@@ -0,0 +1 @@
+export * from './VariablePicker';

package/dist/esm/components/variable-picker-v3/model.d.ts

@@ -0,0 +1,48 @@
+export declare enum PickerType {
+    FLOATER = "floater",
+    EMBEDDED = "embedded"
+}
+export interface VariablePickerV3Props {
+    type: PickerType;
+    data: VariableListInterfaceV3[];
+    onSelect: (variable: VariableV3) => void;
+    width?: string;
+    onClose?: () => void;
+    showHeader?: boolean;
+    showBackButton?: boolean;
+    onBackButtonClick?: () => void;
+    onSearchBlur?: (e: any) => void;
+}
+export interface VariableListInterfaceV3 {
+    isSubHeader?: boolean;
+    displayName: string;
+    description: string;
+    orderId?: number;
+    isAvailable?: boolean;
+    variables?: {
+        [key: string]: SubHeader | VariableV3;
+    };
+}
+export interface SubHeader {
+    isSubHeader: boolean;
+    isAvailable: boolean;
+    displayName: string;
+    description: string;
+    variables?: {
+        [key: string]: SubHeader | VariableV3;
+    };
+}
+export interface VariableV3 {
+    description?: string;
+    defaultValue?: string;
+    displayName: string;
+    actualValue: string;
+    variableType: string;
+    isAvailable: boolean;
+    actualValueEval?: string;
+    isSubHeader?: boolean;
+    variables?: {
+        [key: string]: VariableV3;
+    };
+    needsFetching?: boolean;
+}

package/dist/esm/components/variable-picker-v3/model.js

@@ -0,0 +1 @@
+var e;!function(e){e.FLOATER="floater",e.EMBEDDED="embedded"}(e||(e={}));export{e as PickerType};

package/dist/esm/components/variable-picker-v3/recommendVaribles.d.ts

@@ -0,0 +1 @@
+export declare const showOnlyRecommendedVariables: (data: any, stack: any[]) => any;

package/dist/esm/components/variable-picker-v3/recommendVaribles.js

@@ -0,0 +1 @@
+const e=(e,i)=>e.map((e=>{if(e.isAvailable&&void 0===e.variables)return e;if(void 0===e.isAvailable&&void 0!==e.variables){const i=a(e.variables);return Object.assign(Object.assign({},e),{variables:i})}if(void 0===e.variables){return a(e)}{const s=a(e.variables);return i.length?s:Object.assign(Object.assign({},e),{variables:s})}})).filter((e=>Object.keys(e).length>0)),a=e=>Object.keys(e).reduce(((a,i)=>(e[i]&&e[i].isAvailable&&(a[i]=e[i]),a)),{});export{e as showOnlyRecommendedVariables};

package/dist/esm/components/variable-picker-v3/searchVariables.d.ts

@@ -0,0 +1,2 @@
+import { VariableListInterfaceV3 } from './model';
+export declare const searchVariables: (text: string, data: VariableListInterfaceV3[], subHeaderStack: any[]) => any[];

package/dist/esm/components/variable-picker-v3/searchVariables.js

@@ -0,0 +1 @@
+const e=(e,s,r)=>{if(!e)return r.length>0?[r[r.length-1].variables]:s;const l=[];return s.forEach((s=>{if(r.length>0)if(s.displayName&&void 0!==s.variables)a(e,s.variables,l);else{if(s.displayName.toLowerCase().includes(e.toLowerCase())&&l.push(s),!s.variables||!Object.keys(s.variables).length)return;a(e,s.variables,l)}else{if(s.displayName.toLowerCase().includes(e.toLowerCase())&&l.push(s),!s.variables||!Object.keys(s.variables).length)return;a(e,s.variables,l)}})),l},a=(e,s,r)=>{Object.keys(s).forEach((l=>{s[l].displayName.toLowerCase().includes(e.toLowerCase())&&r.push(s[l].isSubHeader?{[l]:s[l]}:s[l]),s[l].variables&&Object.keys(s[l].variables).length&&a(e,s[l].variables,r)}))};export{e as searchVariables};

package/dist/esm/components/variable-picker-v3/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecommendWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    height: string;
+}, never>;