Use error codes in account sections

src/components/AddressEdit/AddressEdit.tsx

@@ -1,12 +1,15 @@
 import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
-import { useIntl } from "react-intl";
+import { useIntl, IntlShape } from "react-intl";
 
 import { AddressTypeInput } from "@saleor/customers/types";
 import { commonMessages } from "@saleor/intl";
-import { UserError } from "@saleor/types";
+import { getFormErrors } from "@saleor/utils/errors";
-import { getFieldError } from "@saleor/utils/errors";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
+import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
+import getOrderErrorMessage from "@saleor/utils/errors/order";
 import FormSpacer from "../FormSpacer";
 import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
@@ -28,11 +31,22 @@ interface AddressEditProps {
   countryDisplayValue: string;
   data: AddressTypeInput;
   disabled?: boolean;
-  errors: UserError[];
+  errors: Array<AccountErrorFragment | OrderErrorFragment>;
   onChange(event: React.ChangeEvent<any>);
   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 AddressEdit: React.FC<AddressEditProps> = props => {
   const {
     countries,
@@ -43,18 +57,36 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
     onChange,
     onCountryChange
   } = props;
-  const classes = useStyles(props);
 
+  const classes = useStyles(props);
   const intl = useIntl();
 
+  const formFields: Array<keyof AddressTypeInput> = [
+    "city",
+    "cityArea",
+    "country",
+    "countryArea",
+    "firstName",
+    "lastName",
+    "companyName",
+    "phone",
+    "postalCode",
+    "streetAddress1",
+    "streetAddress2"
+  ];
+  const formErrors = getFormErrors<
+    keyof AddressTypeInput,
+    AccountErrorFragment | OrderErrorFragment
+  >(formFields, errors);
+
   return (
     <>
       <div className={classes.root}>
         <div>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "firstName")}
+            error={!!formErrors.firstName}
-            helperText={getFieldError(errors, "firstName")?.message}
+            helperText={getErrorMessage(formErrors.firstName, intl)}
             label={intl.formatMessage(commonMessages.firstName)}
             name="firstName"
             onChange={onChange}
@@ -65,8 +97,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         <div>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "lastName")}
+            error={!!formErrors.lastName}
-            helperText={getFieldError(errors, "lastName")?.message}
+            helperText={getErrorMessage(formErrors.lastName, intl)}
             label={intl.formatMessage(commonMessages.lastName)}
             name="lastName"
             onChange={onChange}
@@ -80,8 +112,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         <div>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "companyName")}
+            error={!!formErrors.companyName}
-            helperText={getFieldError(errors, "companyName")?.message}
+            helperText={getErrorMessage(formErrors.companyName, intl)}
             label={intl.formatMessage({
               defaultMessage: "Company"
             })}
@@ -94,9 +126,9 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         <div>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "phone")}
+            error={!!formErrors.phone}
             fullWidth
-            helperText={getFieldError(errors, "phone")?.message}
+            helperText={getErrorMessage(formErrors.phone, intl)}
             label={intl.formatMessage({
               defaultMessage: "Phone"
             })}
@@ -109,8 +141,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
       <FormSpacer />
       <TextField
         disabled={disabled}
-        error={!!getFieldError(errors, "streetAddress1")}
+        error={!!formErrors.streetAddress1}
-        helperText={getFieldError(errors, "streetAddress1")?.message}
+        helperText={getErrorMessage(formErrors.streetAddress1, intl)}
         label={intl.formatMessage({
           defaultMessage: "Address line 1"
         })}
@@ -122,8 +154,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
       <FormSpacer />
       <TextField
         disabled={disabled}
-        error={!!getFieldError(errors, "streetAddress2")}
+        error={!!formErrors.streetAddress2}
-        helperText={getFieldError(errors, "streetAddress2")?.message}
+        helperText={getErrorMessage(formErrors.streetAddress2, intl)}
         label={intl.formatMessage({
           defaultMessage: "Address line 2"
         })}
@@ -137,8 +169,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         <div>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "city")}
+            error={!!formErrors.city}
-            helperText={getFieldError(errors, "city")?.message}
+            helperText={getErrorMessage(formErrors.city, intl)}
             label={intl.formatMessage({
               defaultMessage: "City"
             })}
