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 =>