Separate visibility Card messages context

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 (
     <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
@@ -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)
+                        }
+                      )}
                     />
                   </CardContent>
                 </Card>

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 (
     <Form
@@ -124,18 +128,40 @@ const CollectionDetailsPage: 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)
+                    }
+                  )}
                 >
-                  <ControlledCheckbox
+                  <>
-                    name={"isFeatured" as keyof CollectionDetailsPageFormData}
+                    <FormSpacer />
-                    label={intl.formatMessage({
+                    <Hr />
-                      defaultMessage: "Feature on Homepage",
+                    <ControlledCheckbox
-                      description: "switch button"
+                      name={"isFeatured" as keyof CollectionDetailsPageFormData}
-                    })}
+                      label={intl.formatMessage({
-                    checked={data.isFeatured}
+                        defaultMessage: "Feature on Homepage",
-                    onChange={change}
+                        description: "switch button"
-                    disabled={disabled}
+                      })}
-                  />
+                      checked={data.isFeatured}
+                      onChange={change}
+                      disabled={disabled}
+                    />
+                  </>
                 </VisibilityCard>
               </div>
             </div>

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<typeof styles> {
   };
   errors: { [key: string]: string };
   disabled?: boolean;
+  hiddenMessage: string;
   onChange: (event: React.ChangeEvent<any>) => 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(
+        ? visibleMessage
-            {
-              defaultMessage: "since {date}"
-            },
-            {
-              date: localizeDate(publicationDate)
-            }
-          )
         : null
       : null;
     const hiddenSecondLabel = publicationDate
       ? isPublished
         ? null
         : Date.parse(publicationDate) > dateNow
-        ? intl.formatMessage(
+        ? hiddenMessage
-            {
-              defaultMessage: "will be visible from {date}"
-            },
-            {
-              date: localizeDate(publicationDate)
-            }
-          )
         : null
       : null;
 

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<PageDetailsPageProps> = ({
   onSubmit
 }) => {
   const intl = useIntl();
+  const localizeDate = useDateLocalize();
 
   const initialForm: FormData = {
     content: maybe(
@@ -121,9 +123,27 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
               <CardSpacer />
               <VisibilityCard
                 data={data}
-                disabled={disabled}
                 errors={formErrors}
+                disabled={disabled}
+                hiddenMessage={intl.formatMessage(
+                  {
+                    defaultMessage: "will be visible from {date}",
+                    description: "page"
+                  },
+                  {
+                    date: localizeDate(data.publicationDate)
+                  }
+                )}
                 onChange={change}
+                visibleMessage={intl.formatMessage(
+                  {
+                    defaultMessage: "since {date}",
+                    description: "page"
+                  },
+                  {
+                    date: localizeDate(data.publicationDate)
+                  }
+                )}
               />
             </div>
           </Grid>

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)
+                    }
+                  )}
                 />
               </div>
             </Grid>

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<ProductUpdatePageProps> = ({
   toolbar
 }) => {
   const intl = useIntl();
+  const localizeDate = useDateLocalize();
   const attributeInput = React.useMemo(
     () => getAttributeInputFromProduct(product),
     [product]
@@ -290,7 +292,25 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     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)
+                      }
+                    )}
                   />
                 </div>
               </Grid>