djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use error codes in account sections

Browse source
This commit is contained in:
dominik-zeglen 2020-03-11 10:55:14 +01:00
parent 93ba9378ef
commit 96c98077d8
28 changed files with 351 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/components/AddressEdit/AddressEdit.tsx
View file

@ -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 { getFieldError } from "@saleor/utils/errors";
import { getFormErrors } 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")}
helperText={getFieldError(errors, "firstName")?.message}
error={!!formErrors.firstName}
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")}
helperText={getFieldError(errors, "lastName")?.message}
error={!!formErrors.lastName}
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")}
helperText={getFieldError(errors, "companyName")?.message}
error={!!formErrors.companyName}
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")}
helperText={getFieldError(errors, "streetAddress1")?.message}
error={!!formErrors.streetAddress1}
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")}
helperText={getFieldError(errors, "streetAddress2")?.message}
error={!!formErrors.streetAddress2}
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")}
helperText={getFieldError(errors, "city")?.message}
error={!!formErrors.city}
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")}
helperText={getFieldError(errors, "postalCode")?.message}
error={!!formErrors.postalCode}
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")}
helperText={getFieldError(errors, "country")?.message}
error={!!formErrors.country}
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")}
helperText={getFieldError(errors, "countryArea")?.message}
error={!!formErrors.countryArea}
helperText={getErrorMessage(formErrors.countryArea, intl)}
label={intl.formatMessage({
defaultMessage: "Country area"
})}

4
src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
View file

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

4
src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx
View file

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

33
src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx
View file

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

13
src/customers/components/CustomerCreateNote/CustomerCreateNote.tsx
View file

@ -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 { getFieldError } from "@saleor/utils/errors";
import { getFormErrors } 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"

4
src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
View file

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

15
src/customers/components/CustomerDetails/CustomerDetails.tsx
View file

@ -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 { getFieldError } from "@saleor/utils/errors";
import { getFormErrors } 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",

4
src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
View file

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

23
src/customers/components/CustomerInfo/CustomerInfo.tsx
View file

@ -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 { 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";
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)}

16
src/customers/views/CustomerCreate.tsx
View file

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

20
src/hooks/useAddressValidation.ts
View file

@ -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 } from "@saleor/types/globalTypes";
import { AddressInput, AccountErrorCode } 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<UserError[]>([]);
const [validationErrors, setValidationErrors] = useState<
AccountErrorFragment[]
>([]);
const countryRequiredError = {
field: "country",
message: intl.formatMessage(commonMessages.requiredField)
const countryRequiredError: AccountErrorFragment = {
__typename: "AccountError",
code: AccountErrorCode.REQUIRED,
field: "country"
};
return {

4
src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
View file

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

16
src/orders/mutations.ts
View file

@ -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 {
field
message
errors: orderErrors {
...OrderErrorFragment
}
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
}

5
src/orders/types/OrderDraftUpdate.ts
View file

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

15
src/orders/types/OrderErrorFragment.ts Normal file
View file

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

6
src/orders/types/OrderUpdate.ts
View file

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

8
src/services/components/ServiceCreatePage/ServiceCreatePage.stories.tsx
View file

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

4
src/services/components/ServiceCreatePage/ServiceCreatePage.tsx
View file

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

8
src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx
View file

@ -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", () => (

6
src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx
View file

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

21
src/services/components/ServiceInfo/ServiceInfo.tsx
View file

@ -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 { 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";
export interface ServiceInfoProps {
data: {
name: string;
};
disabled: boolean;
errors: UserError[];
errors: AccountErrorFragment[];
onChange: FormChange;
}
const ServiceInfo: React.FC<ServiceInfoProps> = props => {
const { data, disabled, errors, onChange } = props;
const ServiceInfo: React.FC<ServiceInfoProps> = ({
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}

29
src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
View file

@ -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 { UserError } from "../../../types";
import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
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")}
helperText={getFieldError(dialogErrors, "firstName")?.message}
error={!!formErrors.firstName}
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")}
helperText={getFieldError(dialogErrors, "lastName")?.message}
error={!!formErrors.lastName}
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"

24
src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
View file

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

10
src/storybook/stories/customers/CustomerCreatePage.tsx
View file

@ -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 =>
formError(field)
)}
] as Array<keyof CustomerCreatePageFormData>).map(field => ({
__typename: "AccountError",
code: AccountErrorCode.INVALID,
field
}))}
/>
));

8
src/storybook/stories/customers/CustomerDetailsPage.tsx
View file

@ -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", () => (

23
src/types/globalTypes.ts
View file

@ -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",

56
src/utils/errors/account.ts Normal file
View file

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

28
src/utils/errors/order.ts Normal file
View file

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