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

package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("../../helpers/BaseWhatsappContentLang.helper.js"),r=require("react"),l=require("../../constants/Theme.js"),o=require("../TypographyStyle.js"),i=require("./CustomEditor.styled.js"),u=require("./WhatsAppTextEditorHeader.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(r);const a="Character limit reached",d=new n.BaseWhatsappContentLangHelper,v={[u.EditorActionTypes.BOLD]:"*",[u.EditorActionTypes.ITALIC]:"_",[u.EditorActionTypes.STRIKETHROUGH]:"~"},p=s.default.forwardRef(((n,c)=>{var s,p,{onChange:h,text:f,RightComponent:g,error:x,limit:j,onError:m,rows:C,actions:E}=n,T=e.__rest(n,["onChange","text","RightComponent","error","limit","onError","rows","actions"]);const y=r.useRef(null);function O(e){const t=null==y?void 0:y.current;null!=t&&(t.selectionStart?(t.focus(),t.selectionEnd=e):t.focus())}function L(e){var t,n;let r=null!==(n=null===(t=y.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(y.current&&e){const t=y.current.selectionStart,n=y.current.selectionEnd,l=e;if(t===n)return S(l);{r=d.wrappWildcard(t,n,l,r);const e=d.getHTML(r);return y.current.value=r,{text:r,html:e}}}return{text:r,html:r}}function S(e){var t,n;let r=null!==(n=null===(t=y.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(y.current&&e){const t=y.current.selectionStart;if(t===y.current.selectionEnd)return H(e,t)}return{text:r,html:r}}function H(e,t){var n,r;let l=null!==(r=null===(n=y.current)||void 0===n?void 0:n.value)&&void 0!==r?r:"";l=l.slice(0,t)+e+l.slice(t);const o=d.getHTML(l);return y.current.value=l,{text:l,html:o}}return r.useImperativeHandle(c,(()=>({addTextOrWrap:L,addText:S,get(){var e,t;return null!==(t=null===(e=y.current)||void 0===e?void 0:e.value)&&void 0!==t?t:""},setCaretPosition:O}))),r.useEffect((()=>{if(null==y?void 0:y.current){y.current.value=f||"";const e=d.getHTML(f||"");null==h||h(f||"",e)}}),[f]),r.useEffect((()=>{var e,t;(null===(e=null==y?void 0:y.current)||void 0===e?void 0:e.value)&&j&&((null===(t=null==y?void 0:y.current)||void 0===t?void 0:t.value.length)>j?null==m||m(a):null==m||m(null!=x?x:""))}),[null===(s=null==y?void 0:y.current)||void 0===s?void 0:s.value.length]),t.jsxs(i.OuterContainer,{children:[t.jsxs(i.Container,Object.assign({isError:!!x},{children:[t.jsx(u.WhatsAppTextEditorHeader,{actions:E,ref:y,onActionSelect:function(e){if((null==v?void 0:v[e])&&y.current){const t=y.current.selectionStart;if(t===y.current.selectionEnd){H(null==v?void 0:v[e],t);const{text:n,html:r}=H(null==v?void 0:v[e],t);O(t+1),null==h||h(n,r)}else{const{text:t,html:n}=L(null==v?void 0:v[e]);null==h||h(t,n)}}},RightComponent:g,onEmojiClick:function(e){const{text:t,html:n}=S(e);null==h||h(t,n)}}),t.jsx(i.TextSpace,Object.assign({ref:y,onChange:function(e){const t=e.target.value,n=d.getHTML(t);null==h||h(t,n)}},T,{rows:C}))]})),x&&x!==a?t.jsx(o.BodyCaption,Object.assign({style:{color:l.COLORS.content.negative}},{children:x})):t.jsx(t.Fragment,{children:j&&(null==y?void 0:y.current)?t.jsxs(o.BodyCaption,Object.assign({style:{color:x===a||(null===(p=null==y?void 0:y.current)||void 0===p?void 0:p.value.length)>j?l.COLORS.content.negative:l.COLORS.content.secondary}},{children:[y.current.value.length,"/",j]})):t.jsx(t.Fragment,{})})]})}));p.displayName="WhatsAppTextEditor",exports.WhatsAppTextEditor=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("../../assets/icons/info.svg.js"),r=require("../../helpers/BaseWhatsappContentLang.helper.js"),l=require("react"),o=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),u=require("./CustomEditor.styled.js"),s=require("./WhatsAppTextEditorHeader.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(l);const d="Character limit reached",v=new r.BaseWhatsappContentLangHelper,h={[s.EditorActionTypes.BOLD]:"*",[s.EditorActionTypes.ITALIC]:"_",[s.EditorActionTypes.STRIKETHROUGH]:"~"},p=a.default.forwardRef(((r,c)=>{var a,p,{onChange:f,text:g,RightComponent:x,error:j,limit:m,onError:C,rows:E,actions:T}=r,O=e.__rest(r,["onChange","text","RightComponent","error","limit","onError","rows","actions"]);const y=l.useRef(null);function L(e){const t=null==y?void 0:y.current;null!=t&&(t.selectionStart?(t.focus(),t.selectionEnd=e):t.focus())}function S(e){var t,n;let r=null!==(n=null===(t=y.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(y.current&&e){const t=y.current.selectionStart,n=y.current.selectionEnd,l=e;if(t===n)return R(l);{r=v.wrappWildcard(t,n,l,r);const e=v.getHTML(r);return y.current.value=r,{text:r,html:e}}}return{text:r,html:r}}function R(e){var t,n;let r=null!==(n=null===(t=y.current)||void 0===t?void 0:t.value)&&void 0!==n?n:"";if(y.current&&e){const t=y.current.selectionStart;if(t===y.current.selectionEnd)return H(e,t)}return{text:r,html:r}}function H(e,t){var n,r;let l=null!==(r=null===(n=y.current)||void 0===n?void 0:n.value)&&void 0!==r?r:"";l=l.slice(0,t)+e+l.slice(t);const o=v.getHTML(l);return y.current.value=l,{text:l,html:o}}return l.useImperativeHandle(c,(()=>({addTextOrWrap:S,addText:R,get(){var e,t;return null!==(t=null===(e=y.current)||void 0===e?void 0:e.value)&&void 0!==t?t:""},setCaretPosition:L}))),l.useEffect((()=>{if(null==y?void 0:y.current){y.current.value=g||"";const e=v.getHTML(g||"");null==f||f(g||"",e)}}),[g]),l.useEffect((()=>{var e,t;(null===(e=null==y?void 0:y.current)||void 0===e?void 0:e.value)&&m&&((null===(t=null==y?void 0:y.current)||void 0===t?void 0:t.value.length)>m?null==C||C(d):null==C||C(null!=j?j:""))}),[null===(a=null==y?void 0:y.current)||void 0===a?void 0:a.value.length]),t.jsxs(u.OuterContainer,{children:[t.jsxs(u.Container,Object.assign({isError:!!j},{children:[t.jsx(s.WhatsAppTextEditorHeader,{actions:T,ref:y,onActionSelect:function(e){if((null==h?void 0:h[e])&&y.current){const t=y.current.selectionStart;if(t===y.current.selectionEnd){H(null==h?void 0:h[e],t);const{text:n,html:r}=H(null==h?void 0:h[e],t);L(t+1),null==f||f(n,r)}else{const{text:t,html:n}=S(null==h?void 0:h[e]);null==f||f(t,n)}}},RightComponent:x,onEmojiClick:function(e){const{text:t,html:n}=R(e);null==f||f(t,n)}}),t.jsx(u.TextSpace,Object.assign({ref:y,onChange:function(e){const t=e.target.value,n=v.getHTML(t);null==f||f(t,n)}},O,{rows:E}))]})),j&&j!==d?t.jsxs("div",Object.assign({style:{display:"flex",gap:6,alignItems:"center"}},{children:[t.jsx(n.default,{width:16,height:16,color:o.COLORS.content.negative}),t.jsx(i.BodyCaption,Object.assign({color:o.COLORS.content.negative},{children:j}))]})):t.jsx(t.Fragment,{children:m&&(null==y?void 0:y.current)?t.jsxs(i.BodyCaption,Object.assign({style:{color:j===d||(null===(p=null==y?void 0:y.current)||void 0===p?void 0:p.value.length)>m?o.COLORS.content.negative:o.COLORS.content.secondary}},{children:[y.current.value.length,"/",m]})):t.jsx(t.Fragment,{})})]})}));p.displayName="WhatsAppTextEditor",exports.WhatsAppTextEditor=p;

package/dist/cjs/components/carousel-preview/CarouselPreview.d.ts

@@ -9,4 +9,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
     channel: CHANNEL_TYPE;
     template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
     showSampleValues?: boolean | undefined;
+    isPreview?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/carousel-preview/CarouselPreview.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),o=require("../../assets/icons/chevronRight.svg.js"),r=require("pure-react-carousel"),i=require("react"),n=require("styled-components"),a=require("./CarouselPreviewCard.js"),l=require("../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(i),c=s(n);const u=c.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),i=require("../../assets/icons/chevronRight.svg.js"),r=require("pure-react-carousel"),o=require("react"),n=require("styled-components"),s=require("./CarouselPreviewCard.js"),a=require("../../constants/Theme.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(o),c=l(n);const u=c.default.div`
 	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
-	border-color: ${l.COLORS.stroke.primary};
+	border-color: ${a.COLORS.stroke.primary};
 	border-top-style: solid;
 	border-bottom-style: solid;
 	border-top-width: 1px;
@@ -49,4 +49,4 @@
 		width: 100%;
 		height: 480px;
 	}
-`,h=d.default.forwardRef(((i,n)=>{let{channel:s,template:d,showSampleValues:c}=i;var h,b,x,g;const v=null===(h=null==d?void 0:d.components)||void 0===h?void 0:h[1].cards;return e.jsxs(u,{children:[e.jsx(a.default,{channel:s,template:d,carouselCardIndex:-1}),!!(null==v?void 0:v.length)&&e.jsx(r.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(b=null==v?void 0:v.length)&&void 0!==b?b:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e.jsxs(p,{children:[e.jsx(r.ButtonBack,Object.assign({className:"left_button"},{children:e.jsx(t.default,{height:10,width:10,color:l.COLORS.content.primary})})),e.jsx(r.Slider,Object.assign({className:"slider"},{children:null===(g=null===(x=null==d?void 0:d.components)||void 0===x?void 0:x[1].cards)||void 0===g?void 0:g.map(((t,o)=>{var i,n;const l={components:t.components,mapping:null===(n=null===(i=null==d?void 0:d.mapping)||void 0===i?void 0:i.cards)||void 0===n?void 0:n[o]};return e.jsx(r.Slide,Object.assign({index:o},{children:e.jsx(a.default,{channel:s,template:l,carouselCardIndex:o},o)}),o)}))})),e.jsx(r.ButtonNext,Object.assign({className:"right_button"},{children:e.jsx(o.default,{height:10,width:10,color:l.COLORS.content.primary})}))]})}))]})}));exports.CarouselPreview=h;
+`,h=d.default.forwardRef(((o,n)=>{let{channel:l,template:d,showSampleValues:c,isPreview:h}=o;var b,x,g,v;const f=null===(b=null==d?void 0:d.components)||void 0===b?void 0:b[1].cards;return e.jsxs(u,{children:[e.jsx(s.default,{channel:l,template:d,carouselCardIndex:-1,isPreview:h}),!!(null==f?void 0:f.length)&&e.jsx(r.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(x=null==f?void 0:f.length)&&void 0!==x?x:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e.jsxs(p,{children:[e.jsx(r.ButtonBack,Object.assign({className:"left_button"},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})})),e.jsx(r.Slider,Object.assign({className:"slider"},{children:null===(v=null===(g=null==d?void 0:d.components)||void 0===g?void 0:g[1].cards)||void 0===v?void 0:v.map(((t,i)=>{var o,n;const a={components:t.components,mapping:null===(n=null===(o=null==d?void 0:d.mapping)||void 0===o?void 0:o.cards)||void 0===n?void 0:n[i]};return e.jsx(r.Slide,Object.assign({index:i},{children:e.jsx(s.default,{channel:l,template:a,carouselCardIndex:i,isPreview:h},i)}),i)}))})),e.jsx(r.ButtonNext,Object.assign({className:"right_button"},{children:e.jsx(i.default,{height:10,width:10,color:a.COLORS.content.primary})}))]})}))]})}));exports.CarouselPreview=h;

package/dist/cjs/components/carousel-preview/CarouselPreviewCard.d.ts

@@ -5,5 +5,6 @@ declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
     template: any;
     showSampleValues?: boolean | undefined;
     carouselCardIndex?: number | undefined;
+    isPreview?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default CarouselPreviewCard;

package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../template-context-mapper/context/templateModalContext.js"),a=require("../template-preview/TemplatePreview.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../constants/Theme.js"),require("../curtain/CurtainHelper.js"),require("../template-preview/models/TemplateMeta.js"),require("../template-preview/models/WhatsAppTemplate.js");const l=s(t).default.forwardRef((t=>{let{channel:s,template:l,showSampleValues:p,carouselCardIndex:i}=t;const{cardWidth:u}=r.useTemplateModalContext();return e.jsx("div",Object.assign({style:{width:null!=u?u:360}},{children:e.jsx(a.TemplatePreview,{showSampleValues:p,template:l,channel:s,size:"small",hideHeader:!0,carouselCardIndex:i,isWhatsappCarousel:!0})}))}));exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../template-context-mapper/context/templateModalContext.js"),a=require("../template-preview/TemplatePreview.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../constants/Theme.js"),require("../curtain/CurtainHelper.js"),require("../template-preview/models/TemplateMeta.js"),require("../template-preview/models/WhatsAppTemplate.js");const l=s(t).default.forwardRef((t=>{let{channel:s,template:l,showSampleValues:i,carouselCardIndex:p,isPreview:u}=t;const{cardWidth:n}=r.useTemplateModalContext();return e.jsx("div",Object.assign({style:{width:null!=n?n:360}},{children:e.jsx(a.TemplatePreview,{showSampleValues:i,template:l,channel:s,size:"small",hideHeader:!0,carouselCardIndex:p,isWhatsappCarousel:!0,isPreview:u})}))}));exports.default=l;

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

@@ -60,6 +60,7 @@ export type ProductPickerInterface = {
     visible: boolean;
     zIndex?: number;
     limit?: number;
+    exactLimit?: number;
     hideCollectionCheckbox?: boolean;
     hideProductCheckbox?: boolean;
     outOfStockAction?: OUT_OF_STOCK_ACTION;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import 'pure-react-carousel/dist/react-carousel.es.css';
 import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
 import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
@@ -48,4 +47,4 @@ export interface TemplateContextMapperProps {
     cardWidth?: number;
     onDeleteSelectedProducts?: () => void;
 }
-export declare const TemplateContextMapper: React.FC<TemplateContextMapperProps>;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, onDeleteSelectedProducts, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -14,4 +14,4 @@
 	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: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})}))]})};
+`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:f,whatsappSpecificPickerMeta:g,showVariableModal:w,variableList:b,discountCode:P,setDiscountCode:j,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,isPreview:!1}):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:P,setDiscountCode:j}):N===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(o.default,{whatsappSpecificPickerMeta:g,template:S,showVariableModal:w,variableList:b,variableListForImage:E,discountCode:P,setDiscountCode:j}):e.jsx(p.default,{whatsappSpecificPickerMeta:g,template:S,onTemplateChange:e=>{null==_||_(e)},showVariableModal:w,variableList:b,variableListForImage:E,discountCode:P,setDiscountCode:j})}))]})};

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("lodash"),s=require("react"),r=require("styled-components"),l=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 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(o.IconButton,{style:{display:"flex"},Icon:g.default,onClick:e=>{r(),e.stopPropagation()}}),e.jsx(o.IconButton,{style:{display:"flex",color:"#919191"},Icon:f.default,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},y=j(r).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"),l=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 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 x(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(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(o.IconButton,{style:{display:"flex"},Icon:g.default,onClick:e=>{r(),e.stopPropagation()}}),e.jsx(o.IconButton,{style:{display:"flex",color:"#919191"},Icon:f.default,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},y=x(r).default.div`
 	width: ${e=>e.width};
 	padding: 12px;
 	display: flex;
@@ -44,4 +44,4 @@
 			color: #000000;
 		}
 	}
