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

feat(cashflow): add ExchangeRateMutedField.

Browse Source
This commit is contained in:
elforjani13
2022-03-06 20:20:25 +02:00
parent 5c52f80536
commit 7467b63e54
20 changed files with 382 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Branches/BranchSelect.js
View File

@@ -35,7 +35,7 @@ const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
<MenuItem
active={modifiers.active}
disabled={modifiers.disabled}
label={branch.code.toString()}
label={branch.code}
key={branch.id}
onClick={handleClick}
text={text}

84
src/components/ExchangeRate/ExchangeRateMutedField.js Normal file
View File

@@ -0,0 +1,84 @@
import React from 'react';
import moment from 'moment';
import styled from 'styled-components';
import intl from 'react-intl-universal';
import {
Button,
Popover,
PopoverInteractionKind,
FormGroup,
Position,
Menu,
Classes,
} from '@blueprintjs/core';
import {
If,
ExchangeRateInputGroup,
Icon,
FormattedMessage as T,
} from 'components';
import { isEqual, isUndefined } from 'lodash';
export function ExchangeRateMutedField({
name,
toCurrency,
fromCurrency,
exchangeRate,
...ExchangeRateprops
}) {
if (isEqual(toCurrency, fromCurrency) && !isUndefined(toCurrency)) {
return null;
}
const content = (
<Menu>
<ExchangeRateInputGroup
name={name}
fromCurrency={fromCurrency}
toCurrency={toCurrency}
{...ExchangeRateprops}
/>
</Menu>
);
return (
<ExchangeRateFormGroup
label={`As on ${moment(new Date()).format('YYYY-MM-DD')},`}
>
<Popover
content={content}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.RIGHT_TOP}
modifiers={{
offset: { offset: '0, 4' },
}}
minimal={true}
>
<ExchangeRateButton
className={Classes.MINIMAL}
rightIcon={<Icon icon="pen-18" />}
>
1 {fromCurrency} = {exchangeRate} {toCurrency}
</ExchangeRateButton>
</Popover>
</ExchangeRateFormGroup>
);
}
const ExchangeRateFormGroup = styled(FormGroup)`
.bp3-label {
font-size: 12px !important;
opacity: 0.7;
line-height: 0.1rem;
}
`;
const ExchangeRateButton = styled(Button)`
.bp3-button-text {
display: flex;
font-size: 13px;
font-weight: 500;
color: #0d244a;
}
padding: 0;
`;

3
src/components/ExchangeRate/index.js
View File

@@ -1 +1,2 @@
export * from './ExchangeRateInput';
export * from './ExchangeRateInput';
export * from './ExchangeRateMutedField'

2
src/components/Warehouses/WarehouseSelect.js
View File

