@bikdotai/bik-component-library 0.0.388-beta.1 → 0.0.388-beta.10

package/dist/cjs/components/add-variableV2/AddVariableV2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/back_icon.svg.js"),s=require("../../assets/icons/chevronRightAlt.svg.js"),i=require("../../assets/icons/cross.svg.js"),l=require("../../assets/icons/plus.svg.js"),t=require("../../assets/icons/undo.svg.js"),n=require("react"),r=require("./AddVariableV2.styled.js"),c=require("../button/Button.js"),o=require("../icon-button/IconButton.js"),d=require("../searchBar/searchBar.js"),b=require("../tooltips/Tooltip.js"),u=require("../../constants/Theme.js"),v=require("../TypographyStyle.js");const j=n.memo((j=>{const{data:g}=j,[m,p]=n.useState(j.data),[h,y]=n.useState({}),[x,f]=n.useState(),[O,N]=n.useState(""),[V,S]=n.useState(""),[T,C]=n.useState(!1),[_,k]=n.useState(!0),w=/^[^.]*\.[^.]*$/;console.log("ignore:",m),n.useEffect((()=>{const e={};g.forEach((a=>{e[a.displayName]=[]})),f(e)}),[g]),n.useEffect((()=>{q(!0)}),[]),n.useEffect((()=>{if(V){B(j.data,_).length>0?C(!0):C(!1)}else C(!0)}),[V]);const B=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(V.toLowerCase()))&&(!a||e.variables[s].isAvailable===a)||L(e.variables[s])}))))},F=(e,a)=>{const s=g.find((e=>e.displayName===a));if(s){let i=s;e.forEach(((e,a)=>{i=i.variables[e]})),y((e=>Object.assign(Object.assign({},e),{[a]:i})))}},L=e=>{let a=!1;if(e.isSubHeader&&e.variables){const s=Object.keys(e.variables);for(let i=0;i<s.length;i++){const l=s[i];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(V.toLowerCase())&&e.variables[l].isAvailable===_){a=!0;break}}}return a},q=e=>{if(k(e),e){let a=[];if(O){const e=h[O];a=j.data.filter((e=>e.displayName===O)).map((a=>I(a,e))).filter((e=>null!=e))}else a=j.data.map((e=>I(e))).filter((e=>null!==e));p(a),V&&(a=B(a,e)),a.length>0?C(!0):C(!1)}else if(p(j.data),V){B(j.data,e).length>0?C(!0):C(!1)}else C(!0)};function I(e,a){const s={};if(a){for(const i in e.variables)if(e.variables[i]===a)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a])}else for(const a in e.variables)e.variables[a].isAvailable&&(s[a]=e.variables[a]);return 0===Object.keys(s).length?null:Object.assign(Object.assign({},e),{variables:s})}const A=a=>{const s=a.item.description;return e.jsx(e.Fragment,{children:e.jsx(b.Tooltip,Object.assign({body:"",tooltipContent:e.jsx(v.BodyCaption,Object.assign({color:u.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:a.item.isAvailable?s?`• ${s}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:e.jsx("div",{children:e.jsx(E,{item:a.item})})}))})},E=a=>e.jsx(c.Button,{darkMode:j.enableVariable?j.enableVariable:a.item.isAvailable,size:"chip",LeadingIcon:a.item.isSubHeader?void 0:l.default,TrailingIcon:()=>a.item.isSubHeader?e.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:e.jsx(s.default,{})})):e.jsx(e.Fragment,{}),buttonText:a.item.displayName}),H=(a,s)=>_&&!a.isAvailable?e.jsx(e.Fragment,{}):e.jsx("div",Object.assign({onClick:a.isSubHeader?()=>{const e=[...x[O],s];F(e,O),f((a=>Object.assign(Object.assign({},a),{[O]:e})))}:()=>{j.customTrigger?(j.customTrigger(a),j.setShowVariable(!1)):j.isEvaluationList?P(a):j.setVariableValue(j.selectWithTypes?{actualValue:a.actualValue,variableType:a.variableType,needsFetching:a.needsFetching}:a.actualValue)}},{children:e.jsx(A,{item:a})})),M=(e,a)=>{const s=[...x[e.displayName],a];F(s,e.displayName),f((a=>Object.assign(Object.assign({},a),{[e.displayName]:s}))),N(e.displayName)},P=e=>{if(e.actualValue.match(w)){const a=e.actualValue.replace("{{","").replace("}}","").split("."),s=a[0]+`['${a[1]}']`;j.setVariableValue(j.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;j.setVariableValue(j.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},$=(e,a)=>{if(j.customTrigger)j.customTrigger(e.variables[a]),j.setShowVariable(!1);else if(j.isEvaluationList){const s=e.variables[a];P(s)}else j.setVariableValue(j.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},z=j.isModalState?void 0:{top:"small"===j.pickerSize?"300px":"60px",left:`${j.leftPosition?j.leftPosition+24:430}px`};return e.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:e.jsx(r.AddVariableStyled,Object.assign({style:z,onClick:e=>{e.stopPropagation()},pickerSize:j.pickerSize||"large",isModalState:j.isModalState},{children:j.showVariable&&e.jsxs("div",Object.assign({className:"popup"},{children:[e.jsxs("div",Object.assign({className:"sticky__bar"},{children:[e.jsxs("div",Object.assign({className:"header__bar"},{children:[e.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),e.jsx("div",Object.assign({onClick:()=>{j.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:e.jsx(o.IconButton,{iconButtonType:"default",Icon:i.default})}))]})),e.jsx("div",Object.assign({className:"search__bar",onBlur:e=>{j.onSearchBlur&&j.onSearchBlur(e)}},{children:e.jsx(d.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{S(e)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!T&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[e.jsx(v.TitleSmall,{children:"No results found!"}),e.jsx(v.BodyCaption,{children:`Sorry we could not find any results for "${V}"`})]})),O&&x[O].length>0&&e.jsxs("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[e.jsxs("div",Object.assign({className:"left__nav"},{children:[e.jsx(o.IconButton,{Icon:a.default,style:{color:"#919191",display:"flex"},onClick:()=>{const e=x[O].slice(0,-1);F(e,O),f((a=>Object.assign(Object.assign({},a),{[O]:e}))),e.length||N("")}}),e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx(v.TitleSmall,{children:h[O].displayName}),h[O].description&&e.jsx(v.BodyCaption,{children:h[O].description})]}))]})),e.jsxs("div",Object.assign({className:"right__nav"},{children:[e.jsx(o.IconButton,{Icon:t.default,style:{display:"flex"},onClick:()=>{F([],O),f((e=>Object.assign(Object.assign({},e),{[O]:[]}))),N("")}}),e.jsx("div",{children:"First page"})]}))]}))]})),e.jsx("div",Object.assign({className:"wrapper"},{children:e.jsx("div",Object.assign({className:"list__map"},{children:e.jsxs("div",Object.assign({className:"items"},{children:[!O&&j.data.map((a=>{let s=[];return V&&(s=Object.keys(a.variables).filter((e=>{var s;return(null===(s=a.variables[e].displayName)||void 0===s?void 0:s.toLowerCase().includes(V.toLowerCase()))||L(a.variables[e])}))),e.jsxs(e.Fragment,{children:[V?s.length>0?e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx("div",Object.assign({className:"heading__font"},{children:null==a?void 0:a.displayName})),e.jsx(v.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==a?void 0:a.description}))]})):e.jsx(e.Fragment,{}):e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx("div",Object.assign({className:"heading__font"},{children:null==a?void 0:a.displayName})),e.jsx(v.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==a?void 0:a.description}))]})),Object.keys(a.variables).map((s=>{var i;return V?(null===(i=a.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(V.toLowerCase()))||L(a.variables[s])?e.jsx("div",Object.assign({onClick:a.variables[s].isSubHeader?()=>M(a,s):()=>$(a,s)},{children:e.jsx(A,{item:a.variables[s]})})):e.jsx(e.Fragment,{}):e.jsx("div",Object.assign({onClick:a.variables[s].isSubHeader?()=>M(a,s):()=>$(a,s)},{children:e.jsx(A,{item:a.variables[s]})}))}))]})})),O&&e.jsx("div",Object.assign({className:"list__map"},{children:e.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(h[O].variables).map(((a,s)=>{var i;return V?(null===(i=h[O].variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(V.toLowerCase()))||L(h[O].variables[a])?H(h[O].variables[a],a):e.jsx(e.Fragment,{}):H(h[O].variables[a],a)}))}))}))]}))}))})),e.jsx("div",{className:"bottom__padding"})]}))}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&e.leftPosition===a.leftPosition));exports.AddVariableV2=j;
+"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"),l=require("../../assets/icons/cross.svg.js"),t=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("../switch/Switch.js"),g=require("../TypographyStyle.js");const m=r.memo((m=>{const{data:h}=m,[p,y]=r.useState(m.data),[x,f]=r.useState({}),[O,S]=r.useState(),[N,V]=r.useState(""),[C,_]=r.useState(""),[T,w]=r.useState(!1),[k,B]=r.useState(!0),q=/^[^.]*\.[^.]*$/;r.useEffect((()=>{const e={};h.forEach((a=>{e[a.displayName]=[]})),S(e)}),[h]),r.useEffect((()=>{A(!0)}),[]),r.useEffect((()=>{if(C){F(m.data,k).length>0?w(!0):w(!1)}else w(!0)}),[C]);const F=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(C.toLowerCase()))&&(!a||e.variables[s].isAvailable===a)||I(e.variables[s])}))))},L=(e,a)=>{const s=h.find((e=>e.displayName===a));if(s){let i=s;e.forEach(((e,a)=>{i=i.variables[e]})),f((e=>Object.assign(Object.assign({},e),{[a]:i})))}},I=e=>{let a=!1;if(e.isSubHeader&&e.variables){const s=Object.keys(e.variables);for(let i=0;i<s.length;i++){const l=s[i];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(C.toLowerCase())&&e.variables[l].isAvailable===k){a=!0;break}}}return a},A=e=>{if(B(e),e){let a=[];if(N){const e=x[N];a=m.data.filter((e=>e.displayName===N)).map((a=>E(a,e))).filter((e=>null!=e))}else a=m.data.map((e=>E(e))).filter((e=>null!==e));y(a),C&&(a=F(a,e)),a.length>0?w(!0):w(!1)}else if(y(m.data),C){F(m.data,e).length>0?w(!0):w(!1)}else w(!0)};function E(e,a){const s={};if(a){for(const i in e.variables)if(e.variables[i]===a)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a])}else for(const a in e.variables)e.variables[a].isAvailable&&(s[a]=e.variables[a]);return 0===Object.keys(s).length?null:Object.assign(Object.assign({},e),{variables:s})}const H=e=>{const s=e.item.description;return a.jsx(a.Fragment,{children:a.jsx(u.Tooltip,Object.assign({body:"",tooltipContent:a.jsx(g.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(M,{item:e.item})})}))})},M=e=>a.jsx(o.Button,{darkMode:m.enableVariable?m.enableVariable:e.item.isAvailable,size:"chip",LeadingIcon:e.item.isSubHeader?void 0:t.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}),P=(e,s)=>k&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{const e=[...O[N],s];L(e,N),S((a=>Object.assign(Object.assign({},a),{[N]:e})))}:()=>{m.customTrigger?(m.customTrigger(e),m.setShowVariable(!1)):m.isEvaluationList?$(e):m.setVariableValue(m.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a.jsx(H,{item:e})})),R=(e,a)=>{const s=[...O[e.displayName],a];L(s,e.displayName),S((a=>Object.assign(Object.assign({},a),{[e.displayName]:s}))),V(e.displayName)},$=e=>{if(e.actualValue.match(q)){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)}},z=(e,a)=>{if(m.customTrigger)m.customTrigger(e.variables[a]),m.setShowVariable(!1);else if(m.isEvaluationList){const s=e.variables[a];$(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)},W=m.isModalState?void 0:{top:"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.jsx(c.AddVariableStyled,Object.assign({style:W,onClick:e=>{e.stopPropagation()},pickerSize:m.pickerSize||"large",isModalState:m.isModalState},{children:m.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),a.jsx("div",Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a.jsx(d.IconButton,{iconButtonType:"default",Icon:l.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=>{_(e)},onEnter:()=>{},placeholder:"Search...",variant:"default"}),a.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a.jsx(g.BodySecondary,Object.assign({style:{color:v.COLORS.content.secondary}},{children:"Show only recommended variables"})),a.jsx(j.Switch,{value:k,onValueChange:a=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield A(a)}))})]}))]})),N&&O[N].length>0&&a.jsxs("div",Object.assign({className:"nav__bar"},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(d.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{const e=O[N].slice(0,-1);L(e,N),S((a=>Object.assign(Object.assign({},a),{[N]:e}))),e.length||V("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(g.TitleSmall,{children:x[N].displayName}),x[N].description&&a.jsx(g.BodyCaption,{children:x[N].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(d.IconButton,{Icon:n.default,style:{display:"flex"},onClick:()=>{L([],N),S((e=>Object.assign(Object.assign({},e),{[N]:[]}))),V("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),!T&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(g.TitleSmall,{children:"No results found!"}),k?a.jsx(g.BodyCaption,{children:"Sorry we could not find any recommended variables"}):a.jsx(g.BodyCaption,{children:`Sorry we could not find any results for "${C}"`})]})),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:[!N&&p.map((e=>{let s=[];return C&&(s=Object.keys(e.variables).filter((a=>{var s;return(null===(s=e.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(C.toLowerCase()))||I(e.variables[a])}))),a.jsxs(a.Fragment,{children:[C?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(g.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(g.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((s=>{var i;return C?(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(C.toLowerCase()))||I(e.variables[s])?a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>R(e,s):()=>z(e,s)},{children:a.jsx(H,{item:e.variables[s]})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>R(e,s):()=>z(e,s)},{children:a.jsx(H,{item:e.variables[s]})}))}))]})})),N&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(x[N].variables).map(((e,s)=>{var i;return C?(null===(i=x[N].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(C.toLowerCase()))||I(x[N].variables[e])?P(x[N].variables[e],e):a.jsx(a.Fragment,{}):P(x[N].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&e.leftPosition===a.leftPosition));exports.AddVariableV2=m;

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/input-with-vars/InputWithVariables.d.ts

@@ -3,7 +3,7 @@ import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
 interface InputWithVariablesProps {
     variablesList: any;
-    onChange: (val: SelectedVariable | Variable) => void;
+    onChange: (val: SelectedVariable) => void;
     onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
     addVarBoxRight: string;
     allowMix: boolean;
@@ -14,6 +14,7 @@ interface InputWithVariablesProps {
     placeHolder?: string;
     showAddButton?: boolean;
     errorMessage?: string;
+    showSideModal?: boolean;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
 export {};

package/dist/cjs/components/input-with-vars/InputWithVariables.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),d=require("../add-variableV2/AddVariableV2SideModal.js"),t=require("../add-variableV2/AddVariableV2.js"),s=require("../../constants/Theme.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),o=require("../input/Input.js"),n=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),d=require("../../constants/Theme.js"),t=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),o=require("../input/Input.js"),n=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
 	margin-bottom: 16px;
 	input {
-		color: ${e=>e.isVar?s.COLORS.stroke.brand:"black"};
+		color: ${e=>e.isVar?d.COLORS.stroke.brand:"black"};
 	}
-`;exports.InputWithVariables=r=>{let{addVarBoxRight:s,allowMix:c,onChange:b,prevVariable:g,variablesList:V,onBlur:p,onlyVariables:h,placeHolder:j,showAddButton:T=!0,showHelp:x,showSideVariablePanel:y,errorMessage:f}=r;const S=l.useRef(null),[m,q]=l.useState(!1),[w]=l.useState(i.v4()),[A,O]=l.useState(),[C,B]=l.useState(g),[N,k]=l.useState(!1),[I,M]=l.useState(!1),[F,L]=l.useState(f||"");return l.useEffect((()=>{A&&A.actualValue&&B(c?e=>({actualValue:e.actualValue+A.actualValue,variableType:"string"}):e=>({actualValue:A.actualValue,variableType:A.variableType,needsFetching:A.needsFetching}))}),[A]),l.useEffect((()=>{b(C)}),[C]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(C.actualValue)},{children:[e.jsx(o.Input,{id:w,ref:S,skipFocus:!0,textControl:!0,isActive:m,value:C.actualValue,validate:e=>[!0,""],errorMessage:F,placeholder:j||"Add a value",onChangeText:function(e,a){if(L(""),h){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||B({actualValue:"",variableType:"string"})}else B(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;q(!0),M(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||N||k(!0)},onBlur:e=>{var a,l,r,i,d,t,s;null==p||p(e,C),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(S.current&&S.current.focus(),q(!0)):"Search..."===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?q(!0):(q(!1),k(!1),M(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[C.actualValue&&x?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${C.variableType}`})})):e.jsx("div",{}),T&&I&&e.jsx("div",Object.assign({style:{marginTop:f?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:s,id:"addVar",onClick:()=>{k(!N)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!y&&N&&e.jsx(t.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{k(!1)},variableValue:A,setVariableValue:O,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?S.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==w&&(k(!1),M(!1),q(!1)):(k(!1),M(!1),q(!1))}})]})),y&&N&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:N,setShowVariable:k,placeholder:"Add a variable",customTrigger:e=>{O({actualValue:e.actualValue,variableType:"string"}),B(e)},onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?S.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==w&&(k(!1),M(!1),q(!1)):(k(!1),M(!1),q(!1))}})]})};
+`;exports.InputWithVariables=r=>{let{addVarBoxRight:d,allowMix:c,onChange:b,prevVariable:g,variablesList:V,onBlur:h,onlyVariables:p,placeHolder:T,showAddButton:j=!0,showHelp:x,showSideVariablePanel:y,errorMessage:f,showSideModal:S}=r;const m=l.useRef(null),[q,w]=l.useState(!1),[A]=l.useState(i.v4()),[O,C]=l.useState(),[B,N]=l.useState(g),[M,k]=l.useState(!1),[I,F]=l.useState(!1),[L,E]=l.useState(f||"");return l.useEffect((()=>{O&&O.actualValue&&N(c?e=>({actualValue:e.actualValue+O.actualValue,variableType:"string"}):e=>({actualValue:O.actualValue,variableType:O.variableType,needsFetching:O.needsFetching}))}),[O]),l.useEffect((()=>{b(B)}),[B]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(B.actualValue)},{children:[e.jsx(o.Input,{id:A,ref:m,skipFocus:!0,textControl:!0,isActive:q,value:B.actualValue,validate:e=>[!0,""],errorMessage:L,placeholder:T||"Add a value",onChangeText:(e,a)=>{if(E(""),p){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||N({actualValue:"",variableType:"string"})}else N(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;w(!0),F(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||M||k(!0)},onBlur:e=>{var a,l,r,i,d,t,s;null==h||h(e,B),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(m.current&&m.current.focus(),w(!0)):"Search..."===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?w(!0):(w(!1),k(!1),F(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[B.actualValue&&x&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${B.variableType}`})})),j&&I&&e.jsx("div",Object.assign({style:{marginTop:f?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:d,id:"addVar",onClick:()=>{k(!M)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!y&&M&&e.jsx(s.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{k(!1)},variableValue:O,setVariableValue:C,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?m.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==A&&(k(!1),F(!1),w(!1)):(k(!1),F(!1),w(!1))}})]})),y&&M&&e.jsx(t.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:M,setShowVariable:()=>{k(!1)},placeholder:"Add a variable",customTrigger:e=>{C({actualValue:e.actualValue,variableType:"string"}),N(e)},onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?m.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==A&&(k(!1),F(!1),w(!1)):(k(!1),F(!1),w(!1))}})]})};

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -3,7 +3,7 @@ import { CHANNEL_TYPE } from '../template-preview/models/Channels';
 import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
 import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
-import { WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { Extras, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 export interface TemplateContextMapperProps {
     selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
     closeDialog?: () => void;
@@ -11,7 +11,7 @@ export interface TemplateContextMapperProps {
     channel: CHANNEL_TYPE;
     globalPlaceholders: GlobalPlaceholderType;
     /** List of variables being used in this template */
-    templateVariables: CUSTOM_VARIABLE[];
+    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
     /** Only for initial-UI-purpose for the modal */
     htmlContent: string;
     showOnlyContent?: boolean;
@@ -26,5 +26,7 @@ export interface TemplateContextMapperProps {
     setDiscountCode?: (code: string) => void;
     enabledCustomText?: boolean;
     disableEditVariable?: boolean;
+    pod?: string;
+    extras?: Extras;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, variableListForImage, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, variableListForImage, pod, extras, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +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"),i=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),o=require("./modalElements/Footer.js"),r=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:b,templateVariables:h,onTemplateSelect:g,globalPlaceholders:v,showOnlyContent:C,whatsappSpecificPickerMeta:S,zIndex:T,showVariableModal:E,variableList:j,discountCode:x,setDiscountCode:M,onBackPress:P,enabledCustomText:L,disableEditVariable:f,variableListForImage:w}=d;var q,y;t.useEffect((()=>{I(b)}),[b]);const[A,N]=t.useState(m===i.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[V,I]=t.useState(b),[k,D]=t.useState(!1),[_,H]=t.useState(c),[O,F]=t.useState(null!=h?h:[]),[B,Y]=t.useState(!1);const z=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(v)),[v]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:_,setTemplate:H,device:A,setDevice:N,display_content:V,setDisplayContent:I,originalVariableList:O,setOriginalVariableList:F,isError:k,setIsError:D,channel:m,globalNormalizedPlaceholders:z,templateSelectionTriggered:B,setTemplateSelectionTriggered:Y,enabledCustomText:L,disableEditVariable:f}},{children:C?e.jsx(r.default,{channel:i.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:T,centralContainerStyles:{width:m===i.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==_?void 0:_.label,headingSubtitle:m===i.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(q=null==_?void 0:_.category)&&void 0!==q?q:"")} • ${null!==(y=null==_?void 0:_.templateCategory)&&void 0!==y?y:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(r.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:S,showVariableModal:E,variableList:j,discountCode:x,setDiscountCode:M,variableListForImage:w&&(null==w?void 0:w.length)>0?w:j}),g?e.jsx(o.default,{onSelect:function(){const e=null==g?void 0:g(_,O,null!=V?V:"");e?D(!!e):Y(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"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"),s=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),o=require("./modalElements/Footer.js"),r=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:b,templateVariables:h,onTemplateSelect:g,globalPlaceholders:v,showOnlyContent:C,whatsappSpecificPickerMeta:x,zIndex:S,showVariableModal:T,variableList:E,discountCode:j,setDiscountCode:M,onBackPress:P,enabledCustomText:L,disableEditVariable:f,variableListForImage:w,pod:q,extras:y}=d;var A,N;t.useEffect((()=>{D(b)}),[b]);const[V,I]=t.useState(m===s.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[k,D]=t.useState(b),[_,H]=t.useState(!1),[O,F]=t.useState(c),[B,Y]=t.useState(null!=h?h:[]),[z,$]=t.useState(!1);const U=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(v)),[v]);return e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{template:O,setTemplate:F,device:V,setDevice:I,display_content:k,setDisplayContent:D,originalVariableList:B,setOriginalVariableList:Y,isError:_,setIsError:H,channel:m,globalNormalizedPlaceholders:U,templateSelectionTriggered:z,setTemplateSelectionTriggered:$,enabledCustomText:L,disableEditVariable:f,pod:q,extras:y}},{children:C?e.jsx(r.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:S,centralContainerStyles:{width:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:700},open:!0,onClose:()=>{null==u||u()},headingTitle:null==O?void 0:O.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(A=null==O?void 0:O.category)&&void 0!==A?A:"")} • ${null!==(N=null==O?void 0:O.templateCategory)&&void 0!==N?N:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(r.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:x,showVariableModal:T,variableList:E,discountCode:j,setDiscountCode:M,variableListForImage:w&&(null==w?void 0:w.length)>0?w:E}),g?e.jsx(o.default,{onSelect:function(){const e=null==g?void 0:g(O,B,null!=k?k:"");e?H(!!e):$(!0)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts

@@ -3,7 +3,7 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
 import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
-import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+import { Extras, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
     device: DEVICE_TYPES;
@@ -23,6 +23,8 @@ export declare const TemplateModalContext: React.Context<{
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
     disableEditVariable?: boolean | undefined;
+    pod?: string | undefined;
+    extras?: Extras | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -42,4 +44,6 @@ export declare const useTemplateModalContext: () => {
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
     disableEditVariable?: boolean | undefined;
+    pod?: string | undefined;
+    extras?: Extras | undefined;
 };

package/dist/cjs/components/template-context-mapper/modalElements/BackTrackComponent.d.ts

@@ -0,0 +1,4 @@
+export declare const BackTrackComponent: (props: {
+    backTrackMessage?: string | undefined;
+    setBackTrackMessage?: ((backTrackMessage: string) => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-context-mapper/modalElements/BackTrackComponent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../checkBox/CheckBox.js"),s=require("../../TypographyStyle.js"),a=require("../../input/Input.js");exports.BackTrackComponent=i=>{const{backTrackMessage:n,setBackTrackMessage:c}=i,[l,o]=r.useState(!!n);return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(t.CheckBox,{isChecked:l,onValueChange:()=>{l&&c&&c(""),o(!l)}}),e.jsx(s.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),l&&e.jsx("div",Object.assign({style:{margin:10}},{children:e.jsx(a.Input,{placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{c&&c(e)},height:"120px",value:n,noErrorHint:!0,validate:e=>[!0,""]})}))]})};

package/dist/cjs/components/template-context-mapper/modalElements/Body.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../template-preview/models/Channels.js"),o=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),a=require("../utils/getVariableNameEmail.js"),r=require("../utils/highlightFor.js"),s=require("./DesktopPreview.js"),d=require("./EditWhatsAppTemplateV2.js"),u=require("./MobilePreview.js"),c=require("./VariableConnectorsPanel.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=p(l);const m=h.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),o=require("../../template-preview/models/Channels.js"),n=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),a=require("../utils/getVariableNameEmail.js"),r=require("../utils/highlightFor.js"),s=require("./DesktopPreview.js"),d=require("./EditWhatsAppTemplateV2.js"),u=require("./MobilePreview.js"),c=require("./VariableConnectorsPanel.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=p(l);const m=h.default.div`
 	display: flex;
 	//	height: 100%;
 `,f=h.default.div`
 	padding: 16px 14px;
 	max-width: 350px;
 
-	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: 'auto';
 	padding-bottom: 24px;
-	border-left: ${o.COLORS.stroke.primary} 1px solid;
+	border-left: ${n.COLORS.stroke.primary} 1px solid;
 `,g=h.default.div`
 	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: 475px;
 	overflow-y: auto;
-`;exports.default=l=>{const{showVariableMapping:p,showOnlyContent:h,whatsappSpecificPickerMeta:x,showVariableModal:v,variableList:b,discountCode:j,setDiscountCode:w,variableListForImage:C}=l,E=t.useRef(),y=t.useRef(),{device:L,display_content:P,channel:T,template:M,setTemplate:_}=i.useTemplateModalContext();const A=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(g,Object.assign({showOnlyContent:h,showVariableMapping:p},{children:"mobile"===L?e.jsx(u.default,{ref:y,display_content:null!=P?P:"",channel:T,template:M}):T!==n.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:E,channel:T,display_content:null!=P?P:""}):e.jsx(e.Fragment,{})})),p&&e.jsx(f,Object.assign({channel:T},{children:T!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(c.default,{onFocus:T===n.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),d=a.getVariableNameForEmailByIndex(e+1),u=T===n.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),c=A(u),p=null==u?void 0:u.offsetLeft;"desktop"===L?c&&E.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=p?p:0,c),r.highlightFor(d,o.COLORS.background.warning.light,2,T,L)):c&&y.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=p?p:0,c),r.highlightFor(d,o.COLORS.background.warning.light,2,T,L))}:void 0,showVariableModal:v,variableList:b,discountCode:j,setDiscountCode:w}):e.jsx(d.default,{whatsappSpecificPickerMeta:x,template:M,onTemplateChange:e=>{null==_||_(e)},showVariableModal:v,variableList:b,variableListForImage:C})}))]})};
+`;exports.default=l=>{const{showVariableMapping:p,showOnlyContent:h,whatsappSpecificPickerMeta:x,showVariableModal:v,variableList:b,discountCode:j,setDiscountCode:C,variableListForImage:w}=l,E=t.useRef(),y=t.useRef(),{device:L,display_content:P,channel:T,template:M,setTemplate:_}=i.useTemplateModalContext();const A=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(g,Object.assign({showOnlyContent:h,showVariableMapping:p},{children:"mobile"===L?e.jsx(u.default,{ref:y,display_content:null!=P?P:"",channel:T,template:M}):T!==o.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:E,channel:T,display_content:null!=P?P:""}):e.jsx(e.Fragment,{})})),p&&e.jsx(f,Object.assign({channel:T},{children:T!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(c.default,{onFocus:T===o.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),d=a.getVariableNameForEmailByIndex(e+1),u=T===o.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),c=A(u),p=null==u?void 0:u.offsetLeft;"desktop"===L?c&&E.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=p?p:0,c),r.highlightFor(d,n.COLORS.background.warning.light,2,T,L)):c&&y.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=p?p:0,c),r.highlightFor(d,n.COLORS.background.warning.light,2,T,L))}:void 0,showVariableModal:v,variableList:b,discountCode:j,setDiscountCode:C}):e.jsx(d.default,{whatsappSpecificPickerMeta:x,template:M,onTemplateChange:e=>{null==_||_(e)},showVariableModal:v,variableList:b,variableListForImage:w,discountCode:j,setDiscountCode:C})}))]})};

