openimis · jdolkowski · Dec 1, 2023 · Dec 1, 2023
diff --git a/src/components/AcquirementGenericVoucherForm.js b/src/components/AcquirementGenericVoucherForm.js
@@ -1,8 +1,49 @@
 import React from 'react';
 
-function AcquirementGenericVoucherForm() {
+import { Grid, Divider } from '@material-ui/core';
+
+import { NumberInput, TextInput } from '@openimis/fe-core';
+import { VOUCHER_QUANTITY_THRESHOLD } from '../constants';
+
+function AcquirementGenericVoucherForm({
+  classes, readOnly = false, edited, onEditedChange, formatMessage,
+}) {
   return (
-    <div> AcquirementGenericVoucherForm </div>
+    <>
+      <Grid container direction="row">
+        <Grid item xs={3} className={classes.item}>
+          <NumberInput
+            module="workerVoucher"
+            label="workerVoucher.acquire.vouchersQuantity"
+            value={edited?.quantity}
+            onChange={(quantity) => onEditedChange({ ...edited, quantity })}
+            required
+            max={VOUCHER_QUANTITY_THRESHOLD}
+            readOnly={readOnly}
+          />
+        </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' }} />
+    </>
   );
 }
 

diff --git a/src/components/VoucherAcquirementForm.js b/src/components/VoucherAcquirementForm.js
@@ -15,9 +15,6 @@ export const useStyles = makeStyles((theme) => ({
   paperHeaderTitle: theme.paper.title,
   tableTitle: theme.table.title,
   item: theme.paper.item,
-  fullHeight: {
-    height: '100%',
-  },
 }));
 
 function VoucherAcquirementForm() {

diff --git a/src/components/VoucherAcquirementGenericVoucher.js b/src/components/VoucherAcquirementGenericVoucher.js
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import {
   Divider, Grid, Typography, Button, Tooltip,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 
 import { useModulesManager, useTranslations } from '@openimis/fe-core';
-import { MODULE_NAME } from '../constants';
+import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY, VOUCHER_QUANTITY_THRESHOLD } from '../constants';
 import AcquirementGenericVoucherForm from './AcquirementGenericVoucherForm';
 
 export const useStyles = makeStyles((theme) => ({
@@ -19,9 +19,6 @@ export const useStyles = makeStyles((theme) => ({
   },
   tableTitle: theme.table.title,
   item: theme.paper.item,
-  fullHeight: {
-    height: '100%',
-  },
 }));
 
 function VoucherAcquirementGenericVoucher() {
@@ -30,20 +27,43 @@ function VoucherAcquirementGenericVoucher() {
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
 
+  const canAcquire = (voucherAcquirement) => !voucherAcquirement?.quantity
+  || voucherAcquirement?.quantity > VOUCHER_QUANTITY_THRESHOLD;
+
   const onVoucherAcquire = () => {
     // TODO: Open Payment modal
     console.log(voucherAcquirement);
   };
 
+  useEffect(() => {
+    const storedUserEconomicUnit = localStorage.getItem(USER_ECONOMIC_UNIT_STORAGE_KEY);
+
+    if (storedUserEconomicUnit) {
+      const userEconomicUnit = JSON.parse(storedUserEconomicUnit);
+
+      setVoucherAcquirement((prevState) => ({ ...prevState, employer: userEconomicUnit }));
+    }
+  }, [setVoucherAcquirement]);
+
   return (
     <>
       <Grid xs={12}>
         <Grid container className={classes.paperHeaderTitle}>
           <Typography variant="h5">{formatMessage('workerVoucher.acquirement.method.GENERIC_VOUCHER')}</Typography>
-          <Tooltip title={formatMessage('workerVoucher.acquire.voucher.specificWorkers')}>
-            <Button variant="outlined" style={{ border: 0 }} onClick={onVoucherAcquire}>
-              {formatMessage('workerVoucher.acquire.voucher')}
-            </Button>
+          <Tooltip title={canAcquire(voucherAcquirement)
+            ? formatMessage('workerVoucher.acquire.vouchers.required')
+            : formatMessage('workerVoucher.acquire.vouchers')}
+          >
+            <span>
+              <Button
+                variant="outlined"
+                style={{ border: 0 }}
+                onClick={onVoucherAcquire}
+                disabled={canAcquire(voucherAcquirement)}
+              >
+                <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
+              </Button>
+            </span>
           </Tooltip>
         </Grid>
       </Grid>

diff --git a/src/components/VoucherAcquirementSpecificWorker.js b/src/components/VoucherAcquirementSpecificWorker.js
@@ -19,9 +19,6 @@ export const useStyles = makeStyles((theme) => ({
   },
   tableTitle: theme.table.title,
   item: theme.paper.item,
-  fullHeight: {
-    height: '100%',
-  },
 }));
 
 function VoucherAcquirementSpecificWorker() {
@@ -30,6 +27,9 @@ function VoucherAcquirementSpecificWorker() {
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
 
+  const canAcquire = (voucherAcquirement) => !voucherAcquirement?.workers?.length
+  || !voucherAcquirement?.dateRanges?.length;
+
   const onVoucherAcquire = () => {
     // TODO: Open Payment modal
     console.log(voucherAcquirement);
@@ -50,10 +50,20 @@ function VoucherAcquirementSpecificWorker() {
       <Grid xs={12}>
         <Grid container className={classes.paperHeaderTitle}>
           <Typography variant="h5">{formatMessage('workerVoucher.acquirement.method.SPECIFIC_WORKER')}</Typography>
-          <Tooltip title={formatMessage('workerVoucher.acquire.voucher.specificWorkers')}>
-            <Button variant="outlined" style={{ border: 0 }} onClick={onVoucherAcquire}>
-              {formatMessage('workerVoucher.acquire.voucher')}
-            </Button>
+          <Tooltip title={canAcquire(voucherAcquirement)
+            ? formatMessage('workerVoucher.acquire.vouchers.required')
+            : formatMessage('workerVoucher.acquire.vouchers')}
+          >
+            <span>
+              <Button
+                variant="outlined"
+                style={{ border: 0 }}
+                onClick={onVoucherAcquire}
+                disabled={canAcquire(voucherAcquirement)}
+              >
+                <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
+              </Button>
+            </span>
           </Tooltip>
         </Grid>
       </Grid>

diff --git a/src/constants.js b/src/constants.js
@@ -9,6 +9,7 @@ export const ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
 export const EMPTY_STRING = '';
 export const CONTAINS_LOOKUP = 'Icontains';
 export const WORKER_THRESHOLD = 3;
+export const VOUCHER_QUANTITY_THRESHOLD = 1000;
 export const USER_ECONOMIC_UNIT_STORAGE_KEY = 'userEconomicUnit';
 
 const WORKER_VOUCHER_STATUS = {

diff --git a/src/pickers/WorkerDateRangePicker.js b/src/pickers/WorkerDateRangePicker.js
@@ -21,7 +21,7 @@ import { PublishedComponent, useTranslations, useModulesManager } from '@openimi
 import { MODULE_NAME } from '../constants';
 
 function WorkerDateRangePicker({
-  classes, readOnly, value, onChange, required,
+  classes, readOnly, value, onChange,
 }) {
   const modulesManager = useModulesManager();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
@@ -60,7 +60,6 @@ function WorkerDateRangePicker({
               value={startDate}
               onChange={handleStartDateChange}
               readOnly={readOnly}
-              required={required}
               // NOTE: maxDate cannot be passed if endDate does not exist.
               // Passing any other falsy value will block months manipulation.
               // eslint-disable-next-line react/jsx-props-no-spreading
@@ -75,7 +74,6 @@ function WorkerDateRangePicker({
               value={endDate}
               onChange={handleEndDateChange}
               readOnly={readOnly}
-              required={required}
               // NOTE: minDate cannot be passed if startDate does not exist.
               // Passing any other falsy value will block months manipulation.
               // eslint-disable-next-line react/jsx-props-no-spreading
@@ -84,13 +82,27 @@ function WorkerDateRangePicker({
           </Grid>
         </Grid>
         <Grid className={classes.item}>
-          <Button variant="contained" color="primary" onClick={addDateRange} disabled={!startDate || !endDate}>
-            {formatMessage('workerVoucher.WorkerDateRangePicker.addButton')}
-          </Button>
+          {
+            !startDate || !endDate ? (
+              <Tooltip title={formatMessage('workerVoucher.WorkerDateRangePicker.noDates')}>
+                <span>
+                  <Button variant="contained" color="primary" onClick={addDateRange} disabled={!startDate || !endDate}>
+                    {formatMessage('workerVoucher.WorkerDateRangePicker.addButton')}
+                  </Button>
+                </span>
+              </Tooltip>
+            ) : (
+              <span>
+                <Button variant="contained" color="primary" onClick={addDateRange} disabled={!startDate || !endDate}>
+                  {formatMessage('workerVoucher.WorkerDateRangePicker.addButton')}
+                </Button>
+              </span>
+            )
+          }
         </Grid>
       </Grid>
       <Grid container xs={8} style={{ padding: '0 10px 0 0' }}>
-        <Grid xs={12}>
+        <Grid xs={12} style={{ margin: '0 0 0 12px' }}>
           <Typography variant="subtitle1" style={{ padding: '10px 0 0 0' }}>
             {formatMessage('workerVoucher.WorkerDateRangePicker.dateRanges')}
           </Typography>
@@ -105,7 +117,10 @@ function WorkerDateRangePicker({
                       <DateRangeIcon />
                     </Avatar>
                   </ListItemAvatar>
-                  <ListItemText primary="Date Range" secondary={`${range.start} | ${range.end}`} />
+                  <ListItemText
+                    primary={formatMessage('workerVoucher.WorkerDateRangePicker.dateRange')}
+                    secondary={`${range.start} | ${range.end}`}
+                  />
                   <ListItemSecondaryAction>
                     <Tooltip title={formatMessage('workerVoucher.WorkerDateRangePicker.deleteRange')}>
                       <IconButton

diff --git a/src/pickers/WorkerMultiplePicker.js b/src/pickers/WorkerMultiplePicker.js
@@ -67,7 +67,9 @@ function WorkerMultiplePicker({
         label={formatMessage('workerVoucher.workers')}
         readOnly={readOnly}
         placeholder={formatMessage('workerVoucher.WorkerMultiplePicker.placeholder')}
-        noOptionsText={formatMessage('workerVoucher.WorkerMultiplePicker.noOptions')}
+        noOptionsText={searchString.length < WORKER_THRESHOLD
+          ? formatMessage('workerVoucher.WorkerMultiplePicker.underThreshold')
+          : formatMessage('workerVoucher.WorkerMultiplePicker.noOptions')}
         filterOptions={filtersOptions}
         getOptionLabel={({ chfId, lastName, otherNames }) => `${chfId} ${lastName} ${otherNames}`}
         filterSelectedOptions={filterSelectedOptions}
@@ -85,6 +87,8 @@ function WorkerMultiplePicker({
                   setSearchString('');
                 }
               }}
+              // TODO: Enable when BE will be ready
+              disabled
             />
         )}
           label={formatMessage('workerVoucher.WorkerMultiplePicker.checkbox.label')}

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -33,15 +33,20 @@
   "workerVoucher.acquirement.method.GENERIC_VOUCHER": "Generic Voucher",
   "workerVoucher.acquirement.method.SPECIFIC_WORKER": "Specific Workers",
   "workerVoucher.acquire.voucher": "ACQUIRE VOUCHER",
-  "workerVoucher.acquire.voucher.specificWorkers": "Acquire Vouchers",
+  "workerVoucher.acquire.vouchersQuantity": "Quantity of Vouchers",
+  "workerVoucher.acquire.vouchers": "Acquire Vouchers",
+  "workerVoucher.acquire.vouchers.required": "You need to fill out all required fields to continue",
   "workerVoucher.WorkerMultiplePicker.placeholder": "Search for Worker",
-  "workerVoucher.WorkerMultiplePicker.noOptions": "Enter at least 3 characters of National ID",
+  "workerVoucher.WorkerMultiplePicker.underThreshold": "Enter at least 3 characters of National ID",
+  "workerVoucher.WorkerMultiplePicker.noOptions": "Worker not found",
   "workerVoucher.WorkerMultiplePicker.checkbox.label": "Show only workers I've previously worked with",
   "workerVoucher.WorkerDateRangePicker.startDate": "Start Date",
   "workerVoucher.WorkerDateRangePicker.endDate": "End Date",
   "workerVoucher.WorkerDateRangePicker.addButton": "Add Date Range",
+  "workerVoucher.WorkerDateRangePicker.noDates": "To add a Range you need to fill Start Date and End Date",
   "workerVoucher.WorkerDateRangePicker.deleteRange": "Delete Date Range",
-  "workerVoucher.WorkerDateRangePicker.dateRanges": "Date Ranges:",
+  "workerVoucher.WorkerDateRangePicker.dateRange": "Date Range",
+  "workerVoucher.WorkerDateRangePicker.dateRanges": "Date Ranges: *",
   "workerVoucher.WorkerDateRangePicker.noRanges": "No date ranges registered",
   "workerVoucher.WorkerDateRangePicker.notAvailable": "NOT AVAILABLE"
 }