@bikdotai/bik-component-library 0.0.639--beta0.1 → 0.0.639--beta0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts +6 -0
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts +6 -0
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js +1 -1
- package/package.json +1 -1
package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts
CHANGED
|
@@ -2,3 +2,9 @@
|
|
|
2
2
|
import { TemplateAnalyticsComponentI } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
3
|
declare const TemplateAnalyticsComponent: React.FC<TemplateAnalyticsComponentI>;
|
|
4
4
|
export default TemplateAnalyticsComponent;
|
|
5
|
+
export declare const AnalyticsItem: React.FC<{
|
|
6
|
+
icon: React.ElementType;
|
|
7
|
+
title: string;
|
|
8
|
+
value: number;
|
|
9
|
+
percentValue?: number;
|
|
10
|
+
}>;
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),s=require("../../../assets/icons/tick_double.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),s=require("../../../assets/icons/tick_double.svg.js"),l=require("react"),n=require("../../modals/styledModal.js"),a=require("../../tag/Tag.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),o=require("../styles/SegmentAnalyticsStyles.js"),d=require("../utils/SegmentConstants.js"),u=require("./TemplateAnalyticsSkeleton.js");const j=t=>{let{icon:s,title:l,value:n,percentValue:i}=t;return e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(s,{width:"16px",height:"16px",color:r.COLORS.background.brand})})),e.jsx(c.Caption,{children:l})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(a.Tag,{tagText:i||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(o.CustomTitleMedium,{children:n})]}))]}))};exports.AnalyticsItem=j,exports.default=a=>{let{templateAnalytics:g,onClose:h,onProceed:m,onCancel:x,headingTitle:p,headingSubtitle:y,templateId:T}=a;const{templateQuality:b=i.TEMPLATE_QUALITY.GREEN,fetchAnalytics:O}=g||{},{icon:C,title:S,subline:A}=d.TEMPLATE_QUALITY_MAP[b||i.TEMPLATE_QUALITY.GREEN],[v,N]=l.useState({}),[E,f]=l.useState(!0);return l.useEffect((()=>{null==O||O(T||"").then((e=>{console.log("data",e),e.analytics&&N(e.analytics),f(!1)}))}),[]),e.jsx(n.StyledModal,Object.assign({open:!0,headingTitle:p,tintedHeader:!0,modalHeaderStyles:{backgroundColor:r.COLORS.surface.subdued},onBackPress:()=>{null==h||h()},headingSubtitle:y,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==h||h(),null==x||x()},disabled:E},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==m||m()},disabled:E},onClose:()=>{null==h||h()},width:"700px"},{children:e.jsxs(o.SegmentContainer,{children:[e.jsx(o.LeftPanelContainer,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[C&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t.default,{width:40,height:40,color:r.COLORS.content.warning})})),S&&e.jsxs(c.TitleRegular,{children:[S," template"]}),e.jsx(c.Caption,Object.assign({style:{textAlign:"center"},color:r.COLORS.content.secondary},{children:A}))]}))}),E?e.jsx(u.TemplateAnalyticsSkeleton,{}):e.jsxs(o.RightPanelContainer,{children:[e.jsx(c.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:d.ANALYTICS_ENGAGEMENT_MAP.map(((t,s)=>e.jsx(j,{icon:t.icon,title:t.title,value:v[t.valName]||0,percentValue:t.percentValName?v[t.percentValName]:null},s)))})),(null==v?void 0:v.clickAnalytics)&&e.jsxs(e.Fragment,{children:[e.jsx(c.TitleSmall,Object.assign({color:r.COLORS.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(v.clickAnalytics).map(((t,l)=>{let[n,a]=t;return e.jsx(j,{icon:s.default,title:n,value:a.totalClicks||0,percentValue:a.clickPercentage},l)}))}))]})]})]})}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const TemplateAnalyticsSkeleton: React.FC;
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../shimmer/ShimmerComponent/BikShimmer.js"),i=require("../styles/SegmentAnalyticsStyles.js");const t=()=>e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx(s.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx(s.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]}))]}));exports.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../shimmer/ShimmerComponent/BikShimmer.js"),i=require("../styles/SegmentAnalyticsStyles.js");const t=()=>e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx(s.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx(s.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]}))]}));exports.TemplateAnalyticsSkeleton=()=>e.jsxs(i.RightPanelContainer,{children:[e.jsx("div",{children:e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((s=>e.jsx(t,{},s)))})),e.jsxs(e.Fragment,{children:[e.jsx("div",{children:e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:e.jsx(t,{})}))]})]});
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts
CHANGED
|
@@ -2,3 +2,9 @@
|
|
|
2
2
|
import { TemplateAnalyticsComponentI } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
3
|
declare const TemplateAnalyticsComponent: React.FC<TemplateAnalyticsComponentI>;
|
|
4
4
|
export default TemplateAnalyticsComponent;
|
|
5
|
+
export declare const AnalyticsItem: React.FC<{
|
|
6
|
+
icon: React.ElementType;
|
|
7
|
+
title: string;
|
|
8
|
+
value: number;
|
|
9
|
+
percentValue?: number;
|
|
10
|
+
}>;
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import a from"../../../assets/icons/tick_double.svg.js";import{useState as i,useEffect as c}from"react";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as r}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as d,Caption as m,TitleSmall as p}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{SegmentContainer as g,LeftPanelContainer as u,RightPanelContainer as y,CustomTitleMedium as b}from"../styles/SegmentAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as j,ANALYTICS_ENGAGEMENT_MAP as f}from"../utils/SegmentConstants.js";import{
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import a from"../../../assets/icons/tick_double.svg.js";import{useState as i,useEffect as c}from"react";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as r}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as d,Caption as m,TitleSmall as p}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{SegmentContainer as g,LeftPanelContainer as u,RightPanelContainer as y,CustomTitleMedium as b}from"../styles/SegmentAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as j,ANALYTICS_ENGAGEMENT_MAP as f}from"../utils/SegmentConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const N=r=>{let{templateAnalytics:b,onClose:N,onProceed:O,onCancel:T,headingTitle:x,headingSubtitle:C,templateId:S}=r;const{templateQuality:A=o.GREEN,fetchAnalytics:w}=b||{},{icon:V,title:E,subline:P}=j[A||o.GREEN],[B,H]=i({}),[G,R]=i(!0);return c((()=>{null==w||w(S||"").then((e=>{console.log("data",e),e.analytics&&H(e.analytics),R(!1)}))}),[]),e(s,Object.assign({open:!0,headingTitle:x,tintedHeader:!0,modalHeaderStyles:{backgroundColor:h.surface.subdued},onBackPress:()=>{null==N||N()},headingSubtitle:C,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==N||N(),null==T||T()},disabled:G},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==O||O()},disabled:G},onClose:()=>{null==N||N()},width:"700px"},{children:t(g,{children:[e(u,{children:t("div",Object.assign({className:"inside--container"},{children:[V&&e("div",Object.assign({className:"icon--container"},{children:e(l,{width:40,height:40,color:h.content.warning})})),E&&t(d,{children:[E," template"]}),e(m,Object.assign({style:{textAlign:"center"},color:h.content.secondary},{children:P}))]}))}),G?e(v,{}):t(y,{children:[e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",Object.assign({className:"mt-3"},{children:f.map(((t,n)=>e(k,{icon:t.icon,title:t.title,value:B[t.valName]||0,percentValue:t.percentValName?B[t.percentValName]:null},n)))})),(null==B?void 0:B.clickAnalytics)&&t(n,{children:[e(p,Object.assign({color:h.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(B.clickAnalytics).map(((t,n)=>{let[l,i]=t;return e(k,{icon:a,title:l,value:i.totalClicks||0,percentValue:i.clickPercentage},n)}))}))]})]})]})}))},k=l=>{let{icon:a,title:i,value:c,percentValue:s}=l;return t("div",Object.assign({className:"each--analytics--container"},{children:[t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e("div",Object.assign({className:"each--icon--container"},{children:e(a,{width:"16px",height:"16px",color:h.background.brand})})),e(m,{children:i})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?e(r,{tagText:s||0,theme:"light",type:"neutral"}):e(n,{}),e(b,{children:c})]}))]}))};export{k as AnalyticsItem,N as default};
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const TemplateAnalyticsSkeleton: React.FC;
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as s}from"react/jsx-runtime";import{BikShimmer as t}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as h}from"../styles/SegmentAnalyticsStyles.js";const c=()=>e(h,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>i(n,{},e)))})),e(s,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:i(n,{})}))]})]}),n=()=>e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"24px",height:"24px"}]}),i(t,{boxes:[{width:"69px",height:"11px"}]})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"43px",height:"18px"}]}),i(t,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{c as
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as s}from"react/jsx-runtime";import{BikShimmer as t}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as h}from"../styles/SegmentAnalyticsStyles.js";const c=()=>e(h,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>i(n,{},e)))})),e(s,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:i(n,{})}))]})]}),n=()=>e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"24px",height:"24px"}]}),i(t,{boxes:[{width:"69px",height:"11px"}]})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"43px",height:"18px"}]}),i(t,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{c as TemplateAnalyticsSkeleton};
|