@bikdotai/bik-component-library 0.0.736-beta.6 → 0.0.736-beta.8

package/dist/esm/components/template-preview/RCS/RCSChatPreview.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useMemo as l}from"react";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{isRichAndCarouselCards as i}from"../helpers/templateMiscHelper.js";import{VariableEditorHelper as s}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as o}from"../models/TemplateMeta.js";import{ChatBtn as n}from"../WhatsApp/ChatBtn.js";import{RCSButtons as d}from"./RCSButtons.js";import{RCSMediaCard as m,PdfMediaCard as p}from"./RCSMediaCard.js";import{RCSPreviewContainer as h,HeaderTextContainer as u,TitleTextContainer as c,RcsHtmlContainer as T,RCSChatBtnContainer as g}from"./RCSPreview.styled.js";const y=new s,C=s=>{const{bodyText:C,titleText:v,headerMediaType:x,headerText:f,headerAssetLink:M,headerAssetName:N,imagePreviewStyles:A,size:L,bodyVariableList:w,headerVariableList:E,buttons:j,carouselCardIndex:H,isWhatsappCarousel:I,isPreview:S,titleVariableList:O,templateConfiguration:b}=s,P=y.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),w),_=y.format(null==f?void 0:f.replace(/</g,"&lt;").replace(/>/g,"&gt;"),E),z=y.format(null==v?void 0:v.replace(/</g,"&lt;").replace(/>/g,"&gt;"),O),{selectedCarouselIndex:B,isProductCarouselType:k,errorIndexes:D,isCarouselHovered:R}=a(),V=l((()=>i(null==b?void 0:b.templateType)),[null==b?void 0:b.templateType]),U=l((()=>"HORIZONTAL"==(null==b?void 0:b.orientation)),[b]);return e(h,{isCarouselCard:null!=H&&H>-1,showBorder:null!=H&&H===B||k&&null!=H&&H>-1&&null!=B&&B>-1,hasError:null==D?void 0:D.includes(null!=H?H:-2),isWhatsappCarousel:I,isPreview:S,showDashedBorder:k&&R&&(null!=B?B:-1)<0&&(null!=H?H:-1)>-1,needBorder:V,isHorizontalOrientation:U,children:[!U&&t(r,{children:x===o.TEXT?t(u,{dangerouslySetInnerHTML:{__html:_}}):x!==o.NONE&&M&&x!==o.DOCUMENT?t(m,{headerAssetLink:M,headerAssetName:N,mediaType:x,imagePreviewStyles:x===o.IMAGE?A:{}}):null}),e("div",{style:{width:U?"50%":""},children:[e("div",{className:V?"":"text--template",children:[!!v&&t(r,{children:t(c,{dangerouslySetInnerHTML:{__html:z}})}),!!C&&t(r,{children:t(T,{dangerouslySetInnerHTML:{__html:P},style:{paddingTop:v?0:12}})}),x===o.DOCUMENT?t(p,{headerAssetLink:M,headerAssetName:N}):t(r,{})]}),j&&j.length>0?i(null==b?void 0:b.templateType)?t(r,{children:j.map(((e,r)=>t(n,{text:e.text,size:L},r)))}):t(g,{children:j.map(((e,r)=>t(d,{text:e.text,size:L},r)))}):null]}),U&&x!==o.NONE&&M&&x!==o.DOCUMENT&&t(m,{headerAssetLink:M,headerAssetName:N,mediaType:x,imagePreviewStyles:x===o.IMAGE?A:{},isHorizontal:U})]})};export{C as RCSChatPreview};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useMemo as l}from"react";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{isRichAndCarouselCards as i}from"../helpers/templateMiscHelper.js";import{VariableEditorHelper as s}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as o}from"../models/TemplateMeta.js";import{ChatBtn as n}from"../WhatsApp/ChatBtn.js";import{RCSButtons as d}from"./RCSButtons.js";import{RCSMediaCard as m,PdfMediaCard as p}from"./RCSMediaCard.js";import{RCSPreviewContainer as h,HeaderTextContainer as u,TitleTextContainer as c,RcsHtmlContainer as g,RCSChatBtnContainer as T}from"./RCSPreview.styled.js";const y=new s,C=s=>{const{bodyText:C,titleText:v,headerMediaType:x,headerText:f,headerAssetLink:j,headerAssetName:M,imagePreviewStyles:N,size:A,bodyVariableList:O,headerVariableList:b,buttons:L,carouselCardIndex:w,isWhatsappCarousel:E,isPreview:H,titleVariableList:I,templateConfiguration:S}=s,P=y.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),O),_=y.format(null==f?void 0:f.replace(/</g,"&lt;").replace(/>/g,"&gt;"),b),z=y.format(null==v?void 0:v.replace(/</g,"&lt;").replace(/>/g,"&gt;"),I),{selectedCarouselIndex:B,isProductCarouselType:k,errorIndexes:D,isCarouselHovered:R}=a(),V=l((()=>i(null==S?void 0:S.templateType)),[null==S?void 0:S.templateType]),U=l((()=>"HORIZONTAL"==(null==S?void 0:S.orientation)),[S]);return e(h,Object.assign({isCarouselCard:null!=w&&w>-1,showBorder:null!=w&&w===B||k&&null!=w&&w>-1&&null!=B&&B>-1,hasError:null==D?void 0:D.includes(null!=w?w:-2),isWhatsappCarousel:E,isPreview:H,showDashedBorder:k&&R&&(null!=B?B:-1)<0&&(null!=w?w:-1)>-1,needBorder:V,isHorizontalOrientation:U},{children:[!U&&t(r,{children:x===o.TEXT?t(u,{dangerouslySetInnerHTML:{__html:_}}):x!==o.NONE&&j&&x!==o.DOCUMENT?t(m,{headerAssetLink:j,headerAssetName:M,mediaType:x,imagePreviewStyles:x===o.IMAGE?N:{}}):null}),e("div",Object.assign({style:{width:U?"50%":""}},{children:[e("div",Object.assign({className:V?"":"text--template"},{children:[!!v&&t(r,{children:t(c,{dangerouslySetInnerHTML:{__html:z}})}),!!C&&t(r,{children:t(g,{dangerouslySetInnerHTML:{__html:P},style:{paddingTop:v?0:12}})}),x===o.DOCUMENT?t(p,Object.assign({},{headerAssetLink:j,headerAssetName:M})):t(r,{})]})),L&&L.length>0?i(null==S?void 0:S.templateType)?t(r,{children:L.map(((e,r)=>t(n,{text:e.text,size:A},r)))}):t(T,{children:L.map(((e,r)=>t(d,{text:e.text,size:A},r)))}):null]})),U&&x!==o.NONE&&j&&x!==o.DOCUMENT&&t(m,{headerAssetLink:j,headerAssetName:M,mediaType:x,imagePreviewStyles:x===o.IMAGE?N:{},isHorizontal:U})]}))};export{C as RCSChatPreview};

