fix(Account): BIG-296 Issue when creating a new child account from chart of accounts list.

src/common/index.js

@@ -1,3 +1,4 @@
+export * from './accountTypes';
 export * from './TableStyle';
 export * from './features';
 export * from './cellTypes';

src/containers/Accounts/AccountsDataTable.js

@@ -15,6 +15,8 @@ import withSettings from '../Settings/withSettings';
 import { useAccountsChartContext } from './AccountsChartProvider';
 import { useMemorizedColumnsWidths } from '../../hooks';
 
+import { AccountDialogAction } from '../Dialogs/AccountDialog/utils';
+
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -58,7 +60,10 @@ function AccountsDataTable({
 
   // Handle edit account action.
   const handleEditAccount = (account) => {
-    openDialog('account-form', { action: 'edit', id: account.id });
+    openDialog('account-form', {
+      action: AccountDialogAction.Edit,
+      id: account.id,
+    });
   };
 
   // Handle view detail account.
@@ -69,7 +74,7 @@ function AccountsDataTable({
   // Handle new child button click.
   const handleNewChildAccount = (account) => {
     openDialog('account-form', {
-      action: 'new_child',
+      action: AccountDialogAction.NewChild,
       parentAccountId: account.id,
       accountType: account.account_type,
     });

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js

@@ -16,6 +16,9 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
 
+import { AccountDialogAction } from '../../Dialogs/AccountDialog/utils';
+import { ACCOUNT_TYPE } from '../../../common';
+
 import { compose } from 'utils';
 
 /**
@@ -37,15 +40,15 @@ function CashFlowAccountsActionsBar({
   // Handle add bank account.
   const handleAddBankAccount = () => {
     openDialog('account-form', {
-      action: 'NEW_ACCOUNT_DEFINED_TYPE',
+      action: AccountDialogAction.NewDefinedType,
-      accountType: 'cash',
+      accountType: ACCOUNT_TYPE.CASH,
     });
   };
   // Handle add cash account.
   const handleAddCashAccount = () => {
     openDialog('account-form', {
-      action: 'NEW_ACCOUNT_DEFINED_TYPE',
+      action: AccountDialogAction.NewDefinedType,
-      accountType: 'bank',
+      accountType: ACCOUNT_TYPE.BANK,
     });
   };
   // Handle inactive switch changing.

src/containers/Dialogs/AccountDialog/AccountDialogContent.js

@@ -5,21 +5,9 @@ import AccountDialogForm from './AccountDialogForm';
 /**
  * Account dialog content.
  */
-export default function AccountDialogContent({
+export default function AccountDialogContent({ dialogName, payload }) {
-  dialogName,
-  accountId,
-  action,
-  parentAccountId,
-  accountType,
-}) {
   return (
-    <AccountDialogProvider
+    <AccountDialogProvider dialogName={dialogName} payload={payload}>
-      dialogName={dialogName}
-      accountId={accountId}
-      action={action}
-      parentAccountId={parentAccountId}
-      accountType={accountType}
-    >
       <AccountDialogForm />
     </AccountDialogProvider>
   );

src/containers/Dialogs/AccountDialog/AccountDialogForm.js

@@ -43,9 +43,7 @@ function AccountFormDialogContent({
     account,
 
     accountId,
-    action,
+    payload,
-    parentAccountId,
-    accountType,
     isNewMode,
     dialogName,
   } = useAccountDialogContext();
@@ -101,7 +99,6 @@ function AccountFormDialogContent({
         .catch(handleError);
     }
   };
-
   // Form initial values in create and edit mode.
   const initialValues = {
     ...defaultInitialValues,
@@ -111,11 +108,7 @@ function AccountFormDialogContent({
      * as well.
      */
     ...transformToForm(
-      transformAccountToForm(account, {
+      transformAccountToForm(account, payload),
-        action,
-        parentAccountId,
-        accountType,
-      }),
       defaultInitialValues,
     ),
   };
@@ -133,7 +126,7 @@ function AccountFormDialogContent({
     >
       <AccountDialogFormContent
         dialogName={dialogName}
-        action={action}
+        action={payload?.action}
         onClose={handleClose}
       />
     </Formik>

src/containers/Dialogs/AccountDialog/AccountDialogFormContent.js

@@ -39,7 +39,8 @@ function AccountFormDialogFields({
   const accountNameFieldRef = useAutofocus();
 
   // Account form context.
-  const { accounts, accountsTypes, currencies } = useAccountDialogContext();
+  const { fieldsDisabled, accounts, accountsTypes, currencies } =
+    useAccountDialogContext();
 
   return (
     <Form>
@@ -62,11 +63,7 @@ function AccountFormDialogFields({
                   form.setFieldValue('account_type', accountType.key);
                   form.setFieldValue('currency_code', '');
                 }}
-                disabled={
+                disabled={fieldsDisabled.accountType}
-                  action === 'edit' ||
-                  action === 'new_child' ||
-                  action === 'NEW_ACCOUNT_DEFINED_TYPE'
-                }
                 popoverProps={{ minimal: true }}
                 popoverFill={true}
               />
@@ -209,7 +206,7 @@ function AccountFormDialogFields({
           <Button
             intent={Intent.PRIMARY}
             loading={isSubmitting}
-            style={{ minWidth: '75px' }}
+            style={{ minWidth: '95px' }}
             type="submit"
           >
             {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}

src/containers/Dialogs/AccountDialog/AccountDialogProvider.js

@@ -8,21 +8,14 @@ import {
   useAccounts,
   useEditAccount,
 } from 'hooks/query';
+import { AccountDialogAction, getDisabledFormFields } from './utils';
 
 const AccountDialogContext = createContext();
 
 /**
  * Account form provider.
  */
-function AccountDialogProvider({
+function AccountDialogProvider({ dialogName, payload, ...props }) {
-  accountId,
-  parentAccountId,
-  action,
-  accountType,
-
-  dialogName,
-  ...props
-}) {
   // Create and edit account mutations.
   const { mutateAsync: createAccountMutate } = useCreateAccount();
   const { mutateAsync: editAccountMutate } = useEditAccount();
@@ -35,22 +28,31 @@ function AccountDialogProvider({
     useAccountsTypes();
 
   // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+  const { data: account, isLoading: isAccountLoading } = useAccount(
-    enabled: !!accountId,
+    payload.accountId,
-  });
+    {
+      enabled:
+        !!payload.accountId && payload.action === AccountDialogAction.Edit,
+    },
+  );
 
   // Handle fetch Currencies data table
   const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
-  const isNewMode = !accountId;
+  const isNewMode = !payload?.action;
+
+  // Retrieves the disabled fields of the form.
+  const fieldsDisabled = React.useMemo(
+    () => getDisabledFormFields(account, payload),
+    [account, payload],
+  );
 
   // Provider payload.
   const provider = {
     dialogName,
-    accountId,
+    payload,
-    parentAccountId,
+    fieldsDisabled,
-    action,
+
-    accountType,
     currencies,
 
     createAccountMutate,

src/containers/Dialogs/AccountDialog/index.js

@@ -18,9 +18,11 @@ function AccountFormDialog({
     <Dialog
       name={dialogName}
       title={
-        (payload.action === 'edit') ?
+        payload.action === 'edit' ? (
-          (<T id={'edit_account'} />) :
+          <T id={'edit_account'} />
-          (<T id={'new_account'} />)
+        ) : (
+          <T id={'new_account'} />
+        )
       }
       className={'dialog--account-form'}
       autoFocus={true}
@@ -28,18 +30,10 @@ function AccountFormDialog({
       isOpen={isOpen}
     >
       <DialogSuspense>
-        <AccountDialogContent
+        <AccountDialogContent dialogName={dialogName} payload={payload} />
-          dialogName={dialogName}
-          accountId={payload.id}
-          action={payload.action}
-          parentAccountId={payload.parentAccountId}
-          accountType={payload.accountType}
-        />
       </DialogSuspense>
     </Dialog>
   );
 }
 
-export default compose(
+export default compose(withDialogRedux())(AccountFormDialog);
-  withDialogRedux(),
-)(AccountFormDialog);

src/containers/Dialogs/AccountDialog/utils.js

@@ -1,7 +1,17 @@
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
-import { isEmpty } from 'lodash';
+import { isUndefined } from 'lodash';
 
+//
+export const AccountDialogAction = {
+  Edit: 'edit',
+  NewChild: 'NewChild',
+  NewDefinedType: 'NewDefinedType',
+};
+
+/**
+ * Transformes the response API errors.
+ */
 export const transformApiErrors = (errors) => {
   const fields = {};
   if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
@@ -23,7 +33,7 @@ export const transformApiErrors = (errors) => {
 /**
  * Payload transformer in account edit mode.
  */
-function transformEditMode(payload) {
+function tranformNewChildAccountPayload(payload) {
   return {
     parent_account_id: payload.parentAccountId || '',
     account_type: payload.accountType || '',
@@ -34,7 +44,7 @@ function transformEditMode(payload) {
 /**
  * Payload transformer in new account with defined type.
  */
-function transformNewAccountDefinedType(payload) {
+function transformNewDefinedTypePayload(payload) {
   return {
     account_type: payload.accountType || '',
   };
@@ -60,9 +70,9 @@ const defaultPayloadTransform = () => ({});
  */
 function getConditions() {
   return [
-    ['edit'],
+    [AccountDialogAction.Edit],
-    ['new_child', transformEditMode],
+    [AccountDialogAction.NewChild, tranformNewChildAccountPayload],
-    ['NEW_ACCOUNT_DEFINED_TYPE', transformNewAccountDefinedType],
+    [AccountDialogAction.NewDefinedType, transformNewDefinedTypePayload],
   ];
 }
 
@@ -73,7 +83,7 @@ export const transformAccountToForm = (account, payload) => {
   const conditions = getConditions();
 
   const results = conditions.map((condition) => {
-    const transformer = !isEmpty(condition[1])
+    const transformer = !isUndefined(condition[1])
       ? condition[1]
       : defaultPayloadTransform;
 
@@ -84,3 +94,15 @@ export const transformAccountToForm = (account, payload) => {
   });
   return R.cond(results)(account);
 };
+
+/**
+ * Detarmines whether the for fields are disabled.
+ */
+export const getDisabledFormFields = (account, payload) => {
+  return {
+    accountType:
+      payload.action === AccountDialogAction.Edit ||
+      payload.action === AccountDialogAction.NewChild ||
+      payload.action === AccountDialogAction.NewDefinedType,
+  };
+};

src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -9,15 +9,15 @@ import {
 } from '@blueprintjs/core';
 import { Can, FormattedMessage as T } from 'components';
 
+import { AccountAction, AbilitySubject } from '../../../common/abilityOption';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { safeCallback } from 'utils';
+import { AccountDialogAction } from 'containers/Dialogs/AccountDialog/utils';
-import { AccountAction, AbilitySubject } from '../../../common/abilityOption';
-
-import { compose } from 'utils';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
+import { compose, safeCallback } from 'utils';
 
 /**
  * Account drawer action bar.
@@ -35,17 +35,18 @@ function AccountDrawerActionBar({
   // Handle new child button click.
   const onNewChildAccount = () => {
     openDialog('account-form', {
-      action: 'new_child',
+      action: AccountDialogAction.NewChild,
       parentAccountId: account.id,
       accountType: account.account_type,
     });
   };
-
   // Handle edit account action.
   const onEditAccount = () => {
-    openDialog('account-form', { action: 'edit', id: account.id });
+    openDialog('account-form', {
+      action: AccountDialogAction.Edit,
+      id: account.id,
+    });
   };
-
   // Handle delete action account.
   const onDeleteAccount = () => {
     openAlert('account-delete', { accountId: account.id });

src/lang/ar/index.json

@@ -1778,7 +1778,7 @@
   "credit_note_preview.dialog.title": "معاينة إشعار الدائن PDF",
   "payment_receive_preview.dialog.title": "معاينة سند الزبون PDF",
   "balance_sheet.comparisons": "مقارنات",
-  "balance_sheet.dimensions": "Dimensions",
+  "balance_sheet.dimensions": "الابعاد",
   "balance_sheet.percentage_of_column": "% التغير العمودي",
   "balance_sheet.percentage_of_row": "% التغير الأفقي",
   "balance_sheet.previous_year": "السنة السابقة (س.س)",
@@ -1786,7 +1786,7 @@
   "balance_sheet.change": "% التغيرات",
   "balance_sheet.previous_period": "الفترة السابقة (ف.س) ",
   "profit_loss_sheet.comparisons": "مقارنات",
-  "profit_loss_sheet.dimensions": "Dimensions",
+  "profit_loss_sheet.dimensions": "الابعاد",
   "profit_loss_sheet.previous_year": "السنة السابقة (س.س)",
   "profit_loss_sheet.total_change": "إجمالي التغيرات",
   "profit_loss_sheet.perentage_change": "% التغيرات",