Fix visibility card component

src/collections/views/CollectionCreate.tsx

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

src/collections/views/CollectionDetails.tsx

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

src/components/RadioGroupField/RadioGroupField.tsx

@@ -30,11 +30,10 @@ const styles = createStyles({
   }
 });
 
-interface RadioGroupFieldProps extends WithStyles<typeof styles> {
+interface RadioGroupFieldProps {
   choices: Array<{
     value: string;
-    label: string | React.ReactNode;
+    label: React.ReactNode;
-    secondLabel?: string | React.ReactNode;
   }>;
   className?: string;
   disabled?: boolean;
@@ -60,7 +59,7 @@ export const RadioGroupField = withStyles(styles, {
     onChange,
     name,
     hint
-  }: RadioGroupFieldProps) => {
+  }: RadioGroupFieldProps & WithStyles<typeof styles>) => {
     return (
       <FormControl
         className={classNames(classes.formControl, className)}
@@ -82,14 +81,7 @@ export const RadioGroupField = withStyles(styles, {
                 value={choice.value}
                 className={classes.radioLabel}
                 control={<Radio color="primary" />}
-                label={
+                label={choice.label}
-                  <>
-                    {choice.label}
-                    <span className={classes.secondLabel}>
-                      {choice.secondLabel}
-                    </span>
-                  </>
-                }
                 key={choice.value}
               />
             ))

src/components/RadioSwitchField/RadioSwitchField.tsx

@@ -0,0 +1,97 @@
+import FormControl from "@material-ui/core/FormControl";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import classNames from "classnames";
+import React from "react";
+
+const styles = createStyles({
+  formControl: {
+    padding: 0,
+    width: "100%"
+  },
+  formLabel: {
+    marginLeft: "-5px",
+    paddingBottom: "10px"
+  },
+  radioLabel: {
+    "& > span": {
+      padding: "10px 6px"
+    }
+  },
+  secondLabel: {
+    display: "block",
+    fontSize: "12px"
+  }
+});
+
+interface RadioSwitchFieldProps {
+  className?: string;
+  disabled?: boolean;
+  error?: boolean;
+  firstOptionLabel: React.ReactNode;
+  name?: string;
+  secondOptionLabel: React.ReactNode;
+  value?: boolean;
+  onChange: (event: React.ChangeEvent<any>) => void;
+}
+
+export const RadioSwitchField = withStyles(styles, {
+  name: "RadioSwitchField"
+})(
+  ({
+    className,
+    classes,
+    disabled,
+    error,
+    firstOptionLabel,
+    onChange,
+    name,
+    secondOptionLabel,
+    value
+  }: RadioSwitchFieldProps & WithStyles<typeof styles>) => {
+    const initialValue = value ? "visible" : "hidden";
+
+    const change = event => {
+      onChange({
+        target: {
+          name: event.target.name,
+          value: event.target.value === "visible" ? true : false
+        }
+      } as any);
+    };
+
+    return (
+      <FormControl
+        className={classNames(classes.formControl, className)}
+        error={error}
+        disabled={disabled}
+      >
+        <RadioGroup
+          aria-label={name}
+          name={name}
+          value={initialValue}
+          onChange={event => change(event)}
+        >
+          <FormControlLabel
+            value="visible"
+            className={classes.radioLabel}
+            control={<Radio color="primary" />}
+            label={firstOptionLabel}
+            name={name}
+          />
+          <FormControlLabel
+            value="hidden"
+            className={classes.radioLabel}
+            control={<Radio color="primary" />}
+            label={secondOptionLabel}
+            name={name}
+          />
+        </RadioGroup>
+      </FormControl>
+    );
+  }
+);
+RadioSwitchField.displayName = "RadioSwitchField";
+export default RadioSwitchField;

src/components/RadioSwitchField/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./RadioSwitchField";
+export * from "./RadioSwitchField";

src/components/VisibilityCard/VisibilityCard.tsx

@@ -12,8 +12,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import { FormSpacer } from "@saleor/components/FormSpacer";
+import RadioSwitchField from "@saleor/components/RadioSwitchField";
-import RadioGroupField from "@saleor/components/RadioGroupField";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import { DateContext } from "../Date/DateContext";
 
@@ -25,6 +24,13 @@ const styles = (theme: Theme) =>
       },
       marginTop: theme.spacing.unit * 3
     },
+    label: {
+      lineHeight: 1,
+      margin: 0
+    },
+    secondLabel: {
+      fontSize: 12
+    },
     setPublicationDate: {
       color: theme.palette.primary.main,
       cursor: "pointer",
@@ -42,7 +48,7 @@ interface VisibilityCardProps extends WithStyles<typeof styles> {
   };
   errors: { [key: string]: string };
   disabled?: boolean;
-  onChange(event: any);
+  onChange: (event: React.ChangeEvent<any>) => void;
 }
 
 export const VisibilityCard = withStyles(styles, {
@@ -62,12 +68,6 @@ export const VisibilityCard = withStyles(styles, {
     );
     const localizeDate = useDateLocalize();
     const dateNow = React.useContext(DateContext);
-    const isPublishedRadio =
-      typeof isPublished !== "boolean"
-        ? isPublished
-        : isPublished
-        ? "true"
-        : "false";
     const visibleSecondLabel = publicationDate
       ? isPublished
         ? intl.formatMessage(
@@ -95,22 +95,6 @@ export const VisibilityCard = withStyles(styles, {
         : 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
@@ -120,16 +104,37 @@ export const VisibilityCard = withStyles(styles, {
           })}
         />
         <CardContent>
-          <RadioGroupField
+          <RadioSwitchField
-            choices={visiblilityPickerChoices}
             disabled={disabled}
+            firstOptionLabel={
+              <>
+                <p className={classes.label}>
+                  {intl.formatMessage({
+                    defaultMessage: "Visible"
+                  })}
+                </p>
+                <span className={classes.secondLabel}>
+                  {visibleSecondLabel}
+                </span>
+              </>
+            }
             name={"isPublished" as keyof FormData}
-            value={isPublishedRadio}
+            secondOptionLabel={
+              <>
+                <p className={classes.label}>
+                  {intl.formatMessage({
+                    defaultMessage: "Hidden"
+                  })}
+                </p>
+                <span className={classes.secondLabel}>{hiddenSecondLabel}</span>
+              </>
+            }
+            value={isPublished}
             onChange={onChange}
           />
-          {isPublishedRadio === "false" && (
+          {!isPublished && (
             <>
-              {!isPublicationDate && (
+              {!isPublished && (
                 <Typography
                   className={classes.setPublicationDate}
                   onClick={() => setPublicationDate(!isPublicationDate)}
@@ -161,7 +166,6 @@ export const VisibilityCard = withStyles(styles, {
               )}
             </>
           )}
-          <FormSpacer />
           {children}
         </CardContent>
       </Card>

src/pages/views/PageCreate.tsx

@@ -59,11 +59,7 @@ export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
                   variables: {
                     input: {
                       contentJson: JSON.stringify(formData.content),
-                      isPublished:
+                      isPublished: formData.isPublished,
-                        typeof formData.isPublished !== "boolean" &&
-                        formData.isPublished === "true"
-                          ? true
-                          : false,
                       publicationDate: formData.isPublished
                         ? null
                         : formData.publicationDate === ""

src/pages/views/PageDetails.tsx

@@ -22,10 +22,7 @@ export interface PageDetailsProps {
 const createPageInput = (data: FormData): PageInput => {
   return {
     contentJson: JSON.stringify(data.content),
-    isPublished:
+    isPublished: data.isPublished,
-      typeof data.isPublished !== "boolean" && data.isPublished === "true"
-        ? true
-        : false,
     publicationDate: data.isPublished
       ? null
       : data.publicationDate === ""

src/products/views/ProductCreate.tsx

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

src/products/views/ProductUpdate/handlers.ts

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