@bikdotai/bik-component-library 0.0.687-beta.4 → 0.0.687-beta.6

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-const l=l=>{const e=[];return l&&Object.keys(l).forEach((t=>{var r;const n=l[t],o=null!=(r=null==n?void 0:n.map((l=>{var e;return{label:l.title,value:l.placeHolder,bikPlaceholderType:null!=(e=l.type)?e:"string"}})))?r:[];e.push({label:t,options:o})})),e};export{l as convertPlaceholdersToBikDropdown};
+const e=e=>{const t=[];return e&&Object.keys(e).forEach((l=>{const o=e[l],a=o?.map((e=>({label:e.title,value:e.placeHolder,bikPlaceholderType:e.type??"string"})))??[];t.push({label:l,options:a})})),t};export{e as convertPlaceholdersToBikDropdown};

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

@@ -0,0 +1,36 @@
+import { WebpushTemplateType, WebpushTemplateVariables } from '../../template-preview/models/WebpushTemplate.js';
+import { WhatsAppTemplate } from '../../template-preview/models/WhatsAppTemplate.js';
+
+type ComponentType = WhatsAppTemplate['components'][0];
+declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
+    imageComponent: null;
+    descriptionComponents: {
+        component: ComponentType;
+        i: number;
+        type: ComponentType['type'];
+    }[];
+    urlBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    qrbBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    bodyVariables: string[];
+    headerVariables: string[];
+    titleVariables: string[];
+};
+declare const getAllDataFromWebpushTemplateComponent: (mapping: WebpushTemplateType['webpushBroadcastConfig'], templateVariables: WebpushTemplateVariables) => {
+    bodyVariables: string[];
+    titleVariables: string[];
+    iconImage: string[];
+    bannerImage: string[];
+    redirectionLink: string[];
+    descriptionComponents: {
+        type: string;
+        component: any;
+    }[];
+};
+
+export { getAllDataFromTemplateComponent, getAllDataFromWebpushTemplateComponent };

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