@@ -40,7 +40,7 @@ const warehouseItemRenderer = (
<MenuItem
active={modifiers.active}
disabled={modifiers.disabled}
label={warehouse.name.toString()}
label={warehouse.code}
key={warehouse.id}
onClick={handleClick}
text={text}

6
src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
View File

@@ -8,7 +8,6 @@ import {
useCashflowAccounts,
useSettingCashFlow,
} from 'hooks/query';
import { isEqual, isUndefined } from 'lodash';
const MoneyInDialogContent = React.createContext();
@@ -49,10 +48,6 @@ function MoneyInDialogProvider({
// Submit payload.
const [submitPayload, setSubmitPayload] = React.useState({});
// Determines whether the foreign currency.
const isForeignCurrency = (toCurrency, fromCurrency) =>
!isEqual(toCurrency, fromCurrency) && !isUndefined(toCurrency);
// provider.
const provider = {
accounts,
@@ -70,7 +65,6 @@ function MoneyInDialogProvider({
createCashflowTransactionMutate,
setSubmitPayload,
isForeignCurrency,
};
return (

4
src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.js
View File

@@ -48,7 +48,7 @@ function MoneyInFloatingActions({
>
<T id={'close'} />
</Button>
<Button
{/* <Button
disabled={isSubmitting}
loading={isSubmitting && !submitPayload.publish}
style={{ minWidth: '75px' }}
@@ -56,7 +56,7 @@ function MoneyInFloatingActions({
onClick={handleSubmitDraftBtnClick}
>
{<T id={'save_as_draft'} />}
</Button>
</Button> */}
<Button
intent={Intent.PRIMARY}

2
src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
View File

@@ -32,6 +32,7 @@ const defaultInitialValues = {
description: '',
branch_id: '',
publish: '',
exchange_rate: 1,
};
function MoneyInForm({
@@ -69,7 +70,6 @@ function MoneyInForm({
transaction_number: transactionNo,
}),
cashflow_account_id: accountId,
exchange_rate: 1,
};
// Handles the form submit.

2
src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
View File

@@ -11,6 +11,8 @@ const Schema = Yup.object().shape({
credit_account_id: Yup.number().required(),
cashflow_account_id: Yup.string().required(),
branch_id: Yup.string(),
exchange_rate: Yup.number(),
description: Yup.string()
.min(3)
.max(DATATYPES_LENGTH.TEXT)

48
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
@@ -7,6 +7,7 @@ import {
TextArea,
Position,
ControlGroup,
Button,
} from '@blueprintjs/core';
import classNames from 'classnames';
import {
@@ -18,7 +19,11 @@ import {
Icon,
Col,
Row,
FeatureCan,
BranchSelect,
BranchSelectButton,
InputPrependButton,
ExchangeRateMutedField,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
@@ -32,8 +37,13 @@ import {
compose,
} from 'utils';
import { CLASSES } from 'common/classes';
import { Features } from 'common';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import { useObserveTransactionNoSettings } from '../utils';
import {
useObserveTransactionNoSettings,
useSetPrimaryBranchToForm,
BranchRowDivider,
} from '../utils';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -50,7 +60,9 @@ function OtherIncomeFormFields({
transactionNextNumber,
}) {
// Money in dialog context.
const { accounts } = useMoneyInDailogContext();
const { accounts, account, branches } = useMoneyInDailogContext();
const { values } = useFormikContext();
const amountFieldRef = useAutofocus();
@@ -79,8 +91,30 @@ function OtherIncomeFormFields({
transactionNextNumber,
);
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
return (
<React.Fragment>
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</Col>
</Row>
</FeatureCan>
<BranchRowDivider />
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -181,6 +215,14 @@ function OtherIncomeFormFields({
)}
</FastField>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate}
/>
<Row>
<Col xs={5}>
{/*------------ other income account -----------*/}

41
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
View File

@@ -7,10 +7,9 @@ import {
TextArea,
Position,
ControlGroup,
Button,
} from '@blueprintjs/core';
import styled from 'styled-components';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
@@ -20,10 +19,10 @@ import {
Icon,
Col,
Row,
If,
InputPrependButton,
ExchangeRateInputGroup,
ExchangeRateMutedField,
BranchSelect,
BranchSelectButton,
FeatureCan,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
@@ -42,6 +41,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import {
useObserveTransactionNoSettings,
useSetPrimaryBranchToForm,
BranchRowDivider,
} from '../utils';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -60,8 +60,7 @@ function OwnerContributionFormFields({
transactionNextNumber,
}) {
// Money in dialog context.
const { accounts, account, branches, isForeignCurrency } =
useMoneyInDailogContext();
const { accounts, account, branches } = useMoneyInDailogContext();
const { values } = useFormikContext();
@@ -98,7 +97,7 @@ function OwnerContributionFormFields({
return (
<React.Fragment>
<FeatureCan feature={Features.Branches}>
<BranchFieldsRow>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
@@ -112,8 +111,9 @@ function OwnerContributionFormFields({
/>
</FormGroup>
</Col>
</BranchFieldsRow>
</Row>
</FeatureCan>
<BranchRowDivider />
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -213,20 +213,16 @@ function OwnerContributionFormFields({
</FormGroup>
)}
</Field>
{/*------------ exchange rate -----------*/}
{/* <If
condition={isForeignCurrency(
account?.currency_code,
values?.currency_code,
)}
> */}
<ExchangeRateInputGroup
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
name={'exchange_rate'}
formGroupProps={{ label: ' ', inline: false }}
formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate}
/>
{/* </If> */}
<Row>
<Col xs={5}>
{/*------------ equity account -----------*/}
@@ -303,12 +299,3 @@ export default compose(
transactionNumberPrefix: cashflowSetting?.numberPrefix,
})),
)(OwnerContributionFormFields);
function BranchSelectButton({ label }) {
return <Button text={label} minimal={false} />;
}
const BranchFieldsRow = styled(Row)`
margin-bottom: 10px;
border-bottom: 1px solid #e9e9e9;
`;

47
src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
@@ -19,7 +19,12 @@ import {
Col,
Row,
InputPrependButton,
ExchangeRateMutedField,
FeatureCan,
BranchSelect,
BranchSelectButton,
} from 'components';
import { Features } from 'common';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
import { ACCOUNT_TYPE } from 'common/accountTypes';
@@ -33,7 +38,11 @@ import {
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import { useObserveTransactionNoSettings } from '../utils';
import {
useObserveTransactionNoSettings,
useSetPrimaryBranchToForm,
BranchRowDivider,
} from '../utils';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -50,10 +59,12 @@ function TransferFromAccountFormFields({
transactionNextNumber,
}) {
// Money in dialog context.
const { accounts } = useMoneyInDailogContext();
const { accounts, account, branches } = useMoneyInDailogContext();
const amountFieldRef = useAutofocus();
const { values } = useFormikContext();
// Handle tranaction number changing.
const handleTransactionNumberChange = () => {
openDialog('transaction-number-form');
@@ -73,6 +84,9 @@ function TransferFromAccountFormFields({
}
};
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
// Syncs transaction number settings with form.
useObserveTransactionNoSettings(
transactionNumberPrefix,
@@ -80,6 +94,24 @@ function TransferFromAccountFormFields({
);
return (
<React.Fragment>
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</Col>
</Row>
</FeatureCan>
<BranchRowDivider />
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -180,6 +212,15 @@ function TransferFromAccountFormFields({
)}
</FastField>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate}
/>
<Row>
<Col xs={5}>
{/*------------ transfer from account -----------*/}

7
src/containers/Dialogs/MoneyInDialog/utils.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import styled from 'styled-components';
import { useFormikContext } from 'formik';
import { transactionNumber } from 'utils';
import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
@@ -28,3 +29,9 @@ export const useSetPrimaryBranchToForm = () => {
}
}, [isBranchesSuccess, setFieldValue, branches]);
};
export const BranchRowDivider = styled.div`
height: 1px;
background: #ebf1f6;
margin-bottom: 15px;
`;

21
src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
View File

@@ -2,6 +2,8 @@ import React from 'react';
import { DialogContent } from 'components';
import {
useAccounts,
useAccount,
useBranches,
useCreateCashflowTransaction,
useCashflowAccounts,
useSettingCashFlow,
@@ -16,6 +18,17 @@ 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,
isLoading: isBranchesLoading,
isSuccess: isBranchesSuccess,
} = useBranches();
// Fetch cash flow list .
const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
useCashflowAccounts({}, { keepPreviousData: true });
@@ -32,9 +45,12 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
// provider.
const provider = {
accounts,
account,
accountId,
accountType,
branches,
isAccountsLoading,
isBranchesSuccess,
cashflowAccounts,
@@ -48,7 +64,10 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
return (
<DialogContent
isLoading={
isAccountsLoading || isCashFlowAccountsLoading || isSettingsLoading
isAccountsLoading ||
isCashFlowAccountsLoading ||
isBranchesLoading ||
isSettingsLoading
}
>
<MoneyInDialogContent.Provider value={provider} {...props} />

4
src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
View File

@@ -50,7 +50,7 @@ function MoneyOutFloatingActions({
>
<T id={'close'} />
</Button>
<Button
{/* <Button
disabled={isSubmitting}
loading={isSubmitting && !submitPayload.publish}
style={{ minWidth: '75px' }}
@@ -58,7 +58,7 @@ function MoneyOutFloatingActions({
onClick={handleSubmitDraftBtnClick}
>
{<T id={'save_as_draft'} />}
</Button>
</Button> */}
<Button
intent={Intent.PRIMARY}

1
src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
View File

@@ -30,6 +30,7 @@ const defaultInitialValues = {
credit_account_id: '',
description: '',
publish: '',
exchange_rate: 1,
};
function MoneyOutForm({

4
src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
View File

@@ -10,11 +10,13 @@ const Schema = Yup.object().shape({
reference_no: Yup.string(),
credit_account_id: Yup.number().required(),
cashflow_account_id: Yup.string().required(),
branch_id: Yup.string(),
exchange_rate: Yup.number(),
description: Yup.string()
.min(3)
.max(DATATYPES_LENGTH.TEXT)
.label(intl.get('description')),
publish: Yup.boolean(),
publish: Yup.boolean(),
});
export const CreateMoneyOutSchema = Schema;

47
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
@@ -19,10 +19,15 @@ import {
Col,
Row,
InputPrependButton,
FeatureCan,
BranchSelect,
BranchSelectButton,
ExchangeRateMutedField,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import { Features } from 'common';
import {
inputIntent,
@@ -33,7 +38,11 @@ import {
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { useObserveTransactionNoSettings } from '../utils';
import {
useObserveTransactionNoSettings,
useSetPrimaryBranchToForm,
BranchRowDivider,
} from '../utils';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -50,7 +59,9 @@ function OtherExpnseFormFields({
transactionNextNumber,
}) {
// Money in dialog context.
const { accounts } = useMoneyOutDialogContext();
const { accounts, account, branches } = useMoneyOutDialogContext();
const { values } = useFormikContext();
const amountFieldRef = useAutofocus();
@@ -79,8 +90,29 @@ function OtherExpnseFormFields({
transactionNextNumber,
);
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
return (
<React.Fragment>
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</Col>
</Row>
</FeatureCan>
<BranchRowDivider />
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -181,6 +213,15 @@ function OtherExpnseFormFields({
)}
</FastField>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate}
/>
<Row>
<Col xs={5}>
{/*------------ other expense account -----------*/}

45
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
@@ -19,10 +19,15 @@ import {
Icon,
Col,
Row,
FeatureCan,
BranchSelect,
BranchSelectButton,
ExchangeRateMutedField,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import { Features } from 'common';
import {
inputIntent,
momentFormatter,
@@ -32,7 +37,11 @@ import {
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { useObserveTransactionNoSettings } from '../utils';
import {
useObserveTransactionNoSettings,
useSetPrimaryBranchToForm,
BranchRowDivider,
} from '../utils';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -49,7 +58,8 @@ function OwnerDrawingsFormFields({
transactionNextNumber,
}) {
// Money out dialog context.
const { accounts } = useMoneyOutDialogContext();
const { accounts, account, branches } = useMoneyOutDialogContext();
const { values } = useFormikContext();
const amountFieldRef = useAutofocus();
@@ -78,8 +88,29 @@ function OwnerDrawingsFormFields({
transactionNextNumber,
);
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
return (
<React.Fragment>
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</Col>
</Row>
</FeatureCan>
<BranchRowDivider />
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -180,6 +211,14 @@ function OwnerDrawingsFormFields({
)}
</Field>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate}
/>
<Row>
<Col xs={5}>
{/*------------ equitty account -----------*/}

46
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
@@ -19,6 +19,10 @@ import {
Col,
Row,
InputPrependButton,
FeatureCan,
BranchSelect,
BranchSelectButton,
ExchangeRateMutedField,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
@@ -31,9 +35,14 @@ import {
handleDateChange,
compose,
} from 'utils';
import { Features } from 'common';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { useObserveTransactionNoSettings } from '../utils';
import {
useObserveTransactionNoSettings,
useSetPrimaryBranchToForm,
BranchRowDivider,
} from '../utils';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -50,7 +59,8 @@ function TransferToAccountFormFields({
transactionNextNumber,
}) {
// Money in dialog context.
const { accounts } = useMoneyOutDialogContext();
const { accounts, account, branches } = useMoneyOutDialogContext();
const { values } = useFormikContext();
const accountRef = useAutofocus();
@@ -79,8 +89,29 @@ function TransferToAccountFormFields({
transactionNextNumber,
);
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
return (
<React.Fragment>
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</Col>
</Row>
</FeatureCan>
<BranchRowDivider />
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -181,6 +212,15 @@ function TransferToAccountFormFields({
)}
</FastField>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate}
/>
<Row>
<Col xs={5}>
{/*------------ transfer from account -----------*/}

24
src/containers/Dialogs/MoneyOutDialog/utils.js
View File

@@ -1,6 +1,10 @@
import React from 'react';
import styled from 'styled-components';
import { useFormikContext } from 'formik';
import { transactionNumber } from 'utils';
import { first } from 'lodash';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
const { setFieldValue } = useFormikContext();
@@ -10,3 +14,23 @@ export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
setFieldValue('transacttion_numner', TransactionNo);
}, [setFieldValue, prefix, nextNumber]);
};
export const useSetPrimaryBranchToForm = () => {
const { setFieldValue } = useFormikContext();
const { branches, isBranchesSuccess } = useMoneyOutDialogContext();
React.useEffect(() => {
if (isBranchesSuccess) {
const primaryBranch = branches.find((b) => b.primary) || first(branches);
if (primaryBranch) {
setFieldValue('branch_id', primaryBranch.id);
}
}
}, [isBranchesSuccess, setFieldValue, branches]);
};
export const BranchRowDivider = styled.div`
height: 1px;
background: #ebf1f6;
margin-bottom: 15px;
`;