Merge pull request #57 from vtex/feature/Add-totalizers-to-affiliate-…

…orders-table Feature/add totalizers to affiliate orders table
vtex · Mar 10, 2022 · f0d8398 · f0d8398
2 parents 3569888 + fbc18b0
commit f0d8398
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Totalizers area for the affiliate orders table
+- Totalizers variable to affiliatesOrders query
+
 ## [0.43.0] - 2022-03-10
 
 ### Added

diff --git a/messages/en.json b/messages/en.json
@@ -105,5 +105,6 @@
   "admin/order.status.created.label": "Created",
   "admin/order.status.paid.label": "Payment approved",
   "admin/order.status.cancel.label": "Canceled",
-  "admin/order.status.invoiced.label": "Invoiced"
+  "admin/order.status.invoiced.label": "Invoiced",
+  "admin/total.orders.label": "Total orders"
 }
diff --git a/messages/pt.json b/messages/pt.json
@@ -105,5 +105,6 @@
   "admin/order.status.created.label": "Criado",
   "admin/order.status.paid.label": "Pagamento aprovado",
   "admin/order.status.cancel.label": "Cancelado",
-  "admin/order.status.invoiced.label": "Faturado"
+  "admin/order.status.invoiced.label": "Faturado",
+  "admin/total.orders.label": "Total de pedidos"
 }
diff --git a/react/components/admin/dashboard/AffiliateOrdersTable.tsx b/react/components/admin/dashboard/AffiliateOrdersTable.tsx
@@ -40,6 +40,7 @@ import ExportTableDataControl from '../shared/ExportTableDataControl'
 import StatusTableCell from './StatusTableCell'
 import TableActions from '../shared/TableActions'
 import { VIEW_DETAILS_ICON } from '../../../utils/icons'
+import Totalizers from './Totalizers'
 
 type TableColumns = {
   id: string
@@ -349,6 +350,9 @@ const AffiliateOrdersTable: FC = () => {
 
   return (
     <DataView state={view}>
+      {data && !loading && (
+        <Totalizers totalizers={data.affiliateOrders.totalizers} />
+      )}
       <DataViewControls>
         <Search
           id="search"

diff --git a/react/components/admin/dashboard/Totalizers.tsx b/react/components/admin/dashboard/Totalizers.tsx
@@ -0,0 +1,60 @@
+import { Flex, Heading, Text, Set } from '@vtex/admin-ui'
+import React from 'react'
+import { useIntl } from 'react-intl'
+import { useRuntime } from 'vtex.render-runtime'
+
+import { messages } from '../../../utils/messages'
+
+type TotalizersProps = {
+  totalizers: {
+    total: number
+    totalCommissionSum: number
+    totalOrderSum: number
+  }
+}
+
+const Totalizers = ({ totalizers }: TotalizersProps) => {
+  const intl = useIntl()
+  const {
+    culture: { currency },
+  } = useRuntime()
+
+  const { total, totalCommissionSum, totalOrderSum } = totalizers
+
+  return (
+    <Flex>
+      <Set orientation="vertical" spacing={3} fluid csx={{ paddingX: 4 }}>
+        <Heading>{intl.formatMessage(messages.totalOrdersLabel)}</Heading>
+        <Text variant="display">{total}</Text>
+      </Set>
+      <Set orientation="vertical" spacing={3} fluid csx={{ paddingX: 4 }}>
+        <Heading>
+          {intl.formatMessage(
+            messages.affiliatesOrdersTableOrderTotalColumnLabel
+          )}
+        </Heading>
+        <Text variant="display">
+          {intl.formatNumber(totalOrderSum, {
+            style: 'currency',
+            currency,
+          })}
+        </Text>
+      </Set>
+      <Set orientation="vertical" spacing={3} fluid csx={{ paddingX: 4 }}>
+        <Heading>
+          {intl.formatMessage(
+            messages.affiliatesOrdersTableOrderTotalCommissionColumnLabel
+          )}
+        </Heading>
+        <Text variant="display">
+          {intl.formatNumber(totalCommissionSum, {
+            style: 'currency',
+            currency,
+          })}
+        </Text>
+      </Set>
+    </Flex>
+  )
+}
+
+export default Totalizers
diff --git a/react/graphql/getAffiliatesOrders.graphql b/react/graphql/getAffiliatesOrders.graphql
@@ -24,5 +24,10 @@ query getAffiliatesOrders(
       pageSize
       total
     }
+    totalizers(filter: $filter) {
+      total
+      totalCommissionSum
+      totalOrderSum
+    }
   }
 }
diff --git a/react/typings/tables.ts b/react/typings/tables.ts
@@ -15,6 +15,12 @@ type OrderItem = {
   commission: number
 }
 
+type Totalizers = {
+  total: number
+  totalCommissionSum: number
+  totalOrderSum: number
+}
+
 export type AffiliatesOrdersData = {
   id: string
   orderId: string
@@ -32,6 +38,7 @@ export type AffiliatesOrdersQueryReturnType = {
   affiliateOrders: {
     data: [AffiliatesOrdersData]
     pagination: Pagination
+    totalizers: Totalizers
   }
 }
 

diff --git a/react/utils/messages.ts b/react/utils/messages.ts
@@ -150,4 +150,5 @@ export const messages = defineMessages({
   orderStatusPaidLabel: { id: 'admin/order.status.paid.label' },
   orderStatusCancelLabel: { id: 'admin/order.status.cancel.label' },
   orderStatusInvoicedLabel: { id: 'admin/order.status.invoiced.label' },
+  totalOrdersLabel: { id: 'admin/total.orders.label' },
 })