npm - @bikdotai/bik-component-library - Versions diffs - 0.0.579 → 0.0.580 - Mend

@bikdotai/bik-component-library 0.0.579 → 0.0.580

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

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

@@ -1,25 +1,24 @@
-/// <reference types="react" />
 import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
 import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
-import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
+import { WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
 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 { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { AllTemplateTypes, AllTemplateVariables, NonNullTemplateTypes } from '../template-preview/models/types';
+import { WebpushTemplateVariables } from '../template-preview/models/WebpushTemplate';
+import { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 import { VariableV3 } from '../variable-picker-v3/model';
 export interface TemplateContextMapperProps {
-    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate;
+    selectedTemplate: NonNullTemplateTypes;
     closeDialog?: () => void;
     showVariableMapping: boolean;
     channel: CHANNEL_TYPE;
     globalPlaceholders: GlobalPlaceholderType;
     /** List of variables being used in this template */
-    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
+    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | WebpushTemplateVariables;
     /** Only for initial-UI-purpose for the modal */
     htmlContent: string;
     showOnlyContent?: boolean;
-    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string, carouselProducts?: CarouselProduct[]): {
+    onTemplateSelect?(template: AllTemplateTypes, variables: AllTemplateVariables, display_content?: string, carouselProducts?: CarouselProduct[]): {
         error: string;
         errorIndexes?: number[];
         templateErrorIndexes?: {
@@ -56,5 +55,6 @@ export interface TemplateContextMapperProps {
     hideDeviceContainerInPreview?: boolean;
     maxCharLimit?: number;
     onDefaultVariableSelect?: (variable: VariableV3) => void;
+    skipDefaultVariableContent?: boolean;
 }
-export declare const TemplateContextMapper: React.FC<TemplateContextMapperProps>;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList: variableListFromProps, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, onDeleteSelectedProducts, fileName, setFileName, hideDeviceContainerInPreview, maxCharLimit, onDefaultVariableSelect, skipDefaultVariableContent, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -4,11 +4,9 @@ import Slider from 'react-slick';
 import { VariableListInterfaceV2 } from "../../add-variableV2";
 import { CarouselProduct } from "../modalElements/EditWhatsAppCarouselTemplateV2";
 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 { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../../template-preview/models/WhatsappCarouselTemplate";
-import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+import { globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
+import { AllTemplateTypes, AllTemplateVariables } from "../../template-preview/models/types";
+import { ExtrasWhatsapp } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
     hideFooterButton: boolean;
@@ -25,12 +23,12 @@ export declare const TemplateModalContext: React.Context<{
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
     setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
-    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    originalVariableList: AllTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<AllTemplateVariables>> | undefined;
     channel: CHANNEL_TYPE;
     setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
-    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null>> | undefined;
+    template: AllTemplateTypes;
+    setTemplate?: React.Dispatch<React.SetStateAction<AllTemplateTypes>> | undefined;
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
@@ -92,12 +90,12 @@ export declare const useTemplateModalContext: () => {
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
     setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
-    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    originalVariableList: AllTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<AllTemplateVariables>> | undefined;
     channel: CHANNEL_TYPE;
     setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
-    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null>> | undefined;
+    template: AllTemplateTypes;
+    setTemplate?: React.Dispatch<React.SetStateAction<AllTemplateTypes>> | undefined;
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;

package/dist/cjs/components/template-context-mapper/helpers/WebpushTemplateHelper.d.ts ADDED Viewed

@@ -0,0 +1,57 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { AllTemplateVariables, BUTTON_TYPE, CUSTOM_VARIABLE } from "../../template-preview";
+import { WebPushTemplateComponent, WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
+declare const useWebPushTemplate: () => {
+    processWebpushTemplate: (template: WebpushTemplateType, variableList: VariableListInterfaceV2[], originalVar?: AllTemplateVariables, disableEditVariable?: boolean) => Promise<{
+        templateVariableMapping: {
+            title: any;
+            body: any;
+            buttons: {
+                type: BUTTON_TYPE;
+                text: string;
+                url: string;
+                example: string[] | undefined;
+                buttonVariable: string;
+                index: number;
+            }[];
+            icon: CUSTOM_VARIABLE[];
+            header: CUSTOM_VARIABLE[];
+        };
+        webpushBroadcastConfig: {
+            title?: string[] | undefined;
+            body?: string[] | undefined;
+            icon?: string[] | undefined;
+            image?: string[] | undefined;
+            buttons?: string[] | undefined;
+            redirectionLink?: string[] | undefined;
+        };
+        template: {
+            name: string;
+            label: string;
+            templateId?: string | undefined;
+            channel: import("../../template-preview").CHANNEL_TYPE;
+            templateCategory: string;
+            category: string;
+            mapping?: {
+                title?: string[] | undefined;
+                body?: string[] | undefined;
+                buttons?: string[] | undefined;
+                icon?: string[] | undefined;
+                image?: string[] | undefined;
+            } | undefined;
+            templateVariables?: import("../../template-preview/models/WebpushTemplate").WebpushTemplateVariables | undefined;
+            webpushBroadcastConfig?: {
+                title?: string[] | undefined;
+                body?: string[] | undefined;
+                icon?: string[] | undefined;
+                image?: string[] | undefined;
+                buttons?: string[] | undefined;
+                redirectionLink?: string[] | undefined;
+            } | undefined;
+            components: WebPushTemplateComponent;
+            whatsappSpecificPickerMeta?: import("../../template-preview").WhatsAppPickerMeta | undefined;
+        };
+    }>;
+    isValidUrl: (url: string) => boolean;
+};
+export default useWebPushTemplate;

package/dist/cjs/components/template-context-mapper/helpers/WebpushTemplateHelper.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var t=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var i=require("../../template-preview/constants/TemplateConstants.js"),l=require("../../../utils/variableUtils.js");exports.default=()=>{function n(e,t,i,n){const r=t.map(((t,r)=>{const u=a(t);if(n)return{variableName:t,isEditableVariable:!1,updatedValue:t,index:r,variableValue:t,type:"string"};const s=function(e,t,i){const n=i&&i.length?i:l.extractVariables(e);if(!n||!n.length)return[];const a=[];return n.forEach(((e,i)=>{const l=o(t,`{{${e}}}`);if(l){const{actualValue:e,defaultValue:t}=l,n="{{custom.text}}"===e||"{{custom.url}}"===e;a.push({editable:n,variableVal:t,editableDefaultValues:t,variableName:e,idx:i})}})),a}(u?t:i,e);if(s.length>0){const e=s[0];return{variableName:e.variableName,isEditableVariable:!0,updatedValue:(null==e?void 0:e.updatedValue)?null==e?void 0:e.updatedValue:u?e.variableName:t,index:r,variableValue:e.variableVal,type:"string"}}return null})).filter((e=>null!==e));return r}const a=e=>e.includes("{{")&&e.includes("}}"),r=(e,t)=>e&&e.length?e.flatMap(((e,i)=>{var n;return a(e)?e.includes("editableVariable")?(null===(n=null==t?void 0:t[i])||void 0===n?void 0:n.value)||e:l.extractVariables(e).map((e=>`{{${e}}}`))||[]:e})):[];const o=(e,t)=>{for(const i of e)for(const e in i.variables){const l=i.variables[e];if(l.actualValue===t||t.includes("editableVariable")&&l.actualValue.includes("custom.text"))return l}return null};return{processWebpushTemplate:function(o,u,s,d){var b,v,c,p,m,h,f,L;return e.__awaiter(this,void 0,void 0,(function*(){const e=Object.assign({},o);e.components=function(e){let t;if("string"==typeof e)try{t=JSON.parse(e)}catch(e){console.error("Error parsing webpush component JSON:",e),t={}}else t=e;return t}(e.components);const{components:{title:V,body:g,buttons:w,icon:y,image:_},webpushBroadcastConfig:C}=e;let x={title:r(null!==(b=null==C?void 0:C.title)&&void 0!==b?b:[]),body:r(null!==(v=null==C?void 0:C.body)&&void 0!==v?v:[],null==g?void 0:g.variables),buttonsW:null!==(c=null==C?void 0:C.buttons)&&void 0!==c?c:[]};if(!e.webpushBroadcastConfig){const t=null!==(p=null==g?void 0:g.text)&&void 0!==p?p:"string"==typeof g?g:"",n=w&&(null==w?void 0:w.length)?w.map((e=>(null==e?void 0:e.websiteLink)==i.CUSTOM_URL_PLACEHOLDER?null==e?void 0:e.redirectionLink:null==e?void 0:e.websiteLink)).filter((e=>void 0!==e)):[],a=l.extractVariables(t).map(((e,t)=>{var i,l;return e.includes("editableVariable")?(null===(l=null===(i=null==g?void 0:g.variables)||void 0===i?void 0:i[t])||void 0===l?void 0:l.value)||e:`{{${e}}}`}));x={title:l.extractVariables(V).map((e=>`{{${e}}}`)),body:a,buttonsW:[]};const r={title:null!==(m=x.title)&&void 0!==m?m:[],body:null!==(h=x.body)&&void 0!==h?h:[],buttons:n,icon:y?[y]:void 0,image:_?[_]:void 0,redirectionLink:(null==g?void 0:g.redirectionLink)?[null==g?void 0:g.redirectionLink]:[]};e.webpushBroadcastConfig=r}const W=w&&w.length?w.map(((e,l)=>({type:t.BUTTON_TYPE.URL,text:null==e?void 0:e.text,url:"https://d.bik.ai/{{1}}",example:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[l])?[""]:[x.buttonsW[l]]:e.redirectionLink?[e.redirectionLink]:void 0,buttonVariable:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[l])?x.buttonsW[l]:i.CUSTOM_URL_PLACEHOLDER_VAR:e.websiteLink?e.websiteLink==i.CUSTOM_URL_PLACEHOLDER?i.CUSTOM_URL_PLACEHOLDER_VAR:e.websiteLink:i.CUSTOM_URL_PLACEHOLDER_VAR,index:l}))):[],k={title:n(u,x.title,V,d),body:n(u,x.body,(null==g?void 0:g.text)||"",d),buttons:W};return{templateVariableMapping:{title:(null===(f=null==s?void 0:s.title)||void 0===f?void 0:f.length)?s.title:k.title,body:(null===(L=null==s?void 0:s.body)||void 0===L?void 0:L.length)?s.body:k.body,buttons:k.buttons,icon:[],header:[]},webpushBroadcastConfig:e.webpushBroadcastConfig,template:e}}))},isValidUrl:e=>{try{return new URL(e),!0}catch(e){return!1}}}};

package/dist/cjs/components/template-context-mapper/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './TemplateContextMapper';
 export * from './utils/getDataFromTemplateComponent';
 export * from './utils/validateIsUrl';
+export * from './helpers/WebpushTemplateHelper';

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

@@ -12,6 +12,7 @@ export interface BodyProps {
     fileName?: string;
     setFileName?: (name: string) => void;
     variableListFromProps?: VariableListInterfaceV2[];
+    skipDefaultVariableContent?: boolean;
 }
 declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Body;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaModal.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ interface EditMediaModalProps {
     editIconRef: React.MutableRefObject<HTMLDivElement | null>;
     fileRef: React.MutableRefObject<HTMLInputElement | null>;
     useEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;
+    skipAddVariable?: boolean;
 }
 declare const EditMediaModal: React.FC<EditMediaModalProps>;
 export default EditMediaModal;

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

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),i=require("../../../assets/icons/info.svg.js");require("../../curtain/CurtainHelper.js");var s=require("../../variable-picker-v3/model.js"),a=require("react"),r=require("../../button/Button.js"),o=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var l=require("../../spinner/Spinner.js"),n=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var d=require("../../../constants/Theme.js"),p=require("../../template-preview/models/TemplateMeta.js"),c=require("../../template-preview/models/WhatsAppTemplate.js"),u=require("../../TypographyStyle.js"),g=require("../../../utils/validator.js"),m=require("../../../assets/icons/file.svg.js"),j=require("../../../assets/icons/filePdf.svg.js"),h=require("../../../assets/icons/image.svg.js"),x=require("../../../assets/icons/upload.svg.js"),E=require("../context/templateModalContext.js"),v=require("../utils/validateIsUrl.js");exports.default=b=>{let{setOpenEditMedia:f,mediaComponentFormat:y,variableListForImage:T,openEditMedia:C,uploadMedia:M,fileRef:A,useEditWhatsappTemplateMediaResponse:I}=b;const{pod:q,setHideCrossButton:D,setHideFooterButton:O}=E.useTemplateModalContext(),[S,P]=a.useState(""),[R,w]=a.useState(void 0),[k,H]=a.useState(!1),[_,B]=a.useState("");let L;if(a.useEffect((()=>(O(!0),()=>{O(!1)})),[]),a.useEffect((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&w(e)}),[I.loading]),L=y===p.HEADER_TYPES.IMAGE?"image/png, image/jpeg":y===p.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!C)return e.jsx(e.Fragment,{});const V=()=>y===p.HEADER_TYPES.IMAGE?"Image":y===p.HEADER_TYPES.VIDEO?"Video":"Document";return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),f(!1),P("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(u.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{position:"relative",padding:16,borderRadius:4,border:k?`1px dashed ${d.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${d.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:d.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:I.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[I.loading?e.jsx(l.PureSpinner,{width:"40px",height:"40px",color:d.COLORS.content.brand}):e.jsx("div",Object.assign({style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:d.DEFAULT_THEME.colorsV2.background.base}},{children:y===p.HEADER_TYPES.IMAGE?e.jsx(h.default,{width:40,height:40}):y===p.HEADER_TYPES.VIDEO?e.jsx(m.default,{width:40,height:40}):e.jsx(j.default,{width:40,height:40})})),e.jsx(u.TitleMedium,{children:I.loading?"Upload in progress...":y===p.HEADER_TYPES.IMAGE?"Upload an image":y===p.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(u.BodySecondary,Object.assign({color:d.COLORS.content.secondary},{children:I.loading?`Your ${y.toLowerCase()} is getting loaded. This may take a couple of minutes.`:y===p.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":y===p.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!I.loading&&e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:e.jsx(n.InputWithVariables,{labelText:`${V()} URL`,onPickerToggle:e=>{D(!!e)},pickerType:s.PickerType.EMBEDDED,portalElement:null!=R?R:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{B(e.actualValue),H(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:S,prevVariable:{actualValue:"",variableType:"string"},variablesList:T,placeHolder:"Enter URL/Add variable",showAddButton:q!==c.POD.CAMPAIGN\|\|y===p.HEADER_TYPES.IMAGE})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(u.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(r.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:x.default,onClick:()=>{M(),H(!1)},size:"medium"})}))]}),k&&e.jsxs("div",Object.assign({style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4}},{children:[e.jsx(i.default,{width:16,height:16,color:d.COLORS.content.negative}),e.jsx(u.BodyCaption,Object.assign({style:{color:d.COLORS.content.negative}},{children:`Select ${V()}`}))]}))]})),!I.loading&&e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",marginTop:8}},{children:e.jsx(r.Button,{buttonText:`Add ${V()}`,onClick:()=>{_?g.validateURL(_)\|\|v.isVariable(_)?(M(_),f(!1),P(""),H(!1)):P("Enter valid URL"):H(!0)}})})),e.jsx("input",{ref:A,style:{display:"none"},type:"file",onChange:I.handleImageUpload,accept:L}),!!I.selectedImage&&e.jsx(o.BikImageCropper,{aspectRatio:15/8,src:I.selectedImage,onCropComplete:I.onCropComplete,onCancel:()=>{I.setLoading(!1),I.setSelectedImage(""),A.current&&(A.current.value="")}})]})};
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),i=require("../../../assets/icons/info.svg.js");require("../../curtain/CurtainHelper.js");var s=require("../../variable-picker-v3/model.js"),a=require("react"),r=require("../../button/Button.js"),o=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var l=require("../../spinner/Spinner.js"),n=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var d=require("../../../constants/Theme.js"),p=require("../../template-preview/models/TemplateMeta.js"),c=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var u=require("../../TypographyStyle.js"),g=require("../../../utils/validator.js"),m=require("../../../assets/icons/file.svg.js"),j=require("../../../assets/icons/filePdf.svg.js"),h=require("../../../assets/icons/image.svg.js"),x=require("../../../assets/icons/upload.svg.js"),E=require("../context/templateModalContext.js"),v=require("../utils/validateIsUrl.js");exports.default=b=>{let{setOpenEditMedia:f,mediaComponentFormat:y,variableListForImage:T,openEditMedia:C,uploadMedia:M,fileRef:A,useEditWhatsappTemplateMediaResponse:q,skipAddVariable:I}=b;const{pod:D,setHideCrossButton:O,setHideFooterButton:S}=E.useTemplateModalContext(),[P,R]=a.useState(""),[w,k]=a.useState(void 0),[H,L]=a.useState(!1),[_,B]=a.useState("");let V;if(a.useEffect((()=>(S(!0),()=>{S(!1)})),[]),a.useEffect((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&k(e)}),[q.loading]),V=y===p.HEADER_TYPES.IMAGE?"image/png, image/jpeg":y===p.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!C)return e.jsx(e.Fragment,{});const U=()=>y===p.HEADER_TYPES.IMAGE?"Image":y===p.HEADER_TYPES.VIDEO?"Video":"Document";return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),f(!1),R("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(u.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{position:"relative",padding:16,borderRadius:4,border:H?`1px dashed ${d.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${d.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:d.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:q.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[q.loading?e.jsx(l.PureSpinner,{width:"40px",height:"40px",color:d.COLORS.content.brand}):e.jsx("div",Object.assign({style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:d.DEFAULT_THEME.colorsV2.background.base}},{children:y===p.HEADER_TYPES.IMAGE?e.jsx(h.default,{width:40,height:40}):y===p.HEADER_TYPES.VIDEO?e.jsx(m.default,{width:40,height:40}):e.jsx(j.default,{width:40,height:40})})),e.jsx(u.TitleMedium,{children:q.loading?"Upload in progress...":y===p.HEADER_TYPES.IMAGE?"Upload an image":y===p.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(u.BodySecondary,Object.assign({color:d.COLORS.content.secondary},{children:q.loading?`Your ${y.toLowerCase()} is getting loaded. This may take a couple of minutes.`:y===p.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":y===p.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!q.loading&&e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:e.jsx(n.InputWithVariables,{labelText:`${U()} URL`,onPickerToggle:e=>{O(!!e)},pickerType:s.PickerType.EMBEDDED,portalElement:null!=w?w:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{B(e.actualValue),L(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:P,prevVariable:{actualValue:"",variableType:"string"},variablesList:T,placeHolder:I?"Enter URL":"Enter URL/Add variable",showAddButton:D!==c.POD.CAMPAIGN\|\|!I&&y===p.HEADER_TYPES.IMAGE})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(u.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(r.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:x.default,onClick:()=>{M(),L(!1)},size:"medium"})}))]}),H&&e.jsxs("div",Object.assign({style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4}},{children:[e.jsx(i.default,{width:16,height:16,color:d.COLORS.content.negative}),e.jsx(u.BodyCaption,Object.assign({style:{color:d.COLORS.content.negative}},{children:`Select ${U()}`}))]}))]})),!q.loading&&e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",marginTop:8}},{children:e.jsx(r.Button,{buttonText:`Add ${U()}`,onClick:()=>{_?g.validateURL(_)\|\|v.isVariable(_)?(M(_),f(!1),R(""),L(!1)):R("Enter valid URL"):L(!0)}})})),e.jsx("input",{ref:A,style:{display:"none"},type:"file",onChange:q.handleImageUpload,accept:V}),!!q.selectedImage&&e.jsx(o.BikImageCropper,{aspectRatio:15/8,src:q.selectedImage,onCropComplete:q.onCropComplete,onCancel:()=>{q.setLoading(!1),q.setSelectedImage(""),A.current&&(A.current.value="")}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditWebpushTemplate.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+export interface EditWebpushTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WebpushTemplateType;
+    onTemplateChange?: (template: WebpushTemplateType) => void;
+    showVariableModal?: boolean;
+}
+declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, }: EditWebpushTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWebpushTemplate;

