@bikdotai/bik-component-library 0.0.447-beta.2 → 0.0.447

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

@@ -1 +1 @@
-import{jsxs as n,jsx as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as s}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:j,onTemplateChange:O,whatsappSpecificPickerMeta:C,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,k,I,w,R,N,P,A,S,_,M,Q;const D=j.isCarouselType,{originalVariableList:q,pod:H,extras:Y,selectedCarouselIndex:K,isProductCarouselType:W}=l(),{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}=d(j),[Z,nn]=e(!1),[on,tn]=e(-1===K?{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}:{}),[en,sn]=e(!1);function ln(n,o,e){var i,s,l,a,d,r,p,c,u,m;const v=null!=K&&K>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[K]}:Object.assign({},j),b=t(v),g="custom"===o&&"string"==typeof n,f=g?n:"string"!=typeof n?n.defaultValue:"";if(null!=K&&K>-1&&W){const o=Object.assign({},j).components.map((n=>{var o;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(o=n.cards)||void 0===o?void 0:o.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var o,t,i;if("BUTTONS"===n.type){const s=null===(o=n.buttons)||void 0===o?void 0:o.filter((n=>"URL"===n.type));let l=null!==(t=null==s?void 0:s[e])&&void 0!==t?t:{};l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[f]});const a=null===(i=n.buttons)||void 0===i?void 0:i.map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==l?void 0:l.text)?l:n));return Object.assign(Object.assign({},n),{buttons:a})}return n}))})))}):n})),i=null===(a=null===(l=Object.assign({},j).mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map((o=>g?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:""))})})),s=t(j);return s.components=o,s.mapping.cards=i,void(null==O||O(Object.assign({},s)))}const h=null==b?void 0:b.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((n=>"URL"===n.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof n,s=i?n:"string"!=typeof n?n.defaultValue:"";let l=t[e];l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[s]});const a=[...null!==(c=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==c?c:[]].map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==l?void 0:l.text)?l:n)),d=Object.assign(Object.assign({},b.components[h]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[e]=i?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof n){"checkout.checkoutUrl"===(null===(m=n.placeHolder)||void 0===m?void 0:m.slice(2,-2))?nn(!0):(nn(!1),null==B||B(""))}if(null!=K&&K>-1){const n=t(j);n.components[1].cards[K].components=b.components,n.mapping.cards[K]=b.mapping,null==O||O(Object.assign({},n))}else null==O||O(b)}function an(n,o,e){var i,s,l,a,d,r;const p=null!=K&&K>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[K]}:Object.assign({},j);if(null!=K&&K>-1&&W){const o=Object.assign({},j).components.map((o=>{var t;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,s;if("BUTTONS"===o.type){const l=null===(t=o.buttons)||void 0===t?void 0:t.filter((n=>"QUICK_REPLY"===n.type));let a=null!==(i=null==l?void 0:l[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:n.flowId,flowName:n.flowName});const d=null===(s=o.buttons)||void 0===s?void 0:s.map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==a?void 0:a.text)?a:n));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),i=t(j);return i.components=o,void(null==O||O(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==c&&c>-1){const o=null===(l=null==p?void 0:p.components[c].buttons)||void 0===l?void 0:l.filter((n=>"QUICK_REPLY"===n.type));if(o){let t=o[e];t=Object.assign(Object.assign({},t),{flowId:n.flowId,flowName:n.flowName});const i=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==t?void 0:t.text)?t:n)),s=Object.assign(Object.assign({},p.components[c]),{buttons:i}),l=[...p.components];l[c]=s,p.components=l}}if(null!=K&&K>-1){const n=t(j);n.components[1].cards[K].components=p.components,null==O||O(Object.assign({},n))}else null==O||O(p)}i((()=>{var n,o;if(null===(n=j.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))nn(!0);else{nn(!1);const n=null===(o=null==Y?void 0:Y.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[j]),i((()=>{var n,o,t,e;if(null!=K&&K>-1){const i={components:null===(o=null===(n=j.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[K].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);tn({descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=K&&-1===K){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:s}=d(j);tn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:s})}}),[K]),i((()=>{var n,o,t,e;if(null!=K&&K>-1&&en){const i={components:null===(o=null===(n=j.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[K].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);tn({descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),sn(!1)}}),[en]);const dn=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return n(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!on.imageComponent&&!W&&o(c,{children:o(u,{whatsappSpecificPickerMeta:C,mediaComponent:D?on.imageComponent:z,updateTemplateImageUrl:function(n,o){var e,i,s,l,a;let d;d=null!=K&&K>-1?{components:null===(i=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[K].components,mapping:null===(l=null===(s=null==j?void 0:j.mapping)||void 0===s?void 0:s.cards)||void 0===l?void 0:l[K]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((n=>{if("HEADER"===n.type&&"NONE"!==n.format&&"TEXT"!==n.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:o,example:{header_handle:[n]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=K&&K>-1){const n=t(j);n.components[1].cards[K].components=d.components,n.mapping.cards[K]=d.mapping,null==O||O(Object.assign({},n)),sn(!0)}else null==O||O(Object.assign({},d))},template:j,variableListForImage:x})}),(on.bodyVariables.length>0||on.headerVariables.length>0)&&o(g,{containerStyle:{paddingTop:on.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===(L=on.descriptionComponents)||void 0===L?void 0:L.map(((n,t)=>o(b,{originalVariableList:null!=K&&K>-1?q.cards[K]:q,type:n.type,descriptionComponent:n.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===E?void 0:E.filter((n=>"URL"===n.type)))||void 0===U?void 0:U.length)>0&&o(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null===(k=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===k?void 0:k.filter((n=>"URL"===n.type)))||void 0===I?void 0:I.map(((n,t)=>{if("URL"===n.type)return o(f,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=K&&K>-1?Object.assign({},q.cards[K]):Object.assign({},q),updateSelectedURLTemplateBtn:ln,variableList:T},`${t}_${K}`)})),(null===(R=null===(w=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===w?void 0:w.filter((n=>"QUICK_REPLY"===n.type)))||void 0===R?void 0:R.length)>0&&(H!==s.CHATBOT?o(g,{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"}):o(r,{backTrackMessage:null===(N=null==Y?void 0:Y.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(P=null==Y?void 0:Y.backTrackExtra)||void 0===P?void 0:P[1]})),null===(S=null===(A=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===A?void 0:A.filter((n=>"QUICK_REPLY"===n.type)))||void 0===S?void 0:S.map(((n,t)=>{if("QUICK_REPLY"===n.type)return o(f,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=K&&K>-1?Object.assign({},q.cards[K]):Object.assign({},q),updateSelectedQRBTemplateBtn:an},`${t}_${K}`)})),H===s.CHATBOT&&Z&&o(p,{discountCode:null===(_=null==Y?void 0:Y.discountCodeExtra)||void 0===_?void 0:_[0],setDiscountCode:null===(M=null==Y?void 0:Y.discountCodeExtra)||void 0===M?void 0:M[1],variableList:T}),null===(Q=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===Q?void 0:Q.map(((n,t)=>{var e,i,s;if("COPY_CODE"===n.type)return o(m,{index:t,variable:{variableName:null!==(e=n.text)&&void 0!==e?e:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(s=n.index)&&void 0!==s?s:0},showVariableModal:!0,variableList:dn,componentType:"BUTTONS"},t)}))]}))};export{h as default};
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as e,useEffect as i}from"react";import{POD as n}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as a}from"../context/templateModalContext.js";import{useAdditionalVariables as l}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as s}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as d}from"./BackTrackComponent.js";import{DiscountCodeComponent as r}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as p}from"./EditMediaV2.style.js";import c from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as m}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import b from"./VariableEditorHeader.js";import g from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:f,onTemplateChange:T,whatsappSpecificPickerMeta:j,showVariableModal:x,variableList:C,variableListForImage:O,discountCode:y,setDiscountCode:E}=h;var V,k,L,w,B,I,A,M,U,D,N,R,H,S,P,Q,W;const{originalVariableList:_,pod:F,extras:Y}=a(),{descriptionComponents:K,urlBtns:$,qrbBtns:q,imageComponent:X,bodyVariables:z,headerVariables:G}=s(f),[J,Z]=e(!1);function tt(t,o){var e,i,n,a,l;const s=Object.assign({},f),d=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==d&&d>-1){const l=null===(e=null==s?void 0:s.components[d].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==l&&l>-1){const e="custom"===o&&"string"==typeof t,r=[...null!==(a=null===(n=null===(i=s.components)||void 0===i?void 0:i[d])||void 0===n?void 0:n.buttons)&&void 0!==a?a:[]];r[l]=Object.assign(Object.assign({},r[l]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const p=Object.assign(Object.assign({},s.components[d]),{buttons:r}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[d]=p,s.components=u}}if("string"!=typeof t){"checkout.checkoutUrl"===(null===(l=t.placeHolder)||void 0===l?void 0:l.slice(2,-2))?Z(!0):(Z(!1),null==E||E(""))}null==T||T(s)}function ot(t,o,e){var i;const n=Object.assign({},f),a=null==n?void 0:n.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==a&&a>-1){const o=null===(i=null==n?void 0:n.components[a].buttons)||void 0===i?void 0:i.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const l=Object.assign(Object.assign({},n.components[a]),{buttons:o}),s=[...n.components];s[a]=l,n.components=s}null==T||T(n)}i((()=>{var t,o;if(null===(t=f.mapping.buttons)||void 0===t?void 0:t.find((t=>"checkout.checkoutUrl"===t.slice(2,-2))))Z(!0);else{Z(!1);const t=null===(o=null==Y?void 0:Y.discountCodeExtra)||void 0===o?void 0:o[1];null==t||t("")}}),[f]);const et=l({variableList:C,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return t(m,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!X&&o(p,{children:o(c,{whatsappSpecificPickerMeta:j,mediaComponent:X,updateTemplateImageUrl:function(t,o){var e;let i=Object.assign({},f);const n=null===(e=null==i?void 0:i.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==n&&n>-1&&(null==i?void 0:i.components[n])){const e=Object.assign(Object.assign({},i.components[n]),{format:o,example:{header_handle:[t]}}),a=[...i.components];a[n]=e,i=Object.assign(Object.assign({},i),{components:a})}i.mapping&&(i.mapping=Object.assign(Object.assign({},i.mapping),{header:void 0})),null==T||T(Object.assign({},i))},template:f,variableListForImage:O})}),(z.length>0||G.length>0)&&o(b,{containerStyle:{paddingTop:X?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?void 0:K.map(((t,e)=>o(v,{originalVariableList:_,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?f.mapping.header:f.mapping.body,showVariableModal:x,variableList:C},e))),(null===(k=null===(V=$[0])||void 0===V?void 0:V.component)||void 0===k?void 0:k.buttons)&&(null===(B=null===(w=null===(L=$[0])||void 0===L?void 0:L.component)||void 0===w?void 0:w.buttons)||void 0===B?void 0:B.length)>0&&o(b,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==_?void 0:_.buttons)||void 0===I?void 0:I.map(((t,e)=>{if("URL"===t.type)return o(g,{variableListIndex:e,CTAoptions:null==j?void 0:j.CTAoptions,button:t,originalVariableList:_,updateSelectedURLTemplateBtn:tt,variableList:C},`${e}`)})),(null===(M=null===(A=q[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)&&(null===(N=null===(D=null===(U=q[0])||void 0===U?void 0:U.component)||void 0===D?void 0:D.buttons)||void 0===N?void 0:N.length)>0&&(F!==n.CHATBOT?o(b,{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"}):o(d,{backTrackMessage:null===(R=null==Y?void 0:Y.backTrackExtra)||void 0===R?void 0:R[0],setBackTrackMessage:null===(H=null==Y?void 0:Y.backTrackExtra)||void 0===H?void 0:H[1]})),null===(S=null==_?void 0:_.buttons)||void 0===S?void 0:S.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(g,{variableListIndex:e,QRBoptions:null==j?void 0:j.QRBoptions,button:t,originalVariableList:_,updateSelectedQRBTemplateBtn:ot},`${e}`)})),F===n.CHATBOT&&J&&o(r,{discountCode:null===(P=null==Y?void 0:Y.discountCodeExtra)||void 0===P?void 0:P[0],setDiscountCode:null===(Q=null==Y?void 0:Y.discountCodeExtra)||void 0===Q?void 0:Q[1],variableList:C}),null===(W=null==_?void 0:_.buttons)||void 0===W?void 0:W.map(((t,e)=>{var i,n,a;if("COPY_CODE"===t.type)return o(u,{index:e,variable:{variableName:null!==(i=t.text)&&void 0!==i?i:"",updatedValue:null!==(n=t.buttonVariable)&&void 0!==n?n:"",type:"string",isEditableVariable:!0,index:null!==(a=t.index)&&void 0!==a?a:0},showVariableModal:!0,variableList:et,componentType:"BUTTONS"},e)}))]}))};export{h as default};

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

@@ -1,6 +1,5 @@
 export interface FooterProps {
-    isWhatsappCarousel: boolean;
     onSelect: () => void;
 }
-declare const Footer: ({ isWhatsappCarousel, onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Footer: ({ onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
 export default Footer;

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

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as o}from"react";import s from"styled-components";import{Button as n}from"../../button/Button.js";import{COLORS as a}from"../../../constants/Theme.js";import{Badge as l}from"../Badge/index.js";import{useTemplateModalContext as i}from"../context/templateModalContext.js";const p=s.div`
-	background: ${a.surface.standard};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"styled-components";import{Button as r}from"../../button/Button.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as n}from"../Badge/index.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const p=o.div`
+	background: ${i.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${a.stroke.primary};
+	border-top-color: ${i.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 16px 24px;
@@ -10,4 +10,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`,d=s=>{let{isWhatsappCarousel:a,onSelect:d}=s;const{isError:m,selectedCarouselIndex:c,setSelectedCarouselIndex:x,setErrorIndexes:u}=i(),[f,b]=r(a?"Next":"Select template");return o((()=>{a&&-1===c?b("Next"):a&&null!=c&&c>-1&&b("Save & Select Template")}),[c]),e(p,{children:[m&&t(l,{errorText:"Some inputs are missing or incorrect. Please check"}),t(n,{id:"select-template-btn",buttonText:f,size:a?"small":"large",onClick:function(){a&&-1===c&&x?x(0):(null==u||u([]),d())}})]})};export{d as default};
+`,a=o=>{let{onSelect:i}=o;const{isError:a}=s();return t(p,{children:[a&&e(n,{errorText:"Some inputs are missing or incorrect. Please check"}),e(r,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:i})]})};export{a as default};

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

@@ -2,12 +2,11 @@ import React from 'react';
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
-import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
 import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 declare const MobilePreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
     showSampleValues?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default MobilePreview;

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

@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,n=i.forwardRef(((i,a)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=p();return e("div",{children:t(l,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s(h),height:443}}),e(m,Object.assign({ref:a},{children:e(o,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==r.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0})}))]}))})}));n.displayName="MobilePreview";export{n as default};
+`,n=i.forwardRef(((i,a)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=p();return e("div",{children:t(l,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s(h),height:443}}),e(m,Object.assign({ref:a},{children:e(o,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==r.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));n.displayName="MobilePreview";export{n as default};

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

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

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

@@ -4,6 +4,7 @@ export type ComponentType = WhatsAppTemplate['components'][0];
 export interface VariableConnectorWhatsAppProps {
     originalVariableList: WhatsAppTemplateVariables;
     descriptionComponent: ComponentType;
+    variableMapping: string[] | undefined;
     type: ComponentType['type'];
     showVariableModal?: boolean;
     variableList?: VariableListInterfaceV2[];

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

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

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

@@ -5,7 +5,7 @@ import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAp
 export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
 export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
 export interface WhatsAppTemplateCardButtonV2Props {
-    currentVariableList: WhatsAppTemplateVariables;
+    originalVariableList: WhatsAppTemplateVariables;
     updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
     updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
     button: TEMPLATE_BUTTON;
@@ -14,5 +14,5 @@ export interface WhatsAppTemplateCardButtonV2Props {
     variableList?: VariableListInterfaceV2[];
     variableListIndex: number;
 }
-declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, currentVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
 export default WhatsAppTemplateCardButtonV2;

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

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

package/dist/esm/components/template-preview/TemplatePreview.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { WhatsAppCarouselTemplate } from "./models/WhatsappCarouselTemplate";
 import { CHANNEL_TYPE } from './models/Channels';
 import { EmailMeta, EmailTemplateType } from './models/EmailTemplate';
 import { SMSMeta, SMSTemplateType } from './models/SmsTemplate';
 import { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';
 export interface TemplatePreviewProps {
-    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType | WhatsAppCarouselTemplate;
+    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
     channel: CHANNEL_TYPE;
     onlyTemplateContent?: boolean;
     outsidePreview?: boolean;
@@ -17,8 +16,5 @@ export interface TemplatePreviewProps {
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
     showSampleValues?: boolean;
-    carouselCardIndex?: number;
-    isWhatsappCarousel?: boolean;
-    isPreview?: boolean;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-preview/TemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import i from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import d from"./SmsTemplatePreview.js";import p from"./WhatsAppTemplatePreview.js";const m=m=>{let{template:u,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:C,hideHeader:S,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T,carouselCardIndex:w,isWhatsappCarousel:f,isPreview:x}=m;var W,H;const{setSelectedCarouselIndex:A}=a();return v===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:C?16:0,border:C?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:u,hideHeader:S,onlyTemplateContent:y,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):v===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:C?16:0},null==g?void 0:g.templateContainerStyles)},{children:e(r,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:S,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):v===s.WHATSAPP?t("div",Object.assign({style:Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),C?c.WhatsAppWrapper:{}),onClick:()=>{A&&f&&A(null!=w?w:-1)}},{children:[C?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(W=null==u?void 0:u.label)&&void 0!==W?W:"")})})):e(l,{}),e(p,{showSampleValues:T,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:u,size:C?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:C?0:1,borderTopWidth:1},null!==(H=null==h?void 0:h.containerStyle)&&void 0!==H?H:{}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:w,isWhatsappCarousel:f,isPreview:x})]})):e(l,{})},c={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{m as TemplatePreview};
+import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import i from"../../utils/StringUtils.js";import{COLORS as a}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import o from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as r}from"./models/Channels.js";import s from"./SmsTemplatePreview.js";import d from"./WhatsAppTemplatePreview.js";const p=p=>{let{template:c,channel:u,whatsAppSpecificMeta:v,templateCreationsInfo:h,hideHeader:S,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T}=p;var C,f;return u===r.SMS?e("div",Object.assign({style:Object.assign({marginTop:h?16:0,border:h?`1px solid ${a.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(s,{template:c,hideHeader:S,onlyTemplateContent:y,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):u===r.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:h?16:0},null==g?void 0:g.templateContainerStyles)},{children:e(o,{template:c,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:S,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):u===r.WHATSAPP?l("div",Object.assign({style:Object.assign(Object.assign({},null==v?void 0:v.templateContainerStyles),h?m.WhatsAppWrapper:{})},{children:[h?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(C=null==c?void 0:c.label)&&void 0!==C?C:"")})})):e(t,{}),e(d,{showSampleValues:T,showHeader:null==v?void 0:v.showWhatsAppHeader,extras:null==v?void 0:v.whatsAppExtras,template:c,size:h?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:h?0:1,borderTopWidth:1},null!==(f=null==v?void 0:v.containerStyle)&&void 0!==f?f:{}),zeroStateComponent:null==v?void 0:v.zeroStateComponent,usePlaceHolderName:null==v?void 0:v.usePlaceHolderName})]})):e(t,{})},m={WhatsAppWrapper:{backgroundColor:a.surface.standard,borderRadius:4,border:`1px solid ${a.background.inactive}`,marginTop:16}};export{p as TemplatePreview};

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

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import o from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as a}from"react";import n from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{BodySecondary as p,Caption as d}from"../../TypographyStyle.js";import{COLORS as l,FONTS as h}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as c}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as f,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as x,FooterWrapper as g,TimeStamp as j}from"./ChatUI.style.js";import{MediaCard as v}from"./MediaCard.js";import w from"./RenderTemplateWithVariable.js";const b=n.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as a}from"react";import n from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{BodySecondary as p,Caption as d}from"../../TypographyStyle.js";import{COLORS as l,FONTS as h}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as c}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as f,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as x,FooterWrapper as g,TimeStamp as j}from"./ChatUI.style.js";import{MediaCard as v}from"./MediaCard.js";import b from"./RenderTemplateWithVariable.js";const w=n.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,u=n=>{const{bodyText:u,footerText:S,headerMediaType:N,headerText:A,headerAssetLink:M,headerAssetName:C,quickReplybtn:L,ctaBtn:k,actionTypes:z,textType:B,extras:E,showHeader:I,imagePreviewStyles:P,size:R,children:W,isPreview:H}=n,O=new c,_=a((()=>({color:l.content.primary,margin:12,fontSize:I?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,Object.assign({isPreview:H},{children:[t(b,{children:t(o,{color:"white",height:8,width:8})}),N===f.TEXT?t(w,{bold:!0,text:A}):N!==f.NONE?t(v,{headerAssetLink:M,headerAssetName:C,mediaType:N,imagePreviewStyles:N===f.IMAGE?P:{}}):t(r,{}),!!u&&t(r,{children:t(r,W?{children:W}:{children:"html"===B?t("div",{className:"richTextEditor",style:_,dangerouslySetInnerHTML:{__html:O.convertToHTML(u)}}):t(p,{children:u})})}),e(g,{children:[t(m,Object.assign({body:null!=S?S:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:S}))})),t(j,{children:"16:48"})]}),z===y.QUICK_REPLY?t("div",{children:null==L?void 0:L.map(((e,r)=>t(T,{text:e.text},r)))}):z===y.CTA_BTN?t("div",{children:null==k?void 0:k.map(((e,r)=>t(T,{textTypography:I?d:p,extraContent:E?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:R},r)))}):t(r,{})]}))};export{u as default};
+`,u=n=>{const{bodyText:u,footerText:S,headerMediaType:N,headerText:A,headerAssetLink:M,headerAssetName:C,quickReplybtn:L,ctaBtn:k,actionTypes:z,textType:B,extras:E,showHeader:I,imagePreviewStyles:R,size:W,children:H}=n,_=new c,O=a((()=>({color:l.content.primary,margin:12,fontSize:I?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,{children:[t(w,{children:t(r,{color:"white",height:8,width:8})}),N===f.TEXT?t(b,{bold:!0,text:A}):N!==f.NONE?t(v,{headerAssetLink:M,headerAssetName:C,mediaType:N,imagePreviewStyles:N===f.IMAGE?R:{}}):t(o,{}),!!u&&t(o,{children:t(o,H?{children:H}:{children:"html"===B?t("div",{className:"richTextEditor",style:O,dangerouslySetInnerHTML:{__html:_.convertToHTML(u)}}):t(p,{children:u})})}),e(g,{children:[t(m,Object.assign({body:null!=S?S:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:S}))})),t(j,{children:"16:48"})]}),z===y.QUICK_REPLY?t("div",{children:null==L?void 0:L.map(((e,o)=>t(T,{text:e.text},o)))}):z===y.CTA_BTN?t("div",{children:null==k?void 0:k.map(((e,o)=>t(T,{textTypography:I?d:p,extraContent:E?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:W},o)))}):t(o,{})]})};export{u as default};

package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.d.ts

@@ -1,10 +1,4 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    isCarouselCard?: boolean | undefined;
-    showBorder?: boolean | undefined;
-    isWhatsappCarousel?: boolean | undefined;
-    hasError?: boolean | undefined;
-    isPreview?: boolean | undefined;
-}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;

package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js

@@ -1,27 +1,20 @@
-import e from"styled-components";import{Caption as r}from"../../TypographyStyle.js";import{COLORS as t}from"../../../constants/Theme.js";const o=e.div`
-	background: ${t.surface.standard};
+import t from"styled-components";import{Caption as e}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const r=t.div`
+	background: ${o.surface.standard};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
+	border-top-left-radius: 0px;
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-	border: 2px solid
-		${e=>e.hasError?`${t.content.negative}`:e.showBorder?`${t.stroke.brand}`:`${t.text.white}`};
-	:hover {
-		border: 2px
-			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
-			${t.stroke.brand};
-	}
-`,i=e(r)`
-	color: ${t.content.secondary};
+`,i=t(e)`
+	color: ${o.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,d=e.div`
+`,p=t.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -30,19 +23,19 @@ import e from"styled-components";import{Caption as r}from"../../TypographyStyle.
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,s=e.div`
+`,d=t.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
-	border-top: 1px solid ${t.stroke.primary};
-`,p=e.div`
+	border-top: 1px solid ${o.stroke.primary};
+`,n=t.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
-`;e.div`
+`;t.div`
 	position: absolute;
 	bottom: -1px;
 	left: 0;
@@ -53,11 +46,11 @@ import e from"styled-components";import{Caption as r}from"../../TypographyStyle.
 	display: flex;
 	flex-direction: row;
 	justify-content: start;
-	background: ${t.surface.hovered};
+	background: ${o.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-`,e.div`
+`,t.div`
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`;export{s as ChatBtnContainer,o as Container,p as FooterWrapper,d as MediaContainer,i as TimeStamp};
+`;export{d as ChatBtnContainer,r as Container,n as FooterWrapper,p as MediaContainer,i as TimeStamp};

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

@@ -1,19 +1,19 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/copy-code-icon.svg.js";import i from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import a from"../../../assets/icons/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import l from"styled-components";import{useTemplateModalContext as m}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as p}from"../../tooltips/Tooltip.js";import{Caption as d,BodySecondary as c}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as x,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as u}from"./ChatBtn.js";import{Container as T,FooterWrapper as g,TimeStamp as C}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as v}from"./MediaCard.js";const b=l.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/copy-code-icon.svg.js";import r from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import a from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{Caption as p,BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";import{VariableEditorHelper as h}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as c,ACTIONS_TYPES as f}from"../models/TemplateMeta.js";import{ChatBtn as x}from"./ChatBtn.js";import{Container as y,FooterWrapper as T,TimeStamp as g}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as b}from"./MediaCard.js";const v=a.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,w=l.div`
+`,w=a.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${h.content.primary};
+	color: ${l.content.primary};
 	word-wrap: break-word;
-`,I=l(w)`
+`,u=a(w)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,O=new f,E=l=>{const{bodyText:h,footerText:f,headerMediaType:E,headerText:L,headerAssetLink:P,headerAssetName:_,quickReplybtn:N,ctaBtn:M,actionTypes:R,extras:A,showHeader:B,imagePreviewStyles:H,size:S,bodyVariableList:U,headerVariableList:k,buttons:z,limitedTimeOfferComponent:Y,carouselCardIndex:V,isWhatsappCarousel:q,isPreview:D}=l,K=O.format(h,U),Q=O.format(L,k),{selectedCarouselIndex:W,isProductCarouselType:G,errorIndexes:X}=m(),$={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:a};return e(T,Object.assign({isCarouselCard:null!=V&&V>-1,showBorder:null!=V&&V===W||G&&null!=V&&V>-1&&null!=W&&W>-1,hasError:null==X?void 0:X.includes(null!=V?V:-2),isWhatsappCarousel:q,isPreview:D},{children:[!q&&t(b,{children:t(i,{color:"white",height:8,width:8})}),E===x.TEXT?t(I,{dangerouslySetInnerHTML:{__html:Q}}):E!==x.NONE?t(v,{headerAssetLink:P,headerAssetName:_,mediaType:E,imagePreviewStyles:E===x.IMAGE?H:{}}):t(o,{}),(null==Y?void 0:Y.dateTime)?t(j,{text:Y.text,dateTime:Y.dateTime,code:Y.code}):t(o,{}),!!h&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:K}})}),e(g,{children:[t(p,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(C,Object.assign({style:{flex:1}},{children:f}))})),t(C,{children:"16:48"})]}),z&&z.length>0?z.map(((e,o)=>t(u,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:$[e.type],size:S},o))):R===y.QUICK_REPLY?t("div",{children:null==N?void 0:N.map(((e,o)=>t(u,{text:e.text},o)))}):R===y.CTA_BTN?t("div",{children:null==M?void 0:M.map(((e,o)=>t(u,{textTypography:B?d:c,extraContent:A?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:S},o)))}):t(o,{})]}))};export{E as ChatUIV2};
+`,L=new h,C=a=>{const{bodyText:l,footerText:h,headerMediaType:C,headerText:E,headerAssetLink:I,headerAssetName:N,quickReplybtn:O,ctaBtn:_,actionTypes:M,extras:R,showHeader:A,imagePreviewStyles:P,size:H,bodyVariableList:S,headerVariableList:U,buttons:k,limitedTimeOfferComponent:z}=a,B=L.format(l,S),V=L.format(E,U),Y={COPY_CODE:i,PHONE_NUMBER:s,URL:n,QUICK_REPLY:()=>t(o,{})};return e(y,{children:[t(v,{children:t(r,{color:"white",height:8,width:8})}),C===c.TEXT?t(u,{dangerouslySetInnerHTML:{__html:V}}):C!==c.NONE?t(b,{headerAssetLink:I,headerAssetName:N,mediaType:C,imagePreviewStyles:C===c.IMAGE?P:{}}):t(o,{}),(null==z?void 0:z.dateTime)?t(j,{text:z.text,dateTime:z.dateTime,code:z.code}):t(o,{}),!!l&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:B}})}),e(T,{children:[t(m,Object.assign({body:null!=h?h:"",placement:"top"},{children:t(g,Object.assign({style:{flex:1}},{children:h}))})),t(g,{children:"16:48"})]}),k&&k.length>0?k.map(((e,o)=>t(x,{text:e.text,Icon:Y[e.type],size:H},o))):M===f.QUICK_REPLY?t("div",{children:null==O?void 0:O.map(((e,o)=>t(x,{text:e.text},o)))}):M===f.CTA_BTN?t("div",{children:null==_?void 0:_.map(((e,o)=>t(x,{textTypography:A?p:d,extraContent:R?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:H},o)))}):t(o,{})]})};export{C as ChatUIV2};

package/dist/esm/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -1,11 +1,10 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../assets/icons/lto_icon.svg.js";import i from"styled-components";import{BodySecondary as o,BodyTiny as t}from"../../../TypographyStyle.js";import{COLORS as s}from"../../../../constants/Theme.js";const c=i=>{const{text:c,dateTime:f,code:m}=i;return e(l,{children:[n(d,{children:n(r,{width:24,height:24,style:{display:"flex"}})}),e(a,{children:[n(o,Object.assign({numberOfLines:2,color:s.content.primary},{children:c})),e(t,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:s.content.secondary},{children:["Offer Ends on ",f]})),e(t,Object.assign({numberOfLines:2,color:s.content.placeholder},{children:["Code ",m]}))]})]})},l=i.div`
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../assets/icons/lto_icon.svg.js";import o from"styled-components";import{BodySecondary as i,BodyTiny as t}from"../../../TypographyStyle.js";import{COLORS as s}from"../../../../constants/Theme.js";const c=o=>{const{text:c,dateTime:f,code:m}=o;return e(d,{children:[n(l,{children:n(r,{width:24,height:24,style:{display:"flex"}})}),e(a,{children:[n(i,Object.assign({numberOfLines:2,color:s.content.primary},{children:c})),e(t,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:s.content.secondary},{children:["Ends on ",f]})),e(t,Object.assign({numberOfLines:2,color:s.content.placeholder},{children:["Code ",m]}))]})]})},d=o.div`
 	display: flex;
 	flex-direction: row;
 	background: #f6f6f6;
 	margin: 0px 10px;
 	overflow: hidden;
-	align-items: center;
-`,d=i.div`
+`,l=o.div`
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -14,8 +13,8 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../asse
 	border-radius: 24px;
 	background: #d8f0e7;
 	margin: 5px;
-`,a=i.div`
+`,a=o.div`
 	display: flex;
 	flex-direction: column;
 	flex: 1;
-`;export{c as LimitedTimeOffer,l as StyledLimitedOfferTime,d as StyledLtoIcon,a as StyledLtoText};
+`;export{c as LimitedTimeOffer,d as StyledLimitedOfferTime,l as StyledLtoIcon,a as StyledLtoText};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as s,jsxs as r}from"react/jsx-runtime";import t from"../../../assets/icons/filePdf.svg.js";import i from"../../../assets/icons/image.svg.js";import o from"../../../assets/icons/videoRecorder.svg.js";import{BodySecondary as m}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{HEADER_TYPES as n}from"../models/TemplateMeta.js";import{MediaContainer as d}from"./ChatUI.style.js";import{ShimmerImage as c}from"../../shimmer-image/ShimmerImage.js";const h=s=>{let{headerAssetName:c,mediaType:h}=s;const l=h===n.IMAGE?i:h===n.VIDEO?o:t;return r(d,{children:[e(l,{height:40,width:40,color:a.icon.placeholder}),!!c&&e(m,Object.assign({style:{color:a.content.secondary,marginTop:8}},{children:c}))]})},l=r=>{let{headerAssetLink:t,headerAssetName:i,mediaType:o,imagePreviewStyles:m}=r;if(!t||o===n.DOCUMENT)return e(h,Object.assign({},{headerAssetLink:t,headerAssetName:i,mediaType:o}));return e(d,{children:o===n.IMAGE?e(c,{imageUrl:t,alt:t,width:"100%",height:240,borderRadius:8}):o===n.VIDEO?e("video",Object.assign({src:t,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0},{children:e("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):e(s,{})})};export{l as MediaCard,h as NoMediaCard};
+import{jsx as e,Fragment as s,jsxs as r}from"react/jsx-runtime";import t from"../../../assets/icons/filePdf.svg.js";import i from"../../../assets/icons/image.svg.js";import o from"../../../assets/icons/videoRecorder.svg.js";import{BodySecondary as m}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{HEADER_TYPES as n}from"../models/TemplateMeta.js";import{MediaContainer as d}from"./ChatUI.style.js";import{ShimmerImage as c}from"../../shimmer-image/ShimmerImage.js";const h=s=>{let{headerAssetName:c,mediaType:h}=s;const l=h===n.IMAGE?i:h===n.VIDEO?o:t;return r(d,{children:[e(l,{height:40,width:40,color:a.icon.placeholder}),!!c&&e(m,Object.assign({style:{color:a.content.secondary,marginTop:8}},{children:c}))]})},l=r=>{let{headerAssetLink:t,headerAssetName:i,mediaType:o,imagePreviewStyles:m}=r;if(!t||o===n.DOCUMENT)return e(h,Object.assign({},{headerAssetLink:t,headerAssetName:i,mediaType:o}));return e(d,{children:o===n.IMAGE?e(c,{imageUrl:t,alt:t,width:"100%",height:156,borderRadius:8}):o===n.VIDEO?e("video",Object.assign({src:t,style:{width:"100%",minHeight:"156px",borderRadius:8},controls:!0},{children:e("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):e(s,{})})};export{l as MediaCard,h as NoMediaCard};

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

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

package/dist/esm/components/template-preview/WhatsAppTemplatePreview.d.ts

@@ -10,8 +10,5 @@ declare const WhatsappTemplatePreview: React.FC<{
     zeroStateComponent?: ReactElement;
     size?: 'small' | 'large';
     showSampleValues?: boolean;
-    carouselCardIndex?: number;
-    isWhatsappCarousel?: boolean;
-    isPreview?: boolean;
 }>;
 export default WhatsappTemplatePreview;

package/dist/esm/components/template-preview/WhatsAppTemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import{TemplateCreatorHelper as o}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as n}from"./models/TemplateMeta.js";import{TemplateHelperUtils as r}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as d}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as s}from"./WhatsApp/WhatsAppLikePreviewV2.js";const p=p=>{let{template:u,extras:v,containerStyle:m,usePlaceHolderName:h,showHeader:x,zeroStateComponent:c,size:b,showSampleValues:T,carouselCardIndex:y,isWhatsappCarousel:w,isPreview:f}=p;var B,N,V,k,C,A,L,P,j,S,F,g,O,I,H,U,W,q,z,D,M,R;const{selectedCarouselIndex:E}=i(),[G,J]=t(),K=new o,Q=new r,X=[];return(null===(N=null===(B=null==G?void 0:G.ctaBtn)||void 0===B?void 0:B.phoneNumber)||void 0===N?void 0:N.isChecked)&&X.push({type:"phoneNumber",text:null!==(V=G.ctaBtn.phoneNumber.btnText)&&void 0!==V?V:"",extra:null!==(k=G.ctaBtn.phoneNumber.phoneNumber)&&void 0!==k?k:""}),(null===(A=null===(C=null==G?void 0:G.ctaBtn)||void 0===C?void 0:C.websiteLinkBtn)||void 0===A?void 0:A.isChecked)&&X.push({type:"website",text:null!==(L=G.ctaBtn.websiteLinkBtn.btnText)&&void 0!==L?L:"",extra:null!==(j=null===(P=G.ctaBtn.websiteLinkBtn)||void 0===P?void 0:P.linkOpens)&&void 0!==j?j:"",placeholder:null!==(S=G.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==S?S:""}),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[u,T]),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[E]),u?u.htmlContentUrl?e(d,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:Q.whatsappOnlyFillVariablesValueInBodyText(null!==(W=null==G?void 0:G.bodyText)&&void 0!==W?W:"",null!==(q=null==G?void 0:G.bodyVariables)&&void 0!==q?q:[],h),footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:Q.fillVariablesValInBodyText(null!==(z=null==G?void 0:G.headerText)&&void 0!==z?z:"",null!==(D=null==G?void 0:G.headerVariables)&&void 0!==D?D:[],h),headerAssetLink:null!==(M=null==G?void 0:G.headerAssetLink)&&void 0!==M?M:"",headerAssetName:null!==(R=null==G?void 0:G.headerAssetName)&&void 0!==R?R:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=c?c:e(l,{children:" "}),isPreview:f}):e(s,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:null==G?void 0:G.bodyText,footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:null==G?void 0:G.headerText,headerAssetLink:null!==(F=null==G?void 0:G.headerAssetLink)&&void 0!==F?F:"",headerAssetName:null!==(g=null==G?void 0:G.headerAssetName)&&void 0!==g?g:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:y,zeroStateComponent:null!=c?c:e(l,{children:" "}),bodyVariableList:null!==(I=null===(O=null==G?void 0:G.bodyVariables)||void 0===O?void 0:O.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==I?I:[],headerVariableList:null!==(U=null===(H=null==G?void 0:G.headerVariables)||void 0===H?void 0:H.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==U?U:[],buttons:null==G?void 0:G.allButtons,limitedTimeOfferComponent:null==G?void 0:G.limitedTimeOfferComponent,isWhatsappCarousel:w,isPreview:f}):e(l,{children:c})};export{p as default};
+import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";import{TemplateCreatorHelper as o}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as a}from"./models/TemplateMeta.js";import{TemplateHelperUtils as n}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as r}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as d}from"./WhatsApp/WhatsAppLikePreviewV2.js";const p=p=>{let{template:s,extras:u,containerStyle:v,usePlaceHolderName:m,showHeader:h,zeroStateComponent:x,size:c,showSampleValues:b}=p;var T,y,w,N,f,k,B,V,A,L,C,S,j,P,g,O,F,H,q,z,R,U;const[W,I]=t(),M=new o,D=new n,E=[];return(null===(y=null===(T=null==W?void 0:W.ctaBtn)||void 0===T?void 0:T.phoneNumber)||void 0===y?void 0:y.isChecked)&&E.push({type:"phoneNumber",text:null!==(w=W.ctaBtn.phoneNumber.btnText)&&void 0!==w?w:"",extra:null!==(N=W.ctaBtn.phoneNumber.phoneNumber)&&void 0!==N?N:""}),(null===(k=null===(f=null==W?void 0:W.ctaBtn)||void 0===f?void 0:f.websiteLinkBtn)||void 0===k?void 0:k.isChecked)&&E.push({type:"website",text:null!==(B=W.ctaBtn.websiteLinkBtn.btnText)&&void 0!==B?B:"",extra:null!==(A=null===(V=W.ctaBtn.websiteLinkBtn)||void 0===V?void 0:V.linkOpens)&&void 0!==A?A:"",placeholder:null!==(L=W.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==L?L:""}),i((()=>{s&&M.parseUITemplateFromDBFormat({dbFormattedTemplate:s,isDuplicate:!1,showSampleValues:b,isV2:!s.htmlContentUrl}).then((e=>{I(Object.assign({},e))}))}),[s,b]),s?s.htmlContentUrl?e(r,{showHeader:h,containerPadding:"large"===c?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:v,textType:"html",bodyText:D.whatsappOnlyFillVariablesValueInBodyText(null!==(F=null==W?void 0:W.bodyText)&&void 0!==F?F:"",null!==(H=null==W?void 0:W.bodyVariables)&&void 0!==H?H:[],m),footerText:null==W?void 0:W.footerText,headerMediaType:(null==W?void 0:W.headerType)||a.NONE,headerText:D.fillVariablesValInBodyText(null!==(q=null==W?void 0:W.headerText)&&void 0!==q?q:"",null!==(z=null==W?void 0:W.headerVariables)&&void 0!==z?z:[],m),headerAssetLink:null!==(R=null==W?void 0:W.headerAssetLink)&&void 0!==R?R:"",headerAssetName:null!==(U=null==W?void 0:W.headerAssetName)&&void 0!==U?U:"",quickReplybtn:null==W?void 0:W.quickReply,ctaBtn:E,actionTypes:null==W?void 0:W.actionsType,extras:u,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=x?x:e(l,{children:" "})}):e(d,{showHeader:h,containerPadding:"large"===c?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:v,textType:"html",bodyText:null==W?void 0:W.bodyText,footerText:null==W?void 0:W.footerText,headerMediaType:(null==W?void 0:W.headerType)||a.NONE,headerText:null==W?void 0:W.headerText,headerAssetLink:null!==(C=null==W?void 0:W.headerAssetLink)&&void 0!==C?C:"",headerAssetName:null!==(S=null==W?void 0:W.headerAssetName)&&void 0!==S?S:"",quickReplybtn:null==W?void 0:W.quickReply,ctaBtn:E,actionTypes:null==W?void 0:W.actionsType,extras:u,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=x?x:e(l,{children:" "}),bodyVariableList:null!==(P=null===(j=null==W?void 0:W.bodyVariables)||void 0===j?void 0:j.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==P?P:[],headerVariableList:null!==(O=null===(g=null==W?void 0:W.headerVariables)||void 0===g?void 0:g.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==O?O:[],buttons:null==W?void 0:W.allButtons,limitedTimeOfferComponent:null==W?void 0:W.limitedTimeOfferComponent}):e(l,{children:x})};export{p as default};