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

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

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

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/useEditWhtasappTemplateMedia.js

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

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

@@ -0,0 +1,7 @@
+export declare const TemplateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightPanelContainer: import("styled-components").StyledComponent<"div", any, {}, 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/cjs/components/template-context-mapper/styles/TemplateAnalyticsStyles.js

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);const a=r.default.div`
+	display: flex;
+	padding: 16px 0px;
+`,o=r.default.div`
+	max-width: 450px;
+	height: 456px;
+	min-width: 358px;
+	overflow-y: auto;
+	border-left: ${i.COLORS.stroke.primary} 1px solid;
+	padding: 0px 23px 32px 23px;
+	gap: 16px;
+	.each--analytics--container {
+		border: 1px solid ${i.COLORS.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: ${i.COLORS.background.brandLight};
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+	}
+	.align--center {
+		align-items: center;
+	}
+`,p=r.default.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: ${i.COLORS.background.warning.light};
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+`,d=r.default(t.TitleMedium)`
+	white-space: nowrap;
+	max-width: 161px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;exports.CustomTitleMedium=d,exports.LeftPanelContainer=p,exports.RightPanelContainer=o,exports.TemplateContainer=a;

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

@@ -0,0 +1,44 @@
+/// <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: string;
+        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/cjs/components/template-context-mapper/utils/TemplateConstants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../assets/icons/alert_triangle.svg.js"),t=require("../../../assets/icons/send_template.svg.js"),a=require("../../../assets/icons/tick.svg.js"),r=require("../../../assets/icons/tick_double.svg.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var s=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var l=require("../../TypographyStyle.js");const n={[s.TEMPLATE_QUALITY.YELLOW]:{icon:e.default,title:"Medium quality template",sublineTextType:l.Caption,sublineColor:i.COLORS.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"},[s.TEMPLATE_QUALITY.RED]:{icon:e.default,title:"Low quality template",sublineTextType:l.Caption,sublineColor:i.COLORS.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"},[s.TEMPLATE_QUALITY.GREEN]:{icon:"",title:"",sublineTextType:l.TitleSmall,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."}},o=[{title:"Sent",icon:t.default,valName:"totalSent"},{title:"Delivered",icon:a.default,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:r.default,valName:"totalReads",percentValName:"readPercentage"}];exports.ANALYTICS_ENGAGEMENT_MAP=o,exports.TEMPLATE_QUALITY_MAP=n;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.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",exports.STATIC_URL_VARIABLE_NAME="((staticPlaceholderName))";

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

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

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

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

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

@@ -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/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.js

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../template-preview/models/Channels.js");exports.getPreviewWidth=r=>{switch(r){case e.CHANNEL_TYPE.WHATSAPP:return 240;case e.CHANNEL_TYPE.SMS:return 300;case e.CHANNEL_TYPE.EMAIL:return 360;case e.CHANNEL_TYPE.RCS:return 240;default:return 300}};

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getVariableNameForEmailByIndex=e=>"connectors_variable_"+e;

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.isVariable=e=>/^{{.*}}$/.test(e),exports.validateIsUrl=e=>new RegExp("^(https?://)?([a-z0-9-]+\\.)+[a-z]{2,}(\\.[a-z]{2,})?(\\:[0-9]+)?(/[\\w@.-]*)*$","i").test(e);

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateInputName=t=>!!/[^a-zA-Z0-9._ ]/.test(t),exports.validateInputNameChatbot=t=>{const e=/[^a-zA-Z0-9._ {}]/.test(t),a=t.match(/\{\{[a-zA-Z0-9._]+\}\}/g)||[],s=a.every((t=>t.startsWith("{{")&&t.endsWith("}}")));return!(!(e||t.includes("{{")&&0===a.length)&&s)};

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

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

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

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

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js

@@ -0,0 +1,48 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-components"),e=require("../../constants/Theme.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=t(r);const d=o.default.div`
+	padding: 16px;
+	padding-bottom: 12px;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border: 1px solid ${e.COLORS.stroke.primary};
+`,i=o.default.div`
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-left: 1px solid ${e.COLORS.stroke.primary};
+	border-right: 1px solid ${e.COLORS.stroke.primary};
+	border-top-color: ${e.COLORS.stroke.primary};
+	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
+	overflow: scroll;
+`,a=o.default.div`
+	width: 100%;
+	height: 100%;
+	background-color: ${e.BASE_COLORS.grayscale[100]};
+`,s=o.default.div`
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	min-height: 180px;
+	border-left: 1px solid ${e.COLORS.stroke.primary};
+	border-right: 1px solid ${e.COLORS.stroke.primary};
+
+	border-radius: ${r=>r.applyBorderBottom?"0 0 8px 8px":"unset"};
+	border-bottom: ${r=>r.applyBorderBottom?`1px solid ${e.COLORS.stroke.primary}`:""};
+`,p=o.default.div`
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	background: ${e.COLORS.surface.standard};
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border: 1px solid ${e.COLORS.stroke.primary};
+`,l=o.default.div`
+	border-radius: 4px;
+	background-color: ${e.COLORS.surface.standard};
+	margin-top: ${r=>r.hideHeader?0:16};
+	display: flex;
+	flex-direction: column;
+`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=s,exports.ImageContainer=i,exports.ViewButton=p;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,128 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);o.default.div`
+	background-color: ${e=>e.isCarousal?"#E0E0E0":"white"};
+	border-radius: 4px;
+	position: relative;
+	height: ${e=>e.isCarousal?"100%":"auto"};
+`;const i=o.default.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 12px;
+	color: ${t.COLORS.content.primary};
+	word-wrap: break-word;
+`,n=o.default(i)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,a=o.default(i)`
+	font-weight: 600;
+`,d=o.default.div`
+	background: ${t.COLORS.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.COLORS.content.brand};`:e.hasError?`border: 2px solid ${t.COLORS.content.negative};`:e.showBorder?`border: 2px solid ${t.COLORS.stroke.brand};`:`border: 2px solid ${t.COLORS.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.COLORS.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.COLORS.stroke.primary};
+		border-radius: 12px;
+		flex: 1;
+	}
+`,s=o.default.div`
+	padding: 12px 0px;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+`,p=o.default.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"};
+`,l=o.default.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;
+`,x=o.default.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	margin-left: 4px;
+	max-width: 180px;
+`,f=o.default.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;
+`,u=o.default.div`
+	border: 1px solid ${t.COLORS.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=o.default.div`
+	height: 50px;
+	background-color: ${t.COLORS.background.inactive};
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,h=o.default.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,g=o.default.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,b=o.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,m=o.default.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.COLORS.content.secondary};
+	margin-bottom: 0px;
+`;exports.HeaderContainer=c,exports.HeaderTextContainer=n,exports.IconContainer=g,exports.LeftContainer=h,exports.PdfComineText=x,exports.PdfText=f,exports.RCSCarousalContainer=u,exports.RCSChatBtnContainer=s,exports.RCSMediaContainer=p,exports.RCSPdfContainer=l,exports.RCSPreviewContainer=d,exports.RcsHtmlContainer=i,exports.SubTitle=m,exports.TitleContainer=b,exports.TitleTextContainer=a;

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

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