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

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>;

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

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

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

package/dist/cjs/components/template-preview/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.d.ts

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

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

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

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

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

package/dist/cjs/components/template-preview/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,28 @@
+import React from 'react';
+import { CHANNEL_TYPE } from './models/Channels';
+import { EmailMeta } from './models/EmailTemplate';
+import { SMSMeta } from './models/SmsTemplate';
+import { AllTemplateTypes } from './models/types';
+import { WebpushMetaType } from './models/WebpushTemplate';
+import { WhatsappMeta } from './models/WhatsAppTemplate';
+export interface TemplatePreviewProps {
+    template?: AllTemplateTypes;
+    channel: CHANNEL_TYPE;
+    onlyTemplateContent?: boolean;
+    outsidePreview?: boolean;
+    templateCreationsInfo?: boolean;
+    whatsAppSpecificMeta?: WhatsappMeta;
+    emailSpecificMeta?: EmailMeta;
+    smsSpecificMeta?: SMSMeta;
+    hideHeader?: boolean;
+    size?: 'small' | 'large';
+    templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    applyBorderBottom?: boolean;
+    webPushSpecificMeta?: WebpushMetaType;
+    hidePointerEvents?: boolean;
+}
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, webPushSpecificMeta, hidePointerEvents, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

@@ -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,Object.assign({color:i.COLORS.content.primaryInverse},{children:"Brand name"})),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.primaryInverse})]});

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

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

package/dist/cjs/components/template-preview/WhatsApp/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.d.ts

@@ -0,0 +1,3 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+declare const ChatUI: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
+export default ChatUI;

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

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

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

@@ -0,0 +1,21 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    showDashedBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+}, never>;
+export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const FooterText: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MediaNameAbsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DownloadMediaIconHolder: import("styled-components").StyledComponent<"div", any, {}, never>;

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;

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

@@ -0,0 +1,3 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const HtmlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/chevronDownOutline.svg.js"),r=require("../../../assets/icons/copy-code-icon.svg.js"),s=require("../../../assets/icons/halfRectangle.svg.js"),i=require("../../../assets/icons/phone.svg.js"),a=require("../../../assets/icons/qrb.svg.js"),o=require("../../../assets/icons/RedirectToNew.svg.js"),l=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),d=require("../../tooltips/Tooltip.js"),p=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),x=require("../helpers/VariableEditorHelper.js"),c=require("../models/TemplateMeta.js"),h=require("./ChatBtn.js"),m=require("./ChatUI.style.js"),j=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),f=require("./MediaCard.js");function C(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var T=C(l);const y=T.default.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -7.7px;
+	top: -8px;
+`,g=T.default.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 8px 12px 0px;
+	color: ${u.COLORS.content.primary};
+	word-wrap: break-word;
+`,v=T.default(g)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,E=new x.VariableEditorHelper;exports.ChatUIV2=l=>{const{bodyText:u,footerText:x,headerMediaType:C,headerText:T,headerAssetLink:O,headerAssetName:I,quickReplybtn:S,ctaBtn:L,actionTypes:_,extras:q,showHeader:P,imagePreviewStyles:b,size:w,bodyVariableList:A,headerVariableList:M,buttons:N,limitedTimeOfferComponent:R,carouselCardIndex:H,isWhatsappCarousel:B,isPreview:Y,children:D,hideFooter:F=!1}=l,U=E.format(null==u?void 0:u.replace(/</g,"&lt;").replace(/>/g,"&gt;"),A),V=E.format(null==T?void 0:T.replace(/</g,"&lt;").replace(/>/g,"&gt;"),M),{selectedCarouselIndex:k,isProductCarouselType:z,errorIndexes:W,isCarouselHovered:K}=n.useTemplateModalContext(),Q={COPY_CODE:r.default,PHONE_NUMBER:i.default,URL:o.default,QUICK_REPLY:a.default,VOICE_CALL:i.default,CALL_PERMISSION:t.default};return e.jsxs(m.Container,Object.assign({isCarouselCard:null!=H&&H>-1,showBorder:null!=H&&H===k||z&&null!=H&&H>-1&&null!=k&&k>-1,hasError:null==W?void 0:W.includes(null!=H?H:-2),isWhatsappCarousel:B,isPreview:Y,showDashedBorder:z&&K&&(null!=k?k:-1)<0&&(null!=H?H:-1)>-1},{children:[!B&&e.jsx(y,{children:e.jsx(s.default,{color:"white",height:8,width:8})}),C===c.HEADER_TYPES.TEXT?e.jsx(v,{dangerouslySetInnerHTML:{__html:V}}):C!==c.HEADER_TYPES.NONE?e.jsx(f.MediaCard,{headerAssetLink:O,headerAssetName:I,mediaType:C,imagePreviewStyles:C===c.HEADER_TYPES.IMAGE?b:{}}):e.jsx(e.Fragment,{}),(null==R?void 0:R.dateTime)?e.jsx(j.LimitedTimeOffer,{text:R.text,dateTime:R.dateTime,code:R.code}):e.jsx(e.Fragment,{}),!!u&&e.jsx(e.Fragment,{children:e.jsx(g,{dangerouslySetInnerHTML:{__html:U},style:{flex:1}})}),D,!F&&e.jsxs(m.FooterWrapper,{children:[e.jsx(d.Tooltip,Object.assign({body:null!=x?x:"",placement:"top"},{children:e.jsx(m.FooterText,Object.assign({style:{flex:1}},{children:x}))})),e.jsx(m.TimeStamp,{children:"16:48"})]}),N&&N.length>0?N.map(((t,r)=>e.jsx(h.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:Q[t.type],size:w,iconPosition:"CALL_PERMISSION"===t.type?"right":"left",textTypography:"CALL_PERMISSION"===t.type?p.TitleSmall:void 0},r))):_===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==S?void 0:S.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):_===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==L?void 0:L.map(((t,r)=>e.jsx(h.ChatBtn,{textTypography:P?p.Caption:p.BodySecondary,extraContent:q?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?i.default:o.default,size:w},r)))}):e.jsx(e.Fragment,{})]}))},exports.HtmlContainer=g;

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

@@ -0,0 +1,9 @@
+import { CreateTemplateType } from '../../models/WhatsAppTemplate';
+/**
+ * Renders Limited Time Offer component
+ * Type of props is infered from template
+ */
+export declare const LimitedTimeOffer: (props: CreateTemplateType['limitedTimeOfferComponent']) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledLimitedOfferTime: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../assets/icons/lto_icon.svg.js"),r=require("styled-components"),n=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(r);const d=o.default.div`
+	display: flex;
+	flex-direction: row;
+	background: #f6f6f6;
+	margin: 0px 10px;
+	overflow: hidden;
+	align-items: center;
+`,l=o.default.div`
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: #d8f0e7;
+	margin: 5px;
+`,c=o.default.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+`;exports.LimitedTimeOffer=r=>{const{text:s,dateTime:o,code:a}=r;return e.jsxs(d,{children:[e.jsx(l,{children:e.jsx(t.default,{width:24,height:24,style:{display:"flex"}})}),e.jsxs(c,{children:[e.jsx(n.BodySecondary,Object.assign({numberOfLines:2,color:i.COLORS.content.primary},{children:s})),e.jsxs(n.BodyTiny,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:i.COLORS.content.secondary},{children:["Offer Ends on ",o]})),e.jsxs(n.BodyTiny,Object.assign({numberOfLines:2,color:i.COLORS.content.placeholder},{children:["Code ",a]}))]})]})},exports.StyledLimitedOfferTime=d,exports.StyledLtoIcon=l,exports.StyledLtoText=c;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../shimmer-image/ShimmerImage.js"),a=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),o=require("./ChatUI.style.js");const c=t=>{let{headerAssetName:c,mediaType:l}=t;const h=l===n.HEADER_TYPES.IMAGE?r.default:l===n.HEADER_TYPES.VIDEO?i.default:s.default;return e.jsxs(o.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:d.COLORS.icon.placeholder}),!!c&&e.jsx(a.BodySecondary,Object.assign({style:{color:d.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:i,mediaType:a,imagePreviewStyles:d}=s;if(!r||a===n.HEADER_TYPES.DOCUMENT)return e.jsx(c,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:a}));return e.jsx(o.MediaContainer,{children:a===n.HEADER_TYPES.IMAGE?e.jsx(t.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):a===n.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;

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

@@ -0,0 +1,6 @@
+export interface RenderTemplateWithVariableInterface {
+    text?: string;
+    bold?: boolean;
+}
+declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => import("react/jsx-runtime").JSX.Element;
+export default RenderTemplateWithVariable;

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

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),s=require("../constants/regexPatterns.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=a(t).default.div`
+	padding: 8px 12px 0px;
+	/* display: inline; */
+`;exports.default=t=>{const{text:a,bold:i}=t,o=null==a?void 0:a.match(s.templateVariablePattern),d=i?{fontWeight:"600"}:{};return a?e.jsx(l,{children:a.split(s.templateVariablePattern).map(((t,s)=>e.jsxs(e.Fragment,{children:[e.jsx(r.BodyRegular,Object.assign({style:d},{children:t})),!!(null==o?void 0:o[s])&&e.jsx(r.BodyRegular,Object.assign({style:Object.assign({color:n.COLORS.content.brand},d)},{children:null==o?void 0:o[s]}))]})))}):e.jsx(e.Fragment,{})};

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

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

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

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),a=require("../utils/getPreviewPropLen.js"),i=require("./ChatHeader.js"),o=require("./ChatUI.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const p=n.default.div`
+	background-image: url('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');
+	border: ${e=>e.showHeader?0:1}px solid
+		${s.COLORS.stroke.primary};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+`,l=n.default(t.TitleRegular)`
+	color: ${s.COLORS.content.primary};
+`;exports.WhatsappLikePreview=r=>3===a.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsx(i.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(l,{children:"Preview"})})),e.jsx(o.default,Object.assign({showHeader:r.showHeader},r))]}))]}))});

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

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

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

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/phone_round.svg.js"),r=require("styled-components"),s=require("../../template-context-mapper/context/templateModalContext.js"),a=require("../../template-context-mapper/utils/constants.js"),i=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),l=require("../utils/getPreviewPropLen.js"),p=require("./ChatHeader.js"),d=require("./ChatUI.style.js"),c=require("./ChatUiV2.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=x(r);const u=h.default.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a.BACKGROUND_PREVIEW_IMAGE})`};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+`,j=h.default(i.TitleRegular)`
+	color: ${o.COLORS.content.primary};
+`,g=h.default.div`
+	margin: 4px;
+	margin-top: -4px;
+	background-color: ${o.BASE_COLORS.grayscale[50]};
+	border-radius: 6px;
+	.flex-align-center-gap {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+`;exports.WhatsappLikePreviewV2=r=>{const{hideDeviceContainerInPreview:a}=s.useTemplateModalContext();return 3===l.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):a?e.jsx(c.ChatUIV2,Object.assign({showHeader:r.showHeader},r)):e.jsx(e.Fragment,{children:e.jsxs(u,Object.assign({style:r.containerStyle,showHeader:r.showHeader,isWhatsappCarousel:r.isWhatsappCarousel},{children:[r.showHeader&&e.jsx(p.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":`16px ${r.isWhatsappCarousel?"0px":"56px"} ${r.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(j,{children:"Preview"})})),e.jsx(c.ChatUIV2,Object.assign({showHeader:r.showHeader},r)),r.showCallPermissionCard&&e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(c.ChatUIV2,Object.assign({hideFooter:!0,headerMediaType:n.HEADER_TYPES.NONE,textType:"html",isPreview:r.isPreview,zeroStateComponent:e.jsx(e.Fragment,{}),buttons:[{text:"Choose preference",type:"CALL_PERMISSION",flowId:"",flowName:""}]},{children:e.jsxs(g,{children:[e.jsxs(c.HtmlContainer,Object.assign({className:"flex-align-center-gap"},{children:[e.jsx(t.default,{width:30,height:30}),e.jsx(i.TitleSmall,{children:r.callPermissionText?`${r.callPermissionText}`:'Can Make "Merchant Name" call you?'})]})),e.jsxs(d.FooterWrapper,{children:[e.jsx(d.FooterText,{style:{flex:1}}),e.jsx(d.TimeStamp,{children:"16:48"})]})]})}))}))]}))]}))})};