create generic availability status label component

src/collections/components/CollectionAvailabilityStatusLabel/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./CollectionAvailabilityStatusLabel";
-export * from "./CollectionAvailabilityStatusLabel";

src/collections/components/CollectionAvailabilityStatusLabel/messages.ts

@@ -1,16 +0,0 @@
-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/collections/components/CollectionList/CollectionList.tsx

@@ -1,6 +1,7 @@
 import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core";
 import { CollectionListUrlSortField } from "@saleor/collections/urls";
 import { canBeSorted } from "@saleor/collections/views/CollectionList/sort";
+import AvailabilityStatusLabel from "@saleor/components/AvailabilityStatusLabel";
 import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
 import Checkbox from "@saleor/components/Checkbox";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
@@ -16,7 +17,6 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
-import CollectionAvailabilityStatusLabel from "../CollectionAvailabilityStatusLabel";
 
 const useStyles = makeStyles(
   theme => ({
@@ -189,7 +189,10 @@ const CollectionList: React.FC<CollectionListProps> = props => {
                   {(!collection && <Skeleton />) ||
                     (!collection?.channelListings?.length && "-") ||
                     (collection?.channelListings !== undefined && channel ? (
-                      <CollectionAvailabilityStatusLabel channel={channel} />
+                      <AvailabilityStatusLabel
+                        channel={channel}
+                        type="collection"
+                      />
                     ) : (
                       <ChannelsAvailabilityDropdown
                         allChannelsCount={channelsCount}

src/components/AvailabilityStatusLabel/AvailabilityStatusLabel.tsx

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl";
 
 import { messages } from "./messages";
 
-export const CollectionAvailabilityStatusLabel = ({ channel }) => {
+export const AvailabilityStatusLabel = ({ channel, type }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
 
@@ -18,7 +18,8 @@ export const CollectionAvailabilityStatusLabel = ({ channel }) => {
             : messages.willBePublished
           : messages.unpublished,
         {
-          date: localizeDate(channel.publicationDate, "L")
+          date: localizeDate(channel.publicationDate, "L"),
+          type: type || ""
         }
       )}
       status={
@@ -32,4 +33,4 @@ export const CollectionAvailabilityStatusLabel = ({ channel }) => {
   );
 };
 
-export default CollectionAvailabilityStatusLabel;
+export default AvailabilityStatusLabel;

src/components/AvailabilityStatusLabel/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./AvailabilityStatusLabel";
+export * from "./AvailabilityStatusLabel";

src/components/AvailabilityStatusLabel/messages.ts

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

src/products/components/ProductAvailabilityStatusLabel/ProductAvailabilityStatusLabel.tsx

@@ -1,35 +0,0 @@
-import StatusLabel from "@saleor/components/StatusLabel";
-import useDateLocalize from "@saleor/hooks/useDateLocalize";
-import React from "react";
-import { useIntl } from "react-intl";
-
-import { messages } from "./messages";
-
-export const ProductAvailabilityStatusLabel = ({ channel }) => {
-  const intl = useIntl();
-  const localizeDate = useDateLocalize();
-
-  return (
-    <StatusLabel
-      label={intl.formatMessage(
-        channel.publicationDate
-          ? channel.isPublished
-            ? messages.published
-            : messages.willBePublished
-          : messages.unpublished,
-        {
-          date: localizeDate(channel.publicationDate, "L")
-        }
-      )}
-      status={
-        channel.publicationDate
-          ? channel.isPublished
-            ? "success"
-            : "alert"
-          : "error"
-      }
-    />
-  );
-};
-
-export default ProductAvailabilityStatusLabel;

src/products/components/ProductAvailabilityStatusLabel/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ProductAvailabilityStatusLabel";
-export * from "./ProductAvailabilityStatusLabel";

src/products/components/ProductList/ProductList.tsx

@@ -5,6 +5,7 @@ import {
   TableRow,
   Typography
 } from "@material-ui/core";
+import AvailabilityStatusLabel from "@saleor/components/AvailabilityStatusLabel";
 import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
 import Checkbox from "@saleor/components/Checkbox";
 import MoneyRange from "@saleor/components/MoneyRange";
@@ -35,8 +36,6 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import ProductAvailabilityStatusLabel from "../ProductAvailabilityStatusLabel";
-
 const useStyles = makeStyles(
   theme => ({
     [theme.breakpoints.up("lg")]: {
@@ -376,7 +375,10 @@ export const ProductList: React.FC<ProductListProps> = props => {
                       {(!product && <Skeleton />) ||
                         (!product?.channelListings?.length && "-") ||
                         (product?.channelListings !== undefined && channel ? (
-                          <ProductAvailabilityStatusLabel channel={channel} />
+                          <AvailabilityStatusLabel
+                            channel={channel}
+                            type="product"
+                          />
                         ) : (
                           <ChannelsAvailabilityDropdown
                             allChannelsCount={channelsCount}