-`;exports.default=r=>{let{template:o,whatsappSpecificPickerMeta:h,showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:v}=r;var b,I;const{selectedCarouselIndex:C,setTemplate:w,pickerConf:q,isProductCarouselType:O,pod:P,cardCount:T,carouselProducts:k,setCarouselProducts:S,isError:B,cardImages:V,disableEditVariable:A,onDeleteSelectedProducts:M}=u.useTemplateModalContext(),[E,L]=s.useState(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[_,D]=s.useState(!1),[F,W]=s.useState(!1),[z,R]=s.useState(!1);s.useEffect((()=>{L(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[C]);return e.jsxs("div",{children:[e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:E})),O&&(null!==(b=null==k?void 0:k.length)&&void 0!==b?b:0)>0&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[e.jsx(x,{editItem:()=>D(!_),cardBody:`${null==k?void 0:k.length} Products Selected`,deleteItem:()=>{const e=i.cloneDeep(Object.assign({},o));e&&(null==V||V.forEach(((t,i)=>{var s;e.components[1].cards[i].components[0].example.header_handle=[null!==(s=V[i])&&void 0!==s?s:""]})),null==w||w(e)),null==S||S([]),null==M||M()}}),e.jsx(a.Button,{disabled:(null!==(I=null==k?void 0:k.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end",background:n.COLORS.surface.subdued},onClick:()=>{W(!0),D(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!A&&O&&0===(null==k?void 0:k.length)&&null!=C&&C>=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,border:B?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:B?"tertiaryGray":"dashBold",LeadingIcon:t.default,onClick:e=>{D(!0)}}),P===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(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=>{R(!0)}})]})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:h,template:o,onTemplateChange:e=>{null==w||w(e)},showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:v}),_&&q&&e.jsx(c.ProductPickerModal,{zIndex:200,rearrangeEnabled:F,limit:null!=T?T:1,storeId:q.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{}})(null!=k?k:[]),collectionFetcher:q.fetchCollections,productFetcher:q.fetchProducts,onAdd:(e,t)=>{W(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const l of Object.keys(r)){const{name:a,image:o,quantity:n,displayOrder:d}=r[l],c={name:a,image:o,quantity:n,variantId:l,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};s.push(c)}}}const r=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=s.map((e=>e.image)),a=i.cloneDeep(Object.assign({},o));a&&(l.forEach(((e,t)=>{var i;a.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(i=null==V?void 0:V[t])&&void 0!==i?i:""]})),null==w||w(a)),null==S||S(r),D(!1)},searchInCollectionFetcher:q.searchInCollection,searchFetcher:q.searchProducts,visible:_,onClose:()=>{D(!1)}}),z&&e.jsx(l.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:z,setShowVariable:R,placeholder:"Add a variable",customTrigger:e=>{}})]})};
+`;exports.default=r=>{let{template:o,whatsappSpecificPickerMeta:h,showVariableModal:f,variableList:g,variableListForImage:x,discountCode:y,setDiscountCode:v}=r;var b,I;const{selectedCarouselIndex:C,setTemplate:w,pickerConf:q,isProductCarouselType:O,pod:P,cardCount:T,carouselProducts:k,setCarouselProducts:S,isError:B,cardImages:V,disableEditVariable:A,onDeleteSelectedProducts:L}=u.useTemplateModalContext(),[M,E]=s.useState(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[_,D]=s.useState(!1),[F,W]=s.useState(!1),[z,R]=s.useState(!1);s.useEffect((()=>{E(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[C]);return e.jsxs("div",{children:[e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:M})),O&&(null!==(b=null==k?void 0:k.length)&&void 0!==b?b:0)>0&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[e.jsx(j,{editItem:()=>D(!_),cardBody:`${null==k?void 0:k.length} Products Selected`,deleteItem:()=>{const e=i.cloneDeep(Object.assign({},o));e&&(null==V||V.forEach(((t,i)=>{var s;e.components[1].cards[i].components[0].example.header_handle=[null!==(s=V[i])&&void 0!==s?s:""]})),null==w||w(e)),null==S||S([]),null==L||L()}}),e.jsx(a.Button,{disabled:(null!==(I=null==k?void 0:k.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end",background:n.COLORS.surface.subdued},onClick:()=>{W(!0),D(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!A&&O&&0===(null==k?void 0:k.length)&&null!=C&&C>=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,border:B?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:B?"tertiaryGray":"dashBold",LeadingIcon:t.default,onClick:e=>{D(!0)}}),P===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(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=>{R(!0)}})]})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:h,template:o,onTemplateChange:e=>{null==w||w(e)},showVariableModal:f,variableList:g,variableListForImage:x,discountCode:y,setDiscountCode:v}),_&&q&&e.jsx(c.ProductPickerModal,{zIndex:200,rearrangeEnabled:F,limit:null!=T?T:1,storeId:q.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{}})(null!=k?k:[]),collectionFetcher:q.fetchCollections,productFetcher:q.fetchProducts,onAdd:(e,t)=>{W(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const l of Object.keys(r)){const{name:a,image:o,quantity:n,displayOrder:d}=r[l],c={name:a,image:o,quantity:n,variantId:l,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};s.push(c)}}}const r=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=s.map((e=>e.image)),a=i.cloneDeep(Object.assign({},o));a&&(l.forEach(((e,t)=>{var i;a.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(i=null==V?void 0:V[t])&&void 0!==i?i:""]})),null==w||w(a)),null==S||S(r),D(!1)},searchInCollectionFetcher:q.searchInCollection,searchFetcher:q.searchProducts,visible:_,onClose:()=>{D(!1)},exactLimit:null!=T?T:1}),z&&e.jsx(l.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:z,setShowVariable:R,placeholder:"Add a variable",customTrigger:e=>{}})]})};

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

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

package/dist/cjs/components/template-preview/TemplatePreview.d.ts

@@ -19,5 +19,6 @@ export interface TemplatePreviewProps {
     showSampleValues?: boolean;
     carouselCardIndex?: number;
     isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-preview/TemplatePreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),s=require("./models/Channels.js"),r=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=p=>{let{template:u,channel:m,whatsAppSpecificMeta:c,templateCreationsInfo:v,hideHeader:h,size:C,onlyTemplateContent:j,emailSpecificMeta:S,smsSpecificMeta:x,showSampleValues:T,carouselCardIndex:b,isWhatsappCarousel:g}=p;var y,O;const{setSelectedCarouselIndex:w}=l.useTemplateModalContext();return m===s.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${a.COLORS.stroke.primary}`:"none",borderRadius:4},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(r.default,{template:u,hideHeader:h,onlyTemplateContent:j,size:null!=C?C:"large",variableStore:null==x?void 0:x.smsVariableStore,display_content:null==x?void 0:x.smsDisplayContent})})):m===s.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(n.default,{template:u,handleViewTemplate:()=>{var e;null===(e=null==S?void 0:S.handleViewTemplate)||void 0===e||e.call(S)},hideHeader:h,hideViewButton:null==S?void 0:S.hideViewButtonForEmail,containerStyle:null==S?void 0:S.containerStyle,emailDisplayContent:null==S?void 0:S.emailDisplayContent,emailHtmlContainerId:null==S?void 0:S.emailHtmlContainerId})})):m===s.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{w&&g&&w(null!=b?b:-1)}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(y=null==u?void 0:u.label)&&void 0!==y?y:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:T,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=C?C:"large",containerStyle:Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(O=null==c?void 0:c.containerStyle)&&void 0!==O?O:{}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:b,isWhatsappCarousel:g})]})):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),s=require("./models/Channels.js"),r=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=p=>{let{template:u,channel:m,whatsAppSpecificMeta:c,templateCreationsInfo:v,hideHeader:h,size:C,onlyTemplateContent:j,emailSpecificMeta:S,smsSpecificMeta:x,showSampleValues:T,carouselCardIndex:b,isWhatsappCarousel:g,isPreview:y}=p;var w,O;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return m===s.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${a.COLORS.stroke.primary}`:"none",borderRadius:4},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(r.default,{template:u,hideHeader:h,onlyTemplateContent:j,size:null!=C?C:"large",variableStore:null==x?void 0:x.smsVariableStore,display_content:null==x?void 0:x.smsDisplayContent})})):m===s.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(n.default,{template:u,handleViewTemplate:()=>{var e;null===(e=null==S?void 0:S.handleViewTemplate)||void 0===e||e.call(S)},hideHeader:h,hideViewButton:null==S?void 0:S.hideViewButtonForEmail,containerStyle:null==S?void 0:S.containerStyle,emailDisplayContent:null==S?void 0:S.emailDisplayContent,emailHtmlContainerId:null==S?void 0:S.emailHtmlContainerId})})):m===s.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{P&&g&&P(null!=b?b:-1)}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(w=null==u?void 0:u.label)&&void 0!==w?w:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:T,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=C?C:"large",containerStyle:Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(O=null==c?void 0:c.containerStyle)&&void 0!==O?O:{}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:b,isWhatsappCarousel:g,isPreview:y})]})):e.jsx(e.Fragment,{})};

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/halfRectangle.svg.js"),r=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),a=require("react"),i=require("styled-components"),o=require("../../tooltips/Tooltip.js"),n=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),l=require("../helpers/WhatsAppFormatToHTML.js"),h=require("../models/TemplateMeta.js"),p=require("./ChatBtn.js"),c=require("./ChatUI.style.js"),x=require("./MediaCard.js"),T=require("./RenderTemplateWithVariable.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=u(i).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/halfRectangle.svg.js"),r=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),i=require("react"),a=require("styled-components"),o=require("../../tooltips/Tooltip.js"),n=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),l=require("../helpers/WhatsAppFormatToHTML.js"),c=require("../models/TemplateMeta.js"),h=require("./ChatBtn.js"),p=require("./ChatUI.style.js"),x=require("./MediaCard.js"),T=require("./RenderTemplateWithVariable.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=j(a).default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`;exports.default=i=>{const{bodyText:u,footerText:m,headerMediaType:y,headerText:S,headerAssetLink:g,headerAssetName:f,quickReplybtn:q,ctaBtn:E,actionTypes:v,textType:b,extras:C,showHeader:A,imagePreviewStyles:N,size:w,children:F}=i,M=new l.WhatsAppFormatToHTML,O=a.useMemo((()=>({color:d.COLORS.content.primary,margin:12,fontSize:A?d.FONTS.caption.fontSize:d.FONTS.bodySecondary.fontSize,fontWeight:d.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(c.Container,{children:[e.jsx(j,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===h.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:S}):y!==h.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:g,headerAssetName:f,mediaType:y,imagePreviewStyles:y===h.HEADER_TYPES.IMAGE?N:{}}):e.jsx(e.Fragment,{}),!!u&&e.jsx(e.Fragment,{children:F?e.jsx(e.Fragment,{children:F}):e.jsx(e.Fragment,{children:"html"===b?e.jsx("div",{className:"richTextEditor",style:O,dangerouslySetInnerHTML:{__html:M.convertToHTML(u)}}):e.jsx(n.BodySecondary,{children:u})})}),e.jsxs(c.FooterWrapper,{children:[e.jsx(o.Tooltip,Object.assign({body:null!=m?m:"",placement:"top"},{children:e.jsx(c.TimeStamp,Object.assign({style:{flex:1}},{children:m}))})),e.jsx(c.TimeStamp,{children:"16:48"})]}),v===h.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==q?void 0:q.map(((t,r)=>e.jsx(p.ChatBtn,{text:t.text},r)))}):v===h.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==E?void 0:E.map(((t,a)=>e.jsx(p.ChatBtn,{textTypography:A?n.Caption:n.BodySecondary,extraContent:C?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:w},a)))}):e.jsx(e.Fragment,{})]})};
+`;exports.default=a=>{const{bodyText:j,footerText:m,headerMediaType:y,headerText:S,headerAssetLink:g,headerAssetName:f,quickReplybtn:v,ctaBtn:q,actionTypes:E,textType:b,extras:w,showHeader:C,imagePreviewStyles:A,size:N,children:O,isPreview:F}=a,M=new l.WhatsAppFormatToHTML,P=i.useMemo((()=>({color:d.COLORS.content.primary,margin:12,fontSize:C?d.FONTS.caption.fontSize:d.FONTS.bodySecondary.fontSize,fontWeight:d.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(p.Container,Object.assign({isPreview:F},{children:[e.jsx(u,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===c.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:S}):y!==c.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:g,headerAssetName:f,mediaType:y,imagePreviewStyles:y===c.HEADER_TYPES.IMAGE?A:{}}):e.jsx(e.Fragment,{}),!!j&&e.jsx(e.Fragment,{children:O?e.jsx(e.Fragment,{children:O}):e.jsx(e.Fragment,{children:"html"===b?e.jsx("div",{className:"richTextEditor",style:P,dangerouslySetInnerHTML:{__html:M.convertToHTML(j)}}):e.jsx(n.BodySecondary,{children:j})})}),e.jsxs(p.FooterWrapper,{children:[e.jsx(o.Tooltip,Object.assign({body:null!=m?m:"",placement:"top"},{children:e.jsx(p.TimeStamp,Object.assign({style:{flex:1}},{children:m}))})),e.jsx(p.TimeStamp,{children:"16:48"})]}),E===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):E===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==q?void 0:q.map(((t,i)=>e.jsx(h.ChatBtn,{textTypography:C?n.Caption:n.BodySecondary,extraContent:w?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:N},i)))}):e.jsx(e.Fragment,{})]}))};

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

