From 0c6955072cb80af78f5db8ceb4ea3b7d33676a4a Mon Sep 17 00:00:00 2001 From: olewandowski1 Date: Mon, 11 Dec 2023 16:27:23 +0100 Subject: [PATCH] OM-92: adjust payment modal in specific scenario --- src/actions.js | 55 +++++++++++++++++++ .../VoucherAcquirementGenericVoucher.js | 1 + .../VoucherAcquirementPaymentModal.js | 7 ++- .../VoucherAcquirementSpecificWorker.js | 45 +++++++++++---- src/pickers/WorkerDateRangePicker.js | 4 +- src/reducer.js | 3 + 6 files changed, 99 insertions(+), 16 deletions(-) diff --git a/src/actions.js b/src/actions.js index e61678e..1736cab 100644 --- a/src/actions.js +++ b/src/actions.js @@ -21,6 +21,16 @@ const WORKER_VOUCHER_PROJECTION = (modulesManager) => [ `policyholder ${modulesManager.getProjection('policyHolder.PolicyHolderPicker.projection')}`, ]; +function formatGraphQLDateRanges(dateRanges) { + return `[${dateRanges.map((range) => `{ startDate: "${range.startDate}", endDate: "${range.endDate}" }`) + .join(', ')}]`; +} + +function formatGraphQLStringArray(inputArray) { + const formattedArray = inputArray.map((item) => `"${item}"`).join(', '); + return `[${formattedArray}]`; +} + export function fetchWorkerVouchers(modulesManager, params) { const queryParams = [...params, 'isDeleted: false']; const payload = formatPageQueryWithCount('workerVoucher', queryParams, WORKER_VOUCHER_PROJECTION(modulesManager)); @@ -75,3 +85,48 @@ export function acquireGenericVoucher(phCode, quantity, clientMutationLabel) { }, ); } + +export function specificVoucherValidation(phCode, workers, dateRanges) { + const workersNationalIDs = workers?.map((worker) => worker?.chfId) ?? []; + + return graphqlWithVariables( + ` + query specificVoucherValidation($phCode: ID!, $workers: [ID], $dateRanges: [DateRangeInclusiveInputType]) { + acquireAssignedValidation( + economicUnitCode: $phCode + workers: $workers + dateRanges: $dateRanges + ) { + count + price + pricePerVoucher + } + } + `, + { phCode, workers: workersNationalIDs, dateRanges }, + ); +} + +export function acquireSpecificVoucher(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('acquireAssignedVouchers', mutationInput, clientMutationLabel); + const requestedDateTime = new Date(); + + return graphql( + mutation.payload, + [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.ACQUIRE_SPECIFIC_VOUCHER), ERROR(ACTION_TYPE.MUTATION)], + { + actionType: ACTION_TYPE.ACQUIRE_SPECIFIC_VOUCHER, + clientMutationId: mutation.clientMutationId, + clientMutationLabel, + requestedDateTime, + }, + ); +} diff --git a/src/components/VoucherAcquirementGenericVoucher.js b/src/components/VoucherAcquirementGenericVoucher.js index 545045b..c037e93 100644 --- a/src/components/VoucherAcquirementGenericVoucher.js +++ b/src/components/VoucherAcquirementGenericVoucher.js @@ -114,6 +114,7 @@ function VoucherAcquirementGenericVoucher() { onConfirm={onPaymentConfirmation} isLoading={acquirementSummaryLoading} acquirementSummary={acquirementSummary} + type="acquireUnassignedValidation" /> ); diff --git a/src/components/VoucherAcquirementPaymentModal.js b/src/components/VoucherAcquirementPaymentModal.js index 775ed2d..e60a69e 100644 --- a/src/components/VoucherAcquirementPaymentModal.js +++ b/src/components/VoucherAcquirementPaymentModal.js @@ -28,6 +28,7 @@ export const useStyles = makeStyles((theme) => ({ })); function VoucherAcquirementPaymentModal({ + type, openState, onClose, onConfirm, @@ -60,7 +61,7 @@ function VoucherAcquirementPaymentModal({ @@ -68,7 +69,7 @@ function VoucherAcquirementPaymentModal({ @@ -76,7 +77,7 @@ function VoucherAcquirementPaymentModal({ diff --git a/src/components/VoucherAcquirementSpecificWorker.js b/src/components/VoucherAcquirementSpecificWorker.js index 7f7b8a5..79850ce 100644 --- a/src/components/VoucherAcquirementSpecificWorker.js +++ b/src/components/VoucherAcquirementSpecificWorker.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; import { Divider, Grid, Typography, Button, Tooltip, @@ -9,6 +10,7 @@ import { useModulesManager, useTranslations } from '@openimis/fe-core'; 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' }, @@ -24,20 +26,46 @@ export const useStyles = makeStyles((theme) => ({ function VoucherAcquirementSpecificWorker() { const modulesManager = useModulesManager(); + const dispatch = useDispatch(); const classes = useStyles(); const { formatMessage } = useTranslations(MODULE_NAME, modulesManager); const [voucherAcquirement, setVoucherAcquirement] = useState({}); + const [acquirementSummary, setAcquirementSummary] = useState({}); + const [acquirementSummaryLoading, setAcquirementSummaryLoading] = useState(false); const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false); const acquirementBlocked = (voucherAcquirement) => !voucherAcquirement?.workers?.length || !voucherAcquirement?.dateRanges?.length; - const onVoucherAcquire = () => { + const onVoucherAcquire = async () => { setIsPaymentModalOpen((prevState) => !prevState); - // TODO: Fetch info about payment (acquirementSummary) + setAcquirementSummaryLoading(true); + try { + const { payload } = await dispatch(specificVoucherValidation( + voucherAcquirement?.employer?.code, + voucherAcquirement?.workers, + voucherAcquirement?.dateRanges, + )); + setAcquirementSummary(payload); + } catch (error) { + throw new Error(`[VOUCHER_ACQUIREMENT_SPECIFIC_VOUCHER]: Validation error. ${error}`); + } finally { + setAcquirementSummaryLoading(false); + } }; - const onPaymentConfirmation = () => { + const onPaymentConfirmation = async () => { + try { + await dispatch(acquireSpecificVoucher( + voucherAcquirement?.employer?.code, + voucherAcquirement?.workers, + voucherAcquirement?.dateRanges, + 'Acquire Specific Voucher', + )); + } catch (error) { + throw new Error(`[VOUCHER_ACQUIREMENT_SPECIFIC_VOUCHER]: Acquirement error. ${error}`); + } + // TODO: After summary fetch, redirect to the MPay. setIsPaymentModalOpen((prevState) => !prevState); console.log('Redirect to the MPay...'); @@ -86,14 +114,9 @@ function VoucherAcquirementSpecificWorker() { openState={isPaymentModalOpen} onClose={() => setIsPaymentModalOpen((prevState) => !prevState)} onConfirm={onPaymentConfirmation} - // TODO: Change after BE implementation - isLoading={false} - error={false} - acquirementSummary={{ - pricePerVoucher: 50, - qtyOfVouchers: 50, - amountToBePaid: 2500, - }} + isLoading={acquirementSummaryLoading} + acquirementSummary={acquirementSummary} + type="acquireAssignedValidation" /> ); diff --git a/src/pickers/WorkerDateRangePicker.js b/src/pickers/WorkerDateRangePicker.js index a6b3954..161b9a9 100644 --- a/src/pickers/WorkerDateRangePicker.js +++ b/src/pickers/WorkerDateRangePicker.js @@ -37,7 +37,7 @@ function WorkerDateRangePicker({ }; const addDateRange = () => { - const newRange = { start: startDate, end: endDate }; + const newRange = { startDate, endDate }; onChange([...value, newRange]); setStartDate(null); setEndDate(null); @@ -119,7 +119,7 @@ function WorkerDateRangePicker({ diff --git a/src/reducer.js b/src/reducer.js index 8cb175e..ffa1b53 100644 --- a/src/reducer.js +++ b/src/reducer.js @@ -18,6 +18,7 @@ import { export const ACTION_TYPE = { MUTATION: 'WORKER_VOUCHER_MUTATION', ACQUIRE_GENERIC_VOUCHER: 'WORKER_VOUCHER_ACQUIRE_GENERIC_VOUCHER', + ACQUIRE_SPECIFIC_VOUCHER: 'WORKER_VOUCHER_ACQUIRE_SPECIFIC_VOUCHER', SEARCH_WORKER_VOUCHERS: 'WORKER_VOUCHER_WORKER_VOUCHERS', GET_WORKER_VOUCHER: 'WORKER_VOUCHER_GET_WORKER_VOUCHER', }; @@ -110,6 +111,8 @@ function reducer( return dispatchMutationErr(state, action); case SUCCESS(ACTION_TYPE.ACQUIRE_GENERIC_VOUCHER): return dispatchMutationResp(state, 'acquireUnassignedVouchers', action); + case SUCCESS(ACTION_TYPE.ACQUIRE_SPECIFIC_VOUCHER): + return dispatchMutationResp(state, 'acquireAssignedVouchers', action); default: return state; }