Refactor product section translations (#125)

src/intl.ts

@@ -133,6 +133,10 @@ export const sectionNames = defineMessages({
     defaultMessage: "Product Types",
     description: "product types section name"
   },
+  products: {
+    defaultMessage: "Products",
+    description: "products section name"
+  },
   sales: {
     defaultMessage: "Sales",
     description: "sales section name"

src/products/components/ProductAttributes/ProductAttributes.tsx

@@ -7,6 +7,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, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Grid from "@saleor/components/Grid";
@@ -18,7 +19,6 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "@saleor/components/SingleAutocompleteSelectField";
 import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
-import i18n from "@saleor/i18n";
 import { maybe } from "@saleor/misc";
 import { ProductDetails_product_attributes_attribute_values } from "@saleor/products/types/ProductDetails";
 import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
@@ -127,21 +127,30 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
   onChange,
   onMultiChange
 }) => {
+  const intl = useIntl();
   const classes = useStyles({});
   const [expanded, setExpansionStatus] = React.useState(true);
   const toggleExpansion = () => setExpansionStatus(!expanded);
 
   return (
     <Card className={classes.card}>
-      <CardTitle title={i18n.t("Attributes")} />
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Attributes",
+          description: "product attributes, section header"
+        })}
+      />
       <CardContent className={classes.cardContent}>
         <div className={classes.expansionBar}>
           <div className={classes.expansionBarLabelContainer}>
             <Typography className={classes.expansionBarLabel} variant="caption">
-              {i18n.t("{{ number }} Attributes", {
+              <FormattedMessage
-                context: "number of attribute",
+                defaultMessage="{number} Attributes"
+                description="number of product attributes"
+                values={{
                   number: attributes.length
-              })}
+                }}
+              />
             </Typography>
           </div>
           <IconButton
@@ -184,7 +193,10 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
                         )}
                         emptyOption
                         name={`attribute:${attribute.label}`}
-                        label={i18n.t("Value")}
+                        label={intl.formatMessage({
+                          defaultMessage: "Value",
+                          description: "attribute value"
+                        })}
                         value={attribute.value[0]}
                         onChange={event =>
                           onChange(attribute.id, event.target.value)
@@ -195,7 +207,10 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
                       <MultiAutocompleteSelectField
                         choices={getMultiChoices(attribute.data.values)}
                         displayValues={getMultiDisplayValue(attribute)}
-                        label={i18n.t("Values")}
+                        label={intl.formatMessage({
+                          defaultMessage: "Values",
+                          description: "attribute values"
+                        })}
                         name={`attribute:${attribute.label}`}
                         value={attribute.value}
                         onChange={event =>

src/products/components/ProductCategoryAndCollectionsForm/ProductCategoryAndCollectionsForm.tsx

@@ -1,12 +1,12 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import FormSpacer from "@saleor/components/FormSpacer";
 import MultiSelectField from "@saleor/components/MultiSelectField";
 import PageHeader from "@saleor/components/PageHeader";
 import SingleSelectField from "@saleor/components/SingleSelectField";
-import i18n from "../../../i18n";
 
 interface ProductCategoryAndCollectionsFormProps {
   categories?: Array<{ value: string; label: string }>;
@@ -26,15 +26,25 @@ const ProductCategoryAndCollectionsForm = ({
   category,
   loading,
   onChange
-}: ProductCategoryAndCollectionsFormProps) => (
+}: ProductCategoryAndCollectionsFormProps) => {
+  const intl = useIntl();
+
+  return (
     <Card>
-    <PageHeader title={i18n.t("Organisation")} />
+      <PageHeader
+        title={intl.formatMessage({
+          defaultMessage: "Organization",
+          description: "product organization, header"
+        })}
+      />
       <CardContent>
         <SingleSelectField
           disabled={loading}
           error={!!errors.category}
           hint={errors.category}
-        label={i18n.t("Category")}
+          label={intl.formatMessage({
+            defaultMessage: "Category"
+          })}
           choices={loading ? [] : categories}
           name="category"
           value={category}
@@ -45,7 +55,9 @@ const ProductCategoryAndCollectionsForm = ({
           disabled={loading}
           error={!!errors.collections}
           hint={errors.collections}
-        label={i18n.t("Collections")}
+          label={intl.formatMessage({
+            defaultMessage: "Collections"
+          })}
           choices={loading ? [] : collections}
           name="collections"
           value={productCollections}
@@ -54,6 +66,7 @@ const ProductCategoryAndCollectionsForm = ({
       </CardContent>
     </Card>
   );
+};
 ProductCategoryAndCollectionsForm.displayName =
   "ProductCategoryAndCollectionsForm";
 export default ProductCategoryAndCollectionsForm;

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -1,5 +1,6 @@
 import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
@@ -16,6 +17,7 @@ import { SearchCategories_categories_edges_node } from "@saleor/containers/Searc
 import { SearchCollections_collections_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
 import useFormset from "@saleor/hooks/useFormset";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
+import { sectionNames } from "@saleor/intl";
 import {
   getChoices,
   ProductAttributeValueChoices,
@@ -23,7 +25,6 @@ import {
 } from "@saleor/products/utils/data";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import i18n from "../../../i18n";
 import { UserError } from "../../../types";
 import { ProductCreateData_productTypes_edges_node_productAttributes } from "../../types/ProductCreateData";
 import {
@@ -96,6 +97,8 @@ export const ProductCreatePage: React.StatelessComponent<
   onBack,
   onSubmit
 }: ProductCreatePageProps) => {
+  const intl = useIntl();
+
   // Form values
   const {
     change: changeAttributeData,
@@ -200,7 +203,9 @@ export const ProductCreatePage: React.StatelessComponent<
 
         return (
           <Container>
-            <AppHeader onBack={onBack}>{i18n.t("Products")}</AppHeader>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.products)}
+            </AppHeader>
             <PageHeader title={header} />
             <Grid>
               <div>
@@ -239,9 +244,10 @@ export const ProductCreatePage: React.StatelessComponent<
                   </>
                 )}
                 <SeoForm
-                  helperText={i18n.t(
+                  helperText={intl.formatMessage({
+                    defaultMessage:
                       "Add search engine title and description to make this product easier to find"
-                  )}
+                  })}
                   title={data.seoTitle}
                   titlePlaceholder={data.name}
                   description={data.seoDescription}

src/products/components/ProductDetailsForm/ProductDetailsForm.tsx

@@ -9,11 +9,12 @@ import {
 import TextField from "@material-ui/core/TextField";
 import { RawDraftContentState } from "draft-js";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
 import RichTextEditor from "@saleor/components/RichTextEditor";
-import i18n from "../../../i18n";
+import { commonMessages } from "@saleor/intl";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -48,9 +49,14 @@ export const ProductDetailsForm = withStyles(styles, {
     errors,
     initialDescription,
     onChange
-  }: ProductDetailsFormProps) => (
+  }: ProductDetailsFormProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
-      <CardTitle title={i18n.t("General information")} />
+        <CardTitle
+          title={intl.formatMessage(commonMessages.generalInformations)}
+        />
         <CardContent>
           <div className={classes.root}>
             <TextField
@@ -58,7 +64,10 @@ export const ProductDetailsForm = withStyles(styles, {
               helperText={errors.name}
               disabled={disabled}
               fullWidth
-            label={i18n.t("Name")}
+              label={intl.formatMessage({
+                defaultMessage: "Name",
+                description: "product name"
+              })}
               name="name"
               rows={5}
               value={data.name}
@@ -71,13 +80,14 @@ export const ProductDetailsForm = withStyles(styles, {
             error={!!errors.descriptionJson}
             helperText={errors.descriptionJson}
             initial={initialDescription}
-          label={i18n.t("Description")}
+            label={intl.formatMessage(commonMessages.description)}
             name="description"
             onChange={onChange}
           />
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 ProductDetailsForm.displayName = "ProductDetailsForm";
 export default ProductDetailsForm;

src/products/components/ProductImageNavigation/ProductImageNavigation.tsx

@@ -8,10 +8,10 @@ import {
 } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -64,9 +64,17 @@ const ProductImageNavigation = withStyles(styles, {
     highlighted,
     images,
     onRowClick
-  }: ProductImageNavigationProps) => (
+  }: ProductImageNavigationProps) => {
+    const intl = useIntl();
+
+    return (
       <Card className={classes.card}>
-      <CardTitle title={i18n.t("All photos")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "All Photos",
+            description: "section header"
+          })}
+        />
         <CardContent>
           {images === undefined ? (
             <Skeleton />
@@ -76,7 +84,8 @@ const ProductImageNavigation = withStyles(styles, {
                 <div
                   className={classNames({
                     [classes.imageContainer]: true,
-                  [classes.highlightedImageContainer]: image.id === highlighted
+                    [classes.highlightedImageContainer]:
+                      image.id === highlighted
                   })}
                   onClick={onRowClick(image.id)}
                   key={image.id}
@@ -88,7 +97,8 @@ const ProductImageNavigation = withStyles(styles, {
           )}
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 ProductImageNavigation.displayName = "ProductImageNavigation";
 export default ProductImageNavigation;

src/products/components/ProductImagePage/ProductImagePage.tsx

@@ -8,6 +8,7 @@ import {
 } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import CardTitle from "@saleor/components/CardTitle";
@@ -18,7 +19,7 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
+import { commonMessages } from "@saleor/intl";
 import ProductImageNavigation from "../ProductImageNavigation";
 
 const styles = (theme: Theme) =>
@@ -69,7 +70,10 @@ const ProductImagePage = withStyles(styles, { name: "ProductImagePage" })(
     onDelete,
     onRowClick,
     onSubmit
-  }: ProductImagePageProps) => (
+  }: ProductImagePageProps) => {
+    const intl = useIntl();
+
+    return (
       <Form
         initial={{ description: image ? image.alt : "" }}
         onSubmit={onSubmit}
@@ -79,7 +83,12 @@ const ProductImagePage = withStyles(styles, { name: "ProductImagePage" })(
           return (
             <Container>
               <AppHeader onBack={onBack}>{product}</AppHeader>
-            <PageHeader title={i18n.t("Edit Photo")} />
+              <PageHeader
+                title={intl.formatMessage({
+                  defaultMessage: "Edit Photo",
+                  description: "header"
+                })}
+              />
               <Grid variant="inverted">
                 <div>
                   <ProductImageNavigation
@@ -89,12 +98,20 @@ const ProductImagePage = withStyles(styles, { name: "ProductImagePage" })(
                     onRowClick={onRowClick}
                   />
                   <Card>
-                  <CardTitle title={i18n.t("Photo Information")} />
+                    <CardTitle
+                      title={intl.formatMessage({
+                        defaultMessage: "Photo Information",
+                        description: "section header"
+                      })}
+                    />
                     <CardContent>
                       <TextField
                         name="description"
-                      label={i18n.t("Description")}
+                        label={intl.formatMessage(commonMessages.description)}
-                      helperText={i18n.t("Optional")}
+                        helperText={intl.formatMessage({
+                          defaultMessage: "Optional",
+                          description: "field is optional"
+                        })}
                         disabled={disabled}
                         onChange={change}
                         value={data.description}
@@ -106,7 +123,12 @@ const ProductImagePage = withStyles(styles, { name: "ProductImagePage" })(
                 </div>
                 <div>
                   <Card>
-                  <CardTitle title={i18n.t("Photo View")} />
+                    <CardTitle
+                      title={intl.formatMessage({
+                        defaultMessage: "Photo View",
+                        description: "section header"
+                      })}
+                    />
                     <CardContent>
                       {!!image ? (
                         <div className={classes.imageContainer}>
@@ -130,7 +152,8 @@ const ProductImagePage = withStyles(styles, { name: "ProductImagePage" })(
           );
         }}
       </Form>
-  )
+    );
+  }
 );
 ProductImagePage.displayName = "ProductImagePage";
 export default ProductImagePage;

src/products/components/ProductImages/ProductImages.tsx

@@ -2,6 +2,7 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import classNames from "classnames";
+import { useIntl } from "react-intl";
 
 import {
   createStyles,
@@ -12,10 +13,10 @@ import {
 import CardTitle from "@saleor/components/CardTitle";
 import ImageTile from "@saleor/components/ImageTile";
 import ImageUpload from "@saleor/components/ImageUpload";
+import { commonMessages } from "@saleor/intl";
 import { ReorderAction } from "@saleor/types";
 import React from "react";
 import { SortableContainer, SortableElement } from "react-sortable-hoc";
-import i18n from "../../../i18n";
 import { ProductDetails_product_images } from "../../types/ProductDetails";
 
 const styles = (theme: Theme) =>
@@ -181,27 +182,34 @@ const ProductImages = withStyles(styles, { name: "ProductImages" })(
     onImageDelete,
     onImageReorder,
     onImageUpload
-  }: ProductImagesProps) => (
+  }: ProductImagesProps) => {
+    const intl = useIntl();
+    const upload = React.useRef(null);
+
+    return (
       <Card className={classes.card}>
         <CardTitle
-        title={i18n.t("Images")}
+          title={intl.formatMessage({
+            defaultMessage: "Images",
+            description: "section header"
+          })}
           toolbar={
             <>
               <Button
-              onClick={() => this.upload.click()}
+                onClick={() => upload.current.click()}
                 disabled={loading}
                 variant="text"
                 color="primary"
                 data-tc="button-upload-image"
               >
-              {i18n.t("Upload image")}
+                {intl.formatMessage(commonMessages.uploadImage)}
               </Button>
               <input
                 className={classes.fileField}
                 id="fileUpload"
                 onChange={event => onImageUpload(event.target.files[0])}
                 type="file"
-              ref={ref => (this.upload = ref)}
+                ref={upload}
               />
             </>
           }
@@ -249,7 +257,8 @@ const ProductImages = withStyles(styles, { name: "ProductImages" })(
           )}
         </div>
       </Card>
-  )
+    );
+  }
 );
 ProductImages.displayName = "ProductImages";
 export default ProductImages;

src/products/components/ProductListFilter/ProductListFilter.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import { FieldType, IFilter } from "@saleor/components/Filter";
 import FilterBar from "@saleor/components/FilterBar";
-import i18n from "@saleor/i18n";
 import { FilterProps } from "@saleor/types";
 import { StockAvailability } from "@saleor/types/globalTypes";
 import { ProductListUrlFilters } from "../../urls";
@@ -17,44 +17,74 @@ export enum ProductFilterKeys {
   stock,
   query
 }
+
+const ProductListFilter: React.FC<ProductListFilterProps> = props => {
+  const intl = useIntl();
+
   const filterMenu: IFilter = [
     {
       children: [],
       data: {
-      additionalText: i18n.t("is set as"),
+        additionalText: intl.formatMessage({
-      fieldLabel: i18n.t("Status"),
+          defaultMessage: "is set as",
+          description: "product status is set as"
+        }),
+        fieldLabel: intl.formatMessage({
+          defaultMessage: "Status",
+          description: "product status"
+        }),
         options: [
           {
-          label: i18n.t("Visible"),
+            label: intl.formatMessage({
+              defaultMessage: "Visible",
+              description: "product is visible"
+            }),
             value: true
           },
           {
-          label: i18n.t("Hidden"),
+            label: intl.formatMessage({
+              defaultMessage: "Hidden",
+              description: "product is hidden"
+            }),
             value: false
           }
         ],
         type: FieldType.select
       },
-    label: i18n.t("Visibility"),
+      label: intl.formatMessage({
+        defaultMessage: "Visibility",
+        description: "product visibility"
+      }),
       value: ProductFilterKeys.published.toString()
     },
     {
       children: [],
       data: {
-      fieldLabel: i18n.t("Stock quantity"),
+        fieldLabel: intl.formatMessage({
+          defaultMessage: "Stock quantity"
+        }),
         options: [
           {
-          label: i18n.t("Available"),
+            label: intl.formatMessage({
+              defaultMessage: "Available",
+              description: "product status"
+            }),
             value: StockAvailability.IN_STOCK
           },
           {
-          label: i18n.t("Out Of Stock"),
+            label: intl.formatMessage({
+              defaultMessage: "Out Of Stock",
+              description: "product status"
+            }),
             value: StockAvailability.OUT_OF_STOCK
           }
         ],
         type: FieldType.select
       },
-    label: i18n.t("Stock"),
+      label: intl.formatMessage({
+        defaultMessage: "Stock",
+        description: "product stock"
+      }),
       value: ProductFilterKeys.stock.toString()
     },
     {
@@ -62,34 +92,46 @@ const filterMenu: IFilter = [
         {
           children: [],
           data: {
-          additionalText: i18n.t("equals"),
+            additionalText: intl.formatMessage({
+              defaultMessage: "equals",
+              description: "product price"
+            }),
             fieldLabel: null,
             type: FieldType.price
           },
-        label: i18n.t("Specific Price"),
+          label: intl.formatMessage({
+            defaultMessage: "Specific Price"
+          }),
           value: ProductFilterKeys.priceEqual.toString()
         },
         {
           children: [],
           data: {
-          fieldLabel: i18n.t("Range"),
+            fieldLabel: intl.formatMessage({
+              defaultMessage: "Range"
+            }),
             type: FieldType.rangePrice
           },
-        label: i18n.t("Range"),
+          label: intl.formatMessage({
+            defaultMessage: "Range"
+          }),
           value: ProductFilterKeys.priceRange.toString()
         }
       ],
       data: {
-      fieldLabel: i18n.t("Price"),
+        fieldLabel: intl.formatMessage({
+          defaultMessage: "Price"
+        }),
         type: FieldType.range
       },
-    label: i18n.t("Price"),
+      label: intl.formatMessage({
+        defaultMessage: "Price"
+      }),
       value: ProductFilterKeys.price.toString()
     }
   ];
 
-const ProductListFilter: React.FC<ProductListFilterProps> = props => (
+  return <FilterBar {...props} filterMenu={filterMenu} />;
-  <FilterBar {...props} filterMenu={filterMenu} />
+};
-);
 ProductListFilter.displayName = "ProductListFilter";
 export default ProductListFilter;

src/products/components/ProductListPage/ProductListPage.tsx

@@ -4,6 +4,7 @@ import { Theme } from "@material-ui/core/styles";
 import AddIcon from "@material-ui/icons/Add";
 import makeStyles from "@material-ui/styles/makeStyles";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { CategoryDetails_category_products_edges_node } from "@saleor/categories/types/CategoryDetails";
 import ColumnPicker, {
@@ -14,7 +15,7 @@ import PageHeader from "@saleor/components/PageHeader";
 import ProductList from "@saleor/components/ProductList";
 import { ProductListColumns } from "@saleor/config";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import i18n from "@saleor/i18n";
+import { sectionNames } from "@saleor/intl";
 import { FilterPageProps, ListActions, PageListProps } from "@saleor/types";
 import { toggle } from "@saleor/utils/lists";
 import { ProductListUrlFilters } from "../../urls";
@@ -53,6 +54,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
     onUpdateListSettings,
     ...listProps
   } = props;
+  const intl = useIntl();
   const classes = useStyles(props);
   const [selectedColumns, setSelectedColumns] = useStateFromProps(
     settings.columns
@@ -74,22 +76,31 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
 
   const columns: ColumnPickerChoice[] = [
     {
-      label: i18n.t("Published"),
+      label: intl.formatMessage({
+        defaultMessage: "Published",
+        description: "product status"
+      }),
       value: "isPublished" as ProductListColumns
     },
     {
-      label: i18n.t("Price"),
+      label: intl.formatMessage({
+        defaultMessage: "Price",
+        description: "product price"
+      }),
       value: "price" as ProductListColumns
     },
     {
-      label: i18n.t("Type"),
+      label: intl.formatMessage({
+        defaultMessage: "Type",
+        description: "product type"
+      }),
       value: "productType" as ProductListColumns
     }
   ];
 
   return (
     <Container>
-      <PageHeader title={i18n.t("Products")}>
+      <PageHeader title={intl.formatMessage(sectionNames.products)}>
         <ColumnPicker
           className={classes.columnPicker}
           columns={columns}
@@ -105,19 +116,27 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           variant="contained"
           data-tc="add-product"
         >
-          {i18n.t("Add product")} <AddIcon />
+          <FormattedMessage defaultMessage="Add Product" description="button" />
+          <AddIcon />
         </Button>
       </PageHeader>
       <Card>
         <ProductListFilter
-          allTabLabel={i18n.t("All Products")}
+          allTabLabel={intl.formatMessage({
+            defaultMessage: "All Products",
+            description: "tab name"
+          })}
           currencySymbol={currencySymbol}
           currentTab={currentTab}
-          filterLabel={i18n.t("Select all products where:")}
+          filterLabel={intl.formatMessage({
+            defaultMessage: "Select all products where:"
+          })}
           filterTabs={filterTabs}
           filtersList={filtersList}
           initialSearch={initialSearch}
-          searchPlaceholder={i18n.t("Search Products...")}
+          searchPlaceholder={intl.formatMessage({
+            defaultMessage: "Search Products..."
+          })}
           onAll={onAll}
           onSearchChange={onSearchChange}
           onFilterAdd={onFilterAdd}

src/products/components/ProductOrganization/ProductOrganization.tsx

@@ -8,6 +8,7 @@ import {
 } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
@@ -20,7 +21,6 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "@saleor/components/SingleAutocompleteSelectField";
 import { ChangeEvent } from "@saleor/hooks/useForm";
-import i18n from "@saleor/i18n";
 import { maybe } from "@saleor/misc";
 import { FormErrors } from "@saleor/types";
 
@@ -86,9 +86,17 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
     onCategoryChange,
     onCollectionChange,
     onProductTypeChange
-  }: ProductOrganizationProps) => (
+  }: ProductOrganizationProps) => {
+    const intl = useIntl();
+
+    return (
       <Card className={classes.card}>
-      <CardTitle title={i18n.t("Organize Product")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Organize Product",
+            description: "section header"
+          })}
+        />
         <CardContent>
           {canChangeType ? (
             <SingleAutocompleteSelectField
@@ -97,7 +105,9 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
               helperText={errors.productType}
               name="productType"
               disabled={disabled}
-            label={i18n.t("Product Type")}
+              label={intl.formatMessage({
+                defaultMessage: "Product Type"
+              })}
               choices={productTypes}
               value={data.productType}
               onChange={onProductTypeChange}
@@ -106,19 +116,25 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
           ) : (
             <>
               <Typography className={classes.label} variant="caption">
-              {i18n.t("Product Type")}
+                <FormattedMessage defaultMessage="Product Type" />
               </Typography>
               <Typography>{maybe(() => productType.name, "...")}</Typography>
               <CardSpacer />
               <Typography className={classes.label} variant="caption">
-              {i18n.t("Product Type")}
+                <FormattedMessage defaultMessage="Product Type" />
               </Typography>
               <Typography>
                 {maybe(
                   () =>
                     productType.hasVariants
-                    ? i18n.t("Configurable")
+                      ? intl.formatMessage({
-                    : i18n.t("Simple"),
+                          defaultMessage: "Configurable",
+                          description: "product is configurable"
+                        })
+                      : intl.formatMessage({
+                          defaultMessage: "Simple",
+                          description: "product is not configurable"
+                        }),
                   "..."
                 )}
               </Typography>
@@ -132,7 +148,9 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
             error={!!errors.category}
             helperText={errors.category}
             disabled={disabled}
-          label={i18n.t("Category")}
+            label={intl.formatMessage({
+              defaultMessage: "Category"
+            })}
             choices={disabled ? [] : categories}
             name="category"
             value={data.category}
@@ -145,20 +163,25 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
           <FormSpacer />
           <MultiAutocompleteSelectField
             displayValues={collectionsInputDisplayValue}
-          label={i18n.t("Collections")}
+            label={intl.formatMessage({
+              defaultMessage: "Collections"
+            })}
             choices={disabled ? [] : collections}
             name="collections"
             value={data.collections}
-          helperText={i18n.t(
+            helperText={intl.formatMessage({
-            "*Optional. Adding product to collection helps users find it."
+              defaultMessage:
-          )}
+                "*Optional. Adding product to collection helps users find it.",
+              description: "field is optional"
+            })}
             onChange={onCollectionChange}
             fetchChoices={fetchCollections}
             data-tc="collections"
           />
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 ProductOrganization.displayName = "ProductOrganization";
 export default ProductOrganization;

src/products/components/ProductPricing/ProductPricing.tsx

@@ -7,11 +7,11 @@ import {
   WithStyles
 } from "@material-ui/core/styles";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import PriceField from "@saleor/components/PriceField";
-import i18n from "../../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -33,12 +33,22 @@ interface ProductPricingProps extends WithStyles<typeof styles> {
 }
 
 const ProductPricing = withStyles(styles, { name: "ProductPricing" })(
-  ({ classes, currency, data, disabled, onChange }: ProductPricingProps) => (
+  ({ classes, currency, data, disabled, onChange }: ProductPricingProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
-      <CardTitle title={i18n.t("Pricing")}>
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Pricing",
+            description: "product pricing"
+          })}
+        >
           <ControlledCheckbox
             name="chargeTaxes"
-          label={i18n.t("Charge taxes for this item")}
+            label={intl.formatMessage({
+              defaultMessage: "Charge taxes for this item"
+            })}
             checked={data.chargeTaxes}
             onChange={onChange}
             disabled={disabled}
@@ -48,7 +58,10 @@ const ProductPricing = withStyles(styles, { name: "ProductPricing" })(
           <div className={classes.root}>
             <PriceField
               disabled={disabled}
-            label={i18n.t("Price")}
+              label={intl.formatMessage({
+                defaultMessage: "Price",
+                description: "product price"
+              })}
               name="basePrice"
               value={data.basePrice}
               currencySymbol={currency}
@@ -57,7 +70,8 @@ const ProductPricing = withStyles(styles, { name: "ProductPricing" })(
           </div>
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 ProductPricing.displayName = "ProductPricing";
 export default ProductPricing;

src/products/components/ProductStock/ProductStock.tsx

@@ -8,9 +8,9 @@ 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 i18n from "../../../i18n";
 import { maybe } from "../../../misc";
 import { ProductDetails_product } from "../../types/ProductDetails";
 
@@ -35,15 +35,33 @@ interface ProductStockProps extends WithStyles<typeof styles> {
 }
 
 const ProductStock = withStyles(styles, { name: "ProductStock" })(
-  ({ classes, data, disabled, product, onChange, errors }: ProductStockProps) => (
+  ({
+    classes,
+    data,
+    disabled,
+    product,
+    onChange,
+    errors
+  }: ProductStockProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
-      <CardTitle title={i18n.t("Inventory")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Inventory",
+            description: "product stock, section header",
+            id: "productStockHeader"
+          })}
+        />
         <CardContent>
           <div className={classes.root}>
             <TextField
               disabled={disabled}
               name="sku"
-            label={i18n.t("SKU (Stock Keeping Unit)")}
+              label={intl.formatMessage({
+                defaultMessage: "SKU (Stock Keeping Unit)"
+              })}
               value={data.sku}
               onChange={onChange}
               error={!!errors.sku}
@@ -52,22 +70,35 @@ const ProductStock = withStyles(styles, { name: "ProductStock" })(
             <TextField
               disabled={disabled}
               name="stockQuantity"
-            label={i18n.t("Inventory")}
+              label={intl.formatMessage({
+                defaultMessage: "Inventory",
+                description: "product stock",
+                id: "prodictStockInventoryLabel"
+              })}
               value={data.stockQuantity}
               type="number"
               onChange={onChange}
               helperText={
                 product
-                ? i18n.t("Allocated: {{ quantity }}", {
+                  ? intl.formatMessage(
-                    quantity: maybe(() => product.variants[0].quantityAllocated)
+                      {
-                  })
+                        defaultMessage: "Allocated: {quantity}",
+                        description: "allocated product stock"
+                      },
+                      {
+                        quantity: maybe(
+                          () => product.variants[0].quantityAllocated
+                        )
+                      }
+                    )
                   : undefined
               }
             />
           </div>
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 ProductStock.displayName = "ProductStock";
 export default ProductStock;

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -1,5 +1,6 @@
 import { convertFromRaw, RawDraftContentState } from "draft-js";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
@@ -15,7 +16,7 @@ import { SearchCategories_categories_edges_node } from "@saleor/containers/Searc
 import { SearchCollections_collections_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
 import useFormset from "@saleor/hooks/useFormset";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import i18n from "@saleor/i18n";
+import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { ListActions, UserError } from "@saleor/types";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
@@ -107,6 +108,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   toggleAll,
   toolbar
 }) => {
+  const intl = useIntl();
   const attributeInput = React.useMemo(
     () => getAttributeInputFromProduct(product),
     [product]
@@ -188,7 +190,9 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
         return (
           <>
             <Container>
-              <AppHeader onBack={onBack}>{i18n.t("Products")}</AppHeader>
+              <AppHeader onBack={onBack}>
+                {intl.formatMessage(sectionNames.products)}
+              </AppHeader>
               <PageHeader title={header} />
               <Grid>
                 <div>

src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx

@@ -1,6 +1,7 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Grid from "@saleor/components/Grid";
@@ -9,7 +10,7 @@ import SingleAutocompleteSelectField, {
 } from "@saleor/components/SingleAutocompleteSelectField";
 import Skeleton from "@saleor/components/Skeleton";
 import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
-import i18n from "../../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { ProductVariant_attributes_attribute_values } from "../../types/ProductVariant";
 
 export interface VariantAttributeInputData {
@@ -67,9 +68,14 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
   disabled,
   errors,
   onChange
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <Card>
-    <CardTitle title={i18n.t("General Information")} />
+      <CardTitle
+        title={intl.formatMessage(commonMessages.generalInformations)}
+      />
       <CardContent>
         <Grid variant="uniform">
           {attributes === undefined ? (
@@ -102,5 +108,6 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
       </CardContent>
     </Card>
   );
+};
 ProductVariantAttributes.displayName = "ProductVariantAttributes";
 export default ProductVariantAttributes;

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
@@ -16,7 +17,6 @@ import {
   getVariantAttributeErrors,
   getVariantAttributeInputFromProduct
 } from "@saleor/products/utils/data";
-import i18n from "../../../i18n";
 import { maybe } from "../../../misc";
 import { UserError } from "../../../types";
 import { ProductVariantCreateData_product } from "../../types/ProductVariantCreateData";
@@ -63,6 +63,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   onSubmit,
   onVariantClick
 }) => {
+  const intl = useIntl();
   const attributeInput = React.useMemo(
     () => getVariantAttributeInputFromProduct(product),
     [product]
@@ -150,8 +151,14 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
             <SaveButtonBar
               disabled={loading || !onSubmit || !hasChanged}
               labels={{
-                delete: i18n.t("Remove variant"),
+                delete: intl.formatMessage({
-                save: i18n.t("Save variant")
+                  defaultMessage: "Delete Variant",
+                  description: "button"
+                }),
+                save: intl.formatMessage({
+                  defaultMessage: "Save variant",
+                  description: "button"
+                })
               }}
               state={saveButtonBarState}
               onCancel={onBack}

src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx

@@ -11,11 +11,12 @@ import {
   WithStyles
 } from "@material-ui/core/styles";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
-import i18n from "../../../i18n";
+import { buttonMessages } from "@saleor/intl";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -50,21 +51,25 @@ const ProductVariantDeleteDialog = withStyles(styles, {
   }: ProductVariantDeleteDialogProps) => (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>
-        {i18n.t("Delete variant", { context: "title" })}
+        <FormattedMessage
+          defaultMessage="Delete Variant"
+          description="dialog header"
+        />
       </DialogTitle>
       <DialogContent>
-        <DialogContentText
+        <DialogContentText>
-          dangerouslySetInnerHTML={{
+          <FormattedMessage
-            __html: i18n.t(
+            defaultMessage="Are you sure you want to delete {name}?"
-              "Are you sure you want to remove <strong>{{name}}</strong>?",
+            description="delete product variant"
-              { name }
+            values={{
-            )
+              name
             }}
           />
+        </DialogContentText>
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
-          {i18n.t("Cancel", { context: "button" })}
+          <FormattedMessage {...buttonMessages.cancel} />
         </Button>
         <ConfirmButton
           transitionState={confirmButtonState}
@@ -72,7 +77,10 @@ const ProductVariantDeleteDialog = withStyles(styles, {
           variant="contained"
           onClick={onConfirm}
         >
-          {i18n.t("Delete variant", { context: "button" })}
+          <FormattedMessage
+            defaultMessage="Delete variant"
+            description="button"
+          />
         </ConfirmButton>
       </DialogActions>
     </Dialog>

src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx

@@ -11,8 +11,9 @@ import {
 } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
-import i18n from "../../../i18n";
+import { buttonMessages } from "@saleor/intl";
 import { ProductImage } from "../../types/ProductImage";
 
 const styles = (theme: Theme) =>
@@ -72,7 +73,10 @@ const ProductVariantImageSelectDialog = withStyles(styles, {
   }: ProductVariantImageSelectDialogProps) => (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>
-        {i18n.t("Image selection", { context: "title" })}
+        <FormattedMessage
+          defaultMessage="Image Selection"
+          description="dialog header"
+        />
       </DialogTitle>
       <DialogContent>
         <div className={classes.root}>
@@ -97,7 +101,7 @@ const ProductVariantImageSelectDialog = withStyles(styles, {
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>
-          {i18n.t("Close", { context: "button" })}
+          <FormattedMessage {...buttonMessages.back} />
         </Button>
       </DialogActions>
     </Dialog>

src/products/components/ProductVariantImages/ProductVariantImages.tsx

@@ -9,10 +9,10 @@ import {
 } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 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 { ProductImage } from "../../types/ProductImage";
 
 const styles = (theme: Theme) =>
@@ -54,10 +54,16 @@ interface ProductVariantImagesProps extends WithStyles<typeof styles> {
 
 export const ProductVariantImages = withStyles(styles, {
   name: "ProductVariantImages"
-})(({ classes, disabled, images, onImageAdd }: ProductVariantImagesProps) => (
+})(({ classes, disabled, images, onImageAdd }: ProductVariantImagesProps) => {
+  const intl = useIntl();
+
+  return (
     <Card>
       <CardTitle
-      title={i18n.t("Images")}
+        title={intl.formatMessage({
+          defaultMessage: "Images",
+          description: "section header"
+        })}
         toolbar={
           <Button
             color="primary"
@@ -65,7 +71,10 @@ export const ProductVariantImages = withStyles(styles, {
             disabled={disabled}
             onClick={onImageAdd}
           >
-          {i18n.t("Choose photos")}
+            <FormattedMessage
+              defaultMessage="Choose photos"
+              description="button"
+            />
           </Button>
         }
       />
@@ -83,12 +92,13 @@ export const ProductVariantImages = withStyles(styles, {
               ))
           ) : (
             <Typography className={classes.helpText}>
-            {i18n.t("Select a specific variant image from product images")}
+              <FormattedMessage defaultMessage="Select a specific variant image from product images" />
             </Typography>
           )}
         </div>
       </CardContent>
     </Card>
-));
+  );
+});
 ProductVariantImages.displayName = "ProductVariantImages";
 export default ProductVariantImages;

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -12,11 +12,11 @@ import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
-import i18n from "../../../i18n";
 import { maybe, renderCollection } from "../../../misc";
 import { ProductVariantCreateData_product_variants } from "../../types/ProductVariantCreateData";
 import { ProductVariantDetails_productVariant } from "../../types/ProductVariantDetails";
@@ -63,9 +63,17 @@ const ProductVariantNavigation = withStyles(styles, {
     variants,
     onAdd,
     onRowClick
-  }: ProductVariantNavigationProps) => (
+  }: ProductVariantNavigationProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
-      <CardTitle title={i18n.t("Variants")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Variants",
+            description: "section header"
+          })}
+        />
         <Table>
           <TableBody>
             {renderCollection(variants, variant => (
@@ -93,22 +101,32 @@ const ProductVariantNavigation = withStyles(styles, {
               <TableRow>
                 <TableCell colSpan={2}>
                   <Button color="primary" onClick={onAdd}>
-                  {i18n.t("Add variant")}
+                    <FormattedMessage
+                      defaultMessage="Add variant"
+                      description="button"
+                    />
                   </Button>
                 </TableCell>
               </TableRow>
             ) : (
               <TableRow>
-              <TableCellAvatar className={classes.tabActive} thumbnail={null} />
+                <TableCellAvatar
+                  className={classes.tabActive}
+                  thumbnail={null}
+                />
                 <TableCell className={classes.textLeft}>
-                {i18n.t("New Variant")}
+                  <FormattedMessage
+                    defaultMessage="New Variant"
+                    description="variant name"
+                  />
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
       </Card>
-  )
+    );
+  }
 );
 ProductVariantNavigation.displayName = "ProductVariantNavigation";
 export default ProductVariantNavigation;

src/products/components/ProductVariantPrice/ProductVariantPrice.tsx

@@ -7,10 +7,10 @@ import {
   WithStyles
 } from "@material-ui/core/styles";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import PriceField from "@saleor/components/PriceField";
-import i18n from "../../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -39,20 +39,34 @@ const ProductVariantPrice = withStyles(styles, { name: "ProductVariantPrice" })(
     priceOverride,
     loading,
     onChange
-  }: ProductVariantPriceProps) => (
+  }: ProductVariantPriceProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
-      <CardTitle title={i18n.t("Pricing")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Pricing",
+            description: "product pricing, section header"
+          })}
+        />
         <CardContent>
           <div className={classes.grid}>
             <div>
               <PriceField
                 error={!!errors.price_override}
                 name="priceOverride"
-              label={i18n.t("Selling price override")}
+                label={intl.formatMessage({
+                  defaultMessage: "Selling price override"
+                })}
                 hint={
                   errors.price_override
                     ? errors.price_override
-                  : i18n.t("Optional")
+                    : intl.formatMessage({
+                        defaultMessage: "Optional",
+                        description: "optional field",
+                        id: "productVariantPriceOptionalPriceOverrideField"
+                      })
                 }
                 value={priceOverride}
                 currencySymbol={currencySymbol}
@@ -64,8 +78,18 @@ const ProductVariantPrice = withStyles(styles, { name: "ProductVariantPrice" })(
               <PriceField
                 error={!!errors.cost_price}
                 name="costPrice"
-              label={i18n.t("Cost price override")}
+                label={intl.formatMessage({
-              hint={errors.cost_price ? errors.cost_price : i18n.t("Optional")}
+                  defaultMessage: "Cost price override"
+                })}
+                hint={
+                  errors.cost_price
+                    ? errors.cost_price
+                    : intl.formatMessage({
+                        defaultMessage: "Optional",
+                        description: "optional field",
+                        id: "productVariantPriceOptionalCostPriceField"
+                      })
+                }
                 value={costPrice}
                 currencySymbol={currencySymbol}
                 onChange={onChange}
@@ -75,7 +99,8 @@ const ProductVariantPrice = withStyles(styles, { name: "ProductVariantPrice" })(
           </div>
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 ProductVariantPrice.displayName = "ProductVariantPrice";
 export default ProductVariantPrice;

src/products/components/ProductVariantStock/ProductVariantStock.tsx

@@ -8,9 +8,9 @@ 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 i18n from "../../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -42,9 +42,17 @@ const ProductVariantStock = withStyles(styles, { name: "ProductVariantStock" })(
     stockAllocated,
     loading,
     onChange
-  }: ProductVariantStockProps) => (
+  }: ProductVariantStockProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
-      <CardTitle title={i18n.t("Stock")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Stock",
+            description: "product variant stock, section header"
+          })}
+        />
         <CardContent>
           <div className={classes.grid}>
             <div>
@@ -52,15 +60,23 @@ const ProductVariantStock = withStyles(styles, { name: "ProductVariantStock" })(
                 error={!!errors.quantity}
                 name="quantity"
                 value={quantity}
-              label={i18n.t("Inventory")}
+                label={intl.formatMessage({
+                  defaultMessage: "Inventory",
+                  description: "product variant stock"
+                })}
                 helperText={
                   errors.quantity
                     ? errors.quantity
                     : !!stockAllocated
-                  ? i18n.t("Allocated: {{ quantity }}", {
+                    ? intl.formatMessage(
-                      context: "variant allocated stock",
+                        {
+                          defaultMessage: "Allocated: {quantity}",
+                          description: "variant allocated stock"
+                        },
+                        {
                           quantity: stockAllocated
-                    })
+                        }
+                      )
                     : undefined
                 }
                 onChange={onChange}
@@ -74,7 +90,9 @@ const ProductVariantStock = withStyles(styles, { name: "ProductVariantStock" })(
                 helperText={errors.sku}
                 name="sku"
                 value={sku}
-              label={i18n.t("SKU (Stock Keeping Unit)")}
+                label={intl.formatMessage({
+                  defaultMessage: "SKU (Stock Keeping Unit)"
+                })}
                 onChange={onChange}
                 disabled={loading}
                 fullWidth
@@ -83,7 +101,8 @@ const ProductVariantStock = withStyles(styles, { name: "ProductVariantStock" })(
           </div>
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 ProductVariantStock.displayName = "ProductVariantStock";
 export default ProductVariantStock;

src/products/components/ProductVariants/ProductVariants.tsx

@@ -14,6 +14,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
@@ -21,7 +22,6 @@ import Money from "@saleor/components/Money";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
-import i18n from "../../../i18n";
 import { renderCollection } from "../../../misc";
 import { ListActions } from "../../../types";
 import { ProductDetails_product_variants } from "../../types/ProductDetails";
@@ -88,10 +88,16 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
     toggle,
     toggleAll,
     toolbar
-  }: ProductVariantsProps) => (
+  }: ProductVariantsProps) => {
+    const intl = useIntl();
+
+    return (
       <Card>
         <CardTitle
-        title={i18n.t("Variants")}
+          title={intl.formatMessage({
+            defaultMessage: "Variants",
+            description: "section header"
+          })}
           toolbar={
             <>
               <Button
@@ -100,7 +106,10 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
                 color="primary"
                 data-tc="button-edit-attributes"
               >
-              {i18n.t("Edit attributes")}
+                <FormattedMessage
+                  defaultMessage="Edit attributes"
+                  description="product variant attributes, button"
+                />
               </Button>
               <Button
                 onClick={onVariantAdd}
@@ -108,16 +117,17 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
                 color="primary"
                 data-tc="button-add-variant"
               >
-              {i18n.t("Add variant")}
+                <FormattedMessage
+                  defaultMessage="Add variant"
+                  description="button"
+                />
               </Button>
             </>
           }
         />
         <CardContent>
           <Typography>
-          {i18n.t(
+            <FormattedMessage defaultMessage="Use variants for products that come in a variety of versions for example different sizes or colors" />
-            "Use variants for products that come in a variety of versions for example different sizes or colors"
-          )}
           </Typography>
         </CardContent>
         <Table className={classes.denseTable}>
@@ -129,14 +139,27 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
             toggleAll={toggleAll}
             toolbar={toolbar}
           >
-          <TableCell className={classes.colName}>{i18n.t("Name")}</TableCell>
+            <TableCell className={classes.colName}>
-          <TableCell className={classes.colStatus}>
+              <FormattedMessage
-            {i18n.t("Status")}
+                defaultMessage="Name"
+                description="product variant name"
+              />
+            </TableCell>
+            <TableCell className={classes.colStatus}>
+              <FormattedMessage
+                defaultMessage="Status"
+                description="product variant status"
+              />
+            </TableCell>
+            <TableCell className={classes.colSku}>
+              <FormattedMessage defaultMessage="SKU" />
             </TableCell>
-          <TableCell className={classes.colSku}>{i18n.t("SKU")}</TableCell>
             <Hidden smDown>
               <TableCell className={classes.colPrice}>
-              {i18n.t("Price")}
+                <FormattedMessage
+                  defaultMessage="Price"
+                  description="product variant price"
+                />
               </TableCell>
             </Hidden>
           </TableHead>
@@ -168,11 +191,19 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
                     <TableCell className={classes.colStatus}>
                       {variant ? (
                         <StatusLabel
-                        status={variant.stockQuantity > 0 ? "success" : "error"}
+                          status={
+                            variant.stockQuantity > 0 ? "success" : "error"
+                          }
                           label={
                             variant.stockQuantity > 0
-                            ? i18n.t("Available")
+                              ? intl.formatMessage({
-                            : i18n.t("Unavailable")
+                                  defaultMessage: "Available",
+                                  description: "product variant status"
+                                })
+                              : intl.formatMessage({
+                                  defaultMessage: "Unavailable",
+                                  description: "product variant status"
+                                })
                           }
                         />
                       ) : (
@@ -203,7 +234,7 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
               () => (
                 <TableRow>
                   <TableCell colSpan={numberOfColumns}>
-                  {i18n.t("This product has no variants")}
+                    <FormattedMessage defaultMessage="This product has no variants" />
                   </TableCell>
                 </TableRow>
               )
@@ -211,7 +242,8 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
           </TableBody>
         </Table>
       </Card>
-  )
+    );
+  }
 );
 ProductVariants.displayName = "ProductVariants";
 export default ProductVariants;

src/products/index.tsx

@@ -1,9 +1,10 @@
 import { parse as parseQs } from "qs";
 import React from "react";
+import { useIntl } from "react-intl";
 import { Route, RouteComponentProps, Switch } from "react-router-dom";
 
+import { sectionNames } from "@saleor/intl";
 import { WindowTitle } from "../components/WindowTitle";
-import i18n from "../i18n";
 import {
   productAddPath,
   productImagePath,
@@ -86,9 +87,12 @@ const ProductVariantCreate: React.StatelessComponent<
   );
 };
 
-const Component = () => (
+const Component = () => {
+  const intl = useIntl();
+
+  return (
     <>
-    <WindowTitle title={i18n.t("Products")} />
+      <WindowTitle title={intl.formatMessage(sectionNames.products)} />
       <Switch>
         <Route exact path={productListPath} component={ProductList} />
         <Route exact path={productAddPath} component={ProductCreate} />
@@ -109,5 +113,6 @@ const Component = () => (
       </Switch>
     </>
   );
+};
 
 export default Component;

src/products/views/ProductCreate.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -7,7 +8,6 @@ import useShop from "@saleor/hooks/useShop";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
 import SearchCategories from "../../containers/SearchCategories";
 import SearchCollections from "../../containers/SearchCollections";
-import i18n from "../../i18n";
 import { decimal, getMutationState, maybe } from "../../misc";
 import ProductCreatePage, {
   ProductCreatePageSubmitData
@@ -27,6 +27,7 @@ export const ProductUpdate: React.StatelessComponent<
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
+  const intl = useIntl();
 
   const handleAttributesEdit = undefined;
   const handleBack = () => navigate(productListUrl());
@@ -41,7 +42,9 @@ export const ProductUpdate: React.StatelessComponent<
                 const handleSuccess = (data: ProductCreate) => {
                   if (data.productCreate.errors.length === 0) {
                     notify({
-                      text: i18n.t("Product created")
+                      text: intl.formatMessage({
+                        defaultMessage: "Product created"
+                      })
                     });
                     navigate(productUrl(data.productCreate.product.id));
                   } else {
@@ -109,7 +112,12 @@ export const ProductUpdate: React.StatelessComponent<
                       );
                       return (
                         <>
-                          <WindowTitle title={i18n.t("Create product")} />
+                          <WindowTitle
+                            title={intl.formatMessage({
+                              defaultMessage: "Create Product",
+                              description: "window title"
+                            })}
+                          />
                           <ProductCreatePage
                             currency={maybe(() => shop.defaultCurrency)}
                             categories={maybe(
@@ -127,7 +135,10 @@ export const ProductUpdate: React.StatelessComponent<
                             )}
                             fetchCategories={searchCategory}
                             fetchCollections={searchCollection}
-                            header={i18n.t("New Product")}
+                            header={intl.formatMessage({
+                              defaultMessage: "New Product",
+                              description: "page header"
+                            })}
                             productTypes={maybe(() =>
                               data.productTypes.edges.map(edge => edge.node)
                             )}

src/products/views/ProductImage.tsx

@@ -1,10 +1,10 @@
 import DialogContentText from "@material-ui/core/DialogContentText";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import ActionDialog from "@saleor/components/ActionDialog";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import i18n from "../../i18n";
 import { getMutationState, maybe } from "../../misc";
 import ProductImagePage from "../components/ProductImagePage";
 import {
@@ -32,6 +32,7 @@ export const ProductImage: React.StatelessComponent<ProductImageProps> = ({
 }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   const handleBack = () => navigate(productUrl(productId));
   const handleUpdateSuccess = (data: ProductImageUpdate) => {
@@ -103,19 +104,15 @@ export const ProductImage: React.StatelessComponent<ProductImageProps> = ({
                         }
                         onConfirm={handleDelete}
                         open={params.action === "remove"}
-                        title={i18n.t("Remove image", {
+                        title={intl.formatMessage({
-                          context: "modal title"
+                          defaultMessage: "Remove Image",
+                          description: "dialog header"
                         })}
                         variant="delete"
                         confirmButtonState={deleteTransitionState}
                       >
                         <DialogContentText>
-                          {i18n.t(
+                          <FormattedMessage defaultMessage="Are you sure you want to remove this image?" />
-                            "Are you sure you want to remove this image?",
-                            {
-                              context: "modal content"
-                            }
-                          )}
                         </DialogContentText>
                       </ActionDialog>
                     </>

src/products/views/ProductList/ProductList.tsx

@@ -3,6 +3,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import ActionDialog from "@saleor/components/ActionDialog";
 import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
@@ -19,7 +20,6 @@ import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
-import i18n from "@saleor/i18n";
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import ProductListPage from "../../components/ProductListPage";
@@ -67,6 +67,8 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
   const { updateListSettings, settings } = useListSettings<ProductListColumns>(
     ListViews.PRODUCT_LIST
   );
+  const intl = useIntl();
+
   const tabs = getFilterTabs();
 
   const currentTab =
@@ -155,7 +157,9 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
           if (data.productBulkDelete.errors.length === 0) {
             closeModal();
             notify({
-              text: i18n.t("Products removed")
+              text: intl.formatMessage({
+                defaultMessage: "Products removed"
+              })
             });
             reset();
             refetch();
@@ -166,7 +170,10 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
           if (data.productBulkPublish.errors.length === 0) {
             closeModal();
             notify({
-              text: i18n.t("Changed publication status")
+              text: intl.formatMessage({
+                defaultMessage: "Changed publication status",
+                description: "product status update notification"
+              })
             });
             reset();
             refetch();
@@ -235,13 +242,19 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
                                 openModal("unpublish", listElements)
                               }
                             >
-                              {i18n.t("Unpublish")}
+                              <FormattedMessage
+                                defaultMessage="Unpublish"
+                                description="unpublish product, button"
+                              />
                             </Button>
                             <Button
                               color="primary"
                               onClick={() => openModal("publish", listElements)}
                             >
-                              {i18n.t("Publish")}
+                              <FormattedMessage
+                                defaultMessage="Publish"
+                                description="publish product, button"
+                              />
                             </Button>
                             <IconButton
                               color="primary"
@@ -274,22 +287,29 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
                             variables: { ids: params.ids }
                           })
                         }
-                        title={i18n.t("Remove products")}
+                        title={intl.formatMessage({
+                          defaultMessage: "Delete Products",
+                          description: "dialog header"
+                        })}
                         variant="delete"
                       >
-                        <DialogContentText
+                        <DialogContentText>
-                          dangerouslySetInnerHTML={{
+                          <FormattedMessage
-                            __html: i18n.t(
+                            defaultMessage="Are you sure you want to delete {counter, plural,
-                              "Are you sure you want to remove <strong>{{ number }}</strong> products?",
+            one {this product}
-                              {
+            other {{displayQuantity} products}
-                                number: maybe(
+          }?"
-                                  () => params.ids.length.toString(),
+                            description="dialog content"
-                                  "..."
+                            values={{
-                                )
+                              counter: maybe(() => params.ids.length),
-                              }
+                              displayQuantity: (
+                                <strong>
+                                  {maybe(() => params.ids.length)}
+                                </strong>
                               )
                             }}
                           />
+                        </DialogContentText>
                       </ActionDialog>
                       <ActionDialog
                         open={params.action === "publish"}
@@ -303,21 +323,28 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
                             }
                           })
                         }
-                        title={i18n.t("Publish products")}
+                        title={intl.formatMessage({
+                          defaultMessage: "Publish Products",
+                          description: "dialog header"
+                        })}
                       >
-                        <DialogContentText
+                        <DialogContentText>
-                          dangerouslySetInnerHTML={{
+                          <FormattedMessage
-                            __html: i18n.t(
+                            defaultMessage="Are you sure you want to publish {counter, plural,
-                              "Are you sure you want to publish <strong>{{ number }}</strong> products?",
+            one {this product}
-                              {
+            other {{displayQuantity} products}
-                                number: maybe(
+          }?"
-                                  () => params.ids.length.toString(),
+                            description="dialog content"
-                                  "..."
+                            values={{
-                                )
+                              counter: maybe(() => params.ids.length),
-                              }
+                              displayQuantity: (
+                                <strong>
+                                  {maybe(() => params.ids.length)}
+                                </strong>
                               )
                             }}
                           />
+                        </DialogContentText>
                       </ActionDialog>
                       <ActionDialog
                         open={params.action === "unpublish"}
@@ -331,21 +358,28 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
                             }
                           })
                         }
-                        title={i18n.t("Unpublish products")}
+                        title={intl.formatMessage({
+                          defaultMessage: "Unpublish Products",
+                          description: "dialog header"
+                        })}
                       >
-                        <DialogContentText
+                        <DialogContentText>
-                          dangerouslySetInnerHTML={{
+                          <FormattedMessage
-                            __html: i18n.t(
+                            defaultMessage="Are you sure you want to unpublish {counter, plural,
-                              "Are you sure you want to unpublish <strong>{{ number }}</strong> products?",
+            one {this product}
-                              {
+            other {{displayQuantity} products}
-                                number: maybe(
+          }?"
-                                  () => params.ids.length.toString(),
+                            description="dialog content"
-                                  "..."
+                            values={{
-                                )
+                              counter: maybe(() => params.ids.length),
-                              }
+                              displayQuantity: (
+                                <strong>
+                                  {maybe(() => params.ids.length)}
+                                </strong>
                               )
                             }}
                           />
+                        </DialogContentText>
                       </ActionDialog>
                       <SaveFilterTabDialog
                         open={params.action === "save-search"}

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -2,6 +2,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import placeholderImg from "@assets/images/placeholder255x255.png";
 import ActionDialog from "@saleor/components/ActionDialog";
@@ -9,10 +10,10 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { commonMessages } from "@saleor/intl";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
 import SearchCategories from "../../../containers/SearchCategories";
 import SearchCollections from "../../../containers/SearchCollections";
-import i18n from "../../../i18n";
 import { getMutationState, maybe } from "../../../misc";
 import { productTypeUrl } from "../../../productTypes/urls";
 import ProductUpdatePage from "../../components/ProductUpdatePage";
@@ -53,6 +54,7 @@ export const ProductUpdate: React.StatelessComponent<ProductUpdateProps> = ({
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
+  const intl = useIntl();
 
   const openModal = (action: ProductUrlDialog) =>
     navigate(
@@ -73,12 +75,18 @@ export const ProductUpdate: React.StatelessComponent<ProductUpdateProps> = ({
             >
               {({ data, loading, refetch }) => {
                 const handleDelete = () => {
-                  notify({ text: i18n.t("Product removed") });
+                  notify({
+                    text: intl.formatMessage({
+                      defaultMessage: "Product removed"
+                    })
+                  });
                   navigate(productListUrl());
                 };
                 const handleUpdate = (data: ProductUpdateMutationResult) => {
                   if (data.productUpdate.errors.length === 0) {
-                    notify({ text: i18n.t("Saved changes") });
+                    notify({
+                      text: intl.formatMessage(commonMessages.savedChanges)
+                    });
                   } else {
                     const attributeError = data.productUpdate.errors.find(
                       err => err.field === "attributes"
@@ -103,7 +111,7 @@ export const ProductUpdate: React.StatelessComponent<ProductUpdateProps> = ({
                 };
                 const handleImageDeleteSuccess = () =>
                   notify({
-                    text: i18n.t("Image successfully deleted")
+                    text: intl.formatMessage(commonMessages.savedChanges)
                   });
                 const handleVariantAdd = () =>
                   navigate(productVariantAddUrl(id));
@@ -276,18 +284,20 @@ export const ProductUpdate: React.StatelessComponent<ProductUpdateProps> = ({
                             confirmButtonState={deleteTransitionState}
                             onConfirm={() => deleteProduct.mutate({ id })}
                             variant="delete"
-                            title={i18n.t("Remove product")}
+                            title={intl.formatMessage({
+                              defaultMessage: "Delete Product",
+                              description: "dialog header"
+                            })}
                           >
-                            <DialogContentText
+                            <DialogContentText>
-                              dangerouslySetInnerHTML={{
+                              <FormattedMessage
-                                __html: i18n.t(
+                                defaultMessage="Are you sure you want to delete {name}?"
-                                  "Are you sure you want to remove <strong>{{ name }}</strong>?",
+                                description="delete product"
-                                  {
+                                values={{
                                   name: product ? product.name : undefined
-                                  }
-                                )
                                 }}
                               />
+                            </DialogContentText>
                           </ActionDialog>
                           <ActionDialog
                             open={params.action === "remove-variants"}
@@ -301,21 +311,28 @@ export const ProductUpdate: React.StatelessComponent<ProductUpdateProps> = ({
                               })
                             }
                             variant="delete"
-                            title={i18n.t("Remove product variants")}
+                            title={intl.formatMessage({
+                              defaultMessage: "Delete Product Variants",
+                              description: "dialog header"
+                            })}
                           >
-                            <DialogContentText
+                            <DialogContentText>
-                              dangerouslySetInnerHTML={{
+                              <FormattedMessage
-                                __html: i18n.t(
+                                defaultMessage="Are you sure you want to delete {counter, plural,
-                                  "Are you sure you want to remove <strong>{{ number }}</strong> variants?",
+            one {this variant}
-                                  {
+            other {{displayQuantity} variants}
-                                    number: maybe(
+          }?"
-                                      () => params.ids.length.toString(),
+                                description="dialog content"
-                                      "..."
+                                values={{
-                                    )
+                                  counter: maybe(() => params.ids.length),
-                                  }
+                                  displayQuantity: (
+                                    <strong>
+                                      {maybe(() => params.ids.length)}
+                                    </strong>
                                   )
                                 }}
                               />
+                            </DialogContentText>
                           </ActionDialog>
                         </>
                       );

src/products/views/ProductVariant.tsx

@@ -1,10 +1,11 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import placeholderImg from "@assets/images/placeholder255x255.png";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import i18n from "../../i18n";
+import { commonMessages } from "@saleor/intl";
 import { decimal, getMutationState, maybe } from "../../misc";
 import ProductVariantDeleteDialog from "../components/ProductVariantDeleteDialog";
 import ProductVariantPage, {
@@ -33,6 +34,7 @@ export const ProductVariant: React.StatelessComponent<ProductUpdateProps> = ({
 }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   return (
     <TypedProductVariantQuery
@@ -44,12 +46,16 @@ export const ProductVariant: React.StatelessComponent<ProductUpdateProps> = ({
         const variant = data ? data.productVariant : undefined;
         const handleBack = () => navigate(productUrl(productId));
         const handleDelete = () => {
-          notify({ text: i18n.t("Variant removed") });
+          notify({
+            text: intl.formatMessage({
+              defaultMessage: "Variant removed"
+            })
+          });
           navigate(productUrl(productId));
         };
         const handleUpdate = (data: VariantUpdate) => {
           if (!maybe(() => data.productVariantUpdate.errors.length)) {
-            notify({ text: i18n.t("Changes saved") });
+            notify({ text: intl.formatMessage(commonMessages.savedChanges) });
           }
         };
 

src/products/views/ProductVariantCreate.tsx

@@ -1,10 +1,10 @@
 import React from "react";
+import { useIntl } from "react-intl";
 
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
-import i18n from "../../i18n";
 import { decimal, getMutationState, maybe } from "../../misc";
 import ProductVariantCreatePage, {
   ProductVariantCreatePageSubmitData
@@ -24,6 +24,7 @@ export const ProductVariant: React.StatelessComponent<ProductUpdateProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
+  const intl = useIntl();
 
   return (
     <TypedProductVariantCreateQuery
@@ -34,7 +35,11 @@ export const ProductVariant: React.StatelessComponent<ProductUpdateProps> = ({
       {({ data, loading: productLoading }) => {
         const handleCreateSuccess = (data: VariantCreate) => {
           if (data.productVariantCreate.errors.length === 0) {
-            notify({ text: i18n.t("Product created") });
+            notify({
+              text: intl.formatMessage({
+                defaultMessage: "Product created"
+              })
+            });
             navigate(
               productVariantEditUrl(
                 productId,
@@ -81,7 +86,12 @@ export const ProductVariant: React.StatelessComponent<ProductUpdateProps> = ({
               );
               return (
                 <>
-                  <WindowTitle title={i18n.t("Create variant")} />
+                  <WindowTitle
+                    title={intl.formatMessage({
+                      defaultMessage: "Create Variant",
+                      description: "window title"
+                    })}
+                  />
                   <ProductVariantCreatePage
                     currencySymbol={maybe(() => shop.defaultCurrency)}
                     errors={maybe(
@@ -89,7 +99,10 @@ export const ProductVariant: React.StatelessComponent<ProductUpdateProps> = ({
                         variantCreateResult.data.productVariantCreate.errors,
                       []
                     )}
-                    header={i18n.t("Add Variant")}
+                    header={intl.formatMessage({
+                      defaultMessage: "Add Variant",
+                      description: "header"
+                    })}
                     loading={disableForm}
                     product={maybe(() => data.product)}
                     onBack={handleBack}