diff --git a/src/components/PriceField/PriceField.tsx b/src/components/PriceField/PriceField.tsx index d924a6441..27e59de30 100644 --- a/src/components/PriceField/PriceField.tsx +++ b/src/components/PriceField/PriceField.tsx @@ -74,6 +74,10 @@ export const PriceField: React.FC = props => { ) : ( ), + inputProps: { + min: 0, + ...InputProps?.inputProps + }, type: "number" }} name={name} diff --git a/src/products/components/ProductPricing/ProductPricing.tsx b/src/products/components/ProductPricing/ProductPricing.tsx index 790f12784..fb036ba90 100644 --- a/src/products/components/ProductPricing/ProductPricing.tsx +++ b/src/products/components/ProductPricing/ProductPricing.tsx @@ -62,11 +62,6 @@ const ProductPricing: React.FC = props => { value={data.basePrice} currencySymbol={currency} onChange={handlePriceChange} - InputProps={{ - inputProps: { - min: 0 - } - }} /> diff --git a/src/products/components/ProductShipping/ProductShipping.tsx b/src/products/components/ProductShipping/ProductShipping.tsx index c92de3c64..1ce534eb6 100644 --- a/src/products/components/ProductShipping/ProductShipping.tsx +++ b/src/products/components/ProductShipping/ProductShipping.tsx @@ -6,6 +6,7 @@ import CardTitle from "@saleor/components/CardTitle"; import Grid from "@saleor/components/Grid"; import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; +import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler"; import React from "react"; import { useIntl } from "react-intl"; @@ -25,6 +26,7 @@ const ProductShipping: React.FC = props => { const intl = useIntl(); const formErrors = getFormErrors(["weight"], errors); + const handleChange = createNonNegativeValueChangeHandler(onChange); return ( @@ -46,7 +48,7 @@ const ProductShipping: React.FC = props => { helperText={getProductErrorMessage(formErrors.weight, intl)} name="weight" value={data.weight} - onChange={onChange} + onChange={handleChange} InputProps={{ endAdornment: ( diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx index 9a8d430db..f06c7bd1d 100644 --- a/src/products/components/ProductStocks/ProductStocks.tsx +++ b/src/products/components/ProductStocks/ProductStocks.tsx @@ -29,6 +29,7 @@ import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset"; import { renderCollection } from "@saleor/misc"; import { ICONBUTTON_SIZE } from "@saleor/theme"; import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; +import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -238,33 +239,41 @@ const ProductStocks: React.FC = ({ - {renderCollection(stocks, stock => ( - - {stock.label} - - onChange(stock.id, event.target.value)} - value={stock.value} - /> - - - onWarehouseStockDelete(stock.id)} - > - - - - - ))} + {renderCollection(stocks, stock => { + const handleQuantityChange = createNonNegativeValueChangeHandler( + event => onChange(stock.id, event.target.value) + ); + + return ( + + + {stock.label} + + + + + + onWarehouseStockDelete(stock.id)} + > + + + + + ); + })} {warehousesToAssign.length > 0 && ( diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx index 8c345e4f2..432da917d 100644 --- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx +++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx @@ -96,7 +96,7 @@ const ProductVariantCreatePage: React.FC = ({ const initialForm: ProductVariantCreatePageFormData = { costPrice: "", - images: maybe(() => product.images.map(image => image.id)), + images: product?.images.map(image => image.id), metadata: [], price: "", privateMetadata: [], @@ -148,10 +148,9 @@ const ProductVariantCreatePage: React.FC = ({ /> diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx index d875acf0d..7d043d595 100644 --- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx +++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx @@ -131,12 +131,12 @@ const ProductVariantPage: React.FC = ({ ); const initialForm: ProductVariantPageFormData = { - costPrice: maybe(() => variant.costPrice.amount.toString(), ""), + costPrice: variant?.costPrice?.amount.toString() || "", metadata: variant?.metadata?.map(mapMetadataItemToInput), - price: maybe(() => variant.price.amount.toString(), ""), + price: variant?.price?.amount.toString() || "", privateMetadata: variant?.privateMetadata?.map(mapMetadataItemToInput), - sku: maybe(() => variant.sku, ""), - trackInventory: variant?.trackInventory, + sku: variant?.sku || "", + trackInventory: !!variant?.trackInventory, weight: variant?.weight?.value.toString() || "" }; @@ -218,7 +218,7 @@ const ProductVariantPage: React.FC = ({ = ({ ? variant.costPrice.currency : "" } - costPrice={data.costPrice} loading={loading} onChange={change} /> diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx index 0712f5cfe..ff812d36e 100644 --- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx +++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx @@ -22,20 +22,19 @@ const useStyles = makeStyles( interface ProductVariantPriceProps { currencySymbol?: string; - price?: string; - costPrice?: string; + data: Record<"price" | "costPrice", string>; errors: ProductErrorFragment[]; loading?: boolean; onChange(event: any); } const ProductVariantPrice: React.FC = props => { - const { currencySymbol, costPrice, errors, price, loading, onChange } = props; + const { currencySymbol, data, errors, loading, onChange } = props; const classes = useStyles(props); const intl = useIntl(); - const formErrors = getFormErrors(["price", "cost_price"], errors); + const formErrors = getFormErrors(["price", "costPrice"], errors); const handlePriceChange = createNonNegativeValueChangeHandler(onChange); @@ -52,11 +51,12 @@ const ProductVariantPrice: React.FC = props => {
= props => {
): StockInput { return { - quantity: parseInt(stock.value, 10), + quantity: parseInt(stock.value, 10) || 0, warehouse: stock.id }; } diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 1797af3a8..e66f7f700 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -7178,6 +7178,7 @@ exports[`Storyshots Generics / Price input disabled 1`] = ` aria-invalid="false" class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id" disabled="" + min="0" name="price" type="number" /> @@ -7223,6 +7224,7 @@ exports[`Storyshots Generics / Price input with currency symbol 1`] = ` @@ -7276,6 +7278,7 @@ exports[`Storyshots Generics / Price input with hint 1`] = ` @@ -7332,6 +7335,7 @@ exports[`Storyshots Generics / Price input with label 1`] = ` @@ -7383,6 +7387,7 @@ exports[`Storyshots Generics / Price input with label and hint 1`] = ` @@ -7433,6 +7438,7 @@ exports[`Storyshots Generics / Price input with no value 1`] = ` @@ -7478,6 +7484,7 @@ exports[`Storyshots Generics / Price input with value 1`] = `