Merge branch 'develop' of https://github.com/bigcapitalhq/client into develop

This commit is contained in:
a.bouhuolia
2021-12-21 16:51:54 +02:00
16 changed files with 225 additions and 141 deletions

View File

@@ -106,6 +106,6 @@ export default compose(
paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber, paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix, paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement, paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
preferredDepositAccount: paymentReceiveSettings?.depositAccount, preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
})), })),
)(QuickPaymentReceiveForm); )(QuickPaymentReceiveForm);

View File

@@ -1,30 +1,22 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import { Card } from 'components';
import { Card, FormattedMessage as T } from 'components';
import { ItemManuTransaction } from './utils'; import { ItemManuTransaction } from './utils';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import ItemPaymentTransactionContent from './ItemPaymentTransactionContent'; import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
export const ItemPaymentTransactions = () => { export const ItemPaymentTransactions = () => {
const { value } = useItemDetailDrawerContext(); const { value, setValue } = useItemDetailDrawerContext();
// handle item change.
const handleItemChange = (item) => {
setValue(item);
};
return ( return (
<Card> <Card>
<ItemManuTransactions> <ItemManuTransaction onChange={handleItemChange} />
<T id={'item.drawer_transactions_by'} />
<ItemManuTransaction />
</ItemManuTransactions>
<ItemPaymentTransactionContent tansactionType={value} /> <ItemPaymentTransactionContent tansactionType={value} />
</Card> </Card>
); );
}; };
const ItemManuTransactions = styled.div`
display: flex;
align-items: center;
color: #727983;
.bp3-button {
padding-left: 6px;
font-weight: 500;
}
`;

View File

@@ -7,19 +7,20 @@ import {
PopoverInteractionKind, PopoverInteractionKind,
Position, Position,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import styled from 'styled-components';
import { FormattedMessage as T } from 'components'; import { FormattedMessage as T } from 'components';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import transactions from '../../../../common/itemPaymentTranactionsOption'; import transactions from '../../../../common/itemPaymentTranactionsOption';
export const ItemManuTransaction = () => { export const ItemManuTransaction = ({ onChange }) => {
const { value, setValue } = useItemDetailDrawerContext(); const { value, setValue } = useItemDetailDrawerContext();
// const handleClickItem = (item) => { const handleClickItem = (item) => {
// onChange && onChange(item); onChange && onChange(item);
// }; };
const content = transactions.map(({ name, label }) => ( const content = transactions.map(({ name, label }) => (
<MenuItem onClick={() => setValue(name)} text={label} /> <MenuItem onClick={() => handleClickItem(name)} text={label} />
)); ));
return ( return (
@@ -32,7 +33,28 @@ export const ItemManuTransaction = () => {
}} }}
content={<Menu>{content}</Menu>} content={<Menu>{content}</Menu>}
> >
<Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} /> <ItemSwitchButton
minimal={true}
text={<T id={'item.drawer_transactions_by'} />}
rightIcon={'caret-down'}
>
<ItemSwitchText>
<T id={value} />
</ItemSwitchText>
</ItemSwitchButton>
</Popover> </Popover>
); );
}; };
const ItemSwitchButton = styled(Button)`
.bp3-button-text {
display: flex;
color: #727983;
}
`;
const ItemSwitchText = styled.span`
font-weight: 600;
color: #33304a;
padding-left: 3px;
`;

View File

@@ -1,8 +1,6 @@
import React from 'react'; import React from 'react';
import { DrawerBody } from 'components'; import { DrawerBody } from 'components';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import PaymentMadeDetails from './PaymentMadeDetails'; import PaymentMadeDetails from './PaymentMadeDetails';
import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider'; import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';

View File

