@bikdotai/bik-component-library 0.0.718-beta.7 → 0.0.718-beta.9

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

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

@@ -0,0 +1,12 @@
+import{j as o}from"../../../node_modules/react/jsx-runtime.js";import s from"../../../assets/icons/union.svg.js";import t from"styled-components";import{COLORS as e}from"../../../constants/Theme.js";const n=t.div`
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	left: -10px;
+	bottom: -1px;
+`,i=t.div`
+	padding: 12px;
+	background: ${e.background.base};
+	border-radius: 16px;
+	position: relative;
+`,r=t=>{const{content:r,size:d}=t;return o.jsxs(i,{children:[o.jsx(n,{children:o.jsx(s,{color:e.background.base,height:27,width:27})}),o.jsx("div",{style:{fontSize:"small"===d?12:14},dangerouslySetInnerHTML:{__html:r}})]})};export{i as SMSContainer,n as SideCaret,r as default};

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

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

@@ -0,0 +1,46 @@
+import r from"styled-components";import{COLORS as o}from"../../constants/Theme.js";r.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -5px;
+	bottom: 2px;
+`;const d=r.div`
+	padding: ${r=>"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"};
+	background: ${o.surface.standard};
+	border-radius: 4px;
+`,p=r.div`
+	padding: 16px;
+	background: ${o.surface.standard};
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border-bottom: 1px solid ${o.stroke.primary};
+`;r.div`
+	border: 1px solid ${o.stroke.primary};
+	height: 100%;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+`,r.div`
+	margin-top: ${r=>r.hideHeader?0:"16px"};
+	border-radius: 4px;
+	border-color: ${o.stroke.primary};
+	border-width: ${r=>r.outsidePreview?0:"1px"};
+`,r.div`
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	left: -10px;
+	bottom: -1px;
+`,r.div`
+	padding: 12px;
+	background: ${o.background.base};
+	border-radius: 16px;
+`;const t=r.div`
+	padding: 10px;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	background: ${o.surface.standard};
+	display: flex;
+	justify-content: space-between;
+	border-bottom: 1px solid ${o.background.base};
+`;export{d as SMSBubbleContainer,p as SMSCardHeader,t as SMSHeader};

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

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

@@ -0,0 +1 @@
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{Caption as t,BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{ChatBtnContainer as i}from"./ChatUI.style.js";const n=n=>{let{Icon:s,text:l,extraContent:c,placeholder:a,textTypography:p,size:h,iconPosition:d="left"}=n;const f=p||r;return e.jsx(i,{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:[s&&"left"===d&&e.jsx(s,{color:o.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(f,Object.assign({style:{color:o.special.brand.facebook,textAlign:"center",fontSize:"small"===h?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:l})),s&&"right"===d&&e.jsx(s,{color:o.special.brand.facebook,height:16,width:16,style:{marginLeft:8}})]})),!!c&&e.jsx(t,Object.assign({style:{marginTop:2,color:o.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):c}))]}))})};export{n 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

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

@@ -0,0 +1,37 @@
+import e from"styled-components";import{COLORS as t}from"../../../constants/Theme.js";const n=e.div`
+	height: 50px;
+	background-color: #008069;
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,i=e.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,o=e.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,p=e.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,r=e.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.content.primaryInverse};
+	margin-bottom: 0px;
+`;export{n as HeaderContainer,o as IconContainer,i as LeftContainer,r as SubTitle,p as TitleContainer};

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

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

@@ -0,0 +1,69 @@
+import e from"styled-components";import{Caption as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const t=e.div`
+	background: ${o.surface.standard};
+	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
+	border-top-right-radius: 12px;
+	border-bottom-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	position: relative;
+	padding: 8px 0px;
+	border: 2px solid
+		${e=>e.hasError?`${o.content.negative}`:e.showBorder?`${o.stroke.brand}`:`${o.stroke.primary}`};
+	border: ${e=>e.showDashedBorder&&`2px dashed ${o.content.brand}`};
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+	display: flex;
+	flex-direction: column;
+	:hover {
+		border: 2px
+			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
+			${o.stroke.brand};
+		box-shadow: ${e=>!e.isPreview&&"4px 4px 12px rgba(0, 0, 0, 0.25)"};
+	}
+`,i=e(r)`
+	color: ${o.content.secondary};
+	max-width: 80px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-wrap: wrap;
+`,d=e(i)`
+	max-width: 200px;
+`,s=e.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: 4px;
+	margin: 0px 8px;
+`,a=e.div`
+	padding: 12px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border-top: 1px solid ${o.stroke.primary};
+`,p=e.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 8px 12px;
+`;e.div`
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	text-align: center;
+	width: 100%;
+	padding: 10px;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: start;
+	background: ${o.surface.hovered};
+	border-bottom-right-radius: 8px;
+	border-bottom-left-radius: 8px;
+`,e.div`
+	position: absolute;
+	top: 16px;
+	right: 16px;
+`;export{a as ChatBtnContainer,t as Container,d as FooterText,p as FooterWrapper,s as MediaContainer,i as TimeStamp};

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

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

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

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

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

@@ -0,0 +1,12 @@
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import r from"styled-components";import{TitleRegular as o}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{getPreviewPropLen as t}from"../utils/getPreviewPropLen.js";import i from"./ChatHeader.js";import a from"./ChatUI.js";const d=r.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.stroke.primary};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+`,n=r(o)`
+	color: ${s.content.primary};
+`,p=r=>3===t(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsx(i,{}),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(n,{children:"Preview"})})),e.jsx(a,Object.assign({showHeader:r.showHeader},r))]}))]}))});export{p 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

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

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

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/TemplateConstants.js

@@ -0,0 +1 @@
+const e="create-template",a={name:`${e}-name`,header:`${e}-header`,body:`${e}-body`,actionButtons:`${e}-action-buttons`,footer:`${e}-footer`},t="Required field",o="Maximum 60 characters are allowed",r="Maximum 512 characters allowed",l="No special characters allowed",d="Maximum 1,024 characters are allowed",c="Maximum 20 characters are allowed",i="Buttons with same name are not allowed",m="Please enter a valid 10-digit phone number",n="Emojis are not allowed in button",s="Please attach the required media",h="Only one variable allowed in text header",u=60,w=512,b=1024,x=25,$=20,p="{{customUrl}}",M="((customPlaceholderName))";export{d as BODY_LEN_ERROR,b as BODY_TEXT_LEN_LIMIT,n as BUTTON_EMOJI_ERROR,a as CREATE_TEMPLATE_DOM_IDS,p as CUSTOM_URL_PLACEHOLDER,M as CUSTOM_URL_PLACEHOLDER_VAR,s as HEADER_ASSET_LINK_ERROR,o as HEADER_LEN_ERROR,u as HEADER_TEXT_LEN_LIMIT,r as NAME_LEN_ERROR,w as NAME_LEN_LIMIT,l as NO_SPECIAL_CHAR,h as ONE_VAR_ALLOWED,x as QUICK_REPLY_BTN_TEXT_LIMIT,c as QUICK_REPLY_LEN_ERROR,i as QUICK_REPLY_NAME_ERROR,$ as QUICK_REPLY_NAME_LEN_LIMIT,t as REQUIRED_FIELD,m as VALID_PHONE_NUMBER};

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/constants/regexPatterns.js

@@ -0,0 +1 @@
+const a=/\[\[[A-Za-z0-9 .]+\]\]/,z=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,A=/(\[\[|\{\{|\(\()(.*?)(\)\)|\}\}|\]\])/,Z=/\{\{[A-Za-z0-9 .]+\}\}/g,g=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,_=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,o=/\{\{[A-Za-z0-9 ._]+\}\}/,t=/\{\{[A-Za-z0-9 _]+\}\}/g,c=Z,e=/\[([^[]+)\](\(.*\))/,n=/[((|))]/;export{n as editableBracketPattern,z as editableVarPattern,g as globalHalfVariablePattern,Z as globalVariablePattern,a as lockedVarPattern,A as placeHolderNamePattern,e as previewLinkMDFormatPattern,_ as specialCharPattern,c as templateVariablePattern,o as variablePattern,t as variablePatternGlobal};

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;

package/dist/esm/components/template-preview/helpers/SmsTemplateHelper.js

@@ -0,0 +1 @@
+import{COLORS as n}from"../../../constants/Theme.js";import{variablePatternGlobal as t,variablePattern as o}from"../constants/regexPatterns.js";const e=function(e,a){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:n.content.brand,l=arguments.length>3?arguments[3]:void 0;const s=(null==a?void 0:a.length)?null==a?void 0:a.map((n=>n.updatedValue)):e.match(t);return t.lastIndex=0,e.split(o).map(((n,t)=>{var o;return(null==s?void 0:s[t])?`${n}<span></span><span id="${l||""}connectors_variable_${t+1}" style="color: ${r}; text-decoration: underline; word-break: break-word;">${null!==(o=null==s?void 0:s[t])&&void 0!==o?o:""}</span><span> </span>`:n})).join("")};export{e as renderVariableUIForPreview};