Merge branch 'develop' into fix-spelling-a-char

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx

@@ -1,10 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import * as Yup from 'yup';
+
 import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
 import { FormattedMessage as T } from '@/components';
@@ -16,7 +15,10 @@ import InventoryItemDetailsHeaderDimensionsPanel from './InventoryItemDetailsHea
 import withInventoryItemDetails from './withInventoryItemDetails';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
-import { getInventoryItemDetailsDefaultQuery } from './utils2';
+import {
+  getInventoryItemDetailsDefaultQuery,
+  getInventoryItemDetailsQuerySchema,
+} from './utils2';
 import { compose, transformToForm } from '@/utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
@@ -28,6 +30,7 @@ function InventoryItemDetailsHeader({
   // #ownProps
   onSubmitFilter,
   pageFilter,
+
   // #withInventoryItemDetails
   isFilterDrawerOpen,
 
@@ -40,30 +43,29 @@ function InventoryItemDetailsHeader({
   // Filter form initial values.
   const initialValues = transformToForm(
     {
+      ...defaultValues,
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
     },
     defaultValues,
   );
+
   // Validation schema.
-  const validationSchema = Yup.object().shape({
-    fromDate: Yup.date().required().label(intl.get('fromDate')),
-    toDate: Yup.date()
-      .min(Yup.ref('fromDate'))
-      .required()
-      .label(intl.get('toDate')),
-  });
+  const validationSchema = getInventoryItemDetailsQuerySchema();
+
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleFilterDrawer(false);
     setSubmitting(false);
   };
+
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleFilterDrawer(false);
   };
+
   // Detarmines the given feature whether is enabled.
   const { featureCan } = useFeatureCan();
 

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.tsx

@@ -1,14 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import { FormGroup, Classes } from '@blueprintjs/core';
-import { Field } from 'formik';
 import {
   ItemsMultiSelect,
   Row,
   Col,
   FormattedMessage as T,
+  FFormGroup,
 } from '@/components';
-import classNames from 'classnames';
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
 
 import {
@@ -39,26 +37,9 @@ function InventoryItemDetailsHeaderGeneralPanelContent() {
 
       <Row>
         <Col xs={4}>
-          <Field name={'itemsIds'}>
-            {({
-              form: { setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'Specific items'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ItemsMultiSelect
-                  items={items}
-                  onItemSelect={(items) => {
-                    const itemsIds = items.map((item) => item.id);
-                    setFieldValue('itemsIds', itemsIds);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </Field>
+          <FFormGroup label={<T id={'Specific items'} />} name={'itemsIds'}>
+            <ItemsMultiSelect name={'itemsIds'} items={items} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/components.tsx

@@ -6,6 +6,7 @@ import { Icon, If, FormattedMessage as T } from '@/components';
 import { dynamicColumns } from './utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve inventory item details columns.
@@ -53,17 +54,19 @@ export function InventoryItemDetailsAlerts() {
   if (isInventoryItemDetailsLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is running.
+  if (!inventoryItemDetails.meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={inventoryItemDetails.meta.is_cost_compute_running}>
-      <div className="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/utils2.tsx

@@ -2,6 +2,8 @@
 import React from 'react';
 import moment from 'moment';
 import { castArray } from 'lodash';
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
 
 import { useAppQueryString } from '@/hooks';
 import { transformToForm } from '@/utils';
@@ -9,13 +11,26 @@ import { transformToForm } from '@/utils';
 /**
  * Retrieves inventory item details default query.
  */
-export const getInventoryItemDetailsDefaultQuery = () => {
-  return {
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    warehousesIds: [],
-    branchesIds: [],
-  };
+export const getInventoryItemDetailsDefaultQuery = () => ({
+  fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+  toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  itemsIds: [],
+  warehousesIds: [],
+  branchesIds: [],
+});
+
+/**
+ * Retrieves inventory item details query schema.
+ * @returns {Yup}
+ */
+export const getInventoryItemDetailsQuerySchema = () => {
+  return Yup.object().shape({
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('toDate')),
+  });
 };
 
 /**
@@ -32,7 +47,8 @@ const parseInventoryItemDetailsQuery = (locationQuery) => {
   return {
     ...transformed,
 
-    // Ensures the branches/warehouses ids is always array.
+    // Ensure the branches, warehouses and items ids is always array.
+    itemsIds: castArray(transformed.itemsIds),
     branchesIds: castArray(transformed.branchesIds),
     warehousesIds: castArray(transformed.warehousesIds),
   };