OM-134: add bill link to the voucher details page

src/actions.js

@@ -8,6 +8,7 @@ import {
 
 const WORKER_VOUCHER_PROJECTION = (modulesManager) => [
   'id',
+  'billId',
   'code',
   'status',
   'assignedDate',

src/components/VoucherAcquirementSpecificWorker.js

@@ -6,9 +6,11 @@ import {
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 
-import { useModulesManager, useTranslations, journalize } from '@openimis/fe-core';
+import {
+  useModulesManager, useTranslations, journalize, useHistory, historyPush,
+} from '@openimis/fe-core';
 import { specificVoucherValidation, acquireSpecificVoucher } from '../actions';
-import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants';
+import { MODULE_NAME, REF_ROUTE_WORKER_VOUCHERS, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants';
 import AcquirementSpecificWorkerForm from './AcquirementSpecificWorkerForm';
 import VoucherAcquirementPaymentModal from './VoucherAcquirementPaymentModal';
 
@@ -29,6 +31,7 @@ function VoucherAcquirementSpecificWorker() {
   const modulesManager = useModulesManager();
   const dispatch = useDispatch();
   const classes = useStyles();
+  const history = useHistory();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
   const [acquirementSummary, setAcquirementSummary] = useState({});
@@ -68,7 +71,7 @@ function VoucherAcquirementSpecificWorker() {
       throw new Error(`[VOUCHER_ACQUIREMENT_SPECIFIC_VOUCHER]: Acquirement error. ${error}`);
     }
 
-    // TODO: After summary fetch, redirect to the MPay.
+    historyPush(modulesManager, history, REF_ROUTE_WORKER_VOUCHERS);
     setIsPaymentModalOpen((prevState) => !prevState);
   };
 

src/components/VoucherSearcher.js

@@ -138,7 +138,7 @@ function VoucherSearcher({ downloadWorkerVoucher, fetchWorkerVouchers, clearWork
         defaultPageSize={DEFAULT_PAGE_SIZE}
         rowIdentifier={rowIdentifier}
         onDoubleClick={onDoubleClick}
-        exportable
+        exportable={!!workerVouchers?.length}
         exportFetch={downloadWorkerVoucher}
         exportFields={exportConfiguration.exportFields}
         exportFieldsColumns={exportConfiguration.exportFieldsColumns}

src/constants.js

@@ -6,6 +6,8 @@ export const ADMIN_RIGHT = 204004;
 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 DEFAULT_DEBOUNCE_TIME = 800;
 export const DEFAULT_PAGE_SIZE = 10;

src/pages/VoucherDetailsPage.js

@@ -2,16 +2,15 @@ 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,
+  Form, Helmet, useHistory, useModulesManager, useTranslations, historyPush,
 } from '@openimis/fe-core';
 import { clearWorkerVoucher, fetchWorkerVoucher } from '../actions';
-import { EMPTY_STRING, MODULE_NAME, VOUCHER_RIGHT_SEARCH } from '../constants';
+import {
+  EMPTY_STRING, MODULE_NAME, REF_ROUTE_BILL, VOUCHER_RIGHT_SEARCH,
+} from '../constants';
 import VoucherDetailsPanel from '../components/VoucherDetailsPanel';
 
 const useStyles = makeStyles((theme) => ({
@@ -24,7 +23,7 @@ function VoucherDetailsPage({ match }) {
   const modulesManager = useModulesManager();
   const history = useHistory();
   const { formatMessage, formatMessageWithValues } = useTranslations(MODULE_NAME, modulesManager);
-  const rights = useSelector((state) => (state.core?.user?.i_user?.rights ?? []));
+  const rights = useSelector((state) => state.core?.user?.i_user?.rights ?? []);
   const workerVoucherUuid = match?.params?.voucher_uuid;
   const { workerVoucher, fetchingWorkerVoucher, errorWorkerVoucher } = useSelector((state) => state.workerVoucher);
 
@@ -45,6 +44,17 @@ 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}>
@@ -62,6 +72,7 @@ function VoucherDetailsPage({ match }) {
           readOnly
           formatMessage={formatMessage}
           rights={rights}
+          actions={voucherActions}
         />
       </div>
     )

src/translations/en.json

@@ -91,5 +91,6 @@
   "workerVoucher.searcher.title": "{count} Voucher Prices",
   "workerVoucher.searcher.price": "Price",
   "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."
+  "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"
 }