From 2297452bf7bffd0100e475e8effe0ec321251e92 Mon Sep 17 00:00:00 2001 From: Mario Sergio Date: Fri, 28 Jun 2024 17:53:19 -0300 Subject: [PATCH 1/5] feat(autofire): Implemented stats to autofire emails --- .../Settings/Autofire/EmailMetrics.tsx | 135 ++++++++++++++++++ .../Settings/Autofire/icon-info.svg | 4 + .../WidgetActions/Settings/Autofire/index.tsx | 6 +- 3 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx create mode 100644 clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx new file mode 100644 index 0000000000..7fe41f83ce --- /dev/null +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx @@ -0,0 +1,135 @@ +import React from 'react'; +import { useQuery, gql } from 'bonde-core-tools'; +import { Box, Text, Heading, Stat, StatLabel, StatNumber, Divider, StatGroup, Tooltip, Flex } from 'bonde-components/chakra'; + +const GET_EMAIL_STATS = gql` + query EmailStats($widget_id: Int!) { + email_stats(widget_id: $widget_id) { + stats { + open + delivered + bounced + processed + click + total + } + } + } +`; + +type EmailMetricsProps = { + widgetId: number; +}; + +const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { + const { data, loading, error } = useQuery(GET_EMAIL_STATS, { + variables: { widget_id: widgetId } + }); + + if (error) { + console.log('error', { error }); + return Erro ao carregar dados: {JSON.stringify(error)}; + } + + if (loading) return 'Carregando...'; + + const { open, delivered, bounced, processed, click, total } = data.email_stats.stats; + + const IconInfo = React.forwardRef(({ children, ...rest }, ref) => ( + + + + + + {children} + + )) + + return ( + + Métricas de E-mails + + DESDE O INÍCIO DA CAMPANHA + + + + + + + ENVIADOS + {total} + + + + + + + + Taxa de abertura + + + + + + + {open} + + ABERTOS + + + + + + + + {delivered} + + ENTREGUES + + + + + + + + + + + + + {click} + + CLIQUES + + + + + + + + {bounced} + + BOUNCE + + + + + + + + + + {processed} + + PROCESSADOS + + + + + + + + ); +}; + +export default EmailMetrics; diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg new file mode 100644 index 0000000000..09146ee444 --- /dev/null +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx index 5bd064b8f3..47dc22e7b1 100644 --- a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx @@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next"; import { Widget } from "../../FetchWidgets"; import { noSpecialCharacters } from "../../../../services/utils"; import SettingsForm from '../SettingsForm'; +import EmailMetrics from './EmailMetrics'; type Props = { widget: Widget; @@ -79,10 +80,13 @@ const AutofireForm = ({ widget, updateCache }: Props): React.ReactElement => { + + + )} ); }; -export default AutofireForm; \ No newline at end of file +export default AutofireForm; From 9d61170928dc8a77be2e0aac8abbb2af14f9d34b Mon Sep 17 00:00:00 2001 From: Mario Sergio Date: Tue, 2 Jul 2024 11:33:57 -0300 Subject: [PATCH 2/5] feat(auofire): included category option filter --- .../scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx index 7fe41f83ce..d342577b3e 100644 --- a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx @@ -3,8 +3,8 @@ import { useQuery, gql } from 'bonde-core-tools'; import { Box, Text, Heading, Stat, StatLabel, StatNumber, Divider, StatGroup, Tooltip, Flex } from 'bonde-components/chakra'; const GET_EMAIL_STATS = gql` - query EmailStats($widget_id: Int!) { - email_stats(widget_id: $widget_id) { + query EmailStats($widget_id: Int!, $category: String) { + email_stats(widget_id: $widget_id, category: $category) { stats { open delivered @@ -23,7 +23,7 @@ type EmailMetricsProps = { const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { const { data, loading, error } = useQuery(GET_EMAIL_STATS, { - variables: { widget_id: widgetId } + variables: { widget_id: widgetId, category: "autofire" } }); if (error) { From 898898568a7e7e7b008ee79640b315fe4bf34d3d Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Tue, 2 Jul 2024 17:48:47 -0300 Subject: [PATCH 3/5] feat: add styles to email metrics component --- .../Settings/Autofire/EmailMetrics.tsx | 194 ++++++++++-------- .../Settings/Autofire/icon-info.svg | 4 - .../Settings/Autofire/icons/index.tsx | 50 +++++ 3 files changed, 159 insertions(+), 89 deletions(-) delete mode 100644 clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg create mode 100644 clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icons/index.tsx diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx index d342577b3e..d7b0599154 100644 --- a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx @@ -1,6 +1,28 @@ import React from 'react'; +import styled from 'styled-components'; + import { useQuery, gql } from 'bonde-core-tools'; -import { Box, Text, Heading, Stat, StatLabel, StatNumber, Divider, StatGroup, Tooltip, Flex } from 'bonde-components/chakra'; +import { + Box, + Divider, + Flex, + Heading, + Stat, + StatGroup, + StatLabel, + StatNumber, + Text, + Tooltip +} from "bonde-components/chakra"; + +import { IconInfo, IconOpen, IconSend } from './icons'; + +const EmailMetricsStyled = styled.div` + .emailStat--number { + font-weight: 900; + } +`; + const GET_EMAIL_STATS = gql` query EmailStats($widget_id: Int!, $category: String) { @@ -35,100 +57,102 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { const { open, delivered, bounced, processed, click, total } = data.email_stats.stats; - const IconInfo = React.forwardRef(({ children, ...rest }, ref) => ( - - - - - - {children} - - )) - return ( - - Métricas de E-mails - - DESDE O INÍCIO DA CAMPANHA - - - - - - - ENVIADOS - {total} - - - - - - - - Taxa de abertura - - + + + Métricas de E-mails + + DESDE O INÍCIO DA CAMPANHA + + - + - {open} - - ABERTOS - - - + + + EMAILS ENVIADOS + {total} + - - {delivered} - - ENTREGUES - - - - - - - + - - - - - {click} - - CLIQUES - - - - - + + + + Taxa de abertura + + + + + + + {open} + + ABERTOS + + + + + - - {bounced} - - BOUNCE - - - - - - + + {delivered} + + ENTREGUES + + + + + + + - - - {processed} - - PROCESSADOS - - - - - - - + + + + + + {click} + + CLIQUES + + + + + + + + {bounced} + + BOUNCE + + + + + + + + + {processed} + + PROCESSADOS + + + + + + + + + + Os dados de campanhas anteriores a 12/06/2024 podem estar incompletos ou inconsistentes devido a uma atualização na base de dados. + + + + ); }; diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg deleted file mode 100644 index 09146ee444..0000000000 --- a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icon-info.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icons/index.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icons/index.tsx new file mode 100644 index 0000000000..f7d85821c4 --- /dev/null +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/icons/index.tsx @@ -0,0 +1,50 @@ +import React, { forwardRef } from "react"; +import { Box } from "bonde-components/chakra"; + +type IconWrapperProps = { + children?: React.ReactNode; +}; + +const IconInfo = forwardRef(({ children, ...rest }, ref) => ( + + + + + + {children} + +)) + +const IconOpen = forwardRef(({ children, ...rest }, ref) => ( + + + + + + + + + + + + {children} + +)) + +const IconSend = forwardRef(({ children, ...rest }, ref) => ( + + + + + + + + + + + + {children} + +)) + +export { IconInfo, IconOpen, IconSend }; From 8cb45f0f8b6ee9688d5920b5276d1299f83f4382 Mon Sep 17 00:00:00 2001 From: Mario Sergio Date: Wed, 3 Jul 2024 16:51:47 -0300 Subject: [PATCH 4/5] feat(autofire): converted numbers to percent format --- .../Settings/Autofire/EmailMetrics.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx index d7b0599154..9d1bb9293c 100644 --- a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx @@ -56,6 +56,12 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { if (loading) return 'Carregando...'; const { open, delivered, bounced, processed, click, total } = data.email_stats.stats; + + const openRate = total > 0 ? (open / total * 100).toFixed(2) : 0; + const deliveredRate = total > 0 ? (delivered / total * 100).toFixed(2) : 0; + const bouncedRate = total > 0 ? (bounced / total * 100).toFixed(2) : 0; + const processedRate = total > 0 ? (processed / total * 100).toFixed(2) : 0; + const clickRate = open > 0 ? (click / open * 100).toFixed(2) : 0; return ( @@ -89,7 +95,7 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { - {open} + {openRate}% ABERTOS @@ -99,7 +105,7 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { - {delivered} + {deliveredRate}% ENTREGUES @@ -115,7 +121,7 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { - {click} + {clickRate}% CLIQUES @@ -125,7 +131,7 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { - {bounced} + {bouncedRate}% BOUNCE @@ -136,7 +142,7 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { - {processed} + {processedRate}% PROCESSADOS From 82995182d722503e6f402e8a426f5dc27f8a53ac Mon Sep 17 00:00:00 2001 From: Mario Sergio Date: Wed, 3 Jul 2024 17:59:44 -0300 Subject: [PATCH 5/5] feat(autofire): added spam and dropped events to layout --- .../Settings/Autofire/EmailMetrics.tsx | 42 +++++++++++++++---- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx index 9d1bb9293c..af64c6134e 100644 --- a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx +++ b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/EmailMetrics.tsx @@ -27,13 +27,15 @@ const EmailMetricsStyled = styled.div` const GET_EMAIL_STATS = gql` query EmailStats($widget_id: Int!, $category: String) { email_stats(widget_id: $widget_id, category: $category) { + total stats { - open - delivered - bounced processed + delivered + open + bounce + dropped + spamreport click - total } } } @@ -55,13 +57,17 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { if (loading) return 'Carregando...'; - const { open, delivered, bounced, processed, click, total } = data.email_stats.stats; + const { total, stats } = data.email_stats; + const { open, delivered, bounce, processed, click, dropped, spamreport } = stats; const openRate = total > 0 ? (open / total * 100).toFixed(2) : 0; const deliveredRate = total > 0 ? (delivered / total * 100).toFixed(2) : 0; - const bouncedRate = total > 0 ? (bounced / total * 100).toFixed(2) : 0; + const bounceRate = total > 0 ? (bounce / total * 100).toFixed(2) : 0; const processedRate = total > 0 ? (processed / total * 100).toFixed(2) : 0; const clickRate = open > 0 ? (click / open * 100).toFixed(2) : 0; + const droppedRate = total > 0 ? (dropped / total * 100).toFixed(2) : 0; + const spamReportRate = total > 0 ? (spamreport / total * 100).toFixed(2) : 0; + return ( @@ -131,7 +137,7 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { - {bouncedRate}% + {bounceRate}% BOUNCE @@ -140,7 +146,7 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { - + {processedRate}% @@ -150,6 +156,26 @@ const EmailMetrics = ({ widgetId }: EmailMetricsProps) => { + + {droppedRate}% + + DESCARTADOS + + + + + + + + + {spamReportRate}% + + SPAM + + + + +