Merge pull request #207 from atlp-rwanda/ft-refine-bookAppointment

Refine Appointment Booking: Add Form Validation and Duration-Based Amount Calculation

Author: Nkbtemmy

app/(app)/ActionMenu/AllDoctorScreen.tsx

@@ -11,7 +11,7 @@ import { blueheart } from '@/assets/icons/blueHeart';
 import { star } from '@/assets/icons/star';
 import { search } from '@/assets/icons/search';
 import { more } from '@/assets/icons/more';
-import { leftArrow } from '@/assets/icons/left';
+import { LightleftArrow } from '@/assets/icons/left';
 import HeaderComponent from '@/components/HeaderComponent';
 import SearchComponent from '@/components/SearchComponent';
 import FoundDoctorCount from '@/components/FoundDoctorCount';

app/(app)/ActionMenu/Booking/BookingAppointment.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Text, View, StyleSheet, ScrollView } from "react-native";
+import { Text, View, StyleSheet, ScrollView,Alert } from "react-native";
 import { Colors } from "@/constants/Colors";
 import { router } from "expo-router";
 import { ThemeContext } from "@/ctx/ThemeContext";
@@ -17,9 +17,10 @@ export default function BookingAppointment() {
   const [timeSlots, setTimeSlots] = useState([""]);
   const [selectedDate, setSelectedDate] = useState("");
   const [selectedHour, setSelectedHour] = useState("");
+  const [errorMessage,setErrorMessage]=useState<string>("")
   const { id } = useLocalSearchParams()
 
-  console.log("this is id from BookAppointment:", id)
+  
 
   const generateTimeSlots = () => {
     let times = [];
@@ -40,8 +41,18 @@ export default function BookingAppointment() {
     generateTimeSlots();
   }, []);
 
-  console.log("this is slected hour:", selectedHour)
-  console.log("this is selected date:",selectedDate)
+  
+  const handleNextPress = () => {
+    if (!selectedHour || !selectedDate) {
+      Alert.alert("Please select both date and an hour")
+      return;
+    }
+    setErrorMessage("")
+    router.push({
+      pathname: "(app)/ActionMenu/Booking/Select-package",
+      params: { Doctor_id: id, hour: selectedHour, date: selectedDate },
+    });
+  }
 
   return (
     <ScrollView
@@ -106,9 +117,7 @@ export default function BookingAppointment() {
       >
         <Button
           title="Next"
-          onPress={() => {
-            router.push({ pathname:"(app)/ActionMenu/Booking/Select-package",params:{Doctor_id:id,hour:selectedHour,date:selectedDate}});
-          }}
+          onPress={handleNextPress}
         />
       </View>
     </ScrollView>

app/(app)/ActionMenu/Booking/EnterYourPin.tsx

@@ -23,21 +23,21 @@ import { supabase } from "@/lib/supabase";
 export default function EnterYourPin() {
   const [isDark, setIsDark] = useState(false);
   const modal = useModal();
-  const {doctor_id,hour,date,packageTitle,packagePrice,problem,user_id,patient_id} = useLocalSearchParams()
+  const {doctor_id,hour,date,packageTitle,packagePrice,problem,user_id,patient_id,duration} = useLocalSearchParams()
 
   const { theme, changeTheme } = useContext(ThemeContext);
   async function bookAppointment() {
     const { error } = await supabase
       .from('appointment')
-      .insert({ doctor_id: doctor_id, time:hour,date:date, package: packageTitle, price: packagePrice, illness_descr: problem,user_id:patient_id});
+      .insert({ doctor_id: doctor_id, time:hour,date:date, package: packageTitle, price: packagePrice, illness_descr: problem,user_id:patient_id,duration:duration});
     if (error) {
       console.error("Error booking appointment:", error);
     }
   }
   console.log("this is from lastpage",doctor_id,hour,packageTitle,packagePrice,problem)
 
   function successBooking() {
-    router.push("(app)/Appointments/index");
+    router.push("ActionMenu");;
     modal.hide();
   }
   async function handlePIN() {
@@ -99,11 +99,7 @@ export default function EnterYourPin() {
             ></View>
             <Button
               title="View Appointment"
-              onPress={() => {
-                router.push("(app)/Appointments");
-                modal.hide();
-
-              }}
+              onPress={successBooking}
             />
             <TouchableOpacity
               onPress={() => {

app/(app)/ActionMenu/Booking/Patient-details.tsx

@@ -11,6 +11,7 @@ import {
   TouchableOpacity,
   Pressable,
   ScrollView,
+  Alert
 } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { ThemeContext } from "@/ctx/ThemeContext";
@@ -28,10 +29,12 @@ const PatientDetails = () => {
   const [text, setText] = useState("");
   const [height, setHeight] = useState(40);
   const { theme, changeTheme } = useContext(ThemeContext);
-  const {Doctor_id,hour,date,packageTitle,packagePrice} = useLocalSearchParams()
+  const {Doctor_id,hour,date,packageTitle,packagePrice,duration} = useLocalSearchParams()
   const [loggeduser, setLoggedUser] = useState<string>()
   const [profile, setProfile] = useState<any>(null)
-  const [patient_id,setPatient_id]=useState<string>()
+  const [patient_id, setPatient_id] = useState<string>()
+  const [selectedGender, setSelectedGender] = useState<string>()
+  const [selectedAge,setSelectedAge]=useState<string>("")
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -59,7 +62,15 @@ const PatientDetails = () => {
         } else {
           setProfile(data)
           setPatient_id(data.id)
-          console.log(data)
+          if (!data.age && data.date_of_birth) {
+            const age = calculateAge(data.date_of_birth)
+            setProfile((prevProfile:Date) => ({
+              ...prevProfile,
+              age:age
+            }))
+            setSelectedAge(age.toString() || '')
+          } 
+         
 
         }
 
@@ -68,11 +79,35 @@ const PatientDetails = () => {
     }
     fetchUserProfile()
   }, [loggeduser])
-  console.log("this is profile:",profile)
-  console.log("this is logged user:", loggeduser)
-  console.log("this is patient_id:",patient_id)
+  
+  
+  const calculateAge = (dob: string) => {
+    const birthDate = new Date(dob);
+    const today = new Date();
+    const age = today.getFullYear() - birthDate.getFullYear();
+    const monthDifference = today.getMonth() - birthDate.getMonth();
+    if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
+      return age - 1;
+    }
+    return age;
+  };
+  
   const handleInputChange = (name: string, value: string) => {
     setProfile({ ...profile, [name]: value });
+  };
+  
+
+   const handleNextPress = () => {
+    if (!text) {
+      Alert.alert("Please select all required data")
+      
+      return;
+    }
+    
+    router.push({
+      pathname: "/(app)/ActionMenu/Booking/SelectPayment",
+      params:{doctor_id:Doctor_id,hour:hour,date:date,packageTitle:packageTitle,packagePrice:packagePrice,problem:text,user_id:loggeduser,patient_id:patient_id,duration:duration},
+    });
   }
 
   return (
@@ -121,14 +156,8 @@ const PatientDetails = () => {
           >
             Gender
           </Text>
-          <DropDown
-            data={[
-               { value: `${profile?.gender}`, label:`${profile?.gender} ` },
-              { value: "Male", label: "Male" },
-              { value: "Female", label: "Female" },
-            ]}
-            defaultvalue={profile?.Gender}
-          />
+          <Input onChange={handleInputChange} placeholder="Gender" value={`${profile?.gender}`}  />
+          
         </View>
 
         <View style={{ flexDirection: "column", gap: 10 }}>
@@ -145,15 +174,8 @@ const PatientDetails = () => {
           >
             Your Age
           </Text>
-          <DropDown
-            data={[
-              { value: `${profile?.age} Years`, label:`${profile?.age} Years` },
-              { value: "27 years", label: "27 years" },
-              { value: "28 years", label: "28 years" },
-             
-            ]}
-            defaultvalue={profile?.age}
-          />
+          <Input onChange={value => handleInputChange('age', value)} placeholder="Age" value={selectedAge}  />
+         
         </View>
 
         <View style={{ flexDirection: "column", gap: 10 }}>
@@ -170,7 +192,7 @@ const PatientDetails = () => {
           >
             Write Your Problem
           </Text>
-          {/* <Input placeholder="Describe how you are feeling here ..."  /> */}
+         
           <TextArea text={text} onChangeText={setText} />
         </View>
 
@@ -182,9 +204,10 @@ const PatientDetails = () => {
         >
           <Button
             title="Next"
-            onPress={() => {
-              router.push({ pathname: "/(app)/ActionMenu/Booking/SelectPayment",params:{doctor_id:Doctor_id,hour:hour,date:date,packageTitle:packageTitle,packagePrice:packagePrice,problem:text,user_id:loggeduser,patient_id:patient_id} });
-            }}
+            onPress={handleNextPress}
+            // onPress={() => {
+            //   router.push({ pathname: "/(app)/ActionMenu/Booking/SelectPayment",params:{doctor_id:Doctor_id,hour:hour,date:date,packageTitle:packageTitle,packagePrice:packagePrice,problem:text,user_id:loggeduser,patient_id:patient_id,duration:duration} });
+            // }}
           />
         </View>
       </ScrollView>

app/(app)/ActionMenu/Booking/Select-package.tsx

@@ -11,6 +11,7 @@ import {
   Image,
   TouchableOpacity,
   ScrollView,
+  Alert
 } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { ThemeContext } from "@/ctx/ThemeContext";
@@ -33,8 +34,20 @@ import { StatusBar } from "expo-status-bar";
 const SelectPackage = () => {
   const { theme, changeTheme } = useContext(ThemeContext);
   const { Doctor_id, hour, date,patient_id } = useLocalSearchParams()
-  const [selectedPackageTitle, setSelectedPackageTitle] = useState<{ title: string, price: string }>({title:"",price:""})
-  console.log("this is new:",Doctor_id,hour,date)
+  const [selectedPackageTitle, setSelectedPackageTitle] = useState<{ title: string, price: string }>({ title: "Messaging", price: "$20" })
+  const [selectedDuration, setSelectedDuration] = useState<string>("1 hour")
+  console.log("this is new:", Doctor_id, hour, date)
+  const handleNextPress = () => {
+    if (!selectedPackageTitle||!selectedDuration) {
+      Alert.alert("Please select both Duration and package")
+      return;
+    }
+    
+    router.push({
+      pathname: "ActionMenu/Booking/Patient-details",
+      params:{ Doctor_id:Doctor_id,hour:hour,date:date,packageTitle:selectedPackageTitle.title,packagePrice:selectedPackageTitle.price,patient_id:patient_id,duration: selectedDuration,},
+    });
+  }
 
   const packages = [
     {
@@ -59,7 +72,8 @@ const SelectPackage = () => {
       icon: () => <SvgXml xml={videoIcon} />,
     },
   ];
-
+  
+ 
   return (
     <>
       <StatusBar style={theme === "light" ? "dark" : "light"} />
@@ -88,12 +102,13 @@ const SelectPackage = () => {
           </Text>
           <DropDown
             data={[
-              { label: "1 hour", value: "30" },
+              { label: "1 hour", value: "1 hour" },
               { label: "30 minutes", value: "30 minutes" },
             ]}
             leftIcon={() => (
               <SvgXml xml={theme === "light" ? clockIcon : lightClockIcon} />
             )}
+           onSelect={(value) => setSelectedDuration(value)}
           />
         </View>
 
@@ -129,8 +144,8 @@ const SelectPackage = () => {
           }}
         >
           <Button
-            title="Next"
-            onPress={() => router.push({ pathname:"ActionMenu/Booking/Patient-details",params:{ Doctor_id:Doctor_id,hour:hour,date:date,packageTitle:selectedPackageTitle.title,packagePrice:selectedPackageTitle.price,patient_id:patient_id}})}
+           title="Next" 
+          onPress={handleNextPress}
           />
         </View>
       </ScrollView>

app/(app)/ActionMenu/Booking/SelectPayment.tsx

@@ -15,7 +15,7 @@ import { useLocalSearchParams } from "expo-router";
 export default function SelectPayment() {
   const { theme, changeTheme } = useContext(ThemeContext);
   const [selected, setSelected] = useState(false);
-const {doctor_id,hour,date,packageTitle,packagePrice,problem,user_id,patient_id}=useLocalSearchParams()
+const {doctor_id,hour,date,packageTitle,packagePrice,problem,user_id,patient_id,duration}=useLocalSearchParams()
 
   return (
     <>
@@ -53,7 +53,7 @@ const {doctor_id,hour,date,packageTitle,packagePrice,problem,user_id,patient_id}
         <Button
           title="Next"
           onPress={() => {
-            router.push({ pathname: "(app)/ActionMenu/Booking/reviewSummary",params: {doctor_id:doctor_id,hour:hour,date:date,packageTitle:packageTitle,packagePrice:packagePrice,problem:problem,user_id:user_id,patient_id:patient_id}});
+            router.push({ pathname: "(app)/ActionMenu/Booking/reviewSummary",params: {doctor_id:doctor_id,hour:hour,date:date,packageTitle:packageTitle,packagePrice:packagePrice,problem:problem,user_id:user_id,patient_id:patient_id,duration:duration}});
           }}
           style={{ marginTop: "auto" }}
         />