diff --git a/README.md b/README.md index 085359f9..d01fcc55 100644 --- a/README.md +++ b/README.md @@ -8,62 +8,17 @@ Online Doctor Appointment & Consultation App For coverage on other branches, please visit the [Codecov project page](https://codecov.io/gh/atlp-rwanda/matadors-rn-medica) and select the appropriate branch. - -## Table Of Content - -- [Medica App](#medica-app) - - [Table Of Content](#table-of-content) - - [Description](#description) - - [Overview;](#overview) - - [Overview;](#overview-1) - - [Documentation](#documentation) - - [Endpoints](#endpoints) - - [Setup](#setup) - - [Dependencies](#dependencies) - - [Getting Started](#getting-started) - - [Run The Service](#run-the-service) - - [Testing](#testing) - - [Contribute](#contribute) - - [Contact](#contact) - - [Contact](#contact-1) - - [License](#license) - ## Description Medica is a mobile application designed to facilitate online doctor appointments and consultations. Users can create an account, log in, browse through various doctor specialties, schedule appointments, and communicate with healthcare professionals through voice calls, video calls, or messaging. The app also supports different payment methods for appointment fees, provides access to healthcare articles, allows profile management, and offers a help center for user support. -## Overview; -None at the moment!! - -## Overview; -None at the moment!! - -## Documentation - -### Endpoints - -- `/signup`: User signup endpoint -- `/login`: User login endpoint -- `/ForgotPassword`: Ask for password Retrieval or reset if forgot -- `/ResetPassword`: Access to Changing the users Password -- `/Home`: List of available doctor specialties -- `/search`: Search for doctors across all specialties -- `/appointments`: Schedule and manage appointments -- `/communication`: Choose communication mode (voice call, video call, messaging) -- `/payment`: Select and process payment for appointments -- `/articles`: Access and interact with healthcare articles -- `/profile`: Manage user profile -- `/help`: Contact the help center - - -## Setup - ### Dependencies - Node.js - React Native - Expo (for mobile app development) +- TypeScript ### Getting Started @@ -78,14 +33,7 @@ npm install ``` 1. Set up environment variables: - Create a `.env` file based on `.env.example` and fill in necessary values. - -### Run The Service - -1. Start the Expo development server: -```bash -npm start -``` -1. Use the Expo client on your mobile device or simulator to run the app. +- ## Testing @@ -103,31 +51,18 @@ To run tests, use the following command: ```bash npm test ``` -## Contribute - -Contributions are welcome! To contribute to this repository, please follow these steps: -1. Fork the repository. -2. Create a new branch (`git checkout -b feature/my-feature`). -3. Commit your changes (`git commit -am 'Add new feature'`). -4. Push to the branch (`git push origin feature/my-feature`). -5. Create a new Pull Request. - -## Contact - -Feel free to reach out to us: -[Nkbtemmy](https://github.com/Nkbtemmy) +# Manager [mukunzidd](https://github.com/mukunzidd) -## Contact - -Feel free to reach out to me on my email: -example@gmail.com -[GitHub](https://github.com/Nkbtemmy) -[GitHub](https://github.com/mukunzidd) -Feel free to reach out to us: +# TTL [Nkbtemmy](https://github.com/Nkbtemmy) -[mukunzidd](https://github.com/mukunzidd) - -## License - None At the moment !! +# Contributors +[Murenzi Patenre]() +[Joseph Irirwanirira]() +[Bizimana Keynes]() +[Ndahiro Pacific]() +[Umwali Aimee Eudoxie]() +[Munezero N. Michael]() +[Ndanyuzwe Franflin]() +[Mbabazi Diane]() diff --git a/app.json b/app.json index e5325877..9b3b6c8c 100644 --- a/app.json +++ b/app.json @@ -9,7 +9,7 @@ "splash": { "image": "./assets/images/splash.png", "resizeMode": "contain", - "backgroundColor": "#ffffff" + "backgroundColor": "white" }, "assetBundlePatterns": ["**/*"], "ios": { @@ -22,7 +22,7 @@ "android": { "adaptiveIcon": { "foregroundImage": "./assets/images/adaptive-icon.png", - "backgroundColor": "#ffffff" + "backgroundColor": "white" }, "package": "medical.app", "softwareKeyboardLayoutMode": "pan" diff --git a/app/(app)/ActionMenu/Booking/Doctor_details.tsx b/app/(app)/ActionMenu/Booking/Doctor_details.tsx index b347c687..c6ff3c73 100644 --- a/app/(app)/ActionMenu/Booking/Doctor_details.tsx +++ b/app/(app)/ActionMenu/Booking/Doctor_details.tsx @@ -1,7 +1,15 @@ import { title } from "process"; import React, { useContext } from "react"; import { SvgXml } from "react-native-svg"; -import { Pressable, ScrollView, StatusBar, StyleSheet, Text, Touchable, TouchableOpacity } from "react-native"; +import { + Pressable, + ScrollView, + StatusBar, + StyleSheet, + Text, + Touchable, + TouchableOpacity, +} from "react-native"; import { View } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import Typography from "@/constants/Typography"; @@ -18,13 +26,16 @@ import { statisticIcon } from "@/components/UI/icons/statistics"; import { halfTransparentStar } from "@/components/UI/icons/halfTransparentStart"; import { blueMessageIcon } from "@/components/UI/icons/blueMessage"; import { ThemeContext } from "@/ctx/ThemeContext"; -import { backArrowBlack, backArrowWhite } from "@/components/UI/icons/backArrow"; +import { + backArrowBlack, + backArrowWhite, +} from "@/components/UI/icons/backArrow"; export const ReviewerCardComponent = () => { - const {theme, changeTheme} = useContext(ThemeContext) + const { theme, changeTheme } = useContext(ThemeContext); return ( - + { source={require("@/assets/images/jenny_watson.png")} /> - Charlotte Hanlin + + Charlotte Hanlin + { }} > - - 5 + + + 5 + @@ -59,20 +87,40 @@ export const ReviewerCardComponent = () => { - + Dr. Jenny is very professional in her work and responsive. I have consulted and my problem is solved. 😍😍 - - 5 + + + 5 + - 6 days ago + + {" "} + 6 days ago + @@ -80,7 +128,7 @@ export const ReviewerCardComponent = () => { }; const DoctorDetails = () => { - const {theme, changeTheme} = useContext(ThemeContext) + const { theme, changeTheme } = useContext(ThemeContext); return ( { - router.back()}> - { - theme === "dark" ? : - } - + router.back()}> + {theme === "dark" ? ( + + ) : ( + + )} + - Dr.Jenny Watson + + Dr.Jenny Watson + - + - - - + + + - + Dr. Jenny Watson - Immunologists - Christ Hospital in London, UK + + Immunologists + + + Christ Hospital in London, UK + @@ -131,17 +217,24 @@ const DoctorDetails = () => { borderRadius: 100, }} > - + 5.000+ - patients + + patients + { borderRadius: 100, }} > - + { > 5.000+ - years exp... + + years exp... + { borderRadius: 100, }} > - + { > 5.000+ - rating + + rating + { > 5.000+ - reviewers + + reviewers + - + - About me - + + About me + + Dr. Jenny Watson is the top most Immunologists specialist in Christ Hospital at London. She achived several awards for her wonderful contribution in medical field. She is available for private @@ -213,25 +342,54 @@ const DoctorDetails = () => { - Working Time - Monday - Friday, 08.00 AM - 20.00 PM + + Working Time + + + {" "} + Monday - Friday, 08.00 AM - 20.00 PM{" "} + - Reviews - router.push("/ActionMenu/Booking/DoctorRatingAndReview")}> + + Reviews + + + router.push("/ActionMenu/Booking/DoctorRatingAndReview") + } + > - See All + See All - @@ -239,7 +397,7 @@ const DoctorDetails = () => { router.push("/ActionMenu/Booking/BookingAppointment")} + onPress={() => router.push("/ActionMenu/Booking/BookingAppointment")} style={{ backgroundColor: Colors.main.primary._500, paddingVertical: 20, @@ -302,7 +460,7 @@ const styles = StyleSheet.create({ }, drName: { - borderColor:"rgba(83, 83, 83, 0.4)", + borderColor: "rgba(83, 83, 83, 0.4)", borderBottomWidth: 0.5, paddingBottom: 20, }, diff --git a/app/(app)/ActionMenu/Booking/EnterYourPin.tsx b/app/(app)/ActionMenu/Booking/EnterYourPin.tsx index 6764241d..874d0a7b 100644 --- a/app/(app)/ActionMenu/Booking/EnterYourPin.tsx +++ b/app/(app)/ActionMenu/Booking/EnterYourPin.tsx @@ -1,20 +1,116 @@ import { Text } from "@/components/Themed"; -import { LeftArrow } from "@/components/UI/Icons"; +import { LeftArrow, } from "@/components/UI/Icons"; import { Colors } from "@/constants/Colors"; import Typography from "@/constants/Typography"; -import { useState } from "react"; +import { useContext, useState } from "react"; import { View, StyleSheet, TouchableOpacity, Pressable, + Image, } from "react-native"; import { OtpInput } from "react-native-otp-entry"; import { router } from "expo-router"; +import { useModal } from "@/ctx/ModalContext"; +import { ThemeContext } from "@/ctx/ThemeContext"; export default function EnterYourPin() { const [isDark, setIsDark] = useState(false); - const [pin1, Setpin1] = useState(null); + const modal = useModal(); + + const { theme, changeTheme } = useContext(ThemeContext); + + async function handlePIN() { + modal.show({ + children: ( + + + + + Congratulations! + + + Appointment successfully booked. You will receive a notification + and the doctor you selected will contact you. + + { + modal.hide() + router.push("Appointments") + }}> + + View Appointment + + + { + modal.hide() + router.push("ActionMenu") + }} + style={{ + backgroundColor: theme === "light" + ? Colors.main.primary._100:Colors.dark._3, + borderRadius: 100, + padding: 18, + alignItems: "center", + }} + > + + cancel + + + + + ), + }); + } return ( <> @@ -78,7 +174,7 @@ export default function EnterYourPin() { {}} + onPress={handlePIN} style={{ width: 380, height: 58, diff --git a/app/(app)/ActionMenu/Booking/Patient-details.tsx b/app/(app)/ActionMenu/Booking/Patient-details.tsx index b15e7946..b3def3f3 100644 --- a/app/(app)/ActionMenu/Booking/Patient-details.tsx +++ b/app/(app)/ActionMenu/Booking/Patient-details.tsx @@ -2,179 +2,184 @@ import { Colors } from "@/constants/Colors"; import { MaterialIcons } from "@expo/vector-icons"; import { router } from "expo-router"; import React, { useState } from "react"; -import { View, Text, StyleSheet, TextInput, TouchableOpacity, Pressable } from 'react-native'; -import Icon from 'react-native-vector-icons/FontAwesome'; - +import { + View, + Text, + StyleSheet, + TextInput, + TouchableOpacity, + Pressable, + ScrollView, +} from "react-native"; +import Icon from "react-native-vector-icons/FontAwesome"; const PatientDetails = () => { - const [text, setText] = useState(''); - const [height, setHeight] = useState(40); - return ( - <> - - router.back()} - style={styles.container}> - router.back()} - > - - - Patient details - - - Full Name - - - - - - Gender - {/* Gender */} + const [text, setText] = useState(""); + const [height, setHeight] = useState(40); + return ( + <> + + router.back()} style={styles.container}> + router.back()}> + + + Patient details + + + Full Name + + + + + + Gender + {/* Gender */} - - - - - - - Your Age - {/* Gender */} + + + + + + + Your Age + {/* Gender */} - - - - - - - Write Your Problem - {/* Gender */} + + + + + + + Write Your Problem + {/* Gender */} - - setText(text)} - style={styles.email} - placeholder="type in your info" - keyboardType="default" - placeholderTextColor="#212121" - multiline={true} - numberOfLines={9} - onContentSizeChange={(event) => { - setHeight(event.nativeEvent.contentSize.height); - }} - /> - - - - router.push("(app)/ActionMenu/Booking/SelectPayment")} - style={styles.button} - > - Next - + + setText(text)} + style={styles.email} + placeholder="type in your info" + keyboardType="default" + placeholderTextColor="#212121" + multiline={true} + numberOfLines={9} + onContentSizeChange={(event) => { + setHeight(event.nativeEvent.contentSize.height); + }} + /> - - - ) -} + + + + router.push("(app)/ActionMenu/Booking/SelectPayment") + } + style={styles.button} + > + Next + + + + + ); +}; export default PatientDetails; const styles = StyleSheet.create({ - Main: { - backgroundColor: Colors.others.white, - width: "100%", - height: 900, - padding: 20 - }, - container: { - marginTop: 40, - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - width: '60%', - height: 60 - }, - icon1: { - alignSelf: 'center', - }, - fill: { - fontSize: 24, - fontWeight: "600" - }, - select: { - fontSize: 16, - fontWeight: "500" - }, - middle: { - marginTop: 10 - }, - inputs11: { - width: "100%", - flexDirection: "row", - backgroundColor: Colors.grayScale._50, - margin: 10, - marginTop: 20, - marginBottom: 10, - padding: 10, - borderRadius: 10, - paddingHorizontal: 10, - }, - email1: { - fontSize: 15, - color: Colors.grayScale._900, - fontWeight: '400' - }, - inputs1: { - width: "100%", - flexDirection: "row", - justifyContent: 'space-between', - backgroundColor: Colors.grayScale._50, - margin: 10, - marginTop: 20, - marginBottom: 10, - padding: 10, - borderRadius: 10, - paddingHorizontal: 10, - }, - email: { - fontSize: 15, - color: Colors.grayScale._900, - fontWeight: '400' - }, - btn: { + Main: { + backgroundColor: Colors.others.white, + width: "100%", + height: 900, + padding: 20, + }, + container: { + marginTop: 40, + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + width: "60%", + height: 60, + }, + icon1: { + alignSelf: "center", + }, + fill: { + fontSize: 24, + fontWeight: "600", + }, + select: { + fontSize: 16, + fontWeight: "500", + }, + middle: { + marginTop: 10, + }, + inputs11: { + width: "100%", + flexDirection: "row", + backgroundColor: Colors.grayScale._50, + margin: 10, + marginTop: 20, + marginBottom: 10, + padding: 10, + borderRadius: 10, + paddingHorizontal: 10, + }, + email1: { + fontSize: 15, + color: Colors.grayScale._900, + fontWeight: "400", + }, + inputs1: { + width: "100%", + flexDirection: "row", + justifyContent: "space-between", + backgroundColor: Colors.grayScale._50, + margin: 10, + marginTop: 20, + marginBottom: 10, + padding: 10, + borderRadius: 10, + paddingHorizontal: 10, + }, + email: { + fontSize: 15, + color: Colors.grayScale._900, + fontWeight: "400", + }, + btn: { height: 150, - justifyContent: 'flex-end' - }, - button: { - width: 350, - alignSelf: "center", - backgroundColor: Colors.main.primary._500, - paddingTop: 18, - paddingBottom: 18, - paddingLeft: 16, - paddingRight: 16, - borderRadius: 100 - }, - buttonText: { - alignSelf: "center", - color: Colors.others.white, - fontWeight: "bold" - } -}) \ No newline at end of file + justifyContent: "flex-end", + }, + button: { + width: 350, + alignSelf: "center", + backgroundColor: Colors.main.primary._500, + paddingTop: 18, + paddingBottom: 18, + paddingLeft: 16, + paddingRight: 16, + borderRadius: 100, + }, + buttonText: { + alignSelf: "center", + color: Colors.others.white, + fontWeight: "bold", + }, +}); diff --git a/app/(app)/ActionMenu/Booking/Select-package.tsx b/app/(app)/ActionMenu/Booking/Select-package.tsx index 3da38837..cef2760c 100644 --- a/app/(app)/ActionMenu/Booking/Select-package.tsx +++ b/app/(app)/ActionMenu/Booking/Select-package.tsx @@ -2,7 +2,7 @@ import { Colors } from "@/constants/Colors"; import { MaterialIcons } from "@expo/vector-icons"; import { router } from "expo-router"; import React, { useState } from "react"; -import { View, StyleSheet, Text, Pressable, TextInput, Image, TouchableOpacity } from "react-native"; +import { View, StyleSheet, Text, Pressable, TextInput, Image, TouchableOpacity, ScrollView } from "react-native"; import Icon from 'react-native-vector-icons/FontAwesome'; const SelectPackage = () => { @@ -33,7 +33,7 @@ const SelectPackage = () => { return ( <> - + router.back()} @@ -143,7 +143,7 @@ const SelectPackage = () => { Next - + ) } diff --git a/app/(app)/ActionMenu/Booking/SelectPayment.tsx b/app/(app)/ActionMenu/Booking/SelectPayment.tsx index 4e2f8beb..b240c228 100644 --- a/app/(app)/ActionMenu/Booking/SelectPayment.tsx +++ b/app/(app)/ActionMenu/Booking/SelectPayment.tsx @@ -55,25 +55,6 @@ export default function SelectPayment() { - {/* - - - - - */} -