Refactor translations in taxes section (#130)

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-08-26T21:41:35.304Z\n"
+"POT-Creation-Date: 2019-08-26T21:45:05.243Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -523,6 +523,14 @@ msgctxt "section header"
 msgid "All Subcategories"
 msgstr ""
 
+#: build/locale/src/taxes/components/TaxConfiguration/TaxConfiguration.json
+#. [src.taxes.components.TaxConfiguration.142803418]
+#. defaultMessage is:
+#. All products prices are entered with tax included
+msgctxt "description"
+msgid "All products prices are entered with tax included"
+msgstr ""
+
 #: build/locale/src/products/components/ProductStock/ProductStock.json
 #. [src.products.components.ProductStock.1680952454] - allocated product stock
 #. defaultMessage is:
@@ -1419,6 +1427,10 @@ msgstr ""
 #. [src.products.components.ProductOrganization.1755013298]
 #. defaultMessage is:
 #. Category
+#: build/locale/src/taxes/components/CountryTaxesPage/CountryTaxesPage.json
+#. [src.taxes.components.CountryTaxesPage.1755013298]
+#. defaultMessage is:
+#. Category
 msgctxt "description"
 msgid "Category"
 msgstr ""
@@ -1495,6 +1507,14 @@ msgctxt "description"
 msgid "Charge taxes for this item"
 msgstr ""
 
+#: build/locale/src/taxes/components/TaxConfiguration/TaxConfiguration.json
+#. [src.taxes.components.TaxConfiguration.2654711891]
+#. defaultMessage is:
+#. Charge taxes on shipping rates
+msgctxt "description"
+msgid "Charge taxes on shipping rates"
+msgstr ""
+
 #: build/locale/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.json
 #. [src.shipping.components.ShippingZoneCountriesAssignDialog.2404264158]
 #. defaultMessage is:
@@ -1783,6 +1803,22 @@ msgctxt "description"
 msgid "Country"
 msgstr ""
 
+#: build/locale/src/taxes/components/CountryList/CountryList.json
+#. [src.taxes.components.CountryList.4039455144]
+#. defaultMessage is:
+#. Country Code
+msgctxt "description"
+msgid "Country Code"
+msgstr ""
+
+#: build/locale/src/taxes/components/CountryList/CountryList.json
+#. [src.taxes.components.CountryList.577035076]
+#. defaultMessage is:
+#. Country Name
+msgctxt "description"
+msgid "Country Name"
+msgstr ""
+
 #: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
 #. [src.siteSettings.components.SiteSettingsAddress.944851093]
 #. defaultMessage is:
@@ -2771,6 +2807,14 @@ msgctxt "switch button"
 msgid "Feature on Homepage"
 msgstr ""
 
+#: build/locale/src/taxes/components/TaxConfiguration/TaxConfiguration.json
+#. [src.taxes.components.TaxConfiguration.3375540052] - button
+#. defaultMessage is:
+#. Fetch taxes
+msgctxt "button"
+msgid "Fetch taxes"
+msgstr ""
+
 #: build/locale/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.json
 #. [src.discounts.components.DiscountCountrySelectDialog.2566713432] - search box label
 #. defaultMessage is:
@@ -3551,6 +3595,14 @@ msgctxt "description"
 msgid "No collections found"
 msgstr ""
 
+#: build/locale/src/taxes/components/CountryList/CountryList.json
+#. [src.taxes.components.CountryList.110033143]
+#. defaultMessage is:
+#. No countries found
+msgctxt "description"
+msgid "No countries found"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerList/CustomerList.json
 #. [src.customers.components.CustomerList.2239722559]
 #. defaultMessage is:
@@ -3671,6 +3723,14 @@ msgctxt "description"
 msgid "No products out of stock"
 msgstr ""
 
+#: build/locale/src/taxes/components/CountryTaxesPage/CountryTaxesPage.json
+#. [src.taxes.components.CountryTaxesPage.3066312070]
+#. defaultMessage is:
+#. No reduced tax categories found
+msgctxt "description"
+msgid "No reduced tax categories found"
+msgstr ""
+
 #: build/locale/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.json
 #. [src.productTypes.components.AssignAttributeDialog.4205644805]
 #. defaultMessage is:
@@ -4763,6 +4823,14 @@ msgctxt "section header"
 msgid "Recent orders"
 msgstr ""
 
+#: build/locale/src/taxes/components/CountryList/CountryList.json
+#. [src.taxes.components.CountryList.3154586635]
+#. defaultMessage is:
+#. Reduced Tax Rates
+msgctxt "description"
+msgid "Reduced Tax Rates"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderPayment/OrderPayment.json
 #. [src.orders.components.OrderPayment.2845258362] - button
 #. defaultMessage is:
@@ -5243,6 +5311,14 @@ msgctxt "button"
 msgid "Show"
 msgstr ""
 
+#: build/locale/src/taxes/components/TaxConfiguration/TaxConfiguration.json
+#. [src.taxes.components.TaxConfiguration.2102582640]
+#. defaultMessage is:
+#. Show gross prices to customers in the storefront
+msgctxt "description"
+msgid "Show gross prices to customers in the storefront"
+msgstr ""
+
 #: build/locale/src/products/components/ProductOrganization/ProductOrganization.json
 #. [src.products.components.ProductOrganization.150865454] - product is not configurable
 #. defaultMessage is:
@@ -5543,6 +5619,22 @@ msgctxt "tax rate for a product type"
 msgid "Tax"
 msgstr ""
 
+#: build/locale/src/taxes/components/CountryTaxesPage/CountryTaxesPage.json
+#. [src.taxes.components.CountryTaxesPage.2022558114]
+#. defaultMessage is:
+#. Tax Rate
+msgctxt "description"
+msgid "Tax Rate"
+msgstr ""
+
+#: build/locale/src/taxes/components/CountryTaxesPage/CountryTaxesPage.json
+#. [src.taxes.components.CountryTaxesPage.2737618795] - header
+#. defaultMessage is:
+#. Tax Rates in {countryName}
+msgctxt "header"
+msgid "Tax Rates in {countryName}"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.taxes] - taxes section name
 #. defaultMessage is:
