OM-84: voucher acquirement page init, method pciker

src/components/VoucherAcquirementForm.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+import {
+  Divider,
+  Grid,
+  Paper,
+  Typography,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import { useModulesManager, useTranslations } from '@openimis/fe-core';
+import { MODULE_NAME } from '../constants';
+import VoucherAcquirementMethodPicker from '../pickers/VoucherAcquirementMethodPicker';
+
+export const useStyles = makeStyles((theme) => ({
+  paper: { ...theme.paper.paper, margin: '10px 0 0 0' },
+  paperHeaderTitle: theme.paper.title,
+  tableTitle: theme.table.title,
+  item: theme.paper.item,
+  fullHeight: {
+    height: '100%',
+  },
+}));
+
+function VoucherAcquirementForm() {
+  const modulesManager = useModulesManager();
+  const classes = useStyles();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const [acquirementMethod, setAcquirementMethod] = useState(null);
+
+  return (
+    <Grid container>
+      <Grid xs={12}>
+        <Paper className={classes.paper}>
+          <Grid xs={12}>
+            <Grid>
+              <Typography className={classes.paperHeaderTitle}>
+                {formatMessage('workerVoucher.menu.voucherAcquirement')}
+              </Typography>
+            </Grid>
+          </Grid>
+          <Divider />
+          <Grid className={classes.item}>
+            <Typography>
+              {formatMessage('workerVoucher.VoucherAcquirementForm.subtitle')}
+            </Typography>
+          </Grid>
+          <Divider />
+          <Grid container>
+            <Grid item xs={3} className={classes.item}>
+              <VoucherAcquirementMethodPicker
+                label="workerVoucher.acquirement.method"
+                nullLabel="workerVoucher.acquirement.method.NONE"
+                acquirementMethod={acquirementMethod}
+                setAcquirementMethod={setAcquirementMethod}
+                required
+                withNull
+                withLabel
+              />
+            </Grid>
+          </Grid>
+          <Divider style={{ margin: '12px 0' }} />
+        </Paper>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default VoucherAcquirementForm;

src/constants.js

@@ -18,6 +18,15 @@ const WORKER_VOUCHER_STATUS = {
   CLOSED: 'CLOSED',
 };
 
+const ACQUIREMENT_METHOD = {
+  GENERIC_VOUCHER: 'GENERIC_VOUCHER',
+  SPECIFIC_WORKER: 'SPECIFIC_WORKER',
+};
+
+export const ACQUIREMENT_METHOD_LIST = [
+  ACQUIREMENT_METHOD.GENERIC_VOUCHER, ACQUIREMENT_METHOD.SPECIFIC_WORKER,
+];
+
 export const WORKER_VOUCHER_STATUS_LIST = [
   WORKER_VOUCHER_STATUS.AWAITING_PAYMENT,
   WORKER_VOUCHER_STATUS.UNASSIGNED,

src/pages/VoucherAcquirementPage.js

@@ -1,10 +1,29 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { makeStyles } from '@material-ui/styles';
+
+import { Helmet, useModulesManager, useTranslations } from '@openimis/fe-core';
+import { MODULE_NAME, VOUCHER_RIGHT_SEARCH } from '../constants';
+import VoucherAcquirementForm from '../components/VoucherAcquirementForm';
+
+export const useStyles = makeStyles((theme) => ({
+  page: theme.page,
+}));
 
 function VoucherAcquirementPage() {
+  const modulesManager = useModulesManager();
+  const classes = useStyles();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const rights = useSelector((state) => (state.core?.user?.i_user?.rights ?? []));
+
   return (
-    <div>
-      VoucherAcquirementPage
-    </div>
+    rights.includes(VOUCHER_RIGHT_SEARCH) && (
+      <div className={classes.page}>
+        <Helmet title={formatMessage('workerVoucher.menu.voucherAcquirement')} />
+        <VoucherAcquirementForm />
+      </div>
+    )
   );
 }
 

src/pages/VouchersPage.js

@@ -20,7 +20,7 @@ function VouchersPage() {
   return (
     rights.includes(VOUCHER_RIGHT_SEARCH) && (
       <div className={classes.page}>
-        <Helmet title={formatMessage('workerVoucher.vouchers')} />
+        <Helmet title={formatMessage('workerVoucher.menu.voucherList')} />
         <VoucherSearcher />
       </div>
     )

src/pickers/VoucherAcquirementMethodPicker.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { ConstantBasedPicker } from '@openimis/fe-core';
+import { ACQUIREMENT_METHOD_LIST } from '../constants';
+
+function VoucherAcquirementMethodPicker({
+  label,
+  acquirementMethod,
+  setAcquirementMethod,
+  required,
+  withNull,
+  readOnly = false,
+  nullLabel,
+  withLabel,
+}) {
+  return (
+    <ConstantBasedPicker
+      module="workerVoucher"
+      constants={ACQUIREMENT_METHOD_LIST}
+      value={acquirementMethod}
+      onChange={(method) => setAcquirementMethod(method)}
+      label={label}
+      required={required}
+      withNull={withNull}
+      readOnly={readOnly}
+      nullLabel={nullLabel}
+      withLabel={withLabel}
+    />
+  );
+}
+
+export default VoucherAcquirementMethodPicker;

src/translations/en.json

@@ -2,7 +2,6 @@
   "workerVoucher.menu.voucherList": "Voucher List",
   "workerVoucher.menu.voucherAcquirement": "Voucher Acquirement",
   "workerVoucher.menu.voucherAssignment": "Voucher Assignment",
-  "workerVoucher.vouchers": "Vouchers",
   "workerVoucher.searcherResultsTitle": "{workerVouchersTotalCount} Vouchers Found",
   "workerVoucher.code": "Code",
   "workerVoucher.employer": "Employer",
@@ -26,6 +25,10 @@
   "workerVoucher.status.CANCELED": "CANCELED",
   "workerVoucher.status.CLOSED": "CLOSED",
   "workerVoucher.VoucherDetailsPage.title": "Worker Voucher - {code}",
-  "workerVoucher.VoucherDetailsPanel.subtitle": "Voucher's General Information"
-
+  "workerVoucher.VoucherDetailsPanel.subtitle": "Voucher's General Information",
+  "workerVoucher.VoucherAcquirementForm.subtitle": "Select voucher acquirement method",
+  "workerVoucher.acquirement.method": "Acquirement Method",
+  "workerVoucher.acquirement.method.NONE": "None",
+  "workerVoucher.acquirement.method.GENERIC_VOUCHER": "Generic Voucher",
+  "workerVoucher.acquirement.method.SPECIFIC_WORKER": "Specific Voucher"
 }