OM-93: voucher assignment page, minor changes

src/components/AssignmentVoucherForm.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { Grid, Divider } from '@material-ui/core';
+
+import { PublishedComponent, TextInput } from '@openimis/fe-core';
+
+function AssignmentVoucherForm({
+  classes, readOnly = false, edited, onEditedChange, formatMessage,
+}) {
+  return (
+    <>
+      <Grid container direction="row">
+        <Grid item xs={12} className={classes.item}>
+          <PublishedComponent
+            module="workerVoucher"
+            pubRef="workerVoucher.WorkerMultiplePicker"
+            readOnly={readOnly}
+            required
+            classes={classes}
+            value={edited?.workers ?? []}
+            onChange={(workers) => onEditedChange({ ...edited, workers })}
+            previousWorkers
+          />
+        </Grid>
+      </Grid>
+      <Divider style={{ margin: '12px 0' }} />
+      <Grid container xs={12}>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.employer.code"
+            value={edited?.employer?.code ?? formatMessage('workerVoucher.WorkerDateRangePicker.notAvailable')}
+            readOnly
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.employer.tradename"
+            value={edited?.employer?.code ?? formatMessage('workerVoucher.WorkerDateRangePicker.notAvailable')}
+            readOnly
+          />
+        </Grid>
+      </Grid>
+      <Divider style={{ margin: '12px 0' }} />
+      <Grid container xs={12}>
+        <PublishedComponent
+          module="workerVoucher"
+          pubRef="workerVoucher.WorkerDateRangePicker"
+          readOnly={readOnly}
+          required
+          classes={classes}
+          value={edited?.dateRanges ?? []}
+          onChange={(dateRanges) => onEditedChange({ ...edited, dateRanges })}
+        />
+      </Grid>
+      <Divider style={{ margin: '12px 0' }} />
+    </>
+  );
+}
+
+export default AssignmentVoucherForm;

src/components/VoucherAcquirementGenericVoucher.js

