@bikdotai/bik-component-library 0.0.649 → 0.0.651

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
 import { WEB_PUSH_COMPONENT_TYPE } from "../../template-preview/models/WebpushTemplate";
 import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
+import { ComponentType } from './VariableConnectorWhatsApp';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;
@@ -15,7 +16,7 @@ export interface VariableConnectorProps {
     showVariableModal?: boolean;
     setShowDiscountCheckBox?: any;
     buttonType?: BUTTON_TYPE;
-    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer' | WEB_PUSH_COMPONENT_TYPE;
+    componentType?: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
     CTAoptions?: ButtonPlaceHolderOptions[];
 }
 declare const VariableConnector: React.FC<VariableConnectorProps>;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../input/Input.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var a=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var r=require("../../template-preview/models/Channels.js"),t=require("../../TypographyStyle.js"),l=require("../context/templateModalContext.js"),n=require("./VariableConnector.js");exports.default=s=>{var d,o,p,u,v,c;const{descriptionComponent:m,type:x,showVariableModal:b,originalList:j,channel:h}=s,{originalVariableList:y,disableEditVariable:T,selectedCarouselIndex:E,initialExpiryDateTime:f}=l.useTemplateModalContext();let w=y;h&&h==r.CHANNEL_TYPE.WHATSAPP&&j&&(w=j);const g=m.type;if("BODY"===g||"TITLE"===g.toLocaleUpperCase())return e.jsx("div",{children:null===(d=null!=E&&E>-1?w.cards[E].body:"TITLE"===g.toLocaleUpperCase()?null==w?void 0:w.title:null==w?void 0:w.body)||void 0===d?void 0:d.map(((r,l)=>T||!r.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.primary}},{children:["HEADER"===x?"Header":""," Locked variable ",l+1]})),e.jsx(i.Input,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]}),l):e.jsx(n.default,{index:l,variable:r,showVariableModal:b,componentType:g},`${l}-${r.index}`)))});if("HEADER"===g)return e.jsx("div",{children:null===(o=null!=E&&E>-1?w.cards[E].header:null==w?void 0:w.header)||void 0===o?void 0:o.map(((r,l)=>r.isEditableVariable?e.jsx(n.default,{index:l,variable:r,showVariableModal:b,componentType:g},`${l}-${r.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.primary}},{children:["HEADER"===x?"Header":""," Locked variable ",l+1]})),e.jsx(i.Input,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]}),l)))});if("limited_time_offer"===g){let i=null!==(u=null===(p=m.example)||void 0===p?void 0:p.limited_time_offer)&&void 0!==u?u:(new Date).toISOString();return f&&(i=new Date(f).toISOString()),e.jsx("div",{children:e.jsx(n.default,{index:0,variable:{variableName:null!==(c=null===(v=null==m?void 0:m.limited_time_offer)||void 0===v?void 0:v.text)&&void 0!==c?c:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:b,componentType:g},`${g}`)})}return e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../input/Input.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var a=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var r=require("../../template-preview/models/Channels.js"),t=require("../../TypographyStyle.js"),l=require("../context/templateModalContext.js"),s=require("./VariableConnector.js");exports.default=d=>{var n,o,p,u,v,c,m;const{descriptionComponent:x,type:b,showVariableModal:j,originalList:h,channel:y}=d,{originalVariableList:T,disableEditVariable:E,selectedCarouselIndex:C,initialExpiryDateTime:L}=l.useTemplateModalContext();let f=T;y&&(y==r.CHANNEL_TYPE.WHATSAPP||y==r.CHANNEL_TYPE.RCS)&&h&&(f=h);const w=x.type;if("BODY"===w||"TITLE"===w.toLocaleUpperCase())return e.jsx("div",{children:null===(o=null!=C&&C>-1?"TITLE"===w.toLocaleUpperCase()?null===(n=f.cards[C])||void 0===n?void 0:n.title:f.cards[C].body:"TITLE"===w.toLocaleUpperCase()?(r.CHANNEL_TYPE.RCS,null==f?void 0:f.title):null==f?void 0:f.body)||void 0===o?void 0:o.map(((r,l)=>E||!r.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",l+1]})),e.jsx(i.Input,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]}),l):e.jsx(s.default,{index:l,variable:r,showVariableModal:j,componentType:w},`${l}-${r.index}`)))});if("HEADER"===w)return e.jsx("div",{children:null===(p=null!=C&&C>-1?f.cards[C].header:null==f?void 0:f.header)||void 0===p?void 0:p.map(((r,l)=>r.isEditableVariable?e.jsx(s.default,{index:l,variable:r,showVariableModal:j,componentType:w},`${l}-${r.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",l+1]})),e.jsx(i.Input,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]}),l)))});if("limited_time_offer"===w){let i=null!==(v=null===(u=x.example)||void 0===u?void 0:u.limited_time_offer)&&void 0!==v?v:(new Date).toISOString();return L&&(i=new Date(L).toISOString()),e.jsx("div",{children:e.jsx(s.default,{index:0,variable:{variableName:null!==(m=null===(c=null==x?void 0:x.limited_time_offer)||void 0===c?void 0:c.text)&&void 0!==m?m:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:j,componentType:w},`${w}`)})}return e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts

@@ -18,6 +18,7 @@ export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplat
     }[];
     bodyVariables: string[];
     headerVariables: string[];
+    titleVariables: string[];
 };
 export declare const getAllDataFromWebpushTemplateComponent: (mapping: WebpushTemplateType['webpushBroadcastConfig'], templateVariables: WebpushTemplateVariables) => {
     bodyVariables: string[];

package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getAllDataFromTemplateComponent=e=>{var o,t;const n=[],i=[],l=[],p=[],a=[];let s=null;return e.components.forEach(((e,o)=>{var t,p,a,d,r,m;if("BODY"===e.type&&e.text&&n.push({component:e,i:o,type:"BODY"}),"HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format&&(null===(p=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===p?void 0:p[0])&&(s=e),"HEADER"===e.type&&"TEXT"===e.format&&n.push({component:e,i:o,type:"HEADER"}),"BUTTONS"===e.type){const t=null===(d=null===(a=e.buttons)||void 0===a?void 0:a.filter)||void 0===d?void 0:d.call(a,(e=>"URL"===e.type));i.push({component:Object.assign(Object.assign({},e),{buttons:t}),i:o});const n=null===(m=null===(r=e.buttons)||void 0===r?void 0:r.filter)||void 0===m?void 0:m.call(r,(e=>"QUICK_REPLY"===e.type));l.push({component:Object.assign(Object.assign({},e),{buttons:n}),i:o})}"limited_time_offer"===e.type&&n.push({component:e,i:o,type:"limited_time_offer"})})),e.mapping&&(null===(o=e.mapping.body)||void 0===o||o.forEach((e=>{p.push(e)}))),e.mapping&&(null===(t=e.mapping.header)||void 0===t||t.forEach((e=>{a.push(e)}))),{imageComponent:s,descriptionComponents:n,urlBtns:i,qrbBtns:l,bodyVariables:p,headerVariables:a}},exports.getAllDataFromWebpushTemplateComponent=(e,o)=>{var t,n,i,l,p;return{bodyVariables:(null===(t=null==e?void 0:e.body)||void 0===t?void 0:t.map((e=>e)))||[],titleVariables:(null===(n=null==e?void 0:e.title)||void 0===n?void 0:n.map((e=>e)))||[],iconImage:(null===(i=null==e?void 0:e.icon)||void 0===i?void 0:i.map((e=>e)))||[],bannerImage:(null===(l=null==e?void 0:e.image)||void 0===l?void 0:l.map((e=>e)))||[],redirectionLink:(null===(p=null==e?void 0:e.redirectionLink)||void 0===p?void 0:p.map((e=>e)))||[],descriptionComponents:Object.keys(o).map((e=>({type:e.toUpperCase(),component:Object.assign(Object.assign({},o[e]),{type:e.toUpperCase()})})))}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getAllDataFromTemplateComponent=e=>{var o,t,i;const n=[],l=[],p=[],a=[],s=[],d=[];let r=null;return e.components.forEach(((e,o)=>{var t,i,a,s,d,m;if("BODY"===e.type&&e.text&&n.push({component:e,i:o,type:"BODY"}),"TITLE"===e.type&&e.text&&n.push({component:e,i:o,type:"TITLE"}),"HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format&&(null===(i=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===i?void 0:i[0])&&(r=e),"HEADER"===e.type&&"TEXT"===e.format&&n.push({component:e,i:o,type:"HEADER"}),"BUTTONS"===e.type){const t=null===(s=null===(a=e.buttons)||void 0===a?void 0:a.filter)||void 0===s?void 0:s.call(a,(e=>"URL"===e.type));l.push({component:Object.assign(Object.assign({},e),{buttons:t}),i:o});const i=null===(m=null===(d=e.buttons)||void 0===d?void 0:d.filter)||void 0===m?void 0:m.call(d,(e=>"QUICK_REPLY"===e.type));p.push({component:Object.assign(Object.assign({},e),{buttons:i}),i:o})}"limited_time_offer"===e.type&&n.push({component:e,i:o,type:"limited_time_offer"})})),e.mapping&&(null===(o=e.mapping.body)||void 0===o||o.forEach((e=>{a.push(e)}))),e.mapping&&(null===(t=e.mapping.header)||void 0===t||t.forEach((e=>{s.push(e)}))),e.mapping&&(null===(i=e.mapping.title)||void 0===i||i.forEach((e=>{d.push(e)}))),{imageComponent:r,descriptionComponents:n,urlBtns:l,qrbBtns:p,bodyVariables:a,headerVariables:s,titleVariables:d}},exports.getAllDataFromWebpushTemplateComponent=(e,o)=>{var t,i,n,l,p;return{bodyVariables:(null===(t=null==e?void 0:e.body)||void 0===t?void 0:t.map((e=>e)))||[],titleVariables:(null===(i=null==e?void 0:e.title)||void 0===i?void 0:i.map((e=>e)))||[],iconImage:(null===(n=null==e?void 0:e.icon)||void 0===n?void 0:n.map((e=>e)))||[],bannerImage:(null===(l=null==e?void 0:e.image)||void 0===l?void 0:l.map((e=>e)))||[],redirectionLink:(null===(p=null==e?void 0:e.redirectionLink)||void 0===p?void 0:p.map((e=>e)))||[],descriptionComponents:Object.keys(o).map((e=>({type:e.toUpperCase(),component:Object.assign(Object.assign({},o[e]),{type:e.toUpperCase()})})))}};

package/dist/cjs/components/template-context-mapper/utils/getPreviewDimension.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../template-preview/models/Channels.js");exports.getPreviewWidth=r=>{switch(r){case e.CHANNEL_TYPE.WHATSAPP:return 240;case e.CHANNEL_TYPE.SMS:return 300;case e.CHANNEL_TYPE.EMAIL:return 360;default:return 300}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../template-preview/models/Channels.js");exports.getPreviewWidth=r=>{switch(r){case e.CHANNEL_TYPE.WHATSAPP:return 240;case e.CHANNEL_TYPE.SMS:return 300;case e.CHANNEL_TYPE.EMAIL:return 360;case e.CHANNEL_TYPE.RCS:return 240;default:return 300}};

package/dist/cjs/components/template-preview/RCS/RCSButtons.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const RCSButtons: React.FC<{
+    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    text: string;
+    extraContent?: string;
+    placeholder?: string;
+    textTypography?: React.FC;
+    size?: 'small' | 'large';
+}>;

package/dist/cjs/components/template-preview/RCS/RCSButtons.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");exports.RCSButtons=i=>{let{Icon:n,text:s,extraContent:l,placeholder:o,textTypography:c,size:a}=i;const d=c||t.BodySecondary;return e.jsx(e.Fragment,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[n&&e.jsx(n,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx("div",Object.assign({style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"}},{children:e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===a?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:s}))}))]})),!!l&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:o?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(o):l}))]}))})};

