@bikdotai/bik-component-library 0.0.433-beta.10 → 0.0.433-beta.12

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

@@ -17,7 +17,10 @@ export interface TemplateContextMapperProps {
     /** Only for initial-UI-purpose for the modal */
     htmlContent: string;
     showOnlyContent?: boolean;
-    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string): string | void;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string): {
+        error: string;
+        errorIndexes: number[];
+    } | void;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     zIndex?: number;
     showVariableModal?: boolean;

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

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

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

@@ -31,6 +31,8 @@ export declare const TemplateModalContext: React.Context<{
     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;
@@ -64,6 +66,8 @@ export declare const useTemplateModalContext: () => {
     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;

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

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

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

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

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

@@ -10,4 +10,4 @@
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`;exports.default=r=>{let{isWhatsappCarousel:s,onSelect:l}=r;const{isError:d,selectedCarouselIndex:i,setSelectedCarouselIndex:c}=n.useTemplateModalContext(),[p,x]=t.useState(s?"Next":"Select template");return t.useEffect((()=>{s&&-1===i?x("Next"):s&&null!=i&&i>-1&&x("Save & Select Template")}),[i]),e.jsxs(u,{children:[d&&e.jsx(a.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:p,size:s?"small":"large",onClick:function(){s&&-1===i&&c?c(0):l()}})]})};
+`;exports.default=r=>{let{isWhatsappCarousel:s,onSelect:l}=r;const{isError:d,selectedCarouselIndex:i,setSelectedCarouselIndex:c,setErrorIndexes:p}=n.useTemplateModalContext(),[x,b]=t.useState(s?"Next":"Select template");return t.useEffect((()=>{s&&-1===i?b("Next"):s&&null!=i&&i>-1&&b("Save & Select Template")}),[i]),e.jsxs(u,{children:[d&&e.jsx(a.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:x,size:s?"small":"large",onClick:function(){s&&-1===i&&c?c(0):(null==p||p([]),l())}})]})};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.d.ts

@@ -2,6 +2,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     isCarouselCard?: boolean | undefined;
     showBorder?: boolean | undefined;
     isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
 }, never>;
 export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -8,11 +8,11 @@
 	position: relative;
 	padding: 8px 0px;
 	border-width: 2px;
-	border-color: ${r.COLORS.stroke.brand};
+	border-color: ${e=>e.hasError?`${r.COLORS.content.negative}`:`${r.COLORS.stroke.brand}`};
 	border-style: ${e=>e.showBorder?"solid":"none"};
 	:hover {
 		border: 2px
-			${e=>e.isWhatsappCarousel?e.showBorder?"solid":"dashed":"none"}
+			${e=>e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"none"}
 			${r.COLORS.stroke.brand};
 	}
 `,a=i.default(t.Caption)`
