Repository: mirumee/saleor-dashboard
Pull request #152 (2019-09-04 11:56:41)

Replace checkbox with switch component in "product type has variants"
I want to merge this change because it fixes a bug, where user couldn't assign any variant attributes after checking 'has variants', because it was not saved yet.

### Screenshots
<img width="1680" alt="Screenshot 2019-09-04 at 13 56 10" src="https://user-images.githubusercontent.com/6833443/64252636-c6547080-cf1b-11e9-9a20-34aa2741298a.png">

### Pull Request Checklist

<!-- Please keep this section. It will make maintainer's life easier. -->

1. [x] All visible strings are translated with proper context.
1. [x] All data-formatting is locale-aware (dates, numbers, and so on).
1. [x] Translated strings are extracted to `.pot` file.
1. [x] Number of API calls is optimized.
1. [x] The changes are tested.
1. [x] Type definitions are up to date.
1. [x] Changes are mentioned in the changelog.



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6bbc1a03f..b69a65183 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,3 +15,4 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add attributes to column picker - #136 by @dominik-zeglen
 - Fix table cell padding - #143 by @dominik-zeglen
 - Add fallback locale - #153 by @dominik-zeglen
+- Replace checkbox with switch component in "product type has variants" - #152 by @dominik-zeglen
diff --git a/locale/messages.pot b/locale/messages.pot
index 2e1462a25..d7bc3641c 100644
--- a/locale/messages.pot
+++ b/locale/messages.pot
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-08-29T12:47:44.847Z\n"
+"POT-Creation-Date: 2019-09-04T11:51:21.421Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -51,6 +51,22 @@ msgctxt "section header"
 msgid "Account Status"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginsList/PluginsList.json
+#. [src.plugins.components.PluginsList.4120604650] - user action bar
+#. defaultMessage is:
+#. Action
+msgctxt "user action bar"
+msgid "Action"
+msgstr ""
+
+#: build/locale/src/plugins/components/PluginsList/PluginsList.json
+#. [src.plugins.components.PluginsList.3247064221] - plugin status
+#. defaultMessage is:
+#. Active
+msgctxt "plugin status"
+msgid "Active"
+msgstr ""
+
 #: build/locale/src/staff/components/StaffList/StaffList.json
 #. [src.staff.components.StaffList.3247064221] - staff member status
 #. defaultMessage is:
@@ -343,10 +359,6 @@ msgstr ""
 #. [src.categories.components.CategoryProducts.3554578821] - button
 #. defaultMessage is:
 #. Add product
-#: build/locale/src/categories/components/CategoryProductsCard/CategoryProductsCard.json
-#. [src.categories.components.CategoryProductsCard.3554578821] - button
-#. defaultMessage is:
-#. Add product
 msgctxt "button"
 msgid "Add product"
 msgstr ""
@@ -1739,14 +1751,6 @@ msgctxt "button"
 msgid "Change photo"
 msgstr ""
 
-#: build/locale/src/products/views/ProductList/ProductList.json
-#. [src.products.views.ProductList.224127438] - product status update notification
-#. defaultMessage is:
-#. Changed publication status
-msgctxt "product status update notification"
-msgid "Changed publication status"
-msgstr ""
-
 #: build/locale/src/products/components/ProductPricing/ProductPricing.json
 #. [src.products.components.ProductPricing.3015886868]
 #. defaultMessage is:
@@ -4043,19 +4047,19 @@ msgctxt "attribute name"
 msgid "Name"
 msgstr ""
 
-#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
-#. [src.categories.components.CategoryProducts.636461959] - product name
+#: build/locale/src/categories/components/CategoryProductList/CategoryProductList.json
+#. [src.categories.components.CategoryProductList.636461959] - product
 #. defaultMessage is:
 #. Name
-#: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
-#. [src.collections.components.CollectionProducts.636461959] - product name
+#: build/locale/src/components/ProductList/ProductList.json
+#. [src.components.ProductList.636461959] - product
 #. defaultMessage is:
 #. Name
-#: build/locale/src/products/components/ProductDetailsForm/ProductDetailsForm.json
-#. [src.products.components.ProductDetailsForm.636461959] - product name
+#: build/locale/src/products/components/ProductList/ProductList.json
+#. [src.products.components.ProductList.636461959] - product
 #. defaultMessage is:
 #. Name
-msgctxt "product name"
+msgctxt "product"
 msgid "Name"
 msgstr ""
 
@@ -4067,11 +4071,15 @@ msgctxt "collection name"
 msgid "Name"
 msgstr ""
 
