diff --git a/src/components/VoucherAcquirementGenericVoucher.js b/src/components/VoucherAcquirementGenericVoucher.js index 9394ed4..8f55d2f 100644 --- a/src/components/VoucherAcquirementGenericVoucher.js +++ b/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} /> + setIsPaymentModalOpen((prevState) => !prevState)} + onConfirm={onPaymentConfirmation} + // TODO: Change after BE implementation + isLoading={false} + error={false} + acquirementSummary={{ + pricePerVoucher: 50, + qtyOfVouchers: 50, + amountToBePaid: 2500, + }} + /> ); } diff --git a/src/components/VoucherAcquirementPaymentModal.js b/src/components/VoucherAcquirementPaymentModal.js new file mode 100644 index 0000000..c34004c --- /dev/null +++ b/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 {error}; + } + + if (isLoading) { + return ; + } + + return ( + + + + + + + + + + + setAcceptAcquirement(e.target.checked)} + /> + )} + label={formatMessage('workerVoucher.acquire.confirmation')} + /> + + ); + }; + + return ( + + {formatMessage('workerVoucher.VoucherAcquirementPaymentModal.title')} + + {renderContent()} + + + + {acquireButtonDisabled ? ( + + + + + + ) : ( + + )} + + + ); +} + +export default VoucherAcquirementPaymentModal; diff --git a/src/components/VoucherAcquirementSpecificWorker.js b/src/components/VoucherAcquirementSpecificWorker.js index 223d4c8..d68259f 100644 --- a/src/components/VoucherAcquirementSpecificWorker.js +++ b/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} /> + setIsPaymentModalOpen((prevState) => !prevState)} + onConfirm={onPaymentConfirmation} + // TODO: Change after BE implementation + isLoading={false} + error={false} + acquirementSummary={{ + pricePerVoucher: 50, + qtyOfVouchers: 50, + amountToBePaid: 2500, + }} + /> ); } diff --git a/src/pickers/WorkerMultiplePicker.js b/src/pickers/WorkerMultiplePicker.js index 8d86e7c..4673466 100644 --- a/src/pickers/WorkerMultiplePicker.js +++ b/src/pickers/WorkerMultiplePicker.js @@ -80,6 +80,7 @@ function WorkerMultiplePicker({ { setPreviousWorkersChecked(e.target.checked); diff --git a/src/translations/en.json b/src/translations/en.json index b7bcadf..07580c6 100644 --- a/src/translations/en.json +++ b/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" }