OM-333: ffix eslint in worker picker, add info modals after assignemn…

…t/acquirement (#68)

src/components/VoucherAcquirementGenericVoucher.js

@@ -41,7 +41,7 @@ function VoucherAcquirementGenericVoucher() {
   const history = useHistory();
   const dispatch = useDispatch();
   const classes = useStyles();
-  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const { formatMessage, formatMessageWithValues } = useTranslations(MODULE_NAME, modulesManager);
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
   const [acquirementSummary, setAcquirementSummary] = useState({});
   const [acquirementSummaryLoading, setAcquirementSummaryLoading] = useState(false);
@@ -97,6 +97,14 @@ function VoucherAcquirementGenericVoucher() {
       } = JSON.parse(currentMutation.jsonExt);
       await payWithMPay(billId);
       historyPush(modulesManager, history, REF_ROUTE_BILL, [billId]);
+      dispatch(
+        coreAlert(
+          formatMessage('menu.voucherAcquirementSuccess'),
+          formatMessageWithValues('workerVoucher.VoucherAcquirementForm.genericVoucherConfirmation', {
+            quantity: voucherAcquirement?.quantity,
+          }),
+        ),
+      );
     } catch (error) {
       throw new Error(`[VOUCHER_ACQUIREMENT_GENERIC_VOUCHER]: Acquirement error. ${error}`);
     } finally {

src/components/VoucherAcquirementSpecificWorker.js

@@ -101,6 +101,12 @@ function VoucherAcquirementSpecificWorker() {
 
       await payWithMPay(billId);
       historyPush(modulesManager, history, REF_ROUTE_BILL, [billId]);
+      dispatch(
+        coreAlert(
+          formatMessage('menu.voucherAcquirementSuccess'),
+          formatMessage('workerVoucher.VoucherAcquirementForm.specificVoucherConfirmation'),
+        ),
+      );
     } catch (error) {
       throw new Error(`[VOUCHER_ACQUIREMENT_SPECIFIC_VOUCHER]: Acquirement error. ${error}`);
     } finally {

src/components/VoucherAssignmentForm.js

@@ -7,7 +7,7 @@ import {
 import { makeStyles } from '@material-ui/styles';
 
 import {
-  useModulesManager, useTranslations, journalize, historyPush, useHistory,
+  coreAlert, useModulesManager, useTranslations, journalize, historyPush, useHistory,
 } from '@openimis/fe-core';
 import { assignVouchers, voucherAssignmentValidation } from '../actions';
 import { MODULE_NAME, REF_ROUTE_WORKER_VOUCHERS, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants';
@@ -71,6 +71,12 @@ function VoucherAssignmentForm() {
         'Assign Vouchers',
       ));
       historyPush(modulesManager, history, REF_ROUTE_WORKER_VOUCHERS);
+      dispatch(
+        coreAlert(
+          formatMessage('menu.voucherAssignmentSuccess'),
+          formatMessage('workerVoucher.VoucherAssignmentForm.assignmentConfirmation'),
+        ),
+      );
     } catch (error) {
       throw new Error(`[ASSIGN_VOUCHERS]: Assignment error. ${error}`);
     } finally {

src/pickers/WorkerMultiplePicker.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -25,7 +27,7 @@ import { getYesterdaysDate } from '../utils/utils';
 import { fetchAllAvailableWorkers } from '../actions';
 
 function WorkerMultiplePicker({
-  readOnly, value, onChange, required, multiple = true, filterSelectedOptions,
+  readOnly, value, onChange, required, filterSelectedOptions,
 }) {
   const modulesManager = useModulesManager();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
@@ -109,12 +111,12 @@ function WorkerMultiplePicker({
 
   const handleImport = () => {
     setConfigurationDialogOpen(false);
-    
+
     const currentWorkersSet = new Set(value.map((worker) => worker.id));
     const importedWorkers = importPlanWorkers(importPlan);
     const uniqueImportedWorkers = importedWorkers.filter((worker) => !currentWorkersSet.has(worker.id));
     const updatedWorkers = [...value, ...uniqueImportedWorkers];
-    
+
     onChange(null, updatedWorkers);
   };
 
@@ -126,13 +128,13 @@ function WorkerMultiplePicker({
         gap: '8px',
         alignItems: 'end',
       }}
-    > 
+    >
       <Autocomplete
         multiple
         required={required}
         limitTags={MAX_CELLS}
         id="checkboxes-tags-demo"
-        disabled={isDisabled} 
+        disabled={isDisabled}
         error={error}
         isLoading={isLoading}
         options={allWorkers}
@@ -146,49 +148,46 @@ function WorkerMultiplePicker({
             : formatMessage('workerVoucher.WorkerMultiplePicker.noOptions')
         }
         filterSelectedOptions={filterSelectedOptions}
-        onInputChange={(_, newInputValue) => setSearchString(newInputValue)}  // Update the search string
+        onInputChange={(_, newInputValue) => setSearchString(newInputValue)}
         setCurrentString={setSearchString}
         disableCloseOnSelect
         getOptionLabel={({ chfId, lastName, otherNames }) => `${chfId} ${lastName} ${otherNames}`}
-        renderOption={(option, { selected }) => {
-          return (
-              <>
-                <Checkbox
-                  icon={icon}
-                  checkedIcon={checkedIcon}
-                  style={{ marginRight: 8 }}
-                  checked={selected}
-                />
-                {option.chfId} {option.lastName} {option.otherNames}
-              </>
-            );
-          }}
+        renderOption={(option, { selected }) => (
+          <>
+            <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
+            {`${option.chfId} ${option.lastName} ${option.otherNames}`}
+          </>
+        )}
         fullWidth
         PopperComponent={(props) => {
-          const inputRect = props.anchorEl?.getBoundingClientRect(); // Get the input's position and size
-          const windowHeight = window.innerHeight; // Get the viewport height
-          const spaceBelow = windowHeight - inputRect?.bottom; // Calculate the space below the input
-          const dropdownMaxHeight = Math.min(spaceBelow - 8, 300); // Set max height with a small margin (8px)
-        
+          const inputRect = props.anchorEl?.getBoundingClientRect();
+          const windowHeight = window.innerHeight;
+          const spaceBelow = windowHeight - Number(inputRect?.bottom);
+          const dropdownMaxHeight = Math.min(spaceBelow - 8, 300);
+
           return (
             <Popper
               {...props}
               modifiers={{
                 offset: {
                   enabled: true,
-                  offset: '0, 8', // Adjust the vertical offset (small gap between input and dropdown)
+                  offset: '0, 2',
                 },
                 preventOverflow: {
                   enabled: true,
                   boundariesElement: 'viewport',
-                  padding: 8, // Ensure padding from viewport edges
+                  padding: 8,
                 },
                 flip: {
-                  enabled: false, // Prevent flipping the dropdown to the top
+                  enabled: false,
                 },
               }}
               placement="bottom-start"
-              style={{ zIndex: 1300, maxHeight: dropdownMaxHeight, overflowY: 'auto' }} // Set dynamic max height and scroll
+              style={{
+                zIndex: 1300,
+                maxHeight: dropdownMaxHeight,
+                overflowY: 'auto',
+              }}
             />
           );
         }}
@@ -200,7 +199,7 @@ function WorkerMultiplePicker({
             placeholder={formatMessage('workerVoucher.WorkerMultiplePicker.placeholder')}
           />
         )}
-      /> 
+      />
       <Button
         variant="contained"
         color="primary"

src/translations/en.json

@@ -2,7 +2,9 @@
   "workerVoucher.menu.voucherList": "Voucher List",
   "workerVoucher.menu.workersList": "Workers",
   "workerVoucher.menu.voucherAcquirement": "Voucher Acquirement",
+  "workerVoucher.menu.voucherAcquirementSuccess": "Voucher Acquirement Success",
   "workerVoucher.menu.voucherAssignment": "Voucher Assignment",
+  "workerVoucher.menu.voucherAssignmentSuccess": "Voucher Assignment Success",
   "workerVoucher.menu.priceManagement": "Voucher Price Management",
   "workerVoucher.menu.mobileAppPassword": "Mobile App Password",
   "workerVoucher.searcherResultsTitle": "{workerVouchersTotalCount} Vouchers Found",
@@ -45,6 +47,9 @@
   "workerVoucher.WorkerDetailsPage.title": "{chfId} Worker Details Page",
   "workerVoucher.VoucherDetailsPanel.subtitle": "Voucher's General Information",
   "workerVoucher.VoucherAcquirementForm.subtitle": "Select voucher acquirement method",
+  "workerVoucher.VoucherAcquirementForm.genericVoucherConfirmation": "You have successfully acquired {quantity} voucher(s). The vouchers will be ready for assignment once the payment is confirmed. The payment gateway has opened in a new tab. If you accidentally closed it, please click „Pay with MPay” from the Bill view to reopen it.",
+  "workerVoucher.VoucherAcquirementForm.specificVoucherConfirmation": "You have successfully acquired vouchers for your selected workers. The vouchers will be ready for assignment once the payment is confirmed. The payment gateway has opened in a new tab. If you accidentally closed it, please click „Pay with MPay” from the Bill view to reopen it.",
+  "workerVoucher.VoucherAssignmentForm.assignmentConfirmation": "You have successfully assigned voucher(s) to the selected worker(s).",
   "workerVoucher.acquirement.method": "Acquirement Method",
   "workerVoucher.acquirement.method.NONE": "None",
   "workerVoucher.acquirement.method.GENERIC_VOUCHER": "Generic Voucher",