Save after toggling "has variants"
This commit is contained in:
parent
192c67bda4
commit
123a31a775
3 changed files with 142 additions and 50 deletions
|
@ -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 && (
|
||||
<>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue