@bikdotai/bik-component-library 0.0.693-beta.1 → 0.0.693

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

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

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

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

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

@@ -1,9 +1,9 @@
-import{j as t}from"../../../node_modules/react/jsx-runtime.js";import e from"../../../assets/icons/info.svg.js";import o from"styled-components";import{Tooltip as s}from"../../tooltips/Tooltip.js";import{BodySecondary as i,TitleRegular as n}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";const l=o(i)`
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import i from"styled-components";import{Tooltip as n}from"../../tooltips/Tooltip.js";import{BodySecondary as r,TitleRegular as s}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const a=i(r)`
 	line-height: 1.5 !important;
-`,a=o.div`
+`,c=i.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`,c=o=>{let{headerText:i,subText:c,toolTipInfo:p,containerStyle:d}=o;return t.jsxs(a,Object.assign({style:Object.assign({},d)},{children:[t.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[t.jsx(n,Object.assign({style:{color:r.content.primary}},{children:i})),p&&t.jsx(s,Object.assign({body:p},{children:t.jsx("div",{children:t.jsx(e,{width:20,height:20,color:r.content.placeholder})})}))]})),t.jsx(l,Object.assign({style:{color:r.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:c}))]}))};export{c as default};
+`,p=i=>{let{headerText:r,subText:p,toolTipInfo:d,containerStyle:m}=i;return t(c,Object.assign({style:Object.assign({},m)},{children:[t("div",Object.assign({style:{display:"flex",gap:8}},{children:[e(s,Object.assign({style:{color:l.content.primary}},{children:r})),d&&e(n,Object.assign({body:d},{children:e("div",{children:e(o,{width:20,height:20,color:l.content.placeholder})})}))]})),e(a,Object.assign({style:{color:l.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:p}))]}))};export{p as default};

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

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

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

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{Button as t}from"../button/Button.js";import{TitleRegular as a}from"../TypographyStyle.js";import{EmailContainer as s,Header as n,IframeContainer as r,ImageContainer as o,CardLoadingContainer as i,ViewButton as p}from"./EmailTemplatePreview.styled.js";const l="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",d=d=>{let{template:c,handleViewTemplate:m,hideHeader:u,hideViewButton:h,containerStyle:j,emailHtmlContainerId:y,emailDisplayContent:b,applyBorderBottom:x,hidePointerEvents:g}=d;return e.jsxs(s,Object.assign({hideHeader:u,style:Object.assign({},null!=j?j:{})},{children:[!u&&e.jsx(n,{children:e.jsx(a,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),e.jsx(r,Object.assign({applyBorderBottom:x},{children:b?e.jsx("iframe",{title:"Email template preview",id:null!=y?y:"",width:"100%",srcDoc:(f=b,f.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${l}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:g?void 0:"none"}}):e.jsx(o,Object.assign({hideHeader:u},{children:e.jsx(i,{})}))})),!h&&e.jsx(p,{children:e.jsx(t,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]}));var f};export{l as DEFAULT_IMAGE,d as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as s,Header as r,IframeContainer as o,ImageContainer as i,CardLoadingContainer as p,ViewButton as l}from"./EmailTemplatePreview.styled.js";const d="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",c=c=>{let{template:m,handleViewTemplate:u,hideHeader:h,hideViewButton:y,containerStyle:b,emailHtmlContainerId:g,emailDisplayContent:f,applyBorderBottom:C,hidePointerEvents:j}=c;return e(s,Object.assign({hideHeader:h,style:Object.assign({},null!=b?b:{})},{children:[!h&&t(r,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:m.name}))}),t(o,Object.assign({applyBorderBottom:C},{children:f?t("iframe",{title:"Email template preview",id:null!=g?g:"",width:"100%",srcDoc:(x=f,x.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${d}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:j?void 0:"none"}}):t(i,Object.assign({hideHeader:h},{children:t(p,{})}))})),!y&&t(l,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{u&&u()}})})]}));var x};export{d as DEFAULT_IMAGE,c as default};

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

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

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

