@bikdotai/bik-component-library 0.0.533-beta.119 → 0.0.533-beta.13

package/dist/esm/components/tag/themes.d.ts

@@ -1,6 +1,6 @@
 import { TagTheme, TagType, TagVariant } from './model';
 export declare const getTagIconColor: (theme: TagTheme, type: TagType) => string;
 export declare const getTextColor: (theme: TagTheme, type: TagType) => string;
-export declare const generateBorder: (type: TagType, theme: TagTheme) => string;
+export declare const generateBorder: (type: TagType) => string;
 export declare const getBackgroundColor: (theme: TagTheme | 'circle', type: TagType) => string;
 export declare const getPadding: (variant: TagVariant) => "4px 8px" | "2px 6px";

package/dist/esm/components/tag/themes.js

@@ -1 +1 @@
-import{COLORS as r}from"../../constants/Theme.js";const n={blue:{iconColor:{light:r.content.blue,dark:r.content.primaryInverse},textColor:{light:r.content.blue,dark:r.content.primaryInverse},border:r.stroke.blue.lightAlt,backgroundColor:{light:r.background.blue.light,dark:r.content.blue,circle:r.content.blue}},purple:{iconColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},textColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},border:r.stroke.brandLightAlt,backgroundColor:{light:r.background.brandLight,dark:r.background.inverse,circle:r.background.inverse}},negative:{iconColor:{light:r.content.negative,dark:r.content.primaryInverse},textColor:{light:r.content.negative,dark:r.content.primaryInverse},border:r.stroke.negative.lightAlt,backgroundColor:{light:r.background.negative.light,dark:r.background.negative.vibrant,circle:r.background.negative.vibrant}},positive:{iconColor:{light:r.content.positive,dark:r.content.primaryInverse},textColor:{light:r.content.positive,dark:r.content.primaryInverse},border:r.stroke.positive.lightAlt,backgroundColor:{light:r.background.positive.light,dark:r.background.positive.vibrant,circle:r.background.positive.vibrant}},warning:{iconColor:{light:r.content.warning,dark:r.content.primary},textColor:{light:r.content.warning,dark:r.content.primary},border:r.stroke.warning.lightAlt,backgroundColor:{light:r.background.warning.light,dark:r.background.warning.vibrant,circle:r.background.warning.vibrant}},neutral:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse,circle:r.background.inverseLight}},white:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.standard,dark:r.background.inverse,circle:r.background.inverseLight}},grey:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.content.secondary,circle:r.content.secondary}},ai:{iconColor:{light:r.content.primaryInverse,dark:r.content.primaryInverse},textColor:{light:r.content.primaryInverse,dark:r.content.primaryInverse},border:"none",backgroundColor:{light:r.surface.aiLight,dark:r.surface.ai,circle:r.surface.ai}}},e=(r,e)=>n[e].iconColor[r],t=(r,e)=>n[e].textColor[r],o=(r,e)=>"ai"===r&&"light"===e?"rgba(254, 186, 210, 1)":n[r].border,i=(r,e)=>n[e].backgroundColor[r],a=r=>"regular"===r||"compressed"===r?"4px 8px":"2px 6px";export{o as generateBorder,i as getBackgroundColor,a as getPadding,e as getTagIconColor,t as getTextColor};
+import{COLORS as r}from"../../constants/Theme.js";const n={blue:{iconColor:{light:r.content.blue,dark:r.content.primaryInverse},textColor:{light:r.content.blue,dark:r.content.primaryInverse},border:r.stroke.blue.lightAlt,backgroundColor:{light:r.background.blue.light,dark:r.content.blue,circle:r.content.blue}},purple:{iconColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},textColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},border:r.stroke.brandLightAlt,backgroundColor:{light:r.background.brandLight,dark:r.background.inverse,circle:r.background.inverse}},negative:{iconColor:{light:r.content.negative,dark:r.content.primaryInverse},textColor:{light:r.content.negative,dark:r.content.primaryInverse},border:r.stroke.negative.lightAlt,backgroundColor:{light:r.background.negative.light,dark:r.background.negative.vibrant,circle:r.background.negative.vibrant}},positive:{iconColor:{light:r.content.positive,dark:r.content.primaryInverse},textColor:{light:r.content.positive,dark:r.content.primaryInverse},border:r.stroke.positive.lightAlt,backgroundColor:{light:r.background.positive.light,dark:r.background.positive.vibrant,circle:r.background.positive.vibrant}},warning:{iconColor:{light:r.content.warning,dark:r.content.primary},textColor:{light:r.content.warning,dark:r.content.primary},border:r.stroke.warning.lightAlt,backgroundColor:{light:r.background.warning.light,dark:r.background.warning.vibrant,circle:r.background.warning.vibrant}},neutral:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse,circle:r.background.inverseLight}},white:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.standard,dark:r.background.inverse,circle:r.background.inverseLight}},grey:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.content.secondary,circle:r.content.secondary}},ai:{iconColor:{light:r.content.primaryInverse,dark:r.content.primaryInverse},textColor:{light:r.content.primaryInverse,dark:r.content.primaryInverse},border:"none",backgroundColor:{light:r.surface.ai,dark:r.surface.ai,circle:r.surface.ai}}},e=(r,e)=>n[e].iconColor[r],t=(r,e)=>n[e].textColor[r],o=r=>n[r].border,i=(r,e)=>n[e].backgroundColor[r],a=r=>"regular"===r?"4px 8px":"2px 6px";export{o as generateBorder,i as getBackgroundColor,a as getPadding,e as getTagIconColor,t as getTextColor};

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

