Refactor translations in site settings section (#129)

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-08-26T17:58:55.558Z\n"
+"POT-Creation-Date: 2019-08-26T21:32:40.783Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -83,6 +83,14 @@ msgctxt "button"
 msgid "Add Menu"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsKeyDialog/SiteSettingsKeyDialog.json
+#. [src.siteSettings.components.SiteSettingsKeyDialog.1238948746] - dialog header
+#. defaultMessage is:
+#. Add New Authorization Key
+msgctxt "dialog header"
+msgid "Add New Authorization Key"
+msgstr ""
+
 #: build/locale/src/pages/components/PageDetailsPage/PageDetailsPage.json
 #. [src.pages.components.PageDetailsPage.755314116] - page header
 #. defaultMessage is:
@@ -163,6 +171,14 @@ msgctxt "button"
 msgid "Add attribute"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsKeyDialog/SiteSettingsKeyDialog.json
+#. [src.siteSettings.components.SiteSettingsKeyDialog.50561933] - button
+#. defaultMessage is:
+#. Add authentication
+msgctxt "button"
+msgid "Add authentication"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryListPage/CategoryListPage.json
 #. [src.categories.components.CategoryListPage.228151782] - button
 #. defaultMessage is:
@@ -203,6 +219,14 @@ msgctxt "button"
 msgid "Add customer"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.json
+#. [src.siteSettings.components.SiteSettingsKeys.1114030884] - button
+#. defaultMessage is:
+#. Add key
+msgctxt "button"
+msgid "Add key"
+msgstr ""
+
 #: build/locale/src/navigation/components/MenuItems/MenuItems.json
 #. [menuItemsAddItem] - add new menu item
 #. defaultMessage is:
@@ -403,6 +427,22 @@ msgctxt "header"
 msgid "Address Information"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.1363074570]
+#. defaultMessage is:
+#. Address line 1
+msgctxt "description"
+msgid "Address line 1"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.3121963259]
+#. defaultMessage is:
+#. Address line 2
+msgctxt "description"
+msgid "Address line 2"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerAddress/CustomerAddress.json
 #. [src.customers.components.CustomerAddress.1320082647] - addres card header
 #. defaultMessage is:
@@ -1103,6 +1143,38 @@ msgctxt "deleted multiple attributes"
 msgid "Attributes successfully delete"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.json
+#. [src.siteSettings.components.SiteSettingsKeys.226491688] - section header
+#. defaultMessage is:
+#. Authentication Keys
+msgctxt "section header"
+msgid "Authentication Keys"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.json
+#. [src.siteSettings.components.SiteSettingsKeys.1270286507] - authentication provider name
+#. defaultMessage is:
+#. Authentication Type
+msgctxt "authentication provider name"
+msgid "Authentication Type"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.2824577864]
+#. defaultMessage is:
+#. Authentication keys
+msgctxt "description"
+msgid "Authentication keys"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsKeyDialog/SiteSettingsKeyDialog.json
+#. [src.siteSettings.components.SiteSettingsKeyDialog.3039841202] - authentication provider name
+#. defaultMessage is:
+#. Authentication type
+msgctxt "authentication provider name"
+msgid "Authentication type"
+msgstr ""
+
 #: build/locale/src/collections/components/CollectionList/CollectionList.json
 #. [src.collections.components.CollectionList.3326160357] - collection availability
 #. defaultMessage is:
@@ -1391,6 +1463,14 @@ msgctxt "button"
 msgid "Choose photos"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.253031977]
+#. defaultMessage is:
+#. City
+msgctxt "description"
+msgid "City"
+msgstr ""
+
 #: build/locale/src/discounts/components/VoucherList/VoucherList.json
 #. [src.discounts.components.VoucherList.78726751] - voucher code
 #. defaultMessage is:
@@ -1443,6 +1523,22 @@ msgctxt "number of collections"
 msgid "Collections ({quantity})"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.3570415321]
+#. defaultMessage is:
+#. Company
+msgctxt "description"
+msgid "Company"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.json
+#. [src.siteSettings.components.SiteSettingsPage.3817101936]
+#. defaultMessage is:
+#. Company information
+msgctxt "description"
+msgid "Company information"
+msgstr ""
+
 #: build/locale/src/products/components/ProductOrganization/ProductOrganization.json
 #. [src.products.components.ProductOrganization.2754779425] - product is configurable
 #. defaultMessage is:
@@ -1523,6 +1619,14 @@ msgctxt "description"
 msgid "Could not create order line"
 msgstr ""
 
