djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix tax settings update

Browse source
This commit is contained in:
dominik-zeglen 2019-11-06 14:11:10 +01:00
parent 45a56bb175
commit 62131d58fc
3 changed files with 107 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

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

64
src/taxes/components/CountryListPage/CountryListPage.tsx
View file

@ -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}>
{intl.formatMessage(sectionNames.configuration)}
</AppHeader>
<PageHeader
title={intl.formatMessage({
defaultMessage: "Taxes",
description: "header"
})}
<>
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.configuration)}
</AppHeader>
<PageHeader
title={intl.formatMessage({
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>
);

99
src/taxes/views/CountryList.tsx
View file

@ -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 }) => (
<CountryListPage
disabled={
loading ||
fetchTaxesOpts.loading ||
updateTaxSettingsOpts.loading
}
onBack={() => 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 (
<CountryListPage
disabled={
loading ||
fetchTaxesOpts.loading ||
updateTaxSettingsOpts.loading
}
onBack={() => 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
)
}))}
/>
);
}}
</TypedCountryListQuery>
)}
</TypedFetchTaxes>