Handle error when editing address (#3598)

src/components/AddressEdit/AddressEdit.tsx

@@ -2,17 +2,16 @@ import { AddressTypeInput } from "@dashboard/customers/types";
 import { AccountErrorFragment, OrderErrorFragment } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
 import { getFormErrors } from "@dashboard/utils/errors";
-import getAccountErrorMessage from "@dashboard/utils/errors/account";
-import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { TextField } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
-import { IntlShape, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import FormSpacer from "../FormSpacer";
 import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType,
 } from "../SingleAutocompleteSelectField";
+import { getErrorMessage } from "./getErrorMessage";
 import { useAddressValidation } from "./useAddressValidation";
 
 const useStyles = makeStyles(
@@ -36,17 +35,6 @@ interface AddressEditProps {
   onCountryChange(event: React.ChangeEvent<any>);
 }
 
-function getErrorMessage(
-  err: AccountErrorFragment | OrderErrorFragment,
-  intl: IntlShape,
-): string {
-  if (err?.__typename === "AccountError") {
-    return getAccountErrorMessage(err, intl);
-  }
-
-  return getOrderErrorMessage(err, intl);
-}
-
 const PossibleFormFields = {
   CITY: "city",
   CITY_AREA: "cityArea",
@@ -61,9 +49,8 @@ const PossibleFormFields = {
   STREET_ADDRESS_2: "streetAddress2",
 } as const;
 
-const formFields: Array<keyof AddressTypeInput> = Object.values(
+const formFields: Array<keyof AddressTypeInput> =
-  PossibleFormFields,
+  Object.values(PossibleFormFields);
-);
 
 const AddressEdit: React.FC<AddressEditProps> = props => {
   const {

src/components/AddressEdit/getErrorMessage.test.ts

@@ -0,0 +1,63 @@
+import { AccountErrorFragment, OrderErrorFragment } from "@dashboard/graphql";
+import getAccountErrorMessage from "@dashboard/utils/errors/account";
+import getOrderErrorMessage from "@dashboard/utils/errors/order";
+import { IntlShape } from "react-intl";
+
+import { getErrorMessage } from "./getErrorMessage";
+
+jest.mock("@dashboard/utils/errors/account", () => jest.fn());
+jest.mock("@dashboard/utils/errors/order", () => jest.fn());
+
+describe("getErrorMessage", () => {
+  it("returns original message when it exist", () => {
+    // Arrange
+    const error = {
+      __typename: "AccountError",
+      message: "test message",
+      code: "INVALID",
+    } as AccountErrorFragment;
+    const intlShape = {} as IntlShape;
+
+    // Act
+    const message = getErrorMessage(error, intlShape);
+
+    // Assert
+    expect(message).toBe("test message");
+  });
+
+  it("returns account error message", () => {
+    // Arrange
+    const error = {
+      __typename: "AccountError",
+      message: null,
+      code: "INVALID",
+    } as AccountErrorFragment;
+    const intlShape = {} as IntlShape;
+    (getAccountErrorMessage as jest.Mock).mockReturnValue(
+      "account error message",
+    );
+
+    // Act
+    const message = getErrorMessage(error, intlShape);
+
+    // Assert
+    expect(message).toBe("account error message");
+  });
+
+  it("returns account error message", () => {
+    // Arrange
+    const error = {
+      __typename: "OrderError",
+      message: null,
+      code: "INVALID",
+    } as unknown as OrderErrorFragment;
+    const intlShape = {} as IntlShape;
+    (getOrderErrorMessage as jest.Mock).mockReturnValue("order error message");
+
+    // Act
+    const message = getErrorMessage(error, intlShape);
+
+    // Assert
+    expect(message).toBe("order error message");
+  });
+});

src/components/AddressEdit/getErrorMessage.ts

@@ -0,0 +1,19 @@
+import { AccountErrorFragment, OrderErrorFragment } from "@dashboard/graphql";
+import getAccountErrorMessage from "@dashboard/utils/errors/account";
+import getOrderErrorMessage from "@dashboard/utils/errors/order";
+import { IntlShape } from "react-intl";
+
+export function getErrorMessage(
+  err: AccountErrorFragment | OrderErrorFragment,
+  intl: IntlShape,
+): string {
+  if (err?.message) {
+    return err.message;
+  }
+
+  if (err?.__typename === "AccountError") {
+    return getAccountErrorMessage(err, intl);
+  }
+
+  return getOrderErrorMessage(err, intl);
+}