@bikdotai/bik-component-library 0.0.388-beta.5 → 0.0.388-beta.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

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