@bikdotai/bik-component-library 0.0.400-beta.6 → 0.0.400-beta.7
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/VariableConnector.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/package.json +1 -1
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===d.CHANNEL_TYPE.EMAIL?v.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,h={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"};exports.Container=j,exports.default=a=>{let{onFocus:g,variable:O,index:E,showVariableModal:_,variableList:T,setShowDiscountCheckBox:y,componentType:A,CTAoptions:f}=a;var V,N;const[C,P]=t.useState(!1),[k,L]=t.useState(""),[S,H]=t.useState([]),[w,B]=t.useState(),[Y,M]=t.useState(!1),[q,R]=t.useState(!1),{device:W,channel:D,isError:I,originalVariableList:U,template:$,templateSelectionTriggered:z,setTemplate:Z,setDisplayContent:F,setOriginalVariableList:G,globalNormalizedPlaceholders:J,enabledCustomText:K,pod:Q}=m.useTemplateModalContext();function X(e,l){var t,a,n;const o=e;L(""),B(o),console.log("vj: handleoptionselect",e),D===d.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(ee(null!==(t=o.value)&&void 0!==t?t:"","string"),null==le||le(null!==(a=O.index)&&void 0!==a?a:0,o.value,!0)):(null==le||le(null!==(n=O.index)&&void 0!==n?n:0,O.variableName,!0,"custom_text"),ee("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?ee(o.value,"url"===o.bikPlaceholderType?"link":"string"):(L(""),ee("",o.value))}function ee(e,l){var t,a,n,o;console.log("vj: updatevarlist",{updateValue:e,type:l});const i="custom_link"===l?"link":"custom_text"===l?"string":l;if(D!==d.CHANNEL_TYPE.WHATSAPP){const a=b.getVariableNameForEmailByIndex(E+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===W?"template_html_mobile":"template_html_desktop"),o=D===d.CHANNEL_TYPE.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:O.variableName);const s=U.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l));null==G||G(s)}if(D===d.CHANNEL_TYPE.WHATSAPP){const l=U;let t=l.body,s=l.header,u=l.buttons;"BODY"===A?t=null===(a=l.body)||void 0===a?void 0:a.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"HEADER"===A?s=null===(n=l.header)||void 0===n?void 0:n.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"BUTTONS"===A&&(u=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,t)=>(console.log("vj: check",{normalizedType:i,ind:t,index:E,currVar:l}),t===E?Object.assign(Object.assign({},l),{type:r.BUTTON_TYPE.URL,buttonVariable:e}):l)))),console.log("vj: buttonvariablelist",u),null==G||G((e=>Object.assign(Object.assign({},e),{header:s,body:t,buttons:u})))}}function le(e,l,t,a){var n,o,i,s;const u=Object.assign({},$);console.log("vj: update component",{index:e,newValue:l,updateMapping:t,type:a});const d=null===(n=null==u?void 0:u.components)||void 0===n?void 0:n.map((t=>{var a,n,o,i,s,u,d,r,c,p;const v=Object.assign({},t);if("BODY"===t.type&&"BODY"===A){if(null===(n=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const t=[...null!==(s=null===(i=null===(o=v.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},v.example),{body_text:[t]});return Object.assign(Object.assign({},v),{example:a})}}else if("HEADER"===t.type&&"HEADER"===A){if(null===(u=t.example)||void 0===u?void 0:u.header_text){const t=[...null!==(r=null===(d=v.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},v.example),{header_text:t});return Object.assign(Object.assign({},v),{example:a})}}else if("BUTTONS"===t.type&&"BUTTONS"===A&&(console.log("vj: updatecomponent in buttons",{updateComponent:v}),null===(p=null===(c=t.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example)){const a=t.buttons.map(((t,a)=>a===e?Object.assign(Object.assign({},t),{example:[l]}):t));return console.log("vj: updating button",{updateComponent:v,updateComponentButtons:a}),Object.assign(Object.assign({},v),{buttons:a})}return t}));u.components=d,t&&("BODY"===A&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((t,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:l:t))}):"HEADER"===A&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((t,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:l:t))}):"BUTTONS"===A&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((t,n)=>(console.log("vj: button type",{button:t,type:a}),e===n?"custom_link"===a?"((customPlaceholderName))":l:t)))}))),null==Z||Z(Object.assign({},u))}return console.log("vj: variableconnector",{variable:O,originalVariableList:U,index:E}),t.useEffect((()=>{C&&(null==g||g())}),[C]),t.useEffect((()=>{!function(){var e,l,t,a,n;const o="mobile"===W?"template_html_mobile":"template_html_desktop",i=document.getElementById(o),s=(null!==(a=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(n=null==i?void 0:i.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);D===d.CHANNEL_TYPE.EMAIL&&(null==F||F(s))}()}),[z]),t.useEffect((()=>{var e;const l=[];let t=[];if(D!==d.CHANNEL_TYPE.MESSAGE||K){"link"===(null==O?void 0:O.type)?(l.push({label:"",options:[h,x]}),console.log("vj: variable type is link"),B(h)):(console.log("vj: variable type is somethingelse"),l.push({label:"",options:[h,x]}),B(x));const e=null!=J?J:[];H([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:p.default.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e],console.log("vj: alloptions",t)}else{const e=null!=J?J:[];H([{label:"",options:[x,h]},...e]),t=[{label:"",options:[x,h]},...e]}if((D===d.CHANNEL_TYPE.WHATSAPP||D===d.CHANNEL_TYPE.EMAIL||D===d.CHANNEL_TYPE.MESSAGE)&&O.updatedValue)if(u.placeHolderNamePattern.test(O.updatedValue)&&D===d.CHANNEL_TYPE.WHATSAPP||O.updatedValue.startsWith("{{")&&D!==d.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){var a;let n={label:"",value:""};const o=t===d.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");_?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===o.trim()&&(n=e)}))}));return n}(O,t,D);console.log("vj: preselected option",e),e.value&&B(e)}else(null===(e=O.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(B(h),L(O.updatedValue.split("https://")[1])):(B(x),L(O.updatedValue))}),[]),t.useEffect((()=>{W&&w&&k&&setTimeout((()=>{ee("custom_link"===(null==w?void 0:w.value)&&k?k.includes("https")?k:`https://${k}`:k,w.value)}),100)}),[W]),t.useEffect((()=>{console.log("vj:",{renderFirstTime:q,selectedOption:w,variable:O,enteredVariableValue:k}),!q&&w&&O.updatedValue&&setTimeout((()=>{const e="custom_link"===(null==w?void 0:w.value)&&O.updatedValue?O.updatedValue.includes("https")?O.updatedValue:`https://${O.updatedValue}`:O.updatedValue;console.log("vj: inputvalue",e),ee(e,w.value),R(!0)}),100)}),[w]),e.jsxs(j,Object.assign({channel:D,focused:C,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(c.BodySecondary,Object.assign({style:{color:I&&!w?v.COLORS.content.negative:v.COLORS.content.primary}},{children:[null===(V=O.variableName)||void 0===V?void 0:V.replace("{{","").replace("}}","")," ","link"===(null==O?void 0:O.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:_?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==w?void 0:w.label)?"space-between":"flex-end"}},{children:[e.jsx(c.BodyPrimary,{children:s.truncate(null!==(N=null==w?void 0:w.label)&&void 0!==N?N:"",20,!0)}),e.jsx(l.default,{onClick:()=>{M(!Y)},width:24,height:24,color:v.COLORS.content.primary})]})):e.jsx(o.Dropdown,{options:S,isSearchable:!1,onSelect:X,defaultOptions:w?[Object.assign(Object.assign({},w),{selected:!0})]:[]})})),("custom_text"===(null==w?void 0:w.value)||"custom_link"===(null==w?void 0:w.value))&&e.jsx(i.Input,{labelText:"custom_text"===(null==w?void 0:w.value)?"Custom text value":"custom_link"===(null==w?void 0:w.value)?"Custom URL value":"",id:`variable-value-${null==w?void 0:w.value}-${E}`,value:k,errorMessage:I?k&&0!==k.trim().length?"custom_link"!==w.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${k.trim()}`)&&0!==k.trim().length?"custom_link"!==w.value&&k.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==w?void 0:w.value)?void 0:30,prefixText:"custom_link"===(null==w?void 0:w.value)?"https://":"",placeholder:"link"===O.type||"custom_link"===w.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;L(l);const a="custom_link"===(null==w?void 0:w.value)&&l?l.includes("https")?l:`https://${l}`:l;ee(a,e),D===d.CHANNEL_TYPE.WHATSAPP&&(console.log("vj: handlecustominput",{variable:O}),null==le||le(null!==(t=O.index)&&void 0!==t?t:0,a,"custom_link"===e,e))}(w.value,e)}}),Y&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=T?T:[],showVariable:Y,setShowVariable:M,placeholder:"Add a variable",customTrigger:e=>{if(console.log("vj: customtrigger",e),null==y||y(!1),"{{custom.url}}"===e.actualValue)X({label:e.displayName,selected:!0,value:"custom_link"});else if("{{custom.text}}"==e.actualValue)X({label:e.displayName,selected:!0,value:"custom_text"});else if(Q===r.POD.CHATBOT&&"BUTTONS"===A){const l=null==f?void 0:f.filter((l=>l.placeHolder===e.actualValue));console.log("vj: CTAoptions",{CTAoptions:f,isVariableInCtaOptions:l}),l&&l.length>0?X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"}):X({label:"Custom URL",selected:!0,value:"custom_link"})}else X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
7
|
+
`,h={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"};exports.Container=j,exports.default=a=>{let{onFocus:g,variable:O,index:T,showVariableModal:E,variableList:_,setShowDiscountCheckBox:y,componentType:A,CTAoptions:f}=a;var N,V;const[C,P]=t.useState(!1),[k,L]=t.useState(""),[S,H]=t.useState([]),[B,w]=t.useState(),[Y,M]=t.useState(!1),[q,R]=t.useState(!1),{device:D,channel:U,isError:W,originalVariableList:I,template:$,templateSelectionTriggered:z,setTemplate:Z,setDisplayContent:F,setOriginalVariableList:G,globalNormalizedPlaceholders:J,enabledCustomText:K,pod:Q}=m.useTemplateModalContext();function X(e,l){var t,a,n;const o=e;L(""),w(o),console.log("vj: handleoptionselect",e),U===d.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(ee(null!==(t=o.value)&&void 0!==t?t:"","string"),null==le||le(null!==(a=O.index)&&void 0!==a?a:0,o.value,!0)):(null==le||le(null!==(n=O.index)&&void 0!==n?n:0,O.variableName,!0,"custom_text"),ee("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?ee(o.value,"url"===o.bikPlaceholderType?"link":"string"):(L(""),ee("",o.value))}function ee(e,l){var t,a,n,o;console.log("vj: updatevarlist",{updateValue:e,type:l});const i="custom_link"===l?"link":"custom_text"===l?"string":l;if(U!==d.CHANNEL_TYPE.WHATSAPP){const a=b.getVariableNameForEmailByIndex(T+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===D?"template_html_mobile":"template_html_desktop"),o=U===d.CHANNEL_TYPE.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:O.variableName);const s=I.map(((l,t)=>t===T?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l));null==G||G(s)}if(U===d.CHANNEL_TYPE.WHATSAPP){const l=I;let t=l.body,s=l.header,u=l.buttons;"BODY"===A?t=null===(a=l.body)||void 0===a?void 0:a.map(((l,t)=>t===T?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"HEADER"===A?s=null===(n=l.header)||void 0===n?void 0:n.map(((l,t)=>t===T?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"BUTTONS"===A&&(u=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,t)=>(console.log("vj: check",{normalizedType:i,ind:t,index:T,currVar:l}),t===T?Object.assign(Object.assign({},l),{type:r.BUTTON_TYPE.URL,buttonVariable:e}):l)))),console.log("vj: buttonvariablelist",u),null==G||G((e=>Object.assign(Object.assign({},e),{header:s,body:t,buttons:u})))}}function le(e,l,t,a){var n,o,i,s;const u=Object.assign({},$);console.log("vj: update component",{index:e,newValue:l,updateMapping:t,type:a});const d=null===(n=null==u?void 0:u.components)||void 0===n?void 0:n.map((t=>{var a,n,o,i,s,u,d,r,c,p;const v=Object.assign({},t);if("BODY"===t.type&&"BODY"===A){if(null===(n=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const t=[...null!==(s=null===(i=null===(o=v.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},v.example),{body_text:[t]});return Object.assign(Object.assign({},v),{example:a})}}else if("HEADER"===t.type&&"HEADER"===A){if(null===(u=t.example)||void 0===u?void 0:u.header_text){const t=[...null!==(r=null===(d=v.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},v.example),{header_text:t});return Object.assign(Object.assign({},v),{example:a})}}else if("BUTTONS"===t.type&&"BUTTONS"===A&&(console.log("vj: updatecomponent in buttons",{updateComponent:v}),null===(p=null===(c=t.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example)){const a=t.buttons.map(((t,a)=>a===e?Object.assign(Object.assign({},t),{example:[l]}):t));return console.log("vj: updating button",{updateComponent:v,updateComponentButtons:a}),Object.assign(Object.assign({},v),{buttons:a})}return t}));u.components=d,t&&("BODY"===A&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((t,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:l:t))}):"HEADER"===A&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((t,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:l:t))}):"BUTTONS"===A&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((t,n)=>(console.log("vj: button type",{button:t,type:a}),e===n?"custom_link"===a?"((customPlaceholderName))":l:t)))}))),null==Z||Z(Object.assign({},u))}return console.log("vj: variableconnector",{variable:O,originalVariableList:I,index:T}),t.useEffect((()=>{C&&(null==g||g())}),[C]),t.useEffect((()=>{!function(){var e,l,t,a,n;const o="mobile"===D?"template_html_mobile":"template_html_desktop",i=document.getElementById(o),s=(null!==(a=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(n=null==i?void 0:i.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);U===d.CHANNEL_TYPE.EMAIL&&(null==F||F(s))}()}),[z]),t.useEffect((()=>{var e;const l=[];let t=[];if(U!==d.CHANNEL_TYPE.MESSAGE||K){"link"===(null==O?void 0:O.type)?(l.push({label:"",options:[h,x]}),console.log("vj: variable type is link"),w(h)):(console.log("vj: variable type is somethingelse"),l.push({label:"",options:[h,x]}),w(x));const e=null!=J?J:[];H([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:p.default.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e],console.log("vj: alloptions",t)}else{const e=null!=J?J:[];H([{label:"",options:[x,h]},...e]),t=[{label:"",options:[x,h]},...e]}if((U===d.CHANNEL_TYPE.WHATSAPP||U===d.CHANNEL_TYPE.EMAIL||U===d.CHANNEL_TYPE.MESSAGE)&&O.updatedValue)if(u.placeHolderNamePattern.test(O.updatedValue)&&U===d.CHANNEL_TYPE.WHATSAPP||O.updatedValue.startsWith("{{")&&U!==d.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){var a;let n={label:"",value:""};const o=t===d.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(E){let l=e.updatedValue;if(console.log("vj: variableLabel",l),Q===r.POD.CHATBOT&&"BUTTONS"===A){const t=null==f?void 0:f.filter((l=>l.placeHolder===e.updatedValue));t&&t.length>0&&(l=t[0].label)}n={label:l?l.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===o.trim()&&(n=e)}))}));return n}(O,t,U);console.log("vj: preselected option",e),e.value&&w(e)}else(null===(e=O.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(w(h),L(O.updatedValue.split("https://")[1])):(w(x),L(O.updatedValue))}),[]),t.useEffect((()=>{D&&B&&k&&setTimeout((()=>{ee("custom_link"===(null==B?void 0:B.value)&&k?k.includes("https")?k:`https://${k}`:k,B.value)}),100)}),[D]),t.useEffect((()=>{console.log("vj:",{renderFirstTime:q,selectedOption:B,variable:O,enteredVariableValue:k}),!q&&B&&O.updatedValue&&setTimeout((()=>{const e="custom_link"===(null==B?void 0:B.value)&&O.updatedValue?O.updatedValue.includes("https")?O.updatedValue:`https://${O.updatedValue}`:O.updatedValue;console.log("vj: inputvalue",e),ee(e,B.value),R(!0)}),100)}),[B]),e.jsxs(j,Object.assign({channel:U,focused:C,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(c.BodySecondary,Object.assign({style:{color:W&&!B?v.COLORS.content.negative:v.COLORS.content.primary}},{children:[null===(N=O.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==O?void 0:O.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:E?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==B?void 0:B.label)?"space-between":"flex-end"}},{children:[e.jsx(c.BodyPrimary,{children:s.truncate(null!==(V=null==B?void 0:B.label)&&void 0!==V?V:"",20,!0)}),e.jsx(l.default,{onClick:()=>{M(!Y)},width:24,height:24,color:v.COLORS.content.primary})]})):e.jsx(o.Dropdown,{options:S,isSearchable:!1,onSelect:X,defaultOptions:B?[Object.assign(Object.assign({},B),{selected:!0})]:[]})})),("custom_text"===(null==B?void 0:B.value)||"custom_link"===(null==B?void 0:B.value))&&e.jsx(i.Input,{labelText:"custom_text"===(null==B?void 0:B.value)?"Custom text value":"custom_link"===(null==B?void 0:B.value)?"Custom URL value":"",id:`variable-value-${null==B?void 0:B.value}-${T}`,value:k,errorMessage:W?k&&0!==k.trim().length?"custom_link"!==B.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${k.trim()}`)&&0!==k.trim().length?"custom_link"!==B.value&&k.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==B?void 0:B.value)?void 0:30,prefixText:"custom_link"===(null==B?void 0:B.value)?"https://":"",placeholder:"link"===O.type||"custom_link"===B.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;L(l);const a="custom_link"===(null==B?void 0:B.value)&&l?l.includes("https")?l:`https://${l}`:l;ee(a,e),U===d.CHANNEL_TYPE.WHATSAPP&&(console.log("vj: handlecustominput",{variable:O}),null==le||le(null!==(t=O.index)&&void 0!==t?t:0,a,"custom_link"===e,e))}(B.value,e)}}),Y&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=_?_:[],showVariable:Y,setShowVariable:M,placeholder:"Add a variable",customTrigger:e=>{if(console.log("vj: customtrigger",e),null==y||y(!1),"{{custom.url}}"===e.actualValue)X({label:e.displayName,selected:!0,value:"custom_link"});else if("{{custom.text}}"==e.actualValue)X({label:e.displayName,selected:!0,value:"custom_text"});else if(Q===r.POD.CHATBOT&&"BUTTONS"===A){const l=null==f?void 0:f.filter((l=>l.placeHolder===e.actualValue));console.log("vj: CTAoptions",{CTAoptions:f,isVariableInCtaOptions:l}),l&&l.length>0?X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"}):X({label:"Custom URL",selected:!0,value:"custom_link"})}else X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),s=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),n=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),u=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=c=>{let{button:b,updateSelectedURLTemplateBtn:m,updateSelectedQRBTemplateBtn:j,originalVariableList:v,CTAoptions:x,QRBoptions:O,variableList:g}=c;var y,f,h,T;const[L,U]=t.useState(""),[R,V]=t.useState(),{setOriginalVariableList:q,isError:w,disableEditVariable:B,pod:C}=d.useTemplateModalContext();function S(e){U(e);const t=[Object.assign(Object.assign({},v.buttons[0]),{type:n.BUTTON_TYPE.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==q||q((e=>Object.assign(Object.assign({},e),{body:[...v.body],buttons:[...t]}))),null==m||m(`https://${e}`,"custom")}return t.useEffect((()=>{var e;if(b.buttonVariable&&s.editableVarPattern.test(b.buttonVariable))V(i.CUSTOM_URL_NAME),U((null===(e=b.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===b.type?x:O;e="URL"===b.type?t.findIndex((e=>e.placeHolder===b.buttonVariable)):t.findIndex((e=>e.label===b.flowName)),e>-1&&V(t[e])}}),[]),C!==n.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[b.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:B,options:"URL"===b.type?x:O,isSearchable:!1,onSelect:function(e,t){const l=e;V(l);const a=("URL"===b.type?x:O).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===b.type?(e=[Object.assign(Object.assign({},v.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==m||m({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=v.buttons.map(((e,t)=>t===b.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==j||j({flowName:l.label,flowId:l.value},"placeholder",b.index)),null==q||q((t=>Object.assign(Object.assign({},t),{body:[...v.body],buttons:[...e]})))}else S("")},defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),"custom_link"===(null==R?void 0:R.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:B?"disabled":"none",errorMessage:w?L?u.validateIsUrl(L)?"":"Enter valid URL":"Required field":"",value:L,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:S})}))
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),s=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),n=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),u=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=c=>{let{button:b,updateSelectedURLTemplateBtn:m,updateSelectedQRBTemplateBtn:j,originalVariableList:v,CTAoptions:x,QRBoptions:O,variableList:g}=c;var y,f,h,T;const[L,U]=t.useState(""),[R,V]=t.useState(),{setOriginalVariableList:q,isError:w,disableEditVariable:B,pod:C}=d.useTemplateModalContext();function S(e){U(e);const t=[Object.assign(Object.assign({},v.buttons[0]),{type:n.BUTTON_TYPE.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==q||q((e=>Object.assign(Object.assign({},e),{body:[...v.body],buttons:[...t]}))),null==m||m(`https://${e}`,"custom")}return t.useEffect((()=>{var e;if(b.buttonVariable&&s.editableVarPattern.test(b.buttonVariable))V(i.CUSTOM_URL_NAME),U((null===(e=b.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===b.type?x:O;e="URL"===b.type?t.findIndex((e=>e.placeHolder===b.buttonVariable)):t.findIndex((e=>e.label===b.flowName)),e>-1&&V(t[e])}}),[]),C!==n.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[b.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:B,options:"URL"===b.type?x:O,isSearchable:!1,onSelect:function(e,t){const l=e;V(l);const a=("URL"===b.type?x:O).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===b.type?(e=[Object.assign(Object.assign({},v.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==m||m({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=v.buttons.map(((e,t)=>t===b.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==j||j({flowName:l.label,flowId:l.value},"placeholder",b.index)),null==q||q((t=>Object.assign(Object.assign({},t),{body:[...v.body],buttons:[...e]})))}else S("")},defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),"custom_link"===(null==R?void 0:R.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:B?"disabled":"none",errorMessage:w?L?u.validateIsUrl(L)?"":"Enter valid URL":"Required field":"",value:L,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:S})}))]}):e.jsx(p.default,{index:0,variable:{variableName:null!==(y=b.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===b.buttonVariable?`${null===(f=b.example)||void 0===f?void 0:f[0]}`:null!==(h=b.buttonVariable)&&void 0!==h?h:"",type:"link",isEditableVariable:!0,index:null!==(T=b.index)&&void 0!==T?T:0},showVariableModal:!0,componentType:"BUTTONS",variableList:g,CTAoptions:x})};
|
|
@@ -4,4 +4,4 @@ import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===r.EMAIL?h.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,y={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},_=n=>{let{onFocus:_,variable:T,index:V,showVariableModal:k,variableList:A,setShowDiscountCheckBox:E,componentType:S,CTAoptions:C}=n;var P,w;const[L,B]=o(!1),[H,M]=o(""),[N,W]=o([]),[R,U]=o(),[$,D]=o(!1),[I,z]=o(!1),{device:Y,channel:Z,isError:F,originalVariableList:G,template:q,templateSelectionTriggered:J,setTemplate:K,setDisplayContent:Q,setOriginalVariableList:X,globalNormalizedPlaceholders:ee,enabledCustomText:le,pod:te}=j();function oe(e,l){var t,o,a;const n=e;M(""),U(n),console.log("vj: handleoptionselect",e),Z===r.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(ae(null!==(t=n.value)&&void 0!==t?t:"","string"),null==ne||ne(null!==(o=T.index)&&void 0!==o?o:0,n.value,!0)):(null==ne||ne(null!==(a=T.index)&&void 0!==a?a:0,T.variableName,!0,"custom_text"),ae("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ae(n.value,"url"===n.bikPlaceholderType?"link":"string"):(M(""),ae("",n.value))}function ae(e,l){var t,o,a,n;console.log("vj: updatevarlist",{updateValue:e,type:l});const i="custom_link"===l?"link":"custom_text"===l?"string":l;if(Z!==r.WHATSAPP){const o=x(V+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===Y?"template_html_mobile":"template_html_desktop"),n=Z===r.EMAIL?null===(t=null==a?void 0:a.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o);n&&(n.textContent="custom_text"!==l&&"custom_link"!==l||e?e:T.variableName);const s=G.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l));null==X||X(s)}if(Z===r.WHATSAPP){const l=G;let t=l.body,s=l.header,u=l.buttons;"BODY"===S?t=null===(o=l.body)||void 0===o?void 0:o.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"HEADER"===S?s=null===(a=l.header)||void 0===a?void 0:a.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"BUTTONS"===S&&(u=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,t)=>(console.log("vj: check",{normalizedType:i,ind:t,index:V,currVar:l}),t===V?Object.assign(Object.assign({},l),{type:m.URL,buttonVariable:e}):l)))),console.log("vj: buttonvariablelist",u),null==X||X((e=>Object.assign(Object.assign({},e),{header:s,body:t,buttons:u})))}}function ne(e,l,t,o){var a,n,i,s;const u=Object.assign({},q);console.log("vj: update component",{index:e,newValue:l,updateMapping:t,type:o});const d=null===(a=null==u?void 0:u.components)||void 0===a?void 0:a.map((t=>{var o,a,n,i,s,u,d,c,r,p;const m=Object.assign({},t);if("BODY"===t.type&&"BODY"===S){if(null===(a=null===(o=t.example)||void 0===o?void 0:o.body_text)||void 0===a?void 0:a[0]){const t=[...null!==(s=null===(i=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},m.example),{body_text:[t]});return Object.assign(Object.assign({},m),{example:o})}}else if("HEADER"===t.type&&"HEADER"===S){if(null===(u=t.example)||void 0===u?void 0:u.header_text){const t=[...null!==(c=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},m.example),{header_text:t});return Object.assign(Object.assign({},m),{example:o})}}else if("BUTTONS"===t.type&&"BUTTONS"===S&&(console.log("vj: updatecomponent in buttons",{updateComponent:m}),null===(p=null===(r=t.buttons)||void 0===r?void 0:r[e])||void 0===p?void 0:p.example)){const o=t.buttons.map(((t,o)=>o===e?Object.assign(Object.assign({},t),{example:[l]}):t));return console.log("vj: updating button",{updateComponent:m,updateComponentButtons:o}),Object.assign(Object.assign({},m),{buttons:o})}return t}));u.components=d,t&&("BODY"===S&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((t,a)=>e===a?"custom_text"===o?`((editableVariable${a+10}))`:l:t))}):"HEADER"===S&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((t,a)=>e===a?"custom_text"===o?`((editableVariable${a+20}))`:l:t))}):"BUTTONS"===S&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((t,a)=>(console.log("vj: button type",{button:t,type:o}),e===a?"custom_link"===o?"((customPlaceholderName))":l:t)))}))),null==K||K(Object.assign({},u))}return console.log("vj: variableconnector",{variable:T,originalVariableList:G,index:V}),a((()=>{L&&(null==_||_())}),[L]),a((()=>{!function(){var e,l,t,o,a;const n="mobile"===Y?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),s=(null!==(o=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==o?o:"")+(null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);Z===r.EMAIL&&(null==Q||Q(s))}()}),[J]),a((()=>{var e;const l=[];let t=[];if(Z!==r.MESSAGE||le){"link"===(null==T?void 0:T.type)?(l.push({label:"",options:[y,f]}),console.log("vj: variable type is link"),U(y)):(console.log("vj: variable type is somethingelse"),l.push({label:"",options:[y,f]}),U(f));const e=null!=ee?ee:[];W([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:g.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e],console.log("vj: alloptions",t)}else{const e=null!=ee?ee:[];W([{label:"",options:[f,y]},...e]),t=[{label:"",options:[f,y]},...e]}if((Z===r.WHATSAPP||Z===r.EMAIL||Z===r.MESSAGE)&&T.updatedValue)if(c.test(T.updatedValue)&&Z===r.WHATSAPP||T.updatedValue.startsWith("{{")&&Z!==r.WHATSAPP){const e=function(e,l,t){var o;let a={label:"",value:""};const n=t===r.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");k?a={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(o=e.updatedValue)&&void 0!==o?o:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))}));return a}(T,t,Z);console.log("vj: preselected option",e),e.value&&U(e)}else(null===(e=T.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(U(y),M(T.updatedValue.split("https://")[1])):(U(f),M(T.updatedValue))}),[]),a((()=>{Y&&R&&H&&setTimeout((()=>{ae("custom_link"===(null==R?void 0:R.value)&&H?H.includes("https")?H:`https://${H}`:H,R.value)}),100)}),[Y]),a((()=>{console.log("vj:",{renderFirstTime:I,selectedOption:R,variable:T,enteredVariableValue:H}),!I&&R&&T.updatedValue&&setTimeout((()=>{const e="custom_link"===(null==R?void 0:R.value)&&T.updatedValue?T.updatedValue.includes("https")?T.updatedValue:`https://${T.updatedValue}`:T.updatedValue;console.log("vj: inputvalue",e),ae(e,R.value),z(!0)}),100)}),[R]),e(O,Object.assign({channel:Z,focused:L,onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(v,Object.assign({style:{color:F&&!R?h.content.negative:h.content.primary}},{children:[null===(P=T.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==T?void 0:T.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[l(b,{children:d(null!==(w=null==R?void 0:R.label)&&void 0!==w?w:"",20,!0)}),l(t,{onClick:()=>{D(!$)},width:24,height:24,color:h.content.primary})]})):l(s,{options:N,isSearchable:!1,onSelect:oe,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&l(u,{labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${V}`,value:H,errorMessage:F?H&&0!==H.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==R.value&&H.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?void 0:30,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===T.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;M(l);const o="custom_link"===(null==R?void 0:R.value)&&l?l.includes("https")?l:`https://${l}`:l;ae(o,e),Z===r.WHATSAPP&&(console.log("vj: handlecustominput",{variable:T}),null==ne||ne(null!==(t=T.index)&&void 0!==t?t:0,o,"custom_link"===e,e))}(R.value,e)}}),$&&l(i,{zIndex:2e3,data:null!=A?A:[],showVariable:$,setShowVariable:D,placeholder:"Add a variable",customTrigger:e=>{if(console.log("vj: customtrigger",e),null==E||E(!1),"{{custom.url}}"===e.actualValue)oe({label:e.displayName,selected:!0,value:"custom_link"});else if("{{custom.text}}"==e.actualValue)oe({label:e.displayName,selected:!0,value:"custom_text"});else if(te===p.CHATBOT&&"BUTTONS"===S){const l=null==C?void 0:C.filter((l=>l.placeHolder===e.actualValue));console.log("vj: CTAoptions",{CTAoptions:C,isVariableInCtaOptions:l}),l&&l.length>0?oe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"}):oe({label:"Custom URL",selected:!0,value:"custom_link"})}else oe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{O as Container,_ as default};
|
|
7
|
+
`,y={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},T=n=>{let{onFocus:T,variable:_,index:V,showVariableModal:k,variableList:A,setShowDiscountCheckBox:E,componentType:S,CTAoptions:C}=n;var P,w;const[L,B]=o(!1),[H,N]=o(""),[M,W]=o([]),[U,R]=o(),[$,D]=o(!1),[I,z]=o(!1),{device:Y,channel:Z,isError:F,originalVariableList:G,template:q,templateSelectionTriggered:J,setTemplate:K,setDisplayContent:Q,setOriginalVariableList:X,globalNormalizedPlaceholders:ee,enabledCustomText:le,pod:te}=j();function oe(e,l){var t,o,a;const n=e;N(""),R(n),console.log("vj: handleoptionselect",e),Z===r.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(ae(null!==(t=n.value)&&void 0!==t?t:"","string"),null==ne||ne(null!==(o=_.index)&&void 0!==o?o:0,n.value,!0)):(null==ne||ne(null!==(a=_.index)&&void 0!==a?a:0,_.variableName,!0,"custom_text"),ae("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ae(n.value,"url"===n.bikPlaceholderType?"link":"string"):(N(""),ae("",n.value))}function ae(e,l){var t,o,a,n;console.log("vj: updatevarlist",{updateValue:e,type:l});const i="custom_link"===l?"link":"custom_text"===l?"string":l;if(Z!==r.WHATSAPP){const o=x(V+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===Y?"template_html_mobile":"template_html_desktop"),n=Z===r.EMAIL?null===(t=null==a?void 0:a.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o);n&&(n.textContent="custom_text"!==l&&"custom_link"!==l||e?e:_.variableName);const s=G.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l));null==X||X(s)}if(Z===r.WHATSAPP){const l=G;let t=l.body,s=l.header,u=l.buttons;"BODY"===S?t=null===(o=l.body)||void 0===o?void 0:o.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"HEADER"===S?s=null===(a=l.header)||void 0===a?void 0:a.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"BUTTONS"===S&&(u=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,t)=>(console.log("vj: check",{normalizedType:i,ind:t,index:V,currVar:l}),t===V?Object.assign(Object.assign({},l),{type:m.URL,buttonVariable:e}):l)))),console.log("vj: buttonvariablelist",u),null==X||X((e=>Object.assign(Object.assign({},e),{header:s,body:t,buttons:u})))}}function ne(e,l,t,o){var a,n,i,s;const u=Object.assign({},q);console.log("vj: update component",{index:e,newValue:l,updateMapping:t,type:o});const d=null===(a=null==u?void 0:u.components)||void 0===a?void 0:a.map((t=>{var o,a,n,i,s,u,d,c,r,p;const m=Object.assign({},t);if("BODY"===t.type&&"BODY"===S){if(null===(a=null===(o=t.example)||void 0===o?void 0:o.body_text)||void 0===a?void 0:a[0]){const t=[...null!==(s=null===(i=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},m.example),{body_text:[t]});return Object.assign(Object.assign({},m),{example:o})}}else if("HEADER"===t.type&&"HEADER"===S){if(null===(u=t.example)||void 0===u?void 0:u.header_text){const t=[...null!==(c=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},m.example),{header_text:t});return Object.assign(Object.assign({},m),{example:o})}}else if("BUTTONS"===t.type&&"BUTTONS"===S&&(console.log("vj: updatecomponent in buttons",{updateComponent:m}),null===(p=null===(r=t.buttons)||void 0===r?void 0:r[e])||void 0===p?void 0:p.example)){const o=t.buttons.map(((t,o)=>o===e?Object.assign(Object.assign({},t),{example:[l]}):t));return console.log("vj: updating button",{updateComponent:m,updateComponentButtons:o}),Object.assign(Object.assign({},m),{buttons:o})}return t}));u.components=d,t&&("BODY"===S&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((t,a)=>e===a?"custom_text"===o?`((editableVariable${a+10}))`:l:t))}):"HEADER"===S&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((t,a)=>e===a?"custom_text"===o?`((editableVariable${a+20}))`:l:t))}):"BUTTONS"===S&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((t,a)=>(console.log("vj: button type",{button:t,type:o}),e===a?"custom_link"===o?"((customPlaceholderName))":l:t)))}))),null==K||K(Object.assign({},u))}return console.log("vj: variableconnector",{variable:_,originalVariableList:G,index:V}),a((()=>{L&&(null==T||T())}),[L]),a((()=>{!function(){var e,l,t,o,a;const n="mobile"===Y?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),s=(null!==(o=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==o?o:"")+(null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);Z===r.EMAIL&&(null==Q||Q(s))}()}),[J]),a((()=>{var e;const l=[];let t=[];if(Z!==r.MESSAGE||le){"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[y,f]}),console.log("vj: variable type is link"),R(y)):(console.log("vj: variable type is somethingelse"),l.push({label:"",options:[y,f]}),R(f));const e=null!=ee?ee:[];W([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:g.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e],console.log("vj: alloptions",t)}else{const e=null!=ee?ee:[];W([{label:"",options:[f,y]},...e]),t=[{label:"",options:[f,y]},...e]}if((Z===r.WHATSAPP||Z===r.EMAIL||Z===r.MESSAGE)&&_.updatedValue)if(c.test(_.updatedValue)&&Z===r.WHATSAPP||_.updatedValue.startsWith("{{")&&Z!==r.WHATSAPP){const e=function(e,l,t){var o;let a={label:"",value:""};const n=t===r.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(k){let l=e.updatedValue;if(console.log("vj: variableLabel",l),te===p.CHATBOT&&"BUTTONS"===S){const t=null==C?void 0:C.filter((l=>l.placeHolder===e.updatedValue));t&&t.length>0&&(l=t[0].label)}a={label:l?l.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(o=e.updatedValue)&&void 0!==o?o:""}}else l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))}));return a}(_,t,Z);console.log("vj: preselected option",e),e.value&&R(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(R(y),N(_.updatedValue.split("https://")[1])):(R(f),N(_.updatedValue))}),[]),a((()=>{Y&&U&&H&&setTimeout((()=>{ae("custom_link"===(null==U?void 0:U.value)&&H?H.includes("https")?H:`https://${H}`:H,U.value)}),100)}),[Y]),a((()=>{console.log("vj:",{renderFirstTime:I,selectedOption:U,variable:_,enteredVariableValue:H}),!I&&U&&_.updatedValue&&setTimeout((()=>{const e="custom_link"===(null==U?void 0:U.value)&&_.updatedValue?_.updatedValue.includes("https")?_.updatedValue:`https://${_.updatedValue}`:_.updatedValue;console.log("vj: inputvalue",e),ae(e,U.value),z(!0)}),100)}),[U]),e(O,Object.assign({channel:Z,focused:L,onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(v,Object.assign({style:{color:F&&!U?h.content.negative:h.content.primary}},{children:[null===(P=_.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==U?void 0:U.label)?"space-between":"flex-end"}},{children:[l(b,{children:d(null!==(w=null==U?void 0:U.label)&&void 0!==w?w:"",20,!0)}),l(t,{onClick:()=>{D(!$)},width:24,height:24,color:h.content.primary})]})):l(s,{options:M,isSearchable:!1,onSelect:oe,defaultOptions:U?[Object.assign(Object.assign({},U),{selected:!0})]:[]})})),("custom_text"===(null==U?void 0:U.value)||"custom_link"===(null==U?void 0:U.value))&&l(u,{labelText:"custom_text"===(null==U?void 0:U.value)?"Custom text value":"custom_link"===(null==U?void 0:U.value)?"Custom URL value":"",id:`variable-value-${null==U?void 0:U.value}-${V}`,value:H,errorMessage:F?H&&0!==H.trim().length?"custom_link"!==U.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==U.value&&H.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==U?void 0:U.value)?void 0:30,prefixText:"custom_link"===(null==U?void 0:U.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===U.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;N(l);const o="custom_link"===(null==U?void 0:U.value)&&l?l.includes("https")?l:`https://${l}`:l;ae(o,e),Z===r.WHATSAPP&&(console.log("vj: handlecustominput",{variable:_}),null==ne||ne(null!==(t=_.index)&&void 0!==t?t:0,o,"custom_link"===e,e))}(U.value,e)}}),$&&l(i,{zIndex:2e3,data:null!=A?A:[],showVariable:$,setShowVariable:D,placeholder:"Add a variable",customTrigger:e=>{if(console.log("vj: customtrigger",e),null==E||E(!1),"{{custom.url}}"===e.actualValue)oe({label:e.displayName,selected:!0,value:"custom_link"});else if("{{custom.text}}"==e.actualValue)oe({label:e.displayName,selected:!0,value:"custom_text"});else if(te===p.CHATBOT&&"BUTTONS"===S){const l=null==C?void 0:C.filter((l=>l.placeHolder===e.actualValue));console.log("vj: CTAoptions",{CTAoptions:C,isVariableInCtaOptions:l}),l&&l.length>0?oe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"}):oe({label:"Custom URL",selected:!0,value:"custom_link"})}else oe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{O as Container,T as default};
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import{Dropdown as o}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as n}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as s}from"../../template-preview/models/TemplateMeta.js";import{POD as r,BUTTON_TYPE as p}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import u,{Container as f}from"./VariableConnector.js";const v=v=>{let{button:j,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:h,originalVariableList:y,CTAoptions:x,QRBoptions:O,variableList:L}=v;var T,V,R,U;const[w,B]=l(""),[C,H]=l(),{setOriginalVariableList:I,isError:N,disableEditVariable:E,pod:S}=c();function k(e){B(e);const t=[Object.assign(Object.assign({},y.buttons[0]),{type:p.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==I||I((e=>Object.assign(Object.assign({},e),{body:[...y.body],buttons:[...t]}))),null==g||g(`https://${e}`,"custom")}return a((()=>{var e;if(j.buttonVariable&&n.test(j.buttonVariable))H(s),B((null===(e=j.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===j.type?x:O;e="URL"===j.type?t.findIndex((e=>e.placeHolder===j.buttonVariable)):t.findIndex((e=>e.label===j.flowName)),e>-1&&H(t[e])}}),[]),S!==r.CHATBOT?e(f,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:m.content.primary}},{children:[j.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(o,{disabled:E,options:"URL"===j.type?x:O,isSearchable:!1,onSelect:function(e,t){const l=e;H(l);const a=("URL"===j.type?x:O).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===j.type?(e=[Object.assign(Object.assign({},y.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=y.buttons.map(((e,t)=>t===j.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==h||h({flowName:l.label,flowId:l.value},"placeholder",j.index)),null==I||I((t=>Object.assign(Object.assign({},t),{body:[...y.body],buttons:[...e]})))}else k("")},defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),"custom_link"===(null==C?void 0:C.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:E?"disabled":"none",errorMessage:N?w?b(w)?"":"Enter valid URL":"Required field":"",value:w,prefixText:"custom_link"===(null==C?void 0:C.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:k})}))
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import{Dropdown as o}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as n}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as s}from"../../template-preview/models/TemplateMeta.js";import{POD as r,BUTTON_TYPE as p}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import u,{Container as f}from"./VariableConnector.js";const v=v=>{let{button:j,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:h,originalVariableList:y,CTAoptions:x,QRBoptions:O,variableList:L}=v;var T,V,R,U;const[w,B]=l(""),[C,H]=l(),{setOriginalVariableList:I,isError:N,disableEditVariable:E,pod:S}=c();function k(e){B(e);const t=[Object.assign(Object.assign({},y.buttons[0]),{type:p.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==I||I((e=>Object.assign(Object.assign({},e),{body:[...y.body],buttons:[...t]}))),null==g||g(`https://${e}`,"custom")}return a((()=>{var e;if(j.buttonVariable&&n.test(j.buttonVariable))H(s),B((null===(e=j.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===j.type?x:O;e="URL"===j.type?t.findIndex((e=>e.placeHolder===j.buttonVariable)):t.findIndex((e=>e.label===j.flowName)),e>-1&&H(t[e])}}),[]),S!==r.CHATBOT?e(f,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:m.content.primary}},{children:[j.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(o,{disabled:E,options:"URL"===j.type?x:O,isSearchable:!1,onSelect:function(e,t){const l=e;H(l);const a=("URL"===j.type?x:O).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===j.type?(e=[Object.assign(Object.assign({},y.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=y.buttons.map(((e,t)=>t===j.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==h||h({flowName:l.label,flowId:l.value},"placeholder",j.index)),null==I||I((t=>Object.assign(Object.assign({},t),{body:[...y.body],buttons:[...e]})))}else k("")},defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),"custom_link"===(null==C?void 0:C.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:E?"disabled":"none",errorMessage:N?w?b(w)?"":"Enter valid URL":"Required field":"",value:w,prefixText:"custom_link"===(null==C?void 0:C.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:k})}))]}):t(u,{index:0,variable:{variableName:null!==(T=j.text)&&void 0!==T?T:"",updatedValue:"((customPlaceholderName))"===j.buttonVariable?`${null===(V=j.example)||void 0===V?void 0:V[0]}`:null!==(R=j.buttonVariable)&&void 0!==R?R:"",type:"link",isEditableVariable:!0,index:null!==(U=j.index)&&void 0!==U?U:0},showVariableModal:!0,componentType:"BUTTONS",variableList:L,CTAoptions:x})};export{v as default};
|