@bikdotai/bik-component-library 0.0.639--beta1.2 → 0.0.639--beta1.4

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),n=require("../../../assets/icons/click.svg.js"),s=require("react"),a=require("../../modals/styledModal.js"),l=require("../../tag/Tag.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),c=require("../../../constants/Theme.js"),o=require("../styles/TemplateAnalyticsStyles.js"),d=require("../utils/TemplateConstants.js"),u=require("./TemplateAnalyticsSkeleton.js");const j=t=>{const{analyticsData:s,skipTitle:a}=t;return e.jsxs(o.RightPanelContainer,{children:[a?e.jsx(e.Fragment,{}):e.jsx(r.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,n)=>e.jsx(y,{icon:t.icon,title:t.title,value:s[t.valName]||0,percentValue:t.percentValName?s[t.percentValName]:null},n)))})),(null==s?void 0:s.clickAnalytics)&&e.jsxs(e.Fragment,{children:[e.jsx(r.TitleSmall,Object.assign({color:c.COLORS.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(s.clickAnalytics).map(((t,s)=>{let[a,l]=t;return e.jsx(y,{icon:n.default,title:a,value:l.totalClicks||0,percentValue:l.clickPercentage},s)}))}))]})]})},y=t=>{const{icon:n,title:s,value:a,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(n,{width:"16px",height:"16px",color:c.COLORS.background.brand})})),e.jsx(r.Caption,{children:s})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(l.Tag,{tagText:i||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(o.CustomTitleMedium,{children:a})]}))]}))};exports.AnalyticsItem=y,exports.RightPanelTemplateAnalytics=j,exports.TemplateAnalyticsComponent=n=>{const{templateAnalytics:l,onClose:y,onProceed:m,onCancel:p,headingTitle:g,headingSubtitle:h,templateId:x}=n,{templateQuality:T=i.TEMPLATE_QUALITY.GREEN,fetchAnalytics:b}=l||{},{icon:A,title:C,subline:O}=d.TEMPLATE_QUALITY_MAP[T||i.TEMPLATE_QUALITY.GREEN],[v,S]=s.useState({}),[E,N]=s.useState(!0);s.useEffect((()=>{null==b||b(x||"").then((e=>{e.analytics&&S(e.analytics),N(!1)}))}),[]);const k=s.useMemo((()=>T===i.TEMPLATE_QUALITY.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:m,disabled:E},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==y||y(),null==p||p()},disabled:E}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==y||y(),null==p||p()},disabled:E},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:m,disabled:E}}),[T,E]);return e.jsx(a.StyledModal,Object.assign({open:!0,headingTitle:g,tintedHeader:!0,modalHeaderStyles:{backgroundColor:c.COLORS.surface.subdued},onBackPress:()=>{null==y||y()},headingSubtitle:h,footerShadow:!0,primaryButton:k.primaryButton,secondaryButton:k.secondaryButton,onClose:()=>{null==y||y()},width:"700px"},{children:e.jsxs(o.TemplateContainer,{children:[e.jsx(o.LeftPanelContainer,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[A&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t.default,{width:40,height:40,color:c.COLORS.content.warning})})),C&&e.jsx(r.TitleRegular,Object.assign({style:{textAlign:"center"}},{children:C})),e.jsx(r.Caption,Object.assign({style:{textAlign:"center"},color:c.COLORS.content.secondary},{children:O}))]}))}),E?e.jsx(u.TemplateAnalyticsSkeleton,{}):e.jsx(j,{analyticsData:v})]})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),n=require("../../../assets/icons/click.svg.js"),s=require("react"),l=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/TemplateAnalyticsStyles.js"),d=require("../utils/TemplateConstants.js"),u=require("./TemplateAnalyticsSkeleton.js");const j=t=>{const{analyticsData:s,skipTitle:l}=t;return e.jsxs(o.RightPanelContainer,{children:[l?e.jsx(e.Fragment,{}):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,n)=>e.jsx(y,{icon:t.icon,title:t.title,value:s[t.valName]||0,percentValue:t.percentValName?s[t.percentValName]:null},n)))})),(null==s?void 0:s.clickAnalytics)&&Object.keys(null==s?void 0:s.clickAnalytics)&&Object.keys(null==s?void 0:s.clickAnalytics).length?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(s.clickAnalytics).map(((t,s)=>{let[l,a]=t;return e.jsx(y,{icon:n.default,title:l,value:a.totalClicks||0,percentValue:a.clickPercentage},s)}))}))]}):e.jsx(e.Fragment,{})]})},y=t=>{const{icon:n,title:s,value:l,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(n,{width:"16px",height:"16px",color:r.COLORS.background.brand})})),e.jsx(c.Caption,{children:s})]})),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:l})]}))]}))};exports.AnalyticsItem=y,exports.RightPanelTemplateAnalytics=j,exports.TemplateAnalyticsComponent=n=>{const{templateAnalytics:a,onClose:y,onProceed:m,onCancel:p,headingTitle:g,headingSubtitle:h,templateId:x}=n,{templateQuality:T=i.TEMPLATE_QUALITY.GREEN,fetchAnalytics:b}=a||{},{icon:A,title:C,subline:O}=d.TEMPLATE_QUALITY_MAP[T||i.TEMPLATE_QUALITY.GREEN],[v,k]=s.useState({}),[S,E]=s.useState(!0);s.useEffect((()=>{null==b||b(x||"").then((e=>{e.analytics&&k(e.analytics),E(!1)}))}),[]);const N=s.useMemo((()=>T===i.TEMPLATE_QUALITY.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:m,disabled:S},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==y||y(),null==p||p()},disabled:S}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==y||y(),null==p||p()},disabled:S},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:m,disabled:S}}),[T,S]);return e.jsx(l.StyledModal,Object.assign({open:!0,headingTitle:g,tintedHeader:!0,modalHeaderStyles:{backgroundColor:r.COLORS.surface.subdued},onBackPress:()=>{null==y||y()},headingSubtitle:h,footerShadow:!0,primaryButton:N.primaryButton,secondaryButton:N.secondaryButton,onClose:()=>{null==y||y()},width:"700px"},{children:e.jsxs(o.TemplateContainer,{children:[e.jsx(o.LeftPanelContainer,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[A&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t.default,{width:40,height:40,color:r.COLORS.content.warning})})),C&&e.jsx(c.TitleRegular,Object.assign({style:{textAlign:"center"}},{children:C})),e.jsx(c.Caption,Object.assign({style:{textAlign:"center"},color:r.COLORS.content.secondary},{children:O}))]}))}),S?e.jsx(u.TemplateAnalyticsSkeleton,{}):e.jsx(j,{analyticsData:v})]})}))};

