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

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/bik-layout/MockMenus.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -9,4 +9,6 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
     channel: CHANNEL_TYPE;
     template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
     showSampleValues?: boolean | undefined;
+    isPreview?: boolean | undefined;
+    cardWidth?: number | 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,cardWidth:b}=o;var x,g,v,f;const m=null===(x=null==d?void 0:d.components)||void 0===x?void 0:x[1].cards;return e.jsxs(u,{children:[e.jsx(s.default,{channel:l,template:d,carouselCardIndex:-1,isPreview:h,width:b}),!!(null==m?void 0:m.length)&&e.jsx(r.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(g=null==m?void 0:m.length)&&void 0!==g?g: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===(f=null===(v=null==d?void 0:d.components)||void 0===v?void 0:v[1].cards)||void 0===f?void 0:f.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,width:b},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,7 @@ declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
     template: any;
     showSampleValues?: boolean | undefined;
     carouselCardIndex?: number | undefined;
+    isPreview?: boolean | undefined;
+    width?: number | 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 i=s(t).default.forwardRef((t=>{let{channel:s,template:i,showSampleValues:p,carouselCardIndex:l,isPreview:u,width:n}=t;const{cardWidth:o}=r.useTemplateModalContext();return e.jsx("div",Object.assign({style:{width:n||(o||360)}},{children:e.jsx(a.TemplatePreview,{showSampleValues:p,template:i,channel:s,size:"small",hideHeader:!0,carouselCardIndex:l,isWhatsappCarousel:!0,isPreview:u})}))}));exports.default=i;

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-context-mapper/modalElements/VariableConnector.js

@@ -13,4 +13,4 @@
 	background-color: rgba(0, 0, 0, 0.1);
 	z-index: 1000;
 	cursor: not-allowed;
-`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:S,componentType:V,CTAoptions:P}=n;var k,L;const[H,w]=i.useState(!1),[D,B]=i.useState(""),[q,Y]=i.useState([]),[M,R]=i.useState(),[U,I]=i.useState(!1),[W,$]=i.useState(!1),{device:z,channel:Z,isError:F,originalVariableList:G,template:K,templateSelectionTriggered:J,setTemplate:Q,setDisplayContent:X,setOriginalVariableList:ee,globalNormalizedPlaceholders:te,enabledCustomText:le,pod:ae,selectedCarouselIndex:ie,isProductCarouselType:ne,disableEditVariable:se,disableEditExpiry:oe}=j.useTemplateModalContext();function ue(){var e,t;const l=[];let a=[];if(Z!==p.CHANNEL_TYPE.MESSAGE||le){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(T)):(l.push({label:"",options:[f,E,T]}),R(E));const e=null!=te?te:[];Y([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=te?te:[];Y([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((Z===p.CHANNEL_TYPE.WHATSAPP||Z===p.CHANNEL_TYPE.EMAIL||Z===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&Z===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&Z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ae===m.POD.CHATBOT&&"BUTTONS"===V){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(h,a,Z);e.value&&R(e)}else"date_time"===h.type?(R(T),B(h.updatedValue),pe(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(R(f),B(h.updatedValue.split("https://")[1])):(R(E),B(h.updatedValue))}function de(e,t){var l,a,i;const n=e;B(""),R(n),Z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ce(null!==(l=n.value)&&void 0!==l?l:"","string"),null==pe||pe(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==pe||pe(null!==(i=h.index)&&void 0!==i?i:0,D,!0,n.value),ce("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ce(n.value,"url"===n.bikPlaceholderType?"link":"string"):(B(""),ce("",n.value))}function re(e,t){var l;B(t);const a="custom_link"===(null==M?void 0:M.value)&&t?t.includes("https")?t:`https://${t}`:t;ce(a,"static_expiry"===e?"string":e),Z===p.CHANNEL_TYPE.WHATSAPP&&(null==pe||pe(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ce(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Z!==p.CHANNEL_TYPE.WHATSAPP){const a=O.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),n=Z===p.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=G.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ee||ee(s)}if(Z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ie&&ie>-1&&ne){const t=Object.assign({},G).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>A===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))})}));return void(null==ee||ee((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ie&&ie>-1?G.cards[ie]:G;let u=l.body,d=l.header,r=l.buttons;if("BODY"===V?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===V?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===V&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ie&&ie>-1){const e=a.cloneDeep(G.cards);e[ie]={header:d,body:u,buttons:r},null==ee||ee((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ee||ee((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function pe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ie&&ie>-1&&ne){const s=Object.assign({},K).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),o=a.cloneDeep(K);if(l){const l=null===(n=Object.assign({},K).mapping.cards)||void 0===n?void 0:n.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,console.log("mappingComponent templateCopy: ",o),void(null==Q||Q(o))}const p=null!=ie&&ie>-1?{components:null===(s=Object.assign({},K).components[1].cards)||void 0===s?void 0:s[ie].components,mapping:null===(o=Object.assign({},K).mapping.cards)||void 0===o?void 0:o[ie]}:Object.assign({},K),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===V){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===V){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===V){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===V)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===V&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===V&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===V&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ie&&ie>-1&&K){const e=a.cloneDeep(K);e.components[1].cards[ie].components=p.components,e.mapping.cards[ie]=p.mapping,null==Q||Q(e)}else null==Q||Q(Object.assign({},p))}return i.useEffect((()=>{H&&(null==x||x())}),[H]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===z?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);Z===p.CHANNEL_TYPE.EMAIL&&(null==X||X(o))}()}),[J]),i.useEffect((()=>{ue()}),[]),i.useEffect((()=>{ue()}),[ie]),i.useEffect((()=>{z&&M&&D&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&D?D.includes("https")?D:`https://${D}`:D,M.value)}),100)}),[z]),i.useEffect((()=>{!W&&M&&h.updatedValue&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,M.value),$(!0)}),100)}),[M]),e.jsxs(y,Object.assign({channel:Z,focused:H,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:F&&!M?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==M?void 0:M.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ae===m.POD.CHATBOT?null==M?void 0:M.value:r.truncate(null!==(L=null==M?void 0:M.label)&&void 0!==L?L:"",20,!0)})),se||"date_time"===(null==h?void 0:h.type)&&oe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{I(!U)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:se,options:q,isSearchable:!1,onSelect:de,defaultOptions:M?[Object.assign(Object.assign({},M),{selected:!0})]:[]})})),("custom_text"===(null==M?void 0:M.value)||"custom_link"===(null==M?void 0:M.value))&&e.jsx(d.Input,{state:se?"disabled":"none",labelText:"custom_text"===(null==M?void 0:M.value)?"Custom text value":"custom_link"===(null==M?void 0:M.value)?"Custom URL value":"",id:`variable-value-${null==M?void 0:M.value}-${A}`,value:D,errorMessage:F?D&&0!==D.trim().length?"custom_link"!==M.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${D.trim()}`)&&0!==D.trim().length?"custom_link"!==M.value&&D.length>30?"Length cannot be more than 30":"BUTTONS"===V&&"custom_link"!==M.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==M?void 0:M.value)?2e3:"BUTTONS"===V?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==M?void 0:M.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===M.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{re(M.value,e)}}),"static_expiry"===(null==M?void 0:M.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[se&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:D?l.format(new Date(D),"hh:mm a"):l.format(new Date,"hh:mm a"),date:D?new Date(D):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{re("static_expiry",e.toISOString())}})]})),U&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:U,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!1),"{{custom.url}}"===e.actualValue?de({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"static_expiry"}):de({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
+`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:N,variableList:C,setShowDiscountCheckBox:S,componentType:V,CTAoptions:P}=n;var k,L;const[H,w]=i.useState(!1),[D,B]=i.useState(""),[q,Y]=i.useState([]),[M,R]=i.useState(),[U,I]=i.useState(!1),[W,$]=i.useState(!1),{device:z,channel:Z,isError:F,originalVariableList:G,template:K,templateSelectionTriggered:J,setTemplate:Q,setDisplayContent:X,setOriginalVariableList:ee,globalNormalizedPlaceholders:te,enabledCustomText:le,pod:ae,selectedCarouselIndex:ie,isProductCarouselType:ne,disableEditVariable:se,disableEditExpiry:oe}=j.useTemplateModalContext();function ue(){var e,t;const l=[];let a=[];if(Z!==p.CHANNEL_TYPE.MESSAGE||le){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(T)):(l.push({label:"",options:[f,E,T]}),R(E));const e=null!=te?te:[];Y([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=te?te:[];Y([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((Z===p.CHANNEL_TYPE.WHATSAPP||Z===p.CHANNEL_TYPE.EMAIL||Z===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&Z===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&Z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(N){let t=e.updatedValue;if(ae===m.POD.CHATBOT&&"BUTTONS"===V){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(h,a,Z);e.value&&R(e)}else"date_time"===h.type?(R(T),B(h.updatedValue),pe(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(R(f),B(h.updatedValue.split("https://")[1])):(R(E),B(h.updatedValue))}function de(e,t){var l,a,i;const n=e;B(""),R(n),Z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ce(null!==(l=n.value)&&void 0!==l?l:"","string"),null==pe||pe(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==pe||pe(null!==(i=h.index)&&void 0!==i?i:0,D,!0,n.value),ce("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ce(n.value,"url"===n.bikPlaceholderType?"link":"string"):(B(""),ce("",n.value))}function re(e,t){var l;B(t);const a="custom_link"===(null==M?void 0:M.value)&&t?t.includes("https")?t:`https://${t}`:t;ce(a,"static_expiry"===e?"string":e),Z===p.CHANNEL_TYPE.WHATSAPP&&(null==pe||pe(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ce(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Z!==p.CHANNEL_TYPE.WHATSAPP){const a=O.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),n=Z===p.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=G.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ee||ee(s)}if(Z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ie&&ie>-1&&ne){const t=Object.assign({},G).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>A===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))})}));return void(null==ee||ee((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ie&&ie>-1?G.cards[ie]:G;let u=l.body,d=l.header,r=l.buttons;if("BODY"===V?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===V?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===V&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ie&&ie>-1){const e=a.cloneDeep(G.cards);e[ie]={header:d,body:u,buttons:r},null==ee||ee((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ee||ee((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function pe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ie&&ie>-1&&ne){const s=Object.assign({},K).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),o=a.cloneDeep(K);if(l){const l=null===(n=Object.assign({},K).mapping.cards)||void 0===n?void 0:n.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,void(null==Q||Q(o))}const p=null!=ie&&ie>-1?{components:null===(s=Object.assign({},K).components[1].cards)||void 0===s?void 0:s[ie].components,mapping:null===(o=Object.assign({},K).mapping.cards)||void 0===o?void 0:o[ie]}:Object.assign({},K),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===V){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===V){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===V){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===V)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===V&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===V&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===V&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ie&&ie>-1&&K){const e=a.cloneDeep(K);e.components[1].cards[ie].components=p.components,e.mapping.cards[ie]=p.mapping,null==Q||Q(e)}else null==Q||Q(Object.assign({},p))}return i.useEffect((()=>{H&&(null==x||x())}),[H]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===z?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);Z===p.CHANNEL_TYPE.EMAIL&&(null==X||X(o))}()}),[J]),i.useEffect((()=>{ue()}),[]),i.useEffect((()=>{ue()}),[ie]),i.useEffect((()=>{z&&M&&D&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&D?D.includes("https")?D:`https://${D}`:D,M.value)}),100)}),[z]),i.useEffect((()=>{!W&&M&&h.updatedValue&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,M.value),$(!0)}),100)}),[M]),e.jsxs(y,Object.assign({channel:Z,focused:H,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:F&&!M?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:N?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==M?void 0:M.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ae===m.POD.CHATBOT?null==M?void 0:M.value:r.truncate(null!==(L=null==M?void 0:M.label)&&void 0!==L?L:"",20,!0)})),se||"date_time"===(null==h?void 0:h.type)&&oe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{I(!U)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:se,options:q,isSearchable:!1,onSelect:de,defaultOptions:M?[Object.assign(Object.assign({},M),{selected:!0})]:[]})})),("custom_text"===(null==M?void 0:M.value)||"custom_link"===(null==M?void 0:M.value))&&e.jsx(d.Input,{state:se?"disabled":"none",labelText:"custom_text"===(null==M?void 0:M.value)?"Custom text value":"custom_link"===(null==M?void 0:M.value)?"Custom URL value":"",id:`variable-value-${null==M?void 0:M.value}-${A}`,value:D,errorMessage:F?D&&0!==D.trim().length?"custom_link"!==M.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${D.trim()}`)&&0!==D.trim().length?"custom_link"!==M.value&&D.length>30?"Length cannot be more than 30":"BUTTONS"===V&&"custom_link"!==M.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==M?void 0:M.value)?2e3:"BUTTONS"===V?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==M?void 0:M.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===M.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{re(M.value,e)}}),"static_expiry"===(null==M?void 0:M.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[se&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:D?l.format(new Date(D),"hh:mm a"):l.format(new Date,"hh:mm a"),date:D?new Date(D):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{re("static_expiry",e.toISOString())}})]})),U&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=C?C:[],showVariable:U,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!1),"{{custom.url}}"===e.actualValue?de({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"static_expiry"}):de({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),s=require("../../input/Input.js"),a=require("../../template-preview/constants/regexPatterns.js"),n=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),c=require("../custom-hooks/useAdditionalVariables.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:v,currentVariableList:O,CTAoptions:x,QRBoptions:f,variableList:y}=p;var L,R,U,h;const[V,C]=t.useState(""),[w,T]=t.useState(),I=c.useAdditionalVariables({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:q,disableEditVariable:N,pod:P,selectedCarouselIndex:E,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:B}=u.useTemplateModalContext();function H(e){if(C(e),null!=E&&E>-1&&B){const t=S;if("URL"===m.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==_||_((e=>Object.assign(Object.assign({},e),{cards:l}))),null==g||g(`https://${e}`,"custom",j)}return}let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const l=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),s=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(s.buttons=l,null!=E&&E>-1){const e=[...S.cards];e[E]=s,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...l]})));null==g||g(`https://${e}`,"custom",j)}return t.useEffect((()=>{var e;if(m.buttonVariable&&a.editableVarPattern.test(m.buttonVariable))T(n.CUSTOM_URL_NAME),C((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&T(t[e])}}),[]),P!==i.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:N,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,t){const l=e;T(l);const s=("URL"===m.type?x:f).find((e=>e.placeHolder===l.placeHolder));if(s)if("custom_link"!==s.value){if(null!=E&&E>-1&&B){const e=S;if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder});const s=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll: ",t)}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value});const s=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==v||v({flowName:l.label,flowId:l.value},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll uui: ",t)}return}let e;if("URL"===m.type){let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder}),e=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j)}else{let t=O.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value}),e=O.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({flowName:l.label,flowId:l.value},"placeholder",j)}console.log("templateCopy updatedVariables: ",e);const t=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(t.buttons=e,null!=E&&E>-1){const e=[...S.cards];e[E]=t,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else H("")},defaultOptions:w?[Object.assign(Object.assign({},w),{selected:!0})]:[]})})),"custom_link"===(null==w?void 0:w.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(s.Input,{state:N?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:H,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(L=m.text)&&void 0!==L?L:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(R=m.example)||void 0===R?void 0:R[0]}`:null!==(U=m.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(h=m.index)&&void 0!==h?h:0},showVariableModal:!0,componentType:"BUTTONS",variableList:I,CTAoptions:x})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),s=require("../../input/Input.js"),a=require("../../template-preview/constants/regexPatterns.js"),n=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),c=require("../custom-hooks/useAdditionalVariables.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:v,currentVariableList:O,CTAoptions:x,QRBoptions:f,variableList:y}=p;var L,R,U,h;const[V,C]=t.useState(""),[T,I]=t.useState(),w=c.useAdditionalVariables({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:q,disableEditVariable:N,pod:P,selectedCarouselIndex:E,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:B}=u.useTemplateModalContext();function H(e){if(C(e),null!=E&&E>-1&&B){const t=S;if("URL"===m.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==_||_((e=>Object.assign(Object.assign({},e),{cards:l}))),null==g||g(`https://${e}`,"custom",j)}return}let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const l=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),s=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(s.buttons=l,null!=E&&E>-1){const e=[...S.cards];e[E]=s,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...l]})));null==g||g(`https://${e}`,"custom",j)}return t.useEffect((()=>{var e;if(m.buttonVariable&&a.editableVarPattern.test(m.buttonVariable))I(n.CUSTOM_URL_NAME),C((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&I(t[e])}}),[]),P!==i.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:N,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,t){const l=e;I(l);const s=("URL"===m.type?x:f).find((e=>e.placeHolder===l.placeHolder));if(s)if("custom_link"!==s.value){if(null!=E&&E>-1&&B){const e=S;if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder});const s=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value});const s=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==v||v({flowName:l.label,flowId:l.value},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===m.type){let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder}),e=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j)}else{let t=O.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value}),e=O.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({flowName:l.label,flowId:l.value},"placeholder",j)}const t=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(t.buttons=e,null!=E&&E>-1){const e=[...S.cards];e[E]=t,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else H("")},defaultOptions:T?[Object.assign(Object.assign({},T),{selected:!0})]:[]})})),"custom_link"===(null==T?void 0:T.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(s.Input,{state:N?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:H,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(L=m.text)&&void 0!==L?L:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(R=m.example)||void 0===R?void 0:R[0]}`:null!==(U=m.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(h=m.index)&&void 0!==h?h:0},showVariableModal:!0,componentType:"BUTTONS",variableList:w,CTAoptions:x})};

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