@@ -1 +1 @@
-var e=Object.defineProperty,t=Object.defineProperties,o=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,i=(t,o,n)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[o]=n,r=(e,t)=>{for(var o in t||(t={}))p.call(t,o)&&i(e,o,t[o]);if(n)for(var o of n(t))l.call(t,o)&&i(e,o,t[o]);return e},a=(e,n)=>t(e,o(n));const u=e=>{var t,o,n;const p=[],l=[],i=[],u=[],m=[],s=[];let c=null;return e.components.forEach(((e,t)=>{var o,n,u,m,s,d;if("BODY"===e.type&&e.text&&p.push({component:e,i:t,type:"BODY"}),"TITLE"===e.type&&e.text&&p.push({component:e,i:t,type:"TITLE"}),"HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format&&(null==(n=null==(o=e.example)?void 0:o.header_handle)?void 0:n[0])&&(c=e),"HEADER"===e.type&&"TEXT"===e.format&&p.push({component:e,i:t,type:"HEADER"}),"BUTTONS"===e.type){const o=null==(m=null==(u=e.buttons)?void 0:u.filter)?void 0:m.call(u,(e=>"URL"===e.type));l.push({component:a(r({},e),{buttons:o}),i:t});const n=null==(d=null==(s=e.buttons)?void 0:s.filter)?void 0:d.call(s,(e=>"QUICK_REPLY"===e.type));i.push({component:a(r({},e),{buttons:n}),i:t})}"limited_time_offer"===e.type&&p.push({component:e,i:t,type:"limited_time_offer"})})),e.mapping&&(null==(t=e.mapping.body)||t.forEach((e=>{u.push(e)}))),e.mapping&&(null==(o=e.mapping.header)||o.forEach((e=>{m.push(e)}))),e.mapping&&(null==(n=e.mapping.title)||n.forEach((e=>{s.push(e)}))),{imageComponent:c,descriptionComponents:p,urlBtns:l,qrbBtns:i,bodyVariables:u,headerVariables:m,titleVariables:s}},m=(e,t)=>{var o,n,p,l,i;return{bodyVariables:(null==(o=null==e?void 0:e.body)?void 0:o.map((e=>e)))||[],titleVariables:(null==(n=null==e?void 0:e.title)?void 0:n.map((e=>e)))||[],iconImage:(null==(p=null==e?void 0:e.icon)?void 0:p.map((e=>e)))||[],bannerImage:(null==(l=null==e?void 0:e.image)?void 0:l.map((e=>e)))||[],redirectionLink:(null==(i=null==e?void 0:e.redirectionLink)?void 0:i.map((e=>e)))||[],descriptionComponents:Object.keys(t).map((e=>({type:e.toUpperCase(),component:a(r({},t[e]),{type:e.toUpperCase()})})))}};export{u as getAllDataFromTemplateComponent,m as getAllDataFromWebpushTemplateComponent};
+const e=e=>{const t=[],p=[],o=[],n=[],i=[],a=[];let m=null;return e.components.forEach(((e,n)=>{if("BODY"===e.type&&e.text&&t.push({component:e,i:n,type:"BODY"}),"TITLE"===e.type&&e.text&&t.push({component:e,i:n,type:"TITLE"}),"HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format&&e.example?.header_handle?.[0]&&(m=e),"HEADER"===e.type&&"TEXT"===e.format&&t.push({component:e,i:n,type:"HEADER"}),"BUTTONS"===e.type){const t=e.buttons?.filter?.((e=>"URL"===e.type));p.push({component:{...e,buttons:t},i:n});const i=e.buttons?.filter?.((e=>"QUICK_REPLY"===e.type));o.push({component:{...e,buttons:i},i:n})}"limited_time_offer"===e.type&&t.push({component:e,i:n,type:"limited_time_offer"})})),e.mapping&&e.mapping.body?.forEach((e=>{n.push(e)})),e.mapping&&e.mapping.header?.forEach((e=>{i.push(e)})),e.mapping&&e.mapping.title?.forEach((e=>{a.push(e)})),{imageComponent:m,descriptionComponents:t,urlBtns:p,qrbBtns:o,bodyVariables:n,headerVariables:i,titleVariables:a}},t=(e,t)=>({bodyVariables:e?.body?.map((e=>e))||[],titleVariables:e?.title?.map((e=>e))||[],iconImage:e?.icon?.map((e=>e))||[],bannerImage:e?.image?.map((e=>e))||[],redirectionLink:e?.redirectionLink?.map((e=>e))||[],descriptionComponents:Object.keys(t).map((e=>({type:e.toUpperCase(),component:{...t[e],type:e.toUpperCase()}})))});export{e as getAllDataFromTemplateComponent,t as getAllDataFromWebpushTemplateComponent};

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

@@ -1 +1 @@
-import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function t(t,o,l,n,m){var d;const u=null==document?void 0:document.getElementById("mobile"===m?"template_html_mobile":"template_html_desktop"),c=n===e.EMAIL?null==(d=null==u?void 0:u.contentWindow)?void 0:d.document.getElementById(t):document.getElementById(t);if(c){const e=c.style.backgroundColor;c.style.backgroundColor=o,setTimeout((function(){c.style.backgroundColor=e}),1e3*l)}}export{t as highlightFor};
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function t(t,o,n,l,m){const d=document?.getElementById("mobile"===m?"template_html_mobile":"template_html_desktop"),c=l===e.EMAIL?d?.contentWindow?.document.getElementById(t):document.getElementById(t);if(c){const e=c.style.backgroundColor;c.style.backgroundColor=o,setTimeout((function(){c.style.backgroundColor=e}),1e3*n)}}export{t as highlightFor};

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

@@ -0,0 +1,4 @@
+declare const validateIsUrl: (receivedMediaLink: string) => boolean;
+declare const isVariable: (value: string) => boolean;
+
+export { isVariable, validateIsUrl };

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as r}from"../button/Button.js";import{TitleRegular as a}from"../TypographyStyle.js";import{EmailContainer as n,Header as o,IframeContainer as p,ImageContainer as s,CardLoadingContainer as l,ViewButton as i}from"./EmailTemplatePreview.styled.js";var d=Object.defineProperty,c=Object.getOwnPropertySymbols,m=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,y=(e,t,r)=>t in e?d(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,b=(e,t)=>{for(var r in t||(t={}))m.call(t,r)&&y(e,r,t[r]);if(c)for(var r of c(t))u.call(t,r)&&y(e,r,t[r]);return e};const h="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",f=d=>{let{template:c,handleViewTemplate:m,hideHeader:u,hideViewButton:y,containerStyle:f,emailHtmlContainerId:g,emailDisplayContent:v,applyBorderBottom:C,hidePointerEvents:w}=d;return e(n,{hideHeader:u,style:b({},null!=f?f:{}),children:[!u&&t(o,{children:t(a,{style:{maxWidth:"100%"},children:c.name})}),t(p,{applyBorderBottom:C,children:v?t("iframe",{title:"Email template preview",id:null!=g?g:"",width:"100%",srcDoc:(x=v,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=${h}`).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:w?void 0:"none"}}):t(s,{hideHeader:u,children:t(l,{})})}),!y&&t(i,{children:t(r,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]});var x};export{h as DEFAULT_IMAGE,f 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 r,Header as o,IframeContainer as s,ImageContainer as p,CardLoadingContainer as i,ViewButton as d}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",c=({template:c,handleViewTemplate:m,hideHeader:h,hideViewButton:u,containerStyle:y,emailHtmlContainerId:f,emailDisplayContent:b,applyBorderBottom:g,hidePointerEvents:C})=>{return e(r,{hideHeader:h,style:{...y??{}},children:[!h&&t(o,{children:t(n,{style:{maxWidth:"100%"},children:c.name})}),t(s,{applyBorderBottom:g,children:b?t("iframe",{title:"Email template preview",id:f??"",width:"100%",srcDoc:(x=b,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=${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:C?void 0:"none"}}):t(p,{hideHeader:h,children:t(i,{})})}),!u&&t(d,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]});var x};export{l as DEFAULT_IMAGE,c as default};

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

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

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

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

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

@@ -1 +1 @@
-import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import i from"../../../assets/icons/RCS_PDF.svg.js";import{ShimmerImage as o}from"../../shimmer-image/ShimmerImage.js";import{COLORS as s}from"../../../constants/Theme.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{RCSPdfContainer as l,PdfComineText as n,PdfText as c,RCSMediaContainer as p}from"./RCSPreview.styled.js";var d=Object.defineProperty,m=Object.defineProperties,h=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,u=(e,r,t)=>r in e?d(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,v=(e,r)=>{for(var t in r||(r={}))b.call(r,t)&&u(e,t,r[t]);if(f)for(var t of f(r))g.call(r,t)&&u(e,t,r[t]);return e};const j=t=>{let{headerAssetLink:o,headerAssetName:a}=t;var p;const d=i,m=a||(null==(p=null==o?void 0:o.split("/").pop())?void 0:p.replace(".pdf",""))||"xxxxxxxx";return e(l,{children:[r(d,{height:24,width:24,color:s.icon.placeholder}),!!m&&e(n,{children:[r(c,{children:m}),r(c,{children:".pdf"})]})]})},x=e=>{let{headerAssetLink:i,headerAssetName:s,mediaType:l,imagePreviewStyles:n,isHorizontal:c}=e;const d={width:"100%",minHeight:c?"100%":"240px",height:c?"100%":"240px",objectFit:"cover",borderRadius:c?"8px":""};return r(p,{isHorizontal:!!c,children:l===a.IMAGE?r(o,{imageUrl:i,alt:i,width:"100%",height:c?"100%":240,imagePreviewStyles:(f=v({},n),b={borderTopRightRadius:8,borderTopLeftRadius:8},m(f,h(b)))}):l===a.VIDEO?r("video",{src:i,style:d,controls:!0,muted:!0,children:r("track",{default:!0,kind:"captions",srcLang:"en",src:i})}):r(t,{})});var f,b};export{j as PdfMediaCard,x as RCSMediaCard};
+import{jsxs as e,jsx as r,Fragment as i}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 m}from"../models/TemplateMeta.js";import{RCSPdfContainer as a,PdfComineText as d,PdfText as n,RCSMediaContainer as h}from"./RCSPreview.styled.js";const c=({headerAssetLink:i,headerAssetName:s})=>{const m=t,h=s||i?.split("/").pop()?.replace(".pdf","")||"xxxxxxxx";return e(a,{children:[r(m,{height:24,width:24,color:o.icon.placeholder}),!!h&&e(d,{children:[r(n,{children:h}),r(n,{children:".pdf"})]})]})},l=({headerAssetLink:e,headerAssetName:t,mediaType:o,imagePreviewStyles:a,isHorizontal:d})=>{const n={width:"100%",minHeight:d?"100%":"240px",height:d?"100%":"240px",objectFit:"cover",borderRadius:d?"8px":""};return r(h,{isHorizontal:!!d,children:o===m.IMAGE?r(s,{imageUrl:e,alt:e,width:"100%",height:d?"100%":240,imagePreviewStyles:{...a,borderTopRightRadius:8,borderTopLeftRadius:8}}):o===m.VIDEO?r("video",{src:e,style:n,controls:!0,muted:!0,children:r("track",{default:!0,kind:"captions",srcLang:"en",src:e})}):r(i,{})})};export{c as PdfMediaCard,l as RCSMediaCard};

package/dist/esm/components/template-preview/RCS/RCSPreview.styled.js

@@ -70,7 +70,7 @@ import e from"styled-components";import{COLORS as t}from"../../../constants/Them
 	justify-content: flex-start;
 	margin-left: 4px;
 	max-width: 180px;
-`,l=e.p`
+`,x=e.p`
 	white-space: nowrap;
 	color: #4c5567;
 	max-width: 100px;
@@ -81,12 +81,12 @@ import e from"styled-components";import{COLORS as t}from"../../../constants/Them
 	font-size: 12px;
 	font-weight: 500;
 	line-width: 20px;
-`,x=e.div`
+`,l=e.div`
 	border: 1px solid ${t.stroke.primary};
 	position: relative;
 	height: 500px;
 	overflow-y: auto;
-	border-radius: ${e=>{var t;return null!=(t=e.borderRadius)?t:"8px"}};
+	border-radius: ${e=>e.borderRadius??"8px"};
 	box-shadow: 0px 2px 8px 0px #0000001f;
 	background-color: white;
 `,c=e.div`
@@ -125,4 +125,4 @@ import e from"styled-components";import{COLORS as t}from"../../../constants/Them
 	line-height: 11px;
 	color: ${t.content.secondary};
 	margin-bottom: 0px;
-`;export{c as HeaderContainer,o as HeaderTextContainer,h as IconContainer,f as LeftContainer,s as PdfComineText,l as PdfText,x as RCSCarousalContainer,d as RCSChatBtnContainer,a as RCSMediaContainer,p as RCSPdfContainer,n as RCSPreviewContainer,r as RcsHtmlContainer,m as SubTitle,g as TitleContainer,i as TitleTextContainer};
+`;export{c as HeaderContainer,o as HeaderTextContainer,h as IconContainer,f as LeftContainer,s as PdfComineText,x as PdfText,l as RCSCarousalContainer,d as RCSChatBtnContainer,a as RCSMediaContainer,p as RCSPdfContainer,n as RCSPreviewContainer,r as RcsHtmlContainer,m as SubTitle,g as TitleContainer,i as TitleTextContainer};

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

@@ -1,8 +1,8 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as p}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import n from"./RCSChatHeader.js";import{RCSChatPreview as l}from"./RCSChatPreview.js";var h=Object.defineProperty,m=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,u=(e,r,t)=>r in e?h(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,x=(e,r)=>{for(var t in r||(r={}))d.call(r,t)&&u(e,t,r[t]);if(m)for(var t of m(r))c.call(r,t)&&u(e,t,r[t]);return e};const w=o.div`
+import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as s}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"};
-`,y=o(p)`
-	color: ${i.content.primary};
-`,f=o=>{const{hideDeviceContainerInPreview:p}=a();return 3===s(o)?e(r,{children:o.zeroStateComponent}):p?e(l,x({showHeader:o.showHeader},o)):e(r,{children:t(w,{style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel,children:[o.showHeader&&e(n,{}),t("div",{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",{style:{marginBottom:16},children:e(y,{children:"Preview"})}),e(l,x({showHeader:o.showHeader},o))]})]})})};export{f as RCSTemplateLikePreview};
+`,m=o(i)`
+	color: ${s.content.primary};
+`,d=o=>{const{hideDeviceContainerInPreview:i}=a();return 3===p(o)?e(r,{children:o.zeroStateComponent}):i?e(h,{showHeader:o.showHeader,...o}):e(r,{children:t(l,{style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel,children:[o.showHeader&&e(n,{}),t("div",{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",{style:{marginBottom:16},children:e(m,{children:"Preview"})}),e(h,{showHeader:o.showHeader,...o})]})]})})};export{d as RCSTemplateLikePreview};

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

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

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

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { CHANNEL_TYPE } from './models/Channels.js';
+import { EmailMeta } from './models/EmailTemplate.js';
+import { SMSMeta } from './models/SmsTemplate.js';
+import { AllTemplateTypes } from './models/types.js';
+import { WebpushMetaType } from './models/WebpushTemplate.js';
+import { WhatsappMeta } from './models/WhatsAppTemplate.js';
+
+interface TemplatePreviewProps {
+    template?: AllTemplateTypes;
+    channel: CHANNEL_TYPE;
+    onlyTemplateContent?: boolean;
+    outsidePreview?: boolean;
+    templateCreationsInfo?: boolean;
+    whatsAppSpecificMeta?: WhatsappMeta;
+    emailSpecificMeta?: EmailMeta;
+    smsSpecificMeta?: SMSMeta;
+    hideHeader?: boolean;
+    size?: 'small' | 'large';
+    templateContainerStyles?: React__default.CSSProperties;
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    applyBorderBottom?: boolean;
+    webPushSpecificMeta?: WebpushMetaType;
+    hidePointerEvents?: boolean;
+}
+declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, webPushSpecificMeta, hidePointerEvents, }: TemplatePreviewProps) => react_jsx_runtime.JSX.Element;
+
+export { TemplatePreview };
+export type { TemplatePreviewProps };

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

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

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

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

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

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