@@ -5571,6 +5663,14 @@ msgctxt "section header"
 msgid "Taxes"
 msgstr ""
 
+#: build/locale/src/taxes/components/CountryListPage/CountryListPage.json
+#. [src.taxes.components.CountryListPage.3955023266] - header
+#. defaultMessage is:
+#. Taxes
+msgctxt "header"
+msgid "Taxes"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.json
 #. [src.orders.components.OrderDraftDetailsSummary.3202709354]
 #. defaultMessage is:

src/taxes/components/CountryList/CountryList.tsx

@@ -7,9 +7,9 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
 import { maybe, renderCollection } from "../../../misc";
 import { CountryList_shop_countries } from "../../types/CountryList";
 
@@ -34,13 +34,13 @@ const CountryList = withStyles(styles, { name: "CountryList" })(
         <TableHead>
           <TableRow>
             <TableCell>
-              {i18n.t("Country Code", { context: "object" })}
+              <FormattedMessage defaultMessage="Country Code" />
             </TableCell>
             <TableCell>
-              {i18n.t("Country Name", { context: "object" })}
+              <FormattedMessage defaultMessage="Country Name" />
             </TableCell>
             <TableCell className={classes.textRight}>
-              {i18n.t("Reduced Tax Rates", { context: "object" })}
+              <FormattedMessage defaultMessage="Reduced Tax Rates" />
             </TableCell>
           </TableRow>
         </TableHead>
@@ -73,7 +73,7 @@ const CountryList = withStyles(styles, { name: "CountryList" })(
             () => (
               <TableRow>
                 <TableCell colSpan={3}>
-                  {i18n.t("No countries found")}
+                  <FormattedMessage defaultMessage="No countries found" />
                 </TableCell>
               </TableRow>
             )

src/taxes/components/CountryListPage/CountryListPage.tsx

@@ -1,11 +1,12 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 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 i18n from "../../../i18n";
+import { sectionNames } from "@saleor/intl";
 import { maybe } from "../../../misc";
 import { CountryList_shop } from "../../types/CountryList";
 import CountryList from "../CountryList";
@@ -33,6 +34,8 @@ const CountryListPage: React.StatelessComponent<CountryListPageProps> = ({
   onSubmit,
   onTaxFetch
 }) => {
+  const intl = useIntl();
+
   const initialForm: FormData = {
     chargeTaxesOnShipping: maybe(() => shop.chargeTaxesOnShipping, false),
     includeTax: maybe(() => shop.includeTaxesInPrices, false),
@@ -42,8 +45,15 @@ const CountryListPage: React.StatelessComponent<CountryListPageProps> = ({
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, submit }) => (
         <Container>
-          <AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
+          <AppHeader onBack={onBack}>
-          <PageHeader title={i18n.t("Taxes", { context: "page title" })} />
+            {intl.formatMessage(sectionNames.configuration)}
+          </AppHeader>
+          <PageHeader
+            title={intl.formatMessage({
+              defaultMessage: "Taxes",
+              description: "header"
+            })}
+          />
           <Grid>
             <div>
               <CountryList

src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx

@@ -6,13 +6,14 @@ import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import { Container } from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
+import { sectionNames } from "@saleor/intl";
 import { maybe, renderCollection, translatedTaxRates } from "../../../misc";
 import { CountryList_shop_countries_vat_reducedRates } from "../../types/CountryList";
 
@@ -35,17 +36,26 @@ const CountryTaxesPage = withStyles(styles, { name: "CountryTaxesPage" })(
     taxCategories,
     onBack
   }: CountryTaxesPageProps & WithStyles<typeof styles>) => {
+    const intl = useIntl();
+
     const taxRates = translatedTaxRates();
     return (
       <Container>
-        <AppHeader onBack={onBack}>{i18n.t("Taxes")}</AppHeader>
+        <AppHeader onBack={onBack}>
+          {intl.formatMessage(sectionNames.taxes)}
+        </AppHeader>
         <PageHeader
           title={
             countryName
-              ? i18n.t("Tax Rates in {{ countryName }}", {
+              ? intl.formatMessage(
-                  context: "page title",
+                  {
+                    defaultMessage: "Tax Rates in {countryName}",
+                    description: "header"
+                  },
+                  {
                     countryName
-                })
+                  }
+                )
               : undefined
           }
         />
@@ -56,10 +66,10 @@ const CountryTaxesPage = withStyles(styles, { name: "CountryTaxesPage" })(
                 <TableHead>
                   <TableRow>
                     <TableCell className={classes.wideColumn}>
-                      {i18n.t("Category", { context: "object" })}
+                      <FormattedMessage defaultMessage="Category" />
                     </TableCell>
                     <TableCell>
-                      {i18n.t("Tax Rate", { context: "object" })}
+                      <FormattedMessage defaultMessage="Tax Rate" />
                     </TableCell>
                   </TableRow>
                 </TableHead>
@@ -87,7 +97,7 @@ const CountryTaxesPage = withStyles(styles, { name: "CountryTaxesPage" })(
                     () => (
                       <TableRow>
                         <TableCell colSpan={2}>
-                          {i18n.t("No reduced tax categories found")}
+                          <FormattedMessage defaultMessage="No reduced tax categories found" />
                         </TableCell>
                       </TableRow>
                     )

src/taxes/components/TaxConfiguration/TaxConfiguration.tsx

@@ -4,12 +4,13 @@ import CardActions from "@material-ui/core/CardActions";
 import CardContent from "@material-ui/core/CardContent";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledSwitch from "@saleor/components/ControlledSwitch";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
-import i18n from "../../../i18n";
+import { sectionNames } from "@saleor/intl";
 import { FormData } from "../CountryListPage";
 
 interface TaxConfigurationProps {
@@ -34,28 +35,38 @@ export const TaxConfiguration = withStyles(styles, {
     disabled,
     onChange,
     onTaxFetch
-  }: TaxConfigurationProps & WithStyles<typeof styles>) => (
+  }: TaxConfigurationProps & WithStyles<typeof styles>) => {
+    const intl = useIntl();
+
+    return (
       <Card>
-      <CardTitle title={i18n.t("Configuration")} />
+        <CardTitle title={intl.formatMessage(sectionNames.configuration)} />
         <CardContent className={classes.content}>
           <ControlledSwitch
             disabled={disabled}
             name={"includeTax" as keyof FormData}
-          label={i18n.t("All products prices are entered with tax included")}
+            label={intl.formatMessage({
+              defaultMessage:
+                "All products prices are entered with tax included"
+            })}
             onChange={onChange}
             checked={data.includeTax}
           />
           <ControlledSwitch
             disabled={disabled}
             name={"showGross" as keyof FormData}
-          label={i18n.t("Show gross prices to customers in the storefront")}
+            label={intl.formatMessage({
+              defaultMessage: "Show gross prices to customers in the storefront"
+            })}
             onChange={onChange}
             checked={data.showGross}
           />
           <ControlledSwitch
             disabled={disabled}
             name={"chargeTaxesOnShipping" as keyof FormData}
-          label={i18n.t("Charge taxes on shipping rates")}
+            label={intl.formatMessage({
+              defaultMessage: "Charge taxes on shipping rates"
+            })}
             onChange={onChange}
             checked={data.chargeTaxesOnShipping}
           />
@@ -64,10 +75,14 @@ export const TaxConfiguration = withStyles(styles, {
         <Hr />
         <CardActions>
           <Button disabled={disabled} onClick={onTaxFetch} color="primary">
-          {i18n.t("Fetch taxes")}
+            <FormattedMessage
+              defaultMessage="Fetch taxes"
+              description="button"
+            />
           </Button>
         </CardActions>
       </Card>
-  )
+    );
+  }
 );
 export default TaxConfiguration;

src/taxes/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { Route, RouteComponentProps, Switch } from "react-router-dom";
 
+import { sectionNames } from "@saleor/intl";
 import { WindowTitle } from "../components/WindowTitle";
-import i18n from "../i18n";
 import { countryListPath, countryTaxRatesPath } from "./urls";
 import CountryList from "./views/CountryList";
 import CountryTaxesComponent, {
@@ -13,9 +14,12 @@ const CountryTaxes: React.StatelessComponent<
   RouteComponentProps<CountryTaxesParams>
 > = ({ match }) => <CountryTaxesComponent code={match.params.code} />;
 
-const Component = () => (
+const Component = () => {
+  const intl = useIntl();
+
+  return (
     <>
-    <WindowTitle title={i18n.t("Taxes")} />
+      <WindowTitle title={intl.formatMessage(sectionNames.taxes)} />
       <Switch>
         <Route exact path={countryListPath} component={CountryList} />
         <Route
@@ -26,5 +30,6 @@ const Component = () => (
       </Switch>
     </>
   );
+};
 
 export default Component;