From 81266b274456b99fd7a2f6c03ebc261e9b6200ec Mon Sep 17 00:00:00 2001
From: sniedzielski <sniedzielski@soldevelo.com>
Date: Wed, 7 Aug 2024 13:46:54 +0200
Subject: [PATCH] CM-986: added viewing extra data on benefit level

---
 .../payroll/BenefitConsumptionSearcher.js     |   7 +
 .../BenefitConsumptionSearcherModal.js        |   7 +
 .../payroll/dialogs/AdditionalFieldsDialog.js | 131 ++++++++++++++++++
 src/translations/en.json                      |   6 +-
 4 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 src/components/payroll/dialogs/AdditionalFieldsDialog.js

diff --git a/src/components/payroll/BenefitConsumptionSearcher.js b/src/components/payroll/BenefitConsumptionSearcher.js
index 8f78aec..1893acd 100644
--- a/src/components/payroll/BenefitConsumptionSearcher.js
+++ b/src/components/payroll/BenefitConsumptionSearcher.js
@@ -10,6 +10,7 @@ import PhotoCameraOutlinedIcon from '@material-ui/icons/PhotoCameraOutlined';
 import { fetchBenefitConsumptions } from '../../actions';
 import { BENEFIT_CONSUMPTION_STATUS, DEFAULT_PAGE_SIZE, ROWS_PER_PAGE_OPTIONS } from '../../constants';
 import BenefitConsumptionFilter from './BenefitConsumptionFilter';
