Merge pull request #134 from bigcapitalhq/contacts-opening-balance-exchange-rate

fix(webapp): customer/vendor opening balance with exchange rate

.env.example

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

.gitattributes

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

docker-compose.prod.yml

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

docker-compose.yml

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

docker/mariadb/Dockerfile

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

docker/mariadb/init.sql

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

packages/server/scripts/webpack.common.js

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

packages/server/src/interfaces/Ledger.ts

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

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

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

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

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

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

@@ -28,6 +28,8 @@ const ERROR = {
   CREDIT_DEBIT_SUMATION_SHOULD_NOT_EQUAL_ZERO:
     'CREDIT.DEBIT.SUMATION.SHOULD.NOT.EQUAL.ZERO',
   ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
+  COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS:
+    'COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS',
 };
 
 export const MIN_LINES_NUMBER = 1;
@@ -161,6 +163,15 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
       intl.get('journal_number_is_already_used'),
     );
   }
+  if (
+    (error = getError(ERROR.COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS))
+  ) {
+    toastMessages.push(
+      intl.get(
+        'make_journal.errors.should_add_accounts_in_same_currency_or_base_currency',
+      ),
+    );
+  }
   setErrors({ ...newErrors });
 
   if (toastMessages.length > 0) {

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

@@ -1,15 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import moment from 'moment';
 import classNames from 'classnames';
 import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { Features } from '@/constants';
 import {
   FFormGroup,
   FormattedMessage as T,
-  MoneyInputGroup,
   InputPrependText,
   CurrencySelectList,
   BranchSelect,
@@ -17,10 +14,17 @@ import {
   FeatureCan,
   Row,
   Col,
+  FMoneyInputGroup,
+  ExchangeRateInputGroup,
+  FDateInput,
 } from '@/components';
 import { useCustomerFormContext } from './CustomerFormProvider';
-import { useSetPrimaryBranchToForm } from './utils';
-import { momentFormatter, tansformDateValue, inputIntent } from '@/utils';
+import {
+  openingBalanceFieldShouldUpdate,
+  useIsCustomerForeignCurrency,
+  useSetPrimaryBranchToForm,
+} from './utils';
+import { useCurrentOrganization } from '@/hooks/state';
 
 /**
  * Customer financial panel.
@@ -35,76 +39,6 @@ export default function CustomerFinancialPanel() {
     <div className={'tab-panel--financial'}>
       <Row>
         <Col xs={6}>
-          {/*------------ Opening balance at -----------*/}
-          <FastField name={'opening_balance_at'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'opening_balance_at'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="opening_balance_at" />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={(date) => {
-                    form.setFieldValue(
-                      'opening_balance_at',
-                      moment(date).format('YYYY-MM-DD'),
-                    );
-                  }}
-                  value={tansformDateValue(value)}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  disabled={customerId}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------ Opening balance  -----------*/}
-          <FastField name={'opening_balance'}>
-            {({ form, field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'opening_balance'} />}
-                className={classNames(
-                  'form-group--opening-balance',
-                  Classes.FILL,
-                )}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-              >
-                <ControlGroup>
-                  <InputPrependText text={form.values.currency_code} />
-                  <MoneyInputGroup
-                    value={value}
-                    inputGroupProps={{ fill: true }}
-                    disabled={customerId}
-                    onChange={(balance) => {
-                      form.setFieldValue('opening_balance', balance);
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------ Opening branch  -----------*/}
-          <FeatureCan feature={Features.Branches}>
-            <FFormGroup
-              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>
-          </FeatureCan>
-
           {/*------------ Currency  -----------*/}
           <FastField name={'currency_code'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
@@ -123,12 +57,130 @@ export default function CustomerFinancialPanel() {
                   onCurrencySelected={(currency) => {
                     form.setFieldValue('currency_code', currency.currency_code);
                   }}
+                  disabled={customerId}
                 />
               </FormGroup>
             )}
           </FastField>
+
+          {/*------------ Opening balance  -----------*/}
+          <CustomerOpeningBalanceField />
+
+          {/*------ Opening Balance Exchange Rate  -----*/}
+          <CustomerOpeningBalanceExchangeRateField />
+
+          {/*------------ Opening balance at -----------*/}
+          <CustomerOpeningBalanceAtField />
+
+          {/*------------ Opening branch  -----------*/}
+          <FeatureCan feature={Features.Branches}>
+            <FFormGroup
+              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>
+          </FeatureCan>
         </Col>
       </Row>
     </div>
   );
 }
+
+/**
+ * Customer opening balance at date field.
+ * @returns {JSX.Element}
+ */
+function CustomerOpeningBalanceAtField() {
+  const { customerId } = useCustomerFormContext();
+
+  // Cannot continue if the customer id is defined.
+  if (customerId) return null;
+
+  return (
+    <FormGroup
+      name={'opening_balance_at'}
+      label={<T id={'opening_balance_at'} />}
+      inline={true}
+      helperText={<ErrorMessage name="opening_balance_at" />}
+    >
+      <FDateInput
+        name={'opening_balance_at'}
+        popoverProps={{ position: Position.BOTTOM, minimal: true }}
+        disabled={customerId}
+        formatDate={(date) => date.toLocaleDateString()}
+        parseDate={(str) => new Date(str)}
+        fill={true}
+      />
+    </FormGroup>
+  );
+}
+
+/**
+ * Customer opening balance field.
+ * @returns {JSX.Element}
+ */
+function CustomerOpeningBalanceField() {
+  const { customerId } = useCustomerFormContext();
+  const { values } = useFormikContext();
+
+  // Cannot continue if the customer id is defined.
+  if (customerId) return null;
+
+  return (
+    <FFormGroup
+      label={<T id={'opening_balance'} />}
+      name={'opening_balance'}
+      inline={true}
+      shouldUpdate={openingBalanceFieldShouldUpdate}
+      shouldUpdateDeps={{ currencyCode: values.currency_code }}
+      fastField={true}
+    >
+      <ControlGroup>
+        <InputPrependText text={values.currency_code} />
+        <FMoneyInputGroup
+          name={'opening_balance'}
+          inputGroupProps={{ fill: true }}
+        />
+      </ControlGroup>
+    </FFormGroup>
+  );
+}
+
+/**
+ * Customer opening balance exchange rate field if the customer has foreign
+ * currency.
+ * @returns {JSX.Element}
+ */
+function CustomerOpeningBalanceExchangeRateField() {
+  const { values } = useFormikContext();
+  const { customerId } = useCustomerFormContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignJouranl = useIsCustomerForeignCurrency();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignJouranl || customerId) {
+    return null;
+  }
+  return (
+    <FFormGroup
+      label={' '}
+      name={'opening_balance_exchange_rate'}
+      inline={true}
+    >
+      <ExchangeRateInputGroup
+        fromCurrency={values.currency_code}
+        toCurrency={currentOrganization.base_currency}
+        name={'opening_balance_exchange_rate'}
+      />
+    </FFormGroup>
+  );
+}

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

