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