From ecaf23d269f7730762cedbbae307b124468eb053 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Tue, 7 Dec 2021 20:58:17 +0200 Subject: [PATCH] feat: add reconcile credit transactions table. --- .../ReconcileCreditNoteDeleteAlert.js | 88 +++++++++++++++++++ .../CreditNoteDetail.js | 6 ++ .../CreditNoteDetailDrawerProvider.js | 25 +++++- .../ReconcileCreditNoteTransactionsTable.js | 48 ++++++++++ .../components.js | 49 +++++++++++ .../Sales/CreditNotes/CreditNotesAlerts.js | 8 ++ src/lang/en/index.json | 32 ++++--- .../ReconcileCreditNoteForm.scss | 68 ++++++++++++++ 8 files changed, 312 insertions(+), 12 deletions(-) create mode 100644 src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.js create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js create mode 100644 src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss diff --git a/src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js new file mode 100644 index 000000000..1d84cdbb6 --- /dev/null +++ b/src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js @@ -0,0 +1,88 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster } from 'components'; + +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { useDeleteReconcileCredit } from 'hooks/query'; +import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils'; +import { compose } from 'utils'; + +/** + * Reconcile credit note delete alert. + */ +function ReconcileCreditNoteDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { creditNoteId }, + + // #withAlertActions + closeAlert, + + // #withDrawerActions + closeDrawer, +}) { + const { isLoading, mutateAsync: deleteReconcileCreditMutate } = + useDeleteReconcileCredit(); + + // handle cancel delete credit note alert. + const handleCancelDeleteAlert = () => { + closeAlert(name); + }; + + const handleConfirmVendorCreditDelete = () => { + deleteReconcileCreditMutate(creditNoteId) + .then(() => { + AppToaster.show({ + message: intl.get('reconcile_credit_note.alert.success_message'), + intent: Intent.SUCCESS, + }); + closeDrawer('credit-note-detail-drawer'); + }) + .catch( + ({ + response: { + data: { errors }, + }, + }) => { + // handleDeleteErrors(errors); + }, + ) + .finally(() => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelDeleteAlert} + onConfirm={handleConfirmVendorCreditDelete} + loading={isLoading} + > +

+ +

+ + ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withDrawerActions, +)(ReconcileCreditNoteDeleteAlert); diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js index 3e992afda..2ca7747de 100644 --- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js +++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js @@ -5,6 +5,7 @@ import { DrawerMainTabs } from 'components'; import CreditNoteDetailPanel from './CreditNoteDetailPanel'; import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable'; +import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable'; import clsx from 'classnames'; import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss'; @@ -26,6 +27,11 @@ export default function CreditNoteDetail() { id={'refund_transactions'} panel={} /> + } + /> ); diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js index 6dc49e32e..8f3bd7326 100644 --- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js +++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js @@ -1,6 +1,10 @@ import React from 'react'; import intl from 'react-intl-universal'; -import { useCreditNote, useRefundCreditNote } from 'hooks/query'; +import { + useCreditNote, + useRefundCreditNote, + useReconcileCreditNotes, +} from 'hooks/query'; import { DrawerHeaderContent, DrawerLoading } from 'components'; const CreditNoteDetailDrawerContext = React.createContext(); @@ -26,16 +30,33 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) { enabled: !!creditNoteId, }); + // Handle fetch refund credit note. + const { + data: reconcileCreditNotes, + isFetching: isReconcileCreditNoteFetching, + isLoading: isReconcileCreditNoteLoading, + } = useReconcileCreditNotes(creditNoteId, { + enabled: !!creditNoteId, + }); + const provider = { creditNote, refundCreditNote, + reconcileCreditNotes, + isRefundCreditNoteLoading, isRefundCreditNoteFetching, creditNoteId, }; return ( - + { + openAlert('reconcile-credit-delete', { creditNoteId: id }); + }; + + return ( + + + + ); +} + +export default compose(withAlertsActions)(RefundCreditNoteTransactionsTable); diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js new file mode 100644 index 000000000..e3bc36fe2 --- /dev/null +++ b/src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { Intent, MenuItem, Menu } from '@blueprintjs/core'; +import intl from 'react-intl-universal'; +import { FormatDateCell, Icon } from 'components'; +import { safeCallback } from 'utils'; + +/** + * Actions menu. + */ +export function ActionsMenu({ payload: { onDelete }, row: { original } }) { + return ( + + } + text={intl.get('delete_transaction')} + intent={Intent.DANGER} + onClick={safeCallback(onDelete, original)} + /> + + ); +} + +export function useReconcileCreditTransactionsTableColumns() { + return React.useMemo( + () => [ + { + Header: intl.get('date'), + accessor: 'formatted_credit_note_date', + Cell: FormatDateCell, + width: 100, + className: 'date', + }, + { + Header: intl.get('invoice_no'), + accessor: 'invoice_number', + width: 100, + className: 'invoice_number', + }, + { + Header: intl.get('amount'), + accessor: 'formtted_amount', + width: 100, + className: 'amount', + align: 'right', + }, + ], + [], + ); +} diff --git a/src/containers/Sales/CreditNotes/CreditNotesAlerts.js b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js index 1998279a5..83b171df7 100644 --- a/src/containers/Sales/CreditNotes/CreditNotesAlerts.js +++ b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js @@ -12,6 +12,10 @@ const OpenCreditNoteAlert = React.lazy(() => import('../../Alerts/CreditNotes/CreditNoteOpenedAlert'), ); +const ReconcileCreditDeleteAlert = React.lazy(() => + import('../../Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert'), +); + /** * Credit notes alerts. */ @@ -28,4 +32,8 @@ export default [ name: 'refund-credit-delete', component: RefundCreditNoteDeleteAlert, }, + { + name: 'reconcile-credit-delete', + component: ReconcileCreditDeleteAlert, + }, ]; diff --git a/src/lang/en/index.json b/src/lang/en/index.json index b0b5fe0bc..5edb33ffe 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1534,6 +1534,7 @@ "credit_note.drawer.label_total": "TOTAL", "credit_note.drawer.label_subtotal": "Subtotal", "credit_note.drawer.label_refund_transactions": "Refund transactions", + "credit_note.drawer.label_reconcile_transactions": "Reconcile transactions", "vendor_credit.drawer_vendor_credit_detail": "Vendor Credit details", "vendor_credit.drawer.label_vendor_credit_no": "Vendor Credit #", "vendor_credit.drawer.label_vendor_credit_date": "Vendor Credit Date", @@ -1556,16 +1557,27 @@ "refund_vendor_credit.dialog.deposit_to_account": "Deposit to account", "refund_credit_transactions.column.amount_refunded": "Amount refunded", "refund_credit_transactions.column.withdrawal_account": "Withdrawal account", - "refund_credit_transactions.alert.delete_message":"The credit note refund has been deleted successfully.", - "refund_credit_transactions.once_your_delete_this_refund_credit_note":"Once your delete this refund credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?", + "refund_credit_transactions.alert.delete_message": "The credit note refund has been deleted successfully.", + "refund_credit_transactions.once_your_delete_this_refund_credit_note": "Once your delete this refund credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?", "refund_vendor_credit.column.amount": "Amount refunded", "refund_vendor_credit.column.withdrawal_account": "Withdrawal account", - "refund_vendor_credit_transactions.alert.delete_message":"The vendor credit refund has been deleted successfully.", - "refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit":"Once your delete this refund vendor credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?", + "refund_vendor_credit_transactions.alert.delete_message": "The vendor credit refund has been deleted successfully.", + "refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit": "Once your delete this refund vendor credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?", "refund": "Refund", - "credit_note_opened.alert.success_message":"The credit note has been opened successfully", - "credit_opened.are_sure_to_open_this_credit": "Are you sure you want to open this credit note?", - "vendor_credit_opened.alert.success_message":"The vendor credit has been opened successfully", - "vendor_credit_opened.are_sure_to_open_this_credit": "Are you sure you want to open this vendor credit?" -} - + "credit_note_opened.alert.success_message": "The credit note has been opened successfully", + "credit_note_opened.are_sure_to_open_this_credit": "Are you sure you want to open this credit note?", + "vendor_credit_opened.alert.success_message": "The vendor credit has been opened successfully", + "vendor_credit_opened.are_sure_to_open_this_credit": "Are you sure you want to open this vendor credit?", + "reconcile_credit_note.label": "Reconcile Credit Note With Invoices", + "reconcile_credit_note.dialog.total_amount_to_credit": "Total amount to credit", + "reconcile_credit_note.dialog.remaining_credits": "Remaining credits", + "reconcile_credit_note.column.remaining_amount": "Remaining amount", + "reconcile_credit_note.column.amount_to_credit": "Amount to credit", + "reconcile_credit_note.success_message": "The credit note has been applied the given invoices successfully.", + "reconcile_credit_note.alert.there_is_no_open_sale_invoices": "There is no open sale invoices associated to credit note customer.", + "reconcile_credit_note.alert.success_message": "The applied credit to invoices has been deleted successfully.", + "reconcile_credit_note.once_you_delete_this_reconcile_credit_note": "Once you delete this reconcile credit note, you won't be able to restore it later. Are you sure you want to delete this reconcile credit note?", + "credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_refund": "You couldn't delete credit note that has associated refund transactions.", + "credit_note.error.you_couldn_t_delete_credit_note_that_has_associated_invoice": "You couldn't delete credit note that has associated invoice reconcile transactions.", + "invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled": "You couldn't delete sale invoice that has reconciled with credit note transaction." +} \ No newline at end of file diff --git a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss new file mode 100644 index 000000000..b90c0a6bb --- /dev/null +++ b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss @@ -0,0 +1,68 @@ +.dialog--reconcile-credit-form { + width: 800px; + + .bp3-dialog-body { + .footer { + display: flex; + margin-top: 40px; + + .total_lines { + margin-left: auto; + + &_line { + border-bottom: none; + .amount, + .title { + padding: 8px 0px; + width: 145px; + } + .amount { + text-align: right; + } + } + } + } + } + .bigcapital-datatable { + .table { + border: 1px solid #d1dee2; + min-width: auto; + + .tbody, + .tbody-inner { + height: auto; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } + } + .tbody { + .tr .td { + padding: 0.4rem; + margin-left: -1px; + border-left: 1px solid #ececec; + } + + .bp3-form-group { + margin-bottom: 0; + + &:not(.bp3-intent-danger) .bp3-input { + border: 1px solid #d0dfe2; + + &:focus { + box-shadow: 0 0 0 1px #116cd0; + border-color: #116cd0; + } + } + } + } + } + } + + .bp3-callout { + font-size: 14px; + } + .bp3-dialog-footer { + padding-top: 10px; + } +}