Refactor home section translations (#115)

* Refactor home screen translations

* Update pot file

* Fix plural forms

* Update pot file

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-08-26T13:08:05.181Z\n"
+"POT-Creation-Date: 2019-08-26T14:18:06.591Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -35,6 +35,14 @@ msgctxt "time during voucher is active, header"
 msgid "Active Dates"
 msgstr ""
 
+#: build/locale/src/home/components/HomeActivityCard/HomeActivityCard.json
+#. [homeActivityCardHeader] - header
+#. defaultMessage is:
+#. Activity
+msgctxt "header"
+msgid "Activity"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.json
 #. [src.customers.components.CustomerAddressDialog.3769321414] - dialog title
 #. defaultMessage is:
@@ -1135,6 +1143,14 @@ msgctxt "description"
 msgid "Determine attributes used to create product types"
 msgstr ""
 
+#: build/locale/src/home/components/HomeScreen.json
+#. [homeScreenDisclaimer] - header
+#. defaultMessage is:
+#. Disclaimer
+msgctxt "header"
+msgid "Disclaimer"
+msgstr ""
+
 #: build/locale/src/discounts/components/VoucherInfo/VoucherInfo.json
 #. [src.discounts.components.VoucherInfo.1262795626]
 #. defaultMessage is:
@@ -1331,6 +1347,26 @@ msgctxt "voucher code, button"
 msgid "Generate Code"
 msgstr ""
 
+#: build/locale/src/home/components/HomeHeader/HomeHeader.json
+#. [homeHeaderText] - header
+#. defaultMessage is:
+#. Hello there, {userName}
+#: build/locale/src/home/components/HomeScreen.json
+#. [homeScreenHeader] - header
+#. defaultMessage is:
+#. Hello there, {userName}
+msgctxt "header"
+msgid "Hello there, {userName}"
+msgstr ""
+
+#: build/locale/src/home/components/HomeHeader/HomeHeader.json
+#. [homeHeaderTextCaption] - subheader
+#. defaultMessage is:
+#. Here is some information we gathered about your store
+msgctxt "subheader"
+msgid "Here is some information we gathered about your store"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
 #. [src.attributes.components.AttributeProperties.787251583]
 #. defaultMessage is:
@@ -1535,6 +1571,14 @@ msgctxt "navigation section name"
 msgid "Navigation"
 msgstr ""
 
+#: build/locale/src/home/components/HomeActivityCard/HomeActivityCard.json
+#. [homeActivityCardNoActivities]
+#. defaultMessage is:
+#. No activities found
+msgctxt "description"
+msgid "No activities found"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeList/AttributeList.json
 #. [src.attributes.components.AttributeList.1192828581]
 #. defaultMessage is:
@@ -1583,6 +1627,22 @@ msgctxt "description"
 msgid "No orders found"
 msgstr ""
 
+#: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
+#. [homeNotificationTableNoOrders]
+#. defaultMessage is:
+#. No orders ready to fulfill
+msgctxt "description"
+msgid "No orders ready to fulfill"
+msgstr ""
+
+#: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
+#. [homeNotificationsNoPayments]
+#. defaultMessage is:
+#. No payments waiting for capture
+msgctxt "description"
+msgid "No payments waiting for capture"
+msgstr ""
+
 #: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
 #. [src.categories.components.CategoryProducts.1657559629]
 #. defaultMessage is:
@@ -1595,10 +1655,22 @@ msgstr ""
 #. [src.discounts.components.DiscountProducts.1657559629]
 #. defaultMessage is:
 #. No products found
+#: build/locale/src/home/components/HomeProductListCard/HomeProductListCard.json
+#. [homeProductsListCardNoProducts]
+#. defaultMessage is:
+#. No products found
 msgctxt "description"
 msgid "No products found"
 msgstr ""
 
+#: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
+#. [homeNotificationsTableNoProducts]
+#. defaultMessage is:
+#. No products out of stock
+msgctxt "description"
+msgid "No products out of stock"
+msgstr ""
+
 #: build/locale/src/discounts/components/SaleList/SaleList.json
 #. [src.discounts.components.SaleList.4101565527]
 #. defaultMessage is:
@@ -2119,6 +2191,22 @@ msgctxt "taxes section name"
 msgid "Taxes"
 msgstr ""
 
+#: build/locale/src/home/components/HomeScreen.json
+#. [homeScreenDisclaimerText2]
+#. defaultMessage is:
+#. The GraphQL API is beta quality. It is not fully optimized and some mutations or queries may be missing.
+msgctxt "description"
+msgid "The GraphQL API is beta quality. It is not fully optimized and some mutations or queries may be missing."
+msgstr ""
+
+#: build/locale/src/home/components/HomeScreen.json
+#. [homeScreenDisclaimerText1]
+#. defaultMessage is:
+#. The new dashboard and the GraphQL API are preview-quality software.
+msgctxt "description"
+msgid "The new dashboard and the GraphQL API are preview-quality software."
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.json
 #. [src.customers.components.CustomerCreateAddress.401345057]
 #. defaultMessage is:
@@ -2167,6 +2255,22 @@ msgctxt "time during which sale is active"
 msgid "Time Frame"
 msgstr ""
 
+#: build/locale/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.json
+#. [homeAnalyticsCardHeader]
+#. defaultMessage is:
+#. Today
+msgctxt "description"
+msgid "Today"
+msgstr ""
+
+#: build/locale/src/home/components/HomeProductListCard/HomeProductListCard.json
+#. [homeProductsListCardHeader] - header
+#. defaultMessage is:
+#. Top products
+msgctxt "header"
+msgid "Top products"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerOrders/CustomerOrders.json
 #. [src.customers.components.CustomerOrders.878013594] - order total amount
 #. defaultMessage is:
@@ -2483,6 +2587,38 @@ msgctxt "vouchers section name"
 msgid "Vouchers"
 msgstr ""
 
+#: build/locale/src/home/components/HomeProductListCard/HomeProductListCard.json
+#. [homeProductListCardOrders] - number of ordered products
+#. defaultMessage is:
+#. {amount,plural,one{One ordered} other{{amount} Ordered}}
+msgctxt "number of ordered products"
+msgid "{amount,plural,one{One ordered} other{{amount} Ordered}}"
+msgstr ""
+
+#: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
+#. [homeNotificationTableOrders]
+#. defaultMessage is:
+#. {amount,plural,one{One order} other{{amount} Orders}} are ready to fulfill
+msgctxt "description"
+msgid "{amount,plural,one{One order} other{{amount} Orders}} are ready to fulfill"
+msgstr ""
+
+#: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
+#. [homeNotificationTablePayments]
+#. defaultMessage is:
+#. {amount,plural,one{One payment} other{{amount} Payments}} to capture
+msgctxt "description"
+msgid "{amount,plural,one{One payment} other{{amount} Payments}} to capture"
+msgstr ""
+
+#: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
+#. [homeNotificationTableProducts]
+#. defaultMessage is:
+#. {amount,plural,one{One product} other{{amount} Products}} out of stock
+msgctxt "description"
+msgid "{amount,plural,one{One product} other{{amount} Products}} out of stock"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.json
 #. [src.customers.components.CustomerAddressListPage.489918044] - customer details, header
 #. defaultMessage is:

src/home/components/HomeActivityCard/HomeActivityCard.tsx

@@ -5,11 +5,11 @@ import ListItemText from "@material-ui/core/ListItemText";
 import { createStyles, withStyles, WithStyles } 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 { DateTime } from "@saleor/components/Date";
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
 import { renderCollection } from "../../../misc";
 import { Home_activities_edges_node } from "../../types/Home";
 import { getActivityMessage } from "./activityMessages";
@@ -25,15 +25,23 @@ const styles = createStyles({
   }
 });
 
