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

Merge branch 'develop' into e2e-onboarding

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2023-07-07 01:26:58 +02:00
parent b46154ba59 b24badfa52
commit d12157a8d4
61 changed files with 742 additions and 1138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/webapp/src/components/Branches/BranchSelect.tsx
View File

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

2
packages/webapp/src/components/Forms/Select.tsx
View File

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

27
packages/webapp/src/components/PageForm/FormTopbarSelectInputs.tsx Normal file
View File

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

1
packages/webapp/src/components/PageForm/index.ts
View File

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

2
packages/webapp/src/components/Warehouses/WarehouseSelect.tsx
View File

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

8
packages/webapp/src/constants/sidebarMenu.tsx
View File

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

14
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormTopBar.tsx
View File

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

26
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx
View File

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

1
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogContent.tsx
View File

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

25
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogProvider.tsx
View File

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

26
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInExchangeRateField.tsx Normal file
View File

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

34
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFieldsProvider.tsx Normal file
View File

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

18
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.tsx
View File

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

10
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormFields.tsx
View File

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

127
packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
View File

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

140
packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx
View File

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

61
packages/webapp/src/containers/CashFlow/MoneyInDialog/TransactionTypeFields.tsx
View File

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

135
packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx
View File

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

1
packages/webapp/src/containers/CashFlow/MoneyInDialog/index.tsx
View File

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

3
packages/webapp/src/containers/CashFlow/MoneyInDialog/utils.tsx
View File

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

25
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutContentFields.tsx
View File

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

28
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogProvider.tsx
View File

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

31
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutExchangeRateField.tsx Normal file
View File

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

34
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFieldsProvider.tsx Normal file
View File

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

10
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFloatingActions.tsx
View File

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

16
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutForm.tsx
View File

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

1
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormDialog.tsx
View File

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

14
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormFields.tsx
View File

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

137
packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx
View File

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

126
packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx
View File

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

72
packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransactionTypeFields.tsx
View File

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

146
packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx
View File

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

3
packages/webapp/src/containers/CashFlow/MoneyOutDialog/utils.tsx
View File

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

4
packages/webapp/src/containers/CashFlow/_components.tsx
View File

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

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

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

7
packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx
View File

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

10
packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx
View File

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

37
packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx
View File

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

35
packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx Normal file
View File

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

1
packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx
View File

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

19
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormTopBar.tsx
View File

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

33
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormTopBar.tsx
View File

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

31
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.tsx
View File

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

6
packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx
View File

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

19
packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.tsx
View File

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

5
packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx
View File

