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

package/dist/cjs/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.d.ts

@@ -0,0 +1,6 @@
+import { SingleOption } from "../../dropdown/type";
+import { GlobalPlaceholderType } from "../../template-preview/models/TemplateMeta";
+export declare const convertPlaceholdersToBikDropdown: (data?: GlobalPlaceholderType) => {
+    label: string;
+    options: SingleOption[];
+}[];

package/dist/cjs/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.convertPlaceholdersToBikDropdown=e=>{const o=[];return e&&Object.keys(e).forEach((t=>{const l=e[t],r=l?.map((e=>({label:e.title,value:e.placeHolder,bikPlaceholderType:e.type??"string"})))??[];o.push({label:t,options:r})})),o};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.convertPlaceholdersToBikDropdown=e=>{const l=[];return e&&Object.keys(e).forEach((o=>{var r;const t=e[o],n=null!==(r=null==t?void 0:t.map((e=>{var l;return{label:e.title,value:e.placeHolder,bikPlaceholderType:null!==(l=e.type)&&void 0!==l?l:"string"}})))&&void 0!==r?r:[];l.push({label:o,options:n})})),l};

package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts

@@ -1,36 +1,34 @@
-import { WebpushTemplateType, WebpushTemplateVariables } from '../../template-preview/models/WebpushTemplate.js';
-import { WhatsAppTemplate } from '../../template-preview/models/WhatsAppTemplate.js';
-
-type ComponentType = WhatsAppTemplate['components'][0];
-declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
-    imageComponent: null;
-    descriptionComponents: {
-        component: ComponentType;
-        i: number;
-        type: ComponentType['type'];
-    }[];
-    urlBtns: {
-        component: ComponentType;
-        i: number;
-    }[];
-    qrbBtns: {
-        component: ComponentType;
-        i: number;
-    }[];
-    bodyVariables: string[];
-    headerVariables: string[];
-    titleVariables: string[];
-};
-declare const getAllDataFromWebpushTemplateComponent: (mapping: WebpushTemplateType['webpushBroadcastConfig'], templateVariables: WebpushTemplateVariables) => {
-    bodyVariables: string[];
-    titleVariables: string[];
-    iconImage: string[];
-    bannerImage: string[];
-    redirectionLink: string[];
-    descriptionComponents: {
-        type: string;
-        component: any;
-    }[];
-};
-
-export { getAllDataFromTemplateComponent, getAllDataFromWebpushTemplateComponent };
+import { WebpushTemplateType, WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
+import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+type ComponentType = WhatsAppTemplate['components'][0];
+export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
+    imageComponent: null;
+    descriptionComponents: {
+        component: ComponentType;
+        i: number;
+        type: ComponentType['type'];
+    }[];
+    urlBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    qrbBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    bodyVariables: string[];
+    headerVariables: string[];
+    titleVariables: string[];
+};
+export declare const getAllDataFromWebpushTemplateComponent: (mapping: WebpushTemplateType['webpushBroadcastConfig'], templateVariables: WebpushTemplateVariables) => {
+    bodyVariables: string[];
+    titleVariables: string[];
+    iconImage: string[];
+    bannerImage: string[];
+    redirectionLink: string[];
+    descriptionComponents: {
+        type: string;
+        component: any;
+    }[];
+};
+export {};