@@ -31,14 +31,14 @@
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,p=i.default.div`
+`,s=i.default.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${r.COLORS.stroke.primary};
-`,s=i.default.div`
+`,p=i.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -61,4 +61,4 @@
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`,exports.ChatBtnContainer=p,exports.Container=d,exports.FooterWrapper=s,exports.MediaContainer=n,exports.TimeStamp=a;
+`,exports.ChatBtnContainer=s,exports.Container=d,exports.FooterWrapper=p,exports.MediaContainer=n,exports.TimeStamp=a;

package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),a=require("../../../assets/icons/qrb.svg.js"),i=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),l=require("../../tooltips/Tooltip.js"),d=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),u=require("../helpers/VariableEditorHelper.js"),x=require("../models/TemplateMeta.js"),c=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),m=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),j=require("./MediaCard.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=T(o);const y=f.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),a=require("../../../assets/icons/qrb.svg.js"),i=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("react"),n=require("styled-components"),l=require("../../template-context-mapper/context/templateModalContext.js"),d=require("../../tooltips/Tooltip.js"),p=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),x=require("../helpers/VariableEditorHelper.js"),c=require("../models/TemplateMeta.js"),h=require("./ChatBtn.js"),m=require("./ChatUI.style.js"),j=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),f=require("./MediaCard.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=T(n);const C=y.default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,C=f.default.div`
+`,g=y.default.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${p.COLORS.content.primary};
+	color: ${u.COLORS.content.primary};
 	word-wrap: break-word;
-`,g=f.default(C)`
+`,E=y.default(g)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,E=new u.VariableEditorHelper;exports.ChatUIV2=o=>{const{bodyText:p,footerText:u,headerMediaType:T,headerText:f,headerAssetLink:b,headerAssetName:q,quickReplybtn:v,ctaBtn:O,actionTypes:_,extras:S,showHeader:w,imagePreviewStyles:I,size:P,bodyVariableList:L,headerVariableList:A,buttons:M,limitedTimeOfferComponent:N,carouselCardIndex:R}=o,B=E.format(p,L),H=E.format(f,A),{isWhatsappCarousel:Y,selectedCarouselIndex:U,isProductCarouselType:D}=n.useTemplateModalContext(),F={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:i.default,QUICK_REPLY:a.default};return e.jsxs(h.Container,Object.assign({isCarouselCard:null!=R&&R>-1,showBorder:null!=R&&R===U||D&&null!=R&&R>-1&&null!=U&&U>-1,isWhatsappCarousel:Y},{children:[!Y&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===x.HEADER_TYPES.TEXT?e.jsx(g,{dangerouslySetInnerHTML:{__html:H}}):T!==x.HEADER_TYPES.NONE?e.jsx(j.MediaCard,{headerAssetLink:b,headerAssetName:q,mediaType:T,imagePreviewStyles:T===x.HEADER_TYPES.IMAGE?I:{}}):e.jsx(e.Fragment,{}),(null==N?void 0:N.dateTime)?e.jsx(m.LimitedTimeOffer,{text:N.text,dateTime:N.dateTime,code:N.code}):e.jsx(e.Fragment,{}),!!p&&e.jsx(e.Fragment,{children:e.jsx(C,{dangerouslySetInnerHTML:{__html:B}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(l.Tooltip,Object.assign({body:null!=u?u:"",placement:"top"},{children:e.jsx(h.TimeStamp,Object.assign({style:{flex:1}},{children:u}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),M&&M.length>0?M.map(((t,r)=>e.jsx(c.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:F[t.type],size:P},r))):_===x.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(c.ChatBtn,{text:t.text},r)))}):_===x.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(c.ChatBtn,{textTypography:w?d.Caption:d.BodySecondary,extraContent:S?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:i.default,size:P},r)))}):e.jsx(e.Fragment,{})]}))};
+`,q=new x.VariableEditorHelper;exports.ChatUIV2=n=>{const{bodyText:u,footerText:x,headerMediaType:T,headerText:y,headerAssetLink:b,headerAssetName:v,quickReplybtn:O,ctaBtn:_,actionTypes:I,extras:S,showHeader:w,imagePreviewStyles:P,size:L,bodyVariableList:A,headerVariableList:M,buttons:N,limitedTimeOfferComponent:R,carouselCardIndex:B}=n,H=q.format(u,A),Y=q.format(y,M),{isWhatsappCarousel:U,selectedCarouselIndex:D,isProductCarouselType:F,errorIndexes:V}=l.useTemplateModalContext(),k={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:i.default,QUICK_REPLY:a.default};return o.useEffect((()=>{console.log("errorIndexes: ",V)}),[V]),e.jsxs(m.Container,Object.assign({isCarouselCard:null!=B&&B>-1,showBorder:null!=B&&B===D||F&&null!=B&&B>-1&&null!=D&&D>-1,hasError:!!(null==V?void 0:V.find((e=>e===D))),isWhatsappCarousel:U},{children:[!U&&e.jsx(C,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===c.HEADER_TYPES.TEXT?e.jsx(E,{dangerouslySetInnerHTML:{__html:Y}}):T!==c.HEADER_TYPES.NONE?e.jsx(f.MediaCard,{headerAssetLink:b,headerAssetName:v,mediaType:T,imagePreviewStyles:T===c.HEADER_TYPES.IMAGE?P:{}}):e.jsx(e.Fragment,{}),(null==R?void 0:R.dateTime)?e.jsx(j.LimitedTimeOffer,{text:R.text,dateTime:R.dateTime,code:R.code}):e.jsx(e.Fragment,{}),!!u&&e.jsx(e.Fragment,{children:e.jsx(g,{dangerouslySetInnerHTML:{__html:H}})}),e.jsxs(m.FooterWrapper,{children:[e.jsx(d.Tooltip,Object.assign({body:null!=x?x:"",placement:"top"},{children:e.jsx(m.TimeStamp,Object.assign({style:{flex:1}},{children:x}))})),e.jsx(m.TimeStamp,{children:"16:48"})]}),N&&N.length>0?N.map(((t,r)=>e.jsx(h.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:k[t.type],size:L},r))):I===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):I===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==_?void 0:_.map(((t,r)=>e.jsx(h.ChatBtn,{textTypography:w?p.Caption:p.BodySecondary,extraContent:S?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:i.default,size:L},r)))}):e.jsx(e.Fragment,{})]}))};

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

@@ -17,7 +17,10 @@ export interface TemplateContextMapperProps {
     /** Only for initial-UI-purpose for the modal */
     htmlContent: string;
     showOnlyContent?: boolean;
-    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string): string | void;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string): {
+        error: string;
+        errorIndexes: number[];
+    } | void;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     zIndex?: number;
     showVariableModal?: boolean;

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

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

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

@@ -31,6 +31,8 @@ export declare const TemplateModalContext: React.Context<{
     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;
@@ -64,6 +66,8 @@ export declare const useTemplateModalContext: () => {
     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;

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

@@ -1,4 +1,4 @@
-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 m}from"../utils/getVariableNameEmail.js";import{highlightFor as d}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`
+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%;
 `,w=l.div`
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
 	overflow-y: auto;
