Save after toggling "has variants"

src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx

@@ -5,7 +5,7 @@ import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
-import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
+import ControlledSwitch from "@saleor/components/ControlledSwitch";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
@@ -56,6 +56,7 @@ export interface ProductTypeDetailsPageProps {
   onAttributeUnassign: (id: string) => void;
   onBack: () => void;
   onDelete: () => void;
+  onHasVariantsToggle: (hasVariants: boolean) => void;
   onSubmit: (data: ProductTypeForm) => void;
 }
 
@@ -89,6 +90,7 @@ const ProductTypeDetailsPage: React.StatelessComponent<
   onAttributeClick,
   onBack,
   onDelete,
+  onHasVariantsToggle,
   onSubmit
 }) => {
   const intl = useIntl();
@@ -172,15 +174,15 @@ const ProductTypeDetailsPage: React.StatelessComponent<
                 {...productAttributeList}
               />
               <CardSpacer />
-              <ControlledCheckbox
+              <ControlledSwitch
                 checked={data.hasVariants}
                 disabled={disabled}
                 label={intl.formatMessage({
-                  defaultMessage: "This product type has variants",
+                  defaultMessage: "Product type uses Variant Attributes",
                   description: "switch button"
                 })}
                 name="hasVariants"
-                onChange={change}
+                onChange={event => onHasVariantsToggle(event.target.value)}
               />
               {data.hasVariants && (
                 <>

src/productTypes/views/ProductTypeUpdate/index.tsx

@@ -151,6 +151,15 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
                       }
                     });
                   };
+                  const handleProductTypeVariantsToggle = (
+                    hasVariants: boolean
+                  ) =>
+                    updateProductType.mutate({
+                      id,
+                      input: {
+                        hasVariants
+                      }
+                    });
                   const handleAssignAttribute = () =>
                     assignAttribute.mutate({
                       id,
@@ -266,6 +275,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
                             })
                           )
                         }
+                        onHasVariantsToggle={handleProductTypeVariantsToggle}
                         onSubmit={handleProductTypeUpdate}
                         productAttributeList={{
                           isChecked: productAttributeListActions.isSelected,

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

@@ -76998,22 +76998,42 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
           <label
             class="MuiFormControlLabel-root-id"
           >
-            <button
+            <span
-              class="MuiButtonBase-root-id Checkbox-root-id"
+              class="MuiSwitch-root-id"
-              tabindex="0"
-              type="button"
             >
-              <input
+              <span
-                class="Checkbox-box-id"
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
-                name="hasVariants"
+              >
-                type="checkbox"
+                <span
-                value="false"
+                  class="MuiIconButton-label-id"
+                >
+                  <span
+                    class="MuiSwitch-icon-id"
+                  />
+                  <input
+                    class="MuiPrivateSwitchBase-input-id"
+                    name="hasVariants"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiSwitch-bar-id"
               />
-            </button>
+            </span>
             <span
               class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
             >
-              This product type has variants
+              <div
+                class="ControlledSwitch-label-id"
+              >
+                <span
+                  class="ControlledSwitch-labelText-id"
+                >
+                  Product type uses Variant Attributes
+                </span>
+                <div />
+              </div>
             </span>
           </label>
         </div>
@@ -77634,22 +77654,42 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
           <label
             class="MuiFormControlLabel-root-id"
           >
-            <button
+            <span
-              class="MuiButtonBase-root-id Checkbox-root-id"
+              class="MuiSwitch-root-id"
-              tabindex="0"
-              type="button"
             >
-              <input
+              <span
-                class="Checkbox-box-id"
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
-                name="hasVariants"
+              >
-                type="checkbox"
+                <span
-                value="false"
+                  class="MuiIconButton-label-id"
+                >
+                  <span
+                    class="MuiSwitch-icon-id"
+                  />
+                  <input
+                    class="MuiPrivateSwitchBase-input-id"
+                    name="hasVariants"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiSwitch-bar-id"
               />
-            </button>
+            </span>
             <span
               class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
             >
-              This product type has variants
+              <div
+                class="ControlledSwitch-label-id"
+              >
+                <span
+                  class="ControlledSwitch-labelText-id"
+                >
+                  Product type uses Variant Attributes
+                </span>
+                <div />
+              </div>
             </span>
           </label>
         </div>
@@ -78093,24 +78133,44 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
           <label
             class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
           >
-            <button
+            <span
-              class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
+              class="MuiSwitch-root-id"
-              disabled=""
-              tabindex="-1"
-              type="button"
             >
-              <input
+              <span
-                class="Checkbox-box-id Checkbox-disabled-id"
+                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
-                disabled=""
+                tabindex="-1"
-                name="hasVariants"
+              >
-                type="checkbox"
+                <span
-                value="false"
+                  class="MuiIconButton-label-id"
+                >
+                  <span
+                    class="MuiSwitch-icon-id"
+                  />
+                  <input
+                    class="MuiPrivateSwitchBase-input-id"
+                    disabled=""
+                    name="hasVariants"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiSwitch-bar-id"
               />
-            </button>
+            </span>
             <span
               class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
             >
-              This product type has variants
+              <div
+                class="ControlledSwitch-label-id"
+              >
+                <span
+                  class="ControlledSwitch-labelText-id"
+                >
+                  Product type uses Variant Attributes
+                </span>
+                <div />
+              </div>
             </span>
           </label>
         </div>
@@ -78433,22 +78493,42 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
           <label
             class="MuiFormControlLabel-root-id"
           >
-            <button
+            <span
-              class="MuiButtonBase-root-id Checkbox-root-id"
+              class="MuiSwitch-root-id"
-              tabindex="0"
-              type="button"
             >
-              <input
+              <span
-                class="Checkbox-box-id"
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
-                name="hasVariants"
+              >
-                type="checkbox"
+                <span
-                value="false"
+                  class="MuiIconButton-label-id"
+                >
+                  <span
+                    class="MuiSwitch-icon-id"
+                  />
+                  <input
+                    class="MuiPrivateSwitchBase-input-id"
+                    name="hasVariants"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiSwitch-bar-id"
               />
-            </button>
+            </span>
             <span
               class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
             >
-              This product type has variants
+              <div
+                class="ControlledSwitch-label-id"
+              >
+                <span
+                  class="ControlledSwitch-labelText-id"
+                >
+                  Product type uses Variant Attributes
+                </span>
+                <div />
+              </div>
             </span>
           </label>
         </div>