@bikdotai/bik-component-library 0.0.264-beta.13 → 0.0.264-beta.15
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/add-variableV2/AddVariableV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/esm/components/add-variableV2/AddVariableV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),e=require("react"),s=require("./AddVariableV2.styled.js"),i=require("./backIcon.js"),l=require("./closeIcon.js"),r=require("./plusIcon.js"),t=require("./rightFilled.js"),d=require("./undoIcon.js"),n=require("../button/Button.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),e=require("react"),s=require("./AddVariableV2.styled.js"),i=require("./backIcon.js"),l=require("./closeIcon.js"),r=require("./plusIcon.js"),t=require("./rightFilled.js"),d=require("./undoIcon.js"),n=require("../button/Button.js"),o=require("../icon-button/IconButton.js"),c=require("../searchBar/searchBar.js"),b=require("../TypographyStyle.js");exports.default=j=>{const{data:u}=j,[p,v]=e.useState({}),[y,g]=e.useState(),[m,h]=e.useState(""),[x,V]=e.useState(""),[O,N]=e.useState(!0);e.useEffect((()=>{const a={};u.forEach((e=>{a[e.payloadVariables.displayName]=[]})),g(a)}),[u]),e.useEffect((()=>{if(x){j.data.filter((a=>Object.keys(a.payloadVariables.variables).filter((e=>{var s;return(null===(s=a.payloadVariables.variables[e].displayName)||void 0===s?void 0:s.toLowerCase().includes(x.toLowerCase()))||_(a.payloadVariables.variables[e])})).length>0)).length>0?N(!0):N(!1)}else N(!0)}),[x]);const f=(a,e)=>{const s=u.find((a=>a.payloadVariables.displayName===e));if(s){let i=s.payloadVariables;a.forEach(((a,e)=>{i=i.variables[a]})),v((a=>Object.assign(Object.assign({},a),{[e]:i})))}},_=a=>{let e=!1;if(a.isSubHeader&&a.variables){const s=Object.keys(a.variables);for(let i=0;i<s.length;i++){const l=s[i];if(a.variables&&a.variables[l].displayName.toLowerCase().includes(x.toLowerCase())){e=!0;break}}}return e},S=e=>a.jsx(n.Button,{disabled:!1,size:"chip",LeadingIcon:e.item.isSubHeader?void 0:r.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(t.RightFilled,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),C=(e,s)=>a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{const a=[...y[m],s];f(a,m),g((e=>Object.assign(Object.assign({},e),{[m]:a})))}:()=>{j.customTrigger?(j.customTrigger(e),j.setShowVariable(!1)):j.setVariableValue(e.actualValue)}},{children:a.jsx(S,{item:e})}));return a.jsx(s.AddVariableStyled,Object.assign({id:"varList",onClick:a=>{a.stopPropagation()},pickerSize:j.pickerSize||"large"},{children:j.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),a.jsx("div",Object.assign({className:"close__icon",style:{cursor:"pointer"},onClick:()=>{j.setShowVariable(!1)}},{children:a.jsx(l.default,{})}))]})),a.jsx("div",Object.assign({className:"search__bar"},{children:a.jsx(c.SearchBar,{width:"100%",isEnabled:!0,onChange:a=>{V(a)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!O&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(b.TitleSmall,{children:"No results found!"}),a.jsx(b.BodyCaption,{children:`Sorry we could not find any results for "${x}"`})]})),m&&y[m].length>0&&a.jsxs("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(o.IconButton,{Icon:i.default,style:{color:"#919191",display:"flex"},onClick:()=>{const a=y[m].slice(0,-1);f(a,m),g((e=>Object.assign(Object.assign({},e),{[m]:a}))),a.length||h("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(b.TitleSmall,{children:p[m].displayName}),p[m].description&&a.jsx(b.BodyCaption,{children:p[m].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(o.IconButton,{Icon:d.default,style:{display:"flex"},onClick:()=>{f([],m),g((a=>Object.assign(Object.assign({},a),{[m]:[]}))),h("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),a.jsx("div",Object.assign({className:"wrapper"},{children:a.jsx("div",Object.assign({className:"list__map"},{children:a.jsxs("div",Object.assign({className:"items"},{children:[!m&&j.data.map((e=>{var s,i,l,r;let t=[];return x&&(t=Object.keys(e.payloadVariables.variables).filter((a=>{var s;return(null===(s=e.payloadVariables.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(x.toLowerCase()))||_(e.payloadVariables.variables[a])}))),a.jsxs(a.Fragment,{children:[x?t.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null===(s=null==e?void 0:e.payloadVariables)||void 0===s?void 0:s.displayName})),a.jsx(b.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(i=null==e?void 0:e.payloadVariables)||void 0===i?void 0:i.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null===(l=null==e?void 0:e.payloadVariables)||void 0===l?void 0:l.displayName})),a.jsx(b.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(r=null==e?void 0:e.payloadVariables)||void 0===r?void 0:r.description}))]})),Object.keys(e.payloadVariables.variables).map((s=>{var i;return x?(null===(i=e.payloadVariables.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(x.toLowerCase()))||_(e.payloadVariables.variables[s])?a.jsx("div",Object.assign({onClick:e.payloadVariables.variables[s].isSubHeader?()=>{const a=[...y[e.payloadVariables.displayName],s];f(a,e.payloadVariables.displayName),g((s=>Object.assign(Object.assign({},s),{[e.payloadVariables.displayName]:a}))),h(e.payloadVariables.displayName)}:()=>{j.customTrigger?(j.customTrigger(e.payloadVariables.variables[s]),j.setShowVariable(!1)):j.setVariableValue(e.payloadVariables.variables[s].actualValue)}},{children:a.jsx(S,{item:e.payloadVariables.variables[s]})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.payloadVariables.variables[s].isSubHeader?()=>{const a=[...y[e.payloadVariables.displayName],s];f(a,e.payloadVariables.displayName),g((s=>Object.assign(Object.assign({},s),{[e.payloadVariables.displayName]:a}))),h(e.payloadVariables.displayName)}:()=>{j.customTrigger?(j.customTrigger(e.payloadVariables.variables[s]),j.setShowVariable(!1)):j.setVariableValue(e.payloadVariables.variables[s].actualValue)}},{children:a.jsx(S,{item:e.payloadVariables.variables[s]})}))}))]})})),m&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(p[m].variables).map(((e,s)=>{var i;return x?(null===(i=p[m].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(x.toLowerCase()))||_(p[m].variables[e])?C(p[m].variables[e],e):a.jsx(a.Fragment,{}):C(p[m].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))}))};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../dropdown/Dropdown.js"),i=require("../../input/Input.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../dropdown/Dropdown.js"),i=require("../../input/Input.js"),u=require("../../template-preview/constants/regexPatterns.js"),s=require("../../template-preview/models/Channels.js"),r=require("../../TypographyStyle.js"),d=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),v=require("../context/templateModalContext.js"),p=require("../utils/getVariableNameEmail.js"),m=require("../utils/validateIsUrl.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const g=b(a).default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===
|
|
4
|
+
background: ${e=>e.focused&&e.channel===s.CHANNEL_TYPE.EMAIL?c.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,x={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:h,index:_,showVariableModal:j,variableList:A}=a;var N;const[P,T]=t.useState(!1),[y,C]=t.useState(""),[f,O]=t.useState([]),[L,V]=t.useState(),[S,k]=t.useState(!1),{device:H,channel:M,isError:w,originalVariableList:q,template:I,templateSelectionTriggered:Y,setTemplate:W,setDisplayContent:B,setOriginalVariableList:R,globalNormalizedPlaceholders:U}=v.useTemplateModalContext();function $(e,l){var t,a,n;const o=e;C(""),V(o),M===
|
|
7
|
+
`,x={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:h,index:_,showVariableModal:j,variableList:A}=a;var N;const[P,T]=t.useState(!1),[y,C]=t.useState(""),[f,O]=t.useState([]),[L,V]=t.useState(),[S,k]=t.useState(!1),{device:H,channel:M,isError:w,originalVariableList:q,template:I,templateSelectionTriggered:Y,setTemplate:W,setDisplayContent:B,setOriginalVariableList:R,globalNormalizedPlaceholders:U}=v.useTemplateModalContext();function $(e,l){var t,a,n;const o=e;C(""),V(o),M===s.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(D(null!==(t=o.value)&&void 0!==t?t:"","string"),null==z||z(null!==(a=h.index)&&void 0!==a?a:0,`[[${o.value}]]`)):(null==z||z(null!==(n=h.index)&&void 0!==n?n:0,h.variableName),D("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?D(o.value,"url"===o.bikPlaceholderType?"link":"string"):(C(""),D("",o.value))}function D(e,l){var t,a;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(M!==s.CHANNEL_TYPE.WHATSAPP){const a=p.getVariableNameForEmailByIndex(_+1),o=null===document||void 0===document?void 0:document.getElementById("mobile"===H?"template_html_mobile":"template_html_desktop"),i=M===s.CHANNEL_TYPE.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:h.variableName);const u=q.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==R||R(u)}if(M===s.CHANNEL_TYPE.WHATSAPP){const l=null===(a=q.body)||void 0===a?void 0:a.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==R||R((e=>Object.assign(Object.assign({},e),{body:l,buttons:q.buttons})))}}function z(e,l){var t;const a=Object.assign({},I),n=null===(t=null==a?void 0:a.components)||void 0===t?void 0:t.map((t=>{var a,n,o,i,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(n=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const t=[...null!==(u=null===(i=null===(o=s.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[t]});return Object.assign(Object.assign({},s),{example:a})}return t}));a.components=n,null==W||W(a)}return t.useEffect((()=>{P&&(null==b||b())}),[P]),t.useEffect((()=>{!function(){var e,l,t,a,n;const o="mobile"===H?"template_html_mobile":"template_html_desktop",i=document.getElementById(o),u=(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);M===s.CHANNEL_TYPE.EMAIL&&(null==B||B(u))}()}),[Y]),t.useEffect((()=>{var e;const l=[];let t=[];if(M===s.CHANNEL_TYPE.MESSAGE){const e=null!=U?U:[];O([{label:"",options:[E,x]},...e]),t=[{label:"",options:[E,x]},...e]}else{"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[x,E]}),V(x)):(l.push({label:"",options:[x,E]}),V(E));const e=null!=U?U:[];O([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:d.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]}if((M===s.CHANNEL_TYPE.WHATSAPP||M===s.CHANNEL_TYPE.EMAIL||M===s.CHANNEL_TYPE.MESSAGE)&&(console.log("variable: ",h,{channel:M},"inside VC"),h.updatedValue))if(console.log("variable: ",h,{channel:M},"inside updated value"),u.placeHolderNamePattern.test(h.updatedValue)&&M===s.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&M!==s.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){var a;let n={label:"",value:""};const o=t===s.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");console.log("showVariableModal: ",j),console.log("showVariableModal variable: ",e),console.log("allOptions: ",l),j?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}(h,t,M);console.log("preSelectedOption: ",e),e.value&&V(e)}else(null===(e=h.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(V(x),C(h.updatedValue.split("https://")[1])):(V(E),C(h.updatedValue))}),[]),t.useEffect((()=>{console.log("selectedOption: ",L)}),[L]),e.jsxs(g,Object.assign({channel:M,focused:P,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:w&&!L?c.COLORS.content.negative:c.COLORS.content.primary}},{children:[null===(N=h.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsx(i.Input,{state:"none",value:L?L.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>e.jsx(l.default,{onClick:()=>{k(!S)},width:24,height:24,color:c.COLORS.content.primary})}}):e.jsx(o.Dropdown,{options:f,isSearchable:!1,onSelect:$,defaultOptions:L?[Object.assign(Object.assign({},L),{selected:!0})]:[]})})),("custom_text"===(null==L?void 0:L.value)||"custom_link"===(null==L?void 0:L.value))&&e.jsx(i.Input,{labelText:"custom_text"===(null==L?void 0:L.value)?"Custom text value":"custom_link"===(null==L?void 0:L.value)?"Custom URL value":"",id:`variable-value-${null==L?void 0:L.value}-${_}`,value:y,errorMessage:w?y?"custom_link"!==L.value||m.validateIsUrl(y)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==L?void 0:L.value)?void 0:30,prefixText:"custom_link"===(null==L?void 0:L.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===L.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;C(l);const a="custom_link"===(null==L?void 0:L.value)?`https://${l}`:l;D(a,e),M===s.CHANNEL_TYPE.WHATSAPP&&(null==z||z(null!==(t=h.index)&&void 0!==t?t:0,a))}(L.value,e)}),S&&e.jsx(n.AddVariableV2SideModal,{data:null!=A?A:[],showVariable:S,setShowVariable:k,placeholder:"Add a variable",customTrigger:e=>{"{{custom.url}}"===e.actualValue?$({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?$({label:e.displayName,selected:!0,value:"custom_text"}):$({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as a,jsxs as
|
|
1
|
+
import{jsx as a,jsxs as e,Fragment as i}from"react/jsx-runtime";import{useState as s,useEffect as l}from"react";import{AddVariableStyled as r}from"./AddVariableV2.styled.js";import o from"./backIcon.js";import t from"./closeIcon.js";import d from"./plusIcon.js";import{RightFilled as n}from"./rightFilled.js";import c from"./undoIcon.js";import{Button as b}from"../button/Button.js";import{IconButton as p}from"../icon-button/IconButton.js";import{SearchBar as m}from"../searchBar/searchBar.js";import{TitleSmall as v,BodyCaption as y}from"../TypographyStyle.js";const g=g=>{const{data:u}=g,[h,j]=s({}),[V,O]=s(),[N,f]=s(""),[_,k]=s(""),[w,C]=s(!0);l((()=>{const a={};u.forEach((e=>{a[e.payloadVariables.displayName]=[]})),O(a)}),[u]),l((()=>{if(_){g.data.filter((a=>Object.keys(a.payloadVariables.variables).filter((e=>{var i;return(null===(i=a.payloadVariables.variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(_.toLowerCase()))||L(a.payloadVariables.variables[e])})).length>0)).length>0?C(!0):C(!1)}else C(!0)}),[_]);const S=(a,e)=>{const i=u.find((a=>a.payloadVariables.displayName===e));if(i){let s=i.payloadVariables;a.forEach(((a,e)=>{s=s.variables[a]})),j((a=>Object.assign(Object.assign({},a),{[e]:s})))}},L=a=>{let e=!1;if(a.isSubHeader&&a.variables){const i=Object.keys(a.variables);for(let s=0;s<i.length;s++){const l=i[s];if(a.variables&&a.variables[l].displayName.toLowerCase().includes(_.toLowerCase())){e=!0;break}}}return e},T=e=>a(b,{disabled:!1,size:"chip",LeadingIcon:e.item.isSubHeader?void 0:d,TrailingIcon:()=>e.item.isSubHeader?a("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a(n,{})})):a(i,{}),buttonText:e.item.displayName}),I=(e,i)=>a("div",Object.assign({onClick:e.isSubHeader?()=>{const a=[...V[N],i];S(a,N),O((e=>Object.assign(Object.assign({},e),{[N]:a})))}:()=>{g.customTrigger?(g.customTrigger(e),g.setShowVariable(!1)):g.setVariableValue(e.actualValue)}},{children:a(T,{item:e})}));return a(r,Object.assign({id:"varList",onClick:a=>{a.stopPropagation()},pickerSize:g.pickerSize||"large"},{children:g.showVariable&&e("div",Object.assign({className:"popup"},{children:[e("div",Object.assign({className:"sticky__bar"},{children:[e("div",Object.assign({className:"header__bar"},{children:[a("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),a("div",Object.assign({className:"close__icon",style:{cursor:"pointer"},onClick:()=>{g.setShowVariable(!1)}},{children:a(t,{})}))]})),a("div",Object.assign({className:"search__bar"},{children:a(m,{width:"100%",isEnabled:!0,onChange:a=>{k(a)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!w&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a(v,{children:"No results found!"}),a(y,{children:`Sorry we could not find any results for "${_}"`})]})),N&&V[N].length>0&&e("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[e("div",Object.assign({className:"left__nav"},{children:[a(p,{Icon:o,style:{color:"#919191",display:"flex"},onClick:()=>{const a=V[N].slice(0,-1);S(a,N),O((e=>Object.assign(Object.assign({},e),{[N]:a}))),a.length||f("")}}),e("div",Object.assign({className:"block"},{children:[a(v,{children:h[N].displayName}),h[N].description&&a(y,{children:h[N].description})]}))]})),e("div",Object.assign({className:"right__nav"},{children:[a(p,{Icon:c,style:{display:"flex"},onClick:()=>{S([],N),O((a=>Object.assign(Object.assign({},a),{[N]:[]}))),f("")}}),a("div",{children:"First page"})]}))]}))]})),a("div",Object.assign({className:"wrapper"},{children:a("div",Object.assign({className:"list__map"},{children:e("div",Object.assign({className:"items"},{children:[!N&&g.data.map((s=>{var l,r,o,t;let d=[];return _&&(d=Object.keys(s.payloadVariables.variables).filter((a=>{var e;return(null===(e=s.payloadVariables.variables[a].displayName)||void 0===e?void 0:e.toLowerCase().includes(_.toLowerCase()))||L(s.payloadVariables.variables[a])}))),e(i,{children:[_?d.length>0?e("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null===(l=null==s?void 0:s.payloadVariables)||void 0===l?void 0:l.displayName})),a(y,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(r=null==s?void 0:s.payloadVariables)||void 0===r?void 0:r.description}))]})):a(i,{}):e("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null===(o=null==s?void 0:s.payloadVariables)||void 0===o?void 0:o.displayName})),a(y,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(t=null==s?void 0:s.payloadVariables)||void 0===t?void 0:t.description}))]})),Object.keys(s.payloadVariables.variables).map((e=>{var l;return _?(null===(l=s.payloadVariables.variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(_.toLowerCase()))||L(s.payloadVariables.variables[e])?a("div",Object.assign({onClick:s.payloadVariables.variables[e].isSubHeader?()=>{const a=[...V[s.payloadVariables.displayName],e];S(a,s.payloadVariables.displayName),O((e=>Object.assign(Object.assign({},e),{[s.payloadVariables.displayName]:a}))),f(s.payloadVariables.displayName)}:()=>{g.customTrigger?(g.customTrigger(s.payloadVariables.variables[e]),g.setShowVariable(!1)):g.setVariableValue(s.payloadVariables.variables[e].actualValue)}},{children:a(T,{item:s.payloadVariables.variables[e]})})):a(i,{}):a("div",Object.assign({onClick:s.payloadVariables.variables[e].isSubHeader?()=>{const a=[...V[s.payloadVariables.displayName],e];S(a,s.payloadVariables.displayName),O((e=>Object.assign(Object.assign({},e),{[s.payloadVariables.displayName]:a}))),f(s.payloadVariables.displayName)}:()=>{g.customTrigger?(g.customTrigger(s.payloadVariables.variables[e]),g.setShowVariable(!1)):g.setVariableValue(s.payloadVariables.variables[e].actualValue)}},{children:a(T,{item:s.payloadVariables.variables[e]})}))}))]})})),N&&a("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(h[N].variables).map(((e,s)=>{var l;return _?(null===(l=h[N].variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(_.toLowerCase()))||L(h[N].variables[e])?I(h[N].variables[e],e):a(i,{}):I(h[N].variables[e],e)}))}))}))]}))}))})),a("div",{className:"bottom__padding"})]}))}))};export{g as default};
|
|
@@ -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===d.EMAIL?v.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,x={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},j=n=>{let{onFocus:j,variable:_,index:y,showVariableModal:k,variableList:V}=n;var O;const[A,T]=o(!1),[P,S]=o(""),[E,w]=o([]),[C,L]=o(),[M,W]=o(!1),{device:I,channel:H,isError:B,originalVariableList:N,template:$,templateSelectionTriggered:U,setTemplate:R,setDisplayContent:D,setOriginalVariableList:z,globalNormalizedPlaceholders:G}=p();function q(e,l){var t,o,a;const n=e;S(""),L(n),H===d.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(F(null!==(t=n.value)&&void 0!==t?t:"","string"),null==Y||Y(null!==(o=_.index)&&void 0!==o?o:0,`[[${n.value}]]`)):(null==Y||Y(null!==(a=_.index)&&void 0!==a?a:0,_.variableName),F("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?F(n.value,"url"===n.bikPlaceholderType?"link":"string"):(S(""),F("",n.value))}function F(e,l){var t,o;const a="custom_link"===l?"link":"custom_text"===l?"string":l;if(H!==d.WHATSAPP){const o=b(y+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),i=H===d.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:_.variableName);const s=N.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:a,updatedValue:e}):l));null==z||z(s)}if(H===d.WHATSAPP){const l=null===(o=N.body)||void 0===o?void 0:o.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:a,updatedValue:e}):l));null==z||z((e=>Object.assign(Object.assign({},e),{body:l,buttons:N.buttons})))}}function Y(e,l){var t;const o=Object.assign({},$),a=null===(t=null==o?void 0:o.components)||void 0===t?void 0:t.map((t=>{var o,a,n,i,s;const u=Object.assign({},t);if("BODY"===t.type&&(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=u.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({},u.example),{body_text:[t]});return Object.assign(Object.assign({},u),{example:o})}return t}));o.components=a,null==R||R(o)}return a((()=>{A&&(null==j||j())}),[A]),a((()=>{!function(){var e,l,t,o,a;const n="mobile"===I?"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);H===d.EMAIL&&(null==D||D(s))}()}),[U]),a((()=>{var e;const l=[];let t=[];if(H===d.MESSAGE){const e=null!=G?G:[];w([{label:"",options:[f,x]},...e]),t=[{label:"",options:[f,x]},...e]}else{"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[x,f]}),L(x)):(l.push({label:"",options:[x,f]}),L(f));const e=null!=G?G:[];w([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:m.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]}if((H===d.WHATSAPP||H===d.EMAIL||H===d.MESSAGE)&&(console.log("variable: ",_,{channel:H},"inside VC"),_.updatedValue))if(console.log("variable: ",_,{channel:H},"inside updated value"),r.test(_.updatedValue)&&H===d.WHATSAPP||_.updatedValue.startsWith("{{")&&H!==d.WHATSAPP){const e=function(e,l,t){var o;let a={label:"",value:""};const n=t===d.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");console.log("showVariableModal: ",k),console.log("showVariableModal variable: ",e),console.log("allOptions: ",l),k?a={label:e.
|
|
7
|
+
`,x={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},j=n=>{let{onFocus:j,variable:_,index:y,showVariableModal:k,variableList:V}=n;var O;const[A,T]=o(!1),[P,S]=o(""),[E,w]=o([]),[C,L]=o(),[M,W]=o(!1),{device:I,channel:H,isError:B,originalVariableList:N,template:$,templateSelectionTriggered:U,setTemplate:R,setDisplayContent:D,setOriginalVariableList:z,globalNormalizedPlaceholders:G}=p();function q(e,l){var t,o,a;const n=e;S(""),L(n),H===d.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(F(null!==(t=n.value)&&void 0!==t?t:"","string"),null==Y||Y(null!==(o=_.index)&&void 0!==o?o:0,`[[${n.value}]]`)):(null==Y||Y(null!==(a=_.index)&&void 0!==a?a:0,_.variableName),F("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?F(n.value,"url"===n.bikPlaceholderType?"link":"string"):(S(""),F("",n.value))}function F(e,l){var t,o;const a="custom_link"===l?"link":"custom_text"===l?"string":l;if(H!==d.WHATSAPP){const o=b(y+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),i=H===d.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:_.variableName);const s=N.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:a,updatedValue:e}):l));null==z||z(s)}if(H===d.WHATSAPP){const l=null===(o=N.body)||void 0===o?void 0:o.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:a,updatedValue:e}):l));null==z||z((e=>Object.assign(Object.assign({},e),{body:l,buttons:N.buttons})))}}function Y(e,l){var t;const o=Object.assign({},$),a=null===(t=null==o?void 0:o.components)||void 0===t?void 0:t.map((t=>{var o,a,n,i,s;const u=Object.assign({},t);if("BODY"===t.type&&(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=u.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({},u.example),{body_text:[t]});return Object.assign(Object.assign({},u),{example:o})}return t}));o.components=a,null==R||R(o)}return a((()=>{A&&(null==j||j())}),[A]),a((()=>{!function(){var e,l,t,o,a;const n="mobile"===I?"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);H===d.EMAIL&&(null==D||D(s))}()}),[U]),a((()=>{var e;const l=[];let t=[];if(H===d.MESSAGE){const e=null!=G?G:[];w([{label:"",options:[f,x]},...e]),t=[{label:"",options:[f,x]},...e]}else{"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[x,f]}),L(x)):(l.push({label:"",options:[x,f]}),L(f));const e=null!=G?G:[];w([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:m.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]}if((H===d.WHATSAPP||H===d.EMAIL||H===d.MESSAGE)&&(console.log("variable: ",_,{channel:H},"inside VC"),_.updatedValue))if(console.log("variable: ",_,{channel:H},"inside updated value"),r.test(_.updatedValue)&&H===d.WHATSAPP||_.updatedValue.startsWith("{{")&&H!==d.WHATSAPP){const e=function(e,l,t){var o;let a={label:"",value:""};const n=t===d.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");console.log("showVariableModal: ",k),console.log("showVariableModal variable: ",e),console.log("allOptions: ",l),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,H);console.log("preSelectedOption: ",e),e.value&&L(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(L(x),S(_.updatedValue.split("https://")[1])):(L(f),S(_.updatedValue))}),[]),a((()=>{console.log("selectedOption: ",C)}),[C]),e(h,Object.assign({channel:H,focused:A,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:B&&!C?v.content.negative:v.content.primary}},{children:[null===(O=_.variableName)||void 0===O?void 0:O.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?l(u,{state:"none",value:C?C.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>l(t,{onClick:()=>{W(!M)},width:24,height:24,color:v.content.primary})}}):l(s,{options:E,isSearchable:!1,onSelect:q,defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),("custom_text"===(null==C?void 0:C.value)||"custom_link"===(null==C?void 0:C.value))&&l(u,{labelText:"custom_text"===(null==C?void 0:C.value)?"Custom text value":"custom_link"===(null==C?void 0:C.value)?"Custom URL value":"",id:`variable-value-${null==C?void 0:C.value}-${y}`,value:P,errorMessage:B?P?"custom_link"!==C.value||g(P)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==C?void 0:C.value)?void 0:30,prefixText:"custom_link"===(null==C?void 0:C.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===C.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;S(l);const o="custom_link"===(null==C?void 0:C.value)?`https://${l}`:l;F(o,e),H===d.WHATSAPP&&(null==Y||Y(null!==(t=_.index)&&void 0!==t?t:0,o))}(C.value,e)}),M&&l(i,{data:null!=V?V:[],showVariable:M,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{"{{custom.url}}"===e.actualValue?q({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?q({label:e.displayName,selected:!0,value:"custom_text"}):q({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{h as Container,j as default};
|