CM-951: added button to display error for digital means of payment

src/actions.js

@@ -54,7 +54,7 @@ const BENEFIT_CONSUMPTION_SUMMARY_PROJECTION = () => [
 ];
 
 const BENEFIT_ATTACHMENT_PROJECTION = () => [
-  'benefit{id, status, code, dateDue, receipt, individual {firstName, lastName}}',
+  'benefit{id, status, code, dateDue, receipt, individual {firstName, lastName}, jsonExt}',
   'bill{id, code, terms, amountTotal, datePayed}',
 ];
 
@@ -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

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import React from 'react';
+import React, { useState } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Button from '@material-ui/core/Button';
@@ -10,6 +10,7 @@ import PhotoCameraOutlinedIcon from '@material-ui/icons/PhotoCameraOutlined';
 import { fetchBenefitAttachments } from '../../actions';
 import { DEFAULT_PAGE_SIZE, ROWS_PER_PAGE_OPTIONS, PAYROLL_STATUS } from '../../constants';
 import BenefitConsumptionFilterModal from './BenefitConsumptionFilterModal';
+import ErrorSummaryModal from './dialogs/ErrorSummaryModal';
 
 function BenefitConsumptionSearcherModal({
   fetchBenefitAttachments,
@@ -21,9 +22,11 @@ function BenefitConsumptionSearcherModal({
   benefitAttachmentsTotalCount,
   payrollUuid,
   reconciledMode,
+  payrollDetail,
 }) {
   const modulesManager = useModulesManager();
   const { formatMessage, formatMessageWithValues } = useTranslations('payroll', modulesManager);
+  const [selectedBenefitAttachment, setSelectedBenefitAttachment] = useState(null);
 
   const fetch = (params) => {
     fetchBenefitAttachments(modulesManager, params);
@@ -38,6 +41,7 @@ function BenefitConsumptionSearcherModal({
     'benefitConsumption.dateDue',
     'benefitConsumption.payedOnTime',
     'benefitConsumption.paymentDate',
+    'benefitConsumption.status',
     '',
   ];
 
@@ -68,6 +72,7 @@ function BenefitConsumptionSearcherModal({
         ? ''
         : benefitAttachment?.bill?.datePayed
     ),
+    (benefitAttachment) => benefitAttachment?.benefit?.status,
     (benefitAttachment) => (
       <Button
         onClick={() => {}}
@@ -78,6 +83,18 @@ function BenefitConsumptionSearcherModal({
         {formatMessage('payroll.summary.confirm')}
       </Button>
     ),
+    (benefitAttachment) => (
+      payrollDetail.paymentMethod === 'StrategyOnlinePayment' && payrollDetail.status === 'RECONCILED'
+        && benefitAttachment.benefit.status !== 'RECONCILED' && (
+          <Button
+            onClick={() => setSelectedBenefitAttachment(benefitAttachment)}
+            variant="contained"
+            style={{ backgroundColor: '#b80000', color: 'white' }}
+          >
+            {formatMessage('payroll.summary.benefit_error')}
+          </Button>
+      )
+    ),
   ];
 
   const rowIdentifier = (benefitAttachment) => benefitAttachment.id;
@@ -102,7 +119,7 @@ function BenefitConsumptionSearcherModal({
         filter: `payrollUuid: "${payrollUuid}"`,
       },
     };
-    if (reconciledMode) {
+    if (reconciledMode && payrollDetail.paymentMethod !== 'StrategyOnlinePayment') {
       filters.benefit_Status = {
         value: 'RECONCILED',
         filter: `benefit_Status: ${PAYROLL_STATUS.RECONCILED}`,
@@ -137,6 +154,13 @@ function BenefitConsumptionSearcherModal({
         rowIdentifier={rowIdentifier}
         defaultFilters={defaultFilters()}
       />
+      {selectedBenefitAttachment && (
+        <ErrorSummaryModal
+          open={!!selectedBenefitAttachment}
+          onClose={() => setSelectedBenefitAttachment(null)}
+          benefitAttachment={selectedBenefitAttachment}
+        />
+      )}
     </div>
   );
 }

src/components/payroll/dialogs/ErrorSummaryModal.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  Modal, Backdrop, Fade, Box, Typography, Button,
+} from '@material-ui/core';
+import { useTranslations, useModulesManager } from '@openimis/fe-core';
+
+function ErrorSummaryModal({ open, onClose, benefitAttachment }) {
+  const modulesManager = useModulesManager();
+  const { formatMessage } = useTranslations('payroll', modulesManager);
+
+  const jsonExt = benefitAttachment?.benefit?.jsonExt ? JSON.parse(benefitAttachment.benefit.jsonExt) : {};
+  const outputGateway = `${jsonExt?.output_gateway}`;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      closeAfterTransition
+      BackdropComponent={Backdrop}
+      BackdropProps={{
+        timeout: 500,
+      }}
+    >
+      <Fade in={open}>
+        <Box
+          p={4}
+          style={{
+            backgroundColor: 'white', margin: 'auto', maxWidth: 400, outline: 'none',
+          }}
+        >
+          <Typography variant="h6">{formatMessage('payroll.errorSummary.title')}</Typography>
+          {/* Conditional rendering based on output_gateway */}
+          {outputGateway === null || outputGateway === 'undefined' ? (
+            <Typography>
+              {formatMessage('payroll.errorSummary.outputGateway.noInfo')}
+            </Typography>
+          ) : (
+            <Typography>
+              {outputGateway}
+            </Typography>
+          )}
+          <Box display="flex" justifyContent="center" mt={2}>
+            <Button onClick={onClose} variant="contained" color="primary">
+              {formatMessage('payroll.errorSummary.close')}
+            </Button>
+          </Box>
+        </Box>
+      </Fade>
+    </Modal>
+  );
+}
+
+export default ErrorSummaryModal;

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);
   };
@@ -170,7 +186,7 @@ function PaymentApproveForPaymentDialog({
           <div
             style={{ backgroundColor: '#DFEDEF' }}
           >
-            <BenefitConsumptionSearcherModal payrollUuid={payrollDetail.id} />
+            <BenefitConsumptionSearcherModal payrollUuid={payrollDetail.id} payrollDetail={payrollDetail} />
           </div>
         </DialogContent>
         <DialogActions
@@ -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/components/payroll/dialogs/PaymentReconciliationSummaryDialog.js

@@ -116,8 +116,8 @@ function PaymentReconcilationSummarytDialog({
             top: '50%',
             left: '50%',
             transform: 'translate(-50%,-50%)',
-            width: '75%',
-            maxWidth: '75%',
+            width: '90%',
+            maxWidth: '90%',
           },
         }}
       >
@@ -164,7 +164,7 @@ function PaymentReconcilationSummarytDialog({
           <div
             style={{ backgroundColor: '#DFEDEF' }}
           >
-            <BenefitConsumptionSearcherModal payrollUuid={payrollDetail.id} reconciledMode />
+            <BenefitConsumptionSearcherModal payrollUuid={payrollDetail.id} payrollDetail={payrollDetail} reconciledMode />
           </div>
         </DialogContent>
         <DialogActions

src/components/payroll/dialogs/PayrollPendingPayrollSummary.js

@@ -151,7 +151,7 @@ function PaymentPendingPayrollPaymentDialog({
           <div
             style={{ backgroundColor: '#DFEDEF' }}
           >
-            <BenefitConsumptionSearcherModal payrollUuid={payrollDetail.id} />
+            <BenefitConsumptionSearcherModal payrollUuid={payrollDetail.id} payrollDetail={payrollDetail} />
           </div>
         </DialogContent>
         <DialogActions

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",
@@ -135,5 +136,10 @@
     "payroll.payrollPaymentFile.error": "Error",
     "payrollPaymentFile.download": "Download",
     "payroll.payrollPaymentFilesSearcher.results": "{totalCount} Files Found",
-    "payroll.PayrollPaymentFilesTab.label": "Payment Files"
+    "payroll.PayrollPaymentFilesTab.label": "Payment Files",
+    "payroll.summary.benefit_error": "Error",
+    "payroll.errorSummary.close": "Close",
+    "payroll.errorSummary.outputGateway": "Output from payment gateway",
+    "payroll.errorSummary.outputGateway.noInfo": " There is no information from payment gateway why invoice is not reconciled. Please contact to administrator for further investigation!",
+    "payroll.errorSummary.title": "Error summary"
 }