@bikdotai/bik-component-library 0.0.13-beta.40 → 0.0.13-jazz

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js");var s=require("../../../constants/Theme.js"),d=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(r),p=l(t);const n=p.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../template-preview/models/TemplateMeta.js");var p=require("../../template-preview/models/Channels.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=d(r),o=d(t);const n=o.default.div`
 	background: ${s.COLORS.surface.standard};
 	border: 1px solid ${s.COLORS.stroke.primary};
 	border-radius: 8px;
@@ -6,15 +6,15 @@
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,u=p.default.div`
+`,u=o.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
 	border-bottom-color: ${s.COLORS.stroke.primary};
-`,h=p.default.div`
+`,h=o.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,c=o.default.forwardRef(((r,t)=>{let{display_content:s}=r;return e.jsxs(n,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{channel:d.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));c.displayName="DesktopPreview",exports.default=c;
+`,m=l.default.forwardRef(((r,t)=>{let{display_content:s}=r;return e.jsxs(n,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{channel:p.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));m.displayName="DesktopPreview",exports.default=m;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("./EditMediaV2.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(i);exports.default=n=>{let{mediaComponent:u,template:d,updateTemplateImageUrl:s,whatsappSpecificPickerMeta:c}=n;var p,f;const m=o.default.createRef(),[v,E]=i.useState(!1),[g,_]=i.useState("");let h;return h=u.format===r.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===r.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx("input",{ref:m,style:{display:"none"},type:"file",onChange:function(t){var i,l;return e.__awaiter(this,void 0,void 0,(function*(){_(""),E(!0);const e=new a.FileUploaderHelper,n=null===(i=t.target.files)||void 0===i?void 0:i[0];if(n instanceof Blob){const t=e.validate(n);if(t)_(t),E(!1);else{const e=u.format===r.HEADER_TYPES.IMAGE,t=yield c.uploadMediaFiles({file:n,fileName:n.name,isImage:e});if(t.success){const[e]=n.type.split("/");s(null!==(l=t.url)&&void 0!==l?l:"","application"===e?r.HEADER_TYPES.DOCUMENT:r.HEADER_TYPES[e.toUpperCase()])}else _("An unknown technical error occured");E(!1)}}else _("An unknown technical error occured"),E(!1)}))},accept:h}),t.jsx(l.default,{imageName:null!==(f=null===(p=null==u?void 0:u.example)||void 0===p?void 0:p.header_handle)&&void 0!==f?f:[],handleImageChange:function(){var e;(null===(e=null==m?void 0:m.current)||void 0===e?void 0:e.click)&&m.current.click()},mediaType:null==u?void 0:u.format,error:g,isLoading:v})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../../helpers/FileUploaderHelper.js"),a=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../modals/modal.styled.js"),require("../../../constants/Theme.js"),require("../../spinner/Spinner.js"),require("../../modals/styledModal.js");var o=require("../../template-preview/models/TemplateMeta.js"),n=require("./EditMediaV2.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(t);exports.default=l=>{let{mediaComponent:u,template:d,updateTemplateImageUrl:c,whatsappSpecificPickerMeta:p}=l;var m,f;const[v,E]=t.useState(void 0),[j,g]=t.useState(),h=s.default.createRef(),[_,q]=t.useState(!1),[S,y]=t.useState("");function A(r){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new i.FileUploaderHelper;if(r instanceof Blob){const i=e.validate(r);if(i)y(i),q(!1);else{const e=u.format===o.HEADER_TYPES.IMAGE,i=yield p.uploadMediaFiles({file:r,fileName:v,isImage:e});if(i.success){const[e]=r.type.split("/");c(null!==(t=i.url)&&void 0!==t?t:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else y("An unknown technical error occured");q(!1)}}else y("An unknown technical error occured"),q(!1)}))}let C;return C=u.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",r.jsxs(r.Fragment,{children:[!!j&&r.jsx(a.BikImageCropper,{src:j,onCropComplete:function(r){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),y("");const e=yield fetch(r);A(yield e.blob()).then((()=>{g(void 0)}))}))},onCancel:()=>{q(!1),g("")}}),r.jsx("input",{ref:h,style:{display:"none"},type:"file",onChange:function(e){var r;y(""),q(!0);const t=null===(r=e.target.files)||void 0===r?void 0:r[0];if(u.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;g(""),E(""),e.onload=()=>{g(e.result),E(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else A(t)},accept:C}),r.jsx(n.default,{imageName:null!==(f=null===(m=null==u?void 0:u.example)||void 0===m?void 0:m.header_handle)&&void 0!==f?f:[],handleImageChange:function(){var e;(null===(e=null==h?void 0:h.current)||void 0===e?void 0:e.click)&&h.current.click()},mediaType:null==u?void 0:u.format,error:S,isLoading:_})]})};

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../../constants/Theme.js");var r=require("../../template-preview/models/Channels.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(t),l=o(i);const n=l.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/Channels.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(t),l=o(i);const p=l.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,p=l.default.div`
+`,n=l.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,4 +17,4 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,c=s.default.forwardRef(((t,i)=>{let{display_content:o,channel:s,template:l}=t;return e.jsx("div",{children:e.jsxs(n,Object.assign({channel:s},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s===r.CHANNEL_TYPE.WHATSAPP?236:213,height:443}}),e.jsx(p,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{template:l,channel:s,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));c.displayName="MobilePreview",exports.default=c;
+`,c=s.default.forwardRef(((t,i)=>{let{display_content:o,channel:s,template:l}=t;return e.jsx("div",{children:e.jsxs(p,Object.assign({channel:s},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s===r.CHANNEL_TYPE.WHATSAPP?236:213,height:443}}),e.jsx(n,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{template:l,channel:s,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));c.displayName="MobilePreview",exports.default=c;

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("react"),l=require("styled-components"),n=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),o=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/Channels.js"),u=require("../../TypographyStyle.js"),s=require("../../../utils/StringUtils.js"),d=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),c=require("../utils/getVariableNameEmail.js"),v=require("../utils/validateIsUrl.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const m=p(l).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../dropdown/Dropdown.js"),i=require("../../input/Input.js"),o=require("../../template-preview/constants/regexPatterns.js"),a=require("../../template-preview/models/Channels.js"),u=require("../../TypographyStyle.js"),s=require("../../../utils/StringUtils.js"),r=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),c=require("../utils/getVariableNameEmail.js"),v=require("../utils/validateIsUrl.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const m=p(l).default.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===i.CHANNEL_TYPE.EMAIL?d.COLORS.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===a.CHANNEL_TYPE.EMAIL?r.COLORS.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,b={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"};exports.Container=m,exports.default=l=>{let{onFocus:p,variable:g,index:_}=l;var x;const[A,j]=t.useState(!1),[N,P]=t.useState(""),[L,T]=t.useState([]),[h,C]=t.useState(),{device:y,channel:O,isError:f,originalVariableList:k,template:H,setTemplate:S,setDisplayContent:Y,setOriginalVariableList:M,globalNormalizedPlaceholders:q}=r.useTemplateModalContext();function I(e,t){var l,n;const a="custom_link"===t?"link":"custom_text"===t?"string":t;if(O!==i.CHANNEL_TYPE.WHATSAPP){const n=c.getVariableNameForEmailByIndex(_+1),o=null===document||void 0===document?void 0:document.getElementById("mobile"===y?"template_html_mobile":"template_html_desktop"),u=O===i.CHANNEL_TYPE.EMAIL?null===(l=null==o?void 0:o.contentWindow)||void 0===l?void 0:l.document.getElementById(n):document.getElementById(n);u&&("custom_text"===t&&!e||"custom_link"===t&&O===i.CHANNEL_TYPE.EMAIL||"custom_link"===t&&O===i.CHANNEL_TYPE.MESSAGE&&!e?u.textContent=g.variableName:u.textContent=e);const s=k.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:a,updatedValue:e}):t));null==M||M(s)}if(O===i.CHANNEL_TYPE.WHATSAPP){const t=null===(n=k.body)||void 0===n?void 0:n.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:a,updatedValue:e}):t));null==M||M((e=>Object.assign(Object.assign({},e),{body:t,buttons:k.buttons})))}}function V(e,t){var l;const n=Object.assign({},H),a=null===(l=null==n?void 0:n.components)||void 0===l?void 0:l.map((l=>{var n,a,o,i,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(a=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===a?void 0:a[0])){const l=[...null!==(u=null===(i=null===(o=s.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:n})}return l}));n.components=a,null==S||S(n)}return t.useEffect((()=>{A&&(null==p||p())}),[A]),t.useEffect((()=>{var e;const t=[];let l=[];if(O===i.CHANNEL_TYPE.MESSAGE){const e=null!=q?q:[];T([{label:"",options:[E,b]},...e]),l=[{label:"",options:[E,b]},...e]}else{"link"===(null==g?void 0:g.type)?(t.push({label:"",options:[b,E]}),C(b)):(t.push({label:"",options:[b,E]}),C(E));const e=null!=q?q:[];T([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:s.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((O===i.CHANNEL_TYPE.WHATSAPP||O===i.CHANNEL_TYPE.EMAIL||O===i.CHANNEL_TYPE.MESSAGE)&&g.updatedValue)if(o.placeHolderNamePattern.test(g.updatedValue)&&O===i.CHANNEL_TYPE.WHATSAPP||g.updatedValue.startsWith("{{")&&O!==i.CHANNEL_TYPE.WHATSAPP){let e={label:"",value:""};const t=O===i.CHANNEL_TYPE.WHATSAPP?g.updatedValue.replace("[[","").replace("]]",""):g.updatedValue.replace("{{","").replace("}}","");l.map((l=>{l.options.map((l=>{var n;(null===(n=l.value)||void 0===n?void 0:n.replace("{{","").replace("}}",""))===t&&(e=l)}))})),e.value&&C(e)}else(null===(e=g.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(C(b),P(g.updatedValue.split("https://")[1])):(C(E),P(g.updatedValue))}),[]),e.jsxs(m,Object.assign({channel:O,focused:A,onMouseEnter:()=>j(!0),onMouseLeave:()=>j(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(u.BodySecondary,Object.assign({style:{color:f&&!h?d.COLORS.content.negative:d.COLORS.content.primary}},{children:[null===(x=g.variableName)||void 0===x?void 0:x.replace("{{","").replace("}}","")," ","link"===(null==g?void 0:g.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(n.Dropdown,{options:L,isSearchable:!1,onSelect:function(e,t){var l,n,a;const o=e;P(""),C(o),O===i.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(I(null!==(l=o.value)&&void 0!==l?l:"","string"),null==V||V(null!==(n=g.index)&&void 0!==n?n:0,`[[${o.value}]]`)):(null==V||V(null!==(a=g.index)&&void 0!==a?a:0,g.variableName),I("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?I(o.value,"url"===o.bikPlaceholderType?"link":"string"):(P(""),I("",o.value))},defaultOptions:h?[Object.assign(Object.assign({},h),{selected:!0})]:[]})})),("custom_text"===(null==h?void 0:h.value)||"custom_link"===(null==h?void 0:h.value))&&e.jsx(a.Input,{labelText:"custom_text"===(null==h?void 0:h.value)?"Custom text value":"custom_link"===(null==h?void 0:h.value)?"Custom URL value":"",id:`variable-value-${null==h?void 0:h.value}-${_}`,value:N,errorMessage:f?N?"custom_link"!==h.value||v.validateIsUrl(N)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==h?void 0:h.value)?void 0:30,prefixText:"custom_link"===(null==h?void 0:h.value)?"https://":"",placeholder:"link"===g.type||"custom_link"===h.value?"Enter custom URL here":"Enter custom text here",onBlur:e=>function(e){var t,l,n,a,o;const u="mobile"===y?"template_html_mobile":"template_html_desktop",s=document.getElementById(u),d=(null!==(a=null===(n=null===(l=null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document)||void 0===l?void 0:l.body)||void 0===n?void 0:n.innerHTML)&&void 0!==a?a:"")+(null===(o=null==s?void 0:s.contentWindow)||void 0===o?void 0:o.document.head.innerHTML);O===i.CHANNEL_TYPE.EMAIL&&(null==Y||Y(d))}(e.target.value),onChangeText:e=>function(e,t){var l;P(t);const n="custom_link"===(null==h?void 0:h.value)?`https://${t}`:t;I(n,e),O===i.CHANNEL_TYPE.WHATSAPP&&(null==V||V(null!==(l=g.index)&&void 0!==l?l:0,n))}(h.value,e)})]}))};
+`,b={value:"custom_link",label:"Custom URL"},g={value:"custom_text",label:"Custom text"};exports.Container=m,exports.default=l=>{let{onFocus:p,variable:E,index:_}=l;var x;const[j,A]=t.useState(!1),[P,N]=t.useState(""),[h,T]=t.useState([]),[f,y]=t.useState(),{device:L,channel:C,isError:O,originalVariableList:k,template:H,templateSelectionTriggered:S,setTemplate:Y,setDisplayContent:q,setOriginalVariableList:M,globalNormalizedPlaceholders:I}=d.useTemplateModalContext();function V(e,t){var l,n;const i="custom_link"===t?"link":"custom_text"===t?"string":t;if(C!==a.CHANNEL_TYPE.WHATSAPP){const n=c.getVariableNameForEmailByIndex(_+1),o=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),u=C===a.CHANNEL_TYPE.EMAIL?null===(l=null==o?void 0:o.contentWindow)||void 0===l?void 0:l.document.getElementById(n):document.getElementById(n);u&&(u.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const s=k.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t));null==M||M(s)}if(C===a.CHANNEL_TYPE.WHATSAPP){const t=null===(n=k.body)||void 0===n?void 0:n.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t));null==M||M((e=>Object.assign(Object.assign({},e),{body:t,buttons:k.buttons})))}}function W(e,t){var l;const n=Object.assign({},H),i=null===(l=null==n?void 0:n.components)||void 0===l?void 0:l.map((l=>{var n,i,o,a,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(i=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])){const l=[...null!==(u=null===(a=null===(o=s.example)||void 0===o?void 0:o.body_text)||void 0===a?void 0:a[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:n})}return l}));n.components=i,null==Y||Y(n)}return t.useEffect((()=>{j&&(null==p||p())}),[j]),t.useEffect((()=>{!function(){var e,t,l,n,i;const o="mobile"===L?"template_html_mobile":"template_html_desktop",u=document.getElementById(o),s=(null!==(n=null===(l=null===(t=null===(e=null==u?void 0:u.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==n?n:"")+(null===(i=null==u?void 0:u.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);C===a.CHANNEL_TYPE.EMAIL&&(null==q||q(s))}()}),[S]),t.useEffect((()=>{var e;const t=[];let l=[];if(C===a.CHANNEL_TYPE.MESSAGE){const e=null!=I?I:[];T([{label:"",options:[g,b]},...e]),l=[{label:"",options:[g,b]},...e]}else{"link"===(null==E?void 0:E.type)?(t.push({label:"",options:[b,g]}),y(b)):(t.push({label:"",options:[b,g]}),y(g));const e=null!=I?I:[];T([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:s.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((C===a.CHANNEL_TYPE.WHATSAPP||C===a.CHANNEL_TYPE.EMAIL||C===a.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(o.placeHolderNamePattern.test(E.updatedValue)&&C===a.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&C!==a.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){let n={label:"",value:""};const i=l===a.CHANNEL_TYPE.WHATSAPP?e.replace("[[","").replace("]]",""):e.replace("{{","").replace("}}","");return 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)}))})),n}(E.updatedValue,l,C);e.value&&y(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(y(b),N(E.updatedValue.split("https://")[1])):(y(g),N(E.updatedValue))}),[]),e.jsxs(m,Object.assign({channel:C,focused:j,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(u.BodySecondary,Object.assign({style:{color:O&&!f?r.COLORS.content.negative:r.COLORS.content.primary}},{children:[null===(x=E.variableName)||void 0===x?void 0:x.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(n.Dropdown,{options:h,isSearchable:!1,onSelect:function(e,t){var l,n,i;const o=e;N(""),y(o),C===a.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(V(null!==(l=o.value)&&void 0!==l?l:"","string"),null==W||W(null!==(n=E.index)&&void 0!==n?n:0,`[[${o.value}]]`)):(null==W||W(null!==(i=E.index)&&void 0!==i?i:0,E.variableName),V("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?V(o.value,"url"===o.bikPlaceholderType?"link":"string"):(N(""),V("",o.value))},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(i.Input,{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}-${_}`,value:P,errorMessage:O?P?"custom_link"!==f.value||v.validateIsUrl(P)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==f?void 0:f.value)?void 0:30,prefixText:"custom_link"===(null==f?void 0:f.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===f.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;N(t);const n="custom_link"===(null==f?void 0:f.value)?`https://${t}`:t;V(n,e),C===a.CHANNEL_TYPE.WHATSAPP&&(null==W||W(null!==(l=E.index)&&void 0!==l?l:0,n))}(f.value,e)})]}))};

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../template-preview/models/Channels.js"),r=require("../../tooltips/Tooltip.js");require("../../tooltips/CustomisedTooltip.js");var l=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),o=require("../context/templateModalContext.js"),a=require("./VariableConnector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=d(i).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../input/Input.js"),n=require("../../template-preview/models/Channels.js"),r=require("../../tooltips/Tooltip.js"),l=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),o=require("../context/templateModalContext.js"),c=require("./VariableConnector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=d(i).default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`;exports.Container=c,exports.default=i=>{let{onFocus:d}=i;const{originalVariableList:u,channel:j}=o.useTemplateModalContext();return e.jsxs(c,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(l.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(r.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",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(l.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==u?void 0:u.map(((t,i)=>j!==s.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(a.default,{index:i,variable:t,onFocus:()=>null==d?void 0:d(i)})}),i):e.jsx(e.Fragment,{})))]})};
+`;exports.Container=u,exports.default=i=>{let{onFocus:d}=i;const{originalVariableList:p,channel:j}=o.useTemplateModalContext();return e.jsxs(u,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(l.TitleRegular,Object.assign({style:{color:a.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(r.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",{children:e.jsx(t.default,{width:20,height:20,color:a.COLORS.content.placeholder})})}))]})),e.jsx(l.BodySecondary,Object.assign({style:{color:a.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==p?void 0:p.map(((t,i)=>j!==n.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(c.default,{index:i,variable:t,onFocus:()=>null==d?void 0:d(i)})}),i):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(l.BodySecondary,Object.assign({style:{color:a.COLORS.content.primary}},{children:["Locked variable ",i+1]})),e.jsx(s.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),i)))]})};

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../tooltips/Tooltip.js");require("../../tooltips/CustomisedTooltip.js");var o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(i);const a=l.default(o.BodySecondary)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../tooltips/Tooltip.js"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(i);const a=l.default(r.BodySecondary)`
 	line-height: 1.5 !important;
 `,d=l.default.div`
 	padding-top: 24px;
@@ -6,4 +6,4 @@
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;exports.default=i=>{let{headerText:n,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(o.TitleRegular,Object.assign({style:{color:r.COLORS.content.primary}},{children:n})),c&&e.jsx(s.Tooltip,Object.assign({body:l},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:r.COLORS.content.placeholder})})}))]})),e.jsx(a,Object.assign({style:{color:r.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: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}))]}))};

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

@@ -0,0 +1 @@
+export declare function getFormattedMonthDate(date: Date): string;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];exports.getFormattedMonthDate=function(e){if("string"==typeof e)return e;const r=t[e.getMonth()],n=e.getDate();return`${r} ${n<10?"0":""}${n}`};

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-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);

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

@@ -2,6 +2,10 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
     hideHeader?: boolean | undefined;
 }, never>;
+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 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,29 +1,42 @@
-"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`
+"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`
 	padding: 16px;
 	padding-bottom: 12px;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
+	border: 1px solid ${r.COLORS.stroke.primary};
 `,i=o.default.div`
 	width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	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"};
+	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"};
 	overflow: scroll;
 `,a=o.default.div`
+	width: 100%;
+	height: 100%;
+	background-color: ${r.BASE_COLORS.grayscale[100]};
+`,n=o.default.div`
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+`,s=o.default.div`
 	display: flex;
 	justify-content: center;
 	width: 100%;
-	background: ${e.COLORS.surface.standard};
+	background: ${r.COLORS.surface.standard};
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
-`,s=o.default.div`
+	border: 1px solid ${r.COLORS.stroke.primary};
+`,l=o.default.div`
 	border-radius: 4px;
-	background-color: ${e.COLORS.surface.standard};
-	margin-top: ${r=>r.hideHeader?0:16};
-`;exports.EmailContainer=s,exports.Header=d,exports.ImageContainer=i,exports.ViewButton=a;
+	background-color: ${r.COLORS.surface.standard};
+	margin-top: ${e=>e.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;

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:l,handleViewTemplate:a,hideHeader:s,hideViewButton:d,containerStyle:o,emailHtmlContainerId:u,emailDisplayContent:c}=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:l.name}))}),c?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:c,height:"100%",style:{pointerEvents:"none"}}):e.jsx(r.ImageContainer,Object.assign({hideHeader:s},{children:e.jsx("img",{alt:"",src:l.thumbnailUrl,style:{objectFit:"contain",width:"100%"}})})),!d&&e.jsx(r.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{a&&a()}})})]}))};
+"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()}})})]}))};

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

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

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

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

@@ -1,5 +1,8 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TimeStamp: 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>;

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

@@ -7,9 +7,13 @@
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-`,n=i.default(t.Caption)`
+`,d=i.default(t.Caption)`
 	color: ${r.COLORS.content.secondary};
-`,d=i.default.div`
+	max-width: 80px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+`,n=i.default.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -49,4 +53,4 @@
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=d,exports.TimeStamp=n;
+`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=n,exports.TimeStamp=d;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => JSX.Element;

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

@@ -0,0 +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`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -8px;
+	top: -9px;
+`,m=u.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};
+	word-wrap: break-word;
+`,T=u.default(m)`
+	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,{})]})};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const WhatsappLikePreviewV2: React.FC<WhatsappLikePreviewTypes>;

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

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

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

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

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,5 @@ export declare class TemplateCreatorHelper {
     private parseBodyComponent;
     private parseFooterComponent;
     private parseButtonComponent;
-    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean): Promise<CreateTemplateType>;
+    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: 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"),o=require("../models/TemplateMeta.js"),l=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e){var t,n,i,l,a,d,r;const s={headerType:o.HEADER_TYPES.NONE,headerVariables:[]},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(v){s.headerType=v.format,s.headerText=v.text,s.headerAssetLink=null===(i=null===(n=v.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(a=null===(l=v.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],o=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0];if(t&&o){const e=/\(\(/.test(o),n={idx:0,variableVal:t,editable:e,editableDefaultValues:e?void 0:t,variableName:o};s.headerVariables=[n]}}return s}validateState(e){var t,a,d,r,s,v,E,u,T,p,_,c,R,m,b,h,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 l.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===o.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===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=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===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(),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(),o=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||o||(D.ctaBtn.websiteLink.link=i.REQUIRED_FIELD,C="invalid")}}else if(e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,o)=>{const l=n.text.trim();if(l)if(l.length>i.QUICK_REPLY_NAME_LEN_LIMIT)t[o]=i.QUICK_REPLY_LEN_ERROR,C="invalid";else if(A.test(l))t[o]=i.BUTTON_EMOJI_ERROR,C="invalid";else{const n=[...e.quickReply];n.splice(o,1);n.find((e=>e.text===l))&&(t[o]=i.QUICK_REPLY_NAME_ERROR,C="invalid")}else t[o]=i.REQUIRED_FIELD,C="invalid"})),D.quickReply=t}if(e.actionsType===o.ACTIONS_TYPES.CTA_BTN||e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const e=null===(R=D.quickReply)||void 0===R?void 0:R.reduce(((e,t)=>e||!!t),!1);((null===(b=null===(m=null==D?void 0:D.ctaBtn)||void 0===m?void 0:m.websiteLink)||void 0===b?void 0:b.link)||(null===(I=null===(h=D.ctaBtn)||void 0===h?void 0:h.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){var i,o,l,a,d;const r=[];let s="";const v=null===(i=e.components)||void 0===i?void 0:i.find((e=>"BODY"===e.type));return v&&(null===(l=null===(o=v.example)||void 0===o?void 0:o.body_text)||void 0===l||l[0].forEach(((t,i)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[i];const d=a&&/\(\(/.test(a),s=null==a?void 0:a.match(n.placeHolderNamePattern);(null==s?void 0:s[2])&&(a=null==s?void 0:s[2]),r.push({idx:i,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(a=v.text)||void 0===a?void 0:a.split(/\{\{[0-9]+\}\}/).length)?null===(d=v.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==r?void 0:r[n]){const i=r[n].variableName;return`${e} <span> </span><span  style="color: ${t.COLORS.content.brand}; text-decoration: underline;">{{${i}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:r,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,l,a,d,r;const s={actionsType:o.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l[0].type)?o.ACTIONS_TYPES.QUICK_REPLY:o.ACTIONS_TYPES.CTA_BTN;if(s.actionsType=t,t===o.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==v?void 0:v.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];return s.quickReply=e,s}t===o.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==v?void 0:v.buttons)||void 0===r||r.forEach((t=>{var i,o,l,a;if(t.phone_number&&(s.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(o=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===o?void 0:o[0])&&void 0!==l?l:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),s.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 s}parseUITemplateFromDBFormat(t,n){var i;return e.__awaiter(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:o,headerAssetName:l,headerText:a,headerVariables:d}=yield this.parseDataFromHeaderComponent(t),{bodyText:r,bodyVariable:s}=yield this.parseBodyComponent(t),{actionsType:v,quickReply:E,ctaBtn:u}=yield this.parseButtonComponent(t),T={quickReply:E,ctaBtn:u,meta:{name:n?`${t.label} Copy`:t.label,category:null===(i=t.category)||void 0===i?void 0:i.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:v,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:r,headerType:e,headerAssetLink:o,headerAssetName:l,headerText:a,headerVariables:d,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:p}=this.validateState(T);return T.error=p,T}))}};
+"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}))}};

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

@@ -0,0 +1,7 @@
+export type variableType = {
+    placeholder: string;
+    value: string;
+};
+export declare class VariableEditorHelper {
+    format(text?: string, variableList?: variableType[]): string;
+}

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

@@ -0,0 +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)}};

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

@@ -2,5 +2,9 @@ import * as regexPatterns from './constants/regexPatterns';
 export { regexPatterns };
 export * from './TemplatePreview';
 export * from './WhatsApp/WhatsAppLikePreview';
+export * from './WhatsApp/WhatsAppLikePreviewV2';
 export * from './helpers/SmsTemplateHelper';
 export * from './helpers/WhatsAppFormatToHTML';
+export * from './helpers/VariableEditorHelper';
+export * from './models/EmailTemplate';
+export * from './models/TemplateMeta';

package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { variableType } from '../helpers/VariableEditorHelper';
 import { CHANNEL_TYPE } from './Channels';
 import { ACTIONS_TYPES, ButtonPlaceHolderOptions, CUSTOM_VARIABLE, HEADER_TYPES, QUICK_REPLY_BUTTON, TEMPLATE_STATUS } from './TemplateMeta';
 export type WhatsAppTemplate = {
@@ -168,6 +169,9 @@ export type WhatsappLikePreviewTypes = {
     imagePreviewStyles?: React.CSSProperties;
     size?: 'small' | 'large';
     zeroStateComponent: ReactElement<any, any>;
+    children?: React.ReactNode;
+    bodyVariableList?: variableType[];
+    headerVariableList?: variableType[];
 };
 export type WhatsappMeta = {
     containerStyle?: React.CSSProperties | undefined;

package/dist/cjs/components/toaster/Toaster.d.ts

@@ -9,7 +9,7 @@ export type ToasterButtonProps = {
 export type ToasterProps = {
     text: string;
     position?: ToastPosition;
-    type?: 'info' | 'success' | 'error' | 'default';
+    type?: 'info' | 'success' | 'error' | 'default' | 'warning';
     closeOnClick?: boolean;
     hideProgressBar?: boolean;
     autoClose?: number | false | undefined;

package/dist/cjs/components/toaster/Toaster.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/cross.svg.js"),e=require("react"),s=require("react-toastify"),n=require("./Toaster.styled.js"),i=require("../TypographyStyle.js"),r=require("../../constants/Theme.js");const l=e=>{const s="default"===e.type?r.COLORS.content.secondary:("success"===e.type||e.type,r.COLORS.content.secondaryInverse);return t.jsx("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",margin:"auto",cursor:"pointer"},onClick:e.closeToast,onKeyDown:t=>{"Enter"===t.key&&e.closeToast()}},{children:t.jsx(o.default,{height:20,width:20,color:s})}))},u=o=>{const e="default"===o.type?r.COLORS.stroke.primary:"success"===o.type?r.COLORS.background.positive.vibrant:"error"===o.type?r.COLORS.background.negative.vibrant:r.COLORS.background.inverseLight;return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1,borderRight:o.hideCloseButton?"unset":`1px solid ${e}`}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:o.showButton?16:o.hideCloseButton?0:12}},{children:t.jsx(i.BodyPrimary,Object.assign({color:"inherit"},{children:o.toastText}))})),o.showButton&&t.jsx(i.ButtonRegular,Object.assign({style:{marginRight:o.hideCloseButton?0:12,marginTop:"auto",marginBottom:"auto",display:"flex",cursor:"pointer"},onClick:o.onButtonClick,color:"default"===o.type?r.COLORS.content.brand:"inherit"},{children:o.buttonText}))]}))})};exports.Toaster=o=>(e.useEffect((()=>{var e,n,i,r,a,c;void 0!==o.hideLeftIcon||o.leftIcon?s.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(e=o.buttonProps)||void 0===e?void 0:e.buttonText,showButton:null===(n=o.buttonProps)||void 0===n?void 0:n.showButton,onButtonClick:null===(i=o.buttonProps)||void 0===i?void 0:i.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),icon:t=>!1!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:null),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"default"})}):s.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(r=o.buttonProps)||void 0===r?void 0:r.buttonText,showButton:null===(a=o.buttonProps)||void 0===a?void 0:a.showButton,onButtonClick:null===(c=o.buttonProps)||void 0===c?void 0:c.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"info"})})}),[]),t.jsx(n.ToasterStyled,Object.assign({width:o.width,height:o.height},{children:t.jsx(s.ToastContainer,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})})));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/cross.svg.js"),e=require("react"),n=require("react-toastify"),s=require("./Toaster.styled.js"),i=require("../TypographyStyle.js"),r=require("../../constants/Theme.js");const l=e=>{const n="default"===e.type?r.COLORS.content.secondary:r.COLORS.content.secondaryInverse;return t.jsx("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",margin:"auto",cursor:"pointer"},onClick:e.closeToast,onKeyDown:t=>{"Enter"===t.key&&e.closeToast()}},{children:t.jsx(o.default,{height:20,width:20,color:n})}))},u=o=>{const e="default"===o.type?r.COLORS.stroke.primary:"success"===o.type?r.COLORS.background.positive.vibrant:"error"===o.type?r.COLORS.background.negative.vibrant:"warning"===o.type?r.COLORS.background.warning.vibrant:r.COLORS.background.inverseLight;return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1,borderRight:o.hideCloseButton?"unset":`1px solid ${e}`}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:o.showButton?16:o.hideCloseButton?0:12}},{children:t.jsx(i.BodyPrimary,Object.assign({color:"inherit"},{children:o.toastText}))})),o.showButton&&t.jsx(i.ButtonRegular,Object.assign({style:{marginRight:o.hideCloseButton?0:12,marginTop:"auto",marginBottom:"auto",display:"flex",cursor:"pointer"},onClick:o.onButtonClick,color:"default"===o.type?r.COLORS.content.brand:"inherit"},{children:o.buttonText}))]}))})};exports.Toaster=o=>(e.useEffect((()=>{var e,s,i,r,a,d;void 0!==o.hideLeftIcon||o.leftIcon?n.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(e=o.buttonProps)||void 0===e?void 0:e.buttonText,showButton:null===(s=o.buttonProps)||void 0===s?void 0:s.showButton,onButtonClick:null===(i=o.buttonProps)||void 0===i?void 0:i.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),icon:t=>!1!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:null),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"default"})}):n.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(r=o.buttonProps)||void 0===r?void 0:r.buttonText,showButton:null===(a=o.buttonProps)||void 0===a?void 0:a.showButton,onButtonClick:null===(d=o.buttonProps)||void 0===d?void 0:d.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"info"})})}),[]),t.jsx(s.ToasterStyled,Object.assign({width:o.width,height:o.height},{children:t.jsx(n.ToastContainer,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})})));

