Refactor translations in components (#133)

* Refactor translations in components

* Update pot file

src/components/ActionDialog/ActionDialog.tsx

@@ -11,8 +11,9 @@ import {
 } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import i18n from "../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "../ConfirmButton/ConfirmButton";
@@ -50,13 +51,16 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
     variant,
     onConfirm,
     onClose
-  }: ActionDialogProps) => (
+  }: ActionDialogProps) => {
+    const intl = useIntl();
+
+    return (
       <Dialog onClose={onClose} open={open}>
         <DialogTitle>{title}</DialogTitle>
         <DialogContent>{children}</DialogContent>
         <DialogActions>
           <Button onClick={onClose}>
-          {i18n.t("Cancel", { context: "button" })}
+            <FormattedMessage {...buttonMessages.cancel} />
           </Button>
           <ConfirmButton
             transitionState={confirmButtonState}
@@ -69,12 +73,13 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
           >
             {confirmButtonLabel ||
               (variant === "delete"
-              ? i18n.t("Delete", { context: "button" })
+                ? intl.formatMessage(buttonMessages.delete)
-              : i18n.t("Confirm", { context: "button" }))}
+                : intl.formatMessage(buttonMessages.confirm))}
           </ConfirmButton>
         </DialogActions>
       </Dialog>
-  )
+    );
+  }
 );
 ActionDialog.displayName = "ActionDialog";
 export default ActionDialog;

src/components/AddressEdit/AddressEdit.tsx

@@ -6,9 +6,10 @@ import {
 } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import { AddressTypeInput } from "@saleor/customers/types";
-import i18n from "@saleor/i18n";
+import { commonMessages } from "@saleor/intl";
 import { FormErrors } from "@saleor/types";
 import FormSpacer from "../FormSpacer";
 import SingleAutocompleteSelectField, {
@@ -44,7 +45,10 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
     errors,
     onChange,
     onCountryChange
-  }: AddressEditProps) => (
+  }: AddressEditProps) => {
+    const intl = useIntl();
+
+    return (
       <>
         <div className={classes.root}>
           <div>
@@ -52,7 +56,7 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               disabled={disabled}
               error={!!errors.firstName}
               helperText={errors.firstName}
-            label={i18n.t("First name")}
+              label={intl.formatMessage(commonMessages.firstName)}
               name="firstName"
               onChange={onChange}
               value={data.firstName}
@@ -64,7 +68,7 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               disabled={disabled}
               error={!!errors.lastName}
               helperText={errors.lastName}
-            label={i18n.t("Last name")}
+              label={intl.formatMessage(commonMessages.lastName)}
               name="lastName"
               onChange={onChange}
               value={data.lastName}
@@ -79,7 +83,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               disabled={disabled}
               error={!!errors.companyName}
               helperText={errors.companyName}
-            label={i18n.t("Company")}
+              label={intl.formatMessage({
+                defaultMessage: "Company"
+              })}
               name="companyName"
               onChange={onChange}
               value={data.companyName}
@@ -92,7 +98,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               error={!!errors.phone}
               fullWidth
               helperText={errors.phone}
-            label={i18n.t("Phone")}
+              label={intl.formatMessage({
+                defaultMessage: "Phone"
+              })}
               name="phone"
               value={data.phone}
               onChange={onChange}
@@ -104,7 +112,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
           disabled={disabled}
           error={!!errors.streetAddress1}
           helperText={errors.streetAddress1}
-        label={i18n.t("Address line 1")}
+          label={intl.formatMessage({
+            defaultMessage: "Address line 1"
+          })}
           name="streetAddress1"
           onChange={onChange}
           value={data.streetAddress1}
@@ -115,7 +125,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
           disabled={disabled}
           error={!!errors.streetAddress2}
           helperText={errors.streetAddress2}
-        label={i18n.t("Address line 2")}
+          label={intl.formatMessage({
+            defaultMessage: "Address line 2"
+          })}
           name="streetAddress2"
           onChange={onChange}
           value={data.streetAddress2}
@@ -128,7 +140,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               disabled={disabled}
               error={!!errors.city}
               helperText={errors.city}
-            label={i18n.t("City")}
+              label={intl.formatMessage({
+                defaultMessage: "City"
+              })}
               name="city"
               onChange={onChange}
               value={data.city}
@@ -140,7 +154,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               disabled={disabled}
               error={!!errors.postalCode}
               helperText={errors.postalCode}
-            label={i18n.t("ZIP / Postal code")}
+              label={intl.formatMessage({
+                defaultMessage: "ZIP / Postal code"
+              })}
               name="postalCode"
               onChange={onChange}
               value={data.postalCode}
@@ -157,7 +173,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               displayValue={countryDisplayValue}
               error={!!errors.country}
               helperText={errors.country}
-            label={i18n.t("Country")}
+              label={intl.formatMessage({
+                defaultMessage: "Country"
+              })}
               name="country"
               onChange={onCountryChange}
               value={data.country}
@@ -172,7 +190,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
               disabled={disabled}
               error={!!errors.countryArea}
               helperText={errors.countryArea}
-            label={i18n.t("Country area")}
+              label={intl.formatMessage({
+                defaultMessage: "Country area"
+              })}
               name="countryArea"
               onChange={onChange}
               value={data.countryArea}
@@ -181,7 +201,8 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
           </div>
         </div>
       </>
-  )
+    );
+  }
 );
 AddressEdit.displayName = "AddressEdit";
 export default AddressEdit;

src/components/AppLayout/AppLayout.tsx

