@bikdotai/bik-component-library 0.0.50 → 0.0.51-5.beta-2

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { TagProps } from './model';
 export declare const Tag: {
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, }: TagProps): JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, }: TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{BodyCaption as t}from"../TypographyStyle.js";import{ValidTagTypeMap as a}from"./model.js";import{Tag as r}from"./Tag.styled.js";import{getTagIconColor as c}from"./themes.js";const o=o=>{let{tagText:l,LeadingIcon:s,TrailingIcon:g,onLeadingIconClicked:d,leadingIconId:m,trailingIconId:p,onTrailingIconClicked:j,theme:b="light",type:h="neutral",variant:y="regular"}=o,O=l,u=b,I=h;a[y][h]||(I="neutral"),"circle"===y&&(u="dark","number"==typeof O&&O>99&&(O="99+"));const f={height:16,width:16,color:c(b,I),style:{display:"block"}};return e(r,Object.assign({theme:u,type:h,variant:y},{children:i("div",Object.assign({className:"container"},{children:[s&&e("button",Object.assign({className:"icon-leading",onClick:d,id:`${m}-wrapper`||"leading-icon-wrapper"},{children:n.createElement(s,Object.assign(Object.assign({},f),{id:m||"leading-icon"}))})),e(t,Object.assign({className:"text"},{children:O})),g&&e("button",Object.assign({className:"icon-trailing",onClick:j,id:`${p}-wrapper`||"trailing-icon-wrapper"},{children:n.createElement(g,Object.assign(Object.assign({},f),{id:p||"trailing-icon"}))}))]}))}))};o.displayName="Tag";export{o as Tag};
+import{jsx as i,jsxs as e}from"react/jsx-runtime";import n from"../../assets/icons/bik_ai_stars_icon.svg.js";import r from"react";import{BodyCaption as a}from"../TypographyStyle.js";import{ValidTagTypeMap as t}from"./model.js";import{Tag as s}from"./Tag.styled.js";import{getTagIconColor as c}from"./themes.js";const o=o=>{let{tagText:l,LeadingIcon:g,TrailingIcon:d,onLeadingIconClicked:m,leadingIconId:p,trailingIconId:j,onTrailingIconClicked:b,theme:h="light",type:u="neutral",variant:y="regular",version:O,cursor:f}=o;var v;let I=l,k=h,T=u;t[y][u]||(T="neutral"),"circle"===y&&(k="dark","number"==typeof I&&I>99&&(I="99+"));const w={height:16,width:16,color:c(h,T),style:{display:"block"}},N=()=>"ai"!==u||g?g:n;return i(s,Object.assign({cursor:f,theme:k,type:u,variant:y,version:O},{children:e("div",Object.assign({className:"container"},{children:[N()&&i("button",Object.assign({className:"icon-leading",onClick:m,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:r.createElement(null!==(v=N())&&void 0!==v?v:"",Object.assign(Object.assign({},w),{id:p||"leading-icon"}))})),i(a,Object.assign({className:"text"},{children:I})),d&&i("button",Object.assign({className:"icon-trailing",onClick:b,id:`${j}-wrapper`||"trailing-icon-wrapper"},{children:r.createElement(d,Object.assign(Object.assign({},w),{id:j||"trailing-icon"}))}))]}))}))};o.displayName="Tag";export{o as Tag};

package/dist/esm/components/tag/Tag.styled.d.ts

@@ -1,6 +1,12 @@
+/// <reference types="react" />
 import { TagTheme, TagType, TagVariant } from './model';
-export declare const Tag: import("styled-components").StyledComponent<"div", any, {
+export declare const Tag: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     theme: TagTheme;
     type: TagType;
     variant: TagVariant;
-}, never>;
+    version?: "1.0" | "2.0" | undefined;
+    cursor?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/tag/Tag.styled.js

