@bikdotai/bik-component-library 0.0.564-beta.picker.10 → 0.0.564-beta.picker.12

package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("../../assets/icons/info.svg.js"),r=require("../../helpers/BaseWhatsappContentLang.helper.js"),l=require("react"),o=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),u=require("./CustomEditor.styled.js"),s=require("./WhatsAppTextEditorHeader.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(l);const d="Character limit reached",v=new r.BaseWhatsappContentLangHelper,h={[s.EditorActionTypes.BOLD]:"*",[s.EditorActionTypes.ITALIC]:"_",[s.EditorActionTypes.STRIKETHROUGH]:"~"},p=a.default.forwardRef(((r,c)=>{var a,p,{onChange:f,onClickVariable:g,text:x,RightComponent:j,error:C,limit:m,onError:E,rows:T,actions:O}=r,y=e.__rest(r,["onChange","onClickVariable","text","RightComponent","error","limit","onError","rows","actions"]);const L=l.useRef(null);function S(e){const t=null==L?void 0:L.current;null!=t&&(t.selectionStart?(t.focus(),t.selectionEnd=e):t.focus())}function b(e){var t,n;let r=null!==(n=null===(t=L.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(L.current&&e){const t=L.current.selectionStart,n=L.current.selectionEnd,l=e;if(t===n)return R(l);{r=v.wrappWildcard(t,n,l,r);const e=v.getHTML(r);return L.current.value=r,{text:r,html:e}}}return{text:r,html:r}}function R(e){var t,n;let r=null!==(n=null===(t=L.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(L.current&&e){const t=L.current.selectionStart;if(t===L.current.selectionEnd)return H(e,t)}return{text:r,html:r}}function H(e,t){var n,r;let l=null!==(r=null===(n=L.current)||void 0===n?void 0:n.value)&&void 0!==r?r:"";l=l.slice(0,t)+e+l.slice(t);const o=v.getHTML(l);return L.current.value=l,{text:l,html:o}}return l.useImperativeHandle(c,(()=>({addTextOrWrap:b,addText:R,get(){var e,t;return null!==(t=null===(e=L.current)||void 0===e?void 0:e.value)&&void 0!==t?t:""},setCaretPosition:S}))),l.useEffect((()=>{if(null==L?void 0:L.current){L.current.value=x||"";const e=v.getHTML(x||"");null==f||f(x||"",e)}}),[x]),l.useEffect((()=>{var e,t;(null===(e=null==L?void 0:L.current)||void 0===e?void 0:e.value)&&m&&((null===(t=null==L?void 0:L.current)||void 0===t?void 0:t.value.length)>m?null==E||E(d):null==E||E(null!=C?C:""))}),[null===(a=null==L?void 0:L.current)||void 0===a?void 0:a.value.length]),t.jsxs(u.OuterContainer,{children:[t.jsxs(u.Container,Object.assign({isError:!!C},{children:[t.jsx(s.WhatsAppTextEditorHeader,{actions:O,ref:L,onActionSelect:function(e){if((null==h?void 0:h[e])&&L.current){const t=L.current.selectionStart;if(t===L.current.selectionEnd){H(null==h?void 0:h[e],t);const{text:n,html:r}=H(null==h?void 0:h[e],t);S(t+1),null==f||f(n,r)}else{const{text:t,html:n}=b(null==h?void 0:h[e]);null==f||f(t,n)}}},RightComponent:j,onEmojiClick:function(e){const{text:t,html:n}=R(e);null==f||f(t,n)}}),t.jsx(u.TextSpace,Object.assign({style:{zIndex:2,background:"none"},ref:L,onChange:function(e){const t=e.target.value,n=v.getHTML(t);null==f||f(t,n)}},y,{rows:T}))]})),C&&C!==d?t.jsxs("div",Object.assign({style:{display:"flex",gap:6,alignItems:"center"}},{children:[t.jsx(n.default,{width:16,height:16,color:o.COLORS.content.negative}),t.jsx(i.BodyCaption,Object.assign({color:o.COLORS.content.negative},{children:C}))]})):t.jsx(t.Fragment,{children:m&&(null==L?void 0:L.current)?t.jsxs(i.BodyCaption,Object.assign({style:{color:C===d||(null===(p=null==L?void 0:L.current)||void 0===p?void 0:p.value.length)>m?o.COLORS.content.negative:o.COLORS.content.secondary}},{children:[L.current.value.length,"/",m]})):t.jsx(t.Fragment,{})})]})}));p.displayName="WhatsAppTextEditor",exports.WhatsAppTextEditor=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("../../assets/icons/info.svg.js"),r=require("../../helpers/BaseWhatsappContentLang.helper.js"),l=require("react"),o=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),u=require("./CustomEditor.styled.js"),s=require("./WhatsAppTextEditorHeader.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(l);const d="Character limit reached",v=new r.BaseWhatsappContentLangHelper,h={[s.EditorActionTypes.BOLD]:"*",[s.EditorActionTypes.ITALIC]:"_",[s.EditorActionTypes.STRIKETHROUGH]:"~"},p=a.default.forwardRef(((r,c)=>{var a,p,{onChange:f,onClickVariable:g,text:x,RightComponent:j,error:C,limit:m,onError:E,rows:T,actions:O}=r,y=e.__rest(r,["onChange","onClickVariable","text","RightComponent","error","limit","onError","rows","actions"]);const L=l.useRef(null);function S(e){const t=null==L?void 0:L.current;null!=t&&(t.selectionStart?(t.focus(),t.selectionEnd=e):t.focus())}function R(e){var t,n;let r=null!==(n=null===(t=L.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(L.current&&e){const t=L.current.selectionStart,n=L.current.selectionEnd,l=e;if(t===n)return b(l);{r=v.wrappWildcard(t,n,l,r);const e=v.getHTML(r);return L.current.value=r,{text:r,html:e}}}return{text:r,html:r}}function b(e){var t,n;let r=null!==(n=null===(t=L.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(L.current&&e){const t=L.current.selectionStart;if(t===L.current.selectionEnd)return H(e,t)}return{text:r,html:r}}function H(e,t){var n,r;let l=null!==(r=null===(n=L.current)||void 0===n?void 0:n.value)&&void 0!==r?r:"";l=l.slice(0,t)+e+l.slice(t);const o=v.getHTML(l);return L.current.value=l,{text:l,html:o}}return l.useImperativeHandle(c,(()=>({addTextOrWrap:R,addText:b,get(){var e,t;return null!==(t=null===(e=L.current)||void 0===e?void 0:e.value)&&void 0!==t?t:""},setCaretPosition:S}))),l.useEffect((()=>{if(null==L?void 0:L.current){L.current.value=x||"";const e=v.getHTML(x||"");null==f||f(x||"",e)}}),[x]),l.useEffect((()=>{var e,t;(null===(e=null==L?void 0:L.current)||void 0===e?void 0:e.value)&&m&&((null===(t=null==L?void 0:L.current)||void 0===t?void 0:t.value.length)>m?null==E||E(d):null==E||E(null!=C?C:""))}),[null===(a=null==L?void 0:L.current)||void 0===a?void 0:a.value.length]),t.jsxs(u.OuterContainer,{children:[t.jsxs(u.Container,Object.assign({isError:!!C},{children:[t.jsx(s.WhatsAppTextEditorHeader,{actions:O,ref:L,onActionSelect:function(e){if((null==h?void 0:h[e])&&L.current){const t=L.current.selectionStart;if(t===L.current.selectionEnd){H(null==h?void 0:h[e],t);const{text:n,html:r}=H(null==h?void 0:h[e],t);S(t+1),null==f||f(n,r)}else{const{text:t,html:n}=R(null==h?void 0:h[e]);null==f||f(t,n)}}},RightComponent:j,onEmojiClick:function(e){const{text:t,html:n}=b(e);null==f||f(t,n)}}),t.jsx(u.TextSpace,Object.assign({ref:L,onChange:function(e){const t=e.target.value,n=v.getHTML(t);null==f||f(t,n)}},y,{rows:T}))]})),C&&C!==d?t.jsxs("div",Object.assign({style:{display:"flex",gap:6,alignItems:"center"}},{children:[t.jsx(n.default,{width:16,height:16,color:o.COLORS.content.negative}),t.jsx(i.BodyCaption,Object.assign({color:o.COLORS.content.negative},{children:C}))]})):t.jsx(t.Fragment,{children:m&&(null==L?void 0:L.current)?t.jsxs(i.BodyCaption,Object.assign({style:{color:C===d||(null===(p=null==L?void 0:L.current)||void 0===p?void 0:p.value.length)>m?o.COLORS.content.negative:o.COLORS.content.secondary}},{children:[L.current.value.length,"/",m]})):t.jsx(t.Fragment,{})})]})}));p.displayName="WhatsAppTextEditor",exports.WhatsAppTextEditor=p;

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

@@ -7,6 +7,7 @@ import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
 import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
 import { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { VariableV3 } from '../variable-picker-v3/model';
 export interface TemplateContextMapperProps {
     selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate;
     closeDialog?: () => void;
@@ -54,5 +55,6 @@ export interface TemplateContextMapperProps {
     setFileName?: (name: string) => void;
     hideDeviceContainerInPreview?: boolean;
     maxCharLimit?: number;
+    onDefaultVariableSelect?: (variable: VariableV3) => void;
 }
 export declare const TemplateContextMapper: React.FC<TemplateContextMapperProps>;

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("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),r=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("../template-preview/models/WhatsAppTemplate.js"),n=require("./context/templateModalContext.js"),d=require("./modalElements/Footer.js"),u=require("./modalElements/TemplateSelectModalContent.js"),c=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=p=>{let{selectedTemplate:v,closeDialog:m,showVariableMapping:h,channel:C,htmlContent:S,templateVariables:b,onTemplateSelect:E,globalPlaceholders:x,showOnlyContent:P,whatsappSpecificPickerMeta:g,zIndex:f,showVariableModal:T,variableList:L,discountCode:I,setDiscountCode:j,onBackPress:y,enabledCustomText:w,variableListForImage:M,showSampleValues:A,disableEditVariable:k,pod:H,extras:N,pickerConf:V,selectedCarouselProducts:D,disableEditExpiry:O,cardWidth:q,onDeleteSelectedProducts:B,fileName:F,setFileName:_,hideDeviceContainerInPreview:W,maxCharLimit:R}=p;var Y,z,$,U,G,J,K,Q;l.useEffect((()=>{re(S)}),[S]);const X=C===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(z=null===(Y=null==v?void 0:v.components)||void 0===Y?void 0:Y[1])||void 0===z?void 0:z.type),Z=null==v?void 0:v.isProductCarouselType,[ee,te]=l.useState(C===s.CHANNEL_TYPE.EMAIL||X?"desktop":"mobile"),[le,oe]=l.useState(!1),[ae,re]=l.useState(S),[se,ie]=l.useState(!1),[ne,de]=l.useState([]),[ue,ce]=l.useState({}),[pe,ve]=l.useState(v),[me,he]=l.useState([]),[Ce,Se]=l.useState(null),[be,Ee]=l.useState(!1),[xe,Pe]=l.useState(null!=b?b:[]),[ge,fe]=l.useState(!1),[Te,Le]=l.useState(X?(null===(U=null===($=null==pe?void 0:pe.mapping)||void 0===$?void 0:$.body)||void 0===U?void 0:U.length)?-1:0:-1),[Ie,je]=l.useState([]),[ye,we]=l.useState(void 0),Me=l.useRef(null),[Ae,ke]=l.useState(!1),[He,Ne]=l.useState(!1),[Ve,De]=l.useState(!1),[Oe,qe]=l.useState({});l.useEffect((()=>{D?je(D):Z&&je([])}),[D]),l.useEffect((()=>{var e;if(!be&&Z&&(!D||0===je.length)){const t=null===(e=null==pe?void 0:pe.components)||void 0===e?void 0:e[1].cards,l=[];null==t||t.forEach((e=>{var t;null===(t=null==e?void 0:e.components)||void 0===t||t.forEach((e=>{var t,o,a;"HEADER"===e.type&&l.push(null!==(a=null===(o=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),he(l),Ee(!0)}}),[be]);const Be=l.useMemo((()=>c.convertPlaceholdersToBikDropdown(x)),[x]);return l.useEffect((()=>{we(t.cloneDeep(L))}),[L]),e.jsx(n.TemplateModalContext.Provider,Object.assign({value:{hideFooterButton:Ve,setHideFooterButton:De,hideCrossButton:He,setHideCrossButton:Ne,variableList:ye,setVariableList:we,variableCallback:Ce,setVariableCallback:Se,showVariablePicker:le,setShowVariablePicker:oe,template:pe,setTemplate:ve,device:ee,setDevice:te,display_content:ae,setDisplayContent:re,originalVariableList:xe,setOriginalVariableList:Pe,isError:se,setIsError:ie,channel:C,globalNormalizedPlaceholders:Be,templateSelectionTriggered:ge,setTemplateSelectionTriggered:fe,enabledCustomText:w,disableEditVariable:k,pod:H,extras:N,isWhatsappCarousel:X,selectedCarouselIndex:Te,setSelectedCarouselIndex:Le,isProductCarouselType:Z,templateErrorIndexes:ue,cardCount:X?null===(J=null===(G=v.components)||void 0===G?void 0:G[1].cards)||void 0===J?void 0:J.length:void 0,errorIndexes:ne,setErrorIndexes:de,pickerConf:V,carouselProducts:Ie,setCarouselProducts:je,disableEditExpiry:O,cardWidth:q,cardImages:me,onDeleteSelectedProducts:B,hideDeviceContainerInPreview:W,sliderRef:Me,isCarouselHovered:Ae,setIsCarouselHovered:ke,maxCharLimit:R,ctaOptionsErrors:Oe,setCtaOptionsErrors:qe}},{children:P?e.jsx(u.default,{variableListFromProps:L,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({hideCrossButton:He,zIndex:f,centralContainerStyles:{width:X?900:C===s.CHANNEL_TYPE.EMAIL&&h?1e3:800},open:!0,onClose:()=>{null==m||m()},headingTitle:null==pe?void 0:pe.label,headingSubtitle:C===s.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(K=null==pe?void 0:pe.category)&&void 0!==K?K:"")} • ${null!==(Q=null==pe?void 0:pe.templateCategory)&&void 0!==Q?Q:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(u.default,{variableListFromProps:L,showSampleValues:A,showVariableMapping:h,channel:C,whatsappSpecificPickerMeta:g,showVariableModal:T,discountCode:I,setDiscountCode:j,variableListForImage:M&&(null==M?void 0:M.length)>0?M:ye,fileName:F,setFileName:e=>{null==_||_(e)}}),E?e.jsx(d.default,{isWhatsappCarousel:null!=X&&X,onSelect:function(){var e;if((null==Ie?void 0:Ie.length)<1&&Z)return void ie(!0);if(Object.keys(Oe).length>0&&H!==i.POD.CHATBOT)return void ie(!0);const t=null==E?void 0:E(pe,xe,null!=ae?ae:"",Ie);ce(null!==(e=null==t?void 0:t.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==t?void 0:t.errorIndexes)||(null==t?void 0:t.error)?((null==t?void 0:t.errorIndexes)&&de(t.errorIndexes),(null==t?void 0:t.error)&&ie(!!(null==t?void 0:t.error))):fe(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),r=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("../template-preview/models/WhatsAppTemplate.js"),n=require("./context/templateModalContext.js"),d=require("./modalElements/Footer.js"),u=require("./modalElements/TemplateSelectModalContent.js"),c=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=p=>{let{selectedTemplate:v,closeDialog:m,showVariableMapping:h,channel:C,htmlContent:S,templateVariables:b,onTemplateSelect:E,globalPlaceholders:x,showOnlyContent:P,whatsappSpecificPickerMeta:f,zIndex:g,showVariableModal:T,variableList:L,discountCode:I,setDiscountCode:j,onBackPress:y,enabledCustomText:w,variableListForImage:M,showSampleValues:V,disableEditVariable:A,pod:D,extras:k,pickerConf:H,selectedCarouselProducts:N,disableEditExpiry:O,cardWidth:q,onDeleteSelectedProducts:B,fileName:F,setFileName:_,hideDeviceContainerInPreview:W,maxCharLimit:R,onDefaultVariableSelect:Y}=p;var z,$,U,G,J,K,Q,X;l.useEffect((()=>{se(S)}),[S]);const Z=C===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===($=null===(z=null==v?void 0:v.components)||void 0===z?void 0:z[1])||void 0===$?void 0:$.type),ee=null==v?void 0:v.isProductCarouselType,[te,le]=l.useState(C===s.CHANNEL_TYPE.EMAIL||Z?"desktop":"mobile"),[oe,ae]=l.useState(!1),[re,se]=l.useState(S),[ie,ne]=l.useState(!1),[de,ue]=l.useState([]),[ce,pe]=l.useState({}),[ve,me]=l.useState(v),[he,Ce]=l.useState([]),[Se,be]=l.useState(null),[Ee,xe]=l.useState(!1),[Pe,fe]=l.useState(null!=b?b:[]),[ge,Te]=l.useState(!1),[Le,Ie]=l.useState(Z?(null===(G=null===(U=null==ve?void 0:ve.mapping)||void 0===U?void 0:U.body)||void 0===G?void 0:G.length)?-1:0:-1),[je,ye]=l.useState([]),[we,Me]=l.useState(void 0),Ve=l.useRef(null),[Ae,De]=l.useState(!1),[ke,He]=l.useState(!1),[Ne,Oe]=l.useState(!1),[qe,Be]=l.useState({});l.useEffect((()=>{N?ye(N):ee&&ye([])}),[N]),l.useEffect((()=>{var e;if(!Ee&&ee&&(!N||0===ye.length)){const t=null===(e=null==ve?void 0:ve.components)||void 0===e?void 0:e[1].cards,l=[];null==t||t.forEach((e=>{var t;null===(t=null==e?void 0:e.components)||void 0===t||t.forEach((e=>{var t,o,a;"HEADER"===e.type&&l.push(null!==(a=null===(o=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),Ce(l),xe(!0)}}),[Ee]);const Fe=l.useMemo((()=>c.convertPlaceholdersToBikDropdown(x)),[x]);return l.useEffect((()=>{Me(t.cloneDeep(L))}),[L]),e.jsx(n.TemplateModalContext.Provider,Object.assign({value:{hideFooterButton:Ne,setHideFooterButton:Oe,hideCrossButton:ke,setHideCrossButton:He,variableList:we,setVariableList:Me,variableCallback:Se,setVariableCallback:be,showVariablePicker:oe,setShowVariablePicker:ae,template:ve,setTemplate:me,device:te,setDevice:le,display_content:re,setDisplayContent:se,originalVariableList:Pe,setOriginalVariableList:fe,isError:ie,setIsError:ne,channel:C,globalNormalizedPlaceholders:Fe,templateSelectionTriggered:ge,setTemplateSelectionTriggered:Te,enabledCustomText:w,disableEditVariable:A,pod:D,extras:k,isWhatsappCarousel:Z,selectedCarouselIndex:Le,setSelectedCarouselIndex:Ie,isProductCarouselType:ee,templateErrorIndexes:ce,cardCount:Z?null===(K=null===(J=v.components)||void 0===J?void 0:J[1].cards)||void 0===K?void 0:K.length:void 0,errorIndexes:de,setErrorIndexes:ue,pickerConf:H,carouselProducts:je,setCarouselProducts:ye,disableEditExpiry:O,cardWidth:q,cardImages:he,onDeleteSelectedProducts:B,hideDeviceContainerInPreview:W,sliderRef:Ve,isCarouselHovered:Ae,setIsCarouselHovered:De,maxCharLimit:R,ctaOptionsErrors:qe,setCtaOptionsErrors:Be,onDefaultVariableSelect:Y}},{children:P?e.jsx(u.default,{variableListFromProps:L,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({hideCrossButton:ke,zIndex:g,centralContainerStyles:{width:Z?900:C===s.CHANNEL_TYPE.EMAIL&&h?1e3:800},open:!0,onClose:()=>{null==m||m()},headingTitle:null==ve?void 0:ve.label,headingSubtitle:C===s.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(Q=null==ve?void 0:ve.category)&&void 0!==Q?Q:"")} • ${null!==(X=null==ve?void 0:ve.templateCategory)&&void 0!==X?X:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(u.default,{variableListFromProps:L,showSampleValues:V,showVariableMapping:h,channel:C,whatsappSpecificPickerMeta:f,showVariableModal:T,discountCode:I,setDiscountCode:j,variableListForImage:M&&(null==M?void 0:M.length)>0?M:we,fileName:F,setFileName:e=>{null==_||_(e)}}),E?e.jsx(d.default,{isWhatsappCarousel:null!=Z&&Z,onSelect:function(){var e;if((null==je?void 0:je.length)<1&&ee)return void ne(!0);if(Object.keys(qe).length>0&&D!==i.POD.CHATBOT)return void ne(!0);const t=null==E?void 0:E(ve,Pe,null!=re?re:"",je);pe(null!==(e=null==t?void 0:t.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==t?void 0:t.errorIndexes)||(null==t?void 0:t.error)?((null==t?void 0:t.errorIndexes)&&ue(t.errorIndexes),(null==t?void 0:t.error)&&ne(!!(null==t?void 0:t.error))):Te(!0)}}):e.jsx(e.Fragment,{})]}))}))};

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

@@ -1,3 +1,4 @@
+import { VariableV3 } from "../../../helpers";
 import React, { LegacyRef } from 'react';
 import Slider from 'react-slick';
 import { VariableListInterfaceV2 } from "../../add-variableV2";
@@ -74,6 +75,7 @@ export declare const TemplateModalContext: React.Context<{
     setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
         [key: string]: string;
     }>> | undefined;
+    onDefaultVariableSelect?: ((variable: VariableV3) => void) | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     hideFooterButton: boolean;
@@ -140,4 +142,5 @@ export declare const useTemplateModalContext: () => {
     setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
         [key: string]: string;
     }>> | undefined;
+    onDefaultVariableSelect?: ((variable: VariableV3) => void) | undefined;
 };

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

@@ -1,22 +1,22 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../curtain/CurtainHelper.js");var t=require("../../variable-picker-v3/model.js"),a=require("lodash"),i=require("react"),l=require("styled-components"),o=require("../../carousel-preview/CarouselPreview.js"),r=require("./EditWhatsAppCarouselTemplateV2.js"),s=require("../../template-preview/models/Channels.js"),n=require("../../TypographyStyle.js"),d=require("../../variable-picker-v3/VariablePicker.js"),p=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),u=require("../utils/constants.js"),h=require("../utils/getVariableNameEmail.js"),m=require("../utils/highlightFor.js"),C=require("./DesktopPreview.js"),v=require("./EditWhatsAppTemplateV2.js"),w=require("./MobilePreview.js"),P=require("./VariableConnectorsPanel.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(l);const g=b.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../curtain/CurtainHelper.js");var t=require("../../variable-picker-v3/model.js"),a=require("lodash"),i=require("react"),l=require("styled-components"),o=require("../../carousel-preview/CarouselPreview.js"),r=require("./EditWhatsAppCarouselTemplateV2.js"),n=require("../../template-preview/models/Channels.js"),s=require("../../TypographyStyle.js"),d=require("../../variable-picker-v3/VariablePicker.js"),p=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),u=require("../utils/constants.js"),h=require("../utils/getVariableNameEmail.js"),m=require("../utils/highlightFor.js"),C=require("./DesktopPreview.js"),v=require("./EditWhatsAppTemplateV2.js"),w=require("./MobilePreview.js"),P=require("./VariableConnectorsPanel.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(l);const g=x.default.div`
 	display: flex;
 	//	height: 100%;
-`,E=b.default.div`
+`,E=x.default.div`
 	max-width: 450px;
-	max-width: ${e=>e.channel===s.CHANNEL_TYPE.EMAIL?"400px":"450px"};
+	max-width: ${e=>e.channel===n.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===s.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
 	border-left: ${p.COLORS.stroke.primary} 1px solid;
 	border-top: ${e=>e.isWhatsappCarousel?`${p.COLORS.stroke.primary} 1px solid`:void 0};
 	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
-`,f=b.default.div`
+`,f=x.default.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.CHANNEL_TYPE.WHATSAPP?`url(${u.BACKGROUND_PREVIEW_IMAGE});`:"none"};
-	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===n.CHANNEL_TYPE.WHATSAPP?`url(${u.BACKGROUND_PREVIEW_IMAGE});`:"none"};
+	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===n.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
 	align-items: flex-start;
-`;exports.default=l=>{const{showVariableMapping:u,showOnlyContent:x,whatsappSpecificPickerMeta:b,showVariableModal:j,discountCode:A,setDiscountCode:y,variableListForImage:T,showSampleValues:S,variableListFromProps:L}=l,N=i.useRef(),k=i.useRef(),{variableList:M,setVariableList:V,variableCallback:_,showVariablePicker:H,setShowVariablePicker:q,device:O,display_content:W,channel:I,template:D,setTemplate:Y,isWhatsappCarousel:B,isProductCarouselType:$,hideDeviceContainerInPreview:F}=c.useTemplateModalContext();const R=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(g,{children:[e.jsx(f,Object.assign({showOnlyContent:x,showVariableMapping:u,isWhatsappCarousel:B,hideDeviceContainerInPreview:F,channel:I},{children:"mobile"===O?e.jsx(w.default,{ref:k,display_content:null!=W?W:"",channel:I,template:D,showSampleValues:S}):I===s.CHANNEL_TYPE.WHATSAPP&&B?e.jsx(o.CarouselPreview,{ref:N,channel:I,template:D,showSampleValues:S,isPreview:!1,showArrows:!0}):I!==s.CHANNEL_TYPE.MESSAGE?e.jsx(C.default,{ref:N,channel:I,display_content:null!=W?W:"",showSampleValues:S}):e.jsx(e.Fragment,{})})),($||u)&&e.jsxs(E,Object.assign({channel:I,isWhatsappCarousel:B,showVariableMapping:!0},{children:[e.jsx("div",Object.assign({style:{height:"100%",width:"whatsapp"===I?428:400,display:H?"block":"none"}},{children:e.jsx(d.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{V(a.cloneDeep(L)),q(!1)},onSelect:e=>{_(e),V(a.cloneDeep(L)),q(!1)},type:t.PickerType.EMBEDDED,data:null!=M?M:[]},Math.random())})),e.jsx("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===I?428:400,display:H?"none":"block"}},{children:I!==s.CHANNEL_TYPE.WHATSAPP?e.jsx(P.default,{onFocus:I===s.CHANNEL_TYPE.EMAIL?function(e){var t,a,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===O?"template_html_mobile":"template_html_desktop"),o=h.getVariableNameForEmailByIndex(e+1),r=I===s.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o),n=R(r),d=null==r?void 0:r.offsetLeft;"desktop"===O?n&&N.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=d?d:0,n),m.highlightFor(o,p.COLORS.background.warning.light,2,I,O)):n&&k.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,n),m.highlightFor(o,p.COLORS.background.warning.light,2,I,O))}:void 0,showVariableModal:j,discountCode:A,setDiscountCode:y}):I===s.CHANNEL_TYPE.WHATSAPP&&B?e.jsx(r.default,{whatsappSpecificPickerMeta:b,template:D,showVariableModal:j,variableListForImage:T,discountCode:A,setDiscountCode:y}):e.jsx(v.default,{whatsappSpecificPickerMeta:b,template:D,onTemplateChange:e=>{null==Y||Y(e)},showVariableModal:j,variableListForImage:T,discountCode:A,setDiscountCode:y})}))]})),[s.CHANNEL_TYPE.WHATSAPP,s.CHANNEL_TYPE.SMS].includes(I)&&!u&&!$&&e.jsx(E,{children:e.jsx(n.BodySecondary,Object.assign({color:p.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};
+`;exports.default=l=>{const{showVariableMapping:u,showOnlyContent:b,whatsappSpecificPickerMeta:x,showVariableModal:j,discountCode:A,setDiscountCode:y,variableListForImage:T,showSampleValues:S,variableListFromProps:L}=l,N=i.useRef(),k=i.useRef(),{variableList:V,setVariableList:M,variableCallback:_,showVariablePicker:H,setShowVariablePicker:q,device:O,display_content:W,channel:D,template:I,setTemplate:Y,isWhatsappCarousel:B,isProductCarouselType:$,hideDeviceContainerInPreview:F,onDefaultVariableSelect:R}=c.useTemplateModalContext();const G=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(g,{children:[e.jsx(f,Object.assign({showOnlyContent:b,showVariableMapping:u,isWhatsappCarousel:B,hideDeviceContainerInPreview:F,channel:D},{children:"mobile"===O?e.jsx(w.default,{ref:k,display_content:null!=W?W:"",channel:D,template:I,showSampleValues:S}):D===n.CHANNEL_TYPE.WHATSAPP&&B?e.jsx(o.CarouselPreview,{ref:N,channel:D,template:I,showSampleValues:S,isPreview:!1,showArrows:!0}):D!==n.CHANNEL_TYPE.MESSAGE?e.jsx(C.default,{ref:N,channel:D,display_content:null!=W?W:"",showSampleValues:S}):e.jsx(e.Fragment,{})})),($||u)&&e.jsxs(E,Object.assign({channel:D,isWhatsappCarousel:B,showVariableMapping:!0},{children:[e.jsx("div",Object.assign({style:{height:"100%",width:"whatsapp"===D?428:400,display:H?"block":"none"}},{children:e.jsx(d.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{M(a.cloneDeep(L)),q(!1)},onSelect:e=>{null==R||R(e),_(e),M(a.cloneDeep(L)),q(!1)},type:t.PickerType.EMBEDDED,data:null!=V?V:[]},Math.random())})),e.jsx("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===D?428:400,display:H?"none":"block"}},{children:D!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(P.default,{onFocus:D===n.CHANNEL_TYPE.EMAIL?function(e){var t,a,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===O?"template_html_mobile":"template_html_desktop"),o=h.getVariableNameForEmailByIndex(e+1),r=D===n.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o),s=G(r),d=null==r?void 0:r.offsetLeft;"desktop"===O?s&&N.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=d?d:0,s),m.highlightFor(o,p.COLORS.background.warning.light,2,D,O)):s&&k.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,s),m.highlightFor(o,p.COLORS.background.warning.light,2,D,O))}:void 0,showVariableModal:j,discountCode:A,setDiscountCode:y}):D===n.CHANNEL_TYPE.WHATSAPP&&B?e.jsx(r.default,{whatsappSpecificPickerMeta:x,template:I,showVariableModal:j,variableListForImage:T,discountCode:A,setDiscountCode:y}):e.jsx(v.default,{whatsappSpecificPickerMeta:x,template:I,onTemplateChange:e=>{null==Y||Y(e)},showVariableModal:j,variableListForImage:T,discountCode:A,setDiscountCode:y})}))]})),[n.CHANNEL_TYPE.WHATSAPP,n.CHANNEL_TYPE.SMS].includes(D)&&!u&&!$&&e.jsx(E,{children:e.jsx(s.BodySecondary,Object.assign({color:p.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};

package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as n,jsx as e,Fragment as r}from"react/jsx-runtime";import l from"../../assets/icons/info.svg.js";import{BaseWhatsappContentLangHelper as o}from"../../helpers/BaseWhatsappContentLang.helper.js";import i,{useRef as c,useImperativeHandle as u,useEffect as s}from"react";import{COLORS as a}from"../../constants/Theme.js";import{BodyCaption as d}from"../TypographyStyle.js";import{OuterContainer as v,Container as m,TextSpace as h}from"./CustomEditor.styled.js";import{EditorActionTypes as f,WhatsAppTextEditorHeader as g}from"./WhatsAppTextEditorHeader.js";const p="Character limit reached",x=new o,j={[f.BOLD]:"*",[f.ITALIC]:"_",[f.STRIKETHROUGH]:"~"},C=i.forwardRef(((o,i)=>{var f,C,{onChange:T,onClickVariable:E,text:y,RightComponent:b,error:O,limit:w,onError:H,rows:L,actions:S}=o,R=t(o,["onChange","onClickVariable","text","RightComponent","error","limit","onError","rows","actions"]);const I=c(null);function W(t){const n=null==I?void 0:I.current;null!=n&&(n.selectionStart?(n.focus(),n.selectionEnd=t):n.focus())}function k(t){var n,e;let r=null!==(e=null===(n=I.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(I.current&&t){const n=I.current.selectionStart,e=I.current.selectionEnd,l=t;if(n===e)return A(l);{r=x.wrappWildcard(n,e,l,r);const t=x.getHTML(r);return I.current.value=r,{text:r,html:t}}}return{text:r,html:r}}function A(t){var n,e;let r=null!==(e=null===(n=I.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(I.current&&t){const n=I.current.selectionStart;if(n===I.current.selectionEnd)return M(t,n)}return{text:r,html:r}}function M(t,n){var e,r;let l=null!==(r=null===(e=I.current)||void 0===e?void 0:e.value)&&void 0!==r?r:"";l=l.slice(0,n)+t+l.slice(n);const o=x.getHTML(l);return I.current.value=l,{text:l,html:o}}return u(i,(()=>({addTextOrWrap:k,addText:A,get(){var t,n;return null!==(n=null===(t=I.current)||void 0===t?void 0:t.value)&&void 0!==n?n:""},setCaretPosition:W}))),s((()=>{if(null==I?void 0:I.current){I.current.value=y||"";const t=x.getHTML(y||"");null==T||T(y||"",t)}}),[y]),s((()=>{var t,n;(null===(t=null==I?void 0:I.current)||void 0===t?void 0:t.value)&&w&&((null===(n=null==I?void 0:I.current)||void 0===n?void 0:n.value.length)>w?null==H||H(p):null==H||H(null!=O?O:""))}),[null===(f=null==I?void 0:I.current)||void 0===f?void 0:f.value.length]),n(v,{children:[n(m,Object.assign({isError:!!O},{children:[e(g,{actions:S,ref:I,onActionSelect:function(t){if((null==j?void 0:j[t])&&I.current){const n=I.current.selectionStart;if(n===I.current.selectionEnd){M(null==j?void 0:j[t],n);const{text:e,html:r}=M(null==j?void 0:j[t],n);W(n+1),null==T||T(e,r)}else{const{text:n,html:e}=k(null==j?void 0:j[t]);null==T||T(n,e)}}},RightComponent:b,onEmojiClick:function(t){const{text:n,html:e}=A(t);null==T||T(n,e)}}),e(h,Object.assign({style:{zIndex:2,background:"none"},ref:I,onChange:function(t){const n=t.target.value,e=x.getHTML(n);null==T||T(n,e)}},R,{rows:L}))]})),O&&O!==p?n("div",Object.assign({style:{display:"flex",gap:6,alignItems:"center"}},{children:[e(l,{width:16,height:16,color:a.content.negative}),e(d,Object.assign({color:a.content.negative},{children:O}))]})):e(r,{children:w&&(null==I?void 0:I.current)?n(d,Object.assign({style:{color:O===p||(null===(C=null==I?void 0:I.current)||void 0===C?void 0:C.value.length)>w?a.content.negative:a.content.secondary}},{children:[I.current.value.length,"/",w]})):e(r,{})})]})}));C.displayName="WhatsAppTextEditor";export{C as WhatsAppTextEditor};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as n,jsx as e,Fragment as r}from"react/jsx-runtime";import l from"../../assets/icons/info.svg.js";import{BaseWhatsappContentLangHelper as o}from"../../helpers/BaseWhatsappContentLang.helper.js";import i,{useRef as c,useImperativeHandle as u,useEffect as s}from"react";import{COLORS as a}from"../../constants/Theme.js";import{BodyCaption as d}from"../TypographyStyle.js";import{OuterContainer as v,Container as m,TextSpace as h}from"./CustomEditor.styled.js";import{EditorActionTypes as f,WhatsAppTextEditorHeader as g}from"./WhatsAppTextEditorHeader.js";const p="Character limit reached",x=new o,j={[f.BOLD]:"*",[f.ITALIC]:"_",[f.STRIKETHROUGH]:"~"},C=i.forwardRef(((o,i)=>{var f,C,{onChange:T,onClickVariable:E,text:y,RightComponent:b,error:O,limit:w,onError:H,rows:L,actions:S}=o,R=t(o,["onChange","onClickVariable","text","RightComponent","error","limit","onError","rows","actions"]);const W=c(null);function A(t){const n=null==W?void 0:W.current;null!=n&&(n.selectionStart?(n.focus(),n.selectionEnd=t):n.focus())}function I(t){var n,e;let r=null!==(e=null===(n=W.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(W.current&&t){const n=W.current.selectionStart,e=W.current.selectionEnd,l=t;if(n===e)return M(l);{r=x.wrappWildcard(n,e,l,r);const t=x.getHTML(r);return W.current.value=r,{text:r,html:t}}}return{text:r,html:r}}function M(t){var n,e;let r=null!==(e=null===(n=W.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(W.current&&t){const n=W.current.selectionStart;if(n===W.current.selectionEnd)return k(t,n)}return{text:r,html:r}}function k(t,n){var e,r;let l=null!==(r=null===(e=W.current)||void 0===e?void 0:e.value)&&void 0!==r?r:"";l=l.slice(0,n)+t+l.slice(n);const o=x.getHTML(l);return W.current.value=l,{text:l,html:o}}return u(i,(()=>({addTextOrWrap:I,addText:M,get(){var t,n;return null!==(n=null===(t=W.current)||void 0===t?void 0:t.value)&&void 0!==n?n:""},setCaretPosition:A}))),s((()=>{if(null==W?void 0:W.current){W.current.value=y||"";const t=x.getHTML(y||"");null==T||T(y||"",t)}}),[y]),s((()=>{var t,n;(null===(t=null==W?void 0:W.current)||void 0===t?void 0:t.value)&&w&&((null===(n=null==W?void 0:W.current)||void 0===n?void 0:n.value.length)>w?null==H||H(p):null==H||H(null!=O?O:""))}),[null===(f=null==W?void 0:W.current)||void 0===f?void 0:f.value.length]),n(v,{children:[n(m,Object.assign({isError:!!O},{children:[e(g,{actions:S,ref:W,onActionSelect:function(t){if((null==j?void 0:j[t])&&W.current){const n=W.current.selectionStart;if(n===W.current.selectionEnd){k(null==j?void 0:j[t],n);const{text:e,html:r}=k(null==j?void 0:j[t],n);A(n+1),null==T||T(e,r)}else{const{text:n,html:e}=I(null==j?void 0:j[t]);null==T||T(n,e)}}},RightComponent:b,onEmojiClick:function(t){const{text:n,html:e}=M(t);null==T||T(n,e)}}),e(h,Object.assign({ref:W,onChange:function(t){const n=t.target.value,e=x.getHTML(n);null==T||T(n,e)}},R,{rows:L}))]})),O&&O!==p?n("div",Object.assign({style:{display:"flex",gap:6,alignItems:"center"}},{children:[e(l,{width:16,height:16,color:a.content.negative}),e(d,Object.assign({color:a.content.negative},{children:O}))]})):e(r,{children:w&&(null==W?void 0:W.current)?n(d,Object.assign({style:{color:O===p||(null===(C=null==W?void 0:W.current)||void 0===C?void 0:C.value.length)>w?a.content.negative:a.content.secondary}},{children:[W.current.value.length,"/",w]})):e(r,{})})]})}));C.displayName="WhatsAppTextEditor";export{C as WhatsAppTextEditor};

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

@@ -7,6 +7,7 @@ import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
 import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
 import { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { VariableV3 } from '../variable-picker-v3/model';
 export interface TemplateContextMapperProps {
     selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate;
     closeDialog?: () => void;
@@ -54,5 +55,6 @@ export interface TemplateContextMapperProps {
     setFileName?: (name: string) => void;
     hideDeviceContainerInPreview?: boolean;
     maxCharLimit?: number;
+    onDefaultVariableSelect?: (variable: VariableV3) => void;
 }
 export declare const TemplateContextMapper: React.FC<TemplateContextMapperProps>;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as l}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as r,useState as i,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as u}from"../modals/styledModal.js";import{CHANNEL_TYPE as c}from"../template-preview/models/Channels.js";import{POD as p}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import v from"./modalElements/Footer.js";import h from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as b}from"./utils/convertPlaceholdersToBikDropdown.js";const C=C=>{let{selectedTemplate:g,closeDialog:f,showVariableMapping:x,channel:P,htmlContent:E,templateVariables:I,onTemplateSelect:S,globalPlaceholders:T,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:L,showVariableModal:V,variableList:k,discountCode:j,setDiscountCode:M,onBackPress:A,enabledCustomText:D,variableListForImage:B,showSampleValues:F,disableEditVariable:H,pod:O,extras:W,pickerConf:N,selectedCarouselProducts:z,disableEditExpiry:R,cardWidth:$,onDeleteSelectedProducts:U,fileName:_,setFileName:q,hideDeviceContainerInPreview:G,maxCharLimit:J}=C;var K,Q,X,Y,Z,ee,oe,le;r((()=>{ue(E)}),[E]);const te=P===c.WHATSAPP&&"CAROUSEL"===(null===(Q=null===(K=null==g?void 0:g.components)||void 0===K?void 0:K[1])||void 0===Q?void 0:Q.type),re=null==g?void 0:g.isProductCarouselType,[ie,ae]=i(P===c.EMAIL||te?"desktop":"mobile"),[se,ne]=i(!1),[de,ue]=i(E),[ce,pe]=i(!1),[me,ve]=i([]),[he,be]=i({}),[Ce,ge]=i(g),[fe,xe]=i([]),[Pe,Ee]=i(null),[Ie,Se]=i(!1),[Te,ye]=i(null!=I?I:[]),[we,Le]=i(!1),[Ve,ke]=i(te?(null===(Y=null===(X=null==Ce?void 0:Ce.mapping)||void 0===X?void 0:X.body)||void 0===Y?void 0:Y.length)?-1:0:-1),[je,Me]=i([]),[Ae,De]=i(void 0),Be=a(null),[Fe,He]=i(!1),[Oe,We]=i(!1),[Ne,ze]=i(!1),[Re,$e]=i({});r((()=>{z?Me(z):re&&Me([])}),[z]),r((()=>{var e;if(!Ie&&re&&(!z||0===Me.length)){const o=null===(e=null==Ce?void 0:Ce.components)||void 0===e?void 0:e[1].cards,l=[];null==o||o.forEach((e=>{var o;null===(o=null==e?void 0:e.components)||void 0===o||o.forEach((e=>{var o,t,r;"HEADER"===e.type&&l.push(null!==(r=null===(t=null===(o=e.example)||void 0===o?void 0:o.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),xe(l),Se(!0)}}),[Ie]);const Ue=s((()=>b(T)),[T]);return r((()=>{De(t(k))}),[k]),e(m.Provider,Object.assign({value:{hideFooterButton:Ne,setHideFooterButton:ze,hideCrossButton:Oe,setHideCrossButton:We,variableList:Ae,setVariableList:De,variableCallback:Pe,setVariableCallback:Ee,showVariablePicker:se,setShowVariablePicker:ne,template:Ce,setTemplate:ge,device:ie,setDevice:ae,display_content:de,setDisplayContent:ue,originalVariableList:Te,setOriginalVariableList:ye,isError:ce,setIsError:pe,channel:P,globalNormalizedPlaceholders:Ue,templateSelectionTriggered:we,setTemplateSelectionTriggered:Le,enabledCustomText:D,disableEditVariable:H,pod:O,extras:W,isWhatsappCarousel:te,selectedCarouselIndex:Ve,setSelectedCarouselIndex:ke,isProductCarouselType:re,templateErrorIndexes:he,cardCount:te?null===(ee=null===(Z=g.components)||void 0===Z?void 0:Z[1].cards)||void 0===ee?void 0:ee.length:void 0,errorIndexes:me,setErrorIndexes:ve,pickerConf:N,carouselProducts:je,setCarouselProducts:Me,disableEditExpiry:R,cardWidth:$,cardImages:fe,onDeleteSelectedProducts:U,hideDeviceContainerInPreview:G,sliderRef:Be,isCarouselHovered:Fe,setIsCarouselHovered:He,maxCharLimit:J,ctaOptionsErrors:Re,setCtaOptionsErrors:$e}},{children:y?e(h,{variableListFromProps:k,channel:c.EMAIL,hideHeader:!0}):o(u,Object.assign({hideCrossButton:Oe,zIndex:L,centralContainerStyles:{width:te?900:P===c.EMAIL&&x?1e3:800},open:!0,onClose:()=>{null==f||f()},headingTitle:null==Ce?void 0:Ce.label,headingSubtitle:P===c.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(oe=null==Ce?void 0:Ce.category)&&void 0!==oe?oe:"")} • ${null!==(le=null==Ce?void 0:Ce.templateCategory)&&void 0!==le?le:""}`:"",onBackPress:()=>{null==A||A()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(h,{variableListFromProps:k,showSampleValues:F,showVariableMapping:x,channel:P,whatsappSpecificPickerMeta:w,showVariableModal:V,discountCode:j,setDiscountCode:M,variableListForImage:B&&(null==B?void 0:B.length)>0?B:Ae,fileName:_,setFileName:e=>{null==q||q(e)}}),S?e(v,{isWhatsappCarousel:null!=te&&te,onSelect:function(){var e;if((null==je?void 0:je.length)<1&&re)return void pe(!0);if(Object.keys(Re).length>0&&O!==p.CHATBOT)return void pe(!0);const o=null==S?void 0:S(Ce,Te,null!=de?de:"",je);be(null!==(e=null==o?void 0:o.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==o?void 0:o.errorIndexes)||(null==o?void 0:o.error)?((null==o?void 0:o.errorIndexes)&&ve(o.errorIndexes),(null==o?void 0:o.error)&&pe(!!(null==o?void 0:o.error))):Le(!0)}}):e(l,{})]}))}))};export{C as TemplateContextMapper};
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as r,useState as i,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as u}from"../modals/styledModal.js";import{CHANNEL_TYPE as c}from"../template-preview/models/Channels.js";import{POD as p}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import v from"./modalElements/Footer.js";import h from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as b}from"./utils/convertPlaceholdersToBikDropdown.js";const C=C=>{let{selectedTemplate:g,closeDialog:f,showVariableMapping:x,channel:P,htmlContent:E,templateVariables:S,onTemplateSelect:I,globalPlaceholders:T,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:V,showVariableModal:L,variableList:k,discountCode:j,setDiscountCode:D,onBackPress:M,enabledCustomText:A,variableListForImage:B,showSampleValues:F,disableEditVariable:H,pod:O,extras:W,pickerConf:N,selectedCarouselProducts:z,disableEditExpiry:R,cardWidth:$,onDeleteSelectedProducts:U,fileName:_,setFileName:q,hideDeviceContainerInPreview:G,maxCharLimit:J,onDefaultVariableSelect:K}=C;var Q,X,Y,Z,ee,le,oe,te;r((()=>{ce(E)}),[E]);const re=P===c.WHATSAPP&&"CAROUSEL"===(null===(X=null===(Q=null==g?void 0:g.components)||void 0===Q?void 0:Q[1])||void 0===X?void 0:X.type),ie=null==g?void 0:g.isProductCarouselType,[ae,se]=i(P===c.EMAIL||re?"desktop":"mobile"),[ne,de]=i(!1),[ue,ce]=i(E),[pe,me]=i(!1),[ve,he]=i([]),[be,Ce]=i({}),[ge,fe]=i(g),[xe,Pe]=i([]),[Ee,Se]=i(null),[Ie,Te]=i(!1),[ye,we]=i(null!=S?S:[]),[Ve,Le]=i(!1),[ke,je]=i(re?(null===(Z=null===(Y=null==ge?void 0:ge.mapping)||void 0===Y?void 0:Y.body)||void 0===Z?void 0:Z.length)?-1:0:-1),[De,Me]=i([]),[Ae,Be]=i(void 0),Fe=a(null),[He,Oe]=i(!1),[We,Ne]=i(!1),[ze,Re]=i(!1),[$e,Ue]=i({});r((()=>{z?Me(z):ie&&Me([])}),[z]),r((()=>{var e;if(!Ie&&ie&&(!z||0===Me.length)){const l=null===(e=null==ge?void 0:ge.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,r;"HEADER"===e.type&&o.push(null!==(r=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),Pe(o),Te(!0)}}),[Ie]);const _e=s((()=>b(T)),[T]);return r((()=>{Be(t(k))}),[k]),e(m.Provider,Object.assign({value:{hideFooterButton:ze,setHideFooterButton:Re,hideCrossButton:We,setHideCrossButton:Ne,variableList:Ae,setVariableList:Be,variableCallback:Ee,setVariableCallback:Se,showVariablePicker:ne,setShowVariablePicker:de,template:ge,setTemplate:fe,device:ae,setDevice:se,display_content:ue,setDisplayContent:ce,originalVariableList:ye,setOriginalVariableList:we,isError:pe,setIsError:me,channel:P,globalNormalizedPlaceholders:_e,templateSelectionTriggered:Ve,setTemplateSelectionTriggered:Le,enabledCustomText:A,disableEditVariable:H,pod:O,extras:W,isWhatsappCarousel:re,selectedCarouselIndex:ke,setSelectedCarouselIndex:je,isProductCarouselType:ie,templateErrorIndexes:be,cardCount:re?null===(le=null===(ee=g.components)||void 0===ee?void 0:ee[1].cards)||void 0===le?void 0:le.length:void 0,errorIndexes:ve,setErrorIndexes:he,pickerConf:N,carouselProducts:De,setCarouselProducts:Me,disableEditExpiry:R,cardWidth:$,cardImages:xe,onDeleteSelectedProducts:U,hideDeviceContainerInPreview:G,sliderRef:Fe,isCarouselHovered:He,setIsCarouselHovered:Oe,maxCharLimit:J,ctaOptionsErrors:$e,setCtaOptionsErrors:Ue,onDefaultVariableSelect:K}},{children:y?e(h,{variableListFromProps:k,channel:c.EMAIL,hideHeader:!0}):l(u,Object.assign({hideCrossButton:We,zIndex:V,centralContainerStyles:{width:re?900:P===c.EMAIL&&x?1e3:800},open:!0,onClose:()=>{null==f||f()},headingTitle:null==ge?void 0:ge.label,headingSubtitle:P===c.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(oe=null==ge?void 0:ge.category)&&void 0!==oe?oe:"")} • ${null!==(te=null==ge?void 0:ge.templateCategory)&&void 0!==te?te:""}`:"",onBackPress:()=>{null==M||M()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(h,{variableListFromProps:k,showSampleValues:F,showVariableMapping:x,channel:P,whatsappSpecificPickerMeta:w,showVariableModal:L,discountCode:j,setDiscountCode:D,variableListForImage:B&&(null==B?void 0:B.length)>0?B:Ae,fileName:_,setFileName:e=>{null==q||q(e)}}),I?e(v,{isWhatsappCarousel:null!=re&&re,onSelect:function(){var e;if((null==De?void 0:De.length)<1&&ie)return void me(!0);if(Object.keys($e).length>0&&O!==p.CHATBOT)return void me(!0);const l=null==I?void 0:I(ge,ye,null!=ue?ue:"",De);Ce(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&he(l.errorIndexes),(null==l?void 0:l.error)&&me(!!(null==l?void 0:l.error))):Le(!0)}}):e(o,{})]}))}))};export{C as TemplateContextMapper};

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

@@ -1,3 +1,4 @@
+import { VariableV3 } from "../../../helpers";
 import React, { LegacyRef } from 'react';
 import Slider from 'react-slick';
 import { VariableListInterfaceV2 } from "../../add-variableV2";
@@ -74,6 +75,7 @@ export declare const TemplateModalContext: React.Context<{
     setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
         [key: string]: string;
     }>> | undefined;
+    onDefaultVariableSelect?: ((variable: VariableV3) => void) | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     hideFooterButton: boolean;
@@ -140,4 +142,5 @@ export declare const useTemplateModalContext: () => {
     setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
         [key: string]: string;
     }>> | undefined;
+    onDefaultVariableSelect?: ((variable: VariableV3) => void) | undefined;
 };

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

@@ -19,4 +19,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import"../../cur
 	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===p.WHATSAPP?`url(${u});`:"none"};
 	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===p.WHATSAPP?"flex":"initial"};
 	align-items: flex-start;
-`,k=n=>{const{showVariableMapping:u,showOnlyContent:k,whatsappSpecificPickerMeta:S,showVariableModal:j,discountCode:A,setDiscountCode:M,variableListForImage:V,showSampleValues:W,variableListFromProps:T}=n,E=l(),I=l(),{variableList:D,setVariableList:$,variableCallback:H,showVariablePicker:L,setShowVariablePicker:B,device:O,display_content:_,channel:F,template:G,setTemplate:N,isWhatsappCarousel:q,isProductCarouselType:z,hideDeviceContainerInPreview:J}=h();const K=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(P,{children:[t(y,Object.assign({showOnlyContent:k,showVariableMapping:u,isWhatsappCarousel:q,hideDeviceContainerInPreview:J,channel:F},{children:"mobile"===O?t(g,{ref:I,display_content:null!=_?_:"",channel:F,template:G,showSampleValues:W}):F===p.WHATSAPP&&q?t(r,{ref:E,channel:F,template:G,showSampleValues:W,isPreview:!1,showArrows:!0}):F!==p.MESSAGE?t(f,{ref:E,channel:F,display_content:null!=_?_:"",showSampleValues:W}):t(o,{})})),(z||u)&&e(x,Object.assign({channel:F,isWhatsappCarousel:q,showVariableMapping:!0},{children:[t("div",Object.assign({style:{height:"100%",width:"whatsapp"===F?428:400,display:L?"block":"none"}},{children:t(c,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{$(a(T)),B(!1)},onSelect:e=>{H(e),$(a(T)),B(!1)},type:i.EMBEDDED,data:null!=D?D:[]},Math.random())})),t("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===F?428:400,display:L?"none":"block"}},{children:F!==p.WHATSAPP?t(C,{onFocus:F===p.EMAIL?function(e){var t,o,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===O?"template_html_mobile":"template_html_desktop"),l=w(e+1),n=F===p.EMAIL?null===(t=null==a?void 0:a.contentWindow)||void 0===t?void 0:t.document.getElementById(l):document.getElementById(l),r=K(n),s=null==n?void 0:n.offsetLeft;"desktop"===O?r&&E.current&&(null===(o=null==a?void 0:a.contentWindow)||void 0===o||o.scrollTo(null!=s?s:0,r),v(l,m.background.warning.light,2,F,O)):r&&I.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=s?s:0,r),v(l,m.background.warning.light,2,F,O))}:void 0,showVariableModal:j,discountCode:A,setDiscountCode:M}):F===p.WHATSAPP&&q?t(s,{whatsappSpecificPickerMeta:S,template:G,showVariableModal:j,variableListForImage:V,discountCode:A,setDiscountCode:M}):t(b,{whatsappSpecificPickerMeta:S,template:G,onTemplateChange:e=>{null==N||N(e)},showVariableModal:j,variableListForImage:V,discountCode:A,setDiscountCode:M})}))]})),[p.WHATSAPP,p.SMS].includes(F)&&!u&&!z&&t(x,{children:t(d,Object.assign({color:m.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};export{k as default};
+`,S=n=>{const{showVariableMapping:u,showOnlyContent:S,whatsappSpecificPickerMeta:k,showVariableModal:j,discountCode:A,setDiscountCode:V,variableListForImage:M,showSampleValues:W,variableListFromProps:T}=n,D=l(),E=l(),{variableList:I,setVariableList:$,variableCallback:H,showVariablePicker:L,setShowVariablePicker:B,device:O,display_content:_,channel:F,template:G,setTemplate:N,isWhatsappCarousel:q,isProductCarouselType:z,hideDeviceContainerInPreview:J,onDefaultVariableSelect:K}=h();const Q=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(P,{children:[t(y,Object.assign({showOnlyContent:S,showVariableMapping:u,isWhatsappCarousel:q,hideDeviceContainerInPreview:J,channel:F},{children:"mobile"===O?t(g,{ref:E,display_content:null!=_?_:"",channel:F,template:G,showSampleValues:W}):F===p.WHATSAPP&&q?t(r,{ref:D,channel:F,template:G,showSampleValues:W,isPreview:!1,showArrows:!0}):F!==p.MESSAGE?t(f,{ref:D,channel:F,display_content:null!=_?_:"",showSampleValues:W}):t(o,{})})),(z||u)&&e(x,Object.assign({channel:F,isWhatsappCarousel:q,showVariableMapping:!0},{children:[t("div",Object.assign({style:{height:"100%",width:"whatsapp"===F?428:400,display:L?"block":"none"}},{children:t(c,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{$(a(T)),B(!1)},onSelect:e=>{null==K||K(e),H(e),$(a(T)),B(!1)},type:i.EMBEDDED,data:null!=I?I:[]},Math.random())})),t("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===F?428:400,display:L?"none":"block"}},{children:F!==p.WHATSAPP?t(C,{onFocus:F===p.EMAIL?function(e){var t,o,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===O?"template_html_mobile":"template_html_desktop"),l=w(e+1),n=F===p.EMAIL?null===(t=null==a?void 0:a.contentWindow)||void 0===t?void 0:t.document.getElementById(l):document.getElementById(l),r=Q(n),s=null==n?void 0:n.offsetLeft;"desktop"===O?r&&D.current&&(null===(o=null==a?void 0:a.contentWindow)||void 0===o||o.scrollTo(null!=s?s:0,r),v(l,m.background.warning.light,2,F,O)):r&&E.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=s?s:0,r),v(l,m.background.warning.light,2,F,O))}:void 0,showVariableModal:j,discountCode:A,setDiscountCode:V}):F===p.WHATSAPP&&q?t(s,{whatsappSpecificPickerMeta:k,template:G,showVariableModal:j,variableListForImage:M,discountCode:A,setDiscountCode:V}):t(b,{whatsappSpecificPickerMeta:k,template:G,onTemplateChange:e=>{null==N||N(e)},showVariableModal:j,variableListForImage:M,discountCode:A,setDiscountCode:V})}))]})),[p.WHATSAPP,p.SMS].includes(F)&&!u&&!z&&t(x,{children:t(d,Object.assign({color:m.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};export{S as default};

package/package.json

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