- feat: Update react-query package to V 2.1.1.

- feat: Favicon setup.
- feat: Fix accounts inactivate/activate 1 account.
- feat: Seed accounts, expenses and manual journals resource fields.
- feat: Validate make journal receivable/payable without contact.
- feat: Validate make journal contact without receivable or payable.
- feat: More components abstractions.
- feat: Use reselect.js to memorize components properties.
- fix: Journal type of manual journal.
- fix: Sidebar style optimization.
- fix: Data-table check-box style optimization.
- fix: Data-table spinner style dimensions.
- fix: Submit journal with contact_id and contact_type.

client/src/containers/Expenses/ExpenseFormHeader.js

@@ -14,9 +14,13 @@ import moment from 'moment';
 import { momentFormatter, compose } from 'utils';
 
 import classNames from 'classnames';
-import Icon from 'components/Icon';
-import ErrorMessage from 'components/ErrorMessage';
-import { ListSelect } from 'components';
+import {
+  ListSelect,
+  ErrorMessage,
+  Icon,
+  FieldRequiredHint,
+  Hint,
+} from 'components';
 import withCurrencies from 'containers/Currencies/withCurrencies';
 import withAccounts from 'containers/Accounts/withAccounts';
 
@@ -35,11 +39,6 @@ function ExpenseFormHeader({
     [setFieldValue],
   );
 
-  // @todo @mohamed reusable components.
-  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
-
-  const requiredSpan = useMemo(() => <span className="required">*</span>, []);
-
   const currencyCodeRenderer = useCallback((item, { handleClick }) => {
     return (
       <MenuItem key={item.id} text={item.currency_code} onClick={handleClick} />
@@ -121,7 +120,7 @@ function ExpenseFormHeader({
           <FormGroup
             label={<T id={'beneficiary'} />}
             className={classNames('form-group--select-list', Classes.FILL)}
-            labelInfo={infoIcon}
+            labelInfo={<Hint />}
             intent={errors.beneficiary && touched.beneficiary && Intent.DANGER}
             helperText={
               <ErrorMessage name={'beneficiary'} {...{ errors, touched }} />
@@ -150,7 +149,7 @@ function ExpenseFormHeader({
               'form-group--select-list',
               Classes.FILL,
             )}
-            labelInfo={requiredSpan}
+            labelInfo={<FieldRequiredHint />}
             intent={
               errors.payment_account_id &&
               touched.payment_account_id &&
@@ -183,7 +182,7 @@ function ExpenseFormHeader({
         <Col width={300}>
           <FormGroup
             label={<T id={'payment_date'} />}
-            labelInfo={infoIcon}
+            labelInfo={<Hint />}
             className={classNames('form-group--select-list', Classes.FILL)}
             intent={
               errors.payment_date && touched.payment_date && Intent.DANGER
@@ -234,10 +233,7 @@ function ExpenseFormHeader({
         <Col width={200}>
           <FormGroup
             label={<T id={'ref_no'} />}
-            className={classNames(
-              'form-group--ref_no',
-              Classes.FILL,
-            )}
+            className={classNames('form-group--ref_no', Classes.FILL)}
             intent={
               errors.reference_no && touched.reference_no && Intent.DANGER
             }