package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getAllDataFromTemplateComponent=e=>{const t=[],p=[],o=[],n=[],a=[],i=[];let m=null;return e.components.forEach(((e,n)=>{if("BODY"===e.type&&e.text&&t.push({component:e,i:n,type:"BODY"}),"TITLE"===e.type&&e.text&&t.push({component:e,i:n,type:"TITLE"}),"HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format&&e.example?.header_handle?.[0]&&(m=e),"HEADER"===e.type&&"TEXT"===e.format&&t.push({component:e,i:n,type:"HEADER"}),"BUTTONS"===e.type){const t=e.buttons?.filter?.((e=>"URL"===e.type));p.push({component:{...e,buttons:t},i:n});const a=e.buttons?.filter?.((e=>"QUICK_REPLY"===e.type));o.push({component:{...e,buttons:a},i:n})}"limited_time_offer"===e.type&&t.push({component:e,i:n,type:"limited_time_offer"})})),e.mapping&&e.mapping.body?.forEach((e=>{n.push(e)})),e.mapping&&e.mapping.header?.forEach((e=>{a.push(e)})),e.mapping&&e.mapping.title?.forEach((e=>{i.push(e)})),{imageComponent:m,descriptionComponents:t,urlBtns:p,qrbBtns:o,bodyVariables:n,headerVariables:a,titleVariables:i}},exports.getAllDataFromWebpushTemplateComponent=(e,t)=>({bodyVariables:e?.body?.map((e=>e))||[],titleVariables:e?.title?.map((e=>e))||[],iconImage:e?.icon?.map((e=>e))||[],bannerImage:e?.image?.map((e=>e))||[],redirectionLink:e?.redirectionLink?.map((e=>e))||[],descriptionComponents:Object.keys(t).map((e=>({type:e.toUpperCase(),component:{...t[e],type:e.toUpperCase()}})))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getAllDataFromTemplateComponent=e=>{var o,t,i;const n=[],l=[],p=[],a=[],s=[],d=[];let r=null;return e.components.forEach(((e,o)=>{var t,i,a,s,d,m;if("BODY"===e.type&&e.text&&n.push({component:e,i:o,type:"BODY"}),"TITLE"===e.type&&e.text&&n.push({component:e,i:o,type:"TITLE"}),"HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format&&(null===(i=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===i?void 0:i[0])&&(r=e),"HEADER"===e.type&&"TEXT"===e.format&&n.push({component:e,i:o,type:"HEADER"}),"BUTTONS"===e.type){const t=null===(s=null===(a=e.buttons)||void 0===a?void 0:a.filter)||void 0===s?void 0:s.call(a,(e=>"URL"===e.type));l.push({component:Object.assign(Object.assign({},e),{buttons:t}),i:o});const i=null===(m=null===(d=e.buttons)||void 0===d?void 0:d.filter)||void 0===m?void 0:m.call(d,(e=>"QUICK_REPLY"===e.type));p.push({component:Object.assign(Object.assign({},e),{buttons:i}),i:o})}"limited_time_offer"===e.type&&n.push({component:e,i:o,type:"limited_time_offer"})})),e.mapping&&(null===(o=e.mapping.body)||void 0===o||o.forEach((e=>{a.push(e)}))),e.mapping&&(null===(t=e.mapping.header)||void 0===t||t.forEach((e=>{s.push(e)}))),e.mapping&&(null===(i=e.mapping.title)||void 0===i||i.forEach((e=>{d.push(e)}))),{imageComponent:r,descriptionComponents:n,urlBtns:l,qrbBtns:p,bodyVariables:a,headerVariables:s,titleVariables:d}},exports.getAllDataFromWebpushTemplateComponent=(e,o)=>{var t,i,n,l,p;return{bodyVariables:(null===(t=null==e?void 0:e.body)||void 0===t?void 0:t.map((e=>e)))||[],titleVariables:(null===(i=null==e?void 0:e.title)||void 0===i?void 0:i.map((e=>e)))||[],iconImage:(null===(n=null==e?void 0:e.icon)||void 0===n?void 0:n.map((e=>e)))||[],bannerImage:(null===(l=null==e?void 0:e.image)||void 0===l?void 0:l.map((e=>e)))||[],redirectionLink:(null===(p=null==e?void 0:e.redirectionLink)||void 0===p?void 0:p.map((e=>e)))||[],descriptionComponents:Object.keys(o).map((e=>({type:e.toUpperCase(),component:Object.assign(Object.assign({},o[e]),{type:e.toUpperCase()})})))}};

package/dist/cjs/components/template-context-mapper/utils/getFormattedMonthDate.d.ts

@@ -0,0 +1 @@
+export declare function getFormattedMonthDate(date: Date): string;

package/dist/cjs/components/template-context-mapper/utils/getPreviewDimension.d.ts

@@ -0,0 +1,2 @@
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+export declare const getPreviewWidth: (channel: CHANNEL_TYPE) => 240 | 300 | 360;

package/dist/cjs/components/template-context-mapper/utils/getVariableNameEmail.d.ts

@@ -0,0 +1,2 @@
+export declare const SMS_TEMPLATE_VAR_PATTERN: RegExp;
+export declare const getVariableNameForEmailByIndex: (index: number) => string;

package/dist/cjs/components/template-context-mapper/utils/highlightFor.d.ts

@@ -0,0 +1,3 @@
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { DEVICE_TYPES } from '../context/templateModalContext';
+export declare function highlightFor(id: string, color: string, seconds: number, channel: CHANNEL_TYPE, device: DEVICE_TYPES): void;

package/dist/cjs/components/template-context-mapper/utils/highlightFor.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../template-preview/models/Channels.js");exports.highlightFor=function(t,o,l,n,r){const m=document?.getElementById("mobile"===r?"template_html_mobile":"template_html_desktop"),s=n===e.CHANNEL_TYPE.EMAIL?m?.contentWindow?.document.getElementById(t):document.getElementById(t);if(s){const e=s.style.backgroundColor;s.style.backgroundColor=o,setTimeout((function(){s.style.backgroundColor=e}),1e3*l)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../template-preview/models/Channels.js");exports.highlightFor=function(t,o,l,n,d){var i;const u=null===document||void 0===document?void 0:document.getElementById("mobile"===d?"template_html_mobile":"template_html_desktop"),m=n===e.CHANNEL_TYPE.EMAIL?null===(i=null==u?void 0:u.contentWindow)||void 0===i?void 0:i.document.getElementById(t):document.getElementById(t);if(m){const e=m.style.backgroundColor;m.style.backgroundColor=o,setTimeout((function(){m.style.backgroundColor=e}),1e3*l)}};

