diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx index 64dbd9504..701083526 100644 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ b/src/components/SaveButtonBar/SaveButtonBar.tsx @@ -46,6 +46,7 @@ const styles = (theme: Theme) => background: theme.palette.background.default, borderTop: "1px solid transparent", boxShadow: `0 -5px 5px 0 ${theme.overrides.MuiCard.root.borderColor}`, + height: "100%", transition: `box-shadow ${theme.transitions.duration.shortest}ms` }, spacer: { diff --git a/src/taxes/components/CountryListPage/CountryListPage.tsx b/src/taxes/components/CountryListPage/CountryListPage.tsx index 9986e5229..332114a4c 100644 --- a/src/taxes/components/CountryListPage/CountryListPage.tsx +++ b/src/taxes/components/CountryListPage/CountryListPage.tsx @@ -2,10 +2,12 @@ import React from "react"; import { useIntl } from "react-intl"; import AppHeader from "@saleor/components/AppHeader"; +import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { Container } from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; +import SaveButtonBar from "@saleor/components/SaveButtonBar"; import { sectionNames } from "@saleor/intl"; import { maybe } from "../../../misc"; import { CountryList_shop } from "../../types/CountryList"; @@ -19,6 +21,7 @@ export interface FormData { } export interface CountryListPageProps { disabled: boolean; + saveButtonBarState: ConfirmButtonTransitionState; shop: CountryList_shop; onBack: () => void; onRowClick: (code: string) => void; @@ -28,6 +31,7 @@ export interface CountryListPageProps { const CountryListPage: React.FC = ({ disabled, + saveButtonBarState, shop, onBack, onRowClick, @@ -44,33 +48,41 @@ const CountryListPage: React.FC = ({ return (
{({ change, data, submit }) => ( - - - {intl.formatMessage(sectionNames.configuration)} - - + + + {intl.formatMessage(sectionNames.configuration)} + + + +
+ change(event, submit)} + onTaxFetch={onTaxFetch} + /> +
+
+ shop.countries)} + onRowClick={onRowClick} + /> +
+
+
+ - -
- shop.countries)} - onRowClick={onRowClick} - /> -
-
- change(event, submit)} - onTaxFetch={onTaxFetch} - /> -
-
-
+ )}
); diff --git a/src/taxes/views/CountryList.tsx b/src/taxes/views/CountryList.tsx index 26a20a956..6868ff187 100644 --- a/src/taxes/views/CountryList.tsx +++ b/src/taxes/views/CountryList.tsx @@ -1,51 +1,88 @@ import React from "react"; +import { useIntl } from "react-intl"; import useNavigator from "@saleor/hooks/useNavigator"; +import useNotifier from "@saleor/hooks/useNotifier"; +import { commonMessages } from "@saleor/intl"; import { configurationMenuUrl } from "../../configuration"; -import { maybe } from "../../misc"; +import { getMutationState, maybe } from "../../misc"; import CountryListPage from "../components/CountryListPage"; import { TypedFetchTaxes, TypedUpdateTaxSettings } from "../mutations"; import { TypedCountryListQuery } from "../queries"; +import { FetchTaxes } from "../types/FetchTaxes"; +import { UpdateTaxSettings } from "../types/UpdateTaxSettings"; import { countryTaxRatesUrl } from "../urls"; export const CountryList: React.FC = () => { + const intl = useIntl(); const navigate = useNavigator(); + const notify = useNotifier(); + + const handleUpdateTaxSettings = (data: UpdateTaxSettings) => { + if (data.shopSettingsUpdate.errors.length === 0) { + notify({ + text: intl.formatMessage(commonMessages.savedChanges) + }); + } + }; + + const handleFetchTaxes = (data: FetchTaxes) => { + if (data.shopFetchTaxRates.errors.length === 0) { + notify({ + text: intl.formatMessage({ + defaultMessage: "Successfully fetched tax rates" + }) + }); + } + }; return ( - + {(updateTaxSettings, updateTaxSettingsOpts) => ( - + {(fetchTaxes, fetchTaxesOpts) => ( - {({ data, loading }) => ( - navigate(configurationMenuUrl)} - onRowClick={code => navigate(countryTaxRatesUrl(code))} - onSubmit={formData => - updateTaxSettings({ - variables: { - input: { - chargeTaxesOnShipping: formData.chargeTaxesOnShipping, - displayGrossPrices: formData.showGross, - includeTaxesInPrices: formData.includeTax + {({ data, loading }) => { + const updateTaxSettingsTransitionState = getMutationState( + updateTaxSettingsOpts.called, + updateTaxSettingsOpts.loading, + maybe( + () => updateTaxSettingsOpts.data.shopSettingsUpdate.errors + ) + ); + + return ( + navigate(configurationMenuUrl)} + onRowClick={code => navigate(countryTaxRatesUrl(code))} + onSubmit={formData => + updateTaxSettings({ + variables: { + input: { + chargeTaxesOnShipping: + formData.chargeTaxesOnShipping, + displayGrossPrices: formData.showGross, + includeTaxesInPrices: formData.includeTax + } } - } - }) - } - onTaxFetch={fetchTaxes} - shop={maybe(() => ({ - ...data.shop, - countries: data.shop.countries.filter( - country => country.vat - ) - }))} - /> - )} + }) + } + onTaxFetch={fetchTaxes} + saveButtonBarState={updateTaxSettingsTransitionState} + shop={maybe(() => ({ + ...data.shop, + countries: data.shop.countries.filter( + country => country.vat + ) + }))} + /> + ); + }} )}