diff --git a/src/components/AcquirementGenericVoucherForm.js b/src/components/AcquirementGenericVoucherForm.js
index c5c083a..92aaacb 100644
--- 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 (
-
AcquirementGenericVoucherForm
+ <>
+
+
+ onEditedChange({ ...edited, quantity })}
+ required
+ max={VOUCHER_QUANTITY_THRESHOLD}
+ readOnly={readOnly}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ >
);
}
diff --git a/src/components/VoucherAcquirementForm.js b/src/components/VoucherAcquirementForm.js
index 38c8847..ddff15e 100644
--- 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
index 9dc8ac2..9394ed4 100644
--- a/src/components/VoucherAcquirementGenericVoucher.js
+++ b/src/components/VoucherAcquirementGenericVoucher.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
import {
Divider, Grid, Typography, Button, Tooltip,
@@ -6,7 +6,7 @@ import {
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 (
<>
{formatMessage('workerVoucher.acquirement.method.GENERIC_VOUCHER')}
-
-
+
+
+
+
diff --git a/src/components/VoucherAcquirementSpecificWorker.js b/src/components/VoucherAcquirementSpecificWorker.js
index 4b3bfbe..223d4c8 100644
--- 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() {
{formatMessage('workerVoucher.acquirement.method.SPECIFIC_WORKER')}
-
-
+
+
+
+
diff --git a/src/constants.js b/src/constants.js
index ed924f6..44cace8 100644
--- 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
index df3f092..a6b3954 100644
--- 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({
-
+ {
+ !startDate || !endDate ? (
+
+
+
+
+
+ ) : (
+
+
+
+ )
+ }
-
+
{formatMessage('workerVoucher.WorkerDateRangePicker.dateRanges')}
@@ -105,7 +117,10 @@ function WorkerDateRangePicker({
-
+
`${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
index 8e726ab..b7bcadf 100644
--- 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"
}