package/dist/esm/components/template-preview/RCS/RCSMediaCard.d.ts

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

package/dist/esm/components/template-preview/RCS/RCSMediaCard.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"../../../assets/icons/RCS_PDF.svg.js";import{ShimmerImage as s}from"../../shimmer-image/ShimmerImage.js";import{COLORS as o}from"../../../constants/Theme.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{RCSPdfContainer as d,PdfComineText as m,PdfText as n,RCSMediaContainer as l}from"./RCSPreview.styled.js";const c=r=>{let{headerAssetLink:s,headerAssetName:a}=r;var l;const c=t,h=a||(null===(l=null==s?void 0:s.split("/").pop())||void 0===l?void 0:l.replace(".pdf",""))||"xxxxxxxx";return e(d,{children:[i(c,{height:24,width:24,color:o.icon.placeholder}),!!h&&e(m,{children:[i(n,{children:h}),i(n,{children:".pdf"})]})]})},h=e=>{let{headerAssetLink:t,headerAssetName:o,mediaType:d,imagePreviewStyles:m,isHorizontal:n}=e;const c={width:"100%",minHeight:n?"100%":"240px",height:n?"100%":"240px",objectFit:"cover",borderRadius:n?"8px":""};return i(l,{isHorizontal:!!n,children:d===a.IMAGE?i(s,{imageUrl:t,alt:t,width:"100%",height:n?"100%":240,imagePreviewStyles:Object.assign(Object.assign({},m),{borderTopRightRadius:8,borderTopLeftRadius:8})}):d===a.VIDEO?i("video",{src:t,style:c,controls:!0,muted:!0,children:i("track",{default:!0,kind:"captions",srcLang:"en",src:t})}):i(r,{})})};export{c as PdfMediaCard,h as RCSMediaCard};
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"../../../assets/icons/RCS_PDF.svg.js";import{ShimmerImage as s}from"../../shimmer-image/ShimmerImage.js";import{COLORS as o}from"../../../constants/Theme.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{RCSPdfContainer as d,PdfComineText as n,PdfText as m,RCSMediaContainer as l}from"./RCSPreview.styled.js";const c=r=>{let{headerAssetLink:s,headerAssetName:a}=r;var l;const c=t,h=a||(null===(l=null==s?void 0:s.split("/").pop())||void 0===l?void 0:l.replace(".pdf",""))||"xxxxxxxx";return e(d,{children:[i(c,{height:24,width:24,color:o.icon.placeholder}),!!h&&e(n,{children:[i(m,{children:h}),i(m,{children:".pdf"})]})]})},h=e=>{let{headerAssetLink:t,headerAssetName:o,mediaType:d,imagePreviewStyles:n,isHorizontal:m}=e;const c={width:"100%",minHeight:m?"100%":"240px",height:m?"100%":"240px",objectFit:"cover",borderRadius:m?"8px":""};return i(l,Object.assign({isHorizontal:!!m},{children:d===a.IMAGE?i(s,{imageUrl:t,alt:t,width:"100%",height:m?"100%":240,imagePreviewStyles:Object.assign(Object.assign({},n),{borderTopRightRadius:8,borderTopLeftRadius:8})}):d===a.VIDEO?i("video",Object.assign({src:t,style:c,controls:!0,muted:!0},{children:i("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):i(r,{})}))};export{c as PdfMediaCard,h as RCSMediaCard};