package/dist/cjs/components/template-preview/RCS/RCSChatHeader.d.ts

@@ -0,0 +1,2 @@
+declare const RCSChatHeader: () => import("react/jsx-runtime").JSX.Element;
+export default RCSChatHeader;

package/dist/cjs/components/template-preview/RCS/RCSChatHeader.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/arrow_left.svg.js"),r=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./RCSPreview.styled.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(s.default,{height:16,width:16,color:i.COLORS.content.secondary}),e.jsx(o.IconContainer,{children:e.jsx(r.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.secondary,style:{fontWeight:600}},{children:"Brand name"})),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.secondary})]});

package/dist/cjs/components/template-preview/RCS/RCSChatPreview.d.ts

@@ -0,0 +1,2 @@
+import { RCSPreviewPropsV2 } from '../models/RCSTemplate';
+export declare const RCSChatPreview: (props: RCSPreviewPropsV2) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-preview/RCS/RCSChatPreview.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../template-context-mapper/context/templateModalContext.js"),s=require("../helpers/templateMiscHelper.js"),a=require("../helpers/VariableEditorHelper.js"),l=require("../models/TemplateMeta.js"),i=require("../WhatsApp/ChatBtn.js"),n=require("./RCSButtons.js"),d=require("./RCSMediaCard.js"),o=require("./RCSPreview.styled.js");const u=new a.VariableEditorHelper;exports.RCSChatPreview=a=>{const{bodyText:p,titleText:C,headerMediaType:h,headerText:m,headerAssetLink:x,headerAssetName:c,imagePreviewStyles:E,size:T,bodyVariableList:j,headerVariableList:g,buttons:S,carouselCardIndex:A,isWhatsappCarousel:v,isPreview:R,titleVariableList:H,templateConfiguration:M}=a,y=u.format(null==p?void 0:p.replace(/</g,"&lt;").replace(/>/g,"&gt;"),j),P=u.format(null==m?void 0:m.replace(/</g,"&lt;").replace(/>/g,"&gt;"),g),_=u.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),H),{selectedCarouselIndex:b,isProductCarouselType:N,errorIndexes:O,isCarouselHovered:w}=r.useTemplateModalContext(),D=t.useMemo((()=>s.isRichAndCarouselCards(null==M?void 0:M.templateType)),[null==M?void 0:M.templateType]),L=t.useMemo((()=>"HORIZONTAL"==(null==M?void 0:M.orientation)),[M]);return e.jsxs(o.RCSPreviewContainer,Object.assign({isCarouselCard:null!=A&&A>-1,showBorder:null!=A&&A===b||N&&null!=A&&A>-1&&null!=b&&b>-1,hasError:null==O?void 0:O.includes(null!=A?A:-2),isWhatsappCarousel:v,isPreview:R,showDashedBorder:N&&w&&(null!=b?b:-1)<0&&(null!=A?A:-1)>-1,needBorder:D,isHorizontalOrientation:L},{children:[!L&&e.jsx(e.Fragment,{children:h===l.HEADER_TYPES.TEXT?e.jsx(o.HeaderTextContainer,{dangerouslySetInnerHTML:{__html:P}}):h!==l.HEADER_TYPES.NONE&&x&&h!==l.HEADER_TYPES.DOCUMENT?e.jsx(d.RCSMediaCard,{headerAssetLink:x,headerAssetName:c,mediaType:h,imagePreviewStyles:h===l.HEADER_TYPES.IMAGE?E:{}}):null}),e.jsxs("div",Object.assign({style:{width:L?"50%":""}},{children:[e.jsxs("div",Object.assign({className:D?"":"text--template"},{children:[!!C&&e.jsx(e.Fragment,{children:e.jsx(o.TitleTextContainer,{dangerouslySetInnerHTML:{__html:_}})}),!!p&&e.jsx(e.Fragment,{children:e.jsx(o.RcsHtmlContainer,{dangerouslySetInnerHTML:{__html:y},style:{paddingTop:C?0:12}})}),h===l.HEADER_TYPES.DOCUMENT?e.jsx(d.PdfMediaCard,Object.assign({},{headerAssetLink:x,headerAssetName:c})):e.jsx(e.Fragment,{})]})),S&&S.length>0?s.isRichAndCarouselCards(null==M?void 0:M.templateType)?e.jsx(e.Fragment,{children:S.map(((t,r)=>e.jsx(i.ChatBtn,{text:t.text,size:T},r)))}):e.jsx(o.RCSChatBtnContainer,{children:S.map(((t,r)=>e.jsx(n.RCSButtons,{text:t.text,size:T},r)))}):null]})),L&&h!==l.HEADER_TYPES.NONE&&x&&h!==l.HEADER_TYPES.DOCUMENT&&e.jsx(d.RCSMediaCard,{headerAssetLink:x,headerAssetName:c,mediaType:h,imagePreviewStyles:h===l.HEADER_TYPES.IMAGE?E:{},isHorizontal:L})]}))};