@@ -3,6 +3,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     showBorder?: boolean | undefined;
     isWhatsappCarousel?: boolean | undefined;
     hasError?: boolean | undefined;
+    isPreview?: 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

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

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

@@ -1,4 +1,4 @@
-"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"),l=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),d=require("../../tooltips/Tooltip.js"),u=require("../../TypographyStyle.js"),p=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 C=T(l);const y=C.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"),i=require("../../../assets/icons/qrb.svg.js"),a=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("react"),l=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),d=require("../../tooltips/Tooltip.js"),u=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),c=require("../helpers/VariableEditorHelper.js"),x=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 C=T(l);const y=C.default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
@@ -16,4 +16,4 @@
 `,E=C.default(g)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,q=new x.VariableEditorHelper;exports.ChatUIV2=l=>{const{bodyText:p,footerText:x,headerMediaType:T,headerText:C,headerAssetLink:v,headerAssetName:b,quickReplybtn:O,ctaBtn:I,actionTypes:_,extras:S,showHeader:w,imagePreviewStyles:P,size:L,bodyVariableList:A,headerVariableList:M,buttons:N,limitedTimeOfferComponent:R,carouselCardIndex:B}=l,H=q.format(p,A),Y=q.format(C,M),{isWhatsappCarousel:U,selectedCarouselIndex:D,isProductCarouselType:F,errorIndexes:V}=n.useTemplateModalContext(),k={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:i.default,QUICK_REPLY:a.default};return o.useEffect((()=>{console.log("errorIndexes: ",V),console.log("carouselCardIndex: ",B,null==V?void 0:V.includes(null!=B?B:-2))}),[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.includes(null!=B?B:-2),isWhatsappCarousel:U},{children:[!U&&e.jsx(y,{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:v,headerAssetName:b,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,{}),!!p&&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))):_===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)))}):_===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==I?void 0:I.map(((t,r)=>e.jsx(h.ChatBtn,{textTypography:w?u.Caption:u.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,{})]}))};
+`,v=new c.VariableEditorHelper;exports.ChatUIV2=l=>{const{bodyText:p,footerText:c,headerMediaType:T,headerText:C,headerAssetLink:q,headerAssetName:b,quickReplybtn:O,ctaBtn:w,actionTypes:I,extras:P,showHeader:_,imagePreviewStyles:S,size:L,bodyVariableList:A,headerVariableList:M,buttons:N,limitedTimeOfferComponent:R,carouselCardIndex:B,isWhatsappCarousel:H,isPreview:Y}=l,U=v.format(p,A),D=v.format(C,M),{selectedCarouselIndex:F,isProductCarouselType:V,errorIndexes:k}=n.useTemplateModalContext(),z={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:a.default,QUICK_REPLY:i.default};return o.useEffect((()=>{console.log("errorIndexes: ",k),console.log("carouselCardIndex: ",B,null==k?void 0:k.includes(null!=B?B:-2))}),[k]),console.log("isPreview: ",Y),e.jsxs(m.Container,Object.assign({isCarouselCard:null!=B&&B>-1,showBorder:null!=B&&B===F||V&&null!=B&&B>-1&&null!=F&&F>-1,hasError:null==k?void 0:k.includes(null!=B?B:-2),isWhatsappCarousel:H,isPreview:Y},{children:[!H&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===x.HEADER_TYPES.TEXT?e.jsx(E,{dangerouslySetInnerHTML:{__html:D}}):T!==x.HEADER_TYPES.NONE?e.jsx(f.MediaCard,{headerAssetLink:q,headerAssetName:b,mediaType:T,imagePreviewStyles:T===x.HEADER_TYPES.IMAGE?S:{}}):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,{}),!!p&&e.jsx(e.Fragment,{children:e.jsx(g,{dangerouslySetInnerHTML:{__html:U}})}),e.jsxs(m.FooterWrapper,{children:[e.jsx(d.Tooltip,Object.assign({body:null!=c?c:"",placement:"top"},{children:e.jsx(m.TimeStamp,Object.assign({style:{flex:1}},{children:c}))})),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:z[t.type],size:L},r))):I===x.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===x.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==w?void 0:w.map(((t,r)=>e.jsx(h.ChatBtn,{textTypography:_?u.Caption:u.BodySecondary,extraContent:P?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:a.default,size:L},r)))}):e.jsx(e.Fragment,{})]}))};

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -4,6 +4,7 @@
 	background: #f6f6f6;
 	margin: 0px 10px;
 	overflow: hidden;