package/dist/esm/components/template-preview/RCS/RCSPreview.styled.d.ts

@@ -0,0 +1,33 @@
+import { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';
+export declare const RCSContainer: import("styled-components").StyledComponent<"div", any, {
+    isCarousal?: boolean | undefined;
+    templateType?: RCS_TEMPLATE_TYPE | undefined;
+}, never>;
+export declare const RcsHtmlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RCSPreviewContainer: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    showDashedBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+    needBorder?: boolean | undefined;
+    isHorizontalOrientation?: boolean | undefined;
+}, never>;
+export declare const RCSChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RCSMediaContainer: import("styled-components").StyledComponent<"div", any, {
+    isHorizontal: boolean;
+}, never>;
+export declare const RCSPdfContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PdfComineText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PdfText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const RCSCarousalContainer: import("styled-components").StyledComponent<"div", any, {
+    borderRadius?: string | undefined;
+}, never>;
+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>;

package/dist/esm/components/template-preview/RCS/RCSTemplateLikePreview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RCSPreviewPropsV2 } from '../models/RCSTemplate';
+export declare const RCSTemplateLikePreview: React.FC<RCSPreviewPropsV2>;

package/dist/esm/components/template-preview/RCS/RCSTemplateLikePreview.js

@@ -1,8 +1,8 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{getPreviewPropLen as p}from"../utils/getPreviewPropLen.js";import n from"./RCSChatHeader.js";import{RCSChatPreview as h}from"./RCSChatPreview.js";const l=o.div`
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{getPreviewPropLen as p}from"../utils/getPreviewPropLen.js";import n from"./RCSChatHeader.js";import{RCSChatPreview as h}from"./RCSChatPreview.js";const l=o.div`
 	background-color: white;
 	border-radius: 4px;
 	position: relative;
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
 `,m=o(a)`
 	color: ${i.content.primary};