@@ -151,8 +183,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         <div>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "postalCode")}
+            error={!!formErrors.postalCode}
-            helperText={getFieldError(errors, "postalCode")?.message}
+            helperText={getErrorMessage(formErrors.postalCode, intl)}
             label={intl.formatMessage({
               defaultMessage: "ZIP / Postal code"
             })}
@@ -170,8 +202,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
           <SingleAutocompleteSelectField
             disabled={disabled}
             displayValue={countryDisplayValue}
-            error={!!getFieldError(errors, "country")}
+            error={!!formErrors.country}
-            helperText={getFieldError(errors, "country")?.message}
+            helperText={getErrorMessage(formErrors.country, intl)}
             label={intl.formatMessage({
               defaultMessage: "Country"
             })}
@@ -187,8 +219,8 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         <div>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "countryArea")}
+            error={!!formErrors.countryArea}
-            helperText={getFieldError(errors, "countryArea")?.message}
+            helperText={getErrorMessage(formErrors.countryArea, intl)}
             label={intl.formatMessage({
               defaultMessage: "Country area"
             })}

src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx

@@ -17,9 +17,9 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { UserError } from "@saleor/types";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 import { AddressTypeInput } from "../../types";
 import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses";
 
@@ -30,7 +30,7 @@ export interface CustomerAddressDialogProps {
     code: string;
     label: string;
   }>;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   open: boolean;
   variant: "create" | "edit";
   onClose: () => void;

src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx

@@ -9,7 +9,7 @@ import AddressEdit from "@saleor/components/AddressEdit";
 import CardTitle from "@saleor/components/CardTitle";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
-import { UserError } from "../../../types";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 import { AddressTypeInput } from "../../types";
 
 const useStyles = makeStyles(
@@ -26,7 +26,7 @@ export interface CustomerCreateAddressProps {
   countryDisplayName: string;
   data: AddressTypeInput;
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   onChange(event: React.ChangeEvent<any>);
   onCountryChange(event: React.ChangeEvent<any>);
 }

src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx

@@ -7,8 +7,9 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { commonMessages } from "@saleor/intl";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
-import { UserError } from "../../../types";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
 import { CustomerCreatePageFormData } from "../CustomerCreatePage";
 
 const useStyles = makeStyles(
@@ -26,16 +27,21 @@ const useStyles = makeStyles(
 export interface CustomerCreateDetailsProps {
   data: CustomerCreatePageFormData;
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
 const CustomerCreateDetails: React.FC<CustomerCreateDetailsProps> = props => {
   const { data, disabled, errors, onChange } = props;
-  const classes = useStyles(props);
 
+  const classes = useStyles(props);
   const intl = useIntl();
 
+  const formErrors = getFormErrors(
+    ["customerFirstName", "customerLastName", "email"],
+    errors
+  );
+
   return (
     <Card>
       <CardTitle
@@ -48,33 +54,39 @@ const CustomerCreateDetails: React.FC<CustomerCreateDetailsProps> = props => {
         <div className={classes.root}>
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "customerFirstName")}
+            error={!!formErrors.customerFirstName}
             fullWidth
             name="customerFirstName"
             label={intl.formatMessage(commonMessages.firstName)}
-            helperText={getFieldError(errors, "customerFirstName")?.message}
+            helperText={getAccountErrorMessage(
+              formErrors.customerFirstName,
+              intl
+            )}
             type="text"
             value={data.customerFirstName}
             onChange={onChange}
           />
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "customerLastName")}
+            error={!!formErrors.customerLastName}
             fullWidth
             name="customerLastName"
             label={intl.formatMessage(commonMessages.lastName)}
-            helperText={getFieldError(errors, "customerLastName")?.message}
+            helperText={getAccountErrorMessage(
+              formErrors.customerLastName,
+              intl
+            )}
             type="text"
             value={data.customerLastName}
             onChange={onChange}
           />
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "email")}
+            error={!!formErrors.email}
             fullWidth
             name="email"
             label={intl.formatMessage(commonMessages.email)}
-            helperText={getFieldError(errors, "email")?.message}
+            helperText={getAccountErrorMessage(formErrors.email, intl)}
             type="email"
             value={data.email}
             onChange={onChange}
@@ -84,5 +96,6 @@ const CustomerCreateDetails: React.FC<CustomerCreateDetailsProps> = props => {
     </Card>
   );
 };
+
 CustomerCreateDetails.displayName = "CustomerCreateDetails";
 export default CustomerCreateDetails;

