feat(Sale invoice): quick payment receive.

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -14,6 +14,7 @@ import withInvoiceActions from './withInvoiceActions';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { useInvoicesTableColumns, ActionsMenu } from './components';
 import { useInvoicesListContext } from './InvoicesListProvider';
@@ -36,6 +37,9 @@ function InvoicesDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withDialogAction
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -71,6 +75,10 @@ function InvoicesDataTable({
     openDrawer('invoice-drawer', { invoiceId: id });
   };
 
+  // handle quick payment receive.
+  const handleQuickPaymentReceive = ({ id }) => {
+    openDialog('quick-payment-receive', { invoiceId: id });
+  };
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -114,6 +122,7 @@ function InvoicesDataTable({
         onDeliver: handleDeliverInvoice,
         onEdit: handleEditInvoice,
         onDrawer: handleDrawerInvoice,
+        onQuick: handleQuickPaymentReceive,
         baseCurrency,
       }}
     />
@@ -125,6 +134,7 @@ export default compose(
   withInvoiceActions,
   withAlertsActions,
   withDrawerActions,
+  withDialogActions,
   withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,

client/src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -104,7 +104,7 @@ export const handleDeleteErrors = (errors) => {
 };
 
 export function ActionsMenu({
-  payload: { onEdit, onDeliver, onDelete, onDrawer },
+  payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick },
   row: { original },
 }) {
   const { formatMessage } = useIntl();
@@ -128,6 +128,13 @@ export function ActionsMenu({
           onClick={safeCallback(onDeliver, original)}
         />
       </If>
+      <If condition={!original.is_fully_paid}>
+        <MenuItem
+          // icon={<Icon />}
+          text={formatMessage({ id: 'make_as_payment' })}
+          onClick={safeCallback(onQuick, original)}
+        />
+      </If>
       <MenuItem
         icon={<Icon icon={'receipt-24'} iconSize={16} />}
         text={formatMessage({ id: 'invoice_paper' })}
@@ -179,7 +186,9 @@ export function useInvoicesTableColumns() {
       {
         id: 'balance',
         Header: formatMessage({ id: 'balance' }),
-        accessor: (r) => <Money amount={r.balance} currency={r.currency_code} />,
+        accessor: (r) => (
+          <Money amount={r.balance} currency={r.currency_code} />
+        ),
         width: 110,
         className: 'balance',
       },

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.schema.js

@@ -18,7 +18,7 @@ const Schema = Yup.object().shape({
     .max(DATATYPES_LENGTH.STRING)
     .label(formatMessage({ id: 'payment_receive_no_' })),
   reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
-  description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
   entries: Yup.array().of(
     Yup.object().shape({
       id: Yup.number().nullable(),