@@ -32,11 +32,6 @@ export default function CustomersTabs() {
           title={intl.get('notes')}
           panel={<CustomerNotePanel />}
         />
-        <Tab
-          id={'attachement'}
-          title={intl.get('attachement')}
-          panel={<CustomerAttachmentTabs />}
-        />
       </Tabs>
     </div>
   );

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

@@ -5,6 +5,7 @@ import { useFormikContext } from 'formik';
 import { first } from 'lodash';
 
 import { useCustomerFormContext } from './CustomerFormProvider';
+import { useCurrentOrganization } from '@/hooks/state';
 
 export const defaultInitialValues = {
   customer_type: 'business',
@@ -37,9 +38,11 @@ export const defaultInitialValues = {
   shipping_address_postcode: '',
   shipping_address_phone: '',
 
-  opening_balance: '',
   currency_code: '',
+
+  opening_balance: '',
   opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+  opening_balance_exchange_rate: '',
   opening_balance_branch_id: '',
 };
 
@@ -57,3 +60,25 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+/**
+ * Detarmines whether the current customer has foreign currency. 
+ * @returns {boolean}
+ */
+export const useIsCustomerForeignCurrency = () => {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  return currentOrganization.base_currency !== values.currency_code;
+};
+
+/**
+ * Detarmines the exchange opening balance field when should update.
+ */
+export const openingBalanceFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.shouldUpdateDeps.currencyCode !==
+      oldProps.shouldUpdateDeps.currencyCode ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};

