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

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

@@ -1,10 +1,10 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/edit.svg.js";import l from"../../../assets/icons/info.svg.js";import{format as i}from"date-fns";import a from"../../../node_modules/lodash/cloneDeep.js";import{useState as n,useEffect as o}from"react";import s from"styled-components";import{Alert as d}from"../../alerts/Alert.js";import{ALERT_TYPES as u}from"../../alerts/AlertHelper.js";import{CustomDateTime as r}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as c}from"../../dropdown/Dropdown.js";import{Input as p}from"../../input/Input.js";import{truncate as m}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as v}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as b}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as g}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as j}from"../../template-preview/models/WebpushTemplate.js";import{POD as O,BUTTON_TYPE as x}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as y,BodyPrimary as h}from"../../TypographyStyle.js";import f from"../../../utils/StringUtils.js";import{COLORS as T}from"../../../constants/Theme.js";import{useTemplateModalContext as _}from"../context/templateModalContext.js";import{updateVariables as E}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as C}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as V}from"./QueryParamsComponent.js";const S=s.div`
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import i from"../../../assets/icons/edit.svg.js";import a from"../../../assets/icons/info.svg.js";import{format as n}from"date-fns";import o from"lodash/cloneDeep";import{useState as s,useEffect as u}from"react";import d from"styled-components";import{Alert as r}from"../../alerts/Alert.js";import{ALERT_TYPES as c}from"../../alerts/AlertHelper.js";import{CustomDateTime as p}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as m}from"../../dropdown/Dropdown.js";import{Input as v}from"../../input/Input.js";import{truncate as b}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as g}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as O}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as j}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as y}from"../../template-preview/models/WebpushTemplate.js";import{POD as x,BUTTON_TYPE as h}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as f,BodyPrimary as T}from"../../TypographyStyle.js";import _ from"../../../utils/StringUtils.js";import{COLORS as E}from"../../../constants/Theme.js";import{useTemplateModalContext as C}from"../context/templateModalContext.js";import{updateVariables as V}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as S}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as k}from"./QueryParamsComponent.js";const A=d.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===g.EMAIL?T.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===j.EMAIL?E.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,k=s.div`
+`,B=d.div`
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -12,8 +12,8 @@ import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../
 	height: 100%;
 	z-index: 1000;
 	cursor: not-allowed;
-`,A=s.div`
+`,L=d.div`
 	height: 100%;
 	width: 48%;
 	background: rgba(0, 0, 0, 0.1);
-`,B={value:"custom_link",label:"Custom URL"},L={value:"custom_text",label:"Custom text"},P={value:"static_expiry",label:"Static Expiry"},w=s=>{var w,D,U,H,N,R,I,W,Y;const{onFocus:$,variable:M,index:z,showVariableModal:Z,setShowDiscountCheckBox:q,componentType:F,CTAoptions:G,buttonType:K}=s,[Q,J]=n(!1),[X,ee]=n(""),[te,le]=n([]),[ie,ae]=n(),[ne,oe]=n(!1),{variableList:se,setVariableList:de,setVariableCallback:ue,setShowVariablePicker:re,device:ce,channel:pe,isError:me,originalVariableList:ve,template:be,templateSelectionTriggered:ge,setTemplate:je,setDisplayContent:Oe,setOriginalVariableList:xe,globalNormalizedPlaceholders:ye,enabledCustomText:he,pod:fe,selectedCarouselIndex:Te,isProductCarouselType:_e,isWhatsappCarousel:Ee,disableEditVariable:Ce,disableEditExpiry:Ve,templateErrorIndexes:Se,maxCharLimit:ke,disableDatePicker:Ae,showDiscountCodeExpiryInfo:Be,cardIndex:Le=1}=_();function Pe(e,t){var l,i,a,n;const o=e;ee(""),ae(o),pe===g.WHATSAPP||pe===g.RCS?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(De(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Ue||Ue(null!==(i=M.index)&&void 0!==i?i:0,o.value,!0)):(null==Ue||Ue(null!==(a=M.index)&&void 0!==a?a:0,"",!0,o.value),De("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(De(o.value,"url"===o.bikPlaceholderType?"link":"string"),pe==g.WEBPUSH&&(null==Ne||Ne(null!==(n=M.index)&&void 0!==n?n:0,o.value))):(ee(""),De("",o.value))}function we(e,t){var l,i;ee(t);const a="custom_link"===(null==ie?void 0:ie.value)&&t?t.includes("https")?t:`https://${t}`:t;De(a,"static_expiry"===e?"string":e),pe!==g.WHATSAPP&&pe!==g.RCS||null==Ue||Ue(null!==(l=M.index)&&void 0!==l?l:0,a,"custom_link"===e||fe===O.CHATBOT&&"custom_text"===e,e),pe===g.WEBPUSH&&(null==Ne||Ne(null!==(i=M.index)&&void 0!==i?i:0,a))}function De(e,t,l){var i,n,o,s,d;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(pe!==g.WHATSAPP&&pe!==g.WEBPUSH&&pe!==g.RCS){const l=C(z+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===ce?"template_html_mobile":"template_html_desktop"),n=pe===g.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:M.variableName);const o=ve.map(((t,l)=>l===z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==xe||xe(o)}if(pe===g.WEBPUSH){const t=ve,l=t=>null==t?void 0:t.map(((t,l)=>l===z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)),i={BODY:"BODY"===F?l(t.body):t.body,TITLE:F===j.TITLE.toUpperCase()?l(t.title):t.title};null==xe||xe((e=>Object.assign(Object.assign({},e),{title:i.TITLE,body:i.BODY,buttons:t.buttons})))}if(pe===g.WHATSAPP||pe===g.RCS){if(null!=Te&&Te>-1&&_e){const l=Object.assign({},ve).cards.map(((l,i)=>{var a,n,o;return"BODY"===F?Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>z===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"TITLE"===F?Object.assign(Object.assign({},l),{title:null===(n=l.title)||void 0===n?void 0:n.map(((t,l)=>z===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===F?Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((l,i)=>i===z?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==xe||xe((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=Te&&Te>-1?ve.cards[Te]:ve;let r=i.body,c=i.title,p=i.header,m=i.buttons;if("BODY"===F?r=null===(n=i.body)||void 0===n?void 0:n.map(((t,l)=>l===z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"TITLE"===F?c=null===(o=null==i?void 0:i.title)||void 0===o?void 0:o.map(((t,l)=>l===z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===F?p=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===F&&(m=null===(d=i.buttons)||void 0===d?void 0:d.map(((i,a)=>a===z?Object.assign(Object.assign({},i),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===i.type?e:[e],queryParams:null!=l?l:[]}):i))),null!=Te&&Te>-1){const e=a(ve.cards);e[Te]={header:p,body:r,buttons:m,title:c},null==xe||xe((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==xe||xe((e=>Object.assign(Object.assign({},e),{header:p,body:r,buttons:m,title:c})))}}function Ue(e,t,l,i){var n,o,s,d,u,r,c,p,m,v,g,j;if(null!=Te&&Te>-1&&_e){const o=Object.assign({},be).components.map((l=>{var i;return b(l.type)?Object.assign(Object.assign({},l),{cards:null===(i=l.cards)||void 0===i?void 0:i.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var i,a,n,o,s,d,u,r,c,p,m;if("BODY"===l.type&&"BODY"===F){if(null===(a=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0]){const i=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{body_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("TITLE"===l.type&&"TITLE"===F){if(null===(u=null===(d=l.example)||void 0===d?void 0:d.title_text)||void 0===u?void 0:u[0]){const i=[...null!==(p=null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])&&void 0!==p?p:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{title_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("BUTTONS"===l.type&&"BUTTONS"===F){const i=null===(m=l.buttons)||void 0===m?void 0:m.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:[t]}):l));return i?Object.assign(Object.assign({},l),{buttons:i}):l}return l}))})))}):l})),s=a(be);if(l){const l=null===(n=Object.assign({},be).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,o,s,d;if("BODY"===F)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("TITLE"===F)return Object.assign(Object.assign({},l),{title:null===(o=null==l?void 0:l.title)||void 0===o?void 0:o.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===F&&(null==l?void 0:l.buttons)){let n=-1,o=-1;return null===(s=be.components[Le].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(o=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(d=l.buttons)||void 0===d?void 0:d.map(((e,l)=>l===o?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=o,void(null==je||je(s))}const O=null!=Te&&Te>-1?{components:null===(o=Object.assign({},be).components[Le].cards)||void 0===o?void 0:o[Te].components,mapping:null===(s=Object.assign({},be).mapping.cards)||void 0===s?void 0:s[Te]}:Object.assign({},be),x=null===(d=null==O?void 0:O.components)||void 0===d?void 0:d.map((l=>{var i,a,n,o,s,d,u,r,c,p,m,v,b,g,j,O;const x=Object.assign({},l);if("BODY"===l.type&&"BODY"===F&&(Array.isArray(null===(i=l.example)||void 0===i?void 0:i.body_text)||(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]))){const l=[...null!==(d=null===(s=null===(o=x.example)||void 0===o?void 0:o.body_text)||void 0===s?void 0:s[0])&&void 0!==d?d:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{body_text:[l]});return Object.assign(Object.assign({},x),{example:i})}if("TITLE"===l.type&&"TITLE"===F){if(Array.isArray(null===(u=l.example)||void 0===u?void 0:u.title_text)||(null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])){const l=[...null!==(v=null===(m=null===(p=x.example)||void 0===p?void 0:p.title_text)||void 0===m?void 0:m[0])&&void 0!==v?v:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{title_text:[l]});return Object.assign(Object.assign({},x),{example:i})}}else if("HEADER"===l.type&&"HEADER"===F){if(null===(b=l.example)||void 0===b?void 0:b.header_text){const l=[...null!==(j=null===(g=x.example)||void 0===g?void 0:g.header_text)&&void 0!==j?j:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{header_text:l});return Object.assign(Object.assign({},x),{example:i})}}else{if("BUTTONS"===l.type&&"BUTTONS"===F){const i=null===(O=l.buttons)||void 0===O?void 0:O.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return i?Object.assign(Object.assign({},x),{buttons:i}):x}if("limited_time_offer"===l.type&&"limited_time_offer"===F)return Object.assign(Object.assign({},x),{example:Object.assign(Object.assign({},x.example),{limited_time_offer:t})})}return l}));if(O.components=x,l)if("BODY"===F&&(null===(u=null==O?void 0:O.mapping)||void 0===u?void 0:u.body))O.mapping=Object.assign(Object.assign({},O.mapping),{body:null===(c=null===(r=O.mapping)||void 0===r?void 0:r.body)||void 0===c?void 0:c.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("TITLE"===F&&(null===(p=null==O?void 0:O.mapping)||void 0===p?void 0:p.title))O.mapping=Object.assign(Object.assign({},O.mapping),{title:null===(v=null===(m=O.mapping)||void 0===m?void 0:m.title)||void 0===v?void 0:v.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===F&&(null===(g=null==O?void 0:O.mapping)||void 0===g?void 0:g.header))O.mapping=Object.assign(Object.assign({},O.mapping),{header:O.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===F&&(null===(j=null==O?void 0:O.mapping)||void 0===j?void 0:j.buttons)){let l=-1,a=-1;x.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),O.mapping=Object.assign(Object.assign({},O.mapping),{buttons:O.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=Te&&Te>-1&&be){const e=a(be);e.components[Le].cards[Te].components=O.components,e.mapping.cards[Te]=O.mapping,null==je||je(e)}else null==je||je(Object.assign({},O))}o((()=>{Q&&(null==$||$())}),[Q]),o((()=>{!function(){var e,t,l,i,a;const n="mobile"===ce?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(i=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==i?i:"")+(null===(a=null==o?void 0:o.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);pe===g.EMAIL&&(null==Oe||Oe(s))}()}),[ge]),o((()=>{!function(){var e,t;const l=[];let i=[];if(pe!==g.MESSAGE||he){"link"===(null==M?void 0:M.type)?(l.push({label:"",options:[B,L]}),ae(B)):"date_time"===(null==M?void 0:M.type)?(l.push({label:"",options:[B,L]}),ae(P)):(l.push({label:"",options:[B,L,P]}),ae(L));const e=null!=ye?ye:[];le([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:f.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())})}))]),i=[...l,...e]}else{const e=null!=ye?ye:[];le([{label:"",options:[L,B]},...e]),i=[{label:"",options:[L,B]},...e]}if((pe===g.WHATSAPP||pe===g.EMAIL||pe===g.MESSAGE||pe===g.WEBPUSH||pe===g.RCS)&&M.updatedValue)if(v.test(M.updatedValue)&&(pe===g.WHATSAPP||pe===g.RCS)||M.updatedValue.startsWith("{{")&&pe!==g.WHATSAPP&&pe!==g.RCS){const e=function(e,t,l){var i;let a={label:"",value:""};const n=l===(g.WHATSAPP||g.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(Z){let t=e.updatedValue;if(fe===O.CHATBOT&&"BUTTONS"===F){const l=null==G?void 0:G.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}a={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(i=e.updatedValue)&&void 0!==i?i:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))}));return a}(M,i,pe);e.value&&ae(e)}else"date_time"===M.type?(ae(P),ee(M.updatedValue),Ue(null!==(e=M.index)&&void 0!==e?e:0,M.updatedValue)):(null===(t=M.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(ae(B),ee(M.updatedValue.split("https://")[1])):(ae(L),ee(M.updatedValue))}()}),[Te]),o((()=>{ce&&ie&&X&&setTimeout((()=>{De("custom_link"===(null==ie?void 0:ie.value)&&X?X.includes("https")?X:`https://${X}`:X,ie.value)}),100)}),[ce]),o((()=>{!ne&&ie&&M.updatedValue&&setTimeout((()=>{De("custom_link"===(null==ie?void 0:ie.value)&&M.updatedValue?M.updatedValue.includes("https")?M.updatedValue:`https://${M.updatedValue}`:M.updatedValue,ie.value),oe(!0)}),100)}),[ie]);const He=e=>{null==q||q(!1),"{{custom.url}}"===e.actualValue?Pe({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Pe({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?Pe({label:e.displayName,selected:!0,value:"static_expiry"}):Pe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ne(e,t){var l;const i=a(be),n=F.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[n])&&(i.webpushBroadcastConfig[n][e]=t),null==je||je(Object.assign({},i))}return e.jsxs(S,Object.assign({channel:pe,focused:Q,onMouseEnter:()=>J(!0),onMouseLeave:()=>J(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(y,Object.assign({style:{color:me&&!ie?T.content.negative:T.content.primary}},{children:[null===(w=M.variableName)||void 0===w?void 0:w.replace("{{","").replace("}}","")," ","link"===(null==M?void 0:M.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:Z?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ie?void 0:ie.label)?"space-between":"flex-end",backgroundColor:"date_time"===(null==M?void 0:M.type)&&Ve?T.background.base:void 0}},{children:[e.jsx(h,Object.assign({numberOfLines:1},{children:fe===O.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==ie?void 0:ie.value)&&void 0!==D?D:"")?null==ie?void 0:ie.label:null==ie?void 0:ie.value:m(null!==(U=null==ie?void 0:ie.label)&&void 0!==U?U:"",20,!0)})),Ce||"date_time"===(null==M?void 0:M.type)&&Ve?e.jsx(e.Fragment,{}):e.jsx(t,{onClick:()=>{(()=>{let e=Array.isArray(se)?[...se]:[];const t=(t,l,i)=>{const a=E({variableList:e,categoryDisplayName:t,variableDisplayName:l,variableValue:i});Array.isArray(a)&&(e=a)};fe===O.CHATBOT&&K!==x.URL&&"limited_time_offer"!==F&&t("Custom Variables","Custom Text","{{custom.text}}"),K===x.URL&&fe===O.CHATBOT?t("Custom Variables","Custom URL","{{custom.url}}"):"limited_time_offer"===F?t("Static Variables","Static Expiry","{{static.expiry}}"):K===x.COPY_CODE&&t("Custom Variables","Custom Text","{{custom.text}}"),de(e)})(),ue((()=>He)),re(!0)},width:24,height:24,color:T.content.primary})]})):e.jsx(c,{disabled:Ce,options:te,isSearchable:!1,onSelect:Pe,defaultOptions:ie?[Object.assign(Object.assign({},ie),{selected:!0})]:[]})})),("custom_text"===(null==ie?void 0:ie.value)||"custom_link"===(null==ie?void 0:ie.value))&&e.jsx(p,{state:Ce?"disabled":"none",labelText:"custom_text"===(null==ie?void 0:ie.value)?"Custom text value":"custom_link"===(null==ie?void 0:ie.value)?"Custom URL value":"",id:`variable-value-${null==ie?void 0:ie.value}-${z}`,value:X,errorMessage:me&&(null===(H=null==Se?void 0:Se.buttons)||void 0===H?void 0:H.includes(null!==(N=null==M?void 0:M.index)&&void 0!==N?N:-1))?X&&0!==X.trim().length?"custom_link"!==ie.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${X.trim()}`)&&0!==X.trim().length?"custom_link"!==ie.value&&X.length>30?"Length cannot be more than 30":"BUTTONS"===F&&"custom_link"!==ie.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:ke||("custom_link"===(null==ie?void 0:ie.value)?2e3:"BUTTONS"===F?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ie?void 0:ie.value)?"https://":"",placeholder:"link"===M.type||"custom_link"===ie.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{we(ie.value,e)}}),"static_expiry"===(null==ie?void 0:ie.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[(Ce||Ae)&&e.jsxs(k,Object.assign({onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"}},{children:[e.jsx(A,{}),e.jsx(A,{})]})),e.jsx(r,{placement:"auto",time:i(X?new Date(X):new Date,"hh:mm a"),date:X?new Date(X):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{we("static_expiry",e.toISOString())}})]})),"static_expiry"===(null==ie?void 0:ie.value)&&Be&&e.jsx("div",Object.assign({style:{marginTop:8}},{children:e.jsx(d,{containerStyle:{padding:"4px 8px"},icon:()=>e.jsx(l,{width:16,height:16,color:T.content.secondary}),type:u.NEUTRAL,text:"Please use the same expiration code that you applied when creating\nthe code on Shopify"})})),"link"===M.type&&"custom_link"!==(null==ie?void 0:ie.value)&&!_e&&!Ee&&fe===O.CHATBOT&&e.jsx(V,{isError:null!==(W=null===(R=null==Se?void 0:Se.buttons)||void 0===R?void 0:R.includes(null!==(I=null==M?void 0:M.index)&&void 0!==I?I:-1))&&void 0!==W&&W,params:null!==(Y=M.queryParams)&&void 0!==Y?Y:[],onChange:e=>{De(M.updatedValue,"link",e)},variableValue:M.updatedValue})]}))};export{S as Container,w as default};
+`,P={value:"custom_link",label:"Custom URL"},w={value:"custom_text",label:"Custom text"},D={value:"static_expiry",label:"Static Expiry"},U=d=>{var U,H,N,R,I,W,Y,$,M;const{onFocus:z,variable:Z,index:q,showVariableModal:G,setShowDiscountCheckBox:F,componentType:K,CTAoptions:Q,buttonType:J}=d,[X,ee]=s(!1),[te,le]=s(""),[ie,ae]=s([]),[ne,oe]=s(),[se,ue]=s(!1),{variableList:de,setVariableList:re,setVariableCallback:ce,setShowVariablePicker:pe,device:me,channel:ve,isError:be,originalVariableList:ge,template:Oe,templateSelectionTriggered:je,setTemplate:ye,setDisplayContent:xe,setOriginalVariableList:he,globalNormalizedPlaceholders:fe,enabledCustomText:Te,pod:_e,selectedCarouselIndex:Ee,isProductCarouselType:Ce,isWhatsappCarousel:Ve,disableEditVariable:Se,disableEditExpiry:ke,templateErrorIndexes:Ae,maxCharLimit:Be,disableDatePicker:Le,showDiscountCodeExpiryInfo:Pe,cardIndex:we=1}=C();function De(e,t){var l,i,a,n;const o=e;le(""),oe(o),ve===j.WHATSAPP||ve===j.RCS?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(He(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Ne||Ne(null!==(i=Z.index)&&void 0!==i?i:0,o.value,!0)):(null==Ne||Ne(null!==(a=Z.index)&&void 0!==a?a:0,"",!0,o.value),He("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(He(o.value,"url"===o.bikPlaceholderType?"link":"string"),ve==j.WEBPUSH&&(null==Ie||Ie(null!==(n=Z.index)&&void 0!==n?n:0,o.value))):(le(""),He("",o.value))}function Ue(e,t){var l,i;le(t);const a="custom_link"===(null==ne?void 0:ne.value)&&t?t.includes("https")?t:`https://${t}`:t;He(a,"static_expiry"===e?"string":e),ve!==j.WHATSAPP&&ve!==j.RCS||null==Ne||Ne(null!==(l=Z.index)&&void 0!==l?l:0,a,"custom_link"===e||_e===x.CHATBOT&&"custom_text"===e,e),ve===j.WEBPUSH&&(null==Ie||Ie(null!==(i=Z.index)&&void 0!==i?i:0,a))}function He(e,t,l){var i,a,n,s,u;const d="custom_link"===t?"link":"custom_text"===t?"string":t;if(ve!==j.WHATSAPP&&ve!==j.WEBPUSH&&ve!==j.RCS){const l=S(q+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===me?"template_html_mobile":"template_html_desktop"),n=ve===j.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:Z.variableName);const o=ge.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t));null==he||he(o)}if(ve===j.WEBPUSH){const t=ge,l=t=>null==t?void 0:t.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)),i={BODY:"BODY"===K?l(t.body):t.body,TITLE:K===y.TITLE.toUpperCase()?l(t.title):t.title};null==he||he((e=>Object.assign(Object.assign({},e),{title:i.TITLE,body:i.BODY,buttons:t.buttons})))}if(ve===j.WHATSAPP||ve===j.RCS){if(null!=Ee&&Ee>-1&&Ce){const l=Object.assign({},ge).cards.map(((l,i)=>{var a,n,o;return"BODY"===K?Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"TITLE"===K?Object.assign(Object.assign({},l),{title:null===(n=l.title)||void 0===n?void 0:n.map(((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"BUTTONS"===K?Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((l,i)=>i===q?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==he||he((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=Ee&&Ee>-1?ge.cards[Ee]:ge;let r=i.body,c=i.title,p=i.header,m=i.buttons;if("BODY"===K?r=null===(a=i.body)||void 0===a?void 0:a.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"TITLE"===K?c=null===(n=null==i?void 0:i.title)||void 0===n?void 0:n.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"HEADER"===K?p=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"BUTTONS"===K&&(m=null===(u=i.buttons)||void 0===u?void 0:u.map(((i,a)=>a===q?Object.assign(Object.assign({},i),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===i.type?e:[e],queryParams:null!=l?l:[]}):i))),null!=Ee&&Ee>-1){const e=o(ge.cards);e[Ee]={header:p,body:r,buttons:m,title:c},null==he||he((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==he||he((e=>Object.assign(Object.assign({},e),{header:p,body:r,buttons:m,title:c})))}}function Ne(e,t,l,i){var a,n,s,u,d,r,c,p,m,v,b,g;if(null!=Ee&&Ee>-1&&Ce){const n=Object.assign({},Oe).components.map((l=>{var i;return O(l.type)?Object.assign(Object.assign({},l),{cards:null===(i=l.cards)||void 0===i?void 0:i.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var i,a,n,o,s,u,d,r,c,p,m;if("BODY"===l.type&&"BODY"===K){if(null===(a=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0]){const i=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{body_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("TITLE"===l.type&&"TITLE"===K){if(null===(d=null===(u=l.example)||void 0===u?void 0:u.title_text)||void 0===d?void 0:d[0]){const i=[...null!==(p=null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])&&void 0!==p?p:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{title_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(m=l.buttons)||void 0===m?void 0:m.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:[t]}):l));return i?Object.assign(Object.assign({},l),{buttons:i}):l}return l}))})))}):l})),s=o(Oe);if(l){const l=null===(a=Object.assign({},Oe).mapping.cards)||void 0===a?void 0:a.map(((l,a)=>{var n,o,s,u;if("BODY"===K)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("TITLE"===K)return Object.assign(Object.assign({},l),{title:null===(o=null==l?void 0:l.title)||void 0===o?void 0:o.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===K&&(null==l?void 0:l.buttons)){let n=-1,o=-1;return null===(s=Oe.components[we].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(o=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(u=l.buttons)||void 0===u?void 0:u.map(((e,l)=>l===o?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=n,void(null==ye||ye(s))}const j=null!=Ee&&Ee>-1?{components:null===(n=Object.assign({},Oe).components[we].cards)||void 0===n?void 0:n[Ee].components,mapping:null===(s=Object.assign({},Oe).mapping.cards)||void 0===s?void 0:s[Ee]}:Object.assign({},Oe),y=null===(u=null==j?void 0:j.components)||void 0===u?void 0:u.map((l=>{var i,a,n,o,s,u,d,r,c,p,m,v,b,g,O,j;const y=Object.assign({},l);if("BODY"===l.type&&"BODY"===K&&(Array.isArray(null===(i=l.example)||void 0===i?void 0:i.body_text)||(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]))){const l=[...null!==(u=null===(s=null===(o=y.example)||void 0===o?void 0:o.body_text)||void 0===s?void 0:s[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},y.example),{body_text:[l]});return Object.assign(Object.assign({},y),{example:i})}if("TITLE"===l.type&&"TITLE"===K){if(Array.isArray(null===(d=l.example)||void 0===d?void 0:d.title_text)||(null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])){const l=[...null!==(v=null===(m=null===(p=y.example)||void 0===p?void 0:p.title_text)||void 0===m?void 0:m[0])&&void 0!==v?v:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},y.example),{title_text:[l]});return Object.assign(Object.assign({},y),{example:i})}}else if("HEADER"===l.type&&"HEADER"===K){if(null===(b=l.example)||void 0===b?void 0:b.header_text){const l=[...null!==(O=null===(g=y.example)||void 0===g?void 0:g.header_text)&&void 0!==O?O:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},y.example),{header_text:l});return Object.assign(Object.assign({},y),{example:i})}}else{if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(j=l.buttons)||void 0===j?void 0:j.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return i?Object.assign(Object.assign({},y),{buttons:i}):y}if("limited_time_offer"===l.type&&"limited_time_offer"===K)return Object.assign(Object.assign({},y),{example:Object.assign(Object.assign({},y.example),{limited_time_offer:t})})}return l}));if(j.components=y,l)if("BODY"===K&&(null===(d=null==j?void 0:j.mapping)||void 0===d?void 0:d.body))j.mapping=Object.assign(Object.assign({},j.mapping),{body:null===(c=null===(r=j.mapping)||void 0===r?void 0:r.body)||void 0===c?void 0:c.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("TITLE"===K&&(null===(p=null==j?void 0:j.mapping)||void 0===p?void 0:p.title))j.mapping=Object.assign(Object.assign({},j.mapping),{title:null===(v=null===(m=j.mapping)||void 0===m?void 0:m.title)||void 0===v?void 0:v.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===K&&(null===(b=null==j?void 0:j.mapping)||void 0===b?void 0:b.header))j.mapping=Object.assign(Object.assign({},j.mapping),{header:j.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===K&&(null===(g=null==j?void 0:j.mapping)||void 0===g?void 0:g.buttons)){let l=-1,a=-1;y.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),j.mapping=Object.assign(Object.assign({},j.mapping),{buttons:j.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=Ee&&Ee>-1&&Oe){const e=o(Oe);e.components[we].cards[Ee].components=j.components,e.mapping.cards[Ee]=j.mapping,null==ye||ye(e)}else null==ye||ye(Object.assign({},j))}u((()=>{X&&(null==z||z())}),[X]),u((()=>{!function(){var e,t,l,i,a;const n="mobile"===me?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(i=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==i?i:"")+(null===(a=null==o?void 0:o.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);ve===j.EMAIL&&(null==xe||xe(s))}()}),[je]),u((()=>{!function(){var e,t;const l=[];let i=[];if(ve!==j.MESSAGE||Te){"link"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(P)):"date_time"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(D)):(l.push({label:"",options:[P,w,D]}),oe(w));const e=null!=fe?fe:[];ae([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:_.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())})}))]),i=[...l,...e]}else{const e=null!=fe?fe:[];ae([{label:"",options:[w,P]},...e]),i=[{label:"",options:[w,P]},...e]}if((ve===j.WHATSAPP||ve===j.EMAIL||ve===j.MESSAGE||ve===j.WEBPUSH||ve===j.RCS)&&Z.updatedValue)if(g.test(Z.updatedValue)&&(ve===j.WHATSAPP||ve===j.RCS)||Z.updatedValue.startsWith("{{")&&ve!==j.WHATSAPP&&ve!==j.RCS){const e=function(e,t,l){var i;let a={label:"",value:""};const n=l===(j.WHATSAPP||j.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(G){let t=e.updatedValue;if(_e===x.CHATBOT&&"BUTTONS"===K){const l=null==Q?void 0:Q.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}a={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(i=e.updatedValue)&&void 0!==i?i:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))}));return a}(Z,i,ve);e.value&&oe(e)}else"date_time"===Z.type?(oe(D),le(Z.updatedValue),Ne(null!==(e=Z.index)&&void 0!==e?e:0,Z.updatedValue)):(null===(t=Z.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(oe(P),le(Z.updatedValue.split("https://")[1])):(oe(w),le(Z.updatedValue))}()}),[Ee]),u((()=>{me&&ne&&te&&setTimeout((()=>{He("custom_link"===(null==ne?void 0:ne.value)&&te?te.includes("https")?te:`https://${te}`:te,ne.value)}),100)}),[me]),u((()=>{!se&&ne&&Z.updatedValue&&setTimeout((()=>{He("custom_link"===(null==ne?void 0:ne.value)&&Z.updatedValue?Z.updatedValue.includes("https")?Z.updatedValue:`https://${Z.updatedValue}`:Z.updatedValue,ne.value),ue(!0)}),100)}),[ne]);const Re=e=>{null==F||F(!1),"{{custom.url}}"===e.actualValue?De({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"static_expiry"}):De({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ie(e,t){var l;const i=o(Oe),a=K.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[a])&&(i.webpushBroadcastConfig[a][e]=t),null==ye||ye(Object.assign({},i))}return e(A,Object.assign({channel:ve,focused:X,onMouseEnter:()=>ee(!0),onMouseLeave:()=>ee(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(f,Object.assign({style:{color:be&&!ne?E.content.negative:E.content.primary}},{children:[null===(U=Z.variableName)||void 0===U?void 0:U.replace("{{","").replace("}}","")," ","link"===(null==Z?void 0:Z.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:G?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ne?void 0:ne.label)?"space-between":"flex-end",backgroundColor:"date_time"===(null==Z?void 0:Z.type)&&ke?E.background.base:void 0}},{children:[t(T,Object.assign({numberOfLines:1},{children:_e===x.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(H=null==ne?void 0:ne.value)&&void 0!==H?H:"")?null==ne?void 0:ne.label:null==ne?void 0:ne.value:b(null!==(N=null==ne?void 0:ne.label)&&void 0!==N?N:"",20,!0)})),Se||"date_time"===(null==Z?void 0:Z.type)&&ke?t(l,{}):t(i,{onClick:()=>{(()=>{let e=Array.isArray(de)?[...de]:[];const t=(t,l,i)=>{const a=V({variableList:e,categoryDisplayName:t,variableDisplayName:l,variableValue:i});Array.isArray(a)&&(e=a)};_e===x.CHATBOT&&J!==h.URL&&"limited_time_offer"!==K&&t("Custom Variables","Custom Text","{{custom.text}}"),J===h.URL&&_e===x.CHATBOT?t("Custom Variables","Custom URL","{{custom.url}}"):"limited_time_offer"===K?t("Static Variables","Static Expiry","{{static.expiry}}"):J===h.COPY_CODE&&t("Custom Variables","Custom Text","{{custom.text}}"),re(e)})(),ce((()=>Re)),pe(!0)},width:24,height:24,color:E.content.primary})]})):t(m,{disabled:Se,options:ie,isSearchable:!1,onSelect:De,defaultOptions:ne?[Object.assign(Object.assign({},ne),{selected:!0})]:[]})})),("custom_text"===(null==ne?void 0:ne.value)||"custom_link"===(null==ne?void 0:ne.value))&&t(v,{state:Se?"disabled":"none",labelText:"custom_text"===(null==ne?void 0:ne.value)?"Custom text value":"custom_link"===(null==ne?void 0:ne.value)?"Custom URL value":"",id:`variable-value-${null==ne?void 0:ne.value}-${q}`,value:te,errorMessage:be&&(null===(R=null==Ae?void 0:Ae.buttons)||void 0===R?void 0:R.includes(null!==(I=null==Z?void 0:Z.index)&&void 0!==I?I:-1))?te&&0!==te.trim().length?"custom_link"!==ne.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${te.trim()}`)&&0!==te.trim().length?"custom_link"!==ne.value&&te.length>30?"Length cannot be more than 30":"BUTTONS"===K&&"custom_link"!==ne.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Be||("custom_link"===(null==ne?void 0:ne.value)?2e3:"BUTTONS"===K?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ne?void 0:ne.value)?"https://":"",placeholder:"link"===Z.type||"custom_link"===ne.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Ue(ne.value,e)}}),"static_expiry"===(null==ne?void 0:ne.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[(Se||Le)&&e(B,Object.assign({onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"}},{children:[t(L,{}),t(L,{})]})),t(p,{placement:"auto",time:n(te?new Date(te):new Date,"hh:mm a"),date:te?new Date(te):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Ue("static_expiry",e.toISOString())}})]})),"static_expiry"===(null==ne?void 0:ne.value)&&Pe&&t("div",Object.assign({style:{marginTop:8}},{children:t(r,{containerStyle:{padding:"4px 8px"},icon:()=>t(a,{width:16,height:16,color:E.content.secondary}),type:c.NEUTRAL,text:"Please use the same expiration code that you applied when creating\nthe code on Shopify"})})),"link"===Z.type&&"custom_link"!==(null==ne?void 0:ne.value)&&!Ce&&!Ve&&_e===x.CHATBOT&&t(k,{isError:null!==($=null===(W=null==Ae?void 0:Ae.buttons)||void 0===W?void 0:W.includes(null!==(Y=null==Z?void 0:Z.index)&&void 0!==Y?Y:-1))&&void 0!==$&&$,params:null!==(M=Z.queryParams)&&void 0!==M?M:[],onChange:e=>{He(Z.updatedValue,"link",e)},variableValue:Z.updatedValue})]}))};export{A as Container,U as default};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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