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',
- accountType: 'cash',
+ action: AccountDialogAction.NewDefinedType,
+ accountType: ACCOUNT_TYPE.CASH,
  });
  };
  // Handle add cash account.
  const handleAddCashAccount = () => {
  openDialog('account-form', {
- action: 'NEW_ACCOUNT_DEFINED_TYPE',
- accountType: 'bank',
+ action: AccountDialogAction.NewDefinedType,
+ 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({
- dialogName,
- accountId,
- action,
- parentAccountId,
- accountType,
-}) {
+export default function AccountDialogContent({ dialogName, payload }) {
  return (
- <AccountDialogProvider
- dialogName={dialogName}
- accountId={accountId}
- action={action}
- parentAccountId={parentAccountId}
- accountType={accountType}
- >
+ <AccountDialogProvider dialogName={dialogName} payload={payload}>
  <AccountDialogForm />
  </AccountDialogProvider>
  );

src/containers/Dialogs/AccountDialog/AccountDialogForm.js

@@ -43,9 +43,7 @@ function AccountFormDialogContent({
  account,
 
  accountId,
- action,
- parentAccountId,
- accountType,
+ payload,
  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, {
- action,
- parentAccountId,
- accountType,
- }),
+ transformAccountToForm(account, payload),
  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={
- action === 'edit' ||
- action === 'new_child' ||
- action === 'NEW_ACCOUNT_DEFINED_TYPE'
- }
+ disabled={fieldsDisabled.accountType}
  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({
- accountId,
- parentAccountId,
- action,
- accountType,
-
- dialogName,
- ...props
-}) {
+function AccountDialogProvider({ dialogName, payload, ...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, {
- enabled: !!accountId,
- });
+ const { data: account, isLoading: isAccountLoading } = useAccount(
+ 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,
- parentAccountId,
- action,
- accountType,
+ payload,
+ fieldsDisabled,
+
  currencies,
 
  createAccountMutate,

src/containers/Dialogs/AccountDialog/index.js

@@ -18,28 +18,22 @@ function AccountFormDialog({
  <Dialog
  name={dialogName}
  title={
- (payload.action === 'edit') ?
- (<T id={'edit_account'} />) :
- (<T id={'new_account'} />)
+ payload.action === 'edit' ? (
+ <T id={'edit_account'} />
+ ) : (
+ <T id={'new_account'} />
+ )
  }
  className={'dialog--account-form'}
  autoFocus={true}
  canEscapeKeyClose={true}
  isOpen={isOpen}
  >
  <DialogSuspense>
- <AccountDialogContent
- dialogName={dialogName}
- accountId={payload.id}
- action={payload.action}
- parentAccountId={payload.parentAccountId}
- accountType={payload.accountType}
- />
+ <AccountDialogContent dialogName={dialogName} payload={payload} />
  </DialogSuspense>
  </Dialog>
  );
 }
 
-export default compose(
- withDialogRedux(),
-)(AccountFormDialog);
+export default compose(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'],
- ['new_child', transformEditMode],
- ['NEW_ACCOUNT_DEFINED_TYPE', transformNewAccountDefinedType],
+ [AccountDialogAction.Edit],
+ [AccountDialogAction.NewChild, tranformNewChildAccountPayload],
+ [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 { AccountAction, AbilitySubject } from '../../../common/abilityOption';
-
-import { compose } from 'utils';
+import { AccountDialogAction } from 'containers/Dialogs/AccountDialog/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

@@ -1780,15 +1780,15 @@
  "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": "السنة السابقة (س.س)",
  "balance_sheet.total_change": "إجمالي التغيرات",
  "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": "% التغيرات",