src/customers/components/CustomerCreateNote/CustomerCreateNote.tsx

@@ -7,15 +7,16 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { FormSpacer } from "@saleor/components/FormSpacer";
-import { UserError } from "@saleor/types";
+import { getFormErrors } from "@saleor/utils/errors";
-import { getFieldError } from "@saleor/utils/errors";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 
 export interface CustomerCreateNoteProps {
   data: {
     note: string;
   };
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -27,6 +28,8 @@ const CustomerCreateNote: React.FC<CustomerCreateNoteProps> = ({
 }) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["note"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -42,11 +45,11 @@ const CustomerCreateNote: React.FC<CustomerCreateNoteProps> = ({
         <FormSpacer />
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "note")}
+          error={!!formErrors.note}
           fullWidth
           multiline
           name="note"
-          helperText={getFieldError(errors, "note")?.message}
+          helperText={getAccountErrorMessage(formErrors.note, intl)}
           label={intl.formatMessage({
             defaultMessage: "Note",
             description: "note about customer"

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -13,7 +13,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import { sectionNames } from "@saleor/intl";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import { UserError } from "../../../types";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 import { AddressTypeInput } from "../../types";
 import { CustomerCreateData_shop_countries } from "../../types/CustomerCreateData";
 import CustomerCreateAddress from "../CustomerCreateAddress/CustomerCreateAddress";
@@ -52,7 +52,7 @@ const initialForm: CustomerCreatePageFormData & AddressTypeInput = {
 export interface CustomerCreatePageProps {
   countries: CustomerCreateData_shop_countries[];
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   saveButtonBar: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: CustomerCreatePageSubmitData) => void;

src/customers/components/CustomerDetails/CustomerDetails.tsx

@@ -11,8 +11,9 @@ import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Skeleton from "@saleor/components/Skeleton";
 import { maybe } from "@saleor/misc";
-import { UserError } from "@saleor/types";
+import { getFormErrors } from "@saleor/utils/errors";
-import { getFieldError } from "@saleor/utils/errors";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
 const useStyles = makeStyles(
@@ -40,16 +41,18 @@ export interface CustomerDetailsProps {
     note: string;
   };
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
 const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
   const { customer, data, disabled, errors, onChange } = props;
-  const classes = useStyles(props);
 
+  const classes = useStyles(props);
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["note"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -91,10 +94,10 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
         />
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "note")}
+          error={!!formErrors.note}
           fullWidth
           multiline
-          helperText={getFieldError(errors, "note")?.message}
+          helperText={getAccountErrorMessage(formErrors.note, intl)}
           name="note"
           label={intl.formatMessage({
             defaultMessage: "Note",

src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx

@@ -10,8 +10,8 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { sectionNames } from "@saleor/intl";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 import { getUserName, maybe } from "../../../misc";
-import { UserError } from "../../../types";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 import CustomerAddresses from "../CustomerAddresses";
 import CustomerDetails from "../CustomerDetails";
@@ -30,7 +30,7 @@ export interface CustomerDetailsPageFormData {
 export interface CustomerDetailsPageProps {
   customer: CustomerDetails_user;
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   saveButtonBar: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: CustomerDetailsPageFormData) => void;

src/customers/components/CustomerInfo/CustomerInfo.tsx

@@ -10,8 +10,9 @@ import CardTitle from "@saleor/components/CardTitle";
 import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import { commonMessages } from "@saleor/intl";
-import { UserError } from "@saleor/types";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
 
 const useStyles = makeStyles(
   theme => ({
@@ -35,16 +36,18 @@ export interface CustomerInfoProps {
     email: string;
   };
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
 const CustomerInfo: React.FC<CustomerInfoProps> = props => {
   const { data, disabled, errors, onChange } = props;
-  const classes = useStyles(props);
 
+  const classes = useStyles(props);
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["firstName", "lastName", "email"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -62,9 +65,9 @@ const CustomerInfo: React.FC<CustomerInfoProps> = props => {
         <Grid variant="uniform">
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "firstName")}
+            error={!!formErrors.firstName}
             fullWidth
-            helperText={getFieldError(errors, "firstName")?.message}
+            helperText={getAccountErrorMessage(formErrors.firstName, intl)}
             name="firstName"
             type="text"
             label={intl.formatMessage(commonMessages.firstName)}
@@ -73,9 +76,9 @@ const CustomerInfo: React.FC<CustomerInfoProps> = props => {
           />
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "lastName")}
+            error={!!formErrors.lastName}
             fullWidth
-            helperText={getFieldError(errors, "lastName")?.message}
+            helperText={getAccountErrorMessage(formErrors.lastName, intl)}
             name="lastName"
             type="text"
             label={intl.formatMessage(commonMessages.lastName)}
@@ -92,9 +95,9 @@ const CustomerInfo: React.FC<CustomerInfoProps> = props => {
         </Typography>
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "email")}
+          error={!!formErrors.email}
           fullWidth
-          helperText={getFieldError(errors, "email")?.message}
+          helperText={getAccountErrorMessage(formErrors.email, intl)}
           name="email"
           type="email"
           label={intl.formatMessage(commonMessages.email)}

src/customers/views/CustomerCreate.tsx

@@ -41,20 +41,8 @@ export const CustomerCreate: React.FC<{}> = () => {
               <CustomerCreatePage
                 countries={maybe(() => data.shop.countries, [])}
                 disabled={loading || createCustomerOpts.loading}
-                errors={maybe(() => {
+                errors={createCustomerOpts.data?.customerCreate.errors || []}
-                  const errs = createCustomerOpts.data.customerCreate.errors;
+                saveButtonBar={createCustomerOpts.status}
-                  return errs.map(err =>
-                    err.field.split(":").length > 1
-                      ? {
-                          ...err,
-                          field: err.field.split(":")[1]
-                        }
-                      : err
-                  );
-                }, [])}
-                saveButtonBar={
-                  createCustomerOpts.loading ? "loading" : "default"
-                }
                 onBack={() => navigate(customerListUrl())}
                 onSubmit={formData => {
                   createCustomer({

src/hooks/useAddressValidation.ts

@@ -1,27 +1,27 @@
 import { useState } from "react";
-import { useIntl } from "react-intl";
 
 import { AddressTypeInput } from "@saleor/customers/types";
-import { commonMessages } from "@saleor/intl";
 import { transformFormToAddress } from "@saleor/misc";
-import { UserError } from "@saleor/types";
+import { AddressInput, AccountErrorCode } from "@saleor/types/globalTypes";
-import { AddressInput } from "@saleor/types/globalTypes";
 import { add, remove } from "@saleor/utils/lists";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 
 interface UseAddressValidation<T> {
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   submit: (data: T & AddressTypeInput) => void;
 }
 
 function useAddressValidation<T>(
   onSubmit: (address: T & AddressInput) => void
 ): UseAddressValidation<T> {
-  const intl = useIntl();
+  const [validationErrors, setValidationErrors] = useState<
-  const [validationErrors, setValidationErrors] = useState<UserError[]>([]);
+    AccountErrorFragment[]
+  >([]);
 
-  const countryRequiredError = {
+  const countryRequiredError: AccountErrorFragment = {
-    field: "country",
+    __typename: "AccountError",
-    message: intl.formatMessage(commonMessages.requiredField)
+    code: AccountErrorCode.REQUIRED,
+    field: "country"
   };
 
   return {

src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx

@@ -18,9 +18,9 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { UserError } from "@saleor/types";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
 
 const useStyles = makeStyles(
   {
@@ -35,7 +35,7 @@ interface OrderAddressEditDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   address: AddressTypeInput;
   open: boolean;
-  errors: UserError[];
+  errors: OrderErrorFragment[];
   variant: "billing" | "shipping" | string;
   countries?: Array<{
     code: string;

src/orders/mutations.ts

@@ -64,6 +64,13 @@ import {
 import { OrderUpdate, OrderUpdateVariables } from "./types/OrderUpdate";
 import { OrderVoid, OrderVoidVariables } from "./types/OrderVoid";
 
+export const orderErrorFragment = gql`
+  fragment OrderErrorFragment on OrderError {
+    code
+    field
+  }
+`;
+
 const orderCancelMutation = gql`
   ${fragmentOrderDetails}
   mutation OrderCancel($id: ID!, $restock: Boolean!) {
@@ -314,11 +321,11 @@ export const TypedOrderAddNoteMutation = TypedMutation<
 
 const orderUpdateMutation = gql`
   ${fragmentAddress}
+  ${orderErrorFragment}
   mutation OrderUpdate($id: ID!, $input: OrderUpdateInput!) {
     orderUpdate(id: $id, input: $input) {
-      errors {
+      errors: orderErrors {
-        field
+        ...OrderErrorFragment
-        message
       }
       order {
         id
@@ -342,7 +349,8 @@ const orderDraftUpdateMutation = gql`
   ${fragmentOrderDetails}
   mutation OrderDraftUpdate($id: ID!, $input: DraftOrderInput!) {
     draftOrderUpdate(id: $id, input: $input) {
-      errors {
+      errors: orderErrors {
+        code
         field
         message
       }

src/orders/types/OrderDraftUpdate.ts

@@ -2,14 +2,15 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { DraftOrderInput, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes";
+import { DraftOrderInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDraftUpdate
 // ====================================================
 
 export interface OrderDraftUpdate_draftOrderUpdate_errors {
-  __typename: "Error";
+  __typename: "OrderError";
+  code: OrderErrorCode;
   field: string | null;
   message: string | null;
 }

src/orders/types/OrderErrorFragment.ts

@@ -0,0 +1,15 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { OrderErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: OrderErrorFragment
+// ====================================================
+
+export interface OrderErrorFragment {
+  __typename: "OrderError";
+  code: OrderErrorCode;
+  field: string | null;
+}

src/orders/types/OrderUpdate.ts

@@ -2,16 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { OrderUpdateInput } from "./../../types/globalTypes";
+import { OrderUpdateInput, OrderErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderUpdate
 // ====================================================
 
 export interface OrderUpdate_orderUpdate_errors {
-  __typename: "Error";
+  __typename: "OrderError";
+  code: OrderErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface OrderUpdate_orderUpdate_order_billingAddress_country {

src/services/components/ServiceCreatePage/ServiceCreatePage.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { permissions } from "@saleor/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
-import { formError } from "@saleor/storybook/misc";
+import { AccountErrorCode } from "@saleor/types/globalTypes";
 import ServiceCreatePage, { ServiceCreatePageProps } from "./ServiceCreatePage";
 
 const props: ServiceCreatePageProps = {
@@ -21,6 +21,10 @@ storiesOf("Views / Services / Create service", module)
   .add("form errors", () => (
     <ServiceCreatePage
       {...props}
-      errors={["name"].map(field => formError(field))}
+      errors={["name"].map(field => ({
+        __typename: "AccountError",
+        code: AccountErrorCode.INVALID,
+        field
+      }))}
     />
   ));

src/services/components/ServiceCreatePage/ServiceCreatePage.tsx

@@ -13,8 +13,8 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
 import { sectionNames } from "@saleor/intl";
-import { UserError } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 import ServiceInfo from "../ServiceInfo";
 
 export interface ServiceCreatePageFormData {
@@ -25,7 +25,7 @@ export interface ServiceCreatePageFormData {
 }
 export interface ServiceCreatePageProps {
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   permissions: ShopInfo_shop_permissions[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;

src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { permissions } from "@saleor/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
-import { formError } from "@saleor/storybook/misc";
+import { AccountErrorCode } from "@saleor/types/globalTypes";
 import { service } from "../../fixtures";
 import ServiceDetailsPage, {
   ServiceDetailsPageProps
@@ -34,7 +34,11 @@ storiesOf("Views / Services / Service details", module)
   .add("form errors", () => (
     <ServiceDetailsPage
       {...props}
-      errors={["name"].map(field => formError(field))}
+      errors={["name"].map(field => ({
+        __typename: "AccountError",
+        code: AccountErrorCode.INVALID,
+        field
+      }))}
     />
   ))
   .add("default token", () => (

src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx

@@ -15,8 +15,8 @@ import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInf
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { ServiceDetails_serviceAccount } from "@saleor/services/types/ServiceDetails";
-import { UserError } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
 import ServiceDefaultToken from "../ServiceDefaultToken";
 import ServiceInfo from "../ServiceInfo";
 import ServiceTokens from "../ServiceTokens";
@@ -30,7 +30,7 @@ export interface ServiceDetailsPageFormData {
 export interface ServiceDetailsPageProps {
   apiUri: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   permissions: ShopInfo_shop_permissions[];
   saveButtonBarState: ConfirmButtonTransitionState;
   service: ServiceDetails_serviceAccount;
@@ -107,7 +107,7 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
               />
               <CardSpacer />
               <ServiceTokens
-                tokens={maybe(() => service.tokens)}
+                tokens={service?.tokens}
                 onCreate={onTokenCreate}
                 onDelete={onTokenDelete}
               />

src/services/components/ServiceInfo/ServiceInfo.tsx

@@ -6,22 +6,29 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { FormChange } from "@saleor/hooks/useForm";
-import { UserError } from "@saleor/types";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
 
 export interface ServiceInfoProps {
   data: {
     name: string;
   };
   disabled: boolean;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   onChange: FormChange;
 }
 
-const ServiceInfo: React.FC<ServiceInfoProps> = props => {
+const ServiceInfo: React.FC<ServiceInfoProps> = ({
-  const { data, disabled, errors, onChange } = props;
+  data,
+  disabled,
+  errors,
+  onChange
+}) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["name"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -33,12 +40,12 @@ const ServiceInfo: React.FC<ServiceInfoProps> = props => {
       <CardContent>
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "name")}
+          error={!!formErrors.name}
           label={intl.formatMessage({
             defaultMessage: "Account Name",
             description: "service account"
           })}
-          helperText={getFieldError(errors, "name")?.message}
+          helperText={getAccountErrorMessage(formErrors.name, intl)}
           fullWidth
           name="name"
           value={data.name}

src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx

@@ -17,8 +17,9 @@ import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { buttonMessages, commonMessages } from "@saleor/intl";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
-import { getFieldError } from "@saleor/utils/errors";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
-import { UserError } from "../../../types";
+import { getFormErrors } from "@saleor/utils/errors";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
 
 export interface FormData {
   email: string;
@@ -58,7 +59,7 @@ const useStyles = makeStyles(
 
 interface StaffAddMemberDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   open: boolean;
   onClose: () => void;
   onConfirm: (data: FormData) => void;
@@ -66,11 +67,16 @@ interface StaffAddMemberDialogProps {
 
 const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
   const { confirmButtonState, errors, open, onClose, onConfirm } = props;
+
   const classes = useStyles(props);
   const dialogErrors = useModalDialogErrors(errors, open);
-
   const intl = useIntl();
 
+  const formErrors = getFormErrors(
+    ["firstName", "lastName", "email"],
+    dialogErrors
+  );
+
   return (
     <Dialog onClose={onClose} open={open}>
       <Form initial={initialForm} onSubmit={onConfirm}>
@@ -85,8 +91,11 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
             <DialogContent>
               <div className={classes.textFieldGrid}>
                 <TextField
-                  error={!!getFieldError(dialogErrors, "firstName")}
+                  error={!!formErrors.firstName}
-                  helperText={getFieldError(dialogErrors, "firstName")?.message}
+                  helperText={getAccountErrorMessage(
+                    formErrors.firstName,
+                    intl
+                  )}
                   label={intl.formatMessage(commonMessages.firstName)}
                   name="firstName"
                   type="text"
@@ -94,8 +103,8 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
                   onChange={change}
                 />
                 <TextField
-                  error={!!getFieldError(dialogErrors, "lastName")}
+                  error={!!formErrors.lastName}
-                  helperText={getFieldError(dialogErrors, "lastName")?.message}
+                  helperText={getAccountErrorMessage(formErrors.lastName, intl)}
                   label={intl.formatMessage(commonMessages.lastName)}
                   name="lastName"
                   type="text"
@@ -105,9 +114,9 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
               </div>
               <FormSpacer />
               <TextField
-                error={!!getFieldError(dialogErrors, "email")}
+                error={!!formErrors.email}
                 fullWidth
-                helperText={getFieldError(dialogErrors, "email")?.message}
+                helperText={getAccountErrorMessage(formErrors.email, intl)}
                 label={intl.formatMessage(commonMessages.email)}
                 name="email"
                 type="email"

src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx

@@ -7,7 +7,7 @@ import TextField from "@material-ui/core/TextField";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { DialogProps, UserError } from "@saleor/types";
+import { DialogProps } from "@saleor/types";
 import { buttonMessages } from "@saleor/intl";
 import Form from "@saleor/components/Form";
 import ConfirmButton, {
@@ -15,7 +15,9 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
-import { getFieldError } from "@saleor/utils/errors";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
+import { getFormErrors } from "@saleor/utils/errors";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
 
 interface StaffPasswordResetDialogFormData {
   newPassword: string;
@@ -23,7 +25,7 @@ interface StaffPasswordResetDialogFormData {
 }
 export interface StaffPasswordResetDialogProps extends DialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
-  errors: UserError[];
+  errors: AccountErrorFragment[];
   onSubmit: (data: StaffPasswordResetDialogFormData) => void;
 }
 
@@ -42,6 +44,11 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
   const intl = useIntl();
   const dialogErrors = useModalDialogErrors(errors, open);
 
+  const formErrors = getFormErrors(
+    ["oldPassword", "newPassword"],
+    dialogErrors
+  );
+
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
       <DialogTitle>
@@ -55,9 +62,12 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
           <>
             <DialogContent>
               <TextField
-                error={!!getFieldError(dialogErrors, "oldPassword")}
+                error={!!formErrors.oldPassword}
                 fullWidth
-                helperText={getFieldError(dialogErrors, "oldPassword")?.message}
+                helperText={getAccountErrorMessage(
+                  formErrors.oldPassword,
+                  intl
+                )}
                 label={intl.formatMessage({
                   defaultMessage: "Previous Password",
                   description: "input label"
@@ -68,10 +78,10 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
               />
               <FormSpacer />
               <TextField
-                error={!!getFieldError(dialogErrors, "newPassword")}
+                error={!!formErrors.newPassword}
                 fullWidth
                 helperText={
-                  getFieldError(dialogErrors, "newPassword") ||
+                  getAccountErrorMessage(formErrors.newPassword, intl) ||
                   intl.formatMessage({
                     defaultMessage:
                       "New password must be at least 8 characters long"

src/storybook/stories/customers/CustomerCreatePage.tsx

@@ -2,12 +2,12 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { AccountErrorCode } from "@saleor/types/globalTypes";
 import CustomerCreatePage, {
   CustomerCreatePageFormData,
   CustomerCreatePageProps
 } from "../../../customers/components/CustomerCreatePage";
 import Decorator from "../../Decorator";
-import { formError } from "../../misc";
 
 const props: Omit<CustomerCreatePageProps, "classes"> = {
   countries: [
@@ -42,8 +42,10 @@ storiesOf("Views / Customers / Create customer", module)
         "postalCode",
         "streetAddress1",
         "streetAddress2"
-      ] as Array<keyof CustomerCreatePageFormData>).map(field =>
+      ] as Array<keyof CustomerCreatePageFormData>).map(field => ({
-        formError(field)
+        __typename: "AccountError",
-      )}
+        code: AccountErrorCode.INVALID,
+        field
+      }))}
     />
   ));

src/storybook/stories/customers/CustomerDetailsPage.tsx

@@ -2,12 +2,12 @@ import { Omit } from "@material-ui/core";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import { AccountErrorCode } from "@saleor/types/globalTypes";
 import CustomerDetailsPage, {
   CustomerDetailsPageProps
 } from "../../../customers/components/CustomerDetailsPage";
 import { customer } from "../../../customers/fixtures";
 import Decorator from "../../Decorator";
-import { formError } from "../../misc";
 
 const props: Omit<CustomerDetailsPageProps, "classes"> = {
   customer,
@@ -40,7 +40,11 @@ storiesOf("Views / Customers / Customer details", module)
       {...props}
       errors={(["email", "firstName", "lastName"] as Array<
         keyof CustomerDetailsPageErrors
-      >).map(field => formError(field))}
+      >).map(field => ({
+        __typename: "AccountError",
+        code: AccountErrorCode.INVALID,
+        field
+      }))}
     />
   ))
   .add("different addresses", () => (

src/types/globalTypes.ts

@@ -425,6 +425,29 @@ export enum OrderDirection {
   DESC = "DESC",
 }
 
+export enum OrderErrorCode {
+  BILLING_ADDRESS_NOT_SET = "BILLING_ADDRESS_NOT_SET",
+  CANNOT_CANCEL_FULFILLMENT = "CANNOT_CANCEL_FULFILLMENT",
+  CANNOT_CANCEL_ORDER = "CANNOT_CANCEL_ORDER",
+  CANNOT_DELETE = "CANNOT_DELETE",
+  CANNOT_REFUND = "CANNOT_REFUND",
+  CAPTURE_INACTIVE_PAYMENT = "CAPTURE_INACTIVE_PAYMENT",
+  FULFILL_ORDER_LINE = "FULFILL_ORDER_LINE",
+  GRAPHQL_ERROR = "GRAPHQL_ERROR",
+  INVALID = "INVALID",
+  NOT_EDITABLE = "NOT_EDITABLE",
+  NOT_FOUND = "NOT_FOUND",
+  ORDER_NO_SHIPPING_ADDRESS = "ORDER_NO_SHIPPING_ADDRESS",
+  PAYMENT_ERROR = "PAYMENT_ERROR",
+  PAYMENT_MISSING = "PAYMENT_MISSING",
+  REQUIRED = "REQUIRED",
+  SHIPPING_METHOD_NOT_APPLICABLE = "SHIPPING_METHOD_NOT_APPLICABLE",
+  SHIPPING_METHOD_REQUIRED = "SHIPPING_METHOD_REQUIRED",
+  UNIQUE = "UNIQUE",
+  VOID_INACTIVE_PAYMENT = "VOID_INACTIVE_PAYMENT",
+  ZERO_QUANTITY = "ZERO_QUANTITY",
+}
+
 export enum OrderEventsEmailsEnum {
   DIGITAL_LINKS = "DIGITAL_LINKS",
   FULFILLMENT_CONFIRMATION = "FULFILLMENT_CONFIRMATION",

src/utils/errors/account.ts

@@ -0,0 +1,56 @@
+import { IntlShape, defineMessages } from "react-intl";
+
+import { AccountErrorCode } from "@saleor/types/globalTypes";
+import { commonMessages } from "@saleor/intl";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
+import commonErrorMessages from "./common";
+
+const messages = defineMessages({
+  invalidPassword: {
+    defaultMessage: "Invalid password"
+  },
+  passwordNumeric: {
+    defaultMessage: "Password cannot be entirely numeric"
+  },
+  tooCommon: {
+    defaultMessage: "This password is too commonly used"
+  },
+  tooShort: {
+    defaultMessage: "This password is too short"
+  },
+  tooSimilar: {
+    defaultMessage: "These passwords are too similar"
+  }
+});
+
+function getAccountErrorMessage(
+  err: AccountErrorFragment,
+  intl: IntlShape
+): string {
+  if (err) {
+    switch (err.code) {
+      case AccountErrorCode.GRAPHQL_ERROR:
+        return intl.formatMessage(commonErrorMessages.graphqlError);
+      case AccountErrorCode.INVALID:
+        return intl.formatMessage(commonErrorMessages.invalid);
+      case AccountErrorCode.INVALID_PASSWORD:
+        return intl.formatMessage(messages.invalidPassword);
+      case AccountErrorCode.PASSWORD_ENTIRELY_NUMERIC:
+        return intl.formatMessage(messages.passwordNumeric);
+      case AccountErrorCode.PASSWORD_TOO_COMMON:
+        return intl.formatMessage(messages.tooCommon);
+      case AccountErrorCode.PASSWORD_TOO_SHORT:
+        return intl.formatMessage(messages.tooShort);
+      case AccountErrorCode.PASSWORD_TOO_SIMILAR:
+        return intl.formatMessage(messages.tooSimilar);
+      case AccountErrorCode.REQUIRED:
+        return intl.formatMessage(commonMessages.requiredField);
+      default:
+        return intl.formatMessage(commonErrorMessages.unknownError);
+    }
+  }
+
+  return undefined;
+}
+
+export default getAccountErrorMessage;

src/utils/errors/order.ts

@@ -0,0 +1,28 @@
+import { IntlShape } from "react-intl";
+
+import { OrderErrorCode } from "@saleor/types/globalTypes";
+import { commonMessages } from "@saleor/intl";
+import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
+import commonErrorMessages from "./common";
+
+function getOrderErrorMessage(
+  err: OrderErrorFragment,
+  intl: IntlShape
+): string {
+  if (err) {
+    switch (err.code) {
+      case OrderErrorCode.GRAPHQL_ERROR:
+        return intl.formatMessage(commonErrorMessages.graphqlError);
+      case OrderErrorCode.INVALID:
+        return intl.formatMessage(commonErrorMessages.invalid);
+      case OrderErrorCode.REQUIRED:
+        return intl.formatMessage(commonMessages.requiredField);
+      default:
+        return intl.formatMessage(commonErrorMessages.unknownError);
+    }
+  }
+
+  return undefined;
+}
+
+export default getOrderErrorMessage;