package/dist/cjs/components/template-context-mapper/modalElements/EditWebpushTemplate.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),a=require("react"),i=require("../../template-preview/models/TemplateMeta.js"),n=require("../context/templateModalContext.js"),l=require("../helpers/WebpushTemplateHelper.js"),o=require("../utils/getDataFromTemplateComponent.js"),s=require("./EditMediaModal.js"),d=require("./EditMediaV2.js"),r=require("./EditMediaV2.style.js"),p=require("./useEditWhtasappTemplateMedia.js"),u=require("./VariableConnectorsPanel.js"),c=require("./VariableConnectorWhatsApp.js"),m=require("./VariableEditorHeader.js"),h=require("./WhatsAppTemplateCardButtonV2.js"),b=require("../../template-preview/models/Channels.js"),g=require("../../input/Input.js");exports.default=f=>{let{template:M,onTemplateChange:E,whatsappSpecificPickerMeta:j,showVariableModal:C}=f;var T,x,v;const[V,L]=a.useState(null),[y,I]=a.useState(null),{variableList:w,disableEditVariable:O,originalVariableList:q,setOriginalVariableList:R}=n.useTemplateModalContext(),{processWebpushTemplate:A,isValidUrl:S}=l.default(),[k,B]=a.useState(null),[D,W]=a.useState(null),[H,P]=a.useState(null);a.useEffect((()=>{w&&A(M,w,q,O).then((e=>{let{templateVariableMapping:t,template:a,webpushBroadcastConfig:i}=e;L(t),null==R||R(t),null==E||E(Object.assign({},a)),I(i)}))}),[w,O]);const{descriptionComponents:F,bodyVariables:U,titleVariables:_}=a.useMemo((()=>{if(V&&y){const e=o.getAllDataFromWebpushTemplateComponent(y,V);return k||B(e.iconImage),D||W(e.bannerImage),H||P(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[V,y]),{uploadMediaLink:N,uploadMediaFiles:Y,validateMimeType:G}=j,$=a.useRef(null),K=p.useEditWhatsappTemplateMedia({uploadMediaLink:N,uploadMediaFiles:Y,updateTemplateImageUrl:e=>J(e,"icon"),validateMimeType:G,mediaComponent:k,fileRef:$}),z=p.useEditWhatsappTemplateMedia({uploadMediaLink:N,uploadMediaFiles:Y,updateTemplateImageUrl:e=>J(e,"image"),validateMimeType:G,mediaComponent:D,fileRef:$});function J(e,a){const i=Object.assign({},M),n=t.cloneDeep(i);"icon"===a?(n.webpushBroadcastConfig.icon=[e],B([e])):"image"===a&&(n.webpushBroadcastConfig.image=[e],W([e])),null==E||E(Object.assign({},n))}function Q(e,a,i){var n;const l=Object.assign({},M),o=t.cloneDeep(l),s="custom"===a&&"string"==typeof e,d=null===(n=null==o?void 0:o.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(d&&d.length>0){d[i]=s?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},o.webpushBroadcastConfig),{buttons:d});o.webpushBroadcastConfig=t}null==E||E(o)}const X=K.openEditMedia?K:z.openEditMedia?z:null;if(X)return e.jsx(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(s.default,{mediaComponentFormat:i.HEADER_TYPES.IMAGE,uploadMedia:X.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:X,setOpenEditMedia:X.setOpenEditMedia,openEditMedia:X.openEditMedia,editIconRef:X.editIconRef,fileRef:$,skipAddVariable:!0})}));return e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[k&&k.length?e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(d.default,{imageName:k,handleImageChange:K.handleImageChange,mediaType:i.HEADER_TYPES.IMAGE,error:K.error,isLoading:K.loading,setOpenEditMedia:K.setOpenEditMedia})}):null,D&&D.length?e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(d.default,{imageName:D,handleImageChange:z.handleImageChange,mediaType:i.HEADER_TYPES.IMAGE,error:z.error,isLoading:z.loading,setOpenEditMedia:z.setOpenEditMedia})}):null,(null==U?void 0:U.length)||(null==_?void 0:_.length)?e.jsx(m.default,{containerStyle:{paddingTop: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,null==F?void 0:F.map(((t,a)=>e.jsx(c.default,{originalVariableList:V,originalList:q,channel:b.CHANNEL_TYPE.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:C},a))),H&&H.length?e.jsx("div",Object.assign({style:{padding:"16px 14px"}},{children:e.jsx(g.Input,{labelText:"Redirection Link",id:"redirection-link",value:H[0].replace("https://",""),errorMessage:S(H[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:O?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var a;const i=`https://${e}`;P([i]);const n=t.cloneDeep(M);(null===(a=n.webpushBroadcastConfig)||void 0===a?void 0:a.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[i]),null==E||E(Object.assign({},n))}(e)}})})):e.jsx(e.Fragment,{}),(null===(x=null===(T=null==V?void 0:V.buttons)||void 0===T?void 0:T.filter((e=>"URL"===e.type)))||void 0===x?void 0:x.length)>0&&e.jsx(m.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(v=null==V?void 0:V.buttons)||void 0===v?void 0:v.map(((t,a)=>e.jsx(h.default,{variableListIndex:a,CTAoptions:null==j?void 0:j.CTAoptions,button:t,currentVariableList:V,updateSelectedURLTemplateBtn:Q},`${a}`)))]}))};

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),l=require("../../../assets/icons/chevronLeft.svg.js"),n=require("../../../assets/icons/chevronRight.svg.js"),i=require("../../../assets/icons/PlusIcon.js"),o=require("lodash"),r=require("react"),a=require("../../button/Button.js"),s=require("../../icon-button/IconButton.js"),d=require("../../product-picker-v2/modal.js"),c=require("../Badge/index.js"),u=require("../context/templateModalContext.js"),p=require("./EditWhatsAppTemplateV2.js"),v=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var m=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var g=require("../../template-preview/models/WhatsAppTemplate.js"),h=require("../../TypographyStyle.js");exports.default=x=>{let{template:y,whatsappSpecificPickerMeta:j,showVariableModal:f,variableListForImage:b,discountCode:C,setDiscountCode:O}=x;var I,S,P,k,q,w,T,B;const{selectedCarouselIndex:L,setTemplate:R,pickerConf:E,isProductCarouselType:M,pod:D,cardCount:A,carouselProducts:F,setCarouselProducts:V,isError:W,cardImages:N,disableEditVariable:$,onDeleteSelectedProducts:_,setSelectedCarouselIndex:z,setVariableCallback:G,setShowVariablePicker:H,sliderRef:J}=u.useTemplateModalContext(),[K,Q]=r.useState(-1==L?"First Message (Step 1/2)":M?"Product Carousel "+((null===(S=null===(I=null==y?void 0:y.mapping)\|\|void 0===I?void 0:I.body)\|\|void 0===S?void 0:S.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(k=null===(P=null==y?void 0:y.mapping)\|\|void 0===P?void 0:P.body)\|\|void 0===k?void 0:k.length)?"(Step 2/2)":"")),[U,X]=r.useState(!1),[Y,Z]=r.useState(!1),ee=L===(null!=A?A:-1)-1,te=(null!=L?L:-1)<1;r.useEffect((()=>{var e,t,l,n;Q(-1==L?"First Message (Step 1/2)":M?"Product Carousel "+((null===(t=null===(e=null==y?void 0:y.mapping)\|\|void 0===e?void 0:e.body)\|\|void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(n=null===(l=null==y?void 0:y.mapping)\|\|void 0===l?void 0:l.body)\|\|void 0===n?void 0:n.length)?"(Step 2/2)":""))}),[L]);const le=e=>{null==V\|\|V([{name:"variable",productName:e.actualValue}])};return e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=L&&L>=0&&!!(null===(w=null===(q=null==y?void 0:y.mapping)\|\|void 0===q?void 0:q.body)\|\|void 0===w?void 0:w.length)&&e.jsx(s.IconButton,{Icon:t.default,onClick:()=>{null==z\|\|z(-1)}}),e.jsx(h.TitleMedium,Object.assign({style:{marginLeft:10}},{children:K}))]})),M&&(null!==(T=null==F?void 0:F.length)&&void 0!==T?T:0)>0&&null!=L&&L>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(v.ProductBox,{editItem:()=>{1===(null==F?void 0:F.length)&&"variable"===F[0].name?(G((()=>le)),H(!0)):X(!U)},cardBody:1===(null==F?void 0:F.length)&&"variable"===F[0].name?`${F[0].productName}`:`${null==F?void 0:F.length} Products Selected`,hideIcon:1===(null==F?void 0:F.length)&&"variable"===F[0].name,deleteItem:()=>{var e;if(1===(null==F?void 0:F.length)&&"variable"===F[0].name)return void(null==V\|\|V([]));const t=o.cloneDeep(Object.assign({},y));t&&(N&&N.length>0?null==N\|\|N.forEach(((e,l)=>{var n;t.components[1].cards[l].components[0].example.header_handle=[null!==(n=N[l])&&void 0!==n?n:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)\|\|void 0===e\|\|e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==R\|\|R(t)),null==V\|\|V([]),null==_\|\|_()}}),F&&(null==F?void 0:F.length)>0&&"variable"!=F[0].name&&e.jsx(a.Button,{disabled:(null!==(B=null==F?void 0:F.length)&&void 0!==B?B:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{Z(!0),X(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!$&&M&&0===(null==F?void 0:F.length)&&null!=L&&L>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(h.TitleRegular,{children:"Product(s)"}),e.jsx(h.BodySecondary,{children:`Select ${null!=A?A:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:W?16:12,marginRight:W?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:W?`2px dashed ${m.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:W?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(i.default,{width:18,height:18,color:m.COLORS.content.secondary})})),onClick:e=>{X(!0)}}),D===g.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(h.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:W?`2px dashed ${m.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:W?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(i.default,{width:18,height:18,color:m.COLORS.content.secondary})})),onClick:e=>{G((()=>le)),H(!0)}})]})]})),W&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(c.Badge,{padding:"8px",errorText:"Please add products"})}))]}),!M&&(null!=L?L:-1)>-1&&e.jsxs("div",Object.assign({style:{display:"flex",background:m.COLORS.surface.hovered,alignItems:"center"}},{children:[e.jsx(s.IconButton,{Icon:l.default,disabled:te,width:8,height:14,svgStyle:te?{}:{color:m.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==J?void 0:J.current)\|\|void 0===e\|\|e.slickPrev(),(null!=L?L:-1)<1\|\|null==z\|\|z((e=>e-1))}}),e.jsx(h.TitleRegular,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:m.COLORS.content.secondary},{children:`Card ${(null!=L?L:0)+1}/${A}`})),e.jsx(s.IconButton,{Icon:n.default,width:8,height:14,disabled:ee,svgStyle:ee?{}:{color:m.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==J?void 0:J.current)\|\|void 0===e\|\|e.slickNext(),(null!=L?L:-1)>=(null!=A?A:-1)-1\|\|null==z\|\|z((e=>e+1))}})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:j,template:y,onTemplateChange:e=>{null==R\|\|R(e)},showVariableModal:f,variableListForImage:b,discountCode:C,setDiscountCode:O}),U&&E&&e.jsx(d.ProductPickerModal,{zIndex:200,startupScreen:Y?d.ScreenName.RearrangeProducts:d.ScreenName.Collections,rearrangeEnabled:!0,storeId:E.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,n=l.productId,i=l.variantId;e in t\|\|(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),n in t[e].products\|\|(t[e].products[n]={variants:{},name:(null==l?void 0:l.productName)\|\|"",image:(null==l?void 0:l.productImage)\|\|""}),t[e].products[n].variants[i]={name:(null==l?void 0:l.name)\|\|"",price:"",image:(null==l?void 0:l.image)\|\|"",quantity:l.quantity\|\|0,displayOrder:l.displayOrder}}return t}return{}})(null!=F?F:[]),collectionFetcher:E.fetchCollections,productFetcher:E.fetchProducts,onAdd:(e,t)=>{var l,n,i,r,a,s;Z(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const o=e[t].products;if(void 0!==o&&Object.keys(o).length)for(const e of Object.keys(o)){const c=o[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:v,quantity:m,displayOrder:g}=c[u],h={name:p,image:null!==(n=null!=v?v:null===(l=o[e])\|\|void 0===l?void 0:l.image)&&void 0!==n?n:"",quantity:m,variantId:u,productId:e,displayOrder:g,collectionId:t,productName:null!==(r=null===(i=o[e])\|\|void 0===i?void 0:i.name)&&void 0!==r?r:"",productImage:null!==(s=null===(a=o[e])\|\|void 0===a?void 0:a.image)&&void 0!==s?s:""};d.push(h)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=d.map((e=>e.image)),p=o.cloneDeep(Object.assign({},y));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==N?void 0:N[t])&&void 0!==l?l:""]})),null==R\|\|R(p)),null==V\|\|V(c),X(!1)},searchInCollectionFetcher:E.searchInCollection,searchFetcher:E.searchProducts,visible:U,onClose:()=>{X(!1)},exactLimit:null!=A?A:1})]}))};
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),l=require("../../../assets/icons/chevronLeft.svg.js"),n=require("../../../assets/icons/chevronRight.svg.js"),i=require("../../../assets/icons/PlusIcon.js"),o=require("lodash"),r=require("react"),a=require("../../button/Button.js"),s=require("../../icon-button/IconButton.js"),d=require("../../product-picker-v2/modal.js"),c=require("../Badge/index.js"),u=require("../context/templateModalContext.js"),p=require("./EditWhatsAppTemplateV2.js"),v=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var m=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var h=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var g=require("../../TypographyStyle.js");exports.default=x=>{let{template:y,whatsappSpecificPickerMeta:j,showVariableModal:f,variableListForImage:b,discountCode:C,setDiscountCode:O}=x;var I,S,P,q,w,k,T,B;const{selectedCarouselIndex:L,setTemplate:R,pickerConf:E,isProductCarouselType:M,pod:D,cardCount:A,carouselProducts:F,setCarouselProducts:V,isError:W,cardImages:N,disableEditVariable:$,onDeleteSelectedProducts:_,setSelectedCarouselIndex:z,setVariableCallback:G,setShowVariablePicker:H,sliderRef:J}=u.useTemplateModalContext(),[K,Q]=r.useState(-1==L?"First Message (Step 1/2)":M?"Product Carousel "+((null===(S=null===(I=null==y?void 0:y.mapping)\|\|void 0===I?void 0:I.body)\|\|void 0===S?void 0:S.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(q=null===(P=null==y?void 0:y.mapping)\|\|void 0===P?void 0:P.body)\|\|void 0===q?void 0:q.length)?"(Step 2/2)":"")),[U,X]=r.useState(!1),[Y,Z]=r.useState(!1),ee=L===(null!=A?A:-1)-1,te=(null!=L?L:-1)<1;r.useEffect((()=>{var e,t,l,n;Q(-1==L?"First Message (Step 1/2)":M?"Product Carousel "+((null===(t=null===(e=null==y?void 0:y.mapping)\|\|void 0===e?void 0:e.body)\|\|void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(n=null===(l=null==y?void 0:y.mapping)\|\|void 0===l?void 0:l.body)\|\|void 0===n?void 0:n.length)?"(Step 2/2)":""))}),[L]);const le=e=>{null==V\|\|V([{name:"variable",productName:e.actualValue}])};return e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=L&&L>=0&&!!(null===(k=null===(w=null==y?void 0:y.mapping)\|\|void 0===w?void 0:w.body)\|\|void 0===k?void 0:k.length)&&e.jsx(s.IconButton,{Icon:t.default,onClick:()=>{null==z\|\|z(-1)}}),e.jsx(g.TitleMedium,Object.assign({style:{marginLeft:10}},{children:K}))]})),M&&(null!==(T=null==F?void 0:F.length)&&void 0!==T?T:0)>0&&null!=L&&L>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(v.ProductBox,{editItem:()=>{1===(null==F?void 0:F.length)&&"variable"===F[0].name?(G((()=>le)),H(!0)):X(!U)},cardBody:1===(null==F?void 0:F.length)&&"variable"===F[0].name?`${F[0].productName}`:`${null==F?void 0:F.length} Products Selected`,hideIcon:1===(null==F?void 0:F.length)&&"variable"===F[0].name,deleteItem:()=>{var e;if(1===(null==F?void 0:F.length)&&"variable"===F[0].name)return void(null==V\|\|V([]));const t=o.cloneDeep(Object.assign({},y));t&&(N&&N.length>0?null==N\|\|N.forEach(((e,l)=>{var n;t.components[1].cards[l].components[0].example.header_handle=[null!==(n=N[l])&&void 0!==n?n:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)\|\|void 0===e\|\|e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==R\|\|R(t)),null==V\|\|V([]),null==_\|\|_()}}),F&&(null==F?void 0:F.length)>0&&"variable"!=F[0].name&&e.jsx(a.Button,{disabled:(null!==(B=null==F?void 0:F.length)&&void 0!==B?B:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{Z(!0),X(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!$&&M&&0===(null==F?void 0:F.length)&&null!=L&&L>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(g.TitleRegular,{children:"Product(s)"}),e.jsx(g.BodySecondary,{children:`Select ${null!=A?A:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:W?16:12,marginRight:W?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:W?`2px dashed ${m.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:W?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(i.default,{width:18,height:18,color:m.COLORS.content.secondary})})),onClick:e=>{X(!0)}}),D===h.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(g.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:W?`2px dashed ${m.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:W?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(i.default,{width:18,height:18,color:m.COLORS.content.secondary})})),onClick:e=>{G((()=>le)),H(!0)}})]})]})),W&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(c.Badge,{padding:"8px",errorText:"Please add products"})}))]}),!M&&(null!=L?L:-1)>-1&&e.jsxs("div",Object.assign({style:{display:"flex",background:m.COLORS.surface.hovered,alignItems:"center"}},{children:[e.jsx(s.IconButton,{Icon:l.default,disabled:te,width:8,height:14,svgStyle:te?{}:{color:m.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==J?void 0:J.current)\|\|void 0===e\|\|e.slickPrev(),(null!=L?L:-1)<1\|\|null==z\|\|z((e=>e-1))}}),e.jsx(g.TitleRegular,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:m.COLORS.content.secondary},{children:`Card ${(null!=L?L:0)+1}/${A}`})),e.jsx(s.IconButton,{Icon:n.default,width:8,height:14,disabled:ee,svgStyle:ee?{}:{color:m.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==J?void 0:J.current)\|\|void 0===e\|\|e.slickNext(),(null!=L?L:-1)>=(null!=A?A:-1)-1\|\|null==z\|\|z((e=>e+1))}})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:j,template:y,onTemplateChange:e=>{null==R\|\|R(e)},showVariableModal:f,variableListForImage:b,discountCode:C,setDiscountCode:O}),U&&E&&e.jsx(d.ProductPickerModal,{zIndex:200,startupScreen:Y?d.ScreenName.RearrangeProducts:d.ScreenName.Collections,rearrangeEnabled:!0,storeId:E.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,n=l.productId,i=l.variantId;e in t\|\|(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),n in t[e].products\|\|(t[e].products[n]={variants:{},name:(null==l?void 0:l.productName)\|\|"",image:(null==l?void 0:l.productImage)\|\|""}),t[e].products[n].variants[i]={name:(null==l?void 0:l.name)\|\|"",price:"",image:(null==l?void 0:l.image)\|\|"",quantity:l.quantity\|\|0,displayOrder:l.displayOrder}}return t}return{}})(null!=F?F:[]),collectionFetcher:E.fetchCollections,productFetcher:E.fetchProducts,onAdd:(e,t)=>{var l,n,i,r,a,s;Z(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const o=e[t].products;if(void 0!==o&&Object.keys(o).length)for(const e of Object.keys(o)){const c=o[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:v,quantity:m,displayOrder:h}=c[u],g={name:p,image:null!==(n=null!=v?v:null===(l=o[e])\|\|void 0===l?void 0:l.image)&&void 0!==n?n:"",quantity:m,variantId:u,productId:e,displayOrder:h,collectionId:t,productName:null!==(r=null===(i=o[e])\|\|void 0===i?void 0:i.name)&&void 0!==r?r:"",productImage:null!==(s=null===(a=o[e])\|\|void 0===a?void 0:a.image)&&void 0!==s?s:""};d.push(g)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=d.map((e=>e.image)),p=o.cloneDeep(Object.assign({},y));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==N?void 0:N[t])&&void 0!==l?l:""]})),null==R\|\|R(p)),null==V\|\|V(c),X(!1)},searchInCollectionFetcher:E.searchInCollection,searchFetcher:E.searchProducts,visible:U,onClose:()=>{X(!1)},exactLimit:null!=A?A:1})]}))};

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.d.ts CHANGED Viewed

