SALEOR-1658 Add fulfill finalize button display logic (#885)

* Add logic for displaying finalize button in order fulfillment

* Update story

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", () => (
     <OrderFulfillPage
       {...props}
-      disabled={true}
+      loading={true}
       order={undefined}
       warehouses={undefined}
     />

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -124,7 +124,7 @@ interface OrderFulfillSubmitData extends OrderFulfillFormData {
   items: FormsetData<null, OrderFulfillStockInput[]>;
 }
 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<OrderFulfillPageProps> = props => {
   const {
-    disabled,
+    loading,
     errors,
     order,
     saveButtonBar,
@@ -184,6 +184,35 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = 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 (
     <Container>
       <AppHeader onBack={onBack}>
@@ -453,7 +482,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
               </CardActions>
             </Card>
             <SaveButtonBar
-              disabled={disabled}
+              disabled={!shouldEnableSave()}
               labels={{
                 save: intl.formatMessage({
                   defaultMessage: "Fulfill",

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -23,12 +23,14 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ 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<OrderFulfillProps> = ({ orderId }) => {
         }
       />
       <OrderFulfillPage
-        disabled={loading || warehousesLoading || fulfillOrderOpts.loading}
+        loading={loading || warehousesLoading || fulfillOrderOpts.loading}
         errors={fulfillOrderOpts.data?.orderFulfill.errors}
         onBack={() => navigate(orderUrl(orderId))}
         onSubmit={formData =>