fix(webapp): use all drawers name from common enum object

fix(server): the expense transaction journal entries

.env.example

@@ -8,32 +8,42 @@ MAIL_FROM_NAME=
 MAIL_FROM_ADDRESS=
 
 # Database
-DB_USER=
-DB_HOST=
-DB_PASSWORD=
-DB_CHARSET=
+DB_HOST=mysql
+DB_USER=bigcapital
+DB_PASSWORD=bigcapital
+DB_ROOT_PASSWORD=root
+DB_CHARSET=utf8
 
 # System database
 SYSTEM_DB_NAME=bigcapital_system
+# SYSTEM_DB_USER=
+# SYSTEM_DB_PASSWORD=
+# SYSTEM_DB_NAME=
+# SYSTEM_DB_CHARSET=
 
-# Tenants databases
+# Tenant databases
 TENANT_DB_NAME_PERFIX=bigcapital_tenant_
-
-# MongoDB
-MONGODB_DATABASE_URL=mongodb://localhost/bigcapital
-
-# Authentication
-JWT_SECRET=b0JDZW56RnV6aEthb0RGPXVEcUI
+# TENANT_DB_HOST=
+# TENANT_DB_USER=
+# TENANT_DB_PASSWORD=
+# TENANT_DB_CHARSET=
 
 # Application
 BASE_URL=https://bigcapital.ly
-CONTACT_US_MAIL=support@bigcapital.ly
+JWT_SECRET=b0JDZW56RnV6aEthb0RGPXVEcUI
+
+# Jobs MongoDB
+MONGODB_DATABASE_URL=mongodb://localhost/bigcapital
+
+# App proxy
+PUBLIC_PROXY_PORT=80
+PUBLIC_PROXY_SSL_PORT=443
 
 # Agendash
 AGENDASH_AUTH_USER=agendash
 AGENDASH_AUTH_PASSWORD=123123
 
 # Sign-up restrictions
-SIGNUP_DISABLED=true
+SIGNUP_DISABLED=false
 SIGNUP_ALLOWED_DOMAINS=
-SIGNUP_ALLOWED_EMAILS=
+SIGNUP_ALLOWED_EMAILS=

.gitattributes

@@ -0,0 +1,2 @@
+docker/nginx/scripts/build-nginx.sh text eol=lf
+docker/mariadb/docker-entrypoint.sh text eol=lf

CHANGELOG.md