-`,d=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===p(o)?e(r,{children:o.zeroStateComponent}):a?e(h,Object.assign({showHeader:o.showHeader},o)):e(r,{children:t(l,{style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel,children:[o.showHeader&&e(n,{}),t("div",{style:{padding:"small"===o.size?"10px 32px 10px 10px":`10px ${o.isWhatsappCarousel?"0px":"12px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`,height:o.isWhatsappCarousel?"100%":"auto"},children:[!o.hidePreviewText&&e("div",{style:{marginBottom:16},children:e(m,{children:"Preview"})}),e(h,Object.assign({showHeader:o.showHeader},o))]})]})})};export{d as RCSTemplateLikePreview};
+`,d=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===p(o)?e(t,{children:o.zeroStateComponent}):a?e(h,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(l,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(n,{}),r("div",Object.assign({style:{padding:"small"===o.size?"10px 32px 10px 10px":`10px ${o.isWhatsappCarousel?"0px":"12px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`,height:o.isWhatsappCarousel?"100%":"auto"}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(h,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{d as RCSTemplateLikePreview};

package/dist/esm/components/template-preview/SMS/SMSBubble.d.ts

@@ -0,0 +1,8 @@
+export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export type SMSBubbleProps = {
+    content: string;
+    size?: 'small' | 'large';
+};
+declare const SMSBubble: (props: SMSBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default SMSBubble;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SMSTemplateType } from './models/SmsTemplate';
+import { CUSTOM_VARIABLE } from './models/TemplateMeta';
+declare const SmsTemplatePreview: React.FC<{
+    template: SMSTemplateType;
+    variableStore?: CUSTOM_VARIABLE[];
+    hideHeader?: boolean;
+    onlyTemplateContent?: boolean;
+    display_content?: string;
+    size?: 'small' | 'large';
+    uniqueId?: string;
+}>;
+export default SmsTemplatePreview;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import r from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as n}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as d}from"./helpers/SmsTemplateHelper.js";import m from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as u}from"./SmsTemplatePreview.styled.js";const v=v=>{let{template:f,variableStore:y,hideHeader:g,display_content:j,onlyTemplateContent:x,size:w,uniqueId:S}=v;var z;const T=null==f?void 0:f.content,{hideDeviceContainerInPreview:b}=s();return b?e(p,{size:w,children:e(m,{size:null!=w?w:"large",content:null!=j?j:d(T,null!=y?y:[],void 0,null!=S?S:"")})}):t(l,{children:[!g&&!x&&e(h,{children:e(a,{style:{maxWidth:"100%"},children:f.name})}),!x&&e(u,{children:t(l,{children:[t("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e(o,{width:16,height:16,color:n.content.secondary}),e(c,{children:null===(z=null==f?void 0:f.headers)||void 0===z?void 0:z[0]})]}),t("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e(i,{width:16,height:16,color:n.content.secondary}),e(r,{width:16,height:16,color:n.content.secondary})]})]})}),e(p,{size:w,children:e(m,{size:null!=w?w:"large",content:null!=j?j:d(T,null!=y?y:[],void 0,null!=S?S:"")})})]})};export{v as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import l from"../../assets/icons/arrow_left.svg.js";import n from"../../assets/icons/more_vertical.svg.js";import o from"../../assets/icons/search.svg.js";import{COLORS as r}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as d}from"./helpers/SmsTemplateHelper.js";import m from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as u}from"./SmsTemplatePreview.styled.js";const v=v=>{let{template:f,variableStore:g,hideHeader:j,display_content:y,onlyTemplateContent:x,size:b,uniqueId:w}=v;var S;const z=null==f?void 0:f.content,{hideDeviceContainerInPreview:O}=s();return O?e(p,Object.assign({size:b},{children:e(m,{size:null!=b?b:"large",content:null!=y?y:d(z,null!=g?g:[],void 0,null!=w?w:"")})})):t(i,{children:[!j&&!x&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:f.name}))}),!x&&e(u,{children:t(i,{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(l,{width:16,height:16,color:r.content.secondary}),e(c,{children:null===(S=null==f?void 0:f.headers)||void 0===S?void 0:S[0]})]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(o,{width:16,height:16,color:r.content.secondary}),e(n,{width:16,height:16,color:r.content.secondary})]}))]})}),e(p,Object.assign({size:b},{children:e(m,{size:null!=b?b:"large",content:null!=y?y:d(z,null!=g?g:[],void 0,null!=w?w:"")})}))]})};export{v as default};