+	align-items: center;
 `,l=o.default.div`
 	width: 48px;
 	height: 48px;

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),s=require("../utils/getPreviewPropLen.js"),i=require("./ChatHeader.js"),o=require("./ChatUiV2.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(r);const p=d.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),a=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),t=require("../utils/getPreviewPropLen.js"),i=require("./ChatHeader.js"),o=require("./ChatUiV2.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=n(r);const d=p.default.div`
 	background-image: url(${e=>e.isWhatsappCarousel?void 0:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f"});
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
-`,l=d.default(t.TitleRegular)`
-	color: ${a.COLORS.content.primary};
-`;exports.WhatsappLikePreviewV2=r=>3===s.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,Object.assign({style:r.containerStyle,showHeader:r.showHeader,isWhatsappCarousel:r.isWhatsappCarousel},{children:[r.showHeader&&e.jsx(i.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 0px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(l,{children:"Preview"})})),e.jsx(o.ChatUIV2,Object.assign({showHeader:r.showHeader},r))]}))]}))});
+`,l=p.default(a.TitleRegular)`
+	color: ${s.COLORS.content.primary};
+`;exports.WhatsappLikePreviewV2=r=>3===t.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({style:r.containerStyle,showHeader:r.showHeader,isWhatsappCarousel:r.isWhatsappCarousel},{children:[r.showHeader&&e.jsx(i.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":`16px ${r.isWhatsappCarousel?"0px":"56px"} 12px 16px`}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(l,{children:"Preview"})})),e.jsx(o.ChatUIV2,Object.assign({showHeader:r.showHeader},r))]}))]}))});

package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.d.ts

@@ -12,5 +12,6 @@ declare const WhatsappTemplatePreview: React.FC<{
     showSampleValues?: boolean;
     carouselCardIndex?: number;
     isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 }>;
 export default WhatsappTemplatePreview;

package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../template-context-mapper/context/templateModalContext.js"),a=require("./helpers/TemplateCreatorHelper.js"),i=require("./models/TemplateMeta.js"),r=require("./utils/TemplateHelperUtils.js"),n=require("./WhatsApp/WhatsAppLikePreview.js"),o=require("./WhatsApp/WhatsAppLikePreviewV2.js");exports.default=d=>{let{template:s,extras:p,containerStyle:u,usePlaceHolderName:v,showHeader:h,zeroStateComponent:m,size:x,showSampleValues:c,carouselCardIndex:b,isWhatsappCarousel:T}=d;var y,w,k,C,V,B,N,j,f,A,L,P,S,q,F,g,E,H,O,W,I,U;const{selectedCarouselIndex:D}=t.useTemplateModalContext(),[M,R]=l.useState(),z=new a.TemplateCreatorHelper,_=new r.TemplateHelperUtils,Y=[];return(null===(w=null===(y=null==M?void 0:M.ctaBtn)||void 0===y?void 0:y.phoneNumber)||void 0===w?void 0:w.isChecked)&&Y.push({type:"phoneNumber",text:null!==(k=M.ctaBtn.phoneNumber.btnText)&&void 0!==k?k:"",extra:null!==(C=M.ctaBtn.phoneNumber.phoneNumber)&&void 0!==C?C:""}),(null===(B=null===(V=null==M?void 0:M.ctaBtn)||void 0===V?void 0:V.websiteLinkBtn)||void 0===B?void 0:B.isChecked)&&Y.push({type:"website",text:null!==(N=M.ctaBtn.websiteLinkBtn.btnText)&&void 0!==N?N:"",extra:null!==(f=null===(j=M.ctaBtn.websiteLinkBtn)||void 0===j?void 0:j.linkOpens)&&void 0!==f?f:"",placeholder:null!==(A=M.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==A?A:""}),l.useEffect((()=>{s&&z.parseUITemplateFromDBFormat({dbFormattedTemplate:s,isDuplicate:!1,showSampleValues:c,isV2:!s.htmlContentUrl}).then((e=>{R(Object.assign({},e))}))}),[s,c]),l.useEffect((()=>{s&&z.parseUITemplateFromDBFormat({dbFormattedTemplate:s,isDuplicate:!1,showSampleValues:c,isV2:!s.htmlContentUrl}).then((e=>{R(Object.assign({},e))}))}),[D]),s?s.htmlContentUrl?e.jsx(n.WhatsappLikePreview,{showHeader:h,containerPadding:"large"===x?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:u,textType:"html",bodyText:_.whatsappOnlyFillVariablesValueInBodyText(null!==(E=null==M?void 0:M.bodyText)&&void 0!==E?E:"",null!==(H=null==M?void 0:M.bodyVariables)&&void 0!==H?H:[],v),footerText:null==M?void 0:M.footerText,headerMediaType:(null==M?void 0:M.headerType)||i.HEADER_TYPES.NONE,headerText:_.fillVariablesValInBodyText(null!==(O=null==M?void 0:M.headerText)&&void 0!==O?O:"",null!==(W=null==M?void 0:M.headerVariables)&&void 0!==W?W:[],v),headerAssetLink:null!==(I=null==M?void 0:M.headerAssetLink)&&void 0!==I?I:"",headerAssetName:null!==(U=null==M?void 0:M.headerAssetName)&&void 0!==U?U:"",quickReplybtn:null==M?void 0:M.quickReply,ctaBtn:Y,actionTypes:null==M?void 0:M.actionsType,extras:p,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=m?m:e.jsx(e.Fragment,{children:" "})}):e.jsx(o.WhatsappLikePreviewV2,{showHeader:h,containerPadding:"large"===x?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:u,textType:"html",bodyText:null==M?void 0:M.bodyText,footerText:null==M?void 0:M.footerText,headerMediaType:(null==M?void 0:M.headerType)||i.HEADER_TYPES.NONE,headerText:null==M?void 0:M.headerText,headerAssetLink:null!==(L=null==M?void 0:M.headerAssetLink)&&void 0!==L?L:"",headerAssetName:null!==(P=null==M?void 0:M.headerAssetName)&&void 0!==P?P:"",quickReplybtn:null==M?void 0:M.quickReply,ctaBtn:Y,actionTypes:null==M?void 0:M.actionsType,extras:p,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:b,zeroStateComponent:null!=m?m:e.jsx(e.Fragment,{children:" "}),bodyVariableList:null!==(q=null===(S=null==M?void 0:M.bodyVariables)||void 0===S?void 0:S.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==q?q:[],headerVariableList:null!==(g=null===(F=null==M?void 0:M.headerVariables)||void 0===F?void 0:F.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==g?g:[],buttons:null==M?void 0:M.allButtons,limitedTimeOfferComponent:null==M?void 0:M.limitedTimeOfferComponent,isWhatsappCarousel:T}):e.jsx(e.Fragment,{children:m})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../template-context-mapper/context/templateModalContext.js"),a=require("./helpers/TemplateCreatorHelper.js"),i=require("./models/TemplateMeta.js"),r=require("./utils/TemplateHelperUtils.js"),n=require("./WhatsApp/WhatsAppLikePreview.js"),o=require("./WhatsApp/WhatsAppLikePreviewV2.js");exports.default=d=>{let{template:s,extras:p,containerStyle:u,usePlaceHolderName:v,showHeader:h,zeroStateComponent:m,size:x,showSampleValues:c,carouselCardIndex:b,isWhatsappCarousel:T,isPreview:y}=d;var w,k,C,V,B,N,j,P,f,A,L,S,q,F,g,E,H,O,W,I,U,D;const{selectedCarouselIndex:M}=t.useTemplateModalContext(),[R,z]=l.useState(),_=new a.TemplateCreatorHelper,Y=new r.TemplateHelperUtils,G=[];return(null===(k=null===(w=null==R?void 0:R.ctaBtn)||void 0===w?void 0:w.phoneNumber)||void 0===k?void 0:k.isChecked)&&G.push({type:"phoneNumber",text:null!==(C=R.ctaBtn.phoneNumber.btnText)&&void 0!==C?C:"",extra:null!==(V=R.ctaBtn.phoneNumber.phoneNumber)&&void 0!==V?V:""}),(null===(N=null===(B=null==R?void 0:R.ctaBtn)||void 0===B?void 0:B.websiteLinkBtn)||void 0===N?void 0:N.isChecked)&&G.push({type:"website",text:null!==(j=R.ctaBtn.websiteLinkBtn.btnText)&&void 0!==j?j:"",extra:null!==(f=null===(P=R.ctaBtn.websiteLinkBtn)||void 0===P?void 0:P.linkOpens)&&void 0!==f?f:"",placeholder:null!==(A=R.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==A?A:""}),l.useEffect((()=>{s&&_.parseUITemplateFromDBFormat({dbFormattedTemplate:s,isDuplicate:!1,showSampleValues:c,isV2:!s.htmlContentUrl}).then((e=>{z(Object.assign({},e))}))}),[s,c]),l.useEffect((()=>{s&&_.parseUITemplateFromDBFormat({dbFormattedTemplate:s,isDuplicate:!1,showSampleValues:c,isV2:!s.htmlContentUrl}).then((e=>{z(Object.assign({},e))}))}),[M]),s?s.htmlContentUrl?e.jsx(n.WhatsappLikePreview,{showHeader:h,containerPadding:"large"===x?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:u,textType:"html",bodyText:Y.whatsappOnlyFillVariablesValueInBodyText(null!==(H=null==R?void 0:R.bodyText)&&void 0!==H?H:"",null!==(O=null==R?void 0:R.bodyVariables)&&void 0!==O?O:[],v),footerText:null==R?void 0:R.footerText,headerMediaType:(null==R?void 0:R.headerType)||i.HEADER_TYPES.NONE,headerText:Y.fillVariablesValInBodyText(null!==(W=null==R?void 0:R.headerText)&&void 0!==W?W:"",null!==(I=null==R?void 0:R.headerVariables)&&void 0!==I?I:[],v),headerAssetLink:null!==(U=null==R?void 0:R.headerAssetLink)&&void 0!==U?U:"",headerAssetName:null!==(D=null==R?void 0:R.headerAssetName)&&void 0!==D?D:"",quickReplybtn:null==R?void 0:R.quickReply,ctaBtn:G,actionTypes:null==R?void 0:R.actionsType,extras:p,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=m?m:e.jsx(e.Fragment,{children:" "}),isPreview:y}):e.jsx(o.WhatsappLikePreviewV2,{showHeader:h,containerPadding:"large"===x?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:u,textType:"html",bodyText:null==R?void 0:R.bodyText,footerText:null==R?void 0:R.footerText,headerMediaType:(null==R?void 0:R.headerType)||i.HEADER_TYPES.NONE,headerText:null==R?void 0:R.headerText,headerAssetLink:null!==(L=null==R?void 0:R.headerAssetLink)&&void 0!==L?L:"",headerAssetName:null!==(S=null==R?void 0:R.headerAssetName)&&void 0!==S?S:"",quickReplybtn:null==R?void 0:R.quickReply,ctaBtn:G,actionTypes:null==R?void 0:R.actionsType,extras:p,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:b,zeroStateComponent:null!=m?m:e.jsx(e.Fragment,{children:" "}),bodyVariableList:null!==(F=null===(q=null==R?void 0:R.bodyVariables)||void 0===q?void 0:q.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==F?F:[],headerVariableList:null!==(E=null===(g=null==R?void 0:R.headerVariables)||void 0===g?void 0:g.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==E?E:[],buttons:null==R?void 0:R.allButtons,limitedTimeOfferComponent:null==R?void 0:R.limitedTimeOfferComponent,isWhatsappCarousel:T,isPreview:y}):e.jsx(e.Fragment,{children:m})};

package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -188,6 +188,7 @@ export type WhatsappLikePreviewTypes = {
     buttons?: WhatsappPreviewButtonType[];
     limitedTimeOfferComponent?: CreateTemplateType['limitedTimeOfferComponent'];
     isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 };
 export type WhatsappPreviewButtonType = {
     type: WhatsappTemplateButtonTypes;

package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as n,jsx as e,Fragment as r}from"react/jsx-runtime";import{BaseWhatsappContentLangHelper as l}from"../../helpers/BaseWhatsappContentLang.helper.js";import o,{useRef as i,useImperativeHandle as u,useEffect as c}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as a}from"../TypographyStyle.js";import{OuterContainer as d,Container as v,TextSpace as m}from"./CustomEditor.styled.js";import{EditorActionTypes as h,WhatsAppTextEditorHeader as f}from"./WhatsAppTextEditorHeader.js";const p="Character limit reached",g=new l,x={[h.BOLD]:"*",[h.ITALIC]:"_",[h.STRIKETHROUGH]:"~"},T=o.forwardRef(((l,o)=>{var h,T,{onChange:j,text:C,RightComponent:E,error:y,limit:H,onError:L,rows:O,actions:S}=l,w=t(l,["onChange","text","RightComponent","error","limit","onError","rows","actions"]);const R=i(null);function b(t){const n=null==R?void 0:R.current;null!=n&&(n.selectionStart?(n.focus(),n.selectionEnd=t):n.focus())}function W(t){var n,e;let r=null!==(e=null===(n=R.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(R.current&&t){const n=R.current.selectionStart,e=R.current.selectionEnd,l=t;if(n===e)return A(l);{r=g.wrappWildcard(n,e,l,r);const t=g.getHTML(r);return R.current.value=r,{text:r,html:t}}}return{text:r,html:r}}function A(t){var n,e;let r=null!==(e=null===(n=R.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(R.current&&t){const n=R.current.selectionStart;if(n===R.current.selectionEnd)return M(t,n)}return{text:r,html:r}}function M(t,n){var e,r;let l=null!==(r=null===(e=R.current)||void 0===e?void 0:e.value)&&void 0!==r?r:"";l=l.slice(0,n)+t+l.slice(n);const o=g.getHTML(l);return R.current.value=l,{text:l,html:o}}return u(o,(()=>({addTextOrWrap:W,addText:A,get(){var t,n;return null!==(n=null===(t=R.current)||void 0===t?void 0:t.value)&&void 0!==n?n:""},setCaretPosition:b}))),c((()=>{if(null==R?void 0:R.current){R.current.value=C||"";const t=g.getHTML(C||"");null==j||j(C||"",t)}}),[C]),c((()=>{var t,n;(null===(t=null==R?void 0:R.current)||void 0===t?void 0:t.value)&&H&&((null===(n=null==R?void 0:R.current)||void 0===n?void 0:n.value.length)>H?null==L||L(p):null==L||L(null!=y?y:""))}),[null===(h=null==R?void 0:R.current)||void 0===h?void 0:h.value.length]),n(d,{children:[n(v,Object.assign({isError:!!y},{children:[e(f,{actions:S,ref:R,onActionSelect:function(t){if((null==x?void 0:x[t])&&R.current){const n=R.current.selectionStart;if(n===R.current.selectionEnd){M(null==x?void 0:x[t],n);const{text:e,html:r}=M(null==x?void 0:x[t],n);b(n+1),null==j||j(e,r)}else{const{text:n,html:e}=W(null==x?void 0:x[t]);null==j||j(n,e)}}},RightComponent:E,onEmojiClick:function(t){const{text:n,html:e}=A(t);null==j||j(n,e)}}),e(m,Object.assign({ref:R,onChange:function(t){const n=t.target.value,e=g.getHTML(n);null==j||j(n,e)}},w,{rows:O}))]})),y&&y!==p?e(a,Object.assign({style:{color:s.content.negative}},{children:y})):e(r,{children:H&&(null==R?void 0:R.current)?n(a,Object.assign({style:{color:y===p||(null===(T=null==R?void 0:R.current)||void 0===T?void 0:T.value.length)>H?s.content.negative:s.content.secondary}},{children:[R.current.value.length,"/",H]})):e(r,{})})]})}));T.displayName="WhatsAppTextEditor";export{T as WhatsAppTextEditor};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as n,jsx as e,Fragment as r}from"react/jsx-runtime";import l from"../../assets/icons/info.svg.js";import{BaseWhatsappContentLangHelper as o}from"../../helpers/BaseWhatsappContentLang.helper.js";import i,{useRef as u,useImperativeHandle as c,useEffect as s}from"react";import{COLORS as a}from"../../constants/Theme.js";import{BodyCaption as d}from"../TypographyStyle.js";import{OuterContainer as v,Container as m,TextSpace as h}from"./CustomEditor.styled.js";import{EditorActionTypes as f,WhatsAppTextEditorHeader as g}from"./WhatsAppTextEditorHeader.js";const p="Character limit reached",x=new o,j={[f.BOLD]:"*",[f.ITALIC]:"_",[f.STRIKETHROUGH]:"~"},T=i.forwardRef(((o,i)=>{var f,T,{onChange:C,text:E,RightComponent:y,error:O,limit:w,onError:H,rows:L,actions:S}=o,b=t(o,["onChange","text","RightComponent","error","limit","onError","rows","actions"]);const R=u(null);function W(t){const n=null==R?void 0:R.current;null!=n&&(n.selectionStart?(n.focus(),n.selectionEnd=t):n.focus())}function A(t){var n,e;let r=null!==(e=null===(n=R.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(R.current&&t){const n=R.current.selectionStart,e=R.current.selectionEnd,l=t;if(n===e)return I(l);{r=x.wrappWildcard(n,e,l,r);const t=x.getHTML(r);return R.current.value=r,{text:r,html:t}}}return{text:r,html:r}}function I(t){var n,e;let r=null!==(e=null===(n=R.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(R.current&&t){const n=R.current.selectionStart;if(n===R.current.selectionEnd)return M(t,n)}return{text:r,html:r}}function M(t,n){var e,r;let l=null!==(r=null===(e=R.current)||void 0===e?void 0:e.value)&&void 0!==r?r:"";l=l.slice(0,n)+t+l.slice(n);const o=x.getHTML(l);return R.current.value=l,{text:l,html:o}}return c(i,(()=>({addTextOrWrap:A,addText:I,get(){var t,n;return null!==(n=null===(t=R.current)||void 0===t?void 0:t.value)&&void 0!==n?n:""},setCaretPosition:W}))),s((()=>{if(null==R?void 0:R.current){R.current.value=E||"";const t=x.getHTML(E||"");null==C||C(E||"",t)}}),[E]),s((()=>{var t,n;(null===(t=null==R?void 0:R.current)||void 0===t?void 0:t.value)&&w&&((null===(n=null==R?void 0:R.current)||void 0===n?void 0:n.value.length)>w?null==H||H(p):null==H||H(null!=O?O:""))}),[null===(f=null==R?void 0:R.current)||void 0===f?void 0:f.value.length]),n(v,{children:[n(m,Object.assign({isError:!!O},{children:[e(g,{actions:S,ref:R,onActionSelect:function(t){if((null==j?void 0:j[t])&&R.current){const n=R.current.selectionStart;if(n===R.current.selectionEnd){M(null==j?void 0:j[t],n);const{text:e,html:r}=M(null==j?void 0:j[t],n);W(n+1),null==C||C(e,r)}else{const{text:n,html:e}=A(null==j?void 0:j[t]);null==C||C(n,e)}}},RightComponent:y,onEmojiClick:function(t){const{text:n,html:e}=I(t);null==C||C(n,e)}}),e(h,Object.assign({ref:R,onChange:function(t){const n=t.target.value,e=x.getHTML(n);null==C||C(n,e)}},b,{rows:L}))]})),O&&O!==p?n("div",Object.assign({style:{display:"flex",gap:6,alignItems:"center"}},{children:[e(l,{width:16,height:16,color:a.content.negative}),e(d,Object.assign({color:a.content.negative},{children:O}))]})):e(r,{children:w&&(null==R?void 0:R.current)?n(d,Object.assign({style:{color:O===p||(null===(T=null==R?void 0:R.current)||void 0===T?void 0:T.value.length)>w?a.content.negative:a.content.secondary}},{children:[R.current.value.length,"/",w]})):e(r,{})})]})}));T.displayName="WhatsAppTextEditor";export{T as WhatsAppTextEditor};

package/dist/esm/components/carousel-preview/CarouselPreview.d.ts

@@ -9,4 +9,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
     channel: CHANNEL_TYPE;
     template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
     showSampleValues?: boolean | undefined;
+    isPreview?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/carousel-preview/CarouselPreview.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import i from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as r,ButtonBack as n,Slider as a,Slide as l,ButtonNext as d}from"pure-react-carousel";import s from"react";import c from"styled-components";import p from"./CarouselPreviewCard.js";import{COLORS as h}from"../../constants/Theme.js";const m=c.div`
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import i from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as r,ButtonBack as n,Slider as a,Slide as l,ButtonNext as s}from"pure-react-carousel";import d from"react";import c from"styled-components";import p from"./CarouselPreviewCard.js";import{COLORS as h}from"../../constants/Theme.js";const m=c.div`
 	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
 	border-color: ${h.stroke.primary};
 	border-top-style: solid;
@@ -49,4 +49,4 @@ import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/ico
 		width: 100%;
 		height: 480px;
 	}
-`,u=s.forwardRef(((s,c)=>{let{channel:u,template:g,showSampleValues:x}=s;var f,v,w,y;const j=null===(f=null==g?void 0:g.components)||void 0===f?void 0:f[1].cards;return e(m,{children:[o(p,{channel:u,template:g,carouselCardIndex:-1}),!!(null==j?void 0:j.length)&&o(r,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(v=null==j?void 0:j.length)&&void 0!==v?v:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e(b,{children:[o(n,Object.assign({className:"left_button"},{children:o(t,{height:10,width:10,color:h.content.primary})})),o(a,Object.assign({className:"slider"},{children:null===(y=null===(w=null==g?void 0:g.components)||void 0===w?void 0:w[1].cards)||void 0===y?void 0:y.map(((e,t)=>{var i,r;const n={components:e.components,mapping:null===(r=null===(i=null==g?void 0:g.mapping)||void 0===i?void 0:i.cards)||void 0===r?void 0:r[t]};return o(l,Object.assign({index:t},{children:o(p,{channel:u,template:n,carouselCardIndex:t},t)}),t)}))})),o(d,Object.assign({className:"right_button"},{children:o(i,{height:10,width:10,color:h.content.primary})}))]})}))]})}));export{u as CarouselPreview};
+`,u=d.forwardRef(((d,c)=>{let{channel:u,template:g,showSampleValues:v,isPreview:x}=d;var f,w,y,j;const k=null===(f=null==g?void 0:g.components)||void 0===f?void 0:f[1].cards;return e(m,{children:[o(p,{channel:u,template:g,carouselCardIndex:-1,isPreview:x}),!!(null==k?void 0:k.length)&&o(r,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(w=null==k?void 0:k.length)&&void 0!==w?w:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e(b,{children:[o(n,Object.assign({className:"left_button"},{children:o(t,{height:10,width:10,color:h.content.primary})})),o(a,Object.assign({className:"slider"},{children:null===(j=null===(y=null==g?void 0:g.components)||void 0===y?void 0:y[1].cards)||void 0===j?void 0:j.map(((e,t)=>{var i,r;const n={components:e.components,mapping:null===(r=null===(i=null==g?void 0:g.mapping)||void 0===i?void 0:i.cards)||void 0===r?void 0:r[t]};return o(l,Object.assign({index:t},{children:o(p,{channel:u,template:n,carouselCardIndex:t,isPreview:x},t)}),t)}))})),o(s,Object.assign({className:"right_button"},{children:o(i,{height:10,width:10,color:h.content.primary})}))]})}))]})}));export{u as CarouselPreview};

package/dist/esm/components/carousel-preview/CarouselPreviewCard.d.ts

@@ -5,5 +5,6 @@ declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
     template: any;
     showSampleValues?: boolean | undefined;
     carouselCardIndex?: number | undefined;
+    isPreview?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default CarouselPreviewCard;

package/dist/esm/components/carousel-preview/CarouselPreviewCard.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";const r=t.forwardRef((t=>{let{channel:r,template:s,showSampleValues:m,carouselCardIndex:l}=t;const{cardWidth:i}=a();return e("div",Object.assign({style:{width:null!=i?i:360}},{children:e(p,{showSampleValues:m,template:s,channel:r,size:"small",hideHeader:!0,carouselCardIndex:l,isWhatsappCarousel:!0})}))}));export{r as default};
+import{jsx as e}from"react/jsx-runtime";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";const r=t.forwardRef((t=>{let{channel:r,template:s,showSampleValues:i,carouselCardIndex:m,isPreview:l}=t;const{cardWidth:o}=a();return e("div",Object.assign({style:{width:null!=o?o:360}},{children:e(p,{showSampleValues:i,template:s,channel:r,size:"small",hideHeader:!0,carouselCardIndex:m,isWhatsappCarousel:!0,isPreview:l})}))}));export{r as default};

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

@@ -60,6 +60,7 @@ export type ProductPickerInterface = {
     visible: boolean;
     zIndex?: number;
     limit?: number;
+    exactLimit?: number;
     hideCollectionCheckbox?: boolean;
     hideProductCheckbox?: boolean;
     outOfStockAction?: OUT_OF_STOCK_ACTION;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import 'pure-react-carousel/dist/react-carousel.es.css';
 import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
 import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
@@ -48,4 +47,4 @@ export interface TemplateContextMapperProps {
     cardWidth?: number;
     onDeleteSelectedProducts?: () => void;
 }
-export declare const TemplateContextMapper: React.FC<TemplateContextMapperProps>;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, onDeleteSelectedProducts, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -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: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};
+`,b=l=>{const{showVariableMapping:b,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:y,discountCode:j,setDiscountCode:M,variableListForImage:V,showSampleValues:A}=l,S=a(),T=a(),{device:W,display_content:E,channel:L,template:k,setTemplate:I,isWhatsappCarousel:_,isProductCarouselType:D}=p();const F=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(v,{children:[t(g,Object.assign({showOnlyContent:C,showVariableMapping:b,isWhatsappCarousel:_},{children:"mobile"===W?t(h,{ref:T,display_content:null!=E?E:"",channel:L,template:k,showSampleValues:A}):L===s.WHATSAPP&&_?t(i,{ref:S,channel:L,template:k,showSampleValues:A,isPreview:!1}):L!==s.MESSAGE?t(c,{ref:S,channel:L,display_content:null!=E?E:"",showSampleValues:A}):t(o,{})})),(D||b)&&t(w,Object.assign({channel:L},{children:L!==s.WHATSAPP?t(f,{onFocus:L===s.EMAIL?function(e){var t,o,a;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===W?"template_html_mobile":"template_html_desktop"),i=d(e+1),n=L===s.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(i):document.getElementById(i),p=F(n),c=null==n?void 0:n.offsetLeft;"desktop"===W?p&&S.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,p),m(i,r.background.warning.light,2,L,W)):p&&T.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),m(i,r.background.warning.light,2,L,W))}:void 0,showVariableModal:P,variableList:y,discountCode:j,setDiscountCode:M}):L===s.WHATSAPP&&_?t(n,{whatsappSpecificPickerMeta:x,template:k,showVariableModal:P,variableList:y,variableListForImage:V,discountCode:j,setDiscountCode:M}):t(u,{whatsappSpecificPickerMeta:x,template:k,onTemplateChange:e=>{null==I||I(e)},showVariableModal:P,variableList:y,variableListForImage:V,discountCode:j,setDiscountCode:M})}))]})};export{b as default};

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

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