@@ -2,6 +2,64 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [0.9.6] - 12-06-2023
+
+`@bigcapital/webapp`
+
+* fix: remove duplicated form submitting by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/138
+* feat: add monorepo version on the application sidebar by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/136
+
+## [0.9.5] - 11-06-2023
+
+`@bigcapital/server`
+
+* fix: filter ledger entries that effect contact balance to AR/AP accounts only by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/132
+
+`@bigcapital/webapp`
+
+* fix: catch journal error when create a journal with accounts have different currency by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/135
+* fix: add duplicate icon to context menu of customers and vendors table by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/133
+* fix: customer/vendor opening balance with exchange rate by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/134
+
+## [0.9.4] - 08-06-2023
+
+`@bigcapital/monorepo`
+- fixed: docker-compose line-ending issue on Windows by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/130
+
+`@bigcapital/server`
+- fixed: Disable Webpack minification for JS class name reading.
+
+## [0.9.3] -04-06-2023
+
+`@bigcapital/monorepo`
+* Added: Add env variable to customize the proxy public ports by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/125
+* Added: Migrate the server database to MariaDB by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/128
+
+## [0.9.2] - 31-05-2023
+
+`@bigcapital/webapp`
+
+- fixed: move `packaeg-lock.json` inside docker container.
+- fixed: remove Sentry from the web client.
+
+## [0.9.1] - 28-05-2023
+
+`@bigcapital/server`
+- fix: deleting ledger entries of manual journal.
+- fix: base currency should be enabled.
+- fix: delete invoice transaction issue.
+
+`@bigcapital/webapp`
+- fix: general, accoutant and items preferences.
+- fix: auto-increment sale invoices, estiamtes, credit notes, payments and manual journals.
+- refactor: the setup organization form to use binded Formik components.
+
+## [0.9.0] - 06-05-2023
+
+`@bigcapital/server`
+
+- [Sign-up restrictions](https://docs.bigcapital.ly/docs/deployment/signup_restriction) for self-hosting instances to disable signup or control the allowed email addresses and domains that can sign-up.
+
 ## [0.8.3] - 06-04-2023
 
 `@bigcaptial/monorepo`

README.md

@@ -7,6 +7,24 @@
   <p align="center">
     Simple, smart online accounting software for small and medium businesses.
   </p>
+
+  <p align="center">
+    <a href="https://github.com/bigcapitalhq/bigcapital/commits/develop">
+      <img src="https://img.shields.io/github/commit-activity/m/bigcapitalhq/bigcapital/develop" />
+    </a>
+    <a href="https://discord.com/invite/c8nPBJafeb">
+      <img src="https://img.shields.io/discord/1066514716752625725?label=Discord" alt="" />
+    </a>
+    <a href="https://github.com/bigcapitalhq/bigcapital/graphs/contributors">
+      <img src="https://img.shields.io/github/contributors/bigcapitalhq/bigcapital" alt="" />
+    </a>
+    <a href="https://github.com/bigcapitalhq/bigcapital/blob/develop/LICENSE">
+      <img src="https://img.shields.io/github/license/bigcapitalhq/bigcapital" alt="" />
+    </a>
+    <a href="https://twitter.com/bigcapitalhq"> 
+      <img src="https://img.shields.io/twitter/follow/bigcapitalhq?style=social" alt="twitter" />
+    </a>
+  </p>
 </p>
 
 # What's Bigcapital?
@@ -22,10 +40,10 @@ Bigcapital is a smart and open-source accounting and inventory software, Bigcapi
 # Resources
 
 - [Documentation](https://docs.bigcapital.ly/) - Learn how to use.
+- [Contribution](https://github.com/bigcapitalhq/bigcapital/blob/develop/CONTRIBUTING.md) - Welcome to any contributions.
 - [Discord](https://discord.com/invite/c8nPBJafeb) - Ask for help.
 - [Bug Tracker](https://github.com/bigcapitalhq/bigcapital/issues) - Notify us new bugs.
-- [Source Code](https://github.com/bigcapitalhq/bigcapital) - Github repo.
 
-# Changlog
+# Changelog
 
 Please see [Releases](https://github.com/bigcapitalhq/bigcapital/releases) for more information what has changed recently.

docker-compose.prod.yml

@@ -15,14 +15,14 @@ services:
       - ./data/logs/nginx/:/var/log/nginx
       - ./docker/certbot/certs/:/var/certs
     ports:
-      - "80:80"
-      - "443:443"
+      - "${PUBLIC_PROXY_PORT:-80}:80"
+      - "${PUBLIC_PROXY_SSL_PORT:-443}:443"
     tty: true
     depends_on:
       - server
       - webapp
 
-  webapp: 
+  webapp:
     container_name: bigcapital-webapp
     image: ghcr.io/bigcapitalhq/webapp:latest
 
@@ -94,12 +94,12 @@ services:
   mysql:
     container_name: bigcapital-mysql
     build:
-      context: ./docker/mysql
+      context: ./docker/mariadb
     environment:
       - MYSQL_DATABASE=${SYSTEM_DB_NAME}
       - MYSQL_USER=${DB_USER}
       - MYSQL_PASSWORD=${DB_PASSWORD}
-      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
+      - MYSQL_ROOT_PASSWORD=${DB_ROOT_PASSWORD}
     volumes:
       - mysql:/var/lib/mysql
     expose:

docker-compose.yml

@@ -6,14 +6,14 @@
 version: '3.3'
 
 services:
-  mysql:
+  mariadb:
     build:
-      context: ./docker/mysql
+      context: ./docker/mariadb
     environment:
       - MYSQL_DATABASE=${SYSTEM_DB_NAME}
       - MYSQL_USER=${DB_USER}
       - MYSQL_PASSWORD=${DB_PASSWORD}
-      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
+      - MYSQL_ROOT_PASSWORD=${DB_ROOT_PASSWORD}
     volumes:
       - mysql:/var/lib/mysql
     expose:

docker/mariadb/Dockerfile

@@ -1,4 +1,4 @@
-FROM mysql:5.7
+FROM mariadb:10.2
 
 USER root
 ADD my.cnf /etc/mysql/conf.d/my.cnf
@@ -17,7 +17,7 @@ ENV MYSQL_ROOT_PASSWORD=$MYSQL_ROOT_PASSWORD
 COPY ./init.sql /scripts/init.template.sql
 COPY ./docker-entrypoint.sh /docker-entrypoint-initdb.d/docker-initialize.sh
 
-# The scripts in the docker-entrypoint-initdb.d/ directory are executed as
+# The scripts in the `docker-entrypoint-initdb.d/` directory are executed as
 # the mysql user inside the MySQL Docker container.
 RUN chown -R mysql:root /docker-entrypoint-initdb.d
 RUN chown -R mysql:root /scripts

docker/mariadb/init.sql

@@ -1,2 +1,3 @@
 GRANT ALL PRIVILEGES ON *.* TO '{MYSQL_USER}'@'%' IDENTIFIED BY '{MYSQL_PASSWORD}' WITH GRANT OPTION;
+
 FLUSH PRIVILEGES;

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useWorkspaces": true,
-  "version": "0.0.0",
+  "version": "0.9.6",
   "npmClient": "npm"
 }

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcapital/server",
-  "version": "1.7.1",
+  "version": "0.9.5",
   "description": "",
   "main": "src/server.ts",
   "scripts": {

packages/server/scripts/webpack.common.js

@@ -65,6 +65,9 @@ exports.getCommonWebpackOptions = ({
         },
       ],
     },
+    optimization: {
+      minimize: false,
+    },
   };
 
   if (isDev) {

packages/server/src/api/controllers/FinancialStatements/BalanceSheet.ts

@@ -41,7 +41,7 @@ export default class BalanceSheetStatementController extends BaseFinancialReport
   get balanceSheetValidationSchema(): ValidationChain[] {
     return [
       ...this.sheetNumberFormatValidationSchema,
-      query('accounting_method').optional().isIn(['cash', 'accural']),
+      query('accounting_method').optional().isIn(['cash', 'accrual']),
 
       query('from_date').optional(),
       query('to_date').optional(),

packages/server/src/api/controllers/Organization.ts

@@ -58,7 +58,7 @@ export default class OrganizationController extends BaseController {
   private get organizationValidationSchema(): ValidationChain[] {
     return [
       check('name').exists().trim(),
-      check('industry').optional().isString(),
+      check('industry').optional({ nullable: true }).isString().trim().escape(),
       check('location').exists().isString().isISO31661Alpha2(),
       check('base_currency').exists().isISO4217(),
       check('timezone').exists().isIn(moment.tz.names()),

packages/server/src/database/seeds/core/20190423085242_seed_accounts.ts

@@ -3,17 +3,17 @@ import AccountsData from '../data/accounts';
 
 export default class SeedAccounts extends TenantSeeder {
   /**
-   * Seeds initial accounts to the organization. 
+   * Seeds initial accounts to the organization.
    */
   up(knex) {
-    const data = AccountsData.map((account) => {
-      return {
-        ...account,
-        name: this.i18n.__(account.name),
-        description: this.i18n.__(account.description),
-        currencyCode: this.tenant.metadata.baseCurrency,
-      };
-    });
+    const data = AccountsData.map((account) => ({
+      ...account,
+      name: this.i18n.__(account.name),
+      description: this.i18n.__(account.description),
+      currencyCode: this.tenant.metadata.baseCurrency,
+      seededAt: new Date(),
+    })
+);
     return knex('accounts').then(async () => {
       // Inserts seed entries.
       return knex('accounts').insert(data);

packages/server/src/database/seeds/core/20200810121809_seed_settings.ts

@@ -8,7 +8,7 @@ export default class SeedSettings extends TenantSeeder {
   up() {
     const settings = [
       // Orgnization settings.
-      { group: 'organization', key: 'accounting_basis', value: 'accural' },
+      { group: 'organization', key: 'accounting_basis', value: 'accrual' },
 
       // Accounts settings.
       { group: 'accounts', key: 'account_code_unique', value: true },

packages/server/src/interfaces/BalanceSheet.ts

@@ -44,7 +44,7 @@ export interface IBalanceSheetQuery extends IFinancialSheetBranchesQuery {
   numberFormat: INumberFormatQuery;
   noneTransactions: boolean;
   noneZero: boolean;
-  basis: 'cash' | 'accural';
+  basis: 'cash' | 'accrual';
   accountIds: number[];
 
   percentageOfColumn: boolean;

packages/server/src/interfaces/Ledger.ts

@@ -4,6 +4,8 @@ export interface ILedger {
 
   getEntries(): ILedgerEntry[];
 
+  filter(cb: (entry: ILedgerEntry) => boolean): ILedger;
+
   whereAccountId(accountId: number): ILedger;
   whereContactId(contactId: number): ILedger;
   whereFromDate(fromDate: Date | string): ILedger;

packages/server/src/interfaces/TrialBalanceSheet.ts

@@ -4,7 +4,7 @@ export interface ITrialBalanceSheetQuery {
   fromDate: Date | string;
   toDate: Date | string;
   numberFormat: INumberFormatQuery;
-  basis: 'cash' | 'accural';
+  basis: 'cash' | 'accrual';
   noneZero: boolean;
   noneTransactions: boolean;
   onlyActive: boolean;

packages/server/src/services/Accounting/LedgerContactStorage.ts

@@ -1,9 +1,14 @@
 import { Service, Inject } from 'typedi';
 import async from 'async';
 import { Knex } from 'knex';
-import { ILedger, ISaleContactsBalanceQueuePayload } from '@/interfaces';
+import {
+  ILedger,
+  ILedgerEntry,
+  ISaleContactsBalanceQueuePayload,
+} from '@/interfaces';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { TenantMetadata } from '@/system/models';
+import { ACCOUNT_TYPE } from '@/data/AccountTypes';
 
 @Service()
 export class LedgerContactsBalanceStorage {
@@ -49,6 +54,29 @@ export class LedgerContactsBalanceStorage {
     await this.saveContactBalance(tenantId, ledger, contactId, trx);
   };
 
+  /**
+   * Filters AP/AR ledger entries.
+   * @param {number} tenantId
+   * @param {Knex.Transaction} trx
+   * @returns {Promise<(entry: ILedgerEntry) => boolean>}
+   */
+  private filterARAPLedgerEntris = async (
+    tenantId: number,
+    trx?: Knex.Transaction
+  ): Promise<(entry: ILedgerEntry) => boolean> => {
+    const { Account } = this.tenancy.models(tenantId);
+
+    const ARAPAcounts = await Account.query(trx).whereIn('accountType', [
+      ACCOUNT_TYPE.ACCOUNTS_RECEIVABLE,
+      ACCOUNT_TYPE.ACCOUNTS_PAYABLE,
+    ]);
+    const ARAPAcountsIds = ARAPAcounts.map((a) => a.id);
+
+    return (entry: ILedgerEntry) => {
+      return ARAPAcountsIds.indexOf(entry.accountId) !== -1;
+    };
+  };
+
   /**
    *
    * @param   {number} tenantId
@@ -63,16 +91,24 @@ export class LedgerContactsBalanceStorage {
     trx?: Knex.Transaction
   ): Promise<void> => {
     const { Contact } = this.tenancy.models(tenantId);
-    const contact = await Contact.query().findById(contactId);
+    const contact = await Contact.query(trx).findById(contactId);
 
     // Retrieves the given tenant metadata.
     const tenantMeta = await TenantMetadata.query().findOne({ tenantId });
-    
+
     // Detarmines whether the contact has foreign currency.
     const isForeignContact = contact.currencyCode !== tenantMeta.baseCurrency;
 
     // Filters the ledger base on the given contact id.
-    const contactLedger = ledger.whereContactId(contactId);
+    const filterARAPLedgerEntris = await this.filterARAPLedgerEntris(
+      tenantId,
+      trx
+    );
+    const contactLedger = ledger
+      // Filter entries only that have contact id.
+      .whereContactId(contactId)
+      // Filter entries on AR/AP accounts.
+      .filter(filterARAPLedgerEntris);
 
     const closingBalance = isForeignContact
       ? contactLedger

packages/server/src/services/Accounting/LedgerStorageRevert.ts

@@ -10,7 +10,7 @@ export class LedgerRevert {
   private tenancy: HasTenancyService;
 
   @Inject()
-  ledgerStorage: LedgerStorageService;
+  private ledgerStorage: LedgerStorageService;
 
   /**
    * Reverts the jouranl entries.

packages/server/src/services/Contacts/Customers/CRUD/CreateCustomer.ts

@@ -55,7 +55,7 @@ export class CreateCustomer {
       } as ICustomerEventCreatingPayload);
 
       // Creates a new contact as customer.
-      const customer = await Contact.query().insertAndFetch({
+      const customer = await Contact.query(trx).insertAndFetch({
         ...customerObj,
       });
       // Triggers `onCustomerCreated` event.

packages/server/src/services/CreditNotes/CreditNoteGLEntriesSubscriber.ts

@@ -5,18 +5,13 @@ import {
   ICreditNoteDeletedPayload,
   ICreditNoteEditedPayload,
   ICreditNoteOpenedPayload,
-  IRefundCreditNoteOpenedPayload,
 } from '@/interfaces';
 import CreditNoteGLEntries from './CreditNoteGLEntries';
-import HasTenancyService from '@/services/Tenancy/TenancyService';
 
 @Service()
 export default class CreditNoteGLEntriesSubscriber {
   @Inject()
-  creditNoteGLEntries: CreditNoteGLEntries;
-
-  @Inject()
-  tenancy: HasTenancyService;
+  private creditNoteGLEntries: CreditNoteGLEntries;
 
   /**
    * Attaches events with handlers.

packages/server/src/services/Expenses/CRUD/DeleteExpense.ts

@@ -9,7 +9,6 @@ import events from '@/subscribers/events';
 import UnitOfWork from '@/services/UnitOfWork';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import { CommandExpenseValidator } from './CommandExpenseValidator';
-import { ExpenseCategory } from 'models';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 
 @Service()
@@ -37,7 +36,7 @@ export class DeleteExpense {
     expenseId: number,
     authorizedUser: ISystemUser
   ): Promise<void> => {
-    const { Expense } = this.tenancy.models(tenantId);
+    const { Expense, ExpenseCategory } = this.tenancy.models(tenantId);
 
     // Retrieves the expense transaction with associated entries or
     // throw not found error.
@@ -60,7 +59,7 @@ export class DeleteExpense {
       } as IExpenseDeletingPayload);
 
       // Deletes expense associated entries.
-      await ExpenseCategory.query(trx).findById(expenseId).delete();
+      await ExpenseCategory.query(trx).where('expenseId', expenseId).delete();
 
       // Deletes expense transactions.
       await Expense.query(trx).findById(expenseId).delete();

packages/server/src/services/Expenses/ExpenseGLEntries.ts

@@ -46,7 +46,7 @@ export class ExpenseGLEntries {
       ...commonEntry,
       credit: expense.localAmount,
       accountId: expense.paymentAccountId,
-      accountNormal: AccountNormal.CREDIT,
+      accountNormal: AccountNormal.DEBIT,
       index: 1,
     };
   };

packages/server/src/services/FinancialStatements/ProfitLossSheet/utils.ts

@@ -17,7 +17,7 @@ export const getDefaultPLQuery = (): IProfitLossSheetQuery => ({
     formatMoney: 'total',
     precision: 2,
   },
-  basis: 'accural',
+  basis: 'accrual',
 
   noneZero: false,
   noneTransactions: false,

packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetService.ts

@@ -35,7 +35,7 @@ export default class TrialBalanceSheetService extends FinancialSheet {
         formatMoney: 'total',
         precision: 2,
       },
-      basis: 'accural',
+      basis: 'accrual',
       noneZero: false,
       noneTransactions: true,
       onlyActive: false,

packages/server/src/services/ManualJournals/CommandManualJournalValidators.ts

@@ -1,11 +1,10 @@
-import { difference, sumBy, omit, map } from 'lodash';
+import { difference } from 'lodash';
 import { Service, Inject } from 'typedi';
 import { ServiceError } from '@/exceptions';
 import {
   IManualJournalDTO,
   IManualJournalEntry,
   IManualJournal,
-  IManualJournalEntryDTO,
 } from '@/interfaces';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import { ERRORS } from './constants';
@@ -286,7 +285,7 @@ export class CommandManualJournalValidators {
   public validateJournalCurrencyWithAccountsCurrency = async (
     tenantId: number,
     manualJournalDTO: IManualJournalDTO,
-    baseCurrency: string,
+    baseCurrency: string
   ) => {
     const { Account } = this.tenancy.models(tenantId);
 

packages/server/src/services/ManualJournals/ManualJournalGLEntries.ts

@@ -3,25 +3,20 @@ import * as R from 'ramda';
 import {
   IManualJournal,
   IManualJournalEntry,
-  IAccount,
   ILedgerEntry,
 } from '@/interfaces';
 import { Knex } from 'knex';
 import Ledger from '@/services/Accounting/Ledger';
 import LedgerStorageService from '@/services/Accounting/LedgerStorageService';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
-import { LedgerRevert } from '@/services/Accounting/LedgerStorageRevert';
 
 @Service()
 export class ManualJournalGLEntries {
   @Inject()
-  ledgerStorage: LedgerStorageService;
+  private ledgerStorage: LedgerStorageService;
 
   @Inject()
-  ledgerRevert: LedgerRevert;
-
-  @Inject()
-  tenancy: HasTenancyService;
+  private tenancy: HasTenancyService;
 
   /**
    * Create manual journal GL entries.
@@ -77,7 +72,7 @@ export class ManualJournalGLEntries {
     manualJournalId: number,
     trx?: Knex.Transaction
   ): Promise<void> => {
-    return this.ledgerRevert.revertGLEntries(
+    return this.ledgerStorage.deleteByReference(
       tenantId,
       manualJournalId,
       'Journal',
@@ -86,7 +81,7 @@ export class ManualJournalGLEntries {
   };
 
   /**
-   *
+   * Retrieves the ledger of the given manual journal.
    * @param   {IManualJournal} manualJournal
    * @returns {Ledger}
    */
@@ -97,11 +92,13 @@ export class ManualJournalGLEntries {
   };
 
   /**
-   *
+   * Retrieves the common entry details of the manual journal
    * @param   {IManualJournal} manualJournal
-   * @returns {}
+   * @returns {Partial<ILedgerEntry>}
    */
-  private getManualJournalCommonEntry = (manualJournal: IManualJournal) => {
+  private getManualJournalCommonEntry = (
+    manualJournal: IManualJournal
+  ): Partial<ILedgerEntry> => {
     return {
       transactionNumber: manualJournal.journalNumber,
       referenceNumber: manualJournal.reference,
@@ -118,7 +115,8 @@ export class ManualJournalGLEntries {
   };
 
   /**
-   *
+   * Retrieves the ledger entry of the given manual journal and
+   * its associated entry.
    * @param   {IManualJournal} manualJournal -
    * @param   {IManualJournalEntry} entry -
    * @returns {ILedgerEntry}
@@ -149,7 +147,7 @@ export class ManualJournalGLEntries {
   );
 
   /**
-   *
+   * Retrieves the ledger of the given manual journal.
    * @param   {IManualJournal} manualJournal
    * @returns {ILedgerEntry[]}
    */

packages/server/src/services/Projects/Projects/ProjectBillableBillSubscriber.ts

@@ -23,8 +23,11 @@ export class ProjectBillableBillSubscriber {
       events.saleInvoice.onCreated,
       this.handleIncreaseBillableBill
     );
-    bus.subscribe(events.saleInvoice.onEdited, this.handleDecreaseBillableBill);
-    bus.subscribe(events.saleInvoice.onDeleted, this.handleEditBillableBill);
+    bus.subscribe(events.saleInvoice.onEdited, this.handleEditBillableBill);
+    bus.subscribe(
+      events.saleInvoice.onDeleted,
+      this.handleDecreaseBillableBill
+    );
   }
 
   /**

packages/server/src/services/Projects/Projects/ProjectBillableExpenseInvoiced.ts

@@ -1,7 +1,11 @@
 import { Knex } from 'knex';
 import { Inject, Service } from 'typedi';
 import async from 'async';
-import { ISaleInvoice, ISaleInvoiceDTO, ProjectLinkRefType } from '@/interfaces';
+import {
+  ISaleInvoice,
+  ISaleInvoiceDTO,
+  ProjectLinkRefType,
+} from '@/interfaces';
 import { ProjectBillableExpense } from './ProjectBillableExpense';
 import { filterEntriesByRefType } from './_utils';
 

packages/server/src/services/Projects/Projects/ProjectBillableExpenseSubscriber.ts

@@ -21,13 +21,10 @@ export class ProjectBillableExpensesSubscriber {
       events.saleInvoice.onCreated,
       this.handleIncreaseBillableExpenses
     );
-    bus.subscribe(
-      events.saleInvoice.onEdited,
-      this.handleDecreaseBillableExpenses
-    );
+    bus.subscribe(events.saleInvoice.onEdited, this.handleEditBillableExpenses);
     bus.subscribe(
       events.saleInvoice.onDeleted,
-      this.handleEditBillableExpenses
+      this.handleDecreaseBillableExpenses
     );
   }
 

packages/webapp/Dockerfile

@@ -5,10 +5,10 @@ USER root
 WORKDIR /app
 
 # Install dependencies
-COPY package.json ./
+COPY package*.json ./
 COPY lerna.json ./
 
-COPY ./packages/webapp/package.json /app/packages/webapp/package.json
+COPY ./packages/webapp/package*.json /app/packages/webapp/
 
 RUN npm install
 RUN npm run bootstrap

packages/webapp/craco.config.js

@@ -1,7 +1,18 @@
 const path = require('path');
+const webpack = require('webpack');
+const dotenv = require('dotenv-webpack');
 
 module.exports = {
   webpack: {
+    plugins: [
+      new dotenv(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          MONOREPO_VERSION: JSON.stringify(require('../../lerna.json').version),
+        },
+      }),
+    ],
+
     alias: {
       '@': path.resolve(__dirname, 'src'),
     },

packages/webapp/package-lock.json

@@ -1205,9 +1205,9 @@
       }
     },
     "@blueprintjs-formik/core": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.2.1.tgz",
-      "integrity": "sha512-YGJe+QorDGbkWDSUg6x69LYGN62Kgvb92Iz/voqmszVRKj4KcoPvd/7coF8Jmu+ZQE6LcwM/9ccB2i63L99ITA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.3.tgz",
+      "integrity": "sha512-ko7g54YSEcSq2K/GEpmiTG0foGLqe7DwgXGhkGxYEiHhLAUv8WvQmrFsm8e/KOW7n8mLGq0uaZVe2l8m3JTGGQ==",
       "requires": {
         "lodash.get": "^4.4.2",
         "lodash.keyby": "^4.6.0",
@@ -1929,137 +1929,6 @@
         "reselect": "^4.1.7"
       }
     },
-    "@sentry/browser": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.19.7.tgz",
-      "integrity": "sha512-oDbklp4O3MtAM4mtuwyZLrgO1qDVYIujzNJQzXmi9YzymJCuzMLSRDvhY83NNDCRxf0pds4DShgYeZdbSyKraA==",
-      "requires": {
-        "@sentry/core": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/core": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.19.7.tgz",
-      "integrity": "sha512-tOfZ/umqB2AcHPGbIrsFLcvApdTm9ggpi/kQZFkej7kMphjT+SGBiQfYtjyg9jcRW+ilAR4JXC9BGKsdEQ+8Vw==",
-      "requires": {
-        "@sentry/hub": "6.19.7",
-        "@sentry/minimal": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/hub": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.19.7.tgz",
-      "integrity": "sha512-y3OtbYFAqKHCWezF0EGGr5lcyI2KbaXW2Ik7Xp8Mu9TxbSTuwTe4rTntwg8ngPjUQU3SUHzgjqVB8qjiGqFXCA==",
-      "requires": {
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/minimal": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.19.7.tgz",
-      "integrity": "sha512-wcYmSJOdvk6VAPx8IcmZgN08XTXRwRtB1aOLZm+MVHjIZIhHoBGZJYTVQS/BWjldsamj2cX3YGbGXNunaCfYJQ==",
-      "requires": {
-        "@sentry/hub": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/react": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.19.7.tgz",
-      "integrity": "sha512-VzJeBg/v41jfxUYPkH2WYrKjWc4YiMLzDX0f4Zf6WkJ4v3IlDDSkX6DfmWekjTKBho6wiMkSNy2hJ1dHfGZ9jA==",
-      "requires": {
-        "@sentry/browser": "6.19.7",
-        "@sentry/minimal": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "hoist-non-react-statics": "^3.3.2",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/tracing": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.19.7.tgz",
-      "integrity": "sha512-ol4TupNnv9Zd+bZei7B6Ygnr9N3Gp1PUrNI761QSlHtPC25xXC5ssSD3GMhBgyQrcvpuRcCFHVNNM97tN5cZiA==",
-      "requires": {
-        "@sentry/hub": "6.19.7",
-        "@sentry/minimal": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/types": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.19.7.tgz",
-      "integrity": "sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg=="
-    },
-    "@sentry/utils": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.19.7.tgz",
-      "integrity": "sha512-z95ECmE3i9pbWoXQrD/7PgkBAzJYR+iXtPuTkpBjDKs86O3mT+PXOT3BAn79w2wkn7/i3vOGD2xVr1uiMl26dA==",
-      "requires": {
-        "@sentry/types": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@@ -5985,11 +5854,27 @@
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
       "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
     },
+    "dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "requires": {
+        "dotenv": "^8.2.0"
+      }
+    },
     "dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "requires": {
+        "dotenv-defaults": "^2.0.2"
+      }
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -7298,6 +7183,11 @@
         "locate-path": "^3.0.0"
       }
     },
+    "flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ=="
+    },
     "flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",

packages/webapp/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@bigcapital/webapp",
-  "version": "1.7.1",
+  "version": "0.9.6",
   "private": true,
   "dependencies": {
-    "@blueprintjs-formik/core": "^0.2.1",
+    "@blueprintjs-formik/core": "^0.3.3",
     "@blueprintjs-formik/datetime": "^0.3.4",
     "@blueprintjs-formik/select": "^0.2.3",
     "@blueprintjs/core": "^3.50.2",
@@ -16,8 +16,6 @@
     "@casl/react": "^2.3.0",
     "@craco/craco": "^5.9.0",
     "@reduxjs/toolkit": "^1.2.5",
-    "@sentry/react": "^6.13.2",
-    "@sentry/tracing": "^6.13.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
@@ -44,7 +42,9 @@
     "deep-map-keys": "^2.0.1",
     "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
+    "dotenv-webpack": "^8.0.1",
     "fast-deep-equal": "^3.1.3",
+    "flat": "^5.0.2",
     "formik": "^2.2.5",
     "http-proxy-middleware": "^1.0.0",
     "jest": "24.9.0",

packages/webapp/public/index.html

@@ -20,24 +20,6 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <% if (process.env.NODE_ENV === 'production') { %>
-    <!-- Hotjar Tracking Code for https://app.bigcapital.ly/ -->
-    <script>
-      (function (h, o, t, j, a, r) {
-        h.hj =
-          h.hj ||
-          function () {
-            (h.hj.q = h.hj.q || []).push(arguments);
-          };
-        h._hjSettings = { hjid: 2774528, hjsv: 6 };
-        a = o.getElementsByTagName('head')[0];
-        r = o.createElement('script');
-        r.async = 1;
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
-        a.appendChild(r);
-      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
-    </script>
-    <% } %>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -69,7 +51,5 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"
       type="text/css"
     />
-    <!-- <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> -->
-    <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> -->
   </body>
 </html>

packages/webapp/src/components/Customers/CustomerDrawerLink.tsx

@@ -4,6 +4,7 @@ import * as R from 'ramda';
 
 import { ButtonLink } from '../Button';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 function CustomerDrawerLinkComponent({
   // #ownProps
@@ -16,7 +17,7 @@ function CustomerDrawerLinkComponent({
 }) {
   // Handle view customer drawer.
   const handleCustomerDrawer = (event) => {
-    openDrawer('customer-detail-drawer', { customerId });
+    openDrawer(DRAWERS.CUSTOMER_DETAILS, { customerId });
     event.preventDefault();
   };
 

packages/webapp/src/components/DialogsContainer.tsx

@@ -17,8 +17,8 @@ import AllocateLandedCostDialog from '@/containers/Dialogs/AllocateLandedCostDia
 import InvoicePdfPreviewDialog from '@/containers/Dialogs/InvoicePdfPreviewDialog';
 import EstimatePdfPreviewDialog from '@/containers/Dialogs/EstimatePdfPreviewDialog';
 import ReceiptPdfPreviewDialog from '@/containers/Dialogs/ReceiptPdfPreviewDialog';
-import MoneyInDialog from '@/containers/Dialogs/MoneyInDialog';
-import MoneyOutDialog from '@/containers/Dialogs/MoneyOutDialog';
+import MoneyInDialog from '@/containers/CashFlow/MoneyInDialog';
+import MoneyOutDialog from '@/containers/CashFlow/MoneyOutDialog';
 import BadDebtDialog from '@/containers/Dialogs/BadDebtDialog';
 import NotifyInvoiceViaSMSDialog from '@/containers/Dialogs/NotifyInvoiceViaSMSDialog';
 import NotifyReceiptViaSMSDialog from '@/containers/Dialogs/NotifyReceiptViaSMSDialog';

packages/webapp/src/components/DrawersContainer.tsx

@@ -31,28 +31,28 @@ import { DRAWERS } from '@/constants/drawers';
 export default function DrawersContainer() {
   return (
     <div>
-      <AccountDrawer name={DRAWERS.ACCOUNT} />
-      <ManualJournalDrawer name={DRAWERS.JOURNAL} />
-      <ExpenseDrawer name={DRAWERS.EXPENSE} />
-      <BillDrawer name={DRAWERS.BILL} />
-      <InvoiceDetailDrawer name={DRAWERS.INVOICE} />
-      <EstimateDetailDrawer name={DRAWERS.ESTIMATE} />
-      <ReceiptDetailDrawer name={DRAWERS.RECEIPT} />
-      <PaymentReceiveDetailDrawer name={DRAWERS.PAYMENT_RECEIVE} />
-      <PaymentMadeDetailDrawer name={DRAWERS.PAYMENT_MADE} />
-      <ItemDetailDrawer name={DRAWERS.ITEM} />
-      <CustomerDetailsDrawer name={DRAWERS.CUSTOMER} />
-      <VendorDetailsDrawer name={DRAWERS.VENDOR} />
-      <InventoryAdjustmentDetailDrawer name={DRAWERS.INVENTORY_ADJUSTMENT} />
-      <CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION} />
+      <AccountDrawer name={DRAWERS.ACCOUNT_DETAILS} />
+      <ManualJournalDrawer name={DRAWERS.JOURNAL_DETAILS} />
+      <ExpenseDrawer name={DRAWERS.EXPENSE_DETAILS} />
+      <BillDrawer name={DRAWERS.BILL_DETAILS} />
+      <InvoiceDetailDrawer name={DRAWERS.INVOICE_DETAILS} />
+      <EstimateDetailDrawer name={DRAWERS.ESTIMATE_DETAILS} />
+      <ReceiptDetailDrawer name={DRAWERS.RECEIPT_DETAILS} />
+      <PaymentReceiveDetailDrawer name={DRAWERS.PAYMENT_RECEIVE_DETAILS} />
+      <PaymentMadeDetailDrawer name={DRAWERS.PAYMENT_MADE_DETAILS} />
+      <ItemDetailDrawer name={DRAWERS.ITEM_DETAILS} />
+      <CustomerDetailsDrawer name={DRAWERS.CUSTOMER_DETAILS} />
+      <VendorDetailsDrawer name={DRAWERS.VENDOR_DETAILS} />
+      <InventoryAdjustmentDetailDrawer name={DRAWERS.INVENTORY_ADJUSTMENT_DETAILS} />
+      <CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION_DETAILS} />
       <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
       <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
       <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
-      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE} />
-      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT} />
-      <RefundCreditNoteDetailDrawer name={DRAWERS.REFUND_CREDIT_NOTE} />
-      <RefundVendorCreditDetailDrawer name={DRAWERS.REFUND_VENDOR_CREDIT} />
-      <WarehouseTransferDetailDrawer name={DRAWERS.WAREHOUSE_TRANSFER} />
+      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAILS} />
+      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAILS} />
+      <RefundCreditNoteDetailDrawer name={DRAWERS.REFUND_CREDIT_NOTE_DETAILS} />
+      <RefundVendorCreditDetailDrawer name={DRAWERS.REFUND_VENDOR_CREDIT_DETAILS} />
+      <WarehouseTransferDetailDrawer name={DRAWERS.WAREHOUSE_TRANSFER_DETAILS} />
     </div>
   );
 }

packages/webapp/src/components/Forms/Select.tsx

@@ -46,7 +46,7 @@ const SelectButton = styled(Button)`
     margin-right: 12px;
     border-radius: 1px;
   }
-  &:not([class*='bp3-intent-']) {
+  &:not([class*='bp3-intent-']):not(.bp3-disabled) {
     &,
     &:hover {
       background: #fff;

packages/webapp/src/components/Vendors/VendorDrawerLink.tsx

@@ -4,6 +4,7 @@ import * as R from 'ramda';
 
 import { ButtonLink } from '../Button';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 function VendorDrawerLinkComponent({
   // #ownProps
@@ -16,7 +17,7 @@ function VendorDrawerLinkComponent({
 }) {
   // Handle view customer drawer.
   const handleVendorDrawer = (event) => {
-    openDrawer('vendor-detail-drawer', { vendorId });
+    openDrawer(DRAWERS.VENDOR_DETAILS, { vendorId });
     event.preventDefault();
   };
 

packages/webapp/src/constants/dialogs.ts

@@ -46,4 +46,5 @@ export enum DialogsName {
   EstimateExpenseForm = 'estimate-expense-form',
   ProjectInvoicingForm = 'project-invoicing-form',
   ProjectBillableEntriesForm = 'project-billable-entries',
+  InvoiceNumberSettings = 'InvoiceNumberSettings'
 }

packages/webapp/src/constants/drawers.ts

@@ -1,25 +1,25 @@
 // @ts-nocheck
 export enum DRAWERS {
-  ACCOUNT = 'account-drawer',
-  JOURNAL = 'journal-drawer',
-  EXPENSE = 'expense-drawer',
-  BILL = 'bill-drawer',
-  INVOICE = 'invoice-detail-drawer',
-  RECEIPT = 'receipt-detail-drawer',
-  PAYMENT_RECEIVE = 'payment-receive-detail-drawer',
-  PAYMENT_MADE = 'payment-made-drawer',
-  ESTIMATE = 'estimate-detail-drawer',
-  ITEM = 'item-detail-drawer',
-  CUSTOMER = 'customer-detail-drawer',
-  VENDOR = 'vendor-detail-drawer',
-  INVENTORY_ADJUSTMENT = 'inventory-adjustment-drawer',
-  CASHFLOW_TRNASACTION = 'cashflow-transaction-drawer',
+  ACCOUNT_DETAILS = 'account-drawer',
+  JOURNAL_DETAILS = 'journal-drawer',
+  EXPENSE_DETAILS = 'expense-drawer',
+  BILL_DETAILS = 'bill-drawer',
+  INVOICE_DETAILS = 'invoice-detail-drawer',
+  RECEIPT_DETAILS = 'receipt-detail-drawer',
+  PAYMENT_RECEIVE_DETAILS = 'payment-receive-detail-drawer',
+  PAYMENT_MADE_DETAILS = 'payment-made-drawer',
+  ESTIMATE_DETAILS = 'estimate-detail-drawer',
+  ITEM_DETAILS = 'item-detail-drawer',
+  CUSTOMER_DETAILS = 'customer-detail-drawer',
+  VENDOR_DETAILS = 'vendor-detail-drawer',
+  INVENTORY_ADJUSTMENT_DETAILS = 'inventory-adjustment-drawer',
+  CASHFLOW_TRNASACTION_DETAILS = 'cashflow-transaction-drawer',
   QUICK_CREATE_CUSTOMER = 'quick-create-customer',
   QUICK_CREATE_ITEM = 'quick-create-item',
   QUICK_WRITE_VENDOR = 'quick-write-vendor',
-  CREDIT_NOTE = 'credit-note-detail-drawer',
-  VENDOR_CREDIT = 'vendor-credit-detail-drawer',
-  REFUND_CREDIT_NOTE = 'refund-credit-detail-drawer',
-  REFUND_VENDOR_CREDIT = 'refund-vendor-detail-drawer',
-  WAREHOUSE_TRANSFER = 'warehouse-transfer-detail-drawer',
+  CREDIT_NOTE_DETAILS = 'credit-note-detail-drawer',
+  VENDOR_CREDIT_DETAILS = 'vendor-credit-detail-drawer',
+  REFUND_CREDIT_NOTE_DETAILS = 'refund-credit-detail-drawer',
+  REFUND_VENDOR_CREDIT_DETAILS = 'refund-vendor-detail-drawer',
+  WAREHOUSE_TRANSFER_DETAILS = 'warehouse-transfer-detail-drawer',
 }

packages/webapp/src/constants/footerLinks.tsx

@@ -4,30 +4,22 @@ import intl from 'react-intl-universal';
 export const getFooterLinks = () => [
   {
     title: intl.get('blog'),
-    link: '#',
+    link: 'https://docs.bigcapital.ly/blog',
+  },
+  {
+    title: intl.get('community'),
+    link: 'https://discord.com/invite/c8nPBJafeb',
   },
   {
     title: intl.get('support'),
-    link: '#',
-  },
-  {
-    title: intl.get('service_status'),
-    link: '#',
-  },
-  {
-    title: intl.get('pricing'),
-    link: '#',
-  },
-  {
-    title: intl.get('reseller_partner'),
-    link: '#',
+    link: 'https://discord.com/invite/c8nPBJafeb',
   },
   {
     title: intl.get('docs'),
-    link: '#',
+    link: 'https://docs.bigcapital.ly',
   },
   {
     title: 'Bigcapital',
     link: 'http://bigcapital.ly',
-  }
-]
+  },
+];

packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.tsx

@@ -25,6 +25,7 @@ import { useMemorizedColumnsWidths } from '@/hooks';
 import { useManualJournalsColumns } from './utils';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Manual journals data-table.
@@ -79,14 +80,16 @@ function ManualJournalsDataTable({
 
   // Handle view detail journal.
   const handleViewDetailJournal = ({ id }) => {
-    openDrawer('journal-drawer', {
+    openDrawer(DRAWERS.JOURNAL_DETAILS, {
       manualJournalId: id,
     });
   };
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('journal-drawer', { manualJournalId: cell.row.original.id });
+    openDrawer(DRAWERS.JOURNAL_DETAILS, {
+      manualJournalId: cell.row.original.id,
+    });
   };
 
   // Local storage memorizing columns widths.

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.tsx

@@ -1,193 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import {
-  Intent,
-  Button,
-  ButtonGroup,
-  Popover,
-  PopoverInteractionKind,
-  Position,
-  Menu,
-  MenuItem,
-} from '@blueprintjs/core';
-import classNames from 'classnames';
-import { useFormikContext } from 'formik';
-import { FormattedMessage as T, If, Icon } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import { useMakeJournalFormContext } from './MakeJournalProvider';
-import { useHistory } from 'react-router-dom';
-
-/**
- * Make Journal floating actions bar.
- */
-export default function MakeJournalEntriesFooter() {
-  const history = useHistory();
-
-  // Formik context.
-  const { isSubmitting, submitForm } = useFormikContext();
-
-  // Make journal form context.
-  const {
-    manualJournalId,
-    setSubmitPayload,
-    manualJournalPublished = false,
-  } = useMakeJournalFormContext();
-
-  // Handle `submit & publish` button click.
-  const handleSubmitPublishBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, publish: true });
-    submitForm();
-  };
-
-  // Handle `submit, publish & new` button click.
-  const handleSubmitPublishAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: true, resetForm: true });
-    submitForm();
-  };
-
-  // Handle `submit, publish & continue editing` button click.
-  const handleSubmitPublishContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: true });
-    submitForm();
-  };
-
-  // Handle `submit as draft` button click.
-  const handleSubmitDraftBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, publish: false });
-  };
-
-  // Handle `submit as draft & new` button click.
-  const handleSubmitDraftAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: false, resetForm: true });
-    submitForm();
-  };
-
-  // Handles submit as draft & continue editing button click.
-  const handleSubmitDraftContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: false });
-    submitForm();
-  };
-
-  // Handle cancel button action click.
-  const handleCancelBtnClick = (event) => {
-    history.goBack();
-  };
-
-  const handleClearBtnClick = (event) => {};
-
-  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Publish ----------- */}
-      <If condition={!manualJournalId || !manualJournalPublished}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            intent={Intent.PRIMARY}
-            type="submit"
-            onClick={handleSubmitPublishBtnClick}
-            text={<T id={'save_publish'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'publish_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'publish_continue_editing'} />}
-                  onClick={handleSubmitPublishContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-        {/* ----------- Save As Draft ----------- */}
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            className={'ml1'}
-            type="submit"
-            onClick={handleSubmitDraftBtnClick}
-            text={<T id={'save_as_draft'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitDraftAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'save_continue_editing'} />}
-                  onClick={handleSubmitDraftContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      {/* ----------- Save and New ----------- */}
-      <If condition={manualJournalId && manualJournalPublished}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            intent={Intent.PRIMARY}
-            type="submit"
-            onClick={handleSubmitPublishBtnClick}
-            text={<T id={'save'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={manualJournalId ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
-      {/* ----------- Cancel ----------- */}
-      <Button
-        className={'ml1'}
-        onClick={handleCancelBtnClick}
-        text={<T id={'cancel'} />}
-      />
-    </div>
-  );
-}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx

@@ -4,7 +4,7 @@ import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
-import { defaultTo, isEmpty, omit } from 'lodash';
+import { isEmpty, omit } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
@@ -31,6 +31,7 @@ import {
   transformToEditForm,
   defaultManualJournal,
 } from './utils';
+import { JournalSyncIncrementSettingsToForm } from './components';
 
 /**
  * Journal entries form.
@@ -40,6 +41,7 @@ function MakeJournalEntriesForm({
   journalNextNumber,
   journalNumberPrefix,
   journalAutoIncrement,
+
   // #withCurrentOrganization
   organization: { base_currency },
 }) {
@@ -69,6 +71,8 @@ function MakeJournalEntriesForm({
           }
         : {
             ...defaultManualJournal,
+            // If the auto-increment mode is enabled, take the next journal
+            // number from the settings.
             ...(journalAutoIncrement && {
               journal_number: journalNumber,
             }),
@@ -116,7 +120,6 @@ function MakeJournalEntriesForm({
       entries: R.compose(orderingLinesIndexes)(entries),
       publish: submitPayload.publish,
     };
-
     // Handle the request error.
     const handleError = ({
       response: {
@@ -126,7 +129,6 @@ function MakeJournalEntriesForm({
       transformErrors(errors, { setErrors });
       setSubmitting(false);
     };
-
     // Handle the request success.
     const handleSuccess = (errors) => {
       AppToaster.show({
@@ -147,7 +149,6 @@ function MakeJournalEntriesForm({
         resetForm();
       }
     };
-
     if (isNewMode) {
       createJournalMutate(form).then(handleSuccess).catch(handleError);
     } else {
@@ -179,6 +180,9 @@ function MakeJournalEntriesForm({
 
           {/* --------- Dialogs --------- */}
           <MakeJournalFormDialogs />
+
+          {/* --------- Effects --------- */}
+          <JournalSyncIncrementSettingsToForm />
         </Form>
       </Formik>
     </div>

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx

@@ -8,6 +8,19 @@ import { PageFormBigNumber, FormattedMessage as T } from '@/components';
 import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
 
 export default function MakeJournalEntriesHeader() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <MakeJournalEntriesHeaderFields />
+      <MakeJournalHeaderBigNumber />
+    </div>
+  );
+}
+
+/**
+ * Big total number of make journal header.
+ * @returns {React.ReactNode}
+ */
+function MakeJournalHeaderBigNumber() {
   const {
     values: { entries, currency_code },
   } = useFormikContext();
@@ -17,14 +30,10 @@ export default function MakeJournalEntriesHeader() {
   const total = Math.max(totalCredit, totalDebit);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <MakeJournalEntriesHeaderFields />
-
-      <PageFormBigNumber
-        label={<T id={'amount'} />}
-        amount={total}
-        currencyCode={currency_code}
-      />
-    </div>
+    <PageFormBigNumber
+      label={<T id={'amount'} />}
+      amount={total}
+      currencyCode={currency_code}
+    />
   );
 }

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx

@@ -6,14 +6,14 @@ import {
   Position,
   ControlGroup,
 } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
+import * as R from 'ramda';
 import classNames from 'classnames';
 
 import { CLASSES } from '@/constants/classes';
 import {
   momentFormatter,
-  compose,
   inputIntent,
   handleDateChange,
   tansformDateValue,
@@ -25,54 +25,101 @@ import {
   Icon,
   InputPrependButton,
   CurrencySelectList,
-  FormattedMessage as T
+  FormattedMessage as T,
+  FInputGroup,
+  FFormGroup,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { JournalExchangeRateInputField } from './components';
+import { currenciesFieldShouldUpdate } from './utils';
+
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import {
-  currenciesFieldShouldUpdate,
-  useObserveJournalNoSettings,
-} from './utils';
+
+/**
+ * Journal number field of make journal form.
+ */
+const MakeJournalTransactionNoField = R.compose(
+  withDialogActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
+  })),
+)(
+  ({
+    // #withDialog
+    openDialog,
+
+    // #withSettings
+    journalAutoIncrement,
+  }) => {
+    const { setFieldValue, values } = useFormikContext();
+
+    const handleJournalNumberChange = () => {
+      openDialog('journal-number-form');
+    };
+    const handleJournalNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (values.journal_number !== newValue && journalAutoIncrement) {
+        openDialog('journal-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!journalAutoIncrement) {
+        setFieldValue('journal_number', newValue);
+        setFieldValue('journal_number_manually', newValue);
+      }
+    };
+
+    return (
+      <FFormGroup
+        name={'journal_number'}
+        label={<T id={'journal_no'} />}
+        labelInfo={
+          <>
+            <FieldRequiredHint />
+            <FieldHint />
+          </>
+        }
+        fill={true}
+        inline={true}
+        fastField={true}
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'journal_number'}
+            fill={true}
+            asyncControl={true}
+            onBlur={handleJournalNoBlur}
+            fastField={true}
+            onChange={() => {}}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleJournalNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: <T id={'setting_your_auto_generated_journal_number'} />,
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);
+
 /**
  * Make journal entries header.
  */
-function MakeJournalEntriesHeader({
-  // #ownProps
-  onJournalNumberChanged,
-
-  // #withDialog
-  openDialog,
-
-  // #withSettings
-  journalAutoIncrement,
-  journalNextNumber,
-  journalNumberPrefix,
-}) {
+export default function MakeJournalEntriesHeader({}) {
   const { currencies } = useMakeJournalFormContext();
 
-  // Handle journal number change.
-  const handleJournalNumberChange = () => {
-    openDialog('journal-number-form');
-  };
-
-  // Handle journal number blur.
-  const handleJournalNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && journalAutoIncrement) {
-      openDialog('journal-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  useObserveJournalNoSettings(journalNumberPrefix, journalNextNumber);
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/*------------ Posting date -----------*/}
@@ -106,46 +153,7 @@ function MakeJournalEntriesHeader({
       </FastField>
 
       {/*------------ Journal number -----------*/}
-      <FastField name={'journal_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'journal_no'} />}
-            labelInfo={
-              <>
-                <FieldRequiredHint />
-                <FieldHint />
-              </>
-            }
-            className={'form-group--journal-number'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="journal_number" />}
-            fill={true}
-            inline={true}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                fill={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleJournalNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleJournalNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T id={'setting_your_auto_generated_journal_number'} />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+      <MakeJournalTransactionNoField />
 
       {/*------------ Reference -----------*/}
       <FastField name={'reference'}>
@@ -219,12 +227,3 @@ function MakeJournalEntriesHeader({
     </div>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ manualJournalsSettings }) => ({
-    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
-    journalNextNumber: manualJournalsSettings?.nextNumber,
-    journalNumberPrefix: manualJournalsSettings?.numberPrefix,
-  })),
-)(MakeJournalEntriesHeader);

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx

@@ -10,17 +10,21 @@ export default function MakeJournalFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the journal number form submit confirm.
-  const handleConfirm = ({ manually, incrementNumber }) => {
-    setFieldValue('journal_number', incrementNumber || '');
-    setFieldValue('journal_number_manually', manually);
+  const handleConfirm = (settings) => {
+    // Set the invoice transaction no. that cames from dialog to the form.
+    // the `journal_number` will be empty except the increment mode is not auto.
+    setFieldValue('journal_number', settings.transactionNumber);
+    setFieldValue('journal_number_manually', '');
+
+    if (settings.incrementMode !== 'auto') {
+      setFieldValue('journal_number_manually', settings.transactionNumber);
+    }
   };
 
   return (
-    <>
-      <JournalNumberDialog
-        dialogName={'journal-number-form'}
-        onConfirm={handleConfirm}
-      />
-    </>
+    <JournalNumberDialog
+      dialogName={'journal-number-form'}
+      onConfirm={handleConfirm}
+    />
   );
 }

packages/webapp/src/containers/Accounting/MakeJournal/components.tsx

@@ -1,9 +1,10 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import intl from 'react-intl-universal';
 import { Menu, MenuItem, Position, Button } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
 import { useFormikContext } from 'formik';
+import * as R from 'ramda';
 
 import {
   ExchangeRateInputGroup,
@@ -24,6 +25,9 @@ import { CellType, Features, Align } from '@/constants';
 
 import { useCurrentOrganization, useFeatureCan } from '@/hooks/state';
 import { useJournalIsForeign } from './utils';
+import withSettings from '@/containers/Settings/withSettings';
+import { transactionNumber } from '@/utils';
+import { useUpdateEffect } from '@/hooks';
 
 /**
  * Contact header cell.
@@ -199,3 +203,37 @@ export function JournalExchangeRateInputField({ ...props }) {
     />
   );
 }
+
+/**
+ * Syncs journal auto-increment settings to form.
+ * @return {React.ReactNode}
+ */
+export const JournalSyncIncrementSettingsToForm = R.compose(
+  withSettings(({ manualJournalsSettings }) => ({
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
+    journalNextNumber: manualJournalsSettings?.nextNumber,
+    journalNumberPrefix: manualJournalsSettings?.numberPrefix,
+  })),
+)(({ journalAutoIncrement, journalNextNumber, journalNumberPrefix }) => {
+  const { setFieldValue } = useFormikContext();
+
+  useUpdateEffect(() => {
+    // Do not update if the journal auto-increment mode is disabled.
+    if (!journalAutoIncrement) return null;
+
+    setFieldValue(
+      'journal_number',
+      transactionNumber(journalNumberPrefix, journalNextNumber),
+    );
+  }, [
+    setFieldValue,
+    journalNumberPrefix,
+    journalNextNumber,
+    journalAutoIncrement,
+  ]);
+
+  return null;
+});
+
+JournalSyncIncrementSettingsToForm.displayName =
+  'JournalSyncIncrementSettingsToForm';

packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx

@@ -6,7 +6,6 @@ import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
 import {
-  transactionNumber,
   updateTableCell,
   repeatValue,
   transformToForm,
@@ -29,6 +28,8 @@ const ERROR = {
   CREDIT_DEBIT_SUMATION_SHOULD_NOT_EQUAL_ZERO:
     'CREDIT.DEBIT.SUMATION.SHOULD.NOT.EQUAL.ZERO',
   ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
+  COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS:
+    'COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS',
 };
 
 export const MIN_LINES_NUMBER = 1;
@@ -46,7 +47,7 @@ export const defaultEntry = {
 
 export const defaultManualJournal = {
   journal_number: '',
-  journal_number_manually: false,
+  journal_number_manually: '',
   journal_type: 'Journal',
   date: moment(new Date()).format('YYYY-MM-DD'),
   description: '',
@@ -162,6 +163,15 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
       intl.get('journal_number_is_already_used'),
     );
   }
+  if (
+    (error = getError(ERROR.COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS))
+  ) {
+    toastMessages.push(
+      intl.get(
+        'make_journal.errors.should_add_accounts_in_same_currency_or_base_currency',
+      ),
+    );
+  }
   setErrors({ ...newErrors });
 
   if (toastMessages.length > 0) {
@@ -174,15 +184,6 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
   }
 };
 
-export const useObserveJournalNoSettings = (prefix, nextNumber) => {
-  const { setFieldValue } = useFormikContext();
-
-  React.useEffect(() => {
-    const journalNo = transactionNumber(prefix, nextNumber);
-    setFieldValue('journal_number', journalNo);
-  }, [setFieldValue, prefix, nextNumber]);
-};
-
 /**
  * Detarmines entries fast field should update.
  */

packages/webapp/src/containers/Accounting/ManualJournalUniversalSearch.tsx

@@ -3,6 +3,7 @@ import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { AbilitySubject, ManualJournalAction } from '@/constants/abilityOption';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Universal search manual journal item select action.
@@ -17,7 +18,7 @@ function JournalUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.MANUAL_JOURNAL) {
-    openDrawer('journal-drawer', { manualJournalId: resourceId });
+    openDrawer(DRAWERS.JOURNAL_DETAILS, { manualJournalId: resourceId });
     onAction && onAction();
   }
   return null;

packages/webapp/src/containers/Accounts/AccountUniversalSearch.tsx

@@ -5,6 +5,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { AbilitySubject, AccountAction } from '@/constants/abilityOption';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { DRAWERS } from '@/constants/drawers';
 
 function AccountUniversalSearchItemSelectComponent({
   // #ownProps
@@ -16,7 +17,7 @@ function AccountUniversalSearchItemSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.ACCOUNT) {
-    openDrawer('account-drawer', { accountId: resourceId });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: resourceId });
     onAction && onAction();
   }
   return null;
@@ -28,8 +29,8 @@ export const AccountUniversalSearchItemSelect = withDrawerActions(
 
 /**
  * Transformes account item to search item.
- * @param {*} account 
- * @returns 
+ * @param {*} account
+ * @returns
  */
 const accountToSearch = (account) => ({
   id: account.id,

packages/webapp/src/containers/Accounts/AccountsDataTable.tsx

@@ -23,6 +23,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Accounts data-table.
@@ -71,7 +72,7 @@ function AccountsDataTable({
 
   // Handle view detail account.
   const handleViewDetailAccount = ({ id }) => {
-    openDrawer('account-drawer', { accountId: id });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: id });
   };
 
   // Handle new child button click.
@@ -84,7 +85,7 @@ function AccountsDataTable({
   };
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('account-drawer', { accountId: cell.row.original.id });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: cell.row.original.id });
   };
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =

packages/webapp/src/containers/Alerts/Accounts/AccountDeleteAlert.tsx

@@ -16,6 +16,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { useDeleteAccount } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Account delete alerts.
@@ -48,7 +49,7 @@ function AccountDeleteAlert({
           intent: Intent.SUCCESS,
         });
         closeAlert(name);
-        closeDrawer('account-drawer');
+        closeDrawer(DRAWERS.ACCOUNT_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/Bills/BillDeleteAlert.tsx

@@ -11,6 +11,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { handleDeleteErrors } from '@/containers/Purchases/Bills/BillForm/utils';
 import { useDeleteBill } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Bill delete alert.
@@ -43,8 +44,7 @@ function BillDeleteAlert({
           message: intl.get('the_bill_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-
-        closeDrawer('bill-drawer');
+        closeDrawer(DRAWERS.BILL_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.tsx

@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Account delete transaction alert.
@@ -48,7 +49,7 @@ function AccountDeleteTransactionAlert({
           message: intl.get('cash_flow_transaction.delete.alert_message'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('cashflow-transaction-drawer');
+        closeDrawer(DRAWERS.CASHFLOW_TRNASACTION_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.tsx

@@ -15,6 +15,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useDeleteCreditNote } from '@/hooks/query';
 import { handleDeleteErrors } from '@/containers/Sales/CreditNotes/CreditNotesLanding/utils';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Credit note delete alert.
@@ -46,7 +47,7 @@ function CreditNoteDeleteAlert({
           message: intl.get('credit_note.alert.delete_message'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('credit-note-detail-drawer');
+        closeDrawer(DRAWERS.CREDIT_NOTE_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.tsx

@@ -11,6 +11,7 @@ import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Refund credit transactions delete alert
@@ -42,7 +43,7 @@ function RefundCreditNoteDeleteAlert({
           message: intl.get('refund_credit_transactions.alert.delete_message'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('refund-credit-detail-drawer');
+        closeDrawer(DRAWERS.REFUND_CREDIT_NOTE_DETAILS);
       })
       .catch(() => {})
       .finally(() => {

packages/webapp/src/containers/Alerts/Customers/CustomerDeleteAlert.tsx

@@ -15,6 +15,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { useDeleteCustomer } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Customer delete alert.
@@ -47,7 +48,7 @@ function CustomerDeleteAlert({
           message: intl.get('the_customer_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('customer-detail-drawer');
+        closeDrawer(DRAWERS.CUSTOMER_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/Estimates/EstimateDeleteAlert.tsx

@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Estimate delete alert.
@@ -47,7 +48,7 @@ function EstimateDeleteAlert({
           message: intl.get('the_estimate_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('estimate-detail-drawer');
+        closeDrawer(DRAWERS.ESTIMATE_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/Expenses/ExpenseDeleteAlert.tsx

@@ -10,6 +10,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { useDeleteExpense } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Expense delete alert.
@@ -42,7 +43,7 @@ function ExpenseDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('expense-drawer');
+        closeDrawer(DRAWERS.EXPENSE_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/Invoices/InvoiceDeleteAlert.tsx

@@ -16,6 +16,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Invoice delete alert.
@@ -48,7 +49,7 @@ function InvoiceDeleteAlert({
           message: intl.get('the_invoice_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('invoice-detail-drawer');
+        closeDrawer(DRAWERS.INVOICE_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.tsx

@@ -14,6 +14,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useDeleteInventoryAdjustment } from '@/hooks/query';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Inventory Adjustment delete alerts.
@@ -49,7 +50,7 @@ function InventoryAdjustmentDeleteAlert({
           ),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('inventory-adjustment-drawer');
+        closeDrawer(DRAWERS.INVENTORY_ADJUSTMENT_DETAILS);
       })
       .catch((errors) => {})
       .finally(() => {

packages/webapp/src/containers/Alerts/Items/ItemDeleteAlert.tsx

@@ -17,6 +17,7 @@ import withItemsActions from '@/containers/Items/withItemsActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Item delete alerts.
@@ -54,7 +55,7 @@ function ItemDeleteAlert({
         });
         // Reset to page number one.
         setItemsTableState({ page: 1 });
-        closeDrawer('item-detail-drawer');
+        closeDrawer(DRAWERS.ITEM_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/ManualJournals/JournalDeleteAlert.tsx

@@ -10,6 +10,7 @@ import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Journal delete alert.
@@ -45,7 +46,7 @@ function JournalDeleteAlert({
           intent: Intent.SUCCESS,
         });
         closeAlert(name);
-        closeDrawer('journal-drawer');
+        closeDrawer(DRAWERS.JOURNAL_DETAILS);
       })
       .catch(() => {
         closeAlert(name);

packages/webapp/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.tsx

@@ -11,6 +11,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useDeletePaymentMade } from '@/hooks/query';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Payment made delete alert.
@@ -44,7 +45,7 @@ function PaymentMadeDeleteAlert({
           message: intl.get('the_payment_made_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('payment-made-detail-drawer');
+        closeDrawer(DRAWERS.PAYMENT_MADE_DETAILS);
       })
       .finally(() => {
         closeAlert(name);

packages/webapp/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.tsx

@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Payment receive delete alert.
@@ -50,7 +51,7 @@ function PaymentReceiveDeleteAlert({
           ),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('payment-receive-detail-drawer');
+        closeDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS);
       })
       .catch(() => {})
       .finally(() => {

packages/webapp/src/containers/Alerts/Receipts/ReceiptDeleteAlert.tsx

@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Invoice  alert.
@@ -47,7 +48,7 @@ function NameDeleteAlert({
           message: intl.get('the_receipt_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('receipt-detail-drawer');
+        closeDrawer(DRAWERS.RECEIPT_DETAILS);
       })
       .catch(() => {})
       .finally(() => {

packages/webapp/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.tsx

@@ -10,6 +10,7 @@ import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Refund Vendor transactions delete alert.
@@ -43,7 +44,7 @@ function RefundVendorCreditDeleteAlert({
           ),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('refund-vendor-detail-drawer');
+        closeDrawer(DRAWERS.REFUND_VENDOR_CREDIT_DETAILS);
       })
       .catch(() => {})
       .finally(() => {

packages/webapp/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.tsx

@@ -14,6 +14,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { handleDeleteErrors } from '@/containers/Purchases/CreditNotes/CreditNotesLanding/utils';
 import { useDeleteVendorCredit } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Vendor Credit delete alert.
@@ -45,7 +46,7 @@ function VendorCreditDeleteAlert({
           message: intl.get('vendor_credits.alert.delete_message'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('vendor-credit-detail-drawer');
+        closeDrawer(DRAWERS.VENDOR_CREDIT_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/Vendors/VendorDeleteAlert.tsx

@@ -16,6 +16,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Vendor delete alert.
@@ -48,7 +49,7 @@ function VendorDeleteAlert({
           message: intl.get('the_vendor_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('vendor-detail-drawer');
+        closeDrawer(DRAWERS.VENDOR_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/Alerts/WarehousesTransfer/WarehouseTransferDeleteAlert.tsx

@@ -14,6 +14,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Warehouse transfer delete alert
@@ -48,7 +49,7 @@ function WarehouseTransferDeleteAlert({
           message: intl.get('warehouse_transfer.alert.delete_message'),
           intent: Intent.SUCCESS,
         });
-        closeDrawer('warehouse-transfer-detail-drawer');
+        closeDrawer(DRAWERS.WAREHOUSE_TRANSFER_DETAILS);
       })
       .catch(
         ({

packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx

@@ -9,6 +9,7 @@ import {
 
 import { Select } from '@blueprintjs/select';
 import { Icon } from '@/components';
+import { DRAWERS } from '@/constants/drawers';
 
 export const CashFlowMenuItems = ({
   text,
@@ -53,40 +54,40 @@ export const CashFlowMenuItems = ({
 export const handleCashFlowTransactionType = (reference, openDrawer) => {
   switch (reference.reference_type) {
     case 'SaleReceipt':
-      return openDrawer('receipt-detail-drawer', {
+      return openDrawer(DRAWERS.RECEIPT_DETAILS, {
         receiptId: reference.reference_id,
       });
     case 'Journal':
-      return openDrawer('journal-drawer', {
+      return openDrawer(DRAWERS.JOURNAL_DETAILS, {
         manualJournalId: reference.reference_id,
       });
     case 'Expense':
-      return openDrawer('expense-drawer', {
+      return openDrawer(DRAWERS.EXPENSE_DETAILS, {
         expenseId: reference.reference_id,
       });
     case 'PaymentReceive':
-      return openDrawer('payment-receive-detail-drawer', {
+      return openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, {
         paymentReceiveId: reference.reference_id,
       });
     case 'BillPayment':
-      return openDrawer('payment-made-detail-drawer', {
+      return openDrawer(DRAWERS.PAYMENT_MADE_DETAILS, {
         paymentMadeId: reference.reference_id,
       });
     case 'RefundCreditNote':
-      return openDrawer('refund-credit-detail-drawer', {
+      return openDrawer(DRAWERS.REFUND_CREDIT_NOTE_DETAILS, {
         refundTransactionId: reference.reference_id,
       });
     case 'RefundVendorCredit':
-      return openDrawer('refund-vendor-detail-drawer', {
+      return openDrawer(DRAWERS.REFUND_VENDOR_CREDIT_DETAILS, {
         refundTransactionId: reference.reference_id,
       });
     case 'InventoryAdjustment':
-      return openDrawer('inventory-adjustment-drawer', {
+      return openDrawer(DRAWERS.INVENTORY_ADJUSTMENT_DETAILS, {
         inventoryId: reference.reference_id,
       });
 
     default:
-      return openDrawer('cashflow-transaction-drawer', {
+      return openDrawer(DRAWERS.CASHFLOW_TRNASACTION_DETAILS, {
         referenceId: reference.reference_id,
       });
   }

packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx

@@ -28,6 +28,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { AccountDialogAction } from '@/containers/Dialogs/AccountDialog/utils';
 import { safeCallback } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 const CASHFLOW_SKELETON_N = 4;
 
@@ -63,7 +64,7 @@ function CashflowBankAccount({
 }) {
   // Handle view detail account.
   const handleViewClick = () => {
-    openDrawer('account-drawer', { accountId: account.id });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: account.id });
   };
   // Handle delete action account.
   const handleDeleteClick = () => {

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx

@@ -1,9 +1,15 @@
 // @ts-nocheck
 import React from 'react';
+
 import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields';
 import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields';
 import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields';
 
+/**
+ *
+ * @param param0
+ * @returns
+ */
 export default function MoneyInContentFields({ accountType }) {
   const handleTransactionType = () => {
     switch (accountType) {
@@ -19,6 +25,5 @@ export default function MoneyInContentFields({ accountType }) {
         break;
     }
   };
-
   return <React.Fragment>{handleTransactionType()}</React.Fragment>;
 }

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFloatingActions.tsx

@@ -27,13 +27,10 @@ function MoneyInFloatingActions({
     setSubmitPayload({ publish: false });
     submitForm();
   };
-
   // Handle submit  button click.
   const handleSubmittBtnClick = (event) => {
     setSubmitPayload({ publish: true });
-    submitForm();
   };
-
   // Handle close button click.
   const handleCloseBtnClick = (event) => {
     closeDialog(dialogName);

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormContent.tsx

@@ -5,6 +5,7 @@ import { Form } from 'formik';
 import MoneyInFormFields from './MoneyInFormFields';
 import MoneyInFormDialog from './MoneyInFormDialog';
 import MoneyInFloatingActions from './MoneyInFloatingActions';
+import { MoneyInOutSyncIncrementSettingsToForm } from '../_components';
 
 /**
  * Money In form content.
@@ -15,6 +16,7 @@ export default function MoneyInFormContent() {
       <MoneyInFormFields />
       <MoneyInFormDialog />
       <MoneyInFloatingActions />
+      <MoneyInOutSyncIncrementSettingsToForm />
     </Form>
   );
 }

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormDialog.tsx

@@ -11,12 +11,9 @@ export default function MoneyInFormDialog() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the transaction number form submit confirm.
-  const handleTransactionNumberFormConfirm = ({
-    incrementNumber,
-    manually,
-  }) => {
-    setFieldValue('transaction_number', incrementNumber || '');
-    setFieldValue('transaction_number_manually', manually);
+  const handleTransactionNumberFormConfirm = (settings) => {
+    setFieldValue('transaction_number', settings.transactionNumber);
+    setFieldValue('transaction_number_manually', settings.transactionNumber);
   };
   return (
     <React.Fragment>

packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx

@@ -16,14 +16,12 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
   If,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  InputPrependButton,
   ExchangeRateMutedField,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
@@ -35,65 +33,26 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../utils';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { MoneyInOutTransactionNoField } from '../../_components';
 
 /**
  * Other income form fields.
  */
-function OtherIncomeFormFields({
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
+export default function OtherIncomeFormFields() {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyInDailogContext();
-
   const { values } = useFormikContext();
-
   const amountFieldRef = useAutofocus();
-
   const isForeigAccount = useForeignAccount();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
@@ -149,42 +108,7 @@ function OtherIncomeFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
+          <MoneyInOutTransactionNoField />
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -298,12 +222,3 @@ function OtherIncomeFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(OtherIncomeFormFields);

packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx

@@ -17,11 +17,9 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
   If,
-  InputPrependButton,
   ExchangeRateMutedField,
   BranchSelect,
   BranchSelectButton,
@@ -35,31 +33,20 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyInDialog/utils';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { MoneyInOutTransactionNoField } from '../../_components';
 
 /**
 /**
  * Owner contribution form fields.
  */
-function OwnerContributionFormFields({
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
+export default function OwnerContributionFormFields() {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyInDailogContext();
 
@@ -69,31 +56,6 @@ function OwnerContributionFormFields({
 
   const isForeigAccount = useForeignAccount();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
@@ -148,42 +110,7 @@ function OwnerContributionFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
+          <MoneyInOutTransactionNoField />
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -294,12 +221,3 @@ function OwnerContributionFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(OwnerContributionFormFields);

packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx

@@ -17,11 +17,9 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
   If,
-  InputPrependButton,
   ExchangeRateMutedField,
   FeatureCan,
   BranchSelect,
@@ -35,30 +33,20 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyInDialog/utils';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { MoneyInOutTransactionNoField } from '../../_components';
 
 /**
  * Transfer from account form fields.
  */
-function TransferFromAccountFormFields({
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
+export default function TransferFromAccountFormFields() {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyInDailogContext();
 
@@ -67,33 +55,9 @@ function TransferFromAccountFormFields({
 
   const { values } = useFormikContext();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
   return (
     <React.Fragment>
       <FeatureCan feature={Features.Branches}>
@@ -145,42 +109,7 @@ function TransferFromAccountFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
+          <MoneyInOutTransactionNoField />
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -296,12 +225,3 @@ function TransferFromAccountFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(TransferFromAccountFormFields);

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutContentFields.tsx

@@ -20,7 +20,6 @@ function MoneyOutContentFields({ accountType }) {
         break;
     }
   };
-
   return <React.Fragment>{handleTransactionType()}</React.Fragment>;
 }
 

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFloatingActions.tsx

@@ -32,7 +32,6 @@ function MoneyOutFloatingActions({
   // Handle submit  button click.
   const handleSubmittBtnClick = (event) => {
     setSubmitPayload({ publish: true });
-    submitForm();
   };
 
   // Handle close button click.

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormContent.tsx

@@ -3,8 +3,10 @@ import React from 'react';
 import { Form } from 'formik';
 
 import MoneyOutFormFields from './MoneyOutFormFields';
-import MoneyOutFormDialog from './MoneyOutFormDialog'
+import MoneyOutFormDialog from './MoneyOutFormDialog';
 import MoneyOutFloatingActions from './MoneyOutFloatingActions';
+import { MoneyInOutSyncIncrementSettingsToForm } from '../_components';
+
 /**
  * Money out form content.
  */
@@ -12,8 +14,9 @@ export default function MoneyOutFormContent() {
   return (
     <Form>
       <MoneyOutFormFields />
-      <MoneyOutFormDialog/>
+      <MoneyOutFormDialog />
       <MoneyOutFloatingActions />
+      <MoneyInOutSyncIncrementSettingsToForm />
     </Form>
   );
 }