Skip to content

Commit

Permalink
OM-94: assignment adjustments, journalize init (#13)
Browse files Browse the repository at this point in the history 
* OM-92: handle acquirement for generic voucher

* OM-92: adjust payment modal in specific scenario

* OM-92: sonar cloud fix

* OM-94: assignment adjustments, journalize init
  • Loading branch information
@olewandowski1
olewandowski1 authored Dec 14, 2023
1 parent 90b5c7b commit 1f74a5e
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 43 deletions.
45 changes: 45 additions & 0 deletions src/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,48 @@ export function acquireSpecificVoucher(phCode, workers, dateRanges, clientMutati
},
);
}

export function voucherAssignmentValidation(phCode, workers, dateRanges) {
const workersNationalIDs = workers?.map((worker) => worker?.chfId) ?? [];

return graphqlWithVariables(
`
query voucherAssignmentValidation($phCode: ID!, $workers: [ID], $dateRanges: [DateRangeInclusiveInputType]) {
assignVouchersValidation(
economicUnitCode: $phCode
workers: $workers
dateRanges: $dateRanges
) {
count
price
pricePerVoucher
}
}
`,
{ phCode, workers: workersNationalIDs, dateRanges },
);
}

export function assignVouchers(phCode, workers, dateRanges, clientMutationLabel) {
const formattedDateRanges = formatGraphQLDateRanges(dateRanges ?? []);
const formattedWorkers = formatGraphQLStringArray(workers?.map((worker) => worker?.chfId) ?? []);

const mutationInput = `
${phCode ? `economicUnitCode: "${phCode}"` : ''}
${workers ? `workers: ${formattedWorkers}` : ''}
${dateRanges ? `dateRanges: ${formattedDateRanges}` : ''}
`;
const mutation = formatMutation('assignVouchers', mutationInput, clientMutationLabel);
const requestedDateTime = new Date();

return graphql(
mutation.payload,
[REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.ASSIGN_VOUCHERS), ERROR(ACTION_TYPE.MUTATION)],
{
actionType: ACTION_TYPE.ASSIGN_VOUCHERS,
clientMutationId: mutation.clientMutationId,
clientMutationLabel,
requestedDateTime,
},
);
}
2 changes: 1 addition & 1 deletion src/components/AcquirementGenericVoucherForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function AcquirementGenericVoucherForm({
<Grid item xs={3} className={classes.item}>
<NumberInput
module="workerVoucher"
label="workerVoucher.acquire.vouchersQuantity"
label="workerVoucher.vouchersQuantity"
value={edited?.quantity}
onChange={(quantity) => onEditedChange({ ...edited, quantity })}
required
Expand Down
21 changes: 16 additions & 5 deletions src/components/VoucherAcquirementGenericVoucher.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import React, { useState, useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import {
Divider, Grid, Typography, Button, Tooltip,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

import { useModulesManager, useTranslations } from '@openimis/fe-core';
import { useModulesManager, useTranslations, journalize } from '@openimis/fe-core';
import { acquireGenericVoucher, genericVoucherValidation } from '../actions';
import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY, VOUCHER_QUANTITY_THRESHOLD } from '../constants';
import AcquirementGenericVoucherForm from './AcquirementGenericVoucherForm';
import VoucherAcquirementPaymentModal from './VoucherAcquirementPaymentModal';
import { acquireGenericVoucher, genericVoucherValidation } from '../actions';

export const useStyles = makeStyles((theme) => ({
paper: { ...theme.paper.paper, margin: '10px 0 0 0' },
Expand All @@ -25,6 +25,7 @@ export const useStyles = makeStyles((theme) => ({
}));

function VoucherAcquirementGenericVoucher() {
const prevSubmittingMutationRef = useRef();
const modulesManager = useModulesManager();
const dispatch = useDispatch();
const classes = useStyles();
Expand All @@ -33,6 +34,7 @@ function VoucherAcquirementGenericVoucher() {
const [acquirementSummary, setAcquirementSummary] = useState({});
const [acquirementSummaryLoading, setAcquirementSummaryLoading] = useState(false);
const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
const { mutation, submittingMutation } = useSelector((state) => state.workerVoucher);

const acquirementBlocked = (voucherAcquirement) => !voucherAcquirement?.quantity
|| voucherAcquirement?.quantity > VOUCHER_QUANTITY_THRESHOLD;
Expand Down Expand Up @@ -66,9 +68,18 @@ function VoucherAcquirementGenericVoucher() {

// TODO: Redirect to the MPay.
setIsPaymentModalOpen((prevState) => !prevState);
console.log('Redirect to the MPay...');
};

useEffect(() => {
if (prevSubmittingMutationRef.current && !submittingMutation) {
dispatch(journalize(mutation));
}
}, [submittingMutation]);

useEffect(() => {
prevSubmittingMutationRef.current = submittingMutation;
});

useEffect(() => {
const storedUserEconomicUnit = localStorage.getItem(USER_ECONOMIC_UNIT_STORAGE_KEY);

Expand Down
16 changes: 9 additions & 7 deletions src/components/VoucherAcquirementPaymentModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
import { makeStyles } from '@material-ui/styles';

import {
useTranslations, useModulesManager, NumberInput, AmountInput,
useTranslations, useModulesManager, AmountInput,
} from '@openimis/fe-core';
import { MODULE_NAME } from '../constants';

Expand Down Expand Up @@ -60,25 +60,27 @@ function VoucherAcquirementPaymentModal({
<Grid xs={4} className={classes.item}>
<AmountInput
module="workerVoucher"
label="workerVoucher.acquire.pricePerVoucher"
value={acquirementSummary?.data?.[type]?.pricePerVoucher}
label="workerVoucher.vouchersQuantity"
value={acquirementSummary?.data?.[type]?.count}
readOnly={readOnly}
/>
</Grid>
<Grid xs={4} className={classes.item}>
<NumberInput
<AmountInput
module="workerVoucher"
label="workerVoucher.acquire.vouchersQuantity"
value={acquirementSummary?.data?.[type]?.count}
label="workerVoucher.pricePerVoucher"
value={acquirementSummary?.data?.[type]?.pricePerVoucher}
readOnly={readOnly}
displayZero
/>
</Grid>
<Grid xs={4} className={classes.item}>
<AmountInput
module="workerVoucher"
label="workerVoucher.acquire.toBePaid"
label="workerVoucher.toBePaid"
value={acquirementSummary?.data?.[type]?.price}
readOnly={readOnly}
displayZero
/>
</Grid>
<FormControlLabel
Expand Down
21 changes: 16 additions & 5 deletions src/components/VoucherAcquirementSpecificWorker.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import React, { useState, useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import {
Divider, Grid, Typography, Button, Tooltip,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

import { useModulesManager, useTranslations } from '@openimis/fe-core';
import { useModulesManager, useTranslations, journalize } from '@openimis/fe-core';
import { specificVoucherValidation, acquireSpecificVoucher } from '../actions';
import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants';
import AcquirementSpecificWorkerForm from './AcquirementSpecificWorkerForm';
import VoucherAcquirementPaymentModal from './VoucherAcquirementPaymentModal';
import { specificVoucherValidation, acquireSpecificVoucher } from '../actions';

export const useStyles = makeStyles((theme) => ({
paper: { ...theme.paper.paper, margin: '10px 0 0 0' },
Expand All @@ -25,6 +25,7 @@ export const useStyles = makeStyles((theme) => ({
}));

function VoucherAcquirementSpecificWorker() {
const prevSubmittingMutationRef = useRef();
const modulesManager = useModulesManager();
const dispatch = useDispatch();
const classes = useStyles();
Expand All @@ -33,6 +34,7 @@ function VoucherAcquirementSpecificWorker() {
const [acquirementSummary, setAcquirementSummary] = useState({});
const [acquirementSummaryLoading, setAcquirementSummaryLoading] = useState(false);
const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
const { mutation, submittingMutation } = useSelector((state) => state.workerVoucher);

const acquirementBlocked = (voucherAcquirement) => !voucherAcquirement?.workers?.length
|| !voucherAcquirement?.dateRanges?.length;
Expand Down Expand Up @@ -68,9 +70,18 @@ function VoucherAcquirementSpecificWorker() {

// TODO: After summary fetch, redirect to the MPay.
setIsPaymentModalOpen((prevState) => !prevState);
console.log('Redirect to the MPay...');
};

useEffect(() => {
if (prevSubmittingMutationRef.current && !submittingMutation) {
dispatch(journalize(mutation));
}
}, [submittingMutation]);

useEffect(() => {
prevSubmittingMutationRef.current = submittingMutation;
});

useEffect(() => {
const storedUserEconomicUnit = localStorage.getItem(USER_ECONOMIC_UNIT_STORAGE_KEY);

Expand Down
41 changes: 32 additions & 9 deletions src/components/VoucherAssignmentConfirmModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ import {
} from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

import { useTranslations, useModulesManager, NumberInput } from '@openimis/fe-core';
import {
useTranslations, useModulesManager, NumberInput, AmountInput,
} from '@openimis/fe-core';
import { MODULE_NAME } from '../constants';

export const useStyles = makeStyles((theme) => ({
Expand All @@ -30,33 +32,54 @@ function VoucherAssignmentConfirmModal({
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 acquireButtonDisabled = !acceptAssignment || isLoading || assignmentSummary?.errors;

const renderContent = () => {
if (error) {
return <Typography color="error">{error}</Typography>;
}

if (isLoading) {
return <CircularProgress />;
}

if (assignmentSummary?.errors) {
return (
<Typography color="error">
{assignmentSummary?.errors?.map(({ message }, index) => `${index + 1}. ${message}.`)}
</Typography>
);
}

return (
<Grid container>
<Grid xs={4} className={classes.item}>
<NumberInput
module="workerVoucher"
label="workerVoucher.acquire.vouchersQuantity"
value={assignmentSummary?.vouchers}
label="workerVoucher.vouchersQuantity"
value={assignmentSummary?.data?.assignVouchersValidation?.count}
readOnly={readOnly}
/>
</Grid>
<Grid xs={4} className={classes.item}>
<AmountInput
module="workerVoucher"
label="workerVoucher.pricePerVoucher"
value={assignmentSummary?.data?.assignVouchersValidation?.pricePerVoucher}
readOnly={readOnly}
displayZero
/>
</Grid>
<Grid xs={4} className={classes.item}>
<AmountInput
module="workerVoucher"
label="workerVoucher.toBePaid"
value={assignmentSummary?.data?.assignVouchersValidation?.price}
readOnly={readOnly}
displayZero
/>
</Grid>
<FormControlLabel
Expand Down
60 changes: 47 additions & 13 deletions src/components/VoucherAssignmentForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';

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 { useModulesManager, useTranslations, journalize } from '@openimis/fe-core';
import { assignVouchers, voucherAssignmentValidation } from '../actions';
import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants';
import AssignmentVoucherForm from './AssignmentVoucherForm';
import VoucherAssignmentConfirmModal from './VoucherAssignmentConfirmModal';
Expand All @@ -23,26 +25,62 @@ export const useStyles = makeStyles((theme) => ({
}));

function VoucherAssignmentForm() {
const prevSubmittingMutationRef = useRef();
const modulesManager = useModulesManager();
const dispatch = useDispatch();
const classes = useStyles();
const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
const [voucherAssignment, setVoucherAssignment] = useState({});
const [assignmentSummary, setAssignmentSummary] = useState({});
const [assignmentSummaryLoading, setAssignmentSummaryLoading] = useState(false);
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
const { mutation, submittingMutation } = useSelector((state) => state.workerVoucher);

const assignmentBlocked = (voucherAssignment) => !voucherAssignment?.workers?.length
|| !voucherAssignment?.dateRanges?.length;

const onVoucherAssign = () => {
const onVoucherAssign = async () => {
setIsConfirmationModalOpen((prevState) => !prevState);
// TODO: Fetch info about assignment (assignmentSummary)
setAssignmentSummaryLoading(true);
try {
const { payload } = await dispatch(voucherAssignmentValidation(
voucherAssignment?.employer?.code,
voucherAssignment?.workers,
voucherAssignment?.dateRanges,
));
setAssignmentSummary(payload);
} catch (error) {
throw new Error(`[VOUCHER_ASSIGNMENT]: Validation error. ${error}`);
} finally {
setAssignmentSummaryLoading(false);
}
};

const onAssignmentConfirmation = () => {
// TODO: After summary fetch, assign vouchers to the Workers.
const onAssignmentConfirmation = async () => {
try {
await dispatch(assignVouchers(
voucherAssignment?.employer?.code,
voucherAssignment?.workers,
voucherAssignment?.dateRanges,
'Assign Vouchers',
));
} catch (error) {
throw new Error(`[ASSIGN_VOUCHERS]: Assignment error. ${error}`);
}

setIsConfirmationModalOpen((prevState) => !prevState);
console.log('Assign Vouchers to the Workers');
};

useEffect(() => {
if (prevSubmittingMutationRef.current && !submittingMutation) {
dispatch(journalize(mutation));
}
}, [submittingMutation]);

useEffect(() => {
prevSubmittingMutationRef.current = submittingMutation;
});

useEffect(() => {
const storedUserEconomicUnit = localStorage.getItem(USER_ECONOMIC_UNIT_STORAGE_KEY);

Expand Down Expand Up @@ -91,12 +129,8 @@ function VoucherAssignmentForm() {
openState={isConfirmationModalOpen}
onClose={() => setIsConfirmationModalOpen((prevState) => !prevState)}
onConfirm={onAssignmentConfirmation}
// TODO: Change after BE implementation
isLoading={false}
error={false}
assignmentSummary={{
vouchers: 100,
}}
isLoading={assignmentSummaryLoading}
assignmentSummary={assignmentSummary}
/>
</Paper>
</Grid>
Expand Down
Loading

0 comments on commit 1f74a5e

Please sign in to comment.