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,16 +159,14 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
           onChange={onChange}
         />
         {!isPublished && (
-          <>
+          <DateVisibilitySelector
-            <Typography
+            buttonText={intl.formatMessage({
-              className={classes.setPublicationDate}
-              onClick={() => setPublicationDate(!isPublicationDate)}
-            >
-              {intl.formatMessage({
               defaultMessage: "Set publication date"
             })}
-            </Typography>
+            onInputClose={() =>
-            {isPublicationDate && (
+              onChange({ target: { name: "publicationDate", value: null } })
+            }
+          >
             <TextField
               error={!!getFieldError(errors, "publicationDate")}
               disabled={disabled}
@@ -196,8 +185,7 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
                 shrink: true
               }}
             />
-            )}
+          </DateVisibilitySelector>
-          </>
         )}
         {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,14 +240,14 @@ 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
                   error={!!getFieldError(errors, "startDate")}
                   disabled={disabled}
@@ -277,8 +266,7 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
                     shrink: true
                   }}
                 />
-                )}
+              </DateVisibilitySelector>
-              </>
             )}
             {getFieldError(errors, "isAvailableForPurchase") && (
               <>

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

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