+import AdditionalFieldsDialog from './dialogs/AdditionalFieldsDialog';
 
 function BenefitConsumptionSearcher({
   fetchBenefitConsumptions,
@@ -39,6 +40,7 @@ function BenefitConsumptionSearcher({
     'benefitConsumption.status',
     'benefitConsumption.payedOnTime',
     'benefitConsumption.paymentDate',
+    '',
   ];
 
   const checkBenefitDueDate = (benefitConsumption) => {
@@ -74,6 +76,11 @@ function BenefitConsumptionSearcher({
         ? ''
         : benefitConsumption?.benefitAttachment[0]?.bill?.datePayed
     ),
+    (benefitConsumption) => (
+      <AdditionalFieldsDialog
+        jsonExt={benefitConsumption?.jsonExt}
+      />
+    ),
   ];
 
   const rowIdentifier = (benefitConsumption) => benefitConsumption.id;
diff --git a/src/components/payroll/BenefitConsumptionSearcherModal.js b/src/components/payroll/BenefitConsumptionSearcherModal.js
index e5cde6d..7e99d94 100644
--- a/src/components/payroll/BenefitConsumptionSearcherModal.js
+++ b/src/components/payroll/BenefitConsumptionSearcherModal.js
@@ -19,6 +19,7 @@ import {
 import BenefitConsumptionFilterModal from './BenefitConsumptionFilterModal';
 import ErrorSummaryModal from './dialogs/ErrorSummaryModal';
 import { mutationLabel } from '../../utils/string-utils';
+import AdditionalFieldsDialog from './dialogs/AdditionalFieldsDialog';
 
 function BenefitConsumptionSearcherModal({
   fetchBenefitAttachments,
@@ -86,6 +87,7 @@ function BenefitConsumptionSearcherModal({
     'benefitConsumption.paymentDate',
     'benefitConsumption.status',
     '',
+    '',
   ];
 
   const confirmDeleteBenefitConsumption = (benefit) => {
@@ -132,6 +134,11 @@ function BenefitConsumptionSearcherModal({
         : benefitAttachment?.bill?.datePayed
     ),
     (benefitAttachment) => benefitAttachment?.benefit?.status,
+    (benefitAttachment) => (
+      <AdditionalFieldsDialog
+        jsonExt={benefitAttachment?.benefit?.jsonExt}
+      />
+    ),
     (benefitAttachment) => (
       <Button
         onClick={() => {}}
diff --git a/src/components/payroll/dialogs/AdditionalFieldsDialog.js b/src/components/payroll/dialogs/AdditionalFieldsDialog.js
new file mode 100644
index 0000000..fd73a25
--- /dev/null
+++ b/src/components/payroll/dialogs/AdditionalFieldsDialog.js
@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { Grid } from '@material-ui/core';
+import { injectIntl } from 'react-intl';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import {
+  formatMessage,
+  renderInputComponent,
+  createFieldsBasedOnJSON,
+} from '@openimis/fe-core';
+import { withTheme, withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { MODULE_NAME } from '../../../constants';
+
+const styles = (theme) => ({
+  item: theme.paper.item,
+});
+
+function AdditionalFieldsDialog({
+  intl,
+  classes,
+  jsonExt,
+}) {
+  // eslint-disable-next-line no-param-reassign
+  if (!jsonExt) jsonExt = '{}';
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  const jsonExtFields = createFieldsBasedOnJSON(JSON.stringify(JSON.parse(jsonExt).extra_info));
+
+  return (
+    <>
+      <Button
+        onClick={handleOpen}
+        variant="outlined"
+        color="#DFEDEF"
+        className={classes.button}
+        style={{
+          border: '0px',
+          marginTop: '6px',
+        }}
+      >
+        {formatMessage(intl, 'payroll', 'payroll.additonalFields.showAdditionalFields')}
+      </Button>
+      <Dialog
+        open={isOpen}
+        onClose={handleClose}
+        PaperProps={{
+          style: {
+            width: 1200,
+            maxWidth: 1200,
+            maxHeight: 900,
+          },
+        }}
+      >
+        <form noValidate>
+          <DialogTitle
+            style={{
+              marginTop: '10px',
+            }}
+          >
+            {formatMessage(intl, 'payroll', 'payroll.additonalFields.label')}
+          </DialogTitle>
+          <DialogContent>
+            <div
+              style={{ backgroundColor: '#DFEDEF', paddingLeft: '10px', paddingBottom: '10px' }}
+            >
+              <Grid container className={classes.item}>
+                {jsonExtFields?.map((jsonExtField) => (
+                  <Grid item xs={6} className={classes.item}>
+                    {renderInputComponent(MODULE_NAME, jsonExtField)}
+                  </Grid>
+                ))}
+              </Grid>
+            </div>
+          </DialogContent>
+          <DialogActions
+            style={{
+              display: 'inline',
+              paddingLeft: '10px',
+              marginTop: '25px',
+              marginBottom: '15px',
+            }}
+          >
+            <div style={{ maxWidth: '1000px' }}>
+              <div style={{ float: 'left' }}>
+                <Button
+                  onClick={handleClose}
+                  variant="outlined"
+                  autoFocus
+                  style={{
+                    margin: '0 16px',
+                    marginBottom: '15px',
+                  }}
+                >
+                  {formatMessage(intl, 'payroll', 'payroll.additonalFields.close')}
+                </Button>
+              </div>
+              <div style={{ float: 'right', paddingRight: '16px' }} />
+            </div>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : [],
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+}, dispatch);
+
+export default injectIntl(
+  withTheme(
+    withStyles(styles)(
+      connect(mapStateToProps, mapDispatchToProps)(AdditionalFieldsDialog),
+    ),
+  ),
+);
diff --git a/src/translations/en.json b/src/translations/en.json
index de2537d..f95a468 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -147,5 +147,9 @@
     "payroll.benefitConsumption.confirm": "Confirm",
     "payroll.benefitConsumption.cancel": "Cancel",
     "payroll.benefitConsumption.delete.confirm.title": "Delete Benefit Consumption",
-    "payroll.benefitConsumption.delete.confirm.message": "Are you sure you want to delete the Benefit Consumption? Once you click confirm, additional approval on the task level is required to permanently delete it."
+    "payroll.benefitConsumption.delete.confirm.message": "Are you sure you want to delete the Benefit Consumption? Once you click confirm, additional approval on the task level is required to permanently delete it.",
+    
+    "payroll.additonalFields.label": "Additional Fields",
+    "payroll.additonalFields.showAdditionalFields": "Show Additional Fields",
+    "payroll.additonalFields.close": "Close"
 }
\ No newline at end of file