@bikdotai/bik-component-library 0.0.262 → 0.0.264-beta.1

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

@@ -18,5 +18,6 @@ export interface TemplateContextMapperProps {
     onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables, display_content?: string): string | void;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     zIndex?: number;
+    showVariableModal?: boolean;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, }: TemplateContextMapperProps) => JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, }: TemplateContextMapperProps) => 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"),r=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),s=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),o=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:g,onTemplateSelect:S,globalPlaceholders:j,showOnlyContent:T,whatsappSpecificPickerMeta:v,zIndex:E}=d;var x,C;t.useEffect((()=>{f(h)}),[h]);const[M,P]=t.useState(m===r.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[b,f]=t.useState(h),[L,q]=t.useState(!1),[w,y]=t.useState(c),[A,N]=t.useState(null!=g?g:[]),[_,H]=t.useState(!1);const I=t.useMemo((()=>o.convertPlaceholdersToBikDropdown(j)),[j]);return e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{template:w,setTemplate:y,device:M,setDevice:P,display_content:b,setDisplayContent:f,originalVariableList:A,setOriginalVariableList:N,isError:L,setIsError:q,channel:m,globalNormalizedPlaceholders:I,templateSelectionTriggered:_,setTemplateSelectionTriggered:H}},{children:T?e.jsx(n.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:E,centralContainerStyles:{width:m===r.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==w?void 0:w.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(x=null==w?void 0:w.category)&&void 0!==x?x:"")} • ${null!==(C=null==w?void 0:w.templateCategory)&&void 0!==C?C:""}`:""},{children:[e.jsx(n.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:v}),S?e.jsx(s.default,{onSelect:function(){const e=null==S?void 0:S(w,A,null!=b?b:"");e?q(!!e):H(!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"),r=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),o=require("./modalElements/Footer.js"),s=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:S,globalPlaceholders:j,showOnlyContent:M,whatsappSpecificPickerMeta:T,zIndex:v,showVariableModal:E}=d;var b,x;t.useEffect((()=>{w(h)}),[h]);const[C,P]=t.useState(m===r.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[f,w]=t.useState(h),[L,q]=t.useState(!1),[y,A]=t.useState(c),[N,V]=t.useState(null!=g?g:[]),[_,H]=t.useState(!1);const I=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(j)),[j]);return e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{template:y,setTemplate:A,device:C,setDevice:P,display_content:f,setDisplayContent:w,originalVariableList:N,setOriginalVariableList:V,isError:L,setIsError:q,channel:m,globalNormalizedPlaceholders:I,templateSelectionTriggered:_,setTemplateSelectionTriggered:H}},{children:M?e.jsx(s.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:v,centralContainerStyles:{width:m===r.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==y?void 0:y.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(b=null==y?void 0:y.category)&&void 0!==b?b:"")} • ${null!==(x=null==y?void 0:y.templateCategory)&&void 0!==x?x:""}`:""},{children:[e.jsx(s.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:T,showVariableModal:E}),S?e.jsx(o.default,{onSelect:function(){const e=null==S?void 0:S(y,N,null!=f?f:"");e?q(!!e):H(!0)}}):e.jsx(e.Fragment,{})]}))}))};

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

@@ -4,6 +4,7 @@ export interface BodyProps {
     showVariableMapping: boolean;
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    showVariableModal?: boolean;
 }
 declare const Body: (props: BodyProps) => JSX.Element;
 export default Body;

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

@@ -1,4 +1,4 @@
-"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"),r=require("../utils/getVariableNameEmail.js"),a=require("../utils/highlightFor.js"),s=require("./DesktopPreview.js"),d=require("./EditWhatsAppTemplateV2.js"),u=require("./MobilePreview.js"),p=require("./VariableConnectorsPanel.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=c(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"),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"),p=require("./VariableConnectorsPanel.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=c(l);const m=h.default.div`
 	display: flex;
 	//	height: 100%;
 `,f=h.default.div`
@@ -15,4 +15,4 @@
 	flex: 1;
 	height: 475px;
 	overflow-y: auto;
-`;exports.default=l=>{const{showVariableMapping:c,showOnlyContent:h,whatsappSpecificPickerMeta:g}=l,v=t.useRef(),j=t.useRef(),{device:E,display_content:w,channel:b,template:y,setTemplate:C}=i.useTemplateModalContext();const P=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(x,Object.assign({showOnlyContent:h,showVariableMapping:c},{children:"mobile"===E?e.jsx(u.default,{ref:j,display_content:null!=w?w:"",channel:b,template:y}):b!==n.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:v,channel:b,display_content:null!=w?w:""}):e.jsx(e.Fragment,{})})),c&&e.jsx(f,Object.assign({channel:b},{children:b!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(p.default,{onFocus:b===n.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),d=r.getVariableNameForEmailByIndex(e+1),u=b===n.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),p=P(u),c=null==u?void 0:u.offsetLeft;"desktop"===E?p&&v.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),a.highlightFor(d,o.COLORS.background.warning.light,2,b,E)):p&&j.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),a.highlightFor(d,o.COLORS.background.warning.light,2,b,E))}:void 0}):e.jsx(d.default,{whatsappSpecificPickerMeta:g,template:y,onTemplateChange:e=>{null==C||C(e)}})}))]})};
+`;exports.default=l=>{const{showVariableMapping:c,showOnlyContent:h,whatsappSpecificPickerMeta:g,showVariableModal:v}=l,j=t.useRef(),w=t.useRef(),{device:b,display_content:E,channel:y,template:C,setTemplate:P}=i.useTemplateModalContext();const T=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(x,Object.assign({showOnlyContent:h,showVariableMapping:c},{children:"mobile"===b?e.jsx(u.default,{ref:w,display_content:null!=E?E:"",channel:y,template:C}):y!==n.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:j,channel:y,display_content:null!=E?E:""}):e.jsx(e.Fragment,{})})),c&&e.jsx(f,Object.assign({channel:y},{children:y!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(p.default,{onFocus:y===n.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===b?"template_html_mobile":"template_html_desktop"),d=a.getVariableNameForEmailByIndex(e+1),u=y===n.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),p=T(u),c=null==u?void 0:u.offsetLeft;"desktop"===b?p&&j.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),r.highlightFor(d,o.COLORS.background.warning.light,2,y,b)):p&&w.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),r.highlightFor(d,o.COLORS.background.warning.light,2,y,b))}:void 0,showVariableModal:v}):e.jsx(d.default,{whatsappSpecificPickerMeta:g,template:C,onTemplateChange:e=>{null==P||P(e)},showVariableModal:v})}))]})};

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

@@ -6,6 +6,7 @@ export interface EditWhatsAppTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppTemplate;
     onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
+    showVariableModal?: boolean;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, }: EditWhatsAppTemplateV2Props) => JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, }: EditWhatsAppTemplateV2Props) => 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"),l=require("./VariableConnectorsPanel.js"),s=require("./VariableConnectorWhatsApp.js"),a=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c}=r;var m,v,b,g,h,f,j,x,T,O,y,C;const{originalVariableList:E}=t.useTemplateModalContext(),{descriptionComponents:V,urlBtns:w,qrbBtns:B,imageComponent:I,bodyVariables:q,headerVariables:R}=n.getAllDataFromTemplateComponent(p);function A(e,t){var n,o,i,l;const s=Object.assign({},p),a=null==s?void 0:s.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==a&&a>-1){const d=null===(n=null==s?void 0:s.components[a].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!==(l=null===(i=null===(o=s.components)||void 0===o?void 0:o[a])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];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({},s.components[a]),{buttons:r}),u=Object.assign(Object.assign({},s.mapping),{buttons:n?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});s.mapping=u;const c=[...s.components];c[a]=p,s.components=c}}null==u||u(s)}function L(e,t,n){var o;const i=Object.assign({},p),l=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==l&&l>-1){const t=null===(o=null==i?void 0:i.components[l].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 s=Object.assign(Object.assign({},i.components[l]),{buttons:t}),a=[...i.components];a[l]=s,i.components=a}null==u||u(i)}return e.jsxs(l.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!I&&e.jsx(o.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:I,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]}}),l=[...o.components];l[i]=n,o=Object.assign(Object.assign({},o),{components:l})}null==u||u(o)},template:p})}),(q.length>0||R.length>0)&&e.jsx(a.default,{containerStyle:{paddingTop:I?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==V?void 0:V.map(((t,n)=>e.jsx(s.default,{originalVariableList:E,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body},n))),(null===(v=null===(m=w[0])||void 0===m?void 0:m.component)||void 0===v?void 0:v.buttons)&&(null===(h=null===(g=null===(b=w[0])||void 0===b?void 0:b.component)||void 0===g?void 0:g.buttons)||void 0===h?void 0:h.length)>0&&e.jsx(a.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(f=null==E?void 0:E.buttons)||void 0===f?void 0:f.map(((t,n)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:E,updateSelectedURLTemplateBtn:A},`${n}`)})),(null===(x=null===(j=B[0])||void 0===j?void 0:j.component)||void 0===x?void 0:x.buttons)&&(null===(y=null===(O=null===(T=B[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)||void 0===y?void 0:y.length)>0&&e.jsx(a.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===(C=null==E?void 0:E.buttons)||void 0===C?void 0:C.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:E,updateSelectedQRBTemplateBtn:L},`${n}`)}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),o=require("../utils/getDataFromTemplateComponent.js"),n=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),l=require("./VariableConnectorsPanel.js"),a=require("./VariableConnectorWhatsApp.js"),s=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c,showVariableModal:m}=r;var b,v,g,h,f,j,x,T,O,y,C,E;const{originalVariableList:V}=t.useTemplateModalContext(),{descriptionComponents:w,urlBtns:B,qrbBtns:I,imageComponent:M,bodyVariables:q,headerVariables:R}=o.getAllDataFromTemplateComponent(p);function A(e,t){var o,n,i,l;const a=Object.assign({},p),s=null==a?void 0:a.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==s&&s>-1){const d=null===(o=null==a?void 0:a.components[s].buttons)||void 0===o?void 0:o.findIndex((e=>"URL"===e.type));if(void 0!==d&&d>-1){const o="custom"===t&&"string"==typeof e,r=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[d]=Object.assign(Object.assign({},r[d]),{url:"https://d.bik.ai/{{1}}",example:[o?e:"string"!=typeof e?e.defaultValue:""]});const p=Object.assign(Object.assign({},a.components[s]),{buttons:r}),u=Object.assign(Object.assign({},a.mapping),{buttons:o?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});a.mapping=u;const c=[...a.components];c[s]=p,a.components=c}}null==u||u(a)}function L(e,t,o){var n;const i=Object.assign({},p),l=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==l&&l>-1){const t=null===(n=null==i?void 0:i.components[l].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 a=Object.assign(Object.assign({},i.components[l]),{buttons:t}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return e.jsxs(l.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!M&&e.jsx(n.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:M,updateTemplateImageUrl:function(e,t){var o;let n=Object.assign({},p);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]}}),l=[...n.components];l[i]=o,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:p})}),(q.length>0||R.length>0)&&e.jsx(s.default,{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==w?void 0:w.map(((t,o)=>e.jsx(a.default,{originalVariableList:V,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body,showVariableModal:m},o))),(null===(v=null===(b=B[0])||void 0===b?void 0:b.component)||void 0===v?void 0:v.buttons)&&(null===(f=null===(h=null===(g=B[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)||void 0===f?void 0:f.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(j=null==V?void 0:V.buttons)||void 0===j?void 0:j.map(((t,o)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:V,updateSelectedURLTemplateBtn:A},`${o}`)})),(null===(T=null===(x=I[0])||void 0===x?void 0:x.component)||void 0===T?void 0:T.buttons)&&(null===(C=null===(y=null===(O=I[0])||void 0===O?void 0:O.component)||void 0===y?void 0:y.buttons)||void 0===C?void 0:C.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===(E=null==V?void 0:V.buttons)||void 0===E?void 0:E.map(((t,o)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:V,updateSelectedQRBTemplateBtn:L},`${o}`)}))]}))};

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

