@bikdotai/bik-component-library 0.0.444 → 0.0.445-beta.2

package/dist/esm/components/helpers/FileUploaderHelper.d.ts

@@ -8,5 +8,11 @@ export declare const SIZE_LIMIT_MAP: {
 };
 export declare const SUPPORTED_FILE_FORMAT: string[];
 export declare class FileUploaderHelper {
-    validate(file: Blob): string | undefined;
+    validate(inputData: {
+        file?: Blob;
+        linkData?: {
+            type: string;
+            size: number;
+        };
+    }): string | undefined;
 }

package/dist/esm/components/helpers/FileUploaderHelper.js

@@ -1 +1 @@
-import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",p=e=>`Max file size of ${e}MB is allowed`,t=e=>`Only ${e.toUpperCase()} format allowed`,o={image:5,video:16,application:100},r=["mp4","png","jpeg","jpg","pdf"];class a{validate(a){const l=a.size,[s,n]=a.type.split("/");if(!o[s])return i;if(e(l)>o[s])return p(o[s]);if(!r.includes(n.toLocaleLowerCase())){if("video"===s)return t("mp4");if("image"===s)return t("png, jpeg, jpg");if("application"===s)return t("pdf")}}}export{p as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,a as FileUploaderHelper,o as SIZE_LIMIT_MAP,r as SUPPORTED_FILE_FORMAT,t as getFileFormatErrorMessage};
+import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",t=e=>`Max file size of ${e}MB is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,l={image:5,video:16,application:100},o=["mp4","png","jpeg","jpg","pdf"];class s{validate(s){const{file:r,linkData:a}=s;let n=0,f="",d="";if(r)n=r.size,f=r.type.split("/")[0],d=r.type.split("/")[1];else{if(!a)return i;n=a.size,f=a.type.split("/")[0],d=a.type.split("/")[1]}if(!l[f])return i;if(e(n)>l[f])return t(l[f]);if(!o.includes(d.toLocaleLowerCase())){if("video"===f)return p("mp4");if("image"===f)return p("png, jpeg, jpg");if("application"===f)return p("pdf")}}}export{t as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,s as FileUploaderHelper,l as SIZE_LIMIT_MAP,o as SUPPORTED_FILE_FORMAT,p as getFileFormatErrorMessage};

package/dist/esm/components/product-picker-v2/modal.d.ts

