diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx index 5fd129448..6ff84af93 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx @@ -8,8 +8,8 @@ import { orderToFulfill } from "./fixtures"; import OrderFulfillPage, { OrderFulfillPageProps } from "./OrderFulfillPage"; const props: OrderFulfillPageProps = { - disabled: false, errors: [], + loading: false, onBack: () => undefined, onSubmit: () => undefined, order: orderToFulfill, @@ -23,7 +23,7 @@ storiesOf("Views / Orders / Fulfill order", module) .add("loading", () => ( diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index eb882f046..bf77f5fa6 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -124,7 +124,7 @@ interface OrderFulfillSubmitData extends OrderFulfillFormData { items: FormsetData; } export interface OrderFulfillPageProps { - disabled: boolean; + loading: boolean; errors: FulfillOrder_orderFulfill_errors[]; order: OrderFulfillData_order; saveButtonBar: ConfirmButtonTransitionState; @@ -143,7 +143,7 @@ function getRemainingQuantity(line: OrderFulfillData_order_lines): number { const OrderFulfillPage: React.FC = props => { const { - disabled, + loading, errors, order, saveButtonBar, @@ -184,6 +184,35 @@ const OrderFulfillPage: React.FC = props => { items: formsetData }); + const shouldEnableSave = () => { + if (!order || loading) { + return false; + } + + const isAtLeastOneFulfilled = formsetData.some(({ value }) => + value.some(({ quantity }) => quantity > 0) + ); + + const areProperlyFulfilled = formsetData.every(({ id, value }) => { + const { lines } = order; + + const { quantity, quantityFulfilled } = lines.find( + ({ id: lineId }) => lineId === id + ); + + const remainingQuantity = quantity - quantityFulfilled; + + const formQuantityFulfilled = value.reduce( + (result, { quantity }) => result + quantity, + 0 + ); + + return formQuantityFulfilled <= remainingQuantity; + }); + + return isAtLeastOneFulfilled && areProperlyFulfilled; + }; + return ( @@ -453,7 +482,7 @@ const OrderFulfillPage: React.FC = props => { = ({ orderId }) => { orderId } }); + const { data: warehouseData, loading: warehousesLoading } = useWarehouseList({ displayLoader: true, variables: { first: 20 } }); + const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({ onCompleted: data => { if (data.orderFulfill.errors.length === 0) { @@ -65,7 +67,7 @@ const OrderFulfill: React.FC = ({ orderId }) => { } /> navigate(orderUrl(orderId))} onSubmit={formData =>