@@ -15,6 +15,7 @@ import {
formattedAmount,
} from '@/utils';
import { useCurrentOrganization } from '@/hooks/state';
import { PAYMENT_MADE_ERRORS } from '../constants';
export const ERRORS = {
PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
@@ -124,10 +125,10 @@ export const useSetPrimaryBranchToForm = () => {
export const transformErrors = (errors, { setFieldError }) => {
const getError = (errorType) => errors.find((e) => e.type === errorType);
if (getError('PAYMENT_NUMBER_NOT_UNIQUE')) {
if (getError(PAYMENT_MADE_ERRORS.PAYMENT_NUMBER_NOT_UNIQUE)) {
setFieldError('payment_number', intl.get('payment_number_is_not_unique'));
}
if (getError('WITHDRAWAL_ACCOUNT_CURRENCY_INVALID')) {
if (getError(PAYMENT_MADE_ERRORS.WITHDRAWAL_ACCOUNT_CURRENCY_INVALID)) {
AppToaster.show({
message: intl.get(
'payment_made.error.withdrawal_account_currency_invalid',

5
packages/webapp/src/containers/Purchases/PaymentMades/constants.ts Normal file
View File

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

34
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.tsx
View File

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

33
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.tsx
View File

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

33
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.tsx
View File

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

35
packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx
View File

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

26
packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.tsx
View File

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

34
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.tsx
View File

@@ -1,12 +1,9 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import {
Alignment,
NavbarGroup,
NavbarDivider,
Button,
Classes,
} from '@blueprintjs/core';
import {
@@ -18,12 +15,13 @@ import { Features } from '@/constants';
import { useFeatureCan } from '@/hooks/state';
import { useReceiptFormContext } from './ReceiptFormProvider';
import {
Icon,
BranchSelect,
FeatureCan,
WarehouseSelect,
FormTopbar,
DetailsBarSkeletonBase,
FormBranchSelectButton,
FormWarehouseSelectButton,
} from '@/components';
/**
@@ -76,8 +74,9 @@ function ReceiptFormSelectBranch() {
<BranchSelect
name={'branch_id'}
branches={branches}
input={ReceiptBranchSelectButton}
input={FormBranchSelectButton}
popoverProps={{ minimal: true }}
fill={false}
/>
);
}
@@ -96,30 +95,9 @@ function ReceiptFormSelectWarehouse() {
<WarehouseSelect
name={'warehouse_id'}
warehouses={warehouses}
input={ReceiptWarehouseSelectButton}
input={FormWarehouseSelectButton}
popoverProps={{ minimal: true }}
/>
);
}
function ReceiptBranchSelectButton({ label }) {
return (
<Button
text={intl.get('receipt.branch_button.label', { label })}
minimal={true}
small={true}
icon={<Icon icon={'branch-16'} iconSize={16} />}
/>
);
}
function ReceiptWarehouseSelectButton({ label }) {
return (
<Button
text={intl.get('receipt.warehouse_button.label', { label })}
minimal={true}
small={true}
icon={<Icon icon={'warehouse-16'} iconSize={16} />}
fill={false}
/>
);
}

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

@@ -9,7 +9,6 @@ import {
InputPrependText,
CurrencySelectList,
BranchSelect,
BranchSelectButton,
FeatureCan,
Row,
Col,
@@ -75,12 +74,10 @@ export default function VendorFinanicalPanelTab() {
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>

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

@@ -1452,6 +1452,7 @@
"cash_flow.setting_your_auto_generated_transaction_number": "Setting your auto-generated transaction number",
"cash_flow_drawer.label_transaction_type": "Transaction type",
"cash_flow.drawer.label_transaction_no": "Transaction number",
"cash_flow.drawer.label.statement": "Statement",
"cash_flow.drawer.label_transaction": "Cash flow Transaction {number}",
"cash_flow.account_transactions.no_results": "There are no deposit/withdrawal transactions on the current account.",
"cash_flow_balance_in": "Balance in {name}",
@@ -1937,8 +1938,8 @@
"warehouse.alert.mark_primary_message": "The given warehouse has been marked as primary.",
"warehouse.alert.are_you_sure_you_want_to_make": "Are you sure you want to make a primary warehouse?",
"make_primary": "Make as Primary",
"invoice.branch_button.label": "Branch: {label}",
"invoice.warehouse_button.label": "Warehouse: {label}",
"page_form.branch_button.label": "Branch: {text}",
"page_form.warehouse_button.label": "Warehouse: {text}",
"branches_multi_select.label": "Branches",
"branches_multi_select.placeholder": "Filter by branches…",
"warehouses_multi_select.label": "Warehouses",
@@ -2023,20 +2024,6 @@
"make_journal.label.total": "TOTAL",
"expense.label.subtotal": "Subtotal",
"expense.label.total": "TOTAL",
"expense.branch_button.label": "Branch: {label}",
"make_journal.branch_button.label": "Branch: {label}",
"bill.branch_button.label": "Branch: {label}",
"bill.warehouse_button.label": "Warehouse: {label}",
"vendor_credit.branch_button.label": "Branch: {label}",
"vendor_credit.warehouse_button.label": "Warehouse: {label}",
"payment_receive.branch_button.label": "Branch: {label}",
"payment_made.branch_button.label": "Branch: {label}",
"credit_note.branch_button.label": "Branch: {label}",
"credit_note.warehouse_button.label": "Warehouse: {label}",
"estimate.branch_button.label": "Branch: {label}",
"estimate.warehouse_button.label": "Warehouse: {label}",
"receipt.branch_button.label": "Branch: {label}",
"receipt.warehouse_button.label": "Warehouse: {label}",
"warehouse_transfer.empty_status.title": "Manage transfer orders between warehouses.",
"warehouse_transfer.empty_status.description": "Business with multiply warehouses often transfers items from on warehouse to another when they are in immediate need of vendors.",
"warehouse_transfer.form.reason.label": "Reason",

30
packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss
View File

@@ -1,34 +1,14 @@
.dialog--money-in,
.dialog--money-out {
.bp3-form-group {
margin-bottom: 15px;
label.bp3-label {
font-size: 13px;
margin-bottom: 3px;
}
}
.form-group {
&--description {
.bp3-form-content {
textarea {
width: 100%;
min-width: 100%;
font-size: 14px;
}
}
}
&--reference-no,
&--amount,
&--credit_account_id {
max-width: 380px;
}
}
.trasnaction-type-fileds {
margin-bottom: 18px;
padding: 16px 0px 12px 0px;
padding: 0 0px 16px 0px;
border-bottom: 2px solid #e9e9e9;
.bp3-form-group{
margin-bottom: 0;
}
}
.bp3-dialog-footer {