Use error codes in discount section

src/discounts/components/DiscountDates/DiscountDates.tsx

@@ -8,8 +8,9 @@ import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Grid from "@saleor/components/Grid";
 import { commonMessages } from "@saleor/intl";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
-import { UserError } from "../../../types";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
 
 interface DiscountDatesProps {
   data: {
@@ -21,7 +22,7 @@ interface DiscountDatesProps {
   };
   defaultCurrency: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -33,6 +34,8 @@ const DiscountDates = ({
 }: DiscountDatesProps) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["startDate", "endDate"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -45,8 +48,8 @@ const DiscountDates = ({
         <Grid variant="uniform">
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "startDate")}
+            error={!!formErrors.startDate}
-            helperText={getFieldError(errors, "startDate")?.message}
+            helperText={getDiscountErrorMessage(formErrors.startDate, intl)}
             name={"startDate" as keyof FormData}
             onChange={onChange}
             label={intl.formatMessage(commonMessages.startDate)}
@@ -59,8 +62,8 @@ const DiscountDates = ({
           />
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "startDate")}
+            error={!!formErrors.startDate}
-            helperText={getFieldError(errors, "startDate")?.message}
+            helperText={getDiscountErrorMessage(formErrors.startDate, intl)}
             name={"startTime" as keyof FormData}
             onChange={onChange}
             label={intl.formatMessage(commonMessages.startHour)}
@@ -85,8 +88,8 @@ const DiscountDates = ({
           <Grid variant="uniform">
             <TextField
               disabled={disabled}
-              error={!!getFieldError(errors, "endDate")}
+              error={!!formErrors.endDate}
-              helperText={getFieldError(errors, "endDate")?.message}
+              helperText={getDiscountErrorMessage(formErrors.endDate, intl)}
               name={"endDate" as keyof FormData}
               onChange={onChange}
               label={intl.formatMessage(commonMessages.endDate)}
@@ -99,8 +102,8 @@ const DiscountDates = ({
             />
             <TextField
               disabled={disabled}
-              error={!!getFieldError(errors, "endDate")}
+              error={!!formErrors.endDate}
-              helperText={getFieldError(errors, "endDate")?.message}
+              helperText={getDiscountErrorMessage(formErrors.endDate, intl)}
               name={"endTime" as keyof FormData}
               onChange={onChange}
               label={intl.formatMessage(commonMessages.endHour)}

src/discounts/components/SaleCreatePage/SaleCreatePage.tsx

@@ -10,7 +10,7 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { sectionNames } from "@saleor/intl";
-import { UserError } from "../../../types";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
 import { SaleType as SaleTypeEnum } from "../../../types/globalTypes";
 import DiscountDates from "../DiscountDates";
 import SaleInfo from "../SaleInfo";
@@ -30,7 +30,7 @@ export interface FormData {
 export interface SaleCreatePageProps {
   defaultCurrency: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: FormData) => void;

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -11,8 +11,9 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { Tab, TabContainer } from "@saleor/components/Tab";
 import { sectionNames } from "@saleor/intl";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
 import { maybe, splitDateTime } from "../../../misc";
-import { ListProps, TabListActions, UserError } from "../../../types";
+import { ListProps, TabListActions } from "../../../types";
 import { SaleType as SaleTypeEnum } from "../../../types/globalTypes";
 import { SaleDetails_sale } from "../../types/SaleDetails";
 import DiscountCategories from "../DiscountCategories";
@@ -55,7 +56,7 @@ export interface SaleDetailsPageProps
     > {
   activeTab: SaleDetailsPageTab;
   defaultCurrency: string;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   sale: SaleDetails_sale;
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;

src/discounts/components/SaleInfo/SaleInfo.tsx

@@ -6,14 +6,15 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { commonMessages } from "@saleor/intl";
-import { UserError } from "@saleor/types";
+import { getFormErrors } from "@saleor/utils/errors";
-import { getFieldError } from "@saleor/utils/errors";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import { FormData } from "../SaleDetailsPage";
 
 export interface SaleInfoProps {
   data: FormData;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -25,6 +26,8 @@ const SaleInfo: React.FC<SaleInfoProps> = ({
 }) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["name"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -33,8 +36,8 @@ const SaleInfo: React.FC<SaleInfoProps> = ({
       <CardContent>
         <TextField
           disabled={disabled}
-          error={!!getFieldError(errors, "name")}
+          error={!!formErrors.name}
-          helperText={getFieldError(errors, "name")?.message}
+          helperText={getDiscountErrorMessage(formErrors.name, intl)}
           name={"name" as keyof FormData}
           onChange={onChange}
           label={intl.formatMessage({

src/discounts/components/SaleValue/SaleValue.tsx

@@ -6,16 +6,17 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { FormChange } from "@saleor/hooks/useForm";
-import { UserError } from "@saleor/types";
 import { SaleType } from "@saleor/types/globalTypes";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
 import { FormData } from "../SaleDetailsPage";
 
 export interface SaleValueProps {
   currencySymbol: string;
   data: FormData;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   onChange: FormChange;
 }
 
@@ -28,6 +29,8 @@ const SaleValue: React.FC<SaleValueProps> = ({
 }) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["value"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -44,12 +47,12 @@ const SaleValue: React.FC<SaleValueProps> = ({
             defaultMessage: "Discount Value",
             description: "sale discount"
           })}
-          error={!!getFieldError(errors, "value")}
+          error={!!formErrors.value}
           name="value"
           InputProps={{
             endAdornment: data.type === SaleType.FIXED ? currencySymbol : "%"
           }}
-          helperText={getFieldError(errors, "value")?.message}
+          helperText={getDiscountErrorMessage(formErrors.value, intl)}
           value={data.value}
           onChange={onChange}
         />

src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx

@@ -10,7 +10,7 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { sectionNames } from "@saleor/intl";
-import { UserError } from "../../../types";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
 import {
   DiscountValueTypeEnum,
   VoucherTypeEnum
@@ -21,8 +21,8 @@ import VoucherInfo from "../VoucherInfo";
 import VoucherLimits from "../VoucherLimits";
 import VoucherRequirements from "../VoucherRequirements";
 import VoucherTypes from "../VoucherTypes";
-
 import VoucherValue from "../VoucherValue";
+
 export interface FormData {
   applyOncePerCustomer: boolean;
   applyOncePerOrder: boolean;
@@ -45,7 +45,7 @@ export interface FormData {
 export interface VoucherCreatePageProps {
   defaultCurrency: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: FormData) => void;

src/discounts/components/VoucherDates/VoucherDates.tsx

@@ -8,15 +8,16 @@ import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Grid from "@saleor/components/Grid";
 import { commonMessages } from "@saleor/intl";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
-import { UserError } from "../../../types";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
 import { FormData } from "../VoucherDetailsPage";
 
 interface VoucherDatesProps {
   data: FormData;
   defaultCurrency: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -28,6 +29,8 @@ const VoucherDates = ({
 }: VoucherDatesProps) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["startDate", "endDate"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -40,8 +43,8 @@ const VoucherDates = ({
         <Grid variant="uniform">
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "startDate")}
+            error={!!formErrors.startDate}
-            helperText={getFieldError(errors, "startDate")?.message}
+            helperText={getDiscountErrorMessage(formErrors.startDate, intl)}
             name={"startDate" as keyof FormData}
             onChange={onChange}
             label={intl.formatMessage(commonMessages.startDate)}
@@ -54,8 +57,8 @@ const VoucherDates = ({
           />
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "startDate")}
+            error={!!formErrors.startDate}
-            helperText={getFieldError(errors, "startDate")?.message}
+            helperText={getDiscountErrorMessage(formErrors.startDate, intl)}
             name={"startTime" as keyof FormData}
             onChange={onChange}
             label={intl.formatMessage(commonMessages.startHour)}
@@ -80,8 +83,8 @@ const VoucherDates = ({
           <Grid variant="uniform">
             <TextField
               disabled={disabled}
-              error={!!getFieldError(errors, "endDate")}
+              error={!!formErrors.endDate}
-              helperText={getFieldError(errors, "endDate")?.message}
+              helperText={getDiscountErrorMessage(formErrors.endDate, intl)}
               name={"endDate" as keyof FormData}
               onChange={onChange}
               label={intl.formatMessage(commonMessages.endDate)}
@@ -94,8 +97,8 @@ const VoucherDates = ({
             />
             <TextField
               disabled={disabled}
-              error={!!getFieldError(errors, "endDate")}
+              error={!!formErrors.endDate}
-              helperText={getFieldError(errors, "endDate")?.message}
+              helperText={getDiscountErrorMessage(formErrors.endDate, intl)}
               name={"endTime" as keyof FormData}
               onChange={onChange}
               label={intl.formatMessage(commonMessages.endHour)}

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -14,8 +14,9 @@ import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { Tab, TabContainer } from "@saleor/components/Tab";
 import { RequirementsPicker } from "@saleor/discounts/types";
 import { sectionNames } from "@saleor/intl";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
 import { maybe, splitDateTime } from "../../../misc";
-import { ListProps, TabListActions, UserError } from "../../../types";
+import { ListProps, TabListActions } from "../../../types";
 import {
   DiscountValueTypeEnum,
   VoucherTypeEnum
@@ -72,7 +73,7 @@ export interface VoucherDetailsPageProps
     > {
   activeTab: VoucherDetailsPageTab;
   defaultCurrency: string;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   voucher: VoucherDetails_voucher;
   onBack: () => void;

src/discounts/components/VoucherInfo/VoucherInfo.tsx

@@ -7,14 +7,15 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Button from "@material-ui/core/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import { commonMessages } from "@saleor/intl";
-import { getFieldError } from "@saleor/utils/errors";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
-import { generateCode } from "../../../misc";
+import { getFormErrors } from "@saleor/utils/errors";
-import { UserError } from "../../../types";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import { FormData } from "../VoucherDetailsPage";
+import { generateCode } from "../../../misc";
 
 interface VoucherInfoProps {
   data: FormData;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   disabled: boolean;
   variant: "create" | "update";
   onChange: (event: any) => void;
@@ -29,6 +30,8 @@ const VoucherInfo = ({
 }: VoucherInfoProps) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["code"], errors);
+
   const onGenerateCode = () =>
     onChange({
       target: {
@@ -55,9 +58,9 @@ const VoucherInfo = ({
       <CardContent>
         <TextField
           disabled={variant === "update" || disabled}
-          error={!!getFieldError(errors, "code")}
+          error={!!formErrors.code}
           fullWidth
-          helperText={getFieldError(errors, "code")?.message}
+          helperText={getDiscountErrorMessage(formErrors.code, intl)}
           name={"code" as keyof FormData}
           label={intl.formatMessage({
             defaultMessage: "Discount Code"

src/discounts/components/VoucherLimits/VoucherLimits.tsx

@@ -6,15 +6,16 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
-import { UserError } from "../../../types";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import { FormData } from "../VoucherDetailsPage";
 
 interface VoucherLimitsProps {
   data: FormData;
   defaultCurrency: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -26,6 +27,8 @@ const VoucherLimits = ({
 }: VoucherLimitsProps) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["usageLimit"], errors);
+
   return (
     <Card>
       <CardTitle
@@ -47,8 +50,8 @@ const VoucherLimits = ({
         {data.hasUsageLimit && (
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "usageLimit")}
+            error={!!formErrors.usageLimit}
-            helperText={getFieldError(errors, "usageLimit")?.message}
+            helperText={getDiscountErrorMessage(formErrors.usageLimit, intl)}
             label={intl.formatMessage({
               defaultMessage: "Limit of Uses",
               description: "voucher"

src/discounts/components/VoucherRequirements/VoucherRequirements.tsx

@@ -8,15 +8,16 @@ import CardTitle from "@saleor/components/CardTitle";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import RadioGroupField from "@saleor/components/RadioGroupField";
 import { RequirementsPicker } from "@saleor/discounts/types";
-import { UserError } from "@saleor/types";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
-import { getFieldError } from "@saleor/utils/errors";
+import { getFormErrors } from "@saleor/utils/errors";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import { FormData } from "../VoucherDetailsPage";
 
 interface VoucherRequirementsProps {
   data: FormData;
   defaultCurrency: string;
   disabled: boolean;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -28,6 +29,11 @@ const VoucherRequirements = ({
 }: VoucherRequirementsProps) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(
+    ["minSpent", "minCheckoutItemsQuantity"],
+    errors
+  );
+
   const minimalOrderValueText = intl.formatMessage({
     defaultMessage: "Minimal order value",
     description: "voucher requirement"
@@ -77,8 +83,8 @@ const VoucherRequirements = ({
         {data.requirementsPicker === RequirementsPicker.ORDER ? (
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "minSpent")}
+            error={!!formErrors.minSpent}
-            helperText={getFieldError(errors, "minSpent")?.message}
+            helperText={getDiscountErrorMessage(formErrors.minSpent, intl)}
             label={minimalOrderValueText}
             name={"minSpent" as keyof FormData}
             value={data.minSpent}
@@ -88,10 +94,11 @@ const VoucherRequirements = ({
         ) : data.requirementsPicker === RequirementsPicker.ITEM ? (
           <TextField
             disabled={disabled}
-            error={!!getFieldError(errors, "minCheckoutItemsQuantity")}
+            error={!!formErrors.minCheckoutItemsQuantity}
-            helperText={
+            helperText={getDiscountErrorMessage(
-              getFieldError(errors, "minCheckoutItemsQuantity")?.message
+              formErrors.minCheckoutItemsQuantity,
-            }
+              intl
+            )}
             label={minimalQuantityText}
             name={"minCheckoutItemsQuantity" as keyof FormData}
             value={data.minCheckoutItemsQuantity}

src/discounts/components/VoucherTypes/VoucherTypes.tsx

@@ -6,14 +6,15 @@ import { useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import Grid from "@saleor/components/Grid";
 import RadioGroupField from "@saleor/components/RadioGroupField";
-import { getFieldError } from "@saleor/utils/errors";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
-import { UserError } from "../../../types";
+import { getFormErrors } from "@saleor/utils/errors";
-import { DiscountValueTypeEnum } from "../../../types/globalTypes";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import { FormData } from "../VoucherDetailsPage";
+import { DiscountValueTypeEnum } from "../../../types/globalTypes";
 
 interface VoucherTypesProps {
   data: FormData;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
@@ -26,6 +27,8 @@ const VoucherTypes = ({
 }: VoucherTypesProps) => {
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["discountType"], errors);
+
   const voucherTypeChoices = [
     {
       label: intl.formatMessage({
@@ -63,8 +66,8 @@ const VoucherTypes = ({
           <RadioGroupField
             choices={voucherTypeChoices}
             disabled={disabled}
-            error={!!getFieldError(errors, "discountType")}
+            error={!!formErrors.discountType}
-            hint={getFieldError(errors, "discountType")?.message}
+            hint={getDiscountErrorMessage(formErrors.discountType, intl)}
             name={"discountType" as keyof FormData}
             value={data.discountType}
             onChange={onChange}

src/discounts/components/VoucherValue/VoucherValue.tsx

@@ -11,8 +11,9 @@ import { FormSpacer } from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import RadioGroupField from "@saleor/components/RadioGroupField";
 import TextFieldWithChoice from "@saleor/components/TextFieldWithChoice";
-import { getFieldError } from "@saleor/utils/errors";
+import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
-import { UserError } from "../../../types";
+import { getFormErrors } from "@saleor/utils/errors";
+import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import { DiscountValueTypeEnum } from "../../../types/globalTypes";
 import { translateVoucherTypes } from "../../translations";
 import { FormData } from "../VoucherDetailsPage";
@@ -20,7 +21,7 @@ import { FormData } from "../VoucherDetailsPage";
 interface VoucherValueProps {
   data: FormData;
   defaultCurrency: string;
-  errors: UserError[];
+  errors: DiscountErrorFragment[];
   disabled: boolean;
   variant: string;
   onChange: (event: React.ChangeEvent<any>) => void;
@@ -48,6 +49,8 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
 
+  const formErrors = getFormErrors(["discountValue", "type"], errors);
+
   const translatedVoucherTypes = translateVoucherTypes(intl);
   const voucherTypeChoices = Object.values(VoucherType).map(type => ({
     label: translatedVoucherTypes[type],
@@ -65,7 +68,7 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
       <CardContent>
         <TextFieldWithChoice
           disabled={disabled}
-          error={!!getFieldError(errors, "discountValue")}
+          error={!!formErrors.discountValue}
           ChoiceProps={{
             label:
               data.discountType === DiscountValueTypeEnum.FIXED
@@ -74,7 +77,7 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
             name: "discountType" as keyof FormData,
             values: null
           }}
-          helperText={getFieldError(errors, "discountValue")?.message}
+          helperText={getDiscountErrorMessage(formErrors.discountValue, intl)}
           name={"value" as keyof FormData}
           onChange={onChange}
           label={intl.formatMessage({
@@ -94,8 +97,8 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
             <RadioGroupField
               choices={voucherTypeChoices}
               disabled={disabled}
-              error={!!getFieldError(errors, "type")}
+              error={!!formErrors.type}
-              hint={getFieldError(errors, "type")?.message}
+              hint={getDiscountErrorMessage(formErrors.type, intl)}
               label={intl.formatMessage({
                 defaultMessage: "Voucher Specific Information"
               })}