package/dist/cjs/components/template-context-mapper/utils/validateIsUrl.d.ts

@@ -1,4 +1,2 @@
-declare const validateIsUrl: (receivedMediaLink: string) => boolean;
-declare const isVariable: (value: string) => boolean;
-
-export { isVariable, validateIsUrl };
+export declare const validateIsUrl: (receivedMediaLink: string) => boolean;
+export declare const isVariable: (value: string) => boolean;

package/dist/cjs/components/template-context-mapper/utils/validateName.d.ts

@@ -0,0 +1,2 @@
+export declare const validateInputName: (name: string) => boolean;
+export declare const validateInputNameChatbot: (name: string) => boolean;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const EmailTemplateHTMLPreview: React.FC<{
+    display_content: string;
+    containerId: string;
+}>;

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.d.ts

@@ -0,0 +1,14 @@
+export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+}, never>;
+export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+}, never>;
+export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {
+    applyBorderBottom?: boolean | undefined;
+}, never>;
+export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+import { EmailTemplateType } from './models/EmailTemplate';
+export declare const DEFAULT_IMAGE = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c";
+declare const EmailTemplateThumbnailPreview: React.FC<{
+    template: EmailTemplateType;
+    hideHeader?: boolean;
+    handleViewTemplate: () => void;
+    hideViewButton?: boolean;
+    containerStyle?: CSSProperties;
+    emailHtmlContainerId?: string;
+    emailDisplayContent?: string;
+    applyBorderBottom?: boolean;
+    hidePointerEvents?: boolean;
+}>;
+export default EmailTemplateThumbnailPreview;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),a=require("../TypographyStyle.js"),n=require("./EmailTemplatePreview.styled.js");const r="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c";exports.DEFAULT_IMAGE=r,exports.default=({template:s,handleViewTemplate:o,hideHeader:i,hideViewButton:p,containerStyle:d,emailHtmlContainerId:l,emailDisplayContent:c,applyBorderBottom:u,hidePointerEvents:m})=>{return e.jsxs(n.EmailContainer,{hideHeader:i,style:{...d??{}},children:[!i&&e.jsx(n.Header,{children:e.jsx(a.TitleRegular,{style:{maxWidth:"100%"},children:s.name})}),e.jsx(n.IframeContainer,{applyBorderBottom:u,children:c?e.jsx("iframe",{title:"Email template preview",id:l??"",width:"100%",srcDoc:(h=c,h.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${r}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:m?void 0:"none"}}):e.jsx(n.ImageContainer,{hideHeader:i,children:e.jsx(n.CardLoadingContainer,{})})}),!p&&e.jsx(n.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{o&&o()}})})]});var h};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),a=require("../TypographyStyle.js"),n=require("./EmailTemplatePreview.styled.js");const s="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c";exports.DEFAULT_IMAGE=s,exports.default=r=>{let{template:o,handleViewTemplate:i,hideHeader:l,hideViewButton:p,containerStyle:d,emailHtmlContainerId:c,emailDisplayContent:u,applyBorderBottom:m,hidePointerEvents:h}=r;return e.jsxs(n.EmailContainer,Object.assign({hideHeader:l,style:Object.assign({},null!=d?d:{})},{children:[!l&&e.jsx(n.Header,{children:e.jsx(a.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:o.name}))}),e.jsx(n.IframeContainer,Object.assign({applyBorderBottom:m},{children:u?e.jsx("iframe",{title:"Email template preview",id:null!=c?c:"",width:"100%",srcDoc:(x=u,x.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${s}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:h?void 0:"none"}}):e.jsx(n.ImageContainer,Object.assign({hideHeader:l},{children:e.jsx(n.CardLoadingContainer,{})}))})),!p&&e.jsx(n.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{i&&i()}})})]}));var x};

