@bikdotai/bik-component-library 0.0.433-beta.2 → 0.0.433-beta.21
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/TemplateContextMapper.d.ts +6 -3
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +10 -2
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Body.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Footer.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +11 -2
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.d.ts +1 -0
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js +8 -9
- package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js +4 -4
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/cjs/components/template-preview/models/WhatsappCarouselTemplate.d.ts +1 -0
- package/dist/esm/components/add-variableV2/AddVariableV2.js +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +6 -3
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +10 -2
- package/dist/esm/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Footer.js +4 -4
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +12 -3
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.d.ts +1 -0
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js +12 -13
- package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js +5 -5
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/esm/components/template-preview/models/WhatsappCarouselTemplate.d.ts +1 -0
- 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)console.log("props.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"),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;
|
|
@@ -17,7 +17,10 @@ export interface TemplateContextMapperProps {
|
|
|
17
17
|
/** Only for initial-UI-purpose for the modal */
|
|
18
18
|
htmlContent: string;
|
|
19
19
|
showOnlyContent?: boolean;
|
|
20
|
-
onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string):
|
|
20
|
+
onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string): {
|
|
21
|
+
error: string;
|
|
22
|
+
errorIndexes: number[];
|
|
23
|
+
} | void;
|
|
21
24
|
whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
|
|
22
25
|
zIndex?: number;
|
|
23
26
|
showVariableModal?: boolean;
|
|
@@ -31,7 +34,6 @@ export interface TemplateContextMapperProps {
|
|
|
31
34
|
disableEditVariable?: boolean;
|
|
32
35
|
pod?: POD;
|
|
33
36
|
extras?: ExtrasWhatsapp;
|
|
34
|
-
isProductCarouselTemplate?: boolean;
|
|
35
37
|
pickerConf?: {
|
|
36
38
|
searchInCollection: any;
|
|
37
39
|
searchProducts: any;
|
|
@@ -39,5 +41,6 @@ export interface TemplateContextMapperProps {
|
|
|
39
41
|
fetchProducts: any;
|
|
40
42
|
storeId: string;
|
|
41
43
|
};
|
|
44
|
+
disableEditExpiry?: boolean;
|
|
42
45
|
}
|
|
43
|
-
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras,
|
|
46
|
+
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, disableEditExpiry, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
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"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),o=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),r=require("./modalElements/Footer.js"),i=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:m,htmlContent:v,templateVariables:C,onTemplateSelect:h,globalPlaceholders:b,showOnlyContent:x,whatsappSpecificPickerMeta:E,zIndex:S,showVariableModal:g,variableList:T,discountCode:P,setDiscountCode:j,onBackPress:M,enabledCustomText:L,variableListForImage:y,showSampleValues:I,disableEditVariable:f,pod:w,extras:A,pickerConf:N,disableEditExpiry:V}=d;var k,q,H,_,D,O;t.useEffect((()=>{z(v)}),[v]);const F=m===o.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(q=null===(k=u.components)||void 0===k?void 0:k[1])||void 0===q?void 0:q.type),[Y,B]=t.useState(m===o.CHANNEL_TYPE.EMAIL||F?"desktop":"mobile"),[W,z]=t.useState(v),[U,$]=t.useState(!1),[R,G]=t.useState([]),[J,K]=t.useState(u),[Q,X]=t.useState(null!=C?C:[]),[Z,ee]=t.useState(!1),[te,le]=t.useState(-1);const ae=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(b)),[b]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:J,setTemplate:K,device:Y,setDevice:B,display_content:W,setDisplayContent:z,originalVariableList:Q,setOriginalVariableList:X,isError:U,setIsError:$,channel:m,globalNormalizedPlaceholders:ae,templateSelectionTriggered:Z,setTemplateSelectionTriggered:ee,enabledCustomText:L,disableEditVariable:f,pod:w,extras:A,isWhatsappCarousel:F,selectedCarouselIndex:te,setSelectedCarouselIndex:le,isProductCarouselType:u.isProductCarouselType,cardCount:null===(_=null===(H=u.components)||void 0===H?void 0:H[1].cards)||void 0===_?void 0:_.length,errorIndexes:R,setErrorIndexes:G,pickerConf:N,disableEditExpiry:V}},{children:x?e.jsx(i.default,{channel:o.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:S,centralContainerStyles:{width:F?900:m===o.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==c||c()},headingTitle:null==J?void 0:J.label,headingSubtitle:m===o.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(D=null==J?void 0:J.category)&&void 0!==D?D:"")} • ${null!==(O=null==J?void 0:J.templateCategory)&&void 0!==O?O:""}`:"",onBackPress:()=>{null==M||M()}},{children:[e.jsx(i.default,{showSampleValues:I,showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:E,showVariableModal:g,variableList:T,discountCode:P,setDiscountCode:j,variableListForImage:y&&(null==y?void 0:y.length)>0?y:T}),h?e.jsx(r.default,{isWhatsappCarousel:null!=F&&F,onSelect:function(){const e=null==h?void 0:h(J,Q,null!=W?W:"");(null==e?void 0:e.errorIndexes)?G(e.errorIndexes):(null==e?void 0:e.error)?$(!!(null==e?void 0:e.error)):ee(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -29,7 +29,10 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
29
29
|
isWhatsappCarousel?: boolean | undefined;
|
|
30
30
|
selectedCarouselIndex?: number | undefined;
|
|
31
31
|
setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
|
|
32
|
-
|
|
32
|
+
isProductCarouselType?: boolean | undefined;
|
|
33
|
+
cardCount?: number | undefined;
|
|
34
|
+
errorIndexes?: number[] | undefined;
|
|
35
|
+
setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
|
|
33
36
|
pickerConf?: {
|
|
34
37
|
searchInCollection: any;
|
|
35
38
|
searchProducts: any;
|
|
@@ -37,6 +40,7 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
37
40
|
fetchProducts: any;
|
|
38
41
|
storeId: string;
|
|
39
42
|
} | undefined;
|
|
43
|
+
disableEditExpiry?: boolean | undefined;
|
|
40
44
|
}>;
|
|
41
45
|
export declare const useTemplateModalContext: () => {
|
|
42
46
|
device: DEVICE_TYPES;
|
|
@@ -61,7 +65,10 @@ export declare const useTemplateModalContext: () => {
|
|
|
61
65
|
isWhatsappCarousel?: boolean | undefined;
|
|
62
66
|
selectedCarouselIndex?: number | undefined;
|
|
63
67
|
setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
|
|
64
|
-
|
|
68
|
+
isProductCarouselType?: boolean | undefined;
|
|
69
|
+
cardCount?: number | undefined;
|
|
70
|
+
errorIndexes?: number[] | undefined;
|
|
71
|
+
setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
|
|
65
72
|
pickerConf?: {
|
|
66
73
|
searchInCollection: any;
|
|
67
74
|
searchProducts: any;
|
|
@@ -69,4 +76,5 @@ export declare const useTemplateModalContext: () => {
|
|
|
69
76
|
fetchProducts: any;
|
|
70
77
|
storeId: string;
|
|
71
78
|
} | undefined;
|
|
79
|
+
disableEditExpiry?: boolean | undefined;
|
|
72
80
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1});exports.TemplateModalContext=a,exports.useTemplateModalContext=()=>e.useContext(a);
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1});exports.TemplateModalContext=a,exports.useTemplateModalContext=()=>e.useContext(a);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),l=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),i=require("../../template-preview/models/Channels.js"),s=require("../../../constants/Theme.js"),n=require("../context/templateModalContext.js"),r=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),d=require("./DesktopPreview.js"),p=require("./EditWhatsAppTemplateV2.js"),c=require("./MobilePreview.js"),h=require("./VariableConnectorsPanel.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=m(a);const v=f.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,
|
|
4
|
+
`,C=f.default.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: 450px;
|
|
7
7
|
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
overflow-y: auto;
|
|
10
10
|
padding-bottom: 24px;
|
|
11
11
|
border-left: ${s.COLORS.stroke.primary} 1px solid;
|
|
12
|
-
`,
|
|
12
|
+
`,x=f.default.div`
|
|
13
13
|
padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
14
14
|
flex: 1;
|
|
15
15
|
height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
|
|
16
16
|
overflow-y: auto;
|
|
17
|
-
`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:f,whatsappSpecificPickerMeta:g,showVariableModal:w,variableList:b,discountCode:j,setDiscountCode:
|
|
17
|
+
`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:f,whatsappSpecificPickerMeta:g,showVariableModal:w,variableList:b,discountCode:j,setDiscountCode:P,variableListForImage:E,showSampleValues:T}=a,A=t.useRef(),L=t.useRef(),{device:y,display_content:M,channel:N,template:S,setTemplate:_,isWhatsappCarousel:V,isProductCarouselType:q}=n.useTemplateModalContext();const W=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(v,{children:[e.jsx(x,Object.assign({showOnlyContent:f,showVariableMapping:m,isWhatsappCarousel:V},{children:"mobile"===y?e.jsx(c.default,{ref:L,display_content:null!=M?M:"",channel:N,template:S,showSampleValues:T}):N===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.CarouselPreview,{ref:A,channel:N,template:S,showSampleValues:T}):N!==i.CHANNEL_TYPE.MESSAGE?e.jsx(d.default,{ref:A,channel:N,display_content:null!=M?M:"",showSampleValues:T}):e.jsx(e.Fragment,{})})),(q||m)&&e.jsx(C,Object.assign({channel:N},{children:N!==i.CHANNEL_TYPE.WHATSAPP?e.jsx(h.default,{onFocus:N===i.CHANNEL_TYPE.EMAIL?function(e){var t,a,l;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===y?"template_html_mobile":"template_html_desktop"),n=r.getVariableNameForEmailByIndex(e+1),d=N===i.CHANNEL_TYPE.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(n):document.getElementById(n),p=W(d),c=null==d?void 0:d.offsetLeft;"desktop"===y?p&&A.current&&(null===(a=null==o?void 0:o.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),u.highlightFor(n,s.COLORS.background.warning.light,2,N,y)):p&&L.current&&(null===(l=null==o?void 0:o.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),u.highlightFor(n,s.COLORS.background.warning.light,2,N,y))}:void 0,showVariableModal:w,variableList:b,discountCode:j,setDiscountCode:P}):N===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(o.default,{whatsappSpecificPickerMeta:g,template:S,showVariableModal:w,variableList:b,variableListForImage:E,discountCode:j,setDiscountCode:P}):e.jsx(p.default,{whatsappSpecificPickerMeta:g,template:S,onTemplateChange:e=>{null==_||_(e)},showVariableModal:w,variableList:b,variableListForImage:E,discountCode:j,setDiscountCode:P})}))]})};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/document_pdf.svg.js"),t=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("styled-components"),n=require("../../shimmer-image/ShimmerImage.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/document_pdf.svg.js"),t=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("styled-components"),n=require("../../shimmer-image/ShimmerImage.js"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),a=require("../../TypographyStyle.js"),d=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),g=require("./EditMediaV2.style.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=h(r).default.div`
|
|
2
2
|
padding-left: 14px;
|
|
3
3
|
padding-right: 6px;
|
|
4
4
|
width: 44px;
|
|
5
5
|
height: 24px;
|
|
6
6
|
border-left: 1px solid ${c.COLORS.stroke.primary};
|
|
7
7
|
cursor: pointer;
|
|
8
|
-
`;exports.default=r=>{const{imageName:h,error:j,isLoading:p,mediaType:m,disableEditVariable:x,selectedVariable:y,setOpenEditMedia:O}=r,f=null==h?void 0:h[0].split("/"),v=null==f?void 0:f[f.length-1];return e.jsxs(g.Container,{children:[e.jsx(g.ImageContainer,Object.assign({error:!!j,onClick:()=>null==O?void 0:O(!0)},{children:j?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(
|
|
8
|
+
`;exports.default=r=>{const{imageName:h,error:j,isLoading:p,mediaType:m,disableEditVariable:x,selectedVariable:y,setOpenEditMedia:O}=r;console.log("EditMediaV2 : ",r);const f=null==h?void 0:h[0].split("/"),v=null==f?void 0:f[f.length-1];return e.jsxs(g.Container,{children:[e.jsx(g.ImageContainer,Object.assign({error:!!j,onClick:()=>null==O?void 0:O(!0)},{children:j?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):m===l.HEADER_TYPES.IMAGE?e.jsx(n.ShimmerImage,{imageUrl:null==h?void 0:h[0],width:56,height:56}):m===l.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:h[0],style:{width:56,height:56}},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:h[0]})})):e.jsx(i.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(g.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:h&&j?e.jsx(e.Fragment,{}):p?e.jsx(a.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(a.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:y||d.default.toCapitilize(null==m?void 0:m.toLowerCase())||v}))})),!!j&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(a.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==m?void 0:m.toLowerCase(),". Retry"]})),e.jsx(a.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:j}))]})),!x&&!j&&!p&&e.jsx(u,Object.assign({onClick:()=>null==O?void 0:O(!0),onKeyDown:()=>null==O?void 0:O(!0),role:"presentation"},{children:e.jsx(t.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),i=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),i=require("lodash"),s=require("react"),r=require("styled-components"),a=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var o=require("../../button/Button.js"),l=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../product-picker-v2/modal.js"),u=require("../context/templateModalContext.js"),p=require("./EditWhatsAppTemplateV2.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var m=require("../../template-preview/models/WhatsAppTemplate.js"),h=require("../../../assets/icons/box.svg.js"),f=require("../../../assets/icons/delete.svg.js"),g=require("../../../assets/icons/edit.svg.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const x=t=>{const{cardBody:i,deleteItem:s,editItem:r}=t;return e.jsxs(y,Object.assign({width:"100%"},{children:[e.jsx("div",Object.assign({style:{width:36,height:36}},{children:e.jsx(h.default,{})})),e.jsx("div",Object.assign({className:"card-body"},{children:e.jsx(d.TitleRegular,{children:i})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[r&&e.jsx(l.IconButton,{style:{display:"flex"},Icon:g.default,onClick:e=>{r(),e.stopPropagation()}}),e.jsx(l.IconButton,{style:{display:"flex",color:"#919191"},Icon:f.default,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},y=j(r).default.div`
|
|
2
2
|
width: ${e=>e.width};
|
|
3
3
|
padding: 12px;
|
|
4
4
|
display: flex;
|
|
@@ -44,4 +44,4 @@
|
|
|
44
44
|
color: #000000;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
`;exports.default=
|
|
47
|
+
`;exports.default=r=>{let{template:l,whatsappSpecificPickerMeta:h,showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:b}=r;const{selectedCarouselIndex:v,setTemplate:I,pickerConf:w,isProductCarouselType:C,pod:q,cardCount:O}=u.useTemplateModalContext(),[T,k]=s.useState(-1==v?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[P,S]=s.useState(!1),[B,V]=s.useState(!1),[A,M]=s.useState(!1),[L,_]=s.useState([]);s.useEffect((()=>{k(-1==v?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[v]);return e.jsxs("div",{children:[e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:T})),C&&L.length>0&&null!=v&&v>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[e.jsx(x,{editItem:()=>S(!P),cardBody:`${L.length} Products Selected`,deleteItem:()=>{_([])}}),e.jsx(o.Button,{disabled:L.length<=1,style:{alignSelf:"flex-end",background:n.COLORS.surface.subdued},onClick:()=>{V(!0),S(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),C&&0===L.length&&null!=v&&v>=0&&e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{S(!0)}}),q===m.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(d.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{M(!0)}})]})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:h,template:l,onTemplateChange:e=>{null==I||I(e)},showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:b}),P&&w&&e.jsx(c.ProductPickerModal,{zIndex:200,rearrangeEnabled:B,limit:null!=O?O:1,storeId:w.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const i of e){const e=null==i?void 0:i.collectionId,s=i.productId,r=i.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),s in t[e].products||(t[e].products[s]={variants:{},name:(null==i?void 0:i.productName)||"",image:(null==i?void 0:i.productImage)||""}),t[e].products[s].variants[r]={name:(null==i?void 0:i.name)||"",price:"",image:(null==i?void 0:i.image)||"",quantity:i.quantity||0,displayOrder:i.displayOrder}}return t}return{}})(L),collectionFetcher:w.fetchCollections,productFetcher:w.fetchProducts,onAdd:(e,t)=>{console.log("items: ",e),V(!1);const s=[],r=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const a=i[e].variants;if(void 0!==a&&Object.keys(a).length)for(const o of Object.keys(a)){const{name:l,image:n,quantity:d,displayOrder:c}=a[o],u={name:l,image:n,quantity:d,variantId:o,productId:e,displayOrder:c,collectionId:t,productName:i[e].name,productImage:i[e].image};r.push(u),s.push(n)}}}const a=r.sort(((e,t)=>e.displayOrder-t.displayOrder)),o=i.cloneDeep(Object.assign({},l));s.forEach(((e,t)=>{e&&(o.components[1].cards[t].components[0].example.header_handle=[e])})),null==I||I(o),_(a),S(!1)},searchInCollectionFetcher:w.searchInCollection,searchFetcher:w.searchProducts,visible:P,onClose:()=>{S(!1)}}),A&&e.jsx(a.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:A,setShowVariable:M,placeholder:"Add a variable",customTrigger:e=>{}})]})};
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),r=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(i);const c=e=>/^{{.*}}$/.test(e);exports.default=d=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableListForImage:E}=d;var g,h,j,b,_,M,x,C;console.log("mediaComponent : ",p);const{disableEditVariable:y}=l.useTemplateModalContext(),[A,S]=i.useState(void 0),[T,I]=i.useState(),[q,R]=i.useState(),[O,D]=i.useState(!1),w=u.default.createRef(),[H,P]=i.useState(!1),[k,F]=i.useState(""),{template:U,setTemplate:Y}=l.useTemplateModalContext();let L;function N(){var e;(null===(e=null==w?void 0:w.current)||void 0===e?void 0:e.click)&&w.current.click()}function V(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)F(a),P(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:t,fileName:A,isImage:e});if(a.success){const[e]=t.type.split("/");v(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else F("An unknown technical error occured");P(!1)}}else F("An unknown technical error occured"),P(!1)}))}return L=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(r.default,{mediaComponentFormat:null!==(g=p.format)&&void 0!==g?g:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){if(F(""),R(""),D(!1),t)if(t.startsWith("https"))try{P(!0);const e=yield fetch(t),i=yield e.blob();yield V(i)}catch(e){F("An unknown technical error occurred")}else if(c(t)){R(t);const e=Object.assign({},U);if(e.components){const a=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==a&&a>-1&&(null==e?void 0:e.components[a])){const i=Object.assign(Object.assign({},e.components[a]),{format:p.format,example:{header_handle:[t]}}),n=[...e.components];n[a]=i,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),P(!1),null==Y||Y(Object.assign({},e))}else P(!1),F("Invalid URL or variable");else N()}))},variableListForImage:E||[],setOpenEditMedia:D,openEditMedia:O}),!!T&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:T,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){P(!1),F("");const e=yield fetch(t);V(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{P(!1),I(""),w.current&&(w.current.value="")}}),t.jsx("input",{ref:w,style:{display:"none"},type:"file",onChange:function(e){var t;F(""),P(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;I(""),S(""),e.onload=()=>{I(e.result),S(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else V(i)},accept:L}),t.jsx(s.default,{imageName:null!==(j=null===(h=null==p?void 0:p.example)||void 0===h?void 0:h.header_handle)&&void 0!==j?j:[],handleImageChange:N,mediaType:null==p?void 0:p.format,error:k,isLoading:H,setOpenEditMedia:D,selectedVariable:c(null!==(M=null===(_=null===(b=null==p?void 0:p.example)||void 0===b?void 0:b.header_handle)||void 0===_?void 0:_[0])&&void 0!==M?M:"")?null===(C=null===(x=null==p?void 0:p.example)||void 0===x?void 0:x.header_handle)||void 0===C?void 0:C[0]:q,disableEditVariable:y})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),o=require("react"),t=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),b=require("./VariableEditorHeader.js"),v=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:h,onTemplateChange:C,whatsappSpecificPickerMeta:f,showVariableModal:j,variableList:x,variableListForImage:T,discountCode:V,setDiscountCode:B}=g;var O,y,q,E,k,D,L,I,w,A,M,S,U,N,P,R,F,H;const{originalVariableList:_,pod:Q,extras:W,selectedCarouselIndex:Y}=i.useTemplateModalContext(),{descriptionComponents:K,urlBtns:$,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}=s.getAllDataFromTemplateComponent(h),[Z,ee]=o.useState(!1),[ne,oe]=o.useState(-1===Y?{descriptionComponents:K,urlBtns:$,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}:{}),[te,ie]=o.useState(!1);function le(e,o){var t,i,l,s,a,d,r;const p=null!=Y&&Y>-1?{components:null===(t=Object.assign({},h).components[1].cards)||void 0===t?void 0:t[Y].components,mapping:null===(i=Object.assign({},h).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},h),c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(l=null==p?void 0:p.components[c].buttons)||void 0===l?void 0:l.findIndex((e=>"URL"===e.type));if(void 0!==n&&n>-1){const t="custom"===o&&"string"==typeof e,i=[...null!==(d=null===(a=null===(s=p.components)||void 0===s?void 0:s[c])||void 0===a?void 0:a.buttons)&&void 0!==d?d:[]];i[n]=Object.assign(Object.assign({},i[n]),{url:"https://d.bik.ai/{{1}}",example:[t?e:"string"!=typeof e?e.defaultValue:""]});const l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),r=Object.assign(Object.assign({},p.mapping),{buttons:t?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});p.mapping=r;const u=[...p.components];u[c]=l,p.components=u}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(r=e.placeHolder)||void 0===r?void 0:r.slice(2,-2))?ee(!0):(ee(!1),null==B||B(""))}if(null!=Y&&Y>-1){const e=n.cloneDeep(h);e.components[1].cards[Y].components=p.components,e.mapping.cards[Y]=p.mapping,null==C||C(Object.assign({},e))}else null==C||C(p)}function se(e,o,t){var i,l,s;const a=null!=Y&&Y>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[Y].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[Y]}:Object.assign({},h),d=null==a?void 0:a.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==d&&d>-1){const n=null===(s=null==a?void 0:a.components[d].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));n&&(n[t]=Object.assign(Object.assign({},n[t]),{flowId:e.flowId,flowName:e.flowName}));const o=Object.assign(Object.assign({},a.components[d]),{buttons:n}),i=[...a.components];i[d]=o,a.components=i}if(null!=Y&&Y>-1){const e=n.cloneDeep(h);e.components[1].cards[Y].components=a.components,e.mapping.cards[Y]=a.mapping,null==C||C(Object.assign({},e))}else null==C||C(a)}o.useEffect((()=>{var e,n;if(null===(e=h.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ee(!0);else{ee(!1);const e=null===(n=null==W?void 0:W.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[h]),o.useEffect((()=>{var e,n,o,t;if(console.log("right panel selectedCarouselIndex: ",Y),null!=Y&&Y>-1){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Y].components,mapping:null===(t=null===(o=null==h?void 0:h.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[Y]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(i);console.log("right panel descriptionComponents: ",{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),oe({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=Y&&-1===Y){const{descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:l}=s.getAllDataFromTemplateComponent(h);oe({descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Y]),o.useEffect((()=>{var e,n,o,t;if(console.log("right panel selectedCarouselIndex: ",Y),null!=Y&&Y>-1&&te){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Y].components,mapping:null===(t=null===(o=null==h?void 0:h.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[Y]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(i);console.log("right panel descriptionComponents2: ",{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),oe({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),ie(!1)}}),[te]);const ae=l.useAdditionalVariables({variableList:x,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ne.imageComponent&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:f,mediaComponent:ne.imageComponent,updateTemplateImageUrl:function(e,o){var t,i,l,s,a;let d;d=null!=Y&&Y>-1?{components:null===(i=null===(t=h.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[Y].components,mapping:null===(s=null===(l=null==h?void 0:h.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[Y]}:Object.assign({},h);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const n=Object.assign(Object.assign({},d.components[r]),{format:o,example:{header_handle:[e]}}),t=[...d.components];t[r]=n,d=Object.assign(Object.assign({},d),{components:t})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Y&&Y>-1){const e=n.cloneDeep(h);e.components[1].cards[Y].components=d.components,e.mapping.cards[Y]=d.mapping,null==C||C(Object.assign({},e)),ie(!0)}else null==C||C(Object.assign({},d))},template:h,variableListForImage:T})}),(ne.bodyVariables.length>0||ne.headerVariables.length>0)&&e.jsx(b.default,{containerStyle:{paddingTop:ne.mediaComponent?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===(O=ne.descriptionComponents)||void 0===O?void 0:O.map(((n,o)=>e.jsx(m.default,{originalVariableList:null!=Y&&Y>-1?_.cards[Y]:_,type:n.type,descriptionComponent:n.component,showVariableModal:j,variableList:x},o))),(null===(q=null===(y=ne.urlBtns[0])||void 0===y?void 0:y.component)||void 0===q?void 0:q.buttons)&&(null===(D=null===(k=null===(E=ne.urlBtns[0])||void 0===E?void 0:E.component)||void 0===k?void 0:k.buttons)||void 0===D?void 0:D.length)>0&&e.jsx(b.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(L=null!=Y&&Y>-1?_.cards[Y].buttons:null==_?void 0:_.buttons)||void 0===L?void 0:L.map(((n,o)=>{if("URL"===n.type)return e.jsx(v.default,{variableListIndex:o,CTAoptions:null==f?void 0:f.CTAoptions,button:n,originalVariableList:null!=Y&&Y>-1?_.cards[Y]:_,updateSelectedURLTemplateBtn:le,variableList:x},`${o}`)})),(null===(w=null===(I=ne.qrbBtns[0])||void 0===I?void 0:I.component)||void 0===w?void 0:w.buttons)&&(null===(S=null===(M=null===(A=ne.qrbBtns[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)||void 0===S?void 0:S.length)>0&&(Q!==t.POD.CHATBOT?e.jsx(b.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===(U=null==W?void 0:W.backTrackExtra)||void 0===U?void 0:U[0],setBackTrackMessage:null===(N=null==W?void 0:W.backTrackExtra)||void 0===N?void 0:N[1]})),null===(P=null!=Y&&Y>-1?_.cards[Y].buttons:null==_?void 0:_.buttons)||void 0===P?void 0:P.map(((n,o)=>{if("QUICK_REPLY"===n.type)return e.jsx(v.default,{variableListIndex:o,QRBoptions:null==f?void 0:f.QRBoptions,button:n,originalVariableList:null!=Y&&Y>-1?_.cards[Y]:_,updateSelectedQRBTemplateBtn:se},`${o}`)})),Q===t.POD.CHATBOT&&Z&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(R=null==W?void 0:W.discountCodeExtra)||void 0===R?void 0:R[0],setDiscountCode:null===(F=null==W?void 0:W.discountCodeExtra)||void 0===F?void 0:F[1],variableList:x}),null===(H=null!=Y&&Y>-1?_.cards[Y].buttons:null==_?void 0:_.buttons)||void 0===H?void 0:H.map(((n,o)=>{var t,i,l;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:o,variable:{variableName:null!==(t=n.text)&&void 0!==t?t:"",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:ae,componentType:"BUTTONS"},o)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),l=require("../context/templateModalContext.js"),i=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:j,whatsappSpecificPickerMeta:C,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,E,B,L,U,k,q,D,I,w,R,A,P,S;const{originalVariableList:N,pod:M,extras:_,selectedCarouselIndex:Q,isProductCarouselType:Y}=l.useTemplateModalContext(),{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}=s.getAllDataFromTemplateComponent(f),[z,G]=n.useState(!1),[J,Z]=n.useState(-1===Q?{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}:{});console.log("templateComponentData : ",J);const[ee,te]=n.useState(!1);function ne(e,n,o){var l,i,s,a,d,r,p,c;const u=null!=Q&&Q>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Q].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Q]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Q&&Q>-1&&Y){const e=Object.assign({},f).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,n,l;if("BUTTONS"===e.type){const i=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==i?void 0:i[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(l=e.buttons)||void 0===l?void 0:l.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),n=t.cloneDeep(f);return n.components=e,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const l="custom"===n&&"string"==typeof e,i=l?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[i]}),console.log("templateCopy test: ",o,s,n,e);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[o]=l?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(c=e.placeHolder)||void 0===c?void 0:c.slice(2,-2))?G(!0):(G(!1),null==y||y(""))}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=u.components,e.mapping.cards[Q]=u.mapping,console.log("templateCopy: ",e),null==j||j(Object.assign({},e))}else null==j||j(u)}function oe(e,n,o){var l,i,s,a,d,r;const p=null!=Q&&Q>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Q].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Q]}:Object.assign({},f);if(null!=Q&&Q>-1&&Y){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,l,i;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(l=null==s?void 0:s[o])&&void 0!==l?l:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(i=t.buttons)||void 0===i?void 0:i.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},t),{buttons:d})}return t}))})))}):t})),l=t.cloneDeep(f);return l.components=n,void(null==j||j(Object.assign({},l)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const t=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const l=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==n?void 0:n.text)?n:e)),i=Object.assign(Object.assign({},p.components[c]),{buttons:l}),s=[...p.components];s[c]=i,p.components=s}}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=p.components,e.mapping.cards[Q]=p.mapping,console.log("templateCopy 2: ",e),null==j||j(Object.assign({},e))}else null==j||j(p)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))G(!0);else{G(!1);const e=null===(t=null==_?void 0:_.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{console.log("templateComponentData: ",J)}),[J]),n.useEffect((()=>{var e,t,n,o;if(null!=Q&&Q>-1){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);Z({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=Q&&-1===Q){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i}=s.getAllDataFromTemplateComponent(f);Z({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i})}}),[Q]),n.useEffect((()=>{var e,t,n,o;if(console.log("right panel selectedCarouselIndex: ",Q),null!=Q&&Q>-1&&ee){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);Z({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),te(!1)}}),[ee]);const le=i.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!J.imageComponent&&!Y&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:C,mediaComponent:J.imageComponent,updateTemplateImageUrl:function(e,n){var o,l,i,s,a;let d;d=null!=Q&&Q>-1?{components:null===(l=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===l?void 0:l[Q].components,mapping:null===(s=null===(i=null==f?void 0:f.mapping)||void 0===i?void 0:i.cards)||void 0===s?void 0:s[Q]}:Object.assign({},f);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=d.components,e.mapping.cards[Q]=d.mapping,null==j||j(Object.assign({},e)),te(!0)}else null==j||j(Object.assign({},d))},template:f,variableListForImage:x})}),(J.bodyVariables.length>0||J.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:J.mediaComponent?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===(V=J.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Q&&Q>-1?N.cards[Q]:N,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(B=null===(E=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===E?void 0:E.filter((e=>"URL"===e.type)))||void 0===B?void 0:B.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==C?void 0:C.CTAoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedURLTemplateBtn:ne,variableList:O},`${n}_${Q}`)})),(null===(q=null===(k=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(M!==o.POD.CHATBOT?e.jsx(v.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===(D=null==_?void 0:_.backTrackExtra)||void 0===D?void 0:D[0],setBackTrackMessage:null===(I=null==_?void 0:_.backTrackExtra)||void 0===I?void 0:I[1]})),null===(R=null===(w=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===w?void 0:w.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==C?void 0:C.QRBoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedQRBTemplateBtn:oe},`${n}_${Q}`)})),M===o.POD.CHATBOT&&z&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==_?void 0:_.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==_?void 0:_.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,l,i;if("COPY_CODE"===t.type)return e.jsx(c.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(l=t.buttonVariable)&&void 0!==l?l:"",type:"string",isEditableVariable:!0,index:null!==(i=t.index)&&void 0!==i?i:0},showVariableModal:!0,variableList:le,componentType:"BUTTONS"},n)}))]}))};
|
|
@@ -10,4 +10,4 @@
|
|
|
10
10
|
gap: 12;
|
|
11
11
|
border-bottom-left-radius: 4px;
|
|
12
12
|
border-bottom-right-radius: 4px;
|
|
13
|
-
`;exports.default=r=>{let{isWhatsappCarousel:s,onSelect:l}=r;const{isError:d,selectedCarouselIndex:i,setSelectedCarouselIndex:c}=n.useTemplateModalContext(),[
|
|
13
|
+
`;exports.default=r=>{let{isWhatsappCarousel:s,onSelect:l}=r;const{isError:d,selectedCarouselIndex:i,setSelectedCarouselIndex:c,setErrorIndexes:p}=n.useTemplateModalContext(),[x,b]=t.useState(s?"Next":"Select template");return t.useEffect((()=>{s&&-1===i?b("Next"):s&&null!=i&&i>-1&&b("Save & Select Template")}),[i]),e.jsxs(u,{children:[d&&e.jsx(a.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:x,size:s?"small":"large",onClick:function(){s&&-1===i&&c?c(0):(null==p||p([]),l())}})]})};
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../custom-date-time/CustomDateTime.js"),u=require("../../dropdown/Dropdown.js"),d=require("../../input/Input.js"),r=require("../../product-picker-v2/collectionScreen.js"),c=require("../../template-preview/constants/regexPatterns.js"),p=require("../../template-preview/models/Channels.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),j=require("../context/templateModalContext.js"),O=require("../utils/getVariableNameEmail.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=x(n);const y=h.default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===p.CHANNEL_TYPE.EMAIL?g.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,_={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"};exports.Container=O,exports.default=i=>{let{onFocus:j,variable:y,index:T,showVariableModal:A,variableList:N,setShowDiscountCheckBox:C,componentType:S,CTAoptions:P}=i;var V,L;const[k,H]=n.useState(!1),[w,D]=n.useState(""),[B,q]=n.useState([]),[Y,M]=n.useState(),[R,U]=n.useState(!1),[I,W]=n.useState(!1),{device:$,channel:z,isError:Z,originalVariableList:F,template:G,templateSelectionTriggered:K,setTemplate:J,setDisplayContent:Q,setOriginalVariableList:X,globalNormalizedPlaceholders:ee,enabledCustomText:te,pod:le,selectedCarouselIndex:ae}=h.useTemplateModalContext();function ne(){var e,t;const l=[];let a=[];if(z!==p.CHANNEL_TYPE.MESSAGE||te){"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,f]}),M(_)):"date_time"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,f]}),M(E)):(l.push({label:"",options:[_,f,E]}),M(f));const e=null!=ee?ee:[];q([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ee?ee:[];q([{label:"",options:[f,_]},...e]),a=[{label:"",options:[f,_]},...e]}if((z===p.CHANNEL_TYPE.WHATSAPP||z===p.CHANNEL_TYPE.EMAIL||z===p.CHANNEL_TYPE.MESSAGE)&&y.updatedValue)if(c.placeHolderNamePattern.test(y.updatedValue)&&z===p.CHANNEL_TYPE.WHATSAPP||y.updatedValue.startsWith("{{")&&z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(A){let t=e.updatedValue;if(le===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(y,a,z);e.value&&M(e)}else"date_time"===y.type?(M(E),D(y.updatedValue),ue(null!==(e=y.index)&&void 0!==e?e:0,y.updatedValue)):(null===(t=y.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(M(_),D(y.updatedValue.split("https://")[1])):(M(f),D(y.updatedValue))}function ie(e,t){var l,a,n;const i=e;D(""),M(i),z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(se(null!==(l=i.value)&&void 0!==l?l:"","string"),null==ue||ue(null!==(a=y.index)&&void 0!==a?a:0,i.value,!0)):(null==ue||ue(null!==(n=y.index)&&void 0!==n?n:0,w,!0,i.value),se("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?se(i.value,"url"===i.bikPlaceholderType?"link":"string"):(D(""),se("",i.value))}function oe(e,t){var l;D(t);const a="custom_link"===(null==Y?void 0:Y.value)&&t?t.includes("https")?t:`https://${t}`:t;se(a,"static_expiry"===e?"string":e),z===p.CHANNEL_TYPE.WHATSAPP&&(null==ue||ue(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function se(e,t){var l,n,i,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(z!==p.CHANNEL_TYPE.WHATSAPP){const a=x.getVariableNameForEmailByIndex(T+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===$?"template_html_mobile":"template_html_desktop"),i=z===p.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const o=F.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==X||X(o)}if(z===p.CHANNEL_TYPE.WHATSAPP){const l=null!=ae&&ae>-1?F.cards[ae]:F;let u=l.body,d=l.header,r=l.buttons;if(console.log("variableList: ",l),"BODY"===S?u=null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===S?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===S&&(r=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===T?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ae&&ae>-1){const e=a.cloneDeep(F.cards);e[ae]={header:d,body:u,buttons:r},null==X||X((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==X||X((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function ue(e,t,l,n){var i,o,s,u,d,r;const c=null!=ae&&ae>-1?{components:null===(i=Object.assign({},G).components[1].cards)||void 0===i?void 0:i[ae].components,mapping:null===(o=Object.assign({},G).mapping.cards)||void 0===o?void 0:o[ae]}:Object.assign({},G),p=null===(s=null==c?void 0:c.components)||void 0===s?void 0:s.map((l=>{var a,n,i,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){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!==(s=null===(o=null===(i=m.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.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({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===S){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(c.components=p,l)if("BODY"===S&&(null===(u=null==c?void 0:c.mapping)||void 0===u?void 0:u.body))c.mapping=Object.assign(Object.assign({},c.mapping),{body:c.mapping.body.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(d=null==c?void 0:c.mapping)||void 0===d?void 0:d.header))c.mapping=Object.assign(Object.assign({},c.mapping),{header:c.mapping.header.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(r=null==c?void 0:c.mapping)||void 0===r?void 0:r.buttons)){let l=-1,a=-1;p.forEach((t=>{var n;"BUTTONS"===t.type&&(null===(n=t.buttons)||void 0===n||n.forEach(((t,n)=>{"URL"===t.type&&(l++,n===e&&"URL"==t.type&&(a=l))})))})),c.mapping=Object.assign(Object.assign({},c.mapping),{buttons:c.mapping.buttons.map(((e,l)=>l===a?"custom_link"===n?"((customPlaceholderName))":t:e))})}if(null!=ae&&ae>-1&&G){const e=a.cloneDeep(G);e.components[1].cards[ae].components=c.components,e.mapping.cards[ae]=c.mapping,null==J||J(e),console.log("templateCopy: ",e)}else null==J||J(Object.assign({},c)),console.log("currentTemplate 0000: ",c)}return n.useEffect((()=>{k&&(null==j||j())}),[k]),n.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===$?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);z===p.CHANNEL_TYPE.EMAIL&&(null==Q||Q(s))}()}),[K]),n.useEffect((()=>{ne()}),[]),n.useEffect((()=>{ne()}),[ae]),n.useEffect((()=>{$&&Y&&w&&setTimeout((()=>{se("custom_link"===(null==Y?void 0:Y.value)&&w?w.includes("https")?w:`https://${w}`:w,Y.value)}),100)}),[$]),n.useEffect((()=>{!I&&Y&&y.updatedValue&&setTimeout((()=>{se("custom_link"===(null==Y?void 0:Y.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,Y.value),W(!0)}),100)}),[Y]),e.jsxs(O,Object.assign({channel:z,focused:k,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:Z&&!Y?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(V=y.variableName)||void 0===V?void 0:V.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:A?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==Y?void 0:Y.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:le===m.POD.CHATBOT?null==Y?void 0:Y.value:r.truncate(null!==(L=null==Y?void 0:Y.label)&&void 0!==L?L:"",20,!0)})),e.jsx(t.default,{onClick:()=>{U(!R)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{options:B,isSearchable:!1,onSelect:ie,defaultOptions:Y?[Object.assign(Object.assign({},Y),{selected:!0})]:[]})})),("custom_text"===(null==Y?void 0:Y.value)||"custom_link"===(null==Y?void 0:Y.value))&&e.jsx(d.Input,{labelText:"custom_text"===(null==Y?void 0:Y.value)?"Custom text value":"custom_link"===(null==Y?void 0:Y.value)?"Custom URL value":"",id:`variable-value-${null==Y?void 0:Y.value}-${T}`,value:w,errorMessage:Z?w&&0!==w.trim().length?"custom_link"!==Y.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${w.trim()}`)&&0!==w.trim().length?"custom_link"!==Y.value&&w.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==Y.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==Y?void 0:Y.value)?2e3:"BUTTONS"===S?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==Y?void 0:Y.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===Y.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{oe(Y.value,e)}}),"static_expiry"===(null==Y?void 0:Y.value)&&e.jsx(s.CustomDateTime,{placement:"auto",time:w?l.format(new Date(w),"hh:mm a"):l.format(new Date,"hh:mm a"),date:w?new Date(w):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{oe("static_expiry",e.toISOString())}}),R&&e.jsx(o.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:R,setShowVariable:U,placeholder:"Add a variable",customTrigger:e=>{null==C||C(!1),"{{custom.url}}"===e.actualValue?ie({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ie({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ie({label:e.displayName,selected:!0,value:"static_expiry"}):ie({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
7
|
+
`,_=h.default.div`
|
|
8
|
+
position: absolute;
|
|
9
|
+
top: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
14
|
+
z-index: 1000;
|
|
15
|
+
cursor: not-allowed;
|
|
16
|
+
`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:S,componentType:V,CTAoptions:P}=n;var k,L;const[H,w]=i.useState(!1),[D,B]=i.useState(""),[q,Y]=i.useState([]),[M,R]=i.useState(),[U,I]=i.useState(!1),[W,$]=i.useState(!1),{device:z,channel:Z,isError:F,originalVariableList:G,template:K,templateSelectionTriggered:J,setTemplate:Q,setDisplayContent:X,setOriginalVariableList:ee,globalNormalizedPlaceholders:te,enabledCustomText:le,pod:ae,selectedCarouselIndex:ie,isProductCarouselType:ne,disableEditVariable:se,disableEditExpiry:oe}=j.useTemplateModalContext();function ue(){var e,t;const l=[];let a=[];if(Z!==p.CHANNEL_TYPE.MESSAGE||le){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(T)):(l.push({label:"",options:[f,E,T]}),R(E));const e=null!=te?te:[];Y([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=te?te:[];Y([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((Z===p.CHANNEL_TYPE.WHATSAPP||Z===p.CHANNEL_TYPE.EMAIL||Z===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&Z===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&Z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ae===m.POD.CHATBOT&&"BUTTONS"===V){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(h,a,Z);e.value&&R(e)}else"date_time"===h.type?(R(T),B(h.updatedValue),pe(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(R(f),B(h.updatedValue.split("https://")[1])):(R(E),B(h.updatedValue))}function de(e,t){var l,a,i;const n=e;B(""),R(n),Z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ce(null!==(l=n.value)&&void 0!==l?l:"","string"),null==pe||pe(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==pe||pe(null!==(i=h.index)&&void 0!==i?i:0,D,!0,n.value),ce("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ce(n.value,"url"===n.bikPlaceholderType?"link":"string"):(B(""),ce("",n.value))}function re(e,t){var l;B(t);const a="custom_link"===(null==M?void 0:M.value)&&t?t.includes("https")?t:`https://${t}`:t;ce(a,"static_expiry"===e?"string":e),Z===p.CHANNEL_TYPE.WHATSAPP&&(null==pe||pe(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ce(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Z!==p.CHANNEL_TYPE.WHATSAPP){const a=O.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),n=Z===p.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=G.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ee||ee(s)}if(Z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ie&&ie>-1&&ne){const t=Object.assign({},G).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>A===a?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):t))})}));return void(null==ee||ee((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ie&&ie>-1?G.cards[ie]:G;let u=l.body,d=l.header,r=l.buttons;if("BODY"===V?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===V?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===V&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ie&&ie>-1){const e=a.cloneDeep(G.cards);e[ie]={header:d,body:u,buttons:r},null==ee||ee((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ee||ee((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function pe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ie&&ie>-1&&ne){const s=Object.assign({},K).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),o=a.cloneDeep(K);if(l){const l=null===(n=Object.assign({},K).mapping.cards)||void 0===n?void 0:n.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,console.log("mappingComponent templateCopy: ",o),void(null==Q||Q(o))}const p=null!=ie&&ie>-1?{components:null===(s=Object.assign({},K).components[1].cards)||void 0===s?void 0:s[ie].components,mapping:null===(o=Object.assign({},K).mapping.cards)||void 0===o?void 0:o[ie]}:Object.assign({},K),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===V){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===V){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.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({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===V){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===V)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===V&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===V&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===V&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ie&&ie>-1&&K){const e=a.cloneDeep(K);e.components[1].cards[ie].components=p.components,e.mapping.cards[ie]=p.mapping,null==Q||Q(e)}else null==Q||Q(Object.assign({},p))}return i.useEffect((()=>{H&&(null==x||x())}),[H]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===z?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);Z===p.CHANNEL_TYPE.EMAIL&&(null==X||X(o))}()}),[J]),i.useEffect((()=>{ue()}),[]),i.useEffect((()=>{ue()}),[ie]),i.useEffect((()=>{z&&M&&D&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&D?D.includes("https")?D:`https://${D}`:D,M.value)}),100)}),[z]),i.useEffect((()=>{!W&&M&&h.updatedValue&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,M.value),$(!0)}),100)}),[M]),e.jsxs(y,Object.assign({channel:Z,focused:H,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:F&&!M?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==M?void 0:M.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ae===m.POD.CHATBOT?null==M?void 0:M.value:r.truncate(null!==(L=null==M?void 0:M.label)&&void 0!==L?L:"",20,!0)})),se||"date_time"===(null==h?void 0:h.type)&&oe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{I(!U)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:se,options:q,isSearchable:!1,onSelect:de,defaultOptions:M?[Object.assign(Object.assign({},M),{selected:!0})]:[]})})),("custom_text"===(null==M?void 0:M.value)||"custom_link"===(null==M?void 0:M.value))&&e.jsx(d.Input,{state:se?"disabled":"none",labelText:"custom_text"===(null==M?void 0:M.value)?"Custom text value":"custom_link"===(null==M?void 0:M.value)?"Custom URL value":"",id:`variable-value-${null==M?void 0:M.value}-${A}`,value:D,errorMessage:F?D&&0!==D.trim().length?"custom_link"!==M.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${D.trim()}`)&&0!==D.trim().length?"custom_link"!==M.value&&D.length>30?"Length cannot be more than 30":"BUTTONS"===V&&"custom_link"!==M.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==M?void 0:M.value)?2e3:"BUTTONS"===V?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==M?void 0:M.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===M.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{re(M.value,e)}}),"static_expiry"===(null==M?void 0:M.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[se&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:D?l.format(new Date(D),"hh:mm a"):l.format(new Date,"hh:mm a"),date:D?new Date(D):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{re("static_expiry",e.toISOString())}})]})),U&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:U,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!1),"{{custom.url}}"===e.actualValue?de({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"static_expiry"}):de({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),r=require("../custom-hooks/useAdditionalVariables.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),r=require("../custom-hooks/useAdditionalVariables.js"),d=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:o,type:n,showVariableModal:p,variableList:b}=s;var c,u,x,v,y,m;const{originalVariableList:j,disableEditVariable:h,selectedCarouselIndex:V}=t.useTemplateModalContext(),g=r.useAdditionalVariables({variableList:b,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});return"BODY"===o.type?e.jsx("div",{children:null===(c=null!=V&&V>-1?j.cards[V].body:null==j?void 0:j.body)||void 0===c?void 0:c.map(((t,r)=>h||!t.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===n?"Header":""," Locked variable ",r+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r):e.jsx(d.default,{index:r,variable:t,showVariableModal:p,variableList:b,componentType:o.type},`${r}-${t.index}`)))}):"HEADER"===o.type?e.jsx("div",{children:null===(u=null!=V&&V>-1?j.cards[V].header:null==j?void 0:j.header)||void 0===u?void 0:u.map(((t,r)=>t.isEditableVariable?e.jsx(d.default,{index:r,variable:t,showVariableModal:p,variableList:b,componentType:o.type},`${r}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:l.COLORS.content.primary}},{children:["HEADER"===n?"Header":""," Locked variable ",r+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r)))}):"limited_time_offer"===o.type?e.jsx("div",{children:e.jsx(d.default,{index:0,variable:{variableName:null!==(v=null===(x=null==o?void 0:o.limited_time_offer)||void 0===x?void 0:x.text)&&void 0!==v?v:"Expires after",updatedValue:null!==(m=null===(y=o.example)||void 0===y?void 0:y.limited_time_offer)&&void 0!==m?m:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:p,variableList:g,componentType:o.type},`${o.type}`)}):e.jsx(e.Fragment,{})};
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAp
|
|
|
5
5
|
export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
|
|
6
6
|
export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
|
|
7
7
|
export interface WhatsAppTemplateCardButtonV2Props {
|
|
8
|
-
|
|
8
|
+
currentVariableList: WhatsAppTemplateVariables;
|
|
9
9
|
updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
|
|
10
10
|
updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
|
|
11
11
|
button: TEMPLATE_BUTTON;
|
|
@@ -14,5 +14,5 @@ export interface WhatsAppTemplateCardButtonV2Props {
|
|
|
14
14
|
variableList?: VariableListInterfaceV2[];
|
|
15
15
|
variableListIndex: number;
|
|
16
16
|
}
|
|
17
|
-
declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn,
|
|
17
|
+
declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, currentVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
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"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),s=require("../../input/Input.js"),a=require("../../template-preview/constants/regexPatterns.js"),n=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),c=require("../custom-hooks/useAdditionalVariables.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:v,currentVariableList:O,CTAoptions:x,QRBoptions:f,variableList:y}=p;var L,R,U,h;const[V,C]=t.useState(""),[w,T]=t.useState(),I=c.useAdditionalVariables({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:q,disableEditVariable:N,pod:P,selectedCarouselIndex:E,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:B}=u.useTemplateModalContext();function H(e){if(C(e),null!=E&&E>-1&&B){const t=S;if("URL"===m.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==_||_((e=>Object.assign(Object.assign({},e),{cards:l}))),null==g||g(`https://${e}`,"custom",j)}return}let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const l=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),s=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(s.buttons=l,null!=E&&E>-1){const e=[...S.cards];e[E]=s,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...l]})));null==g||g(`https://${e}`,"custom",j)}return t.useEffect((()=>{var e;if(m.buttonVariable&&a.editableVarPattern.test(m.buttonVariable))T(n.CUSTOM_URL_NAME),C((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&T(t[e])}}),[]),P!==i.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:N,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,t){const l=e;T(l);const s=("URL"===m.type?x:f).find((e=>e.placeHolder===l.placeHolder));if(s)if("custom_link"!==s.value){if(null!=E&&E>-1&&B){const e=S;if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder});const s=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll: ",t)}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value});const s=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==v||v({flowName:l.label,flowId:l.value},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll uui: ",t)}return}let e;if("URL"===m.type){let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder}),e=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j)}else{let t=O.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value}),e=O.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({flowName:l.label,flowId:l.value},"placeholder",j)}console.log("templateCopy updatedVariables: ",e);const t=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(t.buttons=e,null!=E&&E>-1){const e=[...S.cards];e[E]=t,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else H("")},defaultOptions:w?[Object.assign(Object.assign({},w),{selected:!0})]:[]})})),"custom_link"===(null==w?void 0:w.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(s.Input,{state:N?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:H,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(L=m.text)&&void 0!==L?L:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(R=m.example)||void 0===R?void 0:R[0]}`:null!==(U=m.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(h=m.index)&&void 0!==h?h:0},showVariableModal:!0,componentType:"BUTTONS",variableList:I,CTAoptions:x})};
|
|
@@ -2,6 +2,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
|
|
|
2
2
|
isCarouselCard?: boolean | undefined;
|
|
3
3
|
showBorder?: boolean | undefined;
|
|
4
4
|
isWhatsappCarousel?: boolean | undefined;
|
|
5
|
+
hasError?: boolean | undefined;
|
|
5
6
|
}, never>;
|
|
6
7
|
export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
|
|
7
8
|
numberOfLines?: number | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default.div`
|
|
2
2
|
background: ${r.COLORS.surface.standard};
|
|
3
3
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
|
|
4
4
|
border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
|
|
@@ -7,22 +7,21 @@
|
|
|
7
7
|
border-bottom-left-radius: 12px;
|
|
8
8
|
position: relative;
|
|
9
9
|
padding: 8px 0px;
|
|
10
|
-
border
|
|
11
|
-
|
|
12
|
-
border-style: ${e=>e.showBorder?"solid":"none"};
|
|
10
|
+
border: 2px solid
|
|
11
|
+
${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.text.white}`};
|
|
13
12
|
:hover {
|
|
14
13
|
border: 2px
|
|
15
|
-
${e=>e.isWhatsappCarousel?e.showBorder?"solid":"dashed":"
|
|
14
|
+
${e=>e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
|
|
16
15
|
${r.COLORS.stroke.brand};
|
|
17
16
|
}
|
|
18
|
-
`,
|
|
17
|
+
`,d=i.default(t.Caption)`
|
|
19
18
|
color: ${r.COLORS.content.secondary};
|
|
20
19
|
max-width: 80px;
|
|
21
20
|
text-overflow: ellipsis;
|
|
22
21
|
white-space: nowrap;
|
|
23
22
|
overflow: hidden;
|
|
24
23
|
text-wrap: wrap;
|
|
25
|
-
`,
|
|
24
|
+
`,s=i.default.div`
|
|
26
25
|
border-radius: 8px;
|
|
27
26
|
display: flex;
|
|
28
27
|
flex-direction: column;
|
|
@@ -38,7 +37,7 @@
|
|
|
38
37
|
justify-content: center;
|
|
39
38
|
align-items: center;
|
|
40
39
|
border-top: 1px solid ${r.COLORS.stroke.primary};
|
|
41
|
-
`,
|
|
40
|
+
`,n=i.default.div`
|
|
42
41
|
display: flex;
|
|
43
42
|
flex-direction: row;
|
|
44
43
|
justify-content: space-between;
|
|
@@ -61,4 +60,4 @@
|
|
|
61
60
|
position: absolute;
|
|
62
61
|
top: 16px;
|
|
63
62
|
right: 16px;
|
|
64
|
-
`,exports.ChatBtnContainer=p,exports.Container=
|
|
63
|
+
`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=n,exports.MediaContainer=s,exports.TimeStamp=d;
|