+#: build/locale/src/siteSettings/views/index.json
+#. [src.siteSettings.views.2276194921]
+#. defaultMessage is:
+#. Could not delete authorization key: {errorMessage}
+msgctxt "description"
+msgid "Could not delete authorization key: {errorMessage}"
+msgstr ""
+
 #: build/locale/src/orders/views/OrderDetails/OrderDetailsMessages.json
 #. [src.orders.views.OrderDetails.2205960666]
 #. defaultMessage is:
@@ -1615,6 +1719,22 @@ msgctxt "country selection"
 msgid "Countries A to Z"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.1139500589]
+#. defaultMessage is:
+#. Country
+msgctxt "description"
+msgid "Country"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.944851093]
+#. defaultMessage is:
+#. Country area
+msgctxt "description"
+msgid "Country area"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributePage/AttributePage.json
 #. [src.attributes.components.AttributePage.2855501559] - page title
 #. defaultMessage is:
@@ -2847,6 +2967,18 @@ msgctxt "description"
 msgid "Items successfully fulfilled"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsKeyDialog/SiteSettingsKeyDialog.json
+#. [src.siteSettings.components.SiteSettingsKeyDialog.2446088470] - authentication provider API key
+#. defaultMessage is:
+#. Key
+#: build/locale/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.json
+#. [src.siteSettings.components.SiteSettingsKeys.2446088470] - authentication provider API key
+#. defaultMessage is:
+#. Key
+msgctxt "authentication provider API key"
+msgid "Key"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderListFilter/OrderListFilter.json
 #. [src.orders.components.OrderListFilter.714411029]
 #. defaultMessage is:
@@ -3191,6 +3323,22 @@ msgctxt "shipping zone"
 msgid "Name"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.json
+#. [src.siteSettings.components.SiteSettingsDetails.2286355060]
+#. defaultMessage is:
+#. Name of your store
+msgctxt "description"
+msgid "Name of your store"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.json
+#. [src.siteSettings.components.SiteSettingsDetails.1008586926]
+#. defaultMessage is:
+#. Name of your store is shown on tab in web browser
+msgctxt "description"
+msgid "Name of your store is shown on tab in web browser"
+msgstr ""
+
 #: build/locale/src/intl.json
 #. [src.navigation] - navigation section name
 #. defaultMessage is:
@@ -3299,6 +3447,14 @@ msgctxt "description"
 msgid "No draft orders found"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.json
+#. [src.siteSettings.components.SiteSettingsKeys.3981699144] - no authentication provider API keys
+#. defaultMessage is:
+#. No keys
+msgctxt "no authentication provider API keys"
+msgid "No keys"
+msgstr ""
+
 #: build/locale/src/navigation/components/MenuList/MenuList.json
 #. [menuListNoMenus]
 #. defaultMessage is:
@@ -3851,6 +4007,14 @@ msgctxt "order fulfillment status"
 msgid "Partially Fulfilled"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsKeyDialog/SiteSettingsKeyDialog.json
+#. [src.siteSettings.components.SiteSettingsKeyDialog.2237029987]
+#. defaultMessage is:
+#. Password
+msgctxt "description"
+msgid "Password"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderList/OrderList.json
 #. [src.orders.components.OrderList.2743232155] - payment status
 #. defaultMessage is:
@@ -3939,6 +4103,14 @@ msgctxt "voucher discount type"
 msgid "Percentage"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.1271289966]
+#. defaultMessage is:
+#. Phone
+msgctxt "description"
+msgid "Phone"
+msgstr ""
+
 #: build/locale/src/products/components/ProductImagePage/ProductImagePage.json
 #. [src.products.components.ProductImagePage.3822382625] - section header
 #. defaultMessage is:
@@ -5091,6 +5263,30 @@ msgctxt "description"
 msgid "Stock quantity"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.json
+#. [src.siteSettings.components.SiteSettingsDetails.1987367127]
+#. defaultMessage is:
+#. Store Description
+msgctxt "description"
+msgid "Store Description"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.json
+#. [src.siteSettings.components.SiteSettingsDetails.529433178]
+#. defaultMessage is:
+#. Store description is shown on taskbar after your store name
+msgctxt "description"
+msgid "Store description is shown on taskbar after your store name"
+msgstr ""
+
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.1150975268] - section header
+#. defaultMessage is:
+#. Store information
+msgctxt "section header"
+msgid "Store information"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
 #. [src.attributes.components.AttributeProperties.1877630205] - attribute properties regarding storefront
 #. defaultMessage is:
