@bikdotai/bik-component-library 0.0.400-beta.3 → 0.0.400-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/add-variableV2/AddVariableV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts +2 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts +3 -1
- 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/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts +2 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts +3 -1
- 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=>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
|
+
"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 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),n=require("../context/templateModalContext.js"),i=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),l=require("./DiscountCodeComponent.js"),s=require("./EditMediaV2.style.js"),d=require("./EditWhatsAppTemplateMediaV2.js"),r=require("./VariableConnectorsPanel.js"),u=require("./VariableConnectorWhatsApp.js"),c=require("./VariableEditorHeader.js"),p=require("./WhatsAppTemplateCardButtonV2.js");exports.default=v=>{let{template:m,onTemplateChange:b,whatsappSpecificPickerMeta:g,showVariableModal:h,variableList:f,variableListForImage:j,discountCode:T,setDiscountCode:x}=v;var C,O,E,k,y,B,V,w,q,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),n=require("../context/templateModalContext.js"),i=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),l=require("./DiscountCodeComponent.js"),s=require("./EditMediaV2.style.js"),d=require("./EditWhatsAppTemplateMediaV2.js"),r=require("./VariableConnectorsPanel.js"),u=require("./VariableConnectorWhatsApp.js"),c=require("./VariableEditorHeader.js"),p=require("./WhatsAppTemplateCardButtonV2.js");exports.default=v=>{let{template:m,onTemplateChange:b,whatsappSpecificPickerMeta:g,showVariableModal:h,variableList:f,variableListForImage:j,discountCode:T,setDiscountCode:x}=v;var C,O,E,k,y,B,V,w,L,q,I,M,A,D,R,U;const{originalVariableList:P,pod:H,extras:S}=n.useTemplateModalContext(),{descriptionComponents:N,urlBtns:Q,qrbBtns:_,imageComponent:F,bodyVariables:W,headerVariables:K}=i.getAllDataFromTemplateComponent(m),[Y,$]=t.useState(!1);function X(e,t){var o,n,i,a,l;const s=Object.assign({},m),d=null==s?void 0:s.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==d&&d>-1){const l=null===(o=null==s?void 0:s.components[d].buttons)||void 0===o?void 0:o.findIndex((e=>"URL"===e.type));if(void 0!==l&&l>-1){const o="custom"===t&&"string"==typeof e,r=[...null!==(a=null===(i=null===(n=s.components)||void 0===n?void 0:n[d])||void 0===i?void 0:i.buttons)&&void 0!==a?a:[]];r[l]=Object.assign(Object.assign({},r[l]),{url:"https://d.bik.ai/{{1}}",example:[o?e:"string"!=typeof e?e.defaultValue:""]});const u=Object.assign(Object.assign({},s.components[d]),{buttons:r}),c=Object.assign(Object.assign({},s.mapping),{buttons:o?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});s.mapping=c;const p=[...s.components];p[d]=u,s.components=p}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(l=e.placeHolder)||void 0===l?void 0:l.slice(2,-2))?$(!0):($(!1),null==x||x(""))}null==b||b(s)}function z(e,t,o){var n;const i=Object.assign({},m),a=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==a&&a>-1){const t=null===(n=null==i?void 0:i.components[a].buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));t&&(t[o]=Object.assign(Object.assign({},t[o]),{flowId:e.flowId,flowName:e.flowName}));const l=Object.assign(Object.assign({},i.components[a]),{buttons:t}),s=[...i.components];s[a]=l,i.components=s}null==b||b(i)}return t.useEffect((()=>{var e;const t=null===(e=m.mapping.buttons)||void 0===e?void 0:e[0];"checkout.checkoutUrl"===(null==t?void 0:t.slice(2,-2))?$(!0):($(!1),null==x||x(""))}),[m]),e.jsxs(r.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!F&&e.jsx(s.EditTemplateMediaContainer,{children:e.jsx(d.default,{whatsappSpecificPickerMeta:g,mediaComponent:F,updateTemplateImageUrl:function(e,t){var o;let n=Object.assign({},m);const i=null===(o=null==n?void 0:n.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const o=Object.assign(Object.assign({},n.components[i]),{format:t,example:{header_handle:[e]}}),a=[...n.components];a[i]=o,n=Object.assign(Object.assign({},n),{components:a})}n.mapping&&(n.mapping=Object.assign(Object.assign({},n.mapping),{header:void 0})),null==b||b(Object.assign({},n))},template:m,variableListForImage:j})}),(W.length>0||K.length>0)&&e.jsx(c.default,{containerStyle:{paddingTop:F?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==N?void 0:N.map(((t,o)=>e.jsx(u.default,{originalVariableList:P,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?m.mapping.header:m.mapping.body,showVariableModal:h,variableList:f},o))),(null===(O=null===(C=Q[0])||void 0===C?void 0:C.component)||void 0===O?void 0:O.buttons)&&(null===(y=null===(k=null===(E=Q[0])||void 0===E?void 0:E.component)||void 0===k?void 0:k.buttons)||void 0===y?void 0:y.length)>0&&e.jsx(c.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(B=null==P?void 0:P.buttons)||void 0===B?void 0:B.map(((t,o)=>{if("URL"===t.type)return e.jsx(p.default,{CTAoptions:null==g?void 0:g.CTAoptions,button:t,originalVariableList:P,updateSelectedURLTemplateBtn:X,variableList:f},`${o}`)})),(null===(w=null===(V=_[0])||void 0===V?void 0:V.component)||void 0===w?void 0:w.buttons)&&(null===(I=null===(q=null===(L=_[0])||void 0===L?void 0:L.component)||void 0===q?void 0:q.buttons)||void 0===I?void 0:I.length)>0&&(H!==o.POD.CHATBOT?e.jsx(c.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(M=null==S?void 0:S.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(A=null==S?void 0:S.backTrackExtra)||void 0===A?void 0:A[1]})),null===(D=null==P?void 0:P.buttons)||void 0===D?void 0:D.map(((t,o)=>{if("QUICK_REPLY"===t.type)return e.jsx(p.default,{QRBoptions:null==g?void 0:g.QRBoptions,button:t,originalVariableList:P,updateSelectedQRBTemplateBtn:z},`${o}`)})),H===o.POD.CHATBOT&&Y&&e.jsx(l.DiscountCodeComponent,{discountCode:null===(R=null==S?void 0:S.discountCodeExtra)||void 0===R?void 0:R[0],setDiscountCode:null===(U=null==S?void 0:S.discountCodeExtra)||void 0===U?void 0:U[1],variableList:f})]}))};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
4
|
-
import { CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
|
|
4
|
+
import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
|
|
5
5
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
focused?: boolean | undefined;
|
|
7
7
|
channel?: CHANNEL_TYPE | undefined;
|
|
@@ -15,6 +15,7 @@ export interface VariableConnectorProps {
|
|
|
15
15
|
variableList?: VariableListInterfaceV2[];
|
|
16
16
|
setShowDiscountCheckBox?: any;
|
|
17
17
|
componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
|
|
18
|
+
CTAoptions?: ButtonPlaceHolderOptions[];
|
|
18
19
|
}
|
|
19
20
|
declare const VariableConnector: React.FC<VariableConnectorProps>;
|
|
20
21
|
export default VariableConnector;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../dropdown/Dropdown.js"),i=require("../../input/Input.js"),s=require("../../product-picker-v2/collectionScreen.js"),u=require("../../template-preview/constants/regexPatterns.js"),d=require("../../template-preview/models/Channels.js"),r=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),p=require("../../../utils/StringUtils.js"),v=require("../../../constants/Theme.js"),m=require("../context/templateModalContext.js"),b=require("../utils/getVariableNameEmail.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=g(a).default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===d.CHANNEL_TYPE.EMAIL?
|
|
4
|
+
background: ${e=>e.focused&&e.channel===d.CHANNEL_TYPE.EMAIL?v.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,h={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:E,index:_,showVariableModal:j,variableList:y,setShowDiscountCheckBox:A,componentType:O}=a;var f,T;const[N,P]=l.useState(!1),[C,L]=l.useState(""),[V,k]=l.useState([]),[S,H]=l.useState(),[w,Y]=l.useState(!1),[M,q]=l.useState(!1),{device:B,channel:R,isError:W,originalVariableList:D,template:I,templateSelectionTriggered:$,setTemplate:z,setDisplayContent:U,setOriginalVariableList:Z,globalNormalizedPlaceholders:F,enabledCustomText:G}=v.useTemplateModalContext();function J(e,t){var l,a,n;const i=e;L(""),H(i),R===d.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(K(null!==(l=i.value)&&void 0!==l?l:"","string"),null==Q||Q(null!==(a=E.index)&&void 0!==a?a:0,i.value,!0)):(null==Q||Q(null!==(n=E.index)&&void 0!==n?n:0,E.variableName,!0,"custom_text"),K("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?K(i.value,"url"===i.bikPlaceholderType?"link":"string"):(L(""),K("",i.value))}function K(e,t){var l,a,n;const i="custom_link"===t?"link":"custom_text"===t?"string":t;if(R!==d.CHANNEL_TYPE.WHATSAPP){const a=m.getVariableNameForEmailByIndex(_+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===B?"template_html_mobile":"template_html_desktop"),o=R===d.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const u=D.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t));null==Z||Z(u)}if(R===d.CHANNEL_TYPE.WHATSAPP){const t=D;let l=t.body,o=t.header;"BODY"===O?l=null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t)):"HEADER"===O&&(o=null===(n=t.header)||void 0===n?void 0:n.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t))),null==Z||Z((e=>Object.assign(Object.assign({},e),{header:o,body:l,buttons:t.buttons})))}}function Q(e,t,l,a){var n,i,o;const u=Object.assign({},I),s=null===(n=null==u?void 0:u.components)||void 0===n?void 0:n.map((l=>{var a,n,i,o,u,s,d,r;const c=Object.assign({},l);if("BODY"===l.type&&"BODY"===O){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(u=null===(o=null===(i=c.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{body_text:[l]});return Object.assign(Object.assign({},c),{example:a})}}else if("HEADER"===l.type&&"HEADER"===O&&(null===(s=l.example)||void 0===s?void 0:s.header_text)){const l=[...null!==(r=null===(d=c.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{header_text:l});return Object.assign(Object.assign({},c),{example:a})}return l}));u.components=s,l&&("BODY"===O&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))}):"HEADER"===O&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:t:l))}))),null==z||z(Object.assign({},u))}return l.useEffect((()=>{N&&(null==b||b())}),[N]),l.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===B?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),u=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);R===d.CHANNEL_TYPE.EMAIL&&(null==U||U(u))}()}),[$]),l.useEffect((()=>{var e;const t=[];let l=[];if(R!==d.CHANNEL_TYPE.MESSAGE||G){"link"===(null==E?void 0:E.type)?(t.push({label:"",options:[h,x]}),H(h)):(t.push({label:"",options:[h,x]}),H(x));const e=null!=F?F:[];k([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:c.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}else{const e=null!=F?F:[];k([{label:"",options:[x,h]},...e]),l=[{label:"",options:[x,h]},...e]}if((R===d.CHANNEL_TYPE.WHATSAPP||R===d.CHANNEL_TYPE.EMAIL||R===d.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(s.placeHolderNamePattern.test(E.updatedValue)&&R===d.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&R!==d.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===d.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");j?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(E,l,R);e.value&&H(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(H(h),L(E.updatedValue.split("https://")[1])):(H(x),L(E.updatedValue))}),[]),l.useEffect((()=>{B&&S&&C&&setTimeout((()=>{K("custom_link"===(null==S?void 0:S.value)&&C?C.includes("https")?C:`https://${C}`:C,S.value)}),100)}),[B]),l.useEffect((()=>{!M&&S&&E.updatedValue&&setTimeout((()=>{K("custom_link"===(null==S?void 0:S.value)&&C?C.includes("https")?E.updatedValue:`https://${E.updatedValue}`:E.updatedValue,S.value),q(!0)}),100)}),[S]),e.jsxs(g,Object.assign({channel:R,focused:N,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:W&&!S?p.COLORS.content.negative:p.COLORS.content.primary}},{children:[null===(f=E.variableName)||void 0===f?void 0:f.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==S?void 0:S.label)?"space-between":"flex-end"}},{children:[e.jsx(r.BodyPrimary,{children:u.truncate(null!==(T=null==S?void 0:S.label)&&void 0!==T?T:"",20,!0)}),e.jsx(t.default,{onClick:()=>{Y(!w)},width:24,height:24,color:p.COLORS.content.primary})]})):e.jsx(i.Dropdown,{options:V,isSearchable:!1,onSelect:J,defaultOptions:S?[Object.assign(Object.assign({},S),{selected:!0})]:[]})})),("custom_text"===(null==S?void 0:S.value)||"custom_link"===(null==S?void 0:S.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==S?void 0:S.value)?"Custom text value":"custom_link"===(null==S?void 0:S.value)?"Custom URL value":"",id:`variable-value-${null==S?void 0:S.value}-${_}`,value:C,errorMessage:W?C&&0!==C.trim().length?"custom_link"!==S.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${C.trim()}`)&&0!==C.trim().length?"custom_link"!==S.value&&C.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==S?void 0:S.value)?void 0:30,prefixText:"custom_link"===(null==S?void 0:S.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===S.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,t){var l;L(t);const a="custom_link"===(null==S?void 0:S.value)&&t?t.includes("https")?t:`https://${t}`:t;K(a,e),R===d.CHANNEL_TYPE.WHATSAPP&&(null==Q||Q(null!==(l=E.index)&&void 0!==l?l:0,a))}(S.value,e)}}),w&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=y?y:[],showVariable:w,setShowVariable:Y,placeholder:"Add a variable",customTrigger:e=>{null==A||A(!1),"{{custom.url}}"===e.actualValue?J({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?J({label:e.displayName,selected:!0,value:"custom_text"}):J({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
7
|
+
`,h={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"};exports.Container=j,exports.default=a=>{let{onFocus:g,variable:O,index:E,showVariableModal:_,variableList:T,setShowDiscountCheckBox:y,componentType:A,CTAoptions:f}=a;var V,N;const[C,P]=t.useState(!1),[k,L]=t.useState(""),[S,H]=t.useState([]),[w,B]=t.useState(),[Y,M]=t.useState(!1),[q,R]=t.useState(!1),{device:W,channel:D,isError:I,originalVariableList:U,template:$,templateSelectionTriggered:z,setTemplate:Z,setDisplayContent:F,setOriginalVariableList:G,globalNormalizedPlaceholders:J,enabledCustomText:K,pod:Q}=m.useTemplateModalContext();function X(e,l){var t,a,n;const o=e;L(""),B(o),console.log("vj: handleoptionselect",e),D===d.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(ee(null!==(t=o.value)&&void 0!==t?t:"","string"),null==le||le(null!==(a=O.index)&&void 0!==a?a:0,o.value,!0)):(null==le||le(null!==(n=O.index)&&void 0!==n?n:0,O.variableName,!0,"custom_text"),ee("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?ee(o.value,"url"===o.bikPlaceholderType?"link":"string"):(L(""),ee("",o.value))}function ee(e,l){var t,a,n,o;console.log("vj: updatevarlist",{updateValue:e,type:l});const i="custom_link"===l?"link":"custom_text"===l?"string":l;if(D!==d.CHANNEL_TYPE.WHATSAPP){const a=b.getVariableNameForEmailByIndex(E+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===W?"template_html_mobile":"template_html_desktop"),o=D===d.CHANNEL_TYPE.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:O.variableName);const s=U.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l));null==G||G(s)}if(D===d.CHANNEL_TYPE.WHATSAPP){const l=U;let t=l.body,s=l.header,u=l.buttons;"BODY"===A?t=null===(a=l.body)||void 0===a?void 0:a.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"HEADER"===A?s=null===(n=l.header)||void 0===n?void 0:n.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"BUTTONS"===A&&(u=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,t)=>(console.log("vj: check",{normalizedType:i,ind:t,index:E,currVar:l}),t===E?Object.assign(Object.assign({},l),{type:r.BUTTON_TYPE.URL,buttonVariable:e}):l)))),console.log("vj: buttonvariablelist",u),null==G||G((e=>Object.assign(Object.assign({},e),{header:s,body:t,buttons:u})))}}function le(e,l,t,a){var n,o,i,s;const u=Object.assign({},$);console.log("vj: update component",{index:e,newValue:l,updateMapping:t,type:a});const d=null===(n=null==u?void 0:u.components)||void 0===n?void 0:n.map((t=>{var a,n,o,i,s,u,d,r,c,p;const v=Object.assign({},t);if("BODY"===t.type&&"BODY"===A){if(null===(n=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const t=[...null!==(s=null===(i=null===(o=v.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},v.example),{body_text:[t]});return Object.assign(Object.assign({},v),{example:a})}}else if("HEADER"===t.type&&"HEADER"===A){if(null===(u=t.example)||void 0===u?void 0:u.header_text){const t=[...null!==(r=null===(d=v.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},v.example),{header_text:t});return Object.assign(Object.assign({},v),{example:a})}}else if("BUTTONS"===t.type&&"BUTTONS"===A&&(console.log("vj: updatecomponent in buttons",{updateComponent:v}),null===(p=null===(c=t.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example)){const a=t.buttons.map(((t,a)=>a===e?Object.assign(Object.assign({},t),{example:[l]}):t));return console.log("vj: updating button",{updateComponent:v,updateComponentButtons:a}),Object.assign(Object.assign({},v),{buttons:a})}return t}));u.components=d,t&&("BODY"===A&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((t,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:l:t))}):"HEADER"===A&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((t,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:l:t))}):"BUTTONS"===A&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((t,n)=>(console.log("vj: button type",{button:t,type:a}),e===n?"custom_link"===a?"((customPlaceholderName))":l:t)))}))),null==Z||Z(Object.assign({},u))}return console.log("vj: variableconnector",{variable:O,originalVariableList:U,index:E}),t.useEffect((()=>{C&&(null==g||g())}),[C]),t.useEffect((()=>{!function(){var e,l,t,a,n;const o="mobile"===W?"template_html_mobile":"template_html_desktop",i=document.getElementById(o),s=(null!==(a=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(n=null==i?void 0:i.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);D===d.CHANNEL_TYPE.EMAIL&&(null==F||F(s))}()}),[z]),t.useEffect((()=>{var e;const l=[];let t=[];if(D!==d.CHANNEL_TYPE.MESSAGE||K){"link"===(null==O?void 0:O.type)?(l.push({label:"",options:[h,x]}),console.log("vj: variable type is link"),B(h)):(console.log("vj: variable type is somethingelse"),l.push({label:"",options:[h,x]}),B(x));const e=null!=J?J:[];H([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:p.default.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e],console.log("vj: alloptions",t)}else{const e=null!=J?J:[];H([{label:"",options:[x,h]},...e]),t=[{label:"",options:[x,h]},...e]}if((D===d.CHANNEL_TYPE.WHATSAPP||D===d.CHANNEL_TYPE.EMAIL||D===d.CHANNEL_TYPE.MESSAGE)&&O.updatedValue)if(u.placeHolderNamePattern.test(O.updatedValue)&&D===d.CHANNEL_TYPE.WHATSAPP||O.updatedValue.startsWith("{{")&&D!==d.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){var a;let n={label:"",value:""};const o=t===d.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");_?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===o.trim()&&(n=e)}))}));return n}(O,t,D);console.log("vj: preselected option",e),e.value&&B(e)}else(null===(e=O.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(B(h),L(O.updatedValue.split("https://")[1])):(B(x),L(O.updatedValue))}),[]),t.useEffect((()=>{W&&w&&k&&setTimeout((()=>{ee("custom_link"===(null==w?void 0:w.value)&&k?k.includes("https")?k:`https://${k}`:k,w.value)}),100)}),[W]),t.useEffect((()=>{console.log("vj:",{renderFirstTime:q,selectedOption:w,variable:O,enteredVariableValue:k}),!q&&w&&O.updatedValue&&setTimeout((()=>{const e="custom_link"===(null==w?void 0:w.value)&&O.updatedValue?O.updatedValue.includes("https")?O.updatedValue:`https://${O.updatedValue}`:O.updatedValue;console.log("vj: inputvalue",e),ee(e,w.value),R(!0)}),100)}),[w]),e.jsxs(j,Object.assign({channel:D,focused:C,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(c.BodySecondary,Object.assign({style:{color:I&&!w?v.COLORS.content.negative:v.COLORS.content.primary}},{children:[null===(V=O.variableName)||void 0===V?void 0:V.replace("{{","").replace("}}","")," ","link"===(null==O?void 0:O.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:_?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==w?void 0:w.label)?"space-between":"flex-end"}},{children:[e.jsx(c.BodyPrimary,{children:s.truncate(null!==(N=null==w?void 0:w.label)&&void 0!==N?N:"",20,!0)}),e.jsx(l.default,{onClick:()=>{M(!Y)},width:24,height:24,color:v.COLORS.content.primary})]})):e.jsx(o.Dropdown,{options:S,isSearchable:!1,onSelect:X,defaultOptions:w?[Object.assign(Object.assign({},w),{selected:!0})]:[]})})),("custom_text"===(null==w?void 0:w.value)||"custom_link"===(null==w?void 0:w.value))&&e.jsx(i.Input,{labelText:"custom_text"===(null==w?void 0:w.value)?"Custom text value":"custom_link"===(null==w?void 0:w.value)?"Custom URL value":"",id:`variable-value-${null==w?void 0:w.value}-${E}`,value:k,errorMessage:I?k&&0!==k.trim().length?"custom_link"!==w.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${k.trim()}`)&&0!==k.trim().length?"custom_link"!==w.value&&k.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==w?void 0:w.value)?void 0:30,prefixText:"custom_link"===(null==w?void 0:w.value)?"https://":"",placeholder:"link"===O.type||"custom_link"===w.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;L(l);const a="custom_link"===(null==w?void 0:w.value)&&l?l.includes("https")?l:`https://${l}`:l;ee(a,e),D===d.CHANNEL_TYPE.WHATSAPP&&(console.log("vj: handlecustominput",{variable:O}),null==le||le(null!==(t=O.index)&&void 0!==t?t:0,a,"custom_link"===e,e))}(w.value,e)}}),Y&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=T?T:[],showVariable:Y,setShowVariable:M,placeholder:"Add a variable",customTrigger:e=>{if(console.log("vj: customtrigger",e),null==y||y(!1),"{{custom.url}}"===e.actualValue)X({label:e.displayName,selected:!0,value:"custom_link"});else if("{{custom.text}}"==e.actualValue)X({label:e.displayName,selected:!0,value:"custom_text"});else if(Q===r.POD.CHATBOT&&"BUTTONS"===A){const l=null==f?void 0:f.filter((l=>l.placeHolder===e.actualValue));console.log("vj: CTAoptions",{CTAoptions:f,isVariableInCtaOptions:l}),l&&l.length>0?X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"}):X({label:"Custom URL",selected:!0,value:"custom_link"})}else X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
1
2
|
import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
|
|
2
3
|
import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
4
|
import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
|
|
@@ -10,6 +11,7 @@ export interface WhatsAppTemplateCardButtonV2Props {
|
|
|
10
11
|
button: TEMPLATE_BUTTON;
|
|
11
12
|
CTAoptions?: ButtonPlaceHolderOptions[];
|
|
12
13
|
QRBoptions?: ButtonPlaceHolderOptions[];
|
|
14
|
+
variableList?: VariableListInterfaceV2[];
|
|
13
15
|
}
|
|
14
|
-
declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
export default WhatsAppTemplateCardButtonV2;
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),s=require("../../template-preview/constants/regexPatterns.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),s=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),n=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),u=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=c=>{let{button:b,updateSelectedURLTemplateBtn:m,updateSelectedQRBTemplateBtn:j,originalVariableList:v,CTAoptions:x,QRBoptions:O,variableList:g}=c;var y,f,h,T;const[L,U]=t.useState(""),[R,V]=t.useState(),{setOriginalVariableList:q,isError:w,disableEditVariable:B,pod:C}=d.useTemplateModalContext();function S(e){U(e);const t=[Object.assign(Object.assign({},v.buttons[0]),{type:n.BUTTON_TYPE.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==q||q((e=>Object.assign(Object.assign({},e),{body:[...v.body],buttons:[...t]}))),null==m||m(`https://${e}`,"custom")}return t.useEffect((()=>{var e;if(b.buttonVariable&&s.editableVarPattern.test(b.buttonVariable))V(i.CUSTOM_URL_NAME),U((null===(e=b.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===b.type?x:O;e="URL"===b.type?t.findIndex((e=>e.placeHolder===b.buttonVariable)):t.findIndex((e=>e.label===b.flowName)),e>-1&&V(t[e])}}),[]),C!==n.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[b.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:B,options:"URL"===b.type?x:O,isSearchable:!1,onSelect:function(e,t){const l=e;V(l);const a=("URL"===b.type?x:O).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===b.type?(e=[Object.assign(Object.assign({},v.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==m||m({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=v.buttons.map(((e,t)=>t===b.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==j||j({flowName:l.label,flowId:l.value},"placeholder",b.index)),null==q||q((t=>Object.assign(Object.assign({},t),{body:[...v.body],buttons:[...e]})))}else S("")},defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),"custom_link"===(null==R?void 0:R.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:B?"disabled":"none",errorMessage:w?L?u.validateIsUrl(L)?"":"Enter valid URL":"Required field":"",value:L,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:S})}))," "]}):e.jsx(p.default,{index:0,variable:{variableName:null!==(y=b.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===b.buttonVariable?`${null===(f=b.example)||void 0===f?void 0:f[0]}`:null!==(h=b.buttonVariable)&&void 0!==h?h:"",type:"link",isEditableVariable:!0,index:null!==(T=b.index)&&void 0!==T?T:0},showVariableModal:!0,componentType:"BUTTONS",variableList:g,CTAoptions:x})};
|
|
@@ -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 p}from"../searchBar/searchBar.js";import{Tooltip as g}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(""),[E,H]=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((()=>{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?H(!0):H(!1)}),[c.reRender]),b((()=>{if(A){W(c.data,$).length>0?H(!0):H(!1)}else H(!0)}),[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=e=>{if(M(e),e){let a=[];if(B){const e=T[B];a=c.data.filter((e=>e.displayName===B)).map((a=>J(a,e))).filter((e=>null!=e))}else a=c.data.map((e=>J(e))).filter((e=>null!==e));R(a),A&&(a=W(a,e)),a.length>0?H(!0):H(!1)}else if(R(c.data),A){W(c.data,e).length>0?H(!0):H(!1)}else H(!0)};function J(e,a){const i={};if(a){for(const s in e.variables)if(e.variables[s]===a)for(const a in e.variables[s].variables)e.variables[s].variables[a].isAvailable&&(i[a]=e.variables[s].variables[a])}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(g,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?()=>{const e=[...x[B],i];D(e,B),L((a=>Object.assign(Object.assign({},a),{[B]:e})))}:()=>{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(p,{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:()=>{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:()=>{D([],B),L((e=>Object.assign(Object.assign({},e),{[B]:[]}))),I("")}}),a("div",{children:"First page"})]}))]}))]})),!E&&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 t,jsx as o}from"react/jsx-runtime";import{useState as e,useEffect as n}from"react";import{POD as i}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as a}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as s}from"./BackTrackComponent.js";import{DiscountCodeComponent as d}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as r}from"./EditMediaV2.style.js";import p from"./EditWhatsAppTemplateMediaV2.js";import{Container as c}from"./VariableConnectorsPanel.js";import u from"./VariableConnectorWhatsApp.js";import m from"./VariableEditorHeader.js";import v from"./WhatsAppTemplateCardButtonV2.js";const b=b=>{let{template:g,onTemplateChange:h,whatsappSpecificPickerMeta:f,showVariableModal:T,variableList:j,variableListForImage:C,discountCode:O,setDiscountCode:x}=b;var E,k,y,V,w,B,L,I,A,M,R,U,H,D,S,N;const{originalVariableList:P,pod:Q,extras:W}=l(),{descriptionComponents:F,urlBtns:_,qrbBtns:K,imageComponent:Y,bodyVariables:$,headerVariables:q}=a(g),[X,z]=e(!1);function G(t,o){var e,n,i,l,a;const s=Object.assign({},g),d=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==d&&d>-1){const a=null===(e=null==s?void 0:s.components[d].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==a&&a>-1){const e="custom"===o&&"string"==typeof t,r=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[d])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[a]=Object.assign(Object.assign({},r[a]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const p=Object.assign(Object.assign({},s.components[d]),{buttons:r}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[d]=p,s.components=u}}if("string"!=typeof t){"checkout.checkoutUrl"===(null===(a=t.placeHolder)||void 0===a?void 0:a.slice(2,-2))?z(!0):(z(!1),null==x||x(""))}null==h||h(s)}function J(t,o,e){var n;const i=Object.assign({},g),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==h||h(i)}return n((()=>{var t;const o=null===(t=g.mapping.buttons)||void 0===t?void 0:t[0];"checkout.checkoutUrl"===(null==o?void 0:o.slice(2,-2))?z(!0):(z(!1),null==x||x(""))}),[g]),t(c,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!Y&&o(r,{children:o(p,{whatsappSpecificPickerMeta:f,mediaComponent:Y,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},g);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}n.mapping&&(n.mapping=Object.assign(Object.assign({},n.mapping),{header:void 0})),null==h||h(Object.assign({},n))},template:g,variableListForImage:C})}),($.length>0||q.length>0)&&o(m,{containerStyle:{paddingTop:Y?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==F?void 0:F.map(((t,e)=>o(u,{originalVariableList:P,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?g.mapping.header:g.mapping.body,showVariableModal:T,variableList:j},e))),(null===(k=null===(E=_[0])||void 0===E?void 0:E.component)||void 0===k?void 0:k.buttons)&&(null===(w=null===(V=null===(y=_[0])||void 0===y?void 0:y.component)||void 0===V?void 0:V.buttons)||void 0===w?void 0:w.length)>0&&o(m,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(B=null==P?void 0:P.buttons)||void 0===B?void 0:B.map(((t,e)=>{if("URL"===t.type)return o(v,{CTAoptions:null==f?void 0:f.CTAoptions,button:t,originalVariableList:P,updateSelectedURLTemplateBtn:G},`${e}`)})),(null===(I=null===(L=K[0])||void 0===L?void 0:L.component)||void 0===I?void 0:I.buttons)&&(null===(R=null===(M=null===(A=K[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)||void 0===R?void 0:R.length)>0&&(Q!==i.CHATBOT?o(m,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(s,{backTrackMessage:null===(U=null==W?void 0:W.backTrackExtra)||void 0===U?void 0:U[0],setBackTrackMessage:null===(H=null==W?void 0:W.backTrackExtra)||void 0===H?void 0:H[1]})),null===(D=null==P?void 0:P.buttons)||void 0===D?void 0:D.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(v,{QRBoptions:null==f?void 0:f.QRBoptions,button:t,originalVariableList:P,updateSelectedQRBTemplateBtn:J},`${e}`)})),Q===i.CHATBOT&&X&&o(d,{discountCode:null===(S=null==W?void 0:W.discountCodeExtra)||void 0===S?void 0:S[0],setDiscountCode:null===(N=null==W?void 0:W.discountCodeExtra)||void 0===N?void 0:N[1],variableList:j})]}))};export{b as default};
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as e,useEffect as n}from"react";import{POD as i}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as a}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as s}from"./BackTrackComponent.js";import{DiscountCodeComponent as d}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as r}from"./EditMediaV2.style.js";import p from"./EditWhatsAppTemplateMediaV2.js";import{Container as c}from"./VariableConnectorsPanel.js";import u from"./VariableConnectorWhatsApp.js";import m from"./VariableEditorHeader.js";import v from"./WhatsAppTemplateCardButtonV2.js";const b=b=>{let{template:g,onTemplateChange:h,whatsappSpecificPickerMeta:f,showVariableModal:T,variableList:j,variableListForImage:C,discountCode:O,setDiscountCode:x}=b;var E,k,y,V,w,B,L,I,A,M,R,U,H,D,S,N;const{originalVariableList:P,pod:Q,extras:W}=l(),{descriptionComponents:F,urlBtns:_,qrbBtns:K,imageComponent:Y,bodyVariables:$,headerVariables:q}=a(g),[X,z]=e(!1);function G(t,o){var e,n,i,l,a;const s=Object.assign({},g),d=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==d&&d>-1){const a=null===(e=null==s?void 0:s.components[d].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==a&&a>-1){const e="custom"===o&&"string"==typeof t,r=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[d])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[a]=Object.assign(Object.assign({},r[a]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const p=Object.assign(Object.assign({},s.components[d]),{buttons:r}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[d]=p,s.components=u}}if("string"!=typeof t){"checkout.checkoutUrl"===(null===(a=t.placeHolder)||void 0===a?void 0:a.slice(2,-2))?z(!0):(z(!1),null==x||x(""))}null==h||h(s)}function J(t,o,e){var n;const i=Object.assign({},g),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==h||h(i)}return n((()=>{var t;const o=null===(t=g.mapping.buttons)||void 0===t?void 0:t[0];"checkout.checkoutUrl"===(null==o?void 0:o.slice(2,-2))?z(!0):(z(!1),null==x||x(""))}),[g]),t(c,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!Y&&o(r,{children:o(p,{whatsappSpecificPickerMeta:f,mediaComponent:Y,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},g);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}n.mapping&&(n.mapping=Object.assign(Object.assign({},n.mapping),{header:void 0})),null==h||h(Object.assign({},n))},template:g,variableListForImage:C})}),($.length>0||q.length>0)&&o(m,{containerStyle:{paddingTop:Y?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==F?void 0:F.map(((t,e)=>o(u,{originalVariableList:P,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?g.mapping.header:g.mapping.body,showVariableModal:T,variableList:j},e))),(null===(k=null===(E=_[0])||void 0===E?void 0:E.component)||void 0===k?void 0:k.buttons)&&(null===(w=null===(V=null===(y=_[0])||void 0===y?void 0:y.component)||void 0===V?void 0:V.buttons)||void 0===w?void 0:w.length)>0&&o(m,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(B=null==P?void 0:P.buttons)||void 0===B?void 0:B.map(((t,e)=>{if("URL"===t.type)return o(v,{CTAoptions:null==f?void 0:f.CTAoptions,button:t,originalVariableList:P,updateSelectedURLTemplateBtn:G,variableList:j},`${e}`)})),(null===(I=null===(L=K[0])||void 0===L?void 0:L.component)||void 0===I?void 0:I.buttons)&&(null===(R=null===(M=null===(A=K[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)||void 0===R?void 0:R.length)>0&&(Q!==i.CHATBOT?o(m,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(s,{backTrackMessage:null===(U=null==W?void 0:W.backTrackExtra)||void 0===U?void 0:U[0],setBackTrackMessage:null===(H=null==W?void 0:W.backTrackExtra)||void 0===H?void 0:H[1]})),null===(D=null==P?void 0:P.buttons)||void 0===D?void 0:D.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(v,{QRBoptions:null==f?void 0:f.QRBoptions,button:t,originalVariableList:P,updateSelectedQRBTemplateBtn:J},`${e}`)})),Q===i.CHATBOT&&X&&o(d,{discountCode:null===(S=null==W?void 0:W.discountCodeExtra)||void 0===S?void 0:S[0],setDiscountCode:null===(N=null==W?void 0:W.discountCodeExtra)||void 0===N?void 0:N[1],variableList:j})]}))};export{b as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
4
|
-
import { CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
|
|
4
|
+
import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
|
|
5
5
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
focused?: boolean | undefined;
|
|
7
7
|
channel?: CHANNEL_TYPE | undefined;
|
|
@@ -15,6 +15,7 @@ export interface VariableConnectorProps {
|
|
|
15
15
|
variableList?: VariableListInterfaceV2[];
|
|
16
16
|
setShowDiscountCheckBox?: any;
|
|
17
17
|
componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
|
|
18
|
+
CTAoptions?: ButtonPlaceHolderOptions[];
|
|
18
19
|
}
|
|
19
20
|
declare const VariableConnector: React.FC<VariableConnectorProps>;
|
|
20
21
|
export default VariableConnector;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as
|
|
1
|
+
import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as o,useEffect as a}from"react";import n from"styled-components";import{AddVariableV2SideModal as i}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as u}from"../../input/Input.js";import{truncate as d}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as c}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{POD as p,BUTTON_TYPE as m}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as v,BodyPrimary as b}from"../../TypographyStyle.js";import g from"../../../utils/StringUtils.js";import{COLORS as h}from"../../../constants/Theme.js";import{useTemplateModalContext as j}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as x}from"../utils/getVariableNameEmail.js";const O=n.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===
|
|
4
|
+
background: ${e=>e.focused&&e.channel===r.EMAIL?h.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,j={value:"custom_link",label:"Custom URL"},_={value:"custom_text",label:"Custom text"},y=n=>{let{onFocus:y,variable:f,index:O,showVariableModal:k,variableList:A,setShowDiscountCheckBox:V,componentType:E}=n;var T,P;const[S,w]=a(!1),[L,C]=a(""),[H,M]=a([]),[W,$]=a(),[B,D]=a(!1),[I,R]=a(!1),{device:N,channel:z,isError:U,originalVariableList:Y,template:Z,templateSelectionTriggered:G,setTemplate:q,setDisplayContent:F,setOriginalVariableList:J,globalNormalizedPlaceholders:K,enabledCustomText:Q}=g();function X(e,l){var t,a,i;const n=e;C(""),$(n),z===c.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(ee(null!==(t=n.value)&&void 0!==t?t:"","string"),null==le||le(null!==(a=f.index)&&void 0!==a?a:0,n.value,!0)):(null==le||le(null!==(i=f.index)&&void 0!==i?i:0,f.variableName,!0,"custom_text"),ee("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ee(n.value,"url"===n.bikPlaceholderType?"link":"string"):(C(""),ee("",n.value))}function ee(e,l){var t,a,i;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(z!==c.WHATSAPP){const a=h(O+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===N?"template_html_mobile":"template_html_desktop"),o=z===c.EMAIL?null===(t=null==i?void 0:i.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:f.variableName);const s=Y.map(((l,t)=>t===O?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==J||J(s)}if(z===c.WHATSAPP){const l=Y;let t=l.body,o=l.header;"BODY"===E?t=null===(a=l.body)||void 0===a?void 0:a.map(((l,t)=>t===O?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l)):"HEADER"===E&&(o=null===(i=l.header)||void 0===i?void 0:i.map(((l,t)=>t===O?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l))),null==J||J((e=>Object.assign(Object.assign({},e),{header:o,body:t,buttons:l.buttons})))}}function le(e,l,t,a){var i,n,o;const s=Object.assign({},Z),u=null===(i=null==s?void 0:s.components)||void 0===i?void 0:i.map((t=>{var a,i,n,o,s,u,d,r;const c=Object.assign({},t);if("BODY"===t.type&&"BODY"===E){if(null===(i=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const t=[...null!==(s=null===(o=null===(n=c.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{body_text:[t]});return Object.assign(Object.assign({},c),{example:a})}}else if("HEADER"===t.type&&"HEADER"===E&&(null===(u=t.example)||void 0===u?void 0:u.header_text)){const t=[...null!==(r=null===(d=c.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},c.example),{header_text:t});return Object.assign(Object.assign({},c),{example:a})}return t}));s.components=u,t&&("BODY"===E&&(null===(n=null==s?void 0:s.mapping)||void 0===n?void 0:n.body)?s.mapping=Object.assign(Object.assign({},s.mapping),{body:s.mapping.body.map(((t,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:l:t))}):"HEADER"===E&&(null===(o=null==s?void 0:s.mapping)||void 0===o?void 0:o.header)&&(s.mapping=Object.assign(Object.assign({},s.mapping),{header:s.mapping.header.map(((t,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:l:t))}))),null==q||q(Object.assign({},s))}return i((()=>{S&&(null==y||y())}),[S]),i((()=>{!function(){var e,l,t,a,i;const n="mobile"===N?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(t=null===(l=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);z===c.EMAIL&&(null==F||F(s))}()}),[G]),i((()=>{var e;const l=[];let t=[];if(z!==c.MESSAGE||Q){"link"===(null==f?void 0:f.type)?(l.push({label:"",options:[j,_]}),$(j)):(l.push({label:"",options:[j,_]}),$(_));const e=null!=K?K:[];M([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:v.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}else{const e=null!=K?K:[];M([{label:"",options:[_,j]},...e]),t=[{label:"",options:[_,j]},...e]}if((z===c.WHATSAPP||z===c.EMAIL||z===c.MESSAGE)&&f.updatedValue)if(r.test(f.updatedValue)&&z===c.WHATSAPP||f.updatedValue.startsWith("{{")&&z!==c.WHATSAPP){const e=function(e,l,t){var a;let i={label:"",value:""};const n=t===c.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");k?i={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(f,t,z);e.value&&$(e)}else(null===(e=f.updatedValue)||void 0===e?void 0:e.startsWith("https"))?($(j),C(f.updatedValue.split("https://")[1])):($(_),C(f.updatedValue))}),[]),i((()=>{N&&W&&L&&setTimeout((()=>{ee("custom_link"===(null==W?void 0:W.value)&&L?L.includes("https")?L:`https://${L}`:L,W.value)}),100)}),[N]),i((()=>{!I&&W&&f.updatedValue&&setTimeout((()=>{ee("custom_link"===(null==W?void 0:W.value)&&L?L.includes("https")?f.updatedValue:`https://${f.updatedValue}`:f.updatedValue,W.value),R(!0)}),100)}),[W]),e(x,Object.assign({channel:z,focused:S,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(p,Object.assign({style:{color:U&&!W?b.content.negative:b.content.primary}},{children:[null===(T=f.variableName)||void 0===T?void 0:T.replace("{{","").replace("}}","")," ","link"===(null==f?void 0:f.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==W?void 0:W.label)?"space-between":"flex-end"}},{children:[l(m,{children:d(null!==(P=null==W?void 0:W.label)&&void 0!==P?P:"",20,!0)}),l(t,{onClick:()=>{D(!B)},width:24,height:24,color:b.content.primary})]})):l(s,{options:H,isSearchable:!1,onSelect:X,defaultOptions:W?[Object.assign(Object.assign({},W),{selected:!0})]:[]})})),("custom_text"===(null==W?void 0:W.value)||"custom_link"===(null==W?void 0:W.value))&&l(u,{labelText:"custom_text"===(null==W?void 0:W.value)?"Custom text value":"custom_link"===(null==W?void 0:W.value)?"Custom URL value":"",id:`variable-value-${null==W?void 0:W.value}-${O}`,value:L,errorMessage:U?L&&0!==L.trim().length?"custom_link"!==W.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${L.trim()}`)&&0!==L.trim().length?"custom_link"!==W.value&&L.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==W?void 0:W.value)?void 0:30,prefixText:"custom_link"===(null==W?void 0:W.value)?"https://":"",placeholder:"link"===f.type||"custom_link"===W.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;C(l);const a="custom_link"===(null==W?void 0:W.value)&&l?l.includes("https")?l:`https://${l}`:l;ee(a,e),z===c.WHATSAPP&&(null==le||le(null!==(t=f.index)&&void 0!==t?t:0,a))}(W.value,e)}}),B&&l(o,{zIndex:2e3,data:null!=A?A:[],showVariable:B,setShowVariable:D,placeholder:"Add a variable",customTrigger:e=>{null==V||V(!1),"{{custom.url}}"===e.actualValue?X({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?X({label:e.displayName,selected:!0,value:"custom_text"}):X({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{x as Container,y as default};
|
|
7
|
+
`,y={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},_=n=>{let{onFocus:_,variable:T,index:V,showVariableModal:k,variableList:A,setShowDiscountCheckBox:E,componentType:S,CTAoptions:C}=n;var P,w;const[L,B]=o(!1),[H,M]=o(""),[N,W]=o([]),[R,U]=o(),[$,D]=o(!1),[I,z]=o(!1),{device:Y,channel:Z,isError:F,originalVariableList:G,template:q,templateSelectionTriggered:J,setTemplate:K,setDisplayContent:Q,setOriginalVariableList:X,globalNormalizedPlaceholders:ee,enabledCustomText:le,pod:te}=j();function oe(e,l){var t,o,a;const n=e;M(""),U(n),console.log("vj: handleoptionselect",e),Z===r.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(ae(null!==(t=n.value)&&void 0!==t?t:"","string"),null==ne||ne(null!==(o=T.index)&&void 0!==o?o:0,n.value,!0)):(null==ne||ne(null!==(a=T.index)&&void 0!==a?a:0,T.variableName,!0,"custom_text"),ae("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ae(n.value,"url"===n.bikPlaceholderType?"link":"string"):(M(""),ae("",n.value))}function ae(e,l){var t,o,a,n;console.log("vj: updatevarlist",{updateValue:e,type:l});const i="custom_link"===l?"link":"custom_text"===l?"string":l;if(Z!==r.WHATSAPP){const o=x(V+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===Y?"template_html_mobile":"template_html_desktop"),n=Z===r.EMAIL?null===(t=null==a?void 0:a.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o);n&&(n.textContent="custom_text"!==l&&"custom_link"!==l||e?e:T.variableName);const s=G.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l));null==X||X(s)}if(Z===r.WHATSAPP){const l=G;let t=l.body,s=l.header,u=l.buttons;"BODY"===S?t=null===(o=l.body)||void 0===o?void 0:o.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"HEADER"===S?s=null===(a=l.header)||void 0===a?void 0:a.map(((l,t)=>t===V?Object.assign(Object.assign({},l),{type:i,updatedValue:e}):l)):"BUTTONS"===S&&(u=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,t)=>(console.log("vj: check",{normalizedType:i,ind:t,index:V,currVar:l}),t===V?Object.assign(Object.assign({},l),{type:m.URL,buttonVariable:e}):l)))),console.log("vj: buttonvariablelist",u),null==X||X((e=>Object.assign(Object.assign({},e),{header:s,body:t,buttons:u})))}}function ne(e,l,t,o){var a,n,i,s;const u=Object.assign({},q);console.log("vj: update component",{index:e,newValue:l,updateMapping:t,type:o});const d=null===(a=null==u?void 0:u.components)||void 0===a?void 0:a.map((t=>{var o,a,n,i,s,u,d,c,r,p;const m=Object.assign({},t);if("BODY"===t.type&&"BODY"===S){if(null===(a=null===(o=t.example)||void 0===o?void 0:o.body_text)||void 0===a?void 0:a[0]){const t=[...null!==(s=null===(i=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},m.example),{body_text:[t]});return Object.assign(Object.assign({},m),{example:o})}}else if("HEADER"===t.type&&"HEADER"===S){if(null===(u=t.example)||void 0===u?void 0:u.header_text){const t=[...null!==(c=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},m.example),{header_text:t});return Object.assign(Object.assign({},m),{example:o})}}else if("BUTTONS"===t.type&&"BUTTONS"===S&&(console.log("vj: updatecomponent in buttons",{updateComponent:m}),null===(p=null===(r=t.buttons)||void 0===r?void 0:r[e])||void 0===p?void 0:p.example)){const o=t.buttons.map(((t,o)=>o===e?Object.assign(Object.assign({},t),{example:[l]}):t));return console.log("vj: updating button",{updateComponent:m,updateComponentButtons:o}),Object.assign(Object.assign({},m),{buttons:o})}return t}));u.components=d,t&&("BODY"===S&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((t,a)=>e===a?"custom_text"===o?`((editableVariable${a+10}))`:l:t))}):"HEADER"===S&&(null===(i=null==u?void 0:u.mapping)||void 0===i?void 0:i.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((t,a)=>e===a?"custom_text"===o?`((editableVariable${a+20}))`:l:t))}):"BUTTONS"===S&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((t,a)=>(console.log("vj: button type",{button:t,type:o}),e===a?"custom_link"===o?"((customPlaceholderName))":l:t)))}))),null==K||K(Object.assign({},u))}return console.log("vj: variableconnector",{variable:T,originalVariableList:G,index:V}),a((()=>{L&&(null==_||_())}),[L]),a((()=>{!function(){var e,l,t,o,a;const n="mobile"===Y?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),s=(null!==(o=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==o?o:"")+(null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);Z===r.EMAIL&&(null==Q||Q(s))}()}),[J]),a((()=>{var e;const l=[];let t=[];if(Z!==r.MESSAGE||le){"link"===(null==T?void 0:T.type)?(l.push({label:"",options:[y,f]}),console.log("vj: variable type is link"),U(y)):(console.log("vj: variable type is somethingelse"),l.push({label:"",options:[y,f]}),U(f));const e=null!=ee?ee:[];W([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:g.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e],console.log("vj: alloptions",t)}else{const e=null!=ee?ee:[];W([{label:"",options:[f,y]},...e]),t=[{label:"",options:[f,y]},...e]}if((Z===r.WHATSAPP||Z===r.EMAIL||Z===r.MESSAGE)&&T.updatedValue)if(c.test(T.updatedValue)&&Z===r.WHATSAPP||T.updatedValue.startsWith("{{")&&Z!==r.WHATSAPP){const e=function(e,l,t){var o;let a={label:"",value:""};const n=t===r.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");k?a={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(o=e.updatedValue)&&void 0!==o?o:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))}));return a}(T,t,Z);console.log("vj: preselected option",e),e.value&&U(e)}else(null===(e=T.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(U(y),M(T.updatedValue.split("https://")[1])):(U(f),M(T.updatedValue))}),[]),a((()=>{Y&&R&&H&&setTimeout((()=>{ae("custom_link"===(null==R?void 0:R.value)&&H?H.includes("https")?H:`https://${H}`:H,R.value)}),100)}),[Y]),a((()=>{console.log("vj:",{renderFirstTime:I,selectedOption:R,variable:T,enteredVariableValue:H}),!I&&R&&T.updatedValue&&setTimeout((()=>{const e="custom_link"===(null==R?void 0:R.value)&&T.updatedValue?T.updatedValue.includes("https")?T.updatedValue:`https://${T.updatedValue}`:T.updatedValue;console.log("vj: inputvalue",e),ae(e,R.value),z(!0)}),100)}),[R]),e(O,Object.assign({channel:Z,focused:L,onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(v,Object.assign({style:{color:F&&!R?h.content.negative:h.content.primary}},{children:[null===(P=T.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==T?void 0:T.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[l(b,{children:d(null!==(w=null==R?void 0:R.label)&&void 0!==w?w:"",20,!0)}),l(t,{onClick:()=>{D(!$)},width:24,height:24,color:h.content.primary})]})):l(s,{options:N,isSearchable:!1,onSelect:oe,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&l(u,{labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${V}`,value:H,errorMessage:F?H&&0!==H.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==R.value&&H.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?void 0:30,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===T.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;M(l);const o="custom_link"===(null==R?void 0:R.value)&&l?l.includes("https")?l:`https://${l}`:l;ae(o,e),Z===r.WHATSAPP&&(console.log("vj: handlecustominput",{variable:T}),null==ne||ne(null!==(t=T.index)&&void 0!==t?t:0,o,"custom_link"===e,e))}(R.value,e)}}),$&&l(i,{zIndex:2e3,data:null!=A?A:[],showVariable:$,setShowVariable:D,placeholder:"Add a variable",customTrigger:e=>{if(console.log("vj: customtrigger",e),null==E||E(!1),"{{custom.url}}"===e.actualValue)oe({label:e.displayName,selected:!0,value:"custom_link"});else if("{{custom.text}}"==e.actualValue)oe({label:e.displayName,selected:!0,value:"custom_text"});else if(te===p.CHATBOT&&"BUTTONS"===S){const l=null==C?void 0:C.filter((l=>l.placeHolder===e.actualValue));console.log("vj: CTAoptions",{CTAoptions:C,isVariableInCtaOptions:l}),l&&l.length>0?oe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"}):oe({label:"Custom URL",selected:!0,value:"custom_link"})}else oe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{O as Container,_ as default};
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
1
2
|
import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
|
|
2
3
|
import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
4
|
import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
|
|
@@ -10,6 +11,7 @@ export interface WhatsAppTemplateCardButtonV2Props {
|
|
|
10
11
|
button: TEMPLATE_BUTTON;
|
|
11
12
|
CTAoptions?: ButtonPlaceHolderOptions[];
|
|
12
13
|
QRBoptions?: ButtonPlaceHolderOptions[];
|
|
14
|
+
variableList?: VariableListInterfaceV2[];
|
|
13
15
|
}
|
|
14
|
-
declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
export default WhatsAppTemplateCardButtonV2;
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import{Dropdown as o}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as n}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as s}from"../../template-preview/models/TemplateMeta.js";import{POD as r,BUTTON_TYPE as p}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import u,{Container as f}from"./VariableConnector.js";const v=v=>{let{button:j,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:h,originalVariableList:y,CTAoptions:x,QRBoptions:O,variableList:L}=v;var T,V,R,U;const[w,B]=l(""),[C,H]=l(),{setOriginalVariableList:I,isError:N,disableEditVariable:E,pod:S}=c();function k(e){B(e);const t=[Object.assign(Object.assign({},y.buttons[0]),{type:p.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==I||I((e=>Object.assign(Object.assign({},e),{body:[...y.body],buttons:[...t]}))),null==g||g(`https://${e}`,"custom")}return a((()=>{var e;if(j.buttonVariable&&n.test(j.buttonVariable))H(s),B((null===(e=j.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===j.type?x:O;e="URL"===j.type?t.findIndex((e=>e.placeHolder===j.buttonVariable)):t.findIndex((e=>e.label===j.flowName)),e>-1&&H(t[e])}}),[]),S!==r.CHATBOT?e(f,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:m.content.primary}},{children:[j.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(o,{disabled:E,options:"URL"===j.type?x:O,isSearchable:!1,onSelect:function(e,t){const l=e;H(l);const a=("URL"===j.type?x:O).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===j.type?(e=[Object.assign(Object.assign({},y.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=y.buttons.map(((e,t)=>t===j.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==h||h({flowName:l.label,flowId:l.value},"placeholder",j.index)),null==I||I((t=>Object.assign(Object.assign({},t),{body:[...y.body],buttons:[...e]})))}else k("")},defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),"custom_link"===(null==C?void 0:C.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:E?"disabled":"none",errorMessage:N?w?b(w)?"":"Enter valid URL":"Required field":"",value:w,prefixText:"custom_link"===(null==C?void 0:C.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:k})}))," "]}):t(u,{index:0,variable:{variableName:null!==(T=j.text)&&void 0!==T?T:"",updatedValue:"((customPlaceholderName))"===j.buttonVariable?`${null===(V=j.example)||void 0===V?void 0:V[0]}`:null!==(R=j.buttonVariable)&&void 0!==R?R:"",type:"link",isEditableVariable:!0,index:null!==(U=j.index)&&void 0!==U?U:0},showVariableModal:!0,componentType:"BUTTONS",variableList:L,CTAoptions:x})};export{v as default};
|