-`,b=l=>{const{showVariableMapping:b,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:j,discountCode:y,setDiscountCode:M,variableListForImage:V,showSampleValues:A}=l,S=a(),W=a(),{device:T,display_content:E,channel:L,template:k,setTemplate:I,isWhatsappCarousel:_}=p();const D=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"===T?t(h,{ref:W,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,{})})),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"===T?"template_html_mobile":"template_html_desktop"),i=m(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=D(n),c=null==n?void 0:n.offsetLeft;"desktop"===T?p&&S.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,p),d(i,r.background.warning.light,2,L,T)):p&&W.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),d(i,r.background.warning.light,2,L,T))}:void 0,showVariableModal:P,variableList:j,discountCode:y,setDiscountCode:M}):L===s.WHATSAPP&&_?t(n,{whatsappSpecificPickerMeta:x,template:k,showVariableModal:P,variableList:j,variableListForImage:V,discountCode:y,setDiscountCode:M}):t(u,{whatsappSpecificPickerMeta:x,template:k,onTemplateChange:e=>{null==I||I(e)},showVariableModal:P,variableList:j,variableListForImage:V,discountCode:y,setDiscountCode:M})}))]})};export{b 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/EditWhatsAppCarouselTemplateV2.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/PlusIcon.js";import{useState as r,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 l}from"../../button/Button.js";import{IconButton as d}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as c}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as p,BodyCaption as m,TitleRegular as u}from"../../TypographyStyle.js";import{ProductPickerModal as h}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import g 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 y}from"../../template-preview/models/WhatsAppTemplate.js";import b from"../../../assets/icons/box.svg.js";import v from"../../../assets/icons/delete.svg.js";import j from"../../../assets/icons/edit.svg.js";const x=a=>{let{template:d,whatsappSpecificPickerMeta:u,showVariableModal:b,variableList:v,variableListForImage:j,discountCode:x,setDiscountCode:w}=a;const{selectedCarouselIndex:C,setTemplate:O,pickerConf:T,isProductCarouselType:k,pod:P,cardCount:A}=f(),[S,V]=r(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[B,L]=r(!1),[E,M]=r(!1),[_,F]=r(!1),[W,z]=r([]);s((()=>{V(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[C]);return e("div",{children:[t(p,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:S})),k&&W.length>0&&null!=C&&C>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(I,{editItem:()=>L(!B),cardBody:`${W.length} Products Selected`,deleteItem:()=>{z([])}}),t(l,{disabled:W.length<=1,style:{alignSelf:"flex-end",background:c.surface.subdued},onClick:()=>{M(!0),L(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),k&&0===W.length&&null!=C&&C>=0&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(l,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{L(!0)}}),P===y.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(m,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(l,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{F(!0)}})]})]})),t(g,{whatsappSpecificPickerMeta:u,template:d,onTemplateChange:e=>{null==O||O(e)},showVariableModal:b,variableList:v,variableListForImage:j,discountCode:x,setDiscountCode:w}),B&&T&&t(h,{zIndex:200,rearrangeEnabled:E,limit:null!=A?A:1,storeId:T.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{}})(W),collectionFetcher:T.fetchCollections,productFetcher:T.fetchProducts,onAdd:(e,t)=>{console.log("items: ",e),M(!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 a of Object.keys(s)){const{name:n,image:l,quantity:d,displayOrder:c}=s[a],p={name:n,image:l,quantity:d,variantId:a,productId:e,displayOrder:c,collectionId:t,productName:r[e].name,productImage:r[e].image};i.push(p),o.push(l)}}}const r=i.sort(((e,t)=>e.displayOrder-t.displayOrder)),s=Object.assign({},d);o.forEach(((e,t)=>{e&&(s.components[1].cards[t].components[0].example.header_handle=[e])})),null==O||O(s),z(r),L(!1)},searchInCollectionFetcher:T.searchInCollection,searchFetcher:T.searchProducts,visible:B,onClose:()=>{L(!1)}}),_&&t(n,{zIndex:2e3,data:null!=v?v:[],showVariable:_,setShowVariable:F,placeholder:"Add a variable",customTrigger:e=>{}})]})},I=o=>{const{cardBody:i,deleteItem:r,editItem:s}=o;return e(w,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(u,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[s&&t(d,{style:{display:"flex"},Icon:j,onClick:e=>{s(),e.stopPropagation()}}),t(d,{style:{display:"flex",color:"#919191"},Icon:v,onClick:e=>{r(),e.stopPropagation()}})]}))]}))},w=a.div`
+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 a}from"react";import n from"styled-components";import{AddVariableV2SideModal as l}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;const{selectedCarouselIndex:O,setTemplate:T,pickerConf:k,isProductCarouselType:P,pod:A,cardCount:S}=g(),[V,B]=s(-1==O?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[L,E]=s(!1),[M,_]=s(!1),[F,W]=s(!1),[z,D]=s([]);a((()=>{B(-1==O?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[O]);return e("div",{children:[t(m,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:V})),P&&z.length>0&&null!=O&&O>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(w,{editItem:()=>E(!L),cardBody:`${z.length} Products Selected`,deleteItem:()=>{D([])}}),t(d,{disabled:z.length<=1,style:{alignSelf:"flex-end",background:p.surface.subdued},onClick:()=>{_(!0),E(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),P&&0===z.length&&null!=O&&O>=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},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{E(!0)}}),A===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=>{W(!0)}})]})]})),t(y,{whatsappSpecificPickerMeta:h,template:c,onTemplateChange:e=>{null==T||T(e)},showVariableModal:v,variableList:j,variableListForImage:x,discountCode:I,setDiscountCode:C}),L&&k&&t(f,{zIndex:200,rearrangeEnabled:M,limit:null!=S?S:1,storeId:k.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{}})(z),collectionFetcher:k.fetchCollections,productFetcher:k.fetchProducts,onAdd:(e,t)=>{console.log("items: ",e),_(!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 a of Object.keys(s)){const{name:n,image:l,quantity:d,displayOrder:c}=s[a],p={name:n,image:l,quantity:d,variantId:a,productId:e,displayOrder:c,collectionId:t,productName:r[e].name,productImage:r[e].image};i.push(p),o.push(l)}}}const s=i.sort(((e,t)=>e.displayOrder-t.displayOrder)),a=r(Object.assign({},c));o.forEach(((e,t)=>{e&&(a.components[1].cards[t].components[0].example.header_handle=[e])})),null==T||T(a),D(s),E(!1)},searchInCollectionFetcher:k.searchInCollection,searchFetcher:k.searchProducts,visible:L,onClose:()=>{E(!1)}}),F&&t(l,{zIndex:2e3,data:null!=j?j:[],showVariable:F,setShowVariable:W,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;
@@ -44,4 +44,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"..
 			color: #000000;
 		}
 	}
