Merge pull request #780 from mirumee/Fix-publish-and-available-for-purchase-behaviour

Fix publish and available for purchase behaviour

CHANGELOG.md

@@ -53,6 +53,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix style of product type attributes empty table - #744 by @orzechdev
 - Fix order draft back button redirect - #753 by @orzechdev
 - Add manage product types and attributes permission - #768 by @orzechdev
+- Fix isPublished and isAvailable behaviour for products, collections and pages - #780 by @mmarkusik
 
 ## 2.10.1
 

assets/images/close-thin.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.63623" y="0.000427246" width="23.1412" height="2.31412" transform="rotate(45 1.63623 0.000427246)" fill="#3D3D3D"/>
+<rect x="18" y="1.63641" width="23.1412" height="2.31412" transform="rotate(135 18 1.63641)" fill="#3D3D3D"/>
+</svg>

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -83,6 +83,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
 
     onSubmit({
       ...data,
+      isPublished: data.isPublished || !!data.publicationDate,
       metadata,
       privateMetadata
     });

src/components/VisibilityCard/DateVisibilitySelector.tsx

@@ -0,0 +1,83 @@
+import closeIcon from "@assets/images/close-thin.svg";
+import { Typography } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import React, { useState } from "react";
+
+import FormSpacer from "../FormSpacer";
+
+const CLOSE_ICON_SIZE = 14;
+
+const useStyles = makeStyles(
+  theme => ({
+    buttonText: {
+      color: theme.palette.primary.main,
+      cursor: "pointer",
+      fontSize: 14,
+      marginBottom: theme.spacing(1),
+      paddingBottom: 10,
+      paddingTop: 0
+    },
+    container: {
+      alignItems: "baseline",
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    icon: {
+      cursor: "pointer",
+      marginLeft: theme.spacing(2)
+    }
+  }),
+  { name: "DateVisibilitySelector" }
+);
+
+interface Props {
+  buttonText: string;
+  children: React.ReactNode;
+  onInputClose: () => void;
+}
+
+const DateVisibilitySelector = ({
+  buttonText,
+  children,
+  onInputClose
+}: Props) => {
+  const classes = useStyles({});
+
+  const [showInput, setShowInput] = useState<boolean>(false);
+
+  const handleCloseIconClick = () => {
+    setShowInput(false);
+    onInputClose();
+  };
+
+  if (!showInput) {
+    return (
+      <Typography
+        className={classes.buttonText}
+        onClick={() => setShowInput(true)}
+      >
+        {buttonText}
+      </Typography>
+    );
+  }
+
+  return (
+    <>
+      <div className={classes.container}>
+        {children}
+        <div className={classes.icon} onClick={handleCloseIconClick}>
+          <img
+            src={closeIcon}
+            alt="close icon"
+            width={CLOSE_ICON_SIZE}
+            height={CLOSE_ICON_SIZE}
+          />
+        </div>
+      </div>
+      <FormSpacer />
+    </>
+  );
+};
+
+export default DateVisibilitySelector;

src/components/VisibilityCard/VisibilityCard.tsx

@@ -12,11 +12,12 @@ import { ChangeEvent } from "@saleor/hooks/useForm";
 import { UserError } from "@saleor/types";
 import { getFieldError } from "@saleor/utils/errors";
 import classNames from "classnames";
-import React, { useState } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
 import { DateContext } from "../Date/DateContext";
 import FormSpacer from "../FormSpacer";
+import DateVisibilitySelector from "./DateVisibilitySelector";
 
 const useStyles = makeStyles(
   theme => ({
@@ -36,7 +37,7 @@ const useStyles = makeStyles(
       "& svg": {
         fill: theme.palette.primary.main
       },
-      marginTop: theme.spacing(3)
+      marginTop: theme.spacing(1)
     },
     label: {
       lineHeight: 1.2,
@@ -48,14 +49,11 @@ const useStyles = makeStyles(
     },
     secondLabel: {
       color: theme.palette.text.hint,
-      fontSize: 12
+      fontSize: 12,
+      marginBottom: theme.spacing(2)
     },
-    setPublicationDate: {
+    switchField: {
-      color: theme.palette.primary.main,
+      marginTop: theme.spacing(1)
-      cursor: "pointer",
-      fontSize: 14,
-      paddingBottom: 10,
-      paddingTop: 0
     }
   }),
   { name: "VisibilityCard" }
@@ -71,13 +69,17 @@ interface Message {
   availableSecondLabel?: string;
   setAvailabilityDateLabel?: string;
 }
+
+export interface DateFields {
+  publicationDate: string;
+  availableForPurchase?: string;
+}
+
 export interface VisibilityCardProps {
   children?: React.ReactNode | React.ReactNodeArray;
-  data: {
+  data: DateFields & {
-    availableForPurchase?: string;
     isAvailableForPurchase?: boolean;
     isPublished: boolean;
-    publicationDate: string;
     visibleInListings?: boolean;
   };
   errors: UserError[];
@@ -108,13 +110,6 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
   const hasAvailableProps =
     isAvailable !== undefined && availableForPurchase !== undefined;
 
-  const [isPublicationDate, setPublicationDate] = useState(
-    publicationDate === null ? true : false
-  );
-  const [isAvailableDate, setAvailableDate] = useState(
-    availableForPurchase === null ? true : false
-  );
-
   const visibleMessage = (date: string) =>
     intl.formatMessage(
       {
@@ -126,6 +121,21 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
       }
     );
 
+  const handleRadioFieldChange = (type: keyof DateFields) => (
+    e: ChangeEvent
+  ) => {
+    const { value } = e.target;
+    if (!value) {
+      onChange({
+        target: {
+          name: type,
+          value: null
+        }
+      });
+    }
+    return onChange(e);
+  };
+
   return (
     <Card>
       <CardTitle
@@ -165,39 +175,36 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
             </>
           }
           value={isPublished}
-          onChange={onChange}
+          onChange={handleRadioFieldChange("publicationDate")}
         />
         {!isPublished && (
-          <>
+          <DateVisibilitySelector
-            <Typography
+            buttonText={intl.formatMessage({
-              className={classes.setPublicationDate}
+              defaultMessage: "Set publication date"
-              onClick={() => setPublicationDate(!isPublicationDate)}
+            })}
-            >
+            onInputClose={() =>
-              {intl.formatMessage({
+              onChange({ target: { name: "publicationDate", value: null } })
-                defaultMessage: "Set publication date"
+            }
+          >
+            <TextField
+              error={!!getFieldError(errors, "publicationDate")}
+              disabled={disabled}
+              label={intl.formatMessage({
+                defaultMessage: "Publish on",
+                description: "publish on date"
               })}
-            </Typography>
+              name="publicationDate"
-            {isPublicationDate && (
+              type="date"
-              <TextField
+              fullWidth={true}
-                error={!!getFieldError(errors, "publicationDate")}
+              helperText={getFieldError(errors, "publicationDate")?.message}
-                disabled={disabled}
+              value={publicationDate ? publicationDate : ""}
-                label={intl.formatMessage({
+              onChange={onChange}
-                  defaultMessage: "Publish on",
+              className={classes.date}
-                  description: "publish on date"
+              InputLabelProps={{
-                })}
+                shrink: true
-                name="publicationDate"
+              }}
-                type="date"
+            />
-                fullWidth={true}
+          </DateVisibilitySelector>
-                helperText={getFieldError(errors, "publicationDate")?.message}
-                value={publicationDate ? publicationDate : ""}
-                onChange={onChange}
-                className={classes.date}
-                InputLabelProps={{
-                  shrink: true
-                }}
-              />
-            )}
-          </>
         )}
         {getFieldError(errors, "isPublished") && (
           <>
@@ -211,6 +218,7 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
           <>
             <Hr />
             <RadioSwitchField
+              className={classes.switchField}
               disabled={disabled}
               error={!!getFieldError(errors, "isAvailableForPurchase")}
               firstOptionLabel={
@@ -237,48 +245,36 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
                 </>
               }
               value={isAvailable}
-              onChange={e => {
+              onChange={handleRadioFieldChange("availableForPurchase")}
-                const { value } = e.target;
-                if (!value) {
-                  onChange({
-                    target: {
-                      name: "availableForPurchase",
-                      value: null
-                    }
-                  });
-                }
-                return onChange(e);
-              }}
             />
             {!isAvailable && (
-              <>
+              <DateVisibilitySelector
-                <Typography
+                buttonText={messages.setAvailabilityDateLabel}
-                  className={classes.setPublicationDate}
+                onInputClose={() =>
-                  onClick={() => setAvailableDate(!isAvailable)}
+                  onChange({
-                >
+                    target: { name: "availableForPurchase", value: null }
-                  {messages.setAvailabilityDateLabel}
+                  })
-                </Typography>
+                }
-                {isAvailableDate && (
+              >
-                  <TextField
+                <TextField
-                    error={!!getFieldError(errors, "startDate")}
+                  error={!!getFieldError(errors, "startDate")}
-                    disabled={disabled}
+                  disabled={disabled}
-                    label={intl.formatMessage({
+                  label={intl.formatMessage({
-                      defaultMessage: "Set available on",
+                    defaultMessage: "Set available on",
-                      description: "available on date"
+                    description: "available on date"
-                    })}
+                  })}
-                    name="availableForPurchase"
+                  name="availableForPurchase"
-                    type="date"
+                  type="date"
-                    fullWidth={true}
+                  fullWidth={true}
-                    helperText={getFieldError(errors, "startDate")?.message}
+                  helperText={getFieldError(errors, "startDate")?.message}
-                    value={availableForPurchase ? availableForPurchase : ""}
+                  value={availableForPurchase ? availableForPurchase : ""}
-                    onChange={onChange}
+                  onChange={onChange}
-                    className={classes.date}
+                  className={classes.date}
-                    InputLabelProps={{
+                  InputLabelProps={{
-                      shrink: true
+                    shrink: true
-                    }}
+                  }}
-                  />
+                />
-                )}
+              </DateVisibilitySelector>
-              </>
             )}
             {getFieldError(errors, "isAvailableForPurchase") && (
               <>

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -70,8 +70,16 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
     slug: maybe(() => page.slug, ""),
     title: maybe(() => page.title, "")
   };
+
+  const handleSubmit = (data: FormData) => onSubmit(getParsedData(data));
+
+  const getParsedData = (data: FormData) => ({
+    ...data,
+    isPublished: data.isPublished || !!data.publicationDate
+  });
+
   return (
-    <Form initial={initialForm} onSubmit={onSubmit}>
+    <Form initial={initialForm} onSubmit={handleSubmit}>
       {({ change, data, hasChanged, submit }) => (
         <Container>
           <AppHeader onBack={onBack}>

src/pages/views/PageCreate.tsx

@@ -53,11 +53,7 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
                   input: {
                     contentJson: JSON.stringify(formData.content),
                     isPublished: formData.isPublished,
-                    publicationDate: formData.isPublished
+                    publicationDate: formData.publicationDate,
-                      ? null
-                      : formData.publicationDate === ""
-                      ? null
-                      : formData.publicationDate,
                     seo: {
                       description: formData.seoDescription,
                       title: formData.seoTitle

src/pages/views/PageDetails.tsx

@@ -23,11 +23,7 @@ export interface PageDetailsProps {
 const createPageInput = (data: FormData): PageInput => ({
   contentJson: JSON.stringify(data.content),
   isPublished: data.isPublished,
-  publicationDate: data.isPublished
+  publicationDate: data.publicationDate,
-    ? null
-    : data.publicationDate === ""
-    ? null
-    : data.publicationDate,
   seo: {
     description: data.seoDescription,
     title: data.seoTitle

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -187,45 +187,54 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
       value: taxType.taxCode
     })) || [];
 
-  const handleSubmit = (data: ProductUpdatePageFormData) => {
+  const getAvailabilityData = ({
-    const metadata = isMetadataModified ? data.metadata : undefined;
+    availableForPurchase,
-    const privateMetadata = isPrivateMetadataModified
+    isAvailableForPurchase,
-      ? data.privateMetadata
+    isPublished,
-      : undefined;
+    publicationDate
+  }: ProductUpdatePageFormData) => ({
+    isAvailableForPurchase: isAvailableForPurchase || !!availableForPurchase,
+    isPublished: isPublished || !!publicationDate
+  });
 
+  const getStocksData = () => {
     if (product.productType.hasVariants) {
-      onSubmit({
+      return { removeStocks: [], updateStocks: [] };
-        ...data,
-        addStocks: [],
-        attributes,
-        metadata,
-        privateMetadata,
-        removeStocks: [],
-        updateStocks: []
-      });
-    } else {
-      const dataStocks = stocks.map(stock => stock.id);
-      const variantStocks = product.variants[0]?.stocks.map(
-        stock => stock.warehouse.id
-      );
-      const stockDiff = diff(variantStocks, dataStocks);
-
-      onSubmit({
-        ...data,
-        addStocks: stocks.filter(stock =>
-          stockDiff.added.some(addedStock => addedStock === stock.id)
-        ),
-        attributes,
-        metadata,
-        privateMetadata,
-        removeStocks: stockDiff.removed,
-        updateStocks: stocks.filter(
-          stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
-        )
-      });
     }
+
+    const dataStocks = stocks.map(stock => stock.id);
+    const variantStocks = product.variants[0]?.stocks.map(
+      stock => stock.warehouse.id
+    );
+    const stockDiff = diff(variantStocks, dataStocks);
+
+    return {
+      removeStocks: stockDiff.removed,
+      updateStocks: stocks.filter(
+        stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
+      )
+    };
   };
 
+  const getMetadata = (data: ProductUpdatePageFormData) => ({
+    metadata: isMetadataModified ? data.metadata : undefined,
+    privateMetadata: isPrivateMetadataModified
+      ? data.privateMetadata
+      : undefined
+  });
+
+  const getParsedData = (data: ProductUpdatePageFormData) => ({
+    ...data,
+    ...getAvailabilityData(data),
+    ...getStocksData(),
+    ...getMetadata(data),
+    addStocks: [],
+    attributes
+  });
+
+  const handleSubmit = (data: ProductUpdatePageFormData) =>
+    onSubmit(getParsedData(data));
+
   return (
     <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
       {({ change, data, hasChanged, submit, triggerChange, toggleValue }) => {

src/products/utils/handlers.ts

@@ -60,23 +60,12 @@ interface ProductAvailabilityArgs {
   productId: string;
 }
 
-export function getProductAvailabilityVariables({
+export const getProductAvailabilityVariables = ({
   isAvailableForPurchase,
   availableForPurchase,
   productId
-}: ProductAvailabilityArgs) {
+}: ProductAvailabilityArgs) => ({
-  const isAvailable =
+  isAvailable: isAvailableForPurchase,
-    availableForPurchase && !isAvailableForPurchase
+  productId,
-      ? true
+  startDate: availableForPurchase
-      : isAvailableForPurchase;
+});
-
-  return {
-    isAvailable,
-    productId,
-    startDate: isAvailableForPurchase
-      ? null
-      : availableForPurchase !== ""
-      ? availableForPurchase
-      : null
-  };
-}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -1437,7 +1437,7 @@ exports[`Storyshots Generics / AvailabilityCard default 1`] = `
         class="Hr-root-id"
       />
       <div
-        class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+        class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
       >
         <div
           aria-label="isAvailableForPurchase"
@@ -1556,7 +1556,7 @@ exports[`Storyshots Generics / AvailabilityCard default 1`] = `
         </div>
       </div>
       <div
-        class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+        class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
       >
         Set availability date
       </div>
@@ -47605,7 +47605,7 @@ Ctrl + K"
                   </div>
                 </div>
                 <div
-                  class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
                 >
                   Set publication date
                 </div>
@@ -51453,7 +51453,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -52299,7 +52299,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -53146,7 +53146,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -113561,7 +113561,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -114385,7 +114385,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -115016,7 +115016,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -138280,7 +138280,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -138288,7 +138288,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -138411,7 +138411,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
@@ -139561,7 +139561,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -139569,7 +139569,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -139688,7 +139688,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
@@ -140993,7 +140993,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -141001,7 +141001,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -141120,7 +141120,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
@@ -147655,7 +147655,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -147774,45 +147774,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />
@@ -149938,7 +149903,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -150057,45 +150022,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />
@@ -152448,7 +152378,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -152567,45 +152497,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />
@@ -154895,7 +154790,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -155014,45 +154909,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />
@@ -157539,7 +157399,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -157658,45 +157518,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />
@@ -160081,7 +159906,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -160200,45 +160025,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />
@@ -161731,7 +161521,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -164003,7 +163793,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -164122,45 +163912,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />
@@ -166647,7 +166402,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -166766,45 +166521,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <hr
                 class="Hr-root-id"
               />