@@ -7,6 +7,7 @@ export interface TemplateSelectModalContentProps {
     hideHeader?: boolean;
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    showVariableModal?: boolean;
 }
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateSelectModalContentProps) => JSX.Element;
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, }: TemplateSelectModalContentProps) => JSX.Element;
 export default TemplateSelectModalContent;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../template-preview/models/Channels.js"),r=require("./Body.js"),s=require("./Header.js");exports.default=a=>{let{channel:i,showVariableMapping:n,showOnlyContent:l,whatsappSpecificPickerMeta:o}=a;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[i===t.CHANNEL_TYPE.EMAIL&&e.jsx(s.default,{showOnlyContent:l}),e.jsx(r.default,{whatsappSpecificPickerMeta:o,showVariableMapping:!!n,showOnlyContent:l})]})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../template-preview/models/Channels.js"),t=require("./Body.js"),r=require("./Header.js");exports.default=s=>{let{channel:i,showVariableMapping:l,showOnlyContent:n,whatsappSpecificPickerMeta:o,showVariableModal:d}=s;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[i===a.CHANNEL_TYPE.EMAIL&&e.jsx(r.default,{showOnlyContent:n}),e.jsx(t.default,{whatsappSpecificPickerMeta:o,showVariableMapping:!!l,showOnlyContent:n,showVariableModal:d})]})}))};

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

@@ -10,6 +10,7 @@ export interface VariableConnectorProps {
     onFocus?: () => void;
     variable: CUSTOM_VARIABLE;
     index: number;
+    showVariableModal?: boolean;
 }
