diff --git a/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx b/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx index b9677c595..48c5e0dc9 100644 --- a/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx +++ b/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx @@ -15,6 +15,7 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SeoForm from "@saleor/components/SeoForm"; import VisibilityCard from "@saleor/components/VisibilityCard"; +import useDateLocalize from "@saleor/hooks/useDateLocalize"; import { commonMessages, sectionNames } from "@saleor/intl"; import { UserError } from "../../../types"; import CollectionDetails from "../CollectionDetails/CollectionDetails"; @@ -66,6 +67,7 @@ const CollectionCreatePage: React.StatelessComponent< onSubmit }: CollectionCreatePageProps) => { const intl = useIntl(); + const localizeDate = useDateLocalize(); return (
@@ -149,7 +151,25 @@ const CollectionCreatePage: React.StatelessComponent< data={data} errors={formErrors} disabled={disabled} + hiddenMessage={intl.formatMessage( + { + defaultMessage: "will be visible from {date}", + description: "collection" + }, + { + date: localizeDate(data.publicationDate) + } + )} onChange={change} + visibleMessage={intl.formatMessage( + { + defaultMessage: "since {date}", + description: "collection" + }, + { + date: localizeDate(data.publicationDate) + } + )} /> diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx index bd56fe160..e1d972723 100644 --- a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx +++ b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx @@ -8,11 +8,14 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { Container } from "@saleor/components/Container"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import Form from "@saleor/components/Form"; +import FormSpacer from "@saleor/components/FormSpacer"; import Grid from "@saleor/components/Grid"; +import Hr from "@saleor/components/Hr"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SeoForm from "@saleor/components/SeoForm"; import VisibilityCard from "@saleor/components/VisibilityCard"; +import useDateLocalize from "@saleor/hooks/useDateLocalize"; import { sectionNames } from "@saleor/intl"; import { maybe } from "../../../misc"; import { ListActions, PageListProps } from "../../../types"; @@ -59,6 +62,7 @@ const CollectionDetailsPage: React.StatelessComponent< ...collectionProductsProps }: CollectionDetailsPageProps) => { const intl = useIntl(); + const localizeDate = useDateLocalize(); return ( - + <> + +
+ + diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx index ed67afc50..063d35ab7 100644 --- a/src/components/VisibilityCard/VisibilityCard.tsx +++ b/src/components/VisibilityCard/VisibilityCard.tsx @@ -13,7 +13,6 @@ import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import RadioSwitchField from "@saleor/components/RadioSwitchField"; -import useDateLocalize from "@saleor/hooks/useDateLocalize"; import { DateContext } from "../Date/DateContext"; const styles = (theme: Theme) => @@ -48,7 +47,9 @@ interface VisibilityCardProps extends WithStyles { }; errors: { [key: string]: string }; disabled?: boolean; + hiddenMessage: string; onChange: (event: React.ChangeEvent) => void; + visibleMessage: string; } export const VisibilityCard = withStyles(styles, { @@ -60,38 +61,25 @@ export const VisibilityCard = withStyles(styles, { data: { isPublished, publicationDate }, errors, disabled, - onChange + hiddenMessage, + onChange, + visibleMessage }: VisibilityCardProps) => { const intl = useIntl(); const [isPublicationDate, setPublicationDate] = React.useState( publicationDate === null ? true : false ); - const localizeDate = useDateLocalize(); const dateNow = React.useContext(DateContext); const visibleSecondLabel = publicationDate ? isPublished - ? intl.formatMessage( - { - defaultMessage: "since {date}" - }, - { - date: localizeDate(publicationDate) - } - ) + ? visibleMessage : null : null; const hiddenSecondLabel = publicationDate ? isPublished ? null : Date.parse(publicationDate) > dateNow - ? intl.formatMessage( - { - defaultMessage: "will be visible from {date}" - }, - { - date: localizeDate(publicationDate) - } - ) + ? hiddenMessage : null : null; diff --git a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx index e3f0695bc..1d2a3f65d 100644 --- a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx +++ b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx @@ -17,6 +17,7 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SeoForm from "@saleor/components/SeoForm"; import VisibilityCard from "@saleor/components/VisibilityCard"; +import useDateLocalize from "@saleor/hooks/useDateLocalize"; import { sectionNames } from "@saleor/intl"; import { maybe } from "../../../misc"; import { UserError } from "../../../types"; @@ -54,6 +55,7 @@ const PageDetailsPage: React.StatelessComponent = ({ onSubmit }) => { const intl = useIntl(); + const localizeDate = useDateLocalize(); const initialForm: FormData = { content: maybe( @@ -121,9 +123,27 @@ const PageDetailsPage: React.StatelessComponent = ({ diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index 08788dcfd..4ac375c21 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -15,6 +15,7 @@ import SeoForm from "@saleor/components/SeoForm"; import VisibilityCard from "@saleor/components/VisibilityCard"; import { SearchCategories_categories_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories"; import { SearchCollections_collections_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections"; +import useDateLocalize from "@saleor/hooks/useDateLocalize"; import useFormset from "@saleor/hooks/useFormset"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { sectionNames } from "@saleor/intl"; @@ -98,7 +99,7 @@ export const ProductCreatePage: React.StatelessComponent< onSubmit }: ProductCreatePageProps) => { const intl = useIntl(); - + const localizeDate = useDateLocalize(); // Form values const { change: changeAttributeData, @@ -280,7 +281,25 @@ export const ProductCreatePage: React.StatelessComponent< data={data} errors={errors} disabled={disabled} + hiddenMessage={intl.formatMessage( + { + defaultMessage: "will be visible from {date}", + description: "product" + }, + { + date: localizeDate(data.publicationDate) + } + )} onChange={change} + visibleMessage={intl.formatMessage( + { + defaultMessage: "since {date}", + description: "product" + }, + { + date: localizeDate(data.publicationDate) + } + )} /> diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index acd0f4c70..3bc20e141 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx @@ -14,6 +14,7 @@ import SeoForm from "@saleor/components/SeoForm"; import VisibilityCard from "@saleor/components/VisibilityCard"; import { SearchCategories_categories_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories"; import { SearchCollections_collections_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections"; +import useDateLocalize from "@saleor/hooks/useDateLocalize"; import useFormset from "@saleor/hooks/useFormset"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { sectionNames } from "@saleor/intl"; @@ -109,6 +110,7 @@ export const ProductUpdatePage: React.FC = ({ toolbar }) => { const intl = useIntl(); + const localizeDate = useDateLocalize(); const attributeInput = React.useMemo( () => getAttributeInputFromProduct(product), [product] @@ -290,7 +292,25 @@ export const ProductUpdatePage: React.FC = ({ data={data} errors={errors} disabled={disabled} + hiddenMessage={intl.formatMessage( + { + defaultMessage: "will be visible from {date}", + description: "product" + }, + { + date: localizeDate(data.publicationDate) + } + )} onChange={change} + visibleMessage={intl.formatMessage( + { + defaultMessage: "since {date}", + description: "product" + }, + { + date: localizeDate(data.publicationDate) + } + )} />