@bikdotai/bik-component-library 0.0.314-beta.26 → 0.0.314-beta.28

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

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

@@ -21,6 +21,8 @@ export declare const TemplateModalContext: React.Context<{
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    isChecked: boolean;
+    setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -38,4 +40,6 @@ export declare const useTemplateModalContext: () => {
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    isChecked: boolean;
+    setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1});exports.TemplateModalContext=r,exports.useTemplateModalContext=()=>e.useContext(r);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,isChecked:!1});exports.TemplateModalContext=r,exports.useTemplateModalContext=()=>e.useContext(r);

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"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),l=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var r=require("../../input/Input.js"),o=require("../../tooltips/Tooltip.js"),n=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),p=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=x(i);const b=g.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"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),r=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("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),p=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const g=b.default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,j=g.default.button`
+`,j=b.default.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@
 		display: flex;
 		align-items: center;
 	}
-`;exports.AddVariableStyled=j,exports.Container=b,exports.default=i=>{let{onFocus:x,showVariableModal:g,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V,isError:O}=h.useTemplateModalContext(),[C,w]=t.useState(!1),[q,S]=t.useState(!1),[k,T]=t.useState(!1),[L,B]=t.useState(!1),[E,A]=t.useState(""),M=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+E)}),[E]),t.useEffect((()=>{console.log("originalVariableList: ",m),m.forEach((e=>{console.log("variable.updatedValue: ",e.updatedValue),console.log("variable.value: ","checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")),"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(w(!0),v&&S(!0))})),console.log("showDiscountCheckBox: ",C)}),[m]),t.useEffect((()=>{console.log("showDiscountCheckBox22: ",C)}),[C]),e.jsxs(b,{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:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(o.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:n.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(p.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:g,variableList:f,setShowDiscountCheckBox:w})}),t):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:n.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(r.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t))),(C||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:q,onValueChange:()=>{S(!q)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),q&&e.jsxs("div",Object.assign({ref:M,style:{margin:10}},{children:[e.jsx(r.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{T(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(M.current&&M.current.focus(),T(!0)):(T(!1),B(!1))},errorMessage:O?v&&0!==v.trim().length?"":"Required field":""}),k&&e.jsx(j,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),B(!0)},style:{marginTop:-24}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(l.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),L&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:L,setShowVariable:B,variableValue:E,setVariableValue:A,placeholder:"Add a variable",customTrigger:e=>{A(e.actualValue),T(!1)}})]})};
+`;exports.AddVariableStyled=j,exports.Container=g,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V,isError:O,isChecked:C,setIsChecked:q}=h.useTemplateModalContext(),[w,S]=t.useState(!1),[k,T]=t.useState(!1),[L,E]=t.useState(!1),[B,A]=t.useState(""),I=t.useRef(),M=t.useRef();return t.useEffect((()=>{y&&y(v+B)}),[B]),t.useEffect((()=>{!C&&y&&y("")}),[C]),t.useEffect((()=>{console.log("originalVariableList: ",m),m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(S(!0),v&&q&&q(!0))}))}),[m]),e.jsxs(g,{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==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(p.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:f,setShowDiscountCheckBox:S})}),t):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))),(w||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:C,onValueChange:()=>{q&&q(!C)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),C&&e.jsxs("div",Object.assign({ref:I,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{T(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(I.current&&I.current.focus(),T(!0)):(T(!1),E(!1))},errorMessage:O?v&&0!==v.trim().length?"":"Required field":""}),k&&e.jsx(j,Object.assign({ref:M,id:"addVar",onClick:e=>{e.stopPropagation(),E(!0)},style:{marginTop:-24}},{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"}))]}))}))]})),L&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:L,setShowVariable:E,variableValue:B,setVariableValue:A,placeholder:"Add a variable",customTrigger:e=>{A(e.actualValue),T(!1)}})]})};

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

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

@@ -21,6 +21,8 @@ export declare const TemplateModalContext: React.Context<{
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    isChecked: boolean;
+    setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -38,4 +40,6 @@ export declare const useTemplateModalContext: () => {
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    isChecked: boolean;
+    setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
 };

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

@@ -1 +1 @@
-import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1}),o=()=>t(l);export{l as TemplateModalContext,o as useTemplateModalContext};
+import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1,isChecked:!1}),i=()=>t(l);export{l as TemplateModalContext,i as useTemplateModalContext};

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

@@ -1,9 +1,9 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import i from"../../../assets/icons/info.svg.js";import{useState as a,useRef as t,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 c}from"../../input/Input.js";import{Tooltip as d}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import{TitleRegular as h,BodySecondary as m,TitleSmall as u}from"../../TypographyStyle.js";import{CheckBox as g}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as b}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const x=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 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 g}from"../../TypographyStyle.js";import{CheckBox as b}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as u}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const y=l.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:k,setDiscountCode:O}=l;const{originalVariableList:C,channel:T,isError:B}=f(),[L,A]=a(!1),[E,I]=a(!1),[M,D]=a(!1),[S,F]=a(!1),[N,z]=a(""),U=t(),q=t();return r((()=>{O&&O(k+N)}),[N]),r((()=>{console.log("originalVariableList: ",C),C.forEach((e=>{console.log("variable.updatedValue: ",e.updatedValue),console.log("variable.value: ","checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")),"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(A(!0),k&&I(!0))})),console.log("showDiscountCheckBox: ",L)}),[C]),r((()=>{console.log("showDiscountCheckBox22: ",L)}),[L]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[o(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),o(d,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:o("div",Object.assign({style:{display:"flex"}},{children:o(i,{width:20,height:20,color:p.content.placeholder})}))}))]})),o(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==C?void 0:C.map(((i,a)=>T!==b.EMAIL||i.isEditableVariable?o("div",Object.assign({style:{marginTop:16}},{children:o(v,{index:a,variable:i,onFocus:()=>null==y?void 0:y(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:A})}),a):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),o(c,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),a))),(L||k)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[o(g,{isChecked:E,onValueChange:()=>{I(!E)}}),o(u,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),E&&e("div",Object.assign({ref:U,style:{margin:10}},{children:[o(c,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:k,onFocus:()=>{D(!0)},onBlur:e=>{var o;"addVar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?(U.current&&U.current.focus(),D(!0)):(D(!1),F(!1))},errorMessage:B?k&&0!==k.trim().length?"":"Required field":""}),M&&o(j,Object.assign({ref:q,id:"addVar",onClick:e=>{e.stopPropagation(),F(!0)},style:{marginTop:-24}},{children:e("div",Object.assign({className:"add"},{children:[o(s,{width:20,height:20,color:"white"}),o("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),S&&o(n,{zIndex:2e3,data:null!=w?w:[],showVariable:S,setShowVariable:F,variableValue:N,setVariableValue:z,placeholder:"Add a variable",customTrigger:e=>{z(e.actualValue),D(!1)}})]})},j=l.button`
+`,x=l=>{let{onFocus:x,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T,isError:L,isChecked:B,setIsChecked:I}=f(),[A,E]=a(!1),[M,S]=a(!1),[D,F]=a(!1),[N,z]=a(""),q=o(),P=o();return r((()=>{k&&k(O+N)}),[N]),r((()=>{!B&&k&&k("")}),[B]),r((()=>{console.log("originalVariableList: ",C),C.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(E(!0),O&&I&&I(!0))}))}),[C]),e(y,{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==C?void 0:C.map(((t,a)=>T!==u.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(v,{index:a,variable:t,onFocus:()=>null==x?void 0:x(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:E})}),a):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))),(A||O)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(b,{isChecked:B,onValueChange:()=>{I&&I(!B)}}),i(g,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),B&&e("div",Object.assign({ref:q,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{k&&k(e)},value:O,onFocus:()=>{S(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(q.current&&q.current.focus(),S(!0)):(S(!1),F(!1))},errorMessage:L?O&&0!==O.trim().length?"":"Required field":""}),M&&i(j,Object.assign({ref:P,id:"addVar",onClick:e=>{e.stopPropagation(),F(!0)},style:{marginTop:-24}},{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"}))]}))}))]})),D&&i(n,{zIndex:2e3,data:null!=w?w:[],showVariable:D,setShowVariable:F,variableValue:N,setVariableValue:z,placeholder:"Add a variable",customTrigger:e=>{z(e.actualValue),S(!1)}})]})},j=l.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@ import{jsxs as e,jsx as o}from"react/jsx-runtime";import i from"../../../assets/
 		display: flex;
 		align-items: center;
 	}
-`;export{j as AddVariableStyled,x as Container,y as default};
+`;export{j as AddVariableStyled,y as Container,x as default};

package/package.json

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