-declare const VariableConnector: ({ onFocus, variable, index, }: VariableConnectorProps) => JSX.Element;
+declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, }: VariableConnectorProps) => JSX.Element;
 export default VariableConnector;

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../dropdown/Dropdown.js"),i=require("../../input/Input.js"),o=require("../../template-preview/constants/regexPatterns.js"),a=require("../../template-preview/models/Channels.js"),u=require("../../TypographyStyle.js"),s=require("../../../utils/StringUtils.js"),r=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),c=require("../utils/getVariableNameEmail.js"),v=require("../utils/validateIsUrl.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const m=p(l).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("react"),a=require("styled-components"),n=require("../../add-variableV2/__stories__/AddVariableV2.stories.js"),i=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../dropdown/Dropdown.js"),s=require("../../input/Input.js"),u=require("../../template-preview/constants/regexPatterns.js"),r=require("../../template-preview/models/Channels.js"),d=require("../../TypographyStyle.js"),c=require("../../../utils/StringUtils.js"),v=require("../../../constants/Theme.js"),p=require("../context/templateModalContext.js"),m=require("../utils/getVariableNameEmail.js"),b=require("../utils/validateIsUrl.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const x=g(a).default.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===a.CHANNEL_TYPE.EMAIL?r.COLORS.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===r.CHANNEL_TYPE.EMAIL?v.COLORS.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,b={value:"custom_link",label:"Custom URL"},g={value:"custom_text",label:"Custom text"};exports.Container=m,exports.default=l=>{let{onFocus:p,variable:E,index:_}=l;var x;const[j,A]=t.useState(!1),[P,N]=t.useState(""),[h,T]=t.useState([]),[f,y]=t.useState(),{device:L,channel:C,isError:O,originalVariableList:k,template:H,templateSelectionTriggered:S,setTemplate:Y,setDisplayContent:q,setOriginalVariableList:M,globalNormalizedPlaceholders:I}=d.useTemplateModalContext();function V(e,t){var l,n;const i="custom_link"===t?"link":"custom_text"===t?"string":t;if(C!==a.CHANNEL_TYPE.WHATSAPP){const n=c.getVariableNameForEmailByIndex(_+1),o=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),u=C===a.CHANNEL_TYPE.EMAIL?null===(l=null==o?void 0:o.contentWindow)||void 0===l?void 0:l.document.getElementById(n):document.getElementById(n);u&&(u.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const s=k.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t));null==M||M(s)}if(C===a.CHANNEL_TYPE.WHATSAPP){const t=null===(n=k.body)||void 0===n?void 0:n.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:i,updatedValue:e}):t));null==M||M((e=>Object.assign(Object.assign({},e),{body:t,buttons:k.buttons})))}}function W(e,t){var l;const n=Object.assign({},H),i=null===(l=null==n?void 0:n.components)||void 0===l?void 0:l.map((l=>{var n,i,o,a,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(i=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])){const l=[...null!==(u=null===(a=null===(o=s.example)||void 0===o?void 0:o.body_text)||void 0===a?void 0:a[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:n})}return l}));n.components=i,null==Y||Y(n)}return t.useEffect((()=>{j&&(null==p||p())}),[j]),t.useEffect((()=>{!function(){var e,t,l,n,i;const o="mobile"===L?"template_html_mobile":"template_html_desktop",u=document.getElementById(o),s=(null!==(n=null===(l=null===(t=null===(e=null==u?void 0:u.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==n?n:"")+(null===(i=null==u?void 0:u.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);C===a.CHANNEL_TYPE.EMAIL&&(null==q||q(s))}()}),[S]),t.useEffect((()=>{var e;const t=[];let l=[];if(C===a.CHANNEL_TYPE.MESSAGE){const e=null!=I?I:[];T([{label:"",options:[g,b]},...e]),l=[{label:"",options:[g,b]},...e]}else{"link"===(null==E?void 0:E.type)?(t.push({label:"",options:[b,g]}),y(b)):(t.push({label:"",options:[b,g]}),y(g));const e=null!=I?I:[];T([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:s.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}if((C===a.CHANNEL_TYPE.WHATSAPP||C===a.CHANNEL_TYPE.EMAIL||C===a.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(o.placeHolderNamePattern.test(E.updatedValue)&&C===a.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&C!==a.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){let n={label:"",value:""};const i=l===a.CHANNEL_TYPE.WHATSAPP?e.replace("[[","").replace("]]",""):e.replace("{{","").replace("}}","");return t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))})),n}(E.updatedValue,l,C);e.value&&y(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(y(b),N(E.updatedValue.split("https://")[1])):(y(g),N(E.updatedValue))}),[]),e.jsxs(m,Object.assign({channel:C,focused:j,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(u.BodySecondary,Object.assign({style:{color:O&&!f?r.COLORS.content.negative:r.COLORS.content.primary}},{children:[null===(x=E.variableName)||void 0===x?void 0:x.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(n.Dropdown,{options:h,isSearchable:!1,onSelect:function(e,t){var l,n,i;const o=e;N(""),y(o),C===a.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(V(null!==(l=o.value)&&void 0!==l?l:"","string"),null==W||W(null!==(n=E.index)&&void 0!==n?n:0,`[[${o.value}]]`)):(null==W||W(null!==(i=E.index)&&void 0!==i?i:0,E.variableName),V("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?V(o.value,"url"===o.bikPlaceholderType?"link":"string"):(N(""),V("",o.value))},defaultOptions:f?[Object.assign(Object.assign({},f),{selected:!0})]:[]})})),("custom_text"===(null==f?void 0:f.value)||"custom_link"===(null==f?void 0:f.value))&&e.jsx(i.Input,{labelText:"custom_text"===(null==f?void 0:f.value)?"Custom text value":"custom_link"===(null==f?void 0:f.value)?"Custom URL value":"",id:`variable-value-${null==f?void 0:f.value}-${_}`,value:P,errorMessage:O?P?"custom_link"!==f.value||v.validateIsUrl(P)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==f?void 0:f.value)?void 0:30,prefixText:"custom_link"===(null==f?void 0:f.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===f.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;N(t);const n="custom_link"===(null==f?void 0:f.value)?`https://${t}`:t;V(n,e),C===a.CHANNEL_TYPE.WHATSAPP&&(null==W||W(null!==(l=E.index)&&void 0!==l?l:0,n))}(f.value,e)})]}))};
+`,_={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"};exports.Container=x,exports.default=a=>{let{onFocus:g,variable:h,index:j,showVariableModal:A}=a;var N;const[y,P]=l.useState(!1),[T,C]=l.useState(""),[f,L]=l.useState([]),[O,V]=l.useState(),[S,k]=l.useState(!1),H=[];H.push(n.customVariables),H.push(n.storeVariables),H.push(n.customerVariables),H.push(n.cartVariables),H.push(n.orderVariables);const{device:q,channel:M,isError:w,originalVariableList:I,template:Y,templateSelectionTriggered:W,setTemplate:B,setDisplayContent:R,setOriginalVariableList:U,globalNormalizedPlaceholders:$}=p.useTemplateModalContext();function D(e,t){var l,a,n;const i=e;C(""),V(i),M===r.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(z(null!==(l=i.value)&&void 0!==l?l:"","string"),null==F||F(null!==(a=h.index)&&void 0!==a?a:0,`[[${i.value}]]`)):(null==F||F(null!==(n=h.index)&&void 0!==n?n:0,h.variableName),z("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?z(i.value,"url"===i.bikPlaceholderType?"link":"string"):(C(""),z("",i.value))}function z(e,t){var l,a;const n="custom_link"===t?"link":"custom_text"===t?"string":t;if(M!==r.CHANNEL_TYPE.WHATSAPP){const a=m.getVariableNameForEmailByIndex(j+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===q?"template_html_mobile":"template_html_desktop"),o=M===r.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=I.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==U||U(s)}if(M===r.CHANNEL_TYPE.WHATSAPP){const t=null===(a=I.body)||void 0===a?void 0:a.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==U||U((e=>Object.assign(Object.assign({},e),{body:t,buttons:I.buttons})))}}function F(e,t){var l;const a=Object.assign({},Y),n=null===(l=null==a?void 0:a.components)||void 0===l?void 0:l.map((l=>{var a,n,i,o,s;const u=Object.assign({},l);if("BODY"===l.type&&(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const l=[...null!==(s=null===(o=null===(i=u.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},u.example),{body_text:[l]});return Object.assign(Object.assign({},u),{example:a})}return l}));a.components=n,null==B||B(a)}return l.useEffect((()=>{y&&(null==g||g())}),[y]),l.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===q?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);M===r.CHANNEL_TYPE.EMAIL&&(null==R||R(s))}()}),[W]),l.useEffect((()=>{var e;const t=[];let l=[];if(M===r.CHANNEL_TYPE.MESSAGE){const e=null!=$?$:[];L([{label:"",options:[E,_]},...e]),l=[{label:"",options:[E,_]},...e]}else{"link"===(null==h?void 0:h.type)?(t.push({label:"",options:[_,E]}),V(_)):(t.push({label:"",options:[_,E]}),V(E));const e=null!=$?$:[];L([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:c.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}if((M===r.CHANNEL_TYPE.WHATSAPP||M===r.CHANNEL_TYPE.EMAIL||M===r.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(u.placeHolderNamePattern.test(h.updatedValue)&&M===r.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&M!==r.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){let a={label:"",value:""};const n=l===r.CHANNEL_TYPE.WHATSAPP?e.replace("[[","").replace("]]",""):e.replace("{{","").replace("}}","");return t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))})),a}(h.updatedValue,l,M);e.value&&V(e)}else(null===(e=h.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(V(_),C(h.updatedValue.split("https://")[1])):(V(E),C(h.updatedValue))}),[]),e.jsxs(x,Object.assign({channel:M,focused:y,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(d.BodySecondary,Object.assign({style:{color:w&&!O?v.COLORS.content.negative:v.COLORS.content.primary}},{children:[null===(N=h.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:A?e.jsx(s.Input,{state:"none",value:O?O.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>e.jsx(t.default,{onClick:()=>{k(!S)},width:24,height:24,color:v.COLORS.content.primary})}}):e.jsx(o.Dropdown,{options:f,isSearchable:!1,onSelect:D,defaultOptions:O?[Object.assign(Object.assign({},O),{selected:!0})]:[]})})),("custom_text"===(null==O?void 0:O.value)||"custom_link"===(null==O?void 0:O.value))&&e.jsx(s.Input,{labelText:"custom_text"===(null==O?void 0:O.value)?"Custom text value":"custom_link"===(null==O?void 0:O.value)?"Custom URL value":"",id:`variable-value-${null==O?void 0:O.value}-${j}`,value:T,errorMessage:w?T?"custom_link"!==O.value||b.validateIsUrl(T)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==O?void 0:O.value)?void 0:30,prefixText:"custom_link"===(null==O?void 0:O.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===O.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;C(t);const a="custom_link"===(null==O?void 0:O.value)?`https://${t}`:t;z(a,e),M===r.CHANNEL_TYPE.WHATSAPP&&(null==F||F(null!==(l=h.index)&&void 0!==l?l:0,a))}(O.value,e)}),S&&e.jsx(i.AddVariableV2SideModal,{data:H,showVariable:S,setShowVariable:k,placeholder:"Add a variable",customTrigger:e=>{console.log("variable: ",e),"{{custom.url}}"===e.actualValue?D({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?D({label:e.displayName,selected:!0,value:"custom_text"}):D({label:e.displayName,selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};

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

@@ -6,6 +6,7 @@ export interface VariableConnectorWhatsAppProps {
     descriptionComponent: ComponentType;
     variableMapping: string[] | undefined;
     type: ComponentType['type'];
+    showVariableModal?: boolean;
 }
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, }: VariableConnectorWhatsAppProps) => JSX.Element;
+declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, }: VariableConnectorWhatsAppProps) => JSX.Element;
 export default VariableConnectorWhatsApp;

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

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

@@ -2,6 +2,7 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface VariableConnectorsProps {
     onFocus?: (variableIndex: number) => void;
+    showVariableModal?: boolean;
 }
-declare const VariableConnectors: ({ onFocus }: VariableConnectorsProps) => JSX.Element;
+declare const VariableConnectors: ({ onFocus, showVariableModal, }: VariableConnectorsProps) => JSX.Element;
 export default VariableConnectors;

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../input/Input.js"),n=require("../../template-preview/models/Channels.js"),r=require("../../tooltips/Tooltip.js"),l=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),o=require("../context/templateModalContext.js"),c=require("./VariableConnector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=d(i).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../input/Input.js"),a=require("../../template-preview/models/Channels.js"),l=require("../../tooltips/Tooltip.js"),n=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),o=require("../context/templateModalContext.js"),d=require("./VariableConnector.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=c(i).default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`;exports.Container=u,exports.default=i=>{let{onFocus:d}=i;const{originalVariableList:p,channel:j}=o.useTemplateModalContext();return e.jsxs(u,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(l.TitleRegular,Object.assign({style:{color:a.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(r.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",{children:e.jsx(t.default,{width:20,height:20,color:a.COLORS.content.placeholder})})}))]})),e.jsx(l.BodySecondary,Object.assign({style:{color:a.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==p?void 0:p.map(((t,i)=>j!==n.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(c.default,{index:i,variable:t,onFocus:()=>null==d?void 0:d(i)})}),i):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(l.BodySecondary,Object.assign({style:{color:a.COLORS.content.primary}},{children:["Locked variable ",i+1]})),e.jsx(s.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),i)))]})};
+`;exports.Container=u,exports.default=i=>{let{onFocus:c,showVariableModal:p}=i;const{originalVariableList:h,channel:j}=o.useTemplateModalContext();return e.jsxs(u,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(n.TitleRegular,Object.assign({style:{color:r.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(l.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",{children:e.jsx(t.default,{width:20,height:20,color:r.COLORS.content.placeholder})})}))]})),e.jsx(n.BodySecondary,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==h?void 0:h.map(((t,i)=>j!==a.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(d.default,{index:i,variable:t,onFocus:()=>null==c?void 0:c(i),showVariableModal:p})}),i):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(n.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["Locked variable ",i+1]})),e.jsx(s.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),i)))]})};

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./components/template-preview/constants/regexPatterns.js"),r=require("./utils/StringUtils.js"),t=require("./constants/Theme.js"),o=require("./components/checkBox/CheckBox.js"),n=require("./components/list-item/ListItem.js"),i=require("./components/pagination/Pagination.js"),s=require("./components/radioButton/RadioButton.js"),p=require("./components/toaster/Toaster.js"),a=require("./components/tooltips/Tooltip.js"),u=require("./components/spinner/Spinner.js"),c=require("./components/stepper/Stepper.js"),l=require("./components/tag/Tag.js"),d=require("./components/icon-button/IconButton.js"),m=require("./components/template-preview/TemplatePreview.js"),T=require("./components/template-preview/WhatsApp/WhatsAppLikePreview.js"),x=require("./components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),P=require("./components/template-preview/helpers/SmsTemplateHelper.js"),A=require("./components/template-preview/helpers/WhatsAppFormatToHTML.js"),S=require("./components/template-preview/helpers/VariableEditorHelper.js"),y=require("./components/template-preview/models/TemplateMeta.js"),C=require("./components/template-context-mapper/TemplateContextMapper.js"),O=require("./components/template-context-mapper/utils/getDataFromTemplateComponent.js"),E=require("./components/template-context-mapper/utils/validateIsUrl.js"),j=require("./components/fab-menu/FABMenu.js"),b=require("./components/floating-action-button/FloatingActionButton.js"),B=require("./components/floating-action-button/FloatingActionButton.styles.js"),R=require("./components/image-compress/ImageCompress.js"),h=require("./components/TypographyStyle.js"),g=require("./components/button/Button.js"),_=require("./components/progress-bar/ProgressBarComponent.js"),I=require("./components/QueryBuilder/QueryBuilder.js"),q=require("./components/QueryBuilder/components/QueryBuilderNode/Base/BaseQueryBuilderNode.js"),f=require("./components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode.js"),D=require("./components/QueryBuilder/redux/queryBuilder.reducer.js"),k=require("./components/QueryBuilder/redux/queryBuilderCache.reducer.js"),L=require("./components/QueryBuilder/types/QueryBuilderOperator.type.js"),M=require("./components/modals/styledModal.js"),N=require("./components/dropdown/DropdownPopover/index.js"),w=require("./components/dropdown/Dropdown.js"),G=require("./components/dropdown/OpenedDropdown/components/OpennedDropdown.js"),U=require("./components/dropdown/MenuItem/MenuItem.js"),H=require("./components/analytics-card/AnalyticsCard.js"),F=require("./components/analytics-card/AnalyticsCard.styled.js"),v=require("./components/input/Input.js"),V=require("./components/analytics-chips-and-dropdowns/AnalyticsChip.js"),Y=require("./components/analytics-chips-and-dropdowns/AnalyticsDropdown.js"),W=require("./components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js"),Q=require("./components/analytics-chips-and-dropdowns/AnalyticsMetric.js"),K=require("./components/analytics-chips-and-dropdowns/AnalyticsTrend.js"),Z=require("./components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js"),z=require("./components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.js"),X=require("./components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js"),J=require("./components/analytics-chips-and-dropdowns/chart/Pie/PieChart.js"),$=require("./components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js"),ee=require("./components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js"),re=require("./components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js"),te=require("./components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js"),oe=require("./components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js"),ne=require("./components/avatar/Avatar.js"),ie=require("./components/avatar/AvatarHelper.js"),se=require("./components/alerts/Alert.js"),pe=require("./components/alerts/AlertHelper.js"),ae=require("./components/thumbnail/Thumbnail.js"),ue=require("./components/curtain/Curtain.js"),ce=require("./components/datePicker/DatePicker.js"),le=require("./components/switch/Switch.js"),de=require("./components/plans/SubscriptionPlan.js"),me=require("./components/plans/SubscriptionPlanSelector.js"),Te=require("./components/tabs/Tabs.js"),xe=require("./components/dynamic-tabs/DynamicTabs.js"),Pe=require("./components/shimmer/ShimmerComponent/BikShimmer.js"),Ae=require("./components/TablePagination/TablePagination.js"),Se=require("./components/TablePagination/TablePaginationCard.js"),ye=require("./components/states-modal/StateModalComponent.js"),Ce=require("./components/states-modal/DeleteConfirmationModal.js"),Oe=require("./components/states/StateComponent.js"),Ee=require("./components/WhatsAppTextEditor/WhatsAppTextEditor.js"),je=require("./components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js"),be=require("./helpers/BaseWhatsappContentLang.helper.js"),Be=require("./components/card-selection-modal/CardSelectionModal.js"),Re=require("./components/image-cropper/BikImageCropper.js"),he=require("./components/image-cropper/BikImagePipeline/BikImagePipeline.js"),ge=require("./components/buttonGroup/ButtonGroup.js"),_e=require("./components/accordion/Accordion.js"),Ie=require("./components/file-uploader/FileUploader.js"),qe=require("./components/colourInput/ColourInput.js"),fe=require("./components/bik-layout/BikHeader.js"),De=require("./components/bik-layout/BikLayout.js"),ke=require("./components/bik-layout/BikProfile.js"),Le=require("./components/bik-layout/SimpleSidebar.js"),Me=require("./components/bik-layout/BikSidebar.js"),Ne=require("./components/bik-layout/FeatureModal.js"),we=require("./components/bik-layout/SidebarSkeleton.js"),Ge=require("./components/searchBar/searchBar.js"),Ue=require("./components/custom-date-time/CustomDateTime.js"),He=require("./components/product-picker/ProductPickerModal.js"),Fe=require("./components/discount-modal/DiscountModal.js"),ve=require("./components/discount-modal/CouponExpiration/CouponExpiration.js"),Ve=require("./components/discount-modal/type.js"),Ye=require("./components/country-code-picker/CountryCodePicker.js"),We=require("./components/country-code-picker/CountryCodePicker.modal.js"),Qe=require("./components/shimmer-image/ShimmerImage.js"),Ke=require("./components/product-picker-v2/modal.js"),Ze=require("./components/carousel/carousel.js"),ze=require("./components/carousel-secondary/CarouselSecondary.js"),Xe=require("./components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js"),Je=require("./components/radioList/RadioList.js"),$e=require("./components/checkList/CheckList.js"),er=require("./components/postPicker/postPicker.js"),rr=require("./components/dropdown-button/DropdownButton.js"),tr=require("./components/side-modal/SideModal.js"),or=require("./components/keywords-input/KeywordsInput.js");exports.regexPatterns=e,exports.StringUtils=r.default,exports.BASE_COLORS=t.BASE_COLORS,exports.COLORS=t.COLORS,exports.DEFAULT_THEME=t.DEFAULT_THEME,exports.FONTS=t.FONTS,exports.CheckBox=o.CheckBox,exports.ListItem=n.ListItem,exports.Pagination=i.Pagination,exports.RadioButton=s.RadioButton,exports.Toaster=p.Toaster,exports.Tooltip=a.Tooltip,exports.Spinner=u.Spinner,exports.Stepper=c.Stepper,exports.Tag=l.Tag,exports.IconButton=d.IconButton,exports.TemplatePreview=m.TemplatePreview,exports.WhatsappLikePreview=T.WhatsappLikePreview,exports.WhatsappLikePreviewV2=x.WhatsappLikePreviewV2,exports.renderVariableUIForPreview=P.renderVariableUIForPreview,exports.WhatsAppFormatToHTML=A.WhatsAppFormatToHTML,exports.VariableEditorHelper=S.VariableEditorHelper,Object.defineProperty(exports,"ACTIONS_TYPES",{enumerable:!0,get:function(){return y.ACTIONS_TYPES}}),exports.CUSTOM_URL_NAME=y.CUSTOM_URL_NAME,Object.defineProperty(exports,"HEADER_TYPES",{enumerable:!0,get:function(){return y.HEADER_TYPES}}),Object.defineProperty(exports,"TEMPLATE_EDITOR",{enumerable:!0,get:function(){return y.TEMPLATE_EDITOR}}),Object.defineProperty(exports,"TEMPLATE_STATUS",{enumerable:!0,get:function(){return y.TEMPLATE_STATUS}}),exports.TemplateContextMapper=C.TemplateContextMapper,exports.getAllDataFromTemplateComponent=O.getAllDataFromTemplateComponent,exports.validateIsUrl=E.validateIsUrl,exports.FABMenu=j.FABMenu,exports.FloatingActionButton=b.FloatingActionButton,Object.defineProperty(exports,"DROP_POSITION",{enumerable:!0,get:function(){return B.DROP_POSITION}}),exports.DropdownToggleContainer=B.DropdownToggleContainer,Object.defineProperty(exports,"FAB_POSITION",{enumerable:!0,get:function(){return B.FAB_POSITION}}),exports.FloatingActionButtonContainer=B.FloatingActionButtonContainer,exports.FloatingActionButtonOuterContainer=B.FloatingActionButtonOuterContainer,Object.defineProperty(exports,"MENU_ALIGNMENT",{enumerable:!0,get:function(){return B.MENU_ALIGNMENT}}),exports.StyledDropdown=B.StyledDropdown,exports.TooltipStyled=B.TooltipStyled,exports.ImageService=R.ImageService,exports.BodyCaption=h.BodyCaption,exports.BodyLarge=h.BodyLarge,exports.BodyPrimary=h.BodyPrimary,exports.BodyPrimaryLink=h.BodyPrimaryLink,exports.BodyRegular=h.BodyRegular,exports.BodySecondary=h.BodySecondary,exports.BodySecondaryLink=h.BodySecondaryLink,exports.BodyTiny=h.BodyTiny,exports.ButtonLarge=h.ButtonLarge,exports.ButtonRegular=h.ButtonRegular,exports.Caption=h.Caption,exports.Display=h.Display,exports.SmallRegular=h.SmallRegular,exports.SubHeading=h.SubHeading,exports.TitleLarge=h.TitleLarge,exports.TitleMedium=h.TitleMedium,exports.TitleRegular=h.TitleRegular,exports.TitleSmall=h.TitleSmall,exports.Button=g.Button,exports.ProgressBarComponent=_.ProgressBarComponent,exports.ProgressCompletedBar=_.ProgressCompletedBar,exports.QueryBuilder=I.QueryBuilder,exports.BaseQueryBuilderNode=q.BaseQueryBuilderNode,exports.PropertyNode=f.PropertyNode,exports.PropertyNodeHeadless=f.PropertyNodeHeadless,exports.queryBuilderSlice=D.queryBuilderSlice,exports.queryBuilderCacheSlice=k.queryBuilderCacheSlice,Object.defineProperty(exports,"AD_STRING_OPERATORS",{enumerable:!0,get:function(){return L.AD_STRING_OPERATORS}}),Object.defineProperty(exports,"ANY_AD_OPERATORS",{enumerable:!0,get:function(){return L.ANY_AD_OPERATORS}}),Object.defineProperty(exports,"ANY_IG_OPERATORS",{enumerable:!0,get:function(){return L.ANY_IG_OPERATORS}}),Object.defineProperty(exports,"BOOLEAN_OPERATORS",{enumerable:!0,get:function(){return L.BOOLEAN_OPERATORS}}),Object.defineProperty(exports,"DATE_OPERATORS",{enumerable:!0,get:function(){return L.DATE_OPERATORS}}),Object.defineProperty(exports,"EVENT_VALUES",{enumerable:!0,get:function(){return L.EVENT_VALUES}}),Object.defineProperty(exports,"FREQUENCY_OPERATORS",{enumerable:!0,get:function(){return L.FREQUENCY_OPERATORS}}),Object.defineProperty(exports,"ICE_BREAKER_OPERATORS",{enumerable:!0,get:function(){return L.ICE_BREAKER_OPERATORS}}),Object.defineProperty(exports,"IG_STRING_OPERATORS",{enumerable:!0,get:function(){return L.IG_STRING_OPERATORS}}),Object.defineProperty(exports,"INTEGER_OPERATORS",{enumerable:!0,get:function(){return L.INTEGER_OPERATORS}}),Object.defineProperty(exports,"REACTION_OPERATORS",{enumerable:!0,get:function(){return L.REACTION_OPERATORS}}),Object.defineProperty(exports,"SPECIFIC_IG_OPERATORS",{enumerable:!0,get:function(){return L.SPECIFIC_IG_OPERATORS}}),Object.defineProperty(exports,"STRING_OPERATORS",{enumerable:!0,get:function(){return L.STRING_OPERATORS}}),Object.defineProperty(exports,"STRING_RESTRICTED_OPERATORS",{enumerable:!0,get:function(){return L.STRING_RESTRICTED_OPERATORS}}),exports.StyledModal=M.StyledModal,exports.DropdownPopover=N.DropdownPopover,exports.Dropdown=w.Dropdown,exports.OpenedDropdown=G.OpenedDropdown,exports.MenuItemDropdown=U.MenuItemDropdown,exports.AnalyticsCard=H.AnalyticsCard,exports.AnalyticsContainer=F.AnalyticsContainer,exports.CardDataContainer=F.CardDataContainer,exports.Input=v.Input,exports.AnalyticsChip=V.AnalyticsChip,exports.AnalyticsDropdown=Y.AnalyticsDropdown,exports.EachItem=Y.EachItem,exports.formatDate=Y.formatDate,exports.AnalyticsMultiChip=W.AnalyticsMultiChip,exports.AnalyticsMetric=Q.AnalyticsMetric,exports.AnalyticsTrend=K.AnalyticsTrend,exports.LineChart=Z.LineChart,exports.LinearChipGroupedChart=z.LinearChipGroupedChart,exports.Card=X.Card,exports.PieChartAnalytics=X.PieChartAnalytics,exports.PieChart=J.PieChart,exports.HorizontalGraph=$.HorizontalGraph,exports.StackedBarChart=ee.StackedBarChart,exports.VerticalGraph=re.VerticalGraph,Object.defineProperty(exports,"HEAT",{enumerable:!0,get:function(){return te.HEAT}}),exports.HEAT_COLORS=te.HEAT_COLORS,Object.defineProperty(exports,"HEAT_GRADING_TYPE",{enumerable:!0,get:function(){return te.HEAT_GRADING_TYPE}}),exports.HeatMap=te.HeatMap,exports.VerticalBarAndLinearGraph=oe.VerticalBarAndLinearGraph,exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=ne.AVATAR_SIZE_VS_ICON_SIZE_MAP,exports.Avatar=ne.Avatar,exports.BACKGROUND_VS_TEXT_COLOR_MAP=ne.BACKGROUND_VS_TEXT_COLOR_MAP,Object.defineProperty(exports,"AVATAR_BACKGROUND",{enumerable:!0,get:function(){return ie.AVATAR_BACKGROUND}}),exports.AVATAR_SIZE_MAP=ie.AVATAR_SIZE_MAP,Object.defineProperty(exports,"AVATAR_TYPES",{enumerable:!0,get:function(){return ie.AVATAR_TYPES}}),Object.defineProperty(exports,"SIZE",{enumerable:!0,get:function(){return ie.SIZE}}),exports.Alert=se.Alert,Object.defineProperty(exports,"ALERT_TYPES",{enumerable:!0,get:function(){return pe.ALERT_TYPES}}),exports.COLOR_CONFIG_MAP=pe.COLOR_CONFIG_MAP,Object.defineProperty(exports,"RATIO",{enumerable:!0,get:function(){return ae.RATIO}}),exports.Thumbnail=ae.Thumbnail,exports.Curtain=ue.Curtain,exports.DatePicker=ce.DatePicker,exports.Loader=le.Loader,exports.Switch=le.Switch,exports.SwitchContainer=le.SwitchContainer,exports.Thumb=le.Thumb,exports.SubscriptionPlan=de.SubscriptionPlan,exports.SubscriptionPlanSelector=me.SubscriptionPlanSelector,exports.TabItemComponent=Te.TabItemComponent,exports.Tabs=Te.Tabs,exports.DynamicTabs=xe.DynamicTabs,exports.BikShimmer=Pe.BikShimmer,exports.TablePagination=Ae.TablePagination,exports.TablePaginationCard=Se.TablePaginationCard,exports.TablePaginationCardStyled=Se.TablePaginationCardStyled,exports.StateModalComponent=ye.StateModalComponent,exports.DeleteConfirmationModal=Ce.DeleteConfirmationModal,Object.defineProperty(exports,"ButtonActions",{enumerable:!0,get:function(){return Oe.ButtonActions}}),Object.defineProperty(exports,"ButtonTypes",{enumerable:!0,get:function(){return Oe.ButtonTypes}}),exports.StateComponent=Oe.StateComponent,Object.defineProperty(exports,"StateInterface",{enumerable:!0,get:function(){return Oe.StateInterface}}),exports.WhatsAppTextEditor=Ee.WhatsAppTextEditor,Object.defineProperty(exports,"EditorActionTypes",{enumerable:!0,get:function(){return je.EditorActionTypes}}),exports.WhatsAppTextEditorHeader=je.WhatsAppTextEditorHeader,exports.BaseWhatsappContentLangHelper=be.BaseWhatsappContentLangHelper,exports.CardSelectionModal=Be.CardSelectionModal,exports.BikImageCropper=Re.BikImageCropper,exports.BikImagePipeline=he.BikImagePipeline,exports.ButtonGroup=ge.ButtonGroup,exports.BikAccordion=_e.BikAccordion,exports.FileUploader=Ie.FileUploader,exports.ColourInput=qe.ColourInput,exports.BikHeader=fe.BikHeader,exports.BikLayout=De.BikLayout,exports.BikProfile=ke.BikProfile,exports.SimpleSidebar=Le.SimpleSidebar,exports.BikSidebar=Me.BikSidebar,exports.FeatureModal=Ne.FeatureModal,exports.SidebarSkeleton=we.SidebarSkeleton,exports.SearchBar=Ge.SearchBar,exports.CustomDateTime=Ue.CustomDateTime,exports.PricePleaseProductPicker=He.PricePleaseProductPicker,exports.ProductPickerContent=He.ProductPickerContent,exports.DiscountModal=Fe.DiscountModal,Object.defineProperty(exports,"COUPON_EXPIRATION",{enumerable:!0,get:function(){return ve.COUPON_EXPIRATION}}),exports.CouponExpiration=ve.CouponExpiration,Object.defineProperty(exports,"DISCOUNT_TARGET_SELECTION",{enumerable:!0,get:function(){return Ve.DISCOUNT_TARGET_SELECTION}}),Object.defineProperty(exports,"DISCOUNT_TARGET_TYPES",{enumerable:!0,get:function(){return Ve.DISCOUNT_TARGET_TYPES}}),Object.defineProperty(exports,"DISCOUNT_TYPES",{enumerable:!0,get:function(){return Ve.DISCOUNT_TYPES}}),Object.defineProperty(exports,"DISCOUNT_VALUE_TYPES",{enumerable:!0,get:function(){return Ve.DISCOUNT_VALUE_TYPES}}),Object.defineProperty(exports,"MIN_PURCHASE_REQUIREMENT",{enumerable:!0,get:function(){return Ve.MIN_PURCHASE_REQUIREMENT}}),exports.CountryCodePicker=Ye.CountryCodePicker,exports.CountriesData=We.CountriesData,exports.ShimmerImage=Qe.ShimmerImage,exports.ProductPickerModal=Ke.ProductPickerModal,exports.Carousel=Ze.Carousel,exports.CarouselSecondary=ze.CarouselSecondary,exports.AccessTokenTroubleshootDialog=Xe.AccessTokenTroubleshootDialog,exports.RadioList=Je.RadioList,exports.CheckList=$e.CheckList,Object.defineProperty(exports,"DateKeys",{enumerable:!0,get:function(){return er.DateKeys}}),Object.defineProperty(exports,"MEDIA_TYPES",{enumerable:!0,get:function(){return er.MEDIA_TYPES}}),exports.PostPicker=er.PostPicker,exports.dateOptions=er.dateOptions,exports.DropdownButton=rr.DropdownButton,exports.SideModal=tr.SideModal,exports.KeywordsInput=or.KeywordsInput;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./components/template-preview/constants/regexPatterns.js"),r=require("./utils/StringUtils.js"),t=require("./constants/Theme.js"),o=require("./components/checkBox/CheckBox.js"),n=require("./components/list-item/ListItem.js"),i=require("./components/pagination/Pagination.js"),p=require("./components/radioButton/RadioButton.js"),s=require("./components/toaster/Toaster.js"),a=require("./components/tooltips/Tooltip.js"),u=require("./components/spinner/Spinner.js"),c=require("./components/stepper/Stepper.js"),l=require("./components/tag/Tag.js"),d=require("./components/icon-button/IconButton.js"),m=require("./components/template-preview/TemplatePreview.js"),T=require("./components/template-preview/WhatsApp/WhatsAppLikePreview.js"),x=require("./components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),P=require("./components/template-preview/helpers/SmsTemplateHelper.js"),S=require("./components/template-preview/helpers/WhatsAppFormatToHTML.js"),A=require("./components/template-preview/helpers/VariableEditorHelper.js"),y=require("./components/template-preview/models/TemplateMeta.js"),C=require("./components/template-context-mapper/TemplateContextMapper.js"),O=require("./components/template-context-mapper/utils/getDataFromTemplateComponent.js"),E=require("./components/template-context-mapper/utils/validateIsUrl.js"),j=require("./components/fab-menu/FABMenu.js"),b=require("./components/floating-action-button/FloatingActionButton.js"),h=require("./components/floating-action-button/FloatingActionButton.styles.js"),B=require("./components/image-compress/ImageCompress.js"),R=require("./components/TypographyStyle.js"),g=require("./components/button/Button.js"),_=require("./components/progress-bar/ProgressBarComponent.js"),I=require("./components/QueryBuilder/QueryBuilder.js"),q=require("./components/QueryBuilder/components/QueryBuilderNode/Base/BaseQueryBuilderNode.js"),f=require("./components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode.js"),D=require("./components/QueryBuilder/redux/queryBuilder.reducer.js"),k=require("./components/QueryBuilder/redux/queryBuilderCache.reducer.js"),L=require("./components/QueryBuilder/types/QueryBuilderOperator.type.js"),M=require("./components/modals/styledModal.js"),N=require("./components/dropdown/DropdownPopover/index.js"),w=require("./components/dropdown/Dropdown.js"),G=require("./components/dropdown/OpenedDropdown/components/OpennedDropdown.js"),U=require("./components/dropdown/MenuItem/MenuItem.js"),H=require("./components/analytics-card/AnalyticsCard.js"),F=require("./components/analytics-card/AnalyticsCard.styled.js"),v=require("./components/input/Input.js"),V=require("./components/analytics-chips-and-dropdowns/AnalyticsChip.js"),W=require("./components/analytics-chips-and-dropdowns/AnalyticsDropdown.js"),Y=require("./components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js"),Q=require("./components/analytics-chips-and-dropdowns/AnalyticsMetric.js"),K=require("./components/analytics-chips-and-dropdowns/AnalyticsTrend.js"),Z=require("./components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js"),z=require("./components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.js"),X=require("./components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js"),J=require("./components/analytics-chips-and-dropdowns/chart/Pie/PieChart.js"),$=require("./components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js"),ee=require("./components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js"),re=require("./components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js"),te=require("./components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js"),oe=require("./components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js"),ne=require("./components/avatar/Avatar.js"),ie=require("./components/avatar/AvatarHelper.js"),pe=require("./components/alerts/Alert.js"),se=require("./components/alerts/AlertHelper.js"),ae=require("./components/thumbnail/Thumbnail.js"),ue=require("./components/curtain/Curtain.js"),ce=require("./components/datePicker/DatePicker.js"),le=require("./components/switch/Switch.js"),de=require("./components/plans/SubscriptionPlan.js"),me=require("./components/plans/SubscriptionPlanSelector.js"),Te=require("./components/tabs/Tabs.js"),xe=require("./components/dynamic-tabs/DynamicTabs.js"),Pe=require("./components/shimmer/ShimmerComponent/BikShimmer.js"),Se=require("./components/TablePagination/TablePagination.js"),Ae=require("./components/TablePagination/TablePaginationCard.js"),ye=require("./components/states-modal/StateModalComponent.js"),Ce=require("./components/states-modal/DeleteConfirmationModal.js"),Oe=require("./components/states/StateComponent.js"),Ee=require("./components/states/ShopifyScopeWrapper.js"),je=require("./components/WhatsAppTextEditor/WhatsAppTextEditor.js"),be=require("./components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js"),he=require("./helpers/BaseWhatsappContentLang.helper.js"),Be=require("./components/card-selection-modal/CardSelectionModal.js"),Re=require("./components/image-cropper/BikImageCropper.js"),ge=require("./components/image-cropper/BikImagePipeline/BikImagePipeline.js"),_e=require("./components/buttonGroup/ButtonGroup.js"),Ie=require("./components/accordion/Accordion.js"),qe=require("./components/file-uploader/FileUploader.js"),fe=require("./components/colourInput/ColourInput.js"),De=require("./components/bik-layout/BikHeader.js"),ke=require("./components/bik-layout/BikLayout.js"),Le=require("./components/bik-layout/BikProfile.js"),Me=require("./components/bik-layout/SimpleSidebar.js"),Ne=require("./components/bik-layout/BikSidebar.js"),we=require("./components/bik-layout/FeatureModal.js"),Ge=require("./components/bik-layout/SidebarSkeleton.js"),Ue=require("./components/searchBar/searchBar.js"),He=require("./components/custom-date-time/CustomDateTime.js"),Fe=require("./components/product-picker/ProductPickerModal.js"),ve=require("./components/discount-modal/DiscountModal.js"),Ve=require("./components/discount-modal/CouponExpiration/CouponExpiration.js"),We=require("./components/discount-modal/type.js"),Ye=require("./components/country-code-picker/CountryCodePicker.js"),Qe=require("./components/country-code-picker/CountryCodePicker.modal.js"),Ke=require("./components/shimmer-image/ShimmerImage.js"),Ze=require("./components/product-picker-v2/modal.js"),ze=require("./components/carousel/carousel.js"),Xe=require("./components/carousel-secondary/CarouselSecondary.js"),Je=require("./components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js"),$e=require("./components/radioList/RadioList.js"),er=require("./components/checkList/CheckList.js"),rr=require("./components/postPicker/postPicker.js"),tr=require("./components/dropdown-button/DropdownButton.js"),or=require("./components/side-modal/SideModal.js"),nr=require("./components/keywords-input/KeywordsInput.js");exports.regexPatterns=e,exports.StringUtils=r.default,exports.BASE_COLORS=t.BASE_COLORS,exports.COLORS=t.COLORS,exports.DEFAULT_THEME=t.DEFAULT_THEME,exports.FONTS=t.FONTS,exports.CheckBox=o.CheckBox,exports.ListItem=n.ListItem,exports.Pagination=i.Pagination,exports.RadioButton=p.RadioButton,exports.Toaster=s.Toaster,exports.Tooltip=a.Tooltip,exports.Spinner=u.Spinner,exports.Stepper=c.Stepper,exports.Tag=l.Tag,exports.IconButton=d.IconButton,exports.TemplatePreview=m.TemplatePreview,exports.WhatsappLikePreview=T.WhatsappLikePreview,exports.WhatsappLikePreviewV2=x.WhatsappLikePreviewV2,exports.renderVariableUIForPreview=P.renderVariableUIForPreview,exports.WhatsAppFormatToHTML=S.WhatsAppFormatToHTML,exports.VariableEditorHelper=A.VariableEditorHelper,Object.defineProperty(exports,"ACTIONS_TYPES",{enumerable:!0,get:function(){return y.ACTIONS_TYPES}}),exports.CUSTOM_URL_NAME=y.CUSTOM_URL_NAME,Object.defineProperty(exports,"HEADER_TYPES",{enumerable:!0,get:function(){return y.HEADER_TYPES}}),Object.defineProperty(exports,"TEMPLATE_EDITOR",{enumerable:!0,get:function(){return y.TEMPLATE_EDITOR}}),Object.defineProperty(exports,"TEMPLATE_STATUS",{enumerable:!0,get:function(){return y.TEMPLATE_STATUS}}),exports.TemplateContextMapper=C.TemplateContextMapper,exports.getAllDataFromTemplateComponent=O.getAllDataFromTemplateComponent,exports.validateIsUrl=E.validateIsUrl,exports.FABMenu=j.FABMenu,exports.FloatingActionButton=b.FloatingActionButton,Object.defineProperty(exports,"DROP_POSITION",{enumerable:!0,get:function(){return h.DROP_POSITION}}),exports.DropdownToggleContainer=h.DropdownToggleContainer,Object.defineProperty(exports,"FAB_POSITION",{enumerable:!0,get:function(){return h.FAB_POSITION}}),exports.FloatingActionButtonContainer=h.FloatingActionButtonContainer,exports.FloatingActionButtonOuterContainer=h.FloatingActionButtonOuterContainer,Object.defineProperty(exports,"MENU_ALIGNMENT",{enumerable:!0,get:function(){return h.MENU_ALIGNMENT}}),exports.StyledDropdown=h.StyledDropdown,exports.TooltipStyled=h.TooltipStyled,exports.ImageService=B.ImageService,exports.BodyCaption=R.BodyCaption,exports.BodyLarge=R.BodyLarge,exports.BodyPrimary=R.BodyPrimary,exports.BodyPrimaryLink=R.BodyPrimaryLink,exports.BodyRegular=R.BodyRegular,exports.BodySecondary=R.BodySecondary,exports.BodySecondaryLink=R.BodySecondaryLink,exports.BodyTiny=R.BodyTiny,exports.ButtonLarge=R.ButtonLarge,exports.ButtonRegular=R.ButtonRegular,exports.Caption=R.Caption,exports.Display=R.Display,exports.SmallRegular=R.SmallRegular,exports.SubHeading=R.SubHeading,exports.TitleLarge=R.TitleLarge,exports.TitleMedium=R.TitleMedium,exports.TitleRegular=R.TitleRegular,exports.TitleSmall=R.TitleSmall,exports.Button=g.Button,exports.ProgressBarComponent=_.ProgressBarComponent,exports.ProgressCompletedBar=_.ProgressCompletedBar,exports.QueryBuilder=I.QueryBuilder,exports.BaseQueryBuilderNode=q.BaseQueryBuilderNode,exports.PropertyNode=f.PropertyNode,exports.PropertyNodeHeadless=f.PropertyNodeHeadless,exports.queryBuilderSlice=D.queryBuilderSlice,exports.queryBuilderCacheSlice=k.queryBuilderCacheSlice,Object.defineProperty(exports,"AD_STRING_OPERATORS",{enumerable:!0,get:function(){return L.AD_STRING_OPERATORS}}),Object.defineProperty(exports,"ANY_AD_OPERATORS",{enumerable:!0,get:function(){return L.ANY_AD_OPERATORS}}),Object.defineProperty(exports,"ANY_IG_OPERATORS",{enumerable:!0,get:function(){return L.ANY_IG_OPERATORS}}),Object.defineProperty(exports,"BOOLEAN_OPERATORS",{enumerable:!0,get:function(){return L.BOOLEAN_OPERATORS}}),Object.defineProperty(exports,"DATE_OPERATORS",{enumerable:!0,get:function(){return L.DATE_OPERATORS}}),Object.defineProperty(exports,"EVENT_VALUES",{enumerable:!0,get:function(){return L.EVENT_VALUES}}),Object.defineProperty(exports,"FREQUENCY_OPERATORS",{enumerable:!0,get:function(){return L.FREQUENCY_OPERATORS}}),Object.defineProperty(exports,"ICE_BREAKER_OPERATORS",{enumerable:!0,get:function(){return L.ICE_BREAKER_OPERATORS}}),Object.defineProperty(exports,"IG_STRING_OPERATORS",{enumerable:!0,get:function(){return L.IG_STRING_OPERATORS}}),Object.defineProperty(exports,"INTEGER_OPERATORS",{enumerable:!0,get:function(){return L.INTEGER_OPERATORS}}),Object.defineProperty(exports,"REACTION_OPERATORS",{enumerable:!0,get:function(){return L.REACTION_OPERATORS}}),Object.defineProperty(exports,"SPECIFIC_IG_OPERATORS",{enumerable:!0,get:function(){return L.SPECIFIC_IG_OPERATORS}}),Object.defineProperty(exports,"STRING_OPERATORS",{enumerable:!0,get:function(){return L.STRING_OPERATORS}}),Object.defineProperty(exports,"STRING_RESTRICTED_OPERATORS",{enumerable:!0,get:function(){return L.STRING_RESTRICTED_OPERATORS}}),exports.StyledModal=M.StyledModal,exports.DropdownPopover=N.DropdownPopover,exports.Dropdown=w.Dropdown,exports.OpenedDropdown=G.OpenedDropdown,exports.MenuItemDropdown=U.MenuItemDropdown,exports.AnalyticsCard=H.AnalyticsCard,exports.AnalyticsContainer=F.AnalyticsContainer,exports.CardDataContainer=F.CardDataContainer,exports.Input=v.Input,exports.AnalyticsChip=V.AnalyticsChip,exports.AnalyticsDropdown=W.AnalyticsDropdown,exports.EachItem=W.EachItem,exports.formatDate=W.formatDate,exports.AnalyticsMultiChip=Y.AnalyticsMultiChip,exports.AnalyticsMetric=Q.AnalyticsMetric,exports.AnalyticsTrend=K.AnalyticsTrend,exports.LineChart=Z.LineChart,exports.LinearChipGroupedChart=z.LinearChipGroupedChart,exports.Card=X.Card,exports.PieChartAnalytics=X.PieChartAnalytics,exports.PieChart=J.PieChart,exports.HorizontalGraph=$.HorizontalGraph,exports.StackedBarChart=ee.StackedBarChart,exports.VerticalGraph=re.VerticalGraph,Object.defineProperty(exports,"HEAT",{enumerable:!0,get:function(){return te.HEAT}}),exports.HEAT_COLORS=te.HEAT_COLORS,Object.defineProperty(exports,"HEAT_GRADING_TYPE",{enumerable:!0,get:function(){return te.HEAT_GRADING_TYPE}}),exports.HeatMap=te.HeatMap,exports.VerticalBarAndLinearGraph=oe.VerticalBarAndLinearGraph,exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=ne.AVATAR_SIZE_VS_ICON_SIZE_MAP,exports.Avatar=ne.Avatar,exports.BACKGROUND_VS_TEXT_COLOR_MAP=ne.BACKGROUND_VS_TEXT_COLOR_MAP,Object.defineProperty(exports,"AVATAR_BACKGROUND",{enumerable:!0,get:function(){return ie.AVATAR_BACKGROUND}}),exports.AVATAR_SIZE_MAP=ie.AVATAR_SIZE_MAP,Object.defineProperty(exports,"AVATAR_TYPES",{enumerable:!0,get:function(){return ie.AVATAR_TYPES}}),Object.defineProperty(exports,"SIZE",{enumerable:!0,get:function(){return ie.SIZE}}),exports.Alert=pe.Alert,Object.defineProperty(exports,"ALERT_TYPES",{enumerable:!0,get:function(){return se.ALERT_TYPES}}),exports.COLOR_CONFIG_MAP=se.COLOR_CONFIG_MAP,Object.defineProperty(exports,"RATIO",{enumerable:!0,get:function(){return ae.RATIO}}),exports.Thumbnail=ae.Thumbnail,exports.Curtain=ue.Curtain,exports.DatePicker=ce.DatePicker,exports.Loader=le.Loader,exports.Switch=le.Switch,exports.SwitchContainer=le.SwitchContainer,exports.Thumb=le.Thumb,exports.SubscriptionPlan=de.SubscriptionPlan,exports.SubscriptionPlanSelector=me.SubscriptionPlanSelector,exports.TabItemComponent=Te.TabItemComponent,exports.Tabs=Te.Tabs,exports.DynamicTabs=xe.DynamicTabs,exports.BikShimmer=Pe.BikShimmer,exports.TablePagination=Se.TablePagination,exports.TablePaginationCard=Ae.TablePaginationCard,exports.TablePaginationCardStyled=Ae.TablePaginationCardStyled,exports.StateModalComponent=ye.StateModalComponent,exports.DeleteConfirmationModal=Ce.DeleteConfirmationModal,Object.defineProperty(exports,"ButtonActions",{enumerable:!0,get:function(){return Oe.ButtonActions}}),Object.defineProperty(exports,"ButtonTypes",{enumerable:!0,get:function(){return Oe.ButtonTypes}}),exports.StateComponent=Oe.StateComponent,Object.defineProperty(exports,"StateInterface",{enumerable:!0,get:function(){return Oe.StateInterface}}),exports.ShopifyScopeWrapper=Ee.ShopifyScopeWrapper,exports.WhatsAppTextEditor=je.WhatsAppTextEditor,Object.defineProperty(exports,"EditorActionTypes",{enumerable:!0,get:function(){return be.EditorActionTypes}}),exports.WhatsAppTextEditorHeader=be.WhatsAppTextEditorHeader,exports.BaseWhatsappContentLangHelper=he.BaseWhatsappContentLangHelper,exports.CardSelectionModal=Be.CardSelectionModal,exports.BikImageCropper=Re.BikImageCropper,exports.BikImagePipeline=ge.BikImagePipeline,exports.ButtonGroup=_e.ButtonGroup,exports.BikAccordion=Ie.BikAccordion,exports.FileUploader=qe.FileUploader,exports.ColourInput=fe.ColourInput,exports.BikHeader=De.BikHeader,exports.BikLayout=ke.BikLayout,exports.BikProfile=Le.BikProfile,exports.SimpleSidebar=Me.SimpleSidebar,exports.BikSidebar=Ne.BikSidebar,exports.FeatureModal=we.FeatureModal,exports.SidebarSkeleton=Ge.SidebarSkeleton,exports.SearchBar=Ue.SearchBar,exports.CustomDateTime=He.CustomDateTime,exports.PricePleaseProductPicker=Fe.PricePleaseProductPicker,exports.ProductPickerContent=Fe.ProductPickerContent,exports.DiscountModal=ve.DiscountModal,Object.defineProperty(exports,"COUPON_EXPIRATION",{enumerable:!0,get:function(){return Ve.COUPON_EXPIRATION}}),exports.CouponExpiration=Ve.CouponExpiration,Object.defineProperty(exports,"DISCOUNT_TARGET_SELECTION",{enumerable:!0,get:function(){return We.DISCOUNT_TARGET_SELECTION}}),Object.defineProperty(exports,"DISCOUNT_TARGET_TYPES",{enumerable:!0,get:function(){return We.DISCOUNT_TARGET_TYPES}}),Object.defineProperty(exports,"DISCOUNT_TYPES",{enumerable:!0,get:function(){return We.DISCOUNT_TYPES}}),Object.defineProperty(exports,"DISCOUNT_VALUE_TYPES",{enumerable:!0,get:function(){return We.DISCOUNT_VALUE_TYPES}}),Object.defineProperty(exports,"MIN_PURCHASE_REQUIREMENT",{enumerable:!0,get:function(){return We.MIN_PURCHASE_REQUIREMENT}}),exports.CountryCodePicker=Ye.CountryCodePicker,exports.CountriesData=Qe.CountriesData,exports.ShimmerImage=Ke.ShimmerImage,exports.ProductPickerModal=Ze.ProductPickerModal,exports.Carousel=ze.Carousel,exports.CarouselSecondary=Xe.CarouselSecondary,exports.AccessTokenTroubleshootDialog=Je.AccessTokenTroubleshootDialog,exports.RadioList=$e.RadioList,exports.CheckList=er.CheckList,Object.defineProperty(exports,"DateKeys",{enumerable:!0,get:function(){return rr.DateKeys}}),Object.defineProperty(exports,"MEDIA_TYPES",{enumerable:!0,get:function(){return rr.MEDIA_TYPES}}),exports.PostPicker=rr.PostPicker,exports.dateOptions=rr.dateOptions,exports.DropdownButton=tr.DropdownButton,exports.SideModal=or.SideModal,exports.KeywordsInput=nr.KeywordsInput;

package/dist/esm/components/add-variableV2/AddVariableV2.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export interface VariableListInterfaceV2 {
+    payloadVariables: PayloadVariables;
+}
+export interface PayloadVariables {
+    displayName: string;
+    description: string;
+    orderId: number;
+    variables?: any;
+}
+export interface Variable {
+    description?: string;
+    displayName: string;
+    actualValue: string;
+    variableType: string;
+    isAvailable: boolean;
+    isSubHeader?: boolean;
+    variables?: {
+        [key: string]: Variable;
+    };
+}
+export interface AddVariableProps {
+    data: VariableListInterfaceV2[];
+    showVariable: any;
+    setShowVariable: any;
+    variableValue?: any;
+    setVariableValue?: any;
+    placeholder: string;
+    customTrigger?: any;
+    isSearchRequired?: boolean;
+    leftPosition?: number;
+    pickerSize?: string;
+}
+type Props = AddVariableProps;
+export interface VariableBoxProps {
+    item: Variable;
+    raw?: string;
+    parentKey?: string;
+}
+declare const AddVariableV2: React.FC<Props>;
+export default AddVariableV2;

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

@@ -0,0 +1 @@
+import{jsx as a,jsxs as i,Fragment as e}from"react/jsx-runtime";import{useState as s,useEffect as l}from"react";import{AddVariableStyled as r}from"./AddVariableV2.styled.js";import c from"./backIcon.js";import d from"./closeIcon.js";import n from"./plusIcon.js";import{RightFilled as t}from"./rightFilled.js";import o from"./undoIcon.js";import{Button as b}from"../button/Button.js";import{IconButton as m}from"../icon-button/IconButton.js";import{SearchBar as p}from"../searchBar/searchBar.js";import{TitleSmall as v,BodyCaption as g}from"../TypographyStyle.js";const y=y=>{const{data:h}=y,[j,u]=s({}),[V,O]=s(),[N,_]=s(""),[f,k]=s("");l((()=>{const a={};h.forEach((i=>{a[i.payloadVariables.displayName]=[]})),O(a)}),[h]);const S=(a,i)=>{const e=h.find((a=>a.payloadVariables.displayName===i));if(e){let s=e.payloadVariables;a.forEach(((a,i)=>{s=s.variables[a]})),u((a=>Object.assign(Object.assign({},a),{[i]:s})))}},T=i=>a(b,{disabled:!i.item.isAvailable,size:"chip",LeadingIcon:i.item.isSubHeader?void 0:n,TrailingIcon:()=>i.item.isSubHeader?a("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a(t,{})})):a(e,{}),buttonText:i.item.displayName}),I=(i,e)=>a("div",Object.assign({onClick:i.isSubHeader?()=>{const a=[...V[N],e];S(a,N),O((i=>Object.assign(Object.assign({},i),{[N]:a})))}:()=>{y.customTrigger?(y.customTrigger(i),y.setShowVariable(!1)):y.setVariableValue(i.actualValue)}},{children:a(T,{item:i})}));return a(r,Object.assign({id:"varList",onClick:a=>{a.stopPropagation()},pickerSize:y.pickerSize||"large"},{children:y.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({className:"close__icon",style:{cursor:"pointer"},onClick:()=>{y.setShowVariable(!1)}},{children:a(d,{})}))]})),a("div",Object.assign({className:"search__bar"},{children:a(p,{width:"100%",isEnabled:!0,onChange:a=>{k(a)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),N&&V[N].length>0&&i("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[i("div",Object.assign({className:"left__nav"},{children:[a(m,{Icon:c,style:{color:"#919191",display:"flex"},onClick:()=>{const a=V[N].slice(0,-1);S(a,N),O((i=>Object.assign(Object.assign({},i),{[N]:a}))),a.length||_("")}}),i("div",Object.assign({className:"block"},{children:[a(v,{children:j[N].displayName}),j[N].description&&a(g,{children:j[N].description})]}))]})),i("div",Object.assign({className:"right__nav"},{children:[a(m,{Icon:o,style:{display:"flex"},onClick:()=>{S([],N),O((a=>Object.assign(Object.assign({},a),{[N]:[]}))),_("")}}),a("div",{children:"First page"})]}))]}))]})),a("div",Object.assign({className:"wrapper"},{children:a("div",Object.assign({className:"list__map"},{children:i("div",Object.assign({className:"items"},{children:[!N&&y.data.map(((s,l)=>{var r,c,d,n;let t=[];return f&&(t=Object.keys(s.payloadVariables.variables).filter((a=>{var i;return null===(i=s.payloadVariables.variables[a].displayName)||void 0===i?void 0:i.includes(f)}))),i(e,{children:[f?t.length>0?i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null===(r=null==s?void 0:s.payloadVariables)||void 0===r?void 0:r.displayName})),a(g,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(c=null==s?void 0:s.payloadVariables)||void 0===c?void 0:c.description}))]})):a(e,{}):i("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null===(d=null==s?void 0:s.payloadVariables)||void 0===d?void 0:d.displayName})),a(g,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(n=null==s?void 0:s.payloadVariables)||void 0===n?void 0:n.description}))]})),Object.keys(s.payloadVariables.variables).map((i=>{var l;return f?(null===(l=s.payloadVariables.variables[i].displayName)||void 0===l?void 0:l.includes(f))?a("div",Object.assign({onClick:s.payloadVariables.variables[i].isSubHeader?()=>{const a=[...V[s.payloadVariables.displayName],i];S(a,s.payloadVariables.displayName),O((i=>Object.assign(Object.assign({},i),{[s.payloadVariables.displayName]:a}))),_(s.payloadVariables.displayName)}:()=>{y.customTrigger?(y.customTrigger(s.payloadVariables.variables[i]),y.setShowVariable(!1)):y.setVariableValue(s.payloadVariables.variables[i].actualValue)}},{children:a(T,{item:s.payloadVariables.variables[i]})})):a(e,{}):a("div",Object.assign({onClick:s.payloadVariables.variables[i].isSubHeader?()=>{const a=[...V[s.payloadVariables.displayName],i];S(a,s.payloadVariables.displayName),O((i=>Object.assign(Object.assign({},i),{[s.payloadVariables.displayName]:a}))),_(s.payloadVariables.displayName)}:()=>{y.customTrigger?(y.customTrigger(s.payloadVariables.variables[i]),y.setShowVariable(!1)):y.setVariableValue(s.payloadVariables.variables[i].actualValue)}},{children:a(T,{item:s.payloadVariables.variables[i]})}))}))]})})),N&&a("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(j[N].variables).map(((i,s)=>{var l;return f?(null===(l=j[N].variables[i].displayName)||void 0===l?void 0:l.includes(f))?I(j[N].variables[i],i):a(e,{}):I(j[N].variables[i],i)}))}))}))]}))}))})),a("div",{className:"bottom__padding"})]}))}))};export{y as default};

