From a4cc4052d2443b8708077a37c54237a95089acc5 Mon Sep 17 00:00:00 2001
From: Sandrine Da Silva <sandrine.dasilva@swan.io>
Date: Thu, 18 Apr 2024 17:50:08 +0200
Subject: [PATCH] Update pending tag color, update alert condition display

---
 .../src/components/TransactionDetail.tsx      | 27 +++++++++++--------
 .../src/components/TransactionListCells.tsx   |  4 +--
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/clients/banking/src/components/TransactionDetail.tsx b/clients/banking/src/components/TransactionDetail.tsx
index 03137bf43..553842db8 100644
--- a/clients/banking/src/components/TransactionDetail.tsx
+++ b/clients/banking/src/components/TransactionDetail.tsx
@@ -147,15 +147,22 @@ export const TransactionDetail = ({
           style={styles.tile}
           footer={match(transaction)
             // BankingFee should never happen, so we don't handle it
-            .with({ feesType: P.not("BankingFee") }, ({ feesType }) => {
-              const description = getFeesDescription(feesType);
+            // We display the description only for non rejected transaction because it has already an alert displayed in this case
+            .with(
+              {
+                feesType: P.not("BankingFee"),
+                statusInfo: { __typename: P.not("RejectedTransactionStatusInfo") },
+              },
+              ({ feesType }) => {
+                const description = getFeesDescription(feesType);
 
-              if (isNullish(description)) {
-                return null;
-              }
+                if (isNullish(description)) {
+                  return null;
+                }
 
-              return <LakeAlert anchored={true} variant="info" title={description} />;
-            })
+                return <LakeAlert anchored={true} variant="info" title={description} />;
+              },
+            )
             .with(
               {
                 statusInfo: { status: "Pending" },
@@ -174,8 +181,6 @@ export const TransactionDetail = ({
             )
             .with(
               {
-                // We display the reason of a rejected transaction which isn't a fee because it has already an alert displayed
-                __typename: P.not("FeeTransaction"),
                 statusInfo: { __typename: "RejectedTransactionStatusInfo", reason: P.select() },
               },
               reason => {
@@ -196,7 +201,7 @@ export const TransactionDetail = ({
               pendingEndDate => (
                 <LakeAlert
                   anchored={true}
-                  variant="warning"
+                  variant="info"
                   title={t("transaction.pendingTransaction.description", {
                     executionDate: formatDateTime(new Date(pendingEndDate), "LL"),
                   })}
@@ -207,7 +212,7 @@ export const TransactionDetail = ({
         >
           {match(transaction.statusInfo.__typename)
             .with("PendingTransactionStatusInfo", () => (
-              <Tag color="warning">{t("transactionStatus.pending")}</Tag>
+              <Tag color="shakespear">{t("transactionStatus.pending")}</Tag>
             ))
             .with("RejectedTransactionStatusInfo", () => (
               <Tag color="negative">{t("transactionStatus.rejected")}</Tag>
diff --git a/clients/banking/src/components/TransactionListCells.tsx b/clients/banking/src/components/TransactionListCells.tsx
index 0a7d92040..e5e761e8d 100644
--- a/clients/banking/src/components/TransactionListCells.tsx
+++ b/clients/banking/src/components/TransactionListCells.tsx
@@ -97,7 +97,7 @@ export const TransactionNameCell = ({ transaction }: { transaction: Transaction
         .with("PendingTransactionStatusInfo", () => (
           <>
             <Space width={16} />
-            <Tag color="warning">{t("transactionStatus.pending")}</Tag>
+            <Tag color="shakespear">{t("transactionStatus.pending")}</Tag>
           </>
         ))
         .with("RejectedTransactionStatusInfo", () => (
@@ -294,7 +294,7 @@ export const TransactionSummaryCell = ({ transaction }: { transaction: Transacti
           .with("PendingTransactionStatusInfo", () => (
             <>
               <Space width={12} />
-              <Tag color="warning">{t("transactionStatus.pending")}</Tag>
+              <Tag color="shakespear">{t("transactionStatus.pending")}</Tag>
             </>
           ))
           .with("RejectedTransactionStatusInfo", () => (