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

Merge branch 'develop'

Browse Source
This commit is contained in:
a.bouhuolia
2022-01-03 11:46:00 +02:00
parent d3c5131020 e1b6f0d879
commit cfc625edf9
512 changed files with 20008 additions and 2564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js
View File

@@ -1,7 +1,10 @@
import React from 'react';
import intl from 'react-intl-universal';
import { MoneyFieldCell, DataTableEditable } from 'components';
import styled from 'styled-components';
import { DataTableEditable } from 'components';
import { compose, updateTableCell } from 'utils';
import { useAllocateLandedCostEntriesTableColumns } from './utils';
/**
* Allocate landed cost entries table.
@@ -11,42 +14,7 @@ export default function AllocateLandedCostEntriesTable({
entries,
}) {
// Allocate landed cost entries table columns.
const columns = React.useMemo(
() => [
{
Header: intl.get('item'),
accessor: 'item.name',
disableSortBy: true,
width: '150',
},
{
Header: intl.get('quantity'),
accessor: 'quantity',
disableSortBy: true,
width: '100',
},
{
Header: intl.get('rate'),
accessor: 'rate',
disableSortBy: true,
width: '100',
},
{
Header: intl.get('amount'),
accessor: 'amount',
disableSortBy: true,
width: '100',
},
{
Header: intl.get('cost'),
accessor: 'cost',
width: '150',
Cell: MoneyFieldCell,
disableSortBy: true,
},
],
[],
);
const columns = useAllocateLandedCostEntriesTableColumns();
// Handle update data.
const handleUpdateData = React.useCallback(
@@ -60,7 +28,7 @@ export default function AllocateLandedCostEntriesTable({
);
return (
<DataTableEditable
<AllocateLandeedCostEntriesEditableTable
columns={columns}
data={entries}
payload={{
@@ -70,3 +38,18 @@ export default function AllocateLandedCostEntriesTable({
/>
);
}
export const AllocateLandeedCostEntriesEditableTable = styled(
DataTableEditable,
)`
.table {
.thead .tr .th {
padding-top: 8px;
padding-bottom: 8px;
}
.tbody .tr .td {
padding: 0.25rem;
}
}
`;

16
src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js
View File

@@ -12,12 +12,18 @@ import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogP
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Allocate landed cost floating actions.
* @returns {React.JSX}
*/
function AllocateLandedCostFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
// Allocate landed cost dialog context.
const { dialogName, costTransactionEntry, formattedUnallocatedCostAmount } =
useAllocateLandedConstDialogContext();
@@ -27,7 +33,7 @@ function AllocateLandedCostFloatingActions({
};
return (
<DialogFooter>
<AllocateDialogFooter>
<DialogFooterActions alignment={'left'}>
{costTransactionEntry && (
<UnallocatedAmount>
@@ -43,19 +49,23 @@ function AllocateLandedCostFloatingActions({
</Button>
<Button
intent={Intent.PRIMARY}
style={{ minWidth: '100px' }}
style={{ minWidth: '95px' }}
type="submit"
loading={isSubmitting}
>
{<T id={'save'} />}
</Button>
</DialogFooterActions>
</DialogFooter>
</AllocateDialogFooter>
);
}
export default compose(withDialogActions)(AllocateLandedCostFloatingActions);
const AllocateDialogFooter = styled(DialogFooter)`
display: flex;
`;
const UnallocatedAmount = styled.div`
color: #3f5278;
align-self: center;

53
src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js
View File

@@ -11,21 +11,7 @@ import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogP
import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, transformToForm } from 'utils';
const defaultInitialItem = {
entry_id: '',
cost: '',
};
// Default form initial values.
const defaultInitialValues = {
transaction_type: 'Bill',
transaction_id: '',
transaction_entry_id: '',
amount: '',
allocation_method: 'quantity',
items: [defaultInitialItem],
};
import { defaultInitialValues } from './utils';
/**
* Allocate landed cost form.
@@ -34,13 +20,8 @@ function AllocateLandedCostForm({
// #withDialogActions
closeDialog,
}) {
const {
dialogName,
bill,
billId,
createLandedCostMutate,
unallocatedCostAmount,
} = useAllocateLandedConstDialogContext();
const { dialogName, bill, billId, createLandedCostMutate } =
useAllocateLandedConstDialogContext();
// Initial form values.
const initialValues = {
@@ -51,7 +32,6 @@ function AllocateLandedCostForm({
cost: '',
})),
};
// Handle form submit.
const handleFormSubmit = (values, { setSubmitting }) => {
setSubmitting(true);
@@ -78,20 +58,33 @@ function AllocateLandedCostForm({
setSubmitting(false);
closeDialog(dialogName);
};
// Handle the request error.
const onError = () => {
const onError = (res) => {
const { errors } = res.response.data;
setSubmitting(false);
AppToaster.show({
message: 'Something went wrong!',
intent: Intent.DANGER,
});
if (
errors.some(
(e) => e.type === 'COST_AMOUNT_BIGGER_THAN_UNALLOCATED_AMOUNT',
)
) {
AppToaster.show({
message:
'The total located cost is bigger than the transaction line.',
intent: Intent.DANGER,
});
} else {
AppToaster.show({
message: 'Something went wrong!',
intent: Intent.DANGER,
});
}
};
createLandedCostMutate([billId, form]).then(onSuccess).catch(onError);
};
// Computed validation schema.
const validationSchema = AllocateLandedCostFormSchema(unallocatedCostAmount);
const validationSchema = AllocateLandedCostFormSchema();
return (
<Formik

19
src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js
View File

@@ -1,19 +1,14 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
export const AllocateLandedCostFormSchema = (maxAmount) =>
export const AllocateLandedCostFormSchema = () =>
Yup.object().shape({
transaction_type: Yup.string()
.required()
.label(intl.get('transaction_type')),
transaction_id: Yup.string()
.required()
.label(intl.get('transaction_number')),
transaction_entry_id: Yup.string()
.required()
.label(intl.get('transaction_line')),
amount: Yup.number().max(maxAmount).label(intl.get('amount')),
allocation_method: Yup.string().required().trim(),
transaction_type: Yup.string().label(intl.get('transaction_type')),
transaction_date: Yup.date().label(intl.get('transaction_date')),
transaction_id: Yup.string().label(intl.get('transaction_number')),
transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
amount: Yup.number().label(intl.get('amount')),
allocation_method: Yup.string().trim(),
items: Yup.array().of(
Yup.object().shape({
entry_id: Yup.number().nullable(),

20
src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js
View File

@@ -103,8 +103,10 @@ export default function AllocateLandedCostFormFields() {
selectedItem={value}
selectedItemProp={'id'}
textProp={'name'}
labelProp={'id'}
defaultText={intl.get('Select transaction')}
labelProp={'formatted_unallocated_cost_amount'}
defaultText={intl.get(
'landed_cost.dialog.label_select_transaction',
)}
popoverProps={{ minimal: true }}
/>
</FormGroup>
@@ -131,16 +133,17 @@ export default function AllocateLandedCostFormFields() {
>
<ListSelect
items={costTransactionEntries}
onItemSelect={({ id, unallocated_cost_amount }) => {
onItemSelect={(entry) => {
const { id, unallocated_cost_amount: unallocatedAmount } =
entry;
const { items, allocation_method } = form.values;
form.setFieldValue('amount', unallocatedAmount);
form.setFieldValue('transaction_entry_id', id);
form.setFieldValue('amount', unallocated_cost_amount);
form.setFieldValue(
'items',
allocateCostToEntries(
unallocated_cost_amount,
unallocatedAmount,
allocation_method,
items,
),
@@ -150,7 +153,10 @@ export default function AllocateLandedCostFormFields() {
selectedItem={value}
selectedItemProp={'id'}
textProp={'name'}
defaultText={intl.get('Select transaction entry')}
labelProp={'formatted_unallocated_cost_amount'}
defaultText={intl.get(
'landed_cost.dialog.label_select_transaction_entry',
)}
popoverProps={{ minimal: true }}
/>
</FormGroup>

102
src/containers/Dialogs/AllocateLandedCostDialog/utils.js
View File

@@ -1,13 +1,25 @@
import React from 'react';
import { sumBy, round } from 'lodash';
import * as R from 'ramda';
import { defaultFastFieldShouldUpdate } from 'utils';
import intl from 'react-intl-universal';
/**
* Retrieve the landed cost transaction by the given id.
*/
export function getCostTransactionById(id, transactions) {
return transactions.find((trans) => trans.id === id);
}
import { defaultFastFieldShouldUpdate } from 'utils';
import { MoneyFieldCell } from 'components';
export const defaultInitialItem = {
entry_id: '',
cost: '',
};
// Default form initial values.
export const defaultInitialValues = {
transaction_type: 'Bill',
transaction_id: '',
transaction_entry_id: '',
amount: '',
allocation_method: 'quantity',
items: [defaultInitialItem],
};
/**
* Retrieve transaction entries of the given transaction id.
@@ -17,10 +29,23 @@ export function getEntriesByTransactionId(transactions, id) {
return transaction ? transaction.entries : [];
}
/**
*
* @param {*} transaction
* @param {*} transactionEntryId
* @returns
*/
export function getTransactionEntryById(transaction, transactionEntryId) {
return transaction.entries.find((entry) => entry.id === transactionEntryId);
}
/**
*
* @param {*} total
* @param {*} allocateType
* @param {*} entries
* @returns
*/
export function allocateCostToEntries(total, allocateType, entries) {
return R.compose(
R.when(
@@ -43,12 +68,12 @@ export function allocateCostToEntries(total, allocateType, entries) {
export function allocateCostByValue(total, entries) {
const totalAmount = sumBy(entries, 'amount');
const _entries = entries.map((entry) => ({
const entriesMapped = entries.map((entry) => ({
...entry,
percentageOfValue: entry.amount / totalAmount,
}));
return _entries.map((entry) => ({
return entriesMapped.map((entry) => ({
...entry,
cost: round(entry.percentageOfValue * total, 2),
}));
@@ -74,6 +99,13 @@ export function allocateCostByQuantity(total, entries) {
}));
}
/**
* Retrieve the landed cost transaction by the given id.
*/
export function getCostTransactionById(id, transactions) {
return transactions.find((trans) => trans.id === id);
}
/**
* Detarmines the transactions selet field when should update.
*/
@@ -84,7 +116,55 @@ export function transactionsSelectShouldUpdate(newProps, oldProps) {
);
}
/**
*
* @param {*} entries
* @returns
*/
export function resetAllocatedCostEntries(entries) {
return entries.map((entry) => ({ ...entry, cost: 0 }));
}
}
/**
* Retrieves allocate landed cost entries table columns.
*/
export const useAllocateLandedCostEntriesTableColumns = () => {
return React.useMemo(
() => [
{
Header: intl.get('item'),
accessor: 'item.name',
disableSortBy: true,
width: '150',
},
{
Header: intl.get('quantity'),
accessor: 'quantity',
disableSortBy: true,
width: '100',
},
{
Header: intl.get('rate'),
accessor: 'rate',
disableSortBy: true,
width: '100',
align: 'right',
},
{
Header: intl.get('amount'),
accessor: 'amount',
disableSortBy: true,
align: 'right',
width: '100',
},
{
Header: intl.get('cost'),
accessor: 'cost',
width: '150',
Cell: MoneyFieldCell,
disableSortBy: true,
},
],
[],
);
};

102
src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.js Normal file
View File

@@ -0,0 +1,102 @@
import React from 'react';
import intl from 'react-intl-universal';
import { useSaveSettings } from 'hooks/query';
import { CreditNoteNumberDialogProvider } from './CreditNoteNumberDialogProvider';
import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withSettings from 'containers/Settings/withSettings';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import { compose } from 'utils';
import {
transformFormToSettings,
transformSettingsToForm,
} from 'containers/JournalNumber/utils';
/**
* credit note number dialog content
*/
function CreditNoteNumberDialogContent({
// #ownProps
initialValues,
onConfirm,
// #withSettings
nextNumber,
numberPrefix,
autoIncrement,
// #withDialogActions
closeDialog,
}) {
const { mutateAsync: saveSettings } = useSaveSettings();
const [referenceFormValues, setReferenceFormValues] = React.useState(null);
// Handle the submit form.
const handleSubmitForm = (values, { setSubmitting }) => {
// Handle the form success.
const handleSuccess = () => {
setSubmitting(false);
closeDialog('credit-number-form');
onConfirm(values);
};
// Handle the form errors.
const handleErrors = () => {
setSubmitting(false);
};
if (values.incrementMode === 'manual-transaction') {
handleSuccess();
return;
}
// Transformes the form values to settings to save it.
const options = transformFormToSettings(values, 'credit_note');
// Save the settings.
saveSettings({ options }).then(handleSuccess).catch(handleErrors);
};
// Handle the dialog close.
const handleClose = () => {
closeDialog('credit-number-form');
};
// Handle form change.
const handleChange = (values) => {
setReferenceFormValues(values);
};
// Description.
const description =
referenceFormValues?.incrementMode === 'auto'
? intl.get('credit_note.auto_increment.auto')
: intl.get('credit_note.auto_increment.manually');
return (
<CreditNoteNumberDialogProvider>
<ReferenceNumberForm
initialValues={{
...transformSettingsToForm({
nextNumber,
numberPrefix,
autoIncrement,
}),
...initialValues,
}}
description={description}
onSubmit={handleSubmitForm}
onClose={handleClose}
onChange={handleChange}
/>
</CreditNoteNumberDialogProvider>
);
}
export default compose(
withDialogActions,
withSettingsActions,
withSettings(({ creditNoteSettings }) => ({
autoIncrement: creditNoteSettings?.autoIncrement,
nextNumber: creditNoteSettings?.nextNumber,
numberPrefix: creditNoteSettings?.numberPrefix,
})),
)(CreditNoteNumberDialogContent);

28
src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogProvider.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { DialogContent } from 'components';
import { useSettingsCreditNotes } from 'hooks/query';
const CreditNoteNumberDialogContext = React.createContext();
/**
*Credit Note number dialog provider
*/
function CreditNoteNumberDialogProvider({ query, ...props }) {
const { isLoading: isSettingsLoading } = useSettingsCreditNotes();
// Provider payload.
const provider = {
isSettingsLoading,
};
return (
<DialogContent isLoading={isSettingsLoading}>
<CreditNoteNumberDialogContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useCreditNoteNumberDialogContext = () =>
React.useContext(CreditNoteNumberDialogContext);
export { CreditNoteNumberDialogProvider, useCreditNoteNumberDialogContext };

40
src/containers/Dialogs/CreditNoteNumberDialog/index.js Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose, saveInvoke } from 'utils';
const CreditNoteNumberDialogContent = React.lazy(() =>
import('./CreditNoteNumberDialogContent'),
);
/**
* Credit note number dialog.
*/
function CreditNoteNumberDialog({
dialogName,
payload: { initialFormValues },
isOpen,
onConfirm,
}) {
const handleConfirm = (values) => {
saveInvoke(onConfirm, values);
};
return (
<Dialog
title={<T id={'credit_note_number_settings'} />}
name={dialogName}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
>
<DialogSuspense>
<CreditNoteNumberDialogContent
initialValues={{ ...initialFormValues }}
onConfirm={handleConfirm}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(CreditNoteNumberDialog);

4
src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
View File

@@ -24,7 +24,7 @@ function InviteUserFormContent({
const handleClose = () => {
closeDialog(dialogName);
};
console.log(roles, 'XX');
return (
<Form>
<div className={CLASSES.DIALOG_BODY}>
@@ -49,7 +49,7 @@ function InviteUserFormContent({
<FastField name={'role_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'roles.label.role_name'} />}
label={<T id={'invite_user.label.role_name'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="role_id" />}
className={classNames(CLASSES.FILL, 'form-group--role_name')}

24
src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsDialogContent.js Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import { LockingTransactionsFormProvider } from './LockingTransactionsFormProvider';
import LockingTransactionsForm from './LockingTransactionsForm';
/**
* Locking transactions dialog content.
*/
export default function LockingTransactionsDialogContent({
// #ownProps
dialogName,
moduleName,
isEnabled,
}) {
return (
<LockingTransactionsFormProvider
isEnabled={isEnabled}
moduleName={moduleName}
dialogName={dialogName}
>
<LockingTransactionsForm />
</LockingTransactionsFormProvider>
);
}

89
src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.js Normal file
View File

@@ -0,0 +1,89 @@
import React from 'react';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import intl from 'react-intl-universal';
import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss';
import { AppToaster } from 'components';
import { CreateLockingTransactionsFormSchema } from './LockingTransactionsForm.schema';
import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
import LockingTransactionsFormContent from './LockingTransactionsFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, transformToForm } from 'utils';
const defaultInitialValues = {
module: '',
lock_to_date: moment(new Date()).format('YYYY-MM-DD'),
reason: '',
};
/**
* Locking Transactions Form.
*/
function LockingTransactionsForm({
// #withDialogActions
closeDialog,
}) {
const {
dialogName,
moduleName,
transactionLocking,
isEnabled,
createLockingTransactionMutate,
} = useLockingTransactionsContext();
// Initial form values.
const initialValues = React.useMemo(
() => ({
...(isEnabled
? {
...transformToForm(transactionLocking, defaultInitialValues),
module: moduleName,
}
: {
...defaultInitialValues,
module: moduleName,
}),
}),
[isEnabled],
);
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
setSubmitting(true);
// Handle request response success.
const onSuccess = (response) => {
AppToaster.show({
message: intl.get('locking_transactions.dialog.success_message'),
intent: Intent.SUCCESS,
});
closeDialog(dialogName);
};
// Handle request response errors.
const onError = ({
response: {
data: { errors },
},
}) => {
setSubmitting(false);
};
createLockingTransactionMutate(values).then(onSuccess).catch(onError);
};
return (
<Formik
validationSchema={CreateLockingTransactionsFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={LockingTransactionsFormContent}
/>
);
}
export default compose(withDialogActions)(LockingTransactionsForm);

14
src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsForm.schema.js Normal file
View File

@@ -0,0 +1,14 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
lock_to_date: Yup.date().required().label(intl.get('date')),
module: Yup.string().required(),
reason: Yup.string()
.required()
.min(3)
.max(DATATYPES_LENGTH.TEXT)
.label(intl.get('reason')),
});
export const CreateLockingTransactionsFormSchema = Schema;

17
src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormContent.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Form } from 'formik';
import LockingTransactionsFormFields from './LockingTransactionsFormFields';
import LockingTransactionsFormFloatingActions from './LockingTransactionsFormFloatingActions';
/**
* locking Transactions form content.
*/
export default function LockingTransactionsFormContent() {
return (
<Form>
<LockingTransactionsFormFields />
<LockingTransactionsFormFloatingActions />
</Form>
);
}

23
src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js → src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.js
View File

@@ -14,28 +14,28 @@ import {
} from 'utils';
/**
* Transactions locking form fields.
* locking Transactions form fields.
*/
export default function TransactionsLockingFormFields() {
const dateFieldRef = useAutofocus();
export default function LockingTransactionsFormFields() {
const reasonFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
{/*------------ Date -----------*/}
<FastField name={'date'}>
{/*------------ Locking Date -----------*/}
<FastField name={'lock_to_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date'} />}
label={<T id={'locking_transactions.dialog.locking_date'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
helperText={<ErrorMessage name="lock_to_date" />}
minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
form.setFieldValue('lock_to_date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
@@ -43,16 +43,16 @@ export default function TransactionsLockingFormFields() {
minimal: true,
}}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (dateFieldRef.current = ref)}
/>
</FormGroup>
)}
</FastField>
{/*------------ reasons -----------*/}
{/*------------ Locking Reason -----------*/}
<FastField name={'reason'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reason'} />}
label={<T id={'locking_transactions.dialog.reason'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--reason'}
intent={inputIntent({ error, touched })}
@@ -62,6 +62,7 @@ export default function TransactionsLockingFormFields() {
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (reasonFieldRef.current = ref)}
{...field}
/>
</FormGroup>

28
src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js → src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFloatingActions.js
View File

@@ -3,21 +3,21 @@ import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
import { useLockingTransactionsContext } from './LockingTransactionsFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Transactions locking floating actions.
* locking Transactions floating actions.
*/
function TransactionsLockingFloatingActions({
function LockingTransactionsFormFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useTransactionLockingContext();
const { dialogName } = useLockingTransactionsContext();
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
@@ -27,24 +27,22 @@ function TransactionsLockingFloatingActions({
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
disabled={isSubmitting}
onClick={handleCancelBtnClick}
style={{ minWidth: '75px' }}
>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
loading={isSubmitting}
style={{ minWidth: '75px' }}
style={{ minWidth: '95px' }}
type="submit"
loading={isSubmitting}
>
{<T id={'submit'} />}
{<T id={'save'} />}
</Button>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
<T id={'cancel'} />
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(TransactionsLockingFloatingActions);
export default compose(withDialogActions)(
LockingTransactionsFormFloatingActions,
);

46
src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormProvider.js Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import { DialogContent } from 'components';
import {
useCreateLockingTransactoin,
useEditTransactionsLocking,
} from 'hooks/query';
const LockingTransactionsContext = React.createContext();
/**
* Locking transactions form provider.
*/
function LockingTransactionsFormProvider({
moduleName,
isEnabled,
dialogName,
...props
}) {
// Create locking transactions mutations.
const { mutateAsync: createLockingTransactionMutate } =
useCreateLockingTransactoin();
const { data: transactionLocking, isLoading: isTransactionsLockingLoading } =
useEditTransactionsLocking(moduleName, {
enabled: !!isEnabled,
});
// State provider.
const provider = {
dialogName,
moduleName,
createLockingTransactionMutate,
transactionLocking,
isEnabled,
};
return (
<DialogContent isLoading={isTransactionsLockingLoading}>
<LockingTransactionsContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useLockingTransactionsContext = () =>
React.useContext(LockingTransactionsContext);
export { LockingTransactionsFormProvider, useLockingTransactionsContext };

38
src/containers/Dialogs/LockingTransactionsDialog/index.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const LockingTransactionsDialogContent = React.lazy(() =>
import('./LockingTransactionsDialogContent'),
);
/**
* Locking Transactions dialog
*/
function LockingTransactionsDialog({
dialogName,
payload: { module, isEnabled },
isOpen,
}) {
return (
<Dialog
name={dialogName}
autoFocus={true}
title={<T id={'locking_transactions.dialog.label'} />}
canEscapeKeyClose={true}
isOpen={isOpen}
className={'dialog--transaction--locking'}
>
<DialogSuspense>
<LockingTransactionsDialogContent
moduleName={module}
dialogName={dialogName}
isEnabled={isEnabled}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(LockingTransactionsDialog);

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

@@ -86,7 +86,7 @@ function MoneyInForm({
});
})
.finally(() => {
setSubmitting(true);
setSubmitting(false);
});
};

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

@@ -86,7 +86,7 @@ function MoneyOutForm({
});
})
.finally(() => {
setSubmitting(true);
setSubmitting(false);
});
};
return (

2
src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js
View File

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

21
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteDialogContent.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import { ReconcileCreditNoteFormProvider } from './ReconcileCreditNoteFormProvider';
import ReconcileCreditNoteForm from './ReconcileCreditNoteForm';
/**
* Reconcile credit note dialog content.
*/
export default function ReconcileCreditNoteDialogContent({
// #ownProps
dialogName,
creditNoteId,
}) {
return (
<ReconcileCreditNoteFormProvider
creditNoteId={creditNoteId}
dialogName={dialogName}
>
<ReconcileCreditNoteForm />
</ReconcileCreditNoteFormProvider>
);
}

80
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js Normal file
View File

@@ -0,0 +1,80 @@
import React from 'react';
import styled from 'styled-components';
import { defaultTo } from 'lodash';
import { DataTableEditable } from 'components';
import { compose, updateTableCell } from 'utils';
import { useDeepCompareEffect } from 'hooks/utils';
import {
useReconcileCreditNoteTableColumns,
maxAmountCreditFromRemaining,
maxCreditNoteAmountEntries,
} from './utils';
import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
/**
* Reconcile credit note entries table.
*/
export default function ReconcileCreditNoteEntriesTable({
onUpdateData,
entries,
errors,
}) {
// Retrieve the reconcile credit note table columns.
const columns = useReconcileCreditNoteTableColumns();
// Reconcile credit note context provider.
const {
creditNote: { credits_remaining },
} = useReconcileCreditNoteContext();
// Handle update data.
const handleUpdateData = React.useCallback(
(rowIndex, columnId, value) => {
const newRows = compose(updateTableCell(rowIndex, columnId, value))(
entries,
);
onUpdateData(newRows);
},
[onUpdateData, entries],
);
// Deep compare entries to modify new entries.
useDeepCompareEffect(() => {
const newRows = compose(
maxCreditNoteAmountEntries(defaultTo(credits_remaining, 0)),
maxAmountCreditFromRemaining,
)(entries);
onUpdateData(newRows);
}, [entries]);
return (
<ReconcileCreditNoteEditableTable
columns={columns}
data={entries}
payload={{
errors: errors || [],
updateData: handleUpdateData,
}}
/>
);
}
export const ReconcileCreditNoteEditableTable = styled(DataTableEditable)`
.table {
max-height: 400px;
overflow: auto;
.thead .tr .th {
padding-top: 8px;
padding-bottom: 8px;
}
.tbody {
.tr .td {
padding: 2px 4px;
min-height: 38px;
}
}
}
`;

97
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.js Normal file
View File

@@ -0,0 +1,97 @@
import React from 'react';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import '../../../style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss';
import { AppToaster } from 'components';
import { CreateReconcileCreditNoteFormSchema } from './ReconcileCreditNoteForm.schema';
import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
import ReconcileCreditNoteFormContent from './ReconcileCreditNoteFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, transformToForm } from 'utils';
import { transformErrors } from './utils';
// Default form initial values.
const defaultInitialValues = {
entries: [
{
invoice_id: '',
amount: '',
},
],
};
/**
* Reconcile credit note form.
*/
function ReconcileCreditNoteForm({
// #withDialogActions
closeDialog,
}) {
const {
dialogName,
creditNoteId,
reconcileCreditNotes,
createReconcileCreditNoteMutate,
} = useReconcileCreditNoteContext();
// Initial form values.
const initialValues = {
entries: reconcileCreditNotes.map((entry) => ({
...entry,
invoice_id: entry.id,
amount: '',
})),
};
// Handle form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
setSubmitting(true);
// Filters the entries.
const entries = values.entries
.filter((entry) => entry.invoice_id && entry.amount)
.map((entry) => transformToForm(entry, defaultInitialValues.entries[0]));
const form = {
...values,
entries: entries,
};
// Handle the request success.
const onSuccess = (response) => {
AppToaster.show({
message: intl.get('reconcile_credit_note.success_message'),
intent: Intent.SUCCESS,
});
setSubmitting(false);
closeDialog(dialogName);
};
// Handle the request error.
const onError = ({
response: {
data: { errors },
},
}) => {
if (errors) {
transformErrors(errors, { setErrors });
}
setSubmitting(false);
};
createReconcileCreditNoteMutate([creditNoteId, form])
.then(onSuccess)
.catch(onError);
};
return (
<Formik
validationSchema={CreateReconcileCreditNoteFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={ReconcileCreditNoteFormContent}
/>
);
}
export default compose(withDialogActions)(ReconcileCreditNoteForm);

12
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteForm.schema.js Normal file
View File

@@ -0,0 +1,12 @@
import * as Yup from 'yup';
const Schema = Yup.object().shape({
entries: Yup.array().of(
Yup.object().shape({
invoice_id: Yup.number().required(),
amount: Yup.number().nullable(),
}),
),
});
export const CreateReconcileCreditNoteFormSchema = Schema;

28
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormContent.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { Form } from 'formik';
import { Choose } from 'components';
import ReconcileCreditNoteFormFields from './ReconcileCreditNoteFormFields';
import ReconcileCreditNoteFormFloatingActions from './ReconcileCreditNoteFormFloatingActions';
import { EmptyStatuCallout } from './utils';
import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
/**
* Reconcile credit note form content.
*/
export default function ReconcileCreditNoteFormContent() {
const { isEmptyStatus } = useReconcileCreditNoteContext();
return (
<Choose>
<Choose.When condition={isEmptyStatus}>
<EmptyStatuCallout />
</Choose.When>
<Choose.Otherwise>
<Form>
<ReconcileCreditNoteFormFields />
<ReconcileCreditNoteFormFloatingActions />
</Form>
</Choose.Otherwise>
</Choose>
);
}

115
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js Normal file
View File

@@ -0,0 +1,115 @@
import React from 'react';
import { FastField, useFormikContext } from 'formik';
import { Classes } from '@blueprintjs/core';
import styled from 'styled-components';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { subtract } from 'lodash';
import { getEntriesTotal } from 'containers/Entries/utils';
import ReconcileCreditNoteEntriesTable from './ReconcileCreditNoteEntriesTable';
import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
import { formattedAmount } from 'utils';
/**
* Reconcile credit note form fields.
*/
export default function ReconcileCreditNoteFormFields() {
const {
creditNote: { formatted_credits_remaining },
} = useReconcileCreditNoteContext();
return (
<div className={Classes.DIALOG_BODY}>
<CreditRemainingRoot>
<T id={'reconcile_credit_note.dialog.credits_balance'} />
<CreditRemainingBalance>
{formatted_credits_remaining}
</CreditRemainingBalance>
</CreditRemainingRoot>
{/*------------ Reconcile credit entries table -----------*/}
<FastField name={'entries'}>
{({ form: { setFieldValue }, field: { value }, meta: { error } }) => (
<ReconcileCreditNoteEntriesTable
entries={value}
errors={error}
onUpdateData={(newEntries) => {
setFieldValue('entries', newEntries);
}}
/>
)}
</FastField>
<ReconcileCreditNoteTotalLines />
</div>
);
}
/**
* Reconcile credit note total lines.
* @returns {React.JSX}
*/
function ReconcileCreditNoteTotalLines() {
// Reconcile credit note context.
const {
creditNote: { credits_remaining, currency_code },
} = useReconcileCreditNoteContext();
// Formik form context.
const { values } = useFormikContext();
// Calculate the total amount of credit entries.
const totalAmount = React.useMemo(
() => getEntriesTotal(values.entries),
[values.entries],
);
// Calculate the total amount of credit remaining.
const creditsRemaining = subtract(credits_remaining, totalAmount);
return (
<ReconcileCreditNoteTotalLinesRoot>
<ReconcileTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={
<T id={'reconcile_credit_note.dialog.total_amount_to_credit'} />
}
value={formattedAmount(totalAmount, currency_code)}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'reconcile_credit_note.dialog.remaining_credits'} />}
value={formattedAmount(creditsRemaining, currency_code)}
borderStyle={TotalLineBorderStyle.SingleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</ReconcileTotalLines>
</ReconcileCreditNoteTotalLinesRoot>
);
}
export const CreditRemainingRoot = styled.div`
display: flex;
justify-content: flex-end;
padding-bottom: 15px;
`;
export const CreditRemainingBalance = styled.span`
font-weight: 600;
color: #343463;
margin-left: 5px;
`;
export const ReconcileCreditNoteTotalLinesRoot = styled.div`
margin-top: 15px;
`;
export const ReconcileTotalLines = styled(TotalLines)`
margin-left: auto;
`;

47
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js Normal file
View File

@@ -0,0 +1,47 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Reconcile credit note floating actions.
*/
function ReconcileCreditNoteFormFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useReconcileCreditNoteContext();
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
intent={Intent.PRIMARY}
style={{ minWidth: '95px' }}
type="submit"
loading={isSubmitting}
>
{<T id={'save'} />}
</Button>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
<T id={'cancel'} />
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(
ReconcileCreditNoteFormFloatingActions,
);

64
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormProvider.js Normal file
View File

@@ -0,0 +1,64 @@
import React from 'react';
import { DialogContent } from 'components';
import {
useCreditNote,
useReconcileCreditNote,
useCreateReconcileCreditNote,
} from 'hooks/query';
import { isEmpty } from 'lodash';
const ReconcileCreditNoteDialogContext = React.createContext();
/**
* Reconcile credit note provider.
*/
function ReconcileCreditNoteFormProvider({
creditNoteId,
dialogName,
...props
}) {
// Handle fetch reconcile credit note details.
const { isLoading: isReconcileCreditLoading, data: reconcileCreditNotes } =
useReconcileCreditNote(creditNoteId, {
enabled: !!creditNoteId,
});
// Handle fetch vendor credit details.
const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
creditNoteId,
{
enabled: !!creditNoteId,
},
);
// Create reconcile credit note mutations.
const { mutateAsync: createReconcileCreditNoteMutate } =
useCreateReconcileCreditNote();
// Detarmines the datatable empty status.
const isEmptyStatus = isEmpty(reconcileCreditNotes);
// provider payload.
const provider = {
dialogName,
reconcileCreditNotes,
createReconcileCreditNoteMutate,
isEmptyStatus,
creditNote,
creditNoteId,
};
return (
<DialogContent
isLoading={isReconcileCreditLoading || isCreditNoteLoading}
name={'reconcile-credit-note'}
>
<ReconcileCreditNoteDialogContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useReconcileCreditNoteContext = () =>
React.useContext(ReconcileCreditNoteDialogContext);
export { ReconcileCreditNoteFormProvider, useReconcileCreditNoteContext };

36
src/containers/Dialogs/ReconcileCreditNoteDialog/index.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import { FormattedMessage as T, Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const ReconcileCreditNoteDialogContent = React.lazy(() =>
import('./ReconcileCreditNoteDialogContent'),
);
/**
* Reconcile credit note dialog.
*/
function ReconcileCreditNoteDialog({
dialogName,
payload: { creditNoteId },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'reconcile_credit_note.label'} />}
canEscapeKeyClose={true}
isOpen={isOpen}
className="dialog--reconcile-credit-form"
>
<DialogSuspense>
<ReconcileCreditNoteDialogContent
creditNoteId={creditNoteId}
dialogName={dialogName}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(ReconcileCreditNoteDialog);

119
src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js Normal file
View File

@@ -0,0 +1,119 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Callout, Intent, Classes } from '@blueprintjs/core';
import * as R from 'ramda';
import clsx from 'classnames';
import { CLASSES } from 'common/classes';
import { MoneyFieldCell, FormatDateCell, AppToaster, T } from 'components';
export const transformErrors = (errors, { setErrors }) => {
if (errors.some((e) => e.type === 'INVOICES_HAS_NO_REMAINING_AMOUNT')) {
AppToaster.show({
message: 'The amount credit from the given invoice has no remaining amount.',
intent: Intent.DANGER,
});
}
if (
errors.find((error) => error.type === 'CREDIT_NOTE_HAS_NO_REMAINING_AMOUNT')
) {
AppToaster.show({
message: 'The total amount bigger than from remaining credit note amount',
intent: Intent.DANGER,
});
}
};
/**
* Empty status callout.
* @returns {React.JSX}
*/
export function EmptyStatuCallout() {
return (
<div className={Classes.DIALOG_BODY}>
<Callout intent={Intent.PRIMARY}>
<p>
<T
id={'reconcile_credit_note.alert.there_is_no_open_sale_invoices'}
/>
</p>
</Callout>
</div>
);
}
/**
* Retrieves reconcile credit note table columns.
* @returns
*/
export const useReconcileCreditNoteTableColumns = () => {
return React.useMemo(
() => [
{
Header: intl.get('invoice_date'),
accessor: 'formatted_invoice_date',
Cell: FormatDateCell,
disableSortBy: true,
width: '120',
},
{
Header: intl.get('invoice_no'),
accessor: 'invoice_no',
disableSortBy: true,
width: '100',
},
{
Header: intl.get('amount'),
accessor: 'formatted_amount',
disableSortBy: true,
align: 'right',
width: '100',
},
{
Header: intl.get('reconcile_credit_note.column.remaining_amount'),
accessor: 'formatted_due_amount',
disableSortBy: true,
align: 'right',
width: '150',
className: clsx(CLASSES.FONT_BOLD),
},
{
Header: intl.get('reconcile_credit_note.column.amount_to_credit'),
accessor: 'amount',
Cell: MoneyFieldCell,
disableSortBy: true,
width: '150',
},
],
[],
);
};
/**
* Sets max credit amount from sale invoicue balance.
*/
export const maxAmountCreditFromRemaining = (entries) => {
return entries.map((entry) => ({
...entry,
amount: entry.amount ? Math.min(entry.balance, entry.amount) : '',
}));
};
/**
* Adjusts entries amount based on the given total.
*/
export const maxCreditNoteAmountEntries = R.curry((total, entries) => {
let balance = total;
return entries.map((entry) => {
const oldBalance = balance;
balance -= entry.amount ? entry.amount : 0;
return {
...entry,
amount: entry.amount
? Math.max(Math.min(entry.amount, oldBalance), 0)
: '',
};
});
});

18
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditDialogContent.js Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import { ReconcileVendorCreditFormProvider } from './ReconcileVendorCreditFormProvider';
import ReconcileVendorCreditForm from './ReconcileVendorCreditForm';
export default function ReconcileVendorCreditDialogContent({
// #ownProps
dialogName,
vendorCreditId,
}) {
return (
<ReconcileVendorCreditFormProvider
vendorCreditId={vendorCreditId}
dialogName={dialogName}
>
<ReconcileVendorCreditForm />
</ReconcileVendorCreditFormProvider>
);
}

83
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import styled from 'styled-components';
import * as R from 'ramda';
import { defaultTo } from 'lodash';
import { useDeepCompareEffect } from 'hooks/utils';
import { DataTableEditable } from 'components';
import { compose, updateTableCell } from 'utils';
import {
useReconcileVendorCreditTableColumns,
maxAmountCreditFromRemaining,
} from './utils';
import { maxCreditNoteAmountEntries } from '../ReconcileCreditNoteDialog/utils';
import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
/**
* Reconcile vendor credit entries table.
*/
export default function ReconcileVendorCreditEntriesTable({
onUpdateData,
entries,
errors,
}) {
// Reconcile vendor credit table columns.
const columns = useReconcileVendorCreditTableColumns();
// Reconcile vendor credit context.
const {
vendorCredit: { credits_remaining },
} = useReconcileVendorCreditContext();
// Handle update data.
const handleUpdateData = React.useCallback(
(rowIndex, columnId, value) => {
const newRows = compose(updateTableCell(rowIndex, columnId, value))(
entries,
);
onUpdateData(newRows);
},
[onUpdateData, entries],
);
// Watches deeply entries to compose a new entries.
useDeepCompareEffect(() => {
const newEntries = R.compose(
maxCreditNoteAmountEntries(defaultTo(credits_remaining, 0)),
maxAmountCreditFromRemaining,
)(entries);
onUpdateData(newEntries);
}, [entries]);
return (
<ReconcileVendorCreditEditableTable
columns={columns}
data={entries}
payload={{
errors: errors || [],
updateData: handleUpdateData,
}}
/>
);
}
export const ReconcileVendorCreditEditableTable = styled(DataTableEditable)`
.table {
max-height: 400px;
overflow: auto;
.thead .tr .th {
padding-top: 8px;
padding-bottom: 8px;
}
.tbody {
.tr .td {
padding: 2px 4px;
min-height: 38px;
}
}
}
`;

42
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function ReconcileVendorCreditFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useReconcileVendorCreditContext();
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
intent={Intent.PRIMARY}
style={{ minWidth: '95px' }}
type="submit"
loading={isSubmitting}
>
{<T id={'save'} />}
</Button>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
<T id={'cancel'} />
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(ReconcileVendorCreditFloatingActions);

97
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.js Normal file
View File

@@ -0,0 +1,97 @@
import React from 'react';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import '../../../style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss';
import { AppToaster } from 'components';
import { CreateReconcileVendorCreditFormSchema } from './ReconcileVendorCreditForm.schema';
import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
import ReconcileVendorCreditFormContent from './ReconcileVendorCreditFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, transformToForm } from 'utils';
// Default form initial values.
const defaultInitialValues = {
entries: [
{
bill_id: '',
amount: '',
},
],
};
/**
* Reconcile vendor credit form.
*/
function ReconcileVendorCreditForm({
// #withDialogActions
closeDialog,
}) {
const {
dialogName,
reconcileVendorCredits,
createReconcileVendorCreditMutate,
vendorCredit,
} = useReconcileVendorCreditContext();
// Initial form values.
const initialValues = {
entries: reconcileVendorCredits.map((entry) => ({
...entry,
bill_id: entry.id,
amount: '',
})),
};
// Handle form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
setSubmitting(true);
// Filters the entries.
const entries = values.entries
.filter((entry) => entry.bill_id && entry.amount)
.map((entry) => transformToForm(entry, defaultInitialValues.entries[0]));
const form = {
...values,
entries: entries,
};
// Handle the request success.
const onSuccess = (response) => {
AppToaster.show({
message: intl.get('reconcile_vendor_credit.dialog.success_message'),
intent: Intent.SUCCESS,
});
setSubmitting(false);
closeDialog(dialogName);
};
// Handle the request error.
const onError = ({
response: {
data: { errors },
},
}) => {
// if (errors) {
// transformErrors(errors, { setErrors });
// }
setSubmitting(false);
};
createReconcileVendorCreditMutate([vendorCredit.id, form])
.then(onSuccess)
.catch(onError);
};
return (
<Formik
validationSchema={CreateReconcileVendorCreditFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={ReconcileVendorCreditFormContent}
/>
);
}
export default compose(withDialogActions)(ReconcileVendorCreditForm);

12
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditForm.schema.js Normal file
View File

@@ -0,0 +1,12 @@
import * as Yup from 'yup';
const Schema = Yup.object().shape({
entries: Yup.array().of(
Yup.object().shape({
bill_id: Yup.number().required(),
amount: Yup.number().nullable(),
}),
),
});
export const CreateReconcileVendorCreditFormSchema = Schema;

26
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormContent.js Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import { Form } from 'formik';
import { Choose } from 'components';
import { EmptyStatuCallout } from './utils';
import ReconcileVendorCreditFormFields from './ReconcileVendorCreditFormFields';
import ReconcileVendorCreditFloatingActions from './ReconcileVendorCreditFloatingActions';
import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
export default function ReconcileVendorCreditFormContent() {
const { isEmptyStatus } = useReconcileVendorCreditContext();
return (
<Choose>
<Choose.When condition={isEmptyStatus}>
<EmptyStatuCallout />
</Choose.When>
<Choose.Otherwise>
<Form>
<ReconcileVendorCreditFormFields />
<ReconcileVendorCreditFloatingActions />
</Form>
</Choose.Otherwise>
</Choose>
);
}

113
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js Normal file
View File

@@ -0,0 +1,113 @@
import React from 'react';
import { FastField, useFormikContext } from 'formik';
import { Classes } from '@blueprintjs/core';
import { subtract } from 'lodash';
import styled from 'styled-components';
import { getEntriesTotal } from 'containers/Entries/utils';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import ReconcileVendorCreditEntriesTable from './ReconcileVendorCreditEntriesTable';
import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
import { formattedAmount } from 'utils';
export default function ReconcileVendorCreditFormFields() {
const {
vendorCredit: { formatted_credits_remaining },
} = useReconcileVendorCreditContext();
return (
<div className={Classes.DIALOG_BODY}>
<CreditRemainingRoot>
<T id={'reconcile_vendor_note.dialog.credits_balance'} />
<CreditRemainingBalance>
{formatted_credits_remaining}
</CreditRemainingBalance>
</CreditRemainingRoot>
<FastField name={'entries'}>
{({
form: { setFieldValue, values },
field: { value },
meta: { error, touched },
}) => (
<ReconcileVendorCreditEntriesTable
entries={value}
errors={error}
onUpdateData={(newEntries) => {
setFieldValue('entries', newEntries);
}}
/>
)}
</FastField>
<ReconcileVendorCreditTotalLines />
</div>
);
}
/**
* Reconcile vendor credit total lines.
* @returns {React.JSX}
*/
function ReconcileVendorCreditTotalLines() {
const {
vendorCredit: { currency_code, credits_remaining },
} = useReconcileVendorCreditContext();
const { values } = useFormikContext();
// Calculate the total amount of credit entries.
const totalAmount = React.useMemo(
() => getEntriesTotal(values.entries),
[values.entries],
);
// Calculate the total amount of credit remaining.
const creditsRemaining = subtract(credits_remaining, totalAmount);
return (
<ReconcileVendorCreditTotalLinesRoot>
<ReconcileTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={
<T id={'reconcile_vendor_credit.dialog.total_amount_to_credit'} />
}
value={formattedAmount(totalAmount, currency_code)}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'reconcile_vendor_credit.dialog.remaining_credits'} />}
value={formattedAmount(creditsRemaining, currency_code)}
borderStyle={TotalLineBorderStyle.SingleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</ReconcileTotalLines>
</ReconcileVendorCreditTotalLinesRoot>
);
}
const CreditRemainingRoot = styled.div`
display: flex;
justify-content: flex-end;
padding-bottom: 15px;
`;
const CreditRemainingBalance = styled.span`
font-weight: 600;
color: #343463;
margin-left: 5px;
`;
export const ReconcileVendorCreditTotalLinesRoot = styled.div`
margin-top: 15px;
`;
export const ReconcileTotalLines = styled(TotalLines)`
margin-left: auto;
`;

64
src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormProvider.js Normal file
View File

@@ -0,0 +1,64 @@
import React from 'react';
import { DialogContent } from 'components';
import {
useVendorCredit,
useReconcileVendorCredit,
useCreateReconcileVendorCredit,
} from 'hooks/query';
import { isEmpty } from 'lodash';
const ReconcileVendorCreditFormContext = React.createContext();
/**
* Reconcile vendor credit provider.
*/
function ReconcileVendorCreditFormProvider({
vendorCreditId,
dialogName,
...props
}) {
// Handle fetch reconcile
const {
isLoading: isReconcileVendorCreditLoading,
data: reconcileVendorCredits,
} = useReconcileVendorCredit(vendorCreditId, {
enabled: !!vendorCreditId,
});
// Handle fetch vendor credit details.
const { data: vendorCredit, isLoading: isVendorCreditLoading } =
useVendorCredit(vendorCreditId, {
enabled: !!vendorCreditId,
});
// Create reconcile vendor credit mutations.
const { mutateAsync: createReconcileVendorCreditMutate } =
useCreateReconcileVendorCredit();
// Detarmines the datatable empty status.
const isEmptyStatus = isEmpty(reconcileVendorCredits);
// provider.
const provider = {
dialogName,
reconcileVendorCredits,
createReconcileVendorCreditMutate,
isEmptyStatus,
vendorCredit,
};
return (
<DialogContent
isLoading={isVendorCreditLoading || isReconcileVendorCreditLoading}
name={'reconcile-vendor-credit'}
>
<ReconcileVendorCreditFormContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useReconcileVendorCreditContext = () =>
React.useContext(ReconcileVendorCreditFormContext);
export { ReconcileVendorCreditFormProvider, useReconcileVendorCreditContext };

36
src/containers/Dialogs/ReconcileVendorCreditDialog/index.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import { FormattedMessage as T, Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const ReconcileVendorCreditDialogContent = React.lazy(() =>
import('./ReconcileVendorCreditDialogContent'),
);
/**
* Reconcile vendor credit dialog.
*/
function ReconcileVendorCreditDialog({
dialogName,
payload: { vendorCreditId },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'reconcile_vendor_credit.dialog.label'} />}
canEscapeKeyClose={true}
isOpen={isOpen}
className="dialog--reconcile-vendor-credit-form"
>
<DialogSuspense>
<ReconcileVendorCreditDialogContent
vendorCreditId={vendorCreditId}
dialogName={dialogName}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(ReconcileVendorCreditDialog);

78
src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js Normal file
View File

@@ -0,0 +1,78 @@
import React from 'react';
import { Callout, Intent, Classes } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { CLASSES } from 'common/classes';
import { T } from 'components';
import { MoneyFieldCell, FormatDateCell } from 'components';
export const transformErrors = (errors, { setErrors }) => {};
export function EmptyStatuCallout() {
return (
<div className={Classes.DIALOG_BODY}>
<Callout intent={Intent.PRIMARY}>
<p>
<T id={'reconcile_vendor_credit.alert.there_is_no_open_bills'} />
</p>
</Callout>
</div>
);
}
/**
* Reconcile vendor credit table columns.
*/
export const useReconcileVendorCreditTableColumns = () => {
return React.useMemo(
() => [
{
Header: intl.get('bill_date'),
accessor: 'formatted_bill_date',
Cell: FormatDateCell,
disableSortBy: true,
width: '120',
},
{
Header: intl.get('reconcile_vendor_credit.column.bill_number'),
accessor: 'bill_number',
disableSortBy: true,
width: '100',
},
{
Header: intl.get('amount'),
accessor: 'formatted_amount',
disableSortBy: true,
align: 'right',
width: '100',
},
{
Header: intl.get('reconcile_vendor_credit.column.remaining_amount'),
accessor: 'formatted_due_amount',
disableSortBy: true,
align: 'right',
width: '150',
className: clsx(CLASSES.FONT_BOLD),
},
{
Header: intl.get('reconcile_vendor_credit.column.amount_to_credit'),
accessor: 'amount',
Cell: MoneyFieldCell,
disableSortBy: true,
width: '150',
},
],
[],
);
};
/**
* Sets max amount credit from purchase due amount.
*/
export const maxAmountCreditFromRemaining = (entries) => {
return entries.map((entry) => ({
...entry,
amount: entry.amount ? Math.min(entry.due_amount, entry.amount) : '',
}));
};

23
src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteDialogContent.js Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import 'style/pages/RefundCreditNote/RefundCreditNote.scss';
import { RefundCreditNoteFormProvider } from './RefundCreditNoteFormProvider';
import RefundCreditNoteForm from './RefundCreditNoteForm';
/**
* Refund credit note dialog content.
*/
export default function RefundCreditNoteDialogContent({
// #ownProps
dialogName,
creditNoteId,
}) {
return (
<RefundCreditNoteFormProvider
creditNoteId={creditNoteId}
dialogName={dialogName}
>
<RefundCreditNoteForm />
</RefundCreditNoteFormProvider>
);
}

45
src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFloatingActions.js Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Refund credit note floating actions.
*/
function RefundCreditNoteFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
// refund credit note dialog context.
const { dialogName } = useRefundCreditNoteContext();
// Handle close button click.
const handleCancelBtnClick = () => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
loading={isSubmitting}
style={{ minWidth: '120px' }}
type="submit"
text={<T id={'refund'} />}
/>
</div>
</div>
);
}
export default compose(withDialogActions)(RefundCreditNoteFloatingActions);

76
src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js Normal file
View File

@@ -0,0 +1,76 @@
import React from 'react';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import moment from 'moment';
import { omit } from 'lodash';
import { AppToaster } from 'components';
import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
import { CreateRefundCreditNoteFormSchema } from './RefundCreditNoteForm.schema';
import RefundCreditNoteFormContent from './RefundCreditNoteFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
const defaultInitialValues = {
from_account_id: '',
date: moment(new Date()).format('YYYY-MM-DD'),
reference_no: '',
description: '',
amount: '',
};
/**
* Refund credit note form.
*/
function RefundCreditNoteForm({
// #withDialogActions
closeDialog,
}) {
const { dialogName, creditNote, createRefundCreditNoteMutate } =
useRefundCreditNoteContext();
// Initial form values
const initialValues = {
...defaultInitialValues,
...creditNote,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting }) => {
const form = {
...omit(values, ['currency_code', 'credits_remaining']),
};
// Handle request response success.
const onSaved = (response) => {
AppToaster.show({
message: intl.get('refund_credit_note.dialog.success_message'),
intent: Intent.SUCCESS,
});
closeDialog(dialogName);
};
// Handle request response errors.
const onError = ({
response: {
data: { errors },
},
}) => {
setSubmitting(false);
};
createRefundCreditNoteMutate([creditNote.id, form])
.then(onSaved)
.catch(onError);
};
return (
<Formik
validationSchema={CreateRefundCreditNoteFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={RefundCreditNoteFormContent}
/>
);
}
export default compose(withDialogActions)(RefundCreditNoteForm);

12
src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js Normal file
View File

@@ -0,0 +1,12 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
date: Yup.date().required().label(intl.get('date')),
amount: Yup.number().required(),
reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
from_account_id: Yup.number().required().label(intl.get('deposit_account_')),
description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
});
export const CreateRefundCreditNoteFormSchema = Schema;

16
src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormContent.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { Form } from 'formik';
import RefundCreditNoteFormFields from './RefundCreditNoteFormFields';
import RefundCreditNoteFloatingActions from './RefundCreditNoteFloatingActions';
/**
* Refund credit note form content.
*/
export default function RefundCreditNoteFormContent() {
return (
<Form>
<RefundCreditNoteFormFields />
<RefundCreditNoteFloatingActions />
</Form>
);
}

164
src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js Normal file
View File

@@ -0,0 +1,164 @@
import React from 'react';
import intl from 'react-intl-universal';
import { FastField, ErrorMessage } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { DateInput } from '@blueprintjs/datetime';
import {
Icon,
FieldRequiredHint,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FormattedMessage as T,
} from 'components';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from 'utils';
import { useAutofocus } from 'hooks';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
/**
* Refund credit note form fields.
*/
function RefundCreditNoteFormFields() {
const { accounts } = useRefundCreditNoteContext();
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
{/* ------------- Refund date ------------- */}
<FastField name={'date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'refund_credit_note.dialog.refund_date'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
// inline={true}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
{/* ------------- Amount ------------- */}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'refund_credit_note.dialog.amount'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--amount', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
// inline={true}
>
<ControlGroup>
<InputPrependText text={values.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (amountFieldRef.current = ref)}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
{/* ------------ Reference No. ------------ */}
<FastField name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference_no'} />}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference" />}
// inline={true}
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/* ------------ Form account ------------ */}
<FastField name={'from_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'refund_credit_note.dialog.from_account'} />}
className={classNames(
'form-group--from_account_id',
'form-group--select-list',
CLASSES.FILL,
)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'from_account_id'} />}
// inline={true}
>
<AccountsSuggestField
selectedAccountId={value}
accounts={accounts}
onAccountSelected={({ id }) =>
form.setFieldValue('from_account_id', id)
}
inputProps={{
placeholder: intl.get('select_account'),
}}
filterByTypes={[
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.FIXED_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
{/* --------- Statement --------- */}
<FastField name={'description'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'refund_credit_note.dialog.description'} />}
className={'form-group--description'}
// inline={true}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
</div>
);
}
export default RefundCreditNoteFormFields;

52
src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
import { DialogContent } from 'components';
import { pick } from 'lodash';
import {
useAccounts,
useCreditNote,
useCreateRefundCreditNote,
} from 'hooks/query';
const RefundCreditNoteContext = React.createContext();
/**
* Refund credit note form provider.
*/
function RefundCreditNoteFormProvider({ creditNoteId, dialogName, ...props }) {
// Handle fetch accounts data.
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
// Handle fetch credit note data.
const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
creditNoteId,
{
enabled: !!creditNoteId,
},
);
// Create and edit credit note mutations.
const { mutateAsync: createRefundCreditNoteMutate } =
useCreateRefundCreditNote();
// State provider.
const provider = {
creditNote: {
...pick(creditNote, ['id', 'credits_remaining', 'currency_code']),
amount: creditNote.credits_remaining,
},
accounts,
dialogName,
createRefundCreditNoteMutate,
};
return (
<DialogContent isLoading={isAccountsLoading || isCreditNoteLoading}>
<RefundCreditNoteContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useRefundCreditNoteContext = () =>
React.useContext(RefundCreditNoteContext);
export { RefundCreditNoteFormProvider, useRefundCreditNoteContext };

38
src/containers/Dialogs/RefundCreditNoteDialog/index.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'redux';
const RefundCreditNoteDialogContent = React.lazy(() =>
import('./RefundCreditNoteDialogContent'),
);
/**
* Refund credit note dialog.
*/
function RefundCreditNoteDialog({
dialogName,
payload: { creditNoteId },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'refund_credit_note.dialog.label'} />}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--refund-credit-note'}
style={{ width: '450px' }}
>
<DialogSuspense>
<RefundCreditNoteDialogContent
dialogName={dialogName}
creditNoteId={creditNoteId}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(RefundCreditNoteDialog);

0
src/containers/Dialogs/RefundCreditNoteDialog/utils.js Normal file
View File

21
src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditDialogContent.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import 'style/pages/RefundVendorCredit/RefundVendorCredit.scss';
import { RefundVendorCreditFormProvider } from './RefundVendorCreditFormProvider';
import RefundVendorCreditForm from './RefundVendorCreditForm';
export default function RefundVendorCreditDialogContent({
// #ownProps
dialogName,
vendorCreditId,
}) {
return (
<RefundVendorCreditFormProvider
vendorCreditId={vendorCreditId}
dialogName={dialogName}
>
<RefundVendorCreditForm />
</RefundVendorCreditFormProvider>
);
}

46
src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Refund vendor flaoting actions.
*/
function RefundVendorCreditFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
// refund vendor credit dialog context.
const { dialogName } = useRefundVendorCreditContext();
// Handle close button click.
const handleCancelBtnClick = () => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
loading={isSubmitting}
style={{ minWidth: '120px' }}
type="submit"
>
<T id={'refund'} />
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(RefundVendorCreditFloatingActions);

79
src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js Normal file
View File

@@ -0,0 +1,79 @@
import React from 'react';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import moment from 'moment';
import { omit, defaultTo } from 'lodash';
import { AppToaster } from 'components';
import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
import { CreateVendorRefundCreditFormSchema } from './RefundVendorCreditForm.schema';
import RefundVendorCreditFormContent from './RefundVendorCreditFormContent';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, transactionNumber } from 'utils';
const defaultInitialValues = {
deposit_account_id: '',
date: moment(new Date()).format('YYYY-MM-DD'),
reference_no: '',
description: '',
amount: '',
};
/**
* Refund Vendor credit form.
*/
function RefundVendorCreditForm({
// #withDialogActions
closeDialog,
}) {
const { vendorCredit, dialogName, createRefundVendorCreditMutate } =
useRefundVendorCreditContext();
// Initial form values
const initialValues = {
...defaultInitialValues,
...vendorCredit,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
const form = {
...omit(values, ['currency_code', 'credits_remaining']),
};
// Handle request response success.
const onSaved = (response) => {
AppToaster.show({
message: intl.get('refund_vendor_credit.dialog.success_message'),
intent: Intent.SUCCESS,
});
closeDialog(dialogName);
};
// Handle request response errors.
const onError = ({
response: {
data: { errors },
},
}) => {
setSubmitting(false);
};
createRefundVendorCreditMutate([vendorCredit.id, form])
.then(onSaved)
.catch(onError);
};
return (
<Formik
validationSchema={CreateVendorRefundCreditFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={RefundVendorCreditFormContent}
/>
);
}
export default compose(withDialogActions)(RefundVendorCreditForm);

14
src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js Normal file
View File

@@ -0,0 +1,14 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
date: Yup.date().required().label(intl.get('date')),
amount: Yup.number().required(),
reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
deposit_account_id: Yup.number()
.required()
.label(intl.get('deposit_account_')),
description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
});
export const CreateVendorRefundCreditFormSchema = Schema;

13
src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormContent.js Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import { Form } from 'formik';
import RefundVendorCreditFormFields from './RefundVendorCreditFormFields';
import RefundVendorCreditFloatingActions from './RefundVendorCreditFloatingActions';
export default function RefundVendorCreditFormContent() {
return (
<Form>
<RefundVendorCreditFormFields />
<RefundVendorCreditFloatingActions />
</Form>
);
}

161
src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js Normal file
View File

@@ -0,0 +1,161 @@
import React from 'react';
import intl from 'react-intl-universal';
import { FastField, ErrorMessage } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { DateInput } from '@blueprintjs/datetime';
import {
Icon,
FieldRequiredHint,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FormattedMessage as T,
} from 'components';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
compose,
} from 'utils';
import { useAutofocus } from 'hooks';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
/**
* Refund Vendor credit form fields.
*/
function RefundVendorCreditFormFields() {
const { accounts } = useRefundVendorCreditContext();
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
{/* ------------- Refund date ------------- */}
<FastField name={'refund_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="refund_date" />}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('refund_date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
{/* ------------- Amount ------------- */}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'refund_vendor_credit.dialog.amount'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--amount', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
>
<ControlGroup>
<InputPrependText text={values.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (amountFieldRef.current = ref)}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
{/* ------------ Reference No. ------------ */}
<FastField name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference_no'} />}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference" />}
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/* ------------ Form account ------------ */}
<FastField name={'deposit_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'refund_vendor_credit.dialog.deposit_to_account'} />}
className={classNames(
'form-group--deposit_account_id',
'form-group--select-list',
CLASSES.FILL,
)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'deposit_account_id'} />}
>
<AccountsSuggestField
selectedAccountId={value}
accounts={accounts}
onAccountSelected={({ id }) =>
form.setFieldValue('deposit_account_id', id)
}
inputProps={{
placeholder: intl.get('select_account'),
}}
filterByTypes={[
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.FIXED_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
{/* --------- Statement --------- */}
<FastField name={'description'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'refund_vendor_credit.dialog.description'} />}
className={'form-group--description'}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
</div>
);
}
export default RefundVendorCreditFormFields;

52
src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
import { DialogContent } from 'components';
import { pick } from 'lodash';
import {
useAccounts,
useVendorCredit,
useCreateRefundVendorCredit,
} from 'hooks/query';
const RefundVendorCreditContext = React.createContext();
function RefundVendorCreditFormProvider({
vendorCreditId,
dialogName,
...props
}) {
// Handle fetch accounts data.
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
// Handle fetch vendor credit details.
const { data: vendorCredit, isLoading: isVendorCreditLoading } =
useVendorCredit(vendorCreditId, {
enabled: !!vendorCreditId,
});
// Create refund vendor credit mutations.
const { mutateAsync: createRefundVendorCreditMutate } =
useCreateRefundVendorCredit();
// State provider.
const provider = {
vendorCredit: {
...pick(vendorCredit, ['id', 'credits_remaining', 'currency_code']),
amount: vendorCredit.credits_remaining,
},
accounts,
dialogName,
createRefundVendorCreditMutate,
};
return (
<DialogContent isLoading={isAccountsLoading || isVendorCreditLoading}>
<RefundVendorCreditContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useRefundVendorCreditContext = () =>
React.useContext(RefundVendorCreditContext);
export { RefundVendorCreditFormProvider, useRefundVendorCreditContext };

38
src/containers/Dialogs/RefundVendorCreditDialog/index.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'redux';
const RefundVendorCreditDialogContent = React.lazy(() =>
import('./RefundVendorCreditDialogContent'),
);
/**
* Refund vendor credit dialog.
*/
function RefundVendorCreditDialog({
dialogName,
payload: { vendorCreditId },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'refund_vendor_credit.dialog.label'} />}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--refund-vendor-credit'}
>
<DialogSuspense>
<RefundVendorCreditDialogContent
dialogName={dialogName}
vendorCreditId={vendorCreditId}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(RefundVendorCreditDialog);

18
src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js
View File

@@ -12,8 +12,6 @@ import { useSMSMessageDialogContext } from './SMSMessageDialogProvider';
import { SMSMessagePreview } from 'components';
import { getSMSUnits } from '../../NotifyViaSMS/utils';
import { whenRtl, whenLtr } from 'utils/styled-components';
/**
* SMS message form content.
*/
@@ -98,22 +96,16 @@ const MessageVariable = styled.div`
const FormContent = styled.div`
display: flex;
`;
const FormFields = styled.div`
width: 55%;
`;
const FormPreview = styled.div`
display: flex;
flex-direction: column;
width: 45%;
${whenLtr(`
padding-left: 25px;
margin-left: 25px;
border-left: 1px solid #dcdcdd;
`)}
${whenRtl(`
padding-right: 25px;
margin-right: 25px;
border-right: 1px solid #dcdcdd;
`)}
padding-left: 25px;
margin-left: 25px;
border-left: 1px solid #dcdcdd;
`;

14
src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js
View File

@@ -1,14 +0,0 @@
import React from 'react';
import { TransactionsLockingFormProvider } from './TransactionsLockingFormProvider';
import TransactionsLockingForm from './TransactionsLockingForm';
export default function TransactionsLockingDialogContent({
// #ownProps
dialogName,
}) {
return (
<TransactionsLockingFormProvider dialogName={dialogName}>
<TransactionsLockingForm />
</TransactionsLockingFormProvider>
);
}

48
src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js
View File

@@ -1,48 +0,0 @@
import React from 'react';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import intl from 'react-intl-universal';
import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss'
import { AppToaster } from 'components';
import { CreateTransactionsLockingFormSchema } from './TransactionsLockingForm.schema';
import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
import TransactionsLockingFormContent from './TransactionsLockingFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
const defaultInitialValues = {
date: moment(new Date()).format('YYYY-MM-DD'),
reason: '',
};
/**
* Transactions Locking From.
*/
function TransactionsLockingForm({
// #withDialogActions
closeDialog,
}) {
const { dialogName } = useTransactionLockingContext();
// Initial form values.
const initialValues = {
...defaultInitialValues,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
return (
<Formik
validationSchema={CreateTransactionsLockingFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={TransactionsLockingFormContent}
/>
);
}
export default compose(withDialogActions)(TransactionsLockingForm);

17
src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js
View File

@@ -1,17 +0,0 @@
import React from 'react';
import { Form } from 'formik';
import TransactionsLockingFormFields from './TransactionsLockingFormFields';
import TransactionsLockingFloatingActions from './TransactionsLockingFloatingActions';
/**
* Transactions locking form content.
*/
export default function TransactionsLockingFormContent() {
return (
<Form>
<TransactionsLockingFormFields />
<TransactionsLockingFloatingActions />
</Form>
);
}

21
src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js
View File

@@ -1,21 +0,0 @@
import React from 'react';
import { DialogContent } from 'components';
const TransactionsLockingContext = React.createContext();
function TransactionsLockingFormProvider({ dialogName, ...props }) {
// State provider.
const provider = {
dialogName,
};
return (
<DialogContent>
<TransactionsLockingContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useTransactionLockingContext = () =>
React.useContext(TransactionsLockingContext);
export { TransactionsLockingFormProvider, useTransactionLockingContext };

30
src/containers/Dialogs/TransactionsLockingDialog/index.js
View File

@@ -1,30 +0,0 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const TransactionsLockingContent = React.lazy(() =>
import('./TransactionsLockingDialogContent'),
);
/**
* Transaction Locking dialog
*/
function TransactionsLockingDialog({ dialogName, payload = {}, isOpen }) {
return (
<Dialog
name={dialogName}
autoFocus={true}
title={<T id={'transactions_locking.dialog.label'} />}
canEscapeKeyClose={true}
isOpen={isOpen}
className={'dialog--transaction--locking'}
>
<DialogSuspense>
<TransactionsLockingContent dialogName={dialogName} />
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(TransactionsLockingDialog);

22
src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsDialogContent.js Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
import { UnlockingPartialTransactionsFormProvider } from './UnlockingPartialTransactionsFormProvider';
import UnlockingPartialTransactionsForm from './UnlockingPartialTransactionsForm';
/**
* Unlocking partail transactions dialog content.
*/
export default function UnlockingPartialTransactionsDialogContent({
// #ownProps
moduleName,
dialogName,
}) {
return (
<UnlockingPartialTransactionsFormProvider
moduleName={moduleName}
dialogName={dialogName}
>
<UnlockingPartialTransactionsForm />
</UnlockingPartialTransactionsFormProvider>
);
}

79
src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.js Normal file
View File

@@ -0,0 +1,79 @@
import React from 'react';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import intl from 'react-intl-universal';
import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss';
import { AppToaster } from 'components';
import { CreateUnLockingPartialTransactionsFormSchema } from './UnlockingPartialTransactionsForm.schema';
import { useUnlockingPartialTransactionsContext } from './UnlockingPartialTransactionsFormProvider';
import UnlockingPartialTransactionsFormContent from './UnlockingPartialTransactionsFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
const defaultInitialValues = {
module: '',
unlock_from_date: moment(new Date()).format('YYYY-MM-DD'),
unlock_to_date: moment(new Date()).format('YYYY-MM-DD'),
reason: '',
};
/**
* Partial Unlocking transactions form.
*/
function UnlockingPartialTransactionsForm({
// #withDialogActions
closeDialog,
}) {
const { dialogName, moduleName, createUnlockingPartialTransactionsMutate } =
useUnlockingPartialTransactionsContext();
// Initial form values.
const initialValues = {
...defaultInitialValues,
module: moduleName,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
setSubmitting(true);
// Handle request response success.
const onSuccess = (response) => {
AppToaster.show({
message: intl.get(
'unlocking_partial_transactions.dialog.success_message',
),
intent: Intent.SUCCESS,
});
closeDialog(dialogName);
};
// Handle request response errors.
const onError = ({
response: {
data: { errors },
},
}) => {
setSubmitting(false);
};
createUnlockingPartialTransactionsMutate(values)
.then(onSuccess)
.catch(onError);
};
return (
<Formik
validationSchema={CreateUnLockingPartialTransactionsFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={UnlockingPartialTransactionsFormContent}
/>
);
}
export default compose(withDialogActions)(UnlockingPartialTransactionsForm);

15
src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsForm.schema.js Normal file
View File

@@ -0,0 +1,15 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
unlock_from_date: Yup.date().required().label(intl.get('date')),
unlock_to_date: Yup.date().required().label(intl.get('date')),
module: Yup.string().required(),
reason: Yup.string()
.required()
.min(3)
.max(DATATYPES_LENGTH.TEXT)
.label(intl.get('reason')),
});
export const CreateUnLockingPartialTransactionsFormSchema = Schema;

17
src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormContent.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Form } from 'formik';
import UnlockingPartialTransactionsFormFields from './UnlockingPartialTransactionsFormFields';
import UnlockingPartialTransactionsFormFloatingActions from './UnlockingPartialTransactionsFormFloatingActions';
/**
* Partial Unlocking trsnactions form content.
*/
export default function PartialUnlockingTransactionsFormContent() {
return (
<Form>
<UnlockingPartialTransactionsFormFields />
<UnlockingPartialTransactionsFormFloatingActions />
</Form>
);
}

110
src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFields.js Normal file
View File

@@ -0,0 +1,110 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { FieldRequiredHint, Col, Row, FormattedMessage as T } from 'components';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from 'utils';
import { useAutofocus } from 'hooks';
/**
* Parial Unlocking transactions form fields.
*/
export default function UnlockingPartialTransactionsFormFields() {
const reasonFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<Row>
<Col xs={6}>
{/*------------ Unlocking from date -----------*/}
<FastField name={'unlock_from_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={
<T id={'unlocking_partial_transactions.dialog.from_date'} />
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="unlock_from_date" />}
minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('unlock_from_date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={6}>
{/*------------ Unlocking from date -----------*/}
<FastField name={'unlock_to_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={
<T id={'unlocking_partial_transactions.dialog.to_date'} />
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="unlock_to_date" />}
minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('unlock_to_date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
{/*------------ unLocking reason -----------*/}
<FastField name={'reason'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'unlocking_partial_transactions.dialog.reason'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--reason'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'reason'} />}
>
<TextArea
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (reasonFieldRef.current = ref)}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
);
}

48
src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFloatingActions.js Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useUnlockingPartialTransactionsContext } from './UnlockingPartialTransactionsFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Partial Unlocking transactions floating actions
*/
function UnlockingPartialTransactionsFormFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useUnlockingPartialTransactionsContext();
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
intent={Intent.PRIMARY}
style={{ minWidth: '95px' }}
type="submit"
loading={isSubmitting}
>
{<T id={'save'} />}
</Button>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
<T id={'cancel'} />
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(
UnlockingPartialTransactionsFormFloatingActions,
);

42
src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormProvider.js Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import { DialogContent } from 'components';
import { useCreateUnlockingPartialTransactions } from 'hooks/query';
const UnlockingPartialTransactionsContext = React.createContext();
/**
* Unlocking partial transactions form provider.
*/
function UnlockingPartialTransactionsFormProvider({
moduleName,
dialogName,
...props
}) {
// Create unlocking partial transactions mutations.
const { mutateAsync: createUnlockingPartialTransactionsMutate } =
useCreateUnlockingPartialTransactions();
// State provider.
const provider = {
dialogName,
moduleName,
createUnlockingPartialTransactionsMutate,
};
return (
<DialogContent>
<UnlockingPartialTransactionsContext.Provider
value={provider}
{...props}
/>
</DialogContent>
);
}
const useUnlockingPartialTransactionsContext = () =>
React.useContext(UnlockingPartialTransactionsContext);
export {
UnlockingPartialTransactionsFormProvider,
useUnlockingPartialTransactionsContext,
};

37
src/containers/Dialogs/UnlockingPartialTransactionsDialog/index.js Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const UnlockingPartialTransactionsDialogContent = React.lazy(() =>
import('./UnlockingPartialTransactionsDialogContent'),
);
/**
* UncLocking Partial transactions dialog.
*/
function UnLockingPartialTransactionsDilaog({
isOpen,
dialogName,
payload: { module },
}) {
return (
<Dialog
name={dialogName}
autoFocus={true}
title={<T id={'unlocking_partial_transactions.dialog.label'} />}
canEscapeKeyClose={true}
isOpen={isOpen}
className={'dialog--transaction--locking'}
>
<DialogSuspense>
<UnlockingPartialTransactionsDialogContent
moduleName={module}
dialogName={dialogName}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(UnLockingPartialTransactionsDilaog);

16
src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsDialogContent.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import UnlockingTransactionsForm from './UnlockingTransactionsForm';
import { UnlockingTransactionsFormProvider } from './UnlockingTransactionsFormProvider';
export default function UnlockingTransactionsDialogContent({
// #ownProps
moduleName,
dialogName,
}) {
return (
<UnlockingTransactionsFormProvider moduleName={moduleName} dialogName={dialogName}>
<UnlockingTransactionsForm />
</UnlockingTransactionsFormProvider>
);
}

76
src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.js Normal file
View File

@@ -0,0 +1,76 @@
import React from 'react';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import intl from 'react-intl-universal';
import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss';
import { AppToaster } from 'components';
import { CreateUnlockingTransactionsFormSchema } from './UnlockingTransactionsForm.schema';
import { useUnlockingTransactionsContext } from './UnlockingTransactionsFormProvider';
import UnlockingTransactionsFormContent from './UnlockingTransactionsFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
const defaultInitialValues = {
module: '',
reason: '',
};
/**
* Unlocking transactions form.
*/
function UnlockingTransactionsForm({
// #withDialogActions
closeDialog,
}) {
const {
dialogName,
moduleName,
cancelLockingTransactionMutate,
cancelUnLockingPartialTransactionMutate,
} = useUnlockingTransactionsContext();
// Initial form values.
const initialValues = {
...defaultInitialValues,
module: moduleName,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
setSubmitting(true);
// Handle request response success.
const onSuccess = (response) => {
AppToaster.show({
message: intl.get('unlocking_transactions.dialog.success_message'),
intent: Intent.SUCCESS,
});
closeDialog(dialogName);
};
// Handle request response errors.
const onError = ({
response: {
data: { errors },
},
}) => {
setSubmitting(false);
};
cancelLockingTransactionMutate(values).then(onSuccess).catch(onError);
};
return (
<Formik
validationSchema={CreateUnlockingTransactionsFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={UnlockingTransactionsFormContent}
/>
);
}
export default compose(withDialogActions)(UnlockingTransactionsForm);

4
src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js → src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsForm.schema.js
View File

@@ -3,11 +3,11 @@ import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
date: Yup.date().required().label(intl.get('date')),
module: Yup.string().required(),
reason: Yup.string()
.required()
.min(3)
.max(DATATYPES_LENGTH.TEXT)
.label(intl.get('reason')),
});
export const CreateTransactionsLockingFormSchema = Schema;
export const CreateUnlockingTransactionsFormSchema = Schema;

17
src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormContent.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Form } from 'formik';
import UnlockingTransactionsFormFields from './UnlockingTransactionsFormFields';
import UnlockingTransactionsFormFloatingActions from './UnlockingTransactionsFormFloatingActions';
/**
* Unlocking transactions form content.
*/
export default function UnlockingTransactionsFormContent() {
return (
<Form>
<UnlockingTransactionsFormFields />
<UnlockingTransactionsFormFloatingActions />
</Form>
);
}

38
src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFields.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { Classes, FormGroup, TextArea } from '@blueprintjs/core';
import { FieldRequiredHint, FormattedMessage as T } from 'components';
import { useAutofocus } from 'hooks';
import { inputIntent } from 'utils';
/**
* Unlocking transactions form fields.
*/
export default function UnlockingTransactionsFormFields() {
const reasonFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
{/*------------ Locking Reason -----------*/}
<FastField name={'reason'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'unlocking_transactions.dialog.reason'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--reason'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'reason'} />}
>
<TextArea
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (reasonFieldRef.current = ref)}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
);
}

48
src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormFloatingActions.js Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useUnlockingTransactionsContext } from './UnlockingTransactionsFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Unlocking transactions form floating actions.
*/
function UnlockingTransactionsFormFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useUnlockingTransactionsContext();
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
intent={Intent.PRIMARY}
style={{ minWidth: '95px' }}
type="submit"
loading={isSubmitting}
>
{<T id={'save'} />}
</Button>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
<T id={'cancel'} />
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(
UnlockingTransactionsFormFloatingActions,
);

36
src/containers/Dialogs/UnlockingTransactionsDialog/UnlockingTransactionsFormProvider.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import { DialogContent } from 'components';
import { useCancelLockingTransaction } from 'hooks/query';
const UnlockingTransactionsContext = React.createContext();
/**
* Unlocking transactions form provider.
*/
function UnlockingTransactionsFormProvider({
moduleName,
dialogName,
...props
}) {
// Cancle locking transactions mutations.
const { mutateAsync: cancelLockingTransactionMutate } =
useCancelLockingTransaction();
// State provider.
const provider = {
dialogName,
moduleName,
cancelLockingTransactionMutate,
};
return (
<DialogContent>
<UnlockingTransactionsContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useUnlockingTransactionsContext = () =>
React.useContext(UnlockingTransactionsContext);
export { useUnlockingTransactionsContext, UnlockingTransactionsFormProvider };

37
src/containers/Dialogs/UnlockingTransactionsDialog/index.js Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const UnlockingTransactionsDialogContent = React.lazy(() =>
import('./UnlockingTransactionsDialogContent'),
);
/**
* Unlocking transactions dialog.
*/
function UnlockingTransactionsDialog({
dialogName,
payload: { module },
isOpen,
}) {
return (
<Dialog
name={dialogName}
autoFocus={true}
title={<T id={'unlocking_transactions.dialog.label'} />}
canEscapeKeyClose={true}
isOpen={isOpen}
className={'dialog--transaction--locking'}
>
<DialogSuspense>
<UnlockingTransactionsDialogContent
moduleName={module}
dialogName={dialogName}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(UnlockingTransactionsDialog);

102
src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDialogContent.js Normal file
View File

@@ -0,0 +1,102 @@
import React from 'react';
import intl from 'react-intl-universal';
import { useSaveSettings } from 'hooks/query';
import { VendorCreditNumberDilaogProvider } from './VendorCreditNumberDilaogProvider';
import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withSettings from 'containers/Settings/withSettings';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import { compose } from 'utils';
import {
transformFormToSettings,
transformSettingsToForm,
} from 'containers/JournalNumber/utils';
/**
* Vendor credit number dialog
*/
function VendorCreditNumberDialogContent({
// #ownProps
initialValues,
onConfirm,
// #withSettings
nextNumber,
numberPrefix,
autoIncrement,
// #withDialogActions
closeDialog,
}) {
const { mutateAsync: saveSettings } = useSaveSettings();
const [referenceFormValues, setReferenceFormValues] = React.useState(null);
// Handle the submit form.
const handleSubmitForm = (values, { setSubmitting }) => {
// Handle the form success.
const handleSuccess = () => {
setSubmitting(false);
closeDialog('vendor-credit-form');
onConfirm(values);
};
// Handle the form errors.
const handleErrors = () => {
setSubmitting(false);
};
if (values.incrementMode === 'manual-transaction') {
handleSuccess();
return;
}
// Transformes the form values to settings to save it.
const options = transformFormToSettings(values, 'vendor_credit');
// Save the settings.
saveSettings({ options }).then(handleSuccess).catch(handleErrors);
};
// Handle the dialog close.
const handleClose = () => {
closeDialog('vendor-credit-form');
};
// Handle form change.
const handleChange = (values) => {
setReferenceFormValues(values);
};
// Description.
const description =
referenceFormValues?.incrementMode === 'auto'
? intl.get('vendor_credit.auto_increment.auto')
: intl.get('vendor_credit.auto_increment.manually');
return (
<VendorCreditNumberDilaogProvider>
<ReferenceNumberForm
initialValues={{
...transformSettingsToForm({
nextNumber,
numberPrefix,
autoIncrement,
}),
...initialValues,
}}
description={description}
onSubmit={handleSubmitForm}
onClose={handleClose}
onChange={handleChange}
/>
</VendorCreditNumberDilaogProvider>
);
}
export default compose(
withDialogActions,
withSettingsActions,
withSettings(({ vendorsCreditNoteSetting }) => ({
autoIncrement: vendorsCreditNoteSetting?.autoIncrement,
nextNumber: vendorsCreditNoteSetting?.nextNumber,
numberPrefix: vendorsCreditNoteSetting?.numberPrefix,
})),
)(VendorCreditNumberDialogContent);

28
src/containers/Dialogs/VendorCreditNumberDialog/VendorCreditNumberDilaogProvider.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { DialogContent } from 'components';
import { useSettingsVendorCredits } from 'hooks/query';
const VendorCreditNumberDialogContext = React.createContext();
/**
* Vendor credit number dialog provider
*/
function VendorCreditNumberDilaogProvider({ query, ...props }) {
const { isLoading: isSettingsLoading } = useSettingsVendorCredits();
// Provider payload.
const provider = {
isSettingsLoading,
};
return (
<DialogContent isLoading={isSettingsLoading}>
<VendorCreditNumberDialogContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useVendorCreditNumberDialogContext = () =>
React.useContext(VendorCreditNumberDialogContext);
export { VendorCreditNumberDilaogProvider, useVendorCreditNumberDialogContext };

40
src/containers/Dialogs/VendorCreditNumberDialog/index.js Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose, saveInvoke } from 'utils';
const VendorCreditNumberDialogContent = React.lazy(() =>
import('./VendorCreditNumberDialogContent'),
);
/**
* Vendor Credit number dialog.
*/
function VendorCreditNumberDialog({
dialogName,
payload: { initialFormValues },
isOpen,
onConfirm,
}) {
const handleConfirm = (values) => {
saveInvoke(onConfirm, values);
};
return (
<Dialog
title={<T id={'vendor_credit_number_settings'} />}
name={dialogName}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
>
<DialogSuspense>
<VendorCreditNumberDialogContent
initialValues={{ ...initialFormValues }}
onConfirm={handleConfirm}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(VendorCreditNumberDialog);