package/dist/esm/components/template-preview/SmsTemplatePreview.styled.d.ts

@@ -0,0 +1,13 @@
+export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSBubbleContainer: import("styled-components").StyledComponent<"div", any, {
+    size?: "small" | "large" | undefined;
+}, never>;
+export declare const SMSCardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSInnerContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+    outsidePreview?: boolean | undefined;
+}, never>;
+export declare const BubbleSideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BubbleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CHANNEL_TYPE } from './models/Channels';
+import { EmailMeta } from './models/EmailTemplate';
+import { SMSMeta } from './models/SmsTemplate';
+import { AllTemplateTypes } from './models/types';
+import { WebpushMetaType } from './models/WebpushTemplate';
+import { WhatsappMeta } from './models/WhatsAppTemplate';
+export interface TemplatePreviewProps {
+    template?: AllTemplateTypes;
+    channel: CHANNEL_TYPE;
+    onlyTemplateContent?: boolean;
+    outsidePreview?: boolean;
+    templateCreationsInfo?: boolean;
+    whatsAppSpecificMeta?: WhatsappMeta;
+    emailSpecificMeta?: EmailMeta;
+    smsSpecificMeta?: SMSMeta;
+    hideHeader?: boolean;
+    size?: 'small' | 'large';
+    templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    applyBorderBottom?: boolean;
+    webPushSpecificMeta?: WebpushMetaType;
+    hidePointerEvents?: boolean;
+}
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, webPushSpecificMeta, hidePointerEvents, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +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';
+}>;

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

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

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

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

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

@@ -1 +1 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import t from"../../../assets/icons/arrow_left.svg.js";import o from"../../../assets/icons/user_icon.svg.js";import s from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as m,IconContainer as a,TitleContainer as h,SubTitle as l}from"./ChatHeader.style.js";const p=()=>r(c,{children:[r(m,{children:[e(t,{height:16,width:16,color:n.content.primaryInverse}),e(a,{children:e(o,{height:14,width:14,color:n.content.primaryInverse})}),r(h,{children:[e(i,{color:n.content.primaryInverse,children:"Brand name"}),e(l,{children:"Business account"})]})]}),e(s,{height:16,width:16,color:n.content.primaryInverse})]});export{p as default};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import t from"../../../assets/icons/arrow_left.svg.js";import s from"../../../assets/icons/user_icon.svg.js";import o from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as m,IconContainer as a,TitleContainer as h,SubTitle as l}from"./ChatHeader.style.js";const p=()=>r(c,{children:[r(m,{children:[e(t,{height:16,width:16,color:n.content.primaryInverse}),e(a,{children:e(s,{height:14,width:14,color:n.content.primaryInverse})}),r(h,{children:[e(i,Object.assign({color:n.content.primaryInverse},{children:"Brand name"})),e(l,{children:"Business account"})]})]}),e(o,{height:16,width:16,color:n.content.primaryInverse})]});export{p as default};

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

@@ -0,0 +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>;

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

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

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

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

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

@@ -0,0 +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>;

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

@@ -0,0 +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;

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

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

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

@@ -0,0 +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>;

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

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

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

@@ -0,0 +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;
+}>;

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import d from"./ChatHeader.js";import p from"./ChatUI.js";const n=t.div`
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import n from"./ChatHeader.js";import d from"./ChatUI.js";const p=t.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
 		${a.stroke.primary};
@@ -9,4 +9,4 @@ import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"st
 	position: relative;
 `,m=t(i)`
 	color: ${a.content.primary};
-`,c=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(n,{style:t.containerStyle,showHeader:t.showHeader,children:[t.showHeader&&e(d,{}),o("div",{style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"},children:[!t.hidePreviewText&&e("div",{style:{marginBottom:16},children:e(m,{children:"Preview"})}),e(p,Object.assign({showHeader:t.showHeader},t))]})]})})};export{c as WhatsappLikePreview};
+`,c=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(p,Object.assign({style:t.containerStyle,showHeader:t.showHeader},{children:[t.showHeader&&e(n,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(d,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{c as WhatsappLikePreview};

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

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

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

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

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

@@ -0,0 +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;

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

@@ -0,0 +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))";

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

@@ -0,0 +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;

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

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