Refactor translations in pages section (#124)

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-08-26T17:42:51.721Z\n"
+"POT-Creation-Date: 2019-08-26T17:47:33.625Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -75,6 +75,14 @@ msgctxt "button"
 msgid "Add Menu"
 msgstr ""
 
+#: build/locale/src/pages/components/PageDetailsPage/PageDetailsPage.json
+#. [src.pages.components.PageDetailsPage.755314116] - page header
+#. defaultMessage is:
+#. Add Page
+msgctxt "page header"
+msgid "Add Page"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.json
 #. [src.orders.components.OrderProductAddDialog.2775402904] - dialog header
 #. defaultMessage is:
@@ -171,6 +179,14 @@ msgctxt "description"
 msgid "Add new menu item to begin creating menu"
 msgstr ""
 
+#: build/locale/src/pages/components/PageListPage/PageListPage.json
+#. [src.pages.components.PageListPage.1767905232] - button
+#. defaultMessage is:
+#. Add page
+msgctxt "button"
+msgid "Add page"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
 #. [src.categories.components.CategoryProducts.3554578821] - button
 #. defaultMessage is:
@@ -215,6 +231,14 @@ msgctxt "description"
 msgid "Add search engine title and description to make this collection easier to find"
 msgstr ""
 
+#: build/locale/src/pages/components/PageDetailsPage/PageDetailsPage.json
+#. [src.pages.components.PageDetailsPage.1996767833]
+#. defaultMessage is:
+#. Add search engine title and description to make this page easier to find
+msgctxt "description"
+msgid "Add search engine title and description to make this page easier to find"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.json
 #. [src.orders.components.OrderDraftDetailsSummary.2429341469] - button
 #. defaultMessage is:
@@ -507,6 +531,14 @@ msgctxt "dialog content"
 msgid "Are you sure you want to delete {counter,plural,one{this order draft} other{{displayQuantity} orderDrafts}}?"
 msgstr ""
 
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.3382708469] - dialog content
+#. defaultMessage is:
+#. Are you sure you want to delete {counter,plural,one{this page} other{{displayQuantity} pages}}?
+msgctxt "dialog content"
+msgid "Are you sure you want to delete {counter,plural,one{this page} other{{displayQuantity} pages}}?"
+msgstr ""
+
 #: build/locale/src/discounts/views/SaleList.json
 #. [src.discounts.views.2516361175] - dialog content
 #. defaultMessage is:
@@ -547,6 +579,14 @@ msgctxt "dialog content"
 msgid "Are you sure you want to delete {saleName}?"
 msgstr ""
 
+#: build/locale/src/pages/views/PageDetails.json
+#. [src.pages.views.754348000] - delete page
+#. defaultMessage is:
+#. Are you sure you want to delete {title}?
+msgctxt "delete page"
+msgid "Are you sure you want to delete {title}?"
+msgstr ""
+
 #: build/locale/src/discounts/views/VoucherDetails.json
 #. [src.discounts.views.3261917848] - dialog content
 #. defaultMessage is:
@@ -579,6 +619,14 @@ msgctxt "description"
 msgid "Are you sure you want to publish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
 msgstr ""
 
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.504298570] - dialog content
+#. defaultMessage is:
+#. Are you sure you want to publish {counter,plural,one{this page} other{{displayQuantity} pages}}?
+msgctxt "dialog content"
+msgid "Are you sure you want to publish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.json
 #. [src.orders.components.OrderDraftCancelDialog.3199827590]
 #. defaultMessage is:
@@ -639,6 +687,14 @@ msgctxt "description"
 msgid "Are you sure you want to unpublish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
 msgstr ""
 
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.691980200] - dialog content
+#. defaultMessage is:
+#. Are you sure you want to unpublish {counter,plural,one{this page} other{{displayQuantity} pages}}?
+msgctxt "dialog content"
+msgid "Are you sure you want to unpublish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.json
 #. [src.orders.components.OrderPaymentVoidDialog.2217048637]
 #. defaultMessage is:
@@ -1035,6 +1091,14 @@ msgctxt "subheader"
 msgid "Contact information"
 msgstr ""
 
+#: build/locale/src/pages/components/PageInfo/PageInfo.json
+#. [src.pages.components.PageInfo.1116746286] - page content
+#. defaultMessage is:
+#. Content
+msgctxt "page content"
+msgid "Content"
+msgstr ""
+
 #: build/locale/src/orders/views/OrderDetails/OrderDetailsMessages.json
 #. [src.orders.views.OrderDetails.2714957902]
 #. defaultMessage is:
