fix(webapp): show loading message of cost computing job on financial reports

docs: add scheibling as a contributor for bug

.all-contributorsrc

@@ -0,0 +1,53 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitType": "docs",
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "abouolia",
+      "name": "Ahmed Bouhuolia",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2197422?v=4",
+      "profile": "https://github.com/abouolia",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "ameir",
+      "name": "Ameir Abdeldayem",
+      "avatar_url": "https://avatars.githubusercontent.com/u/374330?v=4",
+      "profile": "http://ameir.net",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "elforjani13",
+      "name": "ElforJani13",
+      "avatar_url": "https://avatars.githubusercontent.com/u/39470382?v=4",
+      "profile": "https://github.com/elforjani13",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "scheibling",
+      "name": "Lars Scheibling",
+      "avatar_url": "https://avatars.githubusercontent.com/u/24367830?v=4",
+      "profile": "https://scheibling.se",
+      "contributions": [
+        "bug"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "projectName": "bigcapital",
+  "projectOwner": "bigcapitalhq"
+}

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+# [0.9.9] - 28-06-2023
+
+* refactor: Customer and vendor select component by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/171
+* chore: Move auto-increment components in separate files by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/170
+* fix: Style of quick item drawer by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/173
+* fix: Should not show the form before loading account by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/172
+* fix: Payment made form does not handle not unique number an e… by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/177
+* fix: Internal note of invoice/bill payment does not saving by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/181
+* fix: Storing cash flow transaction description by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/180
+* fix: No currency in amount field on money in/out dialogs by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/179
+* fix: No default branch for customer/vendor opening balance branch by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/182
+
 # [0.9.8] - 19-06-2023
 
 `bigcapitalhq/webapp`

README.md

