@bikdotai/bik-component-library 0.0.687-beta.9 → 0.0.687

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

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

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

@@ -0,0 +1,21 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    showDashedBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+}, never>;
+export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const FooterText: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MediaNameAbsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DownloadMediaIconHolder: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import d from"./ChatHeader.js";import p from"./ChatUI.js";const n=t.div`
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import n from"./ChatHeader.js";import d from"./ChatUI.js";const p=t.div`
 	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
 	border: ${e=>e.showHeader?0:1}px solid
 		${a.stroke.primary};
@@ -9,4 +9,4 @@ import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"st
 	position: relative;
 `,m=t(i)`
 	color: ${a.content.primary};
-`,c=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(n,{style:t.containerStyle,showHeader:t.showHeader,children:[t.showHeader&&e(d,{}),o("div",{style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"},children:[!t.hidePreviewText&&e("div",{style:{marginBottom:16},children:e(m,{children:"Preview"})}),e(p,{showHeader:t.showHeader,...t})]})]})})};export{c as WhatsappLikePreview};
+`,c=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(p,Object.assign({style:t.containerStyle,showHeader:t.showHeader},{children:[t.showHeader&&e(n,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(d,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{c as WhatsappLikePreview};

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

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

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

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

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

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import { CSSProperties } from 'styled-components';
+import { CHANNEL_TYPE } from './models/Channels';
+import { WhatsAppTemplate } from './models/WhatsAppTemplate';
+declare const WhatsappTemplatePreview: React.FC<{
+    template?: WhatsAppTemplate;
+    extras?: boolean;
+    containerStyle?: CSSProperties;
+    usePlaceHolderName?: boolean;
+    showHeader?: boolean;
+    zeroStateComponent?: ReactElement;
+    size?: 'small' | 'large';
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    channel?: CHANNEL_TYPE;
+}>;
+export default WhatsappTemplatePreview;

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

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

@@ -1,13 +1,11 @@
-declare const lockedVarPattern: RegExp;
-declare const editableVarPattern: RegExp;
-declare const placeHolderNamePattern: RegExp;
-declare const globalVariablePattern: RegExp;
-declare const globalHalfVariablePattern: RegExp;
-declare const specialCharPattern: RegExp;
-declare const variablePattern: RegExp;
-declare const variablePatternGlobal: RegExp;
-declare const templateVariablePattern: RegExp;
-declare const previewLinkMDFormatPattern: RegExp;
-declare const editableBracketPattern: RegExp;
-
-export { editableBracketPattern, editableVarPattern, globalHalfVariablePattern, globalVariablePattern, lockedVarPattern, placeHolderNamePattern, previewLinkMDFormatPattern, specialCharPattern, templateVariablePattern, variablePattern, variablePatternGlobal };
+export declare const lockedVarPattern: RegExp;
+export declare const editableVarPattern: RegExp;
+export declare const placeHolderNamePattern: RegExp;
+export declare const globalVariablePattern: RegExp;
+export declare const globalHalfVariablePattern: RegExp;
+export declare const specialCharPattern: RegExp;
+export declare const variablePattern: RegExp;
+export declare const variablePatternGlobal: RegExp;
+export declare const templateVariablePattern: RegExp;
+export declare const previewLinkMDFormatPattern: RegExp;
+export declare const editableBracketPattern: RegExp;

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

@@ -1,5 +1,2 @@
-import { CUSTOM_VARIABLE } from '../models/TemplateMeta.js';
-
-declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string, uniqueId?: string) => string;
-
-export { renderVariableUIForPreview };
+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

@@ -1 +1 @@
-import{COLORS as n}from"../../../constants/Theme.js";import{variablePatternGlobal as t,variablePattern as a}from"../constants/regexPatterns.js";const e=(e,o,r=n.content.brand,s)=>{const p=o?.length?o?.map((n=>n.updatedValue)):e.match(t);return t.lastIndex=0,e.split(a).map(((n,t)=>p?.[t]?`${n}<span></span><span id="${s||""}connectors_variable_${t+1}" style="color: ${r}; text-decoration: underline; word-break: break-word;">${p?.[t]??""}</span><span> </span>`:n)).join("")};export{e as renderVariableUIForPreview};
+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,32 @@
+import { RCSTemplateConfig, RCSTemplateType } from '../models/RCSTemplate';
+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 parseTitleComponent;
+    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;
+        pod?: string;
+    }): Promise<CreateTemplateType>;
+    parseTemplateConfiguration(template: RCSTemplateType): RCSTemplateConfig;
+}

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

@@ -1 +1 @@
-import{format as e}from"date-fns";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as a,placeHolderNamePattern as n,editableVarPattern as i}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as o,NAME_LEN_LIMIT as r,NAME_LEN_ERROR as l,NO_SPECIAL_CHAR as s,CREATE_TEMPLATE_DOM_IDS as p,HEADER_TEXT_LEN_LIMIT as d,HEADER_LEN_ERROR as m,ONE_VAR_ALLOWED as c,HEADER_ASSET_LINK_ERROR as h,BODY_TEXT_LEN_LIMIT as b,BODY_LEN_ERROR as T,QUICK_REPLY_BTN_TEXT_LIMIT as u,QUICK_REPLY_LEN_ERROR as y,BUTTON_EMOJI_ERROR as f,VALID_PHONE_NUMBER as x,QUICK_REPLY_NAME_LEN_LIMIT as B,QUICK_REPLY_NAME_ERROR as v}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as k}from"../models/TemplateMeta.js";import{POD as N}from"../models/WhatsAppTemplate.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t,a){const n={headerType:C.NONE,headerVariables:[]},i=e?.components?.find((e=>"HEADER"===e.type));if(i){n.headerType=i.format,n.headerText=i.text,n.headerAssetLink=i.example?.header_handle?.[0];const o=i.example?.header_text?.[0],r=e.mapping?.header?.[0],l=r;if(r){const e=r?.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),s=/\(\(/.test(r),p=a===N.CHATBOT&&l&&l?.startsWith("((")&&l?.endsWith("))"),d={idx:0,variableVal:t||p?o:l,editable:s,editableDefaultValues:s?void 0:o,variableName:e};n.headerVariables=[d],i.example?.header_text?.length&&(n.headerText=n.headerText?.replace("{{1}}",`{{${e}}}`))}}return n}validateState(e){const t=/\p{Extended_Pictographic}/u;let n="valid";const i={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},N=new g;let E=!1;const L=e=>{document.getElementById(e)?.scrollIntoView({behavior:"smooth",block:"nearest"})};if(e.meta?.name?e.meta.name?.trim().length>r?(i.meta.name=l,n="invalid"):a.test(e.meta.name?.trim())&&(i.meta.name=s,n="invalid"):(i.meta.name=o,n="invalid"),i.meta.name&&!E&&(L(p.name),E=!0),e.headerType===C.TEXT){const t=e.headerText?.trim()??"";if(t)if(t.length>d)i.header=m,n="invalid";else{const e=N.getTemplateVariablesFromState(t);e&&e.length>1&&(i.header=c,n="invalid")}else i.header=o,n="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||(i.header=h,n="invalid"),i.header&&!E&&(L(p.header),E=!0),e.bodyText?e.bodyTextRaw&&e.bodyTextRaw?.trim().length>b&&(i.body=T,n="invalid"):(i.body=o,n="invalid"),i.body&&!E&&(L(p.body),E=!0),e.footerText&&e.footerText.length>d&&(i.footer=m,n="invalid"),i?.footer&&!E&&(L(p.footer),E=!0),e.actionsType===k.CTA_BTN){if(e.ctaBtn?.phoneNumber?.isChecked){const a=e.ctaBtn.phoneNumber.btnText?.trim(),r=e.ctaBtn.phoneNumber.phoneNumber;i.ctaBtn&&!a?(i.ctaBtn.phoneNumber.btnText=o,n="invalid"):i.ctaBtn&&a&&a.length>u?(i.ctaBtn.phoneNumber.btnText=y,n="invalid"):i.ctaBtn&&a&&t.test(a)&&(i.ctaBtn.phoneNumber.btnText=f,n="invalid"),i.ctaBtn&&!r?(i.ctaBtn.phoneNumber.link=o,n="invalid"):i.ctaBtn&&r&&r.length<10&&(i.ctaBtn.phoneNumber.link=x,n="invalid")}if(e.ctaBtn?.websiteLinkBtn?.isChecked){const a=e.ctaBtn.websiteLinkBtn.btnText?.trim(),r=e.ctaBtn.websiteLinkBtn.linkOpens?.trim(),l=e.ctaBtn.websiteLinkBtn.placeholder?.trim();i.ctaBtn&&!a?(i.ctaBtn.websiteLink.btnText=o,n="invalid"):i.ctaBtn&&a&&a.length>u?(i.ctaBtn.websiteLink.btnText=y,n="invalid"):i.ctaBtn&&a&&t.test(a)&&(i.ctaBtn.websiteLink.btnText=f,n="invalid"),!i.ctaBtn||r||l||(i.ctaBtn.websiteLink.link=o,n="invalid")}}else if(e.actionsType===k.QUICK_REPLY){const a=["","",""];e.quickReply.forEach(((i,r)=>{const l=i.text?.trim();if(l)if(l.length>B)a[r]=y,n="invalid";else if(t.test(l))a[r]=f,n="invalid";else{const t=[...e.quickReply];t.splice(r,1);t.find((e=>e.text===l))&&(a[r]=v,n="invalid")}else a[r]=o,n="invalid"})),i.quickReply=a}if(e.actionsType===k.CTA_BTN||e.actionsType===k.QUICK_REPLY){const e=i.quickReply?.reduce(((e,t)=>e||!!t),!1);(i?.ctaBtn?.websiteLink?.link||i.ctaBtn?.websiteLink?.btnText||i.ctaBtn?.phoneNumber?.link||i.ctaBtn?.phoneNumber?.btnText||e)&&!E&&(L(p.actionButtons),E=!0)}return{status:n,errors:i}}parseBodyComponent(e,a=!1,i,o){const r=[];let l="";const s=e.components?.find((e=>"BODY"===e.type));return s&&(s.example?.body_text?.[0]?.forEach(((t,a)=>{let l=e.mapping?.body?.[a];const s=l,p=l&&/\(\(/.test(l),d=l?.match(n);d?.[2]&&(l=d?.[2]);const m=o===N.CHATBOT&&s&&s?.startsWith("((")&&s?.endsWith("))");r.push({idx:a,variableVal:i||m?t:s,editable:!!p,editableDefaultValues:p?void 0:t,variableName:l??""})})),l=e.htmlContentUrl?e.htmlContentUrl:s.text?.split(/\{\{[0-9]+\}\}/).length?s.text?.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(r?.[n]){const i=r[n].variableName;return a?`${e}{{${i}}}`:`${e} <span> </span><span  style="color: ${t.content.brand}; text-decoration: underline;">{{${i}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:r,bodyText:l}}parseTitleComponent(e,a=!1,i){const o=[];let r="";const l=e.components?.find((e=>"TITLE"===e.type));return l&&(l.example?.title_text?.[0]?.forEach(((t,a)=>{let r=e.mapping?.body?.[a];const l=r,s=r&&/\(\(/.test(r),p=r?.match(n);p?.[2]&&(r=p?.[2]),o.push({idx:a,variableVal:i?t:l,editable:!!s,editableDefaultValues:s?void 0:t,variableName:r??""})})),r=e.htmlContentUrl?e.htmlContentUrl:l.text?.split(/\{\{[0-9]+\}\}/).length?l.text?.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(o?.[n]){const i=o[n].variableName;return a?`${e}{{${i}}}`:`${e} <span> </span><span  style="color: ${t.content.brand}; text-decoration: underline;">{{${i}}}</span><span> </span>`}return e})).join(""):""),{titleText:r,titleVariables:o}}parseFooterComponent(e){const t=e.components?.find((e=>"FOOTER"===e.type));return t?.text}parseButtonComponent(e){const t={actionsType:k.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},a=e.components?.find((e=>"BUTTONS"===e.type));if(a&&a?.buttons?.length){const n="QUICK_REPLY"===a?.buttons?.[0].type?k.QUICK_REPLY:k.CTA_BTN;if(t.actionsType=n,n===k.QUICK_REPLY){const e=a?.buttons?.map((e=>e))??[];t.quickReply=e}else n===k.CTA_BTN&&a?.buttons?.forEach((a=>{if(a.phone_number&&(t.ctaBtn.phoneNumber={isChecked:!0,btnText:a.text,phoneNumber:a.phone_number}),a.url){const n=e?.mapping?.buttons?.[0]??void 0;let o=!1;n&&i.test(n)&&(o=!0),t.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:a.text,linkOpens:o?a.example?.[0]:a.url,placeholder:o?void 0:n}}}));t.allButtons=a.buttons?.map((e=>"COPY_CODE"===e.type?{...e,placeholder:Array.isArray(e.example)?e.example[0]:e?.example||""}:e))}return t}parseLimitedTimeOfferComponent(t,a){const n={text:"",dateTime:"",code:""};return t.components.forEach((t=>{if("limited_time_offer"===t.type){n.text=t.limited_time_offer?.text??"";const a=t.example?.limited_time_offer;a&&a.startsWith("{{")&&a.endsWith("}}")?n.dateTime=a:n.dateTime=e(a?new Date(a):new Date,"MMM dd")}a.forEach((e=>{"COPY_CODE"===e.type&&(n.code=e.placeholder??"")}))})),n}async parseUITemplateFromDBFormat(e){const{dbFormattedTemplate:t,isDuplicate:a,isV2:n=!1,showSampleValues:i,pod:o}=e,{headerType:r,headerAssetLink:l,headerAssetName:s,headerText:p,headerVariables:d}=await this.parseDataFromHeaderComponent(t,void 0,o),{bodyText:m,bodyVariable:c}=await this.parseBodyComponent(t,n,i,o),{titleText:h,titleVariables:b}=await this.parseTitleComponent(t,n,i),{actionsType:T,quickReply:u,ctaBtn:y,allButtons:f}=await this.parseButtonComponent(t),x=this.parseLimitedTimeOfferComponent(t,f),B={quickReply:u,ctaBtn:y,allButtons:f,meta:{name:a?`${t.label} Copy`:t.label,category:t.category?.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:T,footerText:this.parseFooterComponent(t),bodyVariables:c,bodyText:m,headerType:r,headerAssetLink:l,headerAssetName:s,headerText:p,headerVariables:d,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:x,titleText:h,titleVariables:b},{errors:v}=this.validateState(B);return B.error=v,B}parseTemplateConfiguration(e){let t;const a=e?.content||{};if("string"==typeof a)try{t=JSON.parse(a)}catch(e){console.error("Error parsing rcsTemplate component JSON:",e),t={orientation:"VERTICAL"}}else t=a;return{...t,templateType:e?.templateType}}}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 s,HEADER_TEXT_LEN_LIMIT as v,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{POD as N}from"../models/WhatsAppTemplate.js";import{TemplateHelperUtils as E}from"../utils/TemplateHelperUtils.js";class L{parseDataFromHeaderComponent(e,t,i){var n,l,o,a,d,r,s,v,p,u;const m={headerType:g.NONE,headerVariables:[]},c=null===(n=null==e?void 0:e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(c){m.headerType=c.format,m.headerText=c.text,m.headerAssetLink=null===(o=null===(l=c.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0];const n=null===(d=null===(a=c.example)||void 0===a?void 0:a.header_text)||void 0===d?void 0:d[0],h=null===(s=null===(r=e.mapping)||void 0===r?void 0:r.header)||void 0===s?void 0:s[0],b=h;if(h){const e=null==h?void 0:h.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),l=/\(\(/.test(h),o=i===N.CHATBOT&&b&&(null==b?void 0:b.startsWith("(("))&&(null==b?void 0:b.endsWith("))")),a={idx:0,variableVal:t||o?n:b,editable:l,editableDefaultValues:l?void 0:n,variableName:e};m.headerVariables=[a],(null===(p=null===(v=c.example)||void 0===v?void 0:v.header_text)||void 0===p?void 0:p.length)&&(m.headerText=null===(u=m.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return m}validateState(e){var t,i,l,o,N,L,O,_,V,A,w,R,D,I,U,j,$,q,F,P,M,Y,S;const W=/\p{Extended_Pictographic}/u;let H="valid";const K={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},Q=new E;let G=!1;const J=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?(K.meta.name=r,H="invalid"):n.test(null===(l=e.meta.name)||void 0===l?void 0:l.trim())&&(K.meta.name=s,H="invalid"):(K.meta.name=a,H="invalid"),K.meta.name&&!G&&(J(B.name),G=!0),e.headerType===g.TEXT){const t=null!==(N=null===(o=e.headerText)||void 0===o?void 0:o.trim())&&void 0!==N?N:"";if(t)if(t.length>v)K.header=p,H="invalid";else{const e=Q.getTemplateVariablesFromState(t);e&&e.length>1&&(K.header=u,H="invalid")}else K.header=a,H="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||(K.header=m,H="invalid"),K.header&&!G&&(J(B.header),G=!0),e.bodyText?e.bodyTextRaw&&(null===(L=e.bodyTextRaw)||void 0===L?void 0:L.trim().length)>c&&(K.body=h,H="invalid"):(K.body=a,H="invalid"),K.body&&!G&&(J(B.body),G=!0),e.footerText&&e.footerText.length>v&&(K.footer=p,H="invalid"),(null==K?void 0:K.footer)&&!G&&(J(B.footer),G=!0),e.actionsType===k.CTA_BTN){if(null===(_=null===(O=e.ctaBtn)||void 0===O?void 0:O.phoneNumber)||void 0===_?void 0:_.isChecked){const t=null===(V=e.ctaBtn.phoneNumber.btnText)||void 0===V?void 0:V.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;K.ctaBtn&&!t?(K.ctaBtn.phoneNumber.btnText=a,H="invalid"):K.ctaBtn&&t&&t.length>b?(K.ctaBtn.phoneNumber.btnText=T,H="invalid"):K.ctaBtn&&t&&W.test(t)&&(K.ctaBtn.phoneNumber.btnText=y,H="invalid"),K.ctaBtn&&!i?(K.ctaBtn.phoneNumber.link=a,H="invalid"):K.ctaBtn&&i&&i.length<10&&(K.ctaBtn.phoneNumber.link=f,H="invalid")}if(null===(w=null===(A=e.ctaBtn)||void 0===A?void 0:A.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(R=e.ctaBtn.websiteLinkBtn.btnText)||void 0===R?void 0:R.trim(),i=null===(D=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===D?void 0:D.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();K.ctaBtn&&!t?(K.ctaBtn.websiteLink.btnText=a,H="invalid"):K.ctaBtn&&t&&t.length>b?(K.ctaBtn.websiteLink.btnText=T,H="invalid"):K.ctaBtn&&t&&W.test(t)&&(K.ctaBtn.websiteLink.btnText=y,H="invalid"),!K.ctaBtn||i||n||(K.ctaBtn.websiteLink.link=a,H="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,H="invalid";else if(W.test(o))t[n]=y,H="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===o))&&(t[n]=C,H="invalid")}else t[n]=a,H="invalid"})),K.quickReply=t}if(e.actionsType===k.CTA_BTN||e.actionsType===k.QUICK_REPLY){const e=null===(U=K.quickReply)||void 0===U?void 0:U.reduce(((e,t)=>e||!!t),!1);((null===($=null===(j=null==K?void 0:K.ctaBtn)||void 0===j?void 0:j.websiteLink)||void 0===$?void 0:$.link)||(null===(F=null===(q=K.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(M=null===(P=K.ctaBtn)||void 0===P?void 0:P.phoneNumber)||void 0===M?void 0:M.link)||(null===(S=null===(Y=K.ctaBtn)||void 0===Y?void 0:Y.phoneNumber)||void 0===S?void 0:S.btnText)||e)&&!G&&(J(B.actionButtons),G=!0)}return{status:H,errors:K}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0,o=arguments.length>3?arguments[3]:void 0;var a,d,r,s,v,p;const u=[];let m="";const c=null===(a=e.components)||void 0===a?void 0:a.find((e=>"BODY"===e.type));return c&&(null===(s=null===(r=null===(d=c.example)||void 0===d?void 0:d.body_text)||void 0===r?void 0:r[0])||void 0===s||s.forEach(((t,i)=>{var a,d;let r=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.body)||void 0===d?void 0:d[i];const s=r,v=r&&/\(\(/.test(r),p=null==r?void 0:r.match(l);(null==p?void 0:p[2])&&(r=null==p?void 0:p[2]);const m=o===N.CHATBOT&&s&&(null==s?void 0:s.startsWith("(("))&&(null==s?void 0:s.endsWith("))"));u.push({idx:i,variableVal:n||m?t:s,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=r?r:""})})),m=e.htmlContentUrl?e.htmlContentUrl:(null===(v=c.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).length)?null===(p=c.text)||void 0===p?void 0:p.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==u?void 0:u[n]){const l=u[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:u,bodyText:m}}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,s,v;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,s=d&&/\(\(/.test(d),v=null==d?void 0:d.match(l);(null==v?void 0:v[2])&&(d=null==v?void 0:v[2]),p.push({idx:i,variableVal:n?t:r,editable:!!s,editableDefaultValues:s?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(s=m.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).length)?null===(v=m.text)||void 0===v?void 0:v.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 s={actionsType:k.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n[0].type)?k.QUICK_REPLY:k.CTA_BTN;if(s.actionsType=t,t===k.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];s.quickReply=e}else t===k.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var i,n,l,a;if(t.phone_number&&(s.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),s.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}}})));s.allButtons=null===(r=v.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 s}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,pod:a}=t,{headerType:d,headerAssetLink:r,headerAssetName:s,headerText:v,headerVariables:p}=yield this.parseDataFromHeaderComponent(e,void 0,a),{bodyText:u,bodyVariable:m}=yield this.parseBodyComponent(e,l,o,a),{titleText:c,titleVariables:h}=yield this.parseTitleComponent(e,l,o),{actionsType:b,quickReply:T,ctaBtn:y,allButtons:f}=yield this.parseButtonComponent(e),x=this.parseLimitedTimeOfferComponent(e,f),B={quickReply:T,ctaBtn:y,allButtons:f,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:b,footerText:this.parseFooterComponent(e),bodyVariables:m,bodyText:u,headerType:d,headerAssetLink:r,headerAssetName:s,headerText:v,headerVariables:p,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:x,titleText:c,titleVariables:h},{errors:C}=this.validateState(B);return B.error=C,B}))}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{L as TemplateCreatorHelper};

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

@@ -1,10 +1,7 @@
-type variableType = {
-    placeholder: string;
-    value: string;
-};
-declare class VariableEditorHelper {
-    format(text?: string, variableList?: variableType[]): string;
-}
-
-export { VariableEditorHelper };
-export type { variableType };
+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

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

@@ -1,10 +1,8 @@
-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;
-}
-
-export { WhatsAppFormatToHTML };
+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/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

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

@@ -1,12 +1,10 @@
-declare enum CHANNEL_TYPE {
-    WHATSAPP = "whatsapp",
-    INSTAGRAM = "instagram",
-    TIKTOK = "tiktok",
-    EMAIL = "email",
-    SMS = "message",
-    WEBPUSH = "webpush",
-    MESSAGE = "message",
-    RCS = "rcs"
-}
-
-export { CHANNEL_TYPE };
+export declare enum CHANNEL_TYPE {
+    WHATSAPP = "whatsapp",
+    INSTAGRAM = "instagram",
+    TIKTOK = "tiktok",
+    EMAIL = "email",
+    SMS = "message",
+    WEBPUSH = "webpush",
+    MESSAGE = "message",
+    RCS = "rcs"
+}

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

@@ -1 +1 @@
-var a=(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};
+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};