@bikdotai/bik-component-library 0.0.442-beta.3 → 0.0.443-beta.1

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

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

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

@@ -6,4 +6,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`,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};
+`,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:p},{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.d.ts

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

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

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

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

@@ -1 +1 @@
-const t=t=>{var o,e;const n=[],i=[],p=[],l=[],s=[];let a=null;return t.components.forEach(((t,o)=>{var e,l,s,d,r,u;if("BODY"===t.type&&t.text&&n.push({component:t,i:o,type:"BODY"}),"HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format&&(null===(l=null===(e=t.example)||void 0===e?void 0:e.header_handle)||void 0===l?void 0:l[0])&&(a=t),"HEADER"===t.type&&"TEXT"===t.format&&n.push({component:t,i:o,type:"HEADER"}),"BUTTONS"===t.type){const e=null===(d=null===(s=t.buttons)||void 0===s?void 0:s.filter)||void 0===d?void 0:d.call(s,(t=>"URL"===t.type));i.push({component:Object.assign(Object.assign({},t),{buttons:e}),i:o});const n=null===(u=null===(r=t.buttons)||void 0===r?void 0:r.filter)||void 0===u?void 0:u.call(r,(t=>"QUICK_REPLY"===t.type));p.push({component:Object.assign(Object.assign({},t),{buttons:n}),i:o})}"limited_time_offer"===t.type&&n.push({component:t,i:o,type:"limited_time_offer"})})),t.mapping&&(null===(o=t.mapping.body)||void 0===o||o.forEach((t=>{l.push(t)}))),t.mapping&&(null===(e=t.mapping.header)||void 0===e||e.forEach((t=>{s.push(t)}))),{imageComponent:a,descriptionComponents:n,urlBtns:i,qrbBtns:p,bodyVariables:l,headerVariables:s}};export{t as getAllDataFromTemplateComponent};
+const o=o=>{var n,t;const e=[],i=[],p=[],l=[],s=[];let a=null;return o.components.forEach(((o,n)=>{var t,l,s,u,d,r;if("BODY"===o.type&&o.text&&e.push({component:o,i:n,type:"BODY"}),"HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format&&(null===(l=null===(t=o.example)||void 0===t?void 0:t.header_handle)||void 0===l?void 0:l[0])&&(a=o),"HEADER"===o.type&&"TEXT"===o.format&&e.push({component:o,i:n,type:"HEADER"}),"BUTTONS"===o.type){const t=null===(u=null===(s=o.buttons)||void 0===s?void 0:s.filter)||void 0===u?void 0:u.call(s,(o=>"URL"===o.type));i.push({component:Object.assign(Object.assign({},o),{buttons:t}),i:n});const e=null===(r=null===(d=o.buttons)||void 0===d?void 0:d.filter)||void 0===r?void 0:r.call(d,(o=>"QUICK_REPLY"===o.type));p.push({component:Object.assign(Object.assign({},o),{buttons:e}),i:n}),p.push}})),o.mapping&&(null===(n=o.mapping.body)||void 0===n||n.forEach((o=>{l.push(o)}))),o.mapping&&(null===(t=o.mapping.header)||void 0===t||t.forEach((o=>{s.push(o)}))),{imageComponent:a,descriptionComponents:e,urlBtns:i,qrbBtns:p,bodyVariables:l,headerVariables:s}};export{o as getAllDataFromTemplateComponent};

package/dist/esm/components/template-context-mapper/utils/validateIsUrl.d.ts

@@ -1 +1 @@
-export declare const validateIsUrl: (receivedMediaLink: string) => boolean;
+export declare const validateIsUrl: (recievedMediaLink: string) => boolean;

package/dist/esm/components/template-context-mapper/utils/validateIsUrl.js

@@ -1 +1 @@
-const t=t=>new RegExp("^(https?://)?([a-z0-9-]+\\.)+[a-z]{2,}(\\.[a-z]{2,})?(\\:[0-9]+)?(/[\\w@.-]*)*$","i").test(t);export{t as validateIsUrl};
+const d=d=>!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_,.~+=/-]*)?(\\#[-a-z\\d_]*)?$","i").test(d);export{d as validateIsUrl};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/components/template-preview/constants/regexPatterns.js

@@ -1 +1 @@
-const a=/\[\[[A-Za-z0-9 .]+\]\]/,z=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,A=/(\[\[|\{\{|\(\()(.*?)(\)\)|\}\}|\]\])/,Z=/\{\{[A-Za-z0-9 .]+\}\}/g,g=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,_=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,o=/\{\{[A-Za-z0-9 ._]+\}\}/,t=/\{\{[A-Za-z0-9 _]+\}\}/g,c=Z,e=/\[([^[]+)\](\(.*\))/,n=/[((|))]/;export{n as editableBracketPattern,z as editableVarPattern,g as globalHalfVariablePattern,Z as globalVariablePattern,a as lockedVarPattern,A as placeHolderNamePattern,e as previewLinkMDFormatPattern,_ as specialCharPattern,c as templateVariablePattern,o as variablePattern,t as variablePatternGlobal};
+const a=/\[\[[A-Za-z0-9 .]+\]\]/,z=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,A=/(\[\[|\(\()(.*)(\)\)|\]\])/,Z=/\{\{[A-Za-z0-9 .]+\}\}/g,g=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,_=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,o=/\{\{[A-Za-z0-9 ._]+\}\}/,t=/\{\{[A-Za-z0-9 _]+\}\}/g,c=Z,e=/\[([^[]+)\](\(.*\))/,n=/[((|))]/;export{n as editableBracketPattern,z as editableVarPattern,g as globalHalfVariablePattern,Z as globalVariablePattern,a as lockedVarPattern,A as placeHolderNamePattern,e as previewLinkMDFormatPattern,_ as specialCharPattern,c as templateVariablePattern,o as variablePattern,t as variablePatternGlobal};

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts

@@ -12,17 +12,5 @@ export declare class TemplateCreatorHelper {
     private parseBodyComponent;
     private parseFooterComponent;
     private parseButtonComponent;
-    /**
-     * Parses LTO component to a format preview can understand.
-     * Points to Note -
-     * 1. Takes the Copy Code from previously parsed buttons.
-     * 2. LTO component does not have a dateTime expiry by default. Hence, while sending template to ContextMapper, send with a date or current Date and Time is picked here.
-     */
-    private parseLimitedTimeOfferComponent;
-    parseUITemplateFromDBFormat(data: {
-        dbFormattedTemplate: WhatsAppTemplate;
-        isDuplicate?: boolean;
-        showSampleValues?: boolean;
-        isV2?: boolean;
-    }): Promise<CreateTemplateType>;
+    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean, isV2?: boolean): Promise<CreateTemplateType>;
 }

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as i}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as o,editableVarPattern as l}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as v,HEADER_TEXT_LEN_LIMIT as s,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as f,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as k}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var i,n,o,l,a,d,r,v,s,p;const u={headerType:C.NONE,headerVariables:[]},m=null===(i=e.components)||void 0===i?void 0:i.find((e=>"HEADER"===e.type));if(m){u.headerType=m.format,u.headerText=m.text,u.headerAssetLink=null===(o=null===(n=m.example)||void 0===n?void 0:n.header_handle)||void 0===o?void 0:o[0];const i=null===(a=null===(l=m.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(i&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),o={idx:0,variableVal:t?i:h,editable:n,editableDefaultValues:n?void 0:i,variableName:e};u.headerVariables=[o],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(p=u.headerText)||void 0===p?void 0:p.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,l,E,_,L,O,w,R,D,A,V,I,U,q,j,F,P,M,Y,$,K;const Q=/\p{Extended_Pictographic}/u;let S="valid";const H={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},G=new N;let W=!1;const X=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?(null===(i=e.meta.name)||void 0===i?void 0:i.trim().length)>d?(H.meta.name=r,S="invalid"):n.test(null===(o=e.meta.name)||void 0===o?void 0:o.trim())&&(H.meta.name=v,S="invalid"):(H.meta.name=a,S="invalid"),H.meta.name&&!W&&(X(x.name),W=!0),e.headerType===C.TEXT){const t=null!==(E=null===(l=e.headerText)||void 0===l?void 0:l.trim())&&void 0!==E?E:"";if(t)if(t.length>s)H.header=p,S="invalid";else{const e=G.getTemplateVariablesFromState(t);e&&e.length>1&&(H.header=u,S="invalid")}else H.header=a,S="invalid"}else e.headerType===C.DOCUMENT||e.headerType===C.IMAGE||(e.headerType,C.VIDEO);if(e.headerType!==C.DOCUMENT&&e.headerType!==C.IMAGE&&e.headerType!==C.VIDEO||e.headerAssetLink||(H.header=m,S="invalid"),H.header&&!W&&(X(x.header),W=!0),e.bodyText?e.bodyTextRaw&&(null===(_=e.bodyTextRaw)||void 0===_?void 0:_.trim().length)>c&&(H.body=h,S="invalid"):(H.body=a,S="invalid"),H.body&&!W&&(X(x.body),W=!0),e.footerText&&e.footerText.length>s&&(H.footer=p,S="invalid"),(null==H?void 0:H.footer)&&!W&&(X(x.footer),W=!0),e.actionsType===g.CTA_BTN){if(null===(O=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===O?void 0:O.isChecked){const t=null===(w=e.ctaBtn.phoneNumber.btnText)||void 0===w?void 0:w.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;H.ctaBtn&&!t?(H.ctaBtn.phoneNumber.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.phoneNumber.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.phoneNumber.btnText=y,S="invalid"),H.ctaBtn&&!i?(H.ctaBtn.phoneNumber.link=a,S="invalid"):H.ctaBtn&&i&&i.length<10&&(H.ctaBtn.phoneNumber.link=f,S="invalid")}if(null===(D=null===(R=e.ctaBtn)||void 0===R?void 0:R.websiteLinkBtn)||void 0===D?void 0:D.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),i=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();H.ctaBtn&&!t?(H.ctaBtn.websiteLink.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.websiteLink.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.websiteLink.btnText=y,S="invalid"),!H.ctaBtn||i||n||(H.ctaBtn.websiteLink.link=a,S="invalid")}}else if(e.actionsType===g.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var o;const l=null===(o=i.text)||void 0===o?void 0:o.trim();if(l)if(l.length>B)t[n]=T,S="invalid";else if(Q.test(l))t[n]=y,S="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===l))&&(t[n]=k,S="invalid")}else t[n]=a,S="invalid"})),H.quickReply=t}if(e.actionsType===g.CTA_BTN||e.actionsType===g.QUICK_REPLY){const e=null===(U=H.quickReply)||void 0===U?void 0:U.reduce(((e,t)=>e||!!t),!1);((null===(j=null===(q=null==H?void 0:H.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===j?void 0:j.link)||(null===(P=null===(F=H.ctaBtn)||void 0===F?void 0:F.websiteLink)||void 0===P?void 0:P.btnText)||(null===(Y=null===(M=H.ctaBtn)||void 0===M?void 0:M.phoneNumber)||void 0===Y?void 0:Y.link)||(null===(K=null===($=H.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===K?void 0:K.btnText)||e)&&!W&&(X(x.actionButtons),W=!0)}return{status:S,errors:H}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let p="";const u=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return u&&(null===(d=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,i)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),p=null==d?void 0:d.match(o);(null==p?void 0:p[2])&&(d=null==p?void 0:p[2]),s.push({idx:i,variableVal:n?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),p=e.htmlContentUrl?e.htmlContentUrl:(null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=u.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==s?void 0:s[n]){const o=s[n].variableName;return t?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:p}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,n,o,a,d,r;const v={actionsType:g.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n[0].type)?g.QUICK_REPLY:g.CTA_BTN;if(v.actionsType=t,t===g.QUICK_REPLY){const e=null!==(a=null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o.map((e=>e)))&&void 0!==a?a:[];v.quickReply=e}else t===g.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var i,n,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(n=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===n?void 0:n[0])&&void 0!==o?o:void 0;let r=!1;d&&l.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:Array.isArray(e.example)?e.example[0]:(null==e?void 0:e.example)||""}):e))}return v}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var o,l,a;if("limited_time_offer"===e.type){n.text=null!==(l=null===(o=e.limited_time_offer)||void 0===o?void 0:o.text)&&void 0!==l?l:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseUITemplateFromDBFormat(t){var i;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:p,bodyVariable:u}=yield this.parseBodyComponent(e,o,l),{actionsType:m,quickReply:c,ctaBtn:h,allButtons:b}=yield this.parseButtonComponent(e),T=this.parseLimitedTimeOfferComponent(e,b),y={quickReply:c,ctaBtn:h,allButtons:b,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:m,footerText:this.parseFooterComponent(e),bodyVariables:u,bodyText:p,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:T},{errors:f}=this.validateState(y);return y.error=f,y}))}}export{E as TemplateCreatorHelper};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as i,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as l,NAME_LEN_LIMIT as a,NAME_LEN_ERROR as d,NO_SPECIAL_CHAR as r,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as s,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as p,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as m,QUICK_REPLY_BTN_TEXT_LIMIT as h,QUICK_REPLY_LEN_ERROR as b,BUTTON_EMOJI_ERROR as T,VALID_PHONE_NUMBER as y,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as f}from"../constants/TemplateConstants.js";import{HEADER_TYPES as k,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class C{parseDataFromHeaderComponent(e){var t,n,i,o,l,a,d,r,v,s;const u={headerType:k.NONE,headerVariables:[]},p=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(p){u.headerType=p.format,u.headerText=p.text,u.headerAssetLink=null===(i=null===(n=p.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(l=null===(o=p.example)||void 0===o?void 0:o.header_text)||void 0===l?void 0:l[0],c=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.header)||void 0===d?void 0:d[0];if(t&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("((","").replace("))",""),n=/\(\(/.test(c),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(v=null===(r=p.example)||void 0===r?void 0:r.header_text)||void 0===v?void 0:v.length)&&(u.headerText=null===(s=u.headerText)||void 0===s?void 0:s.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,C,L,E,R,_,w,A,V,I,D,U,O,q,F,j,P,$,Y;const K=/\p{Extended_Pictographic}/u;let M="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},H=new g;let S=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>a?(Q.meta.name=d,M="invalid"):n.test(e.meta.name.trim())&&(Q.meta.name=r,M="invalid"):(Q.meta.name=l,M="invalid"),Q.meta.name&&!S&&(G(x.name),S=!0),e.headerType===k.TEXT){const t=null!==(o=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==o?o:"";if(t)if(t.length>v)Q.header=s,M="invalid";else{const e=H.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,M="invalid")}else Q.header=l,M="invalid"}else e.headerType===k.DOCUMENT||e.headerType===k.IMAGE||(e.headerType,k.VIDEO);if(e.headerType!==k.DOCUMENT&&e.headerType!==k.IMAGE&&e.headerType!==k.VIDEO||e.headerAssetLink||(Q.header=p,M="invalid"),Q.header&&!S&&(G(x.header),S=!0),e.bodyText?e.bodyTextRaw&&(null===(C=e.bodyTextRaw)||void 0===C?void 0:C.trim().length)>c&&(Q.body=m,M="invalid"):(Q.body=l,M="invalid"),Q.body&&!S&&(G(x.body),S=!0),e.footerText&&e.footerText.length>v&&(Q.footer=s,M="invalid"),(null==Q?void 0:Q.footer)&&!S&&(G(x.footer),S=!0),e.actionsType===N.CTA_BTN){if(null===(E=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===E?void 0:E.isChecked){const t=null===(R=e.ctaBtn.phoneNumber.btnText)||void 0===R?void 0:R.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.phoneNumber.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.phoneNumber.btnText=T,M="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=l,M="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=y,M="invalid")}if(null===(w=null===(_=e.ctaBtn)||void 0===_?void 0:_.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),n=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),i=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.websiteLink.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.websiteLink.btnText=T,M="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=l,M="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=b,M="invalid";else if(K.test(o))t[i]=T,M="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=f,M="invalid")}else t[i]=l,M="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(D=Q.quickReply)||void 0===D?void 0:D.reduce(((e,t)=>e||!!t),!1);((null===(O=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===O?void 0:O.link)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(P=null===(j=Q.ctaBtn)||void 0===j?void 0:j.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===($=Q.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!S&&(G(x.actionButtons),S=!0)}return{status:M,errors:Q}}parseBodyComponent(e){let n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var o,l,a,d,r;const v=[];let s="";const u=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return u&&(null===(a=null===(l=u.example)||void 0===l?void 0:l.body_text)||void 0===a||a[0].forEach(((t,n)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[n];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(i);(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:n,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=u.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==v?void 0:v[i]){const o=v[i].variableName;return n?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${t.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,l,a,d;const r={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(r.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];return r.quickReply=e,r}t===N.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var n,i,l,a;if(t.phone_number&&(r.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==l?l:void 0;let v=!1;d&&o.test(d)&&(v=!0),r.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:v?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:v?void 0:d}}})))}return r}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var o;return e(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:u,quickReply:p,ctaBtn:c}=yield this.parseButtonComponent(t),m={quickReply:p,ctaBtn:c,meta:{name:n?`${t.label} Copy`:t.label,category:null===(o=t.category)||void 0===o?void 0:o.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:u,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:h}=this.validateState(m);return m.error=h,m}))}}export{C as TemplateCreatorHelper};

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

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

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

@@ -8,4 +8,3 @@ export * from './helpers/WhatsAppFormatToHTML';
 export * from './helpers/VariableEditorHelper';
 export * from './models/EmailTemplate';
 export * from './models/TemplateMeta';
-export * from './models/WhatsAppTemplate';

package/dist/esm/components/template-preview/models/TemplateMeta.d.ts

@@ -1,7 +1,7 @@
 import { SingleOption } from "../../dropdown/type";
 export type CUSTOM_VARIABLE = {
     variableName: string;
-    type: 'string' | 'link' | 'image' | 'button' | 'date_time';
+    type: 'string' | 'link' | 'image';
     isEditableVariable: boolean;
     updatedValue: string;
     index?: number;