From f1e716e863b2aae1a656448080ae91daa0e9bec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <droniu@droniu.dev>
Date: Fri, 31 May 2024 11:25:31 +0200
Subject: [PATCH] Fix improper display of errors on create/edit refund views
 (#4903)

* Fix error handling

* Changeset
---
 .changeset/eight-pillows-fly.md               |  5 ++
 .../OrderTransactionRefundCreate/handlers.ts  |  9 ++-
 .../OrderTransactionRefundEdit.tsx            | 31 +++-------
 .../OrderTransactionRefundEdit/handlers.ts    | 61 +++++++++++++++++++
 4 files changed, 83 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/eight-pillows-fly.md
 create mode 100644 src/orders/views/OrderTransactionRefundEdit/handlers.ts

diff --git a/.changeset/eight-pillows-fly.md b/.changeset/eight-pillows-fly.md
new file mode 100644
index 00000000000..51cf228fbd7
--- /dev/null
+++ 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
index 7ad7fd5cdd5..119f1aa748b 100644
--- 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
index 885109e7181..258cc602a00 100644
--- 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
new file mode 100644
index 00000000000..611b3afa340
--- /dev/null
+++ 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);
+    });
+  }
+};