Fix improper display of errors on create/edit refund views (#4903)

* Fix error handling * Changeset
saleor · May 31, 2024 · f1e716e · f1e716e
1 parent 2ec997c
commit f1e716e
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 23 deletions.
diff --git a/.changeset/eight-pillows-fly.md b/.changeset/eight-pillows-fly.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Order Refund views no longer display duplicated errors or no errors at all when submitting the form.
diff --git a/src/orders/views/OrderTransactionRefundCreate/handlers.ts b/src/orders/views/OrderTransactionRefundCreate/handlers.ts
@@ -49,9 +49,14 @@ export const handleRefundCreateComplete = ({
     return;
   }
 
-  if (errors.length > 1) {
+  if (errors.length > 0) {
     errors.forEach((err: OrderGrantRefundCreateErrorFragment) => {
-      if (err.code !== OrderGrantRefundCreateErrorCode.REQUIRED) {
+      if (
+        ![
+          OrderGrantRefundCreateErrorCode.REQUIRED,
+          OrderGrantRefundCreateErrorCode.AMOUNT_GREATER_THAN_AVAILABLE,
+        ].includes(err.code)
+      ) {
         notify({
           status: "error",
           text: err.message,

diff --git a/src/orders/views/OrderTransactionRefundEdit/OrderTransactionRefundEdit.tsx b/src/orders/views/OrderTransactionRefundEdit/OrderTransactionRefundEdit.tsx
@@ -18,6 +18,7 @@ import React, { useState } from "react";
 import { useIntl } from "react-intl";
 
 import { prepareRefundAddLines } from "../OrderTransactionRefundCreate/handlers";
+import { handleRefundEditComplete } from "./handlers";
 import { transactionRefundEditMessages } from "./messages";
 
 interface OrderTransactionRefundProps {
@@ -41,14 +42,15 @@ const OrderTransactionRefund: React.FC<OrderTransactionRefundProps> = ({ orderId
 
   const [updateRefund, updateRefundOpts] = useOrderGrantRefundEditMutation({
     onCompleted: submitData => {
-      if (submitData.orderGrantRefundUpdate?.errors.length === 0) {
-        notify({
-          status: "success",
-          text: "Saved draft",
-        });
-        setLinesErrors([]);
-      }
+      handleRefundEditComplete({
+        submitData,
+        notify,
+        setLinesErrors,
+        intl,
+        orderId,
+      });
     },
+    disableErrorHandling: true,
     update(cache, { data }) {
       if (data?.orderGrantRefundUpdate?.errors?.length === 0) {
         cache.writeQuery({
@@ -85,7 +87,7 @@ const OrderTransactionRefund: React.FC<OrderTransactionRefundProps> = ({ orderId
     const toRemove = draftRefundLines.map(line => line.id);
     const toAdd = prepareRefundAddLines({ linesToRefund, data });
 
-    const result = await updateRefund({
+    updateRefund({
       variables: {
         refundId,
         amount,
@@ -96,19 +98,6 @@ const OrderTransactionRefund: React.FC<OrderTransactionRefundProps> = ({ orderId
         transactionId,
       },
     });
-
-    const errors = result.data?.orderGrantRefundUpdate?.errors;
-
-    if (errors?.length) {
-      setLinesErrors(
-        errors.map(err => ({
-          code: err.code,
-          field: err.field,
-          message: err.message,
-          lines: err.addLines,
-        })) as OrderTransactionRefundError[],
-      );
-    }
   };
 
   const draftRefund: OrderDetailsGrantRefundFragment["grantedRefunds"][0] | undefined =

diff --git a/src/orders/views/OrderTransactionRefundEdit/handlers.ts b/src/orders/views/OrderTransactionRefundEdit/handlers.ts
@@ -0,0 +1,61 @@
+import { IMessage } from "@dashboard/components/messages";
+import {
+  OrderGrantRefundEditMutation,
+  OrderGrantRefundUpdateErrorCode,
+  OrderGrantRefundUpdateErrorFragment,
+} from "@dashboard/graphql";
+import { OrderTransactionRefundError } from "@dashboard/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage";
+import { IntlShape } from "react-intl";
+
+import { transactionRefundEditMessages } from "./messages";
+
+export const handleRefundEditComplete = ({
+  submitData,
+  notify,
+  setLinesErrors,
+  intl,
+}: {
+  submitData: OrderGrantRefundEditMutation;
+  notify: (message: IMessage) => void;
+  setLinesErrors: (value: React.SetStateAction<OrderTransactionRefundError[]>) => void;
+  intl: IntlShape;
+  orderId: string;
+}) => {
+  const errors = submitData.orderGrantRefundUpdate?.errors ?? [];
+  const errorLines: OrderTransactionRefundError[] = [];
+
+  if (errors.length === 0) {
+    notify({
+      status: "success",
+      text: intl.formatMessage(transactionRefundEditMessages.savedDraft),
+    });
+    setLinesErrors([]);
+
+    return;
+  }
+
+  if (errors.length > 0) {
+    errors.forEach((err: OrderGrantRefundUpdateErrorFragment) => {
+      if (
+        ![
+          OrderGrantRefundUpdateErrorCode.REQUIRED,
+          OrderGrantRefundUpdateErrorCode.AMOUNT_GREATER_THAN_AVAILABLE,
+        ].includes(err.code)
+      ) {
+        notify({
+          status: "error",
+          text: err.message,
+        });
+      }
+
+      errorLines.push({
+        code: err.code,
+        field: err.field,
+        lines: err.addLines,
+        message: err.message,
+      } as OrderTransactionRefundError);
+
+      setLinesErrors(errorLines);
+    });
+  }
+};