@@ -1 +1 @@
-import{j as s}from"../../../node_modules/react/jsx-runtime.js";import o from"../../../assets/icons/arrow_left.svg.js";import e from"../../../assets/icons/user_icon.svg.js";import t from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as r}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as i,LeftContainer as c,IconContainer as a,TitleContainer as j,SubTitle as m}from"./RCSPreview.styled.js";const d=()=>s.jsxs(i,{children:[s.jsxs(c,{children:[s.jsx(o,{height:16,width:16,color:n.content.secondary}),s.jsx(a,{children:s.jsx(e,{height:14,width:14,color:n.content.primaryInverse})}),s.jsxs(j,{children:[s.jsx(r,Object.assign({color:n.content.secondary,style:{fontWeight:600}},{children:"Brand name"})),s.jsx(m,{children:"Business account"})]})]}),s.jsx(t,{height:16,width:16,color:n.content.secondary})]});export{d as default};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import r from"../../../assets/icons/arrow_left.svg.js";import e from"../../../assets/icons/user_icon.svg.js";import s from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as n}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as a,IconContainer as h,TitleContainer as m,SubTitle as d}from"./RCSPreview.styled.js";const l=()=>o(c,{children:[o(a,{children:[t(r,{height:16,width:16,color:i.content.secondary}),t(h,{children:t(e,{height:14,width:14,color:i.content.primaryInverse})}),o(m,{children:[t(n,Object.assign({color:i.content.secondary,style:{fontWeight:600}},{children:"Brand name"})),t(d,{children:"Business account"})]})]}),t(s,{height:16,width:16,color:i.content.secondary})]});export{l as default};

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

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

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

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

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

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

package/dist/esm/components/template-preview/SMS/SMSBubble.js

@@ -1,12 +1,12 @@
-import{j as o}from"../../../node_modules/react/jsx-runtime.js";import s from"../../../assets/icons/union.svg.js";import t from"styled-components";import{COLORS as e}from"../../../constants/Theme.js";const n=t.div`
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/union.svg.js";import i from"styled-components";import{COLORS as n}from"../../../constants/Theme.js";const r=i.div`
 	position: absolute;
 	width: 30px;
 	height: 30px;
 	left: -10px;
 	bottom: -1px;
-`,i=t.div`
+`,s=i.div`
 	padding: 12px;
-	background: ${e.background.base};
+	background: ${n.background.base};
 	border-radius: 16px;
 	position: relative;
