Use error formatting in site settings view
This commit is contained in:
parent
96c98077d8
commit
63ff52349d
12 changed files with 203 additions and 120 deletions
|
@ -3,7 +3,7 @@ import CardContent from "@material-ui/core/CardContent";
|
|||
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 CardTitle from "@saleor/components/CardTitle";
|
||||
import FormSpacer from "@saleor/components/FormSpacer";
|
||||
|
@ -12,15 +12,18 @@ import SingleAutocompleteSelectField, {
|
|||
SingleAutocompleteChoiceType
|
||||
} from "@saleor/components/SingleAutocompleteSelectField";
|
||||
import { ChangeEvent } from "@saleor/hooks/useForm";
|
||||
import { UserError } from "@saleor/types";
|
||||
import { getFieldError } from "@saleor/utils/errors";
|
||||
import { getFormErrors } from "@saleor/utils/errors";
|
||||
import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
|
||||
import getShopErrorMessage from "@saleor/utils/errors/shop";
|
||||
import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
|
||||
import getAccountErrorMessage from "@saleor/utils/errors/account";
|
||||
import { SiteSettingsPageFormData } from "../SiteSettingsPage";
|
||||
|
||||
interface SiteSettingsAddressProps {
|
||||
countries: SingleAutocompleteChoiceType[];
|
||||
data: SiteSettingsPageFormData;
|
||||
displayCountry: string;
|
||||
errors: UserError[];
|
||||
errors: Array<AccountErrorFragment | ShopErrorFragment>;
|
||||
disabled: boolean;
|
||||
onChange: (event: ChangeEvent) => void;
|
||||
onCountryChange: (event: ChangeEvent) => void;
|
||||
|
@ -35,6 +38,17 @@ const useStyles = makeStyles(
|
|||
{ name: "SiteSettingsAddress" }
|
||||
);
|
||||
|
||||
function getErrorMessage(
|
||||
err: AccountErrorFragment | ShopErrorFragment,
|
||||
intl: IntlShape
|
||||
): string {
|
||||
if (err?.__typename === "AccountError") {
|
||||
return getAccountErrorMessage(err, intl);
|
||||
}
|
||||
|
||||
return getShopErrorMessage(err, intl);
|
||||
}
|
||||
|
||||
const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
||||
const {
|
||||
countries,
|
||||
|
@ -45,10 +59,22 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
|||
onChange,
|
||||
onCountryChange
|
||||
} = props;
|
||||
const classes = useStyles(props);
|
||||
|
||||
const classes = useStyles(props);
|
||||
const intl = useIntl();
|
||||
|
||||
const formFields = [
|
||||
"companyName",
|
||||
"streetAddress1",
|
||||
"streetAddress2",
|
||||
"city",
|
||||
"postalCode",
|
||||
"country",
|
||||
"companyArea",
|
||||
"phone"
|
||||
];
|
||||
const formErrors = getFormErrors(formFields, errors);
|
||||
|
||||
return (
|
||||
<Card className={classes.root}>
|
||||
<CardTitle
|
||||
|
@ -60,8 +86,8 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
|||
<CardContent>
|
||||
<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"
|
||||
})}
|
||||
|
@ -73,8 +99,8 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = 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"
|
||||
})}
|
||||
|
@ -86,8 +112,8 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = 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"
|
||||
})}
|
||||
|
@ -100,8 +126,8 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
|||
<Grid>
|
||||
<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"
|
||||
})}
|
||||
|
@ -112,8 +138,8 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
|||
/>
|
||||
<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"
|
||||
})}
|
||||
|
@ -128,8 +154,8 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
|||
<SingleAutocompleteSelectField
|
||||
disabled={disabled}
|
||||
displayValue={displayCountry}
|
||||
error={!!getFieldError(errors, "country")}
|
||||
helperText={getFieldError(errors, "country")?.message}
|
||||
error={!!formErrors.country}
|
||||
helperText={getErrorMessage(formErrors.country, intl)}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Country"
|
||||
})}
|
||||
|
@ -143,8 +169,8 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
|||
/>
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
error={!!getFieldError(errors, "companyArea")}
|
||||
helperText={getFieldError(errors, "companyArea")?.message}
|
||||
error={!!formErrors.countryArea}
|
||||
helperText={getErrorMessage(formErrors.countryArea, intl)}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Country area"
|
||||
})}
|
||||
|
@ -157,9 +183,9 @@ const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
|
|||
<FormSpacer />
|
||||
<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"
|
||||
})}
|
||||
|
|
|
@ -7,13 +7,14 @@ import { useIntl } from "react-intl";
|
|||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import FormSpacer from "@saleor/components/FormSpacer";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import { UserError } from "@saleor/types";
|
||||
import { getFieldError } from "@saleor/utils/errors";
|
||||
import { getFormErrors } from "@saleor/utils/errors";
|
||||
import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
|
||||
import getShopErrorMessage from "@saleor/utils/errors/shop";
|
||||
import { SiteSettingsPageFormData } from "../SiteSettingsPage";
|
||||
|
||||
interface SiteSettingsDetailsProps {
|
||||
data: SiteSettingsPageFormData;
|
||||
errors: UserError[];
|
||||
errors: ShopErrorFragment[];
|
||||
disabled: boolean;
|
||||
onChange: (event: React.ChangeEvent<any>) => void;
|
||||
}
|
||||
|
@ -26,6 +27,8 @@ const SiteSettingsDetails: React.FC<SiteSettingsDetailsProps> = ({
|
|||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const formErrors = getFormErrors(["name", "domain", "description"], errors);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
|
@ -34,14 +37,14 @@ const SiteSettingsDetails: React.FC<SiteSettingsDetailsProps> = ({
|
|||
<CardContent>
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
error={!!getFieldError(errors, "name")}
|
||||
error={!!formErrors.name}
|
||||
fullWidth
|
||||
name="name"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Name of your store"
|
||||
})}
|
||||
helperText={
|
||||
getFieldError(errors, "name")?.message ||
|
||||
getShopErrorMessage(formErrors.name, intl) ||
|
||||
intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Name of your store is shown on tab in web browser"
|
||||
|
@ -53,27 +56,27 @@ const SiteSettingsDetails: React.FC<SiteSettingsDetailsProps> = ({
|
|||
<FormSpacer />
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
error={!!getFieldError(errors, "domain")}
|
||||
error={!!formErrors.domain}
|
||||
fullWidth
|
||||
name="domain"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "URL of your online store"
|
||||
})}
|
||||
helperText={getFieldError(errors, "domain")?.message}
|
||||
helperText={getShopErrorMessage(formErrors.domain, intl)}
|
||||
value={data.domain}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
error={!!getFieldError(errors, "description")}
|
||||
error={!!formErrors.description}
|
||||
fullWidth
|
||||
name="description"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Store Description"
|
||||
})}
|
||||
helperText={
|
||||
getFieldError(errors, "description")?.message ||
|
||||
getShopErrorMessage(formErrors.description, intl) ||
|
||||
intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Store description is shown on taskbar after your store name"
|
||||
|
|
|
@ -11,8 +11,10 @@ import Form from "@saleor/components/Form";
|
|||
import { FormSpacer } from "@saleor/components/FormSpacer";
|
||||
import SingleSelectField from "@saleor/components/SingleSelectField";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import { UserError, DialogProps } from "@saleor/types";
|
||||
import { getFieldError } from "@saleor/utils/errors";
|
||||
import { DialogProps } from "@saleor/types";
|
||||
import { getFieldError, getFormErrors } from "@saleor/utils/errors";
|
||||
import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
|
||||
import getShopErrorMessage from "@saleor/utils/errors/shop";
|
||||
import { authorizationKeyTypes } from "../../../misc";
|
||||
import { AuthorizationKeyType } from "../../../types/globalTypes";
|
||||
|
||||
|
@ -23,7 +25,7 @@ export interface SiteSettingsKeyDialogForm {
|
|||
}
|
||||
|
||||
export interface SiteSettingsKeyDialogProps extends DialogProps {
|
||||
errors: UserError[];
|
||||
errors: ShopErrorFragment[];
|
||||
initial: SiteSettingsKeyDialogForm;
|
||||
onSubmit: (data: SiteSettingsKeyDialogForm) => void;
|
||||
}
|
||||
|
@ -37,8 +39,10 @@ const SiteSettingsKeyDialog: React.FC<SiteSettingsKeyDialogProps> = ({
|
|||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const formErrors = getFormErrors(["keyType", "key", "password"], errors);
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} maxWidth="xs" open={open}>
|
||||
<Dialog onClose={onClose} maxWidth="xs" fullWidth open={open}>
|
||||
<Form initial={initial} onSubmit={onSubmit}>
|
||||
{({ change, data }) => (
|
||||
<>
|
||||
|
@ -54,37 +58,37 @@ const SiteSettingsKeyDialog: React.FC<SiteSettingsKeyDialogProps> = ({
|
|||
label: authorizationKeyTypes[key],
|
||||
value: key
|
||||
}))}
|
||||
error={!!getFieldError(errors, "keyType")}
|
||||
error={!!formErrors.keyType}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Authentication type",
|
||||
description: "authentication provider name"
|
||||
})}
|
||||
hint={getFieldError(errors, "keyType")?.message}
|
||||
hint={getShopErrorMessage(formErrors.keyType, intl)}
|
||||
name="type"
|
||||
onChange={change}
|
||||
value={data.type}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<TextField
|
||||
error={!!getFieldError(errors, "key")}
|
||||
error={!!formErrors.key}
|
||||
fullWidth
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Key",
|
||||
description: "authentication provider API key"
|
||||
})}
|
||||
helperText={getFieldError(errors, "key")?.message}
|
||||
helperText={getShopErrorMessage(formErrors.key, intl)}
|
||||
name="key"
|
||||
onChange={change}
|
||||
value={data.key}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<TextField
|
||||
error={!!getFieldError(errors, "password")}
|
||||
error={!!formErrors.password}
|
||||
fullWidth
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Password"
|
||||
})}
|
||||
helperText={getFieldError(errors, "password")?.message}
|
||||
helperText={getShopErrorMessage(formErrors.password, intl)}
|
||||
name="password"
|
||||
onChange={change}
|
||||
value={data.password}
|
||||
|
|
|
@ -9,8 +9,9 @@ import { FormattedMessage, useIntl } from "react-intl";
|
|||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import FormSpacer from "@saleor/components/FormSpacer";
|
||||
import Hr from "@saleor/components/Hr";
|
||||
import { UserError } from "@saleor/types";
|
||||
import { getFieldError } from "@saleor/utils/errors";
|
||||
import { getFormErrors } from "@saleor/utils/errors";
|
||||
import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
|
||||
import getShopErrorMessage from "@saleor/utils/errors/shop";
|
||||
|
||||
export interface SiteSettingsMailingFormData {
|
||||
defaultMailSenderName: string;
|
||||
|
@ -19,7 +20,7 @@ export interface SiteSettingsMailingFormData {
|
|||
}
|
||||
interface SiteSettingsMailingProps {
|
||||
data: SiteSettingsMailingFormData;
|
||||
errors: UserError[];
|
||||
errors: ShopErrorFragment[];
|
||||
disabled: boolean;
|
||||
onChange: (event: React.ChangeEvent<any>) => void;
|
||||
}
|
||||
|
@ -41,9 +42,19 @@ const useStyles = makeStyles(
|
|||
|
||||
const SiteSettingsMailing: React.FC<SiteSettingsMailingProps> = props => {
|
||||
const { data, disabled, errors, onChange } = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
const intl = useIntl();
|
||||
|
||||
const formErrors = getFormErrors(
|
||||
[
|
||||
"defaultMailSenderAddress",
|
||||
"defaultMailSenderName",
|
||||
"customerSetPasswordUrl"
|
||||
],
|
||||
errors
|
||||
);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle
|
||||
|
@ -65,29 +76,30 @@ const SiteSettingsMailing: React.FC<SiteSettingsMailingProps> = props => {
|
|||
</Typography>
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
error={!!getFieldError(errors, "defaultMailSenderAddress")}
|
||||
error={!!formErrors.defaultMailSenderAddress}
|
||||
fullWidth
|
||||
name="defaultMailSenderAddress"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Mailing email address"
|
||||
})}
|
||||
helperText={
|
||||
getFieldError(errors, "defaultMailSenderAddress")?.message
|
||||
}
|
||||
helperText={getShopErrorMessage(
|
||||
formErrors.defaultMailSenderAddress,
|
||||
intl
|
||||
)}
|
||||
value={data.defaultMailSenderAddress}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
error={!!getFieldError(errors, "defaultMailSenderName")}
|
||||
error={!!formErrors.defaultMailSenderName}
|
||||
fullWidth
|
||||
name="defaultMailSenderName"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Mailing email sender"
|
||||
})}
|
||||
helperText={
|
||||
getFieldError(errors, "defaultMailSenderName")?.message ||
|
||||
getShopErrorMessage(formErrors.defaultMailSenderName, intl) ||
|
||||
intl.formatMessage({
|
||||
defaultMessage: 'This will be visible as "from" name',
|
||||
description: "email sender"
|
||||
|
@ -101,7 +113,7 @@ const SiteSettingsMailing: React.FC<SiteSettingsMailingProps> = props => {
|
|||
<FormSpacer />
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
error={!!getFieldError(errors, "customerSetPasswordUrl")}
|
||||
error={!!formErrors.customerSetPasswordUrl}
|
||||
fullWidth
|
||||
name="customerSetPasswordUrl"
|
||||
label={intl.formatMessage({
|
||||
|
@ -111,7 +123,7 @@ const SiteSettingsMailing: React.FC<SiteSettingsMailingProps> = props => {
|
|||
defaultMessage: "URL address"
|
||||
})}
|
||||
helperText={
|
||||
getFieldError(errors, "customerSetPasswordUrl")?.message ||
|
||||
getShopErrorMessage(formErrors.customerSetPasswordUrl, intl) ||
|
||||
intl.formatMessage({
|
||||
defaultMessage:
|
||||
"This URL will be used as a main URL for password resets. It will be sent via email."
|
||||
|
|
|
@ -14,9 +14,9 @@ import SaveButtonBar from "@saleor/components/SaveButtonBar";
|
|||
import useAddressValidation from "@saleor/hooks/useAddressValidation";
|
||||
import useStateFromProps from "@saleor/hooks/useStateFromProps";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import { UserError } from "@saleor/types";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import { mapCountriesToChoices } from "@saleor/utils/maps";
|
||||
import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
|
||||
import { maybe } from "../../../misc";
|
||||
import { AuthorizationKeyType } from "../../../types/globalTypes";
|
||||
import { SiteSettings_shop } from "../../types/SiteSettings";
|
||||
|
@ -48,7 +48,7 @@ export interface SiteSettingsPageFormData
|
|||
|
||||
export interface SiteSettingsPageProps {
|
||||
disabled: boolean;
|
||||
errors: UserError[];
|
||||
errors: ShopErrorFragment[];
|
||||
shop: SiteSettings_shop;
|
||||
saveButtonBarState: ConfirmButtonTransitionState;
|
||||
onBack: () => void;
|
||||
|
@ -127,8 +127,6 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
|
|||
name: maybe(() => shop.name, "")
|
||||
};
|
||||
|
||||
const formErrors = [...errors, ...validationErrors];
|
||||
|
||||
return (
|
||||
<Form
|
||||
initial={initialForm}
|
||||
|
@ -141,9 +139,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
|
|||
confirmLeave
|
||||
>
|
||||
{({ change, data, hasChanged, submit }) => {
|
||||
const countryChoices = mapCountriesToChoices(
|
||||
maybe(() => shop.countries, [])
|
||||
);
|
||||
const countryChoices = mapCountriesToChoices(shop?.countries || []);
|
||||
const handleCountryChange = createSingleAutocompleteSelectHandler(
|
||||
change,
|
||||
setDisplayCountry,
|
||||
|
@ -169,7 +165,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
|
|||
</div>
|
||||
<SiteSettingsDetails
|
||||
data={data}
|
||||
errors={formErrors}
|
||||
errors={errors}
|
||||
disabled={disabled}
|
||||
onChange={change}
|
||||
/>
|
||||
|
@ -187,7 +183,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
|
|||
</div>
|
||||
<SiteSettingsMailing
|
||||
data={data}
|
||||
errors={formErrors}
|
||||
errors={errors}
|
||||
disabled={disabled}
|
||||
onChange={change}
|
||||
/>
|
||||
|
@ -208,7 +204,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
|
|||
data={data}
|
||||
displayCountry={displayCountry}
|
||||
countries={countryChoices}
|
||||
errors={formErrors}
|
||||
errors={[...errors, ...validationErrors]}
|
||||
disabled={disabled}
|
||||
onChange={change}
|
||||
onCountryChange={handleCountryChange}
|
||||
|
|
|
@ -16,16 +16,22 @@ import {
|
|||
ShopSettingsUpdateVariables
|
||||
} from "./types/ShopSettingsUpdate";
|
||||
|
||||
const shopErrorFragment = gql`
|
||||
fragment ShopErrorFragment on ShopError {
|
||||
code
|
||||
field
|
||||
}
|
||||
`;
|
||||
const authorizationKeyAdd = gql`
|
||||
${shopErrorFragment}
|
||||
${shopFragment}
|
||||
mutation AuthorizationKeyAdd(
|
||||
$input: AuthorizationKeyInput!
|
||||
$keyType: AuthorizationKeyType!
|
||||
) {
|
||||
authorizationKeyAdd(input: $input, keyType: $keyType) {
|
||||
errors {
|
||||
field
|
||||
message
|
||||
errors: shopErrors {
|
||||
...ShopErrorFragment
|
||||
}
|
||||
shop {
|
||||
...ShopFragment
|
||||
|
@ -39,12 +45,12 @@ export const TypedAuthorizationKeyAdd = TypedMutation<
|
|||
>(authorizationKeyAdd);
|
||||
|
||||
const authorizationKeyDelete = gql`
|
||||
${shopErrorFragment}
|
||||
${shopFragment}
|
||||
mutation AuthorizationKeyDelete($keyType: AuthorizationKeyType!) {
|
||||
authorizationKeyDelete(keyType: $keyType) {
|
||||
errors {
|
||||
field
|
||||
message
|
||||
errors: shopErrors {
|
||||
...ShopErrorFragment
|
||||
}
|
||||
shop {
|
||||
...ShopFragment
|
||||
|
@ -58,6 +64,7 @@ export const TypedAuthorizationKeyDelete = TypedMutation<
|
|||
>(authorizationKeyDelete);
|
||||
|
||||
const shopSettingsUpdate = gql`
|
||||
${shopErrorFragment}
|
||||
${shopFragment}
|
||||
${fragmentAddress}
|
||||
mutation ShopSettingsUpdate(
|
||||
|
@ -66,18 +73,16 @@ const shopSettingsUpdate = gql`
|
|||
$addressInput: AddressInput
|
||||
) {
|
||||
shopSettingsUpdate(input: $shopSettingsInput) {
|
||||
errors {
|
||||
field
|
||||
message
|
||||
errors: shopErrors {
|
||||
...ShopErrorFragment
|
||||
}
|
||||
shop {
|
||||
...ShopFragment
|
||||
}
|
||||
}
|
||||
shopDomainUpdate(input: $shopDomainInput) {
|
||||
errors {
|
||||
field
|
||||
message
|
||||
errors: shopErrors {
|
||||
...ShopErrorFragment
|
||||
}
|
||||
shop {
|
||||
domain {
|
||||
|
@ -87,9 +92,8 @@ const shopSettingsUpdate = gql`
|
|||
}
|
||||
}
|
||||
shopAddressUpdate(input: $addressInput) {
|
||||
errors {
|
||||
field
|
||||
message
|
||||
errors: shopErrors {
|
||||
...ShopErrorFragment
|
||||
}
|
||||
shop {
|
||||
companyAddress {
|
||||
|
|
|
@ -2,16 +2,16 @@
|
|||
/* eslint-disable */
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AuthorizationKeyInput, AuthorizationKeyType } from "./../../types/globalTypes";
|
||||
import { AuthorizationKeyInput, AuthorizationKeyType, ShopErrorCode } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: AuthorizationKeyAdd
|
||||
// ====================================================
|
||||
|
||||
export interface AuthorizationKeyAdd_authorizationKeyAdd_errors {
|
||||
__typename: "Error";
|
||||
__typename: "ShopError";
|
||||
code: ShopErrorCode;
|
||||
field: string | null;
|
||||
message: string | null;
|
||||
}
|
||||
|
||||
export interface AuthorizationKeyAdd_authorizationKeyAdd_shop_authorizationKeys {
|
||||
|
|
|
@ -2,16 +2,16 @@
|
|||
/* eslint-disable */
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AuthorizationKeyType } from "./../../types/globalTypes";
|
||||
import { AuthorizationKeyType, ShopErrorCode } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: AuthorizationKeyDelete
|
||||
// ====================================================
|
||||
|
||||
export interface AuthorizationKeyDelete_authorizationKeyDelete_errors {
|
||||
__typename: "Error";
|
||||
__typename: "ShopError";
|
||||
code: ShopErrorCode;
|
||||
field: string | null;
|
||||
message: string | null;
|
||||
}
|
||||
|
||||
export interface AuthorizationKeyDelete_authorizationKeyDelete_shop_authorizationKeys {
|
||||
|
|
15
src/siteSettings/types/ShopErrorFragment.ts
Normal file
15
src/siteSettings/types/ShopErrorFragment.ts
Normal file
|
@ -0,0 +1,15 @@
|
|||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { ShopErrorCode } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL fragment: ShopErrorFragment
|
||||
// ====================================================
|
||||
|
||||
export interface ShopErrorFragment {
|
||||
__typename: "ShopError";
|
||||
code: ShopErrorCode;
|
||||
field: string | null;
|
||||
}
|
|
@ -2,16 +2,16 @@
|
|||
/* eslint-disable */
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { SiteDomainInput, ShopSettingsInput, AddressInput, AuthorizationKeyType } from "./../../types/globalTypes";
|
||||
import { SiteDomainInput, ShopSettingsInput, AddressInput, ShopErrorCode, AuthorizationKeyType } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: ShopSettingsUpdate
|
||||
// ====================================================
|
||||
|
||||
export interface ShopSettingsUpdate_shopSettingsUpdate_errors {
|
||||
__typename: "Error";
|
||||
__typename: "ShopError";
|
||||
code: ShopErrorCode;
|
||||
field: string | null;
|
||||
message: string | null;
|
||||
}
|
||||
|
||||
export interface ShopSettingsUpdate_shopSettingsUpdate_shop_authorizationKeys {
|
||||
|
@ -73,9 +73,9 @@ export interface ShopSettingsUpdate_shopSettingsUpdate {
|
|||
}
|
||||
|
||||
export interface ShopSettingsUpdate_shopDomainUpdate_errors {
|
||||
__typename: "Error";
|
||||
__typename: "ShopError";
|
||||
code: ShopErrorCode;
|
||||
field: string | null;
|
||||
message: string | null;
|
||||
}
|
||||
|
||||
export interface ShopSettingsUpdate_shopDomainUpdate_shop_domain {
|
||||
|
@ -96,9 +96,9 @@ export interface ShopSettingsUpdate_shopDomainUpdate {
|
|||
}
|
||||
|
||||
export interface ShopSettingsUpdate_shopAddressUpdate_errors {
|
||||
__typename: "Error";
|
||||
__typename: "ShopError";
|
||||
code: ShopErrorCode;
|
||||
field: string | null;
|
||||
message: string | null;
|
||||
}
|
||||
|
||||
export interface ShopSettingsUpdate_shopAddressUpdate_shop_companyAddress_country {
|
||||
|
|
|
@ -7,7 +7,7 @@ import { commonMessages, sectionNames } from "@saleor/intl";
|
|||
import { useIntl } from "react-intl";
|
||||
|
||||
import { configurationMenuUrl } from "../../configuration";
|
||||
import { findInEnum, maybe } from "../../misc";
|
||||
import { findInEnum } from "../../misc";
|
||||
import { AuthorizationKeyType, CountryCode } from "../../types/globalTypes";
|
||||
import SiteSettingsKeyDialog, {
|
||||
SiteSettingsKeyDialogForm
|
||||
|
@ -37,7 +37,7 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
|
|||
const intl = useIntl();
|
||||
|
||||
const handleAddKeySuccess = (data: AuthorizationKeyAdd) => {
|
||||
if (!maybe(() => data.authorizationKeyAdd.errors.length)) {
|
||||
if (data.authorizationKeyAdd.errors.length === 0) {
|
||||
notify({
|
||||
text: intl.formatMessage(commonMessages.savedChanges)
|
||||
});
|
||||
|
@ -45,7 +45,7 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
|
|||
}
|
||||
};
|
||||
const handleDeleteKeySuccess = (data: AuthorizationKeyDelete) => {
|
||||
if (!maybe(() => data.authorizationKeyDelete.errors.length)) {
|
||||
if (data.authorizationKeyDelete.errors.length === 0) {
|
||||
notify({
|
||||
text: intl.formatMessage(commonMessages.savedChanges)
|
||||
});
|
||||
|
@ -64,12 +64,9 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
|
|||
};
|
||||
const handleSiteSettingsSuccess = (data: ShopSettingsUpdate) => {
|
||||
if (
|
||||
(!data.shopDomainUpdate.errors ||
|
||||
data.shopDomainUpdate.errors.length === 0) &&
|
||||
(!data.shopSettingsUpdate.errors ||
|
||||
data.shopSettingsUpdate.errors.length === 0) &&
|
||||
(!data.shopAddressUpdate.errors ||
|
||||
data.shopAddressUpdate.errors.length === 0)
|
||||
data.shopDomainUpdate.errors.length === 0 &&
|
||||
data.shopSettingsUpdate.errors.length === 0 &&
|
||||
data.shopAddressUpdate.errors.length === 0
|
||||
) {
|
||||
notify({
|
||||
text: intl.formatMessage(commonMessages.savedChanges)
|
||||
|
@ -89,21 +86,12 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
|
|||
>
|
||||
{(updateShopSettings, updateShopSettingsOpts) => {
|
||||
const errors = [
|
||||
...maybe(
|
||||
() =>
|
||||
updateShopSettingsOpts.data.shopDomainUpdate.errors,
|
||||
[]
|
||||
),
|
||||
...maybe(
|
||||
() =>
|
||||
updateShopSettingsOpts.data.shopSettingsUpdate.errors,
|
||||
[]
|
||||
),
|
||||
...maybe(
|
||||
() =>
|
||||
updateShopSettingsOpts.data.shopAddressUpdate.errors,
|
||||
[]
|
||||
)
|
||||
...(updateShopSettingsOpts.data?.shopDomainUpdate
|
||||
.errors || []),
|
||||
...(updateShopSettingsOpts.data?.shopSettingsUpdate
|
||||
.errors || []),
|
||||
...(updateShopSettingsOpts.data?.shopAddressUpdate
|
||||
.errors || [])
|
||||
];
|
||||
const loading =
|
||||
siteSettings.loading ||
|
||||
|
@ -165,7 +153,7 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
|
|||
<SiteSettingsPage
|
||||
disabled={loading}
|
||||
errors={errors}
|
||||
shop={maybe(() => siteSettings.data.shop)}
|
||||
shop={siteSettings.data?.shop}
|
||||
onBack={() => navigate(configurationMenuUrl)}
|
||||
onKeyAdd={() =>
|
||||
navigate(
|
||||
|
@ -183,12 +171,10 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
|
|||
saveButtonBarState={updateShopSettingsOpts.status}
|
||||
/>
|
||||
<SiteSettingsKeyDialog
|
||||
errors={maybe(
|
||||
() =>
|
||||
addAuthorizationKeyOpts.data.authorizationKeyAdd
|
||||
.errors,
|
||||
[]
|
||||
)}
|
||||
errors={
|
||||
addAuthorizationKeyOpts.data?.authorizationKeyAdd
|
||||
.errors || []
|
||||
}
|
||||
initial={{
|
||||
key: "",
|
||||
password: "",
|
||||
|
|
37
src/utils/errors/shop.ts
Normal file
37
src/utils/errors/shop.ts
Normal file
|
@ -0,0 +1,37 @@
|
|||
import { IntlShape, defineMessages } from "react-intl";
|
||||
|
||||
import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
|
||||
import { ShopErrorCode } from "@saleor/types/globalTypes";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import commonErrorMessages from "./common";
|
||||
|
||||
const messages = defineMessages({
|
||||
alreadyExists: {
|
||||
defaultMessage: "Authorization key with this type already exists",
|
||||
description: "add authorization key error"
|
||||
}
|
||||
});
|
||||
|
||||
function getShopErrorMessage(
|
||||
err: Omit<ShopErrorFragment, "__typename"> | undefined,
|
||||
intl: IntlShape
|
||||
): string {
|
||||
if (err) {
|
||||
switch (err.code) {
|
||||
case ShopErrorCode.ALREADY_EXISTS:
|
||||
return intl.formatMessage(messages.alreadyExists);
|
||||
case ShopErrorCode.GRAPHQL_ERROR:
|
||||
return intl.formatMessage(commonErrorMessages.graphqlError);
|
||||
case ShopErrorCode.REQUIRED:
|
||||
return intl.formatMessage(commonMessages.requiredField);
|
||||
case ShopErrorCode.INVALID:
|
||||
return intl.formatMessage(commonErrorMessages.invalid);
|
||||
default:
|
||||
return intl.formatMessage(commonErrorMessages.unknownError);
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export default getShopErrorMessage;
|
Loading…
Reference in a new issue