@@ -5527,6 +5723,14 @@ msgctxt "description"
 msgid "URL"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.json
+#. [src.siteSettings.components.SiteSettingsDetails.3808773492]
+#. defaultMessage is:
+#. URL of your online store
+msgctxt "description"
+msgid "URL of your online store"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionDetails.json
 #. [src.collections.views.870815507] - unassign product from collection, button
 #. defaultMessage is:
@@ -6091,6 +6295,14 @@ msgctxt "order weight range"
 msgid "Weight range"
 msgstr ""
 
+#: build/locale/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.json
+#. [src.siteSettings.components.SiteSettingsAddress.2965971965]
+#. defaultMessage is:
+#. ZIP / Postal code
+msgctxt "description"
+msgid "ZIP / Postal code"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderPayment/OrderPayment.json
 #. [orderPaymentVATDoesNotApply] - vat not included in order price
 #. defaultMessage is:

src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx

@@ -3,6 +3,7 @@ import CardContent from "@material-ui/core/CardContent";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
@@ -12,7 +13,6 @@ import SingleAutocompleteSelectField, {
 } from "@saleor/components/SingleAutocompleteSelectField";
 import { AddressTypeInput } from "@saleor/customers/types";
 import { ChangeEvent } from "@saleor/hooks/useForm";
-import i18n from "@saleor/i18n";
 import { FormErrors } from "@saleor/types";
 import { SiteSettingsPageFormData } from "../SiteSettingsPage";
 
@@ -42,11 +42,15 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
     errors,
     onChange,
     onCountryChange
