CM-932: added make payment button for digital strategy

src/actions.js

@@ -290,3 +290,13 @@ export function rejectPayroll(payroll, clientMutationLabel) {
     clientMutationLabel,
   );
 }
+
+export function makePaymentForPayroll(payroll, clientMutationLabel) {
+  const payrollUuids = `ids: ["${payroll?.id}"]`;
+  return PERFORM_MUTATION(
+    MUTATION_SERVICE.PAYROLL.MAKE_PAYMENT,
+    payrollUuids,
+    ACTION_TYPE.MAKE_PAYMENT_PAYROLL,
+    clientMutationLabel,
+  );
+}

src/components/payroll/BenefitConsumptionSearcherModal.js

@@ -38,6 +38,7 @@ function BenefitConsumptionSearcherModal({
     'benefitConsumption.dateDue',
     'benefitConsumption.payedOnTime',
     'benefitConsumption.paymentDate',
+    'benefitConsumption.status',
     '',
   ];
 
@@ -68,6 +69,7 @@ function BenefitConsumptionSearcherModal({
         ? ''
         : benefitAttachment?.bill?.datePayed
     ),
+    (benefitAttachment) => benefitAttachment?.benefit?.status,
     (benefitAttachment) => (
       <Button
         onClick={() => {}}

src/components/payroll/dialogs/PaymentApproveForPaymentSummary.js

@@ -17,7 +17,9 @@ import Typography from '@material-ui/core/Typography';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { MODULE_NAME, BENEFIT_CONSUMPTION_STATUS } from '../../../constants';
-import { closePayroll, fetchPayroll, rejectPayroll } from '../../../actions';
+import {
+  closePayroll, fetchPayroll, makePaymentForPayroll, rejectPayroll,
+} from '../../../actions';
 import { mutationLabel } from '../../../utils/string-utils';
 import BenefitConsumptionSearcherModal from '../BenefitConsumptionSearcherModal';
 import downloadPayroll from '../../../utils/export';
@@ -29,12 +31,14 @@ function PaymentApproveForPaymentDialog({
   rejectPayroll,
   payrollDetail,
   fetchPayroll,
+  makePaymentForPayroll,
 }) {
   const modulesManager = useModulesManager();
   const [payrollUuid] = useState(payrollDetail?.id ?? null);
   const [isOpen, setIsOpen] = useState(false);
   const [totalBeneficiaries, setTotalBeneficiaries] = useState(0);
   const [selectedBeneficiaries, setSelectedBeneficiaries] = useState(0);
+  const [approvedBeneficiaries, setApprovedBeneficiaries] = useState(0);
   const [totalBillAmount, setTotalBillAmount] = useState(0);
   const [totalReconciledBillAmount, setTotalReconciledBillAmount] = useState(0);
 
@@ -58,9 +62,13 @@ function PaymentApproveForPaymentDialog({
       const selected = payroll.benefitConsumption.filter(
         (benefit) => benefit.status === BENEFIT_CONSUMPTION_STATUS.RECONCILED,
       ).length;
+      const approved = payroll.benefitConsumption.filter(
+        (benefit) => benefit.status === BENEFIT_CONSUMPTION_STATUS.APPROVE_FOR_PAYMENT,
+      ).length;
 
       setTotalBeneficiaries(total);
       setSelectedBeneficiaries(selected);
+      setApprovedBeneficiaries(approved);
 
       let totalAmount = 0;
       let reconciledAmount = 0;
@@ -99,6 +107,14 @@ function PaymentApproveForPaymentDialog({
     );
   };
 
+  const makePaymentForPayrollCallback = () => {
+    handleClose();
+    makePaymentForPayroll(
+      payrollDetail,
+      formatMessageWithValues('payroll.mutation.closeLabel', mutationLabel(payrollDetail)),
+    );
+  };
+
   const downloadPayrollData = (payrollUuid, payrollName) => {
     downloadPayroll(payrollUuid, payrollName);
   };
@@ -188,7 +204,11 @@ function PaymentApproveForPaymentDialog({
                 onClick={() => closePayrollCallback(payrollDetail)}
                 variant="contained"
                 color="primary"
-                disabled={selectedBeneficiaries === 0}
+                disabled={
+                  payrollDetail.paymentMethod === 'StrategyOnlinePayment'
+                    ? approvedBeneficiaries === 0
+                    : selectedBeneficiaries === 0
+                }
                 style={{
                   margin: '0 16px',
                   marginBottom: '15px',
@@ -224,6 +244,18 @@ function PaymentApproveForPaymentDialog({
               paddingRight: '16px',
             }}
             >
+              {payrollDetail.paymentMethod === 'StrategyOnlinePayment' && (
+                <Button
+                  onClick={() => makePaymentForPayrollCallback(payrollDetail)}
+                  variant="contained"
+                  color="primary"
+                  style={{
+                    margin: '0 16px',
+                  }}
+                >
+                  {formatMessage('payroll.summary.makePayment')}
+                </Button>
+              )}
               <Button
                 onClick={handleClose}
                 variant="outlined"
@@ -250,6 +282,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   closePayroll,
   rejectPayroll,
   fetchPayroll,
+  makePaymentForPayroll,
 }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(PaymentApproveForPaymentDialog);

src/reducer.js

@@ -31,6 +31,7 @@ export const ACTION_TYPE = {
   GET_PAYMENT_METHODS: 'PAYROLL_PAYMENT_METHODS',
   CLOSE_PAYROLL: 'PAYROLL_MUTATION_CLOSE_PAYROLL',
   REJECT_PAYROLL: 'PAYROLL_MUTATION_REJECT_PAYROLL',
+  MAKE_PAYMENT_PAYROLL: 'PAYROLL_MUTATION_MAKE_PAYMENT_PAYROLL',
   GET_PAYROLL_PAYMENT_FILES: 'GET_PAYROLL_PAYMENT_FILES',
   BENEFITS_SUMMARY: 'PAYROLL_BENEFITS_SUMMARY',
 };
@@ -46,6 +47,7 @@ export const MUTATION_SERVICE = {
     DELETE: 'deletePayroll',
     CLOSE: 'closePayroll',
     REJECT: 'rejectPayroll',
+    MAKE_PAYMENT: 'makePaymentForPayroll',
   },
 };
 

src/translations/en.json

@@ -94,6 +94,7 @@
     "payroll.viewReconciliationSummary": "View Reconciliation Summary",
     "payroll.reconciliationSummary": "View Reconciliation Summary: {payrollName}",
     "payroll.summary.confirm": "Confirm",
+    "payroll.summary.makePayment": "Make Payment",
     "payroll.summary.name": "Name",
     "payroll.summary.amount": "Amount",
     "payroll.summary.receipt": "Receipt",