diff --git a/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx b/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx index fa07ddbf4..a63344df9 100644 --- a/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx +++ b/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; } diff --git a/src/orders/components/OrderDraftDetailsProducts/TableLine.tsx b/src/orders/components/OrderDraftDetailsProducts/TableLine.tsx index 9d225861f..63231c6ff 100644 --- a/src/orders/components/OrderDraftDetailsProducts/TableLine.tsx +++ b/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; } diff --git a/src/orders/components/OrderDraftDetailsProducts/TableLineForm.tsx b/src/orders/components/OrderDraftDetailsProducts/TableLineForm.tsx index 1d8121786..9e7bc1760 100644 --- a/src/orders/components/OrderDraftDetailsProducts/TableLineForm.tsx +++ b/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 = ({ @@ -35,9 +30,14 @@ const TableLineForm: React.FC = ({ 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 ( -
onOrderLineChange(id, data)}> - {({ change, data, submit }) => { + handleSubmit(id, data)}> + {({ change, data, submit, set }) => { const handleQuantityChange = createNonNegativeValueChangeHandler( change, ); @@ -56,10 +56,13 @@ const TableLineForm: React.FC = ({ type="number" value={data.quantity} onChange={debounce} - onBlur={submit} - inputProps={{ - min: 1, + onBlur={() => { + if (data.quantity < 1) { + set({ quantity: 1 }); + } + submit(); }} + inputProps={{ min: 1 }} /> )} diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx index 79e7d7794..c8af0eb26 100644 --- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx +++ b/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; onOrderLineAdd: () => void; - onOrderLineChange: ( - id: string, - data: OrderDraftDetailsProductsFormData, - ) => void; + onOrderLineChange: (id: string, data: OrderLineInput) => void; onOrderLineRemove: (id: string) => void; onProductClick: (id: string) => void; onShippingAddressEdit: () => void; diff --git a/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx b/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx index 9b9c813a3..a2fa6c1dc 100644 --- a/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx +++ b/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;