packages/webapp/src/containers/Customers/CustomersLanding/components.tsx

@@ -38,7 +38,6 @@ export function ActionsMenu({
       />
       <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
         <MenuDivider />
-
         <MenuItem
           icon={<Icon icon="pen-18" />}
           text={intl.get('edit_customer')}
@@ -47,7 +46,7 @@ export function ActionsMenu({
       </Can>
       <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
         <MenuItem
-          icon={<Icon icon="duplicate-16" />}
+          icon={<Icon icon="content-copy" iconSize={16} />}
           text={intl.get('duplicate')}
           onClick={safeCallback(onDuplicate, original)}
         />

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormFloatingActions.tsx

@@ -8,7 +8,6 @@ import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormPr
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';
 
-
 /**
  * Customer Opening balance floating actions.
  * @returns
@@ -31,6 +30,9 @@ function CustomerOpeningBalanceFormFloatingActions({
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
@@ -39,9 +41,6 @@ function CustomerOpeningBalanceFormFloatingActions({
         >
           {<T id={'edit'} />}
         </Button>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
-          <T id={'cancel'} />
-        </Button>
       </div>
     </div>
   );

packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx

@@ -1,14 +1,11 @@
 // @ts-nocheck
 import React from 'react';
-import moment from 'moment';
 import classNames from 'classnames';
 import { FormGroup, ControlGroup, Position, Classes } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { Features } from '@/constants';
 import {
   FFormGroup,
-  MoneyInputGroup,
   InputPrependText,
   CurrencySelectList,
   BranchSelect,
@@ -17,16 +14,23 @@ import {
   Row,
   Col,
   FormattedMessage as T,
+  FMoneyInputGroup,
+  ExchangeRateInputGroup,
+  FDateInput,
 } from '@/components';
-import { useSetPrimaryBranchToForm } from './utils';
-import { momentFormatter, tansformDateValue, inputIntent } from '@/utils';
+import {
+  openingBalanceFieldShouldUpdate,
+  useIsVendorForeignCurrency,
+  useSetPrimaryBranchToForm,
+} from './utils';
 import { useVendorFormContext } from './VendorFormProvider';
+import { useCurrentOrganization } from '@/hooks/state';
 
 /**
  * Vendor Finaniceal Panel Tab.
  */
 export default function VendorFinanicalPanelTab() {
-  const { vendorId, currencies, branches } = useVendorFormContext();
+  const { currencies, branches } = useVendorFormContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -35,78 +39,6 @@ export default function VendorFinanicalPanelTab() {
     <div className={'tab-panel--financial'}>
       <Row>
         <Col xs={6}>
-          {/*------------ Opening balance at -----------*/}
-          <FastField name={'opening_balance_at'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'opening_balance_at'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="opening_balance_at" />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={(date) => {
-                    form.setFieldValue(
-                      'opening_balance_at',
-                      moment(date).format('YYYY-MM-DD'),
-                    );
-                  }}
-                  value={tansformDateValue(value)}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  disabled={vendorId}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-          {/*------------ Opening balance  -----------*/}
-          <FastField name={'opening_balance'}>
-            {({ form, field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'opening_balance'} />}
-                className={classNames(
-                  'form-group--opening-balance',
-                  Classes.FILL,
-                )}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-              >
-                <ControlGroup>
-                  <InputPrependText text={form.values.currency_code} />
-                  <MoneyInputGroup
-                    value={value}
-                    inputGroupProps={{
-                      fill: true,
-                      // ...field,
-                    }}
-                    onChange={(balance) => {
-                      form.setFieldValue('opening_balance', balance);
-                    }}
-                    disabled={vendorId}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------ Opening branch  -----------*/}
-          <FeatureCan feature={Features.Branches}>
-            <FFormGroup
-              label={<T id={'vendor.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>
-          </FeatureCan>
-
           {/*------------ Currency  -----------*/}
           <FastField name={'currency_code'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
@@ -129,8 +61,121 @@ export default function VendorFinanicalPanelTab() {
               </FormGroup>
             )}
           </FastField>
+
+          {/*------------ Opening balance -----------*/}
+          <VendorOpeningBalanceField />
+          <VendorOpeningBalanceExchangeRateField />
+
+          {/*------------ Opening balance at  -----------*/}
+          <VendorOpeningBalanceAtField />
+
+          {/*------------ Opening branch  -----------*/}
+          <FeatureCan feature={Features.Branches}>
+            <FFormGroup
+              label={<T id={'vendor.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>
+          </FeatureCan>
         </Col>
       </Row>
     </div>
   );
 }
+
+/**
+ * Vendor opening balance field.
+ * @returns {JSX.Element}
+ */
+function VendorOpeningBalanceField() {
+  const { vendorId } = useVendorFormContext();
+  const { values } = useFormikContext();
+
+  // Cannot continue if the vendor id is defined.
+  if (vendorId) return null;
+
+  return (
+    <FFormGroup
+      name={'opening_balance'}
+      label={<T id={'opening_balance'} />}
+      inline={true}
+      shouldUpdate={openingBalanceFieldShouldUpdate}
+      shouldUpdateDeps={{ currencyCode: values.currency_code }}
+      fastField={true}
+    >
+      <ControlGroup>
+        <InputPrependText text={values.currency_code} />
+        <FMoneyInputGroup
+          name={'opening_balance'}
+          inputGroupProps={{ fill: true }}
+        />
+      </ControlGroup>
+    </FFormGroup>
+  );
+}
+
+/**
+ * Vendor opening balance at date field.
+ * @returns {JSX.Element}
+ */
+function VendorOpeningBalanceAtField() {
+  const { vendorId } = useVendorFormContext();
+
+  // Cannot continue if the vendor id is defined.
+  if (vendorId) return null;
+
+  return (
+    <FFormGroup
+      name={'opening_balance_at'}
+      label={<T id={'opening_balance_at'} />}
+      inline={true}
+      helperText={<ErrorMessage name="opening_balance_at" />}
+    >
+      <FDateInput
+        name={'opening_balance_at'}
+        popoverProps={{ position: Position.BOTTOM, minimal: true }}
+        disabled={vendorId}
+        formatDate={(date) => date.toLocaleDateString()}
+        parseDate={(str) => new Date(str)}
+        fill={true}
+      />
+    </FFormGroup>
+  );
+}
+
+/**
+ * Vendor opening balance exchange rate field if the vendor has foreign currency.
+ * @returns {JSX.Element}
+ */
+function VendorOpeningBalanceExchangeRateField() {
+  const { values } = useFormikContext();
+  const { vendorId } = useVendorFormContext();
+  const isForeignVendor = useIsVendorForeignCurrency();
+  const currentOrganization = useCurrentOrganization();
+
+  // Cannot continue if the current vendor does not have foreign currency.
+  if (!isForeignVendor || vendorId) {
+    return null;
+  }
+  return (
+    <FFormGroup
+      label={' '}
+      name={'opening_balance_exchange_rate'}
+      inline={true}
+    >
+      <ExchangeRateInputGroup
+        fromCurrency={values.currency_code}
+        toCurrency={currentOrganization.base_currency}
+        name={'opening_balance_exchange_rate'}
+      />
+    </FFormGroup>
+  );
+}

packages/webapp/src/containers/Vendors/VendorForm/VendorsTabs.tsx

@@ -6,7 +6,6 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import { CLASSES } from '@/constants/classes';
 
 import VendorFinanicalPanelTab from './VendorFinanicalPanelTab';
-import VendorAttahmentTab from './VendorAttahmentTab';
 
 import CustomerAddressTabs from '@/containers/Customers/CustomerForm/CustomerAddressTabs';
 import CustomerNotePanel from '@/containers/Customers/CustomerForm/CustomerNotePanel';
@@ -15,7 +14,6 @@ import CustomerNotePanel from '@/containers/Customers/CustomerForm/CustomerNoteP
  * Vendor form tabs.
  */
 export default function VendorTabs() {
-  
   return (
     <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
       <Tabs
@@ -27,7 +25,7 @@ export default function VendorTabs() {
         <Tab
           id={'financial'}
           title={intl.get('financial_details')}
-          panel={<VendorFinanicalPanelTab  />}
+          panel={<VendorFinanicalPanelTab />}
         />
         <Tab
           id={'address'}
@@ -39,11 +37,6 @@ export default function VendorTabs() {
           title={intl.get('notes')}
           panel={<CustomerNotePanel />}
         />
-        <Tab
-          id={'attachement'}
-          title={intl.get('attachement')}
-          panel={<VendorAttahmentTab />}
-        />
       </Tabs>
     </div>
   );

packages/webapp/src/containers/Vendors/VendorForm/utils.tsx

@@ -5,6 +5,7 @@ import { useFormikContext } from 'formik';
 import { first } from 'lodash';
 
 import { useVendorFormContext } from './VendorFormProvider';
+import { useCurrentOrganization } from '@/hooks/state';
 
 export const defaultInitialValues = {
   salutation: '',
@@ -36,10 +37,12 @@ export const defaultInitialValues = {
   shipping_address_postcode: '',
   shipping_address_phone: '',
 
-  opening_balance: '',
   currency_code: '',
+
+  opening_balance: '',
   opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
   opening_balance_branch_id: '',
+  opening_balance_exchange_rate: ''
 };
 
 export const useSetPrimaryBranchToForm = () => {
@@ -56,3 +59,25 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+/**
+ * Detarmines whether the current vendor has foreign currency.
+ * @returns {boolean}
+ */
+export const useIsVendorForeignCurrency = () => {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  return currentOrganization.base_currency !== values.currency_code;
+};
+
+/**
+ * Detarmines the exchange opening balance field when should update.
+ */
+export const openingBalanceFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.shouldUpdateDeps.currencyCode !==
+      oldProps.shouldUpdateDeps.currencyCode ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};

packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx

@@ -48,7 +48,7 @@ export function ActionsMenu({
       </Can>
       <Can I={VendorAction.Create} a={AbilitySubject.Customer}>
         <MenuItem
-          icon={<Icon icon="duplicate-16" />}
+          icon={<Icon icon="content-copy" iconSize={16} />}
           text={intl.get('duplicate')}
           onClick={safeCallback(onDuplicate, original)}
         />

packages/webapp/src/lang/en/index.json

@@ -658,7 +658,7 @@
   "opening_balance_at": "Opening balance at",
   "opening_balance": "Opening balance",
   "balance_currency": "Balance currency",
-  "financial_details": "Financial details",
+  "financial_details": "Financial",
   "are_you_sure_you_want_to_clear_this_transaction": "Are you sure you want to clear this transaction?",
   "clearing_the_table_lines_will_delete_all_credits": "Clearing the table lines will delete all credits and payment were applied, Is this okay?",
   "changing_full_amount_will_change_all_credits_and_payment": "  Changing full amount will change all credits and payment were applied, Is this okay?",
@@ -703,6 +703,7 @@
   "email_is_already_used": "The email is already used.",
   "the_item_categories_has_been_deleted_successfully": "The item categories has been deleted successfully .",
   "receivable_accounts_should_assign_with_customers": "Receivable accounts should assign with customers.",
+  "make_journal.errors.should_add_accounts_in_same_currency_or_base_currency": "You can only add accounts that have the same selected currency or base currency.",
   "delivered": "Delivered",
   "save_and_deliver": "Save & Deliver",
   "deliver_and_new": "Deliver and new",

packages/webapp/src/style/pages/Customers/Form.scss

@@ -142,15 +142,8 @@
       > *:not(:last-child) {
         margin-right: 25px;
       }
-
       &.bp3-large > .bp3-tab {
         font-size: 15px;
-        color: #555;
-
-        &[aria-selected='true'],
-        &:not([aria-disabled='true']):hover {
-          color: $pt-link-color;
-        }
       }
     }
   }