@@ -260,13 +42,6 @@ function PaymentMadeFormHeader({
}
export default compose(
- withVender(({ vendorsCurrentPage, vendorItems }) => ({
- vendorsCurrentPage,
- vendorItems,
- })),
- withAccounts(({ accountsList }) => ({
- accountsList,
- })),
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
})),
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
new file mode 100644
index 000000000..cf07eb753
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
@@ -0,0 +1,197 @@
+import React from 'react';
+import {
+ FormGroup,
+ InputGroup,
+ Position,
+ Classes,
+ ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+ AccountsSelectList,
+ ContactSelecetList,
+ ErrorMessage,
+ FieldRequiredHint,
+ InputPrependText,
+ Money,
+ Hint,
+ Icon,
+} from 'components';
+import withSettings from 'containers/Settings/withSettings';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import {
+ momentFormatter,
+ tansformDateValue,
+ inputIntent,
+ compose,
+} from 'utils';
+
+/**
+ * Payment made form header fields.
+ */
+function PaymentMadeFormHeaderFields({ baseCurrency }) {
+ const { vendors, accounts, isNewMode } = usePaymentMadeFormContext();
+
+ const payableFullAmount = 0;
+
+ return (
+
+ {/* ------------ Vendor name ------------ */}
+
+ {({ form, field: { value }, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={classNames('form-group--select-list', Classes.FILL)}
+ labelInfo={}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+ }
+ onContactSelected={(contact) => {
+ form.setFieldValue('vendor_id', contact.id);
+ }}
+ disabled={!isNewMode}
+ popoverFill={true}
+ />
+
+ )}
+
+
+ {/* ------------ Payment date ------------ */}
+
+ {({ form, field: { value }, meta: { error, touched } }) => (
+ }
+ inline={true}
+ labelInfo={}
+ className={classNames('form-group--select-list', Classes.FILL)}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+ ,
+ }}
+ />
+
+ )}
+
+
+ {/* ------------ Full amount ------------ */}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={('form-group--full-amount', Classes.FILL)}
+ intent={inputIntent({ error, touched })}
+ labelInfo={}
+ helperText={}
+ >
+
+
+
+
+
+
+ Receive full amount (
+ )
+
+
+ )}
+
+
+ {/* ------------ Payment number ------------ */}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={('form-group--payment_number', Classes.FILL)}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+
+
+ )}
+
+
+ {/* ------------ Payment account ------------ */}
+
+ {({ form, field: { value }, meta: { error, touched } }) => (
+ }
+ className={classNames(
+ 'form-group--payment_account_id',
+ 'form-group--select-list',
+ Classes.FILL,
+ )}
+ inline={true}
+ labelInfo={}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+ }
+ onAccountSelected={(account) => {
+ form.setFieldValue('payment_account_id', account.id);
+ }}
+ defaultSelectText={}
+ selectedAccountId={value}
+ />
+
+ )}
+
+
+ {/* ------------ Reference ------------ */}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={classNames('form-group--reference', Classes.FILL)}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+
+
+ )}
+
+
+ );
+}
+
+export default compose(
+ withSettings(({ organizationSettings }) => ({
+ baseCurrency: organizationSettings?.baseCurrency,
+ })),
+)(PaymentMadeFormHeaderFields);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.js
index 81a3ed7b9..7c564d5a8 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.js
@@ -1,123 +1,20 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import { useParams } from 'react-router-dom';
-import { useQuery } from 'react-query';
-import { useIntl } from 'react-intl';
import PaymentMadeForm from './PaymentMadeForm';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withVenderActions from 'containers/Vendors/withVendorActions';
-import withAccountsActions from 'containers/Accounts/withAccountsActions';
-import withItemsActions from 'containers/Items/withItemsActions';
-import withPaymentMadeActions from './withPaymentMadeActions';
-import withBillActions from '../Bill/withBillActions';
-import withSettingsActions from 'containers/Settings/withSettingsActions';
-
-import { compose } from 'utils';
+import { PaymentMadeFormProvider } from './PaymentMadeFormProvider';
import 'style/pages/PaymentMade/PageForm.scss'
/**
* Payment made - Page form.
*/
-function PaymentMadeFormPage({
- //#withAccountsActions
- requestFetchAccounts,
-
- //#withVenderActions
- requestFetchVendorsTable,
-
- //#withItemsActions
- requestFetchItems,
-
- //#withPaymentMadesActions
- requestFetchPaymentMade,
-
- // #withSettingsActions
- requestFetchOptions,
-
- // #withDashboardActions
- changePageTitle,
- setSidebarShrink,
- resetSidebarPreviousExpand,
- setDashboardBackLink
-}) {
+export default function PaymentMadeFormPage() {
const { id: paymentMadeId } = useParams();
- const { formatMessage } = useIntl();
-
- useEffect(() => {
- // Shrink the sidebar by foce.
- setSidebarShrink();
- // Show the back link on dashboard topbar.
- setDashboardBackLink(true);
-
- return () => {
- // Reset the sidebar to the previous status.
- resetSidebarPreviousExpand();
- // Hide the back link on dashboard topbar.
- setDashboardBackLink(false);
- };
- }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
-
- // Handle page title change in new and edit mode.
- useEffect(() => {
- if (paymentMadeId) {
- changePageTitle(formatMessage({ id: 'edit_payment_made' }));
- } else {
- changePageTitle(formatMessage({ id: 'payment_made' }));
- }
- }, [changePageTitle, paymentMadeId, formatMessage]);
-
- // Handle fetch accounts data.
- const fetchAccounts = useQuery('accounts-list', (key) =>
- requestFetchAccounts(),
- );
-
- // Handle fetch Items data table or list.
- const fetchItems = useQuery('items-list', () => requestFetchItems({}));
-
- // Handle fetch venders data table or list.
- const fetchVenders = useQuery('venders-list', () =>
- requestFetchVendorsTable({}),
- );
-
- // Handle fetch specific payment made details.
- const fetchPaymentMade = useQuery(
- ['payment-made', paymentMadeId],
- (key, _id) => requestFetchPaymentMade(_id),
- { enabled: !!paymentMadeId },
- );
-
- // Fetch payment made settings.
- const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
return (
-
-
-
+
+
+
);
-}
-
-export default compose(
- withVenderActions,
- withItemsActions,
- withAccountsActions,
- withBillActions,
- withPaymentMadeActions,
- withSettingsActions,
- withDashboardActions,
-)(PaymentMadeFormPage);
-
+}
\ No newline at end of file
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.js
new file mode 100644
index 000000000..302600de3
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.js
@@ -0,0 +1,91 @@
+import React, { createContext, useContext } from 'react';
+import {
+ useAccounts,
+ useVendors,
+ useItems,
+ usePaymentMade,
+ useSettings,
+ useCreatePaymentMade,
+ useEditPaymentMade
+} from 'hooks/query';
+import { DashboardInsider } from 'components';
+
+// Payment made form context.
+const PaymentMadeFormContext = createContext();
+
+/**
+ * Payment made form provider.
+ */
+function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
+ // Handle fetch accounts data.
+ const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
+
+ // Handle fetch Items data table or list.
+ const {
+ data: { items },
+ isFetching: isItemsFetching,
+ isLoading: isItemsLoading,
+ } = useItems();
+
+ // Handle fetch venders data table or list.
+ const {
+ data: { vendors },
+ isFetching: isVendorsFetching,
+ } = useVendors();
+
+ // Handle fetch specific payment made details.
+ const {
+ data: { paymentMade, payableBills, paymentBills },
+ isFetching: isPaymentFetching,
+ isLoading: isPaymentLoading,
+ } = usePaymentMade(paymentMadeId, {
+ enabled: !!paymentMadeId,
+ });
+
+ // Fetch payment made settings.
+ useSettings();
+
+ // Create and edit payment made mutations.
+ const { mutateAsync: createPaymentMadeMutate } = useCreatePaymentMade();
+ const { mutateAsync: editPaymentMadeMutate } = useEditPaymentMade();
+
+ // Provider payload.
+ const provider = {
+ paymentMadeId,
+ accounts,
+ paymentMade,
+ payableBills,
+ paymentBills,
+ vendors,
+ items,
+
+ isAccountsFetching,
+ isItemsFetching,
+ isItemsLoading,
+ isVendorsFetching,
+ isPaymentFetching,
+ isPaymentLoading,
+
+ createPaymentMadeMutate,
+ editPaymentMadeMutate,
+ };
+
+ return (
+
+
+
+ );
+}
+
+const usePaymentMadeFormContext = () => useContext(PaymentMadeFormContext);
+
+export { PaymentMadeFormProvider, usePaymentMadeFormContext };
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentForm/utils.js b/client/src/containers/Purchases/PaymentMades/PaymentForm/utils.js
new file mode 100644
index 000000000..244e4ae10
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentForm/utils.js
@@ -0,0 +1,40 @@
+import moment from 'moment';
+import { sumBy } from 'lodash';
+import { transformToForm } from 'utils';
+
+export const ERRORS = {
+PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
+};
+
+
+// Default payment made entry values.
+export const defaultPaymentMadeEntry = {
+ bill_id: '',
+ payment_amount: '',
+ id: null,
+ due_amount: null,
+};
+
+// Default initial values of payment made.
+export const defaultPaymentMade = {
+ full_amount: '',
+ vendor_id: '',
+ payment_account_id: '',
+ payment_date: moment(new Date()).format('YYYY-MM-DD'),
+ reference: '',
+ payment_number: '',
+ description: '',
+ entries: [],
+};
+
+export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
+ return {
+ ...transformToForm(paymentMade, defaultPaymentMade),
+ full_amount: sumBy(paymentMade.entries, 'payment_amount'),
+ entries: [
+ ...paymentMadeEntries.map((paymentMadeEntry) => ({
+ ...transformToForm(paymentMadeEntry, defaultPaymentMadeEntry),
+ })),
+ ],
+ };
+};
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
index b95dbb221..6d0ec890e 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
@@ -1,9 +1,8 @@
import React, { useCallback } from 'react';
-import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
import { compose } from 'utils';
-import { CLASSES } from 'common/classes';
import { DataTable } from 'components';
import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -37,8 +36,13 @@ function PaymentMadesTable({
isPaymentsFetching,
} = usePaymentMadesListContext();
+ // History context.
+ const history = useHistory();
+
// Handles the edit payment made action.
- const handleEditPaymentMade = (paymentMade) => {};
+ const handleEditPaymentMade = (paymentMade) => {
+ history.push(`/payment-mades/${paymentMade.id}/edit`);
+ };
// Handles the delete payment made action.
const handleDeletePaymentMade = (paymentMade) => {
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.js
deleted file mode 100644
index 6852821e0..000000000
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.js
+++ /dev/null
@@ -1,479 +0,0 @@
-import React, { useMemo, useCallback, useEffect, useState } from 'react';
-import { useFormik } from 'formik';
-import moment from 'moment';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, sumBy, omit } from 'lodash';
-import { Intent, Alert } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { useHistory } from 'react-router-dom';
-
-import { CLASSES } from 'common/classes';
-import PaymentReceiveHeader from './PaymentReceiveFormHeader';
-import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
-import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
-import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
-
-import withMediaActions from 'containers/Media/withMediaActions';
-import withPaymentReceivesActions from './withPaymentReceivesActions';
-import withPaymentReceiveDetail from './withPaymentReceiveDetail';
-import withPaymentReceives from './withPaymentReceives';
-import withSettings from 'containers/Settings/withSettings';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import {
- EditPaymentReceiveFormSchema,
- CreatePaymentReceiveFormSchema,
-} from './PaymentReceiveForm.schema';
-import { AppToaster } from 'components';
-
-import { compose, defaultToTransform } from 'utils';
-
-import 'style/pages/PaymentReceive/PageForm.scss'
-
-/**
- * Payment Receive form.
- */
-function PaymentReceiveForm({
- // #ownProps
- paymentReceiveId,
- mode, //edit, new
-
- //#WithPaymentReceiveActions
- requestSubmitPaymentReceive,
- requestEditPaymentReceive,
- setPaymentReceiveNumberChanged,
-
- // #withPaymentReceiveDetail
- paymentReceive,
- paymentReceiveEntries,
-
- // #withSettings
- paymentReceiveNextNumber,
- paymentReceiveNumberPrefix,
-
- // #withPaymentReceives
- paymentReceiveNumberChanged,
-
- // #withDashboardAction
- changePageTitle,
- changePageSubtitle,
-}) {
- const history = useHistory();
-
- const [amountChangeAlert, setAmountChangeAlert] = useState(false);
- const [clearLinesAlert, setClearLinesAlert] = useState(false);
- const [fullAmount, setFullAmount] = useState(null);
- const [clearFormAlert, setClearFormAlert] = useState(false);
- const [submitPayload, setSubmitPayload] = useState({});
-
- const { formatMessage } = useIntl();
- const [localPaymentEntries, setLocalPaymentEntries] = useState(
- paymentReceiveEntries,
- );
- const isNewMode = !paymentReceiveId;
-
- const paymentReceiveNumber = paymentReceiveNumberPrefix
- ? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
- : paymentReceiveNextNumber;
-
- useEffect(() => {
- const transactionNumber = !isNewMode
- ? paymentReceive.payment_receive_no
- : paymentReceiveNumber;
-
- if (paymentReceive && paymentReceiveId) {
- changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
- changePageSubtitle(`No. ${paymentReceive.payment_receive_no}`);
- } else {
- changePageTitle(formatMessage({ id: 'payment_receive' }));
- }
- changePageSubtitle(
- defaultToTransform(transactionNumber, `No. ${transactionNumber}`, ''),
- );
- }, [
- isNewMode,
- changePageTitle,
- changePageSubtitle,
- paymentReceive,
- paymentReceiveId,
- formatMessage,
- paymentReceiveNumber,
- ]);
-
- useEffect(() => {
- if (localPaymentEntries !== paymentReceiveEntries) {
- setLocalPaymentEntries(paymentReceiveEntries);
- }
- }, [localPaymentEntries, paymentReceiveEntries]);
-
- // Form validation schema.
- const validationSchema = isNewMode
- ? CreatePaymentReceiveFormSchema
- : EditPaymentReceiveFormSchema;
-
- // Default payment receive entry.
- const defaultPaymentReceiveEntry = {
- id: '',
- payment_amount: '',
- invoice_id: '',
- due_amount: '',
- };
-
- // Form initial values.
- const defaultInitialValues = {
- customer_id: '',
- deposit_account_id: '',
- payment_date: moment(new Date()).format('YYYY-MM-DD'),
- reference_no: '',
- payment_receive_no: paymentReceiveNumber,
- description: '',
- full_amount: '',
- entries: [],
- };
-
- // Form initial values.
- const initialValues = useMemo(
- () => ({
- ...(paymentReceive
- ? {
- ...pick(paymentReceive, Object.keys(defaultInitialValues)),
- entries: [
- ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
- ...pick(
- paymentReceiveEntry,
- Object.keys(defaultPaymentReceiveEntry),
- ),
- })),
- ],
- }
- : {
- ...defaultInitialValues,
- }),
- }),
- [paymentReceive, paymentReceiveEntries],
- );
-
- // Handle form submit.
- const handleSubmitForm = (
- values,
- { setSubmitting, resetForm, setFieldError },
- ) => {
- setSubmitting(true);
-
- // Filters entries that have no `invoice_id` and `payment_amount`.
- const entries = values.entries
- .filter((entry) => entry.invoice_id && entry.payment_amount)
- .map((entry) => ({
- ...omit(entry, ['due_amount']),
- }));
-
- // Calculates the total payment amount of entries.
- const totalPaymentAmount = sumBy(entries, 'payment_amount');
-
- if (totalPaymentAmount <= 0) {
- AppToaster.show({
- message: formatMessage({
- id: 'you_cannot_make_payment_with_zero_total_amount',
- }),
- intent: Intent.DANGER,
- });
- setSubmitting(false);
- return;
- }
- const form = { ...values, entries };
-
- // Handle request response success.
- const onSaved = (response) => {
- AppToaster.show({
- message: formatMessage({
- id: paymentReceiveId
- ? 'the_payment_receive_transaction_has_been_edited'
- : 'the_payment_receive_transaction_has_been_created',
- }),
- intent: Intent.SUCCESS,
- });
- setSubmitting(false);
-
- if (submitPayload.redirect) {
- history.push('/payment-receives');
- }
- if (submitPayload.resetForm) {
- resetForm();
- }
- };
- // Handle request response errors.
- const onError = (errors) => {
- const getError = (errorType) => errors.find((e) => e.type === errorType);
-
- if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
- setFieldError(
- 'payment_receive_no',
- formatMessage({ id: 'payment_number_is_not_unique' }),
- );
- }
- setSubmitting(false);
- };
-
- if (paymentReceiveId) {
- requestEditPaymentReceive(paymentReceiveId, form)
- .then(onSaved)
- .catch(onError);
- } else {
- requestSubmitPaymentReceive(form).then(onSaved).catch(onError);
- }
- };
-
- const {
- errors,
- values,
- setFieldValue,
- getFieldProps,
- setValues,
- handleSubmit,
- isSubmitting,
- touched,
- resetForm,
- submitForm,
- } = useFormik({
- enableReinitialize: true,
- validationSchema,
- initialValues: {
- ...initialValues,
- },
- onSubmit: handleSubmitForm,
- });
-
- const transformDataTableToEntries = (dataTable) => {
- return dataTable.map((data) => ({
- ...pick(data, Object.keys(defaultPaymentReceiveEntry)),
- }));
- };
-
- // Handle update data.
- const handleUpdataData = useCallback(
- (entries) => {
- setFieldValue('entries', transformDataTableToEntries(entries));
- },
- [setFieldValue],
- );
-
- // Handle fetch success of customer invoices entries.
- const handleFetchEntriesSuccess = useCallback(
- (entries) => {
- setFieldValue('entries', transformDataTableToEntries(entries));
- },
- [setFieldValue],
- );
-
- // Handles full amount change.
- const handleFullAmountChange = useCallback(
- (value) => {
- if (value !== fullAmount) {
- setAmountChangeAlert(value);
- }
- },
- [fullAmount, setAmountChangeAlert],
- );
-
- // Handle clear all lines button click.
- const handleClearAllLines = useCallback(() => {
- setClearLinesAlert(true);
- }, [setClearLinesAlert]);
-
- // Handle cancel button click of clear lines alert
- const handleCancelClearLines = useCallback(() => {
- setClearLinesAlert(false);
- }, [setClearLinesAlert]);
-
- // Handle cancel button of amount change alert.
- const handleCancelAmountChangeAlert = () => {
- setAmountChangeAlert(false);
- };
- // Handle confirm button of amount change alert.
- const handleConfirmAmountChangeAlert = () => {
- setFullAmount(amountChangeAlert);
- setAmountChangeAlert(false);
- };
-
- // Reset entries payment amount.
- const resetEntriesPaymentAmount = (entries) => {
- return entries.map((entry) => ({ ...entry, payment_amount: 0 }));
- };
- // Handle confirm clear all lines.
- const handleConfirmClearLines = useCallback(() => {
- setLocalPaymentEntries(resetEntriesPaymentAmount(localPaymentEntries));
- setFieldValue('entries', resetEntriesPaymentAmount(values.entries));
- setClearLinesAlert(false);
- }, [setFieldValue, setClearLinesAlert, values.entries, localPaymentEntries]);
-
- // Handle footer clear button click.
- const handleClearBtnClick = () => {
- setClearFormAlert(true);
- };
- // Handle cancel button click of clear form alert.
- const handleCancelClearFormAlert = () => {
- setClearFormAlert(false);
- };
- // Handle confirm button click of clear form alert.
- const handleConfirmCancelClearFormAlert = () => {
- resetForm();
- setClearFormAlert(false);
- setFullAmount(null);
- };
-
- // Calculates the total receivable amount from due amount.
- const receivableFullAmount = useMemo(
- () => sumBy(values.entries, 'due_amount'),
- [values.entries],
- );
-
- const fullAmountReceived = useMemo(
- () => sumBy(values.entries, 'payment_amount'),
- [values.entries],
- );
-
- useEffect(() => {
- if (paymentReceiveNumberChanged) {
- setFieldValue('payment_receive_no', paymentReceiveNumber);
- changePageSubtitle(
- defaultToTransform(
- paymentReceiveNumber,
- `No. ${paymentReceiveNumber}`,
- '',
- ),
- );
- setPaymentReceiveNumberChanged(false);
- }
- }, [
- paymentReceiveNumber,
- paymentReceiveNumberChanged,
- setFieldValue,
- changePageSubtitle,
- setPaymentReceiveNumberChanged,
- ]);
-
- const handlePaymentReceiveNumberChanged = useCallback(
- (payment_receive_no) => {
- changePageSubtitle(
- defaultToTransform(payment_receive_no, `No.${payment_receive_no}`, ''),
- );
- },
- [changePageSubtitle],
- );
-
- const handleSubmitClick = useCallback(
- (event, payload) => {
- setSubmitPayload({ ...payload });
- },
- [setSubmitPayload],
- );
-
- const handleCancelClick = useCallback(() => {
- history.goBack();
- }, [history]);
-
- return (
-
- );
-}
-
-export default compose(
- withPaymentReceivesActions,
- withDashboardActions,
- withMediaActions,
- withPaymentReceiveDetail(({ paymentReceive, paymentReceiveEntries }) => ({
- paymentReceive,
- paymentReceiveEntries,
- })),
- withSettings(({ paymentReceiveSettings }) => ({
- paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
- paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
- })),
- withPaymentReceives(({ paymentReceiveNumberChanged }) => ({
- paymentReceiveNumberChanged,
- })),
-)(PaymentReceiveForm);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormHeader.js
deleted file mode 100644
index 1ec19aacc..000000000
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormHeader.js
+++ /dev/null
@@ -1,304 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import {
- FormGroup,
- InputGroup,
- Intent,
- Position,
- ControlGroup,
-} from '@blueprintjs/core';
-
-import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
-import moment from 'moment';
-import classNames from 'classnames';
-
-import { CLASSES } from 'common/classes';
-import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
-import {
- AccountsSelectList,
- ContactSelecetList,
- ErrorMessage,
- FieldRequiredHint,
- Icon,
- InputPrependButton,
- MoneyInputGroup,
- InputPrependText,
- Hint,
- Money,
-} from 'components';
-
-import withCustomers from 'containers/Customers/withCustomers';
-import withAccounts from 'containers/Accounts/withAccounts';
-import withSettings from 'containers/Settings/withSettings';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-function PaymentReceiveFormHeader({
- // #useFormik
- errors,
- touched,
- setFieldValue,
- getFieldProps,
- values,
- onFullAmountChanged,
- paymentReceiveId,
- receivableFullAmount,
- amountReceived,
-
- //#withCustomers
- customers,
-
- //#withAccouts
- accountsList,
-
- //#withSettings
- baseCurrency,
-
- // #withInvoices
- receivableInvoices,
- // #ownProps
- onPaymentReceiveNumberChanged,
-
- //#withDialogActions
- openDialog,
-}) {
- const handleDateChange = useCallback(
- (date_filed) => (date) => {
- const formatted = moment(date).format('YYYY-MM-DD');
- setFieldValue(date_filed, formatted);
- },
- [setFieldValue],
- );
-
- const onChangeSelect = useCallback(
- (filedName) => {
- return (item) => {
- setFieldValue(filedName, item.id);
- };
- },
- [setFieldValue],
- );
-
- const triggerFullAmountChanged = (value) => {
- onFullAmountChanged && onFullAmountChanged(value);
- };
-
- // Handle full amount changed event.
- const handleFullAmountBlur = (event) => {
- triggerFullAmountChanged(event.currentTarget.value);
- };
- // Handle link click of receive full amount.
- const handleReceiveFullAmountClick = () => {
- setFieldValue('full_amount', receivableFullAmount);
- triggerFullAmountChanged(receivableFullAmount);
- };
-
- const handlePaymentReceiveNumberChange = useCallback(() => {
- openDialog('payment-receive-number-form', {});
- }, [openDialog]);
-
- const handlePaymentReceiveNumberChanged = (event) => {
- saveInvoke(onPaymentReceiveNumberChanged, event.currentTarget.value);
- };
-
- return (
-
-
-
- {/* ------------- Customer name ------------- */}
-
}
- inline={true}
- className={classNames('form-group--select-list', CLASSES.FILL)}
- labelInfo={
}
- intent={errors.customer_id && touched.customer_id && Intent.DANGER}
- helperText={
-
- }
- >
-
}
- onContactSelected={onChangeSelect('customer_id')}
- popoverFill={true}
- />
-
-
- {/* ------------- Payment date ------------- */}
-
}
- inline={true}
- labelInfo={
}
- className={classNames('form-group--select-list', CLASSES.FILL)}
- intent={
- errors.payment_date && touched.payment_date && Intent.DANGER
- }
- helperText={
-
- }
- >
-
),
- }}
- />
-
-
- {/* ------------ Full amount ------------ */}
-
}
- inline={true}
- className={('form-group--full-amount', CLASSES.FILL)}
- intent={errors.full_amount && touched.full_amount && Intent.DANGER}
- labelInfo={
}
- helperText={
-
- }
- >
-
-
-
-
-
-
- Receive full amount (
- )
-
-
-
- {/* ------------ Payment receive no. ------------ */}
-
}
- inline={true}
- className={('form-group--payment_receive_no', CLASSES.FILL)}
- intent={
- errors.payment_receive_no &&
- touched.payment_receive_no &&
- Intent.DANGER
- }
- helperText={
-
- }
- >
-
-
- ,
- }}
- tooltip={true}
- tooltipProps={{
- content: 'Setting your auto-generated Payment Receive number',
- position: Position.BOTTOM_LEFT,
- }}
- />
-
-
-
- {/* ------------ Deposit account ------------ */}
-
}
- className={classNames(
- 'form-group--deposit_account_id',
- 'form-group--select-list',
- CLASSES.FILL,
- )}
- inline={true}
- labelInfo={
}
- intent={
- errors.deposit_account_id &&
- touched.deposit_account_id &&
- Intent.DANGER
- }
- helperText={
-
- }
- >
-
}
- onAccountSelected={onChangeSelect('deposit_account_id')}
- defaultSelectText={
}
- selectedAccountId={values.deposit_account_id}
- filterByTypes={['current_asset']}
- />
-
-
- {/* ------------ Reference No. ------------ */}
-
}
- inline={true}
- className={classNames('form-group--reference', CLASSES.FILL)}
- intent={
- errors.reference_no && touched.reference_no && Intent.DANGER
- }
- helperText={
-
- }
- >
-
-
-
-
-
-
- Amount Received
-
-
-
-
-
-
-
- );
-}
-
-export default compose(
- withCustomers(({ customers }) => ({
- customers,
- })),
- withAccounts(({ accountsList }) => ({
- accountsList,
- })),
- withSettings(({ organizationSettings }) => ({
- baseCurrency: organizationSettings?.baseCurrency,
- })),
- withDialogActions,
-)(PaymentReceiveFormHeader);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormPage.js
deleted file mode 100644
index f8d1a23e2..000000000
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormPage.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { useIntl } from 'react-intl';
-import { useQuery } from 'react-query';
-
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
-import PaymentReceiveForm from './PaymentReceiveForm';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withAccountsActions from 'containers/Accounts/withAccountsActions';
-import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withPaymentReceivesActions from './withPaymentReceivesActions';
-import withCustomersActions from 'containers/Customers/withCustomersActions';
-
-import { compose } from 'utils';
-
-/**
- * Payment receive form page.
- */
-function PaymentReceiveFormPage({
- // #withDashboardAction
- changePageTitle,
-
- // #withAccountsActions
- requestFetchAccounts,
-
- // #withSettingsActions
- requestFetchOptions,
-
- // #withPaymentReceivesActions
- requestFetchPaymentReceive,
-
- // #withCustomersActions
- requestFetchCustomers,
-
- // #withDashboardActions
- setSidebarShrink,
- resetSidebarPreviousExpand,
- setDashboardBackLink,
-}) {
- const { id: paymentReceiveId } = useParams();
-
- useEffect(() => {
- // Shrink the sidebar by foce.
- setSidebarShrink();
- // Show the back link on dashboard topbar.
- setDashboardBackLink(true);
-
- return () => {
- // Reset the sidebar to the previous status.
- resetSidebarPreviousExpand();
- // Hide the back link on dashboard topbar.
- setDashboardBackLink(false);
- };
- }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
-
- // Fetches payment recevie details.
- const fetchPaymentReceive = useQuery(
- ['payment-receive', paymentReceiveId],
- (key, _id) => requestFetchPaymentReceive(_id),
- { enabled: paymentReceiveId },
- );
-
- // Handle fetch accounts data.
- const fetchAccounts = useQuery('accounts-list', (key) =>
- requestFetchAccounts(),
- );
-
- // Fetch payment made settings.
- const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
-
- // Fetches customers list.
- const fetchCustomers = useQuery(['customers-list'], () =>
- requestFetchCustomers(),
- );
-
- return (
-
-
-
- );
-}
-
-export default compose(
- withDashboardActions,
- withAccountsActions,
- withSettingsActions,
- withPaymentReceivesActions,
- withCustomersActions,
-)(PaymentReceiveFormPage);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveAlerts.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveAlerts.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveAlerts.js
rename to client/src/containers/Sales/PaymentReceives/PaymentReceiveAlerts.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFloatingActions.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
similarity index 67%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFloatingActions.js
rename to client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
index 03a14dc57..24dcc0913 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFloatingActions.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
@@ -10,52 +10,51 @@ import {
MenuItem,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
+import { useHistory } from 'react-router-dom';
import classNames from 'classnames';
+import { useFormikContext } from 'formik';
import { CLASSES } from 'common/classes';
-import { saveInvoke } from 'utils';
import { Icon } from 'components';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
/**
* Payment receive floating actions bar.
*/
-export default function PaymentReceiveFormFloatingActions({
- isSubmitting,
- onSubmitClick,
- onCancelClick,
- onClearClick,
- onSubmitForm,
- paymentReceiveId,
-}) {
+export default function PaymentReceiveFormFloatingActions() {
+
+ // Payment receive form context.
+ const { setSubmitPayload, isNewMode } = usePaymentReceiveFormContext();
+
+ // Formik form context.
+ const { isSubmitting } = useFormikContext();
+
+ // History context.
+ const history = useHistory();
+
+ // Handle submit button click.
const handleSubmitBtnClick = (event) => {
- saveInvoke(onSubmitClick, event, {
- redirect: true,
- });
+ setSubmitPayload({ redirect: true, });
};
+ // Handle clear button click.
const handleClearBtnClick = (event) => {
- onClearClick && onClearClick(event);
+
};
+ // Handle cancel button click.
const handleCancelBtnClick = (event) => {
- onCancelClick && onCancelClick(event);
- saveInvoke(onCancelClick, event);
+ history.goBack();
};
+ // Handle submit & new button click.
const handleSubmitAndNewClick = (event) => {
- onSubmitForm();
- saveInvoke(onSubmitClick, event, {
- redirect: false,
- resetForm: true,
- });
+ setSubmitPayload({ redirect: false, resetForm: true, });
};
+ // Handle submit & continue editing button click.
const handleSubmitContinueEditingBtnClick = (event) => {
- onSubmitForm();
- saveInvoke(onSubmitClick, event, {
- redirect: false,
- publish: true,
- });
+ setSubmitPayload({ redirect: false, publish: true });
};
return (
@@ -67,7 +66,7 @@ export default function PaymentReceiveFormFloatingActions({
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
- text={paymentReceiveId ?
:
}
+ text={!isNewMode ?
:
}
/>
+
{/* ----------- Clear & Reset----------- */}
:
}
+ text={!isNewMode ?
:
}
/>
+
{/* ----------- Cancel ----------- */}
);
-}
+}
\ No newline at end of file
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
new file mode 100644
index 000000000..029bf2af3
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
@@ -0,0 +1,222 @@
+import React, { useMemo } from 'react';
+import { Formik, Form } from 'formik';
+
+import { useIntl } from 'react-intl';
+import { pick, sumBy, omit, isEmpty } from 'lodash';
+import { Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { CLASSES } from 'common/classes';
+import PaymentReceiveHeader from './PaymentReceiveFormHeader';
+// import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
+import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
+import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
+
+import withSettings from 'containers/Settings/withSettings';
+import {
+ EditPaymentReceiveFormSchema,
+ CreatePaymentReceiveFormSchema,
+} from './PaymentReceiveForm.schema';
+import { AppToaster } from 'components';
+import { compose } from 'utils';
+
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import {
+ defaultPaymentReceive,
+ defaultPaymentReceiveEntry,
+ transformToEditForm,
+} from './utils';
+
+import 'style/pages/PaymentReceive/PageForm.scss';
+
+/**
+ * Payment Receive form.
+ */
+function PaymentReceiveForm({
+ // #withSettings
+ paymentReceiveNextNumber,
+ paymentReceiveNumberPrefix,
+}) {
+ const history = useHistory();
+ const { formatMessage } = useIntl();
+
+ // Payment receive form context.
+ const {
+ isNewMode,
+ paymentReceive,
+ paymentReceiveId,
+ submitPayload,
+ editPaymentReceiveMutate,
+ createPaymentReceiveMutate,
+ } = usePaymentReceiveFormContext();
+
+ // Payment receive number.
+ const paymentReceiveNumber = paymentReceiveNumberPrefix
+ ? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
+ : paymentReceiveNextNumber;
+
+ // Form validation schema.
+ const validationSchema = isNewMode
+ ? CreatePaymentReceiveFormSchema
+ : EditPaymentReceiveFormSchema;
+
+ // Form initial values.
+ const initialValues = useMemo(
+ () => ({
+ ...(!isEmpty(paymentReceive)
+ ? {
+ ...transformToEditForm(paymentReceive, []),
+ }
+ : {
+ ...paymentReceive,
+ payment_receive_no: paymentReceiveNumber,
+ }),
+ }),
+ [paymentReceive, paymentReceiveNumber],
+ );
+
+ // Handle form submit.
+ const handleSubmitForm = (
+ values,
+ { setSubmitting, resetForm, setFieldError },
+ ) => {
+ setSubmitting(true);
+
+ // Filters entries that have no `invoice_id` and `payment_amount`.
+ const entries = values.entries
+ .filter((entry) => entry.invoice_id && entry.payment_amount)
+ .map((entry) => ({
+ ...omit(entry, ['due_amount']),
+ }));
+
+ // Calculates the total payment amount of entries.
+ const totalPaymentAmount = sumBy(entries, 'payment_amount');
+
+ if (totalPaymentAmount <= 0) {
+ AppToaster.show({
+ message: formatMessage({
+ id: 'you_cannot_make_payment_with_zero_total_amount',
+ }),
+ intent: Intent.DANGER,
+ });
+ setSubmitting(false);
+ return;
+ }
+ const form = { ...values, entries };
+
+ // Handle request response success.
+ const onSaved = (response) => {
+ AppToaster.show({
+ message: formatMessage({
+ id: paymentReceiveId
+ ? 'the_payment_receive_transaction_has_been_edited'
+ : 'the_payment_receive_transaction_has_been_created',
+ }),
+ intent: Intent.SUCCESS,
+ });
+ setSubmitting(false);
+
+ if (submitPayload.redirect) {
+ history.push('/payment-receives');
+ }
+ if (submitPayload.resetForm) {
+ resetForm();
+ }
+ };
+ // Handle request response errors.
+ const onError = (errors) => {
+ const getError = (errorType) => errors.find((e) => e.type === errorType);
+
+ if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
+ setFieldError(
+ 'payment_receive_no',
+ formatMessage({ id: 'payment_number_is_not_unique' }),
+ );
+ }
+ setSubmitting(false);
+ };
+
+ if (paymentReceiveId) {
+ editPaymentReceiveMutate([paymentReceiveId, form])
+ .then(onSaved)
+ .catch(onError);
+ } else {
+ createPaymentReceiveMutate(form).then(onSaved).catch(onError);
+ }
+ };
+
+ const transformDataTableToEntries = (dataTable) => {
+ return dataTable.map((data) => ({
+ ...pick(data, Object.keys(defaultPaymentReceiveEntry)),
+ }));
+ };
+
+ return (
+
+ );
+}
+
+export default compose(
+ withSettings(({ paymentReceiveSettings }) => ({
+ paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
+ paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+ })),
+)(PaymentReceiveForm);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.schema.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.schema.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveForm.schema.js
rename to client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.schema.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormFooter.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
similarity index 50%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormFooter.js
rename to client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
index 24cb88267..b0b4a7097 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveFormFooter.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
@@ -2,31 +2,31 @@ import React from 'react';
import classNames from 'classnames';
import { FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
+import { FastField } from 'formik';
import { Row, Col } from 'components';
import { CLASSES } from 'common/classes';
/**
* Payment receive form footer.
*/
-export default function PaymentReceiveFormFooter({
- getFieldProps,
-}) {
+export default function PaymentReceiveFormFooter({ getFieldProps }) {
return (
{/* --------- Statement --------- */}
- }
- className={'form-group--statement'}
- >
-
-
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ className={'form-group--statement'}
+ >
+
+
+ )}
+
);
-}
\ No newline at end of file
+}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js
new file mode 100644
index 000000000..9f3a32591
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js
@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+import classNames from 'classnames';
+import { Money } from 'components';
+
+import { CLASSES } from 'common/classes';
+import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
+import withSettings from 'containers/Settings/withSettings';
+
+import { compose } from 'utils';
+
+/**
+ * Payment receive form header.
+ */
+function PaymentReceiveFormHeader({
+ // #withSettings
+ baseCurrency,
+}) {
+ // Formik form context.
+ const { values } = useFormikContext();
+
+ // Calculates the total receivable amount from due amount.
+ const receivableFullAmount = useMemo(
+ () => sumBy(values.entries, 'due_amount'),
+ [values.entries],
+ );
+
+ return (
+
+
+
+
+
+
+ Amount Received
+
+
+
+
+
+
+
+ );
+}
+
+export default compose(
+ withSettings(({ organizationSettings }) => ({
+ baseCurrency: organizationSettings?.baseCurrency,
+ })),
+)(PaymentReceiveFormHeader);
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.js
new file mode 100644
index 000000000..d7b64783e
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { PaymentReceiveFormProvider } from './PaymentReceiveFormProvider';
+import PaymentReceiveForm from './PaymentReceiveForm';
+
+/**
+ * Payment receive form page.
+ */
+export default function PaymentReceiveFormPage() {
+ const { id: paymentReceiveId } = useParams();
+
+ return (
+
+
+
+ );
+}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js
new file mode 100644
index 000000000..a68299d11
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js
@@ -0,0 +1,83 @@
+import React, { createContext, useContext } from 'react';
+import { DashboardInsider } from 'components';
+import {
+ useSettings,
+ usePaymentReceive,
+ useAccounts,
+ useCustomers,
+ useCreatePaymentReceive,
+ useEditPaymentReceive
+} from 'hooks/query';
+
+// Payment receive form context.
+const PaymentReceiveFormContext = createContext();
+
+/**
+ * Payment receive form provider.
+ */
+function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
+ // Fetches payment recevie details.
+ const {
+ data: paymentReceive,
+ isLoading: isPaymentLoading,
+ isFetching: isPaymentFetching,
+ } = usePaymentReceive(paymentReceiveId, {
+ enabled: !!paymentReceiveId,
+ });
+
+ // Handle fetch accounts data.
+ const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
+
+ // Fetch payment made settings.
+ const fetchSettings = useSettings();
+
+ // Fetches customers list.
+ const {
+ data: { customers },
+ isFetching: isCustomersFetching,
+ } = useCustomers();
+
+ const [submitPayload, setSubmitPayload] = React.useState({});
+ const isNewMode = !paymentReceiveId;
+
+ // Create and edit payment receive mutations.
+ const { mutateAsync: editPaymentReceiveMutate } = useEditPaymentReceive();
+ const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive();
+
+ // Provider payload.
+ const provider = {
+ paymentReceive,
+ accounts,
+ customers,
+
+ isPaymentLoading,
+ isPaymentFetching,
+ isAccountsFetching,
+ isCustomersFetching,
+
+ submitPayload,
+ setSubmitPayload,
+ isNewMode,
+
+ editPaymentReceiveMutate,
+ createPaymentReceiveMutate
+ };
+
+ return (
+
+
+
+ );
+}
+
+const usePaymentReceiveFormContext = () =>
+ useContext(PaymentReceiveFormContext);
+
+export { PaymentReceiveFormProvider, usePaymentReceiveFormContext };
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
new file mode 100644
index 000000000..e1f6d5fab
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
@@ -0,0 +1,223 @@
+import React, { useMemo } from 'react';
+import {
+ FormGroup,
+ InputGroup,
+ Position,
+ ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { FastField, useFormikContext } from 'formik';
+import { sumBy } from 'lodash';
+
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
+import {
+ AccountsSelectList,
+ ContactSelecetList,
+ ErrorMessage,
+ FieldRequiredHint,
+ Icon,
+ InputPrependButton,
+ MoneyInputGroup,
+ InputPrependText,
+ Hint,
+ Money,
+} from 'components';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+/**
+ * Payment receive header fields.
+ */
+function PaymentReceiveHeaderFields({ baseCurrency }) {
+ // Payment receive form context.
+ const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
+
+ // Formik form context.
+ const { values } = useFormikContext();
+
+ const fullAmountReceived = useMemo(
+ () => sumBy(values.entries, 'payment_amount'),
+ [values.entries],
+ );
+
+ const handleReceiveFullAmountClick = () => {};
+
+ return (
+
+ {/* ------------- Customer name ------------- */}
+
+ {({ form, field: { value }, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={classNames('form-group--select-list', CLASSES.FILL)}
+ labelInfo={}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+ }
+ onContactSelected={(value) => {
+ form.setFieldValue('customer_id', value);
+ }}
+ popoverFill={true}
+ disabled={!isNewMode}
+ />
+
+ )}
+
+
+ {/* ------------- Payment date ------------- */}
+
+ {({ form, field: { value }, meta: { error, touched } }) => (
+ }
+ inline={true}
+ labelInfo={}
+ className={classNames('form-group--select-list', CLASSES.FILL)}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+ ,
+ }}
+ />
+
+ )}
+
+
+ {/* ------------ Full amount ------------ */}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={('form-group--full-amount', CLASSES.FILL)}
+ intent={inputIntent({ error, touched })}
+ labelInfo={}
+ helperText={}
+ >
+
+
+
+
+
+
+ Receive full amount (
+ )
+
+
+ )}
+
+
+ {/* ------------ Payment receive no. ------------ */}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={('form-group--payment_receive_no', CLASSES.FILL)}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+
+
+ ,
+ }}
+ tooltip={true}
+ tooltipProps={{
+ content: 'Setting your auto-generated Payment Receive number',
+ position: Position.BOTTOM_LEFT,
+ }}
+ />
+
+
+ )}
+
+
+ {/* ------------ Deposit account ------------ */}
+
+ {({ form, field: { value }, meta: { error, touched } }) => (
+ }
+ className={classNames(
+ 'form-group--deposit_account_id',
+ 'form-group--select-list',
+ CLASSES.FILL,
+ )}
+ inline={true}
+ labelInfo={}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+ }
+ onAccountSelected={(account) => {
+ form.setFieldValue('deposit_account_id', account.id);
+ }}
+ defaultSelectText={}
+ selectedAccountId={value}
+ />
+
+ )}
+
+
+ {/* ------------ Reference No. ------------ */}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ inline={true}
+ className={classNames('form-group--reference', CLASSES.FILL)}
+ intent={inputIntent({ error, touched })}
+ helperText={}
+ >
+
+
+ )}
+
+
+ );
+}
+
+export default compose(
+ withSettings(({ organizationSettings }) => ({
+ baseCurrency: organizationSettings?.baseCurrency,
+ })),
+ withDialogActions,
+)(PaymentReceiveHeaderFields);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTable.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTable.js
rename to client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTableEditor.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTableEditor.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentReceiveForm/PaymentReceiveItemsTableEditor.js
rename to client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTableEditor.js
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.js
new file mode 100644
index 000000000..6a8555501
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.js
@@ -0,0 +1,33 @@
+import moment from 'moment';
+import { transformToForm } from 'utils';
+
+// Default payment receive entry.
+export const defaultPaymentReceiveEntry = {
+ id: '',
+ payment_amount: '',
+ invoice_id: '',
+ due_amount: '',
+};
+
+// Form initial values.
+export const defaultPaymentReceive = {
+ customer_id: '',
+ deposit_account_id: '',
+ payment_date: moment(new Date()).format('YYYY-MM-DD'),
+ reference_no: '',
+ payment_receive_no: '',
+ description: '',
+ full_amount: '',
+ entries: [],
+};
+
+export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => {
+ return {
+ ...transformToForm(paymentReceive, defaultPaymentReceive),
+ entries: [
+ ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
+ ...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
+ })),
+ ],
+ };
+};
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiptsListProvider.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiptsListProvider.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveActionsBar.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveActionsBar.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveViewTabs.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveViewTabs.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceiveViewTabs.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveViewTabs.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesEmptyStatus.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesEmptyStatus.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesListProvider.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesListProvider.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesTable.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/components.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceiveDetail.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceiveDetail.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceiveDetail.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceiveDetail.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceives.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceives.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.js
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceivesActions.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.js
similarity index 100%
rename from client/src/containers/Sales/PaymentReceive/PaymentsLanding/withPaymentReceivesActions.js
rename to client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.js
diff --git a/client/src/hooks/query/paymentMades.js b/client/src/hooks/query/paymentMades.js
index 4cdd7866e..acb681548 100644
--- a/client/src/hooks/query/paymentMades.js
+++ b/client/src/hooks/query/paymentMades.js
@@ -54,10 +54,11 @@ export function useEditPaymentMade(props) {
const client = useQueryClient();
return useMutation(
- (id, values) => ApiService.post(`purchases/bill_payments/${id}`, values),
+ ([id, values]) => ApiService.post(`purchases/bill_payments/${id}`, values),
{
- onSuccess: () => {
+ onSuccess: (res, [id, values]) => {
client.invalidateQueries('PAYMENT_MADES');
+ client.invalidateQueries(['PAYMENT_MADE', id]);
},
...props,
},
@@ -71,10 +72,11 @@ export function useDeletePaymentMade(props) {
const client = useQueryClient();
return useMutation(
- (id, values) => ApiService.delete(`purchases/bill_payments/${id}`, values),
+ (id) => ApiService.delete(`purchases/bill_payments/${id}`),
{
- onSuccess: () => {
+ onSuccess: (res, id) => {
client.invalidateQueries('PAYMENT_MADES');
+ client.invalidateQueries(['PAYMENT_MADE', id]);
},
...props,
},
@@ -88,7 +90,14 @@ export function usePaymentMade(id, props) {
const states = useQuery(
['PAYMENT_MADE', id],
() => ApiService.get(`purchases/bill_payments/${id}`),
- props,
+ {
+ select: res => ({
+ paymentMade: res.data.bill_payment,
+ payableBills: res.data.payable_bills,
+ paymentBills: res.data.payment_bills,
+ }),
+ ...props,
+ },
);
return {
diff --git a/client/src/hooks/query/paymentReceives.js b/client/src/hooks/query/paymentReceives.js
index 0c6da15bd..b6027971c 100644
--- a/client/src/hooks/query/paymentReceives.js
+++ b/client/src/hooks/query/paymentReceives.js
@@ -58,7 +58,7 @@ export function useEditPaymentReceive(props) {
const client = useQueryClient();
return useMutation(
- (id, values) => ApiService.post(`sales/payment_receives/${id}`, values),
+ ([id, values]) => ApiService.post(`sales/payment_receives/${id}`, values),
{
onSuccess: () => {
client.invalidateQueries('PAYMENT_RECEIVES');
@@ -92,7 +92,10 @@ export function usePaymentReceive(id, props) {
const states = useQuery(
['PAYMENT_RECEIVE', id],
() => ApiService.get(`sales/payment_receives/${id}`),
- props,
+ {
+ select: (res) => res.data.payment_receive,
+ ...props
+ },
);
return {
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index 338abf874..00e736b57 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -40,7 +40,7 @@ export default [
hotkey: 'ctrl+shift+m',
pageTitle: formatMessage({ id: 'new_journal' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/manual-journals/:id/edit`,
@@ -50,7 +50,7 @@ export default [
breadcrumb: 'Edit',
pageTitle: formatMessage({ id: 'edit_journal' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/manual-journals`,
@@ -74,7 +74,7 @@ export default [
component: lazy(() => import('containers/Items/ItemFormPage')),
breadcrumb: 'Edit Item',
pageTitle: formatMessage({ id: 'edit_item' }),
- backLink: true
+ backLink: true,
},
{
path: `/items/new`,
@@ -82,7 +82,7 @@ export default [
breadcrumb: 'New Item',
hotkey: 'ctrl+shift+w',
pageTitle: formatMessage({ id: 'new_item' }),
- backLink: true
+ backLink: true,
},
{
path: `/items`,
@@ -178,7 +178,7 @@ export default [
hotkey: 'ctrl+shift+x',
pageTitle: formatMessage({ id: 'new_expense' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/expenses/:id/edit`,
@@ -188,7 +188,7 @@ export default [
breadcrumb: 'Edit',
pageTitle: formatMessage({ id: 'edit_expense' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/expenses`,
@@ -208,7 +208,7 @@ export default [
),
breadcrumb: 'Edit Customer',
pageTitle: formatMessage({ id: 'edit_customer' }),
- backLink: true
+ backLink: true,
},
{
path: `/customers/new`,
@@ -218,7 +218,7 @@ export default [
breadcrumb: 'New Customer',
hotkey: 'ctrl+shift+c',
pageTitle: formatMessage({ id: 'new_customer' }),
- backLink: true
+ backLink: true,
},
{
path: `/customers`,
@@ -238,6 +238,7 @@ export default [
),
breadcrumb: 'Edit Vendor',
pageTitle: formatMessage({ id: 'edit_vendor' }),
+ backLink: true,
},
{
path: `/vendors/new`,
@@ -247,6 +248,7 @@ export default [
breadcrumb: 'New Vendor',
hotkey: 'ctrl+shift+v',
pageTitle: formatMessage({ id: 'new_vendor' }),
+ backLink: true,
},
{
path: `/vendors`,
@@ -261,7 +263,9 @@ export default [
// Estimates
{
path: `/estimates/:id/edit`,
- component: lazy(() => import('containers/Sales/Estimates/EstimateForm/EstimateFormPage')),
+ component: lazy(() =>
+ import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
+ ),
breadcrumb: 'Edit',
pageTitle: formatMessage({ id: 'edit_estimate' }),
backLink: true,
@@ -269,7 +273,9 @@ export default [
},
{
path: `/estimates/new`,
- component: lazy(() => import('containers/Sales/Estimates/EstimateForm/EstimateFormPage')),
+ component: lazy(() =>
+ import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
+ ),
breadcrumb: 'New Estimate',
hotkey: 'ctrl+shift+e',
pageTitle: formatMessage({ id: 'new_estimate' }),
@@ -283,7 +289,7 @@ export default [
),
breadcrumb: 'Estimates List',
hotkey: 'shift+e',
- pageTitle: formatMessage({ id: 'estimates_list' })
+ pageTitle: formatMessage({ id: 'estimates_list' }),
},
// Invoices.
@@ -295,7 +301,7 @@ export default [
breadcrumb: 'Edit',
pageTitle: formatMessage({ id: 'edit_invoice' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/invoices/new`,
@@ -306,7 +312,7 @@ export default [
hotkey: 'ctrl+shift+i',
pageTitle: formatMessage({ id: 'new_invoice' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/invoices`,
@@ -347,31 +353,39 @@ export default [
),
breadcrumb: 'Receipts List',
hotkey: 'shift+r',
- pageTitle: formatMessage({ id: 'receipts_list' })
+ pageTitle: formatMessage({ id: 'receipts_list' }),
},
// Payment receives
- // {
- // path: `/payment-receives/:id/edit`,
- // component: LazyLoader({
- // loader: () =>
- // import('containers/Sales/PaymentReceive/PaymentReceiveFormPage'),
- // }),
- // breadcrumb: 'Edit',
- // },
- // {
- // path: `/payment-receives/new`,
- // component: LazyLoader({
- // loader: () =>
- // import('containers/Sales/PaymentReceive/PaymentReceiveFormPage'),
- // }),
- // breadcrumb: 'New Payment Receive',
- // },
+ {
+ path: `/payment-receives/:id/edit`,
+ component: lazy(() =>
+ import(
+ 'containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage'
+ ),
+ ),
+ breadcrumb: 'Edit',
+ pageTitle: formatMessage({ id: 'edit_payment_receive' }),
+ backLink: true,
+ sidebarShrink: true,
+ },
+ {
+ path: `/payment-receives/new`,
+ component: lazy(() =>
+ import(
+ 'containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage'
+ ),
+ ),
+ breadcrumb: 'New Payment Receive',
+ pageTitle: formatMessage({ id: 'new_payment_receive' }),
+ backLink: true,
+ sidebarShrink: true,
+ },
{
path: `/payment-receives`,
component: lazy(() =>
import(
- 'containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList'
+ 'containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList'
),
),
breadcrumb: 'Payment Receives List',
@@ -386,7 +400,7 @@ export default [
breadcrumb: 'Edit',
pageTitle: formatMessage({ id: 'edit_bill' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/bills/new`,
@@ -397,7 +411,7 @@ export default [
hotkey: 'ctrl+shift+b',
pageTitle: formatMessage({ id: 'new_bill' }),
sidebarShrink: true,
- backLink: true
+ backLink: true,
},
{
path: `/bills`,
@@ -406,7 +420,7 @@ export default [
),
breadcrumb: 'Bills List',
hotkey: 'shift+b',
- pageTitle: formatMessage({ id: 'bills_list' })
+ pageTitle: formatMessage({ id: 'bills_list' }),
},
// Subscription billing.
@@ -416,22 +430,30 @@ export default [
breadcrumb: 'New Billing',
},
// Payment modes.
- // {
- // path: `/payment-mades/:id/edit`,
- // component: LazyLoader({
- // loader: () =>
- // import('containers/Purchases/PaymentMades/PaymentMadeFormPage'),
- // }),
- // breadcrumb: 'Edit',
- // },
- // {
- // path: `/payment-mades/new`,
- // component: LazyLoader({
- // loader: () =>
- // import('containers/Purchases/PaymentMades/PaymentMadeFormPage'),
- // }),
- // breadcrumb: 'New Payment Made',
- // },
+ {
+ path: `/payment-mades/:id/edit`,
+ component: lazy(() =>
+ import(
+ 'containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage'
+ ),
+ ),
+ breadcrumb: 'Edit',
+ pageTitle: formatMessage({ id: 'edit_payment_made' }),
+ sidebarShrink: true,
+ backLink: true,
+ },
+ {
+ path: `/payment-mades/new`,
+ component: lazy(() =>
+ import(
+ 'containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage'
+ ),
+ ),
+ breadcrumb: 'New Payment Made',
+ pageTitle: formatMessage({ id: 'edit_payment_made' }),
+ sidebarShrink: true,
+ backLink: true,
+ },
{
path: `/payment-mades`,
component: lazy(() =>
@@ -440,6 +462,6 @@ export default [
),
),
breadcrumb: 'Payment Made List',
- pageTitle: formatMessage({ id: 'payment_made_list' })
+ pageTitle: formatMessage({ id: 'payment_made_list' }),
},
];