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

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

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

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

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

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

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

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

@@ -6,4 +6,4 @@
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;exports.default=i=>{let{headerText:o,subText:l,toolTipInfo:c,containerStyle:p}=i;return e.jsxs(d,Object.assign({style:Object.assign({},p)},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(r.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:o})),c&&e.jsx(s.Tooltip,Object.assign({body:l},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(a,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:l}))]}))};
+`;exports.default=i=>{let{headerText:o,subText:l,toolTipInfo:c,containerStyle:p}=i;return e.jsxs(d,Object.assign({style:Object.assign({},p)},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(r.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:o})),c&&e.jsx(s.Tooltip,Object.assign({body:c},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(a,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:l}))]}))};

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

@@ -1,3 +1,4 @@
+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";
@@ -10,6 +11,8 @@ export interface WhatsAppTemplateCardButtonV2Props {
     button: TEMPLATE_BUTTON;
     CTAoptions?: ButtonPlaceHolderOptions[];
     QRBoptions?: ButtonPlaceHolderOptions[];
+    variableList?: VariableListInterfaceV2[];
+    variableListIndex: number;
 }
-declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
 export default WhatsAppTemplateCardButtonV2;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+export declare const getPreviewWidth: (channel: CHANNEL_TYPE) => 240 | 300 | 360;

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>!!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(e);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>new RegExp("^(https?://)?([a-z0-9-]+\\.)+[a-z]{2,}(\\.[a-z]{2,})?(\\:[0-9]+)?(/[\\w@.-]*)*$","i").test(e);

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

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

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

@@ -15,5 +15,6 @@ export interface TemplatePreviewProps {
     hideHeader?: boolean;
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -7,13 +7,14 @@
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-`,d=i.default(t.Caption)`
+`,p=i.default(t.Caption)`
 	color: ${r.COLORS.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-`,n=i.default.div`
+	text-wrap: wrap;
+`,d=i.default.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -22,7 +23,7 @@
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,p=i.default.div`
+`,n=i.default.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
@@ -31,7 +32,6 @@
 	border-top: 1px solid ${r.COLORS.stroke.primary};
 `,s=i.default.div`
 	display: flex;
