OM-221: add voucher details printing functionality

package.json

@@ -43,5 +43,7 @@
   "files": [
     "dist"
   ],
-  "dependencies": {}
+  "dependencies": {
+    "react-to-print": "^2.15.1"
+  }
 }

src/components/VoucherDetailsPanel.js

@@ -1,39 +1,90 @@
-import React from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useRef } from 'react';
+import { useReactToPrint } from 'react-to-print';
 
-import { Divider, Grid, Typography } from '@material-ui/core';
+import {
+  Divider, Grid, Typography, Button,
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import PrintIcon from '@material-ui/icons/Print';
+import ReceiptIcon from '@material-ui/icons/Receipt';
 
-import { FormattedMessage } from '@openimis/fe-core';
+import {
+  FormattedMessage, useModulesManager, useHistory, historyPush,
+} from '@openimis/fe-core';
+import { REF_ROUTE_BILL, VOUCHER_RIGHT_SEARCH } from '../constants';
 import VoucherDetailsEmployer from './VoucherDetailsEmployer';
 import VoucherDetailsVoucher from './VoucherDetailsVoucher';
 import VoucherDetailsWorker from './VoucherDetailsWorker';
+import VoucherDetailsPrintTemplate from './VoucherDetailsPrintTemplate';
 
 const useStyles = makeStyles((theme) => ({
   tableTitle: theme.table.title,
   item: theme.paper.item,
   fullHeight: {
     height: '100%',
   },
+  actionButtons: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '4px',
+  },
 }));
 
-function VoucherDetailsPanel({ workerVoucher, readOnly = true, formatMessage }) {
+function VoucherDetailsPanel({
+  workerVoucher, readOnly = true, formatMessage, rights, logo,
+}) {
+  const modulesManager = useModulesManager();
+  const history = useHistory();
+  const voucherPrintTemplateRef = useRef(null);
   const classes = useStyles();
 
+  const handlePrint = useReactToPrint({
+    documentTitle: `${workerVoucher.code}`,
+  });
+
+  const redirectToTheLinkedBill = () => historyPush(modulesManager, history, REF_ROUTE_BILL, [workerVoucher.billId]);
+
   return (
-    <>
+    <div>
       <Grid container className={classes.tableTitle}>
         <Grid
           container
-          align="start"
-          justify="center"
-          direction="column"
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
           className={classes.fullHeight}
         >
           <Grid item>
             <Typography>
               <FormattedMessage module="workerVoucher" id="workerVoucher.VoucherDetailsPanel.subtitle" />
             </Typography>
           </Grid>
+          {rights.includes(VOUCHER_RIGHT_SEARCH) && (
+            <Grid item className={classes.actionButtons}>
+              <Button
+                size="small"
+                variant="contained"
+                color="primary"
+                startIcon={<PrintIcon />}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handlePrint(null, () => voucherPrintTemplateRef.current);
+                }}
+              >
+                <Typography variant="subtitle1">{formatMessage('workerVoucher.printVoucher')}</Typography>
+              </Button>
+              <Button
+                size="small"
+                variant="contained"
+                color="primary"
+                startIcon={<ReceiptIcon />}
+                onClick={redirectToTheLinkedBill}
+              >
+                <Typography variant="subtitle1">{formatMessage('workerVoucher.navigateToTheBill.tooltip')}</Typography>
+              </Button>
+            </Grid>
+          )}
         </Grid>
       </Grid>
       <Divider />
@@ -43,17 +94,12 @@ function VoucherDetailsPanel({ workerVoucher, readOnly = true, formatMessage })
         classes={classes}
         formatMessage={formatMessage}
       />
-      <VoucherDetailsWorker
-        workerVoucher={workerVoucher}
-        readOnly={readOnly}
-        classes={classes}
-      />
-      <VoucherDetailsEmployer
-        workerVoucher={workerVoucher}
-        readOnly={readOnly}
-        classes={classes}
-      />
-    </>
+      <VoucherDetailsWorker workerVoucher={workerVoucher} readOnly={readOnly} classes={classes} />
+      <VoucherDetailsEmployer workerVoucher={workerVoucher} readOnly={readOnly} classes={classes} />
+      <div style={{ display: 'none' }}>
+        <VoucherDetailsPrintTemplate ref={voucherPrintTemplateRef} logo={logo} workerVoucher={workerVoucher} />
+      </div>
+    </div>
   );
 }
 

