@bikdotai/bik-component-library 0.0.736-beta.7 → 0.0.736-beta.8

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

@@ -1 +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=({Icon:i,text:n,extraContent:o,placeholder:l,textTypography:s,size:c})=>{const a=s||t.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:r.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(a,{style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===c?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:n})})]}),!!o&&e.jsx(t.Caption,{style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:l?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,function(e){return e.toUpperCase()})}(l):o})]})})};
+"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

@@ -1 +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})]});
+"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

@@ -1 +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"),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 s.VariableEditorHelper;exports.RCSChatPreview=s=>{const{bodyText:p,titleText:C,headerMediaType:h,headerText:m,headerAssetLink:x,headerAssetName:E,imagePreviewStyles:T,size:c,bodyVariableList:j,headerVariableList:g,buttons:S,carouselCardIndex:A,isWhatsappCarousel:v,isPreview:R,titleVariableList:H,templateConfiguration:M}=s,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:N,isProductCarouselType:w,errorIndexes:D,isCarouselHovered:L}=t.useTemplateModalContext(),q=r.useMemo(()=>a.isRichAndCarouselCards(null==M?void 0:M.templateType),[null==M?void 0:M.templateType]),b=r.useMemo(()=>"HORIZONTAL"==(null==M?void 0:M.orientation),[M]);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:null==D?void 0:D.includes(null!=A?A:-2),isWhatsappCarousel:v,isPreview:R,showDashedBorder:w&&L&&(null!=N?N:-1)<0&&(null!=A?A:-1)>-1,needBorder:q,isHorizontalOrientation:b,children:[!b&&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:E,mediaType:h,imagePreviewStyles:h===l.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:_}})}),!!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,{headerAssetLink:x,headerAssetName:E}):e.jsx(e.Fragment,{})]}),S&&S.length>0?a.isRichAndCarouselCards(null==M?void 0:M.templateType)?e.jsx(e.Fragment,{children:S.map((r,t)=>e.jsx(i.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!==l.HEADER_TYPES.NONE&&x&&h!==l.HEADER_TYPES.DOCUMENT&&e.jsx(d.RCSMediaCard,{headerAssetLink:x,headerAssetName:E,mediaType:h,imagePreviewStyles:h===l.HEADER_TYPES.IMAGE?T:{},isHorizontal:b})]})};
+"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

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

@@ -1,8 +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"),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(r);const d=l.default.div`
+"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=r=>{const{hideDeviceContainerInPreview:s}=t.useTemplateModalContext();return 3===i.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):s?e.jsx(n.RCSChatPreview,Object.assign({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(n.RCSChatPreview,Object.assign({showHeader:r.showHeader},r))]})]})})};
+`;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/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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/arrow_left.svg.js"),l=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),s=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=({template:u,variableStore:c,hideHeader:h,display_content:x,onlyTemplateContent:j,size:p,uniqueId:v})=>{var S;const m=null==u?void 0:u.content,{hideDeviceContainerInPreview:y}=i.useTemplateModalContext();return y?e.jsx(d.SMSBubbleContainer,{size:p,children:e.jsx(o.default,{size:null!=p?p:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=c?c:[],void 0,null!=v?v:"")})}):e.jsxs(e.Fragment,{children:[!h&&!j&&e.jsx(d.SMSCardHeader,{children:e.jsx(n.TitleRegular,{style:{maxWidth:"100%"},children:u.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:s.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",{style:{display:"flex",flexDirection:"row",gap:8},children:[e.jsx(t.default,{width:16,height:16,color:s.COLORS.content.secondary}),e.jsx(l.default,{width:16,height:16,color:s.COLORS.content.secondary})]})]})}),e.jsx(d.SMSBubbleContainer,{size:p,children:e.jsx(o.default,{size:null!=p?p:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=c?c:[],void 0,null!=v?v:"")})})]})};
+"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/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

@@ -1 +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=({template:c,channel:m,whatsAppSpecificMeta:v,templateCreationsInfo:h,hideHeader:C,size:j,onlyTemplateContent:x,emailSpecificMeta:g,smsSpecificMeta:y,showSampleValues:S,carouselCardIndex:b,isWhatsappCarousel:T,isPreview:w,applyBorderBottom:P,webPushSpecificMeta:f,hidePointerEvents:E})=>{var H,O;const{setSelectedCarouselIndex:A}=t.useTemplateModalContext();return m===r.CHANNEL_TYPE.SMS?e.jsx("div",{style:Object.assign({marginTop:h?16:0,border:h?`1px solid ${i.COLORS.stroke.primary}`:"none",borderRadius:4},null==y?void 0:y.templateContainerStyles),children:e.jsx(o.default,{template:c,hideHeader:C,onlyTemplateContent:x,size:null!=j?j:"large",variableStore:null==y?void 0:y.smsVariableStore,display_content:null==y?void 0:y.smsDisplayContent,uniqueId:null==y?void 0:y.uniqueId})}):m===r.CHANNEL_TYPE.EMAIL?e.jsx("div",{style:Object.assign({marginTop:h?16:0},null==g?void 0:g.templateContainerStyles),children:e.jsx(s.default,{template:c,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:C,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId,applyBorderBottom:P,hidePointerEvents:E})}):m===r.CHANNEL_TYPE.WHATSAPP||m===r.CHANNEL_TYPE.RCS?e.jsxs("div",{style:Object.assign(Object.assign(Object.assign({},null==v?void 0:v.templateContainerStyles),h?p.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(A&&T){if(-1===b&&!(null===(t=null===(e=null==c?void 0:c.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;A(null!=b?b:-1)}},children:[h?e.jsx("div",{style:{padding:16},children:e.jsx(n.TitleRegular,{children:l.default.convertToTitleCase(null!==(H=null==c?void 0:c.label)&&void 0!==H?H:"")})}):e.jsx(e.Fragment,{}),e.jsx(u.default,{showSampleValues:S,showHeader:null==v?void 0:v.showWhatsAppHeader,extras:null==v?void 0:v.whatsAppExtras,template:c,size:h?"small":null!=j?j:"large",containerStyle:Object.assign(Object.assign({borderWidth:h?0:1,borderTopWidth:1},null!==(O=null==v?void 0:v.containerStyle)&&void 0!==O?O:{}),{height:"100%"}),zeroStateComponent:null==v?void 0:v.zeroStateComponent,usePlaceHolderName:null==v?void 0:v.usePlaceHolderName,carouselCardIndex:b,isWhatsappCarousel:T,isPreview:w,channel:m}),!!(null==c?void 0:c.aiContentConfigId)&&e.jsx("div",{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})})]}):m==r.CHANNEL_TYPE.WEBPUSH?e.jsx("div",{style:Object.assign({},null==f?void 0:f.containerStyle),children:e.jsx(d.default,{template:c,extraContainerCss:null==f?void 0:f.extraContainerCss})}):e.jsx(e.Fragment,{})};
+"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

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

@@ -1 +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})]});
+"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/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

@@ -1,7 +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"),i=require("../../../assets/icons/RedirectToNew.svg.js"),s=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"),p=require("../models/TemplateMeta.js"),c=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`
+"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:w,extras:C,showHeader:A,imagePreviewStyles:N,size:b,children:F,isPreview:M}=a,P=new d.WhatsAppFormatToHTML,_=s.useMemo(()=>({color:l.COLORS.content.primary,margin:12,fontSize:A?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,{isPreview:M,children:[e.jsx(j,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===p.HEADER_TYPES.TEXT?e.jsx(u.default,{bold:!0,text:null==g?void 0: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,{}),!!T&&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(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,{body:null!=m?m:"",placement:"top",children:e.jsx(h.FooterText,{style:{flex:1},children:m})}),e.jsx(h.TimeStamp,{children:"16:48"})]}),E===p.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map((t,r)=>e.jsx(c.ChatBtn,{text:t.text},r))}):E===p.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==q?void 0:q.map((t,s)=>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:i.default,size:b},s))}):e.jsx(e.Fragment,{})]})};
+`;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/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

@@ -1,4 +1,4 @@
-"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"),f=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),j=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`
+"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;
@@ -16,4 +16,4 @@
 `,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:I,headerAssetName:S,quickReplybtn:L,ctaBtn:_,actionTypes:q,extras:O,showHeader:P,imagePreviewStyles:w,size:b,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,{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(j.MediaCard,{headerAssetLink:I,headerAssetName:S,mediaType:C,imagePreviewStyles:C===c.HEADER_TYPES.IMAGE?w:{}}):e.jsx(e.Fragment,{}),(null==R?void 0:R.dateTime)?e.jsx(f.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,{body:null!=x?x:"",placement:"top",children:e.jsx(m.FooterText,{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:b,iconPosition:"CALL_PERMISSION"===t.type?"right":"left",textTypography:"CALL_PERMISSION"===t.type?p.TitleSmall:void 0},r)):q===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==L?void 0:L.map((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r))}):q===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==_?void 0:_.map((t,r)=>e.jsx(h.ChatBtn,{textTypography:P?p.Caption:p.BodySecondary,extraContent:O?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?i.default:o.default,size:b},r))}):e.jsx(e.Fragment,{})]})},exports.HtmlContainer=g;
+`,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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/filePdf.svg.js"),s=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=({headerAssetName:t,mediaType:c})=>{const h=c===n.HEADER_TYPES.IMAGE?s.default:c===n.HEADER_TYPES.VIDEO?i.default:r.default;return e.jsxs(o.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:d.COLORS.icon.placeholder}),!!t&&e.jsx(a.BodySecondary,{style:{color:d.COLORS.content.secondary,marginTop:8},children:t})]})};exports.MediaCard=({headerAssetLink:r,headerAssetName:s,mediaType:i,imagePreviewStyles:a})=>{if(!r||i===n.HEADER_TYPES.DOCUMENT)return e.jsx(c,{headerAssetLink:r,headerAssetName:s,mediaType:i});return e.jsx(o.MediaContainer,{children:i===n.HEADER_TYPES.IMAGE?e.jsx(t.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):i===n.HEADER_TYPES.VIDEO?e.jsx("video",{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;
+"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

@@ -1,4 +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"),l=require("../constants/regexPatterns.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=s(t).default.div`
+"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:s,bold:i}=t,o=null==s?void 0:s.match(l.templateVariablePattern),d=i?{fontWeight:"600"}:{};return s?e.jsx(a,{children:s.split(l.templateVariablePattern).map((t,l)=>e.jsxs(e.Fragment,{children:[e.jsx(r.BodyRegular,{style:d,children:t}),!!(null==o?void 0:o[l])&&e.jsx(r.BodyRegular,{style:Object.assign({color:n.COLORS.content.brand},d),children:null==o?void 0:o[l]})]}))}):e.jsx(e.Fragment,{})};
+`;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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),s=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`
+"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
-		${a.COLORS.stroke.primary};
+		${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: ${a.COLORS.content.primary};
-`;exports.WhatsappLikePreview=r=>3===i.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,{style:r.containerStyle,showHeader:r.showHeader,children:[r.showHeader&&e.jsx(s.default,{}),e.jsxs("div",{style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"},children:[!r.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(l,{children:"Preview"})}),e.jsx(o.default,Object.assign({showHeader:r.showHeader},r))]})]})});
+	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

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/phone_round.svg.js"),t=require("styled-components"),a=require("../../template-context-mapper/context/templateModalContext.js"),s=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"),x=require("./ChatUiV2.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=c(t);const u=h.default.div`
-	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${s.BACKGROUND_PREVIEW_IMAGE})`};
+"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"};
-`,m=h.default(i.TitleRegular)`
+`,j=h.default(i.TitleRegular)`
 	color: ${o.COLORS.content.primary};
-`,j=h.default.div`
+`,g=h.default.div`
 	margin: 4px;
 	margin-top: -4px;
 	background-color: ${o.BASE_COLORS.grayscale[50]};
@@ -18,4 +18,4 @@
 		align-items: center;
 		gap: 8px;
 	}
-`;exports.WhatsappLikePreviewV2=t=>{const{hideDeviceContainerInPreview:s}=a.useTemplateModalContext();return 3===l.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):s?e.jsx(x.ChatUIV2,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(u,{style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel,children:[t.showHeader&&e.jsx(p.default,{}),e.jsxs("div",{style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"},children:[!t.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(m,{children:"Preview"})}),e.jsx(x.ChatUIV2,Object.assign({showHeader:t.showHeader},t)),t.showCallPermissionCard&&e.jsx("div",{style:{marginTop:16},children:e.jsx(x.ChatUIV2,{hideFooter:!0,headerMediaType:n.HEADER_TYPES.NONE,textType:"html",isPreview:t.isPreview,zeroStateComponent:e.jsx(e.Fragment,{}),buttons:[{text:"Choose preference",type:"CALL_PERMISSION",flowId:"",flowName:""}],children:e.jsxs(j,{children:[e.jsxs(x.HtmlContainer,{className:"flex-align-center-gap",children:[e.jsx(r.default,{width:30,height:30}),e.jsx(i.TitleSmall,{children:t.callPermissionText?`${t.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"})]})]})})})]})]})})};
+`;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"})]})]})}))}))]}))]}))})};

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

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import { CSSProperties } from 'styled-components';
+import { CHANNEL_TYPE } from './models/Channels';
+import { WhatsAppTemplate } from './models/WhatsAppTemplate';
+declare const WhatsappTemplatePreview: React.FC<{
+    template?: WhatsAppTemplate;
+    extras?: boolean;
+    containerStyle?: CSSProperties;
+    usePlaceHolderName?: boolean;
+    showHeader?: boolean;
+    zeroStateComponent?: ReactElement;
+    size?: 'small' | 'large';
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    channel?: CHANNEL_TYPE;
+}>;
+export default WhatsappTemplatePreview;