fix(WarehouseTransfer): set item cost to form entries.

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferEditorField.js

@@ -7,15 +7,18 @@ import WarehouseTransferFormEntriesTable from './WarehouseTransferFormEntriesTab
 import {
   entriesFieldShouldUpdate,
   defaultWarehouseTransferEntry,
+  useWatchItemsCostSetCostEntries
 } from './utils';
 
-
 /**
  * Warehouse transafer editor field.
  */
 export default function WarehouseTransferEditorField() {
   const { items } = useWarehouseTransferFormContext();
 
+  // Watches inventory items cost and sets cost to form entries.
+  useWatchItemsCostSetCostEntries();
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
       <FastField

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferForm.js

@@ -45,7 +45,6 @@ function WarehouseTransferForm({
     createWarehouseTransferMutate,
     editWarehouseTransferMutate,
     submitPayload,
-    setItemCostQuery,
   } = useWarehouseTransferFormContext();
 
   // WarehouseTransfer number.

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormEntriesTable.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { DataTableEditable } from 'components';
 
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
 import { useWarehouseTransferTableColumns } from '../utils';
 import { useFetchItemWarehouseQuantity } from './hooks';
 import { useDeepCompareEffect } from 'hooks/utils';
@@ -24,8 +25,15 @@ export default function WarehouseTransferFormEntriesTable({
   sourceWarehouseId,
 }) {
   // Fetch the table row.
-  const { newRowMeta, setTableRow, resetTableRow, cellsLoading } =
-    useFetchItemWarehouseQuantity();
+  const {
+    newRowMeta,
+    setTableRow,
+    resetTableRow,
+    cellsLoading,
+  } = useFetchItemWarehouseQuantity();
+
+  // Warehouse transfer provider context.
+  const { isItemsCostFetching } = useWarehouseTransferFormContext();
 
   // Retrieve the warehouse transfer table columns.
   const columns = useWarehouseTransferTableColumns();
@@ -87,6 +95,7 @@ export default function WarehouseTransferFormEntriesTable({
       data={entries}
       cellsLoading={!!cellsLoading}
       cellsLoadingCoords={cellsLoading}
+      progressBarLoading={isItemsCostFetching || cellsLoading}
       payload={{
         items,
         errors: errors || [],

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormProvider.js

@@ -38,7 +38,6 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
     useWarehouseTransfer(warehouseTransferId, {
       enabled: !!warehouseTransferId,
     });
-
   // Fetch warehouses list.
   const {
     data: warehouses,
@@ -54,7 +53,12 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
     !isEmpty(itemCostQuery?.date) && !isEmpty(itemCostQuery?.itemsIds);
 
   // Retrieves the inventory item cost.
-  const { data: inventoryItemsCost } = useItemInventoryCost(
+  const {
+    data: inventoryItemsCost,
+    isLoading: isItemsCostLoading,
+    isFetching: isItemsCostFetching,
+    isSuccess: isItemsCostSuccess
+  } = useItemInventoryCost(
     {
       date: itemCostQuery?.date,
       items_ids: itemCostQuery?.itemsIds,
@@ -91,6 +95,9 @@ function WarehouseTransferFormProvider({ warehouseTransferId, ...props }) {
     editWarehouseTransferMutate,
 
     inventoryItemsCost,
+    isItemsCostLoading,
+    isItemsCostFetching,
+    isItemsCostSuccess,
     itemCostQuery,
     setItemCostQuery,
   };

src/containers/WarehouseTransfers/WarehouseTransferForm/components.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { chain } from 'lodash';
 import { FormikObserver } from 'components';
 import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
 
@@ -7,14 +8,14 @@ export function WarehouseTransferObserveItemsCost() {
 
   // Handle the form change.
   const handleFormChange = (values) => {
-    const itemsIds = values.entries
+    const { date } = values;
+    const itemsIds = chain(values.entries)
       .filter((e) => e.item_id)
-      .map((e) => e.item_id);
+      .map((e) => e.item_id)
+      .uniq()
+      .value();
 
-    setItemCostQuery({
-      date: values.date,
-      itemsIds,
-    });
+    setItemCostQuery({ date, itemsIds });
   };
   return <FormikObserver onChange={handleFormChange} />;
 }

src/containers/WarehouseTransfers/WarehouseTransferForm/utils.js

@@ -2,10 +2,13 @@ import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
-import { omit } from 'lodash';
+import { keyBy, omit } from 'lodash';
 import { useFormikContext } from 'formik';
 import * as R from 'ramda';
 
+import { useWatch } from 'hooks/utils';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+
 import { AppToaster } from 'components';
 import {
   orderingLinesIndexes,
@@ -119,6 +122,7 @@ export function transformValueToRequest(values) {
         'warehouses',
         'destination_warehouse',
         'source_warehouse',
+        'cost',
       ]),
     })),
   };
@@ -178,3 +182,39 @@ export const deleteTableRow = R.curry((rowIndex, defaultEntry, rows) => {
     updateRemoveLineByIndex(rowIndex),
   )(rows);
 });
+
+/**
+ * Watches the inventory items cost and sets the cost to form entries.
+ */
+export function useWatchItemsCostSetCostEntries() {
+  const { isItemsCostSuccess, inventoryItemsCost } =
+    useWarehouseTransferFormContext();
+
+  const {
+    setFieldValue,
+    values: { entries },
+  } = useFormikContext();
+
+  // Transformes items cost map by item id.
+  const itemsCostByItemId = React.useMemo(
+    () => keyBy(inventoryItemsCost, 'item_id'),
+    [inventoryItemsCost],
+  );
+
+  // Observes the inventory items cost and set form entries with cost.
+  useWatch(() => {
+    if (!isItemsCostSuccess) return;
+
+    const newEntries = entries.map((entry) => {
+      const costEntry = itemsCostByItemId[entry.item_id];
+
+      return entry.item_id
+        ? {
+            ...entry,
+            cost: costEntry?.average,
+          }
+        : entry;
+    });
+    setFieldValue('entries', newEntries);
+  }, inventoryItemsCost);
+}

src/containers/WarehouseTransfers/utils.js

@@ -98,7 +98,7 @@ export const useWarehouseTransferTableColumns = () => {
         disableSortBy: true,
         Cell: SourceWarehouseAccessorCell,
         align: 'right',
-        width: 120,
+        width: 100,
       },
       {
         id: 'destination_warehouse',
@@ -107,7 +107,7 @@ export const useWarehouseTransferTableColumns = () => {
         Cell: DistentionWarehouseAccessorCell,
         disableSortBy: true,
         align: 'right',
-        width: 120,
+        width: 100,
       },
       {
         Header: intl.get('warehouse_transfer.column.transfer_quantity'),
@@ -120,10 +120,9 @@ export const useWarehouseTransferTableColumns = () => {
       {
         Header: intl.get('warehouse_transfer.column.cost_price'),
         accessor: 'cost',
-        Cell: MoneyFieldCell,
         disableSortBy: true,
         align: 'right',
-        width: 100,
+        width: 80,
       },
       {
         Header: '',
@@ -136,4 +135,4 @@ export const useWarehouseTransferTableColumns = () => {
     ],
     [],
   );
-};
+};