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

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

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

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.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"),i=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 r=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var n=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../../TypographyStyle.js");const l={[n.TEMPLATE_QUALITY.YELLOW]:{icon:e.default,title:"Medium quality template",sublineTextType:s.Caption,sublineColor:r.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"},[n.TEMPLATE_QUALITY.RED]:{icon:e.default,title:"Low quality template",sublineTextType:s.Caption,sublineColor:r.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"},[n.TEMPLATE_QUALITY.GREEN]:{icon:"",title:"",sublineTextType:s.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:i.default,valName:"totalReads",percentValName:"readPercentage"}];exports.ANALYTICS_ENGAGEMENT_MAP=o,exports.TEMPLATE_QUALITY_MAP=l;

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

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

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

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

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

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

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.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.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,r){const m=document?.getElementById("mobile"===r?"template_html_mobile":"template_html_desktop"),s=n===e.CHANNEL_TYPE.EMAIL?m?.contentWindow?.document.getElementById(t):document.getElementById(t);if(s){const e=s.style.backgroundColor;s.style.backgroundColor=o,setTimeout((function(){s.style.backgroundColor=e}),1e3*l)}};

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

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

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

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

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,{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.js

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

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

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;
+`,c=o.default.div`
+	border: 1px solid ${t.COLORS.stroke.primary};
+	position: relative;
+	height: 500px;
+	overflow-y: auto;
+	border-radius: ${e=>e.borderRadius??"8px"};
+	box-shadow: 0px 2px 8px 0px #0000001f;
+	background-color: white;
+`,u=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=u,exports.HeaderTextContainer=n,exports.IconContainer=g,exports.LeftContainer=h,exports.PdfComineText=x,exports.PdfText=f,exports.RCSCarousalContainer=c,exports.RCSChatBtnContainer=s,exports.RCSMediaContainer=p,exports.RCSPdfContainer=l,exports.RCSPreviewContainer=d,exports.RcsHtmlContainer=i,exports.SubTitle=m,exports.TitleContainer=b,exports.TitleTextContainer=a;

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

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

package/dist/cjs/components/template-preview/SMS/SMSBubble.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/union.svg.js"),r=require("styled-components"),s=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(r);const i=n.default.div`
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	left: -10px;
+	bottom: -1px;
+`,a=n.default.div`
+	padding: 12px;
+	background: ${s.COLORS.background.base};
+	border-radius: 16px;
+	position: relative;
+`;exports.SMSContainer=a,exports.SideCaret=i,exports.default=r=>{const{content:o,size:n}=r;return e.jsxs(a,{children:[e.jsx(i,{children:e.jsx(t.default,{color:s.COLORS.background.base,height:27,width:27})}),e.jsx("div",{style:{fontSize:"small"===n?12:14},dangerouslySetInnerHTML:{__html:o}})]})};

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

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

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

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=d(e);t.default.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -5px;
+	bottom: 2px;
+`;const o=t.default.div`
+	padding: ${e=>"small"===e.size?"12px 32px 12px 12px":"16px 56px 12px 16px"};
+	background: ${r.COLORS.surface.standard};
+	border-radius: 4px;
+`,a=t.default.div`
+	padding: 16px;
+	background: ${r.COLORS.surface.standard};
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border-bottom: 1px solid ${r.COLORS.stroke.primary};
+`;t.default.div`
+	border: 1px solid ${r.COLORS.stroke.primary};
+	height: 100%;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+`,t.default.div`
+	margin-top: ${e=>e.hideHeader?0:"16px"};
+	border-radius: 4px;
+	border-color: ${r.COLORS.stroke.primary};
+	border-width: ${e=>e.outsidePreview?0:"1px"};
+`,t.default.div`
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	left: -10px;
+	bottom: -1px;
+`,t.default.div`
+	padding: 12px;
+	background: ${r.COLORS.background.base};
+	border-radius: 16px;
+`;const p=t.default.div`
+	padding: 10px;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	background: ${r.COLORS.surface.standard};
+	display: flex;
+	justify-content: space-between;
+	border-bottom: 1px solid ${r.COLORS.background.base};
+`;exports.SMSBubbleContainer=o,exports.SMSCardHeader=a,exports.SMSHeader=p;

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

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

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

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

package/dist/cjs/components/template-preview/WhatsApp/ChatBtn.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"),n=require("./ChatUI.style.js");exports.ChatBtn=({Icon:l,text:i,extraContent:o,placeholder:s,textTypography:a,size:c})=>{const p=a||t.BodySecondary;return e.jsx(n.ChatBtnContainer,{children:e.jsxs("div",{style:{textAlign:"center",maxWidth:"100%"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},children:[l&&e.jsx(l,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(p,{style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===c?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:i})]}),!!o&&e.jsx(t.Caption,{style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:s?(d=s,d.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))):o})]})});var d};

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

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

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

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e);const o=i.default.div`
+	height: 50px;
+	background-color: #008069;
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,r=i.default.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,a=i.default.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,p=i.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,s=i.default.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.COLORS.content.primaryInverse};
+	margin-bottom: 0px;
+`;exports.HeaderContainer=o,exports.IconContainer=a,exports.LeftContainer=r,exports.SubTitle=s,exports.TitleContainer=p;

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

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

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default.div`
+	background: ${r.COLORS.surface.standard};
+	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
+	border-top-right-radius: 12px;
+	border-bottom-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	position: relative;
+	padding: 8px 0px;
+	border: 2px solid
+		${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.stroke.primary}`};
+	border: ${e=>e.showDashedBorder&&`2px dashed ${r.COLORS.content.brand}`};
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+	display: flex;
+	flex-direction: column;
+	:hover {
+		border: 2px
+			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
+			${r.COLORS.stroke.brand};
+		box-shadow: ${e=>!e.isPreview&&"4px 4px 12px rgba(0, 0, 0, 0.25)"};
+	}
+`,d=i.default(t.Caption)`
+	color: ${r.COLORS.content.secondary};
+	max-width: 80px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-wrap: wrap;
+`,s=i.default(d)`
+	max-width: 200px;
+`,p=i.default.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: 4px;
+	margin: 0px 8px;
+`,n=i.default.div`
+	padding: 12px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border-top: 1px solid ${r.COLORS.stroke.primary};
+`,l=i.default.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 8px 12px;
+`;i.default.div`
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	text-align: center;
+	width: 100%;
+	padding: 10px;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: start;
+	background: ${r.COLORS.surface.hovered};
+	border-bottom-right-radius: 8px;
+	border-bottom-left-radius: 8px;
+`,i.default.div`
+	position: absolute;
+	top: 16px;
+	right: 16px;
+`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterText=s,exports.FooterWrapper=l,exports.MediaContainer=p,exports.TimeStamp=d;