diff --git a/src/actions.js b/src/actions.js
index 13a0a5d..dd20adf 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -26,6 +26,14 @@ const WORKER_VOUCHER_PROJECTION = (modulesManager) => [
`policyholder ${modulesManager.getProjection('policyHolder.PolicyHolderPicker.projection')}`,
];
+const WORKER_VOUCHER_CHECK_PROJECTION = [
+ 'isExisted',
+ 'isValid',
+ 'assignedDate',
+ 'employerCode',
+ 'employerName',
+];
+
const VOUCHER_PRICE_PROJECTION = () => ['id', 'uuid', 'key', 'value', 'dateValidFrom', 'dateValidTo', 'isDeleted'];
// eslint-disable-next-line no-unused-vars
@@ -646,9 +654,8 @@ export function deleteGroup(economicUnit, groupsToDelete, clientMutationLabel) {
);
}
-export function fetchPublicVoucherDetails(modulesManager, voucherUuid) {
- // TODO | OM-347: Implement the query here after BE changes
+export function fetchPublicVoucherDetails(voucherUuid) {
const queryParams = [`code: "${voucherUuid}"`];
- const payload = formatPageQueryWithCount('workerVoucher', queryParams, WORKER_VOUCHER_PROJECTION(modulesManager));
+ const payload = formatPageQueryWithCount('voucherCheck', queryParams, WORKER_VOUCHER_CHECK_PROJECTION);
return graphql(payload, ACTION_TYPE.REQUEST);
}
diff --git a/src/pages/PublicVoucherDetailsPage.js b/src/pages/PublicVoucherDetailsPage.js
index 07ee638..f6c4063 100644
--- a/src/pages/PublicVoucherDetailsPage.js
+++ b/src/pages/PublicVoucherDetailsPage.js
@@ -8,13 +8,14 @@ import {
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import CheckIcon from '@material-ui/icons/Check';
import ErrorIcon from '@material-ui/icons/Error';
+import WarningIcon from '@material-ui/icons/Warning';
import { makeStyles } from '@material-ui/styles';
import {
decodeId, parseData, useHistory, useModulesManager, useTranslations,
} from '@openimis/fe-core';
import { fetchPublicVoucherDetails } from '../actions';
-import { MODULE_NAME } from '../constants';
+import { EMPTY_STRING, MODULE_NAME } from '../constants';
const useStyles = makeStyles((theme) => ({
root: {
@@ -81,6 +82,11 @@ const useStyles = makeStyles((theme) => ({
border: '1px solid #f44336',
color: '#c62828',
},
+ warningBox: {
+ backgroundColor: '#fff3e0',
+ border: '1px solid #ff9800',
+ color: '#f57c00',
+ },
foundBox: {
backgroundColor: '#e0f7fa',
border: '1px solid #009688',
@@ -96,15 +102,18 @@ export default function PublicVoucherDetailsPage({ match, logo }) {
const { formatMessage, formatMessageWithValues } = useTranslations(MODULE_NAME);
const voucherUuid = match.params.voucher_uuid;
const [voucherSearcher, setVoucherSearcher] = useState({
- isFound: false,
- voucherDetails: {},
+ isExisted: false,
+ isValid: false,
+ assignedDate: EMPTY_STRING,
+ employerCode: EMPTY_STRING,
+ employerName: EMPTY_STRING,
});
useEffect(() => {
const fetchVoucher = async () => {
if (voucherUuid) {
try {
- const response = await dispatch(fetchPublicVoucherDetails(modulesManager, voucherUuid));
+ const response = await dispatch(fetchPublicVoucherDetails(voucherUuid));
const vouchers = parseData(response.payload.data.workerVoucher);
const voucherData = vouchers?.map((voucher) => ({
...voucher,
@@ -138,23 +147,43 @@ export default function PublicVoucherDetailsPage({ match, logo }) {
}
const {
- voucherDetails: { policyholder, assignedDate },
- isFound,
+ isExisted, isValid, assignedDate, employerCode, employerName,
} = voucherSearcher;
+ const renderMessage = () => {
+ if (!isExisted) {
+ return formatMessage('PublicVoucherDetailsPage.voucherNotFound');
+ }
+
+ return formatMessageWithValues(
+ isValid ? 'PublicVoucherDetailsPage.voucherFound' : 'PublicVoucherDetailsPage.invalidVoucherFound',
+ {
+ assignedDate,
+ employerCode,
+ employerName,
+ },
+ );
+ };
+
+ const renderIcon = () => {
+ if (!isExisted) {
+ return ;
+ }
+
+ return isValid ? : ;
+ };
+
return (
: }
- message={
- isFound
- ? formatMessageWithValues('PublicVoucherDetailsPage.voucherFound', {
- assignedDate: {assignedDate},
- employer: {`${policyholder?.code} ${policyholder?.tradeName}`},
- })
- : formatMessage('PublicVoucherDetailsPage.voucherNotFound')
- }
- className={clsx(classes.box, isFound ? classes.foundBox : classes.notFoundBox)}
+ icon={renderIcon()}
+ message={renderMessage()}
+ className={clsx({
+ [classes.box]: true,
+ [classes.notFoundBox]: !isExisted,
+ [classes.foundBox]: isExisted && isValid,
+ [classes.warningBox]: isExisted && !isValid,
+ })}
/>
);
diff --git a/src/translations/en.json b/src/translations/en.json
index f0eb5a7..70c42f4 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -200,5 +200,6 @@
"workerVoucher.PublicVoucherDetailsPage.backButton": "Back",
"workerVoucher.PublicVoucherDetailsPage.noVoucherUuid": " Voucher UUID not provided.",
"workerVoucher.PublicVoucherDetailsPage.voucherNotFound": "Voucher not found.",
+ "workerVoucher.PublicVoucherDetailsPage.invalidVoucherFound": "Voucher is no longer valid. It was valid on the day {assignedDate} at the {employer} employer.",
"workerVoucher.PublicVoucherDetailsPage.voucherFound": "Voucher found. It is valid on the day {assignedDate} at the {employer} employer."
}