@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,n=i.forwardRef(((i,a)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=p();return e("div",{children:t(l,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s(h),height:443}}),e(m,Object.assign({ref:a},{children:e(o,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==r.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));n.displayName="MobilePreview";export{n as default};
+`,n=i.forwardRef(((i,a)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=p();return e("div",{children:t(l,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s(h),height:443}}),e(m,Object.assign({ref:a},{children:e(o,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==r.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0})}))]}))})}));n.displayName="MobilePreview";export{n as default};

package/dist/esm/components/template-preview/TemplatePreview.d.ts

@@ -19,5 +19,6 @@ export interface TemplatePreviewProps {
     showSampleValues?: boolean;
     carouselCardIndex?: number;
     isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-preview/TemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import i from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import d from"./SmsTemplatePreview.js";import p from"./WhatsAppTemplatePreview.js";const m=m=>{let{template:u,channel:h,whatsAppSpecificMeta:v,templateCreationsInfo:C,hideHeader:S,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T,carouselCardIndex:f,isWhatsappCarousel:w}=m;var x,W;const{setSelectedCarouselIndex:H}=a();return h===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:C?16:0,border:C?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:u,hideHeader:S,onlyTemplateContent:y,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):h===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:C?16:0},null==g?void 0:g.templateContainerStyles)},{children:e(r,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:S,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):h===s.WHATSAPP?t("div",Object.assign({style:Object.assign(Object.assign({},null==v?void 0:v.templateContainerStyles),C?c.WhatsAppWrapper:{}),onClick:()=>{H&&w&&H(null!=f?f:-1)}},{children:[C?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(x=null==u?void 0:u.label)&&void 0!==x?x:"")})})):e(l,{}),e(p,{showSampleValues:T,showHeader:null==v?void 0:v.showWhatsAppHeader,extras:null==v?void 0:v.whatsAppExtras,template:u,size:C?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:C?0:1,borderTopWidth:1},null!==(W=null==v?void 0:v.containerStyle)&&void 0!==W?W:{}),zeroStateComponent:null==v?void 0:v.zeroStateComponent,usePlaceHolderName:null==v?void 0:v.usePlaceHolderName,carouselCardIndex:f,isWhatsappCarousel:w})]})):e(l,{})},c={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{m as TemplatePreview};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import i from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import d from"./SmsTemplatePreview.js";import p from"./WhatsAppTemplatePreview.js";const m=m=>{let{template:u,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:C,hideHeader:S,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T,carouselCardIndex:w,isWhatsappCarousel:f,isPreview:x}=m;var W,H;const{setSelectedCarouselIndex:A}=a();return v===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:C?16:0,border:C?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:u,hideHeader:S,onlyTemplateContent:y,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):v===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:C?16:0},null==g?void 0:g.templateContainerStyles)},{children:e(r,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:S,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):v===s.WHATSAPP?t("div",Object.assign({style:Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),C?c.WhatsAppWrapper:{}),onClick:()=>{A&&f&&A(null!=w?w:-1)}},{children:[C?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(W=null==u?void 0:u.label)&&void 0!==W?W:"")})})):e(l,{}),e(p,{showSampleValues:T,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:u,size:C?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:C?0:1,borderTopWidth:1},null!==(H=null==h?void 0:h.containerStyle)&&void 0!==H?H:{}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:w,isWhatsappCarousel:f,isPreview:x})]})):e(l,{})},c={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{m as TemplatePreview};

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

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as a}from"react";import n from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{BodySecondary as p,Caption as d}from"../../TypographyStyle.js";import{COLORS as l,FONTS as h}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as c}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as f,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as x,FooterWrapper as g,TimeStamp as j}from"./ChatUI.style.js";import{MediaCard as v}from"./MediaCard.js";import b from"./RenderTemplateWithVariable.js";const w=n.div`
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import o from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as a}from"react";import n from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{BodySecondary as p,Caption as d}from"../../TypographyStyle.js";import{COLORS as l,FONTS as h}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as c}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as f,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as x,FooterWrapper as g,TimeStamp as j}from"./ChatUI.style.js";import{MediaCard as v}from"./MediaCard.js";import w from"./RenderTemplateWithVariable.js";const b=n.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,u=n=>{const{bodyText:u,footerText:S,headerMediaType:N,headerText:A,headerAssetLink:M,headerAssetName:C,quickReplybtn:L,ctaBtn:k,actionTypes:z,textType:B,extras:E,showHeader:I,imagePreviewStyles:R,size:W,children:H}=n,_=new c,O=a((()=>({color:l.content.primary,margin:12,fontSize:I?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,{children:[t(w,{children:t(r,{color:"white",height:8,width:8})}),N===f.TEXT?t(b,{bold:!0,text:A}):N!==f.NONE?t(v,{headerAssetLink:M,headerAssetName:C,mediaType:N,imagePreviewStyles:N===f.IMAGE?R:{}}):t(o,{}),!!u&&t(o,{children:t(o,H?{children:H}:{children:"html"===B?t("div",{className:"richTextEditor",style:O,dangerouslySetInnerHTML:{__html:_.convertToHTML(u)}}):t(p,{children:u})})}),e(g,{children:[t(m,Object.assign({body:null!=S?S:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:S}))})),t(j,{children:"16:48"})]}),z===y.QUICK_REPLY?t("div",{children:null==L?void 0:L.map(((e,o)=>t(T,{text:e.text},o)))}):z===y.CTA_BTN?t("div",{children:null==k?void 0:k.map(((e,o)=>t(T,{textTypography:I?d:p,extraContent:E?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:W},o)))}):t(o,{})]})};export{u as default};
+`,u=n=>{const{bodyText:u,footerText:S,headerMediaType:N,headerText:A,headerAssetLink:M,headerAssetName:C,quickReplybtn:L,ctaBtn:k,actionTypes:z,textType:B,extras:E,showHeader:I,imagePreviewStyles:P,size:R,children:W,isPreview:H}=n,O=new c,_=a((()=>({color:l.content.primary,margin:12,fontSize:I?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,Object.assign({isPreview:H},{children:[t(b,{children:t(o,{color:"white",height:8,width:8})}),N===f.TEXT?t(w,{bold:!0,text:A}):N!==f.NONE?t(v,{headerAssetLink:M,headerAssetName:C,mediaType:N,imagePreviewStyles:N===f.IMAGE?P:{}}):t(r,{}),!!u&&t(r,{children:t(r,W?{children:W}:{children:"html"===B?t("div",{className:"richTextEditor",style:_,dangerouslySetInnerHTML:{__html:O.convertToHTML(u)}}):t(p,{children:u})})}),e(g,{children:[t(m,Object.assign({body:null!=S?S:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:S}))})),t(j,{children:"16:48"})]}),z===y.QUICK_REPLY?t("div",{children:null==L?void 0:L.map(((e,r)=>t(T,{text:e.text},r)))}):z===y.CTA_BTN?t("div",{children:null==k?void 0:k.map(((e,r)=>t(T,{textTypography:I?d:p,extraContent:E?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:R},r)))}):t(r,{})]}))};export{u as default};

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

@@ -3,6 +3,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     showBorder?: boolean | undefined;
     isWhatsappCarousel?: boolean | undefined;
     hasError?: boolean | undefined;
+    isPreview?: 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,27 +1,27 @@
-import r from"styled-components";import{Caption as t}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";const o=r.div`
-	background: ${e.surface.standard};
+import e from"styled-components";import{Caption as r}from"../../TypographyStyle.js";import{COLORS as t}from"../../../constants/Theme.js";const o=e.div`
+	background: ${t.surface.standard};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: ${r=>r.isCarouselCard?"12px":"0px"};
+	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
 	border: 2px solid
-		${r=>r.hasError?`${e.content.negative}`:r.showBorder?`${e.stroke.brand}`:`${e.text.white}`};
+		${e=>e.hasError?`${t.content.negative}`:e.showBorder?`${t.stroke.brand}`:`${t.text.white}`};
 	:hover {
 		border: 2px
-			${r=>r.isWhatsappCarousel?r.hasError?"dashed":r.showBorder?"solid":"dashed":"solid"}
-			${e.stroke.brand};
+			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
+			${t.stroke.brand};
 	}
-`,i=r(t)`
-	color: ${e.content.secondary};
+`,i=e(r)`
+	color: ${t.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,d=r.div`
+`,d=e.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -30,19 +30,19 @@ import r from"styled-components";import{Caption as t}from"../../TypographyStyle.
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,p=r.div`
+`,s=e.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
-	border-top: 1px solid ${e.stroke.primary};
-`,s=r.div`
+	border-top: 1px solid ${t.stroke.primary};
+`,p=e.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
-`;r.div`
+`;e.div`
 	position: absolute;
 	bottom: -1px;
 	left: 0;
@@ -53,11 +53,11 @@ import r from"styled-components";import{Caption as t}from"../../TypographyStyle.
 	display: flex;
 	flex-direction: row;
 	justify-content: start;
-	background: ${e.surface.hovered};
+	background: ${t.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-`,r.div`
+`,e.div`
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`;export{p as ChatBtnContainer,o as Container,s as FooterWrapper,d as MediaContainer,i as TimeStamp};
+`;export{s as ChatBtnContainer,o as Container,p as FooterWrapper,d as MediaContainer,i as TimeStamp};

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

@@ -1,4 +1,4 @@
-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 n from"../../../assets/icons/qrb.svg.js";import l from"../../../assets/icons/RedirectToNew.svg.js";import{useEffect as a}from"react";import d 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 c,BodySecondary as h}from"../../TypographyStyle.js";import{COLORS as x}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as u,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as g}from"./ChatBtn.js";import{Container as T,FooterWrapper as C,TimeStamp as j}from"./ChatUI.style.js";import{LimitedTimeOffer as v}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as b}from"./MediaCard.js";const w=d.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 l from"../../../assets/icons/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import{useEffect as a}from"react";import d 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 c,BodySecondary as h}from"../../TypographyStyle.js";import{COLORS as x}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as u,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as g}from"./ChatBtn.js";import{Container as T,FooterWrapper as C,TimeStamp as v}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as w}from"./MediaCard.js";const b=d.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
@@ -16,4 +16,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"..
 `,O=d(I)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,E=new f,L=d=>{const{bodyText:x,footerText:f,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}=d,D=E.format(x,k),K=E.format(_,z),{isWhatsappCarousel:Q,selectedCarouselIndex:W,isProductCarouselType:G,errorIndexes:X}=m(),$={COPY_CODE:r,PHONE_NUMBER:s,URL:l,QUICK_REPLY:n};return a((()=>{console.log("errorIndexes: ",X),console.log("carouselCardIndex: ",q,null==X?void 0:X.includes(null!=q?q:-2))}),[X]),e(T,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.includes(null!=q?q:-2),isWhatsappCarousel:Q},{children:[!Q&&t(w,{children:t(i,{color:"white",height:8,width:8})}),L===u.TEXT?t(O,{dangerouslySetInnerHTML:{__html:K}}):L!==u.NONE?t(b,{headerAssetLink:N,headerAssetName:M,mediaType:L,imagePreviewStyles:L===u.IMAGE?S:{}}):t(o,{}),(null==V?void 0:V.dateTime)?t(v,{text:V.text,dateTime:V.dateTime,code:V.code}):t(o,{}),!!x&&t(o,{children:t(I,{dangerouslySetInnerHTML:{__html:D}})}),e(C,{children:[t(p,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:f}))})),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===y.QUICK_REPLY?t("div",{children:null==P?void 0:P.map(((e,o)=>t(g,{text:e.text},o)))}):A===y.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:l,size:U},o)))}):t(o,{})]}))};export{L as ChatUIV2};
+`,E=new f,L=d=>{const{bodyText:x,footerText:f,headerMediaType:L,headerText:P,headerAssetLink:_,headerAssetName:N,quickReplybtn:M,ctaBtn:R,actionTypes:A,extras:B,showHeader:H,imagePreviewStyles:S,size:U,bodyVariableList:k,headerVariableList:z,buttons:Y,limitedTimeOfferComponent:V,carouselCardIndex:q,isWhatsappCarousel:D,isPreview:K}=d,Q=E.format(x,k),W=E.format(P,z),{selectedCarouselIndex:G,isProductCarouselType:X,errorIndexes:$}=m(),F={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:l};return a((()=>{console.log("errorIndexes: ",$),console.log("carouselCardIndex: ",q,null==$?void 0:$.includes(null!=q?q:-2))}),[$]),console.log("isPreview: ",K),e(T,Object.assign({isCarouselCard:null!=q&&q>-1,showBorder:null!=q&&q===G||X&&null!=q&&q>-1&&null!=G&&G>-1,hasError:null==$?void 0:$.includes(null!=q?q:-2),isWhatsappCarousel:D,isPreview:K},{children:[!D&&t(b,{children:t(i,{color:"white",height:8,width:8})}),L===u.TEXT?t(O,{dangerouslySetInnerHTML:{__html:W}}):L!==u.NONE?t(w,{headerAssetLink:_,headerAssetName:N,mediaType:L,imagePreviewStyles:L===u.IMAGE?S:{}}):t(o,{}),(null==V?void 0:V.dateTime)?t(j,{text:V.text,dateTime:V.dateTime,code:V.code}):t(o,{}),!!x&&t(o,{children:t(I,{dangerouslySetInnerHTML:{__html:Q}})}),e(C,{children:[t(p,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(v,Object.assign({style:{flex:1}},{children:f}))})),t(v,{children:"16:48"})]}),Y&&Y.length>0?Y.map(((e,o)=>t(g,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:F[e.type],size:U},o))):A===y.QUICK_REPLY?t("div",{children:null==M?void 0:M.map(((e,o)=>t(g,{text:e.text},o)))}):A===y.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/dist/esm/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -1,10 +1,11 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../assets/icons/lto_icon.svg.js";import o from"styled-components";import{BodySecondary as i,BodyTiny as t}from"../../../TypographyStyle.js";import{COLORS as s}from"../../../../constants/Theme.js";const c=o=>{const{text:c,dateTime:f,code:m}=o;return e(d,{children:[n(l,{children:n(r,{width:24,height:24,style:{display:"flex"}})}),e(a,{children:[n(i,Object.assign({numberOfLines:2,color:s.content.primary},{children:c})),e(t,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:s.content.secondary},{children:["Ends on ",f]})),e(t,Object.assign({numberOfLines:2,color:s.content.placeholder},{children:["Code ",m]}))]})]})},d=o.div`
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../assets/icons/lto_icon.svg.js";import i from"styled-components";import{BodySecondary as o,BodyTiny as t}from"../../../TypographyStyle.js";import{COLORS as s}from"../../../../constants/Theme.js";const c=i=>{const{text:c,dateTime:m,code:f}=i;return e(l,{children:[n(d,{children:n(r,{width:24,height:24,style:{display:"flex"}})}),e(a,{children:[n(o,Object.assign({numberOfLines:2,color:s.content.primary},{children:c})),e(t,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:s.content.secondary},{children:["Ends on ",m]})),e(t,Object.assign({numberOfLines:2,color:s.content.placeholder},{children:["Code ",f]}))]})]})},l=i.div`
 	display: flex;
 	flex-direction: row;
 	background: #f6f6f6;
 	margin: 0px 10px;
 	overflow: hidden;
-`,l=o.div`
+	align-items: center;
+`,d=i.div`
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -13,8 +14,8 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../asse
 	border-radius: 24px;
 	background: #d8f0e7;
 	margin: 5px;
-`,a=o.div`
+`,a=i.div`
 	display: flex;
 	flex-direction: column;
 	flex: 1;
-`;export{c as LimitedTimeOffer,d as StyledLimitedOfferTime,l as StyledLtoIcon,a as StyledLtoText};
+`;export{c as LimitedTimeOffer,l as StyledLimitedOfferTime,d as StyledLtoIcon,a as StyledLtoText};

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as a}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import p from"./ChatHeader.js";import{ChatUIV2 as n}from"./ChatUiV2.js";const d=t.div`
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as a}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{getPreviewPropLen as i}from"../utils/getPreviewPropLen.js";import p from"./ChatHeader.js";import{ChatUIV2 as n}from"./ChatUiV2.js";const d=t.div`
 	background-image: url(${e=>e.isWhatsappCarousel?void 0:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f"});
 	border-radius: 4px;
 	background-repeat: no-repeat;
@@ -6,5 +6,5 @@ import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"st
 	background-size: cover;
 	position: relative;
 `,c=t(a)`
-	color: ${i.content.primary};
-`,m=t=>{const a=s(t);return e(r,3===a?{children:t.zeroStateComponent}:{children:o(d,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e(p,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 0px 12px 16px"}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(c,{children:"Preview"})})),e(n,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{m as WhatsappLikePreviewV2};
+	color: ${s.content.primary};
+`,m=t=>{const a=i(t);return e(r,3===a?{children:t.zeroStateComponent}:{children:o(d,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e(p,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} 12px 16px`}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(c,{children:"Preview"})})),e(n,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{m as WhatsappLikePreviewV2};

package/dist/esm/components/template-preview/WhatsAppTemplatePreview.d.ts

@@ -12,5 +12,6 @@ declare const WhatsappTemplatePreview: React.FC<{
     showSampleValues?: boolean;
     carouselCardIndex?: number;
     isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 }>;
 export default WhatsappTemplatePreview;

package/dist/esm/components/template-preview/WhatsAppTemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{useTemplateModalContext as o}from"../template-context-mapper/context/templateModalContext.js";import{TemplateCreatorHelper as i}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as n}from"./models/TemplateMeta.js";import{TemplateHelperUtils as r}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as d}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as p}from"./WhatsApp/WhatsAppLikePreviewV2.js";const s=s=>{let{template:u,extras:v,containerStyle:m,usePlaceHolderName:h,showHeader:x,zeroStateComponent:c,size:b,showSampleValues:T,carouselCardIndex:y,isWhatsappCarousel:w}=s;var f,B,N,V,k,C,A,L,j,S,F,P,g,O,I,H,U,W,q,z,D,M;const{selectedCarouselIndex:R}=o(),[E,G]=t(),J=new i,K=new r,Q=[];return(null===(B=null===(f=null==E?void 0:E.ctaBtn)||void 0===f?void 0:f.phoneNumber)||void 0===B?void 0:B.isChecked)&&Q.push({type:"phoneNumber",text:null!==(N=E.ctaBtn.phoneNumber.btnText)&&void 0!==N?N:"",extra:null!==(V=E.ctaBtn.phoneNumber.phoneNumber)&&void 0!==V?V:""}),(null===(C=null===(k=null==E?void 0:E.ctaBtn)||void 0===k?void 0:k.websiteLinkBtn)||void 0===C?void 0:C.isChecked)&&Q.push({type:"website",text:null!==(A=E.ctaBtn.websiteLinkBtn.btnText)&&void 0!==A?A:"",extra:null!==(j=null===(L=E.ctaBtn.websiteLinkBtn)||void 0===L?void 0:L.linkOpens)&&void 0!==j?j:"",placeholder:null!==(S=E.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==S?S:""}),a((()=>{u&&J.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{G(Object.assign({},e))}))}),[u,T]),a((()=>{u&&J.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{G(Object.assign({},e))}))}),[R]),u?u.htmlContentUrl?e(d,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:K.whatsappOnlyFillVariablesValueInBodyText(null!==(U=null==E?void 0:E.bodyText)&&void 0!==U?U:"",null!==(W=null==E?void 0:E.bodyVariables)&&void 0!==W?W:[],h),footerText:null==E?void 0:E.footerText,headerMediaType:(null==E?void 0:E.headerType)||n.NONE,headerText:K.fillVariablesValInBodyText(null!==(q=null==E?void 0:E.headerText)&&void 0!==q?q:"",null!==(z=null==E?void 0:E.headerVariables)&&void 0!==z?z:[],h),headerAssetLink:null!==(D=null==E?void 0:E.headerAssetLink)&&void 0!==D?D:"",headerAssetName:null!==(M=null==E?void 0:E.headerAssetName)&&void 0!==M?M:"",quickReplybtn:null==E?void 0:E.quickReply,ctaBtn:Q,actionTypes:null==E?void 0:E.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=c?c:e(l,{children:" "})}):e(p,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:null==E?void 0:E.bodyText,footerText:null==E?void 0:E.footerText,headerMediaType:(null==E?void 0:E.headerType)||n.NONE,headerText:null==E?void 0:E.headerText,headerAssetLink:null!==(F=null==E?void 0:E.headerAssetLink)&&void 0!==F?F:"",headerAssetName:null!==(P=null==E?void 0:E.headerAssetName)&&void 0!==P?P:"",quickReplybtn:null==E?void 0:E.quickReply,ctaBtn:Q,actionTypes:null==E?void 0:E.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:y,zeroStateComponent:null!=c?c:e(l,{children:" "}),bodyVariableList:null!==(O=null===(g=null==E?void 0:E.bodyVariables)||void 0===g?void 0:g.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==O?O:[],headerVariableList:null!==(H=null===(I=null==E?void 0:E.headerVariables)||void 0===I?void 0:I.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==H?H:[],buttons:null==E?void 0:E.allButtons,limitedTimeOfferComponent:null==E?void 0:E.limitedTimeOfferComponent,isWhatsappCarousel:w}):e(l,{children:c})};export{s as default};
+import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import{TemplateCreatorHelper as o}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as n}from"./models/TemplateMeta.js";import{TemplateHelperUtils as r}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as d}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as s}from"./WhatsApp/WhatsAppLikePreviewV2.js";const p=p=>{let{template:u,extras:v,containerStyle:m,usePlaceHolderName:h,showHeader:x,zeroStateComponent:c,size:b,showSampleValues:T,carouselCardIndex:y,isWhatsappCarousel:w,isPreview:f}=p;var B,N,V,k,C,A,L,P,j,S,F,g,O,I,H,U,W,q,z,D,M,R;const{selectedCarouselIndex:E}=i(),[G,J]=t(),K=new o,Q=new r,X=[];return(null===(N=null===(B=null==G?void 0:G.ctaBtn)||void 0===B?void 0:B.phoneNumber)||void 0===N?void 0:N.isChecked)&&X.push({type:"phoneNumber",text:null!==(V=G.ctaBtn.phoneNumber.btnText)&&void 0!==V?V:"",extra:null!==(k=G.ctaBtn.phoneNumber.phoneNumber)&&void 0!==k?k:""}),(null===(A=null===(C=null==G?void 0:G.ctaBtn)||void 0===C?void 0:C.websiteLinkBtn)||void 0===A?void 0:A.isChecked)&&X.push({type:"website",text:null!==(L=G.ctaBtn.websiteLinkBtn.btnText)&&void 0!==L?L:"",extra:null!==(j=null===(P=G.ctaBtn.websiteLinkBtn)||void 0===P?void 0:P.linkOpens)&&void 0!==j?j:"",placeholder:null!==(S=G.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==S?S:""}),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[u,T]),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[E]),u?u.htmlContentUrl?e(d,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:Q.whatsappOnlyFillVariablesValueInBodyText(null!==(W=null==G?void 0:G.bodyText)&&void 0!==W?W:"",null!==(q=null==G?void 0:G.bodyVariables)&&void 0!==q?q:[],h),footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:Q.fillVariablesValInBodyText(null!==(z=null==G?void 0:G.headerText)&&void 0!==z?z:"",null!==(D=null==G?void 0:G.headerVariables)&&void 0!==D?D:[],h),headerAssetLink:null!==(M=null==G?void 0:G.headerAssetLink)&&void 0!==M?M:"",headerAssetName:null!==(R=null==G?void 0:G.headerAssetName)&&void 0!==R?R:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=c?c:e(l,{children:" "}),isPreview:f}):e(s,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:null==G?void 0:G.bodyText,footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:null==G?void 0:G.headerText,headerAssetLink:null!==(F=null==G?void 0:G.headerAssetLink)&&void 0!==F?F:"",headerAssetName:null!==(g=null==G?void 0:G.headerAssetName)&&void 0!==g?g:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:y,zeroStateComponent:null!=c?c:e(l,{children:" "}),bodyVariableList:null!==(I=null===(O=null==G?void 0:G.bodyVariables)||void 0===O?void 0:O.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==I?I:[],headerVariableList:null!==(U=null===(H=null==G?void 0:G.headerVariables)||void 0===H?void 0:H.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==U?U:[],buttons:null==G?void 0:G.allButtons,limitedTimeOfferComponent:null==G?void 0:G.limitedTimeOfferComponent,isWhatsappCarousel:w,isPreview:f}):e(l,{children:c})};export{p as default};

package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -188,6 +188,7 @@ export type WhatsappLikePreviewTypes = {
     buttons?: WhatsappPreviewButtonType[];
     limitedTimeOfferComponent?: CreateTemplateType['limitedTimeOfferComponent'];
     isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 };
 export type WhatsappPreviewButtonType = {
     type: WhatsappTemplateButtonTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.442.beta.link.5",
+	"version": "0.0.444.beta-1",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",