Merge pull request #747 from mirumee/fix/negative-price-input

Prevent negative price setting in input

src/products/components/ProductPricing/ProductPricing.tsx

@@ -5,6 +5,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import PriceField from "@saleor/components/PriceField";
 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";
 
@@ -37,6 +38,8 @@ const ProductPricing: React.FC<ProductPricingProps> = props => {
 
   const formErrors = getFormErrors(["basePrice"], errors);
 
+  const handlePriceChange = createNonNegativeValueChangeHandler(onChange);
+
   return (
     <Card>
       <CardTitle
@@ -58,7 +61,7 @@ const ProductPricing: React.FC<ProductPricingProps> = props => {
             name="basePrice"
             value={data.basePrice}
             currencySymbol={currency}
-            onChange={onChange}
+            onChange={handlePriceChange}
             InputProps={{
               inputProps: {
                 min: 0

src/products/components/ProductVariantPrice/ProductVariantPrice.tsx

@@ -5,6 +5,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import PriceField from "@saleor/components/PriceField";
 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";
 
@@ -36,6 +37,8 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
 
   const formErrors = getFormErrors(["price", "cost_price"], errors);
 
+  const handlePriceChange = createNonNegativeValueChangeHandler(onChange);
+
   return (
     <Card>
       <CardTitle
@@ -55,8 +58,13 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
               })}
               value={price}
               currencySymbol={currencySymbol}
-              onChange={onChange}
+              onChange={handlePriceChange}
               disabled={loading}
+              InputProps={{
+                inputProps: {
+                  min: "0"
+                }
+              }}
             />
           </div>
           <div>
@@ -76,8 +84,13 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
               }
               value={costPrice}
               currencySymbol={currencySymbol}
-              onChange={onChange}
+              onChange={handlePriceChange}
               disabled={loading}
+              InputProps={{
+                inputProps: {
+                  min: "0"
+                }
+              }}
             />
           </div>
         </div>

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -141166,6 +141166,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="price"
                         type="number"
                         value=""
@@ -141212,6 +141213,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="costPrice"
                         type="number"
                         value=""
@@ -142058,6 +142060,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="price"
                         type="number"
                         value=""
@@ -142104,6 +142107,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="costPrice"
                         type="number"
                         value=""
@@ -142950,6 +142954,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="price"
                         type="number"
                         value=""
@@ -142996,6 +143001,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="costPrice"
                         type="number"
                         value=""
@@ -143665,6 +143671,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                         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"
                         value=""
@@ -143712,6 +143719,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                         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="costPrice"
                         type="number"
                         value=""
@@ -144575,6 +144583,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="price"
                         type="number"
                         value=""
@@ -144621,6 +144630,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="costPrice"
                         type="number"
                         value=""
@@ -173950,6 +173960,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="price"
                         type="number"
                         value="100"
@@ -173996,6 +174007,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="costPrice"
                         type="number"
                         value="12"
@@ -175399,6 +175411,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="price"
                         type="number"
                         value="100"
@@ -175445,6 +175458,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="costPrice"
                         type="number"
                         value="12"
@@ -176646,6 +176660,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="price"
                         type="number"
                         value="100"
@@ -176692,6 +176707,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       <input
                         aria-invalid="false"
                         class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        min="0"
                         name="costPrice"
                         type="number"
                         value="12"
@@ -177765,6 +177781,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                         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"
                         value=""
@@ -177804,6 +177821,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                         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="costPrice"
                         type="number"
                         value=""

src/utils/handlers/nonNegativeValueChangeHandler.ts

@@ -0,0 +1,11 @@
+import { FormChange } from "@saleor/hooks/useForm";
+
+function createNonNegativeValueChangeHandler(change: FormChange) {
+  return (event: React.ChangeEvent<any>) => {
+    if (/^\d*(\.\d+)?$/.test(event.target.value)) {
+      change(event);
+    }
+  };
+}
+
+export default createNonNegativeValueChangeHandler;