package/dist/cjs/components/template-context-mapper/modalElements/DiscountCodeComponent.d.ts

@@ -0,0 +1,6 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+export declare const DiscountCodeComponent: (props: {
+    discountCode?: string | undefined;
+    setDiscountCode?: ((code: string) => void) | undefined;
+    variableList?: VariableListInterfaceV2[] | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-context-mapper/modalElements/DiscountCodeComponent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/PlusIcon.js"),a=require("react"),s=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var i=require("../../input/Input.js");require("@tippyjs/react"),require("../../tooltips/TooltipInternal.js"),require("../../../constants/Theme.js"),require("../../switch/Switch.js");var t=require("../../TypographyStyle.js"),l=require("../../checkBox/CheckBox.js"),o=require("./VariableConnectorsPanel.js");exports.DiscountCodeComponent=d=>{const{discountCode:n,setDiscountCode:u,variableList:c}=d,[j,b]=a.useState(""),[h,v]=a.useState(!!n),[x,g]=a.useState(!1),[p,V]=a.useState(!1),q=a.useRef(),f=a.useRef();return a.useEffect((()=>{console.log("vj: setDiscountCode",u,j),u&&u(n+j)}),[j]),e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(l.CheckBox,{isChecked:h,onValueChange:()=>{h&&u&&u(""),v(!h)}}),e.jsx(t.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),h&&e.jsxs("div",Object.assign({ref:q,style:{margin:10}},{children:[e.jsx(i.Input,{placeholder:"Enter your discount code",onChangeText:e=>{u&&u(e)},value:n,onFocus:()=>{g(!0)},onBlur:e=>{var r;"addVar"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)?(q.current&&q.current.focus(),g(!0)):(g(!1),V(!1))},noErrorHint:!0,validate:e=>[!0,""]}),x&&e.jsx(o.AddVariableStyled,Object.assign({ref:f,id:"addVar",onClick:e=>{e.stopPropagation(),V(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(r.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),p&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=c?c:[],showVariable:p,setShowVariable:V,variableValue:j,setVariableValue:b,placeholder:"Add a variable",customTrigger:e=>{b(e.actualValue),g(!1)}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaModal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),s=require("../../input-with-vars/InputWithVariables.js"),a=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../TypographyStyle.js"),d=require("../../../assets/icons/file.svg.js"),o=require("../../../assets/icons/filePdf.svg.js"),n=require("../../../assets/icons/image.svg.js"),c=require("../../../assets/icons/upload.svg.js");exports.default=u=>{let{setOpenEditMedia:p,mediaComponentFormat:h,variableListForImage:j,openEditMedia:g,uploadMedia:x}=u;return e.jsx(a.StyledModal,Object.assign({open:g,zIndex:2e3,onClose:()=>p(!1),width:"440px"},{children:e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e.jsx(l.TitleMedium,Object.assign({style:{marginBottom:16}},{children:"Update media"})),e.jsxs("div",Object.assign({style:{padding:24,border:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base}},{children:h===r.HEADER_TYPES.IMAGE?e.jsx(n.default,{width:40,height:40}):h===r.HEADER_TYPES.VIDEO?e.jsx(d.default,{width:40,height:40}):e.jsx(o.default,{width:40,height:40})})),e.jsx(l.TitleMedium,{children:h===r.HEADER_TYPES.IMAGE?"Upload an image":h===r.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(l.BodySecondary,{children:h===r.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":h===r.HEADER_TYPES.VIDEO?"Mp4 format video • Max 16":"Pdf format a document • Max 100MB"})]})),e.jsxs("div",Object.assign({style:{marginBottom:16}},{children:[e.jsx(l.BodyRegular,{children:"Media"}),e.jsx(s.InputWithVariables,{addVarBoxRight:"46px",allowMix:!1,onChange:()=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&x(t.actualValue)},showAddButton:h===r.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(l.BodyCaption,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(t.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:c.default,onClick:()=>x()})}))]}))]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),s=require("../../input-with-vars/InputWithVariables.js"),a=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../TypographyStyle.js"),d=require("../../../assets/icons/file.svg.js"),o=require("../../../assets/icons/filePdf.svg.js"),n=require("../../../assets/icons/image.svg.js"),c=require("../../../assets/icons/upload.svg.js");exports.default=u=>{let{setOpenEditMedia:p,mediaComponentFormat:h,variableListForImage:j,openEditMedia:g,uploadMedia:x}=u;return e.jsx(a.StyledModal,Object.assign({open:g,zIndex:2e3,onClose:()=>p(!1),width:"440px"},{children:e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e.jsx(l.TitleMedium,Object.assign({style:{marginBottom:16}},{children:"Update media"})),e.jsxs("div",Object.assign({style:{padding:24,border:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base}},{children:h===r.HEADER_TYPES.IMAGE?e.jsx(n.default,{width:40,height:40}):h===r.HEADER_TYPES.VIDEO?e.jsx(d.default,{width:40,height:40}):e.jsx(o.default,{width:40,height:40})})),e.jsx(l.TitleMedium,{children:h===r.HEADER_TYPES.IMAGE?"Upload an image":h===r.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(l.BodySecondary,{children:h===r.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":h===r.HEADER_TYPES.VIDEO?"Mp4 format video • Max 16":"Pdf format a document • Max 100MB"})]})),e.jsxs("div",Object.assign({style:{marginBottom:16}},{children:[e.jsx(l.BodyRegular,{children:"Media"}),e.jsx(s.InputWithVariables,{addVarBoxRight:"46px",allowMix:!1,onChange:e=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&x(t.actualValue)},showAddButton:h===r.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(l.BodyCaption,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(t.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:c.default,onClick:()=>x()})}))]}))]}))}))};

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js

@@ -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"),r=require("../context/templateModalContext.js"),l=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(i);exports.default=d=>{let{mediaComponent:p,template:u,updateTemplateImageUrl:m,whatsappSpecificPickerMeta:f,variableListForImage:v}=d;var E,g,j;const{disableEditVariable:h}=r.useTemplateModalContext(),[b,M]=i.useState(void 0),[_,x]=i.useState(),[y,A]=i.useState(),[C,S]=i.useState(!1),T=c.default.createRef(),[I,q]=i.useState(!1),[R,O]=i.useState(""),{template:w,setTemplate:D}=r.useTemplateModalContext();let H;function k(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function P(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)O(a),q(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:t,fileName:b,isImage:e});if(a.success){const[e]=t.type.split("/");m(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else O("An unknown technical error occured");q(!1)}}else O("An unknown technical error occured"),q(!1)}))}return H=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(l.default,{mediaComponentFormat:null!==(E=p.format)&&void 0!==E?E:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){if(O(""),A(""),S(!1),t)if(t.startsWith("https"))try{q(!0);const e=yield fetch(t),i=yield e.blob();yield P(i)}catch(e){O("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){A(t);const e=Object.assign({},w);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:p.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),a=[...e.components];a[t]=i,e.components=a}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),q(!1),null==D||D(Object.assign({},e))}else q(!1),O("Invalid URL or variable");else k()}))},variableListForImage:v||[],setOpenEditMedia:S,openEditMedia:C}),!!_&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:_,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),O("");const e=yield fetch(t);P(yield e.blob()).then((()=>{x(void 0)}))}))},onCancel:()=>{q(!1),x("")}}),t.jsx("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;O(""),q(!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;x(""),M(""),e.onload=()=>{x(e.result),M(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else P(i)},accept:H}),t.jsx(s.default,{imageName:null!==(j=null===(g=null==p?void 0:p.example)||void 0===g?void 0:g.header_handle)&&void 0!==j?j:[],handleImageChange:k,mediaType:null==p?void 0:p.format,error:R,isLoading:I,setOpenEditMedia:S,selectedVariable:y,disableEditVariable:h})]})};
+"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"),r=require("../context/templateModalContext.js"),l=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(i);exports.default=d=>{let{mediaComponent:p,template:u,updateTemplateImageUrl:m,whatsappSpecificPickerMeta:f,variableListForImage:v}=d;var E,g,j;const{disableEditVariable:h}=r.useTemplateModalContext(),[b,M]=i.useState(void 0),[_,x]=i.useState(),[y,A]=i.useState(),[C,S]=i.useState(!1),T=c.default.createRef(),[I,q]=i.useState(!1),[R,O]=i.useState(""),{template:w,setTemplate:D}=r.useTemplateModalContext();let H;function k(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function P(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)O(a),q(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:t,fileName:b,isImage:e});if(a.success){const[e]=t.type.split("/");m(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else O("An unknown technical error occured");q(!1)}}else O("An unknown technical error occured"),q(!1)}))}return console.log("ignore: ",h),H=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(l.default,{mediaComponentFormat:null!==(E=p.format)&&void 0!==E?E:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){if(O(""),A(""),S(!1),t)if(t.startsWith("https"))try{q(!0);const e=yield fetch(t),i=yield e.blob();yield P(i)}catch(e){O("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){A(t);const e=Object.assign({},w);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:p.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),a=[...e.components];a[t]=i,e.components=a}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),q(!1),null==D||D(Object.assign({},e))}else q(!1),O("Invalid URL or variable");else k()}))},variableListForImage:v||[],setOpenEditMedia:S,openEditMedia:C}),!!_&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:_,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),O("");const e=yield fetch(t);P(yield e.blob()).then((()=>{x(void 0)}))}))},onCancel:()=>{q(!1),x("")}}),t.jsx("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;O(""),q(!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;x(""),M(""),e.onload=()=>{x(e.result),M(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else P(i)},accept:H}),t.jsx(s.default,{imageName:null!==(j=null===(g=null==p?void 0:p.example)||void 0===g?void 0:g.header_handle)&&void 0!==j?j:[],handleImageChange:k,mediaType:null==p?void 0:p.format,error:R,isLoading:I,setOpenEditMedia:S,selectedVariable:y})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts

@@ -9,6 +9,8 @@ export interface EditWhatsAppTemplateV2Props {
     showVariableModal?: boolean;
     variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),n=require("../utils/getDataFromTemplateComponent.js"),o=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),a=require("./VariableConnectorsPanel.js"),l=require("./VariableConnectorWhatsApp.js"),s=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c,showVariableModal:m,variableList:b,variableListForImage:v}=r;var g,h,f,j,x,T,O,y,C,E,V,w;const{originalVariableList:I}=t.useTemplateModalContext(),{descriptionComponents:L,urlBtns:B,qrbBtns:M,imageComponent:q,bodyVariables:R,headerVariables:A}=n.getAllDataFromTemplateComponent(p);function U(e,t){var n,o,i,a;const l=Object.assign({},p),s=null==l?void 0:l.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==s&&s>-1){const d=null===(n=null==l?void 0:l.components[s].buttons)||void 0===n?void 0:n.findIndex((e=>"URL"===e.type));if(void 0!==d&&d>-1){const n="custom"===t&&"string"==typeof e,r=[...null!==(a=null===(i=null===(o=l.components)||void 0===o?void 0:o[s])||void 0===i?void 0:i.buttons)&&void 0!==a?a:[]];r[d]=Object.assign(Object.assign({},r[d]),{url:"https://d.bik.ai/{{1}}",example:[n?e:"string"!=typeof e?e.defaultValue:""]});const p=Object.assign(Object.assign({},l.components[s]),{buttons:r}),u=Object.assign(Object.assign({},l.mapping),{buttons:n?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});l.mapping=u;const c=[...l.components];c[s]=p,l.components=c}}null==u||u(l)}function P(e,t,n){var o;const i=Object.assign({},p),a=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==a&&a>-1){const t=null===(o=null==i?void 0:i.components[a].buttons)||void 0===o?void 0:o.filter((e=>"QUICK_REPLY"===e.type));t&&(t[n]=Object.assign(Object.assign({},t[n]),{flowId:e.flowId,flowName:e.flowName}));const l=Object.assign(Object.assign({},i.components[a]),{buttons:t}),s=[...i.components];s[a]=l,i.components=s}null==u||u(i)}return e.jsxs(a.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!q&&e.jsx(o.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:q,updateTemplateImageUrl:function(e,t){var n;let o=Object.assign({},p);const i=null===(n=null==o?void 0:o.components)||void 0===n?void 0:n.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==o?void 0:o.components[i])){const n=Object.assign(Object.assign({},o.components[i]),{format:t,example:{header_handle:[e]}}),a=[...o.components];a[i]=n,o=Object.assign(Object.assign({},o),{components:a})}o.mapping&&(o.mapping=Object.assign(Object.assign({},o.mapping),{header:void 0})),null==u||u(Object.assign({},o))},template:p,variableListForImage:v})}),(R.length>0||A.length>0)&&e.jsx(s.default,{containerStyle:{paddingTop:q?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==L?void 0:L.map(((t,n)=>e.jsx(l.default,{originalVariableList:I,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body,showVariableModal:m,variableList:b},n))),(null===(h=null===(g=B[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)&&(null===(x=null===(j=null===(f=B[0])||void 0===f?void 0:f.component)||void 0===j?void 0:j.buttons)||void 0===x?void 0:x.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(T=null==I?void 0:I.buttons)||void 0===T?void 0:T.map(((t,n)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:I,updateSelectedURLTemplateBtn:U},`${n}`)})),(null===(y=null===(O=M[0])||void 0===O?void 0:O.component)||void 0===y?void 0:y.buttons)&&(null===(V=null===(E=null===(C=M[0])||void 0===C?void 0:C.component)||void 0===E?void 0:E.buttons)||void 0===V?void 0:V.length)>0&&e.jsx(s.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"}),null===(w=null==I?void 0:I.buttons)||void 0===w?void 0:w.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:I,updateSelectedQRBTemplateBtn:P},`${n}`)}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("../context/templateModalContext.js"),n=require("../utils/getDataFromTemplateComponent.js"),i=require("./BackTrackComponent.js"),a=require("./DiscountCodeComponent.js"),l=require("./EditMediaV2.style.js"),s=require("./EditWhatsAppTemplateMediaV2.js"),d=require("./VariableConnectorsPanel.js"),r=require("./VariableConnectorWhatsApp.js"),u=require("./VariableEditorHeader.js"),c=require("./WhatsAppTemplateCardButtonV2.js");exports.default=p=>{let{template:v,onTemplateChange:m,whatsappSpecificPickerMeta:b,showVariableModal:g,variableList:h,variableListForImage:f,discountCode:j,setDiscountCode:T}=p;var x,C,O,E,k,y,B,V,w,L,q,I,M,A,R,U;const{originalVariableList:D,pod:H,extras:S}=o.useTemplateModalContext(),{descriptionComponents:P,urlBtns:N,qrbBtns:Q,imageComponent:_,bodyVariables:F,headerVariables:W}=n.getAllDataFromTemplateComponent(v),[K,Y]=t.useState(!1);function $(e,t){var o,n,i,a,l;const s=Object.assign({},v),d=null==s?void 0:s.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==d&&d>-1){const l=null===(o=null==s?void 0:s.components[d].buttons)||void 0===o?void 0:o.findIndex((e=>"URL"===e.type));if(void 0!==l&&l>-1){const o="custom"===t&&"string"==typeof e,r=[...null!==(a=null===(i=null===(n=s.components)||void 0===n?void 0:n[d])||void 0===i?void 0:i.buttons)&&void 0!==a?a:[]];r[l]=Object.assign(Object.assign({},r[l]),{url:"https://d.bik.ai/{{1}}",example:[o?e:"string"!=typeof e?e.defaultValue:""]});const u=Object.assign(Object.assign({},s.components[d]),{buttons:r}),c=Object.assign(Object.assign({},s.mapping),{buttons:o?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});s.mapping=c;const p=[...s.components];p[d]=u,s.components=p}}if("string"!=typeof e){"checkout.Url"===(null===(l=e.placeHolder)||void 0===l?void 0:l.slice(2,-2))?Y(!0):(Y(!1),null==T||T(""))}null==m||m(s)}function X(e,t,o){var n;const i=Object.assign({},v),a=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==a&&a>-1){const t=null===(n=null==i?void 0:i.components[a].buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));t&&(t[o]=Object.assign(Object.assign({},t[o]),{flowId:e.flowId,flowName:e.flowName}));const l=Object.assign(Object.assign({},i.components[a]),{buttons:t}),s=[...i.components];s[a]=l,i.components=s}null==m||m(i)}return t.useEffect((()=>{var e;const t=null===(e=v.mapping.buttons)||void 0===e?void 0:e[0];"checkout.Url"===(null==t?void 0:t.slice(2,-2))?Y(!0):(Y(!1),null==T||T(""))}),[v]),e.jsxs(d.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!_&&e.jsx(l.EditTemplateMediaContainer,{children:e.jsx(s.default,{whatsappSpecificPickerMeta:b,mediaComponent:_,updateTemplateImageUrl:function(e,t){var o;let n=Object.assign({},v);const i=null===(o=null==n?void 0:n.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const o=Object.assign(Object.assign({},n.components[i]),{format:t,example:{header_handle:[e]}}),a=[...n.components];a[i]=o,n=Object.assign(Object.assign({},n),{components:a})}n.mapping&&(n.mapping=Object.assign(Object.assign({},n.mapping),{header:void 0})),null==m||m(Object.assign({},n))},template:v,variableListForImage:f})}),(F.length>0||W.length>0)&&e.jsx(u.default,{containerStyle:{paddingTop:_?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==P?void 0:P.map(((t,o)=>e.jsx(r.default,{originalVariableList:D,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?v.mapping.header:v.mapping.body,showVariableModal:g,variableList:h},o))),(null===(C=null===(x=N[0])||void 0===x?void 0:x.component)||void 0===C?void 0:C.buttons)&&(null===(k=null===(E=null===(O=N[0])||void 0===O?void 0:O.component)||void 0===E?void 0:E.buttons)||void 0===k?void 0:k.length)>0&&e.jsx(u.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(y=null==D?void 0:D.buttons)||void 0===y?void 0:y.map(((t,o)=>{if("URL"===t.type)return e.jsx(c.default,{CTAoptions:null==b?void 0:b.CTAoptions,button:t,originalVariableList:D,updateSelectedURLTemplateBtn:$},`${o}`)})),(null===(V=null===(B=Q[0])||void 0===B?void 0:B.component)||void 0===V?void 0:V.buttons)&&(null===(q=null===(L=null===(w=Q[0])||void 0===w?void 0:w.component)||void 0===L?void 0:L.buttons)||void 0===q?void 0:q.length)>0&&("CHATBOT"!==H?e.jsx(u.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(i.BackTrackComponent,{backTrackMessage:null===(I=null==S?void 0:S.backTrackExtra)||void 0===I?void 0:I[0],setBackTrackMessage:null===(M=null==S?void 0:S.backTrackExtra)||void 0===M?void 0:M[1]})),null===(A=null==D?void 0:D.buttons)||void 0===A?void 0:A.map(((t,o)=>{if("QUICK_REPLY"===t.type)return e.jsx(c.default,{QRBoptions:null==b?void 0:b.QRBoptions,button:t,originalVariableList:D,updateSelectedQRBTemplateBtn:X},`${o}`)})),"CHATBOT"===H&&K&&e.jsx(a.DiscountCodeComponent,{discountCode:null===(R=null==S?void 0:S.discountCodeExtra)||void 0===R?void 0:R[0],setDiscountCode:null===(U=null==S?void 0:S.discountCodeExtra)||void 0===U?void 0:U[1],variableList:h})]}))};

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js

@@ -17,4 +17,4 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,d=s.default.forwardRef(((t,i)=>{let{display_content:o,channel:s,template:l}=t;return e.jsx("div",{children:e.jsxs(p,Object.assign({channel:s},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s===r.CHANNEL_TYPE.WHATSAPP?236:300,height:443}}),e.jsx(n,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{template:l,channel:s,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));d.displayName="MobilePreview",exports.default=d;
+`,d=s.default.forwardRef(((t,i)=>{let{display_content:o,channel:s,template:l}=t;return e.jsx("div",{children:e.jsxs(p,Object.assign({channel:s},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s===r.CHANNEL_TYPE.WHATSAPP?236:300,height:443}}),e.jsx(n,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{template:l,channel:s,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));d.displayName="MobilePreview",exports.default=d;

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),r=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=s;var u;const{originalVariableList:b,disableEditVariable:c}=i.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(u=null==b?void 0:b.body)||void 0===u?void 0:u.map(((i,s)=>c||!i.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(r.BodySecondary,Object.assign({style:{color:t.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),s):e.jsx(l.default,{index:s,variable:i,showVariableModal:d,variableList:p},`${s}-${i.index}`)))}):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:d,showVariableModal:o,variableList:p}=s;var c,b;const{originalVariableList:x,disableEditVariable:u}=t.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(c=null==x?void 0:x.body)||void 0===c?void 0:c.map(((t,s)=>u||!t.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===d?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s):e.jsx(l.default,{index:s,variable:t,showVariableModal:o,variableList:p,componentType:n.type},`${s}-${t.index}`)))}):"HEADER"===n.type?e.jsx("div",{children:null===(b=null==x?void 0:x.header)||void 0===b?void 0:b.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:o,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===d?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js"),s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../context/templateModalContext.js"),h=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const p=b.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js");var s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js");require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../context/templateModalContext.js"),h=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const j=b.default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,j=b.default.button`
+`,p=b.default.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@
 		display: flex;
 		align-items: center;
 	}
-`;exports.AddVariableStyled=j,exports.Container=p,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[C,S]=t.useState(!1),[q,w]=t.useState(!1),[k,T]=t.useState(""),[B,L]=t.useState(!1),E=t.useRef(),A=t.useRef();return t.useEffect((()=>{v&&v(f+k)}),[k]),t.useEffect((()=>{y.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(O(!0),f&&L&&L(!0))}))}),[y]),e.jsxs(p,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((a,t)=>!a.isEditableVariable||m?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(h.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:g,setShowDiscountCheckBox:O})}),t))),(V||f)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&v&&v(""),L(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{v&&v(e)},value:f,onFocus:()=>{S(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),S(!0)):(S(!1),w(!1))},noErrorHint:!0,validate:e=>[!0,""]}),C&&e.jsx(j,Object.assign({ref:A,id:"addVar",onClick:e=>{e.stopPropagation(),w(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),q&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:q,setShowVariable:w,variableValue:k,setVariableValue:T,placeholder:"Add a variable",customTrigger:e=>{T(e.actualValue),S(!1)}})]})};
+`;exports.AddVariableStyled=p,exports.Container=j,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[S,q]=t.useState(!1),[w,C]=t.useState(!1),[k,T]=t.useState(""),[B,L]=t.useState(!1),E=t.useRef(),A=t.useRef();return t.useEffect((()=>{v&&v(f+k)}),[k]),t.useEffect((()=>{y.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(O(!0),f&&L&&L(!0))}))}),[y]),e.jsxs(j,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((a,t)=>!a.isEditableVariable||m?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(h.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:g,setShowDiscountCheckBox:O})}),t))),(V||f)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&v&&v(""),L(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{v&&v(e)},value:f,onFocus:()=>{q(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),q(!0)):(q(!1),C(!1))},noErrorHint:!0,validate:e=>[!0,""]}),S&&e.jsx(p,Object.assign({ref:A,id:"addVar",onClick:e=>{e.stopPropagation(),C(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),w&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:w,setShowVariable:C,variableValue:k,setVariableValue:T,placeholder:"Add a variable",customTrigger:e=>{T(e.actualValue),q(!1)}})]})};

package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -226,3 +226,13 @@ export declare enum BUTTON_TYPE {
     URL = "URL",
     PHONE_NUMBER = "PHONE_NUMBER"
 }
+export type Extras = {
+    discountCodeExtra?: [
+        discountCode: string,
+        setDiscountCode: (discountCode: string) => void
+    ];
+    backTrackExtra?: [
+        backTrackMessage: string,
+        setBackTrackMessage: (backTrackMessage: string) => void
+    ];
+};

package/dist/esm/components/add-variableV2/AddVariableV2.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import s from"../../assets/icons/back_icon.svg.js";import l from"../../assets/icons/chevronRightAlt.svg.js";import t from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import n from"../../assets/icons/undo.svg.js";import{memo as c,useState as o,useEffect as d}from"react";import{AddVariableStyled as b}from"./AddVariableV2.styled.js";import{Button as v}from"../button/Button.js";import{IconButton as m}from"../icon-button/IconButton.js";import{SearchBar as p}from"../searchBar/searchBar.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{COLORS as u}from"../../constants/Theme.js";import{TitleSmall as h,BodyCaption as j}from"../TypographyStyle.js";const y=c((c=>{const{data:y}=c,[f,O]=o(c.data),[N,V]=o({}),[T,_]=o(),[k,C]=o(""),[S,w]=o(""),[L,x]=o(!1),[A,B]=o(!0),I=/^[^.]*\.[^.]*$/;console.log("ignore:",f),d((()=>{const e={};y.forEach((a=>{e[a.displayName]=[]})),_(e)}),[y]),d((()=>{M(!0)}),[]),d((()=>{if(S){F(c.data,A).length>0?x(!0):x(!1)}else x(!0)}),[S]);const F=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((i=>{var s;return(null===(s=e.variables[i].displayName)||void 0===s?void 0:s.toLowerCase().includes(S.toLowerCase()))&&(!a||e.variables[i].isAvailable===a)||H(e.variables[i])}))))},E=(e,a)=>{const i=y.find((e=>e.displayName===a));if(i){let s=i;e.forEach(((e,a)=>{s=s.variables[e]})),V((e=>Object.assign(Object.assign({},e),{[a]:s})))}},H=e=>{let a=!1;if(e.isSubHeader&&e.variables){const i=Object.keys(e.variables);for(let s=0;s<i.length;s++){const l=i[s];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(S.toLowerCase())&&e.variables[l].isAvailable===A){a=!0;break}}}return a},M=e=>{if(B(e),e){let a=[];if(k){const e=N[k];a=c.data.filter((e=>e.displayName===k)).map((a=>P(a,e))).filter((e=>null!=e))}else a=c.data.map((e=>P(e))).filter((e=>null!==e));O(a),S&&(a=F(a,e)),a.length>0?x(!0):x(!1)}else if(O(c.data),S){F(c.data,e).length>0?x(!0):x(!1)}else x(!0)};function P(e,a){const i={};if(a){for(const s in e.variables)if(e.variables[s]===a)for(const a in e.variables[s].variables)e.variables[s].variables[a].isAvailable&&(i[a]=e.variables[s].variables[a])}else for(const a in e.variables)e.variables[a].isAvailable&&(i[a]=e.variables[a]);return 0===Object.keys(i).length?null:Object.assign(Object.assign({},e),{variables:i})}const $=a=>{const s=a.item.description;return e(i,{children:e(g,Object.assign({body:"",tooltipContent:e(j,Object.assign({color:u.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:a.item.isAvailable?s?`• ${s}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:e("div",{children:e(z,{item:a.item})})}))})},z=a=>e(v,{darkMode:c.enableVariable?c.enableVariable:a.item.isAvailable,size:"chip",LeadingIcon:a.item.isSubHeader?void 0:r,TrailingIcon:()=>a.item.isSubHeader?e("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:e(l,{})})):e(i,{}),buttonText:a.item.displayName}),W=(a,s)=>A&&!a.isAvailable?e(i,{}):e("div",Object.assign({onClick:a.isSubHeader?()=>{const e=[...T[k],s];E(e,k),_((a=>Object.assign(Object.assign({},a),{[k]:e})))}:()=>{c.customTrigger?(c.customTrigger(a),c.setShowVariable(!1)):c.isEvaluationList?D(a):c.setVariableValue(c.selectWithTypes?{actualValue:a.actualValue,variableType:a.variableType,needsFetching:a.needsFetching}:a.actualValue)}},{children:e($,{item:a})})),R=(e,a)=>{const i=[...T[e.displayName],a];E(i,e.displayName),_((a=>Object.assign(Object.assign({},a),{[e.displayName]:i}))),C(e.displayName)},D=e=>{if(e.actualValue.match(I)){const a=e.actualValue.replace("{{","").replace("}}","").split("."),i=a[0]+`['${a[1]}']`;c.setVariableValue(c.selectWithTypes?{actualValue:i,variableType:e.variableType,needsFetching:e.needsFetching}:i)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;c.setVariableValue(c.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},q=(e,a)=>{if(c.customTrigger)c.customTrigger(e.variables[a]),c.setShowVariable(!1);else if(c.isEvaluationList){const i=e.variables[a];D(i)}else c.setVariableValue(c.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},G=c.isModalState?void 0:{top:"small"===c.pickerSize?"300px":"60px",left:`${c.leftPosition?c.leftPosition+24:430}px`};return e("div",Object.assign({id:"varList",tabIndex:-1},{children:e(b,Object.assign({style:G,onClick:e=>{e.stopPropagation()},pickerSize:c.pickerSize||"large",isModalState:c.isModalState},{children:c.showVariable&&a("div",Object.assign({className:"popup"},{children:[a("div",Object.assign({className:"sticky__bar"},{children:[a("div",Object.assign({className:"header__bar"},{children:[e("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),e("div",Object.assign({onClick:()=>{c.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:e(m,{iconButtonType:"default",Icon:t})}))]})),e("div",Object.assign({className:"search__bar",onBlur:e=>{c.onSearchBlur&&c.onSearchBlur(e)}},{children:e(p,{width:"100%",isEnabled:!0,onChange:e=>{w(e)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!L&&a("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[e(h,{children:"No results found!"}),e(j,{children:`Sorry we could not find any results for "${S}"`})]})),k&&T[k].length>0&&a("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[a("div",Object.assign({className:"left__nav"},{children:[e(m,{Icon:s,style:{color:"#919191",display:"flex"},onClick:()=>{const e=T[k].slice(0,-1);E(e,k),_((a=>Object.assign(Object.assign({},a),{[k]:e}))),e.length||C("")}}),a("div",Object.assign({className:"block"},{children:[e(h,{children:N[k].displayName}),N[k].description&&e(j,{children:N[k].description})]}))]})),a("div",Object.assign({className:"right__nav"},{children:[e(m,{Icon:n,style:{display:"flex"},onClick:()=>{E([],k),_((e=>Object.assign(Object.assign({},e),{[k]:[]}))),C("")}}),e("div",{children:"First page"})]}))]}))]})),e("div",Object.assign({className:"wrapper"},{children:e("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items"},{children:[!k&&c.data.map((s=>{let l=[];return S&&(l=Object.keys(s.variables).filter((e=>{var a;return(null===(a=s.variables[e].displayName)||void 0===a?void 0:a.toLowerCase().includes(S.toLowerCase()))||H(s.variables[e])}))),a(i,{children:[S?l.length>0?a("div",Object.assign({className:"block"},{children:[e("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e(j,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})):e(i,{}):a("div",Object.assign({className:"block"},{children:[e("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e(j,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})),Object.keys(s.variables).map((a=>{var l;return S?(null===(l=s.variables[a].displayName)||void 0===l?void 0:l.toLowerCase().includes(S.toLowerCase()))||H(s.variables[a])?e("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>R(s,a):()=>q(s,a)},{children:e($,{item:s.variables[a]})})):e(i,{}):e("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>R(s,a):()=>q(s,a)},{children:e($,{item:s.variables[a]})}))}))]})})),k&&e("div",Object.assign({className:"list__map"},{children:e("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(N[k].variables).map(((a,s)=>{var l;return S?(null===(l=N[k].variables[a].displayName)||void 0===l?void 0:l.toLowerCase().includes(S.toLowerCase()))||H(N[k].variables[a])?W(N[k].variables[a],a):e(i,{}):W(N[k].variables[a],a)}))}))}))]}))}))})),e("div",{className:"bottom__padding"})]}))}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&e.leftPosition===a.leftPosition));export{y as AddVariableV2};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as a,jsxs as i,Fragment as s}from"react/jsx-runtime";import l from"../../assets/icons/back_icon.svg.js";import t from"../../assets/icons/chevronRightAlt.svg.js";import n from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import c from"../../assets/icons/undo.svg.js";import{memo as o,useState as d,useEffect as b}from"react";import{AddVariableStyled as v}from"./AddVariableV2.styled.js";import{Button as m}from"../button/Button.js";import{IconButton as p}from"../icon-button/IconButton.js";import{SearchBar as u}from"../searchBar/searchBar.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{COLORS as h}from"../../constants/Theme.js";import{Switch as y}from"../switch/Switch.js";import{BodySecondary as f,TitleSmall as j,BodyCaption as O}from"../TypographyStyle.js";const N=o((o=>{const{data:N}=o,[V,_]=d(o.data),[w,T]=d({}),[S,k]=d(),[C,x]=d(""),[L,I]=d(""),[A,B]=d(!1),[F,E]=d(!0),H=/^[^.]*\.[^.]*$/;b((()=>{const e={};N.forEach((a=>{e[a.displayName]=[]})),k(e)}),[N]),b((()=>{z(!0)}),[]),b((()=>{if(L){M(o.data,F).length>0?B(!0):B(!1)}else B(!0)}),[L]);const M=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((i=>{var s;return(null===(s=e.variables[i].displayName)||void 0===s?void 0:s.toLowerCase().includes(L.toLowerCase()))&&(!a||e.variables[i].isAvailable===a)||$(e.variables[i])}))))},P=(e,a)=>{const i=N.find((e=>e.displayName===a));if(i){let s=i;e.forEach(((e,a)=>{s=s.variables[e]})),T((e=>Object.assign(Object.assign({},e),{[a]:s})))}},$=e=>{let a=!1;if(e.isSubHeader&&e.variables){const i=Object.keys(e.variables);for(let s=0;s<i.length;s++){const l=i[s];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(L.toLowerCase())&&e.variables[l].isAvailable===F){a=!0;break}}}return a},z=e=>{if(E(e),e){let a=[];if(C){const e=w[C];a=o.data.filter((e=>e.displayName===C)).map((a=>W(a,e))).filter((e=>null!=e))}else a=o.data.map((e=>W(e))).filter((e=>null!==e));_(a),L&&(a=M(a,e)),a.length>0?B(!0):B(!1)}else if(_(o.data),L){M(o.data,e).length>0?B(!0):B(!1)}else B(!0)};function W(e,a){const i={};if(a){for(const s in e.variables)if(e.variables[s]===a)for(const a in e.variables[s].variables)e.variables[s].variables[a].isAvailable&&(i[a]=e.variables[s].variables[a])}else for(const a in e.variables)e.variables[a].isAvailable&&(i[a]=e.variables[a]);return 0===Object.keys(i).length?null:Object.assign(Object.assign({},e),{variables:i})}const R=e=>{const i=e.item.description;return a(s,{children:a(g,Object.assign({body:"",tooltipContent:a(O,Object.assign({color:h.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?i?`• ${i}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a("div",{children:a(D,{item:e.item})})}))})},D=e=>a(m,{darkMode:o.enableVariable?o.enableVariable:e.item.isAvailable,size:"chip",LeadingIcon:e.item.isSubHeader?void 0:r,TrailingIcon:()=>e.item.isSubHeader?a("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a(t,{})})):a(s,{}),buttonText:e.item.displayName}),q=(e,i)=>F&&!e.isAvailable?a(s,{}):a("div",Object.assign({onClick:e.isSubHeader?()=>{const e=[...S[C],i];P(e,C),k((a=>Object.assign(Object.assign({},a),{[C]:e})))}:()=>{o.customTrigger?(o.customTrigger(e),o.setShowVariable(!1)):o.isEvaluationList?J(e):o.setVariableValue(o.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a(R,{item:e})})),G=(e,a)=>{const i=[...S[e.displayName],a];P(i,e.displayName),k((a=>Object.assign(Object.assign({},a),{[e.displayName]:i}))),x(e.displayName)},J=e=>{if(e.actualValue.match(H)){const a=e.actualValue.replace("{{","").replace("}}","").split("."),i=a[0]+`['${a[1]}']`;o.setVariableValue(o.selectWithTypes?{actualValue:i,variableType:e.variableType,needsFetching:e.needsFetching}:i)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;o.setVariableValue(o.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},K=(e,a)=>{if(o.customTrigger)o.customTrigger(e.variables[a]),o.setShowVariable(!1);else if(o.isEvaluationList){const i=e.variables[a];J(i)}else o.setVariableValue(o.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},Q=o.isModalState?void 0:{top:"small"===o.pickerSize?"300px":"60px",left:`${o.leftPosition?o.leftPosition+24:430}px`};return a("div",Object.assign({id:"varList",tabIndex:-1},{children:a(v,Object.assign({style:Q,onClick:e=>{e.stopPropagation()},pickerSize:o.pickerSize||"large",isModalState:o.isModalState},{children:o.showVariable&&i("div",Object.assign({className:"popup"},{children:[i("div",Object.assign({className:"sticky__bar"},{children:[i("div",Object.assign({className:"header__bar"},{children:[a("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),a("div",Object.assign({onClick:()=>{o.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a(p,{iconButtonType:"default",Icon:n})}))]})),i("div",Object.assign({className:"search__bar",onBlur:e=>{o.onSearchBlur&&o.onSearchBlur(e)}},{children:[a(u,{width:"100%",isEnabled:!0,onChange:e=>{I(e)},onEnter:()=>{},placeholder:"Search...",variant:"default"}),i("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a(f,Object.assign({style:{color:h.content.secondary}},{children:"Show only recommended variables"})),a(y,{value:F,onValueChange:a=>e(void 0,void 0,void 0,(function*(){return yield z(a)}))})]}))]})),C&&S[C].length>0&&i("div",Object.assign({className:"nav__bar"},{children:[i("div",Object.assign({className:"left__nav"},{children:[a(p,{Icon:l,style:{color:"#919191",display:"flex"},onClick:()=>{const e=S[C].slice(0,-1);P(e,C),k((a=>Object.assign(Object.assign({},a),{[C]:e}))),e.length||x("")}}),i("div",Object.assign({className:"block"},{children:[a(j,{children:w[C].displayName}),w[C].description&&a(O,{children:w[C].description})]}))]})),i("div",Object.assign({className:"right__nav"},{children:[a(p,{Icon:c,style:{display:"flex"},onClick:()=>{P([],C),k((e=>Object.assign(Object.assign({},e),{[C]:[]}))),x("")}}),a("div",{children:"First page"})]}))]}))]})),!A&&i("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a(j,{children:"No results found!"}),a(O,F?{children:"Sorry we could not find any recommended variables"}:{children:`Sorry we could not find any results for "${L}"`})]})),a("div",Object.assign({className:"wrapper"},{children:a("div",Object.assign({className:"list__map"},{children:i("div",Object.assign({className:"items"},{children:[!C&&V.map((e=>{let l=[];return L&&(l=Object.keys(e.variables).filter((a=>{var i;return(null===(i=e.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(L.toLowerCase()))||$(e.variables[a])}))),i(s,{children:[L?l.length>0?i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(O,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a(s,{}):i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a(O,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((i=>{var l;return L?(null===(l=e.variables[i].displayName)||void 0===l?void 0:l.toLowerCase().includes(L.toLowerCase()))||$(e.variables[i])?a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>G(e,i):()=>K(e,i)},{children:a(R,{item:e.variables[i]})})):a(s,{}):a("div",Object.assign({onClick:e.variables[i].isSubHeader?()=>G(e,i):()=>K(e,i)},{children:a(R,{item:e.variables[i]})}))}))]})})),C&&a("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(w[C].variables).map(((e,i)=>{var l;return L?(null===(l=w[C].variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(L.toLowerCase()))||$(w[C].variables[e])?q(w[C].variables[e],e):a(s,{}):q(w[C].variables[e],e)}))}))}))]}))}))})),a("div",{className:"bottom__padding"})]}))}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&e.leftPosition===a.leftPosition));export{N as AddVariableV2};

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/input-with-vars/InputWithVariables.d.ts

@@ -3,7 +3,7 @@ import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
 interface InputWithVariablesProps {
     variablesList: any;
-    onChange: (val: SelectedVariable | Variable) => void;
+    onChange: (val: SelectedVariable) => void;
     onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
     addVarBoxRight: string;
     allowMix: boolean;
@@ -14,6 +14,7 @@ interface InputWithVariablesProps {
     placeHolder?: string;
     showAddButton?: boolean;
     errorMessage?: string;
+    showSideModal?: boolean;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
 export {};

package/dist/esm/components/input-with-vars/InputWithVariables.js

@@ -1,6 +1,6 @@
-import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as t}from"react";import o from"styled-components";import{v4 as s}from"uuid";import{AddVariableV2SideModal as n}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{COLORS as c}from"../../constants/Theme.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as g}from"../TypographyStyle.js";const h=o=>{let{addVarBoxRight:c,allowMix:h,onChange:m,prevVariable:V,variablesList:T,onBlur:f,onlyVariables:y,placeHolder:j,showAddButton:x=!0,showHelp:w,showSideVariablePanel:S,errorMessage:A}=o;const N=i(null),[B,C]=d(!1),[O]=d(s()),[k,F]=d(),[I,L]=d(V),[M,q]=d(!1),[Z,$]=d(!1),[z,E]=d(A||"");return t((()=>{k&&k.actualValue&&L(h?e=>({actualValue:e.actualValue+k.actualValue,variableType:"string"}):e=>({actualValue:k.actualValue,variableType:k.variableType,needsFetching:k.needsFetching}))}),[k]),t((()=>{m(I)}),[I]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(I.actualValue)},{children:[l(p,{id:O,ref:N,skipFocus:!0,textControl:!0,isActive:B,value:I.actualValue,validate:e=>[!0,""],errorMessage:z,placeholder:j||"Add a value",onChangeText:function(e,a){if(E(""),y){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||L({actualValue:"",variableType:"string"})}else L(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;C(!0),$(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||M||q(!0)},onBlur:e=>{var a,l,r,i,d,t,o;null==f||f(e,I),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(N.current&&N.current.focus(),C(!0)):"Search..."===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?C(!0):(C(!1),q(!1),$(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[I.actualValue&&w?l("div",Object.assign({style:{marginTop:4}},{children:l(g,{children:`This value is of type ${I.variableType}`})})):l("div",{}),x&&Z&&l("div",Object.assign({style:{marginTop:A?"-24px":"0px"}},{children:l(v,Object.assign({right:c,id:"addVar",onClick:()=>{q(!M)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&M&&l(u,{data:T,showVariable:!0,setShowVariable:()=>{q(!1)},variableValue:k,setVariableValue:F,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?N.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==O&&(q(!1),$(!1),C(!1)):(q(!1),$(!1),C(!1))}})]})),S&&M&&l(n,{zIndex:2e3,data:null!=T?T:[],showVariable:M,setShowVariable:q,placeholder:"Add a variable",customTrigger:e=>{F({actualValue:e.actualValue,variableType:"string"}),L(e)},onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?N.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==O&&(q(!1),$(!1),C(!1)):(q(!1),$(!1),C(!1))}})]})},b=o.div`
+import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as o}from"react";import t from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableV2SideModal as u}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as c}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as g}from"../TypographyStyle.js";const h=t=>{let{addVarBoxRight:n,allowMix:h,onChange:m,prevVariable:V,variablesList:T,onBlur:y,onlyVariables:f,placeHolder:j,showAddButton:x=!0,showHelp:w,showSideVariablePanel:S,errorMessage:A,showSideModal:N}=t;const B=i(null),[C,O]=d(!1),[k]=d(s()),[M,F]=d(),[I,L]=d(V),[q,Z]=d(!1),[$,z]=d(!1),[E,H]=d(A||"");return o((()=>{M&&M.actualValue&&L(h?e=>({actualValue:e.actualValue+M.actualValue,variableType:"string"}):e=>({actualValue:M.actualValue,variableType:M.variableType,needsFetching:M.needsFetching}))}),[M]),o((()=>{m(I)}),[I]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(I.actualValue)},{children:[l(p,{id:k,ref:B,skipFocus:!0,textControl:!0,isActive:C,value:I.actualValue,validate:e=>[!0,""],errorMessage:E,placeholder:j||"Add a value",onChangeText:(e,a)=>{if(H(""),f){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||L({actualValue:"",variableType:"string"})}else L(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;O(!0),z(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||q||Z(!0)},onBlur:e=>{var a,l,r,i,d,o,t;null==y||y(e,I),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(o=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(B.current&&B.current.focus(),O(!0)):"Search..."===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?O(!0):(O(!1),Z(!1),z(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[I.actualValue&&w&&l("div",Object.assign({style:{marginTop:4}},{children:l(g,{children:`This value is of type ${I.variableType}`})})),x&&$&&l("div",Object.assign({style:{marginTop:A?"-24px":"0px"}},{children:l(v,Object.assign({right:n,id:"addVar",onClick:()=>{Z(!q)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&q&&l(c,{data:T,showVariable:!0,setShowVariable:()=>{Z(!1)},variableValue:M,setVariableValue:F,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?B.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==k&&(Z(!1),z(!1),O(!1)):(Z(!1),z(!1),O(!1))}})]})),S&&q&&l(u,{zIndex:2e3,data:null!=T?T:[],showVariable:q,setShowVariable:()=>{Z(!1)},placeholder:"Add a variable",customTrigger:e=>{F({actualValue:e.actualValue,variableType:"string"}),L(e)},onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?B.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==k&&(Z(!1),z(!1),O(!1)):(Z(!1),z(!1),O(!1))}})]})},b=t.div`
 	margin-bottom: 16px;
 	input {
-		color: ${e=>e.isVar?c.stroke.brand:"black"};
+		color: ${e=>e.isVar?n.stroke.brand:"black"};
 	}
 `;export{h as InputWithVariables};

package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -3,7 +3,7 @@ import { CHANNEL_TYPE } from '../template-preview/models/Channels';
 import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
 import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
-import { WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { Extras, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 export interface TemplateContextMapperProps {
     selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
     closeDialog?: () => void;
@@ -11,7 +11,7 @@ export interface TemplateContextMapperProps {
     channel: CHANNEL_TYPE;
     globalPlaceholders: GlobalPlaceholderType;
     /** List of variables being used in this template */
-    templateVariables: CUSTOM_VARIABLE[];
+    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
     /** Only for initial-UI-purpose for the modal */
     htmlContent: string;
     showOnlyContent?: boolean;
@@ -26,5 +26,7 @@ export interface TemplateContextMapperProps {
     setDiscountCode?: (code: string) => void;
     enabledCustomText?: boolean;
     disableEditVariable?: boolean;
+    pod?: string;
+    extras?: Extras;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, variableListForImage, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, variableListForImage, pod, extras, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:u,closeDialog:h,showVariableMapping:g,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:L,variableList:P,discountCode:E,setDiscountCode:V,onBackPress:x,enabledCustomText:I,disableEditVariable:y,variableListForImage:k}=b;var D,A;o((()=>{B(C)}),[C]);const[O,F]=a(v===s.EMAIL?"desktop":"mobile"),[z,B]=a(C),[H,$]=a(!1),[N,U]=a(u),[W,_]=a(null!=f?f:[]),[q,G]=a(!1);const J=i((()=>p(S)),[S]);return e(d.Provider,Object.assign({value:{template:N,setTemplate:U,device:O,setDevice:F,display_content:z,setDisplayContent:B,originalVariableList:W,setOriginalVariableList:_,isError:H,setIsError:$,channel:v,globalNormalizedPlaceholders:J,templateSelectionTriggered:q,setTemplateSelectionTriggered:G,enabledCustomText:I,disableEditVariable:y}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&g?1e3:650},open:!0,onClose:()=>{null==h||h()},headingTitle:null==N?void 0:N.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(D=null==N?void 0:N.category)&&void 0!==D?D:"")} • ${null!==(A=null==N?void 0:N.templateCategory)&&void 0!==A?A:""}`:"",onBackPress:()=>{null==x||x()}},{children:[e(m,{showVariableMapping:g,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:L,variableList:P,discountCode:E,setDiscountCode:V,variableListForImage:k&&(null==k?void 0:k.length)>0?k:P}),M?e(c,{onSelect:function(){const e=null==M?void 0:M(N,W,null!=z?z:"");e?$(!!e):G(!0)}}):e(l,{})]}))}))};export{b as TemplateContextMapper};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import r from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:u,closeDialog:h,showVariableMapping:g,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:x,variableList:L,discountCode:P,setDiscountCode:E,onBackPress:V,enabledCustomText:I,disableEditVariable:y,variableListForImage:k,pod:D,extras:A}=b;var O,F;o((()=>{$(C)}),[C]);const[z,B]=a(v===s.EMAIL?"desktop":"mobile"),[H,$]=a(C),[N,U]=a(!1),[W,_]=a(u),[q,G]=a(null!=f?f:[]),[J,K]=a(!1);const Q=i((()=>p(S)),[S]);return e(d.Provider,Object.assign({value:{template:W,setTemplate:_,device:z,setDevice:B,display_content:H,setDisplayContent:$,originalVariableList:q,setOriginalVariableList:G,isError:N,setIsError:U,channel:v,globalNormalizedPlaceholders:Q,templateSelectionTriggered:J,setTemplateSelectionTriggered:K,enabledCustomText:I,disableEditVariable:y,pod:D,extras:A}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(n,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&g?1e3:700},open:!0,onClose:()=>{null==h||h()},headingTitle:null==W?void 0:W.label,headingSubtitle:v===s.WHATSAPP?`${r.capitaliseFirstLetterOfString(null!==(O=null==W?void 0:W.category)&&void 0!==O?O:"")} • ${null!==(F=null==W?void 0:W.templateCategory)&&void 0!==F?F:""}`:"",onBackPress:()=>{null==V||V()}},{children:[e(m,{showVariableMapping:g,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:x,variableList:L,discountCode:P,setDiscountCode:E,variableListForImage:k&&(null==k?void 0:k.length)>0?k:L}),M?e(c,{onSelect:function(){const e=null==M?void 0:M(W,q,null!=H?H:"");e?U(!!e):K(!0)}}):e(l,{})]}))}))};export{b as TemplateContextMapper};

package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts

@@ -3,7 +3,7 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
 import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
-import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+import { Extras, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
     device: DEVICE_TYPES;
@@ -23,6 +23,8 @@ export declare const TemplateModalContext: React.Context<{
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
     disableEditVariable?: boolean | undefined;
+    pod?: string | undefined;
+    extras?: Extras | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -42,4 +44,6 @@ export declare const useTemplateModalContext: () => {
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
     disableEditVariable?: boolean | undefined;
+    pod?: string | undefined;
+    extras?: Extras | undefined;
 };

package/dist/esm/components/template-context-mapper/modalElements/BackTrackComponent.d.ts

@@ -0,0 +1,4 @@
+export declare const BackTrackComponent: (props: {
+    backTrackMessage?: string | undefined;
+    setBackTrackMessage?: ((backTrackMessage: string) => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-context-mapper/modalElements/BackTrackComponent.js

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import{CheckBox as a}from"../../checkBox/CheckBox.js";import{TitleSmall as n}from"../../TypographyStyle.js";import{Input as s}from"../../input/Input.js";const c=c=>{const{backTrackMessage:o,setBackTrackMessage:l}=c,[g,m]=i(!!o);return e(r,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[t(a,{isChecked:g,onValueChange:()=>{g&&l&&l(""),m(!g)}}),t(n,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),g&&t("div",Object.assign({style:{margin:10}},{children:t(s,{placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{l&&l(e)},height:"120px",value:o,noErrorHint:!0,validate:e=>[!0,""]})}))]})};export{c as BackTrackComponent};

package/dist/esm/components/template-context-mapper/modalElements/Body.js

@@ -1,17 +1,17 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as n}from"react";import l from"styled-components";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as s}from"../utils/getVariableNameEmail.js";import{highlightFor as p}from"../utils/highlightFor.js";import d from"./DesktopPreview.js";import m from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import h from"./VariableConnectorsPanel.js";const u=l.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as n}from"react";import i from"styled-components";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as s}from"../utils/getVariableNameEmail.js";import{highlightFor as d}from"../utils/highlightFor.js";import p from"./DesktopPreview.js";import m from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import u from"./VariableConnectorsPanel.js";const h=i.div`
 	display: flex;
 	//	height: 100%;
-`,f=l.div`
+`,f=i.div`
 	padding: 16px 14px;
 	max-width: 350px;
 
-	height: ${e=>e.channel===i.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===l.WHATSAPP?"500px":"475px"};
 	overflow-y: 'auto';
 	padding-bottom: 24px;
 	border-left: ${a.stroke.primary} 1px solid;
-`,v=l.div`
+`,v=i.div`
 	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: 475px;
 	overflow-y: auto;
-`,g=l=>{const{showVariableMapping:g,showOnlyContent:b,whatsappSpecificPickerMeta:w,showVariableModal:x,variableList:y,discountCode:j,setDiscountCode:M,variableListForImage:C}=l,P=n(),E=n(),{device:T,display_content:k,channel:A,template:L,setTemplate:V}=r();const I=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(u,{children:[t(v,Object.assign({showOnlyContent:b,showVariableMapping:g},{children:"mobile"===T?t(c,{ref:E,display_content:null!=k?k:"",channel:A,template:L}):A!==i.MESSAGE?t(d,{ref:P,channel:A,display_content:null!=k?k:""}):t(o,{})})),g&&t(f,Object.assign({channel:A},{children:A!==i.WHATSAPP?t(h,{onFocus:A===i.EMAIL?function(e){var t,o,n;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===T?"template_html_mobile":"template_html_desktop"),r=s(e+1),d=A===i.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),m=I(d),c=null==d?void 0:d.offsetLeft;"desktop"===T?m&&P.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,A,T)):m&&E.current&&(null===(n=null==l?void 0:l.contentWindow)||void 0===n||n.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,A,T))}:void 0,showVariableModal:x,variableList:y,discountCode:j,setDiscountCode:M}):t(m,{whatsappSpecificPickerMeta:w,template:L,onTemplateChange:e=>{null==V||V(e)},showVariableModal:x,variableList:y,variableListForImage:C})}))]})};export{g as default};
+`,g=i=>{const{showVariableMapping:g,showOnlyContent:b,whatsappSpecificPickerMeta:w,showVariableModal:x,variableList:y,discountCode:C,setDiscountCode:j,variableListForImage:M}=i,P=n(),E=n(),{device:T,display_content:k,channel:A,template:L,setTemplate:V}=r();const I=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(h,{children:[t(v,Object.assign({showOnlyContent:b,showVariableMapping:g},{children:"mobile"===T?t(c,{ref:E,display_content:null!=k?k:"",channel:A,template:L}):A!==l.MESSAGE?t(p,{ref:P,channel:A,display_content:null!=k?k:""}):t(o,{})})),g&&t(f,Object.assign({channel:A},{children:A!==l.WHATSAPP?t(u,{onFocus:A===l.EMAIL?function(e){var t,o,n;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===T?"template_html_mobile":"template_html_desktop"),r=s(e+1),p=A===l.EMAIL?null===(t=null==i?void 0:i.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),m=I(p),c=null==p?void 0:p.offsetLeft;"desktop"===T?m&&P.current&&(null===(o=null==i?void 0:i.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,m),d(r,a.background.warning.light,2,A,T)):m&&E.current&&(null===(n=null==i?void 0:i.contentWindow)||void 0===n||n.scrollTo(null!=c?c:0,m),d(r,a.background.warning.light,2,A,T))}:void 0,showVariableModal:x,variableList:y,discountCode:C,setDiscountCode:j}):t(m,{whatsappSpecificPickerMeta:w,template:L,onTemplateChange:e=>{null==V||V(e)},showVariableModal:x,variableList:y,variableListForImage:M,discountCode:C,setDiscountCode:j})}))]})};export{g as default};

package/dist/esm/components/template-context-mapper/modalElements/DiscountCodeComponent.d.ts

@@ -0,0 +1,6 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+export declare const DiscountCodeComponent: (props: {
+    discountCode?: string | undefined;
+    setDiscountCode?: ((code: string) => void) | undefined;
+    variableList?: VariableListInterfaceV2[] | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-context-mapper/modalElements/DiscountCodeComponent.js

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import o from"../../../assets/icons/PlusIcon.js";import{useState as r,useRef as a,useEffect as s}from"react";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as l}from"../../input/Input.js";import"@tippyjs/react";import"../../tooltips/TooltipInternal.js";import"../../../constants/Theme.js";import"../../switch/Switch.js";import{TitleSmall as d}from"../../TypographyStyle.js";import{CheckBox as c}from"../../checkBox/CheckBox.js";import{AddVariableStyled as m}from"./VariableConnectorsPanel.js";const p=p=>{const{discountCode:u,setDiscountCode:h,variableList:b}=p,[j,g]=r(""),[v,V]=r(!!u),[f,y]=r(!1),[C,x]=r(!1),w=a(),T=a();return s((()=>{console.log("vj: setDiscountCode",h,j),h&&h(u+j)}),[j]),e(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(c,{isChecked:v,onValueChange:()=>{v&&h&&h(""),V(!v)}}),i(d,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),v&&e("div",Object.assign({ref:w,style:{margin:10}},{children:[i(l,{placeholder:"Enter your discount code",onChangeText:e=>{h&&h(e)},value:u,onFocus:()=>{y(!0)},onBlur:e=>{var t;"addVar"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.id)?(w.current&&w.current.focus(),y(!0)):(y(!1),x(!1))},noErrorHint:!0,validate:e=>[!0,""]}),f&&i(m,Object.assign({ref:T,id:"addVar",onClick:e=>{e.stopPropagation(),x(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(o,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),C&&i(n,{zIndex:2e3,data:null!=b?b:[],showVariable:C,setShowVariable:x,variableValue:j,setVariableValue:g,placeholder:"Add a variable",customTrigger:e=>{g(e.actualValue),y(!1)}})]})};export{p as DiscountCodeComponent};

package/dist/esm/components/template-context-mapper/modalElements/EditMediaModal.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as i}from"../../button/Button.js";import{InputWithVariables as a}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{TitleMedium as l,BodySecondary as d,BodyRegular as n,BodyCaption as p}from"../../TypographyStyle.js";import m from"../../../assets/icons/file.svg.js";import c from"../../../assets/icons/filePdf.svg.js";import h from"../../../assets/icons/image.svg.js";import g from"../../../assets/icons/upload.svg.js";const u=u=>{let{setOpenEditMedia:b,mediaComponentFormat:f,variableListForImage:j,openEditMedia:v,uploadMedia:y}=u;return e(o,Object.assign({open:v,zIndex:2e3,onClose:()=>b(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(l,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:f===s.IMAGE?e(h,{width:40,height:40}):f===s.VIDEO?e(m,{width:40,height:40}):e(c,{width:40,height:40})})),e(l,{children:f===s.IMAGE?"Upload an image":f===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:f===s.IMAGE?"JPEG/ PNG format • Max 5MB":f===s.VIDEO?"Mp4 format video • Max 16":"Pdf format a document • Max 100MB"})]})),t("div",Object.assign({style:{marginBottom:16}},{children:[e(n,{children:"Media"}),e(a,{addVarBoxRight:"46px",allowMix:!1,onChange:()=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&y(t.actualValue)},showAddButton:f===s.IMAGE})]})),t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(p,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(i,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:g,onClick:()=>y()})}))]}))]}))}))};export{u as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as i}from"../../button/Button.js";import{InputWithVariables as a}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{TitleMedium as l,BodySecondary as d,BodyRegular as n,BodyCaption as p}from"../../TypographyStyle.js";import m from"../../../assets/icons/file.svg.js";import c from"../../../assets/icons/filePdf.svg.js";import h from"../../../assets/icons/image.svg.js";import g from"../../../assets/icons/upload.svg.js";const u=u=>{let{setOpenEditMedia:b,mediaComponentFormat:f,variableListForImage:j,openEditMedia:v,uploadMedia:y}=u;return e(o,Object.assign({open:v,zIndex:2e3,onClose:()=>b(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(l,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:f===s.IMAGE?e(h,{width:40,height:40}):f===s.VIDEO?e(m,{width:40,height:40}):e(c,{width:40,height:40})})),e(l,{children:f===s.IMAGE?"Upload an image":f===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:f===s.IMAGE?"JPEG/ PNG format • Max 5MB":f===s.VIDEO?"Mp4 format video • Max 16":"Pdf format a document • Max 100MB"})]})),t("div",Object.assign({style:{marginBottom:16}},{children:[e(n,{children:"Media"}),e(a,{addVarBoxRight:"46px",allowMix:!1,onChange:e=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&y(t.actualValue)},showAddButton:f===s.IMAGE})]})),t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(p,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(i,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:g,onClick:()=>y()})}))]}))]}))}))};export{u as default};

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as o,jsx as i}from"react/jsx-runtime";import n,{useState as a}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import p from"./EditMediaModal.js";import m from"./EditMediaV2.js";const c=c=>{let{mediaComponent:f,template:u,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:g,variableListForImage:h}=c;var j,b,E;const{disableEditVariable:M}=d(),[y,I]=a(void 0),[C,O]=a(),[A,k]=a(),[w,x]=a(!1),T=n.createRef(),[F,R]=a(!1),[U,L]=a(""),{template:N,setTemplate:V}=d();let D;function G(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function _(t){var o;return e(this,void 0,void 0,(function*(){const e=new r;if(t instanceof Blob){const i=e.validate(t);if(i)L(i),R(!1);else{const e=f.format===s.IMAGE,i=yield g.uploadMediaFiles({file:t,fileName:y,isImage:e});if(i.success){const[e]=t.type.split("/");v(null!==(o=i.url)&&void 0!==o?o:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else L("An unknown technical error occured");R(!1)}}else L("An unknown technical error occured"),R(!1)}))}return D=f.format===s.IMAGE?"image/png, image/jpeg":f.format===s.VIDEO?"video/mp4":"application/pdf",t(o,{children:[i(p,{mediaComponentFormat:null!==(j=f.format)&&void 0!==j?j:s.IMAGE,uploadMedia:function(t){var o;return e(this,void 0,void 0,(function*(){if(L(""),k(""),x(!1),t)if(t.startsWith("https"))try{R(!0);const e=yield fetch(t),o=yield e.blob();yield _(o)}catch(e){L("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){k(t);const e=Object.assign({},N);if(e.components){const t=null===(o=null==e?void 0:e.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const o=Object.assign(Object.assign({},e.components[t]),{format:f.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),i=[...e.components];i[t]=o,e.components=i}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),R(!1),null==V||V(Object.assign({},e))}else R(!1),L("Invalid URL or variable");else G()}))},variableListForImage:h||[],setOpenEditMedia:x,openEditMedia:w}),!!C&&i(l,{aspectRatio:15/8,src:C,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){R(!1),L("");const e=yield fetch(t);_(yield e.blob()).then((()=>{O(void 0)}))}))},onCancel:()=>{R(!1),O("")}}),i("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;L(""),R(!0);const o=null===(t=e.target.files)||void 0===t?void 0:t[0];if(f.format===s.IMAGE){const e=new FileReader;O(""),I(""),e.onload=()=>{O(e.result),I(null==o?void 0:o.name)},o&&e.readAsDataURL(o)}else _(o)},accept:D}),i(m,{imageName:null!==(E=null===(b=null==f?void 0:f.example)||void 0===b?void 0:b.header_handle)&&void 0!==E?E:[],handleImageChange:G,mediaType:null==f?void 0:f.format,error:U,isLoading:F,setOpenEditMedia:x,selectedVariable:A,disableEditVariable:M})]})};export{c as default};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as o,jsx as i}from"react/jsx-runtime";import n,{useState as a}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import d from"./EditMediaModal.js";import m from"./EditMediaV2.js";const c=c=>{let{mediaComponent:f,template:u,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:g,variableListForImage:h}=c;var j,b,M;const{disableEditVariable:E}=p(),[y,I]=a(void 0),[C,O]=a(),[A,k]=a(),[w,x]=a(!1),T=n.createRef(),[F,R]=a(!1),[U,L]=a(""),{template:N,setTemplate:D}=p();let G;function V(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function _(t){var o;return e(this,void 0,void 0,(function*(){const e=new r;if(t instanceof Blob){const i=e.validate(t);if(i)L(i),R(!1);else{const e=f.format===s.IMAGE,i=yield g.uploadMediaFiles({file:t,fileName:y,isImage:e});if(i.success){const[e]=t.type.split("/");v(null!==(o=i.url)&&void 0!==o?o:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else L("An unknown technical error occured");R(!1)}}else L("An unknown technical error occured"),R(!1)}))}return console.log("ignore: ",E),G=f.format===s.IMAGE?"image/png, image/jpeg":f.format===s.VIDEO?"video/mp4":"application/pdf",t(o,{children:[i(d,{mediaComponentFormat:null!==(j=f.format)&&void 0!==j?j:s.IMAGE,uploadMedia:function(t){var o;return e(this,void 0,void 0,(function*(){if(L(""),k(""),x(!1),t)if(t.startsWith("https"))try{R(!0);const e=yield fetch(t),o=yield e.blob();yield _(o)}catch(e){L("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){k(t);const e=Object.assign({},N);if(e.components){const t=null===(o=null==e?void 0:e.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const o=Object.assign(Object.assign({},e.components[t]),{format:f.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),i=[...e.components];i[t]=o,e.components=i}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),R(!1),null==D||D(Object.assign({},e))}else R(!1),L("Invalid URL or variable");else V()}))},variableListForImage:h||[],setOpenEditMedia:x,openEditMedia:w}),!!C&&i(l,{aspectRatio:15/8,src:C,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){R(!1),L("");const e=yield fetch(t);_(yield e.blob()).then((()=>{O(void 0)}))}))},onCancel:()=>{R(!1),O("")}}),i("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;L(""),R(!0);const o=null===(t=e.target.files)||void 0===t?void 0:t[0];if(f.format===s.IMAGE){const e=new FileReader;O(""),I(""),e.onload=()=>{O(e.result),I(null==o?void 0:o.name)},o&&e.readAsDataURL(o)}else _(o)},accept:G}),i(m,{imageName:null!==(M=null===(b=null==f?void 0:f.example)||void 0===b?void 0:b.header_handle)&&void 0!==M?M:[],handleImageChange:V,mediaType:null==f?void 0:f.format,error:U,isLoading:F,setOpenEditMedia:x,selectedVariable:A})]})};export{c as default};

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts

@@ -9,6 +9,8 @@ export interface EditWhatsAppTemplateV2Props {
     showVariableModal?: boolean;
     variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import a from"./EditWhatsAppTemplateMediaV2.js";import{Container as l}from"./VariableConnectorsPanel.js";import s from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:m,whatsappSpecificPickerMeta:u,showVariableModal:b,variableList:v,variableListForImage:g}=r;var h,f,j,T,O,x,y,E,V,C,w,I;const{originalVariableList:L}=o(),{descriptionComponents:B,urlBtns:R,qrbBtns:A,imageComponent:M,bodyVariables:U,headerVariables:S}=n(c);function k(t,e){var o,n,i,a;const l=Object.assign({},c),s=null==l?void 0:l.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==s&&s>-1){const d=null===(o=null==l?void 0:l.components[s].buttons)||void 0===o?void 0:o.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const o="custom"===e&&"string"==typeof t,p=[...null!==(a=null===(i=null===(n=l.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==a?a:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[o?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},l.components[s]),{buttons:p}),c=Object.assign(Object.assign({},l.mapping),{buttons:o?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});l.mapping=c;const m=[...l.components];m[s]=r,l.components=m}}null==m||m(l)}function N(t,e,o){var n;const i=Object.assign({},c),a=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==a&&a>-1){const e=null===(n=null==i?void 0:i.components[a].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));e&&(e[o]=Object.assign(Object.assign({},e[o]),{flowId:t.flowId,flowName:t.flowName}));const l=Object.assign(Object.assign({},i.components[a]),{buttons:e}),s=[...i.components];s[a]=l,i.components=s}null==m||m(i)}return t(l,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!M&&e(i,{children:e(a,{whatsappSpecificPickerMeta:u,mediaComponent:M,updateTemplateImageUrl:function(t,e){var o;let n=Object.assign({},c);const i=null===(o=null==n?void 0:n.components)||void 0===o?void 0:o.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const o=Object.assign(Object.assign({},n.components[i]),{format:e,example:{header_handle:[t]}}),a=[...n.components];a[i]=o,n=Object.assign(Object.assign({},n),{components:a})}n.mapping&&(n.mapping=Object.assign(Object.assign({},n.mapping),{header:void 0})),null==m||m(Object.assign({},n))},template:c,variableListForImage:g})}),(U.length>0||S.length>0)&&e(d,{containerStyle:{paddingTop:M?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==B?void 0:B.map(((t,o)=>e(s,{originalVariableList:L,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body,showVariableModal:b,variableList:v},o))),(null===(f=null===(h=R[0])||void 0===h?void 0:h.component)||void 0===f?void 0:f.buttons)&&(null===(O=null===(T=null===(j=R[0])||void 0===j?void 0:j.component)||void 0===T?void 0:T.buttons)||void 0===O?void 0:O.length)>0&&e(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(x=null==L?void 0:L.buttons)||void 0===x?void 0:x.map(((t,o)=>{if("URL"===t.type)return e(p,{CTAoptions:null==u?void 0:u.CTAoptions,button:t,originalVariableList:L,updateSelectedURLTemplateBtn:k},`${o}`)})),(null===(E=null===(y=A[0])||void 0===y?void 0:y.component)||void 0===E?void 0:E.buttons)&&(null===(w=null===(C=null===(V=A[0])||void 0===V?void 0:V.component)||void 0===C?void 0:C.buttons)||void 0===w?void 0:w.length)>0&&e(d,{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"}),null===(I=null==L?void 0:L.buttons)||void 0===I?void 0:I.map(((t,o)=>{if("QUICK_REPLY"===t.type)return e(p,{QRBoptions:null==u?void 0:u.QRBoptions,button:t,originalVariableList:L,updateSelectedQRBTemplateBtn:N},`${o}`)}))]}))};export{r as default};
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as e,useEffect as n}from"react";import{useTemplateModalContext as i}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as l}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as a}from"./BackTrackComponent.js";import{DiscountCodeComponent as s}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as d}from"./EditMediaV2.style.js";import r from"./EditWhatsAppTemplateMediaV2.js";import{Container as p}from"./VariableConnectorsPanel.js";import c from"./VariableConnectorWhatsApp.js";import u from"./VariableEditorHeader.js";import m from"./WhatsAppTemplateCardButtonV2.js";const v=v=>{let{template:b,onTemplateChange:g,whatsappSpecificPickerMeta:h,showVariableModal:f,variableList:T,variableListForImage:j,discountCode:C,setDiscountCode:O}=v;var x,E,y,k,V,B,w,L,I,A,M,R,U,H,D,S;const{originalVariableList:N,pod:P,extras:Q}=i(),{descriptionComponents:F,urlBtns:W,qrbBtns:_,imageComponent:K,bodyVariables:Y,headerVariables:$}=l(b),[q,X]=e(!1);function z(t,o){var e,n,i,l,a;const s=Object.assign({},b),d=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==d&&d>-1){const a=null===(e=null==s?void 0:s.components[d].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==a&&a>-1){const e="custom"===o&&"string"==typeof t,r=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[d])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[a]=Object.assign(Object.assign({},r[a]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const p=Object.assign(Object.assign({},s.components[d]),{buttons:r}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[d]=p,s.components=u}}if("string"!=typeof t){"checkout.Url"===(null===(a=t.placeHolder)||void 0===a?void 0:a.slice(2,-2))?X(!0):(X(!1),null==O||O(""))}null==g||g(s)}function G(t,o,e){var n;const i=Object.assign({},b),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==g||g(i)}return n((()=>{var t;const o=null===(t=b.mapping.buttons)||void 0===t?void 0:t[0];"checkout.Url"===(null==o?void 0:o.slice(2,-2))?X(!0):(X(!1),null==O||O(""))}),[b]),t(p,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!K&&o(d,{children:o(r,{whatsappSpecificPickerMeta:h,mediaComponent:K,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},b);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}n.mapping&&(n.mapping=Object.assign(Object.assign({},n.mapping),{header:void 0})),null==g||g(Object.assign({},n))},template:b,variableListForImage:j})}),(Y.length>0||$.length>0)&&o(u,{containerStyle:{paddingTop:K?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==F?void 0:F.map(((t,e)=>o(c,{originalVariableList:N,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?b.mapping.header:b.mapping.body,showVariableModal:f,variableList:T},e))),(null===(E=null===(x=W[0])||void 0===x?void 0:x.component)||void 0===E?void 0:E.buttons)&&(null===(V=null===(k=null===(y=W[0])||void 0===y?void 0:y.component)||void 0===k?void 0:k.buttons)||void 0===V?void 0:V.length)>0&&o(u,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(B=null==N?void 0:N.buttons)||void 0===B?void 0:B.map(((t,e)=>{if("URL"===t.type)return o(m,{CTAoptions:null==h?void 0:h.CTAoptions,button:t,originalVariableList:N,updateSelectedURLTemplateBtn:z},`${e}`)})),(null===(L=null===(w=_[0])||void 0===w?void 0:w.component)||void 0===L?void 0:L.buttons)&&(null===(M=null===(A=null===(I=_[0])||void 0===I?void 0:I.component)||void 0===A?void 0:A.buttons)||void 0===M?void 0:M.length)>0&&("CHATBOT"!==P?o(u,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(a,{backTrackMessage:null===(R=null==Q?void 0:Q.backTrackExtra)||void 0===R?void 0:R[0],setBackTrackMessage:null===(U=null==Q?void 0:Q.backTrackExtra)||void 0===U?void 0:U[1]})),null===(H=null==N?void 0:N.buttons)||void 0===H?void 0:H.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(m,{QRBoptions:null==h?void 0:h.QRBoptions,button:t,originalVariableList:N,updateSelectedQRBTemplateBtn:G},`${e}`)})),"CHATBOT"===P&&q&&o(s,{discountCode:null===(D=null==Q?void 0:Q.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(S=null==Q?void 0:Q.discountCodeExtra)||void 0===S?void 0:S[1],variableList:T})]}))};export{v as default};

package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js

@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};
+`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:d,type:p,showVariableModal:m,variableList:b}=s;var c;const{originalVariableList:v,disableEditVariable:h}=l();return"BODY"===d.type?e("div",{children:null===(c=null==v?void 0:v.body)||void 0===c?void 0:c.map(((i,l)=>h||!i.isEditableVariable?a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l):e(n,{index:l,variable:i,showVariableModal:m,variableList:b},`${l}-${i.index}`)))}):e(i,{})};export{s as default};
+import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{let{descriptionComponent:s,type:p,showVariableModal:b,variableList:c}=d;var m,v;const{originalVariableList:y,disableEditVariable:h}=o();return"BODY"===s.type?e("div",{children:null===(m=null==y?void 0:y.body)||void 0===m?void 0:m.map(((i,o)=>h||!i.isEditableVariable?a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),o):e(n,{index:o,variable:i,showVariableModal:b,variableList:c,componentType:s.type},`${o}-${i.index}`)))}):"HEADER"===s.type?e("div",{children:null===(v=null==y?void 0:y.header)||void 0===v?void 0:v.map(((i,o)=>i.isEditableVariable?e(n,{index:o,variable:i,showVariableModal:b,variableList:c,componentType:s.type},`${o}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),o)))}):e(i,{})};export{d as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js

@@ -1,9 +1,9 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as a,useRef as o,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import{TitleRegular as h,BodySecondary as m,TitleSmall as b}from"../../TypographyStyle.js";import{CheckBox as g}from"../../checkBox/CheckBox.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import f from"./VariableConnector.js";const v=l.div`
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as a,useRef as o,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import"../../switch/Switch.js";import{TitleRegular as h,BodySecondary as m,TitleSmall as b}from"../../TypographyStyle.js";import{CheckBox as u}from"../../checkBox/CheckBox.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./VariableConnector.js";const v=l.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,x=l=>{let{onFocus:x,showVariableModal:j,variableList:V,discountCode:w,setDiscountCode:O}=l;const{originalVariableList:k,disableEditVariable:C}=u(),[T,B]=a(!1),[E,L]=a(!1),[A,I]=a(!1),[M,S]=a(""),[D,F]=a(!1),N=o(),z=o();return r((()=>{O&&O(w+M)}),[M]),r((()=>{k.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(B(!0),w&&F&&F(!0))}))}),[k]),e(v,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==k?void 0:k.map(((t,a)=>!t.isEditableVariable||C?e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a):i("div",Object.assign({style:{marginTop:16}},{children:i(f,{index:a,variable:t,onFocus:()=>null==x?void 0:x(a),showVariableModal:j,variableList:V,setShowDiscountCheckBox:B})}),a))),(T||w)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(g,{isChecked:D,onValueChange:()=>{D&&O&&O(""),F(!D)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),D&&e("div",Object.assign({ref:N,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:w,onFocus:()=>{L(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(N.current&&N.current.focus(),L(!0)):(L(!1),I(!1))},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(y,Object.assign({ref:z,id:"addVar",onClick:e=>{e.stopPropagation(),I(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),A&&i(n,{zIndex:2e3,data:null!=V?V:[],showVariable:A,setShowVariable:I,variableValue:M,setVariableValue:S,placeholder:"Add a variable",customTrigger:e=>{S(e.actualValue),L(!1)}})]})},y=l.button`
+`,j=l=>{let{onFocus:j,showVariableModal:y,variableList:V,discountCode:w,setDiscountCode:O}=l;const{originalVariableList:k,disableEditVariable:C}=g(),[T,B]=a(!1),[E,L]=a(!1),[A,I]=a(!1),[S,M]=a(""),[D,F]=a(!1),N=o(),z=o();return r((()=>{O&&O(w+S)}),[S]),r((()=>{k.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(B(!0),w&&F&&F(!0))}))}),[k]),e(v,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==k?void 0:k.map(((t,a)=>!t.isEditableVariable||C?e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a):i("div",Object.assign({style:{marginTop:16}},{children:i(f,{index:a,variable:t,onFocus:()=>null==j?void 0:j(a),showVariableModal:y,variableList:V,setShowDiscountCheckBox:B})}),a))),(T||w)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(u,{isChecked:D,onValueChange:()=>{D&&O&&O(""),F(!D)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),D&&e("div",Object.assign({ref:N,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:w,onFocus:()=>{L(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(N.current&&N.current.focus(),L(!0)):(L(!1),I(!1))},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(x,Object.assign({ref:z,id:"addVar",onClick:e=>{e.stopPropagation(),I(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),A&&i(n,{zIndex:2e3,data:null!=V?V:[],showVariable:A,setShowVariable:I,variableValue:S,setVariableValue:M,placeholder:"Add a variable",customTrigger:e=>{M(e.actualValue),L(!1)}})]})},x=l.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/
 		display: flex;
 		align-items: center;
 	}
-`;export{y as AddVariableStyled,v as Container,x as default};
+`;export{x as AddVariableStyled,v as Container,j as default};

package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -226,3 +226,13 @@ export declare enum BUTTON_TYPE {
     URL = "URL",
     PHONE_NUMBER = "PHONE_NUMBER"
 }
+export type Extras = {
+    discountCodeExtra?: [
+        discountCode: string,
+        setDiscountCode: (discountCode: string) => void
+    ];
+    backTrackExtra?: [
+        backTrackMessage: string,
+        setBackTrackMessage: (backTrackMessage: string) => void
+    ];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.388-beta.1",
+	"version": "0.0.388-beta.10",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",