@@ -1,13 +1,10 @@
 import React from 'react';
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
-import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
-import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
-import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+import { AllTemplateTypes } from "../../template-preview/models/types";
 declare const MobilePreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
+    template: AllTemplateTypes;
     showSampleValues?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default MobilePreview;

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t),p=o(i);const d=p.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t),p=o(i);const d=p.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;

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

@@ -15,6 +15,7 @@ export interface TemplateSelectModalContentProps {
     fileName?: string;
     setFileName?: (name: string) => void;
     variableListFromProps?: VariableListInterfaceV2[];
+    skipDefaultVariableContent?: boolean;
 }
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, variableListFromProps, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, variableListFromProps, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, skipDefaultVariableContent, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
 export default TemplateSelectModalContent;

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

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

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
+import { WEB_PUSH_COMPONENT_TYPE } from "../../template-preview/models/WebpushTemplate";
 import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
@@ -14,7 +15,7 @@ export interface VariableConnectorProps {
     showVariableModal?: boolean;
     setShowDiscountCheckBox?: any;
     buttonType?: BUTTON_TYPE;
-    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
+    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer' | WEB_PUSH_COMPONENT_TYPE;
     CTAoptions?: ButtonPlaceHolderOptions[];
 }
 declare const VariableConnector: React.FC<VariableConnectorProps>;

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../custom-date-time/CustomDateTime.js"),o=require("../../dropdown/Dropdown.js"),u=require("../../input/Input.js"),d=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),c=require("../../template-preview/models/Channels.js"),p=require("../../template-preview/models/WhatsAppTemplate.js"),m=require("../../TypographyStyle.js"),v=require("../../../utils/StringUtils.js"),b=require("../../../constants/Theme.js"),g=require("../context/templateModalContext.js"),O=require("../custom-hooks/useAdditionalVariables.js"),j=require("../utils/getVariableNameEmail.js"),y=require("./QueryParamsComponent.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var _=x(n);const h=_.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../custom-date-time/CustomDateTime.js"),o=require("../../dropdown/Dropdown.js"),u=require("../../input/Input.js"),d=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),c=require("../../template-preview/models/Channels.js"),p=require("../../template-preview/models/WebpushTemplate.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),O=require("../context/templateModalContext.js"),j=require("../custom-hooks/useAdditionalVariables.js"),y=require("../utils/getVariableNameEmail.js"),x=require("./QueryParamsComponent.js");function E(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var _=E(n);const T=_.default.div`
 	/* surface/$color-background-warning-light */
-	background: ${e=>e.focused&&e.channel===c.CHANNEL_TYPE.EMAIL?b.COLORS.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===c.CHANNEL_TYPE.EMAIL?g.COLORS.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,T=_.default.div`
+`,h=_.default.div`
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -13,4 +13,4 @@
 	background-color: rgba(0, 0, 0, 0.1);
 	z-index: 1000;
 	cursor: not-allowed;
-`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},C={value:"static_expiry",label:"Static Expiry"};exports.Container=h,exports.default=n=>{let{onFocus:x,variable:_,index:N,showVariableModal:P,setShowDiscountCheckBox:V,componentType:A,CTAoptions:k,buttonType:S}=n;var L,D,B,H,w,Y,U,q,R;const[M,W]=i.useState(!1),[I,$]=i.useState(""),[z,Z]=i.useState([]),[F,G]=i.useState(),[Q,K]=i.useState(!1),{variableList:J,setVariableList:X,setVariableCallback:ee,setShowVariablePicker:te,device:le,channel:ae,isError:ie,originalVariableList:ne,template:se,templateSelectionTriggered:oe,setTemplate:ue,setDisplayContent:de,setOriginalVariableList:re,globalNormalizedPlaceholders:ce,enabledCustomText:pe,pod:me,selectedCarouselIndex:ve,isProductCarouselType:be,isWhatsappCarousel:ge,disableEditVariable:Oe,disableEditExpiry:je,templateErrorIndexes:ye,maxCharLimit:xe}=g.useTemplateModalContext();function _e(e,t){var l,a,i;const n=e;$(""),G(n),ae===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(Te(null!==(l=n.value)&&void 0!==l?l:"","string"),null==fe||fe(null!==(a=_.index)&&void 0!==a?a:0,n.value,!0)):(null==fe||fe(null!==(i=_.index)&&void 0!==i?i:0,"",!0,n.value),Te("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?Te(n.value,"url"===n.bikPlaceholderType?"link":"string"):($(""),Te("",n.value))}function he(e,t){var l;$(t);const a="custom_link"===(null==F?void 0:F.value)&&t?t.includes("https")?t:`https://${t}`:t;Te(a,"static_expiry"===e?"string":e),ae===c.CHANNEL_TYPE.WHATSAPP&&(null==fe||fe(null!==(l=_.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function Te(e,t,l){var i,n,s,o;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(ae!==c.CHANNEL_TYPE.WHATSAPP){const l=j.getVariableNameForEmailByIndex(N+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===le?"template_html_mobile":"template_html_desktop"),n=ae===c.CHANNEL_TYPE.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:_.variableName);const s=ne.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==re||re(s)}if(ae===c.CHANNEL_TYPE.WHATSAPP){if(null!=ve&&ve>-1&&be){const l=Object.assign({},ne).cards.map(((l,a)=>{var i,n;return"BODY"===A?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===A?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==re||re((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=ve&&ve>-1?ne.cards[ve]:ne;let d=i.body,r=i.header,c=i.buttons;if("BODY"===A?d=null===(n=i.body)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===A?r=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===A&&(c=null===(o=i.buttons)||void 0===o?void 0:o.map(((a,i)=>i===N?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=ve&&ve>-1){const e=a.cloneDeep(ne.cards);e[ve]={header:r,body:d,buttons:c},null==re||re((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==re||re((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function fe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ve&&ve>-1&&be){const s=Object.assign({},se).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(se);if(l){const l=null===(n=Object.assign({},se).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===A)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===A&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=se.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==ue||ue(o))}const p=null!=ve&&ve>-1?{components:null===(s=Object.assign({},se).components[1].cards)||void 0===s?void 0:s[ve].components,mapping:null===(o=Object.assign({},se).mapping.cards)||void 0===o?void 0:o[ve]}:Object.assign({},se),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===A){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===A)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===A&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===A&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===A&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ve&&ve>-1&&se){const e=a.cloneDeep(se);e.components[1].cards[ve].components=p.components,e.mapping.cards[ve]=p.mapping,null==ue||ue(e)}else null==ue||ue(Object.assign({},p))}i.useEffect((()=>{M&&(null==x||x())}),[M]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===le?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ae===c.CHANNEL_TYPE.EMAIL&&(null==de||de(o))}()}),[oe]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(ae!==c.CHANNEL_TYPE.MESSAGE||pe){"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,E]}),G(f)):"date_time"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,E]}),G(C)):(l.push({label:"",options:[f,E,C]}),G(E));const e=null!=ce?ce:[];Z([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ce?ce:[];Z([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((ae===c.CHANNEL_TYPE.WHATSAPP||ae===c.CHANNEL_TYPE.EMAIL||ae===c.CHANNEL_TYPE.MESSAGE)&&_.updatedValue)if(r.placeHolderNamePattern.test(_.updatedValue)&&ae===c.CHANNEL_TYPE.WHATSAPP||_.updatedValue.startsWith("{{")&&ae!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(P){let t=e.updatedValue;if(me===p.POD.CHATBOT&&"BUTTONS"===A){const l=null==k?void 0:k.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(_,a,ae);e.value&&G(e)}else"date_time"===_.type?(G(C),$(_.updatedValue),fe(null!==(e=_.index)&&void 0!==e?e:0,_.updatedValue)):(null===(t=_.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(G(f),$(_.updatedValue.split("https://")[1])):(G(E),$(_.updatedValue))}()}),[ve]),i.useEffect((()=>{le&&F&&I&&setTimeout((()=>{Te("custom_link"===(null==F?void 0:F.value)&&I?I.includes("https")?I:`https://${I}`:I,F.value)}),100)}),[le]),i.useEffect((()=>{!Q&&F&&_.updatedValue&&setTimeout((()=>{Te("custom_link"===(null==F?void 0:F.value)&&_.updatedValue?_.updatedValue.includes("https")?_.updatedValue:`https://${_.updatedValue}`:_.updatedValue,F.value),K(!0)}),100)}),[F]);const Ee=e=>{null==V||V(!1),"{{custom.url}}"===e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"static_expiry"}):_e({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e.jsxs(h,Object.assign({channel:ae,focused:M,onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:ie&&!F?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(L=_.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:P?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==F?void 0:F.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,Object.assign({numberOfLines:1},{children:me===p.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==F?void 0:F.value)&&void 0!==D?D:"")?null==F?void 0:F.label:null==F?void 0:F.value:d.truncate(null!==(B=null==F?void 0:F.label)&&void 0!==B?B:"",20,!0)})),Oe||"date_time"===(null==_?void 0:_.type)&&je?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(S===p.BUTTON_TYPE.URL&&me===p.POD.CHATBOT){const e=O.updateVariables({variableList:J,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});X(e)}else if("limited_time_offer"===A){const e=O.updateVariables({variableList:J,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});X(e)}else if(S===p.BUTTON_TYPE.COPY_CODE){const e=O.updateVariables({variableList:J,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});X(e)}})(),ee((()=>Ee)),te(!0)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:Oe,options:z,isSearchable:!1,onSelect:_e,defaultOptions:F?[Object.assign(Object.assign({},F),{selected:!0})]:[]})})),("custom_text"===(null==F?void 0:F.value)||"custom_link"===(null==F?void 0:F.value))&&e.jsx(u.Input,{state:Oe?"disabled":"none",labelText:"custom_text"===(null==F?void 0:F.value)?"Custom text value":"custom_link"===(null==F?void 0:F.value)?"Custom URL value":"",id:`variable-value-${null==F?void 0:F.value}-${N}`,value:I,errorMessage:ie&&(null===(H=null==ye?void 0:ye.buttons)||void 0===H?void 0:H.includes(null!==(w=null==_?void 0:_.index)&&void 0!==w?w:-1))?I&&0!==I.trim().length?"custom_link"!==F.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${I.trim()}`)&&0!==I.trim().length?"custom_link"!==F.value&&I.length>30?"Length cannot be more than 30":"BUTTONS"===A&&"custom_link"!==F.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:xe||("custom_link"===(null==F?void 0:F.value)?2e3:"BUTTONS"===A?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==F?void 0:F.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===F.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{he(F.value,e)}}),"static_expiry"===(null==F?void 0:F.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[Oe&&e.jsx(T,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:I?l.format(new Date(I),"hh:mm a"):l.format(new Date,"hh:mm a"),date:I?new Date(I):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{he("static_expiry",e.toISOString())}})]})),"link"===_.type&&"custom_link"!==(null==F?void 0:F.value)&&!be&&!ge&&me===p.POD.CHATBOT&&e.jsx(y.QueryParamsComponent,{isError:null!==(q=null===(Y=null==ye?void 0:ye.buttons)||void 0===Y?void 0:Y.includes(null!==(U=null==_?void 0:_.index)&&void 0!==U?U:-1))&&void 0!==q&&q,params:null!==(R=_.queryParams)&&void 0!==R?R:[],onChange:e=>{Te(_.updatedValue,"link",e)},variableValue:_.updatedValue})]}))};
+`,f={value:"custom_link",label:"Custom URL"},C={value:"custom_text",label:"Custom text"},N={value:"static_expiry",label:"Static Expiry"};exports.Container=T,exports.default=n=>{let{onFocus:E,variable:_,index:P,showVariableModal:L,setShowDiscountCheckBox:A,componentType:S,CTAoptions:V,buttonType:k}=n;var B,D,H,Y,U,w,q,W,R;const[I,M]=i.useState(!1),[$,z]=i.useState(""),[Z,F]=i.useState([]),[G,Q]=i.useState(),[K,J]=i.useState(!1),{variableList:X,setVariableList:ee,setVariableCallback:te,setShowVariablePicker:le,device:ae,channel:ie,isError:ne,originalVariableList:se,template:oe,templateSelectionTriggered:ue,setTemplate:de,setDisplayContent:re,setOriginalVariableList:ce,globalNormalizedPlaceholders:pe,enabledCustomText:me,pod:ve,selectedCarouselIndex:be,isProductCarouselType:ge,isWhatsappCarousel:Oe,disableEditVariable:je,disableEditExpiry:ye,templateErrorIndexes:xe,maxCharLimit:Ee}=O.useTemplateModalContext();function _e(e,t){var l,a,i,n;const s=e;z(""),Q(s),ie===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==s.value&&"custom_link"!==s.value&&"static_expiry"!==s.value?(he(null!==(l=s.value)&&void 0!==l?l:"","string"),null==fe||fe(null!==(a=_.index)&&void 0!==a?a:0,s.value,!0)):(null==fe||fe(null!==(i=_.index)&&void 0!==i?i:0,"",!0,s.value),he("","url"===s.bikPlaceholderType?"link":"string")):"custom_text"!==s.value&&"custom_link"!==s.value?(he(s.value,"url"===s.bikPlaceholderType?"link":"string"),ie==c.CHANNEL_TYPE.WEBPUSH&&(null==Ne||Ne(null!==(n=_.index)&&void 0!==n?n:0,s.value))):(z(""),he("",s.value))}function Te(e,t){var l,a;z(t);const i="custom_link"===(null==G?void 0:G.value)&&t?t.includes("https")?t:`https://${t}`:t;he(i,"static_expiry"===e?"string":e),ie===c.CHANNEL_TYPE.WHATSAPP&&(null==fe||fe(null!==(l=_.index)&&void 0!==l?l:0,i,"custom_link"===e,e)),ie===c.CHANNEL_TYPE.WEBPUSH&&(null==Ne||Ne(null!==(a=_.index)&&void 0!==a?a:0,i))}function he(e,t,l){var i,n,s,o;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(ie!==c.CHANNEL_TYPE.WHATSAPP&&ie!==c.CHANNEL_TYPE.WEBPUSH){const l=y.getVariableNameForEmailByIndex(P+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===ae?"template_html_mobile":"template_html_desktop"),n=ie===c.CHANNEL_TYPE.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:_.variableName);const s=se.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==ce||ce(s)}if(ie===c.CHANNEL_TYPE.WEBPUSH){const t=se,l=t=>null==t?void 0:t.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)),a={BODY:"BODY"===S?l(t.body):t.body,TITLE:S===p.WEB_PUSH_COMPONENT_TYPE.TITLE.toUpperCase()?l(t.title):t.title};null==ce||ce((e=>Object.assign(Object.assign({},e),{title:a.TITLE,body:a.BODY,buttons:t.buttons})))}if(ie===c.CHANNEL_TYPE.WHATSAPP){if(null!=be&&be>-1&&ge){const l=Object.assign({},se).cards.map(((l,a)=>{var i,n;return"BODY"===S?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>P===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===S?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===P?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ce||ce((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=be&&be>-1?se.cards[be]:se;let d=i.body,r=i.header,c=i.buttons;if("BODY"===S?d=null===(n=i.body)||void 0===n?void 0:n.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===S?r=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===S&&(c=null===(o=i.buttons)||void 0===o?void 0:o.map(((a,i)=>i===P?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=be&&be>-1){const e=a.cloneDeep(se.cards);e[be]={header:r,body:d,buttons:c},null==ce||ce((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ce||ce((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function fe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=be&&be>-1&&ge){const s=Object.assign({},oe).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===S){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(oe);if(l){const l=null===(n=Object.assign({},oe).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===S)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===S&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=oe.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==de||de(o))}const p=null!=be&&be>-1?{components:null===(s=Object.assign({},oe).components[1].cards)||void 0===s?void 0:s[be].components,mapping:null===(o=Object.assign({},oe).mapping.cards)||void 0===o?void 0:o[be]}:Object.assign({},oe),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===S){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===S&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=be&&be>-1&&oe){const e=a.cloneDeep(oe);e.components[1].cards[be].components=p.components,e.mapping.cards[be]=p.mapping,null==de||de(e)}else null==de||de(Object.assign({},p))}i.useEffect((()=>{I&&(null==E||E())}),[I]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===ae?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ie===c.CHANNEL_TYPE.EMAIL&&(null==re||re(o))}()}),[ue]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(ie!==c.CHANNEL_TYPE.MESSAGE||me){"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,C]}),Q(f)):"date_time"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,C]}),Q(N)):(l.push({label:"",options:[f,C,N]}),Q(C));const e=null!=pe?pe:[];F([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=pe?pe:[];F([{label:"",options:[C,f]},...e]),a=[{label:"",options:[C,f]},...e]}if((ie===c.CHANNEL_TYPE.WHATSAPP||ie===c.CHANNEL_TYPE.EMAIL||ie===c.CHANNEL_TYPE.MESSAGE||ie===c.CHANNEL_TYPE.WEBPUSH)&&_.updatedValue)if(r.placeHolderNamePattern.test(_.updatedValue)&&ie===c.CHANNEL_TYPE.WHATSAPP||_.updatedValue.startsWith("{{")&&ie!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(L){let t=e.updatedValue;if(ve===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(_,a,ie);e.value&&Q(e)}else"date_time"===_.type?(Q(N),z(_.updatedValue),fe(null!==(e=_.index)&&void 0!==e?e:0,_.updatedValue)):(null===(t=_.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Q(f),z(_.updatedValue.split("https://")[1])):(Q(C),z(_.updatedValue))}()}),[be]),i.useEffect((()=>{ae&&G&&$&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&$?$.includes("https")?$:`https://${$}`:$,G.value)}),100)}),[ae]),i.useEffect((()=>{!K&&G&&_.updatedValue&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&_.updatedValue?_.updatedValue.includes("https")?_.updatedValue:`https://${_.updatedValue}`:_.updatedValue,G.value),J(!0)}),100)}),[G]);const Ce=e=>{null==A||A(!1),"{{custom.url}}"===e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"static_expiry"}):_e({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ne(e,t){var l;const i=a.cloneDeep(oe),n=S.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[n])&&(i.webpushBroadcastConfig[n][e]=t),null==de||de(Object.assign({},i))}return e.jsxs(T,Object.assign({channel:ie,focused:I,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:ne&&!G?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(B=_.variableName)||void 0===B?void 0:B.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:L?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==G?void 0:G.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ve===m.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==G?void 0:G.value)&&void 0!==D?D:"")?null==G?void 0:G.label:null==G?void 0:G.value:d.truncate(null!==(H=null==G?void 0:G.label)&&void 0!==H?H:"",20,!0)})),je||"date_time"===(null==_?void 0:_.type)&&ye?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(k===m.BUTTON_TYPE.URL&&ve===m.POD.CHATBOT){const e=j.updateVariables({variableList:X,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ee(e)}else if("limited_time_offer"===S){const e=j.updateVariables({variableList:X,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ee(e)}else if(k===m.BUTTON_TYPE.COPY_CODE){const e=j.updateVariables({variableList:X,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ee(e)}})(),te((()=>Ce)),le(!0)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:je,options:Z,isSearchable:!1,onSelect:_e,defaultOptions:G?[Object.assign(Object.assign({},G),{selected:!0})]:[]})})),("custom_text"===(null==G?void 0:G.value)||"custom_link"===(null==G?void 0:G.value))&&e.jsx(u.Input,{state:je?"disabled":"none",labelText:"custom_text"===(null==G?void 0:G.value)?"Custom text value":"custom_link"===(null==G?void 0:G.value)?"Custom URL value":"",id:`variable-value-${null==G?void 0:G.value}-${P}`,value:$,errorMessage:ne&&(null===(Y=null==xe?void 0:xe.buttons)||void 0===Y?void 0:Y.includes(null!==(U=null==_?void 0:_.index)&&void 0!==U?U:-1))?$&&0!==$.trim().length?"custom_link"!==G.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${$.trim()}`)&&0!==$.trim().length?"custom_link"!==G.value&&$.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==G.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Ee||("custom_link"===(null==G?void 0:G.value)?2e3:"BUTTONS"===S?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==G?void 0:G.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===G.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Te(G.value,e)}}),"static_expiry"===(null==G?void 0:G.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[je&&e.jsx(h,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:$?l.format(new Date($),"hh:mm a"):l.format(new Date,"hh:mm a"),date:$?new Date($):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Te("static_expiry",e.toISOString())}})]})),"link"===_.type&&"custom_link"!==(null==G?void 0:G.value)&&!ge&&!Oe&&ve===m.POD.CHATBOT&&e.jsx(x.QueryParamsComponent,{isError:null!==(W=null===(w=null==xe?void 0:xe.buttons)||void 0===w?void 0:w.includes(null!==(q=null==_?void 0:_.index)&&void 0!==q?q:-1))&&void 0!==W&&W,params:null!==(R=_.queryParams)&&void 0!==R?R:[],onChange:e=>{he(_.updatedValue,"link",e)},variableValue:_.updatedValue})]}))};