@bikdotai/bik-component-library 0.0.52-beta.ai-0 → 0.0.52

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

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

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

@@ -1 +1,28 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),e=require("./themes.js");function l(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const t=l(c).default("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var e;return null!==(e=c.cursor)&&void 0!==e?e:"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=>e.getPadding(c.variant)),";background:",(c=>e.getBackgroundColor(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 ${e.generateBorder(c.type,c.theme)};`)," .text{color:",(c=>e.getTextColor(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/IDAuNSA6IDF9cHggc29saWQgJHtnZW5lcmF0ZUJvcmRlcihwcm9wcy50eXBlLCBwcm9wcy50aGVtZSl9O2B9XG5cblx0XHQudGV4dCB7XG5cdFx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldFRleHRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSl9O1xuXHRcdH1cblxuXHRcdC5pY29uLXRyYWlsaW5nIHtcblx0XHRcdGFsbDogdW5zZXQ7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdH1cblxuXHRcdC5pY29uLWxlYWRpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1UYWcuc3R5bGVkLmpzLm1hcCJdfQ== */"));exports.Tag=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=r(e).default.div`
+	cursor: default;
+	${e=>"regular"===e.variant?"display: block;\n\t\t     height: 26px;\n\t\t":"height: 20px;"}
+	.container {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: ${e=>t.getPadding(e.variant)};
+
+		background-color: ${e=>t.getBackgroundColor(e.theme,e.type)};
+
+		border-radius: ${e=>"regular"===e.variant?"4px":"12px"};
+
+		${e=>"light"===e.theme&&`border: 1px solid ${t.generateBorder(e.type)};`}
+
+		.text {
+			color: ${e=>t.getTextColor(e.theme,e.type)};
+		}
+
+		.icon-trailing {
+			all: unset;
+		}
+
+		.icon-leading {
+			all: unset;
+		}
+	}
+`;exports.Tag=a;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.ValidTagTypeMap={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},compressed:{negative:!0,warning:!0,positive:!0,neutral:!0,white:!0,purple:!0,blue:!0,ai:!0}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.ValidTagTypeMap={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}};

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert.svg.js"),r=require("styled-components"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=a(r).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/alert.svg.js"),t=require("styled-components"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=o(t).default.div`
 	background: ${i.COLORS.background.negative.light};
 	display: flex;
 	align-items: center;
-	padding: ${e=>e.padding?"8px":"0px"} 12px;
+	padding: 0px 12px;
 	gap: 8px;
 	border-radius: 4px;
 	margin-right: 12px;
 	color: ${i.COLORS.content.negative};
-`;exports.Badge=r=>{const{errorText:a,padding:d}=r;return e.jsxs(s,Object.assign({padding:d},{children:[e.jsx(t.default,{height:20,width:20,color:i.COLORS.content.negative}),e.jsx(n.BodySecondary,{children:a})]}))},exports.BadgeContainer=s;
+`;exports.Badge=t=>{const{errorText:o}=t;return e.jsxs(s,{children:[e.jsx(r.default,{height:20,width:20,color:i.COLORS.content.negative}),e.jsx(n.BodySecondary,{children:o})]})},exports.BadgeContainer=s;

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

@@ -1,56 +1,21 @@
-import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
-import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
-import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
+/// <reference types="react" />
 import { CHANNEL_TYPE } from '../template-preview/models/Channels';
 import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
 import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
-import { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 export interface TemplateContextMapperProps {
-    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate;
+    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
     closeDialog?: () => void;
     showVariableMapping: boolean;
     channel: CHANNEL_TYPE;
     globalPlaceholders: GlobalPlaceholderType;
     /** List of variables being used in this template */
-    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
+    templateVariables: CUSTOM_VARIABLE[];
     /** 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[];
-        templateErrorIndexes?: {
-            body?: number[];
-            buttons?: number[];
-        };
-    } | void;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables, display_content?: string): string | 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, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, onDeleteSelectedProducts, fileName, setFileName, hideDeviceContainerInPreview, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateContextMapperProps) => JSX.Element;

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

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

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

@@ -1,108 +1,41 @@
-import React, { LegacyRef } from 'react';
-import Slider from 'react-slick';
-import { CarouselProduct } from "../modalElements/EditWhatsAppCarouselTemplateV2";
+import React from 'react';
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
 import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
-import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../../template-preview/models/WhatsappCarouselTemplate";
-import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+import { 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;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | 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;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | 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;
-    sliderRef?: LegacyRef<Slider> | undefined;
-    isCarouselHovered?: boolean | undefined;
-    setIsCarouselHovered?: ((value: boolean) => 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;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | 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;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | 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;
-    sliderRef?: LegacyRef<Slider> | undefined;
-    isCarouselHovered?: boolean | undefined;
-    setIsCarouselHovered?: ((value: boolean) => void) | undefined;
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1});exports.TemplateModalContext=a,exports.useTemplateModalContext=()=>e.useContext(a);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1});exports.TemplateModalContext=r,exports.useTemplateModalContext=()=>e.useContext(r);

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

@@ -1,17 +1,9 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+/// <reference types="react" />
 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) => import("react/jsx-runtime").JSX.Element;
+declare const Body: (props: BodyProps) => JSX.Element;
 export default Body;

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

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

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

@@ -3,6 +3,5 @@ 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/cjs/components/template-context-mapper/modalElements/DesktopPreview.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(r),o=l(t);const n=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js");var s=require("../../../constants/Theme.js"),d=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(r),p=l(t);const n=p.default.div`
 	background: ${s.COLORS.surface.standard};
 	border: 1px solid ${s.COLORS.stroke.primary};
 	border-radius: 8px;
@@ -6,15 +6,15 @@
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,u=o.default.div`
+`,u=p.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
 	border-bottom-color: ${s.COLORS.stroke.primary};
-`,m=o.default.div`
+`,h=p.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,h=d.default.forwardRef(((r,t)=>{let{display_content:s,showSampleValues:l}=r;return e.jsxs(n,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(m,{}),e.jsx(m,{}),e.jsx(m,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{showSampleValues:l,channel:p.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));h.displayName="DesktopPreview",exports.default=h;
+`,c=o.default.forwardRef(((r,t)=>{let{display_content:s}=r;return e.jsxs(n,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{channel:d.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));c.displayName="DesktopPreview",exports.default=c;

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

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

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

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

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const n=i.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	/* justify-content: center; */
 	flex: 1;
-`,o=i.default.div`
+`,n=i.default.div`
 	width: 56px;
 	height: 56px;
 	display: flex;
@@ -25,9 +25,7 @@
 	border: 1px solid ${t.COLORS.stroke.primary};
 	border-radius: 4px;
 	margin-left: 8px;
-	align-items: center;
 `,a=i.default.div`
 	padding-bottom: 0px;
 	min-width: 285px;
-	margin-bottom: 16px;
-`;exports.Container=d,exports.EditTemplateMediaContainer=a,exports.ImageContainer=o,exports.RightComponent=n;
+`;exports.Container=d,exports.EditTemplateMediaContainer=a,exports.ImageContainer=n,exports.RightComponent=o;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+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;
+}>;
+export default EditMediaTemplateMediaV2;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("./EditMediaV2.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(i);exports.default=n=>{let{mediaComponent:u,template:d,updateTemplateImageUrl:s,whatsappSpecificPickerMeta:c}=n;var p,f;const m=o.default.createRef(),[v,E]=i.useState(!1),[g,_]=i.useState("");let h;return h=u.format===r.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===r.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx("input",{ref:m,style:{display:"none"},type:"file",onChange:function(t){var i,l;return e.__awaiter(this,void 0,void 0,(function*(){_(""),E(!0);const e=new a.FileUploaderHelper,n=null===(i=t.target.files)||void 0===i?void 0:i[0];if(n instanceof Blob){const t=e.validate(n);if(t)_(t),E(!1);else{const e=u.format===r.HEADER_TYPES.IMAGE,t=yield c.uploadMediaFiles({file:n,fileName:n.name,isImage:e});if(t.success){const[e]=n.type.split("/");s(null!==(l=t.url)&&void 0!==l?l:"","application"===e?r.HEADER_TYPES.DOCUMENT:r.HEADER_TYPES[e.toUpperCase()])}else _("An unknown technical error occured");E(!1)}}else _("An unknown technical error occured"),E(!1)}))},accept:h}),t.jsx(l.default,{imageName:null!==(f=null===(p=null==u?void 0:u.example)||void 0===p?void 0:p.header_handle)&&void 0!==f?f:[],handleImageChange:function(){var e;(null===(e=null==m?void 0:m.current)||void 0===e?void 0:e.click)&&m.current.click()},mediaType:null==u?void 0:u.format,error:g,isLoading:v})]})};

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

@@ -1,19 +1,11 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+/// <reference types="react" />
 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;
-    fileName?: string;
-    setFileName?: (name: string) => void;
+    template: WhatsAppTemplate;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, }: EditWhatsAppTemplateV2Props) => JSX.Element;
 export default EditWhatsAppTemplateV2;