@bikdotai/bik-component-library 0.0.479 → 0.0.480

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

@@ -0,0 +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.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/Badge/index.d.ts

@@ -0,0 +1,8 @@
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {
+    padding?: string | undefined;
+}, never>;
+export interface BadgeProps {
+    errorText: string;
+    padding?: string;
+}
+export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-context-mapper/Badge/index.js

@@ -0,0 +1,10 @@
+import{jsxs as t,jsx as r}from"react/jsx-runtime";import e from"../../../assets/icons/alert.svg.js";import n from"styled-components";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";const p=n.div`
+	background: ${i.background.negative.light};
+	display: flex;
+	align-items: center;
+	padding: ${t=>t.padding?"8px":"0px"} 12px;
+	gap: 8px;
+	border-radius: 4px;
+	margin-right: 12px;
+	color: ${i.content.negative};
+`,a=n=>{const{errorText:a,padding:s}=n;return t(p,Object.assign({padding:s},{children:[r(e,{height:20,width:20,color:i.content.negative}),r(o,{children:a})]}))};export{a as Badge,p as BadgeContainer};

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

@@ -0,0 +1,50 @@
+import 'pure-react-carousel/dist/react-carousel.es.css';
+import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
+import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
+import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
+import { CHANNEL_TYPE } from '../template-preview/models/Channels';
+import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
+import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
+import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
+import { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+export interface TemplateContextMapperProps {
+    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate;
+    closeDialog?: () => void;
+    showVariableMapping: boolean;
+    channel: CHANNEL_TYPE;
+    globalPlaceholders: GlobalPlaceholderType;
+    /** List of variables being used in this template */
+    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
+    /** Only for initial-UI-purpose for the modal */
+    htmlContent: string;
+    showOnlyContent?: boolean;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string, carouselProducts?: CarouselProduct[]): {
+        error: string;
+        errorIndexes?: number[];
+    } | void;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    zIndex?: number;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    onBackPress?: () => void;
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    enabledCustomText?: boolean;
+    showSampleValues?: boolean;
+    disableEditVariable?: boolean;
+    pod?: POD;
+    extras?: ExtrasWhatsapp;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    };
+    selectedCarouselProducts?: CarouselProduct[];
+    disableEditExpiry?: boolean;
+    cardWidth?: number;
+    onDeleteSelectedProducts?: () => void;
+}
+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, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useEffect as t,useState as r,useMemo as i}from"react";import a from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import u from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const m=m=>{let{selectedTemplate:v,closeDialog:h,showVariableMapping:C,channel:b,htmlContent:g,templateVariables:x,onTemplateSelect:f,globalPlaceholders:E,showOnlyContent:P,whatsappSpecificPickerMeta:S,zIndex:I,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,onBackPress:L,enabledCustomText:V,variableListForImage:j,showSampleValues:A,disableEditVariable:D,pod:k,extras:O,pickerConf:W,selectedCarouselProducts:F,disableEditExpiry:H,cardWidth:z,onDeleteSelectedProducts:B}=m;var R,U,$,_,N,q;t((()=>{Y(g)}),[g]);const G=b===s.WHATSAPP&&"CAROUSEL"===(null===(U=null===(R=null==v?void 0:v.components)||void 0===R?void 0:R[1])||void 0===U?void 0:U.type),J=null==v?void 0:v.isProductCarouselType,[K,Q]=r(b===s.EMAIL||G?"desktop":"mobile"),[X,Y]=r(g),[Z,ee]=r(!1),[le,oe]=r([]),[te,re]=r(v),[ie,ae]=r([]),[ne,se]=r(!1),[de,ce]=r(null!=x?x:[]),[ue,pe]=r(!1),[me,ve]=r(-1),[he,Ce]=r([]);t((()=>{F?Ce(F):J&&Ce([])}),[F]),t((()=>{var e;if(!ne&&J&&(!F||0===Ce.length)){const l=null===(e=null==te?void 0:te.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:"")}))})),ae(o),se(!0)}}),[ne]);const be=i((()=>p(E)),[E]);return e(d.Provider,Object.assign({value:{template:te,setTemplate:re,device:K,setDevice:Q,display_content:X,setDisplayContent:Y,originalVariableList:de,setOriginalVariableList:ce,isError:Z,setIsError:ee,channel:b,globalNormalizedPlaceholders:be,templateSelectionTriggered:ue,setTemplateSelectionTriggered:pe,enabledCustomText:V,disableEditVariable:D,pod:k,extras:O,isWhatsappCarousel:G,selectedCarouselIndex:me,setSelectedCarouselIndex:ve,isProductCarouselType:J,cardCount:G?null===(_=null===($=v.components)||void 0===$?void 0:$[1].cards)||void 0===_?void 0:_.length:void 0,errorIndexes:le,setErrorIndexes:oe,pickerConf:W,carouselProducts:he,setCarouselProducts:Ce,disableEditExpiry:H,cardWidth:z,cardImages:ie,onDeleteSelectedProducts:B}},{children:P?e(u,{channel:s.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:I,centralContainerStyles:{width:G?900:b===s.EMAIL&&C?1e3:800},open:!0,onClose:()=>{null==h||h()},headingTitle:null==te?void 0:te.label,headingSubtitle:b===s.WHATSAPP?`${a.capitaliseFirstLetterOfString(null!==(N=null==te?void 0:te.category)&&void 0!==N?N:"")} • ${null!==(q=null==te?void 0:te.templateCategory)&&void 0!==q?q:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e(u,{showSampleValues:A,showVariableMapping:C,channel:b,whatsappSpecificPickerMeta:S,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,variableListForImage:j&&(null==j?void 0:j.length)>0?j:y}),f?e(c,{isWhatsappCarousel:null!=G&&G,onSelect:function(){if((null==he?void 0:he.length)<1&&J)return void ee(!0);const e=null==f?void 0:f(te,de,null!=X?X:"",he);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&oe(e.errorIndexes),(null==e?void 0:e.error)&&ee(!!(null==e?void 0:e.error))):pe(!0)}}):e(o,{})]}))}))};export{m as TemplateContextMapper};

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { CarouselProduct } from "../modalElements/EditWhatsAppCarouselTemplateV2";
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
+import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../../template-preview/models/WhatsappCarouselTemplate";
+import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+export type DEVICE_TYPES = 'desktop' | 'mobile';
+export declare const TemplateModalContext: React.Context<{
+    device: DEVICE_TYPES;
+    setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
+    display_content: string | null;
+    setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    channel: CHANNEL_TYPE;
+    setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null>> | undefined;
+    isError: boolean;
+    setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
+    templateSelectionTriggered: boolean;
+    setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    enabledCustomText?: boolean | undefined;
+    disableEditVariable?: boolean | undefined;
+    pod?: string | undefined;
+    extras?: ExtrasWhatsapp | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    selectedCarouselIndex?: number | undefined;
+    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselType?: boolean | undefined;
+    cardCount?: number | undefined;
+    errorIndexes?: number[] | undefined;
+    setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
+    carouselProducts?: CarouselProduct[] | undefined;
+    setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
+    disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
+    onDeleteSelectedProducts?: (() => void) | undefined;
+}>;
+export declare const useTemplateModalContext: () => {
+    device: DEVICE_TYPES;
+    setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
+    display_content: string | null;
+    setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    channel: CHANNEL_TYPE;
+    setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null>> | undefined;
+    isError: boolean;
+    setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
+    templateSelectionTriggered: boolean;
+    setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    enabledCustomText?: boolean | undefined;
+    disableEditVariable?: boolean | undefined;
+    pod?: string | undefined;
+    extras?: ExtrasWhatsapp | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    selectedCarouselIndex?: number | undefined;
+    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselType?: boolean | undefined;
+    cardCount?: number | undefined;
+    errorIndexes?: number[] | undefined;
+    setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
+    carouselProducts?: CarouselProduct[] | undefined;
+    setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
+    disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
+    onDeleteSelectedProducts?: (() => void) | undefined;
+};

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