-`,r=t=>{const{content:r,size:d}=t;return o.jsxs(i,{children:[o.jsx(n,{children:o.jsx(s,{color:e.background.base,height:27,width:27})}),o.jsx("div",{style:{fontSize:"small"===d?12:14},dangerouslySetInnerHTML:{__html:r}})]})};export{i as SMSContainer,n as SideCaret,r as default};
+`,d=i=>{const{content:d,size:a}=i;return t(s,{children:[o(r,{children:o(e,{color:n.background.base,height:27,width:27})}),o("div",{style:{fontSize:"small"===a?12:14},dangerouslySetInnerHTML:{__html:d}})]})};export{s as SMSContainer,r as SideCaret,d as default};

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

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import s from"../../assets/icons/arrow_left.svg.js";import t from"../../assets/icons/more_vertical.svg.js";import n from"../../assets/icons/search.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{useTemplateModalContext as o}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as r,Caption as i}from"../TypographyStyle.js";import{renderVariableUIForPreview as a}from"./helpers/SmsTemplateHelper.js";import c from"./SMS/SMSBubble.js";import{SMSBubbleContainer as d,SMSCardHeader as m,SMSHeader as j}from"./SmsTemplatePreview.styled.js";const p=p=>{let{template:h,variableStore:x,hideHeader:g,display_content:u,onlyTemplateContent:v,size:f,uniqueId:y}=p;var b;const w=null==h?void 0:h.content,{hideDeviceContainerInPreview:S}=o();return S?e.jsx(d,Object.assign({size:f},{children:e.jsx(c,{size:null!=f?f:"large",content:null!=u?u:a(w,null!=x?x:[],void 0,null!=y?y:"")})})):e.jsxs(e.Fragment,{children:[!g&&!v&&e.jsx(m,{children:e.jsx(r,Object.assign({style:{maxWidth:"100%"}},{children:h.name}))}),!v&&e.jsx(j,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s,{width:16,height:16,color:l.content.secondary}),e.jsx(i,{children:null===(b=null==h?void 0:h.headers)||void 0===b?void 0:b[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(n,{width:16,height:16,color:l.content.secondary}),e.jsx(t,{width:16,height:16,color:l.content.secondary})]}))]})}),e.jsx(d,Object.assign({size:f},{children:e.jsx(c,{size:null!=f?f:"large",content:null!=u?u:a(w,null!=x?x:[],void 0,null!=y?y:"")})}))]})};export{p as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import l from"../../assets/icons/arrow_left.svg.js";import n from"../../assets/icons/more_vertical.svg.js";import o from"../../assets/icons/search.svg.js";import{COLORS as r}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as d}from"./helpers/SmsTemplateHelper.js";import m from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as u}from"./SmsTemplatePreview.styled.js";const v=v=>{let{template:f,variableStore:g,hideHeader:j,display_content:y,onlyTemplateContent:x,size:b,uniqueId:w}=v;var S;const z=null==f?void 0:f.content,{hideDeviceContainerInPreview:O}=s();return O?e(p,Object.assign({size:b},{children:e(m,{size:null!=b?b:"large",content:null!=y?y:d(z,null!=g?g:[],void 0,null!=w?w:"")})})):t(i,{children:[!j&&!x&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:f.name}))}),!x&&e(u,{children:t(i,{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(l,{width:16,height:16,color:r.content.secondary}),e(c,{children:null===(S=null==f?void 0:f.headers)||void 0===S?void 0:S[0]})]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(o,{width:16,height:16,color:r.content.secondary}),e(n,{width:16,height:16,color:r.content.secondary})]}))]})}),e(p,Object.assign({size:b},{children:e(m,{size:null!=b?b:"large",content:null!=y?y:d(z,null!=g?g:[],void 0,null!=w?w:"")})}))]})};export{v as default};

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

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useTemplateModalContext as t}from"../template-context-mapper/context/templateModalContext.js";import i from"../../utils/StringUtils.js";import{COLORS as l}from"../../constants/Theme.js";import n from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as a}from"../TypographyStyle.js";import o from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import r from"./SmsTemplatePreview.js";import d from"./webpush/WebpushPreview.js";import p from"./WhatsAppTemplatePreview.js";const m=m=>{let{template:c,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:j,hideHeader:g,size:C,onlyTemplateContent:b,emailSpecificMeta:x,smsSpecificMeta:y,showSampleValues:S,carouselCardIndex:f,isWhatsappCarousel:w,isPreview:T,applyBorderBottom:O,webPushSpecificMeta:P,hidePointerEvents:I}=m;var W,H;const{setSelectedCarouselIndex:A}=t();return v===s.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0,border:j?`1px solid ${l.stroke.primary}`:"none",borderRadius:4},null==y?void 0:y.templateContainerStyles)},{children:e.jsx(r,{template:c,hideHeader:g,onlyTemplateContent:b,size:null!=C?C:"large",variableStore:null==y?void 0:y.smsVariableStore,display_content:null==y?void 0:y.smsDisplayContent,uniqueId:null==y?void 0:y.uniqueId})})):v===s.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(o,{template:c,handleViewTemplate:()=>{var e;null===(e=null==x?void 0:x.handleViewTemplate)||void 0===e||e.call(x)},hideHeader:g,hideViewButton:null==x?void 0:x.hideViewButtonForEmail,containerStyle:null==x?void 0:x.containerStyle,emailDisplayContent:null==x?void 0:x.emailDisplayContent,emailHtmlContainerId:null==x?void 0:x.emailHtmlContainerId,applyBorderBottom:O,hidePointerEvents:I})})):v===s.WHATSAPP||v===s.RCS?e.jsxs("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),j?u.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(A&&w){if(-1===f&&!(null===(t=null===(e=null==c?void 0:c.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;A(null!=f?f:-1)}}},{children:[j?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(a,{children:i.convertToTitleCase(null!==(W=null==c?void 0:c.label)&&void 0!==W?W:"")})})):e.jsx(e.Fragment,{}),e.jsx(p,{showSampleValues:S,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:c,size:j?"small":null!=C?C:"large",containerStyle:Object.assign(Object.assign({borderWidth:j?0:1,borderTopWidth:1},null!==(H=null==h?void 0:h.containerStyle)&&void 0!==H?H:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:f,isWhatsappCarousel:w,isPreview:T,channel:v}),!!(null==c?void 0:c.aiContentConfigId)&&e.jsx("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5}},{children:e.jsx(n,{width:48,height:48})}))]})):v==s.WEBPUSH?e.jsx("div",Object.assign({style:Object.assign({},null==P?void 0:P.containerStyle)},{children:e.jsx(d,{template:c,extraContainerCss:null==P?void 0:P.extraContainerCss})})):e.jsx(e.Fragment,{})},u={WhatsAppWrapper:{backgroundColor:l.surface.standard,borderRadius:4,border:`1px solid ${l.background.inactive}`,marginTop:16}};export{m as TemplatePreview};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";import n from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import a from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as s}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as d}from"./models/Channels.js";import p from"./SmsTemplatePreview.js";import m from"./webpush/WebpushPreview.js";import c from"./WhatsAppTemplatePreview.js";const u=u=>{let{template:h,channel:g,whatsAppSpecificMeta:C,templateCreationsInfo:b,hideHeader:y,size:S,onlyTemplateContent:j,emailSpecificMeta:f,smsSpecificMeta:w,showSampleValues:T,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,applyBorderBottom:I,webPushSpecificMeta:W,hidePointerEvents:H}=u;var A,B;const{setSelectedCarouselIndex:E}=l();return g===d.SMS?e("div",Object.assign({style:Object.assign({marginTop:b?16:0,border:b?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==w?void 0:w.templateContainerStyles)},{children:e(p,{template:h,hideHeader:y,onlyTemplateContent:j,size:null!=S?S:"large",variableStore:null==w?void 0:w.smsVariableStore,display_content:null==w?void 0:w.smsDisplayContent,uniqueId:null==w?void 0:w.uniqueId})})):g===d.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:b?16:0},null==f?void 0:f.templateContainerStyles)},{children:e(r,{template:h,handleViewTemplate:()=>{var e;null===(e=null==f?void 0:f.handleViewTemplate)||void 0===e||e.call(f)},hideHeader:y,hideViewButton:null==f?void 0:f.hideViewButtonForEmail,containerStyle:null==f?void 0:f.containerStyle,emailDisplayContent:null==f?void 0:f.emailDisplayContent,emailHtmlContainerId:null==f?void 0:f.emailHtmlContainerId,applyBorderBottom:I,hidePointerEvents:H})})):g===d.WHATSAPP||g===d.RCS?t("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==C?void 0:C.templateContainerStyles),b?v.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(E&&O){if(-1===x&&!(null===(t=null===(e=null==h?void 0:h.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;E(null!=x?x:-1)}}},{children:[b?e("div",Object.assign({style:{padding:16}},{children:e(s,{children:n.convertToTitleCase(null!==(A=null==h?void 0:h.label)&&void 0!==A?A:"")})})):e(i,{}),e(c,{showSampleValues:T,showHeader:null==C?void 0:C.showWhatsAppHeader,extras:null==C?void 0:C.whatsAppExtras,template:h,size:b?"small":null!=S?S:"large",containerStyle:Object.assign(Object.assign({borderWidth:b?0:1,borderTopWidth:1},null!==(B=null==C?void 0:C.containerStyle)&&void 0!==B?B:{}),{height:"100%"}),zeroStateComponent:null==C?void 0:C.zeroStateComponent,usePlaceHolderName:null==C?void 0:C.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,channel:g}),!!(null==h?void 0:h.aiContentConfigId)&&e("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5}},{children:e(a,{width:48,height:48})}))]})):g==d.WEBPUSH?e("div",Object.assign({style:Object.assign({},null==W?void 0:W.containerStyle)},{children:e(m,{template:h,extraContainerCss:null==W?void 0:W.extraContainerCss})})):e(i,{})},v={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{u as TemplatePreview};

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

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{Caption as t,BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{ChatBtnContainer as n}from"./ChatUI.style.js";const s=s=>{let{Icon:i,text:l,extraContent:c,placeholder:a,textTypography:p,size:d}=s;const h=p||r;return e.jsx(n,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[i&&e.jsx(i,{color:o.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(h,Object.assign({style:{color:o.special.brand.facebook,textAlign:"center",fontSize:"small"===d?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:l}))]})),!!c&&e.jsx(t,Object.assign({style:{marginTop:2,color:o.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:a?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(a):c}))]}))})};export{s as ChatBtn};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Caption as r,BodySecondary as n}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{ChatBtnContainer as i}from"./ChatUI.style.js";const l=l=>{let{Icon:c,text:s,extraContent:a,placeholder:p,textTypography:h,size:d}=l;const f=h||n;return e(i,{children:t("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[c&&e(c,{color:o.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e(f,Object.assign({style:{color:o.special.brand.facebook,textAlign:"center",fontSize:"small"===d?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:s}))]})),!!a&&e(r,Object.assign({style:{marginTop:2,color:o.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:p?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(p):a}))]}))})};export{l as ChatBtn};

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

@@ -1 +1 @@
-import{j as s}from"../../../node_modules/react/jsx-runtime.js";import r from"../../../assets/icons/arrow_left.svg.js";import e from"../../../assets/icons/user_icon.svg.js";import o from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as t}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as i,LeftContainer as c,IconContainer as m,TitleContainer as a,SubTitle as j}from"./ChatHeader.style.js";const h=()=>s.jsxs(i,{children:[s.jsxs(c,{children:[s.jsx(r,{height:16,width:16,color:n.content.primaryInverse}),s.jsx(m,{children:s.jsx(e,{height:14,width:14,color:n.content.primaryInverse})}),s.jsxs(a,{children:[s.jsx(t,Object.assign({color:n.content.primaryInverse},{children:"Brand name"})),s.jsx(j,{children:"Business account"})]})]}),s.jsx(o,{height:16,width:16,color:n.content.primaryInverse})]});export{h as default};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import t from"../../../assets/icons/arrow_left.svg.js";import s from"../../../assets/icons/user_icon.svg.js";import o from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as m,IconContainer as a,TitleContainer as h,SubTitle as l}from"./ChatHeader.style.js";const p=()=>r(c,{children:[r(m,{children:[e(t,{height:16,width:16,color:n.content.primaryInverse}),e(a,{children:e(s,{height:14,width:14,color:n.content.primaryInverse})}),r(h,{children:[e(i,Object.assign({color:n.content.primaryInverse},{children:"Brand name"})),e(l,{children:"Business account"})]})]}),e(o,{height:16,width:16,color:n.content.primaryInverse})]});export{p as default};

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import{j as t}from"../../../node_modules/react/jsx-runtime.js";import s from"styled-components";import{BodyRegular as n}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";import{templateVariablePattern as o}from"../constants/regexPatterns.js";const r=s.div`
+import{jsx as t,Fragment as n,jsxs as e}from"react/jsx-runtime";import o from"styled-components";import{BodyRegular as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{templateVariablePattern as i}from"../constants/regexPatterns.js";const l=o.div`
 	padding: 8px 12px 0px;
 	/* display: inline; */
-`,i=s=>{const{text:i,bold:l}=s,a=null==i?void 0:i.match(o),m=l?{fontWeight:"600"}:{};return i?t.jsx(r,{children:i.split(o).map(((s,o)=>t.jsxs(t.Fragment,{children:[t.jsx(n,Object.assign({style:m},{children:s})),!!(null==a?void 0:a[o])&&t.jsx(n,Object.assign({style:Object.assign({color:e.content.brand},m)},{children:null==a?void 0:a[o]}))]})))}):t.jsx(t.Fragment,{})};export{i as default};
+`,c=o=>{const{text:c,bold:p}=o,a=null==c?void 0:c.match(i),d=p?{fontWeight:"600"}:{};return c?t(l,{children:c.split(i).map(((o,i)=>e(n,{children:[t(r,Object.assign({style:d},{children:o})),!!(null==a?void 0:a[i])&&t(r,Object.assign({style:Object.assign({color:s.content.brand},d)},{children:null==a?void 0:a[i]}))]})))}):t(n,{})};export{c as default};

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

@@ -1,12 +1,12 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import r from"styled-components";import{TitleRegular as o}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{getPreviewPropLen as t}from"../utils/getPreviewPropLen.js";import i from"./ChatHeader.js";import a from"./ChatUI.js";const d=r.div`
+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 d from"./ChatUI.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
-		${s.stroke.primary};
+		${a.stroke.primary};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
-`,n=r(o)`
-	color: ${s.content.primary};
-`,p=r=>3===t(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsx(i,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(n,{children:"Preview"})})),e.jsx(a,Object.assign({showHeader:r.showHeader},r))]}))]}))});export{p as WhatsappLikePreview};
+`,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 WhatsappLikePreview};

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

@@ -1,11 +1,11 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as r}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as o}from"../../TypographyStyle.js";import{COLORS as a}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 m=t.div`
-	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${r})`};
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as a}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{getPreviewPropLen as n}from"../utils/getPreviewPropLen.js";import m from"./ChatHeader.js";import{ChatUIV2 as c}from"./ChatUiV2.js";const l=o.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a})`};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
-`,d=t(o)`
-	color: ${a.content.primary};
-`,l=t=>{const{hideDeviceContainerInPreview:r}=s();return 3===i(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):r?e.jsx(n,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(m,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsx(p,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"}},{children:[!t.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(d,{children:"Preview"})})),e.jsx(n,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{l as WhatsappLikePreviewV2};
+`,d=o(i)`
+	color: ${p.content.primary};
+`,h=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===n(o)?e(t,{children:o.zeroStateComponent}):a?e(c,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(l,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(m,{}),r("div",Object.assign({style:{padding:"small"===o.size?"12px 32px 12px 12px":`16px ${o.isWhatsappCarousel?"0px":"56px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(d,{children:"Preview"})})),e(c,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{h as WhatsappLikePreviewV2};

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

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

package/dist/esm/components/template-preview/webpush/WebpushPreview.js

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{WEB_PUSH_COMPONENT_TYPE as s}from"../models/WebpushTemplate.js";import{TemplateHelperUtils as t}from"../utils/TemplateHelperUtils.js";import{WebpushPreviewContainer as i}from"./WebpushPreview.styled.js";const n="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F4daae031-3902-4e58-a57c-32f29ea90812?alt=media&token=a7655ba9-6843-47df-91ba-422345e925c3",a=a=>{var l,o,c,r,d,m;const{components:g,webpushBroadcastConfig:j}=a.template,b=(new t).parseJsonString(g),h=(e,s)=>{let t=0;return e?e.replace(/{{(.*?)}}/g,((e,i)=>{const n=i.trim();if(s&&s.length&&t<s.length){const e=s[t];return t++,`${e} `}return`{{${n}}}`})):""},u=h(b[s.TITLE],null==j?void 0:j.title),v=h(null!==(c=null!==(o=null===(l=b[s.BODY])||void 0===l?void 0:l.text)&&void 0!==o?o:b[s.BODY])&&void 0!==c?c:"",null==j?void 0:j.body);return e.jsxs(i,Object.assign({style:Object.assign({},a.extraContainerCss)},{children:[e.jsxs("div",Object.assign({className:"icon--header"},{children:[e.jsx("div",Object.assign({className:"icon-img-container"},{children:e.jsx("img",{src:(null===(r=null==j?void 0:j[s.ICON])||void 0===r?void 0:r.length)?j[s.ICON][0]:b[s.ICON]||n,alt:"icon-image"})})),e.jsxs("div",Object.assign({className:"text--container"},{children:[e.jsx("div",{children:u}),e.jsx("div",Object.assign({style:{marginTop:3}},{children:v}))]}))]})),b[s.IMAGE]&&b[s.IMAGE].length&&e.jsx("div",Object.assign({className:"banner-img-container"},{children:e.jsx("img",{src:(null===(d=null==j?void 0:j[s.IMAGE])||void 0===d?void 0:d.length)?j[s.IMAGE][0]:null!==(m=b[s.IMAGE])&&void 0!==m?m:n,alt:"icon-image"})})),b[s.BUTTONS]&&b[s.BUTTONS].length&&e.jsx("div",Object.assign({className:"button-container "+(1===b[s.BUTTONS].length?"single-button":"")},{children:b[s.BUTTONS].map(((t,i)=>e.jsx("div",Object.assign({className:"each--btn",style:{flex:1===b[s.BUTTONS].length?"0 0 50%":"1"}},{children:e.jsx("div",Object.assign({className:"text-btn"},{children:t.text}))}),`webpush-buttons-${i}`)))}))]}))};export{a as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{WEB_PUSH_COMPONENT_TYPE as i}from"../models/WebpushTemplate.js";import{TemplateHelperUtils as n}from"../utils/TemplateHelperUtils.js";import{WebpushPreviewContainer as s}from"./WebpushPreview.styled.js";const a="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F4daae031-3902-4e58-a57c-32f29ea90812?alt=media&token=a7655ba9-6843-47df-91ba-422345e925c3",l=l=>{var o,c,r,d,m,g;const{components:b,webpushBroadcastConfig:h}=l.template,u=(new n).parseJsonString(b),v=(e,t)=>{let i=0;return e?e.replace(/{{(.*?)}}/g,((e,n)=>{const s=n.trim();if(t&&t.length&&i<t.length){const e=t[i];return i++,`${e} `}return`{{${s}}}`})):""},p=v(u[i.TITLE],null==h?void 0:h.title),O=v(null!==(r=null!==(c=null===(o=u[i.BODY])||void 0===o?void 0:o.text)&&void 0!==c?c:u[i.BODY])&&void 0!==r?r:"",null==h?void 0:h.body);return e(s,Object.assign({style:Object.assign({},l.extraContainerCss)},{children:[e("div",Object.assign({className:"icon--header"},{children:[t("div",Object.assign({className:"icon-img-container"},{children:t("img",{src:(null===(d=null==h?void 0:h[i.ICON])||void 0===d?void 0:d.length)?h[i.ICON][0]:u[i.ICON]||a,alt:"icon-image"})})),e("div",Object.assign({className:"text--container"},{children:[t("div",{children:p}),t("div",Object.assign({style:{marginTop:3}},{children:O}))]}))]})),u[i.IMAGE]&&u[i.IMAGE].length&&t("div",Object.assign({className:"banner-img-container"},{children:t("img",{src:(null===(m=null==h?void 0:h[i.IMAGE])||void 0===m?void 0:m.length)?h[i.IMAGE][0]:null!==(g=u[i.IMAGE])&&void 0!==g?g:a,alt:"icon-image"})})),u[i.BUTTONS]&&u[i.BUTTONS].length&&t("div",Object.assign({className:"button-container "+(1===u[i.BUTTONS].length?"single-button":"")},{children:u[i.BUTTONS].map(((e,n)=>t("div",Object.assign({className:"each--btn",style:{flex:1===u[i.BUTTONS].length?"0 0 50%":"1"}},{children:t("div",Object.assign({className:"text-btn"},{children:e.text}))}),`webpush-buttons-${n}`)))}))]}))};export{l as default};