package/dist/cjs/components/template-preview/RCS/RCSButtons.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const RCSButtons: React.FC<{
+    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    text: string;
+    extraContent?: string;
+    placeholder?: string;
+    textTypography?: React.FC;
+    size?: 'small' | 'large';
+}>;

package/dist/cjs/components/template-preview/RCS/RCSButtons.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js");exports.RCSButtons=({Icon:i,text:l,extraContent:o,placeholder:n,textTypography:s,size:a})=>{const c=s||r.BodySecondary;return e.jsx(e.Fragment,{children:e.jsxs("div",{style:{textAlign:"center",maxWidth:"100%"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},children:[i&&e.jsx(i,{color:t.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx("div",{style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"},children:e.jsx(c,{style:{color:t.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===a?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:l})})]}),!!o&&e.jsx(r.Caption,{style:{marginTop:2,color:t.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:n?(d=n,d.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))):o})]})});var d};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");exports.RCSButtons=i=>{let{Icon:n,text:s,extraContent:l,placeholder:o,textTypography:c,size:a}=i;const d=c||t.BodySecondary;return e.jsx(e.Fragment,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[n&&e.jsx(n,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx("div",Object.assign({style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"}},{children:e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===a?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:s}))}))]})),!!l&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:o?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(o):l}))]}))})};

package/dist/cjs/components/template-preview/RCS/RCSChatHeader.d.ts

@@ -0,0 +1,2 @@
+declare const RCSChatHeader: () => import("react/jsx-runtime").JSX.Element;
+export default RCSChatHeader;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/arrow_left.svg.js"),r=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./RCSPreview.styled.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(s.default,{height:16,width:16,color:i.COLORS.content.secondary}),e.jsx(o.IconContainer,{children:e.jsx(r.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,{color:i.COLORS.content.secondary,style:{fontWeight:600},children:"Brand name"}),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.secondary})]});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/arrow_left.svg.js"),r=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./RCSPreview.styled.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(s.default,{height:16,width:16,color:i.COLORS.content.secondary}),e.jsx(o.IconContainer,{children:e.jsx(r.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.secondary,style:{fontWeight:600}},{children:"Brand name"})),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.secondary})]});

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

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

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

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

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

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

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

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

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

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

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

@@ -81,15 +81,15 @@
 	font-size: 12px;
 	font-weight: 500;
 	line-width: 20px;
