Merge pull request #72 from bigcapitalhq/BIG-403-labels-of-add-money-in-out-menu-do-not-work

fix(cashflow): labels of Add money in/out don't appear.

src/constants/cashflowOptions.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import intl from 'react-intl-universal';
 
-export const addMoneyIn = [
+export const getAddMoneyInOptions = () => [
   {
     name: intl.get('cash_flow.owner_contribution'),
     value: 'owner_contribution',
@@ -16,7 +16,7 @@ export const addMoneyIn = [
   },
 ];
 
-export const addMoneyOut = [
+export const getAddMoneyOutOptions = () => [
   {
     name: intl.get('cash_flow.owner_drawings'),
     value: 'OwnerDrawing',

src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Button,
   NavbarGroup,
@@ -15,7 +15,10 @@ import {
 } from '@/components';
 
 import { CashFlowMenuItems } from './utils';
-import { addMoneyIn, addMoneyOut } from '@/constants/cashflowOptions';
+import {
+  getAddMoneyOutOptions,
+  getAddMoneyInOptions,
+} from '@/constants/cashflowOptions';
 import { useRefreshCashflowTransactionsInfinity } from '@/hooks/query';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 
@@ -41,6 +44,10 @@ function AccountTransactionsActionsBar({
   };
   const { accountId } = useAccountTransactionsContext();
 
+  // Retrieves the money in/out buttons options.
+  const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
+  const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
+
   // Handle money in form
   const handleMoneyInFormTransaction = (account) => {
     openDialog('money-in', {
@@ -69,7 +76,7 @@ function AccountTransactionsActionsBar({
     <DashboardActionsBar>
       <NavbarGroup>
         <CashFlowMenuItems
-          items={addMoneyIn}
+          items={addMoneyInOptions}
           onItemSelect={handleMoneyInFormTransaction}
           text={<T id={'cash_flow.label.add_money_in'} />}
           buttonProps={{
@@ -77,7 +84,7 @@ function AccountTransactionsActionsBar({
           }}
         />
         <CashFlowMenuItems
-          items={addMoneyOut}
+          items={addMoneyOutOptions}
           onItemSelect={handlMoneyOutFormTransaction}
           text={<T id={'cash_flow.label.add_money_out'} />}
           buttonProps={{

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { isNull, isEmpty } from 'lodash';
@@ -14,7 +14,10 @@ import {
   AbilitySubject,
 } from '@/constants/abilityOption';
 import { DialogsName } from '@/constants/dialogs';
-import { addMoneyIn, addMoneyOut } from '@/constants/cashflowOptions';
+import {
+  getAddMoneyInOptions,
+  getAddMoneyOutOptions,
+} from '@/constants/cashflowOptions';
 
 import { BankAccountsList, BankAccount, If, Icon, T, Can } from '@/components';
 import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
@@ -23,8 +26,8 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { safeCallback } from '@/utils';
 import { AccountDialogAction } from '@/containers/Dialogs/AccountDialog/utils';
+import { safeCallback } from '@/utils';
 
 const CASHFLOW_SKELETON_N = 4;
 
@@ -188,8 +191,10 @@ function CashflowAccountMoneyInContextMenu({ onClick }) {
   const handleItemClick = curry((transactionType, event) => {
     onClick && onClick(transactionType, event);
   });
+  // Retreives the add money in button options.
+  const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
 
-  return addMoneyIn.map((option) => (
+  return addMoneyInOptions.map((option) => (
     <MenuItem text={option.name} onClick={handleItemClick(option.value)} />
   ));
 }
@@ -201,8 +206,10 @@ function CashflowAccountMoneyOutContextMenu({ onClick }) {
   const handleItemClick = curry((transactionType, event) => {
     onClick && onClick(transactionType, event);
   });
+  // Retreives the add money out button options.
+  const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
 
-  return addMoneyOut.map((option) => (
+  return addMoneyOutOptions.map((option) => (
     <MenuItem text={option.name} onClick={handleItemClick(option.value)} />
   ));
 }

src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FastField, Field, ErrorMessage } from 'formik';
 import { FormGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
@@ -12,7 +12,7 @@ import {
   Row,
 } from '@/components';
 import { inputIntent } from '@/utils';
-import { CLASSES, addMoneyIn } from '@/constants';
+import { CLASSES, getAddMoneyInOptions } from '@/constants';
 
 import { useMoneyInDailogContext } from './MoneyInDialogProvider';
 
@@ -23,6 +23,9 @@ export default function TransactionTypeFields() {
   // Money in dialog context.
   const { cashflowAccounts } = useMoneyInDailogContext();
 
+  // Retrieves the add money in button options.
+  const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
+
   return (
     <div className="trasnaction-type-fileds">
       <Row>
@@ -73,7 +76,7 @@ export default function TransactionTypeFields() {
                 )}
               >
                 <ListSelect
-                  items={addMoneyIn}
+                  items={addMoneyInOptions}
                   onItemSelect={(type) => {
                     setFieldValue('transaction_type', type.value);
                   }}

src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FastField, Field, ErrorMessage } from 'formik';
 import { FormGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
@@ -14,7 +14,7 @@ import {
 
 import { inputIntent } from '@/utils';
 import { CLASSES } from '@/constants/classes';
-import { addMoneyOut } from '@/constants/cashflowOptions';
+import { getAddMoneyOutOptions } from '@/constants/cashflowOptions';
 
 import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
 
@@ -25,6 +25,8 @@ function TransactionTypeFields() {
   // Money in dialog context.
   const { cashflowAccounts } = useMoneyOutDialogContext();
 
+  const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
+
   return (
     <div className="trasnaction-type-fileds">
       <Row>
@@ -75,7 +77,7 @@ function TransactionTypeFields() {
                 )}
               >
                 <ListSelect
-                  items={addMoneyOut}
+                  items={addMoneyOutOptions}
                   onItemSelect={(type) => {
                     setFieldValue('transaction_type', type.value);
                   }}