-#: build/locale/src/components/ProductList/ProductList.json
-#. [src.components.ProductList.636461959] - product
+#: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
+#. [src.collections.components.CollectionProducts.636461959] - product name
 #. defaultMessage is:
 #. Name
-msgctxt "product"
+#: build/locale/src/products/components/ProductDetailsForm/ProductDetailsForm.json
+#. [src.products.components.ProductDetailsForm.636461959] - product name
+#. defaultMessage is:
+#. Name
+msgctxt "product name"
 msgid "Name"
 msgstr ""
 
@@ -4099,6 +4107,14 @@ msgctxt "menu item name"
 msgid "Name"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginsList/PluginsList.json
+#. [src.plugins.components.PluginsList.636461959] - plugin name
+#. defaultMessage is:
+#. Name
+msgctxt "plugin name"
+msgid "Name"
+msgstr ""
+
 #: build/locale/src/products/components/ProductVariants/ProductVariants.json
 #. [src.products.components.ProductVariants.636461959] - product variant name
 #. defaultMessage is:
@@ -4363,6 +4379,14 @@ msgctxt "description"
 msgid "No payments waiting for capture"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginsList/PluginsList.json
+#. [src.plugins.components.PluginsList.666641390]
+#. defaultMessage is:
+#. No plugins found
+msgctxt "description"
+msgid "No plugins found"
+msgstr ""
+
 #: build/locale/src/productTypes/components/ProductTypeList/ProductTypeList.json
 #. [src.productTypes.components.ProductTypeList.1126553969]
 #. defaultMessage is:
@@ -4371,8 +4395,8 @@ msgctxt "description"
 msgid "No product types found"
 msgstr ""
 
-#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
-#. [src.categories.components.CategoryProducts.1657559629]
+#: build/locale/src/categories/components/CategoryProductList/CategoryProductList.json
+#. [src.categories.components.CategoryProductList.1657559629]
 #. defaultMessage is:
 #. No products found
 #: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
@@ -4391,6 +4415,10 @@ msgstr ""
 #. [homeProductsListCardNoProducts]
 #. defaultMessage is:
 #. No products found
+#: build/locale/src/products/components/ProductList/ProductList.json
+#. [src.products.components.ProductList.1657559629]
+#. defaultMessage is:
+#. No products found
 msgctxt "description"
 msgid "No products found"
 msgstr ""
@@ -4619,6 +4647,18 @@ msgctxt "page status"
 msgid "Not Published"
 msgstr ""
 
+#: build/locale/src/categories/components/CategoryProductList/CategoryProductList.json
+#. [src.categories.components.CategoryProductList.2341910657] - product
+#. defaultMessage is:
+#. Not published
+#: build/locale/src/products/components/ProductList/ProductList.json
+#. [src.products.components.ProductList.2341910657] - product
+#. defaultMessage is:
+#. Not published
+msgctxt "product"
+msgid "Not published"
+msgstr ""
+
 #: build/locale/src/collections/components/CollectionList/CollectionList.json
 #. [src.collections.components.CollectionList.2341910657] - collection is not published
 #. defaultMessage is:
@@ -5219,6 +5259,46 @@ msgctxt "product type"
 msgid "Physical"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginInfo/PluginInfo.json
+#. [src.plugins.components.PluginInfo.3425535100] - section header
+#. defaultMessage is:
+#. Plugin Information and Status
+#: build/locale/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.json
+#. [src.plugins.components.PluginsDetailsPage.3425535100] - section header
+#. defaultMessage is:
+#. Plugin Information and Status
+msgctxt "section header"
+msgid "Plugin Information and Status"
+msgstr ""
+
+#: build/locale/src/plugins/components/PluginInfo/PluginInfo.json
+#. [src.plugins.components.PluginInfo.1049131348] - plugin name
+#. defaultMessage is:
+#. Plugin Name
+msgctxt "plugin name"
+msgid "Plugin Name"
+msgstr ""
+
+#: build/locale/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.json
+#. [src.plugins.components.PluginsDetailsPage.1970881031] - section header
+#. defaultMessage is:
+#. Plugin Settings
+#: build/locale/src/plugins/components/PluginSettings/PluginSettings.json
+#. [src.plugins.components.PluginSettings.1970881031] - section header
+#. defaultMessage is:
+#. Plugin Settings
+msgctxt "section header"
+msgid "Plugin Settings"
+msgstr ""
+
+#: build/locale/src/intl.json
+#. [src.plugins] - plugins section name
+#. defaultMessage is:
+#. Plugins
+msgctxt "plugins section name"
+msgid "Plugins"
+msgstr ""
+
 #: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
 #. [src.attributes.components.AttributeProperties.3590282519] - attribute position in storefront filters
 #. defaultMessage is:
@@ -5235,26 +5315,18 @@ msgctxt "order payment"
 msgid "Preauthorized amount"
 msgstr ""
 
-#: build/locale/src/components/ProductList/ProductList.json
-#. [src.components.ProductList.1134347598] - product
+#: build/locale/src/categories/components/CategoryProductList/CategoryProductList.json
+#. [src.categories.components.CategoryProductList.1134347598] - product price
 #. defaultMessage is:
 #. Price
-msgctxt "product"
-msgid "Price"
-msgstr ""
-
-#: build/locale/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.json
-#. [src.orders.components.OrderDraftDetailsProducts.1134347598] - price or ordered products
-#. defaultMessage is:
-#. Price
-msgctxt "price or ordered products"
-msgid "Price"
-msgstr ""
-
 #: build/locale/src/orders/components/OrderFulfillment/OrderFulfillment.json
 #. [src.orders.components.OrderFulfillment.1134347598] - product price
 #. defaultMessage is:
 #. Price
+#: build/locale/src/products/components/ProductList/ProductList.json
+#. [src.products.components.ProductList.1134347598] - product price
+#. defaultMessage is:
+#. Price
 #: build/locale/src/products/components/ProductListPage/ProductListPage.json
 #. [src.products.components.ProductListPage.1134347598] - product price
 #. defaultMessage is:
@@ -5267,6 +5339,22 @@ msgctxt "product price"
 msgid "Price"
 msgstr ""
 
+#: build/locale/src/components/ProductList/ProductList.json
+#. [src.components.ProductList.1134347598] - product
+#. defaultMessage is:
+#. Price
+msgctxt "product"
+msgid "Price"
+msgstr ""
+
+#: build/locale/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.json
+#. [src.orders.components.OrderDraftDetailsProducts.1134347598] - price or ordered products
+#. defaultMessage is:
+#. Price
+msgctxt "price or ordered products"
+msgid "Price"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.json
 #. [src.orders.components.OrderUnfulfilledItems.1134347598] - product unit price
 #. defaultMessage is:
@@ -5483,12 +5571,12 @@ msgctxt "description"
 msgid "Product type deleted"
 msgstr ""
 
-#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
-#. [src.categories.components.CategoryProducts.2968663655] - section header
+#: build/locale/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.json
+#. [src.productTypes.components.ProductTypeDetailsPage.1217376589] - switch button
 #. defaultMessage is:
-#. Products
-msgctxt "section header"
-msgid "Products"
+#. Product type uses Variant Attributes
+msgctxt "switch button"
+msgid "Product type uses Variant Attributes"
 msgstr ""
 
 #: build/locale/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.json
@@ -5539,11 +5627,11 @@ msgctxt "number of products"
 msgid "Products ({quantity})"
 msgstr ""
 
-#: build/locale/src/categories/components/CategoryProductsCard/CategoryProductsCard.json
-#. [src.categories.components.CategoryProductsCard.4164156574] - section header
+#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
+#. [src.categories.components.CategoryProducts.4164156574] - header
 #. defaultMessage is:
 #. Products in {categoryName}
-msgctxt "section header"
+msgctxt "header"
 msgid "Products in {categoryName}"
 msgstr ""
 
@@ -5555,14 +5643,6 @@ msgctxt "products in collection"
 msgid "Products in {name}"
 msgstr ""
 
-#: build/locale/src/products/views/ProductList/ProductList.json
-#. [src.products.views.ProductList.1694086800]
-#. defaultMessage is:
-#. Products removed
-msgctxt "description"
-msgid "Products removed"
-msgstr ""
-
 #: build/locale/src/orders/components/OrderHistory/OrderHistory.json
 #. [src.orders.components.OrderHistory.3506022286] - order history message
 #. defaultMessage is:
@@ -5651,6 +5731,38 @@ msgctxt "publish on date"
 msgid "Publish on"
 msgstr ""
 