@@ -1,13 +1,19 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import clsx from 'classnames';
import { defaultTo } from 'lodash'; import { defaultTo } from 'lodash';
import { DetailsMenu, DetailItem, FormatDate } from 'components'; import {
Row,
Col,
FormatDate,
DetailsMenu,
DetailItem,
CommercialDocHeader,
CommercialDocTopHeader,
ButtonLink,
} from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider'; import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/** /**
* Payment made - detail panel - header. * Payment made - detail panel - header.
*/ */
@@ -15,39 +21,53 @@ export default function PaymentMadeDetailHeader() {
const { paymentMade } = usePaymentMadeDetailContext(); const { paymentMade } = usePaymentMadeDetailContext();
return ( return (
<div className={clsx(PaymentDrawerCls.detail_panel_header)}> <CommercialDocHeader>
<DetailsMenu> <CommercialDocTopHeader>
<DetailItem label={intl.get('amount')}> <DetailsMenu>
<h3 class="big-number" children={paymentMade.formatted_amount} /> <DetailItem label={intl.get('amount')}>
</DetailItem> <h3 class="big-number">{paymentMade.formatted_amount}</h3>
<DetailItem </DetailItem>
label={intl.get('payment_made.details.payment_number')} </DetailsMenu>
children={defaultTo(paymentMade.payment_number, '-')} </CommercialDocTopHeader>
/>
<DetailItem
label={intl.get('customer_name')}
children={paymentMade.vendor?.display_name}
/>
<DetailItem
label={intl.get('payment_account')}
children={paymentMade.payment_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={<FormatDate value={paymentMade.payment_date} />}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'} minLabelSize={'160px'}> <Row>
<DetailItem <Col xs={6}>
label={intl.get('description')} <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
children={defaultTo(paymentMade.statement, '-')} <DetailItem
/> label={intl.get('payment_made.details.payment_number')}
<DetailItem children={defaultTo(paymentMade.payment_number, '-')}
label={intl.get('created_at')} />
children={<FormatDate value={paymentMade.created_at} />} <DetailItem label={intl.get('vendor_name')}>
/> <ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
</DetailsMenu> </DetailItem>
</div> <DetailItem
label={intl.get('payment_account')}
children={paymentMade.payment_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={<FormatDate value={paymentMade.payment_date} />}
/>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentMade.statement, '-')}
/>
<DetailItem
label={intl.get('created_at')}
children={<FormatDate value={paymentMade.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
); );
} }

View File

@@ -20,26 +20,14 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
enabled: !!paymentMadeId, enabled: !!paymentMadeId,
}, },
); );
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: paymentMadeId,
reference_type: 'BillPayment',
},
{ enabled: !!paymentMadeId },
);
//provider. //provider.
const provider = { const provider = {
transactions,
paymentMadeId, paymentMadeId,
paymentMade, paymentMade,
}; };
const loading = isTransactionLoading || isPaymentMadeLoading; const loading = isPaymentMadeLoading;
return ( return (
<DrawerLoading loading={loading}> <DrawerLoading loading={loading}>

View File

@@ -1,28 +1,21 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { Card } from 'components'; import { CommercialDocBox } from 'components';
import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
import PaymentMadeDetailHeader from './PaymentMadeDetailHeader'; import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
import PaymentMadeDetailTable from './PaymentMadeDetailTable'; import PaymentMadeDetailTable from './PaymentMadeDetailTable';
import PaymentMadeDetailFooter from './PaymentMadeDetailFooter'; import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/** /**
* Payment made detail tab. * Payment made detail tab.
* @returns {React.JSX}
*/ */
export default function PaymentMadeDetailTab() { export default function PaymentMadeDetailTab() {
return ( return (
<div className={clsx(PaymentDrawerCls.detail_panel)}> <CommercialDocBox>
<PaymentMadeDetailActionsBar /> <PaymentMadeDetailHeader />
<PaymentMadeDetailTable />
<Card> <PaymentMadeDetailFooter />
<PaymentMadeDetailHeader /> </CommercialDocBox>
<PaymentMadeDetailTable />
<PaymentMadeDetailFooter />
</Card>
</div>
); );
} }

View File

@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { CommercialDocEntriesTable } from 'components';
import { usePaymentMadeEntriesColumns } from './utils'; import { usePaymentMadeEntriesColumns } from './utils';
import { DataTable } from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider'; import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss'; import { TableStyle } from 'common';
/** /**
* Payment made read-only details table. * Payment made read-only details table.
@@ -19,12 +18,10 @@ export default function PaymentMadeDetailTable() {
const { paymentMade } = usePaymentMadeDetailContext(); const { paymentMade } = usePaymentMadeDetailContext();
return ( return (
<div className={clsx(PaymentDrawerCls.detail_panel_table)}> <CommercialDocEntriesTable
<DataTable columns={columns}
columns={columns} data={paymentMade.entries}
data={paymentMade.entries} styleName={TableStyle.Constrant}
className={'table-constrant'} />
/>
</div>
); );
} }

View File

@@ -1,35 +1,47 @@
import React from 'react'; import React from 'react';
import { Tab } from '@blueprintjs/core'; import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import clsx from 'classnames'; import styled from 'styled-components';
import { DrawerMainTabs } from 'components'; import { DrawerMainTabs } from 'components';
import PaymentMadeDetailTab from './PaymentMadeDetailTab';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss'; import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
import PaymentMadeDetailTab from './PaymentMadeDetailTab';
import PaymentMadeGLEntriesPanel from './PaymentMadeGLEntriesPanel';
/** /**
* Payment made - view detail. * Payment made - view detail.
* @returns {React.JSX}
*/ */
export default function PaymentMadeDetails() {
const { transactions } = usePaymentMadeDetailContext();
function PaymentMadeDetailsTabs() {
return ( return (
<div className={clsx(PaymentDrawerCls.root)}> <DrawerMainTabs defaultSelectedTabId="details">
<DrawerMainTabs defaultSelectedTabId="details"> <Tab
<Tab id={'details'}
id={'details'} title={intl.get('details')}
title={intl.get('details')} panel={<PaymentMadeDetailTab />}
panel={<PaymentMadeDetailTab />} />
/> <Tab
<Tab id={'journal_entries'}
id={'journal_entries'} title={intl.get('journal_entries')}
title={intl.get('journal_entries')} panel={<PaymentMadeGLEntriesPanel />}
panel={<JournalEntriesTable transactions={transactions} />} />
/> </DrawerMainTabs>
</DrawerMainTabs>
</div>
); );
} }
/**
* Payment made view detail.
* @returns {React.JSX}
*/
export default function PaymentMadeDetail() {
return (
<PaymentMadeDetailsRoot>
<PaymentMadeDetailActionsBar />
<PaymentMadeDetailsTabs />
</PaymentMadeDetailsRoot>
);
}
const PaymentMadeDetailsRoot = styled.div``;

View File

@@ -0,0 +1,42 @@
import React from 'react';
import styled from 'styled-components';
import { Card } from 'components';
import JournalEntriesTable, {
AmountDisplayedBaseCurrencyMessage,
} from '../../JournalEntriesTable/JournalEntriesTable';
import { useTransactionsByReference } from 'hooks/query';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
/**
* Payment made GL entries table panel.
* @returns {React.JSX}
*/
export default function PaymentMadeGLEntriesPanel() {
const { paymentMadeId } = usePaymentMadeDetailContext();
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: paymentMadeId,
reference_type: 'BillPayment',
},
{ enabled: !!paymentMadeId },
);
return (
<PaymentMadeGLEntriesRoot>
<AmountDisplayedBaseCurrencyMessage />
<JournalEntriesTable
loading={isTransactionLoading}
transactions={transactions}
/>
</PaymentMadeGLEntriesRoot>
);
}
const PaymentMadeGLEntriesRoot = styled(Card)``;