-
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
@@ -53,4 +53,4 @@
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=n,exports.TimeStamp=d;
+`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=d,exports.TimeStamp=p;

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

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/halfRectangle.svg.js"),r=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),a=require("styled-components"),i=require("../../tooltips/Tooltip.js"),o=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),l=require("../helpers/VariableEditorHelper.js"),d=require("../models/TemplateMeta.js"),p=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),x=require("./MediaCard.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(a);const j=u.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),i=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),a=require("styled-components"),n=require("../../tooltips/Tooltip.js"),o=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),l=require("../helpers/VariableEditorHelper.js"),p=require("../models/TemplateMeta.js"),x=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),m=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),c=require("./MediaCard.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=u(a);const T=j.default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,m=u.default.div`
+`,f=j.default.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${n.COLORS.content.primary};
+	color: ${d.COLORS.content.primary};
 	word-wrap: break-word;
-`,T=u.default(m)`
+`,y=j.default(f)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,y=new l.VariableEditorHelper;exports.ChatUIV2=a=>{const{bodyText:n,footerText:l,headerMediaType:c,headerText:u,headerAssetLink:f,headerAssetName:g,quickReplybtn:E,ctaBtn:b,actionTypes:S,extras:v,showHeader:C,imagePreviewStyles:q,size:w,bodyVariableList:_,headerVariableList:A}=a,I=y.format(n,_),N=y.format(u,A);return e.jsxs(h.Container,{children:[e.jsx(j,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),c===d.HEADER_TYPES.TEXT?e.jsx(T,{dangerouslySetInnerHTML:{__html:N}}):c!==d.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:f,headerAssetName:g,mediaType:c,imagePreviewStyles:c===d.HEADER_TYPES.IMAGE?q:{}}):e.jsx(e.Fragment,{}),!!n&&e.jsx(e.Fragment,{children:e.jsx(m,{dangerouslySetInnerHTML:{__html:I}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(i.Tooltip,Object.assign({body:null!=l?l:"",placement:"top"},{children:e.jsx(h.TimeStamp,Object.assign({style:{flex:1}},{children:l}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),S===d.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==E?void 0:E.map(((t,r)=>e.jsx(p.ChatBtn,{text:t.text},r)))}):S===d.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==b?void 0:b.map(((t,a)=>e.jsx(p.ChatBtn,{textTypography:C?o.Caption:o.BodySecondary,extraContent:v?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:w},a)))}):e.jsx(e.Fragment,{})]})};
+`,g=new l.VariableEditorHelper;exports.ChatUIV2=a=>{const{bodyText:d,footerText:l,headerMediaType:u,headerText:j,headerAssetLink:E,headerAssetName:C,quickReplybtn:b,ctaBtn:v,actionTypes:q,extras:S,showHeader:_,imagePreviewStyles:O,size:w,bodyVariableList:L,headerVariableList:I,buttons:P,limitedTimeOfferComponent:A}=a,N=g.format(d,L),R=g.format(j,I),H={COPY_CODE:t.default,PHONE_NUMBER:i.default,URL:s.default,QUICK_REPLY:()=>e.jsx(e.Fragment,{})};return e.jsxs(h.Container,{children:[e.jsx(T,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),u===p.HEADER_TYPES.TEXT?e.jsx(y,{dangerouslySetInnerHTML:{__html:R}}):u!==p.HEADER_TYPES.NONE?e.jsx(c.MediaCard,{headerAssetLink:E,headerAssetName:C,mediaType:u,imagePreviewStyles:u===p.HEADER_TYPES.IMAGE?O:{}}):e.jsx(e.Fragment,{}),(null==A?void 0:A.dateTime)?e.jsx(m.LimitedTimeOffer,{text:A.text,dateTime:A.dateTime,code:A.code}):e.jsx(e.Fragment,{}),!!d&&e.jsx(e.Fragment,{children:e.jsx(f,{dangerouslySetInnerHTML:{__html:N}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(n.Tooltip,Object.assign({body:null!=l?l:"",placement:"top"},{children:e.jsx(h.TimeStamp,Object.assign({style:{flex:1}},{children:l}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),P&&P.length>0?P.map(((t,r)=>e.jsx(x.ChatBtn,{text:t.text,Icon:H[t.type],size:w},r))):q===p.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==b?void 0:b.map(((t,r)=>e.jsx(x.ChatBtn,{text:t.text},r)))}):q===p.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(x.ChatBtn,{textTypography:_?o.Caption:o.BodySecondary,extraContent:S?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?i.default:s.default,size:w},r)))}):e.jsx(e.Fragment,{})]})};

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.d.ts

@@ -0,0 +1,9 @@
+import { CreateTemplateType } from '../../models/WhatsAppTemplate';
+/**
+ * Renders Limited Time Offer component
+ * Type of props is infered from template
+ */
+export declare const LimitedTimeOffer: (props: CreateTemplateType['limitedTimeOfferComponent']) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledLimitedOfferTime: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoText: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../assets/icons/lto_icon.svg.js"),r=require("styled-components"),n=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(r);const d=o.default.div`
+	display: flex;
+	flex-direction: row;
+	background: #f6f6f6;
+	margin: 0px 10px;
+	overflow: hidden;
+`,l=o.default.div`
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: #d8f0e7;
+	margin: 5px;
+`,c=o.default.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+`;exports.LimitedTimeOffer=r=>{const{text:s,dateTime:o,code:a}=r;return e.jsxs(d,{children:[e.jsx(l,{children:e.jsx(t.default,{width:24,height:24,style:{display:"flex"}})}),e.jsxs(c,{children:[e.jsx(n.BodySecondary,Object.assign({numberOfLines:2,color:i.COLORS.content.primary},{children:s})),e.jsxs(n.BodyTiny,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:i.COLORS.content.secondary},{children:["Ends on ",o]})),e.jsxs(n.BodyTiny,Object.assign({numberOfLines:2,color:i.COLORS.content.placeholder},{children:["Code ",a]}))]})]})},exports.StyledLimitedOfferTime=d,exports.StyledLtoIcon=l,exports.StyledLtoText=c;

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 .]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 .]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\(\()(.*)(\)\)|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 ._]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 .]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 .]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\{\{|\(\()(.*?)(\)\)|\}\}|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 ._]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;

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

@@ -12,5 +12,17 @@ export declare class TemplateCreatorHelper {
     private parseBodyComponent;
     private parseFooterComponent;
     private parseButtonComponent;
-    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean, isV2?: boolean): Promise<CreateTemplateType>;
+    /**
+     * 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>;
 }

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

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

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

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

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

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

package/dist/cjs/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';
+    type: 'string' | 'link' | 'image' | 'button' | 'date_time';
     isEditableVariable: boolean;
     updatedValue: string;
     index?: number;