Use error codes in discount section

This commit is contained in:
dominik-zeglen 2020-03-23 20:22:40 +01:00
parent 9b542e7837
commit 881d9d70a8
13 changed files with 107 additions and 74 deletions

View file

@ -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 { UserError } from "../../../types";
import { getFormErrors } from "@saleor/utils/errors";
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")}
helperText={getFieldError(errors, "startDate")?.message}
error={!!formErrors.startDate}
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")}
helperText={getFieldError(errors, "startDate")?.message}
error={!!formErrors.startDate}
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")}
helperText={getFieldError(errors, "endDate")?.message}
error={!!formErrors.endDate}
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")}
helperText={getFieldError(errors, "endDate")?.message}
error={!!formErrors.endDate}
helperText={getDiscountErrorMessage(formErrors.endDate, intl)}
name={"endTime" as keyof FormData}
onChange={onChange}
label={intl.formatMessage(commonMessages.endHour)}

View file

@ -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;

View file

@ -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;

View file

@ -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 { getFieldError } from "@saleor/utils/errors";
import { getFormErrors } 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")}
helperText={getFieldError(errors, "name")?.message}
error={!!formErrors.name}
helperText={getDiscountErrorMessage(formErrors.name, intl)}
name={"name" as keyof FormData}
onChange={onChange}
label={intl.formatMessage({

View file

@ -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}
/>

View file

@ -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;

View file

@ -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 { UserError } from "../../../types";
import { getFormErrors } from "@saleor/utils/errors";
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")}
helperText={getFieldError(errors, "startDate")?.message}
error={!!formErrors.startDate}
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")}
helperText={getFieldError(errors, "startDate")?.message}
error={!!formErrors.startDate}
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")}
helperText={getFieldError(errors, "endDate")?.message}
error={!!formErrors.endDate}
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")}
helperText={getFieldError(errors, "endDate")?.message}
error={!!formErrors.endDate}
helperText={getDiscountErrorMessage(formErrors.endDate, intl)}
name={"endTime" as keyof FormData}
onChange={onChange}
label={intl.formatMessage(commonMessages.endHour)}

View file

@ -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;

View file

@ -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 { generateCode } from "../../../misc";
import { UserError } from "../../../types";
import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
import { getFormErrors } from "@saleor/utils/errors";
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"

View file

@ -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 { UserError } from "../../../types";
import { getFormErrors } from "@saleor/utils/errors";
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")}
helperText={getFieldError(errors, "usageLimit")?.message}
error={!!formErrors.usageLimit}
helperText={getDiscountErrorMessage(formErrors.usageLimit, intl)}
label={intl.formatMessage({
defaultMessage: "Limit of Uses",
description: "voucher"

View file

@ -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 { getFieldError } from "@saleor/utils/errors";
import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
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")}
helperText={getFieldError(errors, "minSpent")?.message}
error={!!formErrors.minSpent}
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")}
helperText={
getFieldError(errors, "minCheckoutItemsQuantity")?.message
}
error={!!formErrors.minCheckoutItemsQuantity}
helperText={getDiscountErrorMessage(
formErrors.minCheckoutItemsQuantity,
intl
)}
label={minimalQuantityText}
name={"minCheckoutItemsQuantity" as keyof FormData}
value={data.minCheckoutItemsQuantity}

View file

@ -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 { UserError } from "../../../types";
import { DiscountValueTypeEnum } from "../../../types/globalTypes";
import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
import { getFormErrors } from "@saleor/utils/errors";
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")}
hint={getFieldError(errors, "discountType")?.message}
error={!!formErrors.discountType}
hint={getDiscountErrorMessage(formErrors.discountType, intl)}
name={"discountType" as keyof FormData}
value={data.discountType}
onChange={onChange}

View file

@ -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 { UserError } from "../../../types";
import { DiscountErrorFragment } from "@saleor/discounts/types/DiscountErrorFragment";
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")}
hint={getFieldError(errors, "type")?.message}
error={!!formErrors.type}
hint={getDiscountErrorMessage(formErrors.type, intl)}
label={intl.formatMessage({
defaultMessage: "Voucher Specific Information"
})}