package/dist/cjs/components/template-preview/RCS/RCSMediaCard.d.ts

@@ -0,0 +1,14 @@
+import { HEADER_TYPES } from "../../../index";
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+export declare const PdfMediaCard: React.FC<{
+    headerAssetLink?: string;
+    headerAssetName?: string;
+}>;
+export declare const RCSMediaCard: React.FC<{
+    headerAssetLink: string;
+    headerAssetName?: string;
+    mediaType: HEADER_TYPES;
+    imagePreviewStyles?: CSSProperties;
+    isHorizontal?: boolean;
+}>;

package/dist/cjs/components/template-preview/RCS/RCSMediaCard.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/RCS_PDF.svg.js"),r=require("../../../constants/Theme.js"),i=require("./RCSPreview.styled.js"),t=require("../models/TemplateMeta.js"),a=require("../../shimmer-image/ShimmerImage.js");exports.PdfMediaCard=t=>{let{headerAssetLink:a,headerAssetName:d}=t;var n;const o=s.default,l=d||(null===(n=null==a?void 0:a.split("/").pop())||void 0===n?void 0:n.replace(".pdf",""))||"xxxxxxxx";return e.jsxs(i.RCSPdfContainer,{children:[e.jsx(o,{height:24,width:24,color:r.COLORS.icon.placeholder}),!!l&&e.jsxs(i.PdfComineText,{children:[e.jsx(i.PdfText,{children:l}),e.jsx(i.PdfText,{children:".pdf"})]})]})},exports.RCSMediaCard=s=>{let{headerAssetLink:r,headerAssetName:d,mediaType:n,imagePreviewStyles:o,isHorizontal:l}=s;const c={width:"100%",minHeight:l?"100%":"240px",height:l?"100%":"240px",objectFit:"cover",borderRadius:l?"8px":""};return e.jsx(i.RCSMediaContainer,Object.assign({isHorizontal:!!l},{children:n===t.HEADER_TYPES.IMAGE?e.jsx(a.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:l?"100%":240,imagePreviewStyles:Object.assign(Object.assign({},o),{borderTopRightRadius:8,borderTopLeftRadius:8})}):n===t.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:c,controls:!0,muted:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})}))};