@@ -0,0 +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};

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

@@ -0,0 +1,12 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+export type AdditionalVariableProps = {
+    variableList?: VariableListInterfaceV2[];
+    categoryDisplayName: string;
+    variableDisplayName: string;
+    variableValue: string;
+};
+/**
+ * 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;

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

@@ -0,0 +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};

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+export interface BodyProps {
+    showVariableMapping: boolean;
+    showOnlyContent?: boolean;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    showSampleValues?: boolean;
+}
+declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export default Body;

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

@@ -0,0 +1,18 @@
+import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as a}from"react";import i from"styled-components";import{CarouselPreview as l}from"../../carousel-preview/CarouselPreview.js";import s from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as n}from"../../template-preview/models/Channels.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as d}from"../utils/getVariableNameEmail.js";import{highlightFor as m}from"../utils/highlightFor.js";import c from"./DesktopPreview.js";import u from"./EditWhatsAppTemplateV2.js";import h from"./MobilePreview.js";import f from"./VariableConnectorsPanel.js";const v=i.div`
+	display: flex;
+	//	height: 100%;
+`,w=i.div`
+	padding: 16px 14px;
+	max-width: 450px;
+
+	height: ${e=>e.channel===n.WHATSAPP?"500px":"475px"};
+	overflow-y: auto;
+	padding-bottom: 24px;
+	border-left: ${r.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${r.stroke.primary} 1px solid`:void 0};
+`,b=i.div`
+	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
+	flex: 1;
+	height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
+	overflow-y: auto;
+`,g=i=>{const{showVariableMapping:g,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:y,discountCode:W,setDiscountCode:j,variableListForImage:M,showSampleValues:V}=i,A=a(),S=a(),{device:T,display_content:k,channel:E,template:L,setTemplate:I,isWhatsappCarousel:_,isProductCarouselType:$}=p();const D=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(v,{children:[o(b,Object.assign({showOnlyContent:C,showVariableMapping:g,isWhatsappCarousel:_},{children:"mobile"===T?o(h,{ref:S,display_content:null!=k?k:"",channel:E,template:L,showSampleValues:V}):E===n.WHATSAPP&&_?o(l,{ref:A,channel:E,template:L,showSampleValues:V,isPreview:!1}):E!==n.MESSAGE?o(c,{ref:A,channel:E,display_content:null!=k?k:"",showSampleValues:V}):o(t,{})})),($||g)&&o(w,Object.assign({channel:E,isWhatsappCarousel:_},{children:E!==n.WHATSAPP?o(f,{onFocus:E===n.EMAIL?function(e){var o,t,a;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===T?"template_html_mobile":"template_html_desktop"),l=d(e+1),s=E===n.EMAIL?null===(o=null==i?void 0:i.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),p=D(s),c=null==s?void 0:s.offsetLeft;"desktop"===T?p&&A.current&&(null===(t=null==i?void 0:i.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,T)):p&&S.current&&(null===(a=null==i?void 0:i.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,T))}:void 0,showVariableModal:P,variableList:y,discountCode:W,setDiscountCode:j}):E===n.WHATSAPP&&_?o(s,{whatsappSpecificPickerMeta:x,template:L,showVariableModal:P,variableList:y,variableListForImage:M,discountCode:W,setDiscountCode:j}):o(u,{whatsappSpecificPickerMeta:x,template:L,onTemplateChange:e=>{null==I||I(e)},showVariableModal:P,variableList:y,variableListForImage:M,discountCode:W,setDiscountCode:j})}))]})};export{g as default};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+declare const DesktopPreview: React.ForwardRefExoticComponent<{
+    display_content: string;
+    channel: CHANNEL_TYPE;
+    showSampleValues?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default DesktopPreview;

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

@@ -0,0 +1,20 @@
+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`
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
+	border-radius: 8px;
+	overflow-y: auto;
+	/* max-height: 420px; */
+	scroll-behavior: smooth;
+	height: 100%;
+`,l=i.div`
+	padding: 18px 24px 12px;
+	display: flex;
+	gap: 4px;
+	border-bottom-width: 1px;
+	border-bottom-color: ${o.stroke.primary};
+`,d=i.div`
+	width: 6px;
+	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:{width:584,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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +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};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { HEADER_TYPES } from "../../template-preview";
+declare const EditMediaModal: React.FC<{
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    openEditMedia: boolean;
+    mediaComponentFormat: HEADER_TYPES;
+    variableListForImage: VariableListInterfaceV2[];
+    uploadMedia: (urlOrVariable?: string) => void;
+}>;
+export default EditMediaModal;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as a}from"../../button/Button.js";import{InputWithVariables as i}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleMedium as n,BodySecondary as d,BodyRegular as p,BodyCaption as m}from"../../TypographyStyle.js";import c from"../../../assets/icons/file.svg.js";import h from"../../../assets/icons/filePdf.svg.js";import g from"../../../assets/icons/image.svg.js";import u from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";const f=f=>{let{setOpenEditMedia:j,mediaComponentFormat:v,variableListForImage:y,openEditMedia:x,uploadMedia:M}=f;const{pod:w}=b();return e(o,Object.assign({open:x,zIndex:2e3,onClose:()=>j(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(n,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:v===s.IMAGE?e(g,{width:40,height:40}):v===s.VIDEO?e(c,{width:40,height:40}):e(h,{width:40,height:40})})),e(n,{children:v===s.IMAGE?"Upload an image":v===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:v===s.IMAGE?"JPEG/ PNG format • Max 5MB":v===s.VIDEO?"MP4 format video • Max 16MB":"PDF format a document • Max 100MB"})]})),t("div",Object.assign({style:{marginBottom:16}},{children:[e(p,{children:"Media"}),e(i,{noMaxCharCheck:!0,addVarBoxRight:"46px",allowMix:!1,onChange:e=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:y,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&M(t.actualValue)},showAddButton:w!==l.CAMPAIGN||v===s.IMAGE})]})),t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(m,Object.assign({style:{flex:1}},{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(a,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:u,onClick:()=>M()})}))]}))]}))}))};export{f as default};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
+export interface EditMediaV2Props {
+    imageName: string[];
+    selectedVariable?: string;
+    errorSecondaryText?: string;
+    error?: string;
+    isLoading?: boolean;
+    mediaType?: HEADER_TYPES;
+    handleImageChange?: () => void;
+    disableEditVariable?: boolean;
+    setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditMediaV2;

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

@@ -0,0 +1,8 @@
+import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import r from"../../../assets/icons/document_pdf.svg.js";import o from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"styled-components";import{ShimmerImage as l}from"../../shimmer-image/ShimmerImage.js";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as c,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const u=n.div`
+	padding-left: 14px;
+	padding-right: 6px;
+	width: 44px;
+	height: 24px;
+	border-left: 1px solid ${g.stroke.primary};
+	cursor: pointer;
+`,v=n=>{const{imageName:v,error:b,isLoading:O,mediaType:w,disableEditVariable:x,selectedVariable:L,setOpenEditMedia:E}=n,k=null==v?void 0:v[0].split("/"),C=null==k?void 0:k[k.length-1];return e(f,{children:[i(j,Object.assign({error:!!b,onClick:()=>null==E?void 0:E(!0)},{children:b?i(s,{color:g.content.brand,width:32,height:32}):O?i(d,{size:"small"}):w===a.IMAGE?i(l,{imageUrl:null==v?void 0:v[0],width:56,height:56}):w===a.VIDEO?i("video",Object.assign({src:v[0],style:{width:56,height:56}},{children:i("track",{default:!0,kind:"captions",srcLang:"en",src:v[0]})})):i(r,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[i("div",Object.assign({style:{flex:b?"unset":1}},{children:v&&b?i(t,{}):O?i(c,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):i(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:L||h.toCapitilize(null==w?void 0:w.toLowerCase())||C}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),i(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!x&&!b&&!O&&i(u,Object.assign({onClick:()=>null==E?void 0:E(!0),onKeyDown:()=>null==E?void 0:E(!0),role:"presentation"},{children:i(o,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{v as default};

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

@@ -0,0 +1,6 @@
+export declare const RightComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    error: boolean;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditTemplateMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,32 @@
+import e from"styled-components";import{COLORS as r}from"../../../constants/Theme.js";const t=e.div`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	/* justify-content: center; */
+	flex: 1;
+`,o=e.div`
+	width: 56px;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-self: center;
+	background-color: ${r.surface.hovered};
+	border-radius: 4px;
+	border: 1px solid ${r.stroke.primary};
+	box-sizing: content-box;
+	cursor: ${e=>e.error?"pointer":"default"};
+`,i=e.div`
+	padding: 8px;
+	flex-direction: row;
+	display: flex;
+	justify-content: space-between;
+	background: ${r.surface.subdued};
+	border: 1px solid ${r.stroke.primary};
+	border-radius: 4px;
+	margin-left: 8px;
+`,n=e.div`
+	padding-bottom: 0px;
+	min-width: 285px;
+	margin-bottom: 16px;
+`;export{i as Container,n as EditTemplateMediaContainer,o as ImageContainer,t as RightComponent};

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

@@ -0,0 +1,25 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { WhatsAppPickerMeta } from "../../template-preview";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
+export interface EditWhatsAppCarouselTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WhatsAppCarouselTemplate;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+}
+export interface CarouselProduct {
+    name: string;
+    image: string;
+    quantity: number;
+    variantId: string;
+    productId: string;
+    displayOrder: number;
+    collectionId: string;
+    productName: string;
+    productImage: string;
+}
+declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWhatsAppCarouselTemplateV2;

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+declare const EditMediaTemplateMediaV2: React.FC<{
+    mediaComponent: WhatsAppTemplate['components'][0];
+    template: WhatsAppTemplate;
+    whatsappSpecificPickerMeta: WhatsAppPickerMeta;
+    updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
+    variableListForImage?: VariableListInterfaceV2[];
+}>;
+export default EditMediaTemplateMediaV2;

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

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as i,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import l,{useState as a,useEffect as r}from"react";import{FileUploaderHelper as d}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as s}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import m from"./EditMediaModal.js";import u from"./EditMediaV2.js";const v=e=>/^{{.*}}$/.test(e),f=f=>{let{mediaComponent:g,template:h,updateTemplateImageUrl:b,whatsappSpecificPickerMeta:j,variableListForImage:M}=f;var y,E,C,I,O,x,k,A;const{disableEditVariable:w,selectedCarouselIndex:T}=c(),[U,F]=a(void 0),[L,R]=a(),[_,D]=a(),[N,V]=a(!1),G=l.createRef(),[z,S]=a(!1),[B,H]=a(""),{template:P,setTemplate:W}=c(),{uploadMediaFiles:X,uploadMediaLink:$}=j;let q;function J(){var e;(null===(e=null==G?void 0:G.current)||void 0===e?void 0:e.click)&&G.current.click()}function K(o){var i;return e(this,void 0,void 0,(function*(){const e=new d;if(o instanceof Blob){const n=e.validate({file:o});if(n)H(n),S(!1);else{const e=g.format===p.IMAGE,n=yield X({file:o,fileName:U,isImage:e});if(n.success){const[e]=o.type.split("/");b(null!==(i=n.url)&&void 0!==i?i:"","application"===e?p.DOCUMENT:p[e.toUpperCase()])}else H("An unknown technical error occurred");S(!1)}}else H("An unknown technical error occurred"),S(!1)}))}return q=g.format===p.IMAGE?"image/png, image/jpeg":g.format===p.VIDEO?"video/mp4":"application/pdf",r((()=>{F(void 0),R(void 0),D(void 0),V(!1),S(!1),H("")}),[T]),o(i,{children:[n(m,{mediaComponentFormat:null!==(y=g.format)&&void 0!==y?y:p.IMAGE,uploadMedia:function(o){var i,n,l,a,r,s;return e(this,void 0,void 0,(function*(){if(H(""),D(""),V(!1),o)if(o.startsWith("https"))try{if(S(!0),$){const e=yield $(o),{type:n,size:t,success:l}=e;if(l){const o=(new d).validate({linkData:{type:n,size:t}});if(o)return H(o),void S(!1);const[l]=n.split("/");b(null!==(i=e.url)&&void 0!==i?i:"",p[l.toUpperCase()])}else H("An unknown technical error occurred");S(!1)}else{const e=yield fetch(o),i=yield e.blob();yield K(i)}}catch(e){H("An unknown technical error occurred")}else if(v(o)){let e;if(D(o),e=null!=T&&T>-1?{components:null===(l=null===(n=P.components[1])||void 0===n?void 0:n.cards)||void 0===l?void 0:l[T].components,mapping:null===(r=null===(a=null==P?void 0:P.mapping)||void 0===a?void 0:a.cards)||void 0===r?void 0:r[T]}:Object.assign({},P),e.components){const i=null===(s=null==e?void 0:e.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const n=Object.assign(Object.assign({},e.components[i]),{format:g.format,example:{header_handle:[o]}}),t=[...e.components];t[i]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[o]})),S(!1),null!=T&&T>-1){const o=t(P);o.components[1].cards[T].components=e.components,o.mapping.cards[T]=e.mapping,null==W||W(Object.assign({},o))}else null==W||W(Object.assign({},e))}else S(!1),H("Invalid URL or variable");else J()}))},variableListForImage:M||[],setOpenEditMedia:V,openEditMedia:N}),!!L&&n(s,{aspectRatio:15/8,src:L,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){S(!1),H("");const e=yield fetch(o);K(yield e.blob()).then((()=>{R(void 0)}))}))},onCancel:()=>{S(!1),R(""),G.current&&(G.current.value="")}}),n("input",{ref:G,style:{display:"none"},type:"file",onChange:function(e){var o;H(""),S(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(g.format===p.IMAGE){const e=new FileReader;R(""),F(""),e.onload=()=>{R(e.result),F(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else K(i)},accept:q}),n(u,{imageName:null!==(C=null===(E=null==g?void 0:g.example)||void 0===E?void 0:E.header_handle)&&void 0!==C?C:[],handleImageChange:J,mediaType:null==g?void 0:g.format,error:B,isLoading:z,setOpenEditMedia:V,selectedVariable:v(null!==(x=null===(O=null===(I=null==g?void 0:g.example)||void 0===I?void 0:I.header_handle)||void 0===O?void 0:O[0])&&void 0!==x?x:"")?null===(A=null===(k=null==g?void 0:g.example)||void 0===k?void 0:k.header_handle)||void 0===A?void 0:A[0]:_,disableEditVariable:w})]})};export{f as default};

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

@@ -0,0 +1,17 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export interface EditWhatsAppTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WhatsAppTemplate | WhatsAppCarouselTemplate;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate) => void;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+}
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWhatsAppTemplateV2;

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

@@ -0,0 +1 @@
+import{jsxs as n,jsx as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as a}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as d}from"./BackTrackComponent.js";import{DiscountCodeComponent as r}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import p from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as m}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import b from"./VariableEditorHeader.js";import g from"./WhatsAppTemplateCardButtonV2.js";const f=f=>{let{template:O,onTemplateChange:h,whatsappSpecificPickerMeta:j,showVariableModal:C,variableList:T,variableListForImage:y,discountCode:x,setDiscountCode:B}=f;var V,E,L,k,U,I,w,R,A,P,M,N,S,H,_,Q,q,Y,D,K,W;const $=O.isCarouselType,{originalVariableList:F,pod:X,extras:z,selectedCarouselIndex:G,isProductCarouselType:J}=s(),{descriptionComponents:Z,urlBtns:nn,qrbBtns:on,imageComponent:tn,bodyVariables:en,headerVariables:ln}=a(O),[sn,an]=e(!1),[dn,rn]=e(-1===G?{descriptionComponents:Z,urlBtns:nn,qrbBtns:on,imageComponent:tn,bodyVariables:en,headerVariables:ln}:{}),[cn,pn]=e(!1);function un(n,o,e){var i,l,s,a,d,r,c,p,u,m;const v=null!=G&&G>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},O),b=t(v),g="custom"===o&&"string"==typeof n,f=g?n:"string"!=typeof n?n.defaultValue:"";if(null!=G&&G>-1&&J){const o=Object.assign({},O).components.map((n=>{var o;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(o=n.cards)||void 0===o?void 0:o.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var o,t,i;if("BUTTONS"===n.type){const l=null===(o=n.buttons)||void 0===o?void 0:o.filter((n=>"URL"===n.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[f]});const a=null===(i=n.buttons)||void 0===i?void 0:i.map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==s?void 0:s.text)?s:n));return Object.assign(Object.assign({},n),{buttons:a})}return n}))})))}):n})),i=null===(a=null===(s=Object.assign({},O).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map((o=>g?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:""))})})),l=t(O);return l.components=o,l.mapping.cards=i,void(null==h||h(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==j&&j>-1){const t=null===(d=null==b?void 0:b.components[j].buttons)||void 0===d?void 0:d.filter((n=>"URL"===n.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof n,l=i?n:"string"!=typeof n?n.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(p=null===(c=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===c?void 0:c.buttons)&&void 0!==p?p:[]].map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==s?void 0:s.text)?s:n)),d=Object.assign(Object.assign({},b.components[j]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[e]=i?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[j]=d,b.components=g}}if("string"!=typeof n){"checkout.checkoutUrl"===(null===(m=n.placeHolder)||void 0===m?void 0:m.slice(2,-2))?an(!0):(an(!1),null==B||B(""))}if(null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=b.components,n.mapping.cards[G]=b.mapping,null==h||h(Object.assign({},n))}else null==h||h(b)}function mn(n,o,e){var i,l,s,a,d,r;const c=null!=G&&G>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},O);if(null!=G&&G>-1&&J){const o=Object.assign({},O).components.map((o=>{var t;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const s=null===(t=o.buttons)||void 0===t?void 0:t.filter((n=>"QUICK_REPLY"===n.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:n.flowId,flowName:n.flowName});const d=null===(l=o.buttons)||void 0===l?void 0:l.map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==a?void 0:a.text)?a:n));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),i=t(O);return i.components=o,void(null==h||h(Object.assign({},i)))}const p=null==c?void 0:c.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==p&&p>-1){const o=null===(s=null==c?void 0:c.components[p].buttons)||void 0===s?void 0:s.filter((n=>"QUICK_REPLY"===n.type));if(o){let t=o[e];t=Object.assign(Object.assign({},t),{flowId:n.flowId,flowName:n.flowName});const i=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==t?void 0:t.text)?t:n)),l=Object.assign(Object.assign({},c.components[p]),{buttons:i}),s=[...c.components];s[p]=l,c.components=s}}if(null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=c.components,null==h||h(Object.assign({},n))}else null==h||h(c)}return i((()=>{var n,o;if(null===(n=O.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))an(!0);else{an(!1);const n=null===(o=null==z?void 0:z.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[O]),i((()=>{var n,o,t,e;if(null!=G&&G>-1){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[G].components,mapping:null===(e=null===(t=null==O?void 0:O.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);rn({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p})}else if(null!=G&&-1===G){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=a(O);rn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[G]),i((()=>{var n,o,t,e;if(null!=G&&G>-1&&cn){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[G].components,mapping:null===(e=null===(t=null==O?void 0:O.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);rn({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}),pn(!1)}}),[cn]),n(m,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!dn.imageComponent&&!J&&o(c,{children:o(p,{whatsappSpecificPickerMeta:j,mediaComponent:$?dn.imageComponent:tn,updateTemplateImageUrl:function(n,o){var e,i,l,s,a,d,r,c;let p;p=null!=G&&G>-1?{components:null===(i=null===(e=O.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[G].components,mapping:null===(s=null===(l=null==O?void 0:O.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[G]}:Object.assign({},O);const u=null===(a=null==p?void 0:p.components)||void 0===a?void 0:a.findIndex((n=>{if("HEADER"===n.type&&"NONE"!==n.format&&"TEXT"!==n.format)return!0}));if(void 0!==u&&u>-1&&(null==p?void 0:p.components[u])){const t=Object.assign(Object.assign({},p.components[u]),{format:o,example:{header_handle:[n]}}),e=[...p.components];e[u]=t,p=Object.assign(Object.assign({},p),{components:e})}if(p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0})),null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=p.components,(null===(d=null==n?void 0:n.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==n?void 0:n.mapping)||void 0===r?void 0:r.cards.length)>0&&(n.mapping.cards[G]=null!==(c=p.mapping)&&void 0!==c?c:{}),null==h||h(Object.assign({},n)),pn(!0)}else null==h||h(Object.assign({},p))},template:O,variableListForImage:y})}),dn.bodyVariables.length>0&&o(b,{containerStyle:{paddingTop:dn.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===(V=dn.descriptionComponents)||void 0===V?void 0:V.map(((n,t)=>o(v,{originalVariableList:null!=G&&G>-1?F.cards[G]:F,type:n.type,descriptionComponent:n.component,showVariableModal:C,variableList:T},t))),(null===(L=null===(E=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===E?void 0:E.filter((n=>"URL"===n.type)))||void 0===L?void 0:L.length)>0&&o(b,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(k=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===k?void 0:k.filter((n=>X===l.CHATBOT||"URL"===n.type)))||void 0===U?void 0:U.map(((n,t)=>{if("URL"===n.type)return o(g,{variableListIndex:t,CTAoptions:null==j?void 0:j.CTAoptions,button:n,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedURLTemplateBtn:un,variableList:T},`${t}_${G}`)})),X===l.CHATBOT&&(null===(w=null===(I=on[0])||void 0===I?void 0:I.component)||void 0===w?void 0:w.buttons)&&(null===(P=null===(A=null===(R=on[0])||void 0===R?void 0:R.component)||void 0===A?void 0:A.buttons)||void 0===P?void 0:P.length)>0&&o(d,{backTrackMessage:null===(M=null==z?void 0:z.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(N=null==z?void 0:z.backTrackExtra)||void 0===N?void 0:N[1]}),(null===(H=null===(S=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===S?void 0:S.filter((n=>"QUICK_REPLY"===n.type)))||void 0===H?void 0:H.length)>0&&(X!==l.CHATBOT?o(b,{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(d,{backTrackMessage:null===(_=null==z?void 0:z.backTrackExtra)||void 0===_?void 0:_[0],setBackTrackMessage:null===(Q=null==z?void 0:z.backTrackExtra)||void 0===Q?void 0:Q[1]})),null===(Y=null===(q=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===q?void 0:q.filter((n=>"QUICK_REPLY"===n.type)))||void 0===Y?void 0:Y.map(((n,t)=>{if("QUICK_REPLY"===n.type&&X!==l.CHATBOT)return o(g,{variableListIndex:t,QRBoptions:null==j?void 0:j.QRBoptions,button:n,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedQRBTemplateBtn:mn},`${t}_${G}`)})),X===l.CHATBOT&&sn&&o(r,{discountCode:null===(D=null==z?void 0:z.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(K=null==z?void 0:z.discountCodeExtra)||void 0===K?void 0:K[1],variableList:T}),null===(W=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===W?void 0:W.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(u,{index:t,variable:{variableName:null!==(e=n.text)&&void 0!==e?e:"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,variableList:T,componentType:"BUTTONS"},t)}))]}))};export{f as default};

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

@@ -0,0 +1,6 @@
+export interface FooterProps {
+    isWhatsappCarousel: boolean;
+    onSelect: () => void;
+}
+declare const Footer: ({ isWhatsappCarousel, onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;

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

@@ -0,0 +1,14 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as o}from"react";import s from"styled-components";import{Button as a}from"../../button/Button.js";import{TitleRegular as n}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as l}from"../Badge/index.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";const c=s.div`
+	background: ${i.surface.standard};
+	border-top-width: 1px;
+	border-top-color: ${i.stroke.primary};
+	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
+	width: 100%;
+	padding: 16px 24px;
+	display: flex;
+	justify-content: ${e=>e.isWhatsappCarousel?"space-between":"end"};
+	align-items: center;
+	gap: 12;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+`,d=s=>{let{isWhatsappCarousel:d,onSelect:m}=s;const{isError:x,selectedCarouselIndex:u,setSelectedCarouselIndex:b,setErrorIndexes:f}=p(),[g,h]=r(d?"Next":"Select template");return o((()=>{d&&-1===u?h("Next"):d&&null!=u&&u>-1&&h("Save & Select Template")}),[u]),e(c,Object.assign({isWhatsappCarousel:d},{children:[d&&null!=u&&u>=-1&&t(n,Object.assign({color:i.text.secondary},{children:`Step ${-1===u?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[x&&t(l,{errorText:"Some inputs are missing or incorrect. Please check"}),t(a,{id:"select-template-btn",buttonText:g,size:d?"small":"large",onClick:function(){d&&-1===u&&b?b(0):(null==f||f([]),m())}})]}))]}))};export{d as default};

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

@@ -0,0 +1,5 @@
+export interface HeaderProps {
+    showOnlyContent?: boolean;
+}
+declare const Header: ({ showOnlyContent }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;

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

@@ -0,0 +1,23 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const c=i.div`
+	padding-top: 12px;
+	padding-bottom: 12px;
+	padding-left: 30px;
+	padding-right: 30px;
+	background-color: ${s.surface.subdued};
+	align-items: center;
+	display: flex;
+	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
+`,a=i.div`
+	display: flex;
+	border: 1px solid ${s.stroke.primary};
+	border-radius: 4px;
+	overflow: hidden;
+	width: min-content;
+`,l=i.div`
+	background: ${e=>e.active?s.background.brandLight:s.background.base};
+	padding: 6px 8px;
+	justify-content: center;
+	align-items: center;
+`,p=i(l)`
+	border-left: 1px solid ${s.stroke.primary};
+`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:g}=d();return e(c,Object.assign({showOnlyContent:m},{children:[e(a,{children:[t(l,Object.assign({active:"mobile"===b,onClick:()=>null==g?void 0:g("mobile")},{children:t(n,{color:"mobile"===b?s.content.brand:s.content.secondary,height:20,width:20})})),t(p,Object.assign({active:"desktop"===b,onClick:()=>null==g?void 0:g("desktop")},{children:t(o,{color:"desktop"===b?s.content.brand:s.content.secondary,height:20,width:20})}))]}),e(r,Object.assign({style:{color:s.content.primary,marginLeft:16}},{children:["mobile"===b?"Mobile":"Web"," view"]}))]}))};export{m as default};