-  }: SiteSettingsAddressProps) => (
+  }: SiteSettingsAddressProps) => {
+    const intl = useIntl();
+
+    return (
       <Card className={classes.root}>
         <CardTitle
-        title={i18n.t("Store information", {
+          title={intl.formatMessage({
-          context: "store configuration"
+            defaultMessage: "Store information",
+            description: "section header"
           })}
         />
         <CardContent>
@@ -54,7 +58,9 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
             disabled={disabled}
             error={!!errors.companyName}
             helperText={errors.companyName}
-          label={i18n.t("Company")}
+            label={intl.formatMessage({
+              defaultMessage: "Company"
+            })}
             name={"companyName" as keyof SiteSettingsPageFormData}
             onChange={onChange}
             value={data.companyName}
@@ -65,7 +71,9 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
             disabled={disabled}
             error={!!errors.streetAddress1}
             helperText={errors.streetAddress1}
-          label={i18n.t("Address line 1")}
+            label={intl.formatMessage({
+              defaultMessage: "Address line 1"
+            })}
             name={"streetAddress1" as keyof SiteSettingsPageFormData}
             onChange={onChange}
             value={data.streetAddress1}
@@ -76,7 +84,9 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
             disabled={disabled}
             error={!!errors.streetAddress2}
             helperText={errors.streetAddress2}
-          label={i18n.t("Address line 2")}
+            label={intl.formatMessage({
+              defaultMessage: "Address line 2"
+            })}
             name={"streetAddress2" as keyof SiteSettingsPageFormData}
             onChange={onChange}
             value={data.streetAddress2}
@@ -88,7 +98,9 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
               disabled={disabled}
               error={!!errors.city}
               helperText={errors.city}
-            label={i18n.t("City")}
+              label={intl.formatMessage({
+                defaultMessage: "City"
+              })}
               name={"city" as keyof SiteSettingsPageFormData}
               onChange={onChange}
               value={data.city}
@@ -98,7 +110,9 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
               disabled={disabled}
               error={!!errors.postalCode}
               helperText={errors.postalCode}
-            label={i18n.t("ZIP / Postal code")}
+              label={intl.formatMessage({
+                defaultMessage: "ZIP / Postal code"
+              })}
               name={"postalCode" as keyof SiteSettingsPageFormData}
               onChange={onChange}
               value={data.postalCode}
@@ -112,7 +126,9 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
               displayValue={displayCountry}
               error={!!errors.country}
               helperText={errors.country}
-            label={i18n.t("Country")}
+              label={intl.formatMessage({
+                defaultMessage: "Country"
+              })}
               name={"country" as keyof SiteSettingsPageFormData}
               onChange={onCountryChange}
               value={data.country}
@@ -125,7 +141,9 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
               disabled={disabled}
               error={!!errors.countryArea}
               helperText={errors.countryArea}
-            label={i18n.t("Country area")}
+              label={intl.formatMessage({
+                defaultMessage: "Country area"
+              })}
               name={"countryArea" as keyof SiteSettingsPageFormData}
               onChange={onChange}
               value={data.countryArea}
@@ -138,14 +156,17 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })(
             error={!!errors.phone}
             fullWidth
             helperText={errors.phone}
-          label={i18n.t("Phone")}
+            label={intl.formatMessage({
+              defaultMessage: "Phone"
+            })}
             name={"phone" as keyof SiteSettingsPageFormData}
             value={data.phone}
             onChange={onChange}
           />
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 SiteSettingsAddress.displayName = "SiteSettingsAddress";
 export default SiteSettingsAddress;

src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.tsx

@@ -2,10 +2,11 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
-import i18n from "../../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { SiteSettingsPageFormData } from "../SiteSettingsPage";
 
 interface SiteSettingsDetailsProps {
@@ -21,12 +22,13 @@ interface SiteSettingsDetailsProps {
 
 const SiteSettingsDetails: React.StatelessComponent<
   SiteSettingsDetailsProps
-> = ({ data, disabled, errors, onChange }) => (
+> = ({ data, disabled, errors, onChange }) => {
+  const intl = useIntl();
+
+  return (
     <Card>
       <CardTitle
-      title={i18n.t("General Information", {
+        title={intl.formatMessage(commonMessages.generalInformations)}
-        context: "store configuration"
-      })}
       />
       <CardContent>
         <TextField
@@ -34,10 +36,15 @@ const SiteSettingsDetails: React.StatelessComponent<
           error={!!errors.name}
           fullWidth
           name="name"
-        label={i18n.t("Name of your store")}
+          label={intl.formatMessage({
+            defaultMessage: "Name of your store"
+          })}
           helperText={
             errors.name ||
-          i18n.t("Name of your store is shown on tab in web browser")
+            intl.formatMessage({
+              defaultMessage:
+                "Name of your store is shown on tab in web browser"
+            })
           }
           value={data.name}
           onChange={onChange}
@@ -48,7 +55,9 @@ const SiteSettingsDetails: React.StatelessComponent<
           error={!!errors.domain}
           fullWidth
           name="domain"
-        label={i18n.t("URL of your online store")}
+          label={intl.formatMessage({
+            defaultMessage: "URL of your online store"
+          })}
           helperText={errors.domain}
           value={data.domain}
           onChange={onChange}
@@ -59,17 +68,15 @@ const SiteSettingsDetails: React.StatelessComponent<
           error={!!errors.domain}
           fullWidth
           name="description"
-        label={i18n.t("Store Description", {
+          label={intl.formatMessage({
-          context: "field label"
+            defaultMessage: "Store Description"
           })}
           helperText={
             errors.description ||
-          i18n.t(
+            intl.formatMessage({
-            "Store description is shown on taskbar after your store name",
+              defaultMessage:
-            {
+                "Store description is shown on taskbar after your store name"
-              context: "help text"
+            })
-            }
-          )
           }
           value={data.description}
           onChange={onChange}
@@ -77,5 +84,6 @@ const SiteSettingsDetails: React.StatelessComponent<
       </CardContent>
     </Card>
   );
+};
 SiteSettingsDetails.displayName = "SiteSettingsDetails";
 export default SiteSettingsDetails;

src/siteSettings/components/SiteSettingsKeyDialog/SiteSettingsKeyDialog.tsx

@@ -5,11 +5,12 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import Form, { FormProps } from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import SingleSelectField from "@saleor/components/SingleSelectField";
-import i18n from "../../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import { translatedAuthorizationKeyTypes } from "../../../misc";
 import { AuthorizationKeyType } from "../../../types/globalTypes";
 
@@ -31,16 +32,19 @@ export interface SiteSettingsKeyDialogProps
 const SiteSettingsKeyDialog: React.StatelessComponent<
   SiteSettingsKeyDialogProps
 > = ({ errors, initial, open, onClose, onSubmit }) => {
+  const intl = useIntl();
   const keyTypes = translatedAuthorizationKeyTypes();
+
   return (
     <Dialog onClose={onClose} maxWidth="xs" open={open}>
       <Form initial={initial} onSubmit={onSubmit} errors={errors}>
         {({ change, data, errors }) => (
           <>
             <DialogTitle>
-              {i18n.t("Add New Authorization Key", {
+              <FormattedMessage
-                context: "modal title"
+                defaultMessage="Add New Authorization Key"
-              })}
+                description="dialog header"
+              />
             </DialogTitle>
             <DialogContent>
               <SingleSelectField
@@ -49,8 +53,9 @@ const SiteSettingsKeyDialog: React.StatelessComponent<
                   value: key
                 }))}
                 error={!!errors.keyType}
-                label={i18n.t("Authentication type", {
+                label={intl.formatMessage({
-                  context: "input label"
+                  defaultMessage: "Authentication type",
+                  description: "authentication provider name"
                 })}
                 hint={errors.keyType}
                 name="type"
@@ -61,8 +66,9 @@ const SiteSettingsKeyDialog: React.StatelessComponent<
               <TextField
                 error={!!errors.key}
                 fullWidth
-                label={i18n.t("Key", {
+                label={intl.formatMessage({
-                  context: "input label"
+                  defaultMessage: "Key",
+                  description: "authentication provider API key"
                 })}
                 helperText={errors.key}
                 name="key"
@@ -73,8 +79,8 @@ const SiteSettingsKeyDialog: React.StatelessComponent<
               <TextField
                 error={!!errors.password}
                 fullWidth
-                label={i18n.t("Password", {
+                label={intl.formatMessage({
-                  context: "input label"
+                  defaultMessage: "Password"
                 })}
                 helperText={errors.password}
                 name="password"
@@ -84,12 +90,13 @@ const SiteSettingsKeyDialog: React.StatelessComponent<
             </DialogContent>
             <DialogActions>
               <Button onClick={onClose}>
-                {i18n.t("Cancel", { context: "button" })}
+                <FormattedMessage {...buttonMessages.cancel} />
               </Button>
               <Button color="primary" type="submit" variant="contained">
-                {i18n.t("Add authentication", {
+                <FormattedMessage
-                  context: "button"
+                  defaultMessage="Add authentication"
-                })}
+                  description="button"
+                />
               </Button>
             </DialogActions>
           </>

src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx

@@ -14,10 +14,10 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import DeleteIcon from "@material-ui/icons/Delete";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
 import {
   maybe,
   renderCollection,
@@ -46,12 +46,16 @@ interface SiteSettingsKeysProps extends WithStyles<typeof styles> {
 
 const SiteSettingsKeys = withStyles(styles, { name: "SiteSettingsKeys" })(
   ({ classes, disabled, keys, onAdd, onRemove }: SiteSettingsKeysProps) => {
+    const intl = useIntl();
+
     const keyTypes = translatedAuthorizationKeyTypes();
+
     return (
       <Card>
         <CardTitle
-          title={i18n.t("Authentication Keys", {
+          title={intl.formatMessage({
-            context: "card title"
+            defaultMessage: "Authentication Keys",
+            description: "section header"
           })}
           toolbar={
             <Button
@@ -60,9 +64,7 @@ const SiteSettingsKeys = withStyles(styles, { name: "SiteSettingsKeys" })(
               variant="text"
               onClick={onAdd}
             >
-              {i18n.t("Add key", {
+              <FormattedMessage defaultMessage="Add key" description="button" />
-                context: "button"
-              })}
             </Button>
           }
         />
@@ -70,10 +72,16 @@ const SiteSettingsKeys = withStyles(styles, { name: "SiteSettingsKeys" })(
           <TableHead>
             <TableRow>
               <TableCell>
-                {i18n.t("Authentication Type", { context: "table header" })}
+                <FormattedMessage
+                  defaultMessage="Authentication Type"
+                  description="authentication provider name"
+                />
               </TableCell>
               <TableCell>
-                {i18n.t("Key", { context: "table header" })}
+                <FormattedMessage
+                  defaultMessage="Key"
+                  description="authentication provider API key"
+                />
               </TableCell>
               <TableCell />
             </TableRow>
@@ -104,7 +112,12 @@ const SiteSettingsKeys = withStyles(styles, { name: "SiteSettingsKeys" })(
               ),
               () => (
                 <TableRow>
-                  <TableCell colSpan={3}>{i18n.t("No keys")}</TableCell>
+                  <TableCell colSpan={3}>
+                    <FormattedMessage
+                      defaultMessage="No keys"
+                      description="no authentication provider API keys"
+                    />
+                  </TableCell>
                 </TableRow>
               )
             )}

src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx

@@ -1,5 +1,6 @@
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -9,10 +10,10 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
+import { commonMessages, sectionNames } from "@saleor/intl";
 import { UserError } from "@saleor/types";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { mapCountriesToChoices } from "@saleor/utils/maps";
-import i18n from "../../../i18n";
 import { maybe } from "../../../misc";
 import { AuthorizationKeyType } from "../../../types/globalTypes";
 import { SiteSettings_shop } from "../../types/SiteSettings";
@@ -59,6 +60,7 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
   onKeyRemove,
   onSubmit
 }) => {
+  const intl = useIntl();
   const [displayCountry, setDisplayCountry] = useStateFromProps(
     maybe(() => shop.companyAddress.country.code, "")
   );
@@ -96,14 +98,16 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
 
         return (
           <Container>
-            <AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.configuration)}
+            </AppHeader>
             <PageHeader
-              title={i18n.t("General Information", {
+              title={intl.formatMessage(commonMessages.generalInformations)}
-                context: "page header"
-              })}
             />
             <Grid variant="inverted">
-              <Typography variant="h6">{i18n.t("Site Settings")}</Typography>
+              <Typography variant="h6">
+                {intl.formatMessage(sectionNames.siteSettings)}
+              </Typography>
               <SiteSettingsDetails
                 data={data}
                 errors={formErrors}
@@ -111,7 +115,7 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
                 onChange={change}
               />
               <Typography variant="h6">
-                {i18n.t("Company information")}
+                <FormattedMessage defaultMessage="Company information" />
               </Typography>
               <SiteSettingsAddress
                 data={data}
@@ -123,7 +127,7 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
                 onCountryChange={handleCountryChange}
               />
               <Typography variant="h6">
-                {i18n.t("Authentication keys")}
+                <FormattedMessage defaultMessage="Authentication keys" />
               </Typography>
               <SiteSettingsKeys
                 disabled={disabled}

src/siteSettings/views/index.tsx

@@ -3,8 +3,10 @@ import React from "react";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { commonMessages, sectionNames } from "@saleor/intl";
+import { useIntl } from "react-intl";
+
 import { configurationMenuUrl } from "../../configuration";
-import i18n from "../../i18n";
 import { getMutationState, maybe } from "../../misc";
 import { AuthorizationKeyType } from "../../types/globalTypes";
 import SiteSettingsKeyDialog, {
@@ -33,13 +35,12 @@ export const SiteSettings: React.StatelessComponent<SiteSettingsProps> = ({
 }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   const handleAddKeySuccess = (data: AuthorizationKeyAdd) => {
     if (!maybe(() => data.authorizationKeyAdd.errors.length)) {
       notify({
-        text: i18n.t("Authorization key added", {
+        text: intl.formatMessage(commonMessages.savedChanges)
-          context: "notification"
-        })
       });
       navigate(siteSettingsUrl());
     }
@@ -47,16 +48,18 @@ export const SiteSettings: React.StatelessComponent<SiteSettingsProps> = ({
   const handleDeleteKeySuccess = (data: AuthorizationKeyDelete) => {
     if (!maybe(() => data.authorizationKeyDelete.errors.length)) {
       notify({
-        text: i18n.t("Authorization key deleted", {
+        text: intl.formatMessage(commonMessages.savedChanges)
-          context: "notification"
-        })
       });
     } else {
       notify({
-        text: i18n.t("Could not delete authorization key: {{ message }}", {
+        text: intl.formatMessage(
-          context: "notification",
+          {
-          message: data.authorizationKeyDelete.errors[0].message
+            defaultMessage: "Could not delete authorization key: {errorMessage}"
-        })
+          },
+          {
+            errorMessage: data.authorizationKeyDelete.errors[0].message
+          }
+        )
       });
     }
   };
@@ -70,9 +73,7 @@ export const SiteSettings: React.StatelessComponent<SiteSettingsProps> = ({
         data.shopAddressUpdate.errors.length === 0)
     ) {
       notify({
-        text: i18n.t("Site settings updated", {
+        text: intl.formatMessage(commonMessages.savedChanges)
-          context: "notification"
-        })
       });
     }
   };
@@ -166,7 +167,9 @@ export const SiteSettings: React.StatelessComponent<SiteSettingsProps> = ({
 
                     return (
                       <>
-                        <WindowTitle title={i18n.t("Site settings")} />
+                        <WindowTitle
+                          title={intl.formatMessage(sectionNames.siteSettings)}
+                        />
                         <SiteSettingsPage
                           disabled={loading}
                           errors={errors}