Better input validation in Order Draft lines (#2003)

* Stop sending queries for empty & 0 values in TableLineForm

* Provide default value for incorrect ones

* Fix submit/change handlers

* Remove async

src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx

@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@material-ui/core";
 import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
-import { OrderDetailsFragment } from "@saleor/graphql";
+import { OrderDetailsFragment, OrderLineInput } from "@saleor/graphql";
 import {
   OrderDiscountContext,
   OrderDiscountContextConsumerProps,
@@ -10,18 +10,13 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { maybe } from "../../../misc";
-import OrderDraftDetailsProducts, {
-  FormData as OrderDraftDetailsProductsFormData,
-} from "../OrderDraftDetailsProducts";
+import OrderDraftDetailsProducts from "../OrderDraftDetailsProducts";
 import OrderDraftDetailsSummary from "../OrderDraftDetailsSummary";
 
 interface OrderDraftDetailsProps {
   order: OrderDetailsFragment;
   onOrderLineAdd: () => void;
-  onOrderLineChange: (
-    id: string,
-    data: OrderDraftDetailsProductsFormData,
-  ) => void;
+  onOrderLineChange: (id: string, data: OrderLineInput) => void;
   onOrderLineRemove: (id: string) => void;
   onShippingMethodEdit: () => void;
 }

src/orders/components/OrderDraftDetailsProducts/TableLine.tsx

@@ -3,7 +3,7 @@ import Link from "@saleor/components/Link";
 import Money from "@saleor/components/Money";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
-import { OrderLineFragment } from "@saleor/graphql";
+import { OrderLineFragment, OrderLineInput } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { OrderLineDiscountContextConsumerProps } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
 import React, { useRef } from "react";
@@ -11,7 +11,7 @@ import React, { useRef } from "react";
 import { maybe } from "../../../misc";
 import OrderDiscountCommonModal from "../OrderDiscountCommonModal";
 import { ORDER_LINE_DISCOUNT } from "../OrderDiscountCommonModal/types";
-import TableLineForm, { FormData } from "./TableLineForm";
+import TableLineForm from "./TableLineForm";
 
 const useStyles = makeStyles(
   theme => ({
@@ -52,7 +52,7 @@ const useStyles = makeStyles(
 
 interface TableLineProps extends OrderLineDiscountContextConsumerProps {
   line: OrderLineFragment;
-  onOrderLineChange: (id: string, data: FormData) => void;
+  onOrderLineChange: (id: string, data: OrderLineInput) => void;
   onOrderLineRemove: (id: string) => void;
 }
 

src/orders/components/OrderDraftDetailsProducts/TableLineForm.tsx

@@ -1,7 +1,7 @@
 import { TextField } from "@material-ui/core";
 import DebounceForm from "@saleor/components/DebounceForm";
 import Form from "@saleor/components/Form";
-import { OrderLineFragment } from "@saleor/graphql";
+import { OrderLineFragment, OrderLineInput } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
 import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler";
 import React from "react";
@@ -18,14 +18,9 @@ const useStyles = makeStyles(
   }),
   { name: "TableLineForm" },
 );
-
-export interface FormData {
-  quantity: number;
-}
-
 interface TableLineFormProps {
   line: OrderLineFragment;
-  onOrderLineChange: (id: string, data: FormData) => void;
+  onOrderLineChange: (id: string, data: OrderLineInput) => void;
 }
 
 const TableLineForm: React.FC<TableLineFormProps> = ({
@@ -35,9 +30,14 @@ const TableLineForm: React.FC<TableLineFormProps> = ({
   const classes = useStyles({});
   const { id, quantity } = line;
 
+  const handleSubmit = (id: string, data: OrderLineInput) => {
+    const quantity = data?.quantity >= 1 ? Math.floor(data.quantity) : 1;
+    onOrderLineChange(id, { quantity });
+  };
+
   return (
-    <Form initial={{ quantity }} onSubmit={data => onOrderLineChange(id, data)}>
-      {({ change, data, submit }) => {
+    <Form initial={{ quantity }} onSubmit={data => handleSubmit(id, data)}>
+      {({ change, data, submit, set }) => {
         const handleQuantityChange = createNonNegativeValueChangeHandler(
           change,
         );
@@ -56,10 +56,13 @@ const TableLineForm: React.FC<TableLineFormProps> = ({
                 type="number"
                 value={data.quantity}
                 onChange={debounce}
-                onBlur={submit}
-                inputProps={{
-                  min: 1,
+                onBlur={() => {
+                  if (data.quantity < 1) {
+                    set({ quantity: 1 });
+                  }
+                  submit();
                 }}
+                inputProps={{ min: 1 }}
               />
             )}
           </DebounceForm>

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -8,7 +8,11 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import Skeleton from "@saleor/components/Skeleton";
-import { OrderDetailsFragment, SearchCustomersQuery } from "@saleor/graphql";
+import {
+  OrderDetailsFragment,
+  OrderLineInput,
+  SearchCustomersQuery,
+} from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
@@ -21,7 +25,6 @@ import { useIntl } from "react-intl";
 
 import OrderCustomer, { CustomerEditData } from "../OrderCustomer";
 import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
-import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
 import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 
 const useStyles = makeStyles(
@@ -50,10 +53,7 @@ export interface OrderDraftPageProps extends FetchMoreProps {
   onDraftRemove: () => void;
   onNoteAdd: (data: HistoryFormData) => SubmitPromise<any[]>;
   onOrderLineAdd: () => void;
-  onOrderLineChange: (
-    id: string,
-    data: OrderDraftDetailsProductsFormData,
-  ) => void;
+  onOrderLineChange: (id: string, data: OrderLineInput) => void;
   onOrderLineRemove: (id: string) => void;
   onProductClick: (id: string) => void;
   onShippingAddressEdit: () => void;

src/orders/views/OrderDetails/OrderDraftDetails/index.tsx

@@ -6,6 +6,8 @@ import {
   OrderDraftCancelMutationVariables,
   OrderDraftUpdateMutation,
   OrderDraftUpdateMutationVariables,
+  OrderLineUpdateMutation,
+  OrderLineUpdateMutationVariables,
   StockAvailability,
   useCustomerAddressesQuery,
 } from "@saleor/graphql";
@@ -50,7 +52,10 @@ interface OrderDraftDetailsProps {
   loading: any;
   data: OrderDetailsQuery;
   orderAddNote: any;
-  orderLineUpdate: any;
+  orderLineUpdate: PartialMutationProviderOutput<
+    OrderLineUpdateMutation,
+    OrderLineUpdateMutationVariables
+  >;
   orderLineDelete: any;
   orderShippingMethodUpdate: any;
   orderLinesAdd: any;