@bikdotai/bik-component-library 0.0.42 → 0.0.44-2.beta.link.1

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+export type AdditionalVariableProps = {
+    variableList?: VariableListInterfaceV2[];
+    categoryDisplayName: string;
+    variableDisplayName: string;
+    variableValue: string;
+};
+/**
+ * Takes the previous variable list and adds any custom variable given as prop.
+ * E.g - Custom Text, Custom URL, Static Expiry
+ */
+export declare const useAdditionalVariables: (props: AdditionalVariableProps) => VariableListInterfaceV2[] | undefined;

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

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

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

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

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

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

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

@@ -1,9 +1,15 @@
-/// <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;
 }
-declare const Body: (props: BodyProps) => JSX.Element;
+declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Body;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/PlusIcon.js";import{cloneDeep as r}from"lodash";import{useState as s,useEffect as l}from"react";import n from"styled-components";import{AddVariableV2SideModal as a}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as d}from"../../button/Button.js";import{IconButton as c}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as m,BodyCaption as u,TitleRegular as h}from"../../TypographyStyle.js";import{ProductPickerModal as f}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import y from"./EditWhatsAppTemplateV2.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import v from"../../../assets/icons/box.svg.js";import j from"../../../assets/icons/delete.svg.js";import x from"../../../assets/icons/edit.svg.js";const I=n=>{let{template:c,whatsappSpecificPickerMeta:h,showVariableModal:v,variableList:j,variableListForImage:x,discountCode:I,setDiscountCode:C}=n;var O,T;const{selectedCarouselIndex:k,setTemplate:P,pickerConf:A,isProductCarouselType:S,pod:V,cardCount:B,carouselProducts:L,setCarouselProducts:E,isError:M}=g(),[_,F]=s(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[W,z]=s(!1),[D,q]=s(!1),[R,N]=s(!1);l((()=>{F(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[k]);return e("div",{children:[t(m,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:_})),S&&(null!==(O=null==L?void 0:L.length)&&void 0!==O?O:0)>0&&null!=k&&k>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(w,{editItem:()=>z(!W),cardBody:`${null==L?void 0:L.length} Products Selected`,deleteItem:()=>{null==E||E([])}}),t(d,{disabled:(null!==(T=null==L?void 0:L.length)&&void 0!==T?T:0)<=1,style:{alignSelf:"flex-end",background:p.surface.subdued},onClick:()=>{q(!0),z(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),S&&0===(null==L?void 0:L.length)&&null!=k&&k>=0&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:M?`2px dashed ${p.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:M?"tertiaryGray":"dashBold",LeadingIcon:i,onClick:e=>{z(!0)}}),V===b.CHATBOT&&e(o,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(u,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{N(!0)}})]})]})),t(y,{whatsappSpecificPickerMeta:h,template:c,onTemplateChange:e=>{null==P||P(e)},showVariableModal:v,variableList:j,variableListForImage:x,discountCode:I,setDiscountCode:C}),W&&A&&t(f,{zIndex:200,rearrangeEnabled:D,limit:null!=B?B:1,storeId:A.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,r=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[r]={name:(null==o?void 0:o.name)||"",price:"",image:(null==o?void 0:o.image)||"",quantity:o.quantity||0,displayOrder:o.displayOrder}}return t}return{}})(null!=L?L:[]),collectionFetcher:A.fetchCollections,productFetcher:A.fetchProducts,onAdd:(e,t)=>{q(!1);const o=[],i=[];delete e.isCustom;for(const t of Object.keys(e)){const r=e[t].products;if(void 0!==r&&Object.keys(r).length)for(const e of Object.keys(r)){const s=r[e].variants;if(void 0!==s&&Object.keys(s).length)for(const l of Object.keys(s)){const{name:n,image:a,quantity:d,displayOrder:c}=s[l],p={name:n,image:a,quantity:d,variantId:l,productId:e,displayOrder:c,collectionId:t,productName:r[e].name,productImage:r[e].image};i.push(p),o.push(a)}}}const s=i.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=r(Object.assign({},c));o.forEach(((e,t)=>{e&&(l.components[1].cards[t].components[0].example.header_handle=[e])})),null==P||P(l),null==E||E(s),z(!1)},searchInCollectionFetcher:A.searchInCollection,searchFetcher:A.searchProducts,visible:W,onClose:()=>{z(!1)}}),R&&t(a,{zIndex:2e3,data:null!=j?j:[],showVariable:R,setShowVariable:N,placeholder:"Add a variable",customTrigger:e=>{}})]})},w=o=>{const{cardBody:i,deleteItem:r,editItem:s}=o;return e(C,Object.assign({width:"100%"},{children:[t("div",Object.assign({style:{width:36,height:36}},{children:t(v,{})})),t("div",Object.assign({className:"card-body"},{children:t(h,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[s&&t(c,{style:{display:"flex"},Icon:x,onClick:e=>{s(),e.stopPropagation()}}),t(c,{style:{display:"flex",color:"#919191"},Icon:j,onClick:e=>{r(),e.stopPropagation()}})]}))]}))},C=n.div`
+	width: ${e=>e.width};
+	padding: 12px;
+	display: flex;
+	flex-direction: row;
+	column-gap: 14px;
+	justify-content: center;
+	align-items: center;
+	background: #ffffff;
+
+	border: 1px solid #e0e0e0;
+	border-radius: 4px;
+
+	.card-body {
+		width: 256px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		&__dynamic {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 16px;
+			line-height: 24px;
+			color: #731dcf;
+
+			&__desc {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 12px;
+				line-height: 16px;
+				color: #616161;
+			}
+		}
+
+		&__simple {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 16px;
+			line-height: 24px;
+			color: #000000;
+		}
+	}
+`;export{I as default};

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

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

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

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

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

@@ -1,11 +1,17 @@
-/// <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;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, }: EditWhatsAppTemplateV2Props) => JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

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

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

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

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

package/dist/esm/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/esm/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;

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

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