BIG-52: fix customize Report in purchases by items report not working.

BIG-55: fix customize report in inventory valuation report not working.
BIG-56: fix customize report in Inventory item details report not working.

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.js

@@ -0,0 +1,34 @@
+import React, { createContext, useContext } from 'react';
+import { useCustomers } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const ARAgingSummaryGeneralContext = createContext();
+
+/**
+ * A/R aging summary general tab provider.
+ */
+function ARAgingSummaryGeneralProvider({ ...props }) {
+  // Retrieve the customers list.
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
+  const provider = {
+    customers,
+    isCustomersLoading,
+  };
+  // Loading state.
+  const loading = isCustomersLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <ARAgingSummaryGeneralContext.Provider value={provider} {...props} />
+  );
+}
+
+const useARAgingSummaryGeneralContext = () =>
+  useContext(ARAgingSummaryGeneralContext);
+
+export { ARAgingSummaryGeneralProvider, useARAgingSummaryGeneralContext };

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js

@@ -1,116 +1,14 @@
 import React from 'react';
-import { FastField, Field } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
-import {
-  Intent,
-  FormGroup,
-  InputGroup,
-  Position,
-  Classes,
-} from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import classNames from 'classnames';
-import { ContactsMultiSelect, Row, Col, FieldHint } from 'components';
-import { momentFormatter } from 'utils';
-
-import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { ARAgingSummaryGeneralProvider } from './ARAgingSummaryGeneralProvider';
+import ARAgingSummaryHeaderGeneralContent from './ARAgingSummaryHeaderGeneralContent';
 
 /**
- * AR Aging Summary - Drawer Header - General Fields.
+ * AR Aging Summary - Drawer Header - General Fields - Content.
  */
 export default function ARAgingSummaryHeaderGeneral() {
-  // AR Aging summary context.
-  const { customers } = useARAgingSummaryContext();
-
   return (
-    <div>
-      <Row>
-        <Col xs={5}>
-          <FastField name={'asDate'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'as_date'} />}
-                labelInfo={<FieldHint />}
-                fill={true}
-                intent={error && Intent.DANGER}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={value}
-                  onChange={(selectedDate) => {
-                    form.setFieldValue('asDate', selectedDate);
-                  }}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  minimal={true}
-                  fill={true}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
-      </Row>
-
-      <Row>
-        <Col xs={5}>
-          <FastField name={'agingDaysBefore'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'aging_before_days'} />}
-                labelInfo={<FieldHint />}
-                className={'form-group--aging-before-days'}
-                intent={error && Intent.DANGER}
-              >
-                <InputGroup
-                  medium={true}
-                  intent={error && Intent.DANGER}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
-      </Row>
-
-      <Row>
-        <Col xs={5}>
-          <FastField name={'agingPeriods'}>
-            {({ field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'aging_periods'} />}
-                labelInfo={<FieldHint />}
-                className={'form-group--aging-periods'}
-                intent={error && Intent.DANGER}
-              >
-                <InputGroup
-                  medium={true}
-                  intent={error && Intent.DANGER}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={5}>
-          <Field name="customersIds">
-            {({ form: { setFieldValue }, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'specific_customers'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ContactsMultiSelect
-                  contacts={customers}
-                  contactsSelected={value}
-                  onContactSelect={(contactsIds) => {
-                    setFieldValue('customersIds', contactsIds);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </Field>
-        </Col>
-      </Row>
-    </div>
+    <ARAgingSummaryGeneralProvider>
+      <ARAgingSummaryHeaderGeneralContent />
+    </ARAgingSummaryGeneralProvider>
   );
 }

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import { FastField, Field } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import {
+  FormattedMessage as T,
+  ContactsMultiSelect,
+  Row,
+  Col,
+  FieldHint,
+} from 'components';
+import { momentFormatter } from 'utils';
+import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
+
+/**
+ * AR Aging Summary - Drawer Header - General Fields.
+ */
+export default function ARAgingSummaryHeaderGeneralContent() {
+  // AR Aging summary context.
+  const { customers } = useARAgingSummaryGeneralContext();
+
+  return (
+    <div>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={error && Intent.DANGER}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={value}
+                  onChange={(selectedDate) => {
+                    form.setFieldValue('asDate', selectedDate);
+                  }}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  minimal={true}
+                  fill={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingDaysBefore'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'aging_before_days'} />}
+                labelInfo={<FieldHint />}
+                className={'form-group--aging-before-days'}
+                intent={error && Intent.DANGER}
+              >
+                <InputGroup
+                  medium={true}
+                  intent={error && Intent.DANGER}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingPeriods'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'aging_periods'} />}
+                labelInfo={<FieldHint />}
+                className={'form-group--aging-periods'}
+                intent={error && Intent.DANGER}
+              >
+                <InputGroup
+                  medium={true}
+                  intent={error && Intent.DANGER}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={5}>
+          <Field name="customersIds">
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <FormGroup
+                label={<T id={'specific_customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  contacts={customers}
+                  contactsSelected={value}
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('customersIds', contactsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js

@@ -20,19 +20,11 @@ function ARAgingSummaryProvider({ filter, ...props }) {
     refetch,
   } = useARAgingSummaryReport(query, { keepPreviousData: true });
 
-  // Retrieve the customers list.
-  const {
-    data: { customers },
-    isFetching: isCustomersFetching,
-  } = useCustomers();
-
   const provider = {
     ARAgingSummary,
-    customers,
 
     isARAgingLoading,
     isARAgingFetching,
-    isCustomersFetching,
     refetch,
   };