@bikdotai/bik-component-library 0.0.566-webpush-beta0.2 → 0.0.566-webpush-beta0.4

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

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

package/dist/cjs/components/template-preview/models/WebpushTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CHANNEL_TYPE } from './Channels';
 import { CUSTOM_VARIABLE } from './TemplateMeta';
 import { TEMPLATE_BUTTON, WhatsAppPickerMeta, WhatsAppTemplateVariables } from './WhatsAppTemplate';
@@ -22,6 +23,9 @@ export type WebpushTemplateType = {
     components: WebPushTemplateComponent;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
 };
+export type WebpushMetaType = {
+    containerStyle?: React.CSSProperties | undefined;
+};
 export declare enum WEB_PUSH_COMPONENT_TYPE {
     TITLE = "title",
     BODY = "body",

package/dist/cjs/components/template-preview/webpush/WebpushPreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../models/WebpushTemplate.js"),t=require("./WebpushPreview.styled.js");exports.default=i=>{let{template:n}=i;var l,a,E,r;const{components:c,webpushBroadcastConfig:O}=n,P="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",_=(e,s)=>{let t=0;return e?e.replace(/{{(.*?)}}/g,((e,i)=>{const n=i.trim();if(s&&s.length&&t<s.length){const e=s[t];return t++,e}return`{{${n}}}`})):""},N=_(c[s.WEB_PUSH_COMPONENT_TYPE.TITLE],null==O?void 0:O.title),o=_(c[s.WEB_PUSH_COMPONENT_TYPE.BODY].text,null==O?void 0:O.body);return e.jsxs(t.WebpushPreviewContainer,{children:[e.jsxs("div",Object.assign({className:"icon--header"},{children:[e.jsx("div",Object.assign({className:"icon-img-container"},{children:e.jsx("img",{src:(null===(l=null==O?void 0:O[s.WEB_PUSH_COMPONENT_TYPE.ICON])||void 0===l?void 0:l.length)?O[s.WEB_PUSH_COMPONENT_TYPE.ICON][0]:null!==(a=c[s.WEB_PUSH_COMPONENT_TYPE.ICON])&&void 0!==a?a:P,alt:"icon-image"})})),e.jsxs("div",Object.assign({className:"text--container"},{children:[e.jsx("div",{children:N}),e.jsx("div",Object.assign({style:{marginTop:3}},{children:o}))]}))]})),c[s.WEB_PUSH_COMPONENT_TYPE.IMAGE]&&c[s.WEB_PUSH_COMPONENT_TYPE.IMAGE].length&&e.jsx("div",Object.assign({className:"banner-img-container"},{children:e.jsx("img",{src:(null===(E=null==O?void 0:O[s.WEB_PUSH_COMPONENT_TYPE.IMAGE])||void 0===E?void 0:E.length)?O[s.WEB_PUSH_COMPONENT_TYPE.IMAGE][0]:null!==(r=c[s.WEB_PUSH_COMPONENT_TYPE.IMAGE])&&void 0!==r?r:P,alt:"icon-image"})})),c[s.WEB_PUSH_COMPONENT_TYPE.BUTTONS]&&c[s.WEB_PUSH_COMPONENT_TYPE.BUTTONS].length&&e.jsx("div",Object.assign({className:"button-container "+(1===c[s.WEB_PUSH_COMPONENT_TYPE.BUTTONS].length?"single-button":"")},{children:c[s.WEB_PUSH_COMPONENT_TYPE.BUTTONS].map(((t,i)=>e.jsx("div",Object.assign({className:"each--btn",style:{flex:1===c[s.WEB_PUSH_COMPONENT_TYPE.BUTTONS].length?"0 0 50%":"1"}},{children:e.jsx("div",Object.assign({className:"text-btn"},{children:t.text}))}),`webpush-buttons-${i}`)))}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../models/WebpushTemplate.js"),s=require("./WebpushPreview.styled.js");exports.default=t=>{let{template:n}=t;var l,a,E,O,P,r,_;const{components:c,webpushBroadcastConfig:o}=n,N="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",T=(e,i)=>{let s=0;return e?e.replace(/{{(.*?)}}/g,((e,t)=>{const n=t.trim();if(i&&i.length&&s<i.length){const e=i[s];return s++,e}return`{{${n}}}`})):""},d=T(c[i.WEB_PUSH_COMPONENT_TYPE.TITLE],null==o?void 0:o.title),u=T(null!==(E=null!==(a=null===(l=c[i.WEB_PUSH_COMPONENT_TYPE.BODY])||void 0===l?void 0:l.text)&&void 0!==a?a:c[i.WEB_PUSH_COMPONENT_TYPE.BODY])&&void 0!==E?E:"",null==o?void 0:o.body);return e.jsxs(s.WebpushPreviewContainer,{children:[e.jsxs("div",Object.assign({className:"icon--header"},{children:[e.jsx("div",Object.assign({className:"icon-img-container"},{children:e.jsx("img",{src:(null===(O=null==o?void 0:o[i.WEB_PUSH_COMPONENT_TYPE.ICON])||void 0===O?void 0:O.length)?o[i.WEB_PUSH_COMPONENT_TYPE.ICON][0]:null!==(P=c[i.WEB_PUSH_COMPONENT_TYPE.ICON])&&void 0!==P?P:N,alt:"icon-image"})})),e.jsxs("div",Object.assign({className:"text--container"},{children:[e.jsx("div",{children:d}),e.jsx("div",Object.assign({style:{marginTop:3}},{children:u}))]}))]})),c[i.WEB_PUSH_COMPONENT_TYPE.IMAGE]&&c[i.WEB_PUSH_COMPONENT_TYPE.IMAGE].length&&e.jsx("div",Object.assign({className:"banner-img-container"},{children:e.jsx("img",{src:(null===(r=null==o?void 0:o[i.WEB_PUSH_COMPONENT_TYPE.IMAGE])||void 0===r?void 0:r.length)?o[i.WEB_PUSH_COMPONENT_TYPE.IMAGE][0]:null!==(_=c[i.WEB_PUSH_COMPONENT_TYPE.IMAGE])&&void 0!==_?_:N,alt:"icon-image"})})),c[i.WEB_PUSH_COMPONENT_TYPE.BUTTONS]&&c[i.WEB_PUSH_COMPONENT_TYPE.BUTTONS].length&&e.jsx("div",Object.assign({className:"button-container "+(1===c[i.WEB_PUSH_COMPONENT_TYPE.BUTTONS].length?"single-button":"")},{children:c[i.WEB_PUSH_COMPONENT_TYPE.BUTTONS].map(((s,t)=>e.jsx("div",Object.assign({className:"each--btn",style:{flex:1===c[i.WEB_PUSH_COMPONENT_TYPE.BUTTONS].length?"0 0 50%":"1"}},{children:e.jsx("div",Object.assign({className:"text-btn"},{children:s.text}))}),`webpush-buttons-${t}`)))}))]})};

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

@@ -3,6 +3,7 @@ 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;
@@ -21,5 +22,6 @@ export interface TemplatePreviewProps {
     isWhatsappCarousel?: boolean;
     isPreview?: boolean;
     applyBorderBottom?: boolean;
+    webPushSpecificMeta?: WebpushMetaType;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, webPushSpecificMeta }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/esm/components/template-preview/models/WebpushTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CHANNEL_TYPE } from './Channels';
 import { CUSTOM_VARIABLE } from './TemplateMeta';
 import { TEMPLATE_BUTTON, WhatsAppPickerMeta, WhatsAppTemplateVariables } from './WhatsAppTemplate';
@@ -22,6 +23,9 @@ export type WebpushTemplateType = {
     components: WebPushTemplateComponent;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
 };
+export type WebpushMetaType = {
+    containerStyle?: React.CSSProperties | undefined;
+};
 export declare enum WEB_PUSH_COMPONENT_TYPE {
     TITLE = "title",
     BODY = "body",

package/dist/esm/components/template-preview/webpush/WebpushPreview.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{WEB_PUSH_COMPONENT_TYPE as i}from"../models/WebpushTemplate.js";import{WebpushPreviewContainer as n}from"./WebpushPreview.styled.js";const l=l=>{let{template:s}=l;var a,c,o,r;const{components:d,webpushBroadcastConfig:m}=s,g="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",b=(e,t)=>{let i=0;return e?e.replace(/{{(.*?)}}/g,((e,n)=>{const l=n.trim();if(t&&t.length&&i<t.length){const e=t[i];return i++,e}return`{{${l}}}`})):""},h=b(d[i.TITLE],null==m?void 0:m.title),u=b(d[i.BODY].text,null==m?void 0:m.body);return e(n,{children:[e("div",Object.assign({className:"icon--header"},{children:[t("div",Object.assign({className:"icon-img-container"},{children:t("img",{src:(null===(a=null==m?void 0:m[i.ICON])||void 0===a?void 0:a.length)?m[i.ICON][0]:null!==(c=d[i.ICON])&&void 0!==c?c:g,alt:"icon-image"})})),e("div",Object.assign({className:"text--container"},{children:[t("div",{children:h}),t("div",Object.assign({style:{marginTop:3}},{children:u}))]}))]})),d[i.IMAGE]&&d[i.IMAGE].length&&t("div",Object.assign({className:"banner-img-container"},{children:t("img",{src:(null===(o=null==m?void 0:m[i.IMAGE])||void 0===o?void 0:o.length)?m[i.IMAGE][0]:null!==(r=d[i.IMAGE])&&void 0!==r?r:g,alt:"icon-image"})})),d[i.BUTTONS]&&d[i.BUTTONS].length&&t("div",Object.assign({className:"button-container "+(1===d[i.BUTTONS].length?"single-button":"")},{children:d[i.BUTTONS].map(((e,n)=>t("div",Object.assign({className:"each--btn",style:{flex:1===d[i.BUTTONS].length?"0 0 50%":"1"}},{children:t("div",Object.assign({className:"text-btn"},{children:e.text}))}),`webpush-buttons-${n}`)))}))]})};export{l as default};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{WEB_PUSH_COMPONENT_TYPE as t}from"../models/WebpushTemplate.js";import{WebpushPreviewContainer as n}from"./WebpushPreview.styled.js";const l=l=>{let{template:s}=l;var a,o,c,d,r,m,g;const{components:b,webpushBroadcastConfig:h}=s,v="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",u=(e,i)=>{let t=0;return e?e.replace(/{{(.*?)}}/g,((e,n)=>{const l=n.trim();if(i&&i.length&&t<i.length){const e=i[t];return t++,e}return`{{${l}}}`})):""},p=u(b[t.TITLE],null==h?void 0:h.title),O=u(null!==(c=null!==(o=null===(a=b[t.BODY])||void 0===a?void 0:a.text)&&void 0!==o?o:b[t.BODY])&&void 0!==c?c:"",null==h?void 0:h.body);return e(n,{children:[e("div",Object.assign({className:"icon--header"},{children:[i("div",Object.assign({className:"icon-img-container"},{children:i("img",{src:(null===(d=null==h?void 0:h[t.ICON])||void 0===d?void 0:d.length)?h[t.ICON][0]:null!==(r=b[t.ICON])&&void 0!==r?r:v,alt:"icon-image"})})),e("div",Object.assign({className:"text--container"},{children:[i("div",{children:p}),i("div",Object.assign({style:{marginTop:3}},{children:O}))]}))]})),b[t.IMAGE]&&b[t.IMAGE].length&&i("div",Object.assign({className:"banner-img-container"},{children:i("img",{src:(null===(m=null==h?void 0:h[t.IMAGE])||void 0===m?void 0:m.length)?h[t.IMAGE][0]:null!==(g=b[t.IMAGE])&&void 0!==g?g:v,alt:"icon-image"})})),b[t.BUTTONS]&&b[t.BUTTONS].length&&i("div",Object.assign({className:"button-container "+(1===b[t.BUTTONS].length?"single-button":"")},{children:b[t.BUTTONS].map(((e,n)=>i("div",Object.assign({className:"each--btn",style:{flex:1===b[t.BUTTONS].length?"0 0 50%":"1"}},{children:i("div",Object.assign({className:"text-btn"},{children:e.text}))}),`webpush-buttons-${n}`)))}))]})};export{l as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.566-webpush-beta0.2",
+	"version": "0.0.566-webpush-beta0.4",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",