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 d342577b3..d7b059915 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 09146ee44..000000000
--- 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 000000000..f7d85821c
--- /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 };