@bikdotai/bik-component-library 0.0.650 → 0.0.651

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

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

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

@@ -0,0 +1,2 @@
+import { RCSPreviewPropsV2 } from '../models/RCSTemplate';
+export declare const RCSChatPreview: (props: RCSPreviewPropsV2) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,128 @@
+import e from"styled-components";import{COLORS as t}from"../../../constants/Theme.js";e.div`
+	background-color: ${e=>e.isCarousal?"#E0E0E0":"white"};
+	border-radius: 4px;
+	position: relative;
+	height: ${e=>e.isCarousal?"100%":"auto"};
+`;const r=e.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 12px;
+	color: ${t.content.primary};
+	word-wrap: break-word;
+`,o=e(r)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,i=e(r)`
+	font-weight: 600;
+`,n=e.div`
+	background: ${t.surface.standard};
+	border-radius: 12px;
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: ${e=>e.isHorizontalOrientation?"row":"column"};
+
+	${e=>e.needBorder?e.showDashedBorder?`border: 2px dashed ${t.content.brand};`:e.hasError?`border: 2px solid ${t.content.negative};`:e.showBorder?`border: 2px solid ${t.stroke.brand};`:`border: 2px solid ${t.stroke.primary};`:"border: none;"}
+
+	:hover {
+		${e=>{if(e.isPreview||!e.needBorder)return"";return`\n\t\t\t\tborder: 2px ${e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"} ${t.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`}}
+	}
+
+	.text--template {
+		border: 2px solid ${t.stroke.primary};
+		border-radius: 12px;
+		flex: 1;
+	}
+`,d=e.div`
+	padding: 12px 0px;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+`,a=e.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: ${e=>e.isHorizontal?"":"4px"};
+	width: ${e=>e.isHorizontal?"50%":"auto"};
+`,p=e.div`
+	border-radius: 12px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	padding: 4px;
+	background-color: #ede7e8;
+	margin: 4px;
+	max-width: 200px;
+`,s=e.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	margin-left: 4px;
+	max-width: 180px;
+`,l=e.p`
+	white-space: nowrap;
+	color: #4c5567;
+	max-width: 100px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0px;
+	margin: 0px;
+	font-size: 12px;
+	font-weight: 500;
+	line-width: 20px;
+`,x=e.div`
+	border: 1px solid ${t.stroke.primary};
+	position: relative;
+	height: 500px;
+	overflow-y: auto;
+	border-radius: ${e=>{var t;return null!==(t=e.borderRadius)&&void 0!==t?t:"8px"}};
+	box-shadow: 0px 2px 8px 0px #0000001f;
+	background-color: white;
+`,c=e.div`
+	height: 50px;
+	background-color: ${t.background.inactive};
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,f=e.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,h=e.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,g=e.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,m=e.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.content.secondary};
+	margin-bottom: 0px;
+`;export{c as HeaderContainer,o as HeaderTextContainer,h as IconContainer,f as LeftContainer,s as PdfComineText,l as PdfText,x as RCSCarousalContainer,d as RCSChatBtnContainer,a as RCSMediaContainer,p as RCSPdfContainer,n as RCSPreviewContainer,r as RcsHtmlContainer,m as SubTitle,g as TitleContainer,i as TitleTextContainer};

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { CSSProperties } from 'styled-components';
+import { CHANNEL_TYPE } from './models/Channels';
 import { WhatsAppTemplate } from './models/WhatsAppTemplate';
 declare const WhatsappTemplatePreview: React.FC<{
     template?: WhatsAppTemplate;
@@ -13,5 +14,6 @@ declare const WhatsappTemplatePreview: React.FC<{
     carouselCardIndex?: number;
     isWhatsappCarousel?: boolean;
     isPreview?: boolean;
+    channel?: CHANNEL_TYPE;
 }>;
 export default WhatsappTemplatePreview;

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

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

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

@@ -1,3 +1,4 @@
+import { RCSTemplateConfig, RCSTemplateType } from '../models/RCSTemplate';
 import { CreateTemplateType, WhatsAppTemplate } from '../models/WhatsAppTemplate';
 export declare class TemplateCreatorHelper {
     private parseDataFromHeaderComponent;
@@ -10,6 +11,7 @@ export declare class TemplateCreatorHelper {
         errors: CreateTemplateType['error'];
     };
     private parseBodyComponent;
+    private parseTitleComponent;
     private parseFooterComponent;
     private parseButtonComponent;
     /**
@@ -25,4 +27,5 @@ export declare class TemplateCreatorHelper {
         showSampleValues?: boolean;
         isV2?: boolean;
     }): Promise<CreateTemplateType>;
+    parseTemplateConfiguration(template: RCSTemplateType): RCSTemplateConfig;
 }

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

@@ -1 +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};
+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 l,editableVarPattern as o}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 x,CREATE_TEMPLATE_DOM_IDS as B,QUICK_REPLY_NAME_ERROR as C}from"../constants/TemplateConstants.js";import{HEADER_TYPES as g,ACTIONS_TYPES as k}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var i,n,l,o,a,d,r,v,s,p;const u={headerType:g.NONE,headerVariables:[]},m=null===(i=null==e?void 0: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===(l=null===(n=m.example)||void 0===n?void 0:n.header_handle)||void 0===l?void 0:l[0];const i=null===(a=null===(o=m.example)||void 0===o?void 0:o.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),l={idx:0,variableVal:t?i:h,editable:n,editableDefaultValues:n?void 0:i,variableName:e};u.headerVariables=[l],(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,l,o,E,L,_,O,V,w,R,D,A,I,U,j,$,q,F,P,M,Y,S;const K=/\p{Extended_Pictographic}/u;let Q="valid";const H={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},G=new N;let J=!1;const W=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,Q="invalid"):n.test(null===(l=e.meta.name)||void 0===l?void 0:l.trim())&&(H.meta.name=v,Q="invalid"):(H.meta.name=a,Q="invalid"),H.meta.name&&!J&&(W(B.name),J=!0),e.headerType===g.TEXT){const t=null!==(E=null===(o=e.headerText)||void 0===o?void 0:o.trim())&&void 0!==E?E:"";if(t)if(t.length>s)H.header=p,Q="invalid";else{const e=G.getTemplateVariablesFromState(t);e&&e.length>1&&(H.header=u,Q="invalid")}else H.header=a,Q="invalid"}else e.headerType===g.DOCUMENT||e.headerType===g.IMAGE||(e.headerType,g.VIDEO);if(e.headerType!==g.DOCUMENT&&e.headerType!==g.IMAGE&&e.headerType!==g.VIDEO||e.headerAssetLink||(H.header=m,Q="invalid"),H.header&&!J&&(W(B.header),J=!0),e.bodyText?e.bodyTextRaw&&(null===(L=e.bodyTextRaw)||void 0===L?void 0:L.trim().length)>c&&(H.body=h,Q="invalid"):(H.body=a,Q="invalid"),H.body&&!J&&(W(B.body),J=!0),e.footerText&&e.footerText.length>s&&(H.footer=p,Q="invalid"),(null==H?void 0:H.footer)&&!J&&(W(B.footer),J=!0),e.actionsType===k.CTA_BTN){if(null===(O=null===(_=e.ctaBtn)||void 0===_?void 0:_.phoneNumber)||void 0===O?void 0:O.isChecked){const t=null===(V=e.ctaBtn.phoneNumber.btnText)||void 0===V?void 0:V.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;H.ctaBtn&&!t?(H.ctaBtn.phoneNumber.btnText=a,Q="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.phoneNumber.btnText=T,Q="invalid"):H.ctaBtn&&t&&K.test(t)&&(H.ctaBtn.phoneNumber.btnText=y,Q="invalid"),H.ctaBtn&&!i?(H.ctaBtn.phoneNumber.link=a,Q="invalid"):H.ctaBtn&&i&&i.length<10&&(H.ctaBtn.phoneNumber.link=f,Q="invalid")}if(null===(R=null===(w=e.ctaBtn)||void 0===w?void 0:w.websiteLinkBtn)||void 0===R?void 0:R.isChecked){const t=null===(D=e.ctaBtn.websiteLinkBtn.btnText)||void 0===D?void 0:D.trim(),i=null===(A=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===A?void 0:A.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();H.ctaBtn&&!t?(H.ctaBtn.websiteLink.btnText=a,Q="invalid"):H.ctaBtn&&t&&t.length>b?(H.ctaBtn.websiteLink.btnText=T,Q="invalid"):H.ctaBtn&&t&&K.test(t)&&(H.ctaBtn.websiteLink.btnText=y,Q="invalid"),!H.ctaBtn||i||n||(H.ctaBtn.websiteLink.link=a,Q="invalid")}}else if(e.actionsType===k.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var l;const o=null===(l=i.text)||void 0===l?void 0:l.trim();if(o)if(o.length>x)t[n]=T,Q="invalid";else if(K.test(o))t[n]=y,Q="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===o))&&(t[n]=C,Q="invalid")}else t[n]=a,Q="invalid"})),H.quickReply=t}if(e.actionsType===k.CTA_BTN||e.actionsType===k.QUICK_REPLY){const e=null===(U=H.quickReply)||void 0===U?void 0:U.reduce(((e,t)=>e||!!t),!1);((null===($=null===(j=null==H?void 0:H.ctaBtn)||void 0===j?void 0:j.websiteLink)||void 0===$?void 0:$.link)||(null===(F=null===(q=H.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(M=null===(P=H.ctaBtn)||void 0===P?void 0:P.phoneNumber)||void 0===M?void 0:M.link)||(null===(S=null===(Y=H.ctaBtn)||void 0===Y?void 0:Y.phoneNumber)||void 0===S?void 0:S.btnText)||e)&&!J&&(W(B.actionButtons),J=!0)}return{status:Q,errors:H}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var o,a,d,r,v,s;const p=[];let u="";const m=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return m&&(null===(r=null===(d=null===(a=m.example)||void 0===a?void 0:a.body_text)||void 0===d?void 0:d[0])||void 0===r||r.forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),s=null==d?void 0:d.match(l);(null==s?void 0:s[2])&&(d=null==s?void 0:s[2]),p.push({idx:i,variableVal:n?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(v=m.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).length)?null===(s=m.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==p?void 0:p[n]){const l=p[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:p,bodyText:u}}parseTitleComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var o,a,d,r,v,s;const p=[];let u="";const m=null===(o=e.components)||void 0===o?void 0:o.find((e=>"TITLE"===e.type));return m&&(null===(r=null===(d=null===(a=m.example)||void 0===a?void 0:a.title_text)||void 0===d?void 0:d[0])||void 0===r||r.forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),s=null==d?void 0:d.match(l);(null==s?void 0:s[2])&&(d=null==s?void 0:s[2]),p.push({idx:i,variableVal:n?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(v=m.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).length)?null===(s=m.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==p?void 0:p[n]){const l=p[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{titleText:u,titleVariables: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,l,a,d,r;const v={actionsType:k.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)?k.QUICK_REPLY:k.CTA_BTN;if(v.actionsType=t,t===k.QUICK_REPLY){const e=null!==(a=null===(l=null==s?void 0:s.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];v.quickReply=e}else t===k.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var i,n,l,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=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!==l?l:void 0;let r=!1;d&&o.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 l,o,a;if("limited_time_offer"===e.type){n.text=null!==(o=null===(l=e.limited_time_offer)||void 0===l?void 0:l.text)&&void 0!==o?o:"";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:l=!1,showSampleValues:o}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:p,bodyVariable:u}=yield this.parseBodyComponent(e,l,o),{titleText:m,titleVariables:c}=yield this.parseTitleComponent(e,l,o),{actionsType:h,quickReply:b,ctaBtn:T,allButtons:y}=yield this.parseButtonComponent(e),f=this.parseLimitedTimeOfferComponent(e,y),x={quickReply:b,ctaBtn:T,allButtons:y,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:h,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:f,titleText:m,titleVariables:c},{errors:B}=this.validateState(x);return x.error=B,x}))}parseTemplateConfiguration(e){let t;const i=(null==e?void 0:e.content)||{};if("string"==typeof i)try{t=JSON.parse(i)}catch(e){console.error("Error parsing rcsTemplate component JSON:",e),t={orientation:"VERTICAL"}}else t=i;return Object.assign(Object.assign({},t),{templateType:null==e?void 0:e.templateType})}}export{E as TemplateCreatorHelper};

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

@@ -0,0 +1,8 @@
+import { CHANNEL_TYPE } from '../models/Channels';
+import { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';
+import { WhatsAppCarouselTemplate } from '../models/WhatsappCarouselTemplate';
+export declare const isItCarousal: (channel: CHANNEL_TYPE, selectedTemplate: WhatsAppCarouselTemplate) => boolean;
+export declare const determineCardIndex: (channel: CHANNEL_TYPE) => 0 | 1;
+export declare const isCarouselComponent: (componentType?: string) => boolean;
+export declare const isRCSChannel: (channel: CHANNEL_TYPE) => boolean;
+export declare const isRichAndCarouselCards: (templateType?: RCS_TEMPLATE_TYPE) => boolean;

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

@@ -0,0 +1 @@
+import{CHANNEL_TYPE as o}from"../models/Channels.js";import{RCS_TEMPLATE_TYPE as l}from"../models/RCSTemplate.js";const e=(o,l)=>{var e,s;const t=n(o);return r(null===(s=null===(e=null==l?void 0:l.components)||void 0===e?void 0:e[t])||void 0===s?void 0:s.type)},n=l=>l===o.RCS?0:1,r=o=>"carousel"===(null==o?void 0:o.toLowerCase()),s=l=>l==o.RCS,t=o=>o===l.RICH_CARD||o===l.CAROUSEL;export{n as determineCardIndex,r as isCarouselComponent,e as isItCarousal,s as isRCSChannel,t as isRichAndCarouselCards};

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

@@ -5,5 +5,6 @@ export declare enum CHANNEL_TYPE {
     EMAIL = "email",
     SMS = "message",
     WEBPUSH = "webpush",
-    MESSAGE = "message"
+    MESSAGE = "message",
+    RCS = "rcs"
 }

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

@@ -1 +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};
+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.RCS="rcs"}(a||(a={}));export{a as CHANNEL_TYPE};

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { CHANNEL_TYPE } from './Channels';
 import { CUSTOM_VARIABLE, TEMPLATE_EDITOR, TEMPLATE_STATUS } from './TemplateMeta';
 export type EmailTemplateType = {
     category: string;
-    channel: 'email';
+    channel: CHANNEL_TYPE;
     channelTemplateId: string;
     createdAt: {
         _seconds: number;

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

@@ -0,0 +1,139 @@
+import { Timestamp } from 'firebase-admin/firestore';
+import { CHANNEL_TYPE } from './Channels';
+import { TEMPLATE_STATUS } from './TemplateMeta';
+import { WhatsappLikePreviewTypes, WhatsAppTemplate } from './WhatsAppTemplate';
+export interface RCSPreviewProps extends WhatsappLikePreviewTypes {
+    isCarousal?: boolean;
+}
+export interface RCSTemplateType extends WhatsAppTemplate {
+    id: string;
+    status: TEMPLATE_STATUS;
+    name: string;
+    content?: string;
+    mapping: {
+        [key: string]: string[] | object[];
+    };
+    mediaTemplateActionButtonTypes: {
+        [key: string]: string[] | object[];
+    };
+    customParams?: Record<string, string>;
+    destinationUrl?: Record<string, string>;
+    createdAt: number;
+    updatedAt: number;
+    templateType?: RCS_TEMPLATE_TYPE;
+    rcsBroadcastConfig?: {
+        mapping: {
+            [key: string]: string | object;
+        };
+    };
+    htmlContentUrl?: string;
+    templateId?: string;
+    channel: CHANNEL_TYPE;
+    headers?: string[];
+}
+export interface RCSPreviewPropsV2 extends WhatsappLikePreviewTypes {
+    templateConfiguration: RCSTemplateConfig;
+}
+export interface RcsTemplate {
+    content?: string;
+    components: string;
+    mapping: {
+        [key: string]: string | object;
+    };
+    mediaTemplateActionButtonTypes: {
+        [key: string]: string | object;
+    };
+    customParams?: Record<string, string>;
+    destinationUrl?: Record<string, string>;
+    status: TEMPLATE_STATUS;
+    externalStatus: RCS_TEMPLATE_STATUS;
+    templateType: string;
+    createdAt: Timestamp;
+    updatedAt: Timestamp;
+}
+export interface CreateRcsTemplatePayload {
+    name: string;
+    label: string;
+    storeId: string;
+    category: string;
+    channelTemplateId: string;
+    channel: string;
+    content: string;
+    components: string;
+    mapping: {
+        [key: string]: string | object;
+    };
+    mediaTemplateActionButtonTypes: {
+        [key: string]: string | object;
+    };
+    customParams?: Record<string, string>;
+    destinationUrl?: Record<string, string>;
+    botId: string;
+    externalStatus: RCS_TEMPLATE_STATUS;
+    templateType: string;
+    status: TEMPLATE_STATUS;
+    createdAt: Timestamp;
+    createdBy: string;
+    templateCategory?: string;
+    updatedAt: Timestamp;
+    templateId?: string;
+}
+export declare enum RCS_TEMPLATE_STATUS {
+    ACTIVE = "active",
+    APPROVED = "approved",
+    PENDING = "pending",
+    REJECTED = "rejected",
+    FAILED = "Failed"
+}
+export declare enum RCS_TEMPLATE_TYPE {
+    TEXT_MESSAGE = "text_message",
+    TEXT_MESSAGE_WITH_PDF = "text_message_with_pdf",
+    CAROUSEL = "carousel",
+    RICH_CARD = "rich_card",
+    UNKNOWN = "unknown"
+}
+export declare enum RCS_BUTTON_TYPE {
+    REPLY = "reply",
+    URL_ACTION = "url_action",
+    DIALER_ACTION = "dialer_action",
+    VIEW_LOCATION_LATLONG = "view_location_latlong",
+    VIEW_LOCATION_QUERY = "view_location_query",
+    SHARE_LOCATION = "share_location",
+    CALENDAR_EVENT = "calendar_event"
+}
+export declare enum MEDIA_FORMAT {
+    IMAGE = "image",
+    VIDEO = "video",
+    DOCUMENT = "document",
+    OTHER = "other"
+}
+export declare enum IMAGE_EXTENSIONS {
+    JPG = "jpg",
+    JPEG = "jpeg",
+    PNG = "png",
+    GIF = "gif",
+    BMP = "bmp",
+    WEBP = "webp"
+}
+export declare enum VIDEO_EXTENSIONS {
+    MP4 = "mp4",
+    MOV = "mov",
+    AVI = "avi",
+    MKV = "mkv",
+    WEBM = "webm"
+}
+export declare enum DOCUMENT_EXTENSIONS {
+    PDF = "pdf",
+    DOC = "doc",
+    DOCX = "docx",
+    XLS = "xls",
+    XLSX = "xlsx",
+    PPT = "ppt",
+    PPTX = "pptx",
+    TXT = "txt"
+}
+export interface RCSTemplateConfig {
+    templateType: RCS_TEMPLATE_TYPE | string;
+    height: string;
+    orientation: string;
+}

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

@@ -0,0 +1 @@
+var e,E,n,t,o,_,i;!function(e){e.ACTIVE="active",e.APPROVED="approved",e.PENDING="pending",e.REJECTED="rejected",e.FAILED="Failed"}(e||(e={})),function(e){e.TEXT_MESSAGE="text_message",e.TEXT_MESSAGE_WITH_PDF="text_message_with_pdf",e.CAROUSEL="carousel",e.RICH_CARD="rich_card",e.UNKNOWN="unknown"}(E||(E={})),function(e){e.REPLY="reply",e.URL_ACTION="url_action",e.DIALER_ACTION="dialer_action",e.VIEW_LOCATION_LATLONG="view_location_latlong",e.VIEW_LOCATION_QUERY="view_location_query",e.SHARE_LOCATION="share_location",e.CALENDAR_EVENT="calendar_event"}(n||(n={})),function(e){e.IMAGE="image",e.VIDEO="video",e.DOCUMENT="document",e.OTHER="other"}(t||(t={})),function(e){e.JPG="jpg",e.JPEG="jpeg",e.PNG="png",e.GIF="gif",e.BMP="bmp",e.WEBP="webp"}(o||(o={})),function(e){e.MP4="mp4",e.MOV="mov",e.AVI="avi",e.MKV="mkv",e.WEBM="webm"}(_||(_={})),function(e){e.PDF="pdf",e.DOC="doc",e.DOCX="docx",e.XLS="xls",e.XLSX="xlsx",e.PPT="ppt",e.PPTX="pptx",e.TXT="txt"}(i||(i={}));export{i as DOCUMENT_EXTENSIONS,o as IMAGE_EXTENSIONS,t as MEDIA_FORMAT,n as RCS_BUTTON_TYPE,e as RCS_TEMPLATE_STATUS,E as RCS_TEMPLATE_TYPE,_ as VIDEO_EXTENSIONS};

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { CHANNEL_TYPE } from './Channels';
 import { CUSTOM_VARIABLE } from './TemplateMeta';
 export type SMSTemplateType = {
     category: 'other';
-    channel: 'message';
+    channel: CHANNEL_TYPE.SMS;
     channelTemplateId: string;
     content: string;
     createdAt: {

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

@@ -11,7 +11,7 @@ export type WhatsAppTemplate = {
     templateCategory: string;
     type?: 'email' | 'whatsapp';
     components: {
-        type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
+        type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer' | 'TITLE';
         format?: HEADER_TYPES;
         text?: string;
         limited_time_offer?: {
@@ -33,12 +33,14 @@ export type WhatsAppTemplate = {
             body_text?: Array<string[]>;
             header_text?: Array<string>;
             limited_time_offer?: string;
+            title_text?: Array<string[]>;
         };
     }[];
     mapping: {
         header?: string[];
         body?: string[];
         buttons?: string[];
+        title?: string[];
     };
     htmlContentUrl?: string;
     language: 'en_US';
@@ -62,7 +64,9 @@ export type CreateTemplateType = {
     headerText?: string;
     headerVariables: templateVariable[];
     bodyVariables: templateVariable[];
+    titleVariables?: templateVariable[];
     bodyText?: string;
+    titleText?: string;
     bodyTextRaw?: string;
     footerText?: string;
     actionsType: ACTIONS_TYPES;
@@ -158,6 +162,7 @@ export type TemplateVariableMapping = {
     buttons: string[];
     header: string[];
     footer: string[];
+    title?: string[];
 };
 export type WhatsappLikePreviewTypes = {
     bodyText?: string;
@@ -191,6 +196,8 @@ export type WhatsappLikePreviewTypes = {
     limitedTimeOfferComponent?: CreateTemplateType['limitedTimeOfferComponent'];
     isWhatsappCarousel?: boolean;
     isPreview?: boolean;
+    titleText?: string;
+    titleVariableList?: variableType[];
 };
 export type WhatsappPreviewButtonType = {
     type: WhatsappTemplateButtonTypes;
@@ -241,6 +248,7 @@ export interface WhatsAppTemplateVariables {
     body: CUSTOM_VARIABLE[];
     header: CUSTOM_VARIABLE[];
     buttons: TEMPLATE_BUTTON[];
+    title?: CUSTOM_VARIABLE[];
 }
 export type CTABtnValType = {
     defaultValue: string;