-`;export{x as default};
+`;export{I as default};

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

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r}from"react";import s from"styled-components";import{Button as a}from"../../button/Button.js";import{COLORS as n}from"../../../constants/Theme.js";import{Badge as i}from"../Badge/index.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";const l=s.div`
-	background: ${n.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: ${n.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 e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`,d=s=>{let{isWhatsappCarousel:n,onSelect:d}=s;const{isError:m,selectedCarouselIndex:c,setSelectedCarouselIndex:x}=p(),[u,f]=o(n?"Next":"Select template");return r((()=>{n&&-1===c?f("Next"):n&&null!=c&&c>-1&&f("Save & Select Template")}),[c]),e(l,{children:[m&&t(i,{errorText:"Some inputs are missing or incorrect. Please check"}),t(a,{id:"select-template-btn",buttonText:u,size:n?"small":"large",onClick:function(){n&&-1===c&&x?x(0):d()}})]})};export{d 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-preview/WhatsApp/ChatUI.style.d.ts

@@ -2,6 +2,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     isCarouselCard?: boolean | undefined;
     showBorder?: boolean | undefined;
     isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
 }, never>;
 export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;

package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js

@@ -1,28 +1,28 @@
-import o from"styled-components";import{Caption as r}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";const t=o.div`
+import r from"styled-components";import{Caption as o}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";const t=r.div`
 	background: ${e.surface.standard};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: ${o=>o.isCarouselCard?"12px":"0px"};
