Fix visibility card

src/collections/views/CollectionCreate.tsx

@@ -63,7 +63,11 @@ export const CollectionCreate: React.FC = () => {
                       backgroundImage: formData.backgroundImage.value,
                       backgroundImageAlt: formData.backgroundImageAlt,
                       descriptionJson: JSON.stringify(formData.description),
-                      isPublished: formData.isPublished,
+                      isPublished:
+                        typeof formData.isPublished !== "boolean" &&
+                        formData.isPublished === "true"
+                          ? true
+                          : false,
                       name: formData.name,
                       seo: {
                         description: formData.seoDescription,

src/collections/views/CollectionDetails.tsx

@@ -148,7 +148,11 @@ export const CollectionDetails: React.StatelessComponent<
                 const input: CollectionInput = {
                   backgroundImageAlt: formData.backgroundImageAlt,
                   descriptionJson: JSON.stringify(formData.description),
-                  isPublished: formData.isPublished,
+                  isPublished:
+                    typeof formData.isPublished !== "boolean" &&
+                    formData.isPublished === "true"
+                      ? true
+                      : false,
                   name: formData.name,
                   publicationDate: formData.publicationDate,
                   seo: {

src/components/Checkbox/Checkbox.tsx

@@ -31,8 +31,8 @@ const styles = (theme: Theme) =>
       "&$checked": {
         "&:before": {
           background: theme.palette.primary.main,
-          content: '"\\2713"',
           color: theme.palette.common.white,
+          content: '"\\2713"',
           fontWeight: "bold",
           textAlign: "center"
         },
@@ -74,17 +74,17 @@ const styles = (theme: Theme) =>
     disabled: {},
     indeterminate: {},
     root: {
+      "&:hover": {
+        background: fade(theme.palette.primary.main, 0.1)
+      },
       alignItems: "center",
       borderRadius: "100%",
       cursor: "pointer",
       display: "flex",
       height: 30,
       justifyContent: "center",
-      width: 30,
       margin: 9,
-      "&:hover": {
+      width: 30
-        background: fade(theme.palette.primary.main, 0.1)
-      }
     }
   });
 const Checkbox = withStyles(styles, { name: "Checkbox" })(

src/components/RadioGroupField/RadioGroupField.tsx

@@ -21,6 +21,10 @@ const styles = createStyles({
   },
   radioLabel: {
     "& > span": {
+      "& > span": {
+        display: "block",
+        fontSize: "12px"
+      },
       padding: "6px"
     }
   }
@@ -30,6 +34,7 @@ interface RadioGroupFieldProps extends WithStyles<typeof styles> {
   choices: Array<{
     value: string;
     label: string | React.ReactNode;
+    secondLabel?: string | React.ReactNode;
   }>;
   className?: string;
   disabled?: boolean;
@@ -72,15 +77,22 @@ export const RadioGroupField = withStyles(styles, {
           onChange={onChange}
         >
           {choices.length > 0 ? (
-            choices.map(choice => (
+            choices.map(choice => {
+              return (
                 <FormControlLabel
                   value={choice.value}
                   className={classes.radioLabel}
                   control={<Radio color="primary" />}
-                label={choice.label}
+                  label={
+                    <>
+                      {choice.label}
+                      <span>{choice.secondLabel}</span>
+                    </>
+                  }
                   key={choice.value}
                 />
-            ))
+              );
+            })
           ) : (
             <MenuItem disabled={true}>
               <FormattedMessage defaultMessage="No results found" />

src/components/VisibilityCard/VisibilityCard.tsx

@@ -7,12 +7,13 @@ import {
   WithStyles
 } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
 import { FormSpacer } from "@saleor/components/FormSpacer";
+import RadioGroupField from "@saleor/components/RadioGroupField";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import { DateContext } from "../Date/DateContext";
 
@@ -22,12 +23,25 @@ const styles = (theme: Theme) =>
       "& svg": {
         fill: theme.palette.primary.main
       },
-      marginTop: theme.spacing.unit * 4
+      marginTop: theme.spacing.unit * 3
     },
     expandedSwitchContainer: {
+      "& > div": {
+        padding: 0
+      },
       marginBottom: 0
     },
+    setPublicationDate: {
+      color: theme.palette.primary.main,
+      cursor: "pointer",
+      fontSize: "14px",
+      paddingTop: "15px",
+      textDecoration: "underline"
+    },
     switchContainer: {
+      "& > div": {
+        padding: 0
+      },
       marginBottom: -theme.spacing.unit
     }
   });
@@ -55,8 +69,60 @@ export const VisibilityCard = withStyles(styles, {
     onChange
   }: VisibilityCardProps) => {
     const intl = useIntl();
+    const [isPublicationDate, setPublicationDate] = React.useState(
+      publicationDate === null ? true : false
+    );
     const localizeDate = useDateLocalize();
     const dateNow = React.useContext(DateContext);
+    const isPublishedRadio =
+      typeof isPublished !== "boolean"
+        ? isPublished
+        : isPublished
+        ? "true"
+        : "false";
+    const visibleSecondLabel = publicationDate
+      ? isPublished
+        ? intl.formatMessage(
+            {
+              defaultMessage: "since {date}"
+            },
+            {
+              date: localizeDate(publicationDate)
+            }
+          )
+        : null
+      : null;
+    const hiddenSecondLabel = publicationDate
+      ? isPublished
+        ? null
+        : Date.parse(publicationDate) > dateNow
+        ? intl.formatMessage(
+            {
+              defaultMessage: "will be visible from {date}"
+            },
+            {
+              date: localizeDate(publicationDate)
+            }
+          )
+        : null
+      : null;
+
+    const visiblilityPickerChoices = [
+      {
+        label: intl.formatMessage({
+          defaultMessage: "Visible"
+        }),
+        secondLabel: visibleSecondLabel,
+        value: "true"
+      },
+      {
+        label: intl.formatMessage({
+          defaultMessage: "Hidden"
+        }),
+        secondLabel: hiddenSecondLabel,
+        value: "false"
+      }
+    ];
     return (
       <Card>
         <CardTitle
@@ -73,44 +139,26 @@ export const VisibilityCard = withStyles(styles, {
                 : classes.switchContainer
             }
           >
-            <ControlledSwitch
+            <RadioGroupField
-              name="isPublished"
+              choices={visiblilityPickerChoices}
-              label={intl.formatMessage({
-                defaultMessage: "Visible"
-              })}
-              uncheckedLabel={intl.formatMessage({
-                defaultMessage: "Hidden"
-              })}
-              secondLabel={
-                publicationDate
-                  ? isPublished
-                    ? intl.formatMessage(
-                        {
-                          defaultMessage: "since {date}"
-                        },
-                        {
-                          date: localizeDate(publicationDate)
-                        }
-                      )
-                    : Date.parse(publicationDate) > dateNow
-                    ? intl.formatMessage(
-                        {
-                          defaultMessage: "will be visible from {date}"
-                        },
-                        {
-                          date: localizeDate(publicationDate)
-                        }
-                      )
-                    : null
-                  : null
-              }
-              checked={isPublished}
-              onChange={onChange}
               disabled={disabled}
+              name={"isPublished" as keyof FormData}
+              value={isPublishedRadio}
+              onChange={onChange}
             />
           </div>
-          {!isPublished && (
+          {isPublishedRadio === "false" && (
             <>
+              {!isPublicationDate && (
+                <Typography
+                  className={classes.setPublicationDate}
+                  onClick={() => setPublicationDate(!isPublicationDate)}
+                >
+                  {" "}
+                  Set publication date
+                </Typography>
+              )}
+              {isPublicationDate && (
                 <TextField
                   error={!!errors.publicationDate}
                   disabled={disabled}
@@ -129,6 +177,7 @@ export const VisibilityCard = withStyles(styles, {
                     shrink: true
                   }}
                 />
+              )}
             </>
           )}
           <FormSpacer />

src/configuration/ConfigurationPage.tsx

@@ -53,14 +53,14 @@ const styles = (theme: Theme) =>
       marginBottom: theme.spacing.unit * 3
     },
     configurationCategory: {
-      borderTop: `solid 1px #eaeaea`,
-      paddingTop: theme.spacing.unit * 3 + "px",
       [theme.breakpoints.down("md")]: {
         gridTemplateColumns: "1fr"
       },
+      borderTop: `solid 1px #eaeaea`,
       display: "grid",
       gridColumnGap: theme.spacing.unit * 4 + "px",
-      gridTemplateColumns: "1fr 3fr"
+      gridTemplateColumns: "1fr 3fr",
+      paddingTop: theme.spacing.unit * 3 + "px"
     },
     configurationItem: {
       display: "grid",

src/customers/components/CustomerAddress/CustomerAddress.tsx

@@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import CardContent from "@material-ui/core/CardContent";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -44,7 +43,6 @@ const styles = createStyles({
 const CustomerAddress = withStyles(styles, { name: "CustomerAddress" })(
   ({
     address,
-    addressNumber,
     classes,
     disabled,
     isDefaultBillingAddress,

src/pages/views/PageCreate.tsx

@@ -54,16 +54,16 @@ export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
               page={null}
               onBack={() => navigate(pageListUrl())}
               onRemove={() => undefined}
-              onSubmit={formData =>
+              onSubmit={formData => {
                 pageCreate({
                   variables: {
                     input: {
                       contentJson: JSON.stringify(formData.content),
-                      isPublished: formData.isPublished
+                      isPublished:
+                        typeof formData.isPublished !== "boolean" &&
+                        formData.isPublished === "true"
                           ? true
-                        : formData.publicationDate === ""
+                          : false,
-                        ? false
-                        : true,
                       publicationDate: formData.isPublished
                         ? null
                         : formData.publicationDate === ""
@@ -77,8 +77,8 @@ export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
                       title: formData.title
                     }
                   }
-                })
+                });
-              }
+              }}
             />
           </>
         );

src/pages/views/PageDetails.tsx

@@ -19,13 +19,13 @@ export interface PageDetailsProps {
   params: PageUrlQueryParams;
 }
 
-const createPageInput = (data: FormData): PageInput => ({
+const createPageInput = (data: FormData): PageInput => {
+  return {
     contentJson: JSON.stringify(data.content),
-  isPublished: data.isPublished
+    isPublished:
+      typeof data.isPublished !== "boolean" && data.isPublished === "true"
         ? true
-    : data.publicationDate === "" || data.publicationDate === null
+        : false,
-    ? false
-    : true,
     publicationDate: data.isPublished
       ? null
       : data.publicationDate === ""
@@ -37,7 +37,8 @@ const createPageInput = (data: FormData): PageInput => ({
     },
     slug: data.slug === "" ? null : data.slug,
     title: data.title
-});
+  };
+};
 
 export const PageDetails: React.StatelessComponent<PageDetailsProps> = ({
   id,

src/products/views/ProductCreate.tsx

@@ -83,7 +83,11 @@ export const ProductUpdate: React.StatelessComponent<
                             descriptionJson: JSON.stringify(
                               formData.description
                             ),
-                            isPublished: formData.isPublished,
+                            isPublished:
+                              typeof formData.isPublished !== "boolean" &&
+                              formData.isPublished === "true"
+                                ? true
+                                : false,
                             name: formData.name,
                             productType: formData.productType,
                             publicationDate:

src/products/views/ProductUpdate/handlers.ts

@@ -25,7 +25,10 @@ export function createUpdateHandler(
       collections: data.collections,
       descriptionJson: JSON.stringify(data.description),
       id: product.id,
-      isPublished: data.isPublished,
+      isPublished:
+        typeof data.isPublished !== "boolean" && data.isPublished === "true"
+          ? true
+          : false,
       name: data.name,
       publicationDate:
         data.publicationDate !== "" ? data.publicationDate : null,