diff --git a/assets/js/src/subscribers/stats.tsx b/assets/js/src/subscribers/stats.tsx index 69992b5b7b..c4b8144af2 100644 --- a/assets/js/src/subscribers/stats.tsx +++ b/assets/js/src/subscribers/stats.tsx @@ -8,12 +8,20 @@ import { useGlobalContextValue } from 'context'; import Heading from './stats/heading'; import Summary from './stats/summary'; +import WoocommerceRevenues from './stats/woocommerce_revenues'; export type StatsType = { email: string total_sent: number open: number click: number + woocommerce: { + currency: string + value: number + count: number + formatted: string + formatted_average: string + } } export const SubscriberStats = () => { @@ -58,6 +66,13 @@ export const SubscriberStats = () => { open={stats.open} totalSent={stats.total_sent} /> + {stats.woocommerce && ( + + )} ); diff --git a/assets/js/src/subscribers/stats/summary.tsx b/assets/js/src/subscribers/stats/summary.tsx index d79dec5078..da1f15b839 100644 --- a/assets/js/src/subscribers/stats/summary.tsx +++ b/assets/js/src/subscribers/stats/summary.tsx @@ -25,14 +25,14 @@ export default ({ totalSent, open, click }: PropTypes) => { {MailPoet.I18n.t('statsSentEmail')} - {totalSent} + {totalSent.toLocaleString()} {MailPoet.I18n.t('statsOpened')} - {open} + {open.toLocaleString()} {displayPercentages && ( @@ -47,7 +47,7 @@ export default ({ totalSent, open, click }: PropTypes) => { {MailPoet.I18n.t('statsClicked')} - {click} + {click.toLocaleString()} {displayPercentages && ( @@ -60,7 +60,7 @@ export default ({ totalSent, open, click }: PropTypes) => { {MailPoet.I18n.t('statsNotClicked')} - {totalSent - open} + {(totalSent - open).toLocaleString()} {displayPercentages && ( diff --git a/assets/js/src/subscribers/stats/woocommerce_revenues.tsx b/assets/js/src/subscribers/stats/woocommerce_revenues.tsx new file mode 100644 index 0000000000..12432689cb --- /dev/null +++ b/assets/js/src/subscribers/stats/woocommerce_revenues.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import MailPoet from 'mailpoet'; +import Tag from 'common/tag/tag'; + +export type PropTypes = { + count: number + revenueValue: string + averageRevenueValue: string +} + +export default ({ revenueValue, count, averageRevenueValue }: PropTypes) => ( +
+
+ + + + + + + + + + + + + + + +
Orders created{count.toLocaleString()}
Total revenue{revenueValue}
Average revenue{averageRevenueValue}
+
+
+);