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

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

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, useFormikContext } from 'formik';
-import { FastField, ErrorMessage } 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 {
-import { momentFormatter, tansformDateValue, inputIntent } from '@/utils';
+  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/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, useFormikContext } from 'formik';
-import { FastField, ErrorMessage } 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 {
-import { momentFormatter, tansformDateValue, inputIntent } from '@/utils';
+  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
@@ -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/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?",

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;
-        }
       }
     }
   }