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,6 +48,7 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, submit }) => (
+        <>
           <Container>
             <AppHeader onBack={onBack}>
               {intl.formatMessage(sectionNames.configuration)}
@@ -54,13 +59,7 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
                 description: "header"
               })}
             />
-          <Grid>
+            <Grid variant="inverted">
-            <div>
-              <CountryList
-                countries={maybe(() => shop.countries)}
-                onRowClick={onRowClick}
-              />
-            </div>
               <div>
                 <TaxConfiguration
                   data={data}
@@ -69,8 +68,21 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
                   onTaxFetch={onTaxFetch}
                 />
               </div>
+              <div>
+                <CountryList
+                  countries={maybe(() => shop.countries)}
+                  onRowClick={onRowClick}
+                />
+              </div>
             </Grid>
           </Container>
+          <SaveButtonBar
+            disabled={disabled}
+            state={saveButtonBarState}
+            onCancel={onBack}
+            onSave={submit}
+          />
+        </>
       )}
     </Form>
   );

src/taxes/views/CountryList.tsx

@@ -1,23 +1,57 @@
 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 }) => {
+                const updateTaxSettingsTransitionState = getMutationState(
+                  updateTaxSettingsOpts.called,
+                  updateTaxSettingsOpts.loading,
+                  maybe(
+                    () => updateTaxSettingsOpts.data.shopSettingsUpdate.errors
+                  )
+                );
+
+                return (
                   <CountryListPage
                     disabled={
                       loading ||
@@ -30,7 +64,8 @@ export const CountryList: React.FC = () => {
                       updateTaxSettings({
                         variables: {
                           input: {
-                          chargeTaxesOnShipping: formData.chargeTaxesOnShipping,
+                            chargeTaxesOnShipping:
+                              formData.chargeTaxesOnShipping,
                             displayGrossPrices: formData.showGross,
                             includeTaxesInPrices: formData.includeTax
                           }
@@ -38,6 +73,7 @@ export const CountryList: React.FC = () => {
                       })
                     }
                     onTaxFetch={fetchTaxes}
+                    saveButtonBarState={updateTaxSettingsTransitionState}
                     shop={maybe(() => ({
                       ...data.shop,
                       countries: data.shop.countries.filter(
@@ -45,7 +81,8 @@ export const CountryList: React.FC = () => {
                       )
                     }))}
                   />
-              )}
+                );
+              }}
             </TypedCountryListQuery>
           )}
         </TypedFetchTaxes>