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

package/dist/cjs/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/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

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

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

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

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

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

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

@@ -1,4 +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"),a=require("../constants/regexPatterns.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=s(t).default.div`
+"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:s,bold:i}=t,o=s?.match(a.templateVariablePattern),d=i?{fontWeight:"600"}:{};return s?e.jsx(l,{children:s.split(a.templateVariablePattern).map(((t,a)=>e.jsxs(e.Fragment,{children:[e.jsx(r.BodyRegular,{style:d,children:t}),!!o?.[a]&&e.jsx(r.BodyRegular,{style:{color:n.COLORS.content.brand,...d},children:o?.[a]})]})))}):e.jsx(e.Fragment,{})};
+`;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

@@ -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/cjs/components/template-preview/WhatsApp/WhatsAppLikePreview.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),o=require("./ChatHeader.js"),s=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`
+"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
-		${a.COLORS.stroke.primary};
+		${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: ${a.COLORS.content.primary};
-`;exports.WhatsappLikePreview=r=>3===i.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,{style:r.containerStyle,showHeader:r.showHeader,children:[r.showHeader&&e.jsx(o.default,{}),e.jsxs("div",{style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"},children:[!r.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(l,{children:"Preview"})}),e.jsx(s.default,{showHeader:r.showHeader,...r})]})]})});
+	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

@@ -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/cjs/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js

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

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

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

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

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

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

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

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

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

@@ -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/cjs/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/cjs/components/template-preview/helpers/templateMiscHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../models/Channels.js"),s=require("../models/RCSTemplate.js");const r=s=>s===e.CHANNEL_TYPE.RCS?0:1,o=e=>"carousel"===e?.toLowerCase();exports.determineCardIndex=r,exports.isCarouselComponent=o,exports.isItCarousal=(e,s)=>{const t=r(e);return o(s?.components?.[t]?.type)},exports.isRCSChannel=s=>s==e.CHANNEL_TYPE.RCS,exports.isRichAndCarouselCards=e=>e===s.RCS_TEMPLATE_TYPE.RICH_CARD||e===s.RCS_TEMPLATE_TYPE.CAROUSEL;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../models/Channels.js"),o=require("../models/RCSTemplate.js");const s=o=>o===e.CHANNEL_TYPE.RCS?0:1,r=e=>"carousel"===(null==e?void 0:e.toLowerCase());exports.determineCardIndex=s,exports.isCarouselComponent=r,exports.isItCarousal=(e,o)=>{var t,C;const l=s(e);return r(null===(C=null===(t=null==o?void 0:o.components)||void 0===t?void 0:t[l])||void 0===C?void 0:C.type)},exports.isRCSChannel=o=>o==e.CHANNEL_TYPE.RCS,exports.isRichAndCarouselCards=e=>e===o.RCS_TEMPLATE_TYPE.RICH_CARD||e===o.RCS_TEMPLATE_TYPE.CAROUSEL;

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

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