@bikdotai/bik-component-library 0.0.500-beta-scroller → 0.0.500-beta.filter-1
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/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js +6 -18
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +3 -3
- package/dist/cjs/components/tabs/Tabs.js +1 -1
- package/dist/cjs/components/tabs/Tabs.model.d.ts +1 -0
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/add-variableV2/AddVariableV2.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js +6 -18
- package/dist/esm/components/input-with-vars/InputWithVariables.js +2 -2
- package/dist/esm/components/tabs/Tabs.js +1 -1
- package/dist/esm/components/tabs/Tabs.model.d.ts +1 -0
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),i=require("../../assets/icons/chevronRightAlt.svg.js"),t=require("../../assets/icons/cross.svg.js"),l=require("../../assets/icons/plus.svg.js"),n=require("../../assets/icons/undo.svg.js"),r=require("react"),c=require("./AddVariableV2.styled.js"),o=require("../button/Button.js"),d=require("../icon-button/IconButton.js"),b=require("../searchBar/searchBar.js"),u=require("../tooltips/Tooltip.js"),v=require("../../constants/Theme.js"),j=require("../modals/modal.styled.js"),g=require("../switch/Switch.js"),h=require("../TypographyStyle.js");const m=r.memo((m=>{const{data:p,hasHeader:y=!0,needsBorder:x=!0,styledCloseBtn:f=!1,readonly:O=!1}=m,[S,N]=r.useState({}),[C,V]=r.useState(),[w,_]=r.useState(""),[T,B]=r.useState(""),[k,q]=r.useState(!0),L=/.*\..*/,[F,I]=r.useState(m.data),[E,A]=r.useState(!0);r.useEffect((()=>{const e={};p.forEach((a=>{e[a.displayName]=[]})),V(e)}),[p]),r.useEffect((()=>{z(!0)}),[]),r.useEffect((()=>{z(E,!w)}),[S,w]),r.useEffect((()=>{A(!0),B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("");const e=m.data.map((e=>$(e))).filter((e=>null!==e));I(e),e.length>0?q(!0):q(!1)}),[m.reRender]),r.useEffect((()=>{let e=m.data;w&&(e=[S[w]]);H(e,E).length>0?q(!0):q(!1)}),[T]),console.log("data",p);const H=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((s=>{var i;return(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))&&(!a||e.variables[s].isAvailable===a)||P(e.variables[s])}))))},R=(e,a)=>{const s=p.find((e=>e.displayName===a));if(s){let i=s;e.forEach(((e,a)=>{i=i.variables[e]})),N((e=>Object.assign(Object.assign({},e),{[a]:i})))}},P=e=>{let a=!1;if(e.isSubHeader&&e.variables){const s=Object.keys(e.variables);for(let i=0;i<s.length;i++){const t=s[i];if(e.variables&&e.variables[t].displayName.toLowerCase().includes(T.toLowerCase())&&e.variables[t].isAvailable===E){a=!0;break}}}return a},z=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(A(e),e){let s=[];if(!w||a)s=m.data.map((e=>$(e))).filter((e=>null!==e));else{const e=S[w];s=m.data.filter((e=>e.displayName===w)).map((a=>$(a,e))).filter((e=>null!=e))}I(s),T&&(s=H(s,e)),s.length>0?q(!0):q(!1)}else if(I(m.data),T){H(m.data,e).length>0?q(!0):q(!1)}else q(!0)};function $(e,a){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(a)for(const i in e.variables)if(e.variables[i].displayName===a.displayName)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a]);else e.variables[i].isSubHeader&&$(e.variables[i],a,s);else for(const a in e.variables)e.variables[a].isAvailable&&(s[a]=e.variables[a]);return 0===Object.keys(s).length?null:Object.assign(Object.assign({},e),{variables:s})}const M=e=>{const s=e.item.description;return e.readonly?a.jsx("div",{children:a.jsx(W,{item:e.item,readonly:e.readonly})}):a.jsx(a.Fragment,{children:a.jsx(u.Tooltip,Object.assign({body:"",tooltipContent:a.jsx(h.BodyCaption,Object.assign({color:v.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?s?`• ${s}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a.jsx("div",{children:a.jsx(W,{item:e.item})})}))})},W=e=>a.jsx(o.Button,{darkMode:m.enableVariable?m.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:l.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(i.default,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),D=(e,s)=>E&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{H([e],E).length||q(!1),B("");const a=[...C[w],s];R(a,w),V((e=>Object.assign(Object.assign({},e),{[w]:a})))}:()=>{m.customTrigger?(m.customTrigger(e),m.setShowVariable(!1)):m.isEvaluationList?J(e):m.setVariableValue(m.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a.jsx(M,{item:e,readonly:O})})),G=(e,a)=>{const s=[...C[e.displayName],a];R(s,e.displayName),V((a=>Object.assign(Object.assign({},a),{[e.displayName]:s}))),_(e.displayName)},J=e=>{if(e.actualValue.match(L)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let s=a[0];a.forEach(((e,a)=>{if(0===a)return;const i=(e=>/\w+\[\d+\]/g.test(e))(e);if(i){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],i=a[2];s+=`['${e}'][${i}]`}}else s+=`['${e}']`})),m.setVariableValue(m.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;m.setVariableValue(m.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},K=(e,a)=>{if(m.customTrigger)m.customTrigger(e.variables[a]),m.setShowVariable(!1);else if(m.isEvaluationList){const s=e.variables[a];J(s)}else m.setVariableValue(m.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},Q=m.isModalState?void 0:{top:`${m.topPosition?m.topPosition:"small"===m.pickerSize?"300px":"60px"}`,left:`${m.leftPosition?m.leftPosition+24:430}px`};return a.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:a.jsxs(c.AddVariableStyled,Object.assign({style:Q,onClick:e=>{e.stopPropagation()},pickerSize:m.pickerSize||"large",isModalState:m.isModalState,positionStrategy:m.positionStrategy,zIndex:m.zindex,height:m.height,needsBorder:x,width:m.width},{children:[f&&a.jsx(j.CloseButtonContainer,Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{zIndex:300}},{children:a.jsx(t.default,{height:20,width:20,color:v.COLORS.content.secondary})})),m.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[y&&a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!f&&a.jsx("div",Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a.jsx(d.IconButton,{iconButtonType:"default",Icon:t.default})}))]})),a.jsxs("div",Object.assign({className:"search__bar",onBlur:e=>{m.onSearchBlur&&m.onSearchBlur(e)}},{children:[a.jsx(b.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{B(e)},onEnter:()=>{},reset:!T,placeholder:"Search...",variant:"default"}),a.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a.jsx(h.BodySecondary,Object.assign({style:{color:v.COLORS.content.secondary}},{children:"Show only recommended variables"})),a.jsx(g.Switch,{value:E,onValueChange:a=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield z(a)}))})]}))]})),w&&C[w].length>0&&a.jsxs("div",Object.assign({className:"nav__bar"},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(d.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{B("");const e=C[w].slice(0,-1);R(e,w),V((a=>Object.assign(Object.assign({},a),{[w]:e}))),e.length||_("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(h.TitleSmall,{children:S[w].displayName}),S[w].description&&a.jsx(h.BodyCaption,{children:S[w].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(d.IconButton,{Icon:n.default,style:{display:"flex"},onClick:()=>{B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),!k&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(h.TitleSmall,{children:"No results found!"}),E?a.jsx(h.BodyCaption,{children:"Sorry we could not find any recommended variables"}):a.jsx(h.BodyCaption,{children:`Sorry we could not find any results for "${T}"`})]})),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:[!w&&F.map((e=>{let s=[];return T&&(s=Object.keys(e.variables).filter((a=>{var s;return(null===(s=e.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(T.toLowerCase()))||P(e.variables[a])}))),a.jsxs(a.Fragment,{children:[T?s.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((s=>{var i;return T?(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(e.variables[s])?a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})}))}))]})})),w&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(S[w].variables).map(((e,s)=>{var i;return T?(null===(i=S[w].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(S[w].variables[e])?D(S[w].variables[e],e):a.jsx(a.Fragment,{}):D(S[w].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));exports.AddVariableV2=m;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),i=require("../../assets/icons/chevronRightAlt.svg.js"),t=require("../../assets/icons/cross.svg.js"),l=require("../../assets/icons/plus.svg.js"),n=require("../../assets/icons/undo.svg.js"),r=require("react"),c=require("./AddVariableV2.styled.js"),o=require("../button/Button.js"),d=require("../icon-button/IconButton.js"),b=require("../searchBar/searchBar.js"),u=require("../tooltips/Tooltip.js"),v=require("../../constants/Theme.js"),j=require("../modals/modal.styled.js"),g=require("../switch/Switch.js"),h=require("../TypographyStyle.js");const m=r.memo((m=>{const{data:p,hasHeader:y=!0,needsBorder:x=!0,styledCloseBtn:f=!1,readonly:O=!1}=m,[S,N]=r.useState({}),[C,V]=r.useState(),[w,_]=r.useState(""),[T,B]=r.useState(""),[k,q]=r.useState(!0),L=/.*\..*/,[F,I]=r.useState(m.data),[E,A]=r.useState(!0);r.useEffect((()=>{const e={};p.forEach((a=>{e[a.displayName]=[]})),V(e)}),[p]),r.useEffect((()=>{z(!0)}),[]),r.useEffect((()=>{z(E,!w)}),[S,w]),r.useEffect((()=>{A(!0),B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("");const e=m.data.map((e=>$(e))).filter((e=>null!==e));I(e),e.length>0?q(!0):q(!1)}),[m.reRender]),r.useEffect((()=>{let e=m.data;w&&(e=[S[w]]);H(e,E).length>0?q(!0):q(!1)}),[T]);const H=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((s=>{var i;return(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))&&(!a||e.variables[s].isAvailable===a)||P(e.variables[s])}))))},R=(e,a)=>{const s=p.find((e=>e.displayName===a));if(s){let i=s;e.forEach(((e,a)=>{i=i.variables[e]})),N((e=>Object.assign(Object.assign({},e),{[a]:i})))}},P=e=>{let a=!1;if(e.isSubHeader&&e.variables){const s=Object.keys(e.variables);for(let i=0;i<s.length;i++){const t=s[i];if(e.variables&&e.variables[t].displayName.toLowerCase().includes(T.toLowerCase())&&e.variables[t].isAvailable===E){a=!0;break}}}return a},z=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(A(e),e){let s=[];if(!w||a)s=m.data.map((e=>$(e))).filter((e=>null!==e));else{const e=S[w];s=m.data.filter((e=>e.displayName===w)).map((a=>$(a,e))).filter((e=>null!=e))}I(s),T&&(s=H(s,e)),s.length>0?q(!0):q(!1)}else if(I(m.data),T){H(m.data,e).length>0?q(!0):q(!1)}else q(!0)};function $(e,a){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(a)for(const i in e.variables)if(e.variables[i].displayName===a.displayName)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a]);else e.variables[i].isSubHeader&&$(e.variables[i],a,s);else for(const a in e.variables)e.variables[a].isAvailable&&(s[a]=e.variables[a]);return 0===Object.keys(s).length?null:Object.assign(Object.assign({},e),{variables:s})}const M=e=>{const s=e.item.description;return e.readonly?a.jsx("div",{children:a.jsx(W,{item:e.item,readonly:e.readonly})}):a.jsx(a.Fragment,{children:a.jsx(u.Tooltip,Object.assign({body:"",tooltipContent:a.jsx(h.BodyCaption,Object.assign({color:v.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?s?`• ${s}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a.jsx("div",{children:a.jsx(W,{item:e.item})})}))})},W=e=>a.jsx(o.Button,{darkMode:m.enableVariable?m.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:l.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(i.default,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),D=(e,s)=>E&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{H([e],E).length||q(!1),B("");const a=[...C[w],s];R(a,w),V((e=>Object.assign(Object.assign({},e),{[w]:a})))}:()=>{m.customTrigger?(m.customTrigger(e),m.setShowVariable(!1)):m.isEvaluationList?J(e):m.setVariableValue(m.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a.jsx(M,{item:e,readonly:O})})),G=(e,a)=>{const s=[...C[e.displayName],a];R(s,e.displayName),V((a=>Object.assign(Object.assign({},a),{[e.displayName]:s}))),_(e.displayName)},J=e=>{if(e.actualValue.match(L)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let s=a[0];a.forEach(((e,a)=>{if(0===a)return;const i=(e=>/\w+\[\d+\]/g.test(e))(e);if(i){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],i=a[2];s+=`['${e}'][${i}]`}}else s+=`['${e}']`})),m.setVariableValue(m.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;m.setVariableValue(m.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},K=(e,a)=>{if(m.customTrigger)m.customTrigger(e.variables[a]),m.setShowVariable(!1);else if(m.isEvaluationList){const s=e.variables[a];J(s)}else m.setVariableValue(m.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},Q=m.isModalState?void 0:{top:`${m.topPosition?m.topPosition:"small"===m.pickerSize?"300px":"60px"}`,left:`${m.leftPosition?m.leftPosition+24:430}px`};return a.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:a.jsxs(c.AddVariableStyled,Object.assign({style:Q,onClick:e=>{e.stopPropagation()},pickerSize:m.pickerSize||"large",isModalState:m.isModalState,positionStrategy:m.positionStrategy,zIndex:m.zindex,height:m.height,needsBorder:x,width:m.width},{children:[f&&a.jsx(j.CloseButtonContainer,Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{zIndex:300}},{children:a.jsx(t.default,{height:20,width:20,color:v.COLORS.content.secondary})})),m.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[y&&a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!f&&a.jsx("div",Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a.jsx(d.IconButton,{iconButtonType:"default",Icon:t.default})}))]})),a.jsxs("div",Object.assign({className:"search__bar",onBlur:e=>{m.onSearchBlur&&m.onSearchBlur(e)}},{children:[a.jsx(b.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{B(e)},onEnter:()=>{},reset:!T,placeholder:"Search...",variant:"default"}),a.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a.jsx(h.BodySecondary,Object.assign({style:{color:v.COLORS.content.secondary}},{children:"Show only recommended variables"})),a.jsx(g.Switch,{value:E,onValueChange:a=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield z(a)}))})]}))]})),w&&C[w].length>0&&a.jsxs("div",Object.assign({className:"nav__bar"},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(d.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{B("");const e=C[w].slice(0,-1);R(e,w),V((a=>Object.assign(Object.assign({},a),{[w]:e}))),e.length||_("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(h.TitleSmall,{children:S[w].displayName}),S[w].description&&a.jsx(h.BodyCaption,{children:S[w].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(d.IconButton,{Icon:n.default,style:{display:"flex"},onClick:()=>{B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),!k&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(h.TitleSmall,{children:"No results found!"}),E?a.jsx(h.BodyCaption,{children:"Sorry we could not find any recommended variables"}):a.jsx(h.BodyCaption,{children:`Sorry we could not find any results for "${T}"`})]})),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:[!w&&F.map((e=>{let s=[];return T&&(s=Object.keys(e.variables).filter((a=>{var s;return(null===(s=e.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(T.toLowerCase()))||P(e.variables[a])}))),a.jsxs(a.Fragment,{children:[T?s.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((s=>{var i;return T?(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(e.variables[s])?a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})}))}))]})})),w&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(S[w].variables).map(((e,s)=>{var i;return T?(null===(i=S[w].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(S[w].variables[e])?D(S[w].variables[e],e):a.jsx(a.Fragment,{}):D(S[w].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));exports.AddVariableV2=m;
|
|
@@ -1,37 +1,25 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),o=require("../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);const i=r.default.div`
|
|
2
2
|
border-radius: ${e=>"2.0"===e.version?8:4}px;
|
|
3
3
|
border: ${e=>"2.0"===e.version?0:1}px solid
|
|
4
|
-
${
|
|
4
|
+
${o.COLORS.stroke.primary};
|
|
5
5
|
max-height: 640px;
|
|
6
6
|
overflow: hidden;
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: row;
|
|
9
9
|
position: relative;
|
|
10
10
|
padding: ${e=>"2.0"===e.version?4:0}px;
|
|
11
|
-
background-color: ${
|
|
12
|
-
`;
|
|
11
|
+
background-color: ${o.COLORS.surface.standard};
|
|
12
|
+
`;r.default.div`
|
|
13
13
|
padding: 14px 16px 14px 18px;
|
|
14
14
|
flex-direction: row;
|
|
15
15
|
align-items: center;
|
|
16
16
|
border-bottom-width: 1px;
|
|
17
17
|
border-bottom-style: solid;
|
|
18
|
-
border-bottom-color: ${
|
|
18
|
+
border-bottom-color: ${o.COLORS.stroke.primary};
|
|
19
19
|
width: 100%;
|
|
20
20
|
height: 100%;
|
|
21
|
-
`;const d=
|
|
21
|
+
`;const d=r.default.div`
|
|
22
22
|
max-height: ${e=>"number"==typeof e.maxHeight?`${e.maxHeight}px`:e.maxHeight};
|
|
23
23
|
overflow-y: auto;
|
|
24
24
|
position: relative;
|
|
25
|
-
&::-webkit-scrollbar-thumb {
|
|
26
|
-
background: #888;
|
|
27
|
-
border-radius: 8px;
|
|
28
|
-
}
|
|
29
|
-
&::-webkit-scrollbar {
|
|
30
|
-
height: 5px;
|
|
31
|
-
display: block;
|
|
32
|
-
width: 8px;
|
|
33
|
-
}
|
|
34
|
-
&::-webkit-scrollbar-thumb:horizontal {
|
|
35
|
-
width: 8px;
|
|
36
|
-
}
|
|
37
25
|
`;exports.MenuListContainer=d,exports.OpennedDropdownContainer=i;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),t=require("uuid"),i=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),n=require("../input/Input.js"),o=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
margin-bottom: 16px;
|
|
4
4
|
input {
|
|
5
|
-
color: ${e=>e.isVar?
|
|
5
|
+
color: ${e=>e.isVar?i.COLORS.stroke.brand:"black"};
|
|
6
6
|
}
|
|
7
|
-
`;exports.InputWithVariables=r=>{let{type:
|
|
7
|
+
`;exports.InputWithVariables=r=>{let{type:i,allowMix:c,onChange:b,prevVariable:h,variablesList:g,onBlur:p,onlyVariables:V,placeHolder:x,showAddButton:T=!0,showHelp:j,showSideVariablePanel:y,errorMessage:f,showSideModal:m,maxCharLimit:S,noMaxCharCheck:q,labelText:C,labelElement:w,isRequired:A=!1,hintText:O}=r;const k=l.useRef(!0),M=l.useRef(null),[B,L]=l.useState(!1),[N]=l.useState(t.v4()),[E,I]=l.useState(),[R,F]=l.useState(h),[P,Z]=l.useState(!1),[$,z]=l.useState(!1),[H,W]=l.useState(0);return l.useEffect((()=>{if(E&&E.actualValue)if(c){if(F((e=>{return{actualValue:(a=e.actualValue,l=E.actualValue,r=H,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),M.current){W(M.current.selectionStart);const e=H+E.actualValue.length+2;M.current.setSelectionRange(e,e),W(e)}}else F((e=>({actualValue:E.actualValue,variableType:E.variableType,needsFetching:E.needsFetching})))}),[E]),l.useEffect((()=>{k.current?k.current=!1:b(R)}),[R]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(R.actualValue)},{children:[e.jsx(n.Input,{isRequired:A,hintText:O,type:null!=i?i:"text",id:N,ref:M,skipFocus:!0,isActive:B,value:R.actualValue,validate:e=>[!0,""],errorMessage:f,noMaxCharCheck:q,maxCharLimit:S,labelText:C,labelElement:w,placeholder:x||"Add a value",onClick:e=>{M.current&&W(M.current.selectionStart)},onChangeText:(e,a)=>{if(M.current&&W(M.current.selectionStart),V){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||F({actualValue:"",variableType:"string"})}else F(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{L(!0),z(!0),document.getElementById("varList")&&!P&&Z(!0)},onBlur:e=>{var a,l,r,t,i,d,s;null==p||p(e,R),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(t=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===t?void 0:t.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(M.current&&M.current.focus(),L(!0)):"search-bar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?L(!0):(L(!1),Z(!1),z(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[R.actualValue&&j&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${R.variableType}`})})),T&&$&&e.jsx("div",Object.assign({style:{marginTop:f||O?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({id:"addVar",onClick:()=>{Z(!P)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!y&&P&&e.jsx(s.AddVariableV2,{data:g,showVariable:!0,setShowVariable:()=>{Z(!1)},variableValue:E,setVariableValue:I,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==N&&(Z(!1),z(!1),L(!1)):(Z(!1),z(!1),L(!1))}})]})),y&&P&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:P,setShowVariable:()=>{Z(!1)},placeholder:"Add a variable",customTrigger:e=>{I({actualValue:e.actualValue,variableType:"string"}),F(e)},onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==N&&(Z(!1),z(!1),L(!1)):(Z(!1),z(!1),L(!1))}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("./Tabs.styles.js");const n=r=>{var n,l;const{tabs:i,initialTab:c,onTabSelected:d,TabItemStyledProps:b,selectedTab:u,extendedBorder:p,rightComponent:x,size:T="default",isSquared:m=!1}=r,[
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("./Tabs.styles.js");const n=r=>{var n,l;const{tabs:i,initialTab:c,onTabSelected:d,TabItemStyledProps:b,selectedTab:u,extendedBorder:p,rightComponent:x,size:T="default",isSquared:m=!1,containerStyles:g}=r,[y,C]=t.useState(c||i[0].key),{colorsV2:j}=s.DEFAULT_THEME;t.useEffect((()=>{u&&C(u)}),[u]);const S=r.backgroundColor,h=null!==(n=r.selectedTextColor)&&void 0!==n?n:j.background.brand,q=null!==(l=r.textColor)&&void 0!==l?l:j.content.secondary;return e.jsxs(a.TabHeader,Object.assign({style:null!=g?g:{},bgColor:S},{children:[i.map(((t,s)=>e.jsx(o,{hasEqualSpacing:r.hasEqualSpacing,selectedTextColor:h,textColor:q,tab:t,currentTab:y,TabItemStyledProps:b,IconComponent:t.icon,size:T,setCurrentTab:e=>{d(e),C(e)},isSquared:m,isFirstlement:0==s,isLastElement:s==i.length-1},t.key))),p&&e.jsx(a.EmptyTab,{}),e.jsx(a.RightComponent,{children:x})]}))},o=n=>{const{tab:o,currentTab:l,setCurrentTab:i,TabItemStyledProps:c,IconComponent:d,size:b="default",isSquared:u=!1,isFirstlement:p,isLastElement:x}=n,T=o.key===l,{colorsV2:m}=s.DEFAULT_THEME,g=t.useCallback((()=>Object.assign(Object.assign({},c),{borderRadius:n.isSquared?p?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""})),[]);return e.jsxs(a.TabItem,Object.assign({style:g(),selected:T,hasEqualSpacing:n.hasEqualSpacing,onClick:()=>i(n.tab.key),selectedTextColor:n.selectedTextColor,isSquared:u},{children:[d&&e.jsx(d,{selected:T?m.background.brand:m.content.secondary}),e.jsx(a.TabItemText,Object.assign({style:"small"===b?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:n.textColor,selectedTextColor:n.selectedTextColor,selected:T},{children:o.title})),void 0!==o.trailingNumber&&null!==o.trailingNumber&&e.jsx(a.TrailingNumberContainer,Object.assign({selected:T},{children:e.jsx(r.BodyCaption,Object.assign({color:m.content.primaryInverse},{children:o.trailingNumber}))}))]}))};n.displayName="Tabs",o.displayName="TabItemComponent",exports.TabItemComponent=o,exports.Tabs=n;
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),b=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=j=>{let{variableListIndex:m,button:g,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:O,currentVariableList:x,CTAoptions:f,QRBoptions:y,variableList:L}=j;var h,R,U,V;const[C,T]=l.useState(""),[I,w]=l.useState(),q=d.useAdditionalVariables({variableList:L,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:N,disableEditVariable:P,pod:E,selectedCarouselIndex:S,originalVariableList:_,setOriginalVariableList:B,isProductCarouselType:H}=c.useTemplateModalContext();function M(e){if(T(e),null!=S&&S>-1&&H){const l=t.cloneDeep(_);if("URL"===g.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[m];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==B||B((e=>Object.assign(Object.assign({},e),{cards:t}))),null==v||v(`https://${e}`,"custom",m)}return}let l=x.buttons.filter((e=>"URL"===e.type))[m];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=S&&S>-1?_.cards[S]:_);if(a.buttons=s,null!=S&&S>-1){const e=[..._.cards];e[S]=a,null==B||B((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==B||B((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==v||v(`https://${e}`,"custom",m)}return l.useEffect((()=>{var e;if(g.buttonVariable&&n.editableVarPattern.test(g.buttonVariable))w(i.CUSTOM_URL_NAME),T((null===(e=g.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===g.type?f:y;e="URL"===g.type?t.findIndex((e=>e.placeHolder===g.buttonVariable)):t.findIndex((e=>e.label===g.flowName)),e>-1&&w(t[e])}}),[]),E!==o.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[g.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:P,options:"URL"===g.type?f:y,isSearchable:!0,onSelect:function(e,l){const s=e;w(s);const a=("URL"===g.type?f:y).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=S&&S>-1&&H){const e=t.cloneDeep(_);if("URL"===g.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[m];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",m),null==B||B((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===g.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[m];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",m),null==B||B((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===g.type){let t=x.buttons.filter((e=>"URL"===e.type))[m];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",m)}else{let t=x.buttons.filter((e=>"QUICK_REPLY"===e.type))[m];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=x.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",m)}const l=Object.assign({},null!=S&&S>-1?_.cards[S]:_);if(l.buttons=e,null!=S&&S>-1){const e=[..._.cards];e[S]=l,null==B||B((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==B||B((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else M("")},defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),"custom_link"===(null==I?void 0:I.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:P?"disabled":"none",errorMessage:N?C?b.validateIsUrl(C)?"":"Enter valid URL":"Required field":"",value:C,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:M,maxCharLimit:2e3})}))]}):e.jsx(p.default,{index:m,variable:{variableName:null!==(h=g.text)&&void 0!==h?h:"",updatedValue:"((customPlaceholderName))"===g.buttonVariable?`${null===(R=g.example)||void 0===R?void 0:R[0]}`:null!==(U=g.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(V=g.index)&&void 0!==V?V:0},showVariableModal:!0,componentType:"BUTTONS",variableList:q,CTAoptions:f})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as a,jsxs as i,Fragment as s}from"react/jsx-runtime";import l from"../../assets/icons/back_icon.svg.js";import t from"../../assets/icons/chevronRightAlt.svg.js";import n from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import o from"../../assets/icons/undo.svg.js";import{memo as c,useState as d,useEffect as b}from"react";import{AddVariableStyled as v}from"./AddVariableV2.styled.js";import{Button as m}from"../button/Button.js";import{IconButton as h}from"../icon-button/IconButton.js";import{SearchBar as g}from"../searchBar/searchBar.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{COLORS as u}from"../../constants/Theme.js";import{CloseButtonContainer as y}from"../modals/modal.styled.js";import{Switch as f}from"../switch/Switch.js";import{BodySecondary as j,TitleSmall as O,BodyCaption as N}from"../TypographyStyle.js";const V=c((c=>{const{data:V,hasHeader:w=!0,needsBorder:S=!0,styledCloseBtn:_=!1,readonly:C=!1}=c,[T,k]=d({}),[x,L]=d(),[B,I]=d(""),[A,E]=d(""),[F,H]=d(!0),z=/.*\..*/,[P,$]=d(c.data),[R,M]=d(!0);b((()=>{const e={};V.forEach((a=>{e[a.displayName]=[]})),L(e)}),[V]),b((()=>{G(!0)}),[]),b((()=>{G(R,!B)}),[T,B]),b((()=>{M(!0),E(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("");const e=c.data.map((e=>J(e))).filter((e=>null!==e));$(e),e.length>0?H(!0):H(!1)}),[c.reRender]),b((()=>{let e=c.data;B&&(e=[T[B]]);W(e,R).length>0?H(!0):H(!1)}),[A])
|
|
1
|
+
import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as a,jsxs as i,Fragment as s}from"react/jsx-runtime";import l from"../../assets/icons/back_icon.svg.js";import t from"../../assets/icons/chevronRightAlt.svg.js";import n from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import o from"../../assets/icons/undo.svg.js";import{memo as c,useState as d,useEffect as b}from"react";import{AddVariableStyled as v}from"./AddVariableV2.styled.js";import{Button as m}from"../button/Button.js";import{IconButton as h}from"../icon-button/IconButton.js";import{SearchBar as g}from"../searchBar/searchBar.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{COLORS as u}from"../../constants/Theme.js";import{CloseButtonContainer as y}from"../modals/modal.styled.js";import{Switch as f}from"../switch/Switch.js";import{BodySecondary as j,TitleSmall as O,BodyCaption as N}from"../TypographyStyle.js";const V=c((c=>{const{data:V,hasHeader:w=!0,needsBorder:S=!0,styledCloseBtn:_=!1,readonly:C=!1}=c,[T,k]=d({}),[x,L]=d(),[B,I]=d(""),[A,E]=d(""),[F,H]=d(!0),z=/.*\..*/,[P,$]=d(c.data),[R,M]=d(!0);b((()=>{const e={};V.forEach((a=>{e[a.displayName]=[]})),L(e)}),[V]),b((()=>{G(!0)}),[]),b((()=>{G(R,!B)}),[T,B]),b((()=>{M(!0),E(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("");const e=c.data.map((e=>J(e))).filter((e=>null!==e));$(e),e.length>0?H(!0):H(!1)}),[c.reRender]),b((()=>{let e=c.data;B&&(e=[T[B]]);W(e,R).length>0?H(!0):H(!1)}),[A]);const W=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((i=>{var s;return(null===(s=e.variables[i].displayName)||void 0===s?void 0:s.toLowerCase().includes(A.toLowerCase()))&&(!a||e.variables[i].isAvailable===a)||q(e.variables[i])}))))},D=(e,a)=>{const i=V.find((e=>e.displayName===a));if(i){let s=i;e.forEach(((e,a)=>{s=s.variables[e]})),k((e=>Object.assign(Object.assign({},e),{[a]:s})))}},q=e=>{let a=!1;if(e.isSubHeader&&e.variables){const i=Object.keys(e.variables);for(let s=0;s<i.length;s++){const l=i[s];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(A.toLowerCase())&&e.variables[l].isAvailable===R){a=!0;break}}}return a},G=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(M(e),e){let i=[];if(!B||a)i=c.data.map((e=>J(e))).filter((e=>null!==e));else{const e=T[B];i=c.data.filter((e=>e.displayName===B)).map((a=>J(a,e))).filter((e=>null!=e))}$(i),A&&(i=W(i,e)),i.length>0?H(!0):H(!1)}else if($(c.data),A){W(c.data,e).length>0?H(!0):H(!1)}else H(!0)};function J(e,a){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(a)for(const s in e.variables)if(e.variables[s].displayName===a.displayName)for(const a in e.variables[s].variables)e.variables[s].variables[a].isAvailable&&(i[a]=e.variables[s].variables[a]);else e.variables[s].isSubHeader&&J(e.variables[s],a,i);else for(const a in e.variables)e.variables[a].isAvailable&&(i[a]=e.variables[a]);return 0===Object.keys(i).length?null:Object.assign(Object.assign({},e),{variables:i})}const K=e=>{const i=e.item.description;return e.readonly?a("div",{children:a(Q,{item:e.item,readonly:e.readonly})}):a(s,{children:a(p,Object.assign({body:"",tooltipContent:a(N,Object.assign({color:u.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?i?`• ${i}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a("div",{children:a(Q,{item:e.item})})}))})},Q=e=>a(m,{darkMode:c.enableVariable?c.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:r,TrailingIcon:()=>e.item.isSubHeader?a("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a(t,{})})):a(s,{}),buttonText:e.item.displayName}),U=(e,i)=>R&&!e.isAvailable?a(s,{}):a("div",Object.assign({onClick:e.isSubHeader?()=>{W([e],R).length||H(!1),E("");const a=[...x[B],i];D(a,B),L((e=>Object.assign(Object.assign({},e),{[B]:a})))}:()=>{c.customTrigger?(c.customTrigger(e),c.setShowVariable(!1)):c.isEvaluationList?Y(e):c.setVariableValue(c.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a(K,{item:e,readonly:C})})),X=(e,a)=>{const i=[...x[e.displayName],a];D(i,e.displayName),L((a=>Object.assign(Object.assign({},a),{[e.displayName]:i}))),I(e.displayName)},Y=e=>{if(e.actualValue.match(z)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let i=a[0];a.forEach(((e,a)=>{if(0===a)return;const s=(e=>/\w+\[\d+\]/g.test(e))(e);if(s){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],s=a[2];i+=`['${e}'][${s}]`}}else i+=`['${e}']`})),c.setVariableValue(c.selectWithTypes?{actualValue:i,variableType:e.variableType,needsFetching:e.needsFetching}:i)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;c.setVariableValue(c.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},Z=(e,a)=>{if(c.customTrigger)c.customTrigger(e.variables[a]),c.setShowVariable(!1);else if(c.isEvaluationList){const i=e.variables[a];Y(i)}else c.setVariableValue(c.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},ee=c.isModalState?void 0:{top:`${c.topPosition?c.topPosition:"small"===c.pickerSize?"300px":"60px"}`,left:`${c.leftPosition?c.leftPosition+24:430}px`};return a("div",Object.assign({id:"varList",tabIndex:-1},{children:i(v,Object.assign({style:ee,onClick:e=>{e.stopPropagation()},pickerSize:c.pickerSize||"large",isModalState:c.isModalState,positionStrategy:c.positionStrategy,zIndex:c.zindex,height:c.height,needsBorder:S,width:c.width},{children:[_&&a(y,Object.assign({onClick:()=>{c.setShowVariable(!1)},style:{zIndex:300}},{children:a(n,{height:20,width:20,color:u.content.secondary})})),c.showVariable&&i("div",Object.assign({className:"popup"},{children:[i("div",Object.assign({className:"sticky__bar"},{children:[w&&i("div",Object.assign({className:"header__bar"},{children:[a("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!_&&a("div",Object.assign({onClick:()=>{c.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a(h,{iconButtonType:"default",Icon:n})}))]})),i("div",Object.assign({className:"search__bar",onBlur:e=>{c.onSearchBlur&&c.onSearchBlur(e)}},{children:[a(g,{width:"100%",isEnabled:!0,onChange:e=>{E(e)},onEnter:()=>{},reset:!A,placeholder:"Search...",variant:"default"}),i("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a(j,Object.assign({style:{color:u.content.secondary}},{children:"Show only recommended variables"})),a(f,{value:R,onValueChange:a=>e(void 0,void 0,void 0,(function*(){return yield G(a)}))})]}))]})),B&&x[B].length>0&&i("div",Object.assign({className:"nav__bar"},{children:[i("div",Object.assign({className:"left__nav"},{children:[a(h,{Icon:l,style:{color:"#919191",display:"flex"},onClick:()=>{E("");const e=x[B].slice(0,-1);D(e,B),L((a=>Object.assign(Object.assign({},a),{[B]:e}))),e.length||I("")}}),i("div",Object.assign({className:"block"},{children:[a(O,{children:T[B].displayName}),T[B].description&&a(N,{children:T[B].description})]}))]})),i("div",Object.assign({className:"right__nav"},{children:[a(h,{Icon:o,style:{display:"flex"},onClick:()=>{E(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("")}}),a("div",{children:"First page"})]}))]}))]})),!F&&i("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a(O,{children:"No results found!"}),a(N,R?{children:"Sorry we could not find any recommended variables"}:{children:`Sorry we could not find any results for "${A}"`})]})),a("div",Object.assign({className:"wrapper"},{children:a("div",Object.assign({className:"list__map"},{children:i("div",Object.assign({className:"items"},{children:[!B&&P.map((e=>{let l=[];return A&&(l=Object.keys(e.variables).filter((a=>{var i;return(null===(i=e.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(A.toLowerCase()))||q(e.variables[a])}))),i(s,{children:[A?l.length>0?i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(N,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a(s,{}):i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(N,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((i=>{var l;return A?(null===(l=e.variables[i].displayName)||void 0===l?void 0:l.toLowerCase().includes(A.toLowerCase()))||q(e.variables[i])?a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>X(e,i):()=>Z(e,i)},{children:a(K,{item:e.variables[i],readonly:C})})):a(s,{}):a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>X(e,i):()=>Z(e,i)},{children:a(K,{item:e.variables[i],readonly:C})}))}))]})})),B&&a("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(T[B].variables).map(((e,i)=>{var l;return A?(null===(l=T[B].variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(A.toLowerCase()))||q(T[B].variables[e])?U(T[B].variables[e],e):a(s,{}):U(T[B].variables[e],e)}))}))}))]}))}))})),a("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));export{V as AddVariableV2};
|
|
@@ -1,37 +1,25 @@
|
|
|
1
|
-
import o from"styled-components";import{COLORS as
|
|
1
|
+
import o from"styled-components";import{COLORS as e}from"../../../../constants/Theme.js";const r=o.div`
|
|
2
2
|
border-radius: ${o=>"2.0"===o.version?8:4}px;
|
|
3
3
|
border: ${o=>"2.0"===o.version?0:1}px solid
|
|
4
|
-
${
|
|
4
|
+
${e.stroke.primary};
|
|
5
5
|
max-height: 640px;
|
|
6
6
|
overflow: hidden;
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: row;
|
|
9
9
|
position: relative;
|
|
10
10
|
padding: ${o=>"2.0"===o.version?4:0}px;
|
|
11
|
-
background-color: ${
|
|
11
|
+
background-color: ${e.surface.standard};
|
|
12
12
|
`;o.div`
|
|
13
13
|
padding: 14px 16px 14px 18px;
|
|
14
14
|
flex-direction: row;
|
|
15
15
|
align-items: center;
|
|
16
16
|
border-bottom-width: 1px;
|
|
17
17
|
border-bottom-style: solid;
|
|
18
|
-
border-bottom-color: ${
|
|
18
|
+
border-bottom-color: ${e.stroke.primary};
|
|
19
19
|
width: 100%;
|
|
20
20
|
height: 100%;
|
|
21
|
-
`;const
|
|
21
|
+
`;const i=o.div`
|
|
22
22
|
max-height: ${o=>"number"==typeof o.maxHeight?`${o.maxHeight}px`:o.maxHeight};
|
|
23
23
|
overflow-y: auto;
|
|
24
24
|
position: relative;
|
|
25
|
-
|
|
26
|
-
background: #888;
|
|
27
|
-
border-radius: 8px;
|
|
28
|
-
}
|
|
29
|
-
&::-webkit-scrollbar {
|
|
30
|
-
height: 5px;
|
|
31
|
-
display: block;
|
|
32
|
-
width: 8px;
|
|
33
|
-
}
|
|
34
|
-
&::-webkit-scrollbar-thumb:horizontal {
|
|
35
|
-
width: 8px;
|
|
36
|
-
}
|
|
37
|
-
`;export{t as MenuListContainer,i as OpennedDropdownContainer};
|
|
25
|
+
`;export{i as MenuListContainer,r as OpennedDropdownContainer};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as h}from"../TypographyStyle.js";const
|
|
1
|
+
import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as h}from"../TypographyStyle.js";const m=o=>{let{type:s,allowMix:m,onChange:g,prevVariable:V,variablesList:T,onBlur:y,onlyVariables:f,placeHolder:x,showAddButton:j=!0,showHelp:C,showSideVariablePanel:S,errorMessage:w,showSideModal:k,maxCharLimit:A,noMaxCharCheck:N,labelText:B,labelElement:L,isRequired:M=!1,hintText:O}=o;const q=i(!0),E=i(null),[I,F]=t(!1),[R]=t(n()),[Z,$]=t(),[z,H]=t(V),[P,D]=t(!1),[W,G]=t(!1),[J,K]=t(0);return d((()=>{if(Z&&Z.actualValue)if(m){if(H((e=>{return{actualValue:(a=e.actualValue,l=Z.actualValue,r=J,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),E.current){K(E.current.selectionStart);const e=J+Z.actualValue.length+2;E.current.setSelectionRange(e,e),K(e)}}else H((e=>({actualValue:Z.actualValue,variableType:Z.variableType,needsFetching:Z.needsFetching})))}),[Z]),d((()=>{q.current?q.current=!1:g(z)}),[z]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(z.actualValue)},{children:[l(p,{isRequired:M,hintText:O,type:null!=s?s:"text",id:R,ref:E,skipFocus:!0,isActive:I,value:z.actualValue,validate:e=>[!0,""],errorMessage:w,noMaxCharCheck:N,maxCharLimit:A,labelText:B,labelElement:L,placeholder:x||"Add a value",onClick:e=>{E.current&&K(E.current.selectionStart)},onChangeText:(e,a)=>{if(E.current&&K(E.current.selectionStart),f){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||H({actualValue:"",variableType:"string"})}else H(m?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{F(!0),G(!0),document.getElementById("varList")&&!P&&D(!0)},onBlur:e=>{var a,l,r,i,t,d,o;null==y||y(e,z),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(E.current&&E.current.focus(),F(!0)):"search-bar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?F(!0):(F(!1),D(!1),G(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[z.actualValue&&C&&l("div",Object.assign({style:{marginTop:4}},{children:l(h,{children:`This value is of type ${z.variableType}`})})),j&&W&&l("div",Object.assign({style:{marginTop:w||O?"-24px":"0px"}},{children:l(v,Object.assign({id:"addVar",onClick:()=>{D(!P)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&P&&l(u,{data:T,showVariable:!0,setShowVariable:()=>{D(!1)},variableValue:Z,setVariableValue:$,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==R&&(D(!1),G(!1),F(!1)):(D(!1),G(!1),F(!1))}})]})),S&&P&&l(c,{zIndex:2e3,data:null!=T?T:[],showVariable:P,setShowVariable:()=>{D(!1)},placeholder:"Add a variable",customTrigger:e=>{$({actualValue:e.actualValue,variableType:"string"}),H(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==R&&(D(!1),G(!1),F(!1)):(D(!1),G(!1),F(!1))}})]})},b=o.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
margin-bottom: 16px;
|
|
4
4
|
input {
|
|
5
5
|
color: ${e=>e.isVar?s.stroke.brand:"black"};
|
|
6
6
|
}
|
|
7
|
-
`;export{
|
|
7
|
+
`;export{m as InputWithVariables};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r,useCallback as s}from"react";import{DEFAULT_THEME as n}from"../../constants/Theme.js";import{BodyCaption as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r,useCallback as s}from"react";import{DEFAULT_THEME as n}from"../../constants/Theme.js";import{BodyCaption as l}from"../TypographyStyle.js";import{TabHeader as a,EmptyTab as i,RightComponent as c,TabItem as d,TabItemText as b,TrailingNumberContainer as m}from"./Tabs.styles.js";const p=s=>{var l,d;const{tabs:b,initialTab:m,onTabSelected:p,TabItemStyledProps:g,selectedTab:x,extendedBorder:y,rightComponent:T,size:C="default",isSquared:S=!1,containerStyles:h}=s,[j,f]=o(m||b[0].key),{colorsV2:q}=n;r((()=>{x&&f(x)}),[x]);const k=s.backgroundColor,I=null!==(l=s.selectedTextColor)&&void 0!==l?l:q.background.brand,O=null!==(d=s.textColor)&&void 0!==d?d:q.content.secondary;return e(a,Object.assign({style:null!=h?h:{},bgColor:k},{children:[b.map(((e,o)=>t(u,{hasEqualSpacing:s.hasEqualSpacing,selectedTextColor:I,textColor:O,tab:e,currentTab:j,TabItemStyledProps:g,IconComponent:e.icon,size:C,setCurrentTab:e=>{p(e),f(e)},isSquared:S,isFirstlement:0==o,isLastElement:o==b.length-1},e.key))),y&&t(i,{}),t(c,{children:T})]}))},u=o=>{const{tab:r,currentTab:a,setCurrentTab:i,TabItemStyledProps:c,IconComponent:p,size:u="default",isSquared:g=!1,isFirstlement:x,isLastElement:y}=o,T=r.key===a,{colorsV2:C}=n,S=s((()=>Object.assign(Object.assign({},c),{borderRadius:o.isSquared?x?"4px 0px 0px 4px":y?"0px 4px 4px 0px":"":""})),[]);return e(d,Object.assign({style:S(),selected:T,hasEqualSpacing:o.hasEqualSpacing,onClick:()=>i(o.tab.key),selectedTextColor:o.selectedTextColor,isSquared:g},{children:[p&&t(p,{selected:T?C.background.brand:C.content.secondary}),t(b,Object.assign({style:"small"===u?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:o.textColor,selectedTextColor:o.selectedTextColor,selected:T},{children:r.title})),void 0!==r.trailingNumber&&null!==r.trailingNumber&&t(m,Object.assign({selected:T},{children:t(l,Object.assign({color:C.content.primaryInverse},{children:r.trailingNumber}))}))]}))};p.displayName="Tabs",u.displayName="TabItemComponent";export{u as TabItemComponent,p as Tabs};
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as a,useEffect as s}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import{useAdditionalVariables as p}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as m}from"../utils/validateIsUrl.js";import j,{Container as f}from"./VariableConnector.js";const g=g=>{let{variableListIndex:v,button:O,updateSelectedURLTemplateBtn:x,updateSelectedQRBTemplateBtn:y,currentVariableList:L,CTAoptions:h,QRBoptions:R,variableList:U}=g;var V,C,T,w;const[I,N]=a(""),[E,H]=a(),P=p({variableList:U,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:B,disableEditVariable:Q,pod:_,selectedCarouselIndex:S,originalVariableList:A,setOriginalVariableList:K,isProductCarouselType:Y}=d();function $(t){if(N(t),null!=S&&S>-1&&Y){const e=l(A);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[v];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const a=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:a})}));null==K||K((t=>Object.assign(Object.assign({},t),{cards:l}))),null==x||x(`https://${t}`,"custom",v)}return}let e=L.buttons.filter((t=>"URL"===t.type))[v];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const a=L.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),s=Object.assign({},null!=S&&S>-1?A.cards[S]:A);if(s.buttons=a,null!=S&&S>-1){const t=[...A.cards];t[S]=s,null==K||K((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==K||K((t=>Object.assign(Object.assign({},t),{buttons:[...a]})));null==x||x(`https://${t}`,"custom",v)}return s((()=>{var t;if(O.buttonVariable&&i.test(O.buttonVariable))H(r),N((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:R;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),t>-1&&H(e[t])}}),[]),_!==c.CHATBOT?t(f,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:b.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:Q,options:"URL"===O.type?h:R,isSearchable:!0,onSelect:function(t,e){const a=t;H(a);const s=("URL"===O.type?h:R).find((t=>t.placeHolder===a.placeHolder));if(s)if("custom_link"!==s.value){if(null!=S&&S>-1&&Y){const t=l(A);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[v];e=Object.assign(Object.assign({},e),{buttonVariable:a.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==x||x({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",v),null==K||K((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[v];e=Object.assign(Object.assign({},e),{flowName:a.label,flowId:a.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==y||y({flowName:a.label,flowId:a.value},"placeholder",v),null==K||K((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=L.buttons.filter((t=>"URL"===t.type))[v];e=Object.assign(Object.assign({},e),{buttonVariable:a.placeHolder}),t=L.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==x||x({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",v)}else{let e=L.buttons.filter((t=>"QUICK_REPLY"===t.type))[v];e=Object.assign(Object.assign({},e),{flowName:a.label,flowId:a.value}),t=L.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==y||y({flowName:a.label,flowId:a.value},"placeholder",v)}const e=Object.assign({},null!=S&&S>-1?A.cards[S]:A);if(e.buttons=t,null!=S&&S>-1){const t=[...A.cards];t[S]=e,null==K||K((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==K||K((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else $("")},defaultOptions:E?[Object.assign(Object.assign({},E),{selected:!0})]:[]})})),"custom_link"===(null==E?void 0:E.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:Q?"disabled":"none",errorMessage:B?I?m(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:$,maxCharLimit:2e3})}))]}):e(j,{index:v,variable:{variableName:null!==(V=O.text)&&void 0!==V?V:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(C=O.example)||void 0===C?void 0:C[0]}`:null!==(T=O.buttonVariable)&&void 0!==T?T:"",type:"link",isEditableVariable:!0,index:null!==(w=O.index)&&void 0!==w?w:0},showVariableModal:!0,componentType:"BUTTONS",variableList:P,CTAoptions:h})};export{g as default};
|