Fix wrapping issue & typos on homescreen (#1505) (#1517)

* fix wrapping issues & messages

* fix messages id & camelCase

locale/defaultMessages.json

@@ -208,24 +208,6 @@
     "context": "subheader",
     "string": "Here is some information we gathered about your store"
   },
-  "homeNotificationTableNoOrders": {
-    "string": "No orders ready to fulfill"
-  },
-  "homeNotificationTableOrders": {
-    "string": "{amount, plural,one {One order is ready to fulfill} other {{amount} Orders are ready to fulfill}}"
-  },
-  "homeNotificationTablePayments": {
-    "string": "{amount, plural,one {One payment to capture}other {{amount} Payments to capture}}"
-  },
-  "homeNotificationTableProducts": {
-    "string": "{amount, plural,one {One product out of stock}other {{amount} Products out of stock}}"
-  },
-  "homeNotificationsNoPayments": {
-    "string": "No payments waiting for capture"
-  },
-  "homeNotificationsTableNoProducts": {
-    "string": "No products out of stock"
-  },
   "homeProductListCardOrders": {
     "context": "number of ordered products",
     "string": "{amount, plural,one {One ordered}other {{amount} Ordered}}"
@@ -3952,6 +3934,24 @@
   "src_dot_home_dot_components_dot_HomeNotificationTable_dot_createNewChannel": {
     "string": "Create new channel"
   },
+  "src_dot_home_dot_components_dot_HomeNotificationTable_dot_noOrders": {
+    "string": "No orders ready to fulfill"
+  },
+  "src_dot_home_dot_components_dot_HomeNotificationTable_dot_noPaymentWaiting": {
+    "string": "No payments waiting for capture"
+  },
+  "src_dot_home_dot_components_dot_HomeNotificationTable_dot_noProductsOut": {
+    "string": "No products are out of stock"
+  },
+  "src_dot_home_dot_components_dot_HomeNotificationTable_dot_orderReady": {
+    "string": "{amount, plural,one {One order is ready to fulfill} other {{amount} orders are ready to fulfill}}"
+  },
+  "src_dot_home_dot_components_dot_HomeNotificationTable_dot_paymentCapture": {
+    "string": "{amount, plural,one {One payment to capture}other {{amount} payments to capture}}"
+  },
+  "src_dot_home_dot_components_dot_HomeNotificationTable_dot_productOut": {
+    "string": "{amount, plural,one {One product out of stock}other {{amount} products out of stock}}"
+  },
   "src_dot_hooks_dot_3382262667": {
     "string": "Variant {name} has been set as default."
   },

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -13,46 +13,15 @@ import { makeStyles } from "@saleor/macaw-ui";
 import { UserPermissionProps } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import React from "react";
-import { defineMessages, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
-const messages = defineMessages({
-  createNewChannel: {
-    defaultMessage: "Create new channel"
-  },
-  noOrders: {
-    defaultMessage: "No orders ready to fulfill",
-    id: "homeNotificationTableNoOrders"
-  },
-  noPaymentWaiting: {
-    defaultMessage: "No payments waiting for capture",
-    id: "homeNotificationsNoPayments"
-  },
-  noProductsOut: {
-    defaultMessage: "No products out of stock",
-    id: "homeNotificationsTableNoProducts"
-  },
-  orderReady: {
-    defaultMessage:
-      "{amount, plural,one {One order is ready to fulfill} other {{amount} Orders are ready to fulfill}}",
-    id: "homeNotificationTableOrders"
-  },
-  paymentCapture: {
-    defaultMessage:
-      "{amount, plural,one {One payment to capture}other {{amount} Payments to capture}}",
-    id: "homeNotificationTablePayments"
-  },
-  productOut: {
-    defaultMessage:
-      "{amount, plural,one {One product out of stock}other {{amount} Products out of stock}}",
-    id: "homeNotificationTableProducts"
-  }
-});
+import { homeNotificationTableMessages as messages } from "./messages";
 
 const useStyles = makeStyles(
   () => ({
     arrowIcon: {
       textAlign: "right",
-      width: "auto"
+      width: 100
     },
     tableCard: {
       overflow: "hidden"

src/home/components/HomeNotificationTable/messages.ts

@@ -0,0 +1,28 @@
+import { defineMessages } from "react-intl";
+
+export const homeNotificationTableMessages = defineMessages({
+  createNewChannel: {
+    defaultMessage: "Create new channel"
+  },
+  noOrders: {
+    defaultMessage: "No orders ready to fulfill"
+  },
+  noPaymentWaiting: {
+    defaultMessage: "No payments waiting for capture"
+  },
+  noProductsOut: {
+    defaultMessage: "No products are out of stock"
+  },
+  orderReady: {
+    defaultMessage:
+      "{amount, plural,one {One order is ready to fulfill} other {{amount} orders are ready to fulfill}}"
+  },
+  paymentCapture: {
+    defaultMessage:
+      "{amount, plural,one {One payment to capture}other {{amount} payments to capture}}"
+  },
+  productOut: {
+    defaultMessage:
+      "{amount, plural,one {One product out of stock}other {{amount} products out of stock}}"
+  }
+});

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -109879,7 +109879,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                       <strong>
                         1
                       </strong>
-                       Orders are ready to fulfill
+                       orders are ready to fulfill
                     </div>
                   </td>
                   <td
@@ -109935,7 +109935,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
                     >
-                      No products out of stock
+                      No products are out of stock
                     </div>
                   </td>
                   <td
@@ -110672,7 +110672,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
                     >
-                      No products out of stock
+                      No products are out of stock
                     </div>
                   </td>
                   <td
@@ -110866,7 +110866,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                       <strong>
                         1
                       </strong>
-                       Orders are ready to fulfill
+                       orders are ready to fulfill
                     </div>
                   </td>
                   <td
@@ -110922,7 +110922,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
                     >
-                      No products out of stock
+                      No products are out of stock
                     </div>
                   </td>
                   <td
@@ -111276,7 +111276,7 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
                       <strong>
                         1
                       </strong>
-                       Orders are ready to fulfill
+                       orders are ready to fulfill
                     </div>
                   </td>
                   <td
@@ -111754,7 +111754,7 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
                     <div
                       class="MuiTypography-root-id MuiTypography-body1-id"
                     >
-                      No products out of stock
+                      No products are out of stock
                     </div>
                   </td>
                   <td