+#: build/locale/src/categories/components/CategoryProductList/CategoryProductList.json
+#. [src.categories.components.CategoryProductList.3640454975] - product status
+#. defaultMessage is:
+#. Published
+#: build/locale/src/components/ProductList/ProductList.json
+#. [src.components.ProductList.3640454975] - product status
+#. defaultMessage is:
+#. Published
+#: build/locale/src/products/components/ProductList/ProductList.json
+#. [src.products.components.ProductList.3640454975] - product status
+#. defaultMessage is:
+#. Published
+#: build/locale/src/products/components/ProductListPage/ProductListPage.json
+#. [src.products.components.ProductListPage.3640454975] - product status
+#. defaultMessage is:
+#. Published
+msgctxt "product status"
+msgid "Published"
+msgstr ""
+
+#: build/locale/src/categories/components/CategoryProductList/CategoryProductList.json
+#. [productStatusLabel] - product
+#. defaultMessage is:
+#. Published
+#: build/locale/src/products/components/ProductList/ProductList.json
+#. [productStatusLabel] - product
+#. defaultMessage is:
+#. Published
+msgctxt "product"
+msgid "Published"
+msgstr ""
+
 #: build/locale/src/collections/components/CollectionList/CollectionList.json
 #. [src.collections.components.CollectionList.3640454975] - collection is published
 #. defaultMessage is:
@@ -5671,18 +5783,6 @@ msgctxt "product is published"
 msgid "Published"
 msgstr ""
 
-#: build/locale/src/components/ProductList/ProductList.json
-#. [src.components.ProductList.3640454975] - product status
-#. defaultMessage is:
-#. Published
-#: build/locale/src/products/components/ProductListPage/ProductListPage.json
-#. [src.products.components.ProductListPage.3640454975] - product status
-#. defaultMessage is:
-#. Published
-msgctxt "product status"
-msgid "Published"
-msgstr ""
-
 #: build/locale/src/pages/components/PageList/PageList.json
 #. [src.pages.components.PageList.3640454975] - page status
 #. defaultMessage is:
@@ -6379,6 +6479,14 @@ msgctxt "voucher end date, switch button"
 msgid "Set end date"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginInfo/PluginInfo.json
+#. [src.plugins.components.PluginInfo.4013064767]
+#. defaultMessage is:
+#. Set plugin as Active
+msgctxt "description"
+msgid "Set plugin as Active"
+msgstr ""
+
 #: build/locale/src/discounts/translations.json
 #. [src.discounts.shipment] - voucher discount
 #. defaultMessage is:
@@ -6715,6 +6823,14 @@ msgctxt "order fulfillment status"
 msgid "Status"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginInfo/PluginInfo.json
+#. [src.plugins.components.PluginInfo.1756106276] - plugin status
+#. defaultMessage is:
+#. Status
+msgctxt "plugin status"
+msgid "Status"
+msgstr ""
+
 #: build/locale/src/products/components/ProductListFilter/ProductListFilter.json
 #. [src.products.components.ProductListFilter.1756106276] - product status
 #. defaultMessage is:
@@ -6819,6 +6935,14 @@ msgctxt "order subtotal price"
 msgid "Subtotal"
 msgstr ""
 
+#: build/locale/src/plugins/views/PluginsDetails.json
+#. [src.plugins.views.100549097] - plugin success message
+#. defaultMessage is:
+#. Succesfully updated plugin settings
+msgctxt "plugin success message"
+msgid "Succesfully updated plugin settings"
+msgstr ""
+
 #: build/locale/src/attributes/views/AttributeCreate/AttributeCreate.json
 #. [src.attributes.views.AttributeCreate.11941964]
 #. defaultMessage is:
@@ -6983,6 +7107,22 @@ msgctxt "description"
 msgid "There is no address to show for this customer"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.json
+#. [src.plugins.components.PluginsDetailsPage.2277745418]
+#. defaultMessage is:
+#. These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar.
+msgctxt "description"
+msgid "These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar."
+msgstr ""
+
+#: build/locale/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.json
+#. [src.plugins.components.PluginsDetailsPage.4241018152]
+#. defaultMessage is:
+#. This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers.
+msgctxt "description"
+msgid "This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers."
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.json
 #. [src.customers.components.CustomerAddressListPage.1428369222]
 #. defaultMessage is:
@@ -7035,14 +7175,6 @@ msgctxt "description"
 msgid "This product has no variants"
 msgstr ""
 
-#: build/locale/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.json
-#. [src.productTypes.components.ProductTypeDetailsPage.1756957616] - switch button
-#. defaultMessage is:
-#. This product type has variants
-msgctxt "switch button"
-msgid "This product type has variants"
-msgstr ""
-
 #: build/locale/src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.json
 #. [src.shipping.components.ShippingZoneRateDialog.4226393146]
 #. defaultMessage is:
