feat: integration with payment after booking added

client/src/pages/Doctors/DoctorCard.js

@@ -3,8 +3,8 @@ import DoctorIcon from '../../assets/images/icons/DoctorIcon.png';
 import { calcPrice } from '../../utils/PriceCalculator.js';
 
 
-const DoctorCard = ({ doctor, setSelectedDoctor }) => {
-    const price = calcPrice(doctor.hourlyRate);
+const DoctorCard = ({ doctor, setSelectedDoctor, loggedInPatientHealthPackage }) => {
+    const price = calcPrice(doctor.hourlyRate, loggedInPatientHealthPackage.doctorDiscount);
     return (
         <ListItemButton onClick={() => setSelectedDoctor(doctor)}>
             <ListItemAvatar sx={{ paddingRight: '2%' }}>

client/src/pages/Doctors/DoctorDetails.js

@@ -11,7 +11,7 @@ import DoctorDetailsAppointmentsList from './DoctorDetailsAppointmentsList.js';
 
 
 
-const DoctorDetails = ({ selectedDoctor, handleDialogClose, loggedInPatient }) => {
+const DoctorDetails = ({ selectedDoctor, handleDialogClose, loggedInPatient, loggedInPatientHealthPackage }) => {
     return (
         <Dialog
             open={selectedDoctor}
@@ -27,10 +27,14 @@ const DoctorDetails = ({ selectedDoctor, handleDialogClose, loggedInPatient }) =
                     </DialogTitle>
 
                     <DialogContent>
-                        <DoctorDetailsHeader selectedDoctor={selectedDoctor} />
+                        <DoctorDetailsHeader 
+                            selectedDoctor={selectedDoctor}
+                            loggedInPatientHealthPackage={loggedInPatientHealthPackage}
+                        />
                         <DoctorDetailsAppointmentsList
                             selectedDoctor={selectedDoctor}
                             loggedInPatient={loggedInPatient}
+                            loggedInPatientHealthPackage={loggedInPatientHealthPackage}
                         />
                     </DialogContent>
 

client/src/pages/Doctors/DoctorDetailsAppointmentsCard.js

@@ -10,18 +10,20 @@ import {
     Autocomplete,
     TextField
 } from '@mui/material';
-import { doctorAxios } from 'pages/utilities/AxiosConfig';
-import Swal from 'sweetalert2';
-import '../../assets/css/swalStyle.css';
 
 import { getDay, getTime } from '../../utils/DateFormatter.js';
 
+import { calcPrice } from '../../utils/PriceCalculator.js';
+// to be uncommented after merge
+// import { choosePayment } from '../../utils/PaymentOptions';
 
 const DoctorDetailsAppointmentsCard = ({ 
     selectedDoctor,
     availableSlotsIdx,
-    loggedInPatient 
-}) => {
+    loggedInPatient,
+    loggedInPatientHealthPackage
+}
+) => {
     const { availableSlots } = selectedDoctor;
     const slot = availableSlots[availableSlotsIdx];
 
@@ -38,6 +40,7 @@ const DoctorDetailsAppointmentsCard = ({
         setAllFamilyMembers(familyMembers);
     });
 
+
     const handleExpand = () => {
 		setExpanded(oldExpanded => !oldExpanded);
 	};
@@ -55,7 +58,7 @@ const DoctorDetailsAppointmentsCard = ({
             // patientName: (to be filled in later)
             doctorName: selectedDoctor.userData.name,
             date: slot.from,
-            status: 'pending',
+            status: 'Incomplete',
             type: 'appointment',
             availableSlotsIdx
         };
@@ -66,18 +69,12 @@ const DoctorDetailsAppointmentsCard = ({
             appointment.patientId = loggedInPatient.familyMembers[selectedMember.index].id;
             appointment.patientName = loggedInPatient.familyMembers[selectedMember.index].name;
         }
-        await doctorAxios
-                .post('/appointments', appointment)
-                .then(() => {
-                    Swal.fire(
-                        'Appointment Booked!',
-                        'Your appointment has been booked successfully!',
-                        'success'
-                    );
-                })
-                .catch((error) => {
-                    console.log(error);
-                });
+
+        const price = calcPrice(selectedDoctor.hourlyRate, loggedInPatientHealthPackage.doctorDiscount);
+        console.log(price);
+        // to be uncommented after merge
+        // choosePayment(appointment, price, 'appointment');        
+
     };
     return(
         <>

client/src/pages/Doctors/DoctorDetailsAppointmentsList.js

@@ -1,7 +1,7 @@
 import { Grid, Typography } from '@mui/material';
 import DoctorDetailsAppointmentsCard from './DoctorDetailsAppointmentsCard';
 
-const DoctorDetailsAppointmentsList = ({ selectedDoctor, loggedInPatient }) => {
+const DoctorDetailsAppointmentsList = ({ selectedDoctor, loggedInPatient, loggedInPatientHealthPackage }) => {
     const { availableSlots } = selectedDoctor;
     return (
         <>
@@ -15,6 +15,7 @@ const DoctorDetailsAppointmentsList = ({ selectedDoctor, loggedInPatient }) => {
                             selectedDoctor={selectedDoctor}
                             availableSlotsIdx={index}
                             loggedInPatient={loggedInPatient}
+                            loggedInPatientHealthPackage={loggedInPatientHealthPackage}
                         />
                     </Grid>
                 ))}

client/src/pages/Doctors/DoctorDetailsHeader.js

@@ -6,7 +6,7 @@ import WorkIcon from '@mui/icons-material/Work';
 import SchoolIcon from '@mui/icons-material/School';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
 
-const DoctorDetailsHeader = ({ selectedDoctor }) => {
+const DoctorDetailsHeader = ({ selectedDoctor, loggedInPatientHealthPackage }) => {
     return (
         <>
             <div
@@ -46,7 +46,7 @@ const DoctorDetailsHeader = ({ selectedDoctor }) => {
                     <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
                         <AttachMoneyIcon style={{ marginRight: '0.4em' }}/>
                         <Typography variant='body1'>
-                            {`${calcPrice(selectedDoctor.hourlyRate)}`}
+                            {`${calcPrice(selectedDoctor.hourlyRate, loggedInPatientHealthPackage.doctorDiscount)}`}
                         </Typography>
                     </div>
                 </div>

client/src/pages/Doctors/DoctorList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { List } from '@mui/material';
 import DoctorCard from './DoctorCard.js';
 
-const DoctorList = ({ doctors, setSelectedDoctor }) => {
+const DoctorList = ({ doctors, setSelectedDoctor, loggedInPatientHealthPackage }) => {
     return (
         <List>
             {Array.isArray(doctors) &&
@@ -12,6 +12,7 @@ const DoctorList = ({ doctors, setSelectedDoctor }) => {
                             <DoctorCard
                                 doctor={doctor}
                                 setSelectedDoctor={setSelectedDoctor}
+                                loggedInPatientHealthPackage={loggedInPatientHealthPackage}
                             ></DoctorCard>
                         </div>
                     </div>

client/src/pages/Doctors/Doctors.js

@@ -15,6 +15,7 @@ const Doctors = () => {
     const [selectedDoctor, setSelectedDoctor] = useState(null);
     const [originalDoctors, setOriginalDoctors] = useState([]);
     const [loggedInPatient, setLoggedInPatient] = useState(null);
+    const [loggedInPatientHealthPackage, setLoggedInPatientHealthPackage] = useState(null);
     const { filterData, updateFilter } = useFilter();
     const { searchQuery } = useSearch();
     const specialities = [];
@@ -105,16 +106,41 @@ const Doctors = () => {
             });
     }, []);
 
+    useEffect(() => {
+        setLoggedInPatientHealthPackage({
+            doctorDiscount: '0.2'
+        });
+
+        // to be uncommented after merge
+        // patientAxios
+        //     .get(`/patient/${patientID}/health-packages`)
+        //     .then((response) => {
+        //         let healthPackage = {
+        //             doctorDiscount: '0'
+        //         };
+        //         const healthPackages = response.data.healthPackages; 
+        //         if(healthPackages.length){
+        //             healthPackage = healthPackages[0];
+        //         }
+        //         setLoggedInPatientHealthPackage(healthPackage);
+        //     })
+        //     .catch((error) => {
+        //         console.log(error);
+        //     });
+    }, []);
+
     return (
         <MainCard title='Doctors'>
             <DoctorList
                 doctors={doctors}
                 setSelectedDoctor={setSelectedDoctor}
+                loggedInPatientHealthPackage={loggedInPatientHealthPackage}
             />
             <DoctorDetails
                 selectedDoctor={selectedDoctor}
                 handleDialogClose={handleDialogClose}
                 loggedInPatient={loggedInPatient}
+                loggedInPatientHealthPackage={loggedInPatientHealthPackage}
             />
         </MainCard>
     );

client/src/utils/Constants.js

@@ -1,7 +1,7 @@
 export const CLINIC_BASE_URL = 'http://localhost:8001';
 export const PATIENT_BASE_URL = 'http://localhost:8002';
 export const PHARMACY_BASE_URL = 'http://localhost:8003';
-const APPOINTMENT_STATUS = ['COMPLETE', 'INCOMPLETE', 'CANCELLED', 'PENDING', 'RESCHEDULED', 'ACTIVE'];
+const APPOINTMENT_STATUS = ['COMPLETE', 'INCOMPLETE', 'CANCELLED', 'RESCHEDULED'];
 const APPOINTMENT_CHRONOLGY = ['UPCOMING', 'PAST'];
 export const DATE_FILTER_ARRAY = ['Last week', 'Last month', 'Last year'];
 

client/src/utils/PriceCalculator.js

@@ -1,5 +1,4 @@
-export const calcPrice =  (price) => {
-    const userDiscount = 0.2; // needs user to get the id to get the discount
+export const calcPrice =  (price, userDiscount) => {
     const priceWithDiscount = price * (1 - userDiscount);
     const final = 1.1 * priceWithDiscount;
     return final.toFixed(2);