Event reporter UI improvements (#32)

* Add event reported & fix paths

* Fix paths

* wip

* Fix event reporter

* better colors

* error handling

* remove comment

* Fix peer dependency issue

graphql/fragments/Transaction.graphql

@@ -38,4 +38,7 @@ fragment Transaction on TransactionItem {
     }
     type
   }
+  order {
+    id
+  }
 }

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@saleor/app-sdk": "0.50.0",
     "@saleor/macaw-ui": "1.0.0",
-    "@tanstack/react-query": "5.51.1",
+    "@tanstack/react-query": "^4.18.0",
     "@trpc/client": "10.45.2",
     "@trpc/next": "10.45.2",
     "@trpc/react-query": "10.45.2",

src/components/StatusChip.tsx

@@ -9,36 +9,42 @@ export const StatusChip = ({ eventType }: StatusChipProps) => {
   switch (eventType) {
     case TransactionEventTypeEnum.ChargeRequest:
     case TransactionEventTypeEnum.AuthorizationRequest:
+    case TransactionEventTypeEnum.CancelRequest:
+    case TransactionEventTypeEnum.RefundRequest:
       return (
         <Chip color="info1" backgroundColor="info1">
-          REQUESTED
+          {eventType?.replace(/_/g, " ") ?? "UNKNOWN"}
         </Chip>
       );
     case TransactionEventTypeEnum.ChargeActionRequired:
     case TransactionEventTypeEnum.AuthorizationActionRequired:
       return (
         <Chip color="warning1" backgroundColor="warning1">
-          ACTION REQUIRED
+          {eventType?.replace(/_/g, " ") ?? "UNKNOWN"}
         </Chip>
       );
     case TransactionEventTypeEnum.ChargeFailure:
     case TransactionEventTypeEnum.AuthorizationFailure:
+    case TransactionEventTypeEnum.CancelFailure:
+    case TransactionEventTypeEnum.RefundFailure:
       return (
         <Chip color="critical1" backgroundColor="critical1">
-          FAILURE
+          {eventType?.replace(/_/g, " ") ?? "UNKNOWN"}
         </Chip>
       );
     case TransactionEventTypeEnum.ChargeSuccess:
     case TransactionEventTypeEnum.AuthorizationSuccess:
+    case TransactionEventTypeEnum.CancelSuccess:
+    case TransactionEventTypeEnum.RefundSuccess:
       return (
         <Chip color="success1" backgroundColor="success1">
-          SUCCESS
+          {eventType?.replace(/_/g, " ") ?? "UNKNOWN"}
         </Chip>
       );
-
+    // Chargeback, refund reverse, info, authorization adjustment
     default:
       return (
-        <Chip color="default1" backgroundColor="default1">
+        <Chip color="default1" backgroundColor="default1" whiteSpace="nowrap">
           {eventType?.replace(/_/g, " ") ?? "UNKNOWN"}
         </Chip>
       );

src/pages/app/transactions/[id].tsx

@@ -1,8 +1,8 @@
-import { Box, Button, Chip, Combobox, Input, Spinner, Text } from "@saleor/macaw-ui";
+import { Box, Button, Combobox, Input, OrdersIcon, Spinner, Text } from "@saleor/macaw-ui";
 import { useRouter } from "next/router";
 import { StatusChip } from "@/components/StatusChip";
-import { useAppBridge } from "@saleor/app-sdk/app-bridge";
-import React, { useState } from "react";
+import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
+import React from "react";
 import { trpcClient } from "@/trpc-client";
 import { TransactionEventTypeEnum, useTransactionDetailsViaIdQuery } from "@/generated/graphql";
 
@@ -43,8 +43,8 @@ function formatDateTime(dateString: string, locale = "en-US") {
 
 const EventReporterPage = () => {
   const router = useRouter();
-  const { appBridgeState } = useAppBridge();
-  const [otherError, setOtherError] = useState<string | null>(null);
+  const { appBridgeState, appBridge } = useAppBridge();
+  const [otherError, setOtherError] = React.useState<string | null>(null);
 
   const transactionId = router.query.id as string;
 
@@ -55,35 +55,45 @@ const EventReporterPage = () => {
 
   const [amount, setAmount] = React.useState("");
 
-  const [{ data, fetching }, refetchDetails] = useTransactionDetailsViaIdQuery({
+  const navigateToOrder = (id: string) => {
+    appBridge?.dispatch(
+      actions.Redirect({
+        to: `/orders/${id}`,
+        newContext: true,
+      })
+    );
+  };
+
+  const [{ data, fetching }, refetch] = useTransactionDetailsViaIdQuery({
     variables: {
       id: transactionId,
     },
   });
 
   const transaction = data?.transaction;
 
+  const orderId = transaction?.order?.id;
+
   const mutation = trpcClient.transactionReporter.reportEvent.useMutation();
 
+  const isLoading = fetching || mutation.isLoading;
   const handleReportEvent = async () => {
     setOtherError(null);
     try {
       const parsedAmount = parseFloat(amount);
 
       if (Number.isNaN(parsedAmount)) {
         setOtherError("Invalid amount");
-        throw new Error("Invalid amount");
+        return;
       }
-
-      const result = await mutation.mutateAsync({
-        id: transactionId,
-        amount: parsedAmount,
+      await mutation.mutateAsync({
+        id: transaction?.id ?? "",
+        amount: parseFloat(amount),
         type: eventType.value,
       });
-      console.log("Mutation result:", result);
-      refetchDetails({ requestPolicy: "network-only" });
+      refetch({ requestPolicy: "network-only" });
     } catch (error) {
-      console.error("Error reporting event:", error);
+      console.error(error);
     }
   };
 
@@ -103,12 +113,18 @@ const EventReporterPage = () => {
         padding={4}
         borderRadius={4}
         borderStyle="solid"
-        borderColor="default2"
+        borderColor="default1"
         boxShadow="defaultFocused"
       >
         {data ? (
           <>
-            <Text size={6}>{transaction?.name.length ? transaction.name : "Transaction"}</Text>
+            <Box display="flex" justifyContent="space-between">
+              <Text size={6}>{transaction?.name.length ? transaction.name : "Transaction"}</Text>
+              <Button variant="secondary" onClick={() => navigateToOrder(orderId ?? "")}>
+                <OrdersIcon />
+                Open order
+              </Button>
+            </Box>
             <Text color="default2" marginBottom={4}>
               {transaction?.pspReference}
             </Text>
@@ -117,7 +133,7 @@ const EventReporterPage = () => {
                 gap={2}
                 key={event.id}
                 display="grid"
-                __gridTemplateColumns="80px 150px 150px 200px"
+                __gridTemplateColumns="auto 150px 150px 200px"
               >
                 <Box justifySelf="start">
                   <StatusChip eventType={event.type} />
@@ -160,8 +176,12 @@ const EventReporterPage = () => {
           endAdornment={<Text size={1}>{transaction?.chargedAmount.currency}</Text>}
         />
       </Box>
-      <Button onClick={handleReportEvent} disabled={mutation.isLoading}>
-        Fire event!
+      <Button
+        disabled={isLoading}
+        onClick={handleReportEvent}
+        variant={otherError || mutation.error ? "error" : "primary"}
+      >
+        {isLoading && <Spinner />}Fire event!
       </Button>
       {mutation.data && (
         <Text color="success1">

src/pages/app/transactions/index.tsx

@@ -6,8 +6,9 @@ import React, { useEffect } from "react";
 const TransactionsPage = () => {
   const router = useRouter();
   const [pspReference, setPspReference] = React.useState<string>("");
+  const [notFoundError, setNotFoundError] = React.useState(false);
 
-  const [{ data, error }, fetchTransactions] = useTransactionDetailsViaPspQuery({
+  const [{ data, error: apiError }, fetchTransactions] = useTransactionDetailsViaPspQuery({
     variables: {
       pspReference,
     },
@@ -21,10 +22,14 @@ const TransactionsPage = () => {
       });
       if (transaction) {
         router.push(`/app/transactions/${transaction.id}`);
+      } else {
+        setNotFoundError(true);
       }
     }
   }, [data]);
 
+  const displayError = notFoundError || apiError;
+
   return (
     <Box
       display="flex"
@@ -46,14 +51,18 @@ const TransactionsPage = () => {
           Clear
         </Button>
         <Button
-          onClick={() => fetchTransactions()}
+          onClick={() => {
+            setNotFoundError(false);
+            fetchTransactions();
+          }}
           disabled={!pspReference}
-          variant={error ? "error" : "primary"}
+          variant={displayError ? "error" : "primary"}
         >
           Go to transaction
         </Button>
       </Box>
-      {error && <Text color="critical1">Invalid PSP Reference</Text>}
+      {notFoundError && <Text color="critical1">Invalid PSP Reference</Text>}
+      {apiError && <Text color="critical1">Error fetching transaction</Text>}
     </Box>
   );
 };