diff --git a/src/customers/types.ts b/src/customers/types.ts index fa3a76f4e..a0398abbb 100644 --- a/src/customers/types.ts +++ b/src/customers/types.ts @@ -4,8 +4,8 @@ export interface AddressTypeInput { companyName?: string; country: string; countryArea?: string; - firstName: string; - lastName: string; + firstName?: string; + lastName?: string; phone: string; postalCode: string; streetAddress1: string; diff --git a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx index 7b156068f..f668ac630 100644 --- a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx +++ b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx @@ -11,6 +11,7 @@ import Grid from "@saleor/components/Grid"; import Hr from "@saleor/components/Hr"; import PageHeader from "@saleor/components/PageHeader"; 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"; @@ -56,6 +57,22 @@ export interface SiteSettingsPageProps { onSubmit: (data: SiteSettingsPageFormData) => void; } +export function areAddressInputFieldsModified( + data: SiteSettingsPageAddressFormData +): boolean { + return ([ + "city", + "country", + "countryArea", + "phone", + "postalCode", + "streetAddress1", + "streetAddress2" + ] as Array) + .map(key => data[key]) + .some(field => field !== ""); +} + const useStyles = makeStyles( theme => ({ hr: { @@ -85,6 +102,11 @@ const SiteSettingsPage: React.FC = props => { maybe(() => shop.companyAddress.country.code, "") ); + const { + errors: validationErrors, + submit: handleSubmitWithAddress + } = useAddressValidation(onSubmit); + const initialFormAddress: SiteSettingsPageAddressFormData = { city: maybe(() => shop.companyAddress.city, ""), companyName: maybe(() => shop.companyAddress.companyName, ""), @@ -107,12 +129,18 @@ const SiteSettingsPage: React.FC = props => { return (
{ + const submitFunc = areAddressInputFieldsModified(data) + ? handleSubmitWithAddress + : onSubmit; + submitFunc(data); + }} confirmLeave > {({ change, data, errors: formErrors, hasChanged, submit }) => { + const siteFormErrors = { ...formErrors }; const countryChoices = mapCountriesToChoices( maybe(() => shop.countries, []) ); @@ -141,7 +169,7 @@ const SiteSettingsPage: React.FC = props => { @@ -159,7 +187,7 @@ const SiteSettingsPage: React.FC = props => { @@ -180,7 +208,7 @@ const SiteSettingsPage: React.FC = props => { data={data} displayCountry={displayCountry} countries={countryChoices} - errors={formErrors} + errors={siteFormErrors} disabled={disabled} onChange={change} onCountryChange={handleCountryChange} diff --git a/src/siteSettings/views/index.tsx b/src/siteSettings/views/index.tsx index 09a2c5694..d92e9613d 100644 --- a/src/siteSettings/views/index.tsx +++ b/src/siteSettings/views/index.tsx @@ -13,7 +13,7 @@ import SiteSettingsKeyDialog, { SiteSettingsKeyDialogForm } from "../components/SiteSettingsKeyDialog"; import SiteSettingsPage, { - SiteSettingsPageAddressFormData, + areAddressInputFieldsModified, SiteSettingsPageFormData } from "../components/SiteSettingsPage"; import { @@ -76,6 +76,7 @@ export const SiteSettings: React.FC = ({ params }) => { }); } }; + return ( {siteSettings => ( @@ -124,32 +125,20 @@ export const SiteSettings: React.FC = ({ params }) => { const handleUpdateShopSettings = ( data: SiteSettingsPageFormData ) => { - const areAddressInputFieldsModified = ([ - "city", - "companyName", - "country", - "countryArea", - "phone", - "postalCode", - "streetAddress1", - "streetAddress2" - ] as Array) - .map(key => data[key]) - .some(field => field !== ""); - const addressInput = areAddressInputFieldsModified + const addressInput = areAddressInputFieldsModified(data) ? { city: data.city, companyName: data.companyName, - country: maybe(() => - findInEnum(data.country, CountryCode) - ), + country: findInEnum(data.country, CountryCode), countryArea: data.countryArea, phone: data.phone, postalCode: data.postalCode, streetAddress1: data.streetAddress1, streetAddress2: data.streetAddress2 } - : null; + : { + companyName: data.companyName + }; updateShopSettings({ variables: { addressInput,