Use error formatting in shipping section

src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx

@@ -11,8 +11,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 { ShippingErrorFragment } from "@saleor/shipping/types/ShippingErrorFragment";
 import { CountryFragment } from "../../../taxes/types/CountryFragment";
-import { UserError } from "../../../types";
 import ShippingZoneCountriesAssignDialog from "../ShippingZoneCountriesAssignDialog";
 import ShippingZoneInfo from "../ShippingZoneInfo";
 
@@ -25,7 +25,7 @@ export interface FormData {
 export interface ShippingZoneCreatePageProps {
   countries: CountryFragment[];
   disabled: boolean;
-  errors: UserError[];
+  errors: ShippingErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: FormData) => void;

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -10,8 +10,8 @@ import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
-import { maybe } from "../../../misc";
+import { ShippingErrorFragment } from "@saleor/shipping/types/ShippingErrorFragment";
-import { UserError } from "../../../types";
+import { maybe, getStringOrPlaceholder } from "../../../misc";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
 import { ShippingZoneDetailsFragment } from "../../types/ShippingZoneDetailsFragment";
 import ShippingZoneInfo from "../ShippingZoneInfo";
@@ -23,7 +23,7 @@ export interface FormData {
 
 export interface ShippingZoneDetailsPageProps {
   disabled: boolean;
-  errors: UserError[];
+  errors: ShippingErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   shippingZone: ShippingZoneDetailsFragment;
   onBack: () => void;
@@ -66,13 +66,13 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
           <AppHeader onBack={onBack}>
             <FormattedMessage defaultMessage="Shipping" />
           </AppHeader>
-          <PageHeader title={maybe(() => shippingZone.name)} />
+          <PageHeader title={getStringOrPlaceholder(shippingZone?.name)} />
           <Grid>
             <div>
               <ShippingZoneInfo data={data} errors={errors} onChange={change} />
               <CardSpacer />
               <CountryList
-                countries={maybe(() => shippingZone.countries)}
+                countries={shippingZone?.countries}
                 disabled={disabled}
                 emptyText={maybe(
                   () =>

src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx

@@ -6,13 +6,14 @@ 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 getShippingErrorMessage from "@saleor/utils/errors/shipping";
+import { ShippingErrorFragment } from "@saleor/shipping/types/ShippingErrorFragment";
 import { FormData } from "../ShippingZoneDetailsPage";
 
 export interface ShippingZoneInfoProps {
   data: FormData;
-  errors: UserError[];
+  errors: ShippingErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -23,6 +24,8 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
 }) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["name"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -30,9 +33,9 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
       />
       <CardContent>
         <TextField
-          error={!!getFieldError(errors, "name")}
+          error={!!formErrors.name}
           fullWidth
-          helperText={getFieldError(errors, "name")?.message}
+          helperText={getShippingErrorMessage(formErrors.name, intl)}
           label={intl.formatMessage({
             defaultMessage: "Shipping Zone Name"
           })}

src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.tsx

@@ -18,11 +18,17 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import Skeleton from "@saleor/components/Skeleton";
 import { buttonMessages } from "@saleor/intl";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
+import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
+import getShippingErrorMessage from "@saleor/utils/errors/shipping";
+import { ShippingErrorFragment } from "@saleor/shipping/types/ShippingErrorFragment";
 import { maybe } from "../../../misc";
-import { UserError } from "../../../types";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
 import { ShippingZoneDetailsFragment_shippingMethods } from "../../types/ShippingZoneDetailsFragment";
+import {
+  getShippingPriceRateErrorMessage,
+  getShippingWeightRateErrorMessage
+} from "./errors";
 
 export interface FormData {
   name: string;
@@ -38,7 +44,7 @@ export interface ShippingZoneRateDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   defaultCurrency: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: ShippingErrorFragment[];
   open: boolean;
   rate: ShippingZoneDetailsFragment_shippingMethods;
   variant: ShippingMethodTypeEnum;
@@ -65,11 +71,10 @@ const useStyles = makeStyles(
 const ShippingZoneRateDialog: React.FC<ShippingZoneRateDialogProps> = props => {
   const {
     action,
-
     confirmButtonState,
     defaultCurrency,
     disabled,
-    errors,
+    errors: apiErrors,
     onClose,
     onSubmit,
     open,
@@ -79,6 +84,17 @@ const ShippingZoneRateDialog: React.FC<ShippingZoneRateDialogProps> = props => {
 
   const classes = useStyles(props);
   const intl = useIntl();
+  const errors = useModalDialogErrors(apiErrors, open);
+
+  const formFields = [
+    "name",
+    "minimumOrderPrice",
+    "minimumOrderWeight",
+    "maximumOrderPrice",
+    "maximumOrderWeight",
+    "price"
+  ];
+  const formErrors = getFormErrors(formFields, errors);
 
   const initialForm: FormData =
     action === "create"
@@ -108,6 +124,11 @@ const ShippingZoneRateDialog: React.FC<ShippingZoneRateDialogProps> = props => {
     initialForm.noLimits = !initialForm.maxValue && !initialForm.minValue;
   }
 
+  const getErrorMessage =
+    variant === ShippingMethodTypeEnum.PRICE
+      ? getShippingPriceRateErrorMessage
+      : getShippingWeightRateErrorMessage;
+
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
       <Form initial={initialForm} onSubmit={onSubmit}>
@@ -139,10 +160,10 @@ const ShippingZoneRateDialog: React.FC<ShippingZoneRateDialogProps> = props => {
             <DialogContent>
               <TextField
                 disabled={disabled}
-                error={!!getFieldError(errors, "name")}
+                error={!!formErrors.name}
                 fullWidth
                 helperText={
-                  getFieldError(errors, "name") ||
+                  getShippingErrorMessage(formErrors.name, intl) ||
                   intl.formatMessage({
                     defaultMessage:
                       "This will be shown to customers at checkout"
@@ -207,24 +228,27 @@ const ShippingZoneRateDialog: React.FC<ShippingZoneRateDialogProps> = props => {
                         <TextField
                           disabled={disabled}
                           error={
-                            variant === ShippingMethodTypeEnum.PRICE
+                            !!formErrors.minimumOrderPrice ||
-                              ? !!getFieldError(errors, "minimumOrderPrice")
+                            !!formErrors.minimumOrderWeight
-                              : !!getFieldError(errors, "minimumOrderWeight")
                           }
                           fullWidth
                           helperText={
                             variant === ShippingMethodTypeEnum.PRICE
-                              ? getFieldError(errors, "minimumOrderPrice")
+                              ? getErrorMessage(
-                              : getFieldError(errors, "minimumOrderWeight")
+                                  formErrors.minimumOrderPrice,
+                                  intl
+                                )
+                              : getErrorMessage(
+                                  formErrors.minimumOrderWeight,
+                                  intl
+                                )
                           }
                           label={
                             variant === ShippingMethodTypeEnum.PRICE
-                              ? getFieldError(errors, "minimumOrderPrice") ||
+                              ? intl.formatMessage({
-                                intl.formatMessage({
                                   defaultMessage: "Minimal Order Value"
                                 })
-                              : getFieldError(errors, "minimumOrderWeight") ||
+                              : intl.formatMessage({
-                                intl.formatMessage({
                                   defaultMessage: "Minimal Order Weight"
                                 })
                           }
@@ -236,24 +260,27 @@ const ShippingZoneRateDialog: React.FC<ShippingZoneRateDialogProps> = props => {
                         <TextField
                           disabled={disabled}
                           error={
-                            variant === ShippingMethodTypeEnum.PRICE
+                            !!formErrors.maximumOrderPrice ||
-                              ? !!getFieldError(errors, "maximumOrderPrice")
+                            !!formErrors.maximumOrderWeight
-                              : !!getFieldError(errors, "maximumOrderWeight")
                           }
                           fullWidth
                           helperText={
                             variant === ShippingMethodTypeEnum.PRICE
-                              ? getFieldError(errors, "maximumOrderPrice")
+                              ? getErrorMessage(
-                              : getFieldError(errors, "maximumOrderWeight")
+                                  formErrors.maximumOrderPrice,
+                                  intl
+                                )
+                              : getErrorMessage(
+                                  formErrors.maximumOrderWeight,
+                                  intl
+                                )
                           }
                           label={
                             variant === ShippingMethodTypeEnum.PRICE
-                              ? getFieldError(errors, "maximumOrderPrice") ||
+                              ? intl.formatMessage({
-                                intl.formatMessage({
                                   defaultMessage: "Maximal Order Value"
                                 })
-                              : getFieldError(errors, "maximumOrderWeight") ||
+                              : intl.formatMessage({
-                                intl.formatMessage({
                                   defaultMessage: "Maximal Order Weight"
                                 })
                           }
@@ -294,9 +321,9 @@ const ShippingZoneRateDialog: React.FC<ShippingZoneRateDialogProps> = props => {
                   <div className={classes.grid}>
                     <TextField
                       disabled={disabled}
-                      error={!!getFieldError(errors, "price")}
+                      error={!!formErrors.price}
                       fullWidth
-                      helperText={getFieldError(errors, "price")?.message}
+                      helperText={getErrorMessage(formErrors.price, intl)}
                       label={intl.formatMessage({
                         defaultMessage: "Rate Price",
                         description: "shipping method price"

src/shipping/components/ShippingZoneRateDialog/errors.ts

@@ -0,0 +1,40 @@
+import { IntlShape, defineMessages } from "react-intl";
+
+import { ShippingErrorCode } from "@saleor/types/globalTypes";
+import getShippingErrorMessage from "@saleor/utils/errors/shipping";
+import { ShippingErrorFragment } from "../../types/ShippingErrorFragment";
+
+const messages = defineMessages({
+  price: {
+    defaultMessage: "Maximum price cannot be lower than minimum",
+    description: "error message"
+  },
+  weight: {
+    defaultMessage: "Maximum weight cannot be lower than minimum",
+    description: "error message"
+  }
+});
+
+export function getShippingPriceRateErrorMessage(
+  err: ShippingErrorFragment,
+  intl: IntlShape
+): string {
+  switch (err?.code) {
+    case ShippingErrorCode.MAX_LESS_THAN_MIN:
+      return intl.formatMessage(messages.price);
+    default:
+      getShippingErrorMessage(err, intl);
+  }
+}
+
+export function getShippingWeightRateErrorMessage(
+  err: ShippingErrorFragment,
+  intl: IntlShape
+): string {
+  switch (err?.code) {
+    case ShippingErrorCode.MAX_LESS_THAN_MIN:
+      return intl.formatMessage(messages.weight);
+    default:
+      getShippingErrorMessage(err, intl);
+  }
+}

src/shipping/mutations.ts

@@ -40,12 +40,19 @@ import {
   UpdateShippingZoneVariables
 } from "./types/UpdateShippingZone";
 
+export const shippingErrorFragment = gql`
+  fragment ShippingErrorFragment on ShippingError {
+    code
+    field
+  }
+`;
+
 const deleteShippingZone = gql`
+  ${shippingErrorFragment}
   mutation DeleteShippingZone($id: ID!) {
     shippingZoneDelete(id: $id) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
     }
   }
@@ -56,11 +63,11 @@ export const TypedDeleteShippingZone = TypedMutation<
 >(deleteShippingZone);
 
 const bulkDeleteShippingZone = gql`
+  ${shippingErrorFragment}
   mutation BulkDeleteShippingZone($ids: [ID]!) {
     shippingZoneBulkDelete(ids: $ids) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
     }
   }
@@ -90,11 +97,11 @@ export const TypedUpdateDefaultWeightUnit = TypedMutation<
 
 const createShippingZone = gql`
   ${countryFragment}
+  ${shippingErrorFragment}
   mutation CreateShippingZone($input: ShippingZoneInput!) {
     shippingZoneCreate(input: $input) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
       shippingZone {
         countries {
@@ -114,11 +121,11 @@ export const TypedCreateShippingZone = TypedMutation<
 
 const updateShippingZone = gql`
   ${countryFragment}
+  ${shippingErrorFragment}
   mutation UpdateShippingZone($id: ID!, $input: ShippingZoneInput!) {
     shippingZoneUpdate(id: $id, input: $input) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
       shippingZone {
         countries {
@@ -137,12 +144,12 @@ export const TypedUpdateShippingZone = TypedMutation<
 >(updateShippingZone);
 
 const updateShippingRate = gql`
+  ${shippingErrorFragment}
   ${shippingMethodFragment}
   mutation UpdateShippingRate($id: ID!, $input: ShippingPriceInput!) {
     shippingPriceUpdate(id: $id, input: $input) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
       shippingMethod {
         ...ShippingMethodFragment
@@ -156,12 +163,12 @@ export const TypedUpdateShippingRate = TypedMutation<
 >(updateShippingRate);
 
 const createShippingRate = gql`
+  ${shippingErrorFragment}
   ${shippingZoneDetailsFragment}
   mutation CreateShippingRate($input: ShippingPriceInput!) {
     shippingPriceCreate(input: $input) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
       shippingZone {
         ...ShippingZoneDetailsFragment
@@ -175,12 +182,12 @@ export const TypedCreateShippingRate = TypedMutation<
 >(createShippingRate);
 
 const deleteShippingRate = gql`
+  ${shippingErrorFragment}
   ${shippingZoneDetailsFragment}
   mutation DeleteShippingRate($id: ID!) {
     shippingPriceDelete(id: $id) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
       shippingZone {
         ...ShippingZoneDetailsFragment
@@ -194,11 +201,11 @@ export const TypedDeleteShippingRate = TypedMutation<
 >(deleteShippingRate);
 
 const bulkDeleteShippingRate = gql`
+  ${shippingErrorFragment}
   mutation BulkDeleteShippingRate($ids: [ID]!) {
     shippingPriceBulkDelete(ids: $ids) {
-      errors {
+      errors: shippingErrors {
-        field
+        ...ShippingErrorFragment
-        message
       }
     }
   }

src/shipping/types/BulkDeleteShippingRate.ts

@@ -2,14 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { ShippingErrorCode } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL mutation operation: BulkDeleteShippingRate
 // ====================================================
 
 export interface BulkDeleteShippingRate_shippingPriceBulkDelete_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface BulkDeleteShippingRate_shippingPriceBulkDelete {

src/shipping/types/BulkDeleteShippingZone.ts

@@ -2,14 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { ShippingErrorCode } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL mutation operation: BulkDeleteShippingZone
 // ====================================================
 
 export interface BulkDeleteShippingZone_shippingZoneBulkDelete_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface BulkDeleteShippingZone_shippingZoneBulkDelete {

src/shipping/types/CreateShippingRate.ts

@@ -2,16 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ShippingPriceInput, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { ShippingPriceInput, ShippingErrorCode, ShippingMethodTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: CreateShippingRate
 // ====================================================
 
 export interface CreateShippingRate_shippingPriceCreate_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface CreateShippingRate_shippingPriceCreate_shippingZone_countries {

src/shipping/types/CreateShippingZone.ts

@@ -2,16 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ShippingZoneInput } from "./../../types/globalTypes";
+import { ShippingZoneInput, ShippingErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: CreateShippingZone
 // ====================================================
 
 export interface CreateShippingZone_shippingZoneCreate_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface CreateShippingZone_shippingZoneCreate_shippingZone_countries {

src/shipping/types/DeleteShippingRate.ts

@@ -2,16 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { ShippingErrorCode, ShippingMethodTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: DeleteShippingRate
 // ====================================================
 
 export interface DeleteShippingRate_shippingPriceDelete_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface DeleteShippingRate_shippingPriceDelete_shippingZone_countries {

src/shipping/types/DeleteShippingZone.ts

@@ -2,14 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { ShippingErrorCode } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL mutation operation: DeleteShippingZone
 // ====================================================
 
 export interface DeleteShippingZone_shippingZoneDelete_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface DeleteShippingZone_shippingZoneDelete {

src/shipping/types/ShippingErrorFragment.ts

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

src/shipping/types/UpdateShippingRate.ts

@@ -2,16 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ShippingPriceInput, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { ShippingPriceInput, ShippingErrorCode, ShippingMethodTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: UpdateShippingRate
 // ====================================================
 
 export interface UpdateShippingRate_shippingPriceUpdate_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_minimumOrderPrice {

src/shipping/types/UpdateShippingZone.ts

@@ -2,16 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ShippingZoneInput } from "./../../types/globalTypes";
+import { ShippingZoneInput, ShippingErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: UpdateShippingZone
 // ====================================================
 
 export interface UpdateShippingZone_shippingZoneUpdate_errors {
-  __typename: "Error";
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
   field: string | null;
-  message: string | null;
 }
 
 export interface UpdateShippingZone_shippingZoneUpdate_shippingZone_countries {

src/shipping/views/ShippingZoneDetails/ShippingZoneDetailsDialogs.tsx

@@ -6,7 +6,7 @@ import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useShop from "@saleor/hooks/useShop";
-import { maybe } from "../../../misc";
+import { getStringOrPlaceholder } from "../../../misc";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
 import ShippingZoneCountriesAssignDialog from "../../components/ShippingZoneCountriesAssignDialog";
 import ShippingZoneRateDialog from "../../components/ShippingZoneRateDialog";
@@ -45,8 +45,8 @@ const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
 
   const closeModal = () => navigate(shippingZoneUrl(id), true);
 
-  const rate = maybe(() =>
+  const rate = shippingZone?.shippingMethods?.find(
-    shippingZone.shippingMethods.find(rate => rate.id === params.id)
+    rate => rate.id === params.id
   );
 
   return (
@@ -54,12 +54,11 @@ const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
       <ShippingZoneRateDialog
         action="edit"
         confirmButtonState={updateRateTransitionState}
-        defaultCurrency={maybe(() => shop.defaultCurrency)}
+        defaultCurrency={shop?.defaultCurrency}
         disabled={ops.shippingRateUpdate.opts.loading}
-        errors={maybe(
+        errors={
-          () => ops.shippingRateUpdate.opts.data.shippingPriceUpdate.errors,
+          ops.shippingRateUpdate.opts.data?.shippingPriceUpdate.errors || []
-          []
+        }
-        )}
         onClose={closeModal}
         onSubmit={formData =>
           ops.shippingRateUpdate.mutate({
@@ -74,13 +73,13 @@ const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
               name: formData.name,
               price: formData.isFree ? 0 : parseFloat(formData.price),
               shippingZone: id,
-              type: maybe(() => rate.type)
+              type: rate?.type
             }
           })
         }
         open={params.action === "edit-rate"}
         rate={rate}
-        variant={maybe(() => rate.type)}
+        variant={rate?.type}
       />
       <ActionDialog
         confirmButtonState={deleteRateTransitionState}
@@ -103,7 +102,7 @@ const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
             description="delete shipping method"
             id="shippingZoneDetailsDialogsDeleteShippingMethod"
             values={{
-              name: maybe(() => rate.name, "...")
+              name: getStringOrPlaceholder(rate?.name)
             }}
           />
         </DialogContentText>
@@ -111,12 +110,11 @@ const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
       <ShippingZoneRateDialog
         action="create"
         confirmButtonState={createRateTransitionState}
-        defaultCurrency={maybe(() => shop.defaultCurrency)}
+        defaultCurrency={shop?.defaultCurrency}
         disabled={ops.shippingRateCreate.opts.loading}
-        errors={maybe(
+        errors={
-          () => ops.shippingRateCreate.opts.data.shippingPriceCreate.errors,
+          ops.shippingRateCreate.opts.data?.shippingPriceCreate.errors || []
-          []
+        }
-        )}
         onClose={closeModal}
         onSubmit={formData =>
           ops.shippingRateCreate.mutate({
@@ -178,19 +176,18 @@ const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
             description="delete shipping zone"
             id="shippingZoneDetailsDialogsDeleteShippingZone"
             values={{
-              name: <strong>{maybe(() => shippingZone.name, "...")}</strong>
+              name: (
+                <strong>{getStringOrPlaceholder(shippingZone?.name)}</strong>
+              )
             }}
           />
         </DialogContentText>
       </ActionDialog>
       <ShippingZoneCountriesAssignDialog
         confirmButtonState={assignCountryTransitionState}
-        countries={maybe(() => shop.countries, [])}
+        countries={shop?.countries}
-        initial={maybe(
+        initial={shippingZone?.countries.map(country => country.code) || []}
-          () => shippingZone.countries.map(country => country.code),
+        isDefault={!!shippingZone?.default}
-          []
-        )}
-        isDefault={maybe(() => shippingZone.default, false)}
         onClose={closeModal}
         onConfirm={formData =>
           ops.shippingZoneUpdate.mutate({
@@ -230,12 +227,10 @@ const ShippingZoneDetailsDialogs: React.FC<ShippingZoneDetailsDialogsProps> = ({
             values={{
               countryName: (
                 <strong>
-                  {maybe(
+                  {getStringOrPlaceholder(
-                    () =>
+                    shippingZone?.countries.find(
-                      shippingZone.countries.find(
+                      country => country.code === params.id
-                        country => country.code === params.id
+                    )?.country
-                      ).country,
-                    "..."
                   )}
                 </strong>
               )

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -183,7 +183,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
                 id={id}
                 ops={ops}
                 params={params}
-                shippingZone={maybe(() => data.shippingZone)}
+                shippingZone={data?.shippingZone}
                 unassignCountryTransitionState={
                   ops.shippingZoneUpdate.opts.status
                 }

src/types/globalTypes.ts

@@ -623,6 +623,16 @@ export enum ServiceAccountSortField {
   NAME = "NAME",
 }
 
+export enum ShippingErrorCode {
+  ALREADY_EXISTS = "ALREADY_EXISTS",
+  GRAPHQL_ERROR = "GRAPHQL_ERROR",
+  INVALID = "INVALID",
+  MAX_LESS_THAN_MIN = "MAX_LESS_THAN_MIN",
+  NOT_FOUND = "NOT_FOUND",
+  REQUIRED = "REQUIRED",
+  UNIQUE = "UNIQUE",
+}
+
 export enum ShippingMethodTypeEnum {
   PRICE = "PRICE",
   WEIGHT = "WEIGHT",

src/utils/errors/shipping.ts

@@ -0,0 +1,37 @@
+import { IntlShape, defineMessages } from "react-intl";
+
+import { ShippingErrorFragment } from "@saleor/shipping/types/ShippingErrorFragment";
+import { ShippingErrorCode } from "@saleor/types/globalTypes";
+import { commonMessages } from "@saleor/intl";
+import commonErrorMessages from "./common";
+
+const messages = defineMessages({
+  alreadyExists: {
+    defaultMessage: "Default shipping zone already exists",
+    description: "error message"
+  }
+});
+
+function getShippingErrorMessage(
+  err: Omit<ShippingErrorFragment, "__typename"> | undefined,
+  intl: IntlShape
+): string {
+  if (err) {
+    switch (err.code) {
+      case ShippingErrorCode.ALREADY_EXISTS:
+        return intl.formatMessage(messages.alreadyExists);
+      case ShippingErrorCode.GRAPHQL_ERROR:
+        return intl.formatMessage(commonErrorMessages.graphqlError);
+      case ShippingErrorCode.REQUIRED:
+        return intl.formatMessage(commonMessages.requiredField);
+      case ShippingErrorCode.INVALID:
+        return intl.formatMessage(commonErrorMessages.invalid);
+      default:
+        return intl.formatMessage(commonErrorMessages.unknownError);
+    }
+  }
+
+  return undefined;
+}
+
+export default getShippingErrorMessage;