djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #737 from mirumee/fix/handle-attribute-errors

Browse source 
Fix handle attribute errors
This commit is contained in:
Dominik Żegleń 2020-10-13 15:14:26 +02:00 committed by GitHub
commit fca8d7ab28
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 584 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
schema.graphql
View file

@ -688,6 +688,7 @@ type BulkProductError {
field: String
message: String
code: ProductErrorCode!
attributes: [ID!]
index: Int
warehouses: [ID!]
}
@ -696,6 +697,7 @@ type BulkStockError {
field: String
message: String
code: ProductErrorCode!
attributes: [ID!]
index: Int
}
@ -3744,6 +3746,7 @@ type ProductError {
field: String
message: String
code: ProductErrorCode!
attributes: [ID!]
}
enum ProductErrorCode {
@ -3755,6 +3758,7 @@ enum ProductErrorCode {
GRAPHQL_ERROR
INVALID
NOT_PRODUCTS_IMAGE
NOT_PRODUCTS_VARIANT
NOT_FOUND
REQUIRED
UNIQUE

14
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -4,7 +4,7 @@ import TextField from "@material-ui/core/TextField";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import Downshift from "downshift";
import Downshift, { ControllerStateAndHelpers } from "downshift";
import { filter } from "fuzzaldrin";
import React from "react";
@ -76,20 +76,27 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
const [prevDisplayValue] = useStateFromProps(displayValue);
const handleChange = item =>
const handleChange = (
item: string,
stateAndHelpers: ControllerStateAndHelpers
) => {
onChange({
target: {
name,
value: item
}
} as any);
stateAndHelpers.reset({
inputValue: item
});
};
return (
<DebounceAutocomplete debounceFn={fetchChoices}>
{debounceFn => (
<Downshift
defaultInputValue={displayValue}
itemToString={() => displayValue}
itemToString={() => displayValue || ""}
onInputValueChange={value => debounceFn(value)}
onSelect={handleChange}
selectedItem={value}
@ -190,6 +197,7 @@ const SingleAutocompleteSelectField: React.FC<SingleAutocompleteSelectFieldProps
...rest
}) => {
const [query, setQuery] = React.useState("");
if (fetchChoices) {
return (
<DebounceAutocomplete debounceFn={fetchChoices}>

23
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
View file

@ -35,7 +35,7 @@ export interface SingleAutocompleteSelectFieldContentProps
choices: SingleAutocompleteChoiceType[];
displayCustomValue: boolean;
emptyOption: boolean;
getItemProps: (options: GetItemPropsOptions) => void;
getItemProps: (options: GetItemPropsOptions) => any;
highlightedIndex: number;
inputValue: string;
isCustomValueSelected: boolean;
@ -164,9 +164,11 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
React.useEffect(() => {
setSlice(sliceSize);
anchor.current.scrollTo({
top: 0
});
if (anchor.current?.scrollTo) {
anchor.current.scrollTo({
top: 0
});
}
}, [choices?.length]);
React.useEffect(() => {
@ -175,6 +177,10 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
}
}, [loading]);
const emptyOptionProps = getItemProps({
item: ""
});
return (
<Paper className={classes.root}>
<div
@ -188,10 +194,9 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
<MenuItem
className={classes.menuItem}
component="div"
{...getItemProps({
item: ""
})}
data-test="singleautocomplete-select-option"
data-test-type="empty"
{...emptyOptionProps}
>
<Typography color="textSecondary">
<FormattedMessage defaultMessage="None" />
@ -206,6 +211,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
item: inputValue
})}
data-test="singleautocomplete-select-option-add"
data-test-type="add"
onClick={add.onClick}
>
<Add color="primary" className={classes.add} />
@ -222,6 +228,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
item: inputValue
})}
data-test="singleautocomplete-select-option"
data-test-type="custom"
>
<FormattedMessage
defaultMessage="Add new value: {value}"
@ -254,6 +261,8 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
item: suggestion.value
})}
data-test="singleautocomplete-select-option"
data-test-value={suggestion.value}
data-test-type="option"
>
{suggestion.label}
</MenuItem>

8
src/fragments/errors.ts
View file