@@ -1199,6 +1263,14 @@ msgctxt "button"
 msgid "Create order"
 msgstr ""
 
+#: build/locale/src/pages/views/PageCreate.json
+#. [src.pages.views.3785394515] - header
+#. defaultMessage is:
+#. Create page
+msgctxt "header"
+msgid "Create page"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionCreate.json
 #. [src.collections.views.1597339737]
 #. defaultMessage is:
@@ -1447,6 +1519,22 @@ msgctxt "dialog header"
 msgid "Delete Order Drafts"
 msgstr ""
 
+#: build/locale/src/pages/views/PageDetails.json
+#. [src.pages.views.3246254285] - dialog header
+#. defaultMessage is:
+#. Delete Page
+msgctxt "dialog header"
+msgid "Delete Page"
+msgstr ""
+
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.2782958373] - dialog header
+#. defaultMessage is:
+#. Delete Pages
+msgctxt "dialog header"
+msgid "Delete Pages"
+msgstr ""
+
 #: build/locale/src/discounts/views/SaleDetails.json
 #. [src.discounts.views.506030254] - dialog header
 #. defaultMessage is:
@@ -2039,6 +2127,14 @@ msgctxt "subheader"
 msgid "Here is some information we gathered about your store"
 msgstr ""
 
+#: build/locale/src/pages/components/PageSlug/PageSlug.json
+#. [src.pages.components.PageSlug.4210828158]
+#. defaultMessage is:
+#. If empty, URL will be autogenerated from Page Name
+msgctxt "description"
+msgid "If empty, URL will be autogenerated from Page Name"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
 #. [src.attributes.components.AttributeProperties.787251583]
 #. defaultMessage is:
@@ -2479,6 +2575,14 @@ msgctxt "description"
 msgid "No orders ready to fulfill"
 msgstr ""
 
+#: build/locale/src/pages/components/PageList/PageList.json
+#. [src.pages.components.PageList.2489163252]
+#. defaultMessage is:
+#. No pages found
+msgctxt "description"
+msgid "No pages found"
+msgstr ""
+
 #: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
 #. [homeNotificationsNoPayments]
 #. defaultMessage is:
@@ -2623,6 +2727,14 @@ msgctxt "voucher has no requirements"
 msgid "None"
 msgstr ""
 
+#: build/locale/src/pages/components/PageList/PageList.json
+#. [src.pages.components.PageList.3767550649] - page status
+#. defaultMessage is:
+#. Not Published
+msgctxt "page status"
+msgid "Not Published"
+msgstr ""
+
 #: build/locale/src/collections/components/CollectionList/CollectionList.json
 #. [src.collections.components.CollectionList.2341910657] - collection is not published
 #. defaultMessage is:
@@ -2719,6 +2831,14 @@ msgctxt "voucher application, switch button"
 msgid "Only once per order"
 msgstr ""
 
+#: build/locale/src/intl.json
+#. [src.optionalField] - field is optional
+#. defaultMessage is:
+#. Optional
+msgctxt "field is optional"
+msgid "Optional"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderDraftDetails/OrderDraftDetails.json
 #. [src.orders.components.OrderDraftDetails.2343989342] - section header
 #. defaultMessage is:
@@ -3183,6 +3303,22 @@ msgctxt "publish collections"
 msgid "Publish"
 msgstr ""
 
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.1547167026] - publish page, button
+#. defaultMessage is:
+#. Publish
+msgctxt "publish page, button"
+msgid "Publish"
+msgstr ""
+
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.2321087286] - dialog header
+#. defaultMessage is:
+#. Publish Pages
+msgctxt "dialog header"
+msgid "Publish Pages"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionList.json
 #. [src.collections.views.2823425739] - dialog title
 #. defaultMessage is:
@@ -3211,6 +3347,22 @@ msgctxt "product is published"
 msgid "Published"
 msgstr ""
 
+#: build/locale/src/pages/components/PageList/PageList.json
+#. [src.pages.components.PageList.3640454975] - page status
+#. defaultMessage is:
+#. Published
+msgctxt "page status"
+msgid "Published"
+msgstr ""
+
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.2543350562] - notification
+#. defaultMessage is:
+#. Published pages
+msgctxt "notification"
+msgid "Published pages"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.json
 #. [src.orders.components.OrderDraftDetailsProducts.2796503714] - quantity of ordered products
 #. defaultMessage is:
