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

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.style.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e);const o=i.default.div`
+	height: 50px;
+	background-color: #008069;
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,r=i.default.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,a=i.default.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,p=i.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,s=i.default.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.COLORS.content.primaryInverse};
+	margin-bottom: 0px;
+`;exports.HeaderContainer=o,exports.IconContainer=a,exports.LeftContainer=r,exports.SubTitle=s,exports.TitleContainer=p;

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

@@ -0,0 +1,3 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+declare const ChatUI: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
+export default ChatUI;

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

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

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

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

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -0,0 +1,56 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default.div`
+	background: ${r.COLORS.surface.standard};
+	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	border-top-left-radius: 0px;
+	border-top-right-radius: 12px;
+	border-bottom-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	position: relative;
+	padding: 8px 0px;
+`,d=i.default(t.Caption)`
+	color: ${r.COLORS.content.secondary};
+	max-width: 80px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+`,n=i.default.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: 4px;
+	margin: 0px 8px;
+`,p=i.default.div`
+	padding: 12px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border-top: 1px solid ${r.COLORS.stroke.primary};
+`,s=i.default.div`
+	display: flex;
+
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 8px 12px;
+`;i.default.div`
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	text-align: center;
+	width: 100%;
+	padding: 10px;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: start;
+	background: ${r.COLORS.surface.hovered};
+	border-bottom-right-radius: 8px;
+	border-bottom-left-radius: 8px;
+`,i.default.div`
+	position: absolute;
+	top: 16px;
+	right: 16px;
+`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=n,exports.TimeStamp=d;

package/dist/cjs/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/cjs/components/template-preview/WhatsApp/ChatUiV2.js

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

package/dist/cjs/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/cjs/components/template-preview/WhatsApp/MediaCard.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),t=require("../../../assets/icons/videoRecorder.svg.js"),a=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),d=require("./ChatUI.style.js");const o=o=>{let{headerAssetName:c,mediaType:l}=o;const j=l===n.HEADER_TYPES.IMAGE?r.default:l===n.HEADER_TYPES.VIDEO?t.default:s.default;return e.jsxs(d.MediaContainer,{children:[e.jsx(j,{height:40,width:40,color:i.COLORS.icon.placeholder}),!!c&&e.jsx(a.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:t,mediaType:a,imagePreviewStyles:i}=s;if(!r||a===n.HEADER_TYPES.DOCUMENT)return e.jsx(o,Object.assign({},{headerAssetLink:r,headerAssetName:t,mediaType:a}));const c={width:"100%",minHeight:"156px",borderRadius:8};return e.jsx(d.MediaContainer,{children:a===n.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"Header displays here",style:Object.assign(Object.assign({},c),i),src:r}):a===n.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:c,controls:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=o;

package/dist/cjs/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/cjs/components/template-preview/WhatsApp/RenderTemplateWithVariable.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),a=require("../utils/getPreviewPropLen.js"),i=require("./ChatHeader.js"),o=require("./ChatUiV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const p=n.default.div`
+	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
+	border: ${e=>e.showHeader?0:1}px solid
+		${s.COLORS.stroke.primary};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+`,c=n.default(t.TitleRegular)`
+	color: ${s.COLORS.content.primary};
+`;exports.WhatsappLikePreviewV2=r=>3===a.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsx(i.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(c,{children:"Preview"})})),e.jsx(o.ChatUIV2,Object.assign({showHeader:r.showHeader},r))]}))]}))});

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

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

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

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

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

@@ -0,0 +1,32 @@
+export declare const CREATE_TEMPLATE_DOM_IDS: {
+    name: string;
+    header: string;
+    body: string;
+    actionButtons: string;
+    footer: string;
+};
+export declare const NAME_NOT_FOUND = "Please enter template name";
+export declare const BODY_TEXT_EMPTY = "Template body text cant be empty";
+export declare const REQUIRED_FIELD = "Required field";
+export declare const HEADER_LEN_ERROR = "Maximum 60 characters are allowed";
+export declare const NAME_LEN_ERROR = "Maximum 512 characters allowed";
+export declare const NO_SPECIAL_CHAR = "No special characters allowed";
+export declare const BODY_LEN_ERROR = "Maximum 1,024 characters are allowed";
+export declare const QUICK_REPLY_LEN_ERROR = "Maximum 20 characters are allowed";
+export declare const QUICK_REPLY_NAME_ERROR = "Buttons with same name are not allowed";
+export declare const CUSTOM_LIM_LEN_ERROR = "Maximum characters allowed is 2000 characters";
+export declare const ONE_VAR_ERROR = "Only one variable allowed in text header";
+export declare const VALID_PHONE_NUMBER = "Please enter a valid 10-digit phone number";
+export declare const FOOTER_EMOJI_ERROR = "Emojis are not allowed in footer";
+export declare const HEADER_EMOJI_ERROR = "Emojis are not allowed in header";
+export declare const BUTTON_EMOJI_ERROR = "Emojis are not allowed in button";
+export declare const HEADER_ASSET_LINK_ERROR = "Please attach the required media";
+export declare const TCS_DEFAULT_INPUT_ERROR = "Some input(s) are missing";
+export declare const ONE_VAR_ALLOWED = "Only one variable allowed in text header";
+export declare const HEADER_TEXT_LEN_LIMIT = 60;
+export declare const NAME_LEN_LIMIT = 512;
+export declare const BODY_TEXT_LEN_LIMIT = 1024;
+export declare const QUICK_REPLY_BTN_TEXT_LIMIT = 25;
+export declare const CUSTOM_LINK_LIMIT = 2000;
+export declare const QUICK_REPLY_NAME_LEN_LIMIT = 20;
+export declare const QRB_NONE = "None";

package/dist/cjs/components/template-preview/constants/TemplateConstants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e="create-template",t={name:`${e}-name`,header:`${e}-header`,body:`${e}-body`,actionButtons:`${e}-action-buttons`,footer:`${e}-footer`};exports.BODY_LEN_ERROR="Maximum 1,024 characters are allowed",exports.BODY_TEXT_LEN_LIMIT=1024,exports.BUTTON_EMOJI_ERROR="Emojis are not allowed in button",exports.CREATE_TEMPLATE_DOM_IDS=t,exports.HEADER_ASSET_LINK_ERROR="Please attach the required media",exports.HEADER_LEN_ERROR="Maximum 60 characters are allowed",exports.HEADER_TEXT_LEN_LIMIT=60,exports.NAME_LEN_ERROR="Maximum 512 characters allowed",exports.NAME_LEN_LIMIT=512,exports.NO_SPECIAL_CHAR="No special characters allowed",exports.ONE_VAR_ALLOWED="Only one variable allowed in text header",exports.QUICK_REPLY_BTN_TEXT_LIMIT=25,exports.QUICK_REPLY_LEN_ERROR="Maximum 20 characters are allowed",exports.QUICK_REPLY_NAME_ERROR="Buttons with same name are not allowed",exports.QUICK_REPLY_NAME_LEN_LIMIT=20,exports.REQUIRED_FIELD="Required field",exports.VALID_PHONE_NUMBER="Please enter a valid 10-digit phone number";

package/dist/cjs/components/template-preview/constants/regexPatterns.d.ts

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

package/dist/cjs/components/template-preview/constants/regexPatterns.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 .]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 .]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\(\()(.*)(\)\)|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 ._]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;

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

@@ -0,0 +1,2 @@
+import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
+export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string) => string;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.WhatsAppFormatToHTML=class{convertToHTML(e){return this.convertNewline(this.convertStrike(this.convertItalics(this.convertToBold(e))))}convertToBold(e){return e.replace(/\*(.*?)\*/gim,"<b>$1</b>")}convertItalics(e){return e.replace(/_(.*)_/gim,"<em>$1</em>")}convertStrike(e){return e.replace(/~(.*)~/gim,"<s>$1</s>")}convertNewline(e){return e}removeExtraNewLines(e){return e.replace(/\n\n/g,"\n")}};

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),exports.CHANNEL_TYPE=void 0,(e=exports.CHANNEL_TYPE||(exports.CHANNEL_TYPE={})).WHATSAPP="whatsapp",e.INSTAGRAM="instagram",e.TIKTOK="tiktok",e.EMAIL="email",e.SMS="message",e.WEBPUSH="webpush",e.MESSAGE="message";

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";var E,T,A,D;Object.defineProperty(exports,"__esModule",{value:!0}),exports.TEMPLATE_EDITOR=void 0,(E=exports.TEMPLATE_EDITOR||(exports.TEMPLATE_EDITOR={})).SEND_GRID="sendgrid",E.BEE="bee",exports.TEMPLATE_STATUS=void 0,(T=exports.TEMPLATE_STATUS||(exports.TEMPLATE_STATUS={})).APPROVED="APPROVED",T.DISABLED="DISABLED",T.FLAGGED="FLAGGED",T.PENDING="PENDING",T.DRAFT="DRAFT",T.REJECTED="REJECTED",T.PENDING_DELETION="PENDING_DELETION",T.IN_REVIEW="IN REVIEW",T.PAUSED="PAUSED",T.ACTIVE="ACTIVE",T.LIBRARY="LIBRARY",exports.HEADER_TYPES=void 0,(A=exports.HEADER_TYPES||(exports.HEADER_TYPES={})).NONE="NONE",A.TEXT="TEXT",A.IMAGE="IMAGE",A.VIDEO="VIDEO",A.DOCUMENT="DOCUMENT",exports.ACTIONS_TYPES=void 0,(D=exports.ACTIONS_TYPES||(exports.ACTIONS_TYPES={})).NONE="NONE",D.CTA_BTN="CTA_BTN",D.QUICK_REPLY="QUICK_REPLY";exports.CUSTOM_URL_NAME={value:"custom_link",label:"Custom URL",placeHolder:"custom placeholder"};