@ -7,6 +7,14 @@ export const productErrorFragment = gql`
}
`;
export const productErrorWithAttributesFragment = gql`
${productErrorFragment}
fragment ProductErrorWithAttributesFragment on ProductError {
...ProductErrorFragment
attributes
}
`;
export const accountErrorFragment = gql`
fragment AccountErrorFragment on AccountError {
code

16
src/fragments/types/ProductErrorWithAttributesFragment.ts Normal file
View file

@ -0,0 +1,16 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL fragment: ProductErrorWithAttributesFragment
// ====================================================
export interface ProductErrorWithAttributesFragment {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
attributes: string[] | null;
}

119
src/products/components/ProductAttributes/ProductAttributes.tsx
View file

@ -13,10 +13,11 @@ import MultiAutocompleteSelectField, {
import SingleAutocompleteSelectField, {
SingleAutocompleteChoiceType
} from "@saleor/components/SingleAutocompleteSelectField";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
import { maybe } from "@saleor/misc";
import { ProductDetails_product_attributes_attribute_values } from "@saleor/products/types/ProductDetails";
import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
import { getProductErrorMessage } from "@saleor/utils/errors";
import classNames from "classnames";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -33,6 +34,7 @@ export type ProductAttributeInput = FormsetAtomicData<
export interface ProductAttributesProps {
attributes: ProductAttributeInput[];
disabled: boolean;
errors: ProductErrorWithAttributesFragment[];
onChange: FormsetChange;
onMultiChange: FormsetChange;
}
@ -125,6 +127,7 @@ function getSingleChoices(
const ProductAttributes: React.FC<ProductAttributesProps> = ({
attributes,
disabled,
errors,
onChange,
onMultiChange
}) => {
@ -169,61 +172,69 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
{expanded && attributes.length > 0 && (
<>
<Hr />
{attributes.map((attribute, attributeIndex) => (
<React.Fragment key={attribute.id}>
{attributeIndex > 0 && <Hr />}
<Grid className={classes.attributeSection} variant="uniform">
<div
className={classes.attributeSectionLabel}
data-test="product-attribute-label"
>
<Typography>{attribute.label}</Typography>
</div>
<div data-test="product-attribute-value">
{attribute.data.inputType ===
AttributeInputTypeEnum.DROPDOWN ? (
<SingleAutocompleteSelectField
choices={getSingleChoices(attribute.data.values)}
disabled={disabled}
displayValue={maybe(
() =>
{attributes.map((attribute, attributeIndex) => {
const error = errors.find(err =>
err.attributes?.includes(attribute.id)
);
return (
<React.Fragment key={attribute.id}>
{attributeIndex > 0 && <Hr />}
<Grid className={classes.attributeSection} variant="uniform">
<div
className={classes.attributeSectionLabel}
data-test="product-attribute-label"
>
<Typography>{attribute.label}</Typography>
</div>
<div data-test="product-attribute-value">
{attribute.data.inputType ===
AttributeInputTypeEnum.DROPDOWN ? (
<SingleAutocompleteSelectField
choices={getSingleChoices(attribute.data.values)}
disabled={disabled}
displayValue={
attribute.data.values.find(
value => value.slug === attribute.value[0]
).name,
attribute.value[0]
)}
emptyOption
name={`attribute:${attribute.label}`}
label={intl.formatMessage({
defaultMessage: "Value",
description: "attribute value"
})}
value={attribute.value[0]}
onChange={event =>
onChange(attribute.id, event.target.value)
}
allowCustomValues={!attribute.data.isRequired}
/>
) : (
<MultiAutocompleteSelectField
choices={getMultiChoices(attribute.data.values)}
displayValues={getMultiDisplayValue(attribute)}
label={intl.formatMessage({
defaultMessage: "Values",
description: "attribute values"
})}
name={`attribute:${attribute.label}`}
value={attribute.value}
onChange={event =>
onMultiChange(attribute.id, event.target.value)
}
allowCustomValues={!attribute.data.isRequired}
/>
)}
</div>
</Grid>
</React.Fragment>
))}
)?.name || ""
}
emptyOption={!attribute.data.isRequired}
error={!!error}
helperText={getProductErrorMessage(error, intl)}
name={`attribute:${attribute.label}`}
label={intl.formatMessage({
defaultMessage: "Value",
description: "attribute value"
})}
value={attribute.value[0]}
onChange={event =>
onChange(attribute.id, event.target.value)
}
allowCustomValues={!attribute.data.isRequired}
/>
) : (
<MultiAutocompleteSelectField
choices={getMultiChoices(attribute.data.values)}
displayValues={getMultiDisplayValue(attribute)}
error={!!error}
helperText={getProductErrorMessage(error, intl)}
label={intl.formatMessage({
defaultMessage: "Values",
description: "attribute values"
})}
name={`attribute:${attribute.label}`}
value={attribute.value}
onChange={event =>
onMultiChange(attribute.id, event.target.value)
}
allowCustomValues={!attribute.data.isRequired}
/>
)}
</div>
</Grid>
</React.Fragment>
);
})}
</>
)}
</CardContent>

32
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -10,13 +10,14 @@ import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocomplet
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import useFormset from "@saleor/hooks/useFormset";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
import {
getAttributeInputFromProductType,
getChoices,
ProductAttributeValueChoices,
ProductType
@ -79,7 +80,7 @@ export interface ProductCreatePageSubmitData extends FormData {
}
interface ProductCreatePageProps {
errors: ProductErrorFragment[];
errors: ProductErrorWithAttributesFragment[];
collections: SearchCollections_search_edges_node[];
categories: SearchCategories_search_edges_node[];
currency: string;
@ -87,6 +88,7 @@ interface ProductCreatePageProps {
fetchMoreCategories: FetchMoreProps;
fetchMoreCollections: FetchMoreProps;
fetchMoreProductTypes: FetchMoreProps;
initial?: Partial<FormData>;
productTypes?: Array<{
id: string;
name: string;
@ -118,6 +120,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
fetchMoreCollections,
fetchMoreProductTypes,
header,
initial,
productTypes: productTypeChoiceList,
saveButtonBarState,
warehouses,
@ -130,12 +133,21 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
}: ProductCreatePageProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
const initialProductType = productTypeChoiceList?.find(
productType => initial?.productType === productType.id
);
// Form values
const {
change: changeAttributeData,
data: attributes,
set: setAttributeData
} = useFormset<ProductAttributeInputData>([]);
} = useFormset<ProductAttributeInputData>(
initial?.productType
? getAttributeInputFromProductType(initialProductType)
: []
);
const {
add: addStock,
change: changeStockData,
@ -154,6 +166,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
} = useMetadataChangeTrigger();
const initialData: FormData = {
...(initial || {}),
availableForPurchase: "",
basePrice: 0,
category: "",
@ -185,14 +198,20 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
ProductAttributeValueChoices[]
>([]);
const [selectedCategory, setSelectedCategory] = useStateFromProps("");
const [selectedCategory, setSelectedCategory] = useStateFromProps(
initial?.category || ""
);
const [selectedCollections, setSelectedCollections] = useStateFromProps<
MultiAutocompleteChoiceType[]
>([]);
const [productType, setProductType] = React.useState<ProductType>(null);
const [selectedTaxType, setSelectedTaxType] = useStateFromProps(null);
const [productType, setProductType] = useStateFromProps<ProductType>(
initialProductType || null
);
const [selectedTaxType, setSelectedTaxType] = useStateFromProps(
initial?.taxCode || null
);
const categories = getChoices(categoryChoiceList);
const collections = getChoices(collectionChoiceList);
@ -274,6 +293,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
<ProductAttributes
attributes={attributes}
disabled={disabled}
errors={errors}
onChange={handleAttributeChange}
onMultiChange={handleAttributeMultiChange}
/>

92
src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx Normal file
View file

@ -0,0 +1,92 @@
import placeholderImage from "@assets/images/placeholder255x255.png";
import { collections } from "@saleor/collections/fixtures";
import { fetchMoreProps, listActionsProps } from "@saleor/fixtures";
import { product as productFixture } from "@saleor/products/fixtures";
import { taxTypes } from "@saleor/storybook/stories/taxes/fixtures";
import { warehouseList } from "@saleor/warehouses/fixtures";
import Wrapper from "@test/wrapper";
import { configure, mount } from "enzyme";
import React from "react";
import ProductUpdatePage, { ProductUpdatePageProps } from "./ProductUpdatePage";
const product = productFixture(placeholderImage);
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
const onSubmit = jest.fn();
const props: ProductUpdatePageProps = {
...listActionsProps,
categories: [product.category],
collections,
defaultWeightUnit: "kg",
disabled: false,
errors: [],
fetchCategories: () => undefined,
fetchCollections: () => undefined,
fetchMoreCategories: fetchMoreProps,
fetchMoreCollections: fetchMoreProps,
header: product.name,
images: product.images,
onBack: () => undefined,
onDelete: () => undefined,
onImageDelete: () => undefined,
onImageUpload: () => undefined,
onSetDefaultVariant: () => undefined,
onSubmit,
onVariantAdd: () => undefined,
onVariantReorder: () => undefined,
onVariantShow: () => undefined,
onVariantsAdd: () => undefined,
onWarehouseConfigure: () => undefined,
placeholderImage,
product,
saveButtonBarState: "default",
taxTypes,
variants: product.variants,
warehouses: warehouseList
};
const selectors = {
dropdown: `[data-test="autocomplete-dropdown"]`,
empty: `[data-test-type="empty"]`,
input: `[data-test="product-attribute-value"] input`
};
describe("Product details page", () => {
it("can select empty option on attribute", () => {
const component = mount(
<Wrapper>
<ProductUpdatePage {...props} />
</Wrapper>
);
expect(component.find(selectors.dropdown).exists()).toBeFalsy();
component
.find(selectors.input)
.first()
.simulate("click");
expect(component.find(selectors.dropdown).exists()).toBeTruthy();
expect(component.find(selectors.empty).exists());
component
.find(selectors.empty)
.first()
.simulate("click");
expect(
component
.find(selectors.input)
.first()
.prop("value")
).toEqual("");
component
.find("form")
.first()
.simulate("submit");
expect(onSubmit.mock.calls[0][0].attributes[0].value.length).toEqual(0);
});
});

5
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -9,7 +9,7 @@ import Metadata from "@saleor/components/Metadata/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
@ -58,7 +58,7 @@ import ProductVariants from "../ProductVariants";
export interface ProductUpdatePageProps extends ListActions {
defaultWeightUnit: string;
errors: ProductErrorFragment[];
errors: ProductErrorWithAttributesFragment[];
placeholderImage: string;
collections: SearchCollections_search_edges_node[];
categories: SearchCategories_search_edges_node[];
@ -296,6 +296,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
{attributes.length > 0 && (
<ProductAttributes
attributes={attributes}
errors={errors}
disabled={disabled}
onChange={handleAttributeChange}
onMultiChange={handleAttributeMultiChange}

56
src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx
View file

@ -8,10 +8,10 @@ import SingleAutocompleteSelectField, {
SingleAutocompleteChoiceType
} from "@saleor/components/SingleAutocompleteSelectField";
import Skeleton from "@saleor/components/Skeleton";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { ProductVariant_attributes_attribute_values } from "@saleor/fragments/types/ProductVariant";
import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
import { commonMessages } from "@saleor/intl";
import { VariantCreate_productVariantCreate_errors } from "@saleor/products/types/VariantCreate";
import { getProductVariantAttributeErrorMessage } from "@saleor/utils/errors/product";
import React from "react";
import { useIntl } from "react-intl";
@ -27,7 +27,7 @@ export type VariantAttributeInput = FormsetAtomicData<
interface ProductVariantAttributesProps {
attributes: VariantAttributeInput[];
disabled: boolean;
errors: VariantCreate_productVariantCreate_errors[];
errors: ProductErrorWithAttributesFragment[];
onChange: FormsetChange<VariantAttributeInputData>;
}
@ -84,31 +84,45 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
{attributes === undefined ? (
<Skeleton />
) : (
attributes.map(attribute => (
<SingleAutocompleteSelectField
key={attribute.id}
disabled={disabled}
displayValue={getAttributeDisplayValue(
attribute.id,
attribute.value,
attributes
)}
label={attribute.label}
name={`attribute:${attribute.id}`}
onChange={event => onChange(attribute.id, event.target.value)}
value={getAttributeValue(attribute.id, attributes)}
choices={getAttributeValueChoices(attribute.id, attributes)}
allowCustomValues
data-test="variant-attribute-input"
/>
))
attributes.map(attribute => {
const error = errors.find(err =>
err.attributes?.includes(attribute.id)
);
return (
<SingleAutocompleteSelectField
key={attribute.id}
disabled={disabled}
displayValue={getAttributeDisplayValue(
attribute.id,
attribute.value,
attributes
)}
error={!!error}
helperText={getProductVariantAttributeErrorMessage(
error,
intl
)}
label={attribute.label}
name={`attribute:${attribute.id}`}
onChange={event => onChange(attribute.id, event.target.value)}
value={getAttributeValue(attribute.id, attributes)}
choices={getAttributeValueChoices(attribute.id, attributes)}
allowCustomValues
data-test="variant-attribute-input"
/>
);
})
)}
</Grid>
{errors.length > 0 && (
<>
<FormSpacer />
{errors
.filter(error => error.field === "attributes")
.filter(
error =>
error.field === "attributes" && error.attributes === null
)
.map(error => (
<Typography color="error" key={error.code}>
{getProductVariantAttributeErrorMessage(error, intl)}

4
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

@ -7,7 +7,7 @@ import Grid from "@saleor/components/Grid";
import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import useFormset, {
FormsetChange,
FormsetData
@ -48,7 +48,7 @@ export interface ProductVariantCreatePageSubmitData
interface ProductVariantCreatePageProps {
currencySymbol: string;
disabled: boolean;
errors: ProductErrorFragment[];
errors: ProductErrorWithAttributesFragment[];
header: string;
product: ProductVariantCreateData_product;
saveButtonBarState: ConfirmButtonTransitionState;

8
src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
View file

@ -28,6 +28,9 @@ const useStyles = makeStyles(
colName: {
paddingLeft: 0
},
firstVariant: {
width: 88
},
link: {
cursor: "pointer"
},
@ -126,7 +129,10 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
className={classNames(
classes.colAvatar,
classes.tabActive,
classes.noHandle
classes.noHandle,
{
[classes.firstVariant]: variants?.length === 0
}
)}
thumbnail={null}
colSpan={2}

4
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -8,13 +8,13 @@ import { MetadataFormData } from "@saleor/components/Metadata";
import Metadata from "@saleor/components/Metadata/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { ProductVariant } from "@saleor/fragments/types/ProductVariant";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import useFormset, {
FormsetChange,
FormsetData
} from "@saleor/hooks/useFormset";
import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate";
import {
getAttributeInputFromVariant,
getStockInputFromVariant
@ -56,7 +56,7 @@ export interface ProductVariantPageSubmitData
interface ProductVariantPageProps {
defaultWeightUnit: string;
variant?: ProductVariant;
errors: VariantUpdate_productVariantUpdate_errors[];
errors: ProductErrorWithAttributesFragment[];
saveButtonBarState: ConfirmButtonTransitionState;
loading?: boolean;
placeholderImage?: string;

2
src/products/fixtures.ts
View file

@ -24,7 +24,7 @@ export const product: (
inputType: AttributeInputTypeEnum.DROPDOWN,
name: "Borders",
slug: "Borders",
valueRequired: true,
valueRequired: false,
values: [
{
__typename: "AttributeValue",

23
src/products/mutations.ts
View file

@ -3,6 +3,7 @@ import {
bulkStockErrorFragment,
exportErrorFragment,
productErrorFragment,
productErrorWithAttributesFragment,
stockErrorFragment
} from "@saleor/fragments/errors";
import {
@ -159,12 +160,12 @@ export const useProductVariantSetDefaultMutation = makeMutation<
>(productVariantSetDefault);
export const productUpdateMutation = gql`
${productErrorFragment}
${productErrorWithAttributesFragment}
${productFragmentDetails}
mutation ProductUpdate($id: ID!, $input: ProductInput!) {
productUpdate(id: $id, input: $input) {
errors: productErrors {
...ProductErrorFragment
...ProductErrorWithAttributesFragment
}
product {
...Product
@ -179,7 +180,7 @@ export const useProductUpdateMutation = makeMutation<
export const simpleProductUpdateMutation = gql`
${bulkStockErrorFragment}
${productErrorFragment}
${productErrorWithAttributesFragment}
${productFragmentDetails}
${stockErrorFragment}
${fragmentVariant}
@ -194,7 +195,7 @@ export const simpleProductUpdateMutation = gql`
) {
productUpdate(id: $id, input: $input) {
errors: productErrors {
...ProductErrorFragment
...ProductErrorWithAttributesFragment
}
product {
...Product
@ -202,7 +203,7 @@ export const simpleProductUpdateMutation = gql`
}
productVariantUpdate(id: $productVariantId, input: $productVariantInput) {
errors: productErrors {
...ProductErrorFragment
...ProductErrorWithAttributesFragment
}
productVariant {
...ProductVariant
@ -249,12 +250,12 @@ export const useSimpleProductUpdateMutation = makeMutation<
>(simpleProductUpdateMutation);
export const productCreateMutation = gql`
${productErrorFragment}
${productErrorWithAttributesFragment}
${productFragmentDetails}
mutation ProductCreate($input: ProductCreateInput!) {
productCreate(input: $input) {
errors: productErrors {
...ProductErrorFragment
...ProductErrorWithAttributesFragment
}
product {
...Product
@ -288,7 +289,7 @@ export const useVariantDeleteMutation = makeMutation<
export const variantUpdateMutation = gql`
${bulkStockErrorFragment}
${fragmentVariant}
${productErrorFragment}
${productErrorWithAttributesFragment}
mutation VariantUpdate(
$addStocks: [StockInput!]!
$removeStocks: [ID!]!
@ -313,7 +314,7 @@ export const variantUpdateMutation = gql`
}
) {
errors: productErrors {
...ProductErrorFragment
...ProductErrorWithAttributesFragment
}
productVariant {
...ProductVariant
@ -359,11 +360,11 @@ export const useVariantUpdateMutation = makeMutation<
export const variantCreateMutation = gql`
${fragmentVariant}
${productErrorFragment}
${productErrorWithAttributesFragment}
mutation VariantCreate($input: ProductVariantCreateInput!) {
productVariantCreate(input: $input) {
errors: productErrors {
...ProductErrorFragment
...ProductErrorWithAttributesFragment
}
productVariant {
...ProductVariant

1
src/products/types/ProductCreate.ts
View file

@ -12,6 +12,7 @@ export interface ProductCreate_productCreate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
attributes: string[] | null;
}
export interface ProductCreate_productCreate_product_attributes_attribute_values {

1
src/products/types/ProductUpdate.ts
View file

@ -12,6 +12,7 @@ export interface ProductUpdate_productUpdate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
attributes: string[] | null;
}
export interface ProductUpdate_productUpdate_product_attributes_attribute_values {

2
src/products/types/SimpleProductUpdate.ts
View file

@ -12,6 +12,7 @@ export interface SimpleProductUpdate_productUpdate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
attributes: string[] | null;
}
export interface SimpleProductUpdate_productUpdate_product_attributes_attribute_values {
@ -251,6 +252,7 @@ export interface SimpleProductUpdate_productVariantUpdate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
attributes: string[] | null;
}
export interface SimpleProductUpdate_productVariantUpdate_productVariant_metadata {

1
src/products/types/VariantCreate.ts
View file

@ -12,6 +12,7 @@ export interface VariantCreate_productVariantCreate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
attributes: string[] | null;
}
export interface VariantCreate_productVariantCreate_productVariant_metadata {

1
src/products/types/VariantUpdate.ts
View file

@ -12,6 +12,7 @@ export interface VariantUpdate_productVariantUpdate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
attributes: string[] | null;
}
export interface VariantUpdate_productVariantUpdate_productVariant_metadata {

2
src/products/utils/handlers.ts
View file

@ -42,7 +42,7 @@ export function createAttributeChangeHandler(
]);
triggerChange();
changeAttributeData(attributeId, [value]);
changeAttributeData(attributeId, value === "" ? [] : [value]);
};
}

262
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -8236,6 +8236,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AF"
role="menuitem"
tabindex="-1"
>
@ -8245,6 +8247,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AX"
role="menuitem"
tabindex="-1"
>
@ -8254,6 +8258,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AL"
role="menuitem"
tabindex="-1"
>
@ -8263,6 +8269,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="DZ"
role="menuitem"
tabindex="-1"
>
@ -8272,6 +8280,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AS"
role="menuitem"
tabindex="-1"
>
@ -8281,6 +8291,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AD"
role="menuitem"
tabindex="-1"
>
@ -8290,6 +8302,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AO"
role="menuitem"
tabindex="-1"
>
@ -8299,6 +8313,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AI"
role="menuitem"
tabindex="-1"
>
@ -8308,6 +8324,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AQ"
role="menuitem"
tabindex="-1"
>
@ -8317,6 +8335,8 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AG"
role="menuitem"
tabindex="-1"
>
@ -8388,6 +8408,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AF"
role="menuitem"
tabindex="-1"
>
@ -8397,6 +8419,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AX"
role="menuitem"
tabindex="-1"
>
@ -8406,6 +8430,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AL"
role="menuitem"
tabindex="-1"
>
@ -8415,6 +8441,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="DZ"
role="menuitem"
tabindex="-1"
>
@ -8424,6 +8452,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AS"
role="menuitem"
tabindex="-1"
>
@ -8433,6 +8463,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AD"
role="menuitem"
tabindex="-1"
>
@ -8442,6 +8474,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AO"
role="menuitem"
tabindex="-1"
>
@ -8451,6 +8485,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AI"
role="menuitem"
tabindex="-1"
>
@ -8460,6 +8496,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AQ"
role="menuitem"
tabindex="-1"
>
@ -8469,6 +8507,8 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AG"
role="menuitem"
tabindex="-1"
>
@ -8880,6 +8920,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option-add"
data-test-type="add"
role="menuitem"
tabindex="-1"
>
@ -8907,6 +8948,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AF"
role="menuitem"
tabindex="-1"
>
@ -8916,6 +8959,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AX"
role="menuitem"
tabindex="-1"
>
@ -8925,6 +8970,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AL"
role="menuitem"
tabindex="-1"
>
@ -8934,6 +8981,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="DZ"
role="menuitem"
tabindex="-1"
>
@ -8943,6 +8992,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AS"
role="menuitem"
tabindex="-1"
>
@ -8952,6 +9003,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AD"
role="menuitem"
tabindex="-1"
>
@ -8961,6 +9014,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AO"
role="menuitem"
tabindex="-1"
>
@ -8970,6 +9025,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AI"
role="menuitem"
tabindex="-1"
>
@ -8979,6 +9036,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AQ"
role="menuitem"
tabindex="-1"
>
@ -8988,6 +9047,8 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
aria-disabled="false"
class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
data-test="singleautocomplete-select-option"
data-test-type="option"
data-test-value="AG"
role="menuitem"
tabindex="-1"
>
@ -140044,6 +140105,152 @@ Ctrl + K"
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
>
<div
class="CardTitle-root-id"
>
<span
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
Attributes
</span>
<div
class="CardTitle-toolbar-id"
/>
</div>
<div
class="CardTitle-children-id"
/>
<hr
class="CardTitle-hr-id"
/>
<div
class="MuiCardContent-root-id ProductAttributes-cardContent-id"
>
<div
class="ProductAttributes-expansionBar-id"
>
<div
class="ProductAttributes-expansionBarLabelContainer-id"
>
<div
class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
>
1 Attributes
</div>
</div>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
data-test="product-attributes-expand"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</span>
</button>
</div>
<hr
class="Hr-root-id"
/>
<div
class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
>
<div
class="ProductAttributes-attributeSectionLabel-id"
data-test="product-attribute-label"
>
<div
class="MuiTypography-root-id MuiTypography-body1-id"
>
Author
</div>
</div>
<div
data-test="product-attribute-value"
>
<div
class="SingleAutocompleteSelectField-container-id"
>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
data-shrink="false"
>
Value
</label>
<div
aria-autocomplete="list"
aria-expanded="false"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
role="combobox"
>
<input
aria-invalid="true"
autocomplete="off"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
type="text"
value=""
/>
<div>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<g
style="fill-rule:evenodd"
>
<path
d="M7 10l5 5 5-5z"
/>
</g>
</svg>
</div>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
style="padding-left:8px"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0.01px"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="CardSpacer-spacer-id"
/>
@ -140252,8 +140459,8 @@ Ctrl + K"
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
data-shrink="false"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
data-shrink="true"
>
Product Type
</label>
@ -140268,7 +140475,7 @@ Ctrl + K"
autocomplete="off"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
type="text"
value=""
value="Candy"
/>
<div>
<svg
@ -140294,7 +140501,7 @@ Ctrl + K"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0.01px"
style="width:0"
>
<span>
​
@ -140303,7 +140510,7 @@ Ctrl + K"
</fieldset>
</div>
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
Invalid value
</p>
@ -140980,7 +141187,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
class="MuiTableRow-root-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
colspan="2"
>
<div
@ -144473,7 +144680,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
data-shrink="false"
>
Color
@ -144481,11 +144688,11 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
<div
aria-autocomplete="list"
aria-expanded="false"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
role="combobox"
>
<input
aria-invalid="false"
aria-invalid="true"
autocomplete="off"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
type="text"
@ -144523,17 +144730,17 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
</legend>
</fieldset>
</div>
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
This field is required
</p>
</div>
</div>
</div>
<div
class="FormSpacer-spacer-id"
/>
<div
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
>
All attributes should have value
</div>
<div
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
>
@ -145969,7 +146176,7 @@ Ctrl + K"
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
data-shrink="true"
>
Value
@ -145977,11 +146184,11 @@ Ctrl + K"
<div
aria-autocomplete="list"
aria-expanded="false"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
role="combobox"
>
<input
aria-invalid="false"
aria-invalid="true"
autocomplete="off"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
type="text"
@ -146019,6 +146226,11 @@ Ctrl + K"
</legend>
</fieldset>
</div>
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
Invalid value
</p>
</div>
</div>
</div>
@ -173713,7 +173925,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
data-shrink="true"
>
Borders
@ -173721,11 +173933,11 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
<div
aria-autocomplete="list"
aria-expanded="false"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
role="combobox"
>
<input
aria-invalid="false"
aria-invalid="true"
autocomplete="off"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
type="text"
@ -173763,6 +173975,11 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
</legend>
</fieldset>
</div>
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
This field is required
</p>
</div>
</div>
<div
@ -173829,11 +174046,6 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
<div
class="FormSpacer-spacer-id"
/>
<div
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
>
All attributes should have value
</div>
<div
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
>

27
src/storybook/stories/products/ProductCreatePage.tsx
View file

@ -68,13 +68,23 @@ storiesOf("Views / Products / Create product", module)
<ProductCreatePage
currency="USD"
disabled={false}
errors={(["name", "productType", "category", "sku"] as Array<
keyof ProductCreatePageSubmitData
>).map(field => ({
__typename: "ProductError",
code: ProductErrorCode.INVALID,
field
}))}
errors={([
"attributes",
"name",
"productType",
"category",
"sku"
] as Array<keyof ProductCreatePageSubmitData | "attributes">).map(
field => ({
__typename: "ProductError",
attributes:
field === "attributes"
? [productTypes[0].productAttributes[0].id]
: null,
code: ProductErrorCode.INVALID,
field
})
)}
header="Add product"
collections={product.collections}
fetchCategories={() => undefined}
@ -83,6 +93,9 @@ storiesOf("Views / Products / Create product", module)
fetchMoreCategories={fetchMoreProps}
fetchMoreCollections={fetchMoreProps}
fetchMoreProductTypes={fetchMoreProps}
initial={{
productType: productTypes[0].id
}}
productTypes={productTypes}
categories={[product.category]}
onBack={() => undefined}

18
src/storybook/stories/products/ProductUpdatePage.tsx
View file

@ -92,6 +92,7 @@ storiesOf("Views / Products / Product edit", module)
{...props}
product={{
...product,
productType: {
...product.productType,
hasVariants: false
@ -137,6 +138,7 @@ storiesOf("Views / Products / Product edit", module)
<ProductUpdatePage
{...props}
errors={([
"attributes",
"basePrice",
"category",
"chargeTaxes",
@ -148,10 +150,16 @@ storiesOf("Views / Products / Product edit", module)
"seoTitle",
"sku",
"stockQuantity"
] as Array<keyof ProductUpdatePageFormData>).map(field => ({
__typename: "ProductError",
code: ProductErrorCode.INVALID,
field
}))}
] as Array<keyof ProductUpdatePageFormData | "attributes">).map(
field => ({
__typename: "ProductError",
attributes:
field === "attributes"
? [product.attributes[0].attribute.id]
: null,
code: ProductErrorCode.INVALID,
field
})
)}
/>
));

3
src/storybook/stories/products/ProductVariantCreatePage.tsx
View file

@ -36,14 +36,17 @@ storiesOf("Views / Products / Create product variant", module)
disabled={false}
errors={[
{
attributes: [product.productType.variantAttributes[0].id],
code: ProductErrorCode.REQUIRED,
field: "attributes"
},
{
attributes: null,
code: ProductErrorCode.UNIQUE,
field: "attributes"
},
{
attributes: null,
code: ProductErrorCode.ALREADY_EXISTS,
field: "sku"
}

3
src/storybook/stories/products/ProductVariantPage.tsx
View file

@ -86,14 +86,17 @@ storiesOf("Views / Products / Product variant details", module)
saveButtonBarState="default"
errors={[
{
attributes: [variant.attributes[0].attribute.id],
code: ProductErrorCode.REQUIRED,
field: "attributes"
},
{
attributes: null,
code: ProductErrorCode.UNIQUE,
field: "attributes"
},
{
attributes: null,
code: ProductErrorCode.ALREADY_EXISTS,
field: "sku"
}

1
src/types/globalTypes.ts
View file

@ -705,6 +705,7 @@ export enum ProductErrorCode {
INVALID = "INVALID",
NOT_FOUND = "NOT_FOUND",
NOT_PRODUCTS_IMAGE = "NOT_PRODUCTS_IMAGE",
NOT_PRODUCTS_VARIANT = "NOT_PRODUCTS_VARIANT",
REQUIRED = "REQUIRED",
UNIQUE = "UNIQUE",
VARIANT_NO_DIGITAL_CONTENT = "VARIANT_NO_DIGITAL_CONTENT",

2
src/utils/errors/product.ts
View file

@ -83,8 +83,6 @@ export function getProductVariantAttributeErrorMessage(
): string {
if (err) {
switch (err.code) {
case ProductErrorCode.REQUIRED:
return intl.formatMessage(messages.attributeRequired);
case ProductErrorCode.UNIQUE:
return intl.formatMessage(messages.variantUnique);
default: