@bikdotai/bik-component-library 0.0.403 → 0.0.406-beta.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/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +2 -2
- package/dist/esm/components/add-variableV2/AddVariableV2.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +2 -2
- 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"),j=require("../../constants/Theme.js"),v=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),[A,E]=r.useState(!0);r.useEffect((()=>{const e={};p.forEach((a=>{e[a.displayName]=[]})),V(e)}),[p]),r.useEffect((()=>{z(!0)}),[]),r.useEffect((()=>{E(!0),B(""),H([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("");const e=m.data.map((e=>M(e))).filter((e=>null!==e));I(e),e.length>0?q(!0):q(!1)}),[m.reRender]),r.useEffect((()=>{if(T){R(m.data,A).length>0?q(!0):q(!1)}else q(!0)}),[T]);const R=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])}))))},H=(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===A){a=!0;break}}}return a},z=e=>{if(E(e),e){let a=[];if(w){const e=S[w];a=m.data.filter((e=>e.displayName===w)).map((a=>M(a,e))).filter((e=>null!=e))}else a=m.data.map((e=>M(e))).filter((e=>null!==e));I(a),T&&(a=R(a,e)),a.length>0?q(!0):q(!1)}else if(I(m.data),T){R(m.data,e).length>0?q(!0):q(!1)}else q(!0)};function M(e,a){const s={};if(a){for(const i in e.variables)if(e.variables[i]===a)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a])}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 $=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:j.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)=>A&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{const e=[...C[w],s];H(e,w),V((a=>Object.assign(Object.assign({},a),{[w]:e})))}:()=>{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($,{item:e,readonly:O})})),G=(e,a)=>{const s=[...C[e.displayName],a];H(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("."),s=a[0]+`['${a[1]}']`;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(v.CloseButtonContainer,Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{zIndex:300}},{children:a.jsx(t.default,{height:20,width:20,color:j.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:j.COLORS.content.secondary}},{children:"Show only recommended variables"})),a.jsx(g.Switch,{value:A,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:()=>{const e=C[w].slice(0,-1);H(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:()=>{H([],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!"}),A?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($,{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($,{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=>M(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=>M(e))).filter((e=>null!==e));else{const e=S[w];s=m.data.filter((e=>e.displayName===w)).map((a=>M(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 M(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&&M(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 $=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($,{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("."),s=a[0]+`['${a[1]}']`;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($,{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($,{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 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),o=require("./Input.styled.js");const a=t.forwardRef(((a,u)=>{var c,d,v,h,p;const{placeholder:f,leftIcon:x,rightIcon:g,labelText:j,maxCharLimit:y,isRequired:b,hintText:I,type:C,state:m,validate:w,variant:E,button:S,suffixText:O,prefixText:k,onChangeText:q,value:F,noErrorHint:H,reset:L,rangeValidation:M,noKeyDownChange:T,version:B,noMaxCharCheck:D}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},a),R=null==x?void 0:x.icon,A=null==g?void 0:g.icon,[z,K]=t.useState(!1),[P,W]=t.useState(!1),[_,N]=t.useState(),V="small"===E?"18px":"22px",G=t.useContext(l.InputStyleContext),[J,Q]=t.useState(),U=t.useRef(null),X=null!=u?u:U;t.useEffect((()=>{Q(F)}),[F]),t.useEffect((()=>{var e;X.current&&(null===(e=a.onReferenceInit)||void 0===e||e.call(a,X.current))}),[X]),t.useEffect((()=>{const e=X.current;if(e)return e.addEventListener("wheel",ee,{passive:!1}),()=>{e.removeEventListener("wheel",ee)}}),[]),t.useEffect((()=>{L&&Q("")}),[L]),t.useEffect((()=>{var e;W(!!a.isActive),a.isActive&&(null===(e=X.current)||void 0===e||e.focus())}),[a.isActive]),t.useEffect((()=>{N(a.errorMessage)}),[a.errorMessage]),t.useEffect((()=>{var e;K(!1),("invalid"===a.state||_)&&K(!0),"active"===a.state&&(null===(e=X.current)||void 0===e||e.focus())}),[a.state,_]),t.useEffect((()=>{K(!!_)}),[_]);const Y=function(e){if(i.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];e(...n)}},Z=()=>"zip"===C?6:60,$=e=>{const t=y||Z();if(T||q(F||"",e),D)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ee=e=>{e.preventDefault()},te=e=>{const t=e.target.value,n=y||Z();if(!D&&n>0&&t.length>=n)return void e.preventDefault();q(t,e),a.textControl||Q(t);const r=w||i.validateInput;if(!r||!i.isFunction(r))return;const[s,l]=r(t,C,M);K(!s),N(a.errorMessage?a.errorMessage:l)},ne=e=>{var t;a.skipFocus||W(!0),Y(null===(t=a.onFocus)||void 0===t?void 0:t.call(a,e))},ie=e=>{var t;a.skipFocus||W(!1),Y(null===(t=a.onBlur)||void 0===t?void 0:t.call(a,e))},re=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==C&&e.jsx("input",{id:a.id,style:null!==(t=null==G?void 0:G.input)&&void 0!==t?t:{},ref:X,type:["phonenumber","zip","number"].includes(C)?"number":C,value:J,onFocus:e=>ne(e),onBlur:e=>ie(e),placeholder:f||"Enter here",onChange:te,onKeyDown:e=>$(e)}),"multiline"===C&&e.jsx("textarea",{value:J,ref:X,onFocus:e=>ne(e),onBlur:e=>ie(e),placeholder:f||"Enter here",onChange:te,onKeyDown:e=>$(e),maxLength:y>0?y:void 0})]})};return e.jsxs(o.RootContainer,Object.assign({width:a.width,height:a.height,state:m,type:C,style:null!==(c=null==G?void 0:G.RootContainer)&&void 0!==c?c:{}},{children:[!H&&(!!I||!!_)&&e.jsxs(o.InputFooter,Object.assign({invalid:!!_},{children:[!!_&&e.jsx(s.default,{width:16,height:16}),_||I]})),e.jsxs(o.InputWrapper,Object.assign({variant:E,state:m,width:a.width,isActive:"active"===m||P,isInvalid:z,style:null!==(d=null==G?void 0:G.InputWrapper)&&void 0!==d?d:{},version:B,height:a.height},{children:[!!R&&e.jsx(o.IconHolder,Object.assign({variant:E,iconSize:V,onClick:()=>Y(null==x?void 0:x.callback),isLeft:!0,style:null!==(v=null==G?void 0:G.IconHolder)&&void 0!==v?v:{}},{children:e.jsx(R,{})})),!!k&&e.jsx(o.PrefixHolder,Object.assign({variant:E},{children:k})),"default"===E&&e.jsx(o.InputContainer,Object.assign({height:a.height,type:a.type},{children:re()})),"small"===E&&e.jsx(o.InputContainerSmall,Object.assign({height:a.height,type:a.type},{children:re()})),!!A&&e.jsx(o.IconHolder,Object.assign({variant:E,iconSize:V,onClick:()=>Y(null==g?void 0:g.callback),isLeft:!1},{children:e.jsx(A,{})})),!!O&&e.jsx(o.SuffixHolder,Object.assign({variant:E},{children:O})),S&&S.text&&e.jsx(n.Button,{buttonText:S.text,onClick:()=>Y(null==S?void 0:S.onClick)})]})),(!!j||!!y)&&e.jsxs(o.InputHeader,Object.assign({invalid:z},{children:[e.jsxs(r.BodySecondary,{children:[j,b?e.jsx("span",{children:"*"}):""]}),y>0&&e.jsxs(o.MaxCharStyle,{children:[null!==(p=null===(h=a.value)||void 0===h?void 0:h.length)&&void 0!==p?p:0,"/",y]})]}))]}))}));a.displayName="Input",exports.Input=a;
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var n=require("../../shimmer-image/ShimmerImage.js"),o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),s=require("./EditMediaModal.js"),d=require("./EditMediaV2.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(i);exports.default=c=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:v,variableListForImage:E}=c;var g,j,h;const{disableEditVariable:b}=l.useTemplateModalContext(),[M,_]=i.useState(void 0),[A,I]=i.useState(),[S,T]=i.useState(),[x,y]=i.useState(!1),C=u.default.createRef(),[q,R]=i.useState(!1),[D,O]=i.useState(""),{template:w,setTemplate:H}=l.useTemplateModalContext();let F;function P(){var e;(null===(e=null==C?void 0:C.current)||void 0===e?void 0:e.click)&&C.current.click()}function k(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)O(a),R(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield v.uploadMediaFiles({file:t,fileName:M,isImage:e});if(a.success){const[e]=t.type.split("/");f(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else O("An unknown technical error occured");R(!1)}}else O("An unknown technical error occured"),R(!1)}))}return F=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(s.default,{mediaComponentFormat:null!==(g=p.format)&&void 0!==g?g:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){if(O(""),T(""),y(!1),t)if(t.startsWith("https"))try{R(!0);const e=yield fetch(t),i=yield e.blob();yield k(i)}catch(e){O("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){T(t);const e=Object.assign({},w);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:p.format,example:{header_handle:[n.DEFAULT_IMAGE]}}),a=[...e.components];a[t]=i,e.components=a}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),R(!1),null==H||H(Object.assign({},e))}else R(!1),O("Invalid URL or variable");else P()}))},variableListForImage:E||[],setOpenEditMedia:y,openEditMedia:x}),!!A&&t.jsx(r.BikImageCropper,{aspectRatio:15/8,src:A,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){R(!1),O("");const e=yield fetch(t);k(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{R(!1),I(""),C.current&&(C.current.value="")}}),t.jsx("input",{ref:C,style:{display:"none"},type:"file",onChange:function(e){var t;O(""),R(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;I(""),_(""),e.onload=()=>{I(e.result),_(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else k(i)},accept:F}),t.jsx(d.default,{imageName:null!==(h=null===(j=null==p?void 0:p.example)||void 0===j?void 0:j.header_handle)&&void 0!==h?h:[],handleImageChange:P,mediaType:null==p?void 0:p.format,error:D,isLoading:q,setOpenEditMedia:y,selectedVariable:S,disableEditVariable:b})]})};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
5
|
-
width: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"236px":"
|
|
5
|
+
width: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"236px":"360px"};
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,h=p.default.forwardRef(((t,a)=>{let{display_content:l,channel:p,template:n,showSampleValues:h}=t;const{pod:m}=s.useTemplateModalContext();return e.jsx("div",{children:e.jsxs(d,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:p===o.CHANNEL_TYPE.WHATSAPP?236:
|
|
20
|
+
`,h=p.default.forwardRef(((t,a)=>{let{display_content:l,channel:p,template:n,showSampleValues:h}=t;const{pod:m}=s.useTemplateModalContext();return e.jsx("div",{children:e.jsxs(d,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:p===o.CHANNEL_TYPE.WHATSAPP?236:360,height:443}}),e.jsx(c,Object.assign({ref:a},{children:e.jsx(i.TemplatePreview,{showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:l},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:m!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:l,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));h.displayName="MobilePreview",exports.default=h;
|
|
@@ -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
|
|
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 j}from"../switch/Switch.js";import{BodySecondary as f,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,F]=d(""),[H,E]=d(!0),z=/^[^.]*\.[^.]*$/,[P,R]=d(c.data),[$,M]=d(!0);b((()=>{const e={};V.forEach((a=>{e[a.displayName]=[]})),L(e)}),[V]),b((()=>{G(!0)}),[]),b((()=>{G($,!B)}),[T,B]),b((()=>{M(!0),F(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("");const e=c.data.map((e=>J(e))).filter((e=>null!==e));R(e),e.length>0?E(!0):E(!1)}),[c.reRender]),b((()=>{let e=c.data;B&&(e=[T[B]]);W(e,$).length>0?E(!0):E(!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===$){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))}R(i),A&&(i=W(i,e)),i.length>0?E(!0):E(!1)}else if(R(c.data),A){W(c.data,e).length>0?E(!0):E(!1)}else E(!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)=>$&&!e.isAvailable?a(s,{}):a("div",Object.assign({onClick:e.isSubHeader?()=>{W([e],$).length||E(!1),F("");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("."),i=a[0]+`['${a[1]}']`;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=>{F(e)},onEnter:()=>{},reset:!A,placeholder:"Search...",variant:"default"}),i("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a(f,Object.assign({style:{color:u.content.secondary}},{children:"Show only recommended variables"})),a(j,{value:$,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:()=>{F("");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:()=>{F(""),D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("")}}),a("div",{children:"First page"})]}))]}))]})),!H&&i("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a(O,{children:"No results found!"}),a(N,$?{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 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as v}from"../TypographyStyle.js";import d from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as v}from"../TypographyStyle.js";import d from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as f,IconHolder as m,PrefixHolder as x,InputContainer as y,InputContainerSmall as b,SuffixHolder as j,InputHeader as C,MaxCharStyle as w}from"./Input.styled.js";const I=i(((i,I)=>{var O,k,L,T,D;const{placeholder:A,leftIcon:E,rightIcon:F,labelText:M,maxCharLimit:z,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==E?void 0:E.icon,_=null==F?void 0:F.icon,[ee,te]=r(!1),[ne,ie]=r(!1),[re,le]=r(),oe="small"===q?"18px":"22px",ae=l(h),[se,ce]=r(),ue=o(null),ve=null!=I?I:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;ve.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,ve.current))}),[ve]),a((()=>{const e=ve.current;if(e)return e.addEventListener("wheel",ge,{passive:!1}),()=>{e.removeEventListener("wheel",ge)}}),[]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{le(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;te(!1),("invalid"===i.state||re)&&te(!0),"active"===i.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{te(!!re)}),[re]);const de=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},he=()=>"zip"===K?6:60,pe=e=>{const t=z||he();if(X||W(G||"",e),Z)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ge=e=>{e.preventDefault()},fe=e=>{const t=e.target.value,n=z||he();if(!Z&&n>0&&t.length>=n)return void e.preventDefault();W(t,e),i.textControl||ce(t);const r=H||u;if(!r||!c(r))return;const[l,o]=r(t,K,U);te(!l),le(i.errorMessage?i.errorMessage:o)},me=e=>{var t;i.skipFocus||ie(!0),de(null===(t=i.onFocus)||void 0===t?void 0:t.call(i,e))},xe=e=>{var t;i.skipFocus||ie(!1),de(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))},ye=()=>{var r;return e(n,{children:["multiline"!==K&&t("input",{id:i.id,style:null!==(r=null==ae?void 0:ae.input)&&void 0!==r?r:{},ref:ve,type:["phonenumber","zip","number"].includes(K)?"number":K,value:se,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e)}),"multiline"===K&&t("textarea",{value:se,ref:ve,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e),maxLength:z>0?z:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(O=null==ae?void 0:ae.RootContainer)&&void 0!==O?O:{}},{children:[!J&&(!!S||!!re)&&e(g,Object.assign({invalid:!!re},{children:[!!re&&t(d,{width:16,height:16}),re||S]})),e(f,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||ne,isInvalid:ee,style:null!==(k=null==ae?void 0:ae.InputWrapper)&&void 0!==k?k:{},version:Y,height:i.height},{children:[!!$&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==E?void 0:E.callback),isLeft:!0,style:null!==(L=null==ae?void 0:ae.IconHolder)&&void 0!==L?L:{}},{children:t($,{})})),!!V&&t(x,Object.assign({variant:q},{children:V})),"default"===q&&t(y,Object.assign({height:i.height,type:i.type},{children:ye()})),"small"===q&&t(b,Object.assign({height:i.height,type:i.type},{children:ye()})),!!_&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==F?void 0:F.callback),isLeft:!1},{children:t(_,{})})),!!P&&t(j,Object.assign({variant:q},{children:P})),N&&N.text&&t(s,{buttonText:N.text,onClick:()=>de(null==N?void 0:N.onClick)})]})),(!!M||!!z)&&e(C,Object.assign({invalid:ee},{children:[e(v,{children:[M,B?t("span",{children:"*"}):""]}),z>0&&e(w,{children:[null!==(D=null===(T=i.value)||void 0===T?void 0:T.length)&&void 0!==D?D:0,"/",z]})]}))]}))}));I.displayName="Input";export{I as Input};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as o}from"react/jsx-runtime";import n,{useState as a}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{DEFAULT_IMAGE as s}from"../../shimmer-image/ShimmerImage.js";import{HEADER_TYPES as m}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import p from"./EditMediaModal.js";import c from"./EditMediaV2.js";const f=f=>{let{mediaComponent:u,template:v,updateTemplateImageUrl:g,whatsappSpecificPickerMeta:h,variableListForImage:j}=f;var b,E,M;const{disableEditVariable:I}=d(),[y,C]=a(void 0),[O,A]=a(),[x,k]=a(),[w,T]=a(!1),F=n.createRef(),[R,U]=a(!1),[L,N]=a(""),{template:V,setTemplate:D}=d();let G;function S(){var e;(null===(e=null==F?void 0:F.current)||void 0===e?void 0:e.click)&&F.current.click()}function _(t){var i;return e(this,void 0,void 0,(function*(){const e=new r;if(t instanceof Blob){const o=e.validate(t);if(o)N(o),U(!1);else{const e=u.format===m.IMAGE,o=yield h.uploadMediaFiles({file:t,fileName:y,isImage:e});if(o.success){const[e]=t.type.split("/");g(null!==(i=o.url)&&void 0!==i?i:"","application"===e?m.DOCUMENT:m[e.toUpperCase()])}else N("An unknown technical error occured");U(!1)}}else N("An unknown technical error occured"),U(!1)}))}return G=u.format===m.IMAGE?"image/png, image/jpeg":u.format===m.VIDEO?"video/mp4":"application/pdf",t(i,{children:[o(p,{mediaComponentFormat:null!==(b=u.format)&&void 0!==b?b:m.IMAGE,uploadMedia:function(t){var i;return e(this,void 0,void 0,(function*(){if(N(""),k(""),T(!1),t)if(t.startsWith("https"))try{U(!0);const e=yield fetch(t),i=yield e.blob();yield _(i)}catch(e){N("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){k(t);const e=Object.assign({},V);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:u.format,example:{header_handle:[s]}}),o=[...e.components];o[t]=i,e.components=o}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),U(!1),null==D||D(Object.assign({},e))}else U(!1),N("Invalid URL or variable");else S()}))},variableListForImage:j||[],setOpenEditMedia:T,openEditMedia:w}),!!O&&o(l,{aspectRatio:15/8,src:O,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){U(!1),N("");const e=yield fetch(t);_(yield e.blob()).then((()=>{A(void 0)}))}))},onCancel:()=>{U(!1),A("")}}),o("input",{ref:F,style:{display:"none"},type:"file",onChange:function(e){var t;N(""),U(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(u.format===m.IMAGE){const e=new FileReader;A(""),C(""),e.onload=()=>{A(e.result),C(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else _(i)},accept:G}),o(c,{imageName:null!==(M=null===(E=null==u?void 0:u.example)||void 0===E?void 0:E.header_handle)&&void 0!==M?M:[],handleImageChange:S,mediaType:null==u?void 0:u.format,error:L,isLoading:R,setOpenEditMedia:T,selectedVariable:x,disableEditVariable:I})]})};export{f as default};
|
|
1
|
+
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as o}from"react/jsx-runtime";import n,{useState as a}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{DEFAULT_IMAGE as s}from"../../shimmer-image/ShimmerImage.js";import{HEADER_TYPES as m}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import p from"./EditMediaModal.js";import c from"./EditMediaV2.js";const f=f=>{let{mediaComponent:u,template:v,updateTemplateImageUrl:g,whatsappSpecificPickerMeta:h,variableListForImage:j}=f;var b,E,M;const{disableEditVariable:I}=d(),[y,C]=a(void 0),[O,A]=a(),[x,k]=a(),[w,T]=a(!1),F=n.createRef(),[R,U]=a(!1),[L,N]=a(""),{template:V,setTemplate:D}=d();let G;function S(){var e;(null===(e=null==F?void 0:F.current)||void 0===e?void 0:e.click)&&F.current.click()}function _(t){var i;return e(this,void 0,void 0,(function*(){const e=new r;if(t instanceof Blob){const o=e.validate(t);if(o)N(o),U(!1);else{const e=u.format===m.IMAGE,o=yield h.uploadMediaFiles({file:t,fileName:y,isImage:e});if(o.success){const[e]=t.type.split("/");g(null!==(i=o.url)&&void 0!==i?i:"","application"===e?m.DOCUMENT:m[e.toUpperCase()])}else N("An unknown technical error occured");U(!1)}}else N("An unknown technical error occured"),U(!1)}))}return G=u.format===m.IMAGE?"image/png, image/jpeg":u.format===m.VIDEO?"video/mp4":"application/pdf",t(i,{children:[o(p,{mediaComponentFormat:null!==(b=u.format)&&void 0!==b?b:m.IMAGE,uploadMedia:function(t){var i;return e(this,void 0,void 0,(function*(){if(N(""),k(""),T(!1),t)if(t.startsWith("https"))try{U(!0);const e=yield fetch(t),i=yield e.blob();yield _(i)}catch(e){N("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){k(t);const e=Object.assign({},V);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:u.format,example:{header_handle:[s]}}),o=[...e.components];o[t]=i,e.components=o}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),U(!1),null==D||D(Object.assign({},e))}else U(!1),N("Invalid URL or variable");else S()}))},variableListForImage:j||[],setOpenEditMedia:T,openEditMedia:w}),!!O&&o(l,{aspectRatio:15/8,src:O,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){U(!1),N("");const e=yield fetch(t);_(yield e.blob()).then((()=>{A(void 0)}))}))},onCancel:()=>{U(!1),A(""),F.current&&(F.current.value="")}}),o("input",{ref:F,style:{display:"none"},type:"file",onChange:function(e){var t;N(""),U(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(u.format===m.IMAGE){const e=new FileReader;A(""),C(""),e.onload=()=>{A(e.result),C(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else _(i)},accept:G}),o(c,{imageName:null!==(M=null===(E=null==u?void 0:u.example)||void 0===E?void 0:E.header_handle)&&void 0!==M?M:[],handleImageChange:S,mediaType:null==u?void 0:u.format,error:L,isLoading:R,setOpenEditMedia:T,selectedVariable:x,disableEditVariable:I})]})};export{f as default};
|
|
@@ -2,7 +2,7 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
|
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
5
|
-
width: ${e=>e.channel===r.WHATSAPP?"236px":"
|
|
5
|
+
width: ${e=>e.channel===r.WHATSAPP?"236px":"360px"};
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,n=i.forwardRef(((i,a)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=l();return e("div",{children:t(s,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:h===r.WHATSAPP?236:
|
|
20
|
+
`,n=i.forwardRef(((i,a)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=l();return e("div",{children:t(s,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:h===r.WHATSAPP?236:360,height:443}}),e(m,Object.assign({ref:a},{children:e(o,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));n.displayName="MobilePreview";export{n as default};
|