@bikdotai/bik-component-library 0.0.433-beta.16 → 0.0.433-beta.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +4 -4
  2. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +5 -5
  3. package/package.json +1 -1
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js CHANGED
@@ -10,7 +10,7 @@
10
10
  left: 0;
11
11
  width: 100%;
12
12
  height: 100%;
13
- background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
14
- z-index: 1; /* Ensure it covers the inner content */
15
- pointer-events: none; /* Allow clicks to pass through */
16
- `,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=i=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:S,componentType:V,CTAoptions:P}=i;var k,L;const[H,w]=n.useState(!1),[D,B]=n.useState(""),[q,Y]=n.useState([]),[M,R]=n.useState(),[U,I]=n.useState(!1),[W,$]=n.useState(!1),{device:z,channel:Z,isError:F,originalVariableList:G,template:K,templateSelectionTriggered:J,setTemplate:Q,setDisplayContent:X,setOriginalVariableList:ee,globalNormalizedPlaceholders:te,enabledCustomText:le,pod:ae,selectedCarouselIndex:ne,isProductCarouselType:ie,disableEditVariable:se}=j.useTemplateModalContext();function oe(){var e,t;const l=[];let a=[];if(Z!==p.CHANNEL_TYPE.MESSAGE||le){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(T)):(l.push({label:"",options:[f,E,T]}),R(E));const e=null!=te?te:[];Y([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=te?te:[];Y([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((Z===p.CHANNEL_TYPE.WHATSAPP||Z===p.CHANNEL_TYPE.EMAIL||Z===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&Z===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&Z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ae===m.POD.CHATBOT&&"BUTTONS"===V){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(h,a,Z);e.value&&R(e)}else"date_time"===h.type?(R(T),B(h.updatedValue),ce(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(R(f),B(h.updatedValue.split("https://")[1])):(R(E),B(h.updatedValue))}function ue(e,t){var l,a,n;const i=e;B(""),R(i),Z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(re(null!==(l=i.value)&&void 0!==l?l:"","string"),null==ce||ce(null!==(a=h.index)&&void 0!==a?a:0,i.value,!0)):(null==ce||ce(null!==(n=h.index)&&void 0!==n?n:0,D,!0,i.value),re("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?re(i.value,"url"===i.bikPlaceholderType?"link":"string"):(B(""),re("",i.value))}function de(e,t){var l;B(t);const a="custom_link"===(null==M?void 0:M.value)&&t?t.includes("https")?t:`https://${t}`:t;re(a,"static_expiry"===e?"string":e),Z===p.CHANNEL_TYPE.WHATSAPP&&(null==ce||ce(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function re(e,t){var l,n,i,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Z!==p.CHANNEL_TYPE.WHATSAPP){const a=O.getVariableNameForEmailByIndex(A+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),i=Z===p.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=G.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ee||ee(s)}if(Z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ne&&ne>-1&&ie){const t=Object.assign({},G).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>A===a?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):t))})}));return void(null==ee||ee((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ne&&ne>-1?G.cards[ne]:G;let u=l.body,d=l.header,r=l.buttons;if("BODY"===V?u=null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===V?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===V&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ne&&ne>-1){const e=a.cloneDeep(G.cards);e[ne]={header:d,body:u,buttons:r},null==ee||ee((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ee||ee((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function ce(e,t,l,n){var i,s,o,u,d,r,c;if(null!=ne&&ne>-1&&ie){const s=Object.assign({},K).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,n,i,s,o;if("BODY"!==l.type)return l;if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(o=null===(s=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}}))})))}):l})),o=a.cloneDeep(K);if(l){const l=null===(i=Object.assign({},K).mapping.cards)||void 0===i?void 0:i.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,console.log("mappingComponent templateCopy: ",o),void(null==Q||Q(o))}const p=null!=ne&&ne>-1?{components:null===(s=Object.assign({},K).components[1].cards)||void 0===s?void 0:s[ne].components,mapping:null===(o=Object.assign({},K).mapping.cards)||void 0===o?void 0:o[ne]}:Object.assign({},K),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===V){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(o=null===(s=null===(i=m.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===V){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===V){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===V)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===V&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===V&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===V&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var n;"BUTTONS"===t.type&&(null===(n=t.buttons)||void 0===n||n.forEach(((t,n)=>{"URL"===t.type&&(l++,n===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===n?"((customPlaceholderName))":t:e))})}if(null!=ne&&ne>-1&&K){const e=a.cloneDeep(K);e.components[1].cards[ne].components=p.components,e.mapping.cards[ne]=p.mapping,null==Q||Q(e)}else null==Q||Q(Object.assign({},p))}return n.useEffect((()=>{H&&(null==x||x())}),[H]),n.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===z?"template_html_mobile":"template_html_desktop",s=document.getElementById(i),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==s?void 0:s.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);Z===p.CHANNEL_TYPE.EMAIL&&(null==X||X(o))}()}),[J]),n.useEffect((()=>{oe()}),[]),n.useEffect((()=>{oe()}),[ne]),n.useEffect((()=>{z&&M&&D&&setTimeout((()=>{re("custom_link"===(null==M?void 0:M.value)&&D?D.includes("https")?D:`https://${D}`:D,M.value)}),100)}),[z]),n.useEffect((()=>{!W&&M&&h.updatedValue&&setTimeout((()=>{re("custom_link"===(null==M?void 0:M.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,M.value),$(!0)}),100)}),[M]),e.jsxs(y,Object.assign({channel:Z,focused:H,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:F&&!M?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==M?void 0:M.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ae===m.POD.CHATBOT?null==M?void 0:M.value:r.truncate(null!==(L=null==M?void 0:M.label)&&void 0!==L?L:"",20,!0)})),e.jsx(t.default,{onClick:()=>{I(!U)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{options:q,isSearchable:!1,onSelect:ue,defaultOptions:M?[Object.assign(Object.assign({},M),{selected:!0})]:[]})})),("custom_text"===(null==M?void 0:M.value)||"custom_link"===(null==M?void 0:M.value))&&e.jsx(d.Input,{labelText:"custom_text"===(null==M?void 0:M.value)?"Custom text value":"custom_link"===(null==M?void 0:M.value)?"Custom URL value":"",id:`variable-value-${null==M?void 0:M.value}-${A}`,value:D,errorMessage:F?D&&0!==D.trim().length?"custom_link"!==M.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${D.trim()}`)&&0!==D.trim().length?"custom_link"!==M.value&&D.length>30?"Length cannot be more than 30":"BUTTONS"===V&&"custom_link"!==M.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==M?void 0:M.value)?2e3:"BUTTONS"===V?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==M?void 0:M.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===M.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{de(M.value,e)}}),"static_expiry"===(null==M?void 0:M.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[se&&e.jsx(_,{}),e.jsx("div",Object.assign({style:{zIndex:2,position:"relative"}},{children:e.jsx(o.CustomDateTime,{placement:"auto",time:D?l.format(new Date(D),"hh:mm a"):l.format(new Date,"hh:mm a"),date:D?new Date(D):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{de("static_expiry",e.toISOString())}})}))]})),U&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:U,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!1),"{{custom.url}}"===e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"static_expiry"}):ue({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
13
+ background-color: rgba(0, 0, 0, 0.1);
14
+ z-index: 1000;
15
+ cursor: not-allowed;
16
+ `,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=i=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:S,componentType:V,CTAoptions:P}=i;var k,L;const[H,w]=n.useState(!1),[D,B]=n.useState(""),[q,Y]=n.useState([]),[M,R]=n.useState(),[U,I]=n.useState(!1),[W,$]=n.useState(!1),{device:z,channel:Z,isError:F,originalVariableList:G,template:K,templateSelectionTriggered:J,setTemplate:Q,setDisplayContent:X,setOriginalVariableList:ee,globalNormalizedPlaceholders:te,enabledCustomText:le,pod:ae,selectedCarouselIndex:ne,isProductCarouselType:ie,disableEditVariable:se}=j.useTemplateModalContext();function oe(){var e,t;const l=[];let a=[];if(Z!==p.CHANNEL_TYPE.MESSAGE||le){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(T)):(l.push({label:"",options:[f,E,T]}),R(E));const e=null!=te?te:[];Y([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=te?te:[];Y([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((Z===p.CHANNEL_TYPE.WHATSAPP||Z===p.CHANNEL_TYPE.EMAIL||Z===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&Z===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&Z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ae===m.POD.CHATBOT&&"BUTTONS"===V){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(h,a,Z);e.value&&R(e)}else"date_time"===h.type?(R(T),B(h.updatedValue),ce(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(R(f),B(h.updatedValue.split("https://")[1])):(R(E),B(h.updatedValue))}function ue(e,t){var l,a,n;const i=e;B(""),R(i),Z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(re(null!==(l=i.value)&&void 0!==l?l:"","string"),null==ce||ce(null!==(a=h.index)&&void 0!==a?a:0,i.value,!0)):(null==ce||ce(null!==(n=h.index)&&void 0!==n?n:0,D,!0,i.value),re("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?re(i.value,"url"===i.bikPlaceholderType?"link":"string"):(B(""),re("",i.value))}function de(e,t){var l;B(t);const a="custom_link"===(null==M?void 0:M.value)&&t?t.includes("https")?t:`https://${t}`:t;re(a,"static_expiry"===e?"string":e),Z===p.CHANNEL_TYPE.WHATSAPP&&(null==ce||ce(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function re(e,t){var l,n,i,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Z!==p.CHANNEL_TYPE.WHATSAPP){const a=O.getVariableNameForEmailByIndex(A+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),i=Z===p.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=G.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ee||ee(s)}if(Z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ne&&ne>-1&&ie){const t=Object.assign({},G).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>A===a?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):t))})}));return void(null==ee||ee((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ne&&ne>-1?G.cards[ne]:G;let u=l.body,d=l.header,r=l.buttons;if("BODY"===V?u=null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===V?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===V&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ne&&ne>-1){const e=a.cloneDeep(G.cards);e[ne]={header:d,body:u,buttons:r},null==ee||ee((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ee||ee((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function ce(e,t,l,n){var i,s,o,u,d,r,c;if(null!=ne&&ne>-1&&ie){const s=Object.assign({},K).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,n,i,s,o;if("BODY"!==l.type)return l;if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(o=null===(s=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}}))})))}):l})),o=a.cloneDeep(K);if(l){const l=null===(i=Object.assign({},K).mapping.cards)||void 0===i?void 0:i.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,console.log("mappingComponent templateCopy: ",o),void(null==Q||Q(o))}const p=null!=ne&&ne>-1?{components:null===(s=Object.assign({},K).components[1].cards)||void 0===s?void 0:s[ne].components,mapping:null===(o=Object.assign({},K).mapping.cards)||void 0===o?void 0:o[ne]}:Object.assign({},K),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===V){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(o=null===(s=null===(i=m.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===V){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===V){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===V)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===V&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===V&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===V&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var n;"BUTTONS"===t.type&&(null===(n=t.buttons)||void 0===n||n.forEach(((t,n)=>{"URL"===t.type&&(l++,n===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===n?"((customPlaceholderName))":t:e))})}if(null!=ne&&ne>-1&&K){const e=a.cloneDeep(K);e.components[1].cards[ne].components=p.components,e.mapping.cards[ne]=p.mapping,null==Q||Q(e)}else null==Q||Q(Object.assign({},p))}return n.useEffect((()=>{H&&(null==x||x())}),[H]),n.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===z?"template_html_mobile":"template_html_desktop",s=document.getElementById(i),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==s?void 0:s.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);Z===p.CHANNEL_TYPE.EMAIL&&(null==X||X(o))}()}),[J]),n.useEffect((()=>{oe()}),[]),n.useEffect((()=>{oe()}),[ne]),n.useEffect((()=>{z&&M&&D&&setTimeout((()=>{re("custom_link"===(null==M?void 0:M.value)&&D?D.includes("https")?D:`https://${D}`:D,M.value)}),100)}),[z]),n.useEffect((()=>{!W&&M&&h.updatedValue&&setTimeout((()=>{re("custom_link"===(null==M?void 0:M.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,M.value),$(!0)}),100)}),[M]),e.jsxs(y,Object.assign({channel:Z,focused:H,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:F&&!M?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==M?void 0:M.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ae===m.POD.CHATBOT?null==M?void 0:M.value:r.truncate(null!==(L=null==M?void 0:M.label)&&void 0!==L?L:"",20,!0)})),e.jsx(t.default,{onClick:()=>{I(!U)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:se,options:q,isSearchable:!1,onSelect:ue,defaultOptions:M?[Object.assign(Object.assign({},M),{selected:!0})]:[]})})),("custom_text"===(null==M?void 0:M.value)||"custom_link"===(null==M?void 0:M.value))&&e.jsx(d.Input,{labelText:"custom_text"===(null==M?void 0:M.value)?"Custom text value":"custom_link"===(null==M?void 0:M.value)?"Custom URL value":"",id:`variable-value-${null==M?void 0:M.value}-${A}`,value:D,errorMessage:F?D&&0!==D.trim().length?"custom_link"!==M.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${D.trim()}`)&&0!==D.trim().length?"custom_link"!==M.value&&D.length>30?"Length cannot be more than 30":"BUTTONS"===V&&"custom_link"!==M.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==M?void 0:M.value)?2e3:"BUTTONS"===V?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==M?void 0:M.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===M.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{de(M.value,e)}}),"static_expiry"===(null==M?void 0:M.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[se&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:D?l.format(new Date(D),"hh:mm a"):l.format(new Date,"hh:mm a"),date:D?new Date(D):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{de("static_expiry",e.toISOString())}})]})),U&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:U,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!1),"{{custom.url}}"===e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"static_expiry"}):ue({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import{format as a}from"date-fns";import{cloneDeep as i}from"lodash";import{useState as n,useEffect as o}from"react";import s from"styled-components";import{AddVariableV2SideModal as d}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as u}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as c}from"../../dropdown/Dropdown.js";import{Input as r}from"../../input/Input.js";import{truncate as p}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as m}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as v}from"../../template-preview/models/Channels.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as g,BodyPrimary as h}from"../../TypographyStyle.js";import O from"../../../utils/StringUtils.js";import{COLORS as j}from"../../../constants/Theme.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as y}from"../utils/getVariableNameEmail.js";const f=s.div`
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import{format as a}from"date-fns";import{cloneDeep as i}from"lodash";import{useState as n,useEffect as o}from"react";import s from"styled-components";import{AddVariableV2SideModal as d}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as u}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as c}from"../../dropdown/Dropdown.js";import{Input as r}from"../../input/Input.js";import{truncate as p}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as m}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as v}from"../../template-preview/models/Channels.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as g,BodyPrimary as O}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as j}from"../../../constants/Theme.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as f}from"../utils/getVariableNameEmail.js";const y=s.div`
2
2
  /* surface/$color-background-warning-light */
3
3
 
4
4
  background: ${e=>e.focused&&e.channel===v.EMAIL?j.background.warning.light:"transparent"};
@@ -10,7 +10,7 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/
10
10
  left: 0;
11
11
  width: 100%;
12
12
  height: 100%;
13
- background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
14
- z-index: 1; /* Ensure it covers the inner content */
15
- pointer-events: none; /* Allow clicks to pass through */
16
- `,T={value:"custom_link",label:"Custom URL"},V={value:"custom_text",label:"Custom text"},k={value:"static_expiry",label:"Static Expiry"},A=s=>{let{onFocus:A,variable:E,index:S,showVariableModal:w,variableList:C,setShowDiscountCheckBox:P,componentType:B,CTAoptions:L}=s;var D,N;const[H,U]=n(!1),[M,W]=n(""),[I,R]=n([]),[$,z]=n(),[Y,Z]=n(!1),[G,q]=n(!1),{device:F,channel:K,isError:J,originalVariableList:Q,template:X,templateSelectionTriggered:ee,setTemplate:te,setDisplayContent:le,setOriginalVariableList:ae,globalNormalizedPlaceholders:ie,enabledCustomText:ne,pod:oe,selectedCarouselIndex:se,isProductCarouselType:de,disableEditVariable:ue}=x();function ce(){var e,t;const l=[];let a=[];if(K!==v.MESSAGE||ne){"link"===(null==E?void 0:E.type)?(l.push({label:"",options:[T,V]}),z(T)):"date_time"===(null==E?void 0:E.type)?(l.push({label:"",options:[T,V]}),z(k)):(l.push({label:"",options:[T,V,k]}),z(V));const e=null!=ie?ie:[];R([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:O.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ie?ie:[];R([{label:"",options:[V,T]},...e]),a=[{label:"",options:[V,T]},...e]}if((K===v.WHATSAPP||K===v.EMAIL||K===v.MESSAGE)&&E.updatedValue)if(m.test(E.updatedValue)&&K===v.WHATSAPP||E.updatedValue.startsWith("{{")&&K!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(w){let t=e.updatedValue;if(oe===b.CHATBOT&&"BUTTONS"===B){const l=null==L?void 0:L.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(E,a,K);e.value&&z(e)}else"date_time"===E.type?(z(k),W(E.updatedValue),ve(null!==(e=E.index)&&void 0!==e?e:0,E.updatedValue)):(null===(t=E.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(z(T),W(E.updatedValue.split("https://")[1])):(z(V),W(E.updatedValue))}function re(e,t){var l,a,i;const n=e;W(""),z(n),K===v.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(me(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ve||ve(null!==(a=E.index)&&void 0!==a?a:0,n.value,!0)):(null==ve||ve(null!==(i=E.index)&&void 0!==i?i:0,M,!0,n.value),me("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?me(n.value,"url"===n.bikPlaceholderType?"link":"string"):(W(""),me("",n.value))}function pe(e,t){var l;W(t);const a="custom_link"===(null==$?void 0:$.value)&&t?t.includes("https")?t:`https://${t}`:t;me(a,"static_expiry"===e?"string":e),K===v.WHATSAPP&&(null==ve||ve(null!==(l=E.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function me(e,t){var l,a,n,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(K!==v.WHATSAPP){const a=y(S+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===F?"template_html_mobile":"template_html_desktop"),n=K===v.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const o=Q.map(((t,l)=>l===S?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==ae||ae(o)}if(K===v.WHATSAPP){if(null!=se&&se>-1&&de){const t=Object.assign({},Q).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>S===a?Object.assign(Object.assign({},l),{type:s,updatedValue:e}):t))})}));return void(null==ae||ae((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=se&&se>-1?Q.cards[se]:Q;let d=l.body,u=l.header,c=l.buttons;if("BODY"===B?d=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===S?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===B?u=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===S?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===B&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===S?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=se&&se>-1){const e=i(Q.cards);e[se]={header:u,body:d,buttons:c},null==ae||ae((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ae||ae((e=>Object.assign(Object.assign({},e),{header:u,body:d,buttons:c})))}}function ve(e,t,l,a){var n,o,s,d,u,c,r;if(null!=se&&se>-1&&de){const o=Object.assign({},X).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),s=i(X);if(l){const l=null===(n=Object.assign({},X).mapping.cards)||void 0===n?void 0:n.map((l=>{var i;return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))})}));s.mapping.cards=l}return s.components=o,console.log("mappingComponent templateCopy: ",s),void(null==te||te(s))}const p=null!=se&&se>-1?{components:null===(o=Object.assign({},X).components[1].cards)||void 0===o?void 0:o[se].components,mapping:null===(s=Object.assign({},X).mapping.cards)||void 0===s?void 0:s[se]}:Object.assign({},X),m=null===(d=null==p?void 0:p.components)||void 0===d?void 0:d.map((l=>{var a,i,n,o,s,d,u,c,r,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===B){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===B){if(null===(d=l.example)||void 0===d?void 0:d.header_text){const l=[...null!==(c=null===(u=m.example)||void 0===u?void 0:u.header_text)&&void 0!==c?c:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===B){if(null===(p=null===(r=l.buttons)||void 0===r?void 0:r[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===B)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===B&&(null===(u=null==p?void 0:p.mapping)||void 0===u?void 0:u.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===B&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===B&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=se&&se>-1&&X){const e=i(X);e.components[1].cards[se].components=p.components,e.mapping.cards[se]=p.mapping,null==te||te(e)}else null==te||te(Object.assign({},p))}return o((()=>{H&&(null==A||A())}),[H]),o((()=>{!function(){var e,t,l,a,i;const n="mobile"===F?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);K===v.EMAIL&&(null==le||le(s))}()}),[ee]),o((()=>{ce()}),[]),o((()=>{ce()}),[se]),o((()=>{F&&$&&M&&setTimeout((()=>{me("custom_link"===(null==$?void 0:$.value)&&M?M.includes("https")?M:`https://${M}`:M,$.value)}),100)}),[F]),o((()=>{!G&&$&&E.updatedValue&&setTimeout((()=>{me("custom_link"===(null==$?void 0:$.value)&&E.updatedValue?E.updatedValue.includes("https")?E.updatedValue:`https://${E.updatedValue}`:E.updatedValue,$.value),q(!0)}),100)}),[$]),e(f,Object.assign({channel:K,focused:H,onMouseEnter:()=>U(!0),onMouseLeave:()=>U(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(g,Object.assign({style:{color:J&&!$?j.content.negative:j.content.primary}},{children:[null===(D=E.variableName)||void 0===D?void 0:D.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:w?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==$?void 0:$.label)?"space-between":"flex-end"}},{children:[t(h,Object.assign({numberOfLines:1},{children:oe===b.CHATBOT?null==$?void 0:$.value:p(null!==(N=null==$?void 0:$.label)&&void 0!==N?N:"",20,!0)})),t(l,{onClick:()=>{Z(!Y)},width:24,height:24,color:j.content.primary})]})):t(c,{options:I,isSearchable:!1,onSelect:re,defaultOptions:$?[Object.assign(Object.assign({},$),{selected:!0})]:[]})})),("custom_text"===(null==$?void 0:$.value)||"custom_link"===(null==$?void 0:$.value))&&t(r,{labelText:"custom_text"===(null==$?void 0:$.value)?"Custom text value":"custom_link"===(null==$?void 0:$.value)?"Custom URL value":"",id:`variable-value-${null==$?void 0:$.value}-${S}`,value:M,errorMessage:J?M&&0!==M.trim().length?"custom_link"!==$.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${M.trim()}`)&&0!==M.trim().length?"custom_link"!==$.value&&M.length>30?"Length cannot be more than 30":"BUTTONS"===B&&"custom_link"!==$.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==$?void 0:$.value)?2e3:"BUTTONS"===B?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==$?void 0:$.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===$.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{pe($.value,e)}}),"static_expiry"===(null==$?void 0:$.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[ue&&t(_,{}),t("div",Object.assign({style:{zIndex:2,position:"relative"}},{children:t(u,{placement:"auto",time:a(M?new Date(M):new Date,"hh:mm a"),date:M?new Date(M):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{pe("static_expiry",e.toISOString())}})}))]})),Y&&t(d,{zIndex:2e3,data:null!=C?C:[],showVariable:Y,setShowVariable:Z,placeholder:"Add a variable",customTrigger:e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?re({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"static_expiry"}):re({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{f as Container,A as default};
13
+ background-color: rgba(0, 0, 0, 0.1);
14
+ z-index: 1000;
15
+ cursor: not-allowed;
16
+ `,T={value:"custom_link",label:"Custom URL"},V={value:"custom_text",label:"Custom text"},k={value:"static_expiry",label:"Static Expiry"},A=s=>{let{onFocus:A,variable:E,index:S,showVariableModal:w,variableList:C,setShowDiscountCheckBox:P,componentType:B,CTAoptions:D}=s;var L,N;const[H,U]=n(!1),[M,W]=n(""),[R,$]=n([]),[I,z]=n(),[Y,Z]=n(!1),[G,q]=n(!1),{device:F,channel:K,isError:J,originalVariableList:Q,template:X,templateSelectionTriggered:ee,setTemplate:te,setDisplayContent:le,setOriginalVariableList:ae,globalNormalizedPlaceholders:ie,enabledCustomText:ne,pod:oe,selectedCarouselIndex:se,isProductCarouselType:de,disableEditVariable:ue}=x();function ce(){var e,t;const l=[];let a=[];if(K!==v.MESSAGE||ne){"link"===(null==E?void 0:E.type)?(l.push({label:"",options:[T,V]}),z(T)):"date_time"===(null==E?void 0:E.type)?(l.push({label:"",options:[T,V]}),z(k)):(l.push({label:"",options:[T,V,k]}),z(V));const e=null!=ie?ie:[];$([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ie?ie:[];$([{label:"",options:[V,T]},...e]),a=[{label:"",options:[V,T]},...e]}if((K===v.WHATSAPP||K===v.EMAIL||K===v.MESSAGE)&&E.updatedValue)if(m.test(E.updatedValue)&&K===v.WHATSAPP||E.updatedValue.startsWith("{{")&&K!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(w){let t=e.updatedValue;if(oe===b.CHATBOT&&"BUTTONS"===B){const l=null==D?void 0:D.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(E,a,K);e.value&&z(e)}else"date_time"===E.type?(z(k),W(E.updatedValue),ve(null!==(e=E.index)&&void 0!==e?e:0,E.updatedValue)):(null===(t=E.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(z(T),W(E.updatedValue.split("https://")[1])):(z(V),W(E.updatedValue))}function re(e,t){var l,a,i;const n=e;W(""),z(n),K===v.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(me(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ve||ve(null!==(a=E.index)&&void 0!==a?a:0,n.value,!0)):(null==ve||ve(null!==(i=E.index)&&void 0!==i?i:0,M,!0,n.value),me("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?me(n.value,"url"===n.bikPlaceholderType?"link":"string"):(W(""),me("",n.value))}function pe(e,t){var l;W(t);const a="custom_link"===(null==I?void 0:I.value)&&t?t.includes("https")?t:`https://${t}`:t;me(a,"static_expiry"===e?"string":e),K===v.WHATSAPP&&(null==ve||ve(null!==(l=E.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function me(e,t){var l,a,n,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(K!==v.WHATSAPP){const a=f(S+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===F?"template_html_mobile":"template_html_desktop"),n=K===v.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const o=Q.map(((t,l)=>l===S?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==ae||ae(o)}if(K===v.WHATSAPP){if(null!=se&&se>-1&&de){const t=Object.assign({},Q).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>S===a?Object.assign(Object.assign({},l),{type:s,updatedValue:e}):t))})}));return void(null==ae||ae((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=se&&se>-1?Q.cards[se]:Q;let d=l.body,u=l.header,c=l.buttons;if("BODY"===B?d=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===S?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===B?u=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===S?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===B&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===S?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=se&&se>-1){const e=i(Q.cards);e[se]={header:u,body:d,buttons:c},null==ae||ae((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ae||ae((e=>Object.assign(Object.assign({},e),{header:u,body:d,buttons:c})))}}function ve(e,t,l,a){var n,o,s,d,u,c,r;if(null!=se&&se>-1&&de){const o=Object.assign({},X).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),s=i(X);if(l){const l=null===(n=Object.assign({},X).mapping.cards)||void 0===n?void 0:n.map((l=>{var i;return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))})}));s.mapping.cards=l}return s.components=o,console.log("mappingComponent templateCopy: ",s),void(null==te||te(s))}const p=null!=se&&se>-1?{components:null===(o=Object.assign({},X).components[1].cards)||void 0===o?void 0:o[se].components,mapping:null===(s=Object.assign({},X).mapping.cards)||void 0===s?void 0:s[se]}:Object.assign({},X),m=null===(d=null==p?void 0:p.components)||void 0===d?void 0:d.map((l=>{var a,i,n,o,s,d,u,c,r,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===B){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===B){if(null===(d=l.example)||void 0===d?void 0:d.header_text){const l=[...null!==(c=null===(u=m.example)||void 0===u?void 0:u.header_text)&&void 0!==c?c:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===B){if(null===(p=null===(r=l.buttons)||void 0===r?void 0:r[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===B)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===B&&(null===(u=null==p?void 0:p.mapping)||void 0===u?void 0:u.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===B&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===B&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=se&&se>-1&&X){const e=i(X);e.components[1].cards[se].components=p.components,e.mapping.cards[se]=p.mapping,null==te||te(e)}else null==te||te(Object.assign({},p))}return o((()=>{H&&(null==A||A())}),[H]),o((()=>{!function(){var e,t,l,a,i;const n="mobile"===F?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);K===v.EMAIL&&(null==le||le(s))}()}),[ee]),o((()=>{ce()}),[]),o((()=>{ce()}),[se]),o((()=>{F&&I&&M&&setTimeout((()=>{me("custom_link"===(null==I?void 0:I.value)&&M?M.includes("https")?M:`https://${M}`:M,I.value)}),100)}),[F]),o((()=>{!G&&I&&E.updatedValue&&setTimeout((()=>{me("custom_link"===(null==I?void 0:I.value)&&E.updatedValue?E.updatedValue.includes("https")?E.updatedValue:`https://${E.updatedValue}`:E.updatedValue,I.value),q(!0)}),100)}),[I]),e(y,Object.assign({channel:K,focused:H,onMouseEnter:()=>U(!0),onMouseLeave:()=>U(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(g,Object.assign({style:{color:J&&!I?j.content.negative:j.content.primary}},{children:[null===(L=E.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:w?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==I?void 0:I.label)?"space-between":"flex-end"}},{children:[t(O,Object.assign({numberOfLines:1},{children:oe===b.CHATBOT?null==I?void 0:I.value:p(null!==(N=null==I?void 0:I.label)&&void 0!==N?N:"",20,!0)})),t(l,{onClick:()=>{Z(!Y)},width:24,height:24,color:j.content.primary})]})):t(c,{disabled:ue,options:R,isSearchable:!1,onSelect:re,defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),("custom_text"===(null==I?void 0:I.value)||"custom_link"===(null==I?void 0:I.value))&&t(r,{labelText:"custom_text"===(null==I?void 0:I.value)?"Custom text value":"custom_link"===(null==I?void 0:I.value)?"Custom URL value":"",id:`variable-value-${null==I?void 0:I.value}-${S}`,value:M,errorMessage:J?M&&0!==M.trim().length?"custom_link"!==I.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${M.trim()}`)&&0!==M.trim().length?"custom_link"!==I.value&&M.length>30?"Length cannot be more than 30":"BUTTONS"===B&&"custom_link"!==I.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==I?void 0:I.value)?2e3:"BUTTONS"===B?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===I.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{pe(I.value,e)}}),"static_expiry"===(null==I?void 0:I.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[ue&&t(_,{onClick:e=>e.preventDefault()}),t(u,{placement:"auto",time:a(M?new Date(M):new Date,"hh:mm a"),date:M?new Date(M):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{pe("static_expiry",e.toISOString())}})]})),Y&&t(d,{zIndex:2e3,data:null!=C?C:[],showVariable:Y,setShowVariable:Z,placeholder:"Add a variable",customTrigger:e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?re({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"static_expiry"}):re({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{y as Container,A as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.433-beta.16",
3
+ "version": "0.0.433-beta.17",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",