@@ -53,4 +53,4 @@ export interface TemplateContextMapperProps {
     setFileName?: (name: string) => void;
     hideDeviceContainerInPreview?: boolean;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, onDeleteSelectedProducts, fileName, setFileName, hideDeviceContainerInPreview, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+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, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,5 +1,6 @@
 import React, { LegacyRef } from 'react';
 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";
@@ -9,6 +10,14 @@ import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../
 import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
+    hideCrossButton: boolean;
+    setHideCrossButton: React.Dispatch<React.SetStateAction<boolean>>;
+    variableList: VariableListInterfaceV2[] | undefined;
+    setVariableList: React.Dispatch<React.SetStateAction<VariableListInterfaceV2[] | undefined>>;
+    variableCallback: any;
+    setVariableCallback: any;
+    showVariablePicker: boolean;
+    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
@@ -58,6 +67,14 @@ export declare const TemplateModalContext: React.Context<{
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
+    hideCrossButton: boolean;
+    setHideCrossButton: React.Dispatch<React.SetStateAction<boolean>>;
+    variableList: VariableListInterfaceV2[] | undefined;
+    setVariableList: React.Dispatch<React.SetStateAction<VariableListInterfaceV2[] | undefined>>;
+    variableCallback: any;
+    setVariableCallback: any;
+    showVariablePicker: boolean;
+    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;

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

@@ -1 +1 @@
-import e,{useContext as t}from"react";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:i.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1}),r=()=>t(l);export{l as TemplateModalContext,r as useTemplateModalContext};
+import e,{useContext as t}from"react";import{CHANNEL_TYPE as a}from"../../template-preview/models/Channels.js";const l=e.createContext({hideCrossButton:!1,setHideCrossButton:()=>{},variableList:[],setVariableList:()=>{},variableCallback:null,setVariableCallback:null,showVariablePicker:!1,setShowVariablePicker:()=>{},device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:a.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1}),i=()=>t(l);export{l as TemplateModalContext,i as useTemplateModalContext};

package/dist/esm/components/template-context-mapper/custom-hooks/useAdditionalVariables.d.ts

@@ -9,4 +9,4 @@ export type AdditionalVariableProps = {
  * Takes the previous variable list and adds any custom variable given as prop.
  * E.g - Custom Text, Custom URL, Static Expiry
  */
-export declare const useAdditionalVariables: (props: AdditionalVariableProps) => VariableListInterfaceV2[] | undefined;
+export declare const updateVariables: (props: AdditionalVariableProps) => VariableListInterfaceV2[] | undefined;

package/dist/esm/components/template-context-mapper/custom-hooks/useAdditionalVariables.js

@@ -1 +1 @@
-const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:l}=a;return e?[...e,{description:i,displayName:i,orderId:1,variables:{variableDisplayName:{description:void 0,displayName:r,actualValue:l,variableType:"any",isAvailable:!0}}}].sort(((a,e)=>a.orderId-e.orderId)):e};export{a as useAdditionalVariables};
+const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:l,variableValue:r}=a;if(!e)return e;const s={description:i,displayName:i,orderId:1,variables:{[l]:{description:void 0,displayName:l,actualValue:r,variableType:"any",isAvailable:!0}}};return e.find((a=>a.displayName===i))||e.unshift(s),e};export{a as updateVariables};

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

