split messages between individual views

src/collections/components/CollectionList/CollectionList.tsx

@@ -17,6 +17,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
+import { messages } from "./messages";
 
 const useStyles = makeStyles(
   theme => ({
@@ -191,7 +192,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
                     (collection?.channelListings !== undefined && channel ? (
                       <AvailabilityStatusLabel
                         channel={channel}
-                        type="collection"
+                        messages={messages}
                       />
                     ) : (
                       <ChannelsAvailabilityDropdown

src/collections/components/CollectionList/messages.ts

@@ -0,0 +1,16 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  published: {
+    defaultMessage: "Published on {date}",
+    description: "collection publication date"
+  },
+  unpublished: {
+    defaultMessage: "Unpublished",
+    description: "collection publication date"
+  },
+  willBePublished: {
+    defaultMessage: "Becomes published on {date}",
+    description: "collection publication date"
+  }
+});

src/components/AvailabilityStatusLabel/AvailabilityStatusLabel.tsx

@@ -3,9 +3,7 @@ import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { messages } from "./messages";
-
-export const AvailabilityStatusLabel = ({ channel, type = "" }) => {
+export const AvailabilityStatusLabel = ({ channel, messages }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
 
@@ -18,8 +16,7 @@ export const AvailabilityStatusLabel = ({ channel, type = "" }) => {
             : messages.willBePublished
           : messages.unpublished,
         {
-          date: localizeDate(channel.publicationDate, "L"),
-          type
+          date: localizeDate(channel.publicationDate, "L")
         }
       )}
       status={

src/products/components/ProductList/ProductList.tsx

@@ -36,6 +36,8 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import { messages } from "./messages";
+
 const useStyles = makeStyles(
   theme => ({
     [theme.breakpoints.up("lg")]: {
@@ -377,7 +379,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                         (product?.channelListings !== undefined && channel ? (
                           <AvailabilityStatusLabel
                             channel={channel}
-                            type="product"
+                            messages={messages}
                           />
                         ) : (
                           <ChannelsAvailabilityDropdown

src/products/components/ProductList/messages.ts

@@ -3,14 +3,14 @@ import { defineMessages } from "react-intl";
 export const messages = defineMessages({
   published: {
     defaultMessage: "Published on {date}",
-    description: "{type} publication date"
+    description: "product publication date"
   },
   unpublished: {
     defaultMessage: "Unpublished",
-    description: "{type} publication date"
+    description: "product publication date"
   },
   willBePublished: {
     defaultMessage: "Becomes published on {date}",
-    description: "{type} publication date"
+    description: "product publication date"
   }
 });