@@ -7295,14 +7427,18 @@ msgctxt "header"
 msgid "Translations to {language}"
 msgstr ""
 
-#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
-#. [src.categories.components.CategoryProducts.1952810469] - product type
+#: build/locale/src/categories/components/CategoryProductList/CategoryProductList.json
+#. [src.categories.components.CategoryProductList.1952810469] - product type
 #. defaultMessage is:
 #. Type
 #: build/locale/src/collections/components/CollectionProducts/CollectionProducts.json
 #. [src.collections.components.CollectionProducts.1952810469] - product type
 #. defaultMessage is:
 #. Type
+#: build/locale/src/products/components/ProductList/ProductList.json
+#. [src.products.components.ProductList.1952810469] - product type
+#. defaultMessage is:
+#. Type
 #: build/locale/src/products/components/ProductListPage/ProductListPage.json
 #. [src.products.components.ProductListPage.1952810469] - product type
 #. defaultMessage is:
@@ -7871,6 +8007,14 @@ msgctxt "button"
 msgid "View all orders"
 msgstr ""
 
+#: build/locale/src/configuration/index.json
+#. [configurationPluginsPages]
+#. defaultMessage is:
+#. View and update your plugins and their settings.
+msgctxt "description"
+msgid "View and update your plugins and their settings."
+msgstr ""
+
 #: build/locale/src/configuration/index.json
 #. [configurationMenuSiteSettings]
 #. defaultMessage is:
@@ -8299,6 +8443,14 @@ msgctxt "number of countries"
 msgid "{number} Countries"
 msgstr ""
 
+#: build/locale/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.json
+#. [src.plugins.components.PluginsDetailsPage.3352026836] - header
+#. defaultMessage is:
+#. {pluginName} Details
+msgctxt "header"
+msgid "{pluginName} Details"
+msgstr ""
+
 #: build/locale/src/orders/components/OrderPayment/OrderPayment.json
 #. [src.orders.components.OrderPayment.2183023165] - ordered products
 #. defaultMessage is:
diff --git a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
index 2b4bfb9af..d1150695c 100644
--- a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
+++ b/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 && (
                 <>
diff --git a/src/productTypes/views/ProductTypeUpdate/index.tsx b/src/productTypes/views/ProductTypeUpdate/index.tsx
index 67f94a381..73510adbd 100644
--- a/src/productTypes/views/ProductTypeUpdate/index.tsx
+++ b/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,
diff --git a/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx b/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx
index 0fd370515..da2c83493 100644
--- a/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx
+++ b/src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx
@@ -22,6 +22,7 @@ const props: Omit<ProductTypeDetailsPageProps, "classes"> = {
   onAttributeUnassign: () => undefined,
   onBack: () => undefined,
   onDelete: () => undefined,
+  onHasVariantsToggle: () => undefined,
   onSubmit: () => undefined,
   pageTitle: productType.name,
   productAttributeList: listActionsProps,


Test patch:
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 3df89fe0d..eda2d6d28 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/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
-              class="MuiButtonBase-root-id Checkbox-root-id"
-              tabindex="0"
-              type="button"
+            <span
+              class="MuiSwitch-root-id"
             >
-              <input
-                class="Checkbox-box-id"
-                name="hasVariants"
-                type="checkbox"
-                value="false"
+              <span
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+              >
+                <span
+                  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
-              class="MuiButtonBase-root-id Checkbox-root-id"
-              tabindex="0"
-              type="button"
+            <span
+              class="MuiSwitch-root-id"
             >
-              <input
-                class="Checkbox-box-id"
-                name="hasVariants"
-                type="checkbox"
-                value="false"
+              <span
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+              >
+                <span
+                  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
-              class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-              disabled=""
-              tabindex="-1"
-              type="button"
+            <span
+              class="MuiSwitch-root-id"
             >
-              <input
-                class="Checkbox-box-id Checkbox-disabled-id"
-                disabled=""
-                name="hasVariants"
-                type="checkbox"
-                value="false"
+              <span
+                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"
+                tabindex="-1"
+              >
+                <span
+                  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
-              class="MuiButtonBase-root-id Checkbox-root-id"
-              tabindex="0"
-              type="button"
+            <span
+              class="MuiSwitch-root-id"
             >
-              <input
-                class="Checkbox-box-id"
-                name="hasVariants"
-                type="checkbox"
-                value="false"
+              <span
+                class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
+              >
+                <span
+                  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>