-interface HomeProductListCardProps extends WithStyles<typeof styles> {
+interface HomeActivityCardProps extends WithStyles<typeof styles> {
   activities: Home_activities_edges_node[];
 }
 
-const HomeProductListCard = withStyles(styles, { name: "HomeProductListCard" })(
+const HomeActivityCard = withStyles(styles, { name: "HomeActivityCard" })(
-  ({ classes, activities }: HomeProductListCardProps) => {
+  ({ classes, activities }: HomeActivityCardProps) => {
+    const intl = useIntl();
+
     return (
       <Card>
-        <CardTitle title={i18n.t("Activity")} />
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Activity",
+            description: "header",
+            id: "homeActivityCardHeader"
+          })}
+        />
         <List dense={true}>
           {renderCollection(
             activities,
@@ -59,7 +67,12 @@ const HomeProductListCard = withStyles(styles, { name: "HomeProductListCard" })(
               <ListItem className={classes.noProducts}>
                 <ListItemText
                   primary={
-                    <Typography>{i18n.t("No activities found")}</Typography>
+                    <Typography>
+                      <FormattedMessage
+                        defaultMessage="No activities found"
+                        id="homeActivityCardNoActivities"
+                      />
+                    </Typography>
                   }
                 />
               </ListItem>
@@ -70,5 +83,5 @@ const HomeProductListCard = withStyles(styles, { name: "HomeProductListCard" })(
     );
   }
 );
-HomeProductListCard.displayName = "HomeProductListCard";
+HomeActivityCard.displayName = "HomeActivityCard";
-export default HomeProductListCard;
+export default HomeActivityCard;

src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx

@@ -9,8 +9,7 @@ import {
 } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
-
+import { FormattedMessage } from "react-intl";
-import i18n from "../../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -74,7 +73,10 @@ const HomeAnalyticsCard = withStyles(styles, { name: "HomeAnalyticsCard" })(
             variant="caption"
             color="textSecondary"
           >
-            {i18n.t("Today")}
+            <FormattedMessage
+              defaultMessage="Today"
+              id="homeAnalyticsCardHeader"
+            />
           </Typography>
           <Typography
             className={classes.value}

src/home/components/HomeHeader/HomeHeader.tsx

@@ -6,9 +6,9 @@ import {
 } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -32,14 +32,25 @@ const HomeOrdersCard = withStyles(styles, { name: "HomeOrdersCard" })(
     <div className={classes.headerContainer} data-tc="home-header">
       <Typography className={classes.pageHeader} variant="h4">
         {userName ? (
-          i18n.t("Hello there, {{userName}}", { userName })
+          <FormattedMessage
+            defaultMessage="Hello there, {userName}"
+            description="header"
+            id="homeHeaderText"
+            values={{
+              userName
+            }}
+          />
         ) : (
           <Skeleton style={{ width: "10em" }} />
         )}
       </Typography>
       <Typography className={classes.subtitle}>
         {userName ? (
-          i18n.t("Here is some information we gathered about your store")
+          <FormattedMessage
+            defaultMessage="Here is some information we gathered about your store"
+            description="subheader"
+            id="homeHeaderTextCaption"
+          />
         ) : (
           <Skeleton style={{ width: "10em" }} />
         )}

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -12,9 +12,9 @@ import TableRow from "@material-ui/core/TableRow";
 import Typography from "@material-ui/core/Typography";
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import Skeleton from "@saleor/components/Skeleton";
-import i18n from "../../../i18n";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -47,6 +47,8 @@ const HomeNotificationTable = withStyles(styles, {
     ordersToFulfill,
     productsOutOfStock
   }: HomeNotificationTableProps) => {
+    const intl = useIntl();
+
     return (
       <Card>
         <Table>
@@ -57,17 +59,24 @@ const HomeNotificationTable = withStyles(styles, {
                   <Skeleton />
                 ) : ordersToFulfill === 0 ? (
                   <Typography>
-                    {i18n.t("No orders ready to fulfill")}
+                    <FormattedMessage
+                      defaultMessage="No orders ready to fulfill"
+                      id="homeNotificationTableNoOrders"
+                    />
                   </Typography>
                 ) : (
-                  <Typography
+                  <Typography>
-                    dangerouslySetInnerHTML={{
+                    <FormattedMessage
-                      __html: i18n.t(
+                      defaultMessage="{amount, plural,
-                        "<b>{{ amount }} Orders</b> are ready to fulfill",
+                        one {One order}
-                        { amount: ordersToFulfill }
+                        other {{amount} Orders}
-                      )
+                      } are ready to fulfill"
-                    }}
+                      id="homeNotificationTableOrders"
-                  />
+                      values={{
+                        amount: ordersToFulfill
+                      }}
+                    />
+                  </Typography>
                 )}
               </TableCell>
               <TableCell className={classes.arrowIcon}>
@@ -80,17 +89,24 @@ const HomeNotificationTable = withStyles(styles, {
                   <Skeleton />
                 ) : ordersToCapture === 0 ? (
                   <Typography>
-                    {i18n.t("No payments waiting for capture")}
+                    <FormattedMessage
+                      defaultMessage="No payments waiting for capture"
+                      id="homeNotificationsNoPayments"
+                    />
                   </Typography>
                 ) : (
-                  <Typography
+                  <Typography>
-                    dangerouslySetInnerHTML={{
+                    <FormattedMessage
-                      __html: i18n.t(
+                      defaultMessage="{amount, plural,
-                        "<b>{{ amount }} Payments</b> to capture",
+                        one {One payment}
-                        { amount: ordersToCapture }
+                        other {{amount} Payments}
-                      )
+                      } to capture"
-                    }}
+                      id="homeNotificationTablePayments"
-                  />
+                      values={{
+                        amount: ordersToCapture
+                      }}
+                    />
+                  </Typography>
                 )}
               </TableCell>
               <TableCell className={classes.arrowIcon}>
@@ -102,16 +118,25 @@ const HomeNotificationTable = withStyles(styles, {
                 {productsOutOfStock === undefined ? (
                   <Skeleton />
                 ) : productsOutOfStock === 0 ? (
-                  <Typography>{i18n.t("No products out of stock")}</Typography>
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="No products out of stock"
+                      id="homeNotificationsTableNoProducts"
+                    />
+                  </Typography>
                 ) : (
-                  <Typography
+                  <Typography>
-                    dangerouslySetInnerHTML={{
+                    <FormattedMessage
-                      __html: i18n.t(
+                      defaultMessage="{amount, plural,
-                        "<b>{{ amount }} Products</b> out of stock",
+                        one {One product}
-                        { amount: productsOutOfStock }
+                        other {{amount} Products}
-                      )
+                      } out of stock"
-                    }}
+                      id="homeNotificationTableProducts"
-                  />
+                      values={{
+                        amount: productsOutOfStock
+                      }}
+                    />
+                  </Typography>
                 )}
               </TableCell>
               <TableCell className={classes.arrowIcon}>

src/home/components/HomeProductListCard/HomeProductListCard.tsx

@@ -12,12 +12,12 @@ import TableRow from "@material-ui/core/TableRow";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Money from "@saleor/components/Money";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
-import i18n from "../../../i18n";
 import { maybe, renderCollection } from "../../../misc";
 import { Home_productTopToday_edges_node } from "../../types/Home";
 
@@ -46,80 +46,103 @@ interface HomeProductListProps extends WithStyles<typeof styles> {
 }
 
 export const HomeProductList = withStyles(styles, { name: "HomeProductList" })(
-  ({ classes, topProducts, onRowClick }: HomeProductListProps) => (
+  ({ classes, topProducts, onRowClick }: HomeProductListProps) => {
-    <Card>
+    const intl = useIntl();
-      <CardTitle title={i18n.t("Top products")} />
-      <Table>
-        <TableBody>
-          {renderCollection(
-            topProducts,
-            variant => (
-              <TableRow
-                key={variant ? variant.id : "skeleton"}
-                hover={!!variant}
-                className={classNames({
-                  [classes.tableRow]: !!variant
-                })}
-                onClick={
-                  !!variant
-                    ? () => onRowClick(variant.product.id, variant.id)
-                    : undefined
-                }
-              >
-                <TableCellAvatar
-                  className={classes.avatarSpacing}
-                  thumbnail={maybe(() => variant.product.thumbnail.url)}
-                  avatarProps={classes.avatarProps}
-                />
 
-                <TableCell>
+    return (
-                  {variant ? (
+      <Card>
-                    <>
+        <CardTitle
-                      <Typography color={"primary"}>
+          title={intl.formatMessage({
-                        {variant.product.name}
+            defaultMessage: "Top products",
-                      </Typography>
+            description: "header",
-                      <Typography color={"textSecondary"}>
+            id: "homeProductsListCardHeader"
-                        {maybe(() =>
+          })}
-                          variant.attributes
+        />
-                            .map(attribute => attribute.value.name)
+        <Table>
-                            .join(" / ")
+          <TableBody>
-                        )}
+            {renderCollection(
-                      </Typography>
+              topProducts,
-                      <Typography color={"textSecondary"}>
+              variant => (
-                        {i18n.t("{{ordersCount}} Orders", {
+                <TableRow
-                          ordersCount: variant.quantityOrdered
+                  key={variant ? variant.id : "skeleton"}
-                        })}
+                  hover={!!variant}
-                      </Typography>
+                  className={classNames({
-                    </>
+                    [classes.tableRow]: !!variant
-                  ) : (
+                  })}
-                    <Skeleton />
+                  onClick={
-                  )}
+                    !!variant
-                </TableCell>
+                      ? () => onRowClick(variant.product.id, variant.id)
+                      : undefined
+                  }
+                >
+                  <TableCellAvatar
+                    className={classes.avatarSpacing}
+                    thumbnail={maybe(() => variant.product.thumbnail.url)}
+                    avatarProps={classes.avatarProps}
+                  />
 
-                <TableCell>
+                  <TableCell>
-                  <Typography align={"right"}>
+                    {variant ? (
-                    {maybe(
+                      <>
-                      () => (
+                        <Typography color={"primary"}>
-                        <Money money={variant.revenue.gross} />
+                          {variant.product.name}
-                      ),
+                        </Typography>
+                        <Typography color={"textSecondary"}>
+                          {maybe(() =>
+                            variant.attributes
+                              .map(attribute => attribute.value.name)
+                              .join(" / ")
+                          )}
+                        </Typography>
+                        <Typography color={"textSecondary"}>
+                          <FormattedMessage
+                            defaultMessage="{amount, plural,
+                              one {One ordered}
+                              other {{amount} Ordered}
+                            }"
+                            description="number of ordered products"
+                            id="homeProductListCardOrders"
+                            values={{
+                              amount: variant.quantityOrdered
+                            }}
+                          />
+                        </Typography>
+                      </>
+                    ) : (
                       <Skeleton />
                     )}
-                  </Typography>
+                  </TableCell>
-                </TableCell>
+
-              </TableRow>
+                  <TableCell>
-            ),
+                    <Typography align={"right"}>
-            () => (
+                      {maybe(
-              <TableRow>
+                        () => (
-                <TableCell className={classes.noProducts}>
+                          <Money money={variant.revenue.gross} />
-                  <Typography>{i18n.t("No products found")}</Typography>
+                        ),
-                </TableCell>
+                        <Skeleton />
-              </TableRow>
+                      )}
-            )
+                    </Typography>
-          )}
+                  </TableCell>
-        </TableBody>
+                </TableRow>
-      </Table>
+              ),
-    </Card>
+              () => (
-  )
+                <TableRow>
+                  <TableCell className={classes.noProducts}>
+                    <Typography>
+                      <FormattedMessage
+                        defaultMessage="No products found"
+                        id="homeProductsListCardNoProducts"
+                      />
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              )
+            )}
+          </TableBody>
+        </Table>
+      </Card>
+    );
+  }
 );
 
 HomeProductList.displayName = "HomeProductList";

src/home/components/HomeScreen.tsx

@@ -2,11 +2,11 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
-import i18n from "../../i18n";
 
 interface HomeScreenProps {
   user: {
@@ -16,25 +16,44 @@ interface HomeScreenProps {
 
 export const HomeScreen: React.StatelessComponent<HomeScreenProps> = ({
   user
-}) => (
+}) => {
-  <Container>
+  const intl = useIntl();
-    <PageHeader
+
-      title={i18n.t("Hello there, {{userName}}", { userName: user.email })}
+  return (
-    />
+    <Container>
-    <Card>
+      <PageHeader
-      <CardTitle title={i18n.t("Disclaimer")} />
+        title={intl.formatMessage(
-      <CardContent>
+          {
-        <Typography>
+            defaultMessage: "Hello there, {userName}",
-          {i18n.t(
+            description: "header",
-            "The new dashboard and the GraphQL API are preview-quality software."
+            id: "homeScreenHeader"
-          )}
+          },
-        </Typography>
+          { userName: user.email }
-        <Typography>
+        )}
-          {i18n.t(
+      />
-            "The GraphQL API is beta quality. It is not fully optimized and some mutations or queries may be missing."
+      <Card>
-          )}
+        <CardTitle
-        </Typography>
+          title={intl.formatMessage({
-      </CardContent>
+            defaultMessage: "Disclaimer",
-    </Card>
+            description: "header",
-  </Container>
+            id: "homeScreenDisclaimer"
-);
+          })}
+        />
+        <CardContent>
+          <Typography>
+            <FormattedMessage
+              defaultMessage="The new dashboard and the GraphQL API are preview-quality software."
+              id="homeScreenDisclaimerText1"
+            />
+          </Typography>
+          <Typography>
+            <FormattedMessage
+              defaultMessage="The GraphQL API is beta quality. It is not fully optimized and some mutations or queries may be missing."
+              id="homeScreenDisclaimerText2"
+            />
+          </Typography>
+        </CardContent>
+      </Card>
+    </Container>
+  );
+};