Fix tax settings update

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

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<CountryListPageProps> = ({
   disabled,
+  saveButtonBarState,
   shop,
   onBack,
   onRowClick,
@@ -44,33 +48,41 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, submit }) => (
-        <Container>
+        <>
-          <AppHeader onBack={onBack}>
+          <Container>
-            {intl.formatMessage(sectionNames.configuration)}
+            <AppHeader onBack={onBack}>
-          </AppHeader>
+              {intl.formatMessage(sectionNames.configuration)}
-          <PageHeader
+            </AppHeader>
-            title={intl.formatMessage({
+            <PageHeader
-              defaultMessage: "Taxes",
+              title={intl.formatMessage({
-              description: "header"
+                defaultMessage: "Taxes",
-            })}
+                description: "header"
+              })}
+            />
+            <Grid variant="inverted">
+              <div>
+                <TaxConfiguration
+                  data={data}
+                  disabled={disabled}
+                  onChange={event => change(event, submit)}
+                  onTaxFetch={onTaxFetch}
+                />
+              </div>
+              <div>
+                <CountryList
+                  countries={maybe(() => shop.countries)}
+                  onRowClick={onRowClick}
+                />
+              </div>
+            </Grid>
+          </Container>
+          <SaveButtonBar
+            disabled={disabled}
+            state={saveButtonBarState}
+            onCancel={onBack}
+            onSave={submit}
           />
-          <Grid>
+        </>
-            <div>
-              <CountryList
-                countries={maybe(() => shop.countries)}
-                onRowClick={onRowClick}
-              />
-            </div>
-            <div>
-              <TaxConfiguration
-                data={data}
-                disabled={disabled}
-                onChange={event => change(event, submit)}
-                onTaxFetch={onTaxFetch}
-              />
-            </div>
-          </Grid>
-        </Container>
       )}
     </Form>
   );

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 (
-    <TypedUpdateTaxSettings>
+    <TypedUpdateTaxSettings onCompleted={handleUpdateTaxSettings}>
       {(updateTaxSettings, updateTaxSettingsOpts) => (
-        <TypedFetchTaxes>
+        <TypedFetchTaxes onCompleted={handleFetchTaxes}>
           {(fetchTaxes, fetchTaxesOpts) => (
             <TypedCountryListQuery displayLoader={true}>
-              {({ data, loading }) => (
+              {({ data, loading }) => {
-                <CountryListPage
+                const updateTaxSettingsTransitionState = getMutationState(
-                  disabled={
+                  updateTaxSettingsOpts.called,
-                    loading ||
+                  updateTaxSettingsOpts.loading,
-                    fetchTaxesOpts.loading ||
+                  maybe(
-                    updateTaxSettingsOpts.loading
+                    () => updateTaxSettingsOpts.data.shopSettingsUpdate.errors
-                  }
+                  )
-                  onBack={() => navigate(configurationMenuUrl)}
+                );
-                  onRowClick={code => navigate(countryTaxRatesUrl(code))}
+
-                  onSubmit={formData =>
+                return (
-                    updateTaxSettings({
+                  <CountryListPage
-                      variables: {
+                    disabled={
-                        input: {
+                      loading ||
-                          chargeTaxesOnShipping: formData.chargeTaxesOnShipping,
+                      fetchTaxesOpts.loading ||
-                          displayGrossPrices: formData.showGross,
+                      updateTaxSettingsOpts.loading
-                          includeTaxesInPrices: formData.includeTax
+                    }
+                    onBack={() => navigate(configurationMenuUrl)}
+                    onRowClick={code => navigate(countryTaxRatesUrl(code))}
+                    onSubmit={formData =>
+                      updateTaxSettings({
+                        variables: {
+                          input: {
+                            chargeTaxesOnShipping:
+                              formData.chargeTaxesOnShipping,
+                            displayGrossPrices: formData.showGross,
+                            includeTaxesInPrices: formData.includeTax
+                          }
                         }
-                      }
+                      })
-                    })
+                    }
-                  }
+                    onTaxFetch={fetchTaxes}
-                  onTaxFetch={fetchTaxes}
+                    saveButtonBarState={updateTaxSettingsTransitionState}
-                  shop={maybe(() => ({
+                    shop={maybe(() => ({
-                    ...data.shop,
+                      ...data.shop,
-                    countries: data.shop.countries.filter(
+                      countries: data.shop.countries.filter(
-                      country => country.vat
+                        country => country.vat
-                    )
+                      )
-                  }))}
+                    }))}
-                />
+                  />
-              )}
+                );
+              }}
             </TypedCountryListQuery>
           )}
         </TypedFetchTaxes>