From 9c8523ad074067f1c741b444e13919709d03ff8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cec=C3=ADlia=20Rom=C3=A3o?= <ceciliaromao@gmail.com>
Date: Thu, 2 Nov 2023 11:30:40 -0300
Subject: [PATCH] [statistics] feat: include canceled payments (#45)

---
 src/components/DashboardAnalytics.tsx  |  9 +++++++++
 src/components/DisbursementsTable.tsx  |  4 ++++
 src/helpers/formatDisbursements.ts     |  1 +
 src/helpers/formatReceiver.ts          |  1 +
 src/helpers/formatStatistics.ts        |  4 +++-
 src/pages/DisbursementDetails.tsx      | 11 +++++++++++
 src/pages/ReceiverDetails.tsx          | 11 +++++++++++
 src/store/ducks/disbursementDetails.ts |  1 +
 src/types/index.ts                     |  7 +++++++
 9 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/components/DashboardAnalytics.tsx b/src/components/DashboardAnalytics.tsx
index e7e25a7..07792e6 100644
--- a/src/components/DashboardAnalytics.tsx
+++ b/src/components/DashboardAnalytics.tsx
@@ -79,6 +79,15 @@ export const DashboardAnalytics = () => {
                 </div>
               </div>
 
+              <div className="StatCards__card__item StatCards__card__item--inline">
+                <label className="StatCards__card__item__label">
+                  Canceled payments
+                </label>
+                <div className="StatCards__card__item__value">
+                  {renderNumberOrDash(stats?.paymentsCanceledCount)}
+                </div>
+              </div>
+
               <div className="StatCards__card__item StatCards__card__item--inline">
                 <label className="StatCards__card__item__label">
                   Remaining payments
diff --git a/src/components/DisbursementsTable.tsx b/src/components/DisbursementsTable.tsx
index 2c61192..196d8b5 100644
--- a/src/components/DisbursementsTable.tsx
+++ b/src/components/DisbursementsTable.tsx
@@ -109,6 +109,7 @@ export const DisbursementsTable: React.FC<DisbursementsTableProps> = ({
             <Table.HeaderCell>Total payments</Table.HeaderCell>
             <Table.HeaderCell>Successful</Table.HeaderCell>
             <Table.HeaderCell>Failed</Table.HeaderCell>
+            <Table.HeaderCell>Canceled</Table.HeaderCell>
             <Table.HeaderCell>Remaining</Table.HeaderCell>
             <Table.HeaderCell
               sortDirection={
@@ -149,6 +150,9 @@ export const DisbursementsTable: React.FC<DisbursementsTableProps> = ({
                 <Table.BodyCell width="2.25rem" textAlign="right">
                   {renderNumberOrDash(d.stats?.paymentsFailedCount)}
                 </Table.BodyCell>
+                <Table.BodyCell width="3.4rem" textAlign="right">
+                  {renderNumberOrDash(d.stats?.paymentsCanceledCount)}
+                </Table.BodyCell>
                 <Table.BodyCell width="3.75rem" textAlign="right">
                   {renderNumberOrDash(d.stats?.paymentsRemainingCount)}
                 </Table.BodyCell>
diff --git a/src/helpers/formatDisbursements.ts b/src/helpers/formatDisbursements.ts
index c0c4187..a525f31 100644
--- a/src/helpers/formatDisbursements.ts
+++ b/src/helpers/formatDisbursements.ts
@@ -15,6 +15,7 @@ export const formatDisbursement = (
   stats: {
     paymentsSuccessfulCount: disbursement.total_payments_sent,
     paymentsFailedCount: disbursement.total_payments_failed,
+    paymentsCanceledCount: disbursement.total_payments_canceled,
     paymentsRemainingCount: disbursement.total_payments_remaining,
     paymentsTotalCount: disbursement.total_payments,
     totalAmount: disbursement.total_amount,
diff --git a/src/helpers/formatReceiver.ts b/src/helpers/formatReceiver.ts
index 222f2b3..05445a4 100644
--- a/src/helpers/formatReceiver.ts
+++ b/src/helpers/formatReceiver.ts
@@ -12,6 +12,7 @@ export const formatReceiver = (receiver: ApiReceiver): ReceiverDetails => ({
     paymentsTotalCount: Number(receiver.total_payments),
     paymentsSuccessfulCount: Number(receiver.successful_payments),
     paymentsFailedCount: Number(receiver.failed_payments),
+    paymentsCanceledCount: Number(receiver.canceled_payments),
     paymentsRemainingCount: Number(receiver.remaining_payments),
   },
   wallets: receiver.wallets.map((w) => ({
diff --git a/src/helpers/formatStatistics.ts b/src/helpers/formatStatistics.ts
index d862eb2..97b9b66 100644
--- a/src/helpers/formatStatistics.ts
+++ b/src/helpers/formatStatistics.ts
@@ -4,10 +4,12 @@ export const formatStatistics = (statistics: ApiStatistics): HomeStatistics => {
   return {
     paymentsSuccessfulCounts: statistics.payment_counters.success,
     paymentsFailedCount: statistics.payment_counters.failed,
+    paymentsCanceledCount: statistics.payment_counters.canceled,
     paymentsRemainingCount: Number(
       statistics.payment_counters.total -
         statistics.payment_counters.success -
-        statistics.payment_counters.failed,
+        statistics.payment_counters.failed -
+        statistics.payment_counters.canceled,
     ),
     paymentsTotalCount: statistics.payment_counters.total,
     walletsTotalCount: statistics.receiver_wallets_counters.total,
diff --git a/src/pages/DisbursementDetails.tsx b/src/pages/DisbursementDetails.tsx
index 69d4c37..451c081 100644
--- a/src/pages/DisbursementDetails.tsx
+++ b/src/pages/DisbursementDetails.tsx
@@ -236,6 +236,17 @@ export const DisbursementDetails = () => {
                 </div>
               </div>
 
+              <div className="StatCards__card__item StatCards__card__item--inline">
+                <label className="StatCards__card__item__label">
+                  Canceled payments
+                </label>
+                <div className="StatCards__card__item__value">
+                  {renderNumberOrDash(
+                    disbursementDetails.details.stats?.paymentsCanceledCount,
+                  )}
+                </div>
+              </div>
+
               <div className="StatCards__card__item StatCards__card__item--inline">
                 <label className="StatCards__card__item__label">
                   Remaining payments
diff --git a/src/pages/ReceiverDetails.tsx b/src/pages/ReceiverDetails.tsx
index a5f2c84..e71d70b 100644
--- a/src/pages/ReceiverDetails.tsx
+++ b/src/pages/ReceiverDetails.tsx
@@ -200,6 +200,17 @@ export const ReceiverDetails = () => {
                 </div>
               </div>
 
+              <div className="StatCards__card__item StatCards__card__item--inline">
+                <label className="StatCards__card__item__label">
+                  Canceled payments
+                </label>
+                <div className="StatCards__card__item__value">
+                  {renderNumberOrDash(
+                    receiverDetails.stats.paymentsCanceledCount,
+                  )}
+                </div>
+              </div>
+
               <div className="StatCards__card__item StatCards__card__item--inline">
                 <label className="StatCards__card__item__label">
                   Remaining payments
diff --git a/src/store/ducks/disbursementDetails.ts b/src/store/ducks/disbursementDetails.ts
index 2514177..7e5bdf4 100644
--- a/src/store/ducks/disbursementDetails.ts
+++ b/src/store/ducks/disbursementDetails.ts
@@ -118,6 +118,7 @@ const initialState: DisbursementDetailsInitialState = {
     stats: {
       paymentsSuccessfulCount: 0,
       paymentsFailedCount: 0,
+      paymentsCanceledCount: 0,
       paymentsRemainingCount: 0,
       paymentsTotalCount: 0,
       totalAmount: "",
diff --git a/src/types/index.ts b/src/types/index.ts
index cb094bd..ae1e76a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -269,6 +269,7 @@ export interface DisbursementDraftRejectMessage extends RejectMessage {
 export type DisbursementDetailsStats = {
   paymentsSuccessfulCount: number;
   paymentsFailedCount: number;
+  paymentsCanceledCount: number;
   paymentsRemainingCount: number;
   paymentsTotalCount: number;
   totalAmount: string;
@@ -411,6 +412,7 @@ export type ReceiverDetails = {
     paymentsTotalCount: number;
     paymentsSuccessfulCount: number;
     paymentsFailedCount: number;
+    paymentsCanceledCount: number;
     paymentsRemainingCount: number;
   };
   wallets: ReceiverWallet[];
@@ -428,6 +430,7 @@ export type ReceiverEditFields = {
 export type HomeStatistics = {
   paymentsSuccessfulCounts: number;
   paymentsFailedCount: number;
+  paymentsCanceledCount: number;
   paymentsRemainingCount: number;
   paymentsTotalCount: number;
   walletsTotalCount: number;
@@ -551,6 +554,7 @@ export type ApiDisbursement = {
   total_payments: number;
   total_payments_sent: number;
   total_payments_failed: number;
+  total_payments_canceled: number;
   total_payments_remaining: number;
   amount_disbursed: string;
   total_amount: string;
@@ -618,6 +622,7 @@ export type ApiPayments = {
 export type ApiStatisticsAsset = {
   asset_code: string;
   payment_amounts: {
+    canceled: number;
     draft: number;
     ready: number;
     pending: number;
@@ -631,6 +636,7 @@ export type ApiStatisticsAsset = {
 
 export type ApiStatistics = {
   payment_counters: {
+    canceled: number;
     draft: number;
     ready: number;
     pending: number;
@@ -725,6 +731,7 @@ export type ApiReceiver = {
   total_payments: string | number;
   successful_payments: string | number;
   failed_payments: string | number;
+  canceled_payments: string | number;
   remaining_payments: string | number;
   received_amounts?: {
     asset_code: string;