OM-92: adjust payment modal in specific scenario

openimis · Dec 11, 2023 · 0c69550 · 0c69550
1 parent d9bf9bb
commit 0c69550
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 16 deletions.
diff --git 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
@@ -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
@@ -28,6 +28,7 @@ export const useStyles = makeStyles((theme) => ({
 }));
 
 function VoucherAcquirementPaymentModal({
+  type,
   openState,
   onClose,
   onConfirm,
@@ -60,23 +61,23 @@ function VoucherAcquirementPaymentModal({
           <AmountInput
             module="workerVoucher"
             label="workerVoucher.acquire.pricePerVoucher"
-            value={acquirementSummary?.data?.acquireUnassignedValidation?.pricePerVoucher}
+            value={acquirementSummary?.data?.[type]?.pricePerVoucher}
             readOnly={readOnly}
           />
         </Grid>
         <Grid xs={4} className={classes.item}>
           <NumberInput
             module="workerVoucher"
             label="workerVoucher.acquire.vouchersQuantity"
-            value={acquirementSummary?.data?.acquireUnassignedValidation?.count}
+            value={acquirementSummary?.data?.[type]?.count}
             readOnly={readOnly}
           />
         </Grid>
         <Grid xs={4} className={classes.item}>
           <AmountInput
             module="workerVoucher"
             label="workerVoucher.acquire.toBePaid"
-            value={acquirementSummary?.data?.acquireUnassignedValidation?.price}
+            value={acquirementSummary?.data?.[type]?.price}
             readOnly={readOnly}
           />
         </Grid>

diff --git 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
@@ -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({
                   </ListItemAvatar>
                   <ListItemText
                     primary={formatMessage('workerVoucher.WorkerDateRangePicker.dateRange')}
-                    secondary={`${range.start} | ${range.end}`}
+                    secondary={`${range.startDate} | ${range.endDate}`}
                   />
                   <ListItemSecondaryAction>
                     <Tooltip title={formatMessage('workerVoucher.WorkerDateRangePicker.deleteRange')}>

diff --git 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;
   }