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