Hide event amounts for CANCEL transaction events (#4587)

* Hide event amounts for CANCEL transaction events

* Add changeset

* Apply suggestions from code review

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

* Refactor const outside of function declaration

* Update changeset

---------

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

.changeset/seven-spies-worry.md

@@ -0,0 +1,6 @@
+---
+"saleor-dashboard": patch
+---
+
+Amounts are now hidden on Transaction events list for `CHARGE_REQUST`, `CHARGE_SUCCESS` and `CHARGE_FAILURE` events.
+These events don't support providing amounts, and they were always displayed as 0.

src/orders/components/OrderTransaction/components/TransactionEvents/components/EventItem.tsx

@@ -1,5 +1,8 @@
 import Money from "@dashboard/components/Money";
-import { TransactionEventFragment } from "@dashboard/graphql";
+import {
+  TransactionEventFragment,
+  TransactionEventTypeEnum,
+} from "@dashboard/graphql";
 import { TransactionFakeEvent } from "@dashboard/orders/types";
 import { TableCell, TableRow } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -87,6 +90,30 @@ const useStyles = makeStyles(
   { name: "OrderTransactionEvents-EventItem" },
 );
 
+const eventsWithoutAmount = new Set([
+  TransactionEventTypeEnum.CANCEL_SUCCESS,
+  TransactionEventTypeEnum.CANCEL_REQUEST,
+  TransactionEventTypeEnum.CANCEL_FAILURE,
+]);
+
+const shouldShowAmount = (
+  event: TransactionEventFragment | TransactionFakeEvent,
+) => {
+  if (!event || !event.amount?.currency) {
+    return false;
+  }
+
+  if (
+    event.__typename === "TransactionEvent" &&
+    event.type &&
+    eventsWithoutAmount.has(event.type)
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
 export const EventItem: React.FC<EventItemProps> = ({
   event,
   onHover,
@@ -109,7 +136,7 @@ export const EventItem: React.FC<EventItemProps> = ({
         <EventStatus status={status} />
       </TableCell>
       <TableCell>
-        {event.amount?.currency && <Money money={event.amount} />}
+        {shouldShowAmount(event) && <Money money={event.amount} />}
       </TableCell>
       <TableCell className={clsx(classes.colSmall, classes.colMessage)}>
         <EventType type={type} message={event.message} />