@@ -29,7 +29,7 @@ function VoucherAcquirementGenericVoucher() {
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
   const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
 
-  const canAcquire = (voucherAcquirement) => !voucherAcquirement?.quantity
+  const acquirementBlocked = (voucherAcquirement) => !voucherAcquirement?.quantity
   || voucherAcquirement?.quantity > VOUCHER_QUANTITY_THRESHOLD;
 
   const onVoucherAcquire = () => {
@@ -58,16 +58,16 @@ function VoucherAcquirementGenericVoucher() {
       <Grid xs={12}>
         <Grid container className={classes.paperHeaderTitle}>
           <Typography variant="h5">{formatMessage('workerVoucher.acquirement.method.GENERIC_VOUCHER')}</Typography>
-          <Tooltip title={canAcquire(voucherAcquirement)
-            ? formatMessage('workerVoucher.acquire.vouchers.required')
+          <Tooltip title={acquirementBlocked(voucherAcquirement)
+            ? formatMessage('workerVoucher.vouchers.required')
             : formatMessage('workerVoucher.acquire.vouchers')}
           >
             <span>
               <Button
                 variant="outlined"
                 style={{ border: 0 }}
                 onClick={onVoucherAcquire}
-                disabled={canAcquire(voucherAcquirement)}
+                disabled={acquirementBlocked(voucherAcquirement)}
               >
                 <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
               </Button>

src/components/VoucherAcquirementPaymentModal.js

@@ -98,7 +98,7 @@ function VoucherAcquirementPaymentModal({
       <Divider style={{ margin: '12px 0' }} />
       <DialogActions>
         <Button onClick={onClose} className={classes.secondaryButton}>
-          {formatMessage('workerVoucher.VoucherAcquirementPaymentModal.close')}
+          {formatMessage('workerVoucher.close')}
         </Button>
         {acquireButtonDisabled ? (
           <Tooltip title={formatMessage('workerVoucher.VoucherAcquirementPaymentModal.confirm.tooltip')}>

src/components/VoucherAcquirementSpecificWorker.js

@@ -29,7 +29,7 @@ function VoucherAcquirementSpecificWorker() {
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
   const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
 
-  const canAcquire = (voucherAcquirement) => !voucherAcquirement?.workers?.length
+  const acquirementBlocked = (voucherAcquirement) => !voucherAcquirement?.workers?.length
   || !voucherAcquirement?.dateRanges?.length;
 
   const onVoucherAcquire = () => {
@@ -58,16 +58,16 @@ function VoucherAcquirementSpecificWorker() {
       <Grid xs={12}>
         <Grid container className={classes.paperHeaderTitle}>
           <Typography variant="h5">{formatMessage('workerVoucher.acquirement.method.SPECIFIC_WORKER')}</Typography>
-          <Tooltip title={canAcquire(voucherAcquirement)
-            ? formatMessage('workerVoucher.acquire.vouchers.required')
+          <Tooltip title={acquirementBlocked(voucherAcquirement)
+            ? formatMessage('workerVoucher.vouchers.required')
             : formatMessage('workerVoucher.acquire.vouchers')}
           >
             <span>
               <Button
                 variant="outlined"
                 style={{ border: 0 }}
                 onClick={onVoucherAcquire}
-                disabled={canAcquire(voucherAcquirement)}
+                disabled={acquirementBlocked(voucherAcquirement)}
               >
                 <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
               </Button>

src/components/VoucherAssignmentConfirmModal.js

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  CircularProgress,
+  Grid,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  Tooltip,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import { useTranslations, useModulesManager, NumberInput } from '@openimis/fe-core';
+import { MODULE_NAME } from '../constants';
+
+export const useStyles = makeStyles((theme) => ({
+  primaryButton: theme.dialog.primaryButton,
+  secondaryButton: theme.dialog.secondaryButton,
+  item: theme.paper.item,
+}));
+
+function VoucherAssignmentConfirmModal({
+  openState,
+  onClose,
+  onConfirm,
+  isLoading,
+  error,
+  assignmentSummary,
+  readOnly = true,
+}) {
+  const classes = useStyles();
+  const modulesManager = useModulesManager();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const [acceptAssignment, setAcceptAssignment] = useState(false);
+  const acquireButtonDisabled = !acceptAssignment || isLoading || error;
+
+  const renderContent = () => {
+    if (error) {
+      return <Typography color="error">{error}</Typography>;
+    }
+
+    if (isLoading) {
+      return <CircularProgress />;
+    }
+
+    return (
+      <Grid container>
+        <Grid xs={4} className={classes.item}>
+          <NumberInput
+            module="workerVoucher"
+            label="workerVoucher.acquire.vouchersQuantity"
+            value={assignmentSummary?.vouchers}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <FormControlLabel
+          style={{ margin: '12px 0 0 0' }}
+          control={(
+            <Checkbox
+              color="primary"
+              checked={acceptAssignment}
+              onChange={(e) => setAcceptAssignment(e.target.checked)}
+            />
+          )}
+          label={formatMessage('workerVoucher.assign.confirmation')}
+        />
+      </Grid>
+    );
+  };
+
+  return (
+    <Dialog open={openState} onClose={onClose}>
+      <DialogTitle>{formatMessage('workerVoucher.VoucherAssignmentConfirmModal.title')}</DialogTitle>
+      <Divider />
+      <DialogContent>{renderContent()}</DialogContent>
+      <Divider style={{ margin: '12px 0' }} />
+      <DialogActions>
+        <Button onClick={onClose} className={classes.secondaryButton}>
+          {formatMessage('workerVoucher.close')}
+        </Button>
+        {acquireButtonDisabled ? (
+          <Tooltip title={formatMessage('workerVoucher.VoucherAssignmentConfirmModal.confirm.tooltip')}>
+            <span>
+              <Button onClick={onConfirm} autoFocus className={classes.primaryButton} disabled={acquireButtonDisabled}>
+                {formatMessage('workerVoucher.VoucherAssignmentConfirmModal.confirm')}
+              </Button>
+            </span>
+          </Tooltip>
+        ) : (
+          <Button onClick={onConfirm} autoFocus className={classes.primaryButton} disabled={acquireButtonDisabled}>
+            {formatMessage('workerVoucher.VoucherAssignmentConfirmModal.confirm')}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default VoucherAssignmentConfirmModal;

src/components/VoucherAssignmentForm.js

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+
+import {
+  Divider, Grid, Paper, Typography, Button, Tooltip,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import { useModulesManager, useTranslations } from '@openimis/fe-core';
+import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants';
+import AssignmentVoucherForm from './AssignmentVoucherForm';
+import VoucherAssignmentConfirmModal from './VoucherAssignmentConfirmModal';
+
+export const useStyles = makeStyles((theme) => ({
+  paper: { ...theme.paper.paper, margin: '10px 0 0 0' },
+  paperHeaderTitle: {
+    ...theme.paper.title,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  tableTitle: theme.table.title,
+  item: theme.paper.item,
+}));
+
+function VoucherAssignmentForm() {
+  const modulesManager = useModulesManager();
+  const classes = useStyles();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const [voucherAssignment, setVoucherAssignment] = useState({});
+  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
+
+  const assignmentBlocked = (voucherAssignment) => !voucherAssignment?.workers?.length
+  || !voucherAssignment?.dateRanges?.length;
+
+  const onVoucherAssign = () => {
+    setIsConfirmationModalOpen((prevState) => !prevState);
+    // TODO: Fetch info about assignment (assignmentSummary)
+  };
+
+  const onAssignmentConfirmation = () => {
+    // TODO: After summary fetch, assign vouchers to the Workers.
+    setIsConfirmationModalOpen((prevState) => !prevState);
+    console.log('Assign Vouchers to the Workers');
+  };
+
+  useEffect(() => {
+    const storedUserEconomicUnit = localStorage.getItem(USER_ECONOMIC_UNIT_STORAGE_KEY);
+
+    if (storedUserEconomicUnit) {
+      const userEconomicUnit = JSON.parse(storedUserEconomicUnit);
+
+      setVoucherAssignment((prevState) => ({ ...prevState, employer: userEconomicUnit }));
+    }
+  }, [setVoucherAssignment]);
+
+  return (
+    <Grid container>
+      <Grid xs={12}>
+        <Paper className={classes.paper}>
+          <Grid xs={12}>
+            <Grid container className={classes.paperHeaderTitle}>
+              <Typography variant="h5">{formatMessage('workerVoucher.menu.voucherAssignment')}</Typography>
+              <Tooltip
+                title={
+                  assignmentBlocked(voucherAssignment)
+                    ? formatMessage('workerVoucher.vouchers.required')
+                    : formatMessage('workerVoucher.assign.vouchers')
+                }
+              >
+                <span>
+                  <Button
+                    variant="outlined"
+                    style={{ border: 0 }}
+                    onClick={onVoucherAssign}
+                    disabled={assignmentBlocked(voucherAssignment)}
+                  >
+                    <Typography variant="subtitle1">{formatMessage('workerVoucher.assign.voucher')}</Typography>
+                  </Button>
+                </span>
+              </Tooltip>
+            </Grid>
+          </Grid>
+          <Divider />
+          <AssignmentVoucherForm
+            edited={voucherAssignment}
+            onEditedChange={setVoucherAssignment}
+            formatMessage={formatMessage}
+            classes={classes}
+          />
+          <VoucherAssignmentConfirmModal
+            openState={isConfirmationModalOpen}
+            onClose={() => setIsConfirmationModalOpen((prevState) => !prevState)}
+            onConfirm={onAssignmentConfirmation}
+            // TODO: Change after BE implementation
+            isLoading={false}
+            error={false}
+            assignmentSummary={{
+              vouchers: 100,
+            }}
+          />
+        </Paper>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default VoucherAssignmentForm;

src/constants.js

@@ -1,4 +1,5 @@
 export const VOUCHER_RIGHT_SEARCH = 204001;
+export const EMPLOYER_RIGHT_SEARCH = 204001;
 export const MODULE_NAME = 'workerVoucher';
 
 export const REF_ROUTE_WORKER_VOUCHER = 'workerVoucher.route.workerVoucher';

src/pages/VoucherAssignmentPage.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 { EMPLOYER_RIGHT_SEARCH, MODULE_NAME } from '../constants';
+import VoucherAssignmentForm from '../components/VoucherAssignmentForm';
+
+export const useStyles = makeStyles((theme) => ({
+  page: theme.page,
+}));
 
 function VoucherAssignmentPage() {
+  const modulesManager = useModulesManager();
+  const classes = useStyles();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const rights = useSelector((state) => state.core?.user?.i_user?.rights ?? []);
+
   return (
-    <div>
-      VoucherAssignmentPage
-    </div>
+    rights.includes(EMPLOYER_RIGHT_SEARCH) && (
+      <div className={classes.page}>
+        <Helmet title={formatMessage('workerVoucher.menu.voucherAssignment')} />
+        <VoucherAssignmentForm />
+      </div>
+    )
   );
 }