package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import a from"../../../assets/icons/alert_triangle.svg.js";import l from"../../../assets/icons/click.svg.js";import{useState as i,useEffect as c,useMemo as s}from"react";import{StyledModal as r}from"../../modals/styledModal.js";import{Tag as o}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,Caption as p,TitleSmall as u}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as h,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as j}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as T,ANALYTICS_ENGAGEMENT_MAP as f}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const k=n=>{const{templateAnalytics:l,onClose:o,onProceed:u,onCancel:b,headingTitle:j,headingSubtitle:f,templateId:k}=n,{templateQuality:N=d.GREEN,fetchAnalytics:C}=l||{},{icon:O,title:A,subline:B}=T[N||d.GREEN],[w,S]=i({}),[E,P]=i(!0);c((()=>{null==C||C(k||"").then((e=>{e.analytics&&S(e.analytics),P(!1)}))}),[]);const V=s((()=>N===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:u,disabled:E},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==o||o(),null==b||b()},disabled:E}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==o||o(),null==b||b()},disabled:E},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:u,disabled:E}}),[N,E]);return e(r,Object.assign({open:!0,headingTitle:j,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==o||o()},headingSubtitle:f,footerShadow:!0,primaryButton:V.primaryButton,secondaryButton:V.secondaryButton,onClose:()=>{null==o||o()},width:"700px"},{children:t(h,{children:[e(g,{children:t("div",Object.assign({className:"inside--container"},{children:[O&&e("div",Object.assign({className:"icon--container"},{children:e(a,{width:40,height:40,color:y.content.warning})})),A&&e(m,Object.assign({style:{textAlign:"center"}},{children:A})),e(p,Object.assign({style:{textAlign:"center"},color:y.content.secondary},{children:B}))]}))}),E?e(v,{}):e(x,{analyticsData:w})]})}))},x=a=>{const{analyticsData:i,skipTitle:c}=a;return t(b,{children:[c?e(n,{}):e(u,{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(N,{icon:t.icon,title:t.title,value:i[t.valName]||0,percentValue:t.percentValName?i[t.percentValName]:null},n)))})),(null==i?void 0:i.clickAnalytics)&&t(n,{children:[e(u,Object.assign({color:y.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(i.clickAnalytics).map(((t,n)=>{let[a,i]=t;return e(N,{icon:l,title:a,value:i.totalClicks||0,percentValue:i.clickPercentage},n)}))}))]})]})},N=a=>{const{icon:l,title:i,value:c,percentValue:s}=a;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(l,{width:"16px",height:"16px",color:y.background.brand})})),e(p,{children:i})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?e(o,{tagText:s||0,theme:"light",type:"neutral"}):e(n,{}),e(j,{children:c})]}))]}))};export{N as AnalyticsItem,x as RightPanelTemplateAnalytics,k as TemplateAnalyticsComponent};
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import i from"../../../assets/icons/click.svg.js";import{useState as a,useEffect as c,useMemo as s}from"react";import{StyledModal as r}from"../../modals/styledModal.js";import{Tag as o}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,Caption as p,TitleSmall as u}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as h,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as j}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as k,ANALYTICS_ENGAGEMENT_MAP as v}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as T}from"./TemplateAnalyticsSkeleton.js";const f=n=>{const{templateAnalytics:i,onClose:o,onProceed:u,onCancel:b,headingTitle:j,headingSubtitle:v,templateId:f}=n,{templateQuality:x=d.GREEN,fetchAnalytics:N}=i||{},{icon:C,title:A,subline:B}=k[x||d.GREEN],[w,S]=a({}),[E,P]=a(!0);c((()=>{null==N||N(f||"").then((e=>{e.analytics&&S(e.analytics),P(!1)}))}),[]);const V=s((()=>x===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:u,disabled:E},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==o||o(),null==b||b()},disabled:E}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==o||o(),null==b||b()},disabled:E},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:u,disabled:E}}),[x,E]);return e(r,Object.assign({open:!0,headingTitle:j,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==o||o()},headingSubtitle:v,footerShadow:!0,primaryButton:V.primaryButton,secondaryButton:V.secondaryButton,onClose:()=>{null==o||o()},width:"700px"},{children:t(h,{children:[e(g,{children:t("div",Object.assign({className:"inside--container"},{children:[C&&e("div",Object.assign({className:"icon--container"},{children:e(l,{width:40,height:40,color:y.content.warning})})),A&&e(m,Object.assign({style:{textAlign:"center"}},{children:A})),e(p,Object.assign({style:{textAlign:"center"},color:y.content.secondary},{children:B}))]}))}),E?e(T,{}):e(O,{analyticsData:w})]})}))},O=l=>{const{analyticsData:a,skipTitle:c}=l;return t(b,{children:[c?e(n,{}):e(u,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",Object.assign({className:"mt-3"},{children:v.map(((t,n)=>e(x,{icon:t.icon,title:t.title,value:a[t.valName]||0,percentValue:t.percentValName?a[t.percentValName]:null},n)))})),(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics).length?t(n,{children:[e(u,Object.assign({color:y.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(a.clickAnalytics).map(((t,n)=>{let[l,a]=t;return e(x,{icon:i,title:l,value:a.totalClicks||0,percentValue:a.clickPercentage},n)}))}))]}):e(n,{})]})},x=l=>{const{icon:i,title:a,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(i,{width:"16px",height:"16px",color:y.background.brand})})),e(p,{children:a})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?e(o,{tagText:`${s}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(j,{children:c})]}))]}))};export{x as AnalyticsItem,O as RightPanelTemplateAnalytics,f as TemplateAnalyticsComponent};

package/package.json

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