-`,c=o.default.div`
+`,u=o.default.div`
 	border: 1px solid ${t.COLORS.stroke.primary};
 	position: relative;
 	height: 500px;
 	overflow-y: auto;
-	border-radius: ${e=>e.borderRadius??"8px"};
+	border-radius: ${e=>{var t;return null!==(t=e.borderRadius)&&void 0!==t?t:"8px"}};
 	box-shadow: 0px 2px 8px 0px #0000001f;
 	background-color: white;
-`,u=o.default.div`
+`,c=o.default.div`
 	height: 50px;
 	background-color: ${t.COLORS.background.inactive};
 	position: sticky;
@@ -125,4 +125,4 @@
 	line-height: 11px;
 	color: ${t.COLORS.content.secondary};
 	margin-bottom: 0px;
-`;exports.HeaderContainer=u,exports.HeaderTextContainer=n,exports.IconContainer=g,exports.LeftContainer=h,exports.PdfComineText=x,exports.PdfText=f,exports.RCSCarousalContainer=c,exports.RCSChatBtnContainer=s,exports.RCSMediaContainer=p,exports.RCSPdfContainer=l,exports.RCSPreviewContainer=d,exports.RcsHtmlContainer=i,exports.SubTitle=m,exports.TitleContainer=b,exports.TitleTextContainer=a;
+`;exports.HeaderContainer=c,exports.HeaderTextContainer=n,exports.IconContainer=g,exports.LeftContainer=h,exports.PdfComineText=x,exports.PdfText=f,exports.RCSCarousalContainer=u,exports.RCSChatBtnContainer=s,exports.RCSMediaContainer=p,exports.RCSPdfContainer=l,exports.RCSPreviewContainer=d,exports.RcsHtmlContainer=i,exports.SubTitle=m,exports.TitleContainer=b,exports.TitleTextContainer=a;

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

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

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

