@bikdotai/bik-component-library 0.0.735 → 0.0.736-beta.1

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../template-context-mapper/context/templateModalContext.js"),l=require("../../utils/StringUtils.js"),i=require("../../constants/Theme.js"),a=require("../../assets/icons/aiContentIcon.svg.js"),n=require("../TypographyStyle.js"),s=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),o=require("./SmsTemplatePreview.js"),d=require("./webpush/WebpushPreview.js"),u=require("./WhatsAppTemplatePreview.js");const p={WhatsAppWrapper:{backgroundColor:i.COLORS.surface.standard,borderRadius:4,border:`1px solid ${i.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=c=>{let{template:m,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:j,hideHeader:C,size:g,onlyTemplateContent:b,emailSpecificMeta:x,smsSpecificMeta:y,showSampleValues:S,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,applyBorderBottom:P,webPushSpecificMeta:f,hidePointerEvents:E}=c;var H,A;const{setSelectedCarouselIndex:q}=t.useTemplateModalContext();return v===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0,border:j?`1px solid ${i.COLORS.stroke.primary}`:"none",borderRadius:4},null==y?void 0:y.templateContainerStyles)},{children:e.jsx(o.default,{template:m,hideHeader:C,onlyTemplateContent:b,size:null!=g?g:"large",variableStore:null==y?void 0:y.smsVariableStore,display_content:null==y?void 0:y.smsDisplayContent,uniqueId:null==y?void 0:y.uniqueId})})):v===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(s.default,{template:m,handleViewTemplate:()=>{var e;null===(e=null==x?void 0:x.handleViewTemplate)||void 0===e||e.call(x)},hideHeader:C,hideViewButton:null==x?void 0:x.hideViewButtonForEmail,containerStyle:null==x?void 0:x.containerStyle,emailDisplayContent:null==x?void 0:x.emailDisplayContent,emailHtmlContainerId:null==x?void 0:x.emailHtmlContainerId,applyBorderBottom:P,hidePointerEvents:E})})):v===r.CHANNEL_TYPE.WHATSAPP||v===r.CHANNEL_TYPE.RCS?e.jsxs("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),j?p.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(q&&w){if(-1===T&&!(null===(t=null===(e=null==m?void 0:m.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;q(null!=T?T:-1)}}},{children:[j?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(n.TitleRegular,{children:l.default.convertToTitleCase(null!==(H=null==m?void 0:m.label)&&void 0!==H?H:"")})})):e.jsx(e.Fragment,{}),e.jsx(u.default,{showSampleValues:S,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:m,size:j?"small":null!=g?g:"large",containerStyle:Object.assign(Object.assign({borderWidth:j?0:1,borderTopWidth:1},null!==(A=null==h?void 0:h.containerStyle)&&void 0!==A?A:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,channel:v}),!!(null==m?void 0:m.aiContentConfigId)&&e.jsx("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5}},{children:e.jsx(a.default,{width:48,height:48})}))]})):v==r.CHANNEL_TYPE.WEBPUSH?e.jsx("div",Object.assign({style:Object.assign({},null==f?void 0:f.containerStyle)},{children:e.jsx(d.default,{template:m,extraContainerCss:null==f?void 0:f.extraContainerCss})})):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../template-context-mapper/context/templateModalContext.js"),l=require("../../utils/StringUtils.js"),i=require("../../constants/Theme.js"),a=require("../../assets/icons/aiContentIcon.svg.js"),n=require("../TypographyStyle.js"),s=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),o=require("./SmsTemplatePreview.js"),d=require("./webpush/WebpushPreview.js"),u=require("./WhatsAppTemplatePreview.js");const p={WhatsAppWrapper:{backgroundColor:i.COLORS.surface.standard,borderRadius:4,border:`1px solid ${i.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=c=>{let{template:m,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:C,hideHeader:j,size:x,onlyTemplateContent:g,emailSpecificMeta:y,smsSpecificMeta:S,showSampleValues:b,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:P,applyBorderBottom:f,webPushSpecificMeta:E,hidePointerEvents:H}=c;var O,A;const{setSelectedCarouselIndex:q}=t.useTemplateModalContext();return v===r.CHANNEL_TYPE.SMS?e.jsx("div",{style:Object.assign({marginTop:C?16:0,border:C?`1px solid ${i.COLORS.stroke.primary}`:"none",borderRadius:4},null==S?void 0:S.templateContainerStyles),children:e.jsx(o.default,{template:m,hideHeader:j,onlyTemplateContent:g,size:null!=x?x:"large",variableStore:null==S?void 0:S.smsVariableStore,display_content:null==S?void 0:S.smsDisplayContent,uniqueId:null==S?void 0:S.uniqueId})}):v===r.CHANNEL_TYPE.EMAIL?e.jsx("div",{style:Object.assign({marginTop:C?16:0},null==y?void 0:y.templateContainerStyles),children:e.jsx(s.default,{template:m,handleViewTemplate:()=>{var e;null===(e=null==y?void 0:y.handleViewTemplate)||void 0===e||e.call(y)},hideHeader:j,hideViewButton:null==y?void 0:y.hideViewButtonForEmail,containerStyle:null==y?void 0:y.containerStyle,emailDisplayContent:null==y?void 0:y.emailDisplayContent,emailHtmlContainerId:null==y?void 0:y.emailHtmlContainerId,applyBorderBottom:f,hidePointerEvents:H})}):v===r.CHANNEL_TYPE.WHATSAPP||v===r.CHANNEL_TYPE.RCS?e.jsxs("div",{style:Object.assign(Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),C?p.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(q&&w){if(-1===T&&!(null===(t=null===(e=null==m?void 0:m.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;q(null!=T?T:-1)}},children:[C?e.jsx("div",{style:{padding:16},children:e.jsx(n.TitleRegular,{children:l.default.convertToTitleCase(null!==(O=null==m?void 0:m.label)&&void 0!==O?O:"")})}):e.jsx(e.Fragment,{}),e.jsx(u.default,{showSampleValues:b,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:m,size:C?"small":null!=x?x:"large",containerStyle:Object.assign(Object.assign({borderWidth:C?0:1,borderTopWidth:1},null!==(A=null==h?void 0:h.containerStyle)&&void 0!==A?A:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:P,channel:v}),!!(null==m?void 0:m.aiContentConfigId)&&e.jsx("div",{style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5},children:e.jsx(a.default,{width:48,height:48})})]}):v==r.CHANNEL_TYPE.WEBPUSH?e.jsx("div",{style:Object.assign({},null==E?void 0:E.containerStyle),children:e.jsx(d.default,{template:m,extraContainerCss:null==E?void 0:E.extraContainerCss})}):e.jsx(e.Fragment,{})};

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

@@ -1,10 +1,10 @@
-import React from 'react';
-export declare const ChatBtn: React.FC<{
-    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
-    text: string;
-    extraContent?: string;
-    placeholder?: string;
-    textTypography?: React.FC;
-    size?: 'small' | 'large';
-    iconPosition?: 'left' | 'right';
-}>;
+import React from 'react';
+export declare const ChatBtn: React.FC<{
+    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    text: string;
+    extraContent?: string;
+    placeholder?: string;
+    textTypography?: React.FC;
+    size?: 'small' | 'large';
+    iconPosition?: 'left' | 'right';
+}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),i=require("./ChatUI.style.js");exports.ChatBtn=n=>{let{Icon:o,text:s,extraContent:l,placeholder:a,textTypography:c,size:p,iconPosition:h="left"}=n;const d=c||t.BodySecondary;return e.jsx(i.ChatBtnContainer,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[o&&"left"===h&&e.jsx(o,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:s})),o&&"right"===h&&e.jsx(o,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginLeft:8}})]})),!!l&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:a?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(a):l}))]}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),i=require("./ChatUI.style.js");exports.ChatBtn=n=>{let{Icon:o,text:l,extraContent:s,placeholder:a,textTypography:c,size:p,iconPosition:h="left"}=n;const d=c||t.BodySecondary;return e.jsx(i.ChatBtnContainer,{children:e.jsxs("div",{style:{textAlign:"center",maxWidth:"100%"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},children:[o&&"left"===h&&e.jsx(o,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(d,{style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:l}),o&&"right"===h&&e.jsx(o,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginLeft:8}})]}),!!s&&e.jsx(t.Caption,{style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:a?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(a):s})]})})};

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

@@ -1,2 +1,2 @@
-declare const ChatHeader: () => import("react/jsx-runtime").JSX.Element;
-export default ChatHeader;
+declare const ChatHeader: () => import("react/jsx-runtime").JSX.Element;
+export default ChatHeader;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/arrow_left.svg.js"),s=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./ChatHeader.style.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(r.default,{height:16,width:16,color:i.COLORS.content.primaryInverse}),e.jsx(o.IconContainer,{children:e.jsx(s.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.primaryInverse},{children:"Brand name"})),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.primaryInverse})]});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/arrow_left.svg.js"),s=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./ChatHeader.style.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(r.default,{height:16,width:16,color:i.COLORS.content.primaryInverse}),e.jsx(o.IconContainer,{children:e.jsx(s.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,{color:i.COLORS.content.primaryInverse,children:"Brand name"}),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.primaryInverse})]});

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

@@ -1,5 +1,5 @@
-export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SubTitle: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LeftContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TitleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SubTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;

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

@@ -1,3 +1,3 @@
-import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-declare const ChatUI: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
-export default ChatUI;
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+declare const ChatUI: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
+export default ChatUI;

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

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

@@ -1,21 +1,21 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    isCarouselCard?: boolean | undefined;
-    showBorder?: boolean | undefined;
-    showDashedBorder?: 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;
-    color?: string | undefined;
-}, never>;
-export declare const FooterText: import("styled-components").StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-}, never>;
-export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MediaNameAbsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DownloadMediaIconHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isCarouselCard?: boolean;
+    showBorder?: boolean;
+    showDashedBorder?: boolean;
+    isWhatsappCarousel?: boolean;
+    hasError?: boolean;
+    isPreview?: boolean;
+}>> & string;
+export declare const TimeStamp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
+    numberOfLines?: number;
+    color?: string;
+}, never>> & string;
+export declare const FooterText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
+    numberOfLines?: number;
+    color?: string;
+}, never>, never>> & string;
+export declare const MediaContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ChatBtnContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FooterWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MediaNameAbsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DownloadMediaIconHolder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,3 +1,3 @@
-import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-export declare const HtmlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const HtmlContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,9 +1,9 @@
-import { CreateTemplateType } from '../../models/WhatsAppTemplate';
-/**
- * Renders Limited Time Offer component
- * Type of props is infered from template
- */
-export declare const LimitedTimeOffer: (props: CreateTemplateType['limitedTimeOfferComponent']) => import("react/jsx-runtime").JSX.Element;
-export declare const StyledLimitedOfferTime: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledLtoIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledLtoText: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { CreateTemplateType } from '../../models/WhatsAppTemplate';
+/**
+ * Renders Limited Time Offer component
+ * Type of props is infered from template
+ */
+export declare const LimitedTimeOffer: (props: CreateTemplateType["limitedTimeOfferComponent"]) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledLimitedOfferTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLtoIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLtoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

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

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

@@ -1,14 +1,14 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import { HEADER_TYPES } from '../models/TemplateMeta';
-export declare const NoMediaCard: React.FC<{
-    headerAssetLink?: string;
-    headerAssetName?: string;
-    mediaType?: HEADER_TYPES;
-}>;
-export declare const MediaCard: React.FC<{
-    headerAssetLink?: string;
-    headerAssetName?: string;
-    mediaType: HEADER_TYPES;
-    imagePreviewStyles?: CSSProperties;
-}>;
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+import { HEADER_TYPES } from '../models/TemplateMeta';
+export declare const NoMediaCard: React.FC<{
+    headerAssetLink?: string;
+    headerAssetName?: string;
+    mediaType?: HEADER_TYPES;
+}>;
+export declare const MediaCard: React.FC<{
+    headerAssetLink?: string;
+    headerAssetName?: string;
+    mediaType: HEADER_TYPES;
+    imagePreviewStyles?: CSSProperties;
+}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../shimmer-image/ShimmerImage.js"),a=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),o=require("./ChatUI.style.js");const c=t=>{let{headerAssetName:c,mediaType:l}=t;const h=l===n.HEADER_TYPES.IMAGE?r.default:l===n.HEADER_TYPES.VIDEO?i.default:s.default;return e.jsxs(o.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:d.COLORS.icon.placeholder}),!!c&&e.jsx(a.BodySecondary,Object.assign({style:{color:d.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:i,mediaType:a,imagePreviewStyles:d}=s;if(!r||a===n.HEADER_TYPES.DOCUMENT)return e.jsx(c,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:a}));return e.jsx(o.MediaContainer,{children:a===n.HEADER_TYPES.IMAGE?e.jsx(t.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):a===n.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/filePdf.svg.js"),s=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../shimmer-image/ShimmerImage.js"),a=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),o=require("./ChatUI.style.js");const c=t=>{let{headerAssetName:c,mediaType:l}=t;const h=l===n.HEADER_TYPES.IMAGE?s.default:l===n.HEADER_TYPES.VIDEO?i.default:r.default;return e.jsxs(o.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:d.COLORS.icon.placeholder}),!!c&&e.jsx(a.BodySecondary,{style:{color:d.COLORS.content.secondary,marginTop:8},children:c})]})};exports.MediaCard=r=>{let{headerAssetLink:s,headerAssetName:i,mediaType:a,imagePreviewStyles:d}=r;if(!s||a===n.HEADER_TYPES.DOCUMENT)return e.jsx(c,{headerAssetLink:s,headerAssetName:i,mediaType:a});return e.jsx(o.MediaContainer,{children:a===n.HEADER_TYPES.IMAGE?e.jsx(t.ShimmerImage,{imageUrl:s,alt:s,width:"100%",height:240,borderRadius:8}):a===n.HEADER_TYPES.VIDEO?e.jsx("video",{src:s,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0,children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:s})}):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;

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

@@ -1,6 +1,6 @@
-export interface RenderTemplateWithVariableInterface {
-    text?: string;
-    bold?: boolean;
-}
-declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => import("react/jsx-runtime").JSX.Element;
-export default RenderTemplateWithVariable;
+export interface RenderTemplateWithVariableInterface {
+    text?: string;
+    bold?: boolean;
+}
+declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => import("react/jsx-runtime").JSX.Element;
+export default RenderTemplateWithVariable;

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),s=require("../constants/regexPatterns.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=a(t).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),l=require("../constants/regexPatterns.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=s(t).default.div`
 	padding: 8px 12px 0px;
 	/* display: inline; */
-`;exports.default=t=>{const{text:a,bold:i}=t,o=null==a?void 0:a.match(s.templateVariablePattern),d=i?{fontWeight:"600"}:{};return a?e.jsx(l,{children:a.split(s.templateVariablePattern).map(((t,s)=>e.jsxs(e.Fragment,{children:[e.jsx(r.BodyRegular,Object.assign({style:d},{children:t})),!!(null==o?void 0:o[s])&&e.jsx(r.BodyRegular,Object.assign({style:Object.assign({color:n.COLORS.content.brand},d)},{children:null==o?void 0:o[s]}))]})))}):e.jsx(e.Fragment,{})};
+`;exports.default=t=>{const{text:s,bold:i}=t,o=null==s?void 0:s.match(l.templateVariablePattern),d=i?{fontWeight:"600"}:{};return s?e.jsx(a,{children:s.split(l.templateVariablePattern).map(((t,l)=>e.jsxs(e.Fragment,{children:[e.jsx(r.BodyRegular,{style:d,children:t}),!!(null==o?void 0:o[l])&&e.jsx(r.BodyRegular,{style:Object.assign({color:n.COLORS.content.brand},d),children:null==o?void 0:o[l]})]})))}):e.jsx(e.Fragment,{})};

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-export declare const WhatsappLikePreview: React.FC<WhatsappLikePreviewTypes>;
+import React from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const WhatsappLikePreview: React.FC<WhatsappLikePreviewTypes>;

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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),a=require("../utils/getPreviewPropLen.js"),i=require("./ChatHeader.js"),o=require("./ChatUI.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const p=n.default.div`
+"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"),i=require("../utils/getPreviewPropLen.js"),s=require("./ChatHeader.js"),o=require("./ChatUI.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const p=n.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: ${e=>e.showHeader?0:1}px solid
-		${s.COLORS.stroke.primary};
+		${a.COLORS.stroke.primary};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
 `,l=n.default(t.TitleRegular)`
-	color: ${s.COLORS.content.primary};
-`;exports.WhatsappLikePreview=r=>3===a.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},{children:[r.showHeader&&e.jsx(i.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(l,{children:"Preview"})})),e.jsx(o.default,Object.assign({showHeader:r.showHeader},r))]}))]}))});
+	color: ${a.COLORS.content.primary};
+`;exports.WhatsappLikePreview=r=>3===i.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,{style:r.containerStyle,showHeader:r.showHeader,children:[r.showHeader&&e.jsx(s.default,{}),e.jsxs("div",{style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"},children:[!r.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(l,{children:"Preview"})}),e.jsx(o.default,Object.assign({showHeader:r.showHeader},r))]})]})});

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-export declare const WhatsappLikePreviewV2: React.FC<WhatsappLikePreviewTypes>;
+import React from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const WhatsappLikePreviewV2: React.FC<WhatsappLikePreviewTypes>;

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

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/phone_round.svg.js"),r=require("styled-components"),s=require("../../template-context-mapper/context/templateModalContext.js"),a=require("../../template-context-mapper/utils/constants.js"),i=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),l=require("../utils/getPreviewPropLen.js"),p=require("./ChatHeader.js"),d=require("./ChatUI.style.js"),c=require("./ChatUiV2.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=x(r);const u=h.default.div`
-	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a.BACKGROUND_PREVIEW_IMAGE})`};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/phone_round.svg.js"),t=require("styled-components"),a=require("../../template-context-mapper/context/templateModalContext.js"),s=require("../../template-context-mapper/utils/constants.js"),i=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),l=require("../utils/getPreviewPropLen.js"),p=require("./ChatHeader.js"),d=require("./ChatUI.style.js"),x=require("./ChatUiV2.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=c(t);const u=h.default.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${s.BACKGROUND_PREVIEW_IMAGE})`};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
-`,j=h.default(i.TitleRegular)`
+`,m=h.default(i.TitleRegular)`
 	color: ${o.COLORS.content.primary};
-`,g=h.default.div`
+`,j=h.default.div`
 	margin: 4px;
 	margin-top: -4px;
 	background-color: ${o.BASE_COLORS.grayscale[50]};
@@ -18,4 +18,4 @@
 		align-items: center;
 		gap: 8px;
 	}
-`;exports.WhatsappLikePreviewV2=r=>{const{hideDeviceContainerInPreview:a}=s.useTemplateModalContext();return 3===l.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):a?e.jsx(c.ChatUIV2,Object.assign({showHeader:r.showHeader},r)):e.jsx(e.Fragment,{children:e.jsxs(u,Object.assign({style:r.containerStyle,showHeader:r.showHeader,isWhatsappCarousel:r.isWhatsappCarousel},{children:[r.showHeader&&e.jsx(p.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":`16px ${r.isWhatsappCarousel?"0px":"56px"} ${r.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(j,{children:"Preview"})})),e.jsx(c.ChatUIV2,Object.assign({showHeader:r.showHeader},r)),r.showCallPermissionCard&&e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(c.ChatUIV2,Object.assign({hideFooter:!0,headerMediaType:n.HEADER_TYPES.NONE,textType:"html",isPreview:r.isPreview,zeroStateComponent:e.jsx(e.Fragment,{}),buttons:[{text:"Choose preference",type:"CALL_PERMISSION",flowId:"",flowName:""}]},{children:e.jsxs(g,{children:[e.jsxs(c.HtmlContainer,Object.assign({className:"flex-align-center-gap"},{children:[e.jsx(t.default,{width:30,height:30}),e.jsx(i.TitleSmall,{children:r.callPermissionText?`${r.callPermissionText}`:'Can Make "Merchant Name" call you?'})]})),e.jsxs(d.FooterWrapper,{children:[e.jsx(d.FooterText,{style:{flex:1}}),e.jsx(d.TimeStamp,{children:"16:48"})]})]})}))}))]}))]}))})};
+`;exports.WhatsappLikePreviewV2=t=>{const{hideDeviceContainerInPreview:s}=a.useTemplateModalContext();return 3===l.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):s?e.jsx(x.ChatUIV2,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(u,{style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel,children:[t.showHeader&&e.jsx(p.default,{}),e.jsxs("div",{style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"},children:[!t.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(m,{children:"Preview"})}),e.jsx(x.ChatUIV2,Object.assign({showHeader:t.showHeader},t)),t.showCallPermissionCard&&e.jsx("div",{style:{marginTop:16},children:e.jsx(x.ChatUIV2,{hideFooter:!0,headerMediaType:n.HEADER_TYPES.NONE,textType:"html",isPreview:t.isPreview,zeroStateComponent:e.jsx(e.Fragment,{}),buttons:[{text:"Choose preference",type:"CALL_PERMISSION",flowId:"",flowName:""}],children:e.jsxs(j,{children:[e.jsxs(x.HtmlContainer,{className:"flex-align-center-gap",children:[e.jsx(r.default,{width:30,height:30}),e.jsx(i.TitleSmall,{children:t.callPermissionText?`${t.callPermissionText}`:'Can Make "Merchant Name" call you?'})]}),e.jsxs(d.FooterWrapper,{children:[e.jsx(d.FooterText,{style:{flex:1}}),e.jsx(d.TimeStamp,{children:"16:48"})]})]})})})]})]})})};

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

@@ -1,19 +1,19 @@
-import React, { ReactElement } from 'react';
-import { CSSProperties } from 'styled-components';
-import { CHANNEL_TYPE } from './models/Channels';
-import { WhatsAppTemplate } from './models/WhatsAppTemplate';
-declare const WhatsappTemplatePreview: React.FC<{
-    template?: WhatsAppTemplate;
-    extras?: boolean;
-    containerStyle?: CSSProperties;
-    usePlaceHolderName?: boolean;
-    showHeader?: boolean;
-    zeroStateComponent?: ReactElement;
-    size?: 'small' | 'large';
-    showSampleValues?: boolean;
-    carouselCardIndex?: number;
-    isWhatsappCarousel?: boolean;
-    isPreview?: boolean;
-    channel?: CHANNEL_TYPE;
-}>;
-export default WhatsappTemplatePreview;
+import React, { ReactElement } from 'react';
+import { CSSProperties } from 'styled-components';
+import { CHANNEL_TYPE } from './models/Channels';
+import { WhatsAppTemplate } from './models/WhatsAppTemplate';
+declare const WhatsappTemplatePreview: React.FC<{
+    template?: WhatsAppTemplate;
+    extras?: boolean;
+    containerStyle?: CSSProperties;
+    usePlaceHolderName?: boolean;
+    showHeader?: boolean;
+    zeroStateComponent?: ReactElement;
+    size?: 'small' | 'large';
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    channel?: CHANNEL_TYPE;
+}>;
+export default WhatsappTemplatePreview;

package/dist/cjs/components/template-preview/constants/TemplateConstants.d.ts

@@ -1,34 +1,34 @@
-export declare const CREATE_TEMPLATE_DOM_IDS: {
-    name: string;
-    header: string;
-    body: string;
-    actionButtons: string;
-    footer: string;
-};
-export declare const NAME_NOT_FOUND = "Please enter template name";
-export declare const BODY_TEXT_EMPTY = "Template body text cant be empty";
-export declare const REQUIRED_FIELD = "Required field";
-export declare const HEADER_LEN_ERROR = "Maximum 60 characters are allowed";
-export declare const NAME_LEN_ERROR = "Maximum 512 characters allowed";
-export declare const NO_SPECIAL_CHAR = "No special characters allowed";
-export declare const BODY_LEN_ERROR = "Maximum 1,024 characters are allowed";
-export declare const QUICK_REPLY_LEN_ERROR = "Maximum 20 characters are allowed";
-export declare const QUICK_REPLY_NAME_ERROR = "Buttons with same name are not allowed";
-export declare const CUSTOM_LIM_LEN_ERROR = "Maximum characters allowed is 2000 characters";
-export declare const ONE_VAR_ERROR = "Only one variable allowed in text header";
-export declare const VALID_PHONE_NUMBER = "Please enter a valid 10-digit phone number";
-export declare const FOOTER_EMOJI_ERROR = "Emojis are not allowed in footer";
-export declare const HEADER_EMOJI_ERROR = "Emojis are not allowed in header";
-export declare const BUTTON_EMOJI_ERROR = "Emojis are not allowed in button";
-export declare const HEADER_ASSET_LINK_ERROR = "Please attach the required media";
-export declare const TCS_DEFAULT_INPUT_ERROR = "Some input(s) are missing";
-export declare const ONE_VAR_ALLOWED = "Only one variable allowed in text header";
-export declare const HEADER_TEXT_LEN_LIMIT = 60;
-export declare const NAME_LEN_LIMIT = 512;
-export declare const BODY_TEXT_LEN_LIMIT = 1024;
-export declare const QUICK_REPLY_BTN_TEXT_LIMIT = 25;
-export declare const CUSTOM_LINK_LIMIT = 2000;
-export declare const QUICK_REPLY_NAME_LEN_LIMIT = 20;
-export declare const QRB_NONE = "None";
-export declare const CUSTOM_URL_PLACEHOLDER = "{{customUrl}}";
-export declare const CUSTOM_URL_PLACEHOLDER_VAR = "((customPlaceholderName))";
+export declare const CREATE_TEMPLATE_DOM_IDS: {
+    name: string;
+    header: string;
+    body: string;
+    actionButtons: string;
+    footer: string;
+};
+export declare const NAME_NOT_FOUND = "Please enter template name";
+export declare const BODY_TEXT_EMPTY = "Template body text cant be empty";
+export declare const REQUIRED_FIELD = "Required field";
+export declare const HEADER_LEN_ERROR = "Maximum 60 characters are allowed";
+export declare const NAME_LEN_ERROR = "Maximum 512 characters allowed";
+export declare const NO_SPECIAL_CHAR = "No special characters allowed";
+export declare const BODY_LEN_ERROR = "Maximum 1,024 characters are allowed";
+export declare const QUICK_REPLY_LEN_ERROR = "Maximum 20 characters are allowed";
+export declare const QUICK_REPLY_NAME_ERROR = "Buttons with same name are not allowed";
+export declare const CUSTOM_LIM_LEN_ERROR = "Maximum characters allowed is 2000 characters";
+export declare const ONE_VAR_ERROR = "Only one variable allowed in text header";
+export declare const VALID_PHONE_NUMBER = "Please enter a valid 10-digit phone number";
+export declare const FOOTER_EMOJI_ERROR = "Emojis are not allowed in footer";
+export declare const HEADER_EMOJI_ERROR = "Emojis are not allowed in header";
+export declare const BUTTON_EMOJI_ERROR = "Emojis are not allowed in button";
+export declare const HEADER_ASSET_LINK_ERROR = "Please attach the required media";
+export declare const TCS_DEFAULT_INPUT_ERROR = "Some input(s) are missing";
+export declare const ONE_VAR_ALLOWED = "Only one variable allowed in text header";
+export declare const HEADER_TEXT_LEN_LIMIT = 60;
+export declare const NAME_LEN_LIMIT = 512;
+export declare const BODY_TEXT_LEN_LIMIT = 1024;
+export declare const QUICK_REPLY_BTN_TEXT_LIMIT = 25;
+export declare const CUSTOM_LINK_LIMIT = 2000;
+export declare const QUICK_REPLY_NAME_LEN_LIMIT = 20;
+export declare const QRB_NONE = "None";
+export declare const CUSTOM_URL_PLACEHOLDER = "{{customUrl}}";
+export declare const CUSTOM_URL_PLACEHOLDER_VAR = "((customPlaceholderName))";

package/dist/cjs/components/template-preview/constants/regexPatterns.d.ts

@@ -1,11 +1,11 @@
-export declare const lockedVarPattern: RegExp;
-export declare const editableVarPattern: RegExp;
-export declare const placeHolderNamePattern: RegExp;
-export declare const globalVariablePattern: RegExp;
-export declare const globalHalfVariablePattern: RegExp;
-export declare const specialCharPattern: RegExp;
-export declare const variablePattern: RegExp;
-export declare const variablePatternGlobal: RegExp;
-export declare const templateVariablePattern: RegExp;
-export declare const previewLinkMDFormatPattern: RegExp;
-export declare const editableBracketPattern: RegExp;
+export declare const lockedVarPattern: RegExp;
+export declare const editableVarPattern: RegExp;
+export declare const placeHolderNamePattern: RegExp;
+export declare const globalVariablePattern: RegExp;
+export declare const globalHalfVariablePattern: RegExp;
+export declare const specialCharPattern: RegExp;
+export declare const variablePattern: RegExp;
+export declare const variablePatternGlobal: RegExp;
+export declare const templateVariablePattern: RegExp;
+export declare const previewLinkMDFormatPattern: RegExp;
+export declare const editableBracketPattern: RegExp;

package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.d.ts

@@ -1,2 +1,2 @@
-import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
-export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string, uniqueId?: string) => string;
+import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
+export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string, uniqueId?: string) => string;