@@ -75,6 +75,7 @@ export type ProductPickerInterface = {
     pickerType?: 'COLLECTION' | 'PRODUCT';
     hideProductVariants?: boolean;
     rearrangeEnabled?: boolean;
+    selectSingleItem?: boolean;
 } & ({
     startupScreen: ScreenName.RearrangeProducts;
     rearrangeEnabled: true;

package/dist/esm/components/product-picker-v2/modal.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as i,useRef as s,useEffect as n}from"react";import{COLORS as l}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";import{Input as a}from"../input/Input.js";import{StyledModal as u}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as m}from"./collectionScreen.js";import{ProductsScreen as C}from"./productScreen.js";import{RearrangeScreen as g}from"./rearrangeScreen.js";import{collectionsReducer as b,selectedColectionsReducer as y,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as f}from"./searchScreen.js";import{SelectedScreen as S}from"./selectedScreen.js";import{ContainerStyle as P,ScrollContainerStyle as x}from"./style.js";import{OUT_OF_STOCK_ACTION as j}from"./type.js";var k;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(k||(k={}));const T=T=>{const{storeId:I,selectedItems:O,onClose:R,visible:D,zIndex:F,exactLimit:w,limit:E,hideCollectionCheckbox:$,hideProductCheckbox:V,outOfStockAction:A=j.BLUR,hideVariantCheckbox:B,selectProductsFromCustomCollection:L,hideSelectionCount:M,title:z,width:G,renderWithoutModal:H,onClickSave:W,pickerType:Y,hideProductVariants:K=!1,startupScreen:U=k.Collections,rearrangeEnabled:q}=T,[J,N]=r(b,{}),[Q,X]=i([k.Collections,k.RearrangeProducts].includes(U)?U:k.Collections),[Z,_]=i("grid"),[ee,te]=i(""),[oe,ce]=i(0),[re,ie]=i(!1),[se,ne]=i(0),[le,de]=i(""),[ae,ue]=i(!1),[he,pe]=i(!1),[me,Ce]=i(),[ge,be]=r(y,Object.keys(O).length>0?O:{}),ye=s(null);n((()=>{ie(!0),pe(!0),T.collectionFetcher(oe,I).then((e=>{N({type:"fetched",data:(null==e?void 0:e.collections)||{}}),ie(!1),ce((e=>e+1)),pe(!1)})).catch()}),[]),n((()=>{let e=0;Object.keys(ge||[]).forEach((t=>{var o;Object.keys((null===(o=ge[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=ge[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),ne(e)})),n((()=>{var e;ee&&!(null===(e=null==J?void 0:J[ee])||void 0===e?void 0:e.products)&&(ie(!0),T.productFetcher(ee,I).then((e=>{Object.keys(e).length&&N({type:"productsFetched",data:{collectionId:ee,products:e}}),ie(!1)})).catch())}),[ee]),n((()=>{const e=setTimeout((()=>{"rearrange"!==Q&&(le.length?(ue(!0),T.searchFetcher(I,le).then((e=>{Ce(Object.assign({},e)),X("searchProducts"),ie(!1),ue(!1)}))):X("collections"))}),800);return()=>clearTimeout(e)}),[le]),n((()=>{W&&(T.onAdd(ge,se),ve())}),[W]);const ve=()=>{be({type:"reset",data:{}})},fe=e(P,{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===Q||"searchProducts"===Q)&&t("div",Object.assign({style:{padding:H?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(a,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ae?t(h,{size:"small",color:l.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:le,onChangeText:e=>{e.length&&e.trim().length?de(e):de("")}})}))}),e(x,Object.assign({ref:ye},{children:["collections"===Q&&t(m,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:he,collections:J,selectedCollectionsDispatch:be,setCollectionId:te,setScreen:X,selectedCollections:ge,collectionFetcher:T.collectionFetcher,storeId:I,collectionsDispatch:N,setSaveDisabled:ie,pagingControls:{curPage:oe,setCurPage:ce},hideCollectionCheckbox:$,renderWithoutModal:H,pickerType:Y}),"products"===Q&&ee&&t(v.Provider,Object.assign({value:ee},{children:t(C,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:X,storeId:I,data:J[ee],collectionsDispatch:N,selectedCollectionsDispatch:be,selectedData:ge,setSaveDisabled:ie,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:V,outOfStockAction:A,hideVariantCheckbox:B,selectProductsFromCustomCollection:L,renderWithoutModal:H,pickerType:Y,hideProductVariants:K})})),"view"===Q&&t(S,{selectedCollections:ge||{},selectedCollectionsDispatch:be,setScreen:X,collections:J}),"rearrange"===Q&&t(g,{selectedCollections:ge||{},selectedCollectionsDispatch:be,setScreen:X,outOfStockAction:A,rearrangeViewType:"grid"===Z?"list":"grid",scrollContainerRef:ye}),"searchProducts"===Q&&t(f,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:ge||{},searchedCollections:me||{},selectedCollectionsDispatch:be,setScreen:X,collections:J,onBackPress:()=>{de(""),Ce({})},pickerType:Y,hideProductCheckbox:V,hideProductVariants:K,hideVariantCheckbox:B})]}))]});return t(o,{children:H?fe:t(u,Object.assign({zIndex:F,open:D,onClose:()=>{null==R||R(),ve()},headingTitle:z||("collections"===Q||"products"===Q?"Select Products":"view"===Q?"Selected Products":"searchProducts"===Q?"Searched Products":"rearrange"===Q?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:G||"480px"},headerRightCustomElement:"rearrange"===Q?(console.log("ignore:",_),t(o,{})):t(o,{}),primaryButton:{buttonText:re?"Loading...":Q===k.RearrangeProducts?"Done":"Add",disabled:re||se<1||w&&se<w||!w&&E&&se>E||!1,onClick:()=>{T.onAdd(ge,se),ve()}},footerLeftCustomElement:M?t(o,{}):w&&se>w?t(p,{tagText:`You can only select ${w} products`,type:"negative"}):E&&se>E?t(p,{tagText:`You can only select ${E} products`,type:"negative"}):t(d,se>0?{onClick:()=>{X(q?k.RearrangeProducts:k.SelectedProducts)},buttonText:w?`${se}/${w} products selected`:`${se} products selected`,buttonType:["rearrange","view"].includes(Q)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(Q)}:{disabled:!0,buttonText:w?`${se}/${w} products selected`:`${se} products selected`,buttonType:"tertiaryGray"})},{children:fe}))})};export{T as ProductPickerModal,k as ScreenName};
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as n}from"react";import{COLORS as l}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";import{Input as a}from"../input/Input.js";import{StyledModal as u}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as m}from"./collectionScreen.js";import{ProductsScreen as g}from"./productScreen.js";import{RearrangeScreen as C}from"./rearrangeScreen.js";import{collectionsReducer as b,selectedColectionsReducer as y,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as S}from"./searchScreen.js";import{SelectedScreen as f}from"./selectedScreen.js";import{ContainerStyle as P,ScrollContainerStyle as j}from"./style.js";import{OUT_OF_STOCK_ACTION as x}from"./type.js";var k;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(k||(k={}));const T=T=>{const{storeId:I,selectedItems:O,onClose:R,visible:D,zIndex:F,exactLimit:w,limit:E,hideCollectionCheckbox:$,hideProductCheckbox:A,outOfStockAction:V=x.BLUR,hideVariantCheckbox:B,selectProductsFromCustomCollection:L,hideSelectionCount:M,title:z,width:G,renderWithoutModal:H,onClickSave:W,pickerType:Y,hideProductVariants:K=!1,startupScreen:U=k.Collections,rearrangeEnabled:q,selectSingleItem:J=!1}=T,[N,Q]=r(b,{}),[X,Z]=s([k.Collections,k.RearrangeProducts].includes(U)?U:k.Collections),[_,ee]=s("grid"),[te,oe]=s(""),[ce,re]=s(0),[se,ie]=s(!1),[ne,le]=s(0),[de,ae]=s(""),[ue,he]=s(!1),[pe,me]=s(!1),[ge,Ce]=s(),[be,ye]=r(y,Object.keys(O).length>0?O:{}),ve=i(null);n((()=>{ie(!0),me(!0),T.collectionFetcher(ce,I).then((e=>{Q({type:"fetched",data:(null==e?void 0:e.collections)||{}}),ie(!1),re((e=>e+1)),me(!1)})).catch()}),[]),n((()=>{let e=0;Object.keys(be||[]).forEach((t=>{var o;Object.keys((null===(o=be[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=be[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),le(e)})),n((()=>{var e;te&&!(null===(e=null==N?void 0:N[te])||void 0===e?void 0:e.products)&&(ie(!0),T.productFetcher(te,I).then((e=>{Object.keys(e).length&&Q({type:"productsFetched",data:{collectionId:te,products:e}}),ie(!1)})).catch())}),[te]),n((()=>{const e=setTimeout((()=>{"rearrange"!==X&&(de.length?(he(!0),T.searchFetcher(I,de).then((e=>{Ce(Object.assign({},e)),Z("searchProducts"),ie(!1),he(!1)}))):Z("collections"))}),800);return()=>clearTimeout(e)}),[de]),n((()=>{W&&(T.onAdd(be,ne),Se())}),[W]),n((()=>{J&&Object.keys(be||{}).length&&ne&&(T.onAdd(be,ne),Se())}),[J,be,ne]);const Se=()=>{ye({type:"reset",data:{}})},fe=e(P,{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===X||"searchProducts"===X)&&t("div",Object.assign({style:{padding:H?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(a,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ue?t(h,{size:"small",color:l.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:de,onChangeText:e=>{e.length&&e.trim().length?ae(e):ae("")}})}))}),e(j,Object.assign({ref:ve},{children:["collections"===X&&t(m,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:pe,collections:N,selectedCollectionsDispatch:ye,setCollectionId:oe,setScreen:Z,selectedCollections:be,collectionFetcher:T.collectionFetcher,storeId:I,collectionsDispatch:Q,setSaveDisabled:ie,pagingControls:{curPage:ce,setCurPage:re},hideCollectionCheckbox:$,renderWithoutModal:H,pickerType:Y}),"products"===X&&te&&t(v.Provider,Object.assign({value:te},{children:t(g,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:Z,storeId:I,data:N[te],collectionsDispatch:Q,selectedCollectionsDispatch:ye,selectedData:be,setSaveDisabled:ie,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:A,outOfStockAction:V,hideVariantCheckbox:B,selectProductsFromCustomCollection:L,renderWithoutModal:H,pickerType:Y,hideProductVariants:K})})),"view"===X&&t(f,{selectedCollections:be||{},selectedCollectionsDispatch:ye,setScreen:Z,collections:N}),"rearrange"===X&&t(C,{selectedCollections:be||{},selectedCollectionsDispatch:ye,setScreen:Z,outOfStockAction:V,rearrangeViewType:"grid"===_?"list":"grid",scrollContainerRef:ve}),"searchProducts"===X&&t(S,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:be||{},searchedCollections:ge||{},selectedCollectionsDispatch:ye,setScreen:Z,collections:N,onBackPress:()=>{ae(""),Ce({})},pickerType:Y,hideProductCheckbox:A,hideProductVariants:K,hideVariantCheckbox:B})]}))]});return t(o,{children:H?fe:t(u,Object.assign({zIndex:F,open:D,onClose:()=>{null==R||R(),Se()},headingTitle:z||("collections"===X||"products"===X?"Select Products":"view"===X?"Selected Products":"searchProducts"===X?"Searched Products":"rearrange"===X?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:G||"480px"},headerRightCustomElement:"rearrange"===X?(console.log("ignore:",ee),t(o,{})):t(o,{}),primaryButton:{buttonText:se?"Loading...":X===k.RearrangeProducts?"Done":"Add",disabled:se||ne<1||w&&ne<w||!w&&E&&ne>E||!1,onClick:()=>{T.onAdd(be,ne),Se()}},footerLeftCustomElement:M?t(o,{}):w&&ne>w?t(p,{tagText:`You can only select ${w} products`,type:"negative"}):E&&ne>E?t(p,{tagText:`You can only select ${E} products`,type:"negative"}):t(d,ne>0?{onClick:()=>{Z(q?k.RearrangeProducts:k.SelectedProducts)},buttonText:w?`${ne}/${w} products selected`:`${ne} products selected`,buttonType:["rearrange","view"].includes(X)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(X)}:{disabled:!0,buttonText:w?`${ne}/${w} products selected`:`${ne} products selected`,buttonType:"tertiaryGray"})},{children:fe}))})};export{T as ProductPickerModal,k as ScreenName};

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

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

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

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

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { CarouselProduct } from "../modalElements/EditWhatsAppCarouselTemplateV2";
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
 import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
+import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../../template-preview/models/WhatsappCarouselTemplate";
 import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
@@ -10,12 +12,12 @@ export declare const TemplateModalContext: React.Context<{
     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;
@@ -25,18 +27,38 @@ export declare const TemplateModalContext: React.Context<{
     disableEditVariable?: boolean | undefined;
     pod?: string | undefined;
     extras?: ExtrasWhatsapp | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    selectedCarouselIndex?: number | undefined;
+    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselType?: boolean | undefined;
+    cardCount?: number | undefined;
+    errorIndexes?: number[] | undefined;
+    setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
+    carouselProducts?: CarouselProduct[] | undefined;
+    setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
+    disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
+    onDeleteSelectedProducts?: (() => void) | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
     setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
-    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
-    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;
@@ -46,4 +68,24 @@ export declare const useTemplateModalContext: () => {
     disableEditVariable?: boolean | undefined;
     pod?: string | undefined;
     extras?: ExtrasWhatsapp | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    selectedCarouselIndex?: number | undefined;
+    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselType?: boolean | undefined;
+    cardCount?: number | undefined;
+    errorIndexes?: number[] | undefined;
+    setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
+    carouselProducts?: CarouselProduct[] | undefined;
+    setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
+    disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
+    onDeleteSelectedProducts?: (() => void) | undefined;
 };

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

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

@@ -1,17 +1,17 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as l}from"react";import n from"styled-components";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as s}from"../utils/getVariableNameEmail.js";import{highlightFor as p}from"../utils/highlightFor.js";import d from"./DesktopPreview.js";import m from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import u from"./VariableConnectorsPanel.js";const h=n.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%;
-`,f=n.div`
+`,w=l.div`
 	padding: 16px 14px;
 	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: ${a.stroke.primary} 1px solid;
-`,v=n.div`
-	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
+	border-left: ${r.stroke.primary} 1px solid;
+`,g=l.div`
+	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;
-`,g=n=>{const{showVariableMapping:g,showOnlyContent:w,whatsappSpecificPickerMeta:b,showVariableModal:x,variableList:y,discountCode:C,setDiscountCode:j,variableListForImage:M,showSampleValues:V}=n,P=l(),E=l(),{device:S,display_content:T,channel:k,template:A,setTemplate:L}=r();const I=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(h,{children:[t(v,Object.assign({showOnlyContent:w,showVariableMapping:g},{children:"mobile"===S?t(c,{ref:E,display_content:null!=T?T:"",channel:k,template:A,showSampleValues:V}):k!==i.MESSAGE?t(d,{ref:P,channel:k,display_content:null!=T?T:"",showSampleValues:V}):t(o,{})})),g&&t(f,Object.assign({channel:k},{children:k!==i.WHATSAPP?t(u,{onFocus:k===i.EMAIL?function(e){var t,o,l;const n=null===document||void 0===document?void 0:document.getElementById("mobile"===S?"template_html_mobile":"template_html_desktop"),r=s(e+1),d=k===i.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),m=I(d),c=null==d?void 0:d.offsetLeft;"desktop"===S?m&&P.current&&(null===(o=null==n?void 0:n.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,k,S)):m&&E.current&&(null===(l=null==n?void 0:n.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,k,S))}:void 0,showVariableModal:x,variableList:y,discountCode:C,setDiscountCode:j}):t(m,{whatsappSpecificPickerMeta:b,template:A,onTemplateChange:e=>{null==L||L(e)},showVariableModal:x,variableList:y,variableListForImage:M,discountCode:C,setDiscountCode:j})}))]})};export{g 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,isPreview:!1}):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/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 l,useEffect as s}from"react";import a from"styled-components";import{AddVariableV2SideModal as n}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 v}from"../../template-preview/models/WhatsAppTemplate.js";import b from"../../../assets/icons/box.svg.js";import x from"../../../assets/icons/delete.svg.js";import j from"../../../assets/icons/edit.svg.js";const I=a=>{let{template:c,whatsappSpecificPickerMeta:h,showVariableModal:b,variableList:x,variableListForImage:j,discountCode:I,setDiscountCode:C}=a;var O,T;const{selectedCarouselIndex:k,setTemplate:P,pickerConf:S,isProductCarouselType:V,pod:A,cardCount:E,carouselProducts:L,setCarouselProducts:B,isError:_,cardImages:M,disableEditVariable:F,onDeleteSelectedProducts:W}=g(),[z,D]=l(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[q,R]=l(!1),[N,$]=l(!1),[G,H]=l(!1);s((()=>{D(-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:z})),V&&(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:()=>R(!q),cardBody:`${null==L?void 0:L.length} Products Selected`,deleteItem:()=>{const e=r(Object.assign({},c));e&&(null==M||M.forEach(((t,o)=>{var i;e.components[1].cards[o].components[0].example.header_handle=[null!==(i=M[o])&&void 0!==i?i:""]})),null==P||P(e)),null==B||B([]),null==W||W()}}),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:()=>{$(!0),R(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!F&&V&&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:_?`2px dashed ${p.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:i,onClick:e=>{R(!0)}}),A===v.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=>{H(!0)}})]})]})),t(y,{whatsappSpecificPickerMeta:h,template:c,onTemplateChange:e=>{null==P||P(e)},showVariableModal:b,variableList:x,variableListForImage:j,discountCode:I,setDiscountCode:C}),q&&S&&t(f,{zIndex:200,rearrangeEnabled:N,limit:null!=E?E:1,storeId:S.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:S.fetchCollections,productFetcher:S.fetchProducts,onAdd:(e,t)=>{$(!1);const o=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const l of Object.keys(r)){const{name:s,image:a,quantity:n,displayOrder:d}=r[l],c={name:s,image:a,quantity:n,variantId:l,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};o.push(c)}}}const i=o.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=o.map((e=>e.image)),s=r(Object.assign({},c));s&&(l.forEach(((e,t)=>{var o;s.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(o=null==M?void 0:M[t])&&void 0!==o?o:""]})),null==P||P(s)),null==B||B(i),R(!1)},searchInCollectionFetcher:S.searchInCollection,searchFetcher:S.searchProducts,visible:q,onClose:()=>{R(!1)},exactLimit:null!=E?E:1}),G&&t(n,{zIndex:2e3,data:null!=x?x:[],showVariable:G,setShowVariable:H,placeholder:"Add a variable",customTrigger:e=>{}})]})},w=o=>{const{cardBody:i,deleteItem:r,editItem:l}=o;return e(C,Object.assign({width:"100%"},{children:[t("div",Object.assign({style:{width:36,height:36}},{children:t(b,{})})),t("div",Object.assign({className:"card-body"},{children:t(h,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[l&&t(c,{style:{display:"flex"},Icon:j,onClick:e=>{l(),e.stopPropagation()}}),t(c,{style:{display:"flex",color:"#919191"},Icon:x,onClick:e=>{r(),e.stopPropagation()}})]}))]}))},C=a.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.js

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

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

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

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

@@ -1,5 +1,6 @@
 export interface FooterProps {
+    isWhatsappCarousel: boolean;
     onSelect: () => void;
 }
-declare const Footer: ({ onSelect }: FooterProps) => import("react/jsx-runtime").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/MobilePreview.d.ts

@@ -2,11 +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

@@ -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;
-`,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};
+`,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%"}},isPreview:!0})}))]}))})}));n.displayName="MobilePreview";export{n as default};