@bikdotai/bik-component-library 0.0.640-beta.help-attr.4 → 0.0.640-beta.help-attr.5

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

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

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

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

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

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

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

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

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

@@ -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,11 @@
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as a}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{getPreviewPropLen as n}from"../utils/getPreviewPropLen.js";import m from"./ChatHeader.js";import{ChatUIV2 as c}from"./ChatUiV2.js";const h=o.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a})`};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+`,l=o(i)`
+	color: ${p.content.primary};
+`,d=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===n(o)?e(t,{children:o.zeroStateComponent}):a?e(c,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(h,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(m,{}),r("div",Object.assign({style:{padding:"small"===o.size?"12px 32px 12px 12px":`16px ${o.isWhatsappCarousel?"0px":"56px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`,height:o.isWhatsappCarousel?"100%":"auto"}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(l,{children:"Preview"})})),e(c,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{d as WhatsappLikePreviewV2};

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

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

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

@@ -0,0 +1,28 @@
+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;
+    /**
+     * Parses LTO component to a format preview can understand.
+     * Points to Note -
+     * 1. Takes the Copy Code from previously parsed buttons.
+     * 2. LTO component does not have a dateTime expiry by default. Hence, while sending template to ContextMapper, send with a date or current Date and Time is picked here.
+     */
+    private parseLimitedTimeOfferComponent;
+    parseUITemplateFromDBFormat(data: {
+        dbFormattedTemplate: WhatsAppTemplate;
+        isDuplicate?: boolean;
+        showSampleValues?: 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{format as t}from"date-fns";import{COLORS as i}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as o,editableVarPattern as l}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as v,HEADER_TEXT_LEN_LIMIT as s,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as f,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as k}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var i,n,o,l,a,d,r,v,s,p;const u={headerType:C.NONE,headerVariables:[]},m=null===(i=e.components)||void 0===i?void 0:i.find((e=>"HEADER"===e.type));if(m){u.headerType=m.format,u.headerText=m.text,u.headerAssetLink=null===(o=null===(n=m.example)||void 0===n?void 0:n.header_handle)||void 0===o?void 0:o[0];const i=null===(a=null===(l=m.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(i&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),o={idx:0,variableVal:t?i:h,editable:n,editableDefaultValues:n?void 0:i,variableName:e};u.headerVariables=[o],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(p=u.headerText)||void 0===p?void 0:p.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,l,E,_,L,O,w,R,D,A,V,I,U,q,j,F,P,M,Y,$,K;const Q=/\p{Extended_Pictographic}/u;let S="valid";const H={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},G=new N;let W=!1;const X=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)?(null===(i=e.meta.name)||void 0===i?void 0:i.trim().length)>d?(H.meta.name=r,S="invalid"):n.test(null===(o=e.meta.name)||void 0===o?void 0:o.trim())&&(H.meta.name=v,S="invalid"):(H.meta.name=a,S="invalid"),H.meta.name&&!W&&(X(x.name),W=!0),e.headerType===C.TEXT){const t=null!==(E=null===(l=e.headerText)||void 0===l?void 0:l.trim())&&void 0!==E?E:"";if(t)if(t.length>s)H.header=p,S="invalid";else{const e=G.getTemplateVariablesFromState(t);e&&e.length>1&&(H.header=u,S="invalid")}else H.header=a,S="invalid"}else e.headerType===C.DOCUMENT||e.headerType===C.IMAGE||(e.headerType,C.VIDEO);if(e.headerType!==C.DOCUMENT&&e.headerType!==C.IMAGE&&e.headerType!==C.VIDEO||e.headerAssetLink||(H.header=m,S="invalid"),H.header&&!W&&(X(x.header),W=!0),e.bodyText?e.bodyTextRaw&&(null===(_=e.bodyTextRaw)||void 0===_?void 0:_.trim().length)>c&&(H.body=h,S="invalid"):(H.body=a,S="invalid"),H.body&&!W&&(X(x.body),W=!0),e.footerText&&e.footerText.length>s&&(H.footer=p,S="invalid"),(null==H?void 0:H.footer)&&!W&&(X(x.footer),W=!0),e.actionsType===g.CTA_BTN){if(null===(O=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===O?void 0:O.isChecked){const t=null===(w=e.ctaBtn.phoneNumber.btnText)||void 0===w?void 0:w.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;H.ctaBtn&&!t?(H.ctaBtn.phoneNumber.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.phoneNumber.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.phoneNumber.btnText=y,S="invalid"),H.ctaBtn&&!i?(H.ctaBtn.phoneNumber.link=a,S="invalid"):H.ctaBtn&&i&&i.length<10&&(H.ctaBtn.phoneNumber.link=f,S="invalid")}if(null===(D=null===(R=e.ctaBtn)||void 0===R?void 0:R.websiteLinkBtn)||void 0===D?void 0:D.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),i=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();H.ctaBtn&&!t?(H.ctaBtn.websiteLink.btnText=a,S="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.websiteLink.btnText=T,S="invalid"):H.ctaBtn&&t&&Q.test(t)&&(H.ctaBtn.websiteLink.btnText=y,S="invalid"),!H.ctaBtn||i||n||(H.ctaBtn.websiteLink.link=a,S="invalid")}}else if(e.actionsType===g.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var o;const l=null===(o=i.text)||void 0===o?void 0:o.trim();if(l)if(l.length>B)t[n]=T,S="invalid";else if(Q.test(l))t[n]=y,S="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===l))&&(t[n]=k,S="invalid")}else t[n]=a,S="invalid"})),H.quickReply=t}if(e.actionsType===g.CTA_BTN||e.actionsType===g.QUICK_REPLY){const e=null===(U=H.quickReply)||void 0===U?void 0:U.reduce(((e,t)=>e||!!t),!1);((null===(j=null===(q=null==H?void 0:H.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===j?void 0:j.link)||(null===(P=null===(F=H.ctaBtn)||void 0===F?void 0:F.websiteLink)||void 0===P?void 0:P.btnText)||(null===(Y=null===(M=H.ctaBtn)||void 0===M?void 0:M.phoneNumber)||void 0===Y?void 0:Y.link)||(null===(K=null===($=H.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===K?void 0:K.btnText)||e)&&!W&&(X(x.actionButtons),W=!0)}return{status:S,errors:H}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let p="";const u=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return u&&(null===(d=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,i)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),p=null==d?void 0:d.match(o);(null==p?void 0:p[2])&&(d=null==p?void 0:p[2]),s.push({idx:i,variableVal:n?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),p=e.htmlContentUrl?e.htmlContentUrl:(null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=u.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==s?void 0:s[n]){const o=s[n].variableName;return t?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:p}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,n,o,a,d,r;const v={actionsType:g.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n[0].type)?g.QUICK_REPLY:g.CTA_BTN;if(v.actionsType=t,t===g.QUICK_REPLY){const e=null!==(a=null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o.map((e=>e)))&&void 0!==a?a:[];v.quickReply=e}else t===g.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var i,n,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(n=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===n?void 0:n[0])&&void 0!==o?o:void 0;let r=!1;d&&l.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:Array.isArray(e.example)?e.example[0]:(null==e?void 0:e.example)||""}):e))}return v}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var o,l,a;if("limited_time_offer"===e.type){n.text=null!==(l=null===(o=e.limited_time_offer)||void 0===o?void 0:o.text)&&void 0!==l?l:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseUITemplateFromDBFormat(t){var i;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:p,bodyVariable:u}=yield this.parseBodyComponent(e,o,l),{actionsType:m,quickReply:c,ctaBtn:h,allButtons:b}=yield this.parseButtonComponent(e),T=this.parseLimitedTimeOfferComponent(e,b),y={quickReply:c,ctaBtn:h,allButtons:b,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:m,footerText:this.parseFooterComponent(e),bodyVariables:u,bodyText:p,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:T},{errors:f}=this.validateState(y);return y.error=f,y}))}}export{E 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"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import{variablePattern as r}from"../constants/regexPatterns.js";const l=new e;class a{format(e,a){var t;if(!e)return"";const p=new RegExp(r,"g"),n=e.match(p),o=null!==(t=null==a?void 0:a.map((e=>{let{placeholder:r}=e;return r})))&&void 0!==t?t:[],c=e.split(r).map(((e,r)=>{var l;const t=null==n?void 0:n[r];if(t){const r=t.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),p=o.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return p>-1?e+'<code style="color: #731DCF">'+(null===(l=null==a?void 0:a[p])||void 0===l?void 0:l.value)+"</code>":e+t}return e})).join("");return l.getHTML(c)}}export{a as VariableEditorHelper};

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

@@ -0,0 +1,8 @@
+export declare class WhatsAppFormatToHTML {
+    convertToHTML(str: string): string;
+    convertToBold(str: string): string;
+    convertItalics(str: string): string;
+    convertStrike(str: string): string;
+    convertNewline(str: string): string;
+    removeExtraNewLines(md: string): string;
+}

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

@@ -0,0 +1 @@
+class e{convertToHTML(e){return this.convertNewline(this.convertStrike(this.convertItalics(this.convertToBold(e))))}convertToBold(e){return e.replace(/\*(.*?)\*/gim,"<b>$1</b>")}convertItalics(e){return e.replace(/_(.*)_/gim,"<em>$1</em>")}convertStrike(e){return e.replace(/~(.*)~/gim,"<s>$1</s>")}convertNewline(e){return e}removeExtraNewLines(e){return e.replace(/\n\n/g,"\n")}}export{e as WhatsAppFormatToHTML};

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

@@ -0,0 +1,13 @@
+import * as regexPatterns from './constants/regexPatterns';
+export { regexPatterns };
+export * from './TemplatePreview';
+export * from './WhatsApp/WhatsAppLikePreview';
+export * from './WhatsApp/WhatsAppLikePreviewV2';
+export * from './helpers/SmsTemplateHelper';
+export * from './helpers/WhatsAppFormatToHTML';
+export * from './helpers/VariableEditorHelper';
+export * from './models/EmailTemplate';
+export * from './models/TemplateMeta';
+export * from './models/WhatsAppTemplate';
+export * from './models/types';
+export * from './models/Channels';

package/dist/esm/components/template-preview/models/Channels.d.ts

@@ -0,0 +1,9 @@
+export declare enum CHANNEL_TYPE {
+    WHATSAPP = "whatsapp",
+    INSTAGRAM = "instagram",
+    TIKTOK = "tiktok",
+    EMAIL = "email",
+    SMS = "message",
+    WEBPUSH = "webpush",
+    MESSAGE = "message"
+}

package/dist/esm/components/template-preview/models/Channels.js

@@ -0,0 +1 @@
+var a;!function(a){a.WHATSAPP="whatsapp",a.INSTAGRAM="instagram",a.TIKTOK="tiktok",a.EMAIL="email",a.SMS="message",a.WEBPUSH="webpush",a.MESSAGE="message"}(a||(a={}));export{a as CHANNEL_TYPE};

package/dist/esm/components/template-preview/models/EmailTemplate.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { CUSTOM_VARIABLE, TEMPLATE_EDITOR, TEMPLATE_STATUS } from './TemplateMeta';
+export type EmailTemplateType = {
+    category: string;
+    channel: 'email';
+    channelTemplateId: string;
+    createdAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    createdBy: 'admin';
+    editor: TEMPLATE_EDITOR;
+    htmlContentUrl: string;
+    name: string;
+    subject: string;
+    sendGridCategories: string[];
+    plainContent: string;
+    status: TEMPLATE_STATUS;
+    storeId: string;
+    templateId: string;
+    thumbnailUrl: string;
+    html_content?: string;
+    mapping: {
+        body: CUSTOM_VARIABLE[];
+    };
+    updatedAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    label: string;
+};
+export type EmailMeta = {
+    hideViewButtonForEmail?: boolean;
+    containerStyle?: React.CSSProperties | undefined;
+    handleViewTemplate?: () => void;
+    emailDisplayContent?: string;
+    templateContainerStyles?: React.CSSProperties | undefined;
+    emailHtmlContainerId?: string;
+};

package/dist/esm/components/template-preview/models/SmsTemplate.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { CUSTOM_VARIABLE } from './TemplateMeta';
+export type SMSTemplateType = {
+    category: 'other';
+    channel: 'message';
+    channelTemplateId: string;
+    content: string;
+    createdAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    createdBy: 'admin';
+    externalStatus: 'APPROVED';
+    headers: string[];
+    header?: string | null;
+    name: string;
+    status: 'ACTIVE';
+    storeId: string;
+    templateId: string;
+    templateType: string;
+    /** FRONTEND-ONLY DONT SEND TO FINAL PAYLOAD */
+    mapping: {
+        body: CUSTOM_VARIABLE[];
+    };
+    updatedAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    label: string;
+};
+export type SMSMeta = {
+    smsVariableStore?: CUSTOM_VARIABLE[];
+    smsDisplayContent?: string;
+    templateContainerStyles?: React.CSSProperties | undefined;
+    uniqueId?: string;
+};

package/dist/esm/components/template-preview/models/TemplateMeta.d.ts

@@ -0,0 +1,91 @@
+import { SingleOption } from "../../dropdown/type";
+export type CUSTOM_VARIABLE = {
+    variableName: string;
+    type: 'string' | 'link' | 'image' | 'button' | 'date_time';
+    isEditableVariable: boolean;
+    updatedValue: string;
+    index?: number;
+    variableValue?: string;
+    queryParams?: {
+        key: string;
+        value: string;
+    }[];
+    initialValue?: string;
+};
+export type QueryParamtype = {
+    key: string;
+    value: string;
+};
+export declare enum TEMPLATE_EDITOR {
+    SEND_GRID = "sendgrid",
+    BEE = "bee"
+}
+export declare enum TEMPLATE_STATUS {
+    APPROVED = "APPROVED",
+    DISABLED = "DISABLED",
+    FLAGGED = "FLAGGED",
+    PENDING = "PENDING",
+    DRAFT = "DRAFT",
+    REJECTED = "REJECTED",
+    PENDING_DELETION = "PENDING_DELETION",
+    IN_REVIEW = "IN REVIEW",
+    PAUSED = "PAUSED",
+    ACTIVE = "ACTIVE",
+    LIBRARY = "LIBRARY"
+}
+export declare enum HEADER_TYPES {
+    NONE = "NONE",
+    TEXT = "TEXT",
+    IMAGE = "IMAGE",
+    VIDEO = "VIDEO",
+    DOCUMENT = "DOCUMENT"
+}
+export declare enum ACTIONS_TYPES {
+    NONE = "NONE",
+    CTA_BTN = "CTA_BTN",
+    QUICK_REPLY = "QUICK_REPLY"
+}
+export interface QUICK_REPLY_BUTTON {
+    text: string;
+    flowId: string;
+    flowName: string;
+}
+export declare const CUSTOM_URL_NAME: {
+    value: string;
+    label: string;
+    placeHolder: string;
+};
+export declare const STATIC_URL_CTA_OPTION: {
+    label: string;
+    value: string;
+    placeHolder: string;
+};
+export type GlobalPlaceholderType = {
+    MARKETING: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+    TRANSACTIONAL: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+};
+export type baseAPITemplateVariableType = {
+    title: string;
+    default_value: string;
+    placeHolder: string;
+    type?: 'string' | 'url';
+};
+export type globalNormalizedPlaceholdersType = {
+    label: string;
+    options: SingleOption[];
+};
+export interface ButtonPlaceHolderOptions {
+    value: string;
+    label: string;
+    placeHolder: string;
+}

package/dist/esm/components/template-preview/models/TemplateMeta.js

@@ -0,0 +1 @@
+var E,D,N,I;!function(E){E.SEND_GRID="sendgrid",E.BEE="bee"}(E||(E={})),function(E){E.APPROVED="APPROVED",E.DISABLED="DISABLED",E.FLAGGED="FLAGGED",E.PENDING="PENDING",E.DRAFT="DRAFT",E.REJECTED="REJECTED",E.PENDING_DELETION="PENDING_DELETION",E.IN_REVIEW="IN REVIEW",E.PAUSED="PAUSED",E.ACTIVE="ACTIVE",E.LIBRARY="LIBRARY"}(D||(D={})),function(E){E.NONE="NONE",E.TEXT="TEXT",E.IMAGE="IMAGE",E.VIDEO="VIDEO",E.DOCUMENT="DOCUMENT"}(N||(N={})),function(E){E.NONE="NONE",E.CTA_BTN="CTA_BTN",E.QUICK_REPLY="QUICK_REPLY"}(I||(I={}));const A={value:"custom_link",label:"Custom URL",placeHolder:"custom placeholder"},T={label:"Custom URL (No tracking)",value:"static_link",placeHolder:"{{staticUrl}}"};export{I as ACTIONS_TYPES,A as CUSTOM_URL_NAME,N as HEADER_TYPES,T as STATIC_URL_CTA_OPTION,E as TEMPLATE_EDITOR,D as TEMPLATE_STATUS};