fix

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/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: "closeableInputWrapper" }
+);
+
+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=""
+            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" }
@@ -108,13 +106,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(
       {
@@ -168,36 +159,33 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
           onChange={onChange}
         />
         {!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 +199,7 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
           <>
             <Hr />
             <RadioSwitchField
+              className={classes.switchField}
               disabled={disabled}
               error={!!getFieldError(errors, "isAvailableForPurchase")}
               firstOptionLabel={
@@ -251,34 +240,33 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
               }}
             />
             {!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/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -187,45 +187,50 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
       value: taxType.taxCode
     })) || [];
 
-  const handleSubmit = (data: ProductUpdatePageFormData) => {
+  const getAvailabilityData = (data: ProductUpdatePageFormData) => ({
+    isAvailableForPurchase: !!data.availableForPurchase,
+    isPublished: !!data.publicationDate
+  });
+
+  const getStocksData = () => {
+    if (product.productType.hasVariants) {
+      return { removeStocks: [], updateStocks: [] };
+    }
+
+    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 getParsedData = (data: ProductUpdatePageFormData) => {
     const metadata = isMetadataModified ? data.metadata : undefined;
     const privateMetadata = isPrivateMetadataModified
       ? data.privateMetadata
       : undefined;
 
-    if (product.productType.hasVariants) {
+    return {
-      onSubmit({
+      ...data,
-        ...data,
+      ...getAvailabilityData(data),
-        addStocks: [],
+      ...getStocksData(),
-        attributes,
+      addStocks: [],
-        metadata,
+      attributes,
-        privateMetadata,
+      metadata,
-        removeStocks: [],
+      privateMetadata
-        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 handleSubmit = (data: ProductUpdatePageFormData) =>
+    onSubmit(getParsedData(data));
+
   return (
     <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
       {({ change, data, hasChanged, submit, triggerChange, toggleValue }) => {