@@ -17,6 +17,7 @@ import {
 import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";
+import { FormattedMessage } from "react-intl";
 import { RouteComponentProps, withRouter } from "react-router";
 
 import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
@@ -27,7 +28,6 @@ import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useTheme from "@saleor/hooks/useTheme";
 import useUser from "@saleor/hooks/useUser";
-import i18n from "@saleor/i18n";
 import ArrowDropdown from "@saleor/icons/ArrowDropdown";
 import Container from "../Container";
 import AppActionContext from "./AppActionContext";
@@ -430,9 +430,10 @@ const AppLayout = withStyles(styles, {
                                             className={classes.userMenuItem}
                                             onClick={handleLogout}
                                           >
-                                            {i18n.t("Log out", {
+                                            <FormattedMessage
-                                              context: "button"
+                                              defaultMessage="Log out"
-                                            })}
+                                              description="button"
+                                            />
                                           </MenuItem>
                                         </Menu>
                                       </ClickAwayListener>

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -11,14 +11,15 @@ import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
+import { buttonMessages } from "@saleor/intl";
 import { SearchCategories_categories_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
-import i18n from "../../i18n";
 import Checkbox from "../Checkbox";
 
 export interface FormData {
@@ -85,6 +86,7 @@ const AssignCategoriesDialog = withStyles(styles, {
     onFetch,
     onSubmit
   }: AssignCategoriesDialogProps) => {
+    const intl = useIntl();
     const [query, onQueryChange] = useSearchQuery(onFetch);
     const [selectedCategories, setSelectedCategories] = React.useState<
       SearchCategories_categories_edges_node[]
@@ -100,17 +102,22 @@ const AssignCategoriesDialog = withStyles(styles, {
         fullWidth
         maxWidth="sm"
       >
-        <DialogTitle>{i18n.t("Assign Categories")}</DialogTitle>
+        <DialogTitle>
+          <FormattedMessage
+            defaultMessage="Assign Categories"
+            description="dialog header"
+          />
+        </DialogTitle>
         <DialogContent className={classes.overflow}>
           <TextField
             name="query"
             value={query}
             onChange={onQueryChange}
-            label={i18n.t("Search Categories", {
+            label={intl.formatMessage({
-              context: "category search input label"
+              defaultMessage: "Search Categories"
             })}
-            placeholder={i18n.t("Search by category name, etc...", {
+            placeholder={intl.formatMessage({
-              context: "category search input placeholder"
+              defaultMessage: "Search by category name, etc..."
             })}
             fullWidth
             InputProps={{
@@ -156,7 +163,7 @@ const AssignCategoriesDialog = withStyles(styles, {
         </DialogContent>
         <DialogActions>
           <Button onClick={onClose}>
-            {i18n.t("Cancel", { context: "button" })}
+            <FormattedMessage {...buttonMessages.cancel} />
           </Button>
           <ConfirmButton
             transitionState={confirmButtonState}
@@ -165,7 +172,10 @@ const AssignCategoriesDialog = withStyles(styles, {
             type="submit"
             onClick={handleSubmit}
           >
-            {i18n.t("Assign categories", { context: "button" })}
+            <FormattedMessage
+              defaultMessage="Assign categories"
+              description="button"
+            />
           </ConfirmButton>
         </DialogActions>
       </Dialog>

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -11,9 +11,10 @@ import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import i18n from "@saleor/i18n";
+import { buttonMessages } from "@saleor/intl";
 import { SearchCollections_collections_edges_node } from "../../containers/SearchCollections/types/SearchCollections";
 import Checkbox from "../Checkbox";
 import ConfirmButton, {
@@ -85,6 +86,7 @@ const AssignCollectionDialog = withStyles(styles, {
     onFetch,
     onSubmit
   }: AssignCollectionDialogProps) => {
+    const intl = useIntl();
     const [query, onQueryChange] = useSearchQuery(onFetch);
     const [selectedCollections, setSelectedCollections] = React.useState<
       SearchCollections_collections_edges_node[]
@@ -100,17 +102,22 @@ const AssignCollectionDialog = withStyles(styles, {
         fullWidth
         maxWidth="sm"
       >
-        <DialogTitle>{i18n.t("Assign Collection")}</DialogTitle>
+        <DialogTitle>
+          <FormattedMessage
+            defaultMessage="Assign Collection"
+            description="dialog header"
+          />
+        </DialogTitle>
         <DialogContent className={classes.overflow}>
           <TextField
             name="query"
             value={query}
             onChange={onQueryChange}
-            label={i18n.t("Search Collection", {
+            label={intl.formatMessage({
-              context: "product search input label"
+              defaultMessage: "Search Collection"
             })}
-            placeholder={i18n.t("Search by collection name, etc...", {
+            placeholder={intl.formatMessage({
-              context: "product search input placeholder"
+              defaultMessage: "Search by collection name, etc..."
             })}
             fullWidth
             InputProps={{
@@ -157,7 +164,7 @@ const AssignCollectionDialog = withStyles(styles, {
         </DialogContent>
         <DialogActions>
           <Button onClick={onClose}>
-            {i18n.t("Cancel", { context: "button" })}
+            <FormattedMessage {...buttonMessages.cancel} />
           </Button>
           <ConfirmButton
             transitionState={confirmButtonState}
@@ -166,7 +173,10 @@ const AssignCollectionDialog = withStyles(styles, {
             type="submit"
             onClick={handleSubmit}
           >
-            {i18n.t("Assign collections", { context: "button" })}
+            <FormattedMessage
+              defaultMessage="Assign collections"
+              description="button"
+            />
           </ConfirmButton>
         </DialogActions>
       </Dialog>

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -11,6 +11,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import ConfirmButton, {
   ConfirmButtonTransitionState
@@ -18,7 +19,7 @@ import ConfirmButton, {
 import FormSpacer from "@saleor/components/FormSpacer";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import i18n from "@saleor/i18n";
+import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { SearchProducts_products_edges_node } from "../../containers/SearchProducts/types/SearchProducts";
 import Checkbox from "../Checkbox";
@@ -88,6 +89,7 @@ const AssignProductDialog = withStyles(styles, {
     onFetch,
     onSubmit
   }: AssignProductDialogProps & WithStyles<typeof styles>) => {
+    const intl = useIntl();
     const [query, onQueryChange] = useSearchQuery(onFetch);
     const [selectedProducts, setSelectedProducts] = React.useState<
       SearchProducts_products_edges_node[]
@@ -103,21 +105,24 @@ const AssignProductDialog = withStyles(styles, {
         fullWidth
         maxWidth="sm"
       >
-        <DialogTitle>{i18n.t("Assign Product")}</DialogTitle>
+        <DialogTitle>
+          <FormattedMessage
+            defaultMessage="Assign Product"
+            description="dialog header"
+          />
+        </DialogTitle>
         <DialogContent>
           <TextField
             name="query"
             value={query}
             onChange={onQueryChange}
-            label={i18n.t("Search Products", {
+            label={intl.formatMessage({
-              context: "product search input label"
+              defaultMessage: "Search Products"
+            })}
+            placeholder={intl.formatMessage({
+              defaultMessage:
+                "Search by product name, attribute, product type etc..."
             })}
-            placeholder={i18n.t(
-              "Search by product name, attribute, product type etc...",
-              {
-                context: "product search input placeholder"
-              }
-            )}
             fullWidth
             InputProps={{
               autoComplete: "off",
@@ -168,7 +173,7 @@ const AssignProductDialog = withStyles(styles, {
         </DialogContent>
         <DialogActions>
           <Button onClick={onClose}>
-            {i18n.t("Cancel", { context: "button" })}
+            <FormattedMessage {...buttonMessages.cancel} />
           </Button>
           <ConfirmButton
             transitionState={confirmButtonState}
@@ -177,7 +182,10 @@ const AssignProductDialog = withStyles(styles, {
             type="submit"
             onClick={handleSubmit}
           >
-            {i18n.t("Assign products", { context: "button" })}
+            <FormattedMessage
+              defaultMessage="Assign products"
+              description="button"
+            />
           </ConfirmButton>
         </DialogActions>
       </Dialog>

src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

@@ -11,8 +11,9 @@ import TextField from "@material-ui/core/TextField";
 import ArrowBack from "@material-ui/icons/ArrowBack";
 import Downshift from "downshift";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import {
   getMenuItemByPath,
   IMenu,
@@ -153,7 +154,7 @@ const AutocompleteSelectMenu = withStyles(styles, {
                               }
                             >
                               <ArrowBack className={classes.menuBack} />
-                              {i18n.t("Back")}
+                              <FormattedMessage {...buttonMessages.back} />
                             </MenuItem>
                           )}
                           {(menuPath.length
@@ -176,7 +177,7 @@ const AutocompleteSelectMenu = withStyles(styles, {
                         </>
                       ) : (
                         <MenuItem disabled component="div">
-                          {i18n.t("No results")}
+                          <FormattedMessage defaultMessage="No results" />
                         </MenuItem>
                       )}
                     </Paper>

src/components/ColumnPicker/ColumnPickerButton.tsx

@@ -5,8 +5,7 @@ import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import makeStyles from "@material-ui/styles/makeStyles";
 import classNames from "classnames";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "@saleor/i18n";
 
 interface ColumnPickerButtonProps {
   active: boolean;
@@ -51,9 +50,10 @@ const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
       onClick={onClick}
       variant="outlined"
     >
-      {i18n.t("Columns", {
+      <FormattedMessage
-        context: "select visible columns button"
+        defaultMessage="Columns"
-      })}
+        description="select visible columns button"
+      />
       <ArrowDropDownIcon
         color="primary"
         className={classNames(classes.icon, {

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -6,9 +6,10 @@ import Typography from "@material-ui/core/Typography";
 import makeStyles from "@material-ui/styles/makeStyles";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import useElementScroll from "@saleor/hooks/useElementScroll";
-import i18n from "@saleor/i18n";
+import { buttonMessages } from "@saleor/intl";
 import { isSelected } from "@saleor/utils/lists";
 import ControlledCheckbox from "../ControlledCheckbox";
 import Hr from "../Hr";
@@ -74,14 +75,14 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
     <Card>
       <CardContent>
         <Typography color="textSecondary">
-          {i18n.t(
+          <FormattedMessage
-            "{{ numberOfSelected }} columns selected out of {{ numberOfTotal }}",
+            defaultMessage="{numberOfSelected} columns selected out of {numberOfTotal}"
-            {
+            description="pick columns to display"
-              context: "pick columns to display",
+            values={{
               numberOfSelected: selectedColumns.length,
               numberOfTotal: columns.length
-            }
+            }}
-          )}
+          />
         </Typography>
       </CardContent>
       <Hr />
@@ -109,14 +110,14 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
       >
         <div className={classes.actionBar}>
           <Button color="default" onClick={onReset}>
-            {i18n.t("Reset")}
+            <FormattedMessage defaultMessage="Reset" description="button" />
           </Button>
           <div>
             <Button color="default" onClick={onCancel}>
-              {i18n.t("Cancel")}
+              <FormattedMessage {...buttonMessages.cancel} />
             </Button>
             <Button color="primary" variant="contained" onClick={onSave}>
-              {i18n.t("Save")}
+              <FormattedMessage {...buttonMessages.save} />
             </Button>
           </div>
         </div>

src/components/ConfirmButton/ConfirmButton.tsx

@@ -8,10 +8,10 @@ import {
   WithStyles
 } from "@material-ui/core/styles";
 import CheckIcon from "@material-ui/icons/Check";
+import { buttonMessages } from "@saleor/intl";
 import classNames from "classnames";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "../../i18n";
 
 export type ConfirmButtonTransitionState =
   | "loading"
@@ -170,14 +170,11 @@ const ConfirmButton = withStyles(styles)(
                 displayCompletedActionState
             })}
           >
-            {transitionState === "error" && displayCompletedActionState
+            {transitionState === "error" && displayCompletedActionState ? (
-              ? i18n.t("Error", {
+              <FormattedMessage defaultMessage="Error" description="button" />
-                  context: "button"
+            ) : (
-                })
+              children || <FormattedMessage {...buttonMessages.confirm} />
-              : children ||
+            )}
-                i18n.t("Confirm", {
-                  context: "button"
-                })}
           </span>
         </Button>
       );

src/components/CountryList/CountryList.tsx

@@ -16,10 +16,10 @@ import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import DeleteIcon from "@material-ui/icons/Delete";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../i18n";
 import { maybe, renderCollection } from "../../misc";
 import { CountryFragment } from "../../taxes/types/CountryFragment";
 
@@ -99,7 +99,10 @@ const CountryList = withStyles(styles, {
           title={title}
           toolbar={
             <Button color="primary" onClick={onCountryAssign}>
-              {i18n.t("Assign countries")}
+              <FormattedMessage
+                defaultMessage="Assign countries"
+                description="button"
+              />
             </Button>
           }
         />
@@ -110,10 +113,13 @@ const CountryList = withStyles(styles, {
                 <TableCell
                   className={classNames(classes.wideColumn, classes.toLeft)}
                 >
-                  {i18n.t("{{ number }} Countries", {
+                  <FormattedMessage
-                    context: "number of countries",
+                    defaultMessage="{number} Countries"
+                    description="number of countries"
+                    values={{
                       number: maybe(() => countries.length.toString(), "...")
-                  })}
+                    }}
+                  />
                 </TableCell>
                 <TableCell
                   className={classNames(classes.textRight, classes.iconCell)}

src/components/DeleteFilterTabDialog/DeleteFilterTabDialog.tsx

@@ -1,7 +1,7 @@
 import DialogContentText from "@material-ui/core/DialogContentText";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import i18n from "../../i18n";
 import ActionDialog from "../ActionDialog";
 import { ConfirmButtonTransitionState } from "../ConfirmButton";
 
@@ -19,28 +19,31 @@ const DeleteFilterTabDialog: React.FC<DeleteFilterTabDialogProps> = ({
   onSubmit,
   open,
   tabName
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <ActionDialog
       open={open}
       confirmButtonState={confirmButtonState}
       onClose={onClose}
       onConfirm={onSubmit}
-    title={i18n.t("Delete Search", {
+      title={intl.formatMessage({
-      context: "modal title custom search delete"
+        defaultMessage: "Delete Search",
+        description: "custom search delete, dialog header"
       })}
       variant="delete"
     >
-    <DialogContentText
+      <DialogContentText>
-      dangerouslySetInnerHTML={{
+        <FormattedMessage
-        __html: i18n.t(
+          defaultMessage="Are you sure you want to delete {name} search tab?"
-          "Are you sure you want to delete <strong>{{ name }}</strong> search tab?",
+          values={{
-          {
+            name: <strong>{tabName}</strong>
-            name: tabName
-          }
-        )
           }}
         />
+      </DialogContentText>
     </ActionDialog>
-);
+  );
+};
 DeleteFilterTabDialog.displayName = "DeleteFilterTabDialog";
 export default DeleteFilterTabDialog;

src/components/ErrorMessageCard/ErrorMessageCard.tsx

@@ -2,9 +2,7 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "../../i18n";
-
 interface ErrorMessageCardProps {
   message: string;
 }
@@ -15,7 +13,7 @@ const ErrorMessageCard: React.StatelessComponent<ErrorMessageCardProps> = ({
   <Card>
     <CardContent>
       <Typography variant="h5" component="h2">
-        {i18n.t("Error", { context: "title" })}
+        <FormattedMessage defaultMessage="Error" description="header" />
       </Typography>
       <Typography variant="body2">{message}</Typography>
     </CardContent>

src/components/ErrorPage/ErrorPage.tsx

@@ -8,9 +8,9 @@ import {
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
+import { FormattedMessage } from "react-intl";
 
 import notFoundImage from "@assets/images/what.svg";
-import i18n from "../../i18n";
 
 export interface ErrorPageProps extends WithStyles<typeof styles> {
   onBack: () => void;
@@ -68,14 +68,16 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
         <div className={classes.innerContainer}>
           <div>
             <Typography className={classes.upperHeader} variant="h4">
-              {i18n.t("Ooops!...")}
+              <FormattedMessage defaultMessage="Ooops!..." />
             </Typography>
             <Typography className={classes.bottomHeader} variant="h3">
-              {i18n.t("Error")}
+              <FormattedMessage defaultMessage="Error" />
             </Typography>
-            <Typography>{i18n.t("We've encountered a problem...")}</Typography>
             <Typography>
-              {i18n.t("Don't worry, everything is gonna be fine")}
+              <FormattedMessage defaultMessage="We've encountered a problem..." />
+            </Typography>
+            <Typography>
+              <FormattedMessage defaultMessage="Don't worry, everything is gonna be fine" />
             </Typography>
           </div>
           <div>
@@ -85,7 +87,10 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
               variant="contained"
               onClick={onBack}
             >
-              {i18n.t("Back to home", { context: "button" })}
+              <FormattedMessage
+                defaultMessage="Back to home"
+                description="button"
+              />
             </Button>
           </div>
         </div>

src/components/FileUpload/FileUpload.tsx

@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
-import i18n from "../../i18n";
+import { FormattedMessage } from "react-intl";
 
 const styles = createStyles({
   fileUploadField: {
@@ -42,7 +42,10 @@ const FileUpload = withStyles(styles, { name: "FileUpload" })(
         value={value}
       />
       <Button disabled={disabled} onClick={() => this.upload.click()}>
-        {i18n.t("Upload")}
+        <FormattedMessage
+          defaultMessage="Upload"
+          description="upload file, button"
+        />
       </Button>
     </div>
   )

src/components/Filter/Filter.tsx

@@ -13,9 +13,9 @@ import Typography from "@material-ui/core/Typography";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import { FilterContent } from ".";
-import i18n from "../../i18n";
 import { FilterContentSubmitData } from "./FilterContent";
 import { IFilter } from "./types";
 
@@ -103,7 +103,10 @@ const Filter = withStyles(styles, { name: "Filter" })(
           onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
         >
           <Typography className={classes.addFilterText}>
-            {i18n.t("Add Filter")}
+            <FormattedMessage
+              defaultMessage="Add Filter"
+              description="button"
+            />
           </Typography>
           <ArrowDropDownIcon
             color="primary"

src/components/Filter/FilterContent.tsx

@@ -1,9 +1,9 @@
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { makeStyles } from "@material-ui/styles";
-import i18n from "../../i18n";
 import { getMenuItemByValue, isLeaf, walkToRoot } from "../../utils/menu";
 import FormSpacer from "../FormSpacer";
 import SingleSelectField from "../SingleSelectField";
@@ -45,6 +45,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
   filters,
   onSubmit
 }) => {
+  const intl = useIntl();
   const [menuValue, setMenuValue] = React.useState<string>("");
   const [filterValue, setFilterValue] = React.useState<string | string[]>("");
   const classes = useStyles({});
@@ -72,7 +73,9 @@ const FilterContent: React.FC<FilterContentProps> = ({
           }
         }}
         value={menus ? menus[0].value : menuValue}
-        placeholder={i18n.t("Select Filter...")}
+        placeholder={intl.formatMessage({
+          defaultMessage: "Select Filter..."
+        })}
       />
       {menus &&
         menus.map(
@@ -95,7 +98,9 @@ const FilterContent: React.FC<FilterContentProps> = ({
                       ? menuValue
                       : menus[filterItemIndex - 1].label.toString()
                   }
-                  placeholder={i18n.t("Select Filter...")}
+                  placeholder={intl.formatMessage({
+                    defaultMessage: "Select Filter..."
+                  })}
                 />
               </React.Fragment>
             )
@@ -124,7 +129,10 @@ const FilterContent: React.FC<FilterContentProps> = ({
                   })
                 }
               >
-                {i18n.t("Add filter")}
+                <FormattedMessage
+                  defaultMessage="Add filter"
+                  description="button"
+                />
               </Button>
             </>
           )}

src/components/Filter/FilterElement.tsx

@@ -2,8 +2,8 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/styles";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import i18n from "../../i18n";
 import Calendar from "../../icons/Calendar";
 import FormSpacer from "../FormSpacer";
 import PriceField from "../PriceField";
@@ -41,6 +41,7 @@ const FilterElement: React.FC<FilterElementProps> = ({
   onChange,
   value
 }) => {
+  const intl = useIntl();
   const classes = useStyles({});
 
   if (filter.data.type === FieldType.date) {
@@ -62,7 +63,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
   } else if (filter.data.type === FieldType.rangeDate) {
     return (
       <>
-        <Typography>{i18n.t("from")}</Typography>
+        <Typography>
+          <FormattedMessage defaultMessage="from" />
+        </Typography>
         <TextField
           className={className}
           fullWidth
@@ -77,7 +80,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
           }}
         />
         <FormSpacer />
-        <Typography>{i18n.t("to")}</Typography>
+        <Typography>
+          <FormattedMessage defaultMessage="to" />
+        </Typography>
         <TextField
           className={className}
           fullWidth
@@ -96,7 +101,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
   } else if (filter.data.type === FieldType.range) {
     return (
       <>
-        <Typography>{i18n.t("from")}</Typography>
+        <Typography>
+          <FormattedMessage defaultMessage="from" />
+        </Typography>
         <TextField
           className={className}
           fullWidth
@@ -110,7 +117,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
           }}
         />
         <FormSpacer />
-        <Typography>{i18n.t("to")}</Typography>
+        <Typography>
+          <FormattedMessage defaultMessage="to" />
+        </Typography>
         <TextField
           className={className}
           fullWidth
@@ -128,7 +137,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
   } else if (filter.data.type === FieldType.rangePrice) {
     return (
       <>
-        <Typography>{i18n.t("from")}</Typography>
+        <Typography>
+          <FormattedMessage defaultMessage="from" />
+        </Typography>
         <PriceField
           currencySymbol={currencySymbol}
           className={className}
@@ -141,7 +152,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
           }}
         />
         <FormSpacer />
-        <Typography>{i18n.t("to")}</Typography>
+        <Typography>
+          <FormattedMessage defaultMessage="to" />
+        </Typography>
         <PriceField
           currencySymbol={currencySymbol}
           className={className}
@@ -169,7 +182,9 @@ const FilterElement: React.FC<FilterElementProps> = ({
           }
         }}
         value={value as string}
-        placeholder={i18n.t("Select Filter...")}
+        placeholder={intl.formatMessage({
+          defaultMessage: "Select Filter..."
+        })}
         onChange={event => onChange(event.target.value)}
       />
     );

src/components/FilterBar/FilterBar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
-import i18n from "../../i18n";
 import { FilterProps } from "../../types";
 import Debounce from "../Debounce";
 import { IFilter } from "../Filter/types";
@@ -28,6 +28,7 @@ const FilterBar: React.FC<FilterBarProps> = ({
   onTabChange,
   onFilterDelete
 }) => {
+  const intl = useIntl();
   const [search, setSearch] = React.useState(initialSearch);
   React.useEffect(() => setSearch(initialSearch), [currentTab, initialSearch]);
 
@@ -47,7 +48,9 @@ const FilterBar: React.FC<FilterBarProps> = ({
         {isCustom && (
           <FilterTab
             onClick={() => undefined}
-            label={i18n.t("Custom Filter")}
+            label={intl.formatMessage({
+              defaultMessage: "Custom Filter"
+            })}
           />
         )}
       </FilterTabs>

src/components/FilterCard/FilterCard.tsx

@@ -4,8 +4,7 @@ import CardHeader from "@material-ui/core/CardHeader";
 import IconButton from "@material-ui/core/IconButton";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import React from "react";
-
+import { useIntl } from "react-intl";
-import i18n from "../../i18n";
 
 export interface FilterCardProps {
   handleClear();
@@ -14,7 +13,10 @@ export interface FilterCardProps {
 const FilterCard: React.StatelessComponent<FilterCardProps> = ({
   children,
   handleClear
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <Card>
       <form>
         <CardHeader
@@ -23,11 +25,14 @@ const FilterCard: React.StatelessComponent<FilterCardProps> = ({
               <RefreshIcon />
             </IconButton>
           }
-        title={i18n.t("Filters")}
+          title={intl.formatMessage({
+            defaultMessage: "Filters"
+          })}
         />
         <CardContent>{children}</CardContent>
       </form>
     </Card>
-);
+  );
+};
 FilterCard.displayName = "FilterCard";
 export default FilterCard;

src/components/ImageUpload/ImageUpload.tsx

@@ -8,8 +8,7 @@ import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "../../i18n";
 import ImageIcon from "../../icons/Image";
 import Dropzone from "../Dropzone";
 
@@ -95,9 +94,10 @@ export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
               <input {...getInputProps()} className={classes.fileField} />
               <ImageIcon className={classes.photosIcon} />
               <Typography className={classes.uploadText} variant="body1">
-                {i18n.t("Drop here to upload", {
+                <FormattedMessage
-                  context: "image upload"
+                  defaultMessage="Drop here to upload"
-                })}
+                  description="image upload"
+                />
               </Typography>
             </div>
           </div>

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -15,8 +15,8 @@ import Typography from "@material-ui/core/Typography";
 import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../i18n";
 import { LanguageCodeEnum } from "../../types/globalTypes";
 import { ShopInfo_shop_languages } from "../Shop/types/ShopInfo";
 
@@ -110,11 +110,14 @@ const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
                           onLanguageChange(lang.code);
                         }}
                       >
-                        {i18n.t("{{ languageName }} - {{ languageCode }}", {
+                        <FormattedMessage
-                          context: "button",
+                          defaultMessage="{languageName} - {languageCode}"
+                          description="button"
+                          values={{
                             languageCode: lang.code,
                             languageName: lang.language
-                        })}
+                          }}
+                        />
                       </MenuItem>
                     </Menu>
                   ))}

src/components/ListField/ListField.tsx

@@ -8,7 +8,8 @@ import {
 } from "@material-ui/core/styles";
 import TextField, { StandardTextFieldProps } from "@material-ui/core/TextField";
 import React from "react";
-import i18n from "../../i18n";
+import { FormattedMessage } from "react-intl";
+
 import Chip from "../Chip";
 
 interface ListFieldState {
@@ -105,7 +106,7 @@ const ListField = withStyles(styles)(
                   color="primary"
                   onClick={this.handleValueAdd}
                 >
-                  {i18n.t("Add", { context: "button" })}
+                  <FormattedMessage defaultMessage="Add" description="button" />
                 </Button>
               )
             }}

src/components/MoneyRange/MoneyRange.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-
+import { useIntl } from "react-intl";
-import i18n from "../../i18n";
 import { LocaleConsumer } from "../Locale";
 import IMoney from "../Money";
 
@@ -18,29 +17,48 @@ const formatMoney = (money: IMoney, locale: string) =>
 export const MoneyRange: React.StatelessComponent<MoneyRangeProps> = ({
   from,
   to
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <LocaleConsumer>
       {locale =>
         from && to
-        ? i18n.t("{{ fromMoney }} - {{ toMoney }}", {
+          ? intl.formatMessage(
-            context: "money",
+              {
+                defaultMessage: "{fromMoney} - {toMoney}",
+                description: "money"
+              },
+              {
                 fromMoney: formatMoney(from, locale),
                 toMoney: formatMoney(to, locale)
-          })
+              }
+            )
           : from && !to
-        ? i18n.t("from {{ money }}", {
+          ? intl.formatMessage(
-            context: "money",
+              {
+                defaultMessage: "from {money}",
+                description: "money"
+              },
+              {
                 money: formatMoney(from, locale)
-          })
+              }
+            )
           : !from && to
-        ? i18n.t("to {{ money }}", {
+          ? intl.formatMessage(
-            context: "money",
+              {
+                defaultMessage: "to {money}",
+                description: "money"
+              },
+              {
                 money: formatMoney(to, locale)
-          })
+              }
+            )
           : "-"
       }
     </LocaleConsumer>
-);
+  );
+};
 
 MoneyRange.displayName = "MoneyRange";
 export default MoneyRange;

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -13,12 +13,12 @@ import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
 import Downshift, { ControllerStateAndHelpers } from "downshift";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 import { compareTwoStrings } from "string-similarity";
 
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Checkbox from "@saleor/components/Checkbox";
 import Debounce, { DebounceProps } from "@saleor/components/Debounce";
-import i18n from "@saleor/i18n";
 import ArrowDropdownIcon from "@saleor/icons/ArrowDropdown";
 import Hr from "../Hr";
 
@@ -244,10 +244,13 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
                             data-tc="multiautocomplete-select-option"
                           >
                             <span className={classes.menuItemLabel}>
-                              {i18n.t("Add new value: {{ value }}", {
+                              <FormattedMessage
-                                context: "add custom option",
+                                defaultMessage="Add new value: {value}"
+                                description="add custom option to select input"
+                                values={{
                                   value: inputValue
-                              })}
+                                }}
+                              />
                             </span>
                           </MenuItem>
                         )}
@@ -259,7 +262,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
                         component="div"
                         data-tc="multiautocomplete-select-no-options"
                       >
-                        {i18n.t("No results found")}
+                        <FormattedMessage defaultMessage="No results found" />
                       </MenuItem>
                     )
                   )}

src/components/MultiSelectField/MultiSelectField.tsx

@@ -11,8 +11,8 @@ import {
   WithStyles
 } from "@material-ui/core/styles";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../i18n";
 import Checkbox from "../Checkbox";
 
 const styles = (theme: Theme) =>
@@ -110,7 +110,9 @@ export const MultiSelectField = withStyles(styles, {
               );
             })
           ) : (
-            <MenuItem disabled={true}>{i18n.t("No results found")}</MenuItem>
+            <MenuItem disabled={true}>
+              <FormattedMessage defaultMessage="No results found" />
+            </MenuItem>
           )}
         </Select>
         {hint && <FormHelperText>{hint}</FormHelperText>}

src/components/NotFoundPage/NotFoundPage.tsx

@@ -8,9 +8,9 @@ import {
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
+import { FormattedMessage } from "react-intl";
 
 import notFoundImage from "@assets/images/not-found-404.svg";
-import i18n from "@saleor/i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -65,12 +65,14 @@ const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
         <div className={classes.innerContainer}>
           <div>
             <Typography className={classes.header} variant="h3">
-              {i18n.t("Ooops!...")}
+              <FormattedMessage defaultMessage="Ooops!..." />
             </Typography>
             <Typography className={classes.header} variant="h4">
-              {i18n.t("Something's missing")}
+              <FormattedMessage defaultMessage="Something's missing" />
+            </Typography>
+            <Typography>
+              <FormattedMessage defaultMessage="Sorry, the page was not found" />
             </Typography>
-            <Typography>{i18n.t("Sorry, the page was not found")}</Typography>
           </div>
           <div>
             <Button
@@ -79,7 +81,10 @@ const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
               variant="contained"
               onClick={onBack}
             >
-              {i18n.t("Go back to dashboard", { context: "button" })}
+              <FormattedMessage
+                defaultMessage="Go back to dashboard"
+                description="button"
+              />
             </Button>
           </div>
         </div>

src/components/ProductList/ProductList.tsx

@@ -10,12 +10,12 @@ import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableRow from "@material-ui/core/TableRow";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import TableCellAvatar, {
   AVATAR_MARGIN
 } from "@saleor/components/TableCellAvatar";
 import { ProductListColumns } from "@saleor/config";
-import i18n from "@saleor/i18n";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { isSelected } from "@saleor/utils/lists";
@@ -97,6 +97,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
     onUpdateListSettings,
     onRowClick
   }: ProductListProps) => {
+    const intl = useIntl();
     const displayColumn = React.useCallback(
       (column: ProductListColumns) =>
         isSelected(column, settings.columns, (a, b) => a === b),
@@ -124,22 +125,28 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
           >
             <TableCell className={classes.colName}>
               <span className={classes.colNameHeader}>
-                {i18n.t("Name", { context: "object" })}
+                <FormattedMessage defaultMessage="Name" description="product" />
               </span>
             </TableCell>
             {displayColumn("productType") && (
               <TableCell className={classes.colType}>
-                {i18n.t("Type", { context: "object" })}
+                <FormattedMessage defaultMessage="Type" description="product" />
               </TableCell>
             )}
             {displayColumn("isPublished") && (
               <TableCell className={classes.colPublished}>
-                {i18n.t("Published", { context: "object" })}
+                <FormattedMessage
+                  defaultMessage="Published"
+                  description="product status"
+                />
               </TableCell>
             )}
             {displayColumn("price") && (
               <TableCell className={classes.colPrice}>
-                {i18n.t("Price", { context: "object" })}
+                <FormattedMessage
+                  defaultMessage="Price"
+                  description="product"
+                />
               </TableCell>
             )}
           </TableHead>
@@ -205,11 +212,13 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
                           <StatusLabel
                             label={
                               product.isAvailable
-                                ? i18n.t("Published", {
+                                ? intl.formatMessage({
-                                    context: "product status"
+                                    defaultMessage: "Published",
+                                    description: "product status"
                                   })
-                                : i18n.t("Not published", {
+                                : intl.formatMessage({
-                                    context: "product status"
+                                    defaultMessage: "Not published",
+                                    description: "product status"
                                   })
                             }
                             status={product.isAvailable ? "success" : "error"}
@@ -237,7 +246,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
               () => (
                 <TableRow>
                   <TableCell colSpan={numberOfColumns}>
-                    {i18n.t("No products found")}
+                    <FormattedMessage defaultMessage="No products found" />
                   </TableCell>
                 </TableRow>
               )

src/components/RadioGroupField/RadioGroupField.tsx

@@ -8,8 +8,7 @@ import RadioGroup from "@material-ui/core/RadioGroup";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "../../i18n";
 
 const styles = createStyles({
   formControl: {
@@ -83,7 +82,9 @@ export const RadioGroupField = withStyles(styles, {
               />
             ))
           ) : (
-            <MenuItem disabled={true}>{i18n.t("No results found")}</MenuItem>
+            <MenuItem disabled={true}>
+              <FormattedMessage defaultMessage="No results found" />
+            </MenuItem>
           )}
         </RadioGroup>
         {hint && <FormHelperText>{hint}</FormHelperText>}

src/components/RichTextEditor/ImageEntity.tsx

@@ -13,8 +13,7 @@ import {
 import DeleteIcon from "@material-ui/icons/Delete";
 import { ContentState } from "draft-js";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "../../i18n";
 
 interface ImageEntityProps {
   children: React.ReactNode;
@@ -88,7 +87,10 @@ const ImageEntity = withStyles(styles, {
                         }}
                         color="primary"
                       >
-                        {i18n.t("Replace")}
+                        <FormattedMessage
+                          defaultMessage="Replace"
+                          description="replace image, button"
+                        />
                       </Button>
                       <IconButton onClick={() => onRemove(entityKey)}>
                         <DeleteIcon color="primary" />

src/components/RichTextEditor/ImageSource.tsx

@@ -6,8 +6,9 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import TextField from "@material-ui/core/TextField";
 import { AtomicBlockUtils, EditorState, EntityInstance } from "draft-js";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import i18n from "../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import Form from "../Form";
 
 interface ImageSourceProps {
@@ -21,16 +22,19 @@ interface ImageSourceProps {
   onClose: () => void;
 }
 
-class ImageSource extends React.Component<ImageSourceProps> {
+const ImageSource: React.FC<ImageSourceProps> = ({
-  submit = (href: string) => {
-    const {
   editorState,
   entity,
   entityKey,
   entityType,
-      onComplete
+  onComplete,
-    } = this.props;
+  onClose
+}) => {
+  const intl = useIntl();
 
+  const initial = entity ? entity.getData().href : "";
+
+  const handleSubmit = (href: string) => {
     if (href) {
       const content = editorState.getCurrentContent();
       if (entity) {
@@ -60,34 +64,37 @@ class ImageSource extends React.Component<ImageSourceProps> {
     }
   };
 
-  render() {
-    const { entity, onClose } = this.props;
-    const initial = entity ? entity.getData().href : "";
-
   return (
     <Dialog onClose={onClose} open={true} fullWidth maxWidth="sm">
       <Form
         initial={{ href: initial }}
-          onSubmit={({ href }) => this.submit(href)}
+        onSubmit={({ href }) => handleSubmit(href)}
       >
         {({ data, change, submit }) => (
           <>
-              <DialogTitle>{i18n.t("Add Image Link")}</DialogTitle>
+            <DialogTitle>
+              <FormattedMessage
+                defaultMessage="Add Image Link"
+                description="dialog header"
+              />
+            </DialogTitle>
             <DialogContent>
               <TextField
                 name="href"
                 fullWidth
-                  label={i18n.t("Image URL")}
+                label={intl.formatMessage({
+                  defaultMessage: "Image URL"
+                })}
                 value={data.href}
                 onChange={change}
               />
             </DialogContent>
             <DialogActions>
               <Button onClick={onClose}>
-                  {i18n.t("Cancel", { context: "button" })}
+                <FormattedMessage {...buttonMessages.cancel} />
               </Button>
               <Button onClick={submit} color="primary" variant="contained">
-                  {i18n.t("Save", { context: "button" })}
+                <FormattedMessage {...buttonMessages.save} />
               </Button>
             </DialogActions>
           </>
@@ -95,6 +102,6 @@ class ImageSource extends React.Component<ImageSourceProps> {
       </Form>
     </Dialog>
   );
-  }
+};
-}
+
 export default ImageSource;

src/components/RichTextEditor/LinkEntity.tsx

@@ -14,8 +14,9 @@ import Typography from "@material-ui/core/Typography";
 import DeleteIcon from "@material-ui/icons/Delete";
 import { ContentState } from "draft-js";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import Link from "../Link";
 
 interface LinkEntityProps {
@@ -107,7 +108,7 @@ const LinkEntity = withStyles(styles, {
                         }}
                         color="primary"
                       >
-                        {i18n.t("Edit")}
+                        <FormattedMessage {...buttonMessages.edit} />
                       </Button>
                       <IconButton onClick={() => onRemove(entityKey)}>
                         <DeleteIcon color="primary" />

src/components/RichTextEditor/LinkSource.tsx

@@ -6,8 +6,9 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import TextField from "@material-ui/core/TextField";
 import { EditorState, EntityInstance, RichUtils } from "draft-js";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import i18n from "../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import Form from "../Form";
 
 interface LinkSourceProps {
@@ -20,10 +21,17 @@ interface LinkSourceProps {
   onClose: () => void;
 }
 
-class LinkSource extends React.Component<LinkSourceProps> {
+const LinkSource: React.FC<LinkSourceProps> = ({
-  submit = (url: string) => {
+  editorState,
-    const { editorState, entityType, onComplete } = this.props;
+  entity,
+  entityType,
+  onComplete,
+  onClose
+}) => {
+  const intl = useIntl();
+  const initial = entity ? entity.getData().url : "";
 
+  const handleSubmit = (url: string) => {
     if (url) {
       const content = editorState.getCurrentContent();
       const contentWithEntity = content.createEntity(
@@ -47,34 +55,37 @@ class LinkSource extends React.Component<LinkSourceProps> {
     }
   };
 
-  render() {
-    const { entity, onClose } = this.props;
-    const initial = entity ? entity.getData().url : "";
-
   return (
     <Dialog onClose={onClose} open={true} fullWidth maxWidth="sm">
       <Form
         initial={{ url: initial }}
-          onSubmit={({ url }) => this.submit(url)}
+        onSubmit={({ url }) => handleSubmit(url)}
       >
         {({ data, change, submit }) => (
           <>
-              <DialogTitle>{i18n.t("Add or Edit Link")}</DialogTitle>
+            <DialogTitle>
+              <FormattedMessage
+                defaultMessage="Add or Edit Link"
+                description="button"
+              />
+            </DialogTitle>
             <DialogContent>
               <TextField
                 name="url"
                 fullWidth
-                  label={i18n.t("URL Linked")}
+                label={intl.formatMessage({
+                  defaultMessage: "URL Linked"
+                })}
                 value={data.url}
                 onChange={change}
               />
             </DialogContent>
             <DialogActions>
               <Button onClick={onClose}>
-                  {i18n.t("Cancel", { context: "button" })}
+                <FormattedMessage {...buttonMessages.cancel} />
               </Button>
               <Button onClick={submit} color="secondary" variant="contained">
-                  {i18n.t("Save", { context: "button" })}
+                <FormattedMessage {...buttonMessages.save} />
               </Button>
             </DialogActions>
           </>
@@ -82,6 +93,6 @@ class LinkSource extends React.Component<LinkSourceProps> {
       </Form>
     </Dialog>
   );
-  }
+};
-}
+
 export default LinkSource;

src/components/RowNumberSelect/RowNumberSelect.tsx

@@ -3,8 +3,8 @@ import Select from "@material-ui/core/Select";
 import { Theme } from "@material-ui/core/styles";
 import { createStyles, makeStyles, useTheme } from "@material-ui/styles";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../i18n";
 import { ListSettings } from "../../types";
 
 const useStyles = makeStyles(
@@ -51,7 +51,9 @@ const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
   const classes = useStyles({ theme });
   return (
     <div className={className}>
-      <span className={classes.label}>{i18n.t("No of Rows:")}</span>
+      <span className={classes.label}>
+        <FormattedMessage defaultMessage="No of Rows:" />
+      </span>
       <Select
         className={classes.select}
         value={settings.rowNumber}

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -8,9 +8,10 @@ import {
 } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import useWindowScroll from "@saleor/hooks/useWindowScroll";
-import i18n from "../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import { maybe } from "../../misc";
 import AppActionContext from "../AppLayout/AppActionContext";
 import ConfirmButton, {
@@ -82,6 +83,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
     onSave,
     ...props
   }: SaveButtonBarProps) => {
+    const intl = useIntl();
     const scrollPosition = useWindowScroll();
     const scrolledToBottom =
       scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
@@ -107,7 +109,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
                     >
                       {labels && labels.delete
                         ? labels.delete
-                        : i18n.t("Remove")}
+                        : intl.formatMessage(buttonMessages.delete)}
                     </Button>
                   )}
                   <div className={classes.spacer} />
@@ -119,9 +121,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
                   >
                     {maybe(
                       () => labels.cancel,
-                      i18n.t("Cancel", {
+                      intl.formatMessage(buttonMessages.cancel)
-                        context: "button"
-                      })
                     )}
                   </Button>
                   <ConfirmButton
@@ -132,9 +132,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
                   >
                     {maybe(
                       () => labels.save,
-                      i18n.t("Save", {
+                      intl.formatMessage(buttonMessages.save)
-                        context: "button"
-                      })
                     )}
                   </ConfirmButton>
                 </Container>

src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx

@@ -5,8 +5,9 @@ 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 i18n from "../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
 import Form from "../Form";
 
@@ -31,6 +32,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
   onSubmit,
   open
 }) => {
+  const intl = useIntl();
   const [errors, setErrors] = React.useState(false);
   const handleErrors = data => {
     if (data.name.length) {
@@ -44,9 +46,10 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
       <DialogTitle>
-        {i18n.t("Save Custom Search", {
+        <FormattedMessage
-          context: "save filter tab"
+          defaultMessage="Save Custom Search"
-        })}
+          description="save filter tab, header"
+        />
       </DialogTitle>
       <Form initial={initialForm} onSubmit={handleErrors}>
         {({ change, data, submit }) => (
@@ -54,8 +57,9 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
             <DialogContent>
               <TextField
                 fullWidth
-                label={i18n.t("Search Name", {
+                label={intl.formatMessage({
-                  context: "save search"
+                  defaultMessage: "Search Name",
+                  description: "save search tab"
                 })}
                 name={"name" as keyof SaveFilterTabDialogFormData}
                 value={data.name}
@@ -66,7 +70,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
             </DialogContent>
             <DialogActions>
               <Button onClick={onClose}>
-                {i18n.t("Cancel", { context: "button" })}
+                <FormattedMessage {...buttonMessages.cancel} />
               </Button>
               <ConfirmButton
                 transitionState={confirmButtonState}
@@ -74,7 +78,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
                 variant="contained"
                 onClick={submit}
               >
-                {i18n.t("Save")}
+                <FormattedMessage {...buttonMessages.save} />
               </ConfirmButton>
             </DialogActions>
           </>

src/components/SeoForm/SeoForm.tsx

@@ -11,8 +11,8 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
-import i18n from "../../i18n";
 import CardTitle from "../CardTitle";
 import FormSpacer from "../FormSpacer";
 
@@ -88,16 +88,22 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
     titlePlaceholder,
     onChange
   }: SeoFormProps) => {
+    const intl = useIntl();
     const [expanded, setExpansionStatus] = React.useState(false);
     const toggleExpansion = () => setExpansionStatus(!expanded);
 
     return (
       <Card>
         <CardTitle
-          title={i18n.t("Search Engine Preview")}
+          title={intl.formatMessage({
+            defaultMessage: "Search Engine Preview"
+          })}
           toolbar={
             <Button color="primary" variant="text" onClick={toggleExpansion}>
-              {i18n.t("Edit website SEO")}
+              <FormattedMessage
+                defaultMessage="Edit website SEO"
+                description="button"
+              />
             </Button>
           }
         />
@@ -116,19 +122,24 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
                 label={
                   <div className={classes.labelContainer}>
                     <div className={classes.label}>
-                      {i18n.t("Search engine title")}
+                      <FormattedMessage defaultMessage="Search engine title" />
                     </div>
                     <span>
-                      {i18n.t("{{ letters }} of {{ maxLetters }} characters", {
+                      <FormattedMessage
-                        letters: title.length,
+                        defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
-                        maxLetters: 70
+                        description="character limit"
-                      })}
+                        values={{
+                          maxCharacters: 70,
+                          numberOfCharacters: title.length
+                        }}
+                      />
                     </span>
                   </div>
                 }
-                helperText={i18n.t(
+                helperText={intl.formatMessage({
+                  defaultMessage:
                     "If empty, the preview shows what will be autogenerated."
-                )}
+                })}
                 value={title.slice(0, 69)}
                 disabled={loading || disabled}
                 placeholder={titlePlaceholder}
@@ -141,19 +152,24 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
                 label={
                   <div className={classes.labelContainer}>
                     <div className={classes.label}>
-                      {i18n.t("Search engine description")}
+                      <FormattedMessage defaultMessage="Search engine description" />
                     </div>
                     <span>
-                      {i18n.t("{{ letters }} of {{ maxLetters }} characters", {
+                      <FormattedMessage
-                        letters: description.length,
+                        defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
-                        maxLetters: 300
+                        description="character limit"
-                      })}
+                        values={{
+                          maxCharacters: 300,
+                          numberOfCharacters: description.length
+                        }}
+                      />
                     </span>
                   </div>
                 }
-                helperText={i18n.t(
+                helperText={intl.formatMessage({
+                  defaultMessage:
                     "If empty, the preview shows what will be autogenerated."
-                )}
+                })}
                 value={description ? description.slice(0, 299) : undefined}
                 onChange={onChange}
                 disabled={loading || disabled}
@@ -170,9 +186,4 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
   }
 );
 SeoForm.displayName = "SeoForm";
-SeoForm.defaultProps = {
-  helperText: i18n.t(
-    "Add search engine title and description to make this product easier to find"
-  )
-};
 export default SeoForm;

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -13,10 +13,10 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import Downshift from "downshift";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 import { compareTwoStrings } from "string-similarity";
 
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import i18n from "../../i18n";
 import ArrowDropdownIcon from "../../icons/ArrowDropdown";
 import Debounce, { DebounceProps } from "../Debounce";
 
@@ -177,7 +177,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                               data-tc="singleautocomplete-select-option"
                             >
                               <Typography color="textSecondary">
-                                {i18n.t("None")}
+                                <FormattedMessage defaultMessage="None" />
                               </Typography>
                             </MenuItem>
                           )}
@@ -220,10 +220,13 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                                 })}
                                 data-tc="singleautocomplete-select-option"
                               >
-                                {i18n.t("Add new value: {{ value }}", {
+                                <FormattedMessage
-                                  context: "add custom option",
+                                  defaultMessage="Add new value: {value}"
+                                  description="add custom select input option"
+                                  values={{
                                     value: inputValue
-                                })}
+                                  }}
+                                />
                               </MenuItem>
                             )}
                         </>
@@ -233,7 +236,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                           component="div"
                           data-tc="singleautocomplete-select-no-options"
                         >
-                          {i18n.t("No results found")}
+                          <FormattedMessage defaultMessage="No results found" />
                         </MenuItem>
                       )}
                     </Paper>

src/components/SingleSelectField/SingleSelectField.tsx

@@ -7,8 +7,7 @@ import Select, { SelectProps } from "@material-ui/core/Select";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "../../i18n";
 
 const styles = createStyles({
   formControl: {
@@ -83,7 +82,9 @@ export const SingleSelectField = withStyles(styles, {
               </MenuItem>
             ))
           ) : (
-            <MenuItem disabled={true}>{i18n.t("No results found")}</MenuItem>
+            <MenuItem disabled={true}>
+              <FormattedMessage defaultMessage="No results found" />
+            </MenuItem>
           )}
         </Select>
         {hint && <FormHelperText>{hint}</FormHelperText>}

src/components/TableFilter/FilterChips.tsx

@@ -6,8 +6,8 @@ import Typography from "@material-ui/core/Typography";
 import ClearIcon from "@material-ui/icons/Clear";
 import { createStyles, makeStyles, useTheme } from "@material-ui/styles";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../i18n";
 import Filter, { FilterContentSubmitData, IFilter } from "../Filter";
 import Hr from "../Hr";
 import Link from "../Link";
@@ -163,9 +163,19 @@ export const FilterChips: React.FC<FilterChipProps> = ({
             ))}
           </div>
           {isCustomSearch ? (
-            <Link onClick={onFilterSave}>{i18n.t("Save Custom Search")}</Link>
+            <Link onClick={onFilterSave}>
+              <FormattedMessage
+                defaultMessage="Save Custom Search"
+                description="button"
+              />
+            </Link>
           ) : (
-            <Link onClick={onFilterDelete}>{i18n.t("Delete Search")}</Link>
+            <Link onClick={onFilterDelete}>
+              <FormattedMessage
+                defaultMessage="Delete Search"
+                description="button"
+              />
+            </Link>
           )}
         </div>
       ) : (

src/components/TableHead/TableHead.tsx

@@ -13,10 +13,10 @@ import TableRow from "@material-ui/core/TableRow";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import { Node } from "../../types";
 
-import i18n from "../../i18n";
 import Checkbox from "../Checkbox";
 
 export interface TableHeadProps extends MuiTableHeadProps {
@@ -129,9 +129,12 @@ const TableHead = withStyles(styles, {
                 <div className={classes.container}>
                   {selected && (
                     <Typography>
-                      {i18n.t("Selected {{ number }} items", {
+                      <FormattedMessage
+                        defaultMessage="Selected {number} items"
+                        values={{
                           number: selected
-                      })}
+                        }}
+                      />
                     </Typography>
                   )}
                   <div className={classes.spacer} />

src/components/Timeline/Timeline.tsx

@@ -11,8 +11,7 @@ import {
 import TextField from "@material-ui/core/TextField";
 import PersonIcon from "@material-ui/icons/Person";
 import React from "react";
-
+import { FormattedMessage, useIntl } from "react-intl";
-import i18n from "../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -70,7 +69,10 @@ export const Timeline = withStyles(styles, { name: "Timeline" })(
 );
 
 export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
-  ({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => (
+  ({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => {
+    const intl = useIntl();
+
+    return (
       <div className={classes.noteRoot}>
         <CardContent className={classes.noteTitle}>
           <Avatar
@@ -81,7 +83,9 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
           </Avatar>
           <TextField
             className={classes.input}
-          placeholder={i18n.t("Leave your note here...")}
+            placeholder={intl.formatMessage({
+              defaultMessage: "Leave your note here..."
+            })}
             onChange={onChange}
             value={message}
             name="message"
@@ -90,9 +94,10 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
             InputProps={{
               endAdornment: (
                 <Button color="primary" onClick={onSubmit}>
-                {i18n.t("Send", {
+                  <FormattedMessage
-                  context: "add order note"
+                    defaultMessage="Send"
-                })}
+                    description="add order note, button"
+                  />
                 </Button>
               )
             }}
@@ -100,7 +105,8 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
           />
         </CardContent>
       </div>
-  )
+    );
+  }
 );
 Timeline.displayName = "Timeline";
 export default Timeline;

src/components/VisibilityCard/VisibilityCard.tsx

@@ -8,12 +8,12 @@ import {
 } 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 ControlledSwitch from "@saleor/components/ControlledSwitch";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
-import i18n from "../../i18n";
 import { DateContext } from "../Date/DateContext";
 
 const styles = (theme: Theme) =>
@@ -54,11 +54,17 @@ export const VisibilityCard = withStyles(styles, {
     disabled,
     onChange
   }: VisibilityCardProps) => {
+    const intl = useIntl();
     const localizeDate = useDateLocalize();
     const dateNow = React.useContext(DateContext);
     return (
       <Card>
-        <CardTitle title={i18n.t("Visibility")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Visibility",
+            description: "section header"
+          })}
+        />
         <CardContent>
           <div
             className={
@@ -69,18 +75,32 @@ export const VisibilityCard = withStyles(styles, {
           >
             <ControlledSwitch
               name="isPublished"
-              label={i18n.t("Visible")}
+              label={intl.formatMessage({
-              uncheckedLabel={i18n.t("Hidden")}
+                defaultMessage: "Visible"
+              })}
+              uncheckedLabel={intl.formatMessage({
+                defaultMessage: "Hidden"
+              })}
               secondLabel={
                 publicationDate
                   ? isPublished
-                    ? i18n.t("since {{ date }}", {
+                    ? intl.formatMessage(
+                        {
+                          defaultMessage: "since {date}"
+                        },
+                        {
                           date: localizeDate(publicationDate)
-                      })
+                        }
+                      )
                     : Date.parse(publicationDate) > dateNow
-                    ? i18n.t("will be visible from {{ date }}", {
+                    ? intl.formatMessage(
+                        {
+                          defaultMessage: "will be visible from {date}"
+                        },
+                        {
                           date: localizeDate(publicationDate)
-                      })
+                        }
+                      )
                     : null
                   : null
               }
@@ -94,7 +114,10 @@ export const VisibilityCard = withStyles(styles, {
               <TextField
                 error={!!errors.publicationDate}
                 disabled={disabled}
-                label={i18n.t("Publish on")}
+                label={intl.formatMessage({
+                  defaultMessage: "Publish on",
+                  description: "publish on date"
+                })}
                 name="publicationDate"
                 type="date"
                 fullWidth={true}

src/components/Weight/Weight.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import i18n from "../../i18n";
+import { FormattedMessage } from "react-intl";
 
 export interface Weight {
   unit: string;
@@ -9,10 +9,13 @@ export interface WeightProps {
   weight: Weight;
 }
 
-const Weight: React.StatelessComponent<WeightProps> = ({ weight }) =>
+const Weight: React.StatelessComponent<WeightProps> = ({ weight }) => (
-  i18n.t("{{ value }} {{ unit }}", {
+  <FormattedMessage
-    context: "weight",
+    defaultMessage="{value} {unit}"
-    ...weight
+    description="weight"
-  });
+    values={weight}
+  />
+);
+
 Weight.displayName = "Weight";
 export default Weight;

src/components/WeightRange/WeightRange.tsx

@@ -1,6 +1,6 @@
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../i18n";
 import { Weight } from "../Weight";
 
 export interface WeightRangeProps {
@@ -8,28 +8,32 @@ export interface WeightRangeProps {
   to?: Weight;
 }
 
-const WeightRange: React.StatelessComponent<WeightRangeProps> = ({
+const WeightRange: React.FC<WeightRangeProps> = ({ from, to }) =>
-  from,
+  from && to ? (
-  to
+    <FormattedMessage
-}) =>
+      defaultMessage="{fromValue} {fromUnit} - {toValue} {toUnit}"
-  from && to
+      description="weight"
-    ? i18n.t("{{ fromValue }} {{ fromUnit }} - {{ toValue }} {{ toUnit }}", {
+      values={{
-        context: "weight",
         fromUnit: from.unit,
         fromValue: from.value,
         toUnit: to.unit,
         toValue: to.value
-      })
+      }}
-    : from && !to
+    />
-    ? i18n.t("from {{ value }} {{ unit }}", {
+  ) : from && !to ? (
-        context: "weight",
+    <FormattedMessage
-        ...from
+      defaultMessage="from {value} {unit}"
-      })
+      description="weight"
-    : !from && to
+      values={from}
-    ? i18n.t("to {{ value }} {{ unit }}", {
+    />
-        context: "weight",
+  ) : !from && to ? (
-        ...to
+    <FormattedMessage
-      })
+      defaultMessage="to {value} {unit}"
-    : "-";
+      description="weight"
+      values={to}
+    />
+  ) : (
+    <span>-</span>
+  );
 WeightRange.displayName = "WeightRange";
 export default WeightRange;

src/intl.ts

@@ -66,6 +66,10 @@ export const buttonMessages = defineMessages({
     defaultMessage: "Confirm",
     description: "button"
   },
+  delete: {
+    defaultMessage: "Delete",
+    description: "button"
+  },
   edit: {
     defaultMessage: "Edit",
     description: "button"