package/dist/cjs/components/toaster/Toaster.styled.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@emotion/styled/base"),c=require("../../constants/Theme.js");function b(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=b(t).default("div","production"===process.env.NODE_ENV?{target:"e1tdeuzc0"}:{target:"e1tdeuzc0",label:"ToasterStyled"})("--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-color-info:",c.COLORS.background.inverse,";--toastify-color-success:",c.COLORS.content.positive,";--toastify-color-error:",c.COLORS.content.negative,";--toastify-text-color-light:",c.COLORS.content.primary,';--toastify-toast-width:"fit-content";--toastify-toast-min-height:',(t=>t.height||"44px"),";--toastify-toast-max-height:",(t=>t.height||"fit-content"),";font-family:inherit;.custom-position{position:relative;}.Toastify__toast{padding:6px;max-width:",(t=>t.width),";.Toastify__close-button{display:block;margin:auto;}.Toastify__toast-body{padding:0 6px;}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default{background:",c.COLORS.content.brand,";}.Toastify__toast-body>div:last-child{display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvYXN0ZXIuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0MiLCJmaWxlIjoiVG9hc3Rlci5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUb2FzdGVyU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cblx0LS10b2FzdGlmeS1jb2xvci1saWdodDogI2ZmZjtcblx0LS10b2FzdGlmeS1jb2xvci1kYXJrOiAjMTIxMjEyO1xuXHQtLXRvYXN0aWZ5LWNvbG9yLWluZm86ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZX07XG5cdC0tdG9hc3RpZnktY29sb3Itc3VjY2VzczogJHtDT0xPUlMuY29udGVudC5wb3NpdGl2ZX07XG5cdC0tdG9hc3RpZnktY29sb3ItZXJyb3I6ICR7Q09MT1JTLmNvbnRlbnQubmVnYXRpdmV9O1xuXHQtLXRvYXN0aWZ5LXRleHQtY29sb3ItbGlnaHQ6ICR7Q09MT1JTLmNvbnRlbnQucHJpbWFyeX07XG5cdC0tdG9hc3RpZnktdG9hc3Qtd2lkdGg6IFwiZml0LWNvbnRlbnRcIjtcblx0LS10b2FzdGlmeS10b2FzdC1taW4taGVpZ2h0OiAkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0IHx8ICc0NHB4J307XG5cdC0tdG9hc3RpZnktdG9hc3QtbWF4LWhlaWdodDogJHsocHJvcHMpID0+IHByb3BzLmhlaWdodCB8fCAnZml0LWNvbnRlbnQnfTtcblx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0LmN1c3RvbS1wb3NpdGlvbiB7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR9XG5cdC5Ub2FzdGlmeV9fdG9hc3Qge1xuXHRcdHBhZGRpbmc6IDZweDtcblx0XHRtYXgtd2lkdGg6ICR7KHByb3BzKSA9PiBwcm9wcy53aWR0aH07XG5cblx0LlRvYXN0aWZ5X19jbG9zZS1idXR0b24ge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG1hcmdpbjogYXV0bztcblx0fVxuXG5cdC5Ub2FzdGlmeV9fdG9hc3QtYm9keXtcblx0XHRwYWRkaW5nOiAwIDZweDtcblx0fVxuXG5cdC5Ub2FzdGlmeV9fcHJvZ3Jlc3MtYmFyLXRoZW1lLS1jb2xvcmVkLlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItLWRlZmF1bHQge1xuXHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmNvbnRlbnQuYnJhbmR9O1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC1ib2R5ID4gZGl2Omxhc3QtY2hpbGQge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRvYXN0ZXIuc3R5bGVkLmpzLm1hcCJdfQ== */"));exports.ToasterStyled=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@emotion/styled/base"),c=require("../../constants/Theme.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const d=o(t).default("div","production"===process.env.NODE_ENV?{target:"e1tdeuzc0"}:{target:"e1tdeuzc0",label:"ToasterStyled"})("--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-color-info:",c.COLORS.background.inverse,";--toastify-color-success:",c.COLORS.content.positive,";--toastify-color-error:",c.COLORS.content.negative,";--toastify-color-warning:",c.COLORS.content.warning,";--toastify-text-color-light:",c.COLORS.content.primary,';--toastify-toast-width:"fit-content";--toastify-toast-min-height:',(t=>t.height||"44px"),";--toastify-toast-max-height:",(t=>t.height||"fit-content"),";font-family:inherit;.custom-position{position:relative;}.Toastify__toast{padding:6px;max-width:",(t=>t.width),";.Toastify__close-button{display:block;margin:auto;}.Toastify__toast-body{padding:0 6px;}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default{background:",c.COLORS.content.brand,";}.Toastify__toast-body>div:last-child{display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvYXN0ZXIuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0MiLCJmaWxlIjoiVG9hc3Rlci5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUb2FzdGVyU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cblx0LS10b2FzdGlmeS1jb2xvci1saWdodDogI2ZmZjtcblx0LS10b2FzdGlmeS1jb2xvci1kYXJrOiAjMTIxMjEyO1xuXHQtLXRvYXN0aWZ5LWNvbG9yLWluZm86ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZX07XG5cdC0tdG9hc3RpZnktY29sb3Itc3VjY2VzczogJHtDT0xPUlMuY29udGVudC5wb3NpdGl2ZX07XG5cdC0tdG9hc3RpZnktY29sb3ItZXJyb3I6ICR7Q09MT1JTLmNvbnRlbnQubmVnYXRpdmV9O1xuXHQtLXRvYXN0aWZ5LWNvbG9yLXdhcm5pbmc6ICR7Q09MT1JTLmNvbnRlbnQud2FybmluZ307XG5cdC0tdG9hc3RpZnktdGV4dC1jb2xvci1saWdodDogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblx0LS10b2FzdGlmeS10b2FzdC13aWR0aDogXCJmaXQtY29udGVudFwiO1xuXHQtLXRvYXN0aWZ5LXRvYXN0LW1pbi1oZWlnaHQ6ICR7KHByb3BzKSA9PiBwcm9wcy5oZWlnaHQgfHwgJzQ0cHgnfTtcblx0LS10b2FzdGlmeS10b2FzdC1tYXgtaGVpZ2h0OiAkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0IHx8ICdmaXQtY29udGVudCd9O1xuXHRmb250LWZhbWlseTogaW5oZXJpdDtcblxuXHQuY3VzdG9tLXBvc2l0aW9uIHtcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdH1cblx0LlRvYXN0aWZ5X190b2FzdCB7XG5cdFx0cGFkZGluZzogNnB4O1xuXHRcdG1heC13aWR0aDogJHsocHJvcHMpID0+IHByb3BzLndpZHRofTtcblxuXHQuVG9hc3RpZnlfX2Nsb3NlLWJ1dHRvbiB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0bWFyZ2luOiBhdXRvO1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC1ib2R5e1xuXHRcdHBhZGRpbmc6IDAgNnB4O1xuXHR9XG5cblx0LlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItdGhlbWUtLWNvbG9yZWQuVG9hc3RpZnlfX3Byb2dyZXNzLWJhci0tZGVmYXVsdCB7XG5cdFx0YmFja2dyb3VuZDogJHtDT0xPUlMuY29udGVudC5icmFuZH07XG5cdH1cblxuXHQuVG9hc3RpZnlfX3RvYXN0LWJvZHkgPiBkaXY6bGFzdC1jaGlsZCB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VG9hc3Rlci5zdHlsZWQuanMubWFwIl19 */"));exports.ToasterStyled=d;

package/dist/cjs/components/tooltips/Tooltip.d.ts

@@ -1,10 +1,10 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { TooltipInternalProps } from "./TooltipInternal";
-type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export interface TooltipProps extends TooltipInternalProps {
     width?: number;
     placement?: Placement;
     children: ReactNode;
+    tooltipContent?: JSX.Element;
 }
 export declare const Tooltip: FunctionComponent<TooltipProps>;
-export {};

package/dist/cjs/components/tooltips/Tooltip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@tippyjs/react"),n=require("react"),r=require("./TooltipInternal.js"),i=require("../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(t),l=a(n);const s=`\n  .tippy-content {\n    padding: 0px;\n  }\n  .tippy-arrow {\n    \tcolor: ${e=>i.COLORS.content.primary};\n  }\n`;exports.Tooltip=t=>l.default.isValidElement(t.children)?e.jsxs(e.Fragment,{children:[e.jsx("style",{children:s}),e.jsx(o.default,Object.assign({placement:t.placement||"right",maxWidth:t.width,animation:"fade",arrow:!0,interactive:!0,content:e.jsx(r.default,{title:t.title,body:t.body,buttonProps:t.buttonProps})},{children:t.children}))]}):null;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("@tippyjs/react"),n=require("react"),r=require("./TooltipInternal.js"),o=require("../../constants/Theme.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=i(e),l=i(n);const p=`\n\t.tippy-content {\n\t\tpadding: 0px;\n\t}\n\t.tippy-arrow {\n\t\tcolor: ${t=>o.COLORS.content.primary};\n\t}\n\t.overflow-wrap-tippy {\n\t\toverflow-wrap: anywhere;\n\t}\n`;exports.Tooltip=e=>l.default.isValidElement(e.children)?t.jsxs(t.Fragment,{children:[t.jsx("style",{children:p}),t.jsx(a.default,Object.assign({appendTo:document.body,className:"overflow-wrap-tippy",placement:e.placement||"right",maxWidth:e.width,animation:"fade",arrow:!0,interactive:!0,content:e.tooltipContent?e.tooltipContent:t.jsx(r.default,{title:e.title,body:e.body,buttonProps:e.buttonProps})},{children:e.children}))]}):null;