Save after toggling "has variants"

This commit is contained in:
dominik-zeglen 2019-09-04 13:50:34 +02:00
parent 192c67bda4
commit 123a31a775
3 changed files with 142 additions and 50 deletions

View file

@ -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 && (
<>

View file

@ -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,

View file

@ -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>