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

package/dist/esm/components/template-context-mapper/utils/TemplateConstants.js

@@ -1 +1 @@
-import e from"../../../assets/icons/alert_triangle.svg.js";import t from"../../../assets/icons/send_template.svg.js";import a from"../../../assets/icons/tick.svg.js";import i from"../../../assets/icons/tick_double.svg.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{TEMPLATE_QUALITY as r}from"../../template-preview/models/WhatsAppTemplate.js";import{Caption as n,TitleSmall as s}from"../../TypographyStyle.js";const l={[r.YELLOW]:{icon:e,title:"Medium quality template",sublineTextType:n,sublineColor:o.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.RED]:{icon:e,title:"Low quality template",sublineTextType:n,sublineColor:o.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.GREEN]:{icon:"",title:"",sublineTextType:s,sublineColor:"",subline:"Here is your template's delivery and engagement stats from the last 30 days. Higher engagement today can lead to better delivery rates in the future."}},m=[{title:"Sent",icon:t,valName:"totalSent"},{title:"Delivered",icon:a,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:i,valName:"totalReads",percentValName:"readPercentage"}];export{m as ANALYTICS_ENGAGEMENT_MAP,l as TEMPLATE_QUALITY_MAP};
+import e from"../../../assets/icons/alert_triangle.svg.js";import t from"../../../assets/icons/send_template.svg.js";import a from"../../../assets/icons/tick.svg.js";import i from"../../../assets/icons/tick_double.svg.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{TEMPLATE_QUALITY as r}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{Caption as n,TitleSmall as s}from"../../TypographyStyle.js";const l={[r.YELLOW]:{icon:e,title:"Medium quality template",sublineTextType:n,sublineColor:o.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.RED]:{icon:e,title:"Low quality template",sublineTextType:n,sublineColor:o.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.GREEN]:{icon:"",title:"",sublineTextType:s,sublineColor:"",subline:"Here is your template's delivery and engagement stats from the last 30 days. Higher engagement today can lead to better delivery rates in the future."}},m=[{title:"Sent",icon:t,valName:"totalSent"},{title:"Delivered",icon:a,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:i,valName:"totalReads",percentValName:"readPercentage"}];export{m as ANALYTICS_ENGAGEMENT_MAP,l as TEMPLATE_QUALITY_MAP};

package/dist/esm/components/template-context-mapper/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const BACKGROUND_PREVIEW_IMAGE = "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";
+export declare const STATIC_URL_VARIABLE_NAME = "((staticPlaceholderName))";

package/dist/esm/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/esm/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.js

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

package/dist/esm/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/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.js

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

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

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

package/dist/esm/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/esm/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/esm/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/esm/components/template-context-mapper/utils/highlightFor.js

@@ -1 +1 @@
-import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function t(t,o,n,l,m){const d=document?.getElementById("mobile"===m?"template_html_mobile":"template_html_desktop"),c=l===e.EMAIL?d?.contentWindow?.document.getElementById(t):document.getElementById(t);if(c){const e=c.style.backgroundColor;c.style.backgroundColor=o,setTimeout((function(){c.style.backgroundColor=e}),1e3*n)}}export{t as highlightFor};
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function o(o,t,n,l,d){var m;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===d?"template_html_mobile":"template_html_desktop"),u=l===e.EMAIL?null===(m=null==i?void 0:i.contentWindow)||void 0===m?void 0:m.document.getElementById(o):document.getElementById(o);if(u){const e=u.style.backgroundColor;u.style.backgroundColor=t,setTimeout((function(){u.style.backgroundColor=e}),1e3*n)}}export{o as highlightFor};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as o,IframeContainer as s,ImageContainer as p,CardLoadingContainer as i,ViewButton as d}from"./EmailTemplatePreview.styled.js";const l="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",c=({template:c,handleViewTemplate:m,hideHeader:h,hideViewButton:u,containerStyle:y,emailHtmlContainerId:f,emailDisplayContent:b,applyBorderBottom:g,hidePointerEvents:C})=>{return e(r,{hideHeader:h,style:{...y??{}},children:[!h&&t(o,{children:t(n,{style:{maxWidth:"100%"},children:c.name})}),t(s,{applyBorderBottom:g,children:b?t("iframe",{title:"Email template preview",id:f??"",width:"100%",srcDoc:(x=b,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=${l}`).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:C?void 0:"none"}}):t(p,{hideHeader:h,children:t(i,{})})}),!u&&t(d,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]});var x};export{l as DEFAULT_IMAGE,c as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as s,Header as r,IframeContainer as o,ImageContainer as i,CardLoadingContainer as p,ViewButton as l}from"./EmailTemplatePreview.styled.js";const d="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",c=c=>{let{template:m,handleViewTemplate:u,hideHeader:h,hideViewButton:y,containerStyle:b,emailHtmlContainerId:g,emailDisplayContent:f,applyBorderBottom:C,hidePointerEvents:j}=c;return e(s,Object.assign({hideHeader:h,style:Object.assign({},null!=b?b:{})},{children:[!h&&t(r,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:m.name}))}),t(o,Object.assign({applyBorderBottom:C},{children:f?t("iframe",{title:"Email template preview",id:null!=g?g:"",width:"100%",srcDoc:(x=f,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=${d}`).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:j?void 0:"none"}}):t(i,Object.assign({hideHeader:h},{children:t(p,{})}))})),!y&&t(l,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{u&&u()}})})]}));var x};export{d as DEFAULT_IMAGE,c as default};

package/dist/esm/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/esm/components/template-preview/RCS/RCSButtons.js

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

package/dist/esm/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/esm/components/template-preview/RCS/RCSChatHeader.js

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import 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/esm/components/template-preview/RCS/RCSMediaCard.js

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

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

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

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

@@ -70,7 +70,7 @@ import e from"styled-components";import{COLORS as t}from"../../../constants/Them
 	justify-content: flex-start;
 	margin-left: 4px;
 	max-width: 180px;
-`,x=e.p`
+`,l=e.p`
 	white-space: nowrap;
 	color: #4c5567;
 	max-width: 100px;
@@ -81,12 +81,12 @@ import e from"styled-components";import{COLORS as t}from"../../../constants/Them
 	font-size: 12px;
 	font-weight: 500;
 	line-width: 20px;
-`,l=e.div`
+`,x=e.div`
 	border: 1px solid ${t.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;
 `,c=e.div`
@@ -125,4 +125,4 @@ import e from"styled-components";import{COLORS as t}from"../../../constants/Them
 	line-height: 11px;
 	color: ${t.content.secondary};
 	margin-bottom: 0px;
-`;export{c as HeaderContainer,o as HeaderTextContainer,h as IconContainer,f as LeftContainer,s as PdfComineText,x as PdfText,l as RCSCarousalContainer,d as RCSChatBtnContainer,a as RCSMediaContainer,p as RCSPdfContainer,n as RCSPreviewContainer,r as RcsHtmlContainer,m as SubTitle,g as TitleContainer,i as TitleTextContainer};
+`;export{c as HeaderContainer,o as HeaderTextContainer,h as IconContainer,f as LeftContainer,s as PdfComineText,l as PdfText,x as RCSCarousalContainer,d as RCSChatBtnContainer,a as RCSMediaContainer,p as RCSPdfContainer,n as RCSPreviewContainer,r as RcsHtmlContainer,m as SubTitle,g as TitleContainer,i as TitleTextContainer};

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

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

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

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

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

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

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

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

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

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

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

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

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