QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-14 20:00:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fix(webapp): customer/vendor opening balance with exchange rate
This commit is contained in:
Ahmed Bouhuolia
2023-06-11 20:12:44 +02:00
committed by GitHub
parent eb9b6ce717 3ebeb29dc0
commit 35ebb9c2aa
8 changed files with 306 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
View File

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

5
packages/webapp/src/containers/Customers/CustomerForm/CustomersTabs.tsx
View File

@@ -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>
);

27
packages/webapp/src/containers/Customers/CustomerForm/utils.tsx
View File

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

203
packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
View File

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

9
packages/webapp/src/containers/Vendors/VendorForm/VendorsTabs.tsx
View File

@@ -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>
);

27
packages/webapp/src/containers/Vendors/VendorForm/utils.tsx
View File

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

2
packages/webapp/src/lang/en/index.json
View File

@@ -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?",

7
packages/webapp/src/style/pages/Customers/Form.scss
View File

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