OM-92: add payment modal

src/components/VoucherAcquirementGenericVoucher.js

@@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/styles';
 import { useModulesManager, useTranslations } from '@openimis/fe-core';
 import { MODULE_NAME, USER_ECONOMIC_UNIT_STORAGE_KEY, VOUCHER_QUANTITY_THRESHOLD } from '../constants';
 import AcquirementGenericVoucherForm from './AcquirementGenericVoucherForm';
+import VoucherAcquirementPaymentModal from './VoucherAcquirementPaymentModal';
 
 export const useStyles = makeStyles((theme) => ({
   paper: { ...theme.paper.paper, margin: '10px 0 0 0' },
@@ -26,13 +27,20 @@ function VoucherAcquirementGenericVoucher() {
   const classes = useStyles();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
+  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
 
   const canAcquire = (voucherAcquirement) => !voucherAcquirement?.quantity
   || voucherAcquirement?.quantity > VOUCHER_QUANTITY_THRESHOLD;
 
   const onVoucherAcquire = () => {
-    // TODO: Open Payment modal
-    console.log(voucherAcquirement);
+    setIsPaymentModalOpen((prevState) => !prevState);
+    // TODO: Fetch info about payment
+  };
+
+  const onPaymentConfirmation = () => {
+    // TODO: After summary fetch, redirect to the MPay.
+    setIsPaymentModalOpen((prevState) => !prevState);
+    console.log('Redirect to the MPay...');
   };
 
   useEffect(() => {
@@ -74,6 +82,19 @@ function VoucherAcquirementGenericVoucher() {
         formatMessage={formatMessage}
         classes={classes}
       />
+      <VoucherAcquirementPaymentModal
+        openState={isPaymentModalOpen}
+        onClose={() => setIsPaymentModalOpen((prevState) => !prevState)}
+        onConfirm={onPaymentConfirmation}
+        // TODO: Change after BE implementation
+        isLoading={false}
+        error={false}
+        acquirementSummary={{
+          pricePerVoucher: 50,
+          qtyOfVouchers: 50,
+          amountToBePaid: 2500,
+        }}
+      />
     </>
   );
 }

src/components/VoucherAcquirementPaymentModal.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  CircularProgress,
+  Grid,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  Tooltip,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import { useTranslations, useModulesManager, NumberInput } from '@openimis/fe-core';
+import { MODULE_NAME } from '../constants';
+
+export const useStyles = makeStyles((theme) => ({
+  primaryButton: theme.dialog.primaryButton,
+  secondaryButton: theme.dialog.secondaryButton,
+  item: theme.paper.item,
+}));
+
+function VoucherAcquirementPaymentModal({
+  openState,
+  onClose,
+  onConfirm,
+  isLoading,
+  error,
+  acquirementSummary,
+  readOnly = true,
+}) {
+  const classes = useStyles();
+  const modulesManager = useModulesManager();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const [acceptAcquirement, setAcceptAcquirement] = useState(false);
+  const acquireButtonDisabled = !acceptAcquirement || isLoading || error;
+
+  const renderContent = () => {
+    if (error) {
+      return <Typography color="error">{error}</Typography>;
+    }
+
+    if (isLoading) {
+      return <CircularProgress />;
+    }
+
+    return (
+      <Grid container>
+        <Grid xs={4} className={classes.item}>
+          <NumberInput
+            module="workerVoucher"
+            label="workerVoucher.acquire.pricePerVoucher"
+            value={acquirementSummary?.pricePerVoucher}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid xs={4} className={classes.item}>
+          <NumberInput
+            module="workerVoucher"
+            label="workerVoucher.acquire.vouchersQuantity"
+            value={acquirementSummary?.qtyOfVouchers}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid xs={4} className={classes.item}>
+          <NumberInput
+            module="workerVoucher"
+            label="workerVoucher.acquire.toBePaid"
+            value={acquirementSummary?.amountToBePaid}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <FormControlLabel
+          style={{ margin: '12px 0 0 0' }}
+          control={(
+            <Checkbox
+              color="primary"
+              checked={acceptAcquirement}
+              onChange={(e) => setAcceptAcquirement(e.target.checked)}
+            />
+          )}
+          label={formatMessage('workerVoucher.acquire.confirmation')}
+        />
+      </Grid>
+    );
+  };
+
+  return (
+    <Dialog open={openState} onClose={onClose}>
+      <DialogTitle>{formatMessage('workerVoucher.VoucherAcquirementPaymentModal.title')}</DialogTitle>
+      <Divider />
+      <DialogContent>{renderContent()}</DialogContent>
+      <Divider style={{ margin: '12px 0' }} />
+      <DialogActions>
+        <Button onClick={onClose} className={classes.secondaryButton}>
+          {formatMessage('workerVoucher.VoucherAcquirementPaymentModal.close')}
+        </Button>
+        {acquireButtonDisabled ? (
+          <Tooltip title={formatMessage('workerVoucher.VoucherAcquirementPaymentModal.confirm.tooltip')}>
+            <span>
+              <Button
+                onClick={onConfirm}
+                autoFocus
+                className={classes.primaryButton}
+                disabled={acquireButtonDisabled}
+              >
+                {formatMessage('workerVoucher.VoucherAcquirementPaymentModal.confirm')}
+              </Button>
+            </span>
+          </Tooltip>
+        ) : (
+          <Button
+            onClick={onConfirm}
+            autoFocus
+            className={classes.primaryButton}
+            disabled={acquireButtonDisabled}
+          >
+            {formatMessage('workerVoucher.VoucherAcquirementPaymentModal.confirm')}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default VoucherAcquirementPaymentModal;

src/components/VoucherAcquirementSpecificWorker.js

@@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/styles';
 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';
 
 export const useStyles = makeStyles((theme) => ({
   paper: { ...theme.paper.paper, margin: '10px 0 0 0' },
@@ -26,13 +27,20 @@ function VoucherAcquirementSpecificWorker() {
   const classes = useStyles();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
   const [voucherAcquirement, setVoucherAcquirement] = useState({});
+  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
 
   const canAcquire = (voucherAcquirement) => !voucherAcquirement?.workers?.length
   || !voucherAcquirement?.dateRanges?.length;
 
   const onVoucherAcquire = () => {
-    // TODO: Open Payment modal
-    console.log(voucherAcquirement);
+    setIsPaymentModalOpen((prevState) => !prevState);
+    // TODO: Fetch info about payment (acquirementSummary)
+  };
+
+  const onPaymentConfirmation = () => {
+    // TODO: After summary fetch, redirect to the MPay.
+    setIsPaymentModalOpen((prevState) => !prevState);
+    console.log('Redirect to the MPay...');
   };
 
   useEffect(() => {
@@ -74,6 +82,19 @@ function VoucherAcquirementSpecificWorker() {
         formatMessage={formatMessage}
         classes={classes}
       />
+      <VoucherAcquirementPaymentModal
+        openState={isPaymentModalOpen}
+        onClose={() => setIsPaymentModalOpen((prevState) => !prevState)}
+        onConfirm={onPaymentConfirmation}
+        // TODO: Change after BE implementation
+        isLoading={false}
+        error={false}
+        acquirementSummary={{
+          pricePerVoucher: 50,
+          qtyOfVouchers: 50,
+          amountToBePaid: 2500,
+        }}
+      />
     </>
   );
 }

src/pickers/WorkerMultiplePicker.js

@@ -80,6 +80,7 @@ function WorkerMultiplePicker({
         <FormControlLabel
           control={(
             <Checkbox
+              color="primary"
               checked={previousWorkersChecked}
               onChange={(e) => {
                 setPreviousWorkersChecked(e.target.checked);

src/translations/en.json

@@ -34,7 +34,10 @@
   "workerVoucher.acquirement.method.SPECIFIC_WORKER": "Specific Workers",
   "workerVoucher.acquire.voucher": "ACQUIRE VOUCHER",
   "workerVoucher.acquire.vouchersQuantity": "Quantity of Vouchers",
+  "workerVoucher.acquire.pricePerVoucher": "Voucher Price",
+  "workerVoucher.acquire.toBePaid": "Acquirement Price",
   "workerVoucher.acquire.vouchers": "Acquire Vouchers",
+  "workerVoucher.acquire.confirmation": "I confirm the voucher acquirement, acknowledging that I have read and agree to the terms and policies.",
   "workerVoucher.acquire.vouchers.required": "You need to fill out all required fields to continue",
   "workerVoucher.WorkerMultiplePicker.placeholder": "Search for Worker",
   "workerVoucher.WorkerMultiplePicker.underThreshold": "Enter at least 3 characters of National ID",
@@ -48,5 +51,9 @@
   "workerVoucher.WorkerDateRangePicker.dateRange": "Date Range",
   "workerVoucher.WorkerDateRangePicker.dateRanges": "Date Ranges: *",
   "workerVoucher.WorkerDateRangePicker.noRanges": "No date ranges registered",
-  "workerVoucher.WorkerDateRangePicker.notAvailable": "NOT AVAILABLE"
+  "workerVoucher.WorkerDateRangePicker.notAvailable": "NOT AVAILABLE",
+  "workerVoucher.VoucherAcquirementPaymentModal.title": "Voucher Acquirement Summary",
+  "workerVoucher.VoucherAcquirementPaymentModal.confirm": "Acquire",
+  "workerVoucher.VoucherAcquirementPaymentModal.confirm.tooltip": "Please ensure that there are no errors and that you have checked the acquirement confirmation",
+  "workerVoucher.VoucherAcquirementPaymentModal.close": "Cancel"
 }