Refactor home section translations (#115)

* Refactor home screen translations * Update pot file * Fix plural forms * Update pot file
2019-08-26 16:19:19 +02:00 · 2019-08-26 16:19:19 +02:00 · 290f6ca396
commit 290f6ca396
parent 2d0a33fc0d
7 changed files with 366 additions and 137 deletions
--- a/locale/messages.pot
+++ b/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:
--- a/src/home/components/HomeActivityCard/HomeActivityCard.tsx
+++ b/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" })(
-  ({ classes, activities }: HomeProductListCardProps) => {
+const HomeActivityCard = withStyles(styles, { name: "HomeActivityCard" })(
+  ({ 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";
-export default HomeProductListCard;
+HomeActivityCard.displayName = "HomeActivityCard";
+export default HomeActivityCard;
--- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
+++ b/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 i18n from "../../../i18n";
+import { FormattedMessage } from "react-intl";

 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}
--- a/src/home/components/HomeHeader/HomeHeader.tsx
+++ b/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" }} />
        )}
--- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
+++ b/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
-                    dangerouslySetInnerHTML={{
-                      __html: i18n.t(
-                        "<b>{{ amount }} Orders</b> are ready to fulfill",
-                        { amount: ordersToFulfill }
-                      )
-                    }}
-                  />
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="{amount, plural,
+                        one {One order}
+                        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
-                    dangerouslySetInnerHTML={{
-                      __html: i18n.t(
-                        "<b>{{ amount }} Payments</b> to capture",
-                        { amount: ordersToCapture }
-                      )
-                    }}
-                  />
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="{amount, plural,
+                        one {One payment}
+                        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
-                    dangerouslySetInnerHTML={{
-                      __html: i18n.t(
-                        "<b>{{ amount }} Products</b> out of stock",
-                        { amount: productsOutOfStock }
-                      )
-                    }}
-                  />
+                  <Typography>
+                    <FormattedMessage
+                      defaultMessage="{amount, plural,
+                        one {One product}
+                        other {{amount} Products}
+                      } out of stock"
+                      id="homeNotificationTableProducts"
+                      values={{
+                        amount: productsOutOfStock
+                      }}
+                    />
+                  </Typography>
                )}
              </TableCell>
              <TableCell className={classes.arrowIcon}>
--- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx
+++ b/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) => (
-    <Card>
-      <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}
-                />
+  ({ classes, topProducts, onRowClick }: HomeProductListProps) => {
+    const intl = useIntl();

-                <TableCell>
-                  {variant ? (
-                    <>
-                      <Typography color={"primary"}>
-                        {variant.product.name}
-                      </Typography>
-                      <Typography color={"textSecondary"}>
-                        {maybe(() =>
-                          variant.attributes
-                            .map(attribute => attribute.value.name)
-                            .join(" / ")
-                        )}
-                      </Typography>
-                      <Typography color={"textSecondary"}>
-                        {i18n.t("{{ordersCount}} Orders", {
-                          ordersCount: variant.quantityOrdered
-                        })}
-                      </Typography>
-                    </>
-                  ) : (
-                    <Skeleton />
-                  )}
-                </TableCell>
+    return (
+      <Card>
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Top products",
+            description: "header",
+            id: "homeProductsListCardHeader"
+          })}
+        />
+        <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>
-                  <Typography align={"right"}>
-                    {maybe(
-                      () => (
-                        <Money money={variant.revenue.gross} />
-                      ),
+                  <TableCell>
+                    {variant ? (
+                      <>
+                        <Typography color={"primary"}>
+                          {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>
-              </TableRow>
-            ),
-            () => (
-              <TableRow>
-                <TableCell className={classes.noProducts}>
-                  <Typography>{i18n.t("No products found")}</Typography>
-                </TableCell>
-              </TableRow>
-            )
-          )}
-        </TableBody>
-      </Table>
-    </Card>
-  )
+                  </TableCell>
+
+                  <TableCell>
+                    <Typography align={"right"}>
+                      {maybe(
+                        () => (
+                          <Money money={variant.revenue.gross} />
+                        ),
+                        <Skeleton />
+                      )}
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              ),
+              () => (
+                <TableRow>
+                  <TableCell className={classes.noProducts}>
+                    <Typography>
+                      <FormattedMessage
+                        defaultMessage="No products found"
+                        id="homeProductsListCardNoProducts"
+                      />
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              )
+            )}
+          </TableBody>
+        </Table>
+      </Card>
+    );
+  }
 );

 HomeProductList.displayName = "HomeProductList";
--- a/src/home/components/HomeScreen.tsx
+++ b/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>
-    <PageHeader
-      title={i18n.t("Hello there, {{userName}}", { userName: user.email })}
-    />
-    <Card>
-      <CardTitle title={i18n.t("Disclaimer")} />
-      <CardContent>
-        <Typography>
-          {i18n.t(
-            "The new dashboard and the GraphQL API are preview-quality software."
-          )}
-        </Typography>
-        <Typography>
-          {i18n.t(
-            "The GraphQL API is beta quality. It is not fully optimized and some mutations or queries may be missing."
-          )}
-        </Typography>
-      </CardContent>
-    </Card>
-  </Container>
-);
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Container>
+      <PageHeader
+        title={intl.formatMessage(
+          {
+            defaultMessage: "Hello there, {userName}",
+            description: "header",
+            id: "homeScreenHeader"
+          },
+          { userName: user.email }
+        )}
+      />
+      <Card>
+        <CardTitle
+          title={intl.formatMessage({
+            defaultMessage: "Disclaimer",
+            description: "header",
+            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>
+  );
+};