View File

@@ -4,9 +4,9 @@ const Schema = Yup.object().shape({
accounting_basis: Yup.string().required(), accounting_basis: Yup.string().required(),
account_code_required: Yup.boolean().nullable(), account_code_required: Yup.boolean().nullable(),
account_code_unique: Yup.boolean().nullable(), account_code_unique: Yup.boolean().nullable(),
deposit_account: Yup.number().nullable(),
withdrawal_account: Yup.number().nullable(), withdrawal_account: Yup.number().nullable(),
advance_deposit: Yup.number().nullable(), preferred_deposit_account: Yup.number().nullable(),
preferred_advance_deposit: Yup.number().nullable(),
}); });
export const AccountantSchema = Schema; export const AccountantSchema = Schema;

View File

@@ -17,6 +17,7 @@ import {
FieldRequiredHint, FieldRequiredHint,
} from 'components'; } from 'components';
import { handleStringChange, inputIntent } from 'utils'; import { handleStringChange, inputIntent } from 'utils';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import { useAccountantFormContext } from './AccountantFormProvider'; import { useAccountantFormContext } from './AccountantFormProvider';
@@ -113,7 +114,7 @@ export default function AccountantForm() {
</FastField> </FastField>
{/* ----------- Deposit customer account ----------- */} {/* ----------- Deposit customer account ----------- */}
<FastField name={'deposit_account'}> <FastField name={'preferred_deposit_account'}>
{({ {({
form: { values, setFieldValue }, form: { values, setFieldValue },
field: { value }, field: { value },
@@ -138,11 +139,15 @@ export default function AccountantForm() {
<AccountsSelectList <AccountsSelectList
accounts={accounts} accounts={accounts}
onAccountSelected={({ id }) => { onAccountSelected={({ id }) => {
setFieldValue('deposit_account', id); setFieldValue('preferred_deposit_account', id);
}} }}
selectedAccountId={value} selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />} defaultSelectText={<T id={'select_payment_account'} />}
// filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]} filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/> />
</FormGroup> </FormGroup>
)} )}
@@ -178,13 +183,18 @@ export default function AccountantForm() {
}} }}
selectedAccountId={value} selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />} defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/> />
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
{/* ----------- Withdrawal customer account ----------- */} {/* ----------- Withdrawal customer account ----------- */}
<FastField name={'advance_deposit'}> <FastField name={'preferred_advance_deposit'}>
{({ {({
form: { values, setFieldValue }, form: { values, setFieldValue },
field: { value }, field: { value },
@@ -209,7 +219,7 @@ export default function AccountantForm() {
<AccountsSelectList <AccountsSelectList
accounts={accounts} accounts={accounts}
onAccountSelected={({ id }) => { onAccountSelected={({ id }) => {
setFieldValue('advance_deposit', id); setFieldValue('preferred_advance_deposit', id);
}} }}
selectedAccountId={value} selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />} defaultSelectText={<T id={'select_payment_account'} />}

View File

@@ -28,15 +28,13 @@ function AccountantFormPage({
accountsSettings, accountsSettings,
billPaymentSettings, billPaymentSettings,
}) { }) {
const { saveSettingMutate } = useAccountantFormContext(); const { saveSettingMutate } = useAccountantFormContext();
const accountantSettings = { const accountantSettings = {
...billPaymentSettings, ...billPaymentSettings,
...accountsSettings, ...accountsSettings,
...pick(organizationSettings, ['accountingBasis']), ...pick(organizationSettings, ['accountingBasis']),
...pick(paymentReceiveSettings, ['depositAccount', 'advanceDeposit']), ...pick(paymentReceiveSettings, ['preferredDepositAccount', 'preferredAdvanceDeposit']),
}; };
const initialValues = { const initialValues = {

View File

@@ -11,13 +11,13 @@ export const transformToOptions = (option) => {
group: 'bill_payments', group: 'bill_payments',
}, },
{ {
key: 'deposit_account', key: 'preferred_deposit_account',
value: option.deposit_account, value: option.preferred_deposit_account,
group: 'payment_receives', group: 'payment_receives',
}, },
{ {
key: 'advance_deposit', key: 'preferred_advance_deposit',
value: option.advance_deposit, value: option.preferred_advance_deposit,
group: 'payment_receives', group: 'payment_receives',
}, },
{ {

View File

@@ -3,6 +3,7 @@ import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core'; import { Intent } from '@blueprintjs/core';
import { AppToaster } from 'components'; import { AppToaster } from 'components';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { pick, omit } from 'lodash';
import { ItemPreferencesSchema } from './ItemPreferences.schema'; import { ItemPreferencesSchema } from './ItemPreferences.schema';
import ItemPreferencesForm from './ItemPreferencesForm'; import ItemPreferencesForm from './ItemPreferencesForm';
@@ -23,12 +24,16 @@ function ItemPreferencesFormPage({
}) { }) {
const { saveSettingMutate } = useItemPreferencesFormContext(); const { saveSettingMutate } = useItemPreferencesFormContext();
const itemPerferencesSettings = {
...omit(itemsSettings, ['tableSize']),
};
// Initial values. // Initial values.
const initialValues = { const initialValues = {
preferred_sell_account: '', preferred_sell_account: '',
preferred_cost_account: '', preferred_cost_account: '',
preferred_inventory_account: '', preferred_inventory_account: '',
...transformGeneralSettings(itemsSettings), ...transformGeneralSettings(itemPerferencesSettings),
}; };
useEffect(() => { useEffect(() => {
@@ -37,8 +42,10 @@ function ItemPreferencesFormPage({
// Handle form submit. // Handle form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => { const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
const options = optionsMapToArray(values) const options = optionsMapToArray(values).map((option) => ({
.map((option) => ({ ...option, group: 'items' })); ...option,
group: 'items',
}));
const onSuccess = () => { const onSuccess = () => {
AppToaster.show({ AppToaster.show({

View File

@@ -28,7 +28,11 @@ import { AppToaster } from 'components';
import { transactionNumber, compose } from 'utils'; import { transactionNumber, compose } from 'utils';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider'; import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import { defaultPaymentReceive, transformToEditForm, transformFormToRequest } from './utils'; import {
defaultPaymentReceive,
transformToEditForm,
transformFormToRequest,
} from './utils';
/** /**
* Payment Receive form. * Payment Receive form.
@@ -61,6 +65,7 @@ function PaymentReceiveForm({
paymentReceiveNumberPrefix, paymentReceiveNumberPrefix,
paymentReceiveNextNumber, paymentReceiveNextNumber,
); );
console.log(preferredDepositAccount, 'XX');
// Form initial values. // Form initial values.
const initialValues = useMemo( const initialValues = useMemo(
() => ({ () => ({
@@ -194,7 +199,7 @@ export default compose(
paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber, paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix, paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement, paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
preferredDepositAccount: paymentReceiveSettings?.depositAccount, preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
})), })),
withCurrentOrganization(), withCurrentOrganization(),
)(PaymentReceiveForm); )(PaymentReceiveForm);