@@ -47,3 +47,38 @@ Bigcapital is a smart and open-source accounting and inventory software, Bigcapi
 # Changelog
 
 Please see [Releases](https://github.com/bigcapitalhq/bigcapital/releases) for more information what has changed recently.
+
+# Recognition
+
+<a href="https://news.ycombinator.com/item?id=36118990">
+  <img
+    style="width: 250px; height: 54px;" width="250" height="54"
+    alt="Featured on Hacker News"
+    src="https://hackernews-badge.vercel.app/api?id=36118990"
+  />
+</a>
+
+# Contributors
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/abouolia"><img src="https://avatars.githubusercontent.com/u/2197422?v=4?s=100" width="100px;" alt="Ahmed Bouhuolia"/><br /><sub><b>Ahmed Bouhuolia</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/commits?author=abouolia" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/elforjani13"><img src="https://avatars.githubusercontent.com/u/39470382?v=4?s=100" width="100px;" alt="ElforJani13"/><br /><sub><b>ElforJani13</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/commits?author=elforjani13" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://ameir.net"><img src="https://avatars.githubusercontent.com/u/374330?v=4?s=100" width="100px;" alt="Ameir Abdeldayem"/><br /><sub><b>Ameir Abdeldayem</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Aameir" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://scheibling.se"><img src="https://avatars.githubusercontent.com/u/24367830?v=4?s=100" width="100px;" alt="Lars Scheibling"/><br /><sub><b>Lars Scheibling</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Ascheibling" title="Bug reports">🐛</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

e2e/_utils.ts

@@ -0,0 +1,13 @@
+import { Page } from '@playwright/test';
+
+export const clearLocalStorage = (page: Page) => {
+  return page.evaluate(`window.localStorage.clear()`);
+};
+
+export const defaultPageConfig = () => {
+  return {
+    extraHTTPHeaders: {
+      'ngrok-skip-browser-warning': 'any-value',
+    },
+  };
+};

e2e/authentication.spec.ts

@@ -1,14 +1,23 @@
 import { test, expect, Page } from '@playwright/test';
+import { faker } from '@faker-js/faker';
+import { clearLocalStorage, defaultPageConfig } from './_utils';
 
 let authPage: Page;
 
 test.describe('authentication', () => {
   test.beforeAll(async ({ browser }) => {
-    authPage = await browser.newPage();
+    authPage = await browser.newPage({ ...defaultPageConfig() });
+  });
+  test.afterAll(async () => {
+    await authPage.close();
+  });
+  test.afterEach(async ({ context }) => {
+    context.clearCookies();
+    await clearLocalStorage(authPage);
   });
 
   test.describe('login', () => {
-    test.beforeAll(async () => {
+    test.beforeEach(async () => {
       await authPage.goto('/auth/login');
     });
     test('should show the login page.', async () => {
@@ -30,10 +39,23 @@ test.describe('authentication', () => {
       await authPage.getByRole('link', { name: 'Sign up' }).click();
       await expect(authPage.url()).toContain('/auth/register');
     });
+    test('should the email or password is not correct.', async () => {
+      await authPage.getByLabel('Email Address').click();
+      await authPage.getByLabel('Email Address').fill(faker.internet.email());
+
+      await authPage.getByLabel('Password').click();
+      await authPage.getByLabel('Password').fill(faker.internet.password());
+
+      await authPage.getByRole('button', { name: 'Log in' }).click();
+
+      await expect(authPage.locator('body')).toContainText(
+        'The email and password you entered did not match our records.'
+      );
+    });
   });
 
   test.describe('register', () => {
-    test.beforeAll(async () => {
+    test.beforeEach(async () => {
       await authPage.goto('/auth/register');
     });
     test('should first name, last name, email and password be required.', async () => {
@@ -52,10 +74,36 @@ test.describe('authentication', () => {
         'Password is a required field'
       );
     });
+    test('should signup successfully.', async () => {
+      const form = authPage.locator('form');
+      await form.getByLabel('First Name').click();
+      await form.getByLabel('First Name').fill(faker.person.firstName());
+
+      await form.getByLabel('Email').click();
+      await form.getByLabel('Email').fill(faker.internet.email());
+
+      await form.getByLabel('Last Name').click();
+      await form.getByLabel('Last Name').fill(faker.person.lastName());
+
+      await form.getByLabel('Password').click();
+      await form.getByLabel('Password').fill(faker.internet.password());
+
+      await authPage.getByRole('button', { name: 'Register' }).click();
+
+      await expect(authPage.locator('h1')).toContainText(
+        'Register a New Organization now!'
+      );
+    });
   });
 
   test.describe('reset password', () => {
-    test.beforeAll(async () => {
+    test.beforeAll(async ({ browser }) => {
+      authPage = await browser.newPage({ ...defaultPageConfig() });
+    });
+    test.afterAll(async () => {
+      await authPage.close();
+    });
+    test.beforeEach(async () => {
       await authPage.goto('/auth/send_reset_password');
     });
     test('should email be required.', async () => {

e2e/onboarding.spec.ts

@@ -0,0 +1,86 @@
+import { test, expect, Page } from '@playwright/test';
+import { faker } from '@faker-js/faker';
+import { defaultPageConfig } from './_utils';
+
+let authPage: Page;
+let businessLegalName: string = faker.company.name();
+
+test.describe('onboarding', () => {
+  test.beforeAll(async ({ browser }) => {
+    authPage = await browser.newPage({ ...defaultPageConfig() });
+    await authPage.goto('/auth/register');
+
+    const form = authPage.locator('form');
+
+    await form.getByLabel('First Name').fill(faker.person.firstName());
+    await form.getByLabel('Email').fill(faker.internet.email());
+    await form.getByLabel('Last Name').fill(faker.person.lastName());
+    await form.getByLabel('Password').fill(faker.internet.password());
+
+    await authPage.getByRole('button', { name: 'Register' }).click();
+  });
+  test('should validation catch all required fields', async () => {
+    const form = authPage.locator('form');
+
+    await authPage.getByRole('button', { name: 'Save & Continue' }).click();
+
+    await expect(form).toContainText('Organization name is a required field');
+    await expect(form).toContainText('Location is a required field');
+    await expect(form).toContainText('Base currency is a required field');
+    await expect(form).toContainText('Fiscal year is a required field');
+    await expect(form).toContainText('Time zone is a required field');
+  });
+  test.describe('after onboarding', () => {
+    test.beforeAll(async () => {
+      await authPage.getByLabel('Legal Organization Name').click();
+      await authPage
+        .getByLabel('Legal Organization Name')
+        .fill(businessLegalName);
+
+      // Fill Business Location.
+      await authPage
+        .getByRole('button', { name: 'Select Business Location...' })
+        .click();
+      await authPage.locator('a').filter({ hasText: 'Albania' }).click();
+
+      // Fill Base Currency.
+      await authPage
+        .getByRole('button', { name: 'Select Base Currency...' })
+        .click();
+      await authPage
+        .locator('a')
+        .filter({ hasText: 'AED - United Arab Emirates Dirham' })
+        .click();
+
+      // Fill Fasical Year.
+      await authPage
+        .getByRole('button', { name: 'Select Fiscal Year...' })
+        .click();
+      await authPage.locator('a').filter({ hasText: 'June - May' }).click();
+
+      // Fill Timezone.
+      await authPage
+        .getByRole('button', { name: 'Select Time Zone...' })
+        .click();
+      await authPage.getByText('Pacific/Marquesas-09:30').click();
+
+      // Click on Submit button
+      await authPage.getByRole('button', { name: 'Save & Continue' }).click();
+    });
+    test('should onboarding process success', async () => {
+      await expect(authPage.locator('body')).toContainText(
+        'Congrats! You are ready to go',
+        {
+          timeout: 30000,
+        }
+      );
+    });
+    test('should go to the dashboard after clicking on "Go to dashboard" button.', async () => {
+      await authPage.getByRole('button', { name: 'Go to dashboard' }).click();
+
+      await expect(
+        authPage.locator('[data-testId="dashboard-topbar"] h1')
+      ).toContainText(businessLegalName);
+    });
+  });
+});

package-lock.json

@@ -333,6 +333,12 @@
         "@jridgewell/trace-mapping": "0.3.9"
       }
     },
+    "@faker-js/faker": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.0.2.tgz",
+      "integrity": "sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==",
+      "dev": true
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -945,6 +951,7 @@
       "version": "1.32.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
       "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
@@ -954,7 +961,8 @@
         "playwright-core": {
           "version": "1.32.3",
           "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
-          "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg=="
+          "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==",
+          "dev": true
         }
       }
     },
@@ -1003,7 +1011,8 @@
     "@types/node": {
       "version": "18.14.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.6.tgz",
-      "integrity": "sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA=="
+      "integrity": "sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==",
+      "dev": true
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2324,6 +2333,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "optional": true
     },
     "function-bind": {

package.json

@@ -18,12 +18,13 @@
     "shared/*"
   ],
   "devDependencies": {
+    "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@commitlint/config-lerna-scopes": "^17.4.2",
+    "@faker-js/faker": "^8.0.2",
+    "@playwright/test": "^1.32.3",
     "husky": "^8.0.3",
-    "lerna": "^6.4.1",
-    "@commitlint/cli": "^17.4.2",
-    "@playwright/test": "^1.32.3"
+    "lerna": "^6.4.1"
   },
   "engines": {
     "node": "14.x"

packages/server/src/interfaces/Ledger.ts

@@ -41,6 +41,8 @@ export interface ILedgerEntry {
   index: number;
   indexGroup?: number;
 
+  note?: string;
+
   userId?: number;
   itemId?: number;
   branchId?: number;

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

@@ -21,6 +21,8 @@ export const transformLedgerEntryToTransaction = (
     transactionNumber: entry.transactionNumber,
     referenceNumber: entry.referenceNumber,
 
+    note: entry.note,
+
     index: entry.index,
     indexGroup: entry.indexGroup,
 

packages/server/src/services/Cashflow/CashflowTransactionJournalEntries.ts

@@ -25,8 +25,8 @@ export default class CashflowTransactionJournalEntries {
 
   /**
    * Retrieves the common entry of cashflow transaction.
-   * @param   {ICashflowTransaction} cashflowTransaction
-   * @returns {}
+   * @param {ICashflowTransaction} cashflowTransaction
+   * @returns {Partial<ILedgerEntry>}
    */
   private getCommonEntry = (cashflowTransaction: ICashflowTransaction) => {
     const { entries, ...transaction } = cashflowTransaction;
@@ -41,7 +41,9 @@ export default class CashflowTransactionJournalEntries {
       ),
       transactionId: transaction.id,
       transactionNumber: transaction.transactionNumber,
-      referenceNo: transaction.referenceNo,
+      referenceNumber: transaction.referenceNo,
+
+      note: transaction.description,
 
       branchId: cashflowTransaction.branchId,
       userId: cashflowTransaction.userId,
@@ -76,9 +78,9 @@ export default class CashflowTransactionJournalEntries {
 
   /**
    * Retrieves the cashflow credit GL entry.
-   * @param   {ICashflowTransaction} cashflowTransaction
-   * @param   {ICashflowTransactionLine} entry
-   * @param   {number} index
+   * @param {ICashflowTransaction} cashflowTransaction
+   * @param {ICashflowTransactionLine} entry
+   * @param {number} index
    * @returns {ILedgerEntry}
    */
   private getCashflowCreditGLEntry = (
@@ -102,10 +104,10 @@ export default class CashflowTransactionJournalEntries {
 
   /**
    * Retrieves the cashflow transaction GL entry.
-   * @param   {ICashflowTransaction} cashflowTransaction
-   * @param   {ICashflowTransactionLine} entry
-   * @param   {number} index
-   * @returns
+   * @param {ICashflowTransaction} cashflowTransaction
+   * @param {ICashflowTransactionLine} entry
+   * @param {number} index
+   * @returns {ILedgerEntry[]}
    */
   private getJournalEntries = (
     cashflowTransaction: ICashflowTransaction
@@ -118,7 +120,7 @@ export default class CashflowTransactionJournalEntries {
 
   /**
    * Retrieves the cashflow GL ledger.
-   * @param   {ICashflowTransaction} cashflowTransaction
+   * @param {ICashflowTransaction} cashflowTransaction
    * @returns {Ledger}
    */
   private getCashflowLedger = (cashflowTransaction: ICashflowTransaction) => {
@@ -130,6 +132,7 @@ export default class CashflowTransactionJournalEntries {
    * Write the journal entries of the given cashflow transaction.
    * @param {number} tenantId
    * @param {ICashflowTransaction} cashflowTransaction
+   * @return {Promise<void>}
    */
   public writeJournalEntries = async (
     tenantId: number,
@@ -153,6 +156,7 @@ export default class CashflowTransactionJournalEntries {
    * Delete the journal entries.
    * @param {number} tenantId - Tenant id.
    * @param {number} cashflowTransactionId - Cashflow transaction id.
+   * @return {Promise<void>}
    */
   public revertJournalEntries = async (
     tenantId: number,

packages/webapp/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcapital/webapp",
-  "version": "1.7.1",
+  "version": "0.9.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1205,9 +1205,9 @@
       }
     },
     "@blueprintjs-formik/core": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.3.tgz",
-      "integrity": "sha512-ko7g54YSEcSq2K/GEpmiTG0foGLqe7DwgXGhkGxYEiHhLAUv8WvQmrFsm8e/KOW7n8mLGq0uaZVe2l8m3JTGGQ==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-gksuBYXXvX7IhZXbPEFEAHgmJWp1vt/GTMW0GYBkCoGBAvXy08hIHjMc85M0WNyen+tic3NRas6I2wsjgokgqw==",
       "requires": {
         "lodash.get": "^4.4.2",
         "lodash.keyby": "^4.6.0",
@@ -1227,9 +1227,9 @@
       }
     },
     "@blueprintjs-formik/select": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.2.3.tgz",
-      "integrity": "sha512-j/zkX0B9wgtoHgK6Z/rlowB7F7zemrAajBU+d3caCoEYMMqwAI0XA++GytqrIhv5fEGjkZ1hkxS9j8eqX8vtjA==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.2.5.tgz",
+      "integrity": "sha512-Sztf5dOemedUBfEjnDWD8ryfMU/x95hyhIgJT5/ywC/jQfX+d/K2OhujklTrCDzQilUeAJLoVkSdV+w77n8ckQ==",
       "requires": {
         "lodash.get": "^4.4.2",
         "lodash.keyby": "^4.6.0",
@@ -17751,4 +17751,4 @@
       "integrity": "sha512-7UlRWU4Q3uCMCeDVMOm7eBrIu145OqsIJ3p6zq58l8UsSYwKWxc6zEapC5YA9tIeh0oheb4cT9Kk2Wq353loFg=="
     }
   }
-}
+}

packages/webapp/package.json

@@ -3,9 +3,9 @@
   "version": "0.9.6",
   "private": true,
   "dependencies": {
-    "@blueprintjs-formik/core": "^0.3.3",
+    "@blueprintjs-formik/core": "^0.3.4",
     "@blueprintjs-formik/datetime": "^0.3.4",
-    "@blueprintjs-formik/select": "^0.2.3",
+    "@blueprintjs-formik/select": "^0.2.5",
     "@blueprintjs/core": "^3.50.2",
     "@blueprintjs/datetime": "^3.23.12",
     "@blueprintjs/popover2": "^0.11.1",

packages/webapp/src/components/Branches/BranchSelect.tsx

@@ -5,59 +5,20 @@ import { MenuItem, Button } from '@blueprintjs/core';
 import { FSelect } from '../Forms';
 
 /**
- *
- * @param {*} query
- * @param {*} branch
- * @param {*} _index
- * @param {*} exactMatch
- * @returns
- */
-const branchItemPredicate = (query, branch, _index, exactMatch) => {
-  const normalizedTitle = branch.name.toLowerCase();
-  const normalizedQuery = query.toLowerCase();
-
-  if (exactMatch) {
-    return normalizedTitle === normalizedQuery;
-  } else {
-    return `${branch.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-  }
-};
-
-/**
- *
- * @param {*} film
- * @param {*} param1
- * @returns
- */
-const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
-  const text = `${branch.name}`;
-
-  return (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      label={branch.code}
-      key={branch.id}
-      onClick={handleClick}
-      text={text}
-    />
-  );
-};
-
-const branchSelectProps = {
-  itemPredicate: branchItemPredicate,
-  itemRenderer: branchItemRenderer,
-  valueAccessor: 'id',
-  labelAccessor: 'name',
-};
-
-/**
- *
+ * Branch select field.
  * @param {*} param0
- * @returns
+ * @returns {JSX.Element}
  */
 export function BranchSelect({ branches, ...rest }) {
-  return <FSelect {...branchSelectProps} {...rest} items={branches} />;
+  return (
+    <FSelect
+      valueAccessor={'id'}
+      textAccessor={'name'}
+      labelAccessor={'code'}
+      {...rest}
+      items={branches}
+    />
+  );
 }
 
 /**

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

@@ -1,119 +0,0 @@
-// @ts-nocheck
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { FormattedMessage as T } from '@/components';
-import intl from 'react-intl-universal';
-import * as R from 'ramda';
-
-import { MenuItem, Button } from '@blueprintjs/core';
-import { Select } from '@blueprintjs/select';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
-
-import {
-  itemPredicate,
-  handleContactRenderer,
-  createNewItemRenderer,
-  createNewItemFromQuery,
-} from './utils';
-
-import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-
-import { DRAWERS } from '@/constants/drawers';
-
-function CustomerSelectFieldRoot({
-  // #withDrawerActions
-  openDrawer,
-
-  // #ownProps
-  contacts,
-  initialContactId,
-  selectedContactId,
-  defaultSelectText = <T id={'select_contact'} />,
-  onContactSelected,
-  popoverFill = false,
-  disabled = false,
-  allowCreate,
-  buttonProps,
-
-  ...restProps
-}) {
-  const localContacts = useMemo(
-    () =>
-      contacts.map((contact) => ({
-        ...contact,
-        _id: `${contact.id}_${contact.contact_type}`,
-      })),
-    [contacts],
-  );
-
-  const initialContact = useMemo(
-    () => contacts.find((a) => a.id === initialContactId),
-    [initialContactId, contacts],
-  );
-
-  const [selecetedContact, setSelectedContact] = useState(
-    initialContact || null,
-  );
-
-  useEffect(() => {
-    if (typeof selectedContactId !== 'undefined') {
-      const account = selectedContactId
-        ? contacts.find((a) => a.id === selectedContactId)
-        : null;
-      setSelectedContact(account);
-    }
-  }, [selectedContactId, contacts, setSelectedContact]);
-
-  const handleContactSelect = useCallback(
-    (contact) => {
-      if (contact.id) {
-        setSelectedContact({ ...contact });
-        onContactSelected && onContactSelected(contact);
-      } else {
-        openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
-      }
-    },
-    [setSelectedContact, onContactSelected, openDrawer],
-  );
-
-  // Maybe inject create new item props to suggest component.
-  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
-  const maybeCreateNewItemFromQuery = allowCreate
-    ? createNewItemFromQuery
-    : null;
-
-  return (
-    <Select
-      items={localContacts}
-      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
-      itemRenderer={handleContactRenderer}
-      itemPredicate={itemPredicate}
-      filterable={true}
-      disabled={disabled}
-      onItemSelect={handleContactSelect}
-      popoverProps={{ minimal: true, usePortal: !popoverFill }}
-      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
-        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
-      })}
-      inputProps={{
-        placeholder: intl.get('filter_'),
-      }}
-      createNewItemRenderer={maybeCreateNewItemRenderer}
-      createNewItemFromQuery={maybeCreateNewItemFromQuery}
-      createNewItemPosition={'top'}
-      {...restProps}
-    >
-      <Button
-        disabled={disabled}
-        text={
-          selecetedContact ? selecetedContact.display_name : defaultSelectText
-        }
-        {...buttonProps}
-      />
-    </Select>
-  );
-}
-
-export const CustomerSelectField = R.compose(withDrawerActions)(
-  CustomerSelectFieldRoot,
-);

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

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { createNewItemFromQuery, createNewItemRenderer } from './utils';
+import { FSelect } from '../Forms';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
+
+/**
+ * Customer select field.
+ * @returns {React.ReactNode}
+ */
+function CustomerSelectRoot({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  items,
+  allowCreate,
+  ...props
+}) {
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  // Handles the create item click.
+  const handleCreateItemClick = () => {
+    openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
+  };
+
+  return (
+    <FSelect
+      items={items}
+      textAccessor={'display_name'}
+      labelAccessor={'code'}
+      valueAccessor={'id'}
+      popoverProps={{ minimal: true, usePortal: true, inline: false }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      onCreateItemSelect={handleCreateItemClick}
+      {...props}
+    />
+  );
+}
+
+export const CustomersSelect = R.compose(withDrawerActions)(CustomerSelectRoot);

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

@@ -1,3 +1,3 @@
 // @ts-nocheck
-export * from './CustomerSelectField';
 export * from './CustomerDrawerLink';
+export * from './CustomersSelect';

packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx

@@ -53,7 +53,7 @@ function DashboardTopbar({
   };
 
   return (
-    <div class="dashboard__topbar">
+    <div class="dashboard__topbar" data-testId={'dashboard-topbar'}>
       <div class="dashboard__topbar-left">
         <div class="dashboard__topbar-sidebar-toggle">
           <Tooltip

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

@@ -16,7 +16,7 @@ export function FSelect({ ...props }) {
       />
     );
   };
-  return <Select input={input} {...props} fill={true} />;
+  return <Select input={input} fill={true} {...props} />;
 }
 
 const SelectButton = styled(Button)`

packages/webapp/src/components/PageForm/FormTopbarSelectInputs.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button } from '@blueprintjs/core';
+import { Icon } from '@/components';
+
+export function FormWarehouseSelectButton({ text }) {
+  return (
+    <Button
+      text={intl.get('page_form.warehouse_button.label', { text })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
+    />
+  );
+}
+
+export function FormBranchSelectButton({ text }) {
+  return (
+    <Button
+      text={intl.get('page_form.branch_button.label', { text })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

packages/webapp/src/components/PageForm/index.ts

@@ -1,3 +1,4 @@
 // @ts-nocheck
 export * from './FormTopbar';
+export * from './FormTopbarSelectInputs';
 export * from './PageFormBigNumber';

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

@@ -1,118 +0,0 @@
-// @ts-nocheck
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { FormattedMessage as T } from '@/components';
-import intl from 'react-intl-universal';
-import * as R from 'ramda';
-
-import { MenuItem, Button } from '@blueprintjs/core';
-import { Select } from '@blueprintjs/select';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
-
-import {
-  itemPredicate,
-  handleContactRenderer,
-  createNewItemFromQuery,
-  createNewItemRenderer,
-} from './utils';
-import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-
-import { DRAWERS } from '@/constants/drawers';
-
-function VendorSelectFieldRoot({
-  // #withDrawerActions
-  openDrawer,
-
-  // #ownProps
-  contacts,
-  initialContactId,
-  selectedContactId,
-  defaultSelectText = <T id={'select_contact'} />,
-  onContactSelected,
-  popoverFill = false,
-  disabled = false,
-  allowCreate,
-  buttonProps,
-
-  ...restProps
-}) {
-  const localContacts = useMemo(
-    () =>
-      contacts.map((contact) => ({
-        ...contact,
-        _id: `${contact.id}_${contact.contact_type}`,
-      })),
-    [contacts],
-  );
-
-  const initialContact = useMemo(
-    () => contacts.find((a) => a.id === initialContactId),
-    [initialContactId, contacts],
-  );
-
-  const [selecetedContact, setSelectedContact] = useState(
-    initialContact || null,
-  );
-
-  useEffect(() => {
-    if (typeof selectedContactId !== 'undefined') {
-      const account = selectedContactId
-        ? contacts.find((a) => a.id === selectedContactId)
-        : null;
-      setSelectedContact(account);
-    }
-  }, [selectedContactId, contacts, setSelectedContact]);
-
-  const handleContactSelect = useCallback(
-    (contact) => {
-      if (contact.id) {
-        setSelectedContact({ ...contact });
-        onContactSelected && onContactSelected(contact);
-      } else {
-        openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
-      }
-    },
-    [setSelectedContact, onContactSelected, openDrawer],
-  );
-
-  // Maybe inject create new item props to suggest component.
-  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
-  const maybeCreateNewItemFromQuery = allowCreate
-    ? createNewItemFromQuery
-    : null;
-
-  return (
-    <Select
-      items={localContacts}
-      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
-      itemRenderer={handleContactRenderer}
-      itemPredicate={itemPredicate}
-      filterable={true}
-      disabled={disabled}
-      onItemSelect={handleContactSelect}
-      popoverProps={{ minimal: true, usePortal: !popoverFill }}
-      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
-        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
-      })}
-      inputProps={{
-        placeholder: intl.get('filter_'),
-      }}
-      createNewItemRenderer={maybeCreateNewItemRenderer}
-      createNewItemFromQuery={maybeCreateNewItemFromQuery}
-      createNewItemPosition={'top'}
-      {...restProps}
-    >
-      <Button
-        disabled={disabled}
-        text={
-          selecetedContact ? selecetedContact.display_name : defaultSelectText
-        }
-        {...buttonProps}
-      />
-    </Select>
-  );
-}
-
-export const VendorSelectField = R.compose(withDrawerActions)(
-  VendorSelectFieldRoot,
-);

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

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { createNewItemFromQuery, createNewItemRenderer } from './utils';
+import { FSelect } from '../Forms';
+import { DRAWERS } from '@/constants/drawers';
+
+/**
+ * Vendor select.
+ * @returns {React.ReactNode}
+ */
+function VendorsSelectRoot({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  items,
+  allowCreate,
+
+  ...restProps
+}) {
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  // Handles the create item click.
+  const handleCreateItemClick = () => {
+    openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
+  };
+
+  return (
+    <FSelect
+      items={items}
+      textAccessor={'display_name'}
+      labelAccessor={'code'}
+      valueAccessor={'id'}
+      popoverProps={{ minimal: true, usePortal: true, inline: false }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      onCreateItemSelect={handleCreateItemClick}
+      {...restProps}
+    />
+  );
+}
+
+export const VendorsSelect = R.compose(withDrawerActions)(VendorsSelectRoot);

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

@@ -1,3 +1,3 @@
 // @ts-nocheck
 export * from './VendorDrawerLink'
-export * from './VendorSelectField'
+export * from './VendorsSelect';

packages/webapp/src/components/Warehouses/WarehouseSelect.tsx

@@ -18,4 +18,4 @@ export function WarehouseSelect({ warehouses, ...rest }) {
       items={warehouses}
     />
   );
-}
+}

packages/webapp/src/constants/sidebarMenu.tsx

@@ -25,6 +25,7 @@ import {
   CashflowAction,
   PreferencesAbility,
 } from '@/constants/abilityOption';
+import { DialogsName } from './dialogs';
 
 export const SidebarMenu = [
   // ---------------
@@ -114,7 +115,7 @@ export const SidebarMenu = [
                 text: <T id={'sidebar.new_item_category'} />,
                 href: '/items/categories/new',
                 type: ISidebarMenuItemType.Dialog,
-                dialogName: 'item-category-form',
+                dialogName: DialogsName.ItemCategoryForm,
                 permission: {
                   subject: AbilitySubject.Item,
                   ability: ItemAction.Create,
@@ -458,7 +459,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_money_in'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
-            dialogName: 'money-in',
+            dialogName: DialogsName.MoneyInForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,
@@ -468,6 +469,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_money_out'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
+            dialogName: DialogsName.MoneyOutForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,
@@ -477,6 +479,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_cash_account'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
+            dialogName: DialogsName.AccountForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,
@@ -486,6 +489,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_bank_account'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
+            dialogName: DialogsName.AccountForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,

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

@@ -11,6 +11,7 @@ import {
   FeatureCan,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 
@@ -51,18 +52,9 @@ function MakeJournalFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={MakeJournalBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-function MakeJournalBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('make_journal.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

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

@@ -1,18 +1,22 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useFormikContext } from 'formik';
 
 import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields';
 import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields';
 import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields';
+import { MoneyInFieldsProvider } from './MoneyInFieldsProvider';
 
 /**
- *
- * @param param0
- * @returns
+ * Money-in dialog content.
+ * Switches between fields based on the given transaction type.
+ * @returns {JSX.Element}
  */
-export default function MoneyInContentFields({ accountType }) {
-  const handleTransactionType = () => {
-    switch (accountType) {
+export default function MoneyInContentFields() {
+  const { values } = useFormikContext();
+
+  const transactionFields = useMemo(() => {
+    switch (values.transaction_type) {
       case 'owner_contribution':
         return <OwnerContributionFormFields />;
 
@@ -24,6 +28,10 @@ export default function MoneyInContentFields({ accountType }) {
       default:
         break;
     }
-  };
-  return <React.Fragment>{handleTransactionType()}</React.Fragment>;
+  }, [values.transaction_type]);
+
+  // Cannot continue if transaction type or account is not selected.
+  if (!values.transaction_type || !values.cashflow_account_id) return null;
+
+  return <MoneyInFieldsProvider>{transactionFields}</MoneyInFieldsProvider>;
 }

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

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-
 import { MoneyInDialogProvider } from './MoneyInDialogProvider';
 import MoneyInForm from './MoneyInForm';
 

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

@@ -1,11 +1,10 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useState } from 'react';
 import { DialogContent } from '@/components';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
   useCreateCashflowTransaction,
-  useAccount,
   useAccounts,
   useBranches,
   useCashflowAccounts,
@@ -18,21 +17,20 @@ const MoneyInDialogContent = React.createContext();
  * Money in dialog provider.
  */
 function MoneyInDialogProvider({
-  accountId,
+  accountId: defaultAccountId,
   accountType,
   dialogName,
   ...props
 }) {
+  // Holds the selected account id of the dialog.
+  const [accountId, setAccountId] = useState<number | null>(defaultAccountId);
+
+  // Detarmines whether the feature is enabled.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
 
   // Fetches accounts list.
-  const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
-
-  // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
-    enabled: !!accountId,
-  });
+  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
 
   // Fetches the branches list.
   const {
@@ -41,10 +39,11 @@ function MoneyInDialogProvider({
     isSuccess: isBranchesSuccess,
   } = useBranches({}, { enabled: isBranchFeatureCan });
 
-  // Fetch cash flow list .
+  // Fetch cash flow list.
   const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
     useCashflowAccounts({}, { keepPreviousData: true });
 
+  // Mutation create cashflow transaction.
   const { mutateAsync: createCashflowTransactionMutate } =
     useCreateCashflowTransaction();
 
@@ -54,12 +53,15 @@ function MoneyInDialogProvider({
   // Submit payload.
   const [submitPayload, setSubmitPayload] = React.useState({});
 
-  //  provider.
+  // Provider data.
   const provider = {
     accounts,
-    account,
     branches,
+
     accountId,
+    defaultAccountId,
+    setAccountId,
+
     accountType,
     isAccountsLoading,
     isBranchesSuccess,
@@ -73,15 +75,14 @@ function MoneyInDialogProvider({
     setSubmitPayload,
   };
 
+  const isLoading =
+    isAccountsLoading ||
+    isCashFlowAccountsLoading ||
+    isBranchesLoading ||
+    isSettingsLoading;
+
   return (
-    <DialogContent
-      isLoading={
-        isAccountsLoading ||
-        isCashFlowAccountsLoading ||
-        isBranchesLoading ||
-        isSettingsLoading
-      }
-    >
+    <DialogContent isLoading={isLoading}>
       <MoneyInDialogContent.Provider value={provider} {...props} />
     </DialogContent>
   );

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

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+import { ExchangeRateMutedField } from '@/components';
+import { useForeignAccount } from './utils';
+import { useFormikContext } from 'formik';
+import { useMoneyInFieldsContext } from './MoneyInFieldsProvider';
+
+export function MoneyInExchangeRateField() {
+  const { account } = useMoneyInFieldsContext();
+  const { values } = useFormikContext();
+
+  const isForeigAccount = useForeignAccount();
+
+  if (!isForeigAccount) return null;
+
+  return (
+    <ExchangeRateMutedField
+      name={'exchange_rate'}
+      fromCurrency={values.currency_code}
+      toCurrency={account.currency_code}
+      formGroupProps={{ label: '', inline: false }}
+      date={values.date}
+      exchangeRate={values.exchange_rate}
+    />
+  );
+}

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

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import { useAccount } from '@/hooks/query';
+import { useMoneyInDailogContext } from './MoneyInDialogProvider';
+
+const MoneyInFieldsContext = React.createContext();
+
+/**
+ * Money in dialog provider.
+ */
+function MoneyInFieldsProvider({ ...props }) {
+  const { accountId } = useMoneyInDailogContext();
+
+  // Fetches the specific account details.
+  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+    enabled: !!accountId,
+  });
+  // Provider data.
+  const provider = {
+    account,
+  };
+  const isLoading = isAccountLoading;
+
+  return (
+    <DialogContent isLoading={isLoading}>
+      <MoneyInFieldsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useMoneyInFieldsContext = () => React.useContext(MoneyInFieldsContext);
+
+export { MoneyInFieldsProvider, useMoneyInFieldsContext };

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

@@ -53,7 +53,6 @@ function MoneyInForm({
     accountId,
     accountType,
     createCashflowTransactionMutate,
-    submitPayload,
   } = useMoneyInDailogContext();
 
   // transaction number.
@@ -61,7 +60,6 @@ function MoneyInForm({
     transactionNumberPrefix,
     transactionNextNumber,
   );
-
   // Initial form values.
   const initialValues = {
     ...defaultInitialValues,
@@ -95,15 +93,13 @@ function MoneyInForm({
   };
 
   return (
-    <div>
-      <Formik
-        validationSchema={CreateMoneyInFormSchema}
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
-      >
-        <MoneyInFormContent />
-      </Formik>
-    </div>
+    <Formik
+      validationSchema={CreateMoneyInFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <MoneyInFormContent />
+    </Formik>
   );
 }
 

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

@@ -12,17 +12,13 @@ import { useMoneyInDailogContext } from './MoneyInDialogProvider';
  * Money in form fields.
  */
 function MoneyInFormFields() {
-  const { values } = useFormikContext();
-
   // Money in dialog context.
-  const { accountId } = useMoneyInDailogContext();
+  const { defaultAccountId } = useMoneyInDailogContext();
 
   return (
     <div className={Classes.DIALOG_BODY}>
-      <If condition={!accountId}>
-        <TransactionTypeFields />
-      </If>
-      <MoneyInContentFields accountType={values.transaction_type} />
+      {!defaultAccountId && <TransactionTypeFields />}
+      <MoneyInContentFields />
     </div>
   );
 }

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

@@ -1,10 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import {
   Classes,
   FormGroup,
-  InputGroup,
   TextArea,
   Position,
   ControlGroup,
@@ -18,14 +17,15 @@ import {
   FieldRequiredHint,
   Col,
   Row,
-  If,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  ExchangeRateMutedField,
+  FInputGroup,
+  FFormGroup,
+  FTextArea,
+  FMoneyInputGroup,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
 
 import {
@@ -36,22 +36,18 @@ import {
 } from '@/utils';
 
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
-import {
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  BranchRowDivider,
-} from '../utils';
+import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
+import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
 
 /**
  * Other income form fields.
  */
 export default function OtherIncomeFormFields() {
   // Money in dialog context.
-  const { accounts, account, branches } = useMoneyInDailogContext();
-  const { values } = useFormikContext();
-  const amountFieldRef = useAutofocus();
-  const isForeigAccount = useForeignAccount();
+  const { accounts, branches } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -61,17 +57,14 @@ export default function OtherIncomeFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'amount'} label={<T id={'branch'} />}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
@@ -106,53 +99,32 @@ export default function OtherIncomeFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
+
+      {/*------------ Amount -----------*/}
+      <Row>
+        <Col xs={10}>
+          <FFormGroup
+            name={'amount'}
             label={<T id={'amount'} />}
             labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
           >
             <ControlGroup>
               <InputPrependText text={account.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
             </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+          </FFormGroup>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyInExchangeRateField />
 
-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values.currency_code}
-          toCurrency={account.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
       <Row>
         <Col xs={5}>
           {/*------------ other income account -----------*/}
@@ -182,43 +154,24 @@ export default function OtherIncomeFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup label={<T id={'reference_no'} />} name={'reference_no'}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+
+      {/*------------ Description -----------*/}
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
     </React.Fragment>
   );
 }

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

@@ -1,32 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
-
+import { DateInput } from '@blueprintjs/datetime';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
   Col,
   Row,
-  If,
-  ExchangeRateMutedField,
   BranchSelect,
   BranchSelectButton,
   FeatureCan,
+  FFormGroup,
+  FMoneyInputGroup,
+  FTextArea,
+  FInputGroup,
 } from '@/components';
-import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { ACCOUNT_TYPE, CLASSES, Features } from '@/constants';
 import {
   inputIntent,
@@ -37,10 +29,11 @@ import {
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
   useSetPrimaryBranchToForm,
-  useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyInDialog/utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
+import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
 
 /**
 /**
@@ -48,13 +41,8 @@ import { MoneyInOutTransactionNoField } from '../../_components';
  */
 export default function OwnerContributionFormFields() {
   // Money in dialog context.
-  const { accounts, account, branches } = useMoneyInDailogContext();
-
-  const { values } = useFormikContext();
-
-  const amountFieldRef = useAutofocus();
-
-  const isForeigAccount = useForeignAccount();
+  const { accounts, branches } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -64,21 +52,19 @@ export default function OwnerContributionFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -113,47 +99,26 @@ export default function OwnerContributionFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
-      <Field name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
+
+      {/*------------ Amount -----------*/}
+      <Row>
+        <Col xs={10}>
+          <FFormGroup
+            name={'amount'}
             label={<T id={'amount'} />}
             labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
           >
             <ControlGroup>
-              <InputPrependText text={account?.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <InputPrependText text={account?.currency_code || '--'} />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
             </ControlGroup>
-          </FormGroup>
-        )}
-      </Field>
-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values.currency_code}
-          toCurrency={account.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
+          </FFormGroup>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyInExchangeRateField />
+
       <Row>
         <Col xs={5}>
           {/*------------ equity account -----------*/}
@@ -181,43 +146,24 @@ export default function OwnerContributionFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+
+      {/*------------ Description -----------*/}
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
     </React.Fragment>
   );
 }

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

@@ -10,6 +10,8 @@ import {
   ListSelect,
   Col,
   Row,
+  FFormGroup,
+  FSelect,
 } from '@/components';
 import { inputIntent } from '@/utils';
 import { CLASSES, getAddMoneyInOptions } from '@/constants';
@@ -21,7 +23,7 @@ import { useMoneyInDailogContext } from './MoneyInDialogProvider';
  */
 export default function TransactionTypeFields() {
   // Money in dialog context.
-  const { cashflowAccounts } = useMoneyInDailogContext();
+  const { cashflowAccounts, setAccountId } = useMoneyInDailogContext();
 
   // Retrieves the add money in button options.
   const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
@@ -29,6 +31,23 @@ export default function TransactionTypeFields() {
   return (
     <div className="trasnaction-type-fileds">
       <Row>
+        <Col xs={5}>
+          {/*------------ Transaction type -----------*/}
+          <FFormGroup
+            name={'transaction_type'}
+            label={<T id={'transaction_type'} />}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <FSelect
+              name={'transaction_type'}
+              items={addMoneyInOptions}
+              popoverProps={{ minimal: true }}
+              valueAccessor={'value'}
+              textAccessor={'name'}
+            />
+          </FFormGroup>
+        </Col>
+
         <Col xs={5}>
           {/*------------ Current account -----------*/}
           <FastField name={'cashflow_account_id'}>
@@ -46,9 +65,10 @@ export default function TransactionTypeFields() {
               >
                 <AccountsSuggestField
                   accounts={cashflowAccounts}
-                  onAccountSelected={({ id }) =>
-                    form.setFieldValue('cashflow_account_id', id)
-                  }
+                  onAccountSelected={({ id }) => {
+                    form.setFieldValue('cashflow_account_id', id);
+                    setAccountId(id);
+                  }}
                   inputProps={{
                     intent: inputIntent({ error, touched }),
                   }}
@@ -56,39 +76,6 @@ export default function TransactionTypeFields() {
               </FormGroup>
             )}
           </FastField>
-          {/*------------ Transaction type -----------*/}
-        </Col>
-        <Col xs={5}>
-          <Field name={'transaction_type'}>
-            {({
-              form: { values, setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'transaction_type'} />}
-                labelInfo={<FieldRequiredHint />}
-                helperText={<ErrorMessage name="transaction_type" />}
-                intent={inputIntent({ error, touched })}
-                className={classNames(
-                  CLASSES.FILL,
-                  'form-group--transaction_type',
-                )}
-              >
-                <ListSelect
-                  items={addMoneyInOptions}
-                  onItemSelect={(type) => {
-                    setFieldValue('transaction_type', type.value);
-                  }}
-                  filterable={false}
-                  selectedItem={value}
-                  selectedItemProp={'value'}
-                  textProp={'name'}
-                  popoverProps={{ minimal: true }}
-                />
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
     </div>

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

@@ -1,33 +1,27 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
   Col,
   Row,
-  If,
-  ExchangeRateMutedField,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
+  FMoneyInputGroup,
+  FInputGroup,
+  FFormGroup,
+  FTextArea,
 } from '@/components';
-import { useAutofocus } from '@/hooks';
+import { MoneyInOutTransactionNoField } from '../../_components';
+import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
 import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
-
 import {
   inputIntent,
   momentFormatter,
@@ -35,25 +29,19 @@ import {
   handleDateChange,
 } from '@/utils';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
 import {
   useSetPrimaryBranchToForm,
-  useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyInDialog/utils';
 
-import { MoneyInOutTransactionNoField } from '../../_components';
-
 /**
  * Transfer from account form fields.
  */
 export default function TransferFromAccountFormFields() {
   // Money in dialog context.
-  const { accounts, account, branches } = useMoneyInDailogContext();
-
-  const isForeigAccount = useForeignAccount();
-  const amountFieldRef = useAutofocus();
-
-  const { values } = useFormikContext();
+  const { accounts, branches } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -63,17 +51,14 @@ export default function TransferFromAccountFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
@@ -112,50 +97,27 @@ export default function TransferFromAccountFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
+      {/*------------ Amount -----------*/}
+      <Row>
+        <Col xs={10}>
           <FormGroup
             label={<T id={'amount'} />}
             labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
           >
             <ControlGroup>
-              <InputPrependText text={account.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <InputPrependText text={account.currency_code || '--'} />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
             </ControlGroup>
           </FormGroup>
-        )}
-      </FastField>
-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values.currency_code}
-          toCurrency={account.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyInExchangeRateField />
+
       <Row>
         <Col xs={5}>
-          {/*------------ transfer from account -----------*/}
+          {/*------------ Transfer from account -----------*/}
           <FastField name={'credit_account_id'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
@@ -185,43 +147,24 @@ export default function TransferFromAccountFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+
+      {/*------------ Description -----------*/}
+      <FormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FormGroup>
     </React.Fragment>
   );
 }

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

@@ -3,7 +3,6 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Dialog, DialogSuspense } from '@/components';
 import withDialogRedux from '@/components/DialogReduxConnect';
-
 import { compose } from '@/utils';
 
 const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));

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

@@ -6,6 +6,7 @@ import { transactionNumber } from '@/utils';
 import { isEqual, isNull, first } from 'lodash';
 
 import { useMoneyInDailogContext } from './MoneyInDialogProvider';
+import { useMoneyInFieldsContext } from './MoneyInFieldsProvider';
 
 export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
   const { setFieldValue } = useFormikContext();
@@ -33,7 +34,7 @@ export const useSetPrimaryBranchToForm = () => {
 
 export const useForeignAccount = () => {
   const { values } = useFormikContext();
-  const { account } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();
 
   return (
     !isEqual(account.currency_code, values.currency_code) &&

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

@@ -1,13 +1,22 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useFormikContext } from 'formik';
 
 import OtherExpnseFormFields from './OtherExpense/OtherExpnseFormFields';
 import OwnerDrawingsFormFields from './OwnerDrawings/OwnerDrawingsFormFields';
 import TransferToAccountFormFields from './TransferToAccount/TransferToAccountFormFields';
+import { MoneyOutFieldsProvider } from './MoneyOutFieldsProvider';
 
-function MoneyOutContentFields({ accountType }) {
-  const handleTransactionType = () => {
-    switch (accountType) {
+/**
+ * Money out content fields.
+ * Switches between form fields based on the given transaction type.
+ * @returns {JSX.Element}
+ */
+function MoneyOutContentFields() {
+  const { values } = useFormikContext();
+
+  const transactionType = useMemo(() => {
+    switch (values.transaction_type) {
       case 'OwnerDrawing':
         return <OwnerDrawingsFormFields />;
 
@@ -19,8 +28,12 @@ function MoneyOutContentFields({ accountType }) {
       default:
         break;
     }
-  };
-  return <React.Fragment>{handleTransactionType()}</React.Fragment>;
+  }, [values.transaction_type]);
+
+  // Cannot continue if transaction type or account is not selected.
+  if (!values.transaction_type || !values.cashflow_account_id) return null;
+
+  return <MoneyOutFieldsProvider>{transactionType}</MoneyOutFieldsProvider>;
 }
 
 export default MoneyOutContentFields;

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

@@ -1,11 +1,10 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useState } from 'react';
 import { DialogContent } from '@/components';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
   useAccounts,
-  useAccount,
   useBranches,
   useCreateCashflowTransaction,
   useCashflowAccounts,
@@ -17,7 +16,15 @@ const MoneyInDialogContent = React.createContext();
 /**
  * Money out dialog provider.
  */
-function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
+function MoneyOutProvider({
+  accountId: defaultAccountId,
+  accountType,
+  dialogName,
+  ...props
+}) {
+  // Holds the selected account id of the dialog.
+  const [accountId, setAccountId] = useState<number | null>(defaultAccountId);
+
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
@@ -25,11 +32,6 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   // Fetches accounts list.
   const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
 
-  // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
-    enabled: !!accountId,
-  });
-
   // Fetches the branches list.
   const {
     data: branches,
@@ -41,6 +43,7 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
     useCashflowAccounts({}, { keepPreviousData: true });
 
+  // Mutation to create a new cashflow account.
   const { mutateAsync: createCashflowTransactionMutate } =
     useCreateCashflowTransaction();
 
@@ -50,11 +53,13 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   // Submit payload.
   const [submitPayload, setSubmitPayload] = React.useState({});
 
-  //  provider.
+  // Provider data.
   const provider = {
-    accounts,
-    account,
     accountId,
+    setAccountId,
+    defaultAccountId,
+
+    accounts,
     accountType,
     branches,
     isAccountsLoading,
@@ -69,15 +74,14 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
     setSubmitPayload,
   };
 
+  const isLoading =
+    isAccountsLoading ||
+    isCashFlowAccountsLoading ||
+    isBranchesLoading ||
+    isSettingsLoading;
+
   return (
-    <DialogContent
-      isLoading={
-        isAccountsLoading ||
-        isCashFlowAccountsLoading ||
-        isBranchesLoading ||
-        isSettingsLoading
-      }
-    >
+    <DialogContent isLoading={isLoading}>
       <MoneyInDialogContent.Provider value={provider} {...props} />
     </DialogContent>
   );

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

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useForeignAccount } from './utils';
+import { ExchangeRateMutedField } from '@/components';
+import { useMoneyOutFieldsContext } from './MoneyOutFieldsProvider';
+
+/**
+ * Money-out exchange rate field.
+ * @returns {JSX.Element}
+ */
+export function MoneyOutExchangeRateField() {
+  const { values } = useFormikContext();
+
+  const { account } = useMoneyOutFieldsContext();
+  const isForeigAccount = useForeignAccount();
+
+  // Cannot continue if the account is not foreign account.
+  if (!isForeigAccount) return null;
+
+  return (
+    <ExchangeRateMutedField
+      name={'exchange_rate'}
+      fromCurrency={values?.currency_code}
+      toCurrency={account?.currency_code}
+      formGroupProps={{ label: '', inline: false }}
+      date={values.date}
+      exchangeRate={values.exchange_rate}
+    />
+  );
+}

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

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import { useAccount } from '@/hooks/query';
+import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+
+const MoneyOutFieldsContext = React.createContext();
+
+/**
+ * Money out fields dialog provider.
+ */
+function MoneyOutFieldsProvider({ ...props }) {
+  const { accountId } = useMoneyOutDialogContext();
+
+  // Fetches the specific account details.
+  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+    enabled: !!accountId,
+  });
+  // Provider data.
+  const provider = {
+    account,
+  };
+  const isLoading = isAccountLoading;
+
+  return (
+    <DialogContent isLoading={isLoading}>
+      <MoneyOutFieldsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useMoneyOutFieldsContext = () => React.useContext(MoneyOutFieldsContext);
+
+export { MoneyOutFieldsProvider, useMoneyOutFieldsContext };

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

@@ -24,18 +24,16 @@ function MoneyOutFloatingActions({
     useMoneyOutDialogContext();
 
   // handle submit as draft button click.
-  const handleSubmitDraftBtnClick = (event) => {
+  const handleSubmitDraftBtnClick = () => {
     setSubmitPayload({ publish: false });
     submitForm();
   };
-
   // Handle submit  button click.
-  const handleSubmittBtnClick = (event) => {
+  const handleSubmittBtnClick = () => {
     setSubmitPayload({ publish: true });
   };
-
   // Handle close button click.
-  const handleCloseBtnClick = (event) => {
+  const handleCloseBtnClick = () => {
     closeDialog(dialogName);
   };
 
@@ -49,7 +47,7 @@ function MoneyOutFloatingActions({
         >
           <T id={'close'} />
         </Button>
-    
+
         <Button
           intent={Intent.PRIMARY}
           disabled={isSubmitting}

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

@@ -92,15 +92,13 @@ function MoneyOutForm({
       });
   };
   return (
-    <div>
-      <Formik
-        validationSchema={CreateMoneyOutSchema}
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
-      >
-        <MoneyOutFormContent />
-      </Formik>
-    </div>
+    <Formik
+      validationSchema={CreateMoneyOutSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <MoneyOutFormContent />
+    </Formik>
   );
 }
 

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

@@ -17,6 +17,7 @@ export default function MoneyOutFormDialog() {
     setFieldValue('transaction_number', incrementNumber || '');
     setFieldValue('transaction_number_manually', manually);
   };
+
   return (
     <React.Fragment>
       <TransactionNumberDialog

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

@@ -1,28 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import { useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
 
-import { If } from '@/components';
-
 import MoneyOutContentFields from './MoneyOutContentFields';
 import TransactionTypeFields from './TransactionTypeFields';
-import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
 
 /**
  * Money out form fields.
  */
 function MoneyOutFormFields() {
-  // Money in dialog context.
-  const { accountId } = useMoneyOutDialogContext();
-
-  const { values } = useFormikContext();
   return (
     <div className={Classes.DIALOG_BODY}>
-      <If condition={!accountId}>
-        <TransactionTypeFields />
-      </If>
-      <MoneyOutContentFields accountType={values.transaction_type} />
+      <TransactionTypeFields />
+      <MoneyOutContentFields />
     </div>
   );
 }

packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx

@@ -1,33 +1,25 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
   Col,
   Row,
-  If,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  ExchangeRateMutedField,
+  FTextArea,
+  FFormGroup,
+  FInputGroup,
+  FMoneyInputGroup,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { Features, ACCOUNT_TYPE } from '@/constants';
-
 import {
   inputIntent,
   momentFormatter,
@@ -36,25 +28,18 @@ import {
 } from '@/utils';
 import { CLASSES } from '@/constants/classes';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
-import {
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  BranchRowDivider,
-} from '../utils';
-
+import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
+import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
 
 /**
  * Other expense form fields.
  */
 export default function OtherExpnseFormFields() {
   // Money in dialog context.
-  const { accounts, account, branches } = useMoneyOutDialogContext();
-
-  const isForeigAccount = useForeignAccount();
-  const { values } = useFormikContext();
-
-  const amountFieldRef = useAutofocus();
+  const { accounts, branches } = useMoneyOutDialogContext();
+  const { account } = useMoneyOutFieldsContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -64,21 +49,19 @@ export default function OtherExpnseFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -113,47 +96,27 @@ export default function OtherExpnseFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
+
       {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
+
+      <Row>
+        <Col xs={10}>
+          <FFormGroup
+            name={'amount'}
             label={<T id={'amount'} />}
             labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
           >
             <ControlGroup>
               <InputPrependText text={account.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
             </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values.currency_code}
-          toCurrency={account.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
+          </FFormGroup>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyOutExchangeRateField />
+
       <Row>
         <Col xs={5}>
           {/*------------ other expense account -----------*/}
@@ -183,44 +146,24 @@ export default function OtherExpnseFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
         </Col>
       </Row>
 
       {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
     </React.Fragment>
   );
 }

packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx

@@ -1,31 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
-  If,
   Col,
   Row,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  ExchangeRateMutedField,
+  FFormGroup,
+  FTextArea,
+  FInputGroup,
+  FMoneyInputGroup,
 } from '@/components';
-import { useAutofocus } from '@/hooks';
 import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants';
 import {
   inputIntent,
@@ -36,21 +29,19 @@ import {
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
   useSetPrimaryBranchToForm,
-  useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyOutDialog/utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
+import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
 
 /**
  * Owner drawings form fields.
  */
 export default function OwnerDrawingsFormFields() {
   // Money out dialog context.
-  const { accounts, account, branches } = useMoneyOutDialogContext();
-  const { values } = useFormikContext();
-  const isForeigAccount = useForeignAccount();
-
-  const amountFieldRef = useAutofocus();
+  const { accounts, branches } = useMoneyOutDialogContext();
+  const { account } = useMoneyOutFieldsContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -60,21 +51,19 @@ export default function OwnerDrawingsFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -109,48 +98,27 @@ export default function OwnerDrawingsFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
-      <Field name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
+
+      {/*------------ Amount -----------*/}
+
+      <Row>
+        <Col xs={10}>
           <FormGroup
+            name={'amount'}
             label={<T id={'amount'} />}
             labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
           >
             <ControlGroup>
               <InputPrependText text={account.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
             </ControlGroup>
           </FormGroup>
-        )}
-      </Field>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyOutExchangeRateField />
 
-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values?.currency_code}
-          toCurrency={account?.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
       <Row>
         <Col xs={5}>
           {/*------------ equitty account -----------*/}
@@ -177,44 +145,24 @@ export default function OwnerDrawingsFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
         </Col>
       </Row>
 
       {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
     </React.Fragment>
   );
 }

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

@@ -1,22 +1,21 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
-import { FastField, Field, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import { FormGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   FieldRequiredHint,
-  ListSelect,
   Col,
   Row,
+  FSelect,
+  FFormGroup,
 } from '@/components';
-
 import { inputIntent } from '@/utils';
-import { CLASSES } from '@/constants/classes';
 import { getAddMoneyOutOptions } from '@/constants/cashflowOptions';
-
 import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+import { CLASSES } from '@/constants/classes';
 
 /**
  * Transaction type fields.
@@ -27,9 +26,32 @@ function TransactionTypeFields() {
 
   const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
 
+  // Money in dialog context.
+  const { defaultAccountId, setAccountId } = useMoneyOutDialogContext();
+
+  // Cannot continue if the default account id is defined.
+  if (defaultAccountId) return null;
+
   return (
     <div className="trasnaction-type-fileds">
       <Row>
+        {/*------------ Transaction type -----------*/}
+        <Col xs={5}>
+          <FFormGroup
+            name={'transaction_type'}
+            label={<T id={'transaction_type'} />}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <FSelect
+              name={'transaction_type'}
+              items={addMoneyOutOptions}
+              popoverProps={{ minimal: true }}
+              valueAccessor={'value'}
+              textAccessor={'name'}
+            />
+          </FFormGroup>
+        </Col>
+
         <Col xs={5}>
           {/*------------ Current account -----------*/}
           <FastField name={'cashflow_account_id'}>
@@ -47,9 +69,10 @@ function TransactionTypeFields() {
               >
                 <AccountsSuggestField
                   accounts={cashflowAccounts}
-                  onAccountSelected={({ id }) =>
-                    form.setFieldValue('cashflow_account_id', id)
-                  }
+                  onAccountSelected={({ id }) => {
+                    form.setFieldValue('cashflow_account_id', id);
+                    setAccountId(id);
+                  }}
                   inputProps={{
                     intent: inputIntent({ error, touched }),
                   }}
@@ -57,39 +80,6 @@ function TransactionTypeFields() {
               </FormGroup>
             )}
           </FastField>
-          {/*------------ Transaction type -----------*/}
-        </Col>
-        <Col xs={5}>
-          <Field name={'transaction_type'}>
-            {({
-              form: { values, setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'transaction_type'} />}
-                labelInfo={<FieldRequiredHint />}
-                helperText={<ErrorMessage name="transaction_type" />}
-                intent={inputIntent({ error, touched })}
-                className={classNames(
-                  CLASSES.FILL,
-                  'form-group--transaction_type',
-                )}
-              >
-                <ListSelect
-                  items={addMoneyOutOptions}
-                  onItemSelect={(type) => {
-                    setFieldValue('transaction_type', type.value);
-                  }}
-                  filterable={false}
-                  selectedItem={value}
-                  selectedItemProp={'value'}
-                  textProp={'name'}
-                  popoverProps={{ minimal: true }}
-                />
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
     </div>

packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx

@@ -1,65 +1,46 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
-  If,
-  InputPrependButton,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  ExchangeRateMutedField,
+  FFormGroup,
+  FTextArea,
+  FMoneyInputGroup,
+  FInputGroup,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
-
 import {
   inputIntent,
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { Features } from '@/constants';
 import { CLASSES } from '@/constants/classes';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
-import {
-  useObserveTransactionNoSettings,
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  BranchRowDivider,
-} from '../utils';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
+import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
 
 /**
  * Transfer to account form fields.
  */
 export default function TransferToAccountFormFields() {
   // Money in dialog context.
-  const { accounts, account, branches } = useMoneyOutDialogContext();
-  const { values } = useFormikContext();
-  const isForeigAccount = useForeignAccount();
-
-  const accountRef = useAutofocus();
+  const { accounts, branches } = useMoneyOutDialogContext();
+  const { account } = useMoneyOutFieldsContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -69,21 +50,19 @@ export default function TransferToAccountFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -113,52 +92,32 @@ export default function TransferToAccountFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
+
+      {/*------------ Amount -----------*/}
+      <Row>
+        <Col xs={10}>
+          <FFormGroup
+            name={'amount'}
             label={<T id={'amount'} />}
             labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
           >
             <ControlGroup>
               <InputPrependText text={account.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={accountRef}
-                intent={inputIntent({ error, touched })}
-              />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
             </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values?.currency_code}
-          toCurrency={account?.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
+          </FFormGroup>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyOutExchangeRateField />
+
       <Row>
         <Col xs={5}>
           {/*------------ transfer from account -----------*/}
@@ -191,43 +150,24 @@ export default function TransferToAccountFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+
+      {/*------------ Description -----------*/}
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
     </React.Fragment>
   );
 }

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

@@ -6,6 +6,7 @@ import { transactionNumber } from '@/utils';
 import { first, isEqual, isNull } from 'lodash';
 
 import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+import { useMoneyOutFieldsContext } from './MoneyOutFieldsProvider';
 
 export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
   const { setFieldValue } = useFormikContext();
@@ -33,7 +34,7 @@ export const useSetPrimaryBranchToForm = () => {
 
 export const useForeignAccount = () => {
   const { values } = useFormikContext();
-  const { account } = useMoneyOutDialogContext();
+  const { account } = useMoneyOutFieldsContext();
 
   return (
     !isEqual(account.currency_code, values.currency_code) &&

packages/webapp/src/containers/CashFlow/_components.tsx

@@ -38,11 +38,11 @@ export const MoneyInOutSyncIncrementSettingsToForm = R.compose(
       // Do not update if the invoice auto-increment is disabled.
       if (!transactionAutoIncrement) return null;
 
-      const transactionNumber = transactionNumber(
+      const newTransactionNumber = transactionNumber(
         transactionNumberPrefix,
         transactionNextNumber,
       );
-      setFieldValue('transaction_number', transactionNumber);
+      setFieldValue('transaction_number', newTransactionNumber);
     }, [setFieldValue, transactionNumberPrefix, transactionNextNumber]);
 
     return null;

packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx

@@ -10,7 +10,6 @@ import {
   InputPrependText,
   CurrencySelectList,
   BranchSelect,
-  BranchSelectButton,
   FeatureCan,
   Row,
   Col,
@@ -78,12 +77,10 @@ export default function CustomerFinancialPanel() {
               label={<T id={'customer.label.opening_branch'} />}
               name={'opening_balance_branch_id'}
               inline={true}
-              className={classNames('form-group--select-list', Classes.FILL)}
             >
               <BranchSelect
                 name={'opening_balance_branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx

@@ -7,6 +7,7 @@ import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
 import { useFormikContext } from 'formik';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
+import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentMades/constants';
 
 // Default initial values of payment made.
 export const defaultPaymentMade = {
@@ -24,16 +25,16 @@ export const defaultPaymentMade = {
 export const transformErrors = (errors, { setFieldError }) => {
   const getError = (errorType) => errors.find((e) => e.type === errorType);
 
-  if (getError('PAYMENT.NUMBER.NOT.UNIQUE')) {
+  if (getError(PAYMENT_MADE_ERRORS.PAYMENT_NUMBER_NOT_UNIQUE)) {
     setFieldError('payment_number', intl.get('payment_number_is_not_unique'));
   }
-  if (getError('INVALID_BILL_PAYMENT_AMOUNT')) {
+  if (getError(PAYMENT_MADE_ERRORS.INVALID_BILL_PAYMENT_AMOUNT)) {
     setFieldError(
       'payment_amount',
       intl.get('the_payment_amount_bigger_than_invoice_due_amount'),
     );
   }
-  if (getError('WITHDRAWAL_ACCOUNT_CURRENCY_INVALID')) {
+  if (getError(PAYMENT_MADE_ERRORS.WITHDRAWAL_ACCOUNT_CURRENCY_INVALID)) {
     AppToaster.show({
       message: intl.get(
         'payment_made.error.withdrawal_account_currency_invalid',

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx

@@ -1,12 +1,13 @@
 // @ts-nocheck
 import React from 'react';
 
-import { Card } from '@/components';
+import { Card, CommercialDocBox } from '@/components';
 
 import CashflowTransactionDrawerActionBar from './CashflowTransactionDrawerActionBar';
 import CashflowTransactionDrawerHeader from './CashflowTransactionDrawerHeader';
 import CashflowTransactionDrawerTable from './CashflowTransactionDrawerTable';
-import CashflowTransactionDrawerFooter from './CashflowTransactionDrawerFooter';
+import CashflowTransactionDrawerTableFooter from './CashflowTransactionDrawerTableFooter';
+import { CashflowTransactionDrawerFooter } from './CashflowTransactionDrawerFooter';
 /**
  * Cashflow transaction view details.
  */
@@ -16,11 +17,12 @@ export default function CashflowTransactionDrawerDetails() {
       <CashflowTransactionDrawerActionBar />
 
       <div className="cashflow-drawer__content">
-        <Card>
+        <CommercialDocBox>
           <CashflowTransactionDrawerHeader />
           <CashflowTransactionDrawerTable />
+          <CashflowTransactionDrawerTableFooter />
           <CashflowTransactionDrawerFooter />
-        </Card>
+        </CommercialDocBox>
       </div>
     </div>
   );

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx

@@ -1,35 +1,18 @@
 // @ts-nocheck
 import React from 'react';
+import { CommercialDocFooter, DetailsMenu, DetailItem, T } from '@/components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
-import { T, FormatNumber } from '@/components';
 
-export default function CashflowTransactionDrawerFooter() {
-  const {
-    cashflowTransaction: { formatted_amount },
-  } = useCashflowTransactionDrawerContext();
+export function CashflowTransactionDrawerFooter() {
+  const { cashflowTransaction } = useCashflowTransactionDrawerContext();
 
   return (
-    <div className="cashflow-drawer__content-footer">
-      <div class="total-lines">
-        <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">
-            <T id={'manual_journal.details.subtotal'} />
-          </div>
-          <div class="debit">
-            <FormatNumber value={formatted_amount} />
-          </div>
-          <div class="credit">
-            <FormatNumber value={formatted_amount} />
-          </div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
-            <T id={'manual_journal.details.total'} />
-          </div>
-          <div class="debit">{formatted_amount}</div>
-          <div class="credit">{formatted_amount}</div>
-        </div>
-      </div>
-    </div>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem label={<T id={'cash_flow.drawer.label.statement'} />}>
+          {cashflowTransaction.description}
+        </DetailItem>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import { T, FormatNumber } from '@/components';
+
+export default function CashflowTransactionDrawerTableFooter() {
+  const {
+    cashflowTransaction: { formatted_amount },
+  } = useCashflowTransactionDrawerContext();
+
+  return (
+    <div className="cashflow-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">
+            <T id={'manual_journal.details.subtotal'} />
+          </div>
+          <div class="debit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+          <div class="credit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+        </div>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">
+            <T id={'manual_journal.details.total'} />
+          </div>
+          <div class="debit">{formatted_amount}</div>
+          <div class="credit">{formatted_amount}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-
 import {
   CommercialDocFooter,
   T,

packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.tsx

@@ -4,9 +4,8 @@ import {
   DrawerHeaderContent,
   DrawerBody,
   FormattedMessage as T,
-  Drawer,
 } from '@/components';
-
+import { DRAWERS } from '@/constants/drawers';
 import QuickCreateItemDrawerForm from './QuickCreateItemDrawerForm';
 
 /**
@@ -16,7 +15,7 @@ export default function QuickCreateItemDrawerContent({ itemName }) {
   return (
     <React.Fragment>
       <DrawerHeaderContent
-        name={DRAWER.QUICK_CREATE_ITEM}
+        name={DRAWERS.QUICK_CREATE_ITEM}
         title={<T id={'create_a_new_item'} />}
       />
       <DrawerBody>

packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx

@@ -17,16 +17,6 @@ import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { DRAWERS } from '@/constants/drawers';
 
-/**
- * Drawer item form loading.
- * @returns {JSX}
- */
-function DrawerItemFormLoading({ children }) {
-  const { isFormLoading } = useItemFormContext();
-
-  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
-}
-
 /**
  * Quick create/edit item drawer form.
  */
@@ -72,6 +62,16 @@ function QuickCreateItemDrawerForm({
   );
 }
 
+/**
+ * Drawer item form loading.
+ * @returns {JSX}
+ */
+function DrawerItemFormLoading({ children }) {
+  const { isFormLoading } = useItemFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
 export default R.compose(
   withDrawerActions,
   withDashboardActions,
@@ -79,10 +79,15 @@ export default R.compose(
 
 const ItemFormCard = styled(Card)`
   margin: 15px;
+  padding: 25px;
   margin-bottom: calc(15px + 65px);
 
-  .page-form__floating-actions {
-    margin-left: -36px;
-    margin-right: -36px;
+  .page-form {
+    padding: 0;
+
+    &__floating-actions {
+      margin-left: -41px;
+      margin-right: -41px;
+    }
   }
 `;

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { InputGroup, FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
+import { CustomersSelect, FormattedMessage as T } from '@/components';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -121,33 +121,39 @@ export default function ExpenseFormHeader() {
         )}
       </FastField>
 
-      <FastField
-        name={'customer_id'}
-        customers={customers}
-        shouldUpdate={customersFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'customer'} />}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            labelInfo={<Hint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'assign_to_customer'} />}
-            inline={true}
-          >
-            <CustomerSelectField
-              contacts={customers}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer.id);
-              }}
-              allowCreate={true}
-              popoverFill={true}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      {/* ----------- Customer ----------- */}
+      <ExpenseFormCustomerSelect />
     </div>
   );
 }
+
+/**
+ * Customer select field of expense form.
+ * @returns {React.ReactNode}
+ */
+function ExpenseFormCustomerSelect() {
+  const { customers } = useExpenseFormContext();
+
+  return (
+    <FormGroup
+      label={<T id={'customer'} />}
+      labelInfo={<Hint />}
+      inline={true}
+      name={'customer_id'}
+      fastField={true}
+      shouldUpdateDeps={{ items: customers }}
+      shouldUpdate={customersFieldShouldUpdate}
+    >
+      <CustomersSelect
+        name={'customer_id'}
+        items={customers}
+        placeholder={<T id={'select_customer_account'} />}
+        allowCreate={true}
+        popoverFill={true}
+        fastField={true}
+        shouldUpdateDeps={{ items: customers }}
+        shouldUpdate={customersFieldShouldUpdate}
+      />
+    </FormGroup>
+  );
+}

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormTopBar.tsx

@@ -1,16 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
-import { Button, Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
+import { Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
 import {
-  Icon,
   BranchSelect,
   FeatureCan,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 
@@ -51,19 +50,9 @@ function ExpenseFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={ExpenseBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function ExpenseBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('expense.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx

@@ -104,7 +104,7 @@ export const transformToEditForm = (
  */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/FinancialStatements/BalanceSheet/components.tsx

@@ -21,19 +21,21 @@ export function BalanceSheetAlerts() {
     refetchBalanceSheet();
   };
   // Can't display any error if the report is loading.
-  if (isLoading) return null;
-
+  if (isLoading) {
+    return null;
+  }
+  // Can't continue if the cost compute job is not running.
+  if (!balanceSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={balanceSheet.meta.is_cost_compute_running}>
-      <FinancialComputeAlert>
-        <Icon icon="info-block" iconSize={12} />{' '}
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'report.compute_running.refresh'} />
-        </Button>
-      </FinancialComputeAlert>
-    </If>
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />{' '}
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'report.compute_running.refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }
 

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/components.tsx

@@ -7,6 +7,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 
 import { dynamicColumns } from './dynamicColumns';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve cash flow statement columns.
@@ -27,6 +28,7 @@ export const useCashFlowStatementColumns = () => {
  */
 export function CashFlowStatementLoadingBar() {
   const { isCashFlowFetching } = useCashFlowStatementContext();
+
   return (
     <If condition={isCashFlowFetching}>
       <FinancialLoadingBar />
@@ -45,20 +47,21 @@ export function CashFlowStatementAlerts() {
   const handleRecalcReport = () => {
     refetchCashFlow();
   };
-
   // Can't display any error if the report is loading
   if (isCashFlowLoading) {
     return null;
   }
+  // Can't continue if the cost compute is not running.
+  if (!cashFlowStatement.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={cashFlowStatement.meta.is_cost_compute_running}>
-      <div className="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx

@@ -8,6 +8,7 @@ import { getColumnWidth } from '@/utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import { Align } from '@/constants';
 
 /**
@@ -116,17 +117,18 @@ export function GeneralLedgerSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!generalLedger.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={generalLedger.meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }
 

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/components.tsx

@@ -6,6 +6,7 @@ import { Icon, If, FormattedMessage as T } from '@/components';
 import { dynamicColumns } from './utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve inventory item details columns.
@@ -53,17 +54,19 @@ export function InventoryItemDetailsAlerts() {
   if (isInventoryItemDetailsLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is running.
+  if (!inventoryItemDetails.meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={inventoryItemDetails.meta.is_cost_compute_running}>
-      <div className="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

packages/webapp/src/containers/FinancialStatements/Journal/components.tsx

@@ -7,6 +7,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 import { useJournalSheetContext } from './JournalProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 import { Align } from '@/constants';
 
@@ -99,17 +100,18 @@ export function JournalSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is running.
+  if (!journalSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={journalSheet.meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.tsx

@@ -13,7 +13,7 @@ import withProfitLossActions from './withProfitLossActions';
 
 import { useProfitLossSheetQuery } from './utils';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
-import { ProfitLossSheetLoadingBar } from './components';
+import { ProfitLossSheetAlerts, ProfitLossSheetLoadingBar } from './components';
 import { ProfitLossBody } from './ProfitLossBody';
 
 /**
@@ -58,7 +58,7 @@ function ProfitLossSheet({
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <ProfitLossSheetLoadingBar />
-      {/* <ProfitLossSheetAlerts /> */}
+      <ProfitLossSheetAlerts />
 
       <DashboardPageContent>
         <ProfitLossSheetHeader

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/components.tsx

@@ -4,6 +4,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 
 import { useProfitLossSheetContext } from './ProfitLossProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
@@ -34,17 +35,18 @@ export function ProfitLossSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!profitLossSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={profitLossSheet.meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/components.tsx

@@ -8,9 +8,9 @@ import { getColumnWidth } from '@/utils';
 import { CellTextSpan } from '@/components/Datatable/Cells';
 import { If, Icon, FormattedMessage as T } from '@/components';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
-
 /**
  * Retrieves the credit column.
  */
@@ -114,17 +114,19 @@ export function TrialBalanceSheetAlerts() {
   if (isLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is not running.
+  if (!meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

packages/webapp/src/containers/Items/ItemFormFormik.tsx

@@ -90,7 +90,9 @@ export default function ItemFormFormik({
   };
 
   return (
-    <div class={classNames(CLASSES.PAGE_FORM_ITEM, className)}>
+    <div
+      class={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ITEM, className)}
+    >
       <Formik
         enableReinitialize={true}
         validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}

packages/webapp/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx

@@ -15,11 +15,10 @@ import {
   FMoneyInputGroup,
   InputPrependText,
   FormattedMessage as T,
-  FieldRequiredHint,
-  CustomerSelectField,
   Stack,
+  CustomersSelect,
 } from '@/components';
-import { inputIntent, momentFormatter } from '@/utils';
+import { momentFormatter } from '@/utils';
 import { useProjectFormContext } from './ProjectFormProvider';
 
 /**
@@ -27,9 +26,6 @@ import { useProjectFormContext } from './ProjectFormProvider';
  * @returns
  */
 function ProjectFormFields() {
-  // project form dialog context.
-  const { customers } = useProjectFormContext();
-
   // Formik context.
   const { values } = useFormikContext();
 
@@ -37,26 +33,7 @@ function ProjectFormFields() {
     <div className={Classes.DIALOG_BODY}>
       <Stack spacing={25}>
         {/*------------ Contact -----------*/}
-        <FastField name={'contact_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={intl.get('projects.dialog.contact')}
-              className={classNames('form-group--select-list', Classes.FILL)}
-              intent={inputIntent({ error, touched })}
-            >
-              <CustomerSelectField
-                contacts={customers}
-                selectedContactId={value}
-                defaultSelectText={'Find or create a customer'}
-                onContactSelected={(customer) => {
-                  form.setFieldValue('contact_id', customer.id);
-                }}
-                allowCreate={true}
-                popoverFill={true}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <ProjectFormCustomerSelect />
 
         {/*------------ Project Name -----------*/}
         <FFormGroup
@@ -113,4 +90,21 @@ function ProjectFormFields() {
   );
 }
 
+function ProjectFormCustomerSelect() {
+  // project form dialog context.
+  const { customers } = useProjectFormContext();
+
+  return (
+    <FormGroup name={'contact_id'} label={intl.get('projects.dialog.contact')}>
+      <CustomersSelect
+        name={'contact_id'}
+        items={customers}
+        placeholder={'Find or create a customer'}
+        allowCreate={true}
+        popoverFill={true}
+      />
+    </FormGroup>
+  );
+}
+
 export default ProjectFormFields;

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -2,18 +2,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
+
 import { FeatureCan, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
-
 import {
   FFormGroup,
-  VendorSelectField,
   FieldRequiredHint,
   Icon,
   VendorDrawerLink,
+  VendorsSelect,
 } from '@/components';
 
 import { useBillFormContext } from './BillFormProvider';
@@ -43,43 +43,7 @@ function BillFormHeader() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ------- Vendor name ------ */}
-      <FastField
-        name={'vendor_id'}
-        vendors={vendors}
-        shouldUpdate={vendorsFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'vendor_id'}
-            label={<T id={'vendor_name'} />}
-            inline={true}
-            className={classNames(
-              'form-group--vendor-name',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <VendorSelectField
-              contacts={vendors}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(contact) => {
-                form.setFieldValue('vendor_id', contact.id);
-                form.setFieldValue('currency_code', contact?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <VendorButtonLink vendorId={value}>
-                <T id={'view_vendor_details'} />
-              </VendorButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <BillFormVendorField />
 
       {/* ----------- Exchange rate ----------- */}
       <BillExchangeRateInputField
@@ -190,6 +154,46 @@ function BillFormHeader() {
   );
 }
 
+/**
+ * Vendor select field of bill form.
+ * @returns {JSX.Element}
+ */
+function BillFormVendorField() {
+  const { values, setFieldValue } = useFormikContext();
+  const { vendors } = useBillFormContext();
+
+  return (
+    <FFormGroup
+      name={'vendor_id'}
+      label={<T id={'vendor_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      fastField={true}
+      shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
+    >
+      <VendorsSelect
+        name={'vendor_id'}
+        items={vendors}
+        placeholder={<T id={'select_vender_account'} />}
+        onItemChange={(contact) => {
+          setFieldValue('vendor_id', contact.id);
+          setFieldValue('currency_code', contact?.currency_code);
+        }}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
+      />
+      {values.vendor_id && (
+        <VendorButtonLink vendorId={values.vendor_id}>
+          <T id={'view_vendor_details'} />
+        </VendorButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 export default compose(withDialogActions)(BillFormHeader);
 
 const VendorButtonLink = styled(VendorDrawerLink)`

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormTopBar.tsx

@@ -1,11 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import {
   Alignment,
   NavbarGroup,
   NavbarDivider,
-  Button,
   Classes,
 } from '@blueprintjs/core';
 import {
@@ -14,12 +12,13 @@ import {
 } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
   BranchSelect,
   FeatureCan,
   WarehouseSelect,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useBillFormContext } from './BillFormProvider';
 import { Features } from '@/constants';
@@ -70,8 +69,9 @@ function BillFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={BillBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
+      fill={false}
     />
   );
 }
@@ -86,30 +86,9 @@ function BillFormSelectWarehouse() {
     <WarehouseSelect
       name={'warehouse_id'}
       warehouses={warehouses}
-      input={BillWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function BillWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('bill.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function BillBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('bill.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx

@@ -19,7 +19,10 @@ import {
   ensureEntriesHaveEmptyLine,
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
-import { isLandedCostDisabled, getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  isLandedCostDisabled,
+  getEntriesTotal,
+} from '@/containers/Entries/utils';
 import { useBillFormContext } from './BillFormProvider';
 
 export const MIN_LINES_NUMBER = 1;
@@ -153,7 +156,7 @@ export const handleDeleteErrors = (errors) => {
  */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx

@@ -9,17 +9,17 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { CLASSES } from '@/constants/classes';
 
 import {
   FFormGroup,
-  VendorSelectField,
   FieldRequiredHint,
   InputPrependButton,
   Icon,
   FormattedMessage as T,
   VendorDrawerLink,
+  VendorsSelect,
 } from '@/components';
 import {
   vendorsFieldShouldUpdate,
@@ -51,9 +51,6 @@ function VendorCreditNoteFormHeaderFields({
   vendorcreditNumberPrefix,
   vendorcreditNextNumber,
 }) {
-  // Vendor Credit form context.
-  const { vendors } = useVendorCreditNoteFormContext();
-
   // Handle vendor credit number changing.
   const handleVendorCreditNumberChange = () => {
     openDialog('vendor-credit-form');
@@ -81,39 +78,7 @@ function VendorCreditNoteFormHeaderFields({
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Vendor name ----------- */}
-      <FastField
-        name={'vendor_id'}
-        vendors={vendors}
-        shouldUpdate={vendorsFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'vendor_id'}
-            label={<T id={'vendor_name'} />}
-            inline={true}
-            className={classNames(CLASSES.FILL, 'form-group--vendor')}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <VendorSelectField
-              contacts={vendors}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(contact) => {
-                form.setFieldValue('vendor_id', contact.id);
-                form.setFieldValue('currency_code', contact?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <VendorButtonLink vendorId={value}>
-                <T id={'view_vendor_details'} />
-              </VendorButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <VendorCreditFormVendorSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <VendorCreditNoteExchangeRateInputField
@@ -205,6 +170,49 @@ function VendorCreditNoteFormHeaderFields({
   );
 }
 
+/**
+ * Vendor select field of vendor credit form.
+ * @returns {React.ReactNode}
+ */
+function VendorCreditFormVendorSelect() {
+  const { values, setFieldValue } = useFormikContext();
+
+  // Vendor Credit form context.
+  const { vendors } = useVendorCreditNoteFormContext();
+
+  return (
+    <FFormGroup
+      name={'vendor_id'}
+      label={<T id={'vendor_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      fastField={true}
+      shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
+    >
+      <VendorsSelect
+        name={'vendor_id'}
+        items={vendors}
+        placeholder={<T id={'select_vender_account'} />}
+        onItemChange={(contact) => {
+          setFieldValue('vendor_id', contact.id);
+          setFieldValue('currency_code', contact?.currency_code);
+        }}
+        popoverFill={true}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
+      />
+      {values.vendor_id && (
+        <VendorButtonLink vendorId={values.vendor_id}>
+          <T id={'view_vendor_details'} />
+        </VendorButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 export default compose(
   withDialogActions,
   withSettings(({ vendorsCreditNoteSetting }) => ({

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import {
   Alignment,
   NavbarGroup,
@@ -20,6 +19,8 @@ import {
   WarehouseSelect,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 import { Features } from '@/constants';
@@ -70,8 +71,9 @@ function VendorCreditNoteFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={VendorCreditNoteBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
+      fill={false}
     />
   );
 }
@@ -86,30 +88,9 @@ function VendorCreditFormSelectWarehouse() {
     <WarehouseSelect
       name={'warehouse_id'}
       warehouses={warehouses}
-      input={VendorCreditNoteWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function VendorCreditNoteWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('vendor_credit.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function VendorCreditNoteBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('vendor_credit.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx

@@ -113,7 +113,7 @@ export const transformFormValuesToRequest = (values) => {
  */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx

@@ -13,12 +13,14 @@ export function PaymentMadeFormFooterLeft() {
     <React.Fragment>
       {/* --------- Internal Note--------- */}
       <InternalNoteFormGroup
-        name={'internal_note'}
+        name={'statement'}
         label={<T id={'payment_made.form.internal_note.label'} />}
+        fastField={true}
       >
         <FEditableText
-          name={'internal_note'}
+          name={'statement'}
           placeholder={intl.get('payment_made.form.internal_note.placeholder')}
+          fastField={true}
         />
       </InternalNoteFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -12,14 +12,13 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
+import { FormattedMessage as T, VendorsSelect } from '@/components';
 import { toSafeInteger } from 'lodash';
 import { CLASSES } from '@/constants/classes';
 
 import {
   FFormGroup,
   AccountsSelect,
-  VendorSelectField,
   FieldRequiredHint,
   InputPrependText,
   Money,
@@ -55,8 +54,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
   } = useFormikContext();
 
   // Payment made form context.
-  const { vendors, accounts, isNewMode, setPaymentVendorId } =
-    usePaymentMadeFormContext();
+  const { accounts } = usePaymentMadeFormContext();
 
   // Sumation of payable full-amount.
   const payableFullAmount = useMemo(
@@ -82,41 +80,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ------------ Vendor name ------------ */}
-      <FastField
-        name={'vendor_id'}
-        vendors={vendors}
-        shouldUpdate={vendorsFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'vendor_id'}
-            label={<T id={'vendor_name'} />}
-            inline={true}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <VendorSelectField
-              contacts={vendors}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(contact) => {
-                form.setFieldValue('vendor_id', contact.id);
-                form.setFieldValue('currency_code', contact?.currency_code);
-                setPaymentVendorId(contact.id);
-              }}
-              disabled={!isNewMode}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <VendorButtonLink vendorId={value}>
-                <T id={'view_vendor_details'} />
-              </VendorButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <PaymentFormVendorSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <PaymentMadeExchangeRateInputField
@@ -258,6 +222,52 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
   );
 }
 
+/**
+ * Vendor select field of payment receive form.
+ * @returns {React.ReactNode}
+ */
+function PaymentFormVendorSelect() {
+  // Formik form context.
+  const { values, setFieldValue } = useFormikContext();
+
+  // Payment made form context.
+  const { vendors, isNewMode, setPaymentVendorId } =
+    usePaymentMadeFormContext();
+
+  return (
+    <FFormGroup
+      name={'vendor_id'}
+      label={<T id={'vendor_name'} />}
+      labelInfo={<FieldRequiredHint />}
+      inline={true}
+      fastField={true}
+      shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
+    >
+      <VendorsSelect
+        name={'vendor_id'}
+        items={vendors}
+        placeholder={<T id={'select_vender_account'} />}
+        onItemChange={(contact) => {
+          setFieldValue('vendor_id', contact.id);
+          setFieldValue('currency_code', contact?.currency_code);
+          setPaymentVendorId(contact.id);
+        }}
+        disabled={!isNewMode}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
+      />
+      {values.vendor_id && (
+        <VendorButtonLink vendorId={values.vendor_id}>
+          <T id={'view_vendor_details'} />
+        </VendorButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);
 
 const VendorButtonLink = styled(VendorDrawerLink)`

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.tsx

@@ -1,15 +1,14 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
-import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core';
+import { Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
   BranchSelect,
   FeatureCan,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { Features } from '@/constants';
@@ -50,19 +49,9 @@ function PaymentMadeFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={PaymentMadeBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function PaymentMadeBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('payment_made.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx

@@ -15,6 +15,7 @@ import {
   formattedAmount,
 } from '@/utils';
 import { useCurrentOrganization } from '@/hooks/state';
+import { PAYMENT_MADE_ERRORS } from '../constants';
 
 export const ERRORS = {
   PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
@@ -74,7 +75,7 @@ export const transformToNewPageEntries = (entries) => {
  */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
@@ -124,10 +125,10 @@ export const useSetPrimaryBranchToForm = () => {
 export const transformErrors = (errors, { setFieldError }) => {
   const getError = (errorType) => errors.find((e) => e.type === errorType);
 
-  if (getError('PAYMENT_NUMBER_NOT_UNIQUE')) {
+  if (getError(PAYMENT_MADE_ERRORS.PAYMENT_NUMBER_NOT_UNIQUE)) {
     setFieldError('payment_number', intl.get('payment_number_is_not_unique'));
   }
-  if (getError('WITHDRAWAL_ACCOUNT_CURRENCY_INVALID')) {
+  if (getError(PAYMENT_MADE_ERRORS.WITHDRAWAL_ACCOUNT_CURRENCY_INVALID)) {
     AppToaster.show({
       message: intl.get(
         'payment_made.error.withdrawal_account_currency_invalid',

packages/webapp/src/containers/Purchases/PaymentMades/constants.ts

@@ -0,0 +1,5 @@
+export const PAYMENT_MADE_ERRORS = {
+  PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
+  WITHDRAWAL_ACCOUNT_CURRENCY_INVALID: 'WITHDRAWAL_ACCOUNT_CURRENCY_INVALID',
+  INVALID_BILL_PAYMENT_AMOUNT: 'INVALID_BILL_PAYMENT_AMOUNT'
+};

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx

@@ -4,15 +4,16 @@ import classNames from 'classnames';
 import styled from 'styled-components';
 import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 
 import { CLASSES } from '@/constants/classes';
 import {
-  CustomerSelectField,
   FieldRequiredHint,
   Icon,
   FormattedMessage as T,
   CustomerDrawerLink,
+  FFormGroup,
+  CustomersSelect,
 } from '@/components';
 import { customerNameFieldShouldUpdate } from './utils';
 
@@ -30,49 +31,10 @@ import {
  * Credit note form header fields.
  */
 export default function CreditNoteFormHeaderFields({}) {
-  // Credit note form context.
-  const { customers } = useCreditNoteFormContext();
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
-      <FastField
-        name={'customer_id'}
-        customers={customers}
-        shouldUpdate={customerNameFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'customer_name'} />}
-            inline={true}
-            className={classNames(
-              'form-group--customer-name',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'customer_id'} />}
-          >
-            <CustomerSelectField
-              contacts={customers}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer.id);
-                form.setFieldValue('currency_code', customer?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-            {value && (
-              <CustomerButtonLink customerId={value}>
-                <T id={'view_customer_details'} />
-              </CustomerButtonLink>
-            )}
-          </FormGroup>
-        )}
-      </FastField>
+      <CreditNoteCustomersSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <CreditNoteExchangeRateInputField
@@ -125,6 +87,48 @@ export default function CreditNoteFormHeaderFields({}) {
   );
 }
 
+/**
+ * Customer select field of credit note form.
+ * @returns {React.ReactNode}
+ */
+function CreditNoteCustomersSelect() {
+  // Credit note form context.
+  const { customers } = useCreditNoteFormContext();
+  const { setFieldValue, values } = useFormikContext();
+
+  return (
+    <FFormGroup
+      name={'customer_id'}
+      label={<T id={'customer_name'} />}
+      labelInfo={<FieldRequiredHint />}
+      inline={true}
+      fastField={true}
+      shouldUpdate={customerNameFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
+    >
+      <CustomersSelect
+        name={'customer_id'}
+        items={customers}
+        placeholder={<T id={'select_customer_account'} />}
+        onItemChange={(customer) => {
+          setFieldValue('customer_id', customer.id);
+          setFieldValue('currency_code', customer?.currency_code);
+        }}
+        popoverFill={true}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={customerNameFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
+      />
+      {values.customer_id && (
+        <CustomerButtonLink customerId={values.customer_id}>
+          <T id={'view_customer_details'} />
+        </CustomerButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.tsx

@@ -1,11 +1,10 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
+
 import {
   Alignment,
   NavbarGroup,
   NavbarDivider,
-  Button,
   Classes,
 } from '@blueprintjs/core';
 import {
@@ -15,12 +14,13 @@ import {
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
   BranchSelect,
   FeatureCan,
   WarehouseSelect,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 
@@ -70,8 +70,9 @@ function CreditNoteFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={CreditNoteBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
+      fill={false}
     />
   );
 }
@@ -86,30 +87,9 @@ function CreditFormSelectWarehouse() {
     <WarehouseSelect
       name={'warehouse_id'}
       warehouses={warehouses}
-      input={CreditNoteWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function CreditNoteWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('credit_note.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function CreditNoteBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('credit_note.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx

@@ -116,7 +116,7 @@ export const transformFormValuesToRequest = (values) => {
  */
 export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx

@@ -4,16 +4,16 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 
 import {
   FeatureCan,
   FFormGroup,
   FormattedMessage as T,
-  CustomerSelectField,
   FieldRequiredHint,
   Icon,
   CustomerDrawerLink,
+  CustomersSelect,
 } from '@/components';
 import {
   momentFormatter,
@@ -42,41 +42,7 @@ export default function EstimateFormHeader() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
-      <FastField
-        name={'customer_id'}
-        customers={customers}
-        shouldUpdate={customersFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'customer_name'} />}
-            inline={true}
-            className={classNames(CLASSES.FILL, 'form-group--customer')}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'customer_id'} />}
-          >
-            <CustomerSelectField
-              contacts={customers}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer.id);
-                form.setFieldValue('currency_code', customer?.currency_code);
-              }}
-              popoverFill={true}
-              intent={inputIntent({ error, touched })}
-              allowCreate={true}
-            />
-
-            {value && (
-              <CustomerButtonLink customerId={value}>
-                <T id={'view_customer_details'} />
-              </CustomerButtonLink>
-            )}
-          </FormGroup>
-        )}
-      </FastField>
+      <EstimateFormCustomerSelect />
 
       {/* ----------- Exchange Rate ----------- */}
       <EstimateExchangeRateInputField
@@ -177,6 +143,47 @@ export default function EstimateFormHeader() {
   );
 }
 
+/**
+ * Customer select field of estimate form.
+ * @returns {React.ReactNode}
+ */
+function EstimateFormCustomerSelect() {
+  const { setFieldValue, values } = useFormikContext();
+  const { customers } = useEstimateFormContext();
+
+  return (
+    <FFormGroup
+      label={<T id={'customer_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      name={'customer_id'}
+      fastField={true}
+      shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
+    >
+      <CustomersSelect
+        name={'customer_id'}
+        items={customers}
+        placeholder={<T id={'select_customer_account'} />}
+        onItemChange={(customer) => {
+          setFieldValue('customer_id', customer.id);
+          setFieldValue('currency_code', customer?.currency_code);
+        }}
+        popoverFill={true}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
+      />
+      {values.customer_id && (
+        <CustomerButtonLink customerId={values.customer_id}>
+          <T id={'view_customer_details'} />
+        </CustomerButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.tsx

@@ -1,11 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import {
   Alignment,
   NavbarGroup,
   NavbarDivider,
-  Button,
   Classes,
 } from '@blueprintjs/core';
 import {
@@ -15,12 +13,13 @@ import {
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
   BranchSelect,
   FeatureCan,
   WarehouseSelect,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 import { useEstimateFormContext } from './EstimateFormProvider';
 
@@ -70,8 +69,9 @@ function EstimateFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={EstimateBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
+      fill={false}
     />
   );
 }
@@ -86,30 +86,9 @@ function EstimateFormSelectWarehouse() {
     <WarehouseSelect
       name={'warehouse_id'}
       warehouses={warehouses}
-      input={EstimateWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function EstimateWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('estimate.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function EstimateBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('estimate.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx

@@ -80,7 +80,7 @@ export const transformToEditForm = (estimate) => {
  */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -12,9 +12,9 @@ import {
   Col,
   Row,
   CustomerDrawerLink,
-  CustomerSelectField,
   FieldRequiredHint,
   FeatureCan,
+  CustomersSelect,
 } from '@/components';
 import {
   momentFormatter,
@@ -42,49 +42,13 @@ import { Features } from '@/constants';
  */
 export default function InvoiceFormHeaderFields() {
   // Invoice form context.
-  const { customers, projects } = useInvoiceFormContext();
+  const { projects } = useInvoiceFormContext();
   const { values } = useFormikContext();
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
-      <FastField
-        name={'customer_id'}
-        customers={customers}
-        shouldUpdate={customerNameFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'customer_id'}
-            label={<T id={'customer_name'} />}
-            inline={true}
-            className={classNames(
-              'form-group--customer-name',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <CustomerSelectField
-              contacts={customers}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer.id);
-                form.setFieldValue('currency_code', customer?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <CustomerButtonLink customerId={value}>
-                <T id={'view_customer_details'} />
-              </CustomerButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <InvoiceFormCustomerSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <InvoiceExchangeRateInputField
@@ -192,6 +156,46 @@ export default function InvoiceFormHeaderFields() {
   );
 }
 
+/**
+ * Customer select field of the invoice form.
+ * @returns {React.ReactNode}
+ */
+function InvoiceFormCustomerSelect() {
+  const { customers } = useInvoiceFormContext();
+  const { values, setFieldValue } = useFormikContext();
+
+  return (
+    <FFormGroup
+      name={'customer_id'}
+      label={<T id={'customer_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      fastField={true}
+      shouldUpdate={customerNameFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
+    >
+      <CustomersSelect
+        name={'customer_id'}
+        items={customers}
+        placeholder={<T id={'select_customer_account'} />}
+        onItemChange={(customer) => {
+          setFieldValue('customer_id', customer.id);
+          setFieldValue('currency_code', customer?.currency_code);
+        }}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={customerNameFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
+      />
+      {values.customer_id && (
+        <CustomerButtonLink customerId={values.customer_id}>
+          <T id={'view_customer_details'} />
+        </CustomerButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.tsx

@@ -1,12 +1,10 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
   Alignment,
   NavbarGroup,
   NavbarDivider,
-  Button,
   Classes,
 } from '@blueprintjs/core';
 import {
@@ -18,11 +16,12 @@ import { Features } from '@/constants';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
   BranchSelect,
   FeatureCan,
   WarehouseSelect,
   FormTopbar,
+  FormWarehouseSelectButton,
+  FormBranchSelectButton,
 } from '@/components';
 
 /**
@@ -70,8 +69,9 @@ function InvoiceFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={InvoiceBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
+      fill={false}
     />
   );
 }
@@ -86,30 +86,9 @@ function InvoiceFormSelectWarehouse() {
     <WarehouseSelect
       name={'warehouse_id'}
       warehouses={warehouses}
-      input={InvoiceWarehouseSelectButton}
+      input={FormWarehouseSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function InvoiceWarehouseSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('invoice.warehouse_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
-    />
-  );
-}
-
-function InvoiceBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('invoice.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx

@@ -114,7 +114,7 @@ export const transformErrors = (errors, { setErrors }) => {
  */
 export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx

@@ -7,25 +7,18 @@ import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
 export function PaymentReceiveFormFootetLeft() {
   return (
     <React.Fragment>
-      {/* --------- Statement--------- */}
-      <PaymentMsgFormGroup
-        name={'message'}
-        label={<T id={'payment_receive_form.message.label'} />}
-      >
-        <FEditableText
-          name={'message'}
-          placeholder={intl.get('payment_receive_form.message.placeholder')}
-        />
-      </PaymentMsgFormGroup>
-
       {/* --------- Internal Note--------- */}
       <TermsConditsFormGroup
-        name={'internal_note'}
+        name={'statement'}
         label={<T id={'payment_receive_form.label.note'} />}
+        fastField={true}
       >
         <FEditableText
-          name={'internal_note'}
-          placeholder={intl.get('payment_receive_form.internal_note.placeholder')}
+          name={'statement'}
+          placeholder={intl.get(
+            'payment_receive_form.internal_note.placeholder',
+          )}
+          fastField={true}
         />
       </TermsConditsFormGroup>
     </React.Fragment>
@@ -43,17 +36,3 @@ const TermsConditsFormGroup = styled(FFormGroup)`
     }
   }
 `;
-
-const PaymentMsgFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
-    margin-bottom: 40px;
-
-    .bp3-label {
-      font-size: 12px;
-      margin-bottom: 12px;
-    }
-    .bp3-form-content {
-      margin-left: 10px;
-    }
-  }
-`;

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.tsx

@@ -1,22 +1,21 @@
 // @ts-nocheck
 import React from 'react';
-import intl from 'react-intl-universal';
-import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core';
+import { Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from '@/hooks/state';
 import {
-  Icon,
   BranchSelect,
   FeatureCan,
   FormTopbar,
   DetailsBarSkeletonBase,
+  FormBranchSelectButton,
 } from '@/components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { Features } from '@/constants';
 
 /**
  * Payment receive from top bar.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function PaymentReceiveFormTopBar() {
   // Features guard.
@@ -29,7 +28,6 @@ export default function PaymentReceiveFormTopBar() {
   if (!featureCan(Features.Branches)) {
     return null;
   }
-
   return (
     <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
@@ -41,6 +39,10 @@ export default function PaymentReceiveFormTopBar() {
   );
 }
 
+/**
+ * Branch select of payment receive form.
+ * @returns {JSX.Element}
+ */
 function PaymentReceiveFormSelectBranch() {
   // payment receive form context.
   const { branches, isBranchesLoading } = usePaymentReceiveFormContext();
@@ -51,19 +53,9 @@ function PaymentReceiveFormSelectBranch() {
     <BranchSelect
       name={'branch_id'}
       branches={branches}
-      input={PaymentReceiveBranchSelectButton}
+      input={FormBranchSelectButton}
       popoverProps={{ minimal: true }}
-    />
-  );
-}
-
-function PaymentReceiveBranchSelectButton({ label }) {
-  return (
-    <Button
-      text={intl.get('payment_receive.branch_button.label', { label })}
-      minimal={true}
-      small={true}
-      icon={<Icon icon={'branch-16'} iconSize={16} />}
+      fill={false}
     />
   );
 }

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -14,8 +14,11 @@ import { DateInput } from '@blueprintjs/datetime';
 import { toSafeInteger } from 'lodash';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 
-import { FeatureCan, FormattedMessage as T } from '@/components';
-import { useAutofocus } from '@/hooks';
+import {
+  FeatureCan,
+  CustomersSelect,
+  FormattedMessage as T,
+} from '@/components';
 import { CLASSES } from '@/constants/classes';
 import {
   safeSumBy,
@@ -27,7 +30,6 @@ import {
 import {
   FFormGroup,
   AccountsSelect,
-  CustomerSelectField,
   FieldRequiredHint,
   Icon,
   MoneyInputGroup,
@@ -58,8 +60,7 @@ import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField';
  */
 export default function PaymentReceiveHeaderFields() {
   // Payment receive form context.
-  const { customers, accounts, projects, isNewMode } =
-    usePaymentReceiveFormContext();
+  const { accounts, projects } = usePaymentReceiveFormContext();
 
   // Formik form context.
   const {
@@ -67,8 +68,6 @@ export default function PaymentReceiveHeaderFields() {
     setFieldValue,
   } = useFormikContext();
 
-  const customerFieldRef = useAutofocus();
-
   // Calculates the full-amount received.
   const totalDueAmount = useMemo(
     () => safeSumBy(entries, 'due_amount'),
@@ -91,45 +90,7 @@ export default function PaymentReceiveHeaderFields() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ------------- Customer name ------------- */}
-      <FastField
-        name={'customer_id'}
-        customers={customers}
-        shouldUpdate={customersFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'customer_name'} />}
-            inline={true}
-            className={classNames('form-group--select-list', CLASSES.FILL)}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'customer_id'} />}
-          >
-            <CustomerSelectField
-              contacts={customers}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer.id);
-                form.setFieldValue('full_amount', '');
-                form.setFieldValue('currency_code', customer?.currency_code);
-              }}
-              popoverFill={true}
-              disabled={!isNewMode}
-              buttonProps={{
-                elementRef: (ref) => (customerFieldRef.current = ref),
-              }}
-              allowCreate={true}
-            />
-
-            {value && (
-              <CustomerButtonLink customerId={value}>
-                <T id={'view_customer_details'} />
-              </CustomerButtonLink>
-            )}
-          </FormGroup>
-        )}
-      </FastField>
+      <PaymentReceiveCustomerSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <PaymentReceiveExchangeRateInputField
@@ -276,3 +237,49 @@ const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;
 `;
+
+/**
+ * Customer select field of payment receive form.
+ * @returns {React.ReactNode}
+ */
+function PaymentReceiveCustomerSelect() {
+  // Payment receive form context.
+  const { customers, isNewMode } = usePaymentReceiveFormContext();
+
+  // Formik form context.
+  const { values, setFieldValue } = useFormikContext();
+
+  return (
+    <FFormGroup
+      label={<T id={'customer_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      name={'customer_id'}
+      fastField={true}
+      shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
+    >
+      <CustomersSelect
+        name={'customer_id'}
+        items={customers}
+        placeholder={<T id={'select_customer_account'} />}
+        onItemChange={(customer) => {
+          setFieldValue('customer_id', customer.id);
+          setFieldValue('full_amount', '');
+          setFieldValue('currency_code', customer?.currency_code);
+        }}
+        popoverFill={true}
+        disabled={!isNewMode}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
+      />
+      {values.customer_id && (
+        <CustomerButtonLink customerId={values.customer_id}>
+          <T id={'view_customer_details'} />
+        </CustomerButtonLink>
+      )}
+    </FFormGroup>
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx

@@ -129,7 +129,7 @@ export const fullAmountPaymentEntries = (entries) => {
  */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 
 import { CLASSES } from '@/constants/classes';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
@@ -12,7 +12,7 @@ import { Features } from '@/constants';
 import {
   FFormGroup,
   AccountsSelect,
-  CustomerSelectField,
+  CustomersSelect,
   FieldRequiredHint,
   Icon,
   CustomerDrawerLink,
@@ -38,44 +38,12 @@ import { ReceiptFormReceiptNumberField } from './ReceiptFormReceiptNumberField';
  * Receipt form header fields.
  */
 export default function ReceiptFormHeader() {
-  const { accounts, customers, projects } = useReceiptFormContext();
+  const { accounts, projects } = useReceiptFormContext();
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
-      <FastField
-        name={'customer_id'}
-        customers={customers}
-        shouldUpdate={customersFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'customer_name'} />}
-            inline={true}
-            className={classNames(CLASSES.FILL, 'form-group--customer')}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'customer_id'} />}
-          >
-            <CustomerSelectField
-              contacts={customers}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer.id);
-                form.setFieldValue('currency_code', customer?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-            {value && (
-              <CustomerButtonLink customerId={value}>
-                <T id={'view_customer_details'} />
-              </CustomerButtonLink>
-            )}
-          </FormGroup>
-        )}
-      </FastField>
+      <ReceiptFormCustomerSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <ReceiptExchangeRateInputField
@@ -172,6 +140,47 @@ export default function ReceiptFormHeader() {
   );
 }
 
+/**
+ * Customer select field of receipt form.
+ * @returns {React.ReactNode}
+ */
+function ReceiptFormCustomerSelect() {
+  const { setFieldValue, values } = useFormikContext();
+  const { customers } = useReceiptFormContext();
+
+  return (
+    <FFormGroup
+      name={'customer_id'}
+      label={<T id={'customer_name'} />}
+      labelInfo={<FieldRequiredHint />}
+      inline={true}
+      fastField={true}
+      shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
+    >
+      <CustomersSelect
+        name={'customer_id'}
+        items={customers}
+        placeholder={<T id={'select_customer_account'} />}
+        onItemChange={(customer) => {
+          setFieldValue('customer_id', customer.id);
+          setFieldValue('currency_code', customer?.currency_code);
+        }}
+        popoverFill={true}
+        allowCreate={true}
+        fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
+      />
+      {values.customer_id && (
+        <CustomerButtonLink customerId={values.customer_id}>
+          <T id={'view_customer_details'} />
+        </CustomerButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;