package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.d.ts

@@ -0,0 +1,33 @@
+import { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';
+export declare const RCSContainer: import("styled-components").StyledComponent<"div", any, {
+    isCarousal?: boolean | undefined;
+    templateType?: RCS_TEMPLATE_TYPE | undefined;
+}, never>;
+export declare const RcsHtmlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RCSPreviewContainer: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    showDashedBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+    needBorder?: boolean | undefined;
+    isHorizontalOrientation?: boolean | undefined;
+}, never>;
+export declare const RCSChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RCSMediaContainer: import("styled-components").StyledComponent<"div", any, {
+    isHorizontal: boolean;
+}, never>;
+export declare const RCSPdfContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PdfComineText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PdfText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const RCSCarousalContainer: import("styled-components").StyledComponent<"div", any, {
+    borderRadius?: string | undefined;
+}, never>;
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubTitle: import("styled-components").StyledComponent<"p", any, {}, never>;

package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js

@@ -0,0 +1,128 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);o.default.div`
+	background-color: ${e=>e.isCarousal?"#E0E0E0":"white"};
+	border-radius: 4px;
+	position: relative;
+	height: ${e=>e.isCarousal?"100%":"auto"};
+`;const i=o.default.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 12px;
+	color: ${t.COLORS.content.primary};
+	word-wrap: break-word;
+`,n=o.default(i)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,a=o.default(i)`
+	font-weight: 600;
+`,d=o.default.div`
+	background: ${t.COLORS.surface.standard};
+	border-radius: 12px;
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: ${e=>e.isHorizontalOrientation?"row":"column"};
+
+	${e=>e.needBorder?e.showDashedBorder?`border: 2px dashed ${t.COLORS.content.brand};`:e.hasError?`border: 2px solid ${t.COLORS.content.negative};`:e.showBorder?`border: 2px solid ${t.COLORS.stroke.brand};`:`border: 2px solid ${t.COLORS.stroke.primary};`:"border: none;"}
+
+	:hover {
+		${e=>{if(e.isPreview||!e.needBorder)return"";return`\n\t\t\t\tborder: 2px ${e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"} ${t.COLORS.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`}}
+	}
+
+	.text--template {
+		border: 2px solid ${t.COLORS.stroke.primary};
+		border-radius: 12px;
+		flex: 1;
+	}
+`,s=o.default.div`
+	padding: 12px 0px;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+`,p=o.default.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: ${e=>e.isHorizontal?"":"4px"};
+	width: ${e=>e.isHorizontal?"50%":"auto"};
+`,l=o.default.div`
+	border-radius: 12px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	padding: 4px;
+	background-color: #ede7e8;
+	margin: 4px;
+	max-width: 200px;
+`,x=o.default.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	margin-left: 4px;
+	max-width: 180px;
+`,f=o.default.p`
+	white-space: nowrap;
+	color: #4c5567;
+	max-width: 100px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0px;
+	margin: 0px;
+	font-size: 12px;
+	font-weight: 500;
+	line-width: 20px;
+`,u=o.default.div`
+	border: 1px solid ${t.COLORS.stroke.primary};
+	position: relative;
+	height: 500px;
+	overflow-y: auto;
+	border-radius: ${e=>{var t;return null!==(t=e.borderRadius)&&void 0!==t?t:"8px"}};
+	box-shadow: 0px 2px 8px 0px #0000001f;
+	background-color: white;
+`,c=o.default.div`
+	height: 50px;
+	background-color: ${t.COLORS.background.inactive};
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,h=o.default.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,g=o.default.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,b=o.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,m=o.default.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.COLORS.content.secondary};
+	margin-bottom: 0px;
+`;exports.HeaderContainer=c,exports.HeaderTextContainer=n,exports.IconContainer=g,exports.LeftContainer=h,exports.PdfComineText=x,exports.PdfText=f,exports.RCSCarousalContainer=u,exports.RCSChatBtnContainer=s,exports.RCSMediaContainer=p,exports.RCSPdfContainer=l,exports.RCSPreviewContainer=d,exports.RcsHtmlContainer=i,exports.SubTitle=m,exports.TitleContainer=b,exports.TitleTextContainer=a;

package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RCSPreviewPropsV2 } from '../models/RCSTemplate';
+export declare const RCSTemplateLikePreview: React.FC<RCSPreviewPropsV2>;

package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../template-context-mapper/context/templateModalContext.js"),s=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),o=require("./RCSChatHeader.js"),n=require("./RCSChatPreview.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=p(t);const d=l.default.div`
+	background-color: white;
+	border-radius: 4px;
+	position: relative;
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+`,u=l.default(s.TitleRegular)`
+	color: ${a.COLORS.content.primary};
+`;exports.RCSTemplateLikePreview=t=>{const{hideDeviceContainerInPreview:s}=r.useTemplateModalContext();return 3===i.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):s?e.jsx(n.RCSChatPreview,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsx(o.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"10px 32px 10px 10px":`10px ${t.isWhatsappCarousel?"0px":"12px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:t.isWhatsappCarousel?"100%":"auto"}},{children:[!t.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(u,{children:"Preview"})})),e.jsx(n.RCSChatPreview,Object.assign({showHeader:t.showHeader},t))]}))]}))})};