@bikdotai/bik-component-library 0.0.3202-beta.1 → 0.0.5581-tooltip-beta

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

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

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

@@ -1,13 +1,10 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type ComponentType = WhatsAppTemplate['components'][0];
 export interface VariableConnectorWhatsAppProps {
     originalVariableList: WhatsAppTemplateVariables;
     descriptionComponent: ComponentType;
-    variableMapping: string[] | undefined;
     type: ComponentType['type'];
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
 }
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnectorWhatsApp;

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"),l=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),r=require("./VariableConnector.js");exports.default=d=>{let{descriptionComponent:n,type:o,showVariableModal:s}=d;var p,c,x,u,b,v;const{originalVariableList:y,disableEditVariable:m,selectedCarouselIndex:j}=t.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(p=null!=j&&j>-1?y.cards[j].body:null==y?void 0:y.body)||void 0===p?void 0:p.map(((t,d)=>m||!t.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",d+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),d):e.jsx(r.default,{index:d,variable:t,showVariableModal:s,componentType:n.type},`${d}-${t.index}`)))}):"HEADER"===n.type?e.jsx("div",{children:null===(c=null!=j&&j>-1?y.cards[j].header:null==y?void 0:y.header)||void 0===c?void 0:c.map(((t,d)=>t.isEditableVariable?e.jsx(r.default,{index:d,variable:t,showVariableModal:s,componentType:n.type},`${d}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",d+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),d)))}):"limited_time_offer"===n.type?e.jsx("div",{children:e.jsx(r.default,{index:0,variable:{variableName:null!==(u=null===(x=null==n?void 0:n.limited_time_offer)||void 0===x?void 0:x.text)&&void 0!==u?u:"Expires after",updatedValue:null!==(v=null===(b=n.example)||void 0===b?void 0:b.limited_time_offer)&&void 0!==v?v:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:s,componentType:n.type},`${n.type}`)}):e.jsx(e.Fragment,{})};

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

@@ -1,12 +1,10 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface VariableConnectorsProps {
     onFocus?: (variableIndex: number) => void;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
 }
-declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableConnectors: ({ onFocus, showVariableModal, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnectors;
 export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

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

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

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IMimeTypeResponse, WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export type UseEditWhatsappTemplateMediaResponse = ReturnType<typeof useEditWhatsappTemplateMedia>;
+interface UseEditWhatsappTemplateMediaProps {
+    uploadMediaLink?: WhatsAppPickerMeta['uploadMediaLink'];
+    uploadMediaFiles: WhatsAppPickerMeta['uploadMediaFiles'];
+    validateMimeType?: (blob: Blob) => Promise<IMimeTypeResponse>;
+    updateTemplateImageUrl: (url: string, format: WhatsAppTemplate['components'][0]['format']) => void;
+    fileRef: React.RefObject<HTMLInputElement | null>;
+    mediaComponent: any;
+}
+export declare const useEditWhatsappTemplateMedia: (props: UseEditWhatsappTemplateMediaProps) => {
+    uploadMedia: (urlOrVariable?: string) => Promise<void>;
+    processImageUpload: (file?: Blob | File) => Promise<void>;
+    handleImageUpload: ($event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleImageChange: () => void;
+    onCropComplete: (base64: string) => Promise<void>;
+    editIconRef: React.MutableRefObject<null>;
+    fileName: string | undefined;
+    setFileName: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedVariable: string | undefined;
+    setSelectedVariable: React.Dispatch<React.SetStateAction<string | undefined>>;
+    openEditMedia: boolean;
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedImage: string | undefined;
+    setSelectedImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+    loading: boolean;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    error: string;
+    setError: React.Dispatch<React.SetStateAction<string>>;
+};
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),i=require("lodash"),t=require("react"),n=require("../../helpers/FileUploaderHelper.js"),o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),a=require("../utils/validateIsUrl.js");exports.useEditWhatsappTemplateMedia=s=>{const{uploadMediaLink:r,updateTemplateImageUrl:d,validateMimeType:c,mediaComponent:p,uploadMediaFiles:u,fileRef:m}=s,{template:v,selectedCarouselIndex:f,setTemplate:E}=l.useTemplateModalContext(),[g,h]=t.useState(void 0),[b,y]=t.useState(),[M,T]=t.useState(!1),[_,I]=t.useState(""),[A,S]=t.useState(!1),[j,R]=t.useState(),U=t.useRef(null);function D(i){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new n.FileUploaderHelper;if(i instanceof Blob){if(c){const{isValid:e,mimeType:t}=yield c(i);if(!e)return void I(`MIME type ${t} is not supported`)}const n=e.validate({file:i});if(n)I(n),S(!1),T(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,n=yield u({file:i,fileName:g,isImage:e});if(n.success){const[e]=i.type.split("/");d(null!==(t=n.url)&&void 0!==t?t:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else S(!1),I("An unknown technical error occurred");S(!1),T(!1)}}else I("An unknown technical error occurred"),S(!1)}))}function O(){var e;(null===(e=null==m?void 0:m.current)||void 0===e?void 0:e.click)&&m.current.click()}return t.useEffect((()=>{h(void 0),R(void 0),y(void 0),T(!1),S(!1),I("")}),[f]),{uploadMedia:function(t){var l,s,c,u,m,g;return e.__awaiter(this,void 0,void 0,(function*(){if(I(""),y(""),t)if(t.startsWith("https"))try{if(S(!0),r){const e=yield r(t),{type:i,size:a,success:s}=e;if(s){const t=(new n.FileUploaderHelper).validate({linkData:{type:i,size:a}});if(t)return I(t),void S(!1);const[s]=i.split("/");d(null!==(l=e.url)&&void 0!==l?l:"",s.includes("application")?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[s.toUpperCase()])}else S(!1),I("An unknown technical error occurred");S(!1)}else{const e=yield fetch(t),i=yield e.blob();yield D(i)}}catch(e){S(!1),I("An unknown technical error occurred")}else if(a.isVariable(t)){let e;if(y(t),e=null!=f&&f>-1?{components:null===(c=null===(s=v.components[1])||void 0===s?void 0:s.cards)||void 0===c?void 0:c[f].components,mapping:null===(m=null===(u=null==v?void 0:v.mapping)||void 0===u?void 0:u.cards)||void 0===m?void 0:m[f]}:Object.assign({},v),e.components){const i=null===(g=null==e?void 0:e.components)||void 0===g?void 0:g.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const n=Object.assign(Object.assign({},e.components[i]),{format:p.format,example:{header_handle:[t]}}),o=[...e.components];o[i]=n,e.components=o}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),S(!1),null!=f&&f>-1){const t=i.cloneDeep(v);t.components[1].cards[f].components=e.components,t.mapping.cards[f]=e.mapping,null==E||E(Object.assign({},t))}else null==E||E(Object.assign({},e))}else S(!1),I("Invalid URL or variable");else O()}))},processImageUpload:D,handleImageUpload:function(e){var i;I(""),S(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;R(""),h(""),e.onload=()=>{R(e.result),h(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else D(t)},handleImageChange:O,onCropComplete:function(i){return e.__awaiter(this,void 0,void 0,(function*(){S(!1),I("");const e=yield fetch(i),t=yield e.blob();yield D(t),R(void 0),T(!1)}))},editIconRef:U,fileName:g,setFileName:h,selectedVariable:b,setSelectedVariable:y,openEditMedia:M,setOpenEditMedia:T,selectedImage:j,setSelectedImage:R,loading:A,setLoading:S,error:_,setError:I}};

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

@@ -0,0 +1 @@
+export declare const BACKGROUND_PREVIEW_IMAGE = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f";

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.BACKGROUND_PREVIEW_IMAGE="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f";

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,2 @@
-export declare const validateIsUrl: (recievedMediaLink: string) => boolean;
+export declare const validateIsUrl: (receivedMediaLink: string) => boolean;
+export declare const isVariable: (value: 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.isVariable=e=>/^{{.*}}$/.test(e),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-context-mapper/utils/validateName.d.ts

@@ -0,0 +1 @@
+export declare const validateInputName: (name: string) => boolean;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateInputName=e=>!!/[^a-zA-Z0-9._ ]/.test(e);

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

@@ -5,7 +5,9 @@ export declare const ImageContainer: import("styled-components").StyledComponent
 export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
     hideHeader?: boolean | undefined;
 }, never>;
-export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {
+    applyBorderBottom?: boolean | undefined;
+}, never>;
 export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
     hideHeader?: boolean | undefined;

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js

@@ -1,24 +1,24 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const d=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-components"),e=require("../../constants/Theme.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=t(r);const d=o.default.div`
 	padding: 16px;
 	padding-bottom: 12px;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-	border: 1px solid ${r.COLORS.stroke.primary};
+	border: 1px solid ${e.COLORS.stroke.primary};
 `,i=o.default.div`
 	width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-left: 1px solid ${r.COLORS.stroke.primary};
-	border-right: 1px solid ${r.COLORS.stroke.primary};
-	border-top-color: ${r.COLORS.stroke.primary};
-	border-top-width: ${e=>e.hideHeader?"1px":"0px"};
+	border-left: 1px solid ${e.COLORS.stroke.primary};
+	border-right: 1px solid ${e.COLORS.stroke.primary};
+	border-top-color: ${e.COLORS.stroke.primary};
+	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
 	overflow: scroll;
 `,a=o.default.div`
 	width: 100%;
 	height: 100%;
-	background-color: ${r.BASE_COLORS.grayscale[100]};
-`,n=o.default.div`
+	background-color: ${e.BASE_COLORS.grayscale[100]};
+`,s=o.default.div`
 	height: 100%;
 	display: flex;
 	flex-direction: column;
@@ -26,18 +26,23 @@
 	justify-content: center;
 	flex-grow: 1;
 	min-height: 180px;
-`,s=o.default.div`
+	border-left: 1px solid ${e.COLORS.stroke.primary};
+	border-right: 1px solid ${e.COLORS.stroke.primary};
+
+	border-radius: ${r=>r.applyBorderBottom?"0 0 8px 8px":"unset"};
+	border-bottom: ${r=>r.applyBorderBottom?`1px solid ${e.COLORS.stroke.primary}`:""};
+`,p=o.default.div`
 	display: flex;
 	justify-content: center;
 	width: 100%;
-	background: ${r.COLORS.surface.standard};
+	background: ${e.COLORS.surface.standard};
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-	border: 1px solid ${r.COLORS.stroke.primary};
+	border: 1px solid ${e.COLORS.stroke.primary};
 `,l=o.default.div`
 	border-radius: 4px;
-	background-color: ${r.COLORS.surface.standard};
-	margin-top: ${e=>e.hideHeader?0:16};
+	background-color: ${e.COLORS.surface.standard};
+	margin-top: ${r=>r.hideHeader?0:16};
 	display: flex;
 	flex-direction: column;
-`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=n,exports.ImageContainer=i,exports.ViewButton=s;
+`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=s,exports.ImageContainer=i,exports.ViewButton=p;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CSSProperties } from 'styled-components';
 import { EmailTemplateType } from './models/EmailTemplate';
+export declare const DEFAULT_IMAGE = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c";
 declare const EmailTemplateThumbnailPreview: React.FC<{
     template: EmailTemplateType;
     hideHeader?: boolean;
@@ -9,5 +10,6 @@ declare const EmailTemplateThumbnailPreview: React.FC<{
     containerStyle?: CSSProperties;
     emailHtmlContainerId?: string;
     emailDisplayContent?: string;
+    applyBorderBottom?: boolean;
 }>;
 export default EmailTemplateThumbnailPreview;

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

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

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

@@ -8,5 +8,6 @@ declare const SmsTemplatePreview: React.FC<{
     onlyTemplateContent?: boolean;
     display_content?: string;
     size?: 'small' | 'large';
+    uniqueId?: string;
 }>;
 export default SmsTemplatePreview;

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

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

@@ -1,10 +1,11 @@
 import React from 'react';
+import { WhatsAppCarouselTemplate } from "./models/WhatsappCarouselTemplate";
 import { CHANNEL_TYPE } from './models/Channels';
 import { EmailMeta, EmailTemplateType } from './models/EmailTemplate';
 import { SMSMeta, SMSTemplateType } from './models/SmsTemplate';
 import { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';
 export interface TemplatePreviewProps {
-    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
+    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType | WhatsAppCarouselTemplate;
     channel: CHANNEL_TYPE;
     onlyTemplateContent?: boolean;
     outsidePreview?: boolean;
@@ -15,5 +16,10 @@ export interface TemplatePreviewProps {
     hideHeader?: boolean;
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    applyBorderBottom?: 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, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, }: 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("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),s=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=p=>{let{template:u,channel:m,whatsAppSpecificMeta:c,templateCreationsInfo:v,hideHeader:h,size:j,onlyTemplateContent:C,emailSpecificMeta:g,smsSpecificMeta:S,showSampleValues:y,carouselCardIndex:b,isWhatsappCarousel:x,isPreview:T,applyBorderBottom:O}=p;var w,P;const{setSelectedCarouselIndex:H}=l.useTemplateModalContext();return m===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${a.COLORS.stroke.primary}`:"none",borderRadius:4},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(s.default,{template:u,hideHeader:h,onlyTemplateContent:C,size:null!=j?j:"large",variableStore:null==S?void 0:S.smsVariableStore,display_content:null==S?void 0:S.smsDisplayContent,uniqueId:null==S?void 0:S.uniqueId})})):m===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==g?void 0:g.templateContainerStyles)},{children:e.jsx(n.default,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:h,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId,applyBorderBottom:O})})):m===r.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(H&&x){if(-1===b&&!(null===(l=null===(e=null==u?void 0:u.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length))return;H(null!=b?b:-1)}}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(w=null==u?void 0:u.label)&&void 0!==w?w:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:y,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=j?j:"large",containerStyle:Object.assign(Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(P=null==c?void 0:c.containerStyle)&&void 0!==P?P:{}),{height:"100%"}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:b,isWhatsappCarousel:x,isPreview:T})]})):e.jsx(e.Fragment,{})};

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

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

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

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