From 3233b46aec9d8f1d02d84aefe42f2c659fa78485 Mon Sep 17 00:00:00 2001 From: sektordv Date: Wed, 4 Aug 2021 16:24:14 +0200 Subject: [PATCH] create generic availability status label component --- .../index.ts | 2 -- .../messages.ts | 16 --------- .../CollectionList/CollectionList.tsx | 7 ++-- .../AvailabilityStatusLabel.tsx} | 7 ++-- .../AvailabilityStatusLabel/index.ts | 2 ++ .../AvailabilityStatusLabel}/messages.ts | 6 ++-- .../ProductAvailabilityStatusLabel.tsx | 35 ------------------- .../ProductAvailabilityStatusLabel/index.ts | 2 -- .../components/ProductList/ProductList.tsx | 8 +++-- 9 files changed, 19 insertions(+), 66 deletions(-) delete mode 100644 src/collections/components/CollectionAvailabilityStatusLabel/index.ts delete mode 100644 src/collections/components/CollectionAvailabilityStatusLabel/messages.ts rename src/{collections/components/CollectionAvailabilityStatusLabel/CollectionAvailabilityStatusLabel.tsx => components/AvailabilityStatusLabel/AvailabilityStatusLabel.tsx} (79%) create mode 100644 src/components/AvailabilityStatusLabel/index.ts rename src/{products/components/ProductAvailabilityStatusLabel => components/AvailabilityStatusLabel}/messages.ts (68%) delete mode 100644 src/products/components/ProductAvailabilityStatusLabel/ProductAvailabilityStatusLabel.tsx delete mode 100644 src/products/components/ProductAvailabilityStatusLabel/index.ts diff --git a/src/collections/components/CollectionAvailabilityStatusLabel/index.ts b/src/collections/components/CollectionAvailabilityStatusLabel/index.ts deleted file mode 100644 index e48f56c4e..000000000 --- a/src/collections/components/CollectionAvailabilityStatusLabel/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./CollectionAvailabilityStatusLabel"; -export * from "./CollectionAvailabilityStatusLabel"; diff --git a/src/collections/components/CollectionAvailabilityStatusLabel/messages.ts b/src/collections/components/CollectionAvailabilityStatusLabel/messages.ts deleted file mode 100644 index 00de0eb87..000000000 --- a/src/collections/components/CollectionAvailabilityStatusLabel/messages.ts +++ /dev/null @@ -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" - } -}); diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index 7067070bd..575cadcd2 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/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 = props => { {(!collection && ) || (!collection?.channelListings?.length && "-") || (collection?.channelListings !== undefined && 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; diff --git a/src/components/AvailabilityStatusLabel/index.ts b/src/components/AvailabilityStatusLabel/index.ts new file mode 100644 index 000000000..ed07509bf --- /dev/null +++ b/src/components/AvailabilityStatusLabel/index.ts @@ -0,0 +1,2 @@ +export { default } from "./AvailabilityStatusLabel"; +export * from "./AvailabilityStatusLabel"; diff --git a/src/products/components/ProductAvailabilityStatusLabel/messages.ts b/src/components/AvailabilityStatusLabel/messages.ts similarity index 68% rename from src/products/components/ProductAvailabilityStatusLabel/messages.ts rename to src/components/AvailabilityStatusLabel/messages.ts index 63bf0377e..3543a2487 100644 --- a/src/products/components/ProductAvailabilityStatusLabel/messages.ts +++ b/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" } }); diff --git a/src/products/components/ProductAvailabilityStatusLabel/ProductAvailabilityStatusLabel.tsx b/src/products/components/ProductAvailabilityStatusLabel/ProductAvailabilityStatusLabel.tsx deleted file mode 100644 index cd6051044..000000000 --- a/src/products/components/ProductAvailabilityStatusLabel/ProductAvailabilityStatusLabel.tsx +++ /dev/null @@ -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 ( - - ); -}; - -export default ProductAvailabilityStatusLabel; diff --git a/src/products/components/ProductAvailabilityStatusLabel/index.ts b/src/products/components/ProductAvailabilityStatusLabel/index.ts deleted file mode 100644 index 602f172eb..000000000 --- a/src/products/components/ProductAvailabilityStatusLabel/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./ProductAvailabilityStatusLabel"; -export * from "./ProductAvailabilityStatusLabel"; diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index d4b419a18..7f2068e91 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/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 = props => { {(!product && ) || (!product?.channelListings?.length && "-") || (product?.channelListings !== undefined && channel ? ( - + ) : (