package/dist/esm/components/add-variableV2/AddVariableV2.styled.d.ts

@@ -0,0 +1,6 @@
+export declare const AddVariableStyled: import("styled-components").StyledComponent<"div", any, {
+    pickerSize: string;
+}, never>;
+export declare const VariableBoxStyled: import("styled-components").StyledComponent<"div", any, {
+    isAvailable?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,161 @@
+import e from"styled-components";const o=e.div`
+	position: fixed;
+	z-index: 10;
+	*::-webkit-scrollbar {
+		display: none;
+	}
+	* {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+	.popup {
+		background: white;
+		width: 566px;
+		height: 100vh;
+		border-radius: 8px;
+		overflow-y: scroll;
+		.sticky__bar {
+			z-index: 10;
+			position: sticky;
+			top: 0;
+			background: white;
+
+			.header__bar {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 24px 24px 16px 24px;
+				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
+				.add__variable {
+					font-family: 'Inter';
+					font-style: normal;
+					font-weight: 600;
+					font-size: 20px;
+					line-height: 24px;
+
+					color: #212121;
+				}
+			}
+
+			.search__bar {
+				padding: 24px 24px 8px 24px;
+			}
+			.nav__bar {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
+				background: var(--surface-color-surface-hovered, #f0f0f0);
+				padding: 10px 24px;
+
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+
+				line-height: 20px;
+
+				.left__nav {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					color: var(--content-color-content-primary, #212121);
+					cursor: pointer;
+				}
+				.right__nav {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					font-weight: 400;
+					color: var(--content-color-content-secondary, #616161);
+					cursor: pointer;
+				}
+			}
+		}
+		hr {
+			margin: 0;
+			border: 0.2px solid #e0e0e0;
+		}
+		.wrapper {
+			padding: 4px 24px 16px 24px;
+			.search__bar {
+				padding-bottom: 16px;
+				input {
+					width: 100%;
+					padding: 6px 8px;
+					border: 1px solid #e0e0e0;
+					border-radius: 4px;
+					background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F5bc8962e-af88-4692-80f1-631ac4a5c6c7?alt=media&token=7931b07d-cb55-43aa-be75-9ddac4b8ddad');
+					background-repeat: no-repeat;
+					background-position: 95% 50%;
+					background-size: 20px 20px;
+				}
+			}
+			.heading__font {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 600;
+				font-size: 16px;
+				line-height: 24px;
+				padding: 12px 0 0 0;
+				color: #212121;
+			}
+			.sub_heading__font {
+				font-family: 'Inter';
+				font-style: normal;
+				font-size: 12px;
+				line-height: 24px;
+				color: #212121;
+			}
+
+			.items {
+				display: flex;
+				flex-wrap: wrap;
+				grid-gap: 8px;
+				.block {
+					display: block;
+					min-width: 100%;
+					flex-wrap: nowrap;
+					width: 430px;
+				}
+			}
+		}
+		position: relative;
+
+		.bottom__padding {
+			background: white;
+			min-height: 30px;
+			width: 100%;
+			position: sticky;
+			z-index: 10;
+			bottom: 0px;
+		}
+	}
+`;e.div`
+	.box {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: 6px 12px 6px 8px;
+		gap: 8px;
+		width: auto;
+		height: 32px;
+
+		background: ${e=>(null==e?void 0:e.isAvailable)?"#f0f0f0":"#fafafa"};
+
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		.icon {
+			color: ${e=>(null==e?void 0:e.isAvailable)?"#212121":"#bdbdbd"};
+			display: flex;
+			align-items: center;
+		}
+		.variable__name {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 14px;
+			line-height: 20px;
+			color: ${e=>(null==e?void 0:e.isAvailable)?"#212121":"#bdbdbd"};
+		}
+	}
+`;export{o as AddVariableStyled};

package/dist/esm/components/add-variableV2/AddVariableV2SideModal.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { VariableListInterfaceV2 } from "./AddVariableV2";
+export interface VariableV2SideModalProps {
+    data: VariableListInterfaceV2[];
+    showVariable: any;
+    setShowVariable: any;
+    variableValue?: any;
+    setVariableValue?: any;
+    placeholder: string;
+    customTrigger?: any;
+    isSearchRequired?: boolean;
+    leftPosition?: number;
+    pickerSize?: string;
+}
+export declare const AddVariableV2SideModal: React.FC<VariableV2SideModalProps>;

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

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import a from"react-dom";import e from"./AddVariableV2.js";import{SideModalStyle as o,SideModalContainer as t}from"../side-modal/SideModal.style.js";const i=i=>a.createPortal(r(o,{children:r(t,{children:r(e,{data:i.data,showVariable:i.showVariable,setShowVariable:i.setShowVariable,placeholder:"Add a variable",customTrigger:i.customTrigger})})}),document.body);export{i as AddVariableV2SideModal};