@bikdotai/bik-component-library 0.0.49 → 0.0.51--beta.ai-1

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

@@ -1,41 +1,108 @@
-import React from 'react';
+import React, { LegacyRef } from 'react';
+import Slider from 'react-slick';
+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;
+    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;
-    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;
+    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 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);
+"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);

package/dist/cjs/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/cjs/components/template-context-mapper/custom-hooks/useAdditionalVariables.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.useAdditionalVariables=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};

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/BackTrackComponent.js

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

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/Body.js

@@ -1,18 +1,21 @@
-"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`
+"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`
 	display: flex;
 	//	height: 100%;
-`,f=h.default.div`
+`,f=P.default.div`
 	padding: 16px 14px;
-	border-left-width: 1px;
-	border-left-color: ${o.COLORS.stroke.primary};
-	max-width: 350px;
+	max-width: ${e=>e.channel===o.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
-	overflow-y: 'auto';
+	height: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	overflow-y: auto;
 	padding-bottom: 24px;
-`,x=h.default.div`
-	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
+	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"};
 	flex: 1;
-	height: 475px;
+	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-`;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)}})}))]})};
+	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"};
+`;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"}))})]})};

package/dist/cjs/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/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");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`
+"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`
 	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=p.default.div`
+`,u=o.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
 	border-bottom-color: ${s.COLORS.stroke.primary};
-`,h=p.default.div`
+`,m=o.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,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;
+`,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;

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/DiscountCodeComponent.js

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

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/EditMediaModal.js

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

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/EditMediaV2.js

@@ -1,8 +1,9 @@
-"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`
+"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`
 	padding-left: 14px;
 	padding-right: 6px;
-	width: 44px;
-	height: 24px;
-	border-left: 1px solid ${c.COLORS.stroke.primary};
+	height: 100%;
+	border-left: 1px solid ${g.COLORS.stroke.primary};
 	cursor: pointer;
-`;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})}))]})]})};
+	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})}))]})};

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 o=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 n=i.default.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	/* justify-content: center; */
 	flex: 1;
-`,n=i.default.div`
+`,o=i.default.div`
 	width: 56px;
 	height: 56px;
 	display: flex;
@@ -25,7 +25,9 @@
 	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;
-`;exports.Container=d,exports.EditTemplateMediaContainer=a,exports.ImageContainer=n,exports.RightComponent=o;
+	margin-bottom: 16px;
+`;exports.Container=d,exports.EditTemplateMediaContainer=a,exports.ImageContainer=o,exports.RightComponent=n;

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

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

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

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

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

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

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

@@ -1 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),n=require("../utils/getDataFromTemplateComponent.js"),o=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),l=require("./VariableConnectorsPanel.js"),s=require("./VariableConnectorWhatsApp.js"),a=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c}=r;var m,v,b,g,h,f,j,x,T,O,y,C;const{originalVariableList:E}=t.useTemplateModalContext(),{descriptionComponents:V,urlBtns:w,qrbBtns:B,imageComponent:I,bodyVariables:q,headerVariables:R}=n.getAllDataFromTemplateComponent(p);function A(e,t){var n,o,i,l;const s=Object.assign({},p),a=null==s?void 0:s.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==a&&a>-1){const d=null===(n=null==s?void 0:s.components[a].buttons)||void 0===n?void 0:n.findIndex((e=>"URL"===e.type));if(void 0!==d&&d>-1){const n="custom"===t&&"string"==typeof e,r=[...null!==(l=null===(i=null===(o=s.components)||void 0===o?void 0:o[a])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[d]=Object.assign(Object.assign({},r[d]),{url:"https://d.bik.ai/{{1}}",example:[n?e:"string"!=typeof e?e.defaultValue:""]});const p=Object.assign(Object.assign({},s.components[a]),{buttons:r}),u=Object.assign(Object.assign({},s.mapping),{buttons:n?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});s.mapping=u;const c=[...s.components];c[a]=p,s.components=c}}null==u||u(s)}function L(e,t,n){var o;const i=Object.assign({},p),l=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==l&&l>-1){const t=null===(o=null==i?void 0:i.components[l].buttons)||void 0===o?void 0:o.filter((e=>"QUICK_REPLY"===e.type));t&&(t[n]=Object.assign(Object.assign({},t[n]),{flowId:e.flowId,flowName:e.flowName}));const s=Object.assign(Object.assign({},i.components[l]),{buttons:t}),a=[...i.components];a[l]=s,i.components=a}null==u||u(i)}return e.jsxs(l.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!I&&e.jsx(o.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:I,updateTemplateImageUrl:function(e,t){var n;let o=Object.assign({},p);const i=null===(n=null==o?void 0:o.components)||void 0===n?void 0:n.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==o?void 0:o.components[i])){const n=Object.assign(Object.assign({},o.components[i]),{format:t,example:{header_handle:[e]}}),l=[...o.components];l[i]=n,o=Object.assign(Object.assign({},o),{components:l})}null==u||u(o)},template:p})}),(q.length>0||R.length>0)&&e.jsx(a.default,{containerStyle:{paddingTop:I?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==V?void 0:V.map(((t,n)=>e.jsx(s.default,{originalVariableList:E,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body},n))),(null===(v=null===(m=w[0])||void 0===m?void 0:m.component)||void 0===v?void 0:v.buttons)&&(null===(h=null===(g=null===(b=w[0])||void 0===b?void 0:b.component)||void 0===g?void 0:g.buttons)||void 0===h?void 0:h.length)>0&&e.jsx(a.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(f=null==E?void 0:E.buttons)||void 0===f?void 0:f.map(((t,n)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:E,updateSelectedURLTemplateBtn:A},`${n}`)})),(null===(x=null===(j=B[0])||void 0===j?void 0:j.component)||void 0===x?void 0:x.buttons)&&(null===(y=null===(O=null===(T=B[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)||void 0===y?void 0:y.length)>0&&e.jsx(a.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(C=null==E?void 0:E.buttons)||void 0===C?void 0:C.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:E,updateSelectedQRBTemplateBtn:L},`${n}`)}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("styled-components"),i=require("../../input/Input.js"),l=require("../../template-preview/models/TemplateMeta.js"),a=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),u=require("../utils/getDataFromTemplateComponent.js"),r=require("../utils/validateIsUrl.js"),p=require("../utils/validateName.js"),c=require("./BackTrackComponent.js"),v=require("./DiscountCodeComponent.js"),m=require("./EditMediaModal.js"),b=require("./EditMediaV2.js"),g=require("./EditMediaV2.style.js"),f=require("./useEditWhtasappTemplateMedia.js"),h=require("./VariableConnector.js"),j=require("./VariableConnectorsPanel.js"),C=require("./VariableConnectorWhatsApp.js"),O=require("./VariableEditorHeader.js"),x=require("./WhatsAppTemplateCardButtonV2.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const y=T(o).default.div`
+	padding-top: 24px;
+	padding-left: 10px;
+	padding-right: 10px;
+	margin-bottom: 8px;
+	line-height: normal;
+`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,discountCode:L,setDiscountCode:q,fileName:D,setFileName:I}=o;var R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,ue,re,pe,ce,ve,me,be,ge,fe,he;const je=T.isCarouselType,{originalVariableList:Ce,pod:Oe,extras:xe,selectedCarouselIndex:Te,isProductCarouselType:ye}=s.useTemplateModalContext(),{descriptionComponents:Ee,urlBtns:Ve,qrbBtns:Be,imageComponent:ke,bodyVariables:Me,headerVariables:Le}=u.getAllDataFromTemplateComponent(T),qe=t.useRef(null),De=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Ie,Re]=t.useState(!1),[Ue,Pe]=t.useState(-1===Te?{descriptionComponents:Ee,urlBtns:Ve,qrbBtns:Be,imageComponent:ke,bodyVariables:Me,headerVariables:Le}:{}),{uploadMediaLink:Ae,uploadMediaFiles:we}=V,Ne=f.useEditWhatsappTemplateMedia({uploadMediaLink:Ae,uploadMediaFiles:we,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,u,r;let p;p=null!=Te&&Te>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Te].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Te]}:Object.assign({},T);const c=null===(s=null==p?void 0:p.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0}));if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(u=null==e?void 0:e.mapping)||void 0===u?void 0:u.cards.length)>0&&(e.mapping.cards[Te]=null!==(r=p.mapping)&&void 0!==r?r:{}),null==E||E(Object.assign({},e)),_e(!0)}else null==E||E(Object.assign({},p))},mediaComponent:je?Ue.imageComponent:ke,fileRef:qe}),[Se,_e]=t.useState(!1),[Fe,He]=t.useState(D),[Qe,Ye]=t.useState();function Ke(e,t,o){var i,l,a,s,d,u,r,p,c,v;const m=null!=Te&&Te>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},T),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Te&&Te>-1&&ye){const t=Object.assign({},T).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),i=null===(s=null===(a=Object.assign({},T).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(T);return l.components=t,l.mapping.cards=i,void(null==E||E(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==h&&h>-1){const n=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=n[o];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(p=null===(r=null===(u=b.components)||void 0===u?void 0:u[h])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Re(!0):(Re(!1),null==q||q(""))}if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=b.components,e.mapping.cards[Te]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function We(e,t,o){var i,l,a,s,d,u,r;const p=null!=Te&&Te>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},T);if(null!=Te&&Te>-1&&ye){const t=Object.assign({},T).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const a=null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[o])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==n?void 0:n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null===(a=null==p?void 0:p.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(u=null===(d=p.components)||void 0===d?void 0:d[c])||void 0===u?void 0:u.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),a=[...p.components];a[c]=l,p.components=a}}if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=p.components,null==E||E(Object.assign({},e))}else null==E||E(p)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Re(!0);else{Re(!1);const e=null===(n=null==xe?void 0:xe.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=u.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Te&&-1===Te){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=u.getAllDataFromTemplateComponent(T);Pe({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Te]),t.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1&&Se){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=u.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),_e(!1)}}),[Se]);const $e=je?Ue.imageComponent:ke;return Ne.openEditMedia?e.jsx(j.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(R=$e.format)&&void 0!==R?R:l.HEADER_TYPES.IMAGE,uploadMedia:Ne.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:Ne,setOpenEditMedia:Ne.setOpenEditMedia,openEditMedia:Ne.openEditMedia,editIconRef:Ne.editIconRef,fileRef:qe})})):e.jsxs(j.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:ye?"420px":"auto"}},{children:[!!Ue.imageComponent&&!ye&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(P=null===(U=null==$e?void 0:$e.example)||void 0===U?void 0:U.header_handle)&&void 0!==P?P:[],handleImageChange:Ne.handleImageChange,mediaType:null==$e?void 0:$e.format,error:Ne.error,isLoading:Ne.loading,setOpenEditMedia:Ne.setOpenEditMedia,selectedVariable:r.isVariable(null!==(N=null===(w=null===(A=null==$e?void 0:$e.example)||void 0===A?void 0:A.header_handle)||void 0===w?void 0:w[0])&&void 0!==N?N:"")?null===(_=null===(S=null==$e?void 0:$e.example)||void 0===S?void 0:S.header_handle)||void 0===_?void 0:_[0]:(null===(H=null===(F=null==T?void 0:T.mapping)||void 0===F?void 0:F.header)||void 0===H?void 0:H[0])?null===(Y=null===(Q=null==T?void 0:T.mapping)||void 0===Q?void 0:Q.header)||void 0===Y?void 0:Y[0]:Ne.selectedVariable}),(null==ke?void 0:ke.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Fe,errorMessage:Qe||void 0,onBlur:()=>{if(!Fe)return null==I||I(""),void Ye("PDF name is Required");const e=p.validateInputName(Fe);null==I||I(Fe),Ye(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Ye(""),He(e)}})}):e.jsx(e.Fragment,{})]}),(null===(K=Ue.bodyVariables)||void 0===K?void 0:K.length)>0&&e.jsx(O.default,{containerStyle:{paddingTop:Ue.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(W=Ue.descriptionComponents)||void 0===W?void 0:W.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=Te&&Te>-1?Ce.cards[Te]:Ce,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===(X=null===(G=null!=Te&&Te>-1?null===($=Ce.cards[Te])||void 0===$?void 0:$.buttons:null==Ce?void 0:Ce.buttons)||void 0===G?void 0:G.filter((e=>"URL"===e.type)))||void 0===X?void 0:X.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(Z=null===(J=null!=Te&&Te>-1?null===(z=Ce.cards[Te])||void 0===z?void 0:z.buttons:null==Ce?void 0:Ce.buttons)||void 0===J?void 0:J.filter((e=>Oe===a.POD.CHATBOT||"URL"===e.type)))||void 0===Z?void 0:Z.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedURLTemplateBtn:Ke,variableList:k},`${t}_${Te}`)})),Oe===a.POD.CHATBOT&&(null===(ne=null===(ee=Be[0])||void 0===ee?void 0:ee.component)||void 0===ne?void 0:ne.buttons)&&(null===(ie=null===(oe=null===(te=Be[0])||void 0===te?void 0:te.component)||void 0===oe?void 0:oe.buttons)||void 0===ie?void 0:ie.length)>0&&e.jsx(c.BackTrackComponent,{backTrackMessage:null===(le=null==xe?void 0:xe.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==xe?void 0:xe.backTrackExtra)||void 0===ae?void 0:ae[1]}),(null===(ue=null===(de=null!=Te&&Te>-1?null===(se=Ce.cards[Te])||void 0===se?void 0:se.buttons:null==Ce?void 0:Ce.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ue?void 0:ue.length)>0&&(Oe!==a.POD.CHATBOT?e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(c.BackTrackComponent,{backTrackMessage:null===(re=null==xe?void 0:xe.backTrackExtra)||void 0===re?void 0:re[0],setBackTrackMessage:null===(pe=null==xe?void 0:xe.backTrackExtra)||void 0===pe?void 0:pe[1]})),null===(me=null===(ve=null!=Te&&Te>-1?null===(ce=Ce.cards[Te])||void 0===ce?void 0:ce.buttons:null==Ce?void 0:Ce.buttons)||void 0===ve?void 0:ve.filter((e=>"QUICK_REPLY"===e.type)))||void 0===me?void 0:me.map(((n,t)=>{if("QUICK_REPLY"===n.type&&Oe!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedQRBTemplateBtn:We},`${t}_${Te}`)})),Oe===a.POD.CHATBOT&&Ie&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(be=null==xe?void 0:xe.discountCodeExtra)||void 0===be?void 0:be[0],setDiscountCode:null===(ge=null==xe?void 0:xe.discountCodeExtra)||void 0===ge?void 0:ge[1],variableList:k}),null===(he=null!=Te&&Te>-1?null===(fe=Ce.cards[Te])||void 0===fe?void 0:fe.buttons:null==Ce?void 0:Ce.buttons)||void 0===he?void 0:he.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(h.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:De,componentType:"BUTTONS"},t)}))]}))};

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

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

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

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

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

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

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

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