@bikdotai/bik-component-library 0.0.433-beta.11 → 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/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/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.11",
+	"version": "0.0.433-beta.12",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",