@@ -3327,6 +3479,22 @@ msgctxt "description"
 msgid "Removed draft orders"
 msgstr ""
 
+#: build/locale/src/pages/views/PageDetails.json
+#. [src.pages.views.1457312643]
+#. defaultMessage is:
+#. Removed page
+msgctxt "description"
+msgid "Removed page"
+msgstr ""
+
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.1080715663] - notification
+#. defaultMessage is:
+#. Removed pages
+msgctxt "notification"
+msgid "Removed pages"
+msgstr ""
+
 #: build/locale/src/discounts/views/SaleDetails.json
 #. [src.discounts.views.2534378844]
 #. defaultMessage is:
@@ -3559,6 +3727,18 @@ msgctxt "site settings section name"
 msgid "Site Settings"
 msgstr ""
 
+#: build/locale/src/pages/components/PageList/PageList.json
+#. [src.pages.components.PageList.3478065224] - page internal name
+#. defaultMessage is:
+#. Slug
+#: build/locale/src/pages/components/PageSlug/PageSlug.json
+#. [src.pages.components.PageSlug.3478065224] - page internal name
+#. defaultMessage is:
+#. Slug
+msgctxt "page internal name"
+msgid "Slug"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderDraftFinalizeDialog/OrderDraftFinalizeDialog.json
 #. [src.orders.components.OrderDraftFinalizeDialog.2968256006]
 #. defaultMessage is:
@@ -3687,6 +3867,14 @@ msgctxt "description"
 msgid "Successfully created attribute"
 msgstr ""
 
+#: build/locale/src/pages/views/PageCreate.json
+#. [src.pages.views.2680158037]
+#. defaultMessage is:
+#. Successfully created new page
+msgctxt "description"
+msgid "Successfully created new page"
+msgstr ""
+
 #: build/locale/src/discounts/views/SaleCreate.json
 #. [src.discounts.views.3707049729]
 #. defaultMessage is:
@@ -3807,6 +3995,22 @@ msgctxt "time during which sale is active"
 msgid "Time Frame"
 msgstr ""
 
+#: build/locale/src/pages/components/PageInfo/PageInfo.json
+#. [src.pages.components.PageInfo.1124600214] - page title
+#. defaultMessage is:
+#. Title
+msgctxt "page title"
+msgid "Title"
+msgstr ""
+
+#: build/locale/src/pages/components/PageList/PageList.json
+#. [src.pages.components.PageList.1124600214] - dialog header
+#. defaultMessage is:
+#. Title
+msgctxt "dialog header"
+msgid "Title"
+msgstr ""
+
 #: build/locale/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.json
 #. [homeAnalyticsCardHeader]
 #. defaultMessage is:
@@ -3919,6 +4123,14 @@ msgctxt "product type"
 msgid "Type"
 msgstr ""
 
+#: build/locale/src/pages/components/PageSlug/PageSlug.json
+#. [src.pages.components.PageSlug.1324178587]
+#. defaultMessage is:
+#. URL
+msgctxt "description"
+msgid "URL"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionDetails.json
 #. [src.collections.views.870815507] - unassign product from collection, button
 #. defaultMessage is:
@@ -4063,6 +4275,22 @@ msgctxt "unpublish collections"
 msgid "Unpublish"
 msgstr ""
 
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.2237014112] - unpublish page, button
+#. defaultMessage is:
+#. Unpublish
+msgctxt "unpublish page, button"
+msgid "Unpublish"
+msgstr ""
+
+#: build/locale/src/pages/views/PageList.json
+#. [src.pages.views.158565417] - dialog header
+#. defaultMessage is:
+#. Unpublish Pages
+msgctxt "dialog header"
+msgid "Unpublish Pages"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionList.json
 #. [src.collections.views.2637364047] - dialog title
 #. defaultMessage is:
@@ -4223,6 +4451,14 @@ msgctxt "description"
 msgid "View and update your site settings"
 msgstr ""
 
+#: build/locale/src/pages/components/PageList/PageList.json
+#. [src.pages.components.PageList.1459686496] - page status
+#. defaultMessage is:
+#. Visibility
+msgctxt "page status"
+msgid "Visibility"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeList/AttributeList.json
 #. [src.attributes.components.AttributeList.643174786] - attribute is visible
 #. defaultMessage is:

src/intl.ts

@@ -28,6 +28,10 @@ export const commonMessages = defineMessages({
   lastName: {
     defaultMessage: "Last Name"
   },
+  optionalField: {
+    defaultMessage: "Optional",
+    description: "field is optional"
+  },
   properties: {
     defaultMessage: "Properties"
   },

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -5,6 +5,7 @@ import {
   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,7 +17,7 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
 import VisibilityCard from "@saleor/components/VisibilityCard";
-import i18n from "../../../i18n";
+import { sectionNames } from "@saleor/intl";
 import { maybe } from "../../../misc";
 import { UserError } from "../../../types";
 import { PageDetails_page } from "../../types/PageDetails";
@@ -52,6 +53,8 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
   onRemove,
   onSubmit
 }) => {
+  const intl = useIntl();
+
   const initialForm: FormData = {
     content: maybe(
       () => JSON.parse(page.contentJson),
@@ -68,12 +71,15 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
     <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, errors: formErrors, hasChanged, submit }) => (
         <Container>
-          <AppHeader onBack={onBack}>{i18n.t("Pages")}</AppHeader>
+          <AppHeader onBack={onBack}>
+            {intl.formatMessage(sectionNames.pages)}
+          </AppHeader>
           <PageHeader
             title={
               page === null
-                ? i18n.t("Add Page", {
+                ? intl.formatMessage({
-                    context: "header"
+                    defaultMessage: "Add Page",
+                    description: "page header"
                   })
                 : maybe(() => page.title)
             }
@@ -99,9 +105,10 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
                 onChange={change}
                 title={data.seoTitle}
                 titlePlaceholder={data.title}
-                helperText={i18n.t(
+                helperText={intl.formatMessage({
+                  defaultMessage:
                     "Add search engine title and description to make this page easier to find"
-                )}
+                })}
               />
             </div>
             <div>

src/pages/components/PageInfo/PageInfo.tsx

@@ -3,11 +3,12 @@ import CardContent from "@material-ui/core/CardContent";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { FormattedMessage, 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";
 import { maybe } from "../../../misc";
 import { FormErrors } from "../../../types";
 import { PageDetails_page } from "../../types/PageDetails";
@@ -37,16 +38,24 @@ const PageInfo = withStyles(styles, {
     errors,
     page,
     onChange
-  }: PageInfoProps & WithStyles<typeof styles>) => (
+  }: PageInfoProps & WithStyles<typeof styles>) => {
+    const intl = useIntl();
+
+    return (
       <Card className={classes.root}>
-      <CardTitle title={i18n.t("General Information")} />
+        <CardTitle
+          title={intl.formatMessage(commonMessages.generalInformations)}
+        />
         <CardContent>
           <TextField
             disabled={disabled}
             error={!!errors.title}
             fullWidth
             helperText={errors.title}
-          label={i18n.t("Title")}
+            label={intl.formatMessage({
+              defaultMessage: "Title",
+              description: "page title"
+            })}
             name={"title" as keyof FormData}
             value={data.title}
             onChange={onChange}
@@ -57,13 +66,17 @@ const PageInfo = withStyles(styles, {
             error={!!errors.contentJson}
             helperText={errors.contentJson}
             initial={maybe(() => JSON.parse(page.contentJson))}
-          label={i18n.t("Content")}
+            label={intl.formatMessage({
+              defaultMessage: "Content",
+              description: "page content"
+            })}
             name={"content" as keyof FormData}
             onChange={onChange}
           />
         </CardContent>
       </Card>
-  )
+    );
+  }
 );
 PageInfo.displayName = "PageInfo";
 export default PageInfo;

src/pages/components/PageList/PageList.tsx

@@ -11,13 +11,13 @@ 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 Checkbox from "@saleor/components/Checkbox";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
-import i18n from "@saleor/i18n";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { PageList_pages_edges_node } from "../../types/PageList";
@@ -63,7 +63,10 @@ const PageList = withStyles(styles, { name: "PageList" })(
     toggle,
     toggleAll,
     toolbar
-  }: PageListProps & WithStyles<typeof styles>) => (
+  }: PageListProps & WithStyles<typeof styles>) => {
+    const intl = useIntl();
+
+    return (
       <Card>
         <Table>
           <TableHead
@@ -75,13 +78,22 @@ const PageList = withStyles(styles, { name: "PageList" })(
             toolbar={toolbar}
           >
             <TableCell className={classes.colTitle} padding="dense">
-            {i18n.t("Title", { context: "table header" })}
+              <FormattedMessage
+                defaultMessage="Title"
+                description="dialog header"
+              />
             </TableCell>
             <TableCell className={classes.colSlug} padding="dense">
-            {i18n.t("Slug", { context: "table header" })}
+              <FormattedMessage
+                defaultMessage="Slug"
+                description="page internal name"
+              />
             </TableCell>
             <TableCell className={classes.colVisibility} padding="dense">
-            {i18n.t("Visibility", { context: "table header" })}
+              <FormattedMessage
+                defaultMessage="Visibility"
+                description="page status"
+              />
             </TableCell>
           </TableHead>
           <TableFooter>
@@ -89,7 +101,9 @@ const PageList = withStyles(styles, { name: "PageList" })(
               <TablePagination
                 colSpan={numberOfColumns}
                 settings={settings}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+                hasNextPage={
+                  pageInfo && !disabled ? pageInfo.hasNextPage : false
+                }
                 onNextPage={onNextPage}
                 onUpdateListSettings={onUpdateListSettings}
                 hasPreviousPage={
@@ -133,8 +147,14 @@ const PageList = withStyles(styles, { name: "PageList" })(
                           <StatusLabel
                             label={
                               page.isPublished
-                              ? i18n.t("Published")
+                                ? intl.formatMessage({
-                              : i18n.t("Not Published")
+                                    defaultMessage: "Published",
+                                    description: "page status"
+                                  })
+                                : intl.formatMessage({
+                                    defaultMessage: "Not Published",
+                                    description: "page status"
+                                  })
                             }
                             status={page.isPublished ? "success" : "error"}
                           />
@@ -148,7 +168,7 @@ const PageList = withStyles(styles, { name: "PageList" })(
               () => (
                 <TableRow>
                   <TableCell colSpan={numberOfColumns}>
-                  {i18n.t("No pages found")}
+                    <FormattedMessage defaultMessage="No pages found" />
                   </TableCell>
                 </TableRow>
               )
@@ -156,7 +176,8 @@ const PageList = withStyles(styles, { name: "PageList" })(
           </TableBody>
         </Table>
       </Card>
-  )
+    );
+  }
 );
 PageList.displayName = "PageList";
 export default PageList;

src/pages/components/PageListPage/PageListPage.tsx

@@ -1,11 +1,12 @@
 import Button from "@material-ui/core/Button";
 import AddIcon from "@material-ui/icons/Add";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
-import i18n from "@saleor/i18n";
+import { sectionNames } from "@saleor/intl";
 import { ListActions, PageListProps } from "@saleor/types";
 import { PageList_pages_edges_node } from "../../types/PageList";
 import PageList from "../PageList/PageList";
@@ -31,17 +32,22 @@ const PageListPage: React.StatelessComponent<PageListPageProps> = ({
   toggle,
   toggleAll,
   toolbar
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <Container>
-    <AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
+      <AppHeader onBack={onBack}>
-    <PageHeader title={i18n.t("Pages")}>
+        {intl.formatMessage(sectionNames.configuration)}
+      </AppHeader>
+      <PageHeader title={intl.formatMessage(sectionNames.pages)}>
         <Button
           disabled={disabled}
           onClick={onAdd}
           variant="contained"
           color="primary"
         >
-        {i18n.t("Add page")}
+          <FormattedMessage defaultMessage="Add page" description="button" />
           <AddIcon />
         </Button>
       </PageHeader>
@@ -62,5 +68,6 @@ const PageListPage: React.StatelessComponent<PageListPageProps> = ({
       />
     </Container>
   );
+};
 PageListPage.displayName = "PageListPage";
 export default PageListPage;

src/pages/components/PageSlug/PageSlug.tsx

@@ -2,10 +2,10 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
+import { useIntl } from "react-intl";
 import slugify from "slugify";
 
 import CardTitle from "@saleor/components/CardTitle";
-import i18n from "../../../i18n";
 import { FormData } from "../PageDetailsPage";
 
 export interface PageSlugProps {
@@ -20,18 +20,31 @@ const PageSlug: React.StatelessComponent<PageSlugProps> = ({
   disabled,
   errors,
   onChange
-}) => (
+}) => {
+  const intl = useIntl();
+
+  return (
     <Card>
-    <CardTitle title={i18n.t("URL")} />
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "URL"
+        })}
+      />
       <CardContent>
         <TextField
           name={"slug" as keyof FormData}
           disabled={disabled}
           error={!!errors.slug}
-        label={i18n.t("Slug")}
+          label={intl.formatMessage({
+            defaultMessage: "Slug",
+            description: "page internal name"
+          })}
           helperText={
             errors.slug ||
-          i18n.t("If empty, URL will be autogenerated from Page Name")
+            intl.formatMessage({
+              defaultMessage:
+                "If empty, URL will be autogenerated from Page Name"
+            })
           }
           placeholder={slugify(data.title)}
           value={data.slug}
@@ -41,5 +54,6 @@ const PageSlug: React.StatelessComponent<PageSlugProps> = ({
       </CardContent>
     </Card>
   );
+};
 PageSlug.displayName = "PageSlug";
 export default PageSlug;

src/pages/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 {
   pageCreatePath,
   pageListPath,
@@ -37,9 +38,12 @@ const PageDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
   );
 };
 
-const Component = () => (
+const Component = () => {
+  const intl = useIntl();
+
+  return (
     <>
-    <WindowTitle title={i18n.t("Pages")} />
+      <WindowTitle title={intl.formatMessage(sectionNames.pages)} />
       <Switch>
         <Route exact path={pageListPath} component={PageList} />
         <Route exact path={pageCreatePath} component={PageCreate} />
@@ -47,5 +51,6 @@ const Component = () => (
       </Switch>
     </>
   );
+};
 
 export default Component;

src/pages/views/PageCreate.tsx

@@ -1,9 +1,9 @@
 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 i18n from "../../i18n";
 import { getMutationState, maybe } from "../../misc";
 import PageDetailsPage from "../components/PageDetailsPage";
 import { TypedPageCreate } from "../mutations";
@@ -17,12 +17,13 @@ export interface PageCreateProps {
 export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   const handlePageCreate = (data: PageCreateData) => {
     if (data.pageCreate.errors.length === 0) {
       notify({
-        text: i18n.t("Successfully created new page", {
+        text: intl.formatMessage({
-          context: "notification"
+          defaultMessage: "Successfully created new page"
         })
       });
       navigate(pageUrl(data.pageCreate.page.id));
@@ -40,7 +41,12 @@ export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
 
         return (
           <>
-            <WindowTitle title={i18n.t("Create page")} />
+            <WindowTitle
+              title={intl.formatMessage({
+                defaultMessage: "Create page",
+                description: "header"
+              })}
+            />
             <PageDetailsPage
               disabled={pageCreateOpts.loading}
               errors={maybe(() => pageCreateOpts.data.pageCreate.errors, [])}

src/pages/views/PageDetails.tsx

@@ -1,11 +1,11 @@
 import DialogContentText from "@material-ui/core/DialogContentText";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import ActionDialog from "@saleor/components/ActionDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import i18n from "../../i18n";
 import { getMutationState, maybe } from "../../misc";
 import { PageInput } from "../../types/globalTypes";
 import PageDetailsPage, { FormData } from "../components/PageDetailsPage";
@@ -45,12 +45,13 @@ export const PageDetails: React.StatelessComponent<PageDetailsProps> = ({
 }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   const handlePageRemove = (data: PageRemove) => {
     if (data.pageDelete.errors.length === 0) {
       notify({
-        text: i18n.t("Removed page", {
+        text: intl.formatMessage({
-          context: "notification"
+          defaultMessage: "Removed page"
         })
       });
       navigate(pageListUrl());
@@ -107,25 +108,30 @@ export const PageDetails: React.StatelessComponent<PageDetailsProps> = ({
                     <ActionDialog
                       open={params.action === "remove"}
                       confirmButtonState={removeTransitionState}
-                      title={i18n.t("Remove Page")}
+                      title={intl.formatMessage({
+                        defaultMessage: "Delete Page",
+                        description: "dialog header"
+                      })}
                       onClose={() => navigate(pageUrl(id))}
                       onConfirm={pageRemove}
                       variant="delete"
                     >
-                      <DialogContentText
+                      <DialogContentText>
-                        dangerouslySetInnerHTML={{
+                        <FormattedMessage
-                          __html: i18n.t(
+                          defaultMessage="Are you sure you want to delete {title}?"
-                            "Are you sure you want to remove <strong>{{ title }}</strong>?",
+                          description="delete page"
-                            {
+                          values={{
-                              context: "page remove",
+                            title: (
-                              title: maybe(
+                              <strong>
+                                {maybe(
                                   () => pageDetails.data.page.title,
                                   "..."
-                              )
+                                )}
-                            }
+                              </strong>
                             )
                           }}
                         />
+                      </DialogContentText>
                     </ActionDialog>
                   </>
                 );

src/pages/views/PageList.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 { configurationMenuUrl } from "@saleor/configuration";
@@ -13,7 +14,6 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
-import i18n from "@saleor/i18n";
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
 import PageListPage from "../components/PageListPage/PageListPage";
@@ -45,6 +45,8 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
   const { updateListSettings, settings } = useListSettings(
     ListViews.PAGES_LIST
   );
+  const intl = useIntl();
+
   const paginationState = createPaginationState(settings.rowNumber, params);
 
   return (
@@ -79,7 +81,10 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
           if (data.pageBulkPublish.errors.length === 0) {
             closeModal();
             notify({
-              text: i18n.t("Published pages")
+              text: intl.formatMessage({
+                defaultMessage: "Published pages",
+                description: "notification"
+              })
             });
             reset();
             refetch();
@@ -90,7 +95,10 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
           if (data.pageBulkDelete.errors.length === 0) {
             closeModal();
             notify({
-              text: i18n.t("Removed pages")
+              text: intl.formatMessage({
+                defaultMessage: "Removed pages",
+                description: "notification"
+              })
             });
             reset();
             refetch();
@@ -137,13 +145,19 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
                                 openModal("unpublish", listElements)
                               }
                             >
-                              {i18n.t("Unpublish")}
+                              <FormattedMessage
+                                defaultMessage="Unpublish"
+                                description="unpublish page, button"
+                              />
                             </Button>
                             <Button
                               color="primary"
                               onClick={() => openModal("publish", listElements)}
                             >
-                              {i18n.t("Publish")}
+                              <FormattedMessage
+                                defaultMessage="Publish"
+                                description="publish page, button"
+                              />
                             </Button>
                             <IconButton
                               color="primary"
@@ -170,21 +184,28 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
                             }
                           })
                         }
-                        title={i18n.t("Publish pages")}
+                        title={intl.formatMessage({
+                          defaultMessage: "Publish Pages",
+                          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> pages?",
+            one {this page}
-                              {
+            other {{displayQuantity} pages}
-                                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"}
@@ -198,18 +219,21 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
                             }
                           })
                         }
-                        title={i18n.t("Unpublish pages")}
+                        title={intl.formatMessage({
+                          defaultMessage: "Unpublish Pages",
+                          description: "dialog header"
+                        })}
                       >
-                        <DialogContentText
+                        <FormattedMessage
-                          dangerouslySetInnerHTML={{
+                          defaultMessage="Are you sure you want to unpublish {counter, plural,
-                            __html: i18n.t(
+            one {this page}
-                              "Are you sure you want to unpublish <strong>{{ number }}</strong> pages?",
+            other {{displayQuantity} pages}
-                              {
+          }?"
-                                number: maybe(
+                          description="dialog content"
-                                  () => params.ids.length.toString(),
+                          values={{
-                                  "..."
+                            counter: maybe(() => params.ids.length),
-                                )
+                            displayQuantity: (
-                              }
+                              <strong>{maybe(() => params.ids.length)}</strong>
                             )
                           }}
                         />
@@ -226,18 +250,21 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
                           })
                         }
                         variant="delete"
-                        title={i18n.t("Remove pages")}
+                        title={intl.formatMessage({
+                          defaultMessage: "Delete Pages",
+                          description: "dialog header"
+                        })}
                       >
-                        <DialogContentText
+                        <FormattedMessage
-                          dangerouslySetInnerHTML={{
+                          defaultMessage="Are you sure you want to delete {counter, plural,
-                            __html: i18n.t(
+            one {this page}
-                              "Are you sure you want to remove <strong>{{ number }}</strong> pages?",
+            other {{displayQuantity} pages}
-                              {
+          }?"
-                                number: maybe(
+                          description="dialog content"
-                                  () => params.ids.length.toString(),
+                          values={{
-                                  "..."
+                            counter: maybe(() => params.ids.length),
-                                )
+                            displayQuantity: (
-                              }
+                              <strong>{maybe(() => params.ids.length)}</strong>
                             )
                           }}
                         />