@bikdotai/bik-component-library 0.0.396 → 0.0.397-beta-styles

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

@@ -0,0 +1,12 @@
+export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+}, never>;
+export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+}, never>;
+export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+}, never>;

package/dist/esm/components/template-preview/EmailTemplatePreview.styled.js

@@ -0,0 +1,43 @@
+import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../constants/Theme.js";const t=r.div`
+	padding: 16px;
+	padding-bottom: 12px;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border: 1px solid ${e.stroke.primary};
+`,i=r.div`
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-left: 1px solid ${e.stroke.primary};
+	border-right: 1px solid ${e.stroke.primary};
+	border-top-color: ${e.stroke.primary};
+	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
+	overflow: scroll;
+`,d=r.div`
+	width: 100%;
+	height: 100%;
+	background-color: ${o.grayscale[100]};
+`,s=r.div`
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	min-height: 180px;
+`,p=r.div`
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	background: ${e.surface.standard};
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border: 1px solid ${e.stroke.primary};
+`,a=r.div`
+	border-radius: 4px;
+	background-color: ${e.surface.standard};
+	margin-top: ${r=>r.hideHeader?0:16};
+	display: flex;
+	flex-direction: column;
+`;export{d as CardLoadingContainer,a as EmailContainer,t as Header,s as IframeContainer,i as ImageContainer,p as ViewButton};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+import { EmailTemplateType } from './models/EmailTemplate';
+declare const EmailTemplateThumbnailPreview: React.FC<{
+    template: EmailTemplateType;
+    hideHeader?: boolean;
+    handleViewTemplate: () => void;
+    hideViewButton?: boolean;
+    containerStyle?: CSSProperties;
+    emailHtmlContainerId?: string;
+    emailDisplayContent?: string;
+}>;
+export default EmailTemplateThumbnailPreview;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as i}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as l,IframeContainer as a,ImageContainer as o,CardLoadingContainer as m,ViewButton as s}from"./EmailTemplatePreview.styled.js";const d=d=>{let{template:c,handleViewTemplate:h,hideHeader:p,hideViewButton:y,containerStyle:u,emailHtmlContainerId:j,emailDisplayContent:b}=d;return e(r,Object.assign({hideHeader:p,style:Object.assign({},null!=u?u:{})},{children:[!p&&t(l,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),t(a,{children:b?t("iframe",{title:"Email template preview",id:null!=j?j:"",width:"100%",srcDoc:b,height:"100%",style:{pointerEvents:"none"}}):t(o,Object.assign({hideHeader:p},{children:t(m,{})}))}),!y&&t(s,{children:t(i,{buttonType:"tertiary",buttonText:"View",onClick:()=>{h&&h()}})})]}))};export{d as default};

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

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

@@ -0,0 +1,12 @@
+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';
+}>;
+export default SmsTemplatePreview;

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

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import s from"../../assets/icons/arrow_left.svg.js";import o from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{TitleRegular as n,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as a}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSCardHeader as m,SMSHeader as h,SMSBubbleContainer as p}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:g,variableStore:y,hideHeader:j,display_content:v,onlyTemplateContent:u,size:S}=f;var b;const w=null==g?void 0:g.content;return e(t,{children:[!j&&!u&&r(m,{children:r(n,Object.assign({style:{maxWidth:"100%"}},{children:g.name}))}),!u&&r(h,{children:e(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(s,{width:16,height:16,color:l.content.secondary}),r(c,{children:null===(b=null==g?void 0:g.headers)||void 0===b?void 0:b[0]})]})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(i,{width:16,height:16,color:l.content.secondary}),r(o,{width:16,height:16,color:l.content.secondary})]}))]})}),r(p,Object.assign({size:S},{children:r(d,{size:null!=S?S:"large",content:null!=v?v:a(w,null!=y?y:[])})}))]})};export{f 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,19 @@
+import React from 'react';
+import { CHANNEL_TYPE } from './models/Channels';
+import { EmailMeta, EmailTemplateType } from './models/EmailTemplate';
+import { SMSMeta, SMSTemplateType } from './models/SmsTemplate';
+import { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';
+export interface TemplatePreviewProps {
+    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
+    channel: CHANNEL_TYPE;
+    onlyTemplateContent?: boolean;
+    outsidePreview?: boolean;
+    templateCreationsInfo?: boolean;
+    whatsAppSpecificMeta?: WhatsappMeta;
+    emailSpecificMeta?: EmailMeta;
+    smsSpecificMeta?: SMSMeta;
+    hideHeader?: boolean;
+    size?: 'small' | 'large';
+    templateContainerStyles?: React.CSSProperties;
+}
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TimeStamp: 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,56 @@
+import t from"styled-components";import{Caption as e}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const r=t.div`
+	background: ${o.surface.standard};
+	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	border-top-left-radius: 0px;
+	border-top-right-radius: 12px;
+	border-bottom-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	position: relative;
+	padding: 8px 0px;
+`,i=t(e)`
+	color: ${o.content.secondary};
+	max-width: 80px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+`,p=t.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: 4px;
+	margin: 0px 8px;
+`,d=t.div`
+	padding: 12px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border-top: 1px solid ${o.stroke.primary};
+`,n=t.div`
+	display: flex;
+
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 8px 12px;
+`;t.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;
+`,t.div`
+	position: absolute;
+	top: 16px;
+	right: 16px;
+`;export{d as ChatBtnContainer,r as Container,n as FooterWrapper,p as MediaContainer,i as TimeStamp};

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

@@ -0,0 +1,2 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+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{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import a from"styled-components";import{Tooltip as n}from"../../tooltips/Tooltip.js";import{Caption as p,BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{VariableEditorHelper as d}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as h,ACTIONS_TYPES as c}from"../models/TemplateMeta.js";import{ChatBtn as f}from"./ChatBtn.js";import{Container as x,FooterWrapper as y,TimeStamp as g}from"./ChatUI.style.js";import{MediaCard as T}from"./MediaCard.js";const j=a.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -8px;
+	top: -9px;
+`,b=a.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 8px 12px 0px;
+	color: ${m.content.primary};
+	word-wrap: break-word;
+`,w=a(b)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,v=new d,u=a=>{const{bodyText:m,footerText:d,headerMediaType:u,headerText:I,headerAssetLink:L,headerAssetName:N,quickReplybtn:A,ctaBtn:C,actionTypes:M,extras:_,showHeader:E,imagePreviewStyles:S,size:k,bodyVariableList:H,headerVariableList:R}=a,z=v.format(m,H),B=v.format(I,R);return e(x,{children:[t(j,{children:t(r,{color:"white",height:8,width:8})}),u===h.TEXT?t(w,{dangerouslySetInnerHTML:{__html:B}}):u!==h.NONE?t(T,{headerAssetLink:L,headerAssetName:N,mediaType:u,imagePreviewStyles:u===h.IMAGE?S:{}}):t(o,{}),!!m&&t(o,{children:t(b,{dangerouslySetInnerHTML:{__html:z}})}),e(y,{children:[t(n,Object.assign({body:null!=d?d:"",placement:"top"},{children:t(g,Object.assign({style:{flex:1}},{children:d}))})),t(g,{children:"16:48"})]}),M===c.QUICK_REPLY?t("div",{children:null==A?void 0:A.map(((e,o)=>t(f,{text:e.text},o)))}):M===c.CTA_BTN?t("div",{children:null==C?void 0:C.map(((e,o)=>t(f,{textTypography:E?p:l,extraContent:_?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:k},o)))}):t(o,{})]})};export{u as ChatUIV2};

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

@@ -0,0 +1,12 @@
+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};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	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(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

@@ -0,0 +1,12 @@
+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{ChatUIV2 as d}from"./ChatUiV2.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};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	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(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 WhatsappLikePreviewV2};

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

@@ -0,0 +1,13 @@
+import React, { ReactElement } from 'react';
+import { CSSProperties } from 'styled-components';
+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';
+}>;
+export default WhatsappTemplatePreview;

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

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

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

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

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",i="Maximum 20 characters are allowed",n="Buttons with same name are not allowed",c="Please enter a valid 10-digit phone number",m="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;export{d as BODY_LEN_ERROR,b as BODY_TEXT_LEN_LIMIT,m as BUTTON_EMOJI_ERROR,a as CREATE_TEMPLATE_DOM_IDS,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,i as QUICK_REPLY_LEN_ERROR,n as QUICK_REPLY_NAME_ERROR,$ as QUICK_REPLY_NAME_LEN_LIMIT,t as REQUIRED_FIELD,c 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) => 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;const l=(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==l?void 0:l[t])?`${n}<span></span><span id="connectors_variable_${t+1}" style="color: ${r}; text-decoration: underline; word-break: break-word;">${null!==(o=null==l?void 0:l[t])&&void 0!==o?o:""}</span><span> </span>`:n})).join("")};export{e as renderVariableUIForPreview};

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

@@ -0,0 +1,16 @@
+import { CreateTemplateType, WhatsAppTemplate } from '../models/WhatsAppTemplate';
+export declare class TemplateCreatorHelper {
+    private parseDataFromHeaderComponent;
+    /**
+     * Check if current template state is ready for saving as a draft/submit-template or not
+     * @param state
+     */
+    validateState(state: CreateTemplateType): {
+        status: 'invalid' | 'valid';
+        errors: CreateTemplateType['error'];
+    };
+    private parseBodyComponent;
+    private parseFooterComponent;
+    private parseButtonComponent;
+    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean, isV2?: boolean): Promise<CreateTemplateType>;
+}

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

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as i,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as l,NAME_LEN_LIMIT as a,NAME_LEN_ERROR as d,NO_SPECIAL_CHAR as r,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as s,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as p,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as m,QUICK_REPLY_BTN_TEXT_LIMIT as h,QUICK_REPLY_LEN_ERROR as b,BUTTON_EMOJI_ERROR as T,VALID_PHONE_NUMBER as y,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as f}from"../constants/TemplateConstants.js";import{HEADER_TYPES as k,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class C{parseDataFromHeaderComponent(e){var t,n,i,o,l,a,d,r,v,s;const u={headerType:k.NONE,headerVariables:[]},p=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(p){u.headerType=p.format,u.headerText=p.text,u.headerAssetLink=null===(i=null===(n=p.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(l=null===(o=p.example)||void 0===o?void 0:o.header_text)||void 0===l?void 0:l[0],c=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.header)||void 0===d?void 0:d[0];if(t&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("((","").replace("))",""),n=/\(\(/.test(c),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(v=null===(r=p.example)||void 0===r?void 0:r.header_text)||void 0===v?void 0:v.length)&&(u.headerText=null===(s=u.headerText)||void 0===s?void 0:s.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,C,L,E,R,_,w,A,V,I,D,U,O,q,F,j,P,$,Y;const K=/\p{Extended_Pictographic}/u;let M="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},H=new g;let S=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>a?(Q.meta.name=d,M="invalid"):n.test(e.meta.name.trim())&&(Q.meta.name=r,M="invalid"):(Q.meta.name=l,M="invalid"),Q.meta.name&&!S&&(G(x.name),S=!0),e.headerType===k.TEXT){const t=null!==(o=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==o?o:"";if(t)if(t.length>v)Q.header=s,M="invalid";else{const e=H.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,M="invalid")}else Q.header=l,M="invalid"}else e.headerType===k.DOCUMENT||e.headerType===k.IMAGE||(e.headerType,k.VIDEO);if(e.headerType!==k.DOCUMENT&&e.headerType!==k.IMAGE&&e.headerType!==k.VIDEO||e.headerAssetLink||(Q.header=p,M="invalid"),Q.header&&!S&&(G(x.header),S=!0),e.bodyText?e.bodyTextRaw&&(null===(C=e.bodyTextRaw)||void 0===C?void 0:C.trim().length)>c&&(Q.body=m,M="invalid"):(Q.body=l,M="invalid"),Q.body&&!S&&(G(x.body),S=!0),e.footerText&&e.footerText.length>v&&(Q.footer=s,M="invalid"),(null==Q?void 0:Q.footer)&&!S&&(G(x.footer),S=!0),e.actionsType===N.CTA_BTN){if(null===(E=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===E?void 0:E.isChecked){const t=null===(R=e.ctaBtn.phoneNumber.btnText)||void 0===R?void 0:R.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.phoneNumber.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.phoneNumber.btnText=T,M="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=l,M="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=y,M="invalid")}if(null===(w=null===(_=e.ctaBtn)||void 0===_?void 0:_.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),n=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),i=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.websiteLink.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.websiteLink.btnText=T,M="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=l,M="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=b,M="invalid";else if(K.test(o))t[i]=T,M="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=f,M="invalid")}else t[i]=l,M="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(D=Q.quickReply)||void 0===D?void 0:D.reduce(((e,t)=>e||!!t),!1);((null===(O=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===O?void 0:O.link)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(P=null===(j=Q.ctaBtn)||void 0===j?void 0:j.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===($=Q.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!S&&(G(x.actionButtons),S=!0)}return{status:M,errors:Q}}parseBodyComponent(e){let n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var o,l,a,d,r;const v=[];let s="";const u=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return u&&(null===(a=null===(l=u.example)||void 0===l?void 0:l.body_text)||void 0===a||a[0].forEach(((t,n)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[n];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(i);(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:n,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=u.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==v?void 0:v[i]){const o=v[i].variableName;return n?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${t.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,l,a,d;const r={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(r.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];return r.quickReply=e,r}t===N.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var n,i,l,a;if(t.phone_number&&(r.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==l?l:void 0;let v=!1;d&&o.test(d)&&(v=!0),r.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:v?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:v?void 0:d}}})))}return r}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var o;return e(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:u,quickReply:p,ctaBtn:c}=yield this.parseButtonComponent(t),m={quickReply:p,ctaBtn:c,meta:{name:n?`${t.label} Copy`:t.label,category:null===(o=t.category)||void 0===o?void 0:o.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:u,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:h}=this.validateState(m);return m.error=h,m}))}}export{C as TemplateCreatorHelper};

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

@@ -0,0 +1,7 @@
+export type variableType = {
+    placeholder: string;
+    value: string;
+};
+export declare class VariableEditorHelper {
+    format(text?: string, variableList?: variableType[]): string;
+}

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

@@ -0,0 +1 @@
+import{BaseWhatsappContentLangHelper as e}from"../../../helpers/BaseWhatsappContentLang.helper.js";import{variablePattern as r}from"../constants/regexPatterns.js";const l=new e;class a{format(e,a){var n;if(!e)return"";const t=new RegExp(r,"g"),o=e.match(t),p=null!==(n=null==a?void 0:a.map((e=>{let{placeholder:r}=e;return r})))&&void 0!==n?n:[],c=e.split(r).map(((e,r)=>{var l;const n=null==o?void 0:o[r];if(n){const r=n.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),t=p.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return t>-1?e+'<code style="color: #731DCF">'+(null===(l=null==a?void 0:a[t])||void 0===l?void 0:l.value)+"</code>":e+n}return e})).join("");return l.getHTML(c)}}export{a as VariableEditorHelper};