src/components/VoucherDetailsPrintTemplate.js

@@ -0,0 +1,140 @@
+import React, {
+  forwardRef, useState, useEffect, useMemo,
+} from 'react';
+import { useDispatch } from 'react-redux';
+
+import { Divider } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import { useTranslations, useModulesManager, formatDateFromISO } from '@openimis/fe-core';
+import { MODULE_NAME, REF_GET_BILL_LINE_ITEM } from '../constants';
+
+const useStyles = makeStyles(() => ({
+  topHeader: {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+    width: '100%',
+
+    '& img': {
+      minWidth: '250px',
+      maxWidth: '300px',
+      width: 'auto',
+      height: 'auto',
+    },
+  },
+  printContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '20px',
+    fontWeight: '500',
+  },
+  date: {
+    fontSize: '16px',
+  },
+  detailsContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12px',
+    width: '100%',
+  },
+  detailRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '4px',
+  },
+  detailName: {
+    fontWeight: '600',
+    fontSize: '16px',
+    textTransform: 'uppercase',
+  },
+  detailValue: {
+    fontWeight: '500',
+    backgroundColor: '#f5f5f5',
+    padding: '6px',
+    borderRadius: '8px',
+    fontSize: '15px',
+  },
+  containerPadding: {
+    padding: '32px',
+  },
+  dividerMargin: {
+    margin: '12px 0',
+  },
+}));
+
+const VoucherDetailsPrintTemplate = forwardRef(({ workerVoucher, logo }, ref) => {
+  const dispatch = useDispatch();
+  const classes = useStyles();
+  const modulesManager = useModulesManager();
+  const { formatMessage } = useTranslations(modulesManager, MODULE_NAME);
+
+  const getBillLineItem = useMemo(() => modulesManager.getRef(REF_GET_BILL_LINE_ITEM), [modulesManager]);
+  const [voucherValue, setVoucherValue] = useState(null);
+
+  useEffect(() => {
+    const fetchVoucherValue = async () => {
+      try {
+        const value = await dispatch(getBillLineItem([`lineId: "${workerVoucher.uuid}"`])).then(
+          (response) => response?.payload?.data?.billItem?.edges?.[0]?.node?.unitPrice,
+        );
+
+        setVoucherValue(value);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching voucher value:', error);
+      }
+    };
+
+    fetchVoucherValue();
+  }, [dispatch, getBillLineItem, workerVoucher.uuid]);
+
+  return (
+    <div ref={ref} className={classes.containerPadding}>
+      <div className={classes.topHeader}>
+        <img src={logo} alt="Logo of Ministerul Muncii și Protecţiei Sociale al Republicii Moldova" />
+      </div>
+      <Divider className={classes.dividerMargin} />
+      <div className={classes.detailsContainer}>
+        <div className={classes.detailRow}>
+          <p className={classes.detailName}>{formatMessage('workerVoucher.template.voucherCode')}</p>
+          <p className={classes.detailValue}>{workerVoucher.code}</p>
+        </div>
+        <div className={classes.detailRow}>
+          <p className={classes.detailName}>{formatMessage('workerVoucher.template.status')}</p>
+          <p className={classes.detailValue}>{workerVoucher.status}</p>
+        </div>
+        <div className={classes.detailRow}>
+          <p className={classes.detailName}>{formatMessage('workerVoucher.template.worker')}</p>
+          <p className={classes.detailValue}>
+            {`${workerVoucher.insuree?.otherNames} ${workerVoucher.insuree?.lastName}`}
+          </p>
+        </div>
+        <div className={classes.detailRow}>
+          <p className={classes.detailName}>{formatMessage('workerVoucher.template.employer')}</p>
+          <p className={classes.detailValue}>
+            {`${workerVoucher.policyholder?.code} ${workerVoucher.policyholder?.tradeName}`}
+          </p>
+        </div>
+        <div className={classes.detailRow}>
+          <p className={classes.detailName}>{formatMessage('workerVoucher.template.createdDate')}</p>
+          <p className={classes.detailValue}>{formatDateFromISO(modulesManager, null, workerVoucher.dateCreated)}</p>
+        </div>
+        <div className={classes.detailRow}>
+          <p className={classes.detailName}>{formatMessage('workerVoucher.template.assignedDate')}</p>
+          <p className={classes.detailValue}>{formatDateFromISO(modulesManager, null, workerVoucher.assignedDate)}</p>
+        </div>
+        <div className={classes.detailRow}>
+          <p className={classes.detailName}>{formatMessage('workerVoucher.template.valueOfVoucher')}</p>
+          <p className={classes.detailValue}>{`${formatMessage('currency')} ${voucherValue}`}</p>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default VoucherDetailsPrintTemplate;

src/constants.js

@@ -8,6 +8,7 @@ export const MODULE_NAME = 'workerVoucher';
 export const REF_ROUTE_WORKER_VOUCHER = 'workerVoucher.route.workerVoucher';
 export const REF_ROUTE_WORKER_VOUCHERS = 'workerVoucher.route.workerVouchers';
 export const REF_ROUTE_BILL = 'bill.route.bill';
+export const REF_GET_BILL_LINE_ITEM = 'bill.action.fetchBillLineItems';
 export const ECONOMIC_UNIT_STORAGE_KEY = 'userEconomicUnit';
 
 export const MPAY_BILL_URL = '/msystems/mpay_payment/';

src/pages/VoucherDetailsPage.js

@@ -2,22 +2,21 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { makeStyles } from '@material-ui/styles';
-import ReceiptIcon from '@material-ui/icons/Receipt';
 
 import {
-  Form, Helmet, useHistory, useModulesManager, useTranslations, historyPush,
+  Form, Helmet, useHistory, useModulesManager, useTranslations,
 } from '@openimis/fe-core';
 import { clearWorkerVoucher, fetchWorkerVoucher } from '../actions';
 import {
-  EMPTY_STRING, MODULE_NAME, REF_ROUTE_BILL, VOUCHER_RIGHT_SEARCH,
+  EMPTY_STRING, MODULE_NAME, VOUCHER_RIGHT_SEARCH,
 } from '../constants';
 import VoucherDetailsPanel from '../components/VoucherDetailsPanel';
 
 const useStyles = makeStyles((theme) => ({
   page: theme.page,
 }));
 
-function VoucherDetailsPage({ match }) {
+function VoucherDetailsPage({ match, logo }) {
   const classes = useStyles();
   const dispatch = useDispatch();
   const modulesManager = useModulesManager();
@@ -44,17 +43,6 @@ function VoucherDetailsPage({ match }) {
     return () => dispatch(clearWorkerVoucher());
   }, [workerVoucherUuid]);
 
-  const redirectToTheLinkedBill = () => historyPush(modulesManager, history, REF_ROUTE_BILL, [workerVoucher.billId]);
-
-  const voucherActions = [
-    {
-      doIt: redirectToTheLinkedBill,
-      icon: <ReceiptIcon />,
-      disabled: !workerVoucher?.billId,
-      tooltip: formatMessage('navigateToTheBill.tooltip'),
-    },
-  ];
-
   return (
     rights.includes(VOUCHER_RIGHT_SEARCH) && (
       <div className={classes.page}>
@@ -70,9 +58,9 @@ function VoucherDetailsPage({ match }) {
           back={() => history.goBack()}
           HeadPanel={VoucherDetailsPanel}
           readOnly
+          logo={logo}
           formatMessage={formatMessage}
           rights={rights}
-          actions={voucherActions}
         />
       </div>
     )

src/translations/en.json

@@ -93,5 +93,14 @@
   "workerVoucher.filter.date": "Date",
   "business_config.validation.date_range_overlap": "Unable to create the voucher price for the specified period. There is an existing voucher price defined within the selected date range.",
   "workerVoucher.navigateToTheBill.tooltip": "Bill",
-  "workerVoucher.MPayBillButton": "Pay with MPay"
+  "workerVoucher.MPayBillButton": "Pay with MPay",
+  "workerVoucher.printVoucher": "Print",
+  "workerVoucher.printVoucher.title": "Voucher {voucherCode}",
+  "workerVoucher.template.voucherCode": "Voucher Code",
+  "workerVoucher.template.status": "Status",
+  "workerVoucher.template.worker": "Worker",
+  "workerVoucher.template.employer": "Employer",
+  "workerVoucher.template.createdDate": "Created Date",
+  "workerVoucher.template.assignedDate": "Assigned Date",
+  "workerVoucher.template.valueOfVoucher": "Value of voucher"
 }