fix(webapp): filter by customers, vendors and items in reports do not work

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx

@@ -1,7 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
 import moment from 'moment';
 import styled from 'styled-components';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
@@ -15,6 +13,10 @@ import withCustomersTransactions from './withCustomersTransactions';
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 
 import { compose, transformToForm } from '@/utils';
+import {
+  getCustomersTransactionsDefaultQuery,
+  getCustomersTransactionsQuerySchema,
+} from './_utils';
 
 /**
  * Customers transactions header.
@@ -31,12 +33,8 @@ function CustomersTransactionsHeader({
   toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer,
 }) {
   // Default form values.
-  const defaultValues = {
-    ...pageFilter,
-    fromDate: moment().toDate(),
-    toDate: moment().toDate(),
-    customersIds: [],
-  };
+  const defaultValues = getCustomersTransactionsDefaultQuery();
+
   // Initial form values.
   const initialValues = transformToForm(
     {
@@ -49,13 +47,7 @@ function CustomersTransactionsHeader({
   );
 
   // 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 = getCustomersTransactionsQuerySchema();
 
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.tsx

@@ -1,15 +1,13 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import { Field } from 'formik';
-import { Classes, FormGroup } from '@blueprintjs/core';
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import {
   Row,
   Col,
-  ContactsMultiSelect,
   FormattedMessage as T,
+  CustomersMultiSelect,
+  FFormGroup,
 } from '@/components';
 import { filterCustomersOptions } from '../constants';
 
@@ -51,24 +49,12 @@ function CustomersTransactionsHeaderGeneralPanelContent() {
 
       <Row>
         <Col xs={4}>
-          <Field name={'customersIds'}>
-            {({ form: { setFieldValue }, field: { value } }) => (
-              <FormGroup
-                label={<T id={'specific_customers'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ContactsMultiSelect
-                  items={customers}
-                  onItemSelect={(customers) => {
-                    const customersIds = customers.map(
-                      (customer) => customer.id,
-                    );
-                    setFieldValue('customersIds', customersIds);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </Field>
+          <FFormGroup
+            label={<T id={'specific_customers'} />}
+            name={'customersIds'}
+          >
+            <CustomersMultiSelect name={'customersIds'} items={customers} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/_utils.ts

@@ -0,0 +1,19 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+export const getCustomersTransactionsQuerySchema = () => {
+  return Yup.object().shape({
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('toDate')),
+  });
+};
+
+export const getCustomersTransactionsDefaultQuery = () => ({
+  fromDate: moment().toDate(),
+  toDate: moment().toDate(),
+  customersIds: [],
+});