+	border-top-left-radius: ${r=>r.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
 	border-width: 2px;
-	border-color: ${e.stroke.brand};
-	border-style: ${o=>o.showBorder?"solid":"none"};
+	border-color: ${r=>r.hasError?`${e.content.negative}`:`${e.stroke.brand}`};
+	border-style: ${r=>r.showBorder?"solid":"none"};
 	:hover {
 		border: 2px
-			${o=>o.isWhatsappCarousel?o.showBorder?"solid":"dashed":"none"}
+			${r=>r.isWhatsappCarousel?r.hasError?"dashed":r.showBorder?"solid":"dashed":"none"}
 			${e.stroke.brand};
 	}
-`,i=o(r)`
+`,i=r(o)`
 	color: ${e.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,d=o.div`
+`,d=r.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -31,19 +31,19 @@ import o from"styled-components";import{Caption as r}from"../../TypographyStyle.
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,p=o.div`
+`,p=r.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${e.stroke.primary};
-`,s=o.div`
+`,s=r.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
-`;o.div`
+`;r.div`
 	position: absolute;
 	bottom: -1px;
 	left: 0;
@@ -57,7 +57,7 @@ import o from"styled-components";import{Caption as r}from"../../TypographyStyle.
 	background: ${e.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-`,o.div`
+`,r.div`
 	position: absolute;
 	top: 16px;
 	right: 16px;

package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js

@@ -1,19 +1,19 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/copy-code-icon.svg.js";import i from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import a from"../../../assets/icons/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import l from"styled-components";import{useTemplateModalContext as m}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as p}from"../../tooltips/Tooltip.js";import{Caption as d,BodySecondary as c}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as x,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as g,FooterWrapper as u,TimeStamp as C}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as b}from"./MediaCard.js";const v=l.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/copy-code-icon.svg.js";import i from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import a from"../../../assets/icons/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import{useEffect as l}from"react";import m from"styled-components";import{useTemplateModalContext as p}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as d}from"../../tooltips/Tooltip.js";import{Caption as c,BodySecondary as h}from"../../TypographyStyle.js";import{COLORS as f}from"../../../constants/Theme.js";import{VariableEditorHelper as x}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as y,ACTIONS_TYPES as T}from"../models/TemplateMeta.js";import{ChatBtn as g}from"./ChatBtn.js";import{Container as u,FooterWrapper as C,TimeStamp as j}from"./ChatUI.style.js";import{LimitedTimeOffer as b}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as v}from"./MediaCard.js";const w=m.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,w=l.div`
+`,I=m.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${h.content.primary};
+	color: ${f.content.primary};
 	word-wrap: break-word;
-`,O=l(w)`
+`,O=m(I)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,I=new f,L=l=>{const{bodyText:h,footerText:f,headerMediaType:L,headerText:E,headerAssetLink:_,headerAssetName:N,quickReplybtn:M,ctaBtn:P,actionTypes:R,extras:A,showHeader:B,imagePreviewStyles:H,size:S,bodyVariableList:U,headerVariableList:k,buttons:z,limitedTimeOfferComponent:Y,carouselCardIndex:V}=l,q=I.format(h,U),D=I.format(E,k),{isWhatsappCarousel:K,selectedCarouselIndex:Q,isProductCarouselType:W}=m(),G={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:a};return e(g,Object.assign({isCarouselCard:null!=V&&V>-1,showBorder:null!=V&&V===Q||W&&null!=V&&V>-1&&null!=Q&&Q>-1,isWhatsappCarousel:K},{children:[!K&&t(v,{children:t(i,{color:"white",height:8,width:8})}),L===x.TEXT?t(O,{dangerouslySetInnerHTML:{__html:D}}):L!==x.NONE?t(b,{headerAssetLink:_,headerAssetName:N,mediaType:L,imagePreviewStyles:L===x.IMAGE?H:{}}):t(o,{}),(null==Y?void 0:Y.dateTime)?t(j,{text:Y.text,dateTime:Y.dateTime,code:Y.code}):t(o,{}),!!h&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:q}})}),e(u,{children:[t(p,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(C,Object.assign({style:{flex:1}},{children:f}))})),t(C,{children:"16:48"})]}),z&&z.length>0?z.map(((e,o)=>t(T,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:G[e.type],size:S},o))):R===y.QUICK_REPLY?t("div",{children:null==M?void 0:M.map(((e,o)=>t(T,{text:e.text},o)))}):R===y.CTA_BTN?t("div",{children:null==P?void 0:P.map(((e,o)=>t(T,{textTypography:B?d:c,extraContent:A?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:S},o)))}):t(o,{})]}))};export{L as ChatUIV2};
+`,E=new x,L=m=>{const{bodyText:f,footerText:x,headerMediaType:L,headerText:_,headerAssetLink:N,headerAssetName:M,quickReplybtn:P,ctaBtn:R,actionTypes:A,extras:B,showHeader:H,imagePreviewStyles:S,size:U,bodyVariableList:k,headerVariableList:z,buttons:Y,limitedTimeOfferComponent:V,carouselCardIndex:q}=m,D=E.format(f,k),K=E.format(_,z),{isWhatsappCarousel:Q,selectedCarouselIndex:W,isProductCarouselType:G,errorIndexes:X}=p(),$={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:a};return l((()=>{console.log("errorIndexes: ",X)}),[X]),e(u,Object.assign({isCarouselCard:null!=q&&q>-1,showBorder:null!=q&&q===W||G&&null!=q&&q>-1&&null!=W&&W>-1,hasError:!!(null==X?void 0:X.find((e=>e===W))),isWhatsappCarousel:Q},{children:[!Q&&t(w,{children:t(i,{color:"white",height:8,width:8})}),L===y.TEXT?t(O,{dangerouslySetInnerHTML:{__html:K}}):L!==y.NONE?t(v,{headerAssetLink:N,headerAssetName:M,mediaType:L,imagePreviewStyles:L===y.IMAGE?S:{}}):t(o,{}),(null==V?void 0:V.dateTime)?t(b,{text:V.text,dateTime:V.dateTime,code:V.code}):t(o,{}),!!f&&t(o,{children:t(I,{dangerouslySetInnerHTML:{__html:D}})}),e(C,{children:[t(d,Object.assign({body:null!=x?x:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:x}))})),t(j,{children:"16:48"})]}),Y&&Y.length>0?Y.map(((e,o)=>t(g,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:$[e.type],size:U},o))):A===T.QUICK_REPLY?t("div",{children:null==P?void 0:P.map(((e,o)=>t(g,{text:e.text},o)))}):A===T.CTA_BTN?t("div",{children:null==R?void 0:R.map(((e,o)=>t(g,{textTypography:H?c:h,extraContent:B?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:U},o)))}):t(o,{})]}))};export{L as ChatUIV2};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.433-beta.10",
+	"version": "0.0.433-beta.12",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",