@@ -1,8 +1,8 @@
-"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("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),o=require("./RCSChatHeader.js"),p=require("./RCSChatPreview.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(r);const d=l.default.div`
+"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("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),o=require("./RCSChatHeader.js"),n=require("./RCSChatPreview.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=p(t);const d=l.default.div`
 	background-color: white;
 	border-radius: 4px;
 	position: relative;
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
-`,u=l.default(a.TitleRegular)`
-	color: ${s.COLORS.content.primary};
-`;exports.RCSTemplateLikePreview=r=>{const{hideDeviceContainerInPreview:a}=t.useTemplateModalContext();return 3===i.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):a?e.jsx(p.RCSChatPreview,{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(o.default,{}),e.jsxs("div",{style:{padding:"small"===r.size?"10px 32px 10px 10px":`10px ${r.isWhatsappCarousel?"0px":"12px"} ${r.isWhatsappCarousel?"2px":"16px"} 16px`,height:r.isWhatsappCarousel?"100%":"auto"},children:[!r.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(u,{children:"Preview"})}),e.jsx(p.RCSChatPreview,{showHeader:r.showHeader,...r})]})]})})};
+`,u=l.default(s.TitleRegular)`
+	color: ${a.COLORS.content.primary};
+`;exports.RCSTemplateLikePreview=t=>{const{hideDeviceContainerInPreview:s}=r.useTemplateModalContext();return 3===i.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):s?e.jsx(n.RCSChatPreview,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(o.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"10px 32px 10px 10px":`10px ${t.isWhatsappCarousel?"0px":"12px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:t.isWhatsappCarousel?"100%":"auto"}},{children:[!t.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(u,{children:"Preview"})})),e.jsx(n.RCSChatPreview,Object.assign({showHeader:t.showHeader},t))]}))]}))})};

package/dist/cjs/components/template-preview/SMS/SMSBubble.d.ts

@@ -0,0 +1,8 @@
+export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export type SMSBubbleProps = {
+    content: string;
+    size?: 'small' | 'large';
+};
+declare const SMSBubble: (props: SMSBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default SMSBubble;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SMSTemplateType } from './models/SmsTemplate';
+import { CUSTOM_VARIABLE } from './models/TemplateMeta';
+declare const SmsTemplatePreview: React.FC<{
+    template: SMSTemplateType;
+    variableStore?: CUSTOM_VARIABLE[];
+    hideHeader?: boolean;
+    onlyTemplateContent?: boolean;
+    display_content?: string;
+    size?: 'small' | 'large';
+    uniqueId?: string;
+}>;
+export default SmsTemplatePreview;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/arrow_left.svg.js"),t=require("../../assets/icons/more_vertical.svg.js"),s=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),n=require("../template-context-mapper/context/templateModalContext.js"),a=require("../TypographyStyle.js"),l=require("./helpers/SmsTemplateHelper.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=({template:c,variableStore:u,hideHeader:h,display_content:x,onlyTemplateContent:j,size:p,uniqueId:S})=>{const m=c?.content,{hideDeviceContainerInPreview:v}=n.useTemplateModalContext();return v?e.jsx(d.SMSBubbleContainer,{size:p,children:e.jsx(o.default,{size:p??"large",content:x??l.renderVariableUIForPreview(m,u??[],void 0,S??"")})}):e.jsxs(e.Fragment,{children:[!h&&!j&&e.jsx(d.SMSCardHeader,{children:e.jsx(a.TitleRegular,{style:{maxWidth:"100%"},children:c.name})}),!j&&e.jsx(d.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(a.Caption,{children:c?.headers?.[0]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary})]})]})}),e.jsx(d.SMSBubbleContainer,{size:p,children:e.jsx(o.default,{size:p??"large",content:x??l.renderVariableUIForPreview(m,u??[],void 0,S??"")})})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/arrow_left.svg.js"),t=require("../../assets/icons/more_vertical.svg.js"),s=require("../../assets/icons/search.svg.js"),l=require("../../constants/Theme.js"),i=require("../template-context-mapper/context/templateModalContext.js"),n=require("../TypographyStyle.js"),a=require("./helpers/SmsTemplateHelper.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=c=>{let{template:u,variableStore:j,hideHeader:h,display_content:x,onlyTemplateContent:p,size:v,uniqueId:g}=c;var S;const m=null==u?void 0:u.content,{hideDeviceContainerInPreview:b}=i.useTemplateModalContext();return b?e.jsx(d.SMSBubbleContainer,Object.assign({size:v},{children:e.jsx(o.default,{size:null!=v?v:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=j?j:[],void 0,null!=g?g:"")})})):e.jsxs(e.Fragment,{children:[!h&&!p&&e.jsx(d.SMSCardHeader,{children:e.jsx(n.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:u.name}))}),!p&&e.jsx(d.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(r.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(n.Caption,{children:null===(S=null==u?void 0:u.headers)||void 0===S?void 0:S[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(t.default,{width:16,height:16,color:l.COLORS.content.secondary})]}))]})}),e.jsx(d.SMSBubbleContainer,Object.assign({size:v},{children:e.jsx(o.default,{size:null!=v?v:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=j?j:[],void 0,null!=g?g:"")})}))]})};

package/dist/cjs/components/template-preview/SmsTemplatePreview.styled.d.ts

@@ -0,0 +1,13 @@
+export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSBubbleContainer: import("styled-components").StyledComponent<"div", any, {
+    size?: "small" | "large" | undefined;
+}, never>;
+export declare const SMSCardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSInnerContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+    outsidePreview?: boolean | undefined;
+}, never>;
+export declare const BubbleSideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BubbleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,33 +1,28 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-import { CHANNEL_TYPE } from './models/Channels.js';
-import { EmailMeta } from './models/EmailTemplate.js';
-import { SMSMeta } from './models/SmsTemplate.js';
-import { AllTemplateTypes } from './models/types.js';
-import { WebpushMetaType } from './models/WebpushTemplate.js';
-import { WhatsappMeta } from './models/WhatsAppTemplate.js';
-
-interface TemplatePreviewProps {
-    template?: AllTemplateTypes;
-    channel: CHANNEL_TYPE;
-    onlyTemplateContent?: boolean;
-    outsidePreview?: boolean;
-    templateCreationsInfo?: boolean;
-    whatsAppSpecificMeta?: WhatsappMeta;
-    emailSpecificMeta?: EmailMeta;
-    smsSpecificMeta?: SMSMeta;
-    hideHeader?: boolean;
-    size?: 'small' | 'large';
-    templateContainerStyles?: React__default.CSSProperties;
-    showSampleValues?: boolean;
-    carouselCardIndex?: number;
-    isWhatsappCarousel?: boolean;
-    isPreview?: boolean;
-    applyBorderBottom?: boolean;
-    webPushSpecificMeta?: WebpushMetaType;
-    hidePointerEvents?: boolean;
-}
-declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, webPushSpecificMeta, hidePointerEvents, }: TemplatePreviewProps) => react_jsx_runtime.JSX.Element;
-
-export { TemplatePreview };
-export type { TemplatePreviewProps };
+import React from 'react';
+import { CHANNEL_TYPE } from './models/Channels';
+import { EmailMeta } from './models/EmailTemplate';
+import { SMSMeta } from './models/SmsTemplate';
+import { AllTemplateTypes } from './models/types';
+import { WebpushMetaType } from './models/WebpushTemplate';
+import { WhatsappMeta } from './models/WhatsAppTemplate';
+export interface TemplatePreviewProps {
+    template?: AllTemplateTypes;
+    channel: CHANNEL_TYPE;
+    onlyTemplateContent?: boolean;
+    outsidePreview?: boolean;
+    templateCreationsInfo?: boolean;
+    whatsAppSpecificMeta?: WhatsappMeta;
+    emailSpecificMeta?: EmailMeta;
+    smsSpecificMeta?: SMSMeta;
+    hideHeader?: boolean;
+    size?: 'small' | 'large';
+    templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    applyBorderBottom?: boolean;
+    webPushSpecificMeta?: WebpushMetaType;
+    hidePointerEvents?: boolean;
+}
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, webPushSpecificMeta, hidePointerEvents, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const ChatBtn: React.FC<{
+    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    text: string;
+    extraContent?: string;
+    placeholder?: string;
+    textTypography?: React.FC;
+    size?: 'small' | 'large';
+}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),n=require("./ChatUI.style.js");exports.ChatBtn=({Icon:l,text:i,extraContent:o,placeholder:s,textTypography:a,size:c})=>{const p=a||t.BodySecondary;return e.jsx(n.ChatBtnContainer,{children:e.jsxs("div",{style:{textAlign:"center",maxWidth:"100%"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},children:[l&&e.jsx(l,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(p,{style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===c?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:i})]}),!!o&&e.jsx(t.Caption,{style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:s?(d=s,d.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))):o})]})});var d};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),n=require("./ChatUI.style.js");exports.ChatBtn=i=>{let{Icon:s,text:l,extraContent:o,placeholder:a,textTypography:c,size:p}=i;const d=c||t.BodySecondary;return e.jsx(n.ChatBtnContainer,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[s&&e.jsx(s,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:l}))]})),!!o&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:a?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(a):o}))]}))})};

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

@@ -0,0 +1,2 @@
+declare const ChatHeader: () => import("react/jsx-runtime").JSX.Element;
+export default ChatHeader;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/arrow_left.svg.js"),s=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./ChatHeader.style.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(r.default,{height:16,width:16,color:i.COLORS.content.primaryInverse}),e.jsx(o.IconContainer,{children:e.jsx(s.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,{color:i.COLORS.content.primaryInverse,children:"Brand name"}),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.primaryInverse})]});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/arrow_left.svg.js"),s=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./ChatHeader.style.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(r.default,{height:16,width:16,color:i.COLORS.content.primaryInverse}),e.jsx(o.IconContainer,{children:e.jsx(s.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.primaryInverse},{children:"Brand name"})),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.primaryInverse})]});

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

@@ -0,0 +1,5 @@
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubTitle: import("styled-components").StyledComponent<"p", any, {}, never>;

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

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