From f2330bd662924c1883fa7174280f334ecadab286 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 6 Nov 2019 14:26:59 +0100 Subject: [PATCH 1/7] Do not submit address if not given --- src/customers/views/CustomerCreate.tsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/customers/views/CustomerCreate.tsx b/src/customers/views/CustomerCreate.tsx index 7713ad076..e53886b9a 100644 --- a/src/customers/views/CustomerCreate.tsx +++ b/src/customers/views/CustomerCreate.tsx @@ -8,6 +8,7 @@ import { maybe, transformFormToAddress } from "../../misc"; import CustomerCreatePage from "../components/CustomerCreatePage"; import { TypedCreateCustomerMutation } from "../mutations"; import { TypedCustomerCreateDataQuery } from "../queries"; +import { AddressTypeInput } from "../types"; import { CreateCustomer } from "../types/CreateCustomer"; import { customerListUrl, customerUrl } from "../urls"; @@ -57,6 +58,21 @@ export const CustomerCreate: React.StatelessComponent<{}> = () => { } onBack={() => navigate(customerListUrl())} onSubmit={formData => { + const areAddressInputFieldsModified = ([ + "city", + "companyName", + "country", + "countryArea", + "firstName", + "lastName", + "phone", + "postalCode", + "streetAddress1", + "streetAddress2" + ] as Array) + .map(key => formData[key]) + .some(field => field !== ""); + const address = { city: formData.city, cityArea: formData.cityArea, @@ -73,8 +89,12 @@ export const CustomerCreate: React.StatelessComponent<{}> = () => { createCustomer({ variables: { input: { - defaultBillingAddress: transformFormToAddress(address), - defaultShippingAddress: transformFormToAddress(address), + defaultBillingAddress: areAddressInputFieldsModified + ? transformFormToAddress(address) + : null, + defaultShippingAddress: areAddressInputFieldsModified + ? transformFormToAddress(address) + : null, email: formData.email, firstName: formData.customerFirstName, lastName: formData.customerLastName, From 41085f63254d31e79279f469bd7ab167d847ac88 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 6 Nov 2019 15:00:00 +0100 Subject: [PATCH 2/7] Fix draft order delete dialog --- .../OrderDraftCancelDialog/OrderDraftCancelDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx index a4cbe1e7d..12a2cb9ef 100644 --- a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx +++ b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx @@ -34,7 +34,7 @@ const OrderDraftCancelDialog: React.StatelessComponent< {orderNumber} }} /> From a1c73a66541cfbd1fd8fa1e0db1232600cc44cf2 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 6 Nov 2019 15:02:13 +0100 Subject: [PATCH 3/7] Improve message --- .../OrderDraftCancelDialog/OrderDraftCancelDialog.tsx | 4 ++-- .../TranslationsCategoriesPage/TranslationsCategoriesPage.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx index 12a2cb9ef..ac3e52056 100644 --- a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx +++ b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx @@ -32,9 +32,9 @@ const OrderDraftCancelDialog: React.StatelessComponent< > {orderNumber} + orderNumber: {orderNumber} }} /> diff --git a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx index db944aa30..708b192b9 100644 --- a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx +++ b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx @@ -51,7 +51,7 @@ const TranslationsCategoriesPage: React.StatelessComponent< title={intl.formatMessage( { defaultMessage: - 'Translation Category "{categoryNane}" - {languageCode}' + 'Translation Category "{categoryName}" - {languageCode}' }, { categoryName: maybe(() => category.name, "..."), From 47ae46ab4cbfcf132a7e59ef83eaf9774d3065d8 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 6 Nov 2019 16:21:58 +0100 Subject: [PATCH 4/7] Fix address validation --- .../CustomerAddressDialog.tsx | 25 ++++++++-- src/customers/views/CustomerAddresses.tsx | 4 +- src/hooks/useAddressValidation.ts | 46 +++++++++++++++++++ .../OrderAddressEditDialog.tsx | 20 ++++++-- src/orders/views/OrderDetails/index.tsx | 4 +- 5 files changed, 85 insertions(+), 14 deletions(-) create mode 100644 src/hooks/useAddressValidation.ts diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx index b77002e71..3b7a77679 100644 --- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx +++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx @@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; - import React from "react"; import { FormattedMessage } from "react-intl"; @@ -13,10 +12,13 @@ import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; +import useAddressValidation from "@saleor/hooks/useAddressValidation"; +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 { AddressTypeInput } from "../../types"; import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses"; @@ -32,7 +34,7 @@ export interface CustomerAddressDialogProps { open: boolean; variant: "create" | "edit"; onClose: () => void; - onConfirm: (data: AddressTypeInput) => void; + onConfirm: (data: AddressInput) => void; } const styles = createStyles({ @@ -56,6 +58,15 @@ const CustomerAddressDialog = withStyles(styles, {})( const [countryDisplayName, setCountryDisplayName] = useStateFromProps( maybe(() => address.country.country, "") ); + const { + errors: validationErrors, + submit: handleSubmit + } = useAddressValidation(onConfirm); + const dialogErrors = useModalDialogErrors( + [...errors, ...validationErrors], + open + ); + const initialForm: AddressTypeInput = { city: maybe(() => address.city, ""), cityArea: maybe(() => address.cityArea, ""), @@ -87,8 +98,12 @@ const CustomerAddressDialog = withStyles(styles, {})( fullWidth maxWidth="sm" > -
- {({ change, data, errors }) => { + + {({ change, data, errors: formErrors }) => { const handleCountrySelect = createSingleAutocompleteSelectHandler( change, setCountryDisplayName, @@ -115,7 +130,7 @@ const CustomerAddressDialog = withStyles(styles, {})( countries={countryChoices} data={data} countryDisplayValue={countryDisplayName} - errors={errors} + errors={formErrors} onChange={change} onCountryChange={handleCountrySelect} /> diff --git a/src/customers/views/CustomerAddresses.tsx b/src/customers/views/CustomerAddresses.tsx index d8b483c92..827e17beb 100644 --- a/src/customers/views/CustomerAddresses.tsx +++ b/src/customers/views/CustomerAddresses.tsx @@ -176,7 +176,7 @@ const CustomerAddresses: React.FC = ({ createCustomerAddress({ variables: { id, - input: transformFormToAddress(input) + input } }) } @@ -202,7 +202,7 @@ const CustomerAddresses: React.FC = ({ updateCustomerAddress({ variables: { id: params.id, - input: transformFormToAddress(input) + input } }) } diff --git a/src/hooks/useAddressValidation.ts b/src/hooks/useAddressValidation.ts new file mode 100644 index 000000000..9bd1e401d --- /dev/null +++ b/src/hooks/useAddressValidation.ts @@ -0,0 +1,46 @@ +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 { add, remove } from "@saleor/utils/lists"; + +interface UseAddressValidation { + errors: UserError[]; + submit: (data: AddressTypeInput) => void; +} + +function useAddressValidation( + onSubmit: (address: AddressInput) => void +): UseAddressValidation { + const intl = useIntl(); + const [validationErrors, setValidationErrors] = useState([]); + + const countryRequiredError = { + field: "country", + message: intl.formatMessage(commonMessages.requiredField) + }; + + return { + errors: validationErrors, + submit: (data: AddressTypeInput) => { + try { + setValidationErrors( + remove( + countryRequiredError, + validationErrors, + (a, b) => a.field === b.field + ) + ); + onSubmit(transformFormToAddress(data)); + } catch { + setValidationErrors(add(countryRequiredError, validationErrors)); + } + } + }; +} + +export default useAddressValidation; diff --git a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx index ba084169f..56b031f97 100644 --- a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx +++ b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx @@ -12,12 +12,15 @@ import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; +import { AddressTypeInput } from "@saleor/customers/types"; +import useAddressValidation from "@saleor/hooks/useAddressValidation"; +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 { AddressTypeInput } from "../../../customers/types"; -import { UserError } from "../../../types"; const styles = createStyles({ overflow: { @@ -36,7 +39,7 @@ interface OrderAddressEditDialogProps extends WithStyles { label: string; }>; onClose(); - onConfirm(data: AddressTypeInput); + onConfirm(data: AddressInput); } const OrderAddressEditDialog = withStyles(styles, { @@ -59,6 +62,15 @@ const OrderAddressEditDialog = withStyles(styles, { () => countries.find(country => address.country === country.code).label ) ); + const { + errors: validationErrors, + submit: handleSubmit + } = useAddressValidation(onConfirm); + const dialogErrors = useModalDialogErrors( + [...errors, ...validationErrors], + open + ); + const countryChoices = countries.map(country => ({ label: country.label, value: country.code @@ -70,7 +82,7 @@ const OrderAddressEditDialog = withStyles(styles, { open={open} classes={{ paper: classes.overflow }} > - + {({ change, data, errors, submit }) => { const handleCountrySelect = createSingleAutocompleteSelectHandler( change, diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 051368fb9..975770497 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -607,9 +607,7 @@ export const OrderDetails: React.StatelessComponent = ({ orderUpdate.mutate({ id, input: { - shippingAddress: transformFormToAddress( - shippingAddress - ) + shippingAddress } }) } From 65d31081afb1f60b3f7c44238bfdf683ab7b5d36 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 6 Nov 2019 16:23:36 +0100 Subject: [PATCH 5/7] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 583a58e75..6db48b00b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -53,3 +53,4 @@ All notable, unreleased changes to this project will be documented in this file. - Add mailing configuration - #222 by @dominik-zeglen - Fix minor bugs - #230 by @dominik-zeglen - Fix permission handling - #231 by @dominik-zeglen +- Fix minor bugs - #244 by @dominik-zeglen From f600c3f1407ca27b249f7d8e77523e5808ece4e5 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 6 Nov 2019 16:25:03 +0100 Subject: [PATCH 6/7] Fix types --- src/customers/views/CustomerAddresses.tsx | 2 +- src/orders/views/OrderDetails/index.tsx | 11 ++--------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/customers/views/CustomerAddresses.tsx b/src/customers/views/CustomerAddresses.tsx index 827e17beb..da7c30019 100644 --- a/src/customers/views/CustomerAddresses.tsx +++ b/src/customers/views/CustomerAddresses.tsx @@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe, transformFormToAddress } from "../../misc"; +import { getMutationState, maybe } from "../../misc"; import CustomerAddressDialog from "../components/CustomerAddressDialog"; import CustomerAddressListPage from "../components/CustomerAddressListPage"; import { diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 975770497..02ef30e34 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -6,12 +6,7 @@ import useUser from "@saleor/hooks/useUser"; import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config"; import SearchCustomers from "../../../containers/SearchCustomers"; import { customerUrl } from "../../../customers/urls"; -import { - getMutationState, - maybe, - transformAddressToForm, - transformFormToAddress -} from "../../../misc"; +import { getMutationState, maybe, transformAddressToForm } from "../../../misc"; import { productUrl } from "../../../products/urls"; import { OrderStatus } from "../../../types/globalTypes"; import OrderAddressEditDialog from "../../components/OrderAddressEditDialog"; @@ -640,9 +635,7 @@ export const OrderDetails: React.StatelessComponent = ({ orderUpdate.mutate({ id, input: { - billingAddress: transformFormToAddress( - billingAddress - ) + billingAddress } }) } From 819963e59ba3880d213becfcd8906a296a56abf5 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 7 Nov 2019 14:09:06 +0100 Subject: [PATCH 7/7] Update changelog --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6db48b00b..7cbb01cd3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ All notable, unreleased changes to this project will be documented in this file. ## [Unreleased] -.. +- Fix minor bugs - #244 by @dominik-zeglen ## 2.0.0 @@ -53,4 +53,3 @@ All notable, unreleased changes to this project will be documented in this file. - Add mailing configuration - #222 by @dominik-zeglen - Fix minor bugs - #230 by @dominik-zeglen - Fix permission handling - #231 by @dominik-zeglen -- Fix minor bugs - #244 by @dominik-zeglen