@bikdotai/bik-component-library 0.0.742-beta.10 → 0.0.742-beta.13

package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as o}from"../../template-preview/constants/regexPatterns.js";import{UNSUBSCRIBE_URL_OPTION as r,STATIC_URL_CTA_OPTION as u,CUSTOM_URL_NAME as c}from"../../template-preview/models/TemplateMeta.js";import{POD as d}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as b}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import{UNSUBSCRIBE_URL_VARIABLE as v,STATIC_URL_VARIABLE_NAME as j}from"../utils/constants.js";import{validateIsUrl as g}from"../utils/validateIsUrl.js";import f,{Container as O}from"./VariableConnector.js";const x=x=>{let{variableListIndex:y,button:h,updateSelectedURLTemplateBtn:L,updateSelectedQRBTemplateBtn:R,currentVariableList:U,CTAoptions:V,QRBoptions:T,disableEdit:w}=x;var C,I,E,P,H;const[N,B]=s(""),[_,Q]=s(),k=null==V?void 0:V.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value&&_.label===e.label}))),S=null==T?void 0:T.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value}))),{isError:K,disableEditVariable:Y,pod:$,selectedCarouselIndex:q,originalVariableList:A,setOriginalVariableList:M,isProductCarouselType:D,ctaOptionsErrors:W,setCtaOptionsErrors:z}=m();function F(e){if(B(e),null!=q&&q>-1&&D){const t=l(A);if("URL"===h.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[y];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==M||M((e=>Object.assign(Object.assign({},e),{cards:l}))),null==L||L(`https://${e}`,"custom",y)}return}let t=U.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=U.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),a=Object.assign({},null!=q&&q>-1?A.cards[q]:A);if(a.buttons=s,null!=q&&q>-1){const e=[...A.cards];e[q]=a,null==M||M((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==M||M((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==L||L(`https://${e}`,"custom",y)}return a((()=>{var e,t;if(h.buttonVariable===v)return Q(r),void B((null===(e=h.example)||void 0===e?void 0:e[0].split("https://")[1])||"");if(h.buttonVariable&&o.test(h.buttonVariable))h.buttonVariable===j?Q(u):Q(c),B((null===(t=h.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let e=-1;const t="URL"===h.type?V:T;e="URL"===h.type?t.findIndex((e=>e.placeHolder===h.buttonVariable)):t.findIndex((e=>e.label===h.flowName)),e>-1?Q(t[e]):null==z||z((e=>Object.assign(Object.assign({},e),{[y]:"Required field!"})))}}),[]),$!==d.CHATBOT?e(O,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:p.content.primary}},{children:[h.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(n,{disabled:Y||w,truncatedText:!1,options:"URL"===h.type?"static_link"===(null==_?void 0:_.value)?[u]:k:S,isSearchable:!0,onSelect:function(e,t){null==z||z((e=>(delete e[y],Object.assign({},e))));const s=e;Q(s);const a=("URL"===h.type?V:T).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=q&&q>-1&&D){const e=l(A);if("URL"===h.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==L||L({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",y),null==M||M((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===h.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[y];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==R||R({flowName:s.label,flowId:s.value},"placeholder",y),null==M||M((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===h.type){let t=U.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder,example:[(null==s?void 0:s.value)||"https://d.bik.ai/"]}),e=U.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==L||L({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",y)}else{let t=U.buttons.filter((e=>"QUICK_REPLY"===e.type))[y];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=U.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==R||R({flowName:s.label,flowId:s.value},"placeholder",y)}const t=Object.assign({},null!=q&&q>-1?A.cards[q]:A);if(t.buttons=e,null!=q&&q>-1){const e=[...A.cards];e[q]=t,null==M||M((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==M||M((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else F("")},defaultOptions:_?[Object.assign(Object.assign({},_),{selected:!0})]:[],error:K?null==W?void 0:W[y]:void 0})})),("custom_link"===(null==_?void 0:_.value)||"static_link"===(null==_?void 0:_.value))&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:Y||w?"disabled":"none",errorMessage:K?N?g(N)?"":"Enter valid URL":"Required field":"",value:N,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:F,maxCharLimit:2e3})}))]}):t(f,{index:y,variable:{variableName:null!==(C=h.text)&&void 0!==C?C:"",updatedValue:"((customPlaceholderName))"===h.buttonVariable?`${null===(I=h.example)||void 0===I?void 0:I[0]}`:null!==(E=h.buttonVariable)&&void 0!==E?E:"",type:"link",isEditableVariable:!0,index:null!==(P=h.index)&&void 0!==P?P:0,queryParams:null!==(H=h.queryParams)&&void 0!==H?H:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:h.type,CTAoptions:V})};export{x as default};

package/dist/esm/components/template-context-mapper/modalElements/useEditWhtasappTemplateMedia.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IMimeTypeResponse, WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export type UseEditWhatsappTemplateMediaResponse = ReturnType<typeof useEditWhatsappTemplateMedia>;
+interface UseEditWhatsappTemplateMediaProps {
+    uploadMediaLink?: WhatsAppPickerMeta['uploadMediaLink'];
+    uploadMediaFiles: WhatsAppPickerMeta['uploadMediaFiles'];
+    validateMimeType?: (blob: Blob) => Promise<IMimeTypeResponse>;
+    updateTemplateImageUrl: (url: string, format: WhatsAppTemplate['components'][0]['format']) => void;
+    fileRef: React.RefObject<HTMLInputElement | null>;
+    mediaComponent: any;
+}
+export declare const useEditWhatsappTemplateMedia: (props: UseEditWhatsappTemplateMediaProps) => {
+    uploadMedia: (urlOrVariable?: string) => Promise<void>;
+    processImageUpload: (file?: Blob | File) => Promise<void>;
+    handleImageUpload: ($event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleImageChange: () => void;
+    onCropComplete: (base64: string) => Promise<void>;
+    editIconRef: React.MutableRefObject<null>;
+    fileName: string | undefined;
+    setFileName: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedVariable: string | undefined;
+    setSelectedVariable: React.Dispatch<React.SetStateAction<string | undefined>>;
+    openEditMedia: boolean;
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedImage: string | undefined;
+    setSelectedImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+    loading: boolean;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    error: string;
+    setError: React.Dispatch<React.SetStateAction<string>>;
+};
+export {};

package/dist/esm/components/template-context-mapper/modalElements/useEditWhtasappTemplateMedia.js

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as i,useRef as n,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,validateMimeType:m,mediaComponent:u,uploadMediaFiles:f,fileRef:v}=d,{template:g,selectedCarouselIndex:h,setTemplate:y}=s(),[b,I]=i(void 0),[M,j]=i(),[E,O]=i(!1),[U,C]=i(""),[T,k]=i(!1),[w,A]=i(),N=n(null);function x(o){var i;return e(this,void 0,void 0,(function*(){const e=new l;if(o instanceof Blob){if(m){const{isValid:e,mimeType:i}=yield m(o);if(!e)return void C(`MIME type ${i} is not supported`)}const n=e.validate({file:o});if(n)C(n),k(!1),O(!1);else{const e=u.format===a.IMAGE,n=yield f({file:o,fileName:b,isImage:e});if(n.success){const[e]=o.type.split("/");p(null!==(i=n.url)&&void 0!==i?i:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1),O(!1)}}else C("An unknown technical error occurred"),k(!1)}))}function R(){var e;(null===(e=null==v?void 0:v.current)||void 0===e?void 0:e.click)&&v.current.click()}return t((()=>{I(void 0),A(void 0),j(void 0),O(!1),k(!1),C("")}),[h]),{uploadMedia:function(i){var n,t,s,d,m,f;return e(this,void 0,void 0,(function*(){if(C(""),j(""),i)if(i.startsWith("https"))try{if(k(!0),c){const e=yield c(i),{type:o,size:t,success:s}=e;if(s){const i=(new l).validate({linkData:{type:o,size:t}});if(i)return C(i),void k(!1);const[s]=o.split("/");p(null!==(n=e.url)&&void 0!==n?n:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1)}else{const e=yield fetch(i),o=yield e.blob();yield x(o)}}catch(e){k(!1),C("An unknown technical error occurred")}else if(r(i)){let e;if(j(i),e=null!=h&&h>-1?{components:null===(s=null===(t=g.components[1])||void 0===t?void 0:t.cards)||void 0===s?void 0:s[h].components,mapping:null===(m=null===(d=null==g?void 0:g.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[h]}:Object.assign({},g),e.components){const o=null===(f=null==e?void 0:e.components)||void 0===f?void 0:f.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const n=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[i]}}),t=[...e.components];t[o]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),k(!1),null!=h&&h>-1){const i=o(g);i.components[1].cards[h].components=e.components,i.mapping.cards[h]=e.mapping,null==y||y(Object.assign({},i))}else null==y||y(Object.assign({},e))}else k(!1),C("Invalid URL or variable");else R()}))},processImageUpload:x,handleImageUpload:function(e){var o;C(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else x(i)},handleImageChange:R,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),C("");const e=yield fetch(o),i=yield e.blob();yield x(i),A(void 0),O(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:M,setSelectedVariable:j,openEditMedia:E,setOpenEditMedia:O,selectedImage:w,setSelectedImage:A,loading:T,setLoading:k,error:U,setError:C}};export{d as useEditWhatsappTemplateMedia};

package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.d.ts

@@ -0,0 +1,9 @@
+export declare const TemplateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightPanelContainer: import("styled-components").StyledComponent<"div", any, {
+    fullWidth?: boolean | undefined;
+}, never>;
+export declare const LeftPanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CustomTitleMedium: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;

package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.js

@@ -0,0 +1,64 @@
+import e from"styled-components";import{TitleMedium as i}from"../../TypographyStyle.js";import{COLORS as t}from"../../../constants/Theme.js";const n=e.div`
+	display: flex;
+	padding: 16px 0px;
+`,o=e.div`
+	max-width: ${e=>e.fullWidth?"none":"450px"};
+	height: 456px;
+	min-width: 358px;
+	overflow-y: auto;
+	border-left: ${e=>e.fullWidth?"none":`${t.stroke.primary} 1px solid`};
+	padding: 0px 23px 32px 23px;
+	gap: 16px;
+	${e=>e.fullWidth&&"flex: 1;"}
+	.each--analytics--container {
+		border: 1px solid ${t.background.inactive};
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		padding: 16px;
+		justify-content: space-between;
+		margin-bottom: 16px;
+	}
+	.each--icon--container {
+		background-color: ${t.background.brandLight};
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+	}
+	.align--center {
+		align-items: center;
+	}
+`,r=e.div`
+	padding: 0px 23px 32px 23px;
+	flex: 1;
+	height: 456px;
+	overflow-y: auto;
+	min-width: 286px;
+	display: flex;
+	align-items: center;
+	.inside--container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 16px;
+	}
+	.icon--container {
+		background: ${t.background.warning.light};
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+`,p=e(i)`
+	white-space: nowrap;
+	max-width: 161px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;export{p as CustomTitleMedium,r as LeftPanelContainer,o as RightPanelContainer,n as TemplateContainer};

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

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+export declare const TEMPLATE_QUALITY_MAP: {
+    YELLOW: {
+        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        title: string;
+        sublineTextType: import("styled-components").StyledComponent<"div", any, {
+            numberOfLines?: number | undefined;
+            color?: string | undefined;
+        }, never>;
+        sublineColor: string;
+        subline: string;
+    };
+    RED: {
+        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        title: string;
+        sublineTextType: import("styled-components").StyledComponent<"div", any, {
+            numberOfLines?: number | undefined;
+            color?: string | undefined;
+        }, never>;
+        sublineColor: string;
+        subline: string;
+    };
+    GREEN: {
+        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        title: string;
+        sublineTextType: import("styled-components").StyledComponent<"div", any, {
+            numberOfLines?: number | undefined;
+            color?: string | undefined;
+        }, never>;
+        sublineColor: string;
+        subline: string;
+    };
+    UNKNOWN: {
+        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        title: string;
+        sublineTextType: import("styled-components").StyledComponent<"div", any, {
+            numberOfLines?: number | undefined;
+            color?: string | undefined;
+        }, never>;
+        sublineColor: string;
+        subline: string;
+    };
+};
+export declare const ANALYTICS_ENGAGEMENT_MAP: ({
+    title: string;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    valName: string;
+    percentValName?: undefined;
+} | {
+    title: string;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    valName: string;
+    percentValName: string;
+})[];

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

@@ -0,0 +1 @@
+import e from"../../../assets/icons/alert_triangle.svg.js";import t from"../../../assets/icons/check.svg.js";import a from"../../../assets/icons/send_template.svg.js";import i from"../../../assets/icons/tick.svg.js";import o 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 n}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 s}from"../../TypographyStyle.js";const m={[r.YELLOW]:{Icon:e,title:"Medium quality template",sublineTextType:s,sublineColor:n.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:s,sublineColor:n.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:t,title:"High quality template",sublineTextType:s,sublineColor:n.content.secondary,subline:"Meta has rated this template as high quality due to strong engagement and positive customer interactions. We recommend continuing to use this template or creating similar ones to maintain high delivery rates and maximize campaign performance."},[r.UNKNOWN]:{Icon:t,title:"No quality data available",sublineTextType:s,sublineColor:n.content.secondary,subline:"There is currently no quality data available for this template. This may be due to insufficient usage or recent creation. We recommend monitoring its performance over time to gather insights and optimize future campaigns."}},l=[{title:"Sent",icon:a,valName:"totalSent"},{title:"Delivered",icon:i,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:o,valName:"totalReads",percentValName:"readPercentage"}];export{l as ANALYTICS_ENGAGEMENT_MAP,m as TEMPLATE_QUALITY_MAP};

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

@@ -0,0 +1,3 @@
+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))";
+export declare const UNSUBSCRIBE_URL_VARIABLE = "{{unsubscribeUrl}}";

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

@@ -0,0 +1 @@
+const e="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",a="((staticPlaceholderName))",b="{{unsubscribeUrl}}";export{e as BACKGROUND_PREVIEW_IMAGE,a as STATIC_URL_VARIABLE_NAME,b as UNSUBSCRIBE_URL_VARIABLE};

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

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

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

@@ -0,0 +1 @@
+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/getPreviewDimension.js

@@ -0,0 +1 @@
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";const r=r=>{switch(r){case e.WHATSAPP:return 240;case e.SMS:return 300;case e.EMAIL:return 360;case e.RCS:return 240;default:return 300}};export{r as getPreviewWidth};

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/getVariableNameEmail.js

@@ -0,0 +1 @@
+const o=o=>"connectors_variable_"+o;export{o as getVariableNameForEmailByIndex};

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

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

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

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

@@ -0,0 +1 @@
+const t=t=>new RegExp("^(https?://)?([a-z0-9-]+\\.)+[a-z]{2,}(\\.[a-z]{2,})?(\\:[0-9]+)?(/[\\w@.-]*)*$","i").test(t),e=t=>/^{{.*}}$/.test(t);export{e as isVariable,t as validateIsUrl};

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-context-mapper/utils/validateName.js

@@ -0,0 +1 @@
+const t=t=>!!/[^a-zA-Z0-9._ ]/.test(t),e=t=>{const e=/[^a-zA-Z0-9._ {}]/.test(t),s=t.match(/\{\{[a-zA-Z0-9._]+\}\}/g)||[],n=s.every((t=>t.startsWith("{{")&&t.endsWith("}}")));return!(!(e||t.includes("{{")&&0===s.length)&&n)};export{t as validateInputName,e as validateInputNameChatbot};

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/EmailTemplatePreview.styled.js

@@ -0,0 +1,48 @@
+import r from"styled-components";import{COLORS as o,BASE_COLORS as e}from"../../constants/Theme.js";const t=r.div`
+	padding: 16px;
+	padding-bottom: 12px;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border: 1px solid ${o.stroke.primary};
+`,d=r.div`
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-left: 1px solid ${o.stroke.primary};
+	border-right: 1px solid ${o.stroke.primary};
+	border-top-color: ${o.stroke.primary};
+	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
+	overflow: scroll;
+`,i=r.div`
+	width: 100%;
+	height: 100%;
+	background-color: ${e.grayscale[100]};
+`,p=r.div`
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	min-height: 180px;
+	border-left: 1px solid ${o.stroke.primary};
+	border-right: 1px solid ${o.stroke.primary};
+
+	border-radius: ${r=>r.applyBorderBottom?"0 0 8px 8px":"unset"};
+	border-bottom: ${r=>r.applyBorderBottom?`1px solid ${o.stroke.primary}`:""};
+`,s=r.div`
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	background: ${o.surface.standard};
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border: 1px solid ${o.stroke.primary};
+`,a=r.div`
+	border-radius: 4px;
+	background-color: ${o.surface.standard};
+	margin-top: ${r=>r.hideHeader?0:16};
+	display: flex;
+	flex-direction: column;
+`;export{i as CardLoadingContainer,a as EmailContainer,t as Header,p as IframeContainer,d as ImageContainer,s as ViewButton};

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

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

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

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

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

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

@@ -0,0 +1,128 @@
+import e from"styled-components";import{COLORS as t}from"../../../constants/Theme.js";e.div`
+	background-color: ${e=>e.isCarousal?"#E0E0E0":"white"};
+	border-radius: 4px;
+	position: relative;
+	height: ${e=>e.isCarousal?"100%":"auto"};
+`;const r=e.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 12px;
+	color: ${t.content.primary};
+	word-wrap: break-word;
+`,o=e(r)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,i=e(r)`
+	font-weight: 600;
+`,n=e.div`
+	background: ${t.surface.standard};
+	border-radius: 12px;
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: ${e=>e.isHorizontalOrientation?"row":"column"};
+
+	${e=>e.needBorder?e.showDashedBorder?`border: 2px dashed ${t.content.brand};`:e.hasError?`border: 2px solid ${t.content.negative};`:e.showBorder?`border: 2px solid ${t.stroke.brand};`:`border: 2px solid ${t.stroke.primary};`:"border: none;"}
+
+	:hover {
+		${e=>{if(e.isPreview||!e.needBorder)return"";return`\n\t\t\t\tborder: 2px ${e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"} ${t.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`}}
+	}
+
+	.text--template {
+		border: 2px solid ${t.stroke.primary};
+		border-radius: 12px;
+		flex: 1;
+	}
+`,d=e.div`
+	padding: 12px 0px;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+`,a=e.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: ${e=>e.isHorizontal?"":"4px"};
+	width: ${e=>e.isHorizontal?"50%":"auto"};
+`,p=e.div`
+	border-radius: 12px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	padding: 4px;
+	background-color: #ede7e8;
+	margin: 4px;
+	max-width: 200px;
+`,s=e.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	margin-left: 4px;
+	max-width: 180px;
+`,l=e.p`
+	white-space: nowrap;
+	color: #4c5567;
+	max-width: 100px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0px;
+	margin: 0px;
+	font-size: 12px;
+	font-weight: 500;
+	line-width: 20px;
+`,x=e.div`
+	border: 1px solid ${t.stroke.primary};
+	position: relative;
+	height: 500px;
+	overflow-y: auto;
+	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`
+	height: 50px;
+	background-color: ${t.background.inactive};
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,f=e.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,h=e.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,g=e.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,m=e.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	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,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};