@@ -5,13 +5,13 @@ export interface BodyProps {
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     showSampleValues?: boolean;
     fileName?: string;
     setFileName?: (name: string) => void;
+    variableListFromProps?: VariableListInterfaceV2[];
 }
 declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Body;

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

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

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";const m=i.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as m}from"../../template-preview/models/Channels.js";const s=i.div`
 	background: ${o.surface.standard};
 	border: 1px solid ${o.stroke.primary};
 	border-radius: 8px;
@@ -17,4 +17,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(m,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:s.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
+`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(s,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:m.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};

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

@@ -1,6 +1,4 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2";
 export declare const DiscountCodeComponent: (props: {
     discountCode?: string | undefined;
     setDiscountCode?: ((code: string) => void) | undefined;
-    variableList?: VariableListInterfaceV2[] | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

@@ -5,7 +5,6 @@ export interface EditWhatsAppCarouselTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppCarouselTemplate;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
@@ -21,5 +20,5 @@ export interface CarouselProduct {
     productName: string;
     productImage: string;
 }
-declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppCarouselTemplateV2;

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

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

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

@@ -8,12 +8,11 @@ export interface EditWhatsAppTemplateV2Props {
     template: WhatsAppTemplate | WhatsAppCarouselTemplate;
     onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate) => void;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     fileName?: string;
     setFileName?: (name: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

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

@@ -1,7 +1,7 @@
-import{jsx as o,jsxs as e,Fragment as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useRef as i,useState as l,useEffect as a}from"react";import s from"styled-components";import{Input as d}from"../../input/Input.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as m}from"../utils/getDataFromTemplateComponent.js";import{isVariable as v}from"../utils/validateIsUrl.js";import{validateInputName as b}from"../utils/validateName.js";import{BackTrackComponent as g}from"./BackTrackComponent.js";import{DiscountCodeComponent as f}from"./DiscountCodeComponent.js";import h from"./EditMediaModal.js";import j from"./EditMediaV2.js";import{EditTemplateMediaContainer as O}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as C}from"./useEditWhtasappTemplateMedia.js";import T from"./VariableConnector.js";import{Container as x}from"./VariableConnectorsPanel.js";import y from"./VariableConnectorWhatsApp.js";import E from"./VariableEditorHeader.js";import V from"./WhatsAppTemplateCardButtonV2.js";const B=s=>{let{template:B,onTemplateChange:L,whatsappSpecificPickerMeta:M,showVariableModal:I,variableList:R,variableListForImage:U,discountCode:w,setDiscountCode:N,fileName:P,setFileName:A}=s;var D,_,H,S,F,Q,q,Y,K,W,$,G,X,z,J,Z,oo,eo,no,to,io,lo,ao,so,ro,po,uo,co,mo,vo,bo,go,fo,ho,jo,Oo,Co,To,xo;const yo=B.isCarouselType,{originalVariableList:Eo,pod:Vo,extras:Bo,selectedCarouselIndex:ko,isProductCarouselType:Lo}=u(),{descriptionComponents:Mo,urlBtns:Io,qrbBtns:Ro,imageComponent:Uo,bodyVariables:wo,headerVariables:No}=m(B),Po=i(null),Ao=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Do,_o]=l(!1),[Ho,So]=l(-1===ko?{descriptionComponents:Mo,urlBtns:Io,qrbBtns:Ro,imageComponent:Uo,bodyVariables:wo,headerVariables:No}:{}),{uploadMediaLink:Fo,uploadMediaFiles:Qo}=M,qo=C({uploadMediaLink:Fo,uploadMediaFiles:Qo,updateTemplateImageUrl:function(o,e){var n,i,l,a,s,d,r,p;let u;u=null!=ko&&ko>-1?{components:null===(i=null===(n=B.components[1])||void 0===n?void 0:n.cards)||void 0===i?void 0:i[ko].components,mapping:null===(a=null===(l=null==B?void 0:B.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[ko]}:Object.assign({},B);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==c&&c>-1&&(null==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:e,example:{header_handle:[o]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=u.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[ko]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},o)),Ko(!0)}else null==L||L(Object.assign({},u))},mediaComponent:yo?Ho.imageComponent:Uo,fileRef:Po}),[Yo,Ko]=l(!1),[Wo,$o]=l(P),[Go,Xo]=l();function zo(o,e,n){var i,l,a,s,d,r,p,u,c,m;const v=null!=ko&&ko>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[ko].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[ko]}:Object.assign({},B),b=t(v),g="custom"===e&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue?o.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=ko&&ko>-1&&Lo){const e=Object.assign({},B).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,t,i;if("BUTTONS"===o.type){const l=null===(e=o.buttons)||void 0===e?void 0:e.filter((o=>"URL"===o.type));let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},o),{buttons:s})}return o}))})))}):o})),i=null===(s=null===(a=Object.assign({},B).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((e=>{var n;return Object.assign(Object.assign({},e),{buttons:null===(n=null==e?void 0:e.buttons)||void 0===n?void 0:n.map((e=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=t(B);return l.components=e,l.mapping.cards=i,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===e&&"string"==typeof o,l=i?o:"string"!=typeof o&&o.defaultValue?o.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),m=null===(c=b.mapping)||void 0===c?void 0:c.buttons;m&&m.length>0&&(m[n]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?_o(!0):(_o(!1),null==N||N(""))}if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=b.components,o.mapping.cards[ko]=b.mapping,null==L||L(Object.assign({},o))}else null==L||L(b)}function Jo(o,e,n){var i,l,a,s,d,r,p;const u=null!=ko&&ko>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[ko].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[ko]}:Object.assign({},B);if(null!=ko&&ko>-1&&Lo){const e=Object.assign({},B).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,i,l;if("BUTTONS"===e.type){const a=null===(t=null==e?void 0:e.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=null==e?void 0:e.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},e),{buttons:d})}return e}))})))}):e})),i=t(B);return i.components=e,void(null==L||L(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const e=null===(s=null===(a=null==u?void 0:u.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(e){let t=e[n];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[c])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),a=[...u.components];a[c]=l,u.components=a}}if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=u.components,null==L||L(Object.assign({},o))}else null==L||L(u)}a((()=>{var o,e;if(null===(o=B.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))_o(!0);else{_o(!1);const o=null===(e=null==Bo?void 0:Bo.discountCodeExtra)||void 0===e?void 0:e[1];null==o||o("")}}),[B]),a((()=>{var o,e,n,t;if(null!=ko&&ko>-1){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[ko].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[ko]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=ko&&-1===ko){const{descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=m(B);So({descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[ko]),a((()=>{var o,e,n,t;if(null!=ko&&ko>-1&&Yo){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[ko].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[ko]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),Ko(!1)}}),[Yo]);const Zo=yo?Ho.imageComponent:Uo;return qo.openEditMedia?o(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(h,{mediaComponentFormat:null!==(D=Zo.format)&&void 0!==D?D:r.IMAGE,uploadMedia:qo.uploadMedia,variableListForImage:U||[],useEditWhatsappTemplateMediaResponse:qo,setOpenEditMedia:qo.setOpenEditMedia,openEditMedia:qo.openEditMedia,editIconRef:qo.editIconRef,fileRef:Po})})):e(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Lo?"420px":"auto"}},{children:[!!Ho.imageComponent&&!Lo&&e(O,{children:[o(j,{imageName:null!==(H=null===(_=null==Zo?void 0:Zo.example)||void 0===_?void 0:_.header_handle)&&void 0!==H?H:[],handleImageChange:qo.handleImageChange,mediaType:null==Zo?void 0:Zo.format,error:qo.error,isLoading:qo.loading,setOpenEditMedia:qo.setOpenEditMedia,selectedVariable:v(null!==(Q=null===(F=null===(S=null==Zo?void 0:Zo.example)||void 0===S?void 0:S.header_handle)||void 0===F?void 0:F[0])&&void 0!==Q?Q:"")?null===(Y=null===(q=null==Zo?void 0:Zo.example)||void 0===q?void 0:q.header_handle)||void 0===Y?void 0:Y[0]:(null===(W=null===(K=null==B?void 0:B.mapping)||void 0===K?void 0:K.header)||void 0===W?void 0:W[0])?null===(G=null===($=null==B?void 0:B.mapping)||void 0===$?void 0:$.header)||void 0===G?void 0:G[0]:qo.selectedVariable}),(null==Uo?void 0:Uo.format)==r.DOCUMENT?o(k,{children:o(d,{labelText:"PDF Name",placeholder:"Enter the name",value:Wo,errorMessage:Go||void 0,onBlur:()=>{if(!Wo)return null==A||A(""),void Xo("PDF name is Required");const o=b(Wo);null==A||A(Wo),Xo(o?"Please enter a valid PDF name":void 0)},onChangeText:o=>{Xo(""),$o(o)}})}):o(n,{})]}),(null===(X=Ho.bodyVariables)||void 0===X?void 0:X.length)>0&&o(E,{containerStyle:{paddingTop:Ho.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(z=Ho.descriptionComponents)||void 0===z?void 0:z.map(((e,n)=>o(y,{originalVariableList:null!=ko&&ko>-1?Eo.cards[ko]:Eo,type:e.type,descriptionComponent:e.component,showVariableModal:I,variableList:R},n))),(null===(oo=null===(Z=null!=ko&&ko>-1?null===(J=Eo.cards[ko])||void 0===J?void 0:J.buttons:null==Eo?void 0:Eo.buttons)||void 0===Z?void 0:Z.filter((o=>"URL"===o.type)))||void 0===oo?void 0:oo.length)>0&&o(E,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(to=null===(no=null!=ko&&ko>-1?null===(eo=Eo.cards[ko])||void 0===eo?void 0:eo.buttons:null==Eo?void 0:Eo.buttons)||void 0===no?void 0:no.filter((o=>Vo===p.CHATBOT||"URL"===o.type)))||void 0===to?void 0:to.map(((e,n)=>{if("URL"===e.type)return o(V,{variableListIndex:n,CTAoptions:null==M?void 0:M.CTAoptions,button:e,currentVariableList:null!=ko&&ko>-1?Object.assign({},Eo.cards[ko]):Object.assign({},Eo),updateSelectedURLTemplateBtn:zo,variableList:R},`${n}_${ko}`)})),Vo===p.CHATBOT&&(null===(lo=null===(io=Ro[0])||void 0===io?void 0:io.component)||void 0===lo?void 0:lo.buttons)&&(null===(ro=null===(so=null===(ao=Ro[0])||void 0===ao?void 0:ao.component)||void 0===so?void 0:so.buttons)||void 0===ro?void 0:ro.length)>0&&o(g,{backTrackMessage:null===(po=null==Bo?void 0:Bo.backTrackExtra)||void 0===po?void 0:po[0],setBackTrackMessage:null===(uo=null==Bo?void 0:Bo.backTrackExtra)||void 0===uo?void 0:uo[1]}),(null===(vo=null===(mo=null!=ko&&ko>-1?null===(co=Eo.cards[ko])||void 0===co?void 0:co.buttons:null==Eo?void 0:Eo.buttons)||void 0===mo?void 0:mo.filter((o=>"QUICK_REPLY"===o.type)))||void 0===vo?void 0:vo.length)>0&&(Vo!==p.CHATBOT?o(E,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(g,{backTrackMessage:null===(bo=null==Bo?void 0:Bo.backTrackExtra)||void 0===bo?void 0:bo[0],setBackTrackMessage:null===(go=null==Bo?void 0:Bo.backTrackExtra)||void 0===go?void 0:go[1]})),null===(jo=null===(ho=null!=ko&&ko>-1?null===(fo=Eo.cards[ko])||void 0===fo?void 0:fo.buttons:null==Eo?void 0:Eo.buttons)||void 0===ho?void 0:ho.filter((o=>"QUICK_REPLY"===o.type)))||void 0===jo?void 0:jo.map(((e,n)=>{if("QUICK_REPLY"===e.type&&Vo!==p.CHATBOT)return o(V,{variableListIndex:n,QRBoptions:null==M?void 0:M.QRBoptions,button:e,currentVariableList:null!=ko&&ko>-1?Object.assign({},Eo.cards[ko]):Object.assign({},Eo),updateSelectedQRBTemplateBtn:Jo},`${n}_${ko}`)})),Vo===p.CHATBOT&&Do&&o(f,{discountCode:null===(Oo=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Oo?void 0:Oo[0],setDiscountCode:null===(Co=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Co?void 0:Co[1],variableList:R}),null===(xo=null!=ko&&ko>-1?null===(To=Eo.cards[ko])||void 0===To?void 0:To.buttons:null==Eo?void 0:Eo.buttons)||void 0===xo?void 0:xo.map(((e,n)=>{var t,i,l;if("COPY_CODE"===e.type)return o(T,{index:n,variable:{variableName:null!==(t=e.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=e.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=e.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Ao,componentType:"BUTTONS"},n)}))]}))},k=s.div`
+import{jsx as o,jsxs as n,Fragment as e}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useRef as i,useState as l,useEffect as a}from"react";import s from"styled-components";import{Input as d}from"../../input/Input.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import{isVariable as m}from"../utils/validateIsUrl.js";import{validateInputName as v}from"../utils/validateName.js";import{BackTrackComponent as b}from"./BackTrackComponent.js";import{DiscountCodeComponent as g}from"./DiscountCodeComponent.js";import f from"./EditMediaModal.js";import h from"./EditMediaV2.js";import{EditTemplateMediaContainer as O}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as j}from"./useEditWhtasappTemplateMedia.js";import C from"./VariableConnector.js";import{Container as T}from"./VariableConnectorsPanel.js";import x from"./VariableConnectorWhatsApp.js";import y from"./VariableEditorHeader.js";import E from"./WhatsAppTemplateCardButtonV2.js";const V=s=>{let{template:V,onTemplateChange:k,whatsappSpecificPickerMeta:M,showVariableModal:I,variableListForImage:L,setDiscountCode:R,fileName:U,setFileName:w}=s;var N,P,A,_,D,H,S,F,Q,q,Y,K,W,$,G,X,z,J,Z,oo,no,eo,to,io,lo,ao,so,ro,po,uo,co,mo,vo,bo,go,fo,ho,Oo,jo;const Co=V.isCarouselType,{originalVariableList:To,pod:xo,extras:yo,selectedCarouselIndex:Eo,isProductCarouselType:Vo}=u(),{descriptionComponents:Bo,urlBtns:ko,qrbBtns:Mo,imageComponent:Io,bodyVariables:Lo,headerVariables:Ro}=c(V),Uo=i(null),[wo,No]=l(!1),[Po,Ao]=l(-1===Eo?{descriptionComponents:Bo,urlBtns:ko,qrbBtns:Mo,imageComponent:Io,bodyVariables:Lo,headerVariables:Ro}:{}),{uploadMediaLink:_o,uploadMediaFiles:Do}=M,Ho=j({uploadMediaLink:_o,uploadMediaFiles:Do,updateTemplateImageUrl:function(o,n){var e,i,l,a,s,d,r,p;let u;u=null!=Eo&&Eo>-1?{components:null===(i=null===(e=V.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[Eo].components,mapping:null===(a=null===(l=null==V?void 0:V.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Eo]}:Object.assign({},V);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==c&&c>-1&&(null==u?void 0:u.components[c])){const e=Object.assign(Object.assign({},u.components[c]),{format:n,example:{header_handle:[o]}}),t=[...u.components];t[c]=e,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=Eo&&Eo>-1){const o=t(V);o.components[1].cards[Eo].components=u.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[Eo]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==k||k(Object.assign({},o)),Fo(!0)}else null==k||k(Object.assign({},u))},mediaComponent:Co?Po.imageComponent:Io,fileRef:Uo}),[So,Fo]=l(!1),[Qo,qo]=l(U),[Yo,Ko]=l();function Wo(o,n,e){var i,l,a,s,d,r,p,u,c,m;const v=null!=Eo&&Eo>-1?{components:null===(i=Object.assign({},V).components[1].cards)||void 0===i?void 0:i[Eo].components,mapping:null===(l=Object.assign({},V).mapping.cards)||void 0===l?void 0:l[Eo]}:Object.assign({},V),b=t(v),g="custom"===n&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue?o.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Eo&&Eo>-1&&Vo){const n=Object.assign({},V).components.map((o=>{var n;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(n=o.cards)||void 0===n?void 0:n.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var n,t,i;if("BUTTONS"===o.type){const l=null===(n=o.buttons)||void 0===n?void 0:n.filter((o=>"URL"===o.type));let a=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},o),{buttons:s})}return o}))})))}):o})),i=null===(s=null===(a=Object.assign({},V).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((n=>{var e;return Object.assign(Object.assign({},n),{buttons:null===(e=null==n?void 0:n.buttons)||void 0===e?void 0:e.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=t(V);return l.components=n,l.mapping.cards=i,void(null==k||k(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof o,l=i?o:"string"!=typeof o&&o.defaultValue?o.defaultValue:"https://d.bik.ai/";let a=t[e];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),m=null===(c=b.mapping)||void 0===c?void 0:c.buttons;m&&m.length>0&&(m[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?No(!0):(No(!1),null==R||R(""))}if(null!=Eo&&Eo>-1){const o=t(V);o.components[1].cards[Eo].components=b.components,o.mapping.cards[Eo]=b.mapping,null==k||k(Object.assign({},o))}else null==k||k(b)}function $o(o,n,e){var i,l,a,s,d,r,p;const u=null!=Eo&&Eo>-1?{components:null===(i=Object.assign({},V).components[1].cards)||void 0===i?void 0:i[Eo].components,mapping:null===(l=Object.assign({},V).mapping.cards)||void 0===l?void 0:l[Eo]}:Object.assign({},V);if(null!=Eo&&Eo>-1&&Vo){const n=Object.assign({},V).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const a=null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let s=null!==(i=null==a?void 0:a[e])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=null==n?void 0:n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(V);return i.components=n,void(null==k||k(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null===(a=null==u?void 0:u.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(n){let t=n[e];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[c])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),a=[...u.components];a[c]=l,u.components=a}}if(null!=Eo&&Eo>-1){const o=t(V);o.components[1].cards[Eo].components=u.components,null==k||k(Object.assign({},o))}else null==k||k(u)}a((()=>{var o,n;if(null===(o=V.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))No(!0);else{No(!1);const o=null===(n=null==yo?void 0:yo.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[V]),a((()=>{var o,n,e,t;if(null!=Eo&&Eo>-1){const i={components:null===(n=null===(o=V.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[Eo].components,mapping:null===(t=null===(e=null==V?void 0:V.mapping)||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Eo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);Ao({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Eo&&-1===Eo){const{descriptionComponents:o,urlBtns:n,qrbBtns:e,imageComponent:t,bodyVariables:i,headerVariables:l}=c(V);Ao({descriptionComponents:o,urlBtns:n,qrbBtns:e,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Eo]),a((()=>{var o,n,e,t;if(null!=Eo&&Eo>-1&&So){const i={components:null===(n=null===(o=V.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[Eo].components,mapping:null===(t=null===(e=null==V?void 0:V.mapping)||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Eo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);Ao({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),Fo(!1)}}),[So]);const Go=Co?Po.imageComponent:Io;return Ho.openEditMedia?o(T,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(f,{mediaComponentFormat:null!==(N=Go.format)&&void 0!==N?N:r.IMAGE,uploadMedia:Ho.uploadMedia,variableListForImage:L||[],useEditWhatsappTemplateMediaResponse:Ho,setOpenEditMedia:Ho.setOpenEditMedia,openEditMedia:Ho.openEditMedia,editIconRef:Ho.editIconRef,fileRef:Uo})})):n(T,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Vo?"420px":"auto"}},{children:[!!Po.imageComponent&&!Vo&&n(O,{children:[o(h,{imageName:null!==(A=null===(P=null==Go?void 0:Go.example)||void 0===P?void 0:P.header_handle)&&void 0!==A?A:[],handleImageChange:Ho.handleImageChange,mediaType:null==Go?void 0:Go.format,error:Ho.error,isLoading:Ho.loading,setOpenEditMedia:Ho.setOpenEditMedia,selectedVariable:m(null!==(H=null===(D=null===(_=null==Go?void 0:Go.example)||void 0===_?void 0:_.header_handle)||void 0===D?void 0:D[0])&&void 0!==H?H:"")?null===(F=null===(S=null==Go?void 0:Go.example)||void 0===S?void 0:S.header_handle)||void 0===F?void 0:F[0]:(null===(q=null===(Q=null==V?void 0:V.mapping)||void 0===Q?void 0:Q.header)||void 0===q?void 0:q[0])?null===(K=null===(Y=null==V?void 0:V.mapping)||void 0===Y?void 0:Y.header)||void 0===K?void 0:K[0]:Ho.selectedVariable}),(null==Io?void 0:Io.format)==r.DOCUMENT?o(B,{children:o(d,{labelText:"PDF Name",placeholder:"Enter the name",value:Qo,errorMessage:Yo||void 0,onBlur:()=>{if(!Qo)return null==w||w(""),void Ko("PDF name is Required");const o=v(Qo);null==w||w(Qo),Ko(o?"Please enter a valid PDF name":void 0)},onChangeText:o=>{Ko(""),qo(o)}})}):o(e,{})]}),(null===(W=Po.bodyVariables)||void 0===W?void 0:W.length)>0&&o(y,{containerStyle:{paddingTop:Po.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===($=Po.descriptionComponents)||void 0===$?void 0:$.map(((n,e)=>o(x,{originalVariableList:null!=Eo&&Eo>-1?To.cards[Eo]:To,type:n.type,descriptionComponent:n.component,showVariableModal:I},e))),(null===(z=null===(X=null!=Eo&&Eo>-1?null===(G=To.cards[Eo])||void 0===G?void 0:G.buttons:null==To?void 0:To.buttons)||void 0===X?void 0:X.filter((o=>"URL"===o.type)))||void 0===z?void 0:z.length)>0&&o(y,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(oo=null===(Z=null!=Eo&&Eo>-1?null===(J=To.cards[Eo])||void 0===J?void 0:J.buttons:null==To?void 0:To.buttons)||void 0===Z?void 0:Z.filter((o=>xo===p.CHATBOT||"URL"===o.type)))||void 0===oo?void 0:oo.map(((n,e)=>{if("URL"===n.type)return o(E,{variableListIndex:e,CTAoptions:null==M?void 0:M.CTAoptions,button:n,currentVariableList:null!=Eo&&Eo>-1?Object.assign({},To.cards[Eo]):Object.assign({},To),updateSelectedURLTemplateBtn:Wo},`${e}_${Eo}`)})),xo===p.CHATBOT&&(null===(eo=null===(no=Mo[0])||void 0===no?void 0:no.component)||void 0===eo?void 0:eo.buttons)&&(null===(lo=null===(io=null===(to=Mo[0])||void 0===to?void 0:to.component)||void 0===io?void 0:io.buttons)||void 0===lo?void 0:lo.length)>0&&o(b,{backTrackMessage:null===(ao=null==yo?void 0:yo.backTrackExtra)||void 0===ao?void 0:ao[0],setBackTrackMessage:null===(so=null==yo?void 0:yo.backTrackExtra)||void 0===so?void 0:so[1]}),(null===(uo=null===(po=null!=Eo&&Eo>-1?null===(ro=To.cards[Eo])||void 0===ro?void 0:ro.buttons:null==To?void 0:To.buttons)||void 0===po?void 0:po.filter((o=>"QUICK_REPLY"===o.type)))||void 0===uo?void 0:uo.length)>0&&(xo!==p.CHATBOT?o(y,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(b,{backTrackMessage:null===(co=null==yo?void 0:yo.backTrackExtra)||void 0===co?void 0:co[0],setBackTrackMessage:null===(mo=null==yo?void 0:yo.backTrackExtra)||void 0===mo?void 0:mo[1]})),null===(go=null===(bo=null!=Eo&&Eo>-1?null===(vo=To.cards[Eo])||void 0===vo?void 0:vo.buttons:null==To?void 0:To.buttons)||void 0===bo?void 0:bo.filter((o=>"QUICK_REPLY"===o.type)))||void 0===go?void 0:go.map(((n,e)=>{if("QUICK_REPLY"===n.type&&xo!==p.CHATBOT)return o(E,{variableListIndex:e,QRBoptions:null==M?void 0:M.QRBoptions,button:n,currentVariableList:null!=Eo&&Eo>-1?Object.assign({},To.cards[Eo]):Object.assign({},To),updateSelectedQRBTemplateBtn:$o},`${e}_${Eo}`)})),xo===p.CHATBOT&&wo&&o(g,{discountCode:null===(fo=null==yo?void 0:yo.discountCodeExtra)||void 0===fo?void 0:fo[0],setDiscountCode:null===(ho=null==yo?void 0:yo.discountCodeExtra)||void 0===ho?void 0:ho[1]}),null===(jo=null!=Eo&&Eo>-1?null===(Oo=To.cards[Eo])||void 0===Oo?void 0:Oo.buttons:null==To?void 0:To.buttons)||void 0===jo?void 0:jo.map(((n,e)=>{var t,i,l;if("COPY_CODE"===n.type)return o(C,{index:e,variable:{variableName:null!==(t=n.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:n.type},e)}))]}))},B=s.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;export{B as default};
+`;export{V as default};

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=o.div`
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const m=o.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,m=o.div`
+`,n=o.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:f,showSampleValues:w}=a;const{pod:b,hideDeviceContainerInPreview:g}=s(),v={showSampleValues:w,template:f,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return g?e(h,{children:e(r,Object.assign({},v))}):e(t,{children:i(n,Object.assign({channel:d},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l(d),height:443}}),e(m,Object.assign({ref:o},{children:e(r,Object.assign({},v))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
+`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:f,showSampleValues:w}=a;const{pod:b,hideDeviceContainerInPreview:v}=s(),g={showSampleValues:w,template:f,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return v?e(h,{children:e(r,Object.assign({},g))}):e(t,{children:i(m,Object.assign({channel:d},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l(d),height:443}}),e(n,Object.assign({ref:o},{children:e(r,Object.assign({},g))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -8,13 +8,13 @@ export interface TemplateSelectModalContentProps {
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     showSampleValues?: boolean;
     fileName?: string;
     setFileName?: (name: string) => void;
+    variableListFromProps?: VariableListInterfaceV2[];
 }
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, 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, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
 export default TemplateSelectModalContent;

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

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

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
+import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;
@@ -12,8 +12,8 @@ export interface VariableConnectorProps {
     variable: CUSTOM_VARIABLE;
     index: number;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     setShowDiscountCheckBox?: any;
+    buttonType?: BUTTON_TYPE;
     componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
     CTAoptions?: ButtonPlaceHolderOptions[];
 }