@@ -1,28 +1 @@
-import t from"styled-components";import{getPadding as e,getBackgroundColor as r,generateBorder as i,getTextColor as a}from"./themes.js";const o=t.div`
-	cursor: default;
-	${t=>"regular"===t.variant?"display: block;\n\t\t     height: 26px;\n\t\t":"height: 20px;"}
-	.container {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		padding: ${t=>e(t.variant)};
-
-		background-color: ${t=>r(t.theme,t.type)};
-
-		border-radius: ${t=>"regular"===t.variant?"4px":"12px"};
-
-		${t=>"light"===t.theme&&`border: 1px solid ${i(t.type)};`}
-
-		.text {
-			color: ${t=>a(t.theme,t.type)};
-		}
-
-		.icon-trailing {
-			all: unset;
-		}
-
-		.icon-leading {
-			all: unset;
-		}
-	}
-`;export{o as Tag};
+import c from"@emotion/styled/base";import{getPadding as l,getBackgroundColor as b,generateBorder as d,getTextColor as t}from"./themes.js";const e=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var l;return null!==(l=c.cursor)&&void 0!==l?l:"default"}),";",(c=>"regular"===c.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;")," .container{display:flex;align-items:center;gap:6px;padding:",(c=>l(c.variant)),";background:",(c=>b(c.theme,c.type)),";border-radius:",(c=>"regular"===c.variant?"4px":"12px"),";",(c=>"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${d(c.type)};`)," .text{color:",(c=>t(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJ1xyXG4gICAgPyBgZGlzcGxheTogYmxvY2s7XG5cdFx0ICAgICBtaW4taGVpZ2h0OiAyNnB4O1xuXHRcdGBcclxuICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YH1cblx0LmNvbnRhaW5lciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdGdhcDogNnB4O1xuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblxuXHRcdGJhY2tncm91bmQ6ICR7KHByb3BzKSA9PiBnZXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMudGhlbWUsIHByb3BzLnR5cGUpfTtcblxuXHRcdGJvcmRlci1yYWRpdXM6ICR7KHByb3BzKSA9PiAocHJvcHMudmFyaWFudCA9PT0gJ3JlZ3VsYXInID8gJzRweCcgOiAnMTJweCcpfTtcblxuXHRcdCR7KHByb3BzKSA9PiBwcm9wcy50aGVtZSA9PT0gJ2xpZ2h0JyAmJlxyXG4gICAgYGJvcmRlcjogJHtwcm9wcy52ZXJzaW9uID09PSAnMi4wJyA/IDAuNSA6IDF9cHggc29saWQgJHtnZW5lcmF0ZUJvcmRlcihwcm9wcy50eXBlKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));export{e as Tag};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { MouseEventHandler } from 'react';
 export type TagTheme = 'light' | 'dark';
 export type TagVariant = 'regular' | 'circle';
-export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey';
+export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
 export declare const ValidTagTypeMap: {
     regular: {
         negative: boolean;
@@ -12,6 +12,7 @@ export declare const ValidTagTypeMap: {
         white: boolean;
         purple: boolean;
         blue: boolean;
+        ai: boolean;
     };
     circle: {
         negative: boolean;
@@ -20,6 +21,7 @@ export declare const ValidTagTypeMap: {
         neutral: boolean;
         blue: boolean;
         grey: boolean;
+        ai: boolean;
     };
 };
 export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
@@ -69,4 +71,6 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
      */
     leadingIconId?: string;
     tagText: string | number;
+    version?: '1.0' | '2.0';
+    cursor?: string;
 }

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

@@ -1 +1 @@
-const e={regular:{negative:!0,warning:!0,positive:!0,neutral:!0,white:!0,purple:!0,blue:!0},circle:{negative:!0,warning:!0,positive:!0,neutral:!0,blue:!0,grey:!0}};export{e as ValidTagTypeMap};
+const e={regular:{negative:!0,warning:!0,positive:!0,neutral:!0,white:!0,purple:!0,blue:!0,ai:!0},circle:{negative:!0,warning:!0,positive:!0,neutral:!0,blue:!0,grey:!0,ai:!0}};export{e as ValidTagTypeMap};

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}}},t=(r,t)=>n[t].iconColor[r],o=(r,t)=>n[t].textColor[r],e=r=>n[r].border,i=(r,t)=>n[t].backgroundColor[r],a=r=>"regular"===r?"4px 8px":"2px 6px";export{e as generateBorder,i as getBackgroundColor,a as getPadding,t as getTagIconColor,o 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/Badge/index.d.ts

@@ -1,6 +1,8 @@
-/// <reference types="react" />
-export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+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) => JSX.Element;
+export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

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

@@ -1,21 +1,57 @@
-/// <reference types="react" />
+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 { WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 export interface TemplateContextMapperProps {
-    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
+    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[];
+    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
     /** Only for initial-UI-purpose for the modal */
     htmlContent: string;
     showOnlyContent?: boolean;
-    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables, display_content?: string): string | void;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string, carouselProducts?: CarouselProduct[]): {
+        error: string;
+        errorIndexes?: number[];
+        templateErrorIndexes?: {
+            body?: number[];
+            buttons?: 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;
+    fileName?: string;
+    setFileName?: (name: string) => void;
+    hideDeviceContainerInPreview?: boolean;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateContextMapperProps) => JSX.Element;
+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;

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

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

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

@@ -1,41 +1,101 @@
 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 { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+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;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | 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 | null;
-    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | 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;
+    hideDeviceContainerInPreview?: boolean | undefined;
+    templateErrorIndexes?: {
+        body?: number[] | undefined;
+        buttons?: number[] | undefined;
+    } | 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;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | 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 | null;
-    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | 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;
+    hideDeviceContainerInPreview?: boolean | undefined;
+    templateErrorIndexes?: {
+        body?: number[] | undefined;
+        buttons?: number[] | undefined;
+    } | undefined;
 };

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

@@ -1 +1 @@
-import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1}),o=()=>t(l);export{l as TemplateModalContext,o as useTemplateModalContext};
+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/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

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

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

@@ -3,5 +3,6 @@ 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

@@ -1,20 +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 o}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import{COLORS as p}from"../../../constants/Theme.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";const s=i.div`
-	background: ${p.surface.standard};
-	border: 1px solid ${p.stroke.primary};
+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%;
-`,m=i.div`
+`,l=i.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${p.stroke.primary};
-`,l=i.div`
+	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:p}=r;return e(s,Object.assign({ref:i},{children:[e(m,{children:[t(l,{}),t(l,{}),t(l,{})]}),t("div",{children:p?t(a,{channel:d.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:p,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(o,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
+`,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};

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,15 @@
+import React from 'react';
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { HEADER_TYPES } from "../../template-preview";
+import { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';
+declare const EditMediaModal: React.FC<{
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    openEditMedia: boolean;
+    mediaComponentFormat: HEADER_TYPES;
+    variableListForImage: VariableListInterfaceV2[];
+    uploadMedia: (urlOrVariable?: string) => void;
+    editIconRef: React.MutableRefObject<HTMLDivElement | null>;
+    fileRef: React.MutableRefObject<HTMLInputElement | null>;
+    useEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;
+}>;
+export default EditMediaModal;

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

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

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

@@ -2,11 +2,13 @@
 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;
+    setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
 }
-declare const EditMediaV2: (props: EditMediaV2Props) => JSX.Element;
+declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditMediaV2;

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

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

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

@@ -25,7 +25,9 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
 	border: 1px solid ${r.stroke.primary};
 	border-radius: 4px;
 	margin-left: 8px;
+	align-items: center;
 `,n=e.div`
 	padding-bottom: 0px;
 	min-width: 285px;
+	margin-bottom: 16px;
 `;export{o as Container,n as EditTemplateMediaContainer,i as ImageContainer,t as RightComponent};