Merge pull request #78 from Shehan-lakshitha/74-bill-payment

74 bill payment

frontend/src/navigation/Navigation.jsx

@@ -48,6 +48,7 @@ import QRSuccess from '../screens/QRSuccess';
 import QuickUser from '../screens/QuickUser';
 import QuickTopUp from '../screens/QuickTopUp';
 import QRVerify from '../screens/QRVerify';
+import Balance from '../screens/Balance';
 
 
 
@@ -193,6 +194,7 @@ export default function Navigation() {
         <Stack.Screen name="QuickUser" component={QuickUser} />
         <Stack.Screen name="QuickTopUp" component={QuickTopUp} />
         <Stack.Screen name="QRVerify" component={QRVerify} />
+        <Stack.Screen name="Balance" component={Balance} />
 
 
       </Stack.Navigator>

frontend/src/screens/Balance.jsx

@@ -0,0 +1,256 @@
+import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import COLORS from '../constants/colors'
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import { Image } from 'react-native';
+import { TextInput } from 'react-native';
+import Button from '../components/Button';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import Img from '../Assets/img1.png';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome6';
+import Toast from 'react-native-toast-message';
+import { URL } from '../constants/URL';
+import axios from 'axios'
+const Balance = () => {
+    const navigation=useNavigation()
+    const route = useRoute()
+    const [balance, setBalance] = useState(null);
+    const [history, setHistory] = useState(null);
+    const {userData}=route.params
+
+    const handleAddCredit = () => {
+          navigation.navigate('AddCredit',{userData});
+      };
+
+      useEffect(()=>{
+
+        const fetchBalance=async ()=>{
+          try {
+            const response = await axios.post(`${URL}/api/balance`, {
+              id: userData._id,
+            });
+            //console.log(balance)
+
+            if (response.data.success===true) {
+              setBalance(response.data.balance)
+
+
+
+            }else if(response.data.success===false){
+              setBalance(response.data.balance)
+
+            }
+            if(response.data.success===false){
+              setBalance(0)
+            }
+          } catch (error) {
+            console.log(error);
+
+          }
+        }
+        fetchBalance()
+
+
+
+      })
+
+      useEffect(()=>{
+        const fetchHistory=async ()=>{
+          try {
+            const response = await axios.post(`${URL}/api/paymenthistory`, {
+              id: userData._id,
+            });
+            if (response) {
+              setHistory(response.data.payments)
+
+            }
+          } catch (error) {
+            console.log(error);
+
+          }
+        }
+        fetchHistory()
+
+      },[balance]) 
+
+      const renderItem = ({ item }) => {
+        const date = new Date(item.created * 1000);
+
+        // Format the date and time
+        const formattedDateTime = date.toLocaleString(); 
+        return(<View>
+          <View  style={styles.tile}>
+          {item.type==='payment'?<Text style={styles.renderTextRed}>{item.type}</Text>:<Text style={styles.renderTextGreen}>{item.type}</Text>}
+            <Text style={styles.renderText}>{`Rs.${item.amount}.00`}</Text>
+            <Text style={styles.renderText}>{formattedDateTime}</Text>
+            </View>
+
+        </View>)
+      };
+
+  return (
+    <SafeAreaView style={styles.container}>
+        <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <Icon name="chevron-left" size={24} color={COLORS.black} />
+        </TouchableOpacity>
+        <Text style={styles.headertitle}>Balance</Text>
+      </View>
+      <View style={styles.addCard}>
+          <Image source={Img} style={styles.imageStyles} />
+          {/* <View style={styles.plus}>
+            <TouchableOpacity
+              onPress={() => navigation.navigate('Wallet', {userData})}>
+              <FontAwesomeIcon
+                name="circle-plus"
+                size={30}
+                color={COLORS.white}
+              />
+            </TouchableOpacity>
+          </View> */}
+          <Text style={styles.cardtext}>{`Rs.${balance}.00`}</Text>
+          <Text style={styles.cardsubtext}>{"Available balance"}</Text>
+        </View>
+        <View style={styles.creditContainer}>
+            <TouchableOpacity style={styles.credit} onPress={handleAddCredit}>
+                <Text style={styles.creditText}>Add Credit</Text>
+            </TouchableOpacity>
+        </View>
+
+              <View style={styles.recentTransactionsContainer}>
+          <Text style={styles.recentTransactions}>Recent Transactions</Text>
+          <View style={styles.line}></View>
+          <FlatList
+    data={history?.slice(-8)}
+    renderItem={renderItem}
+    keyExtractor={item => item.paymentIntentId}
+    />
+        </View>
+
+    </SafeAreaView>
+  )
+}
+
+export default Balance
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginHorizontal: 28, 
+      },
+      header: {
+        flexDirection: 'row',
+        margin:25,
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+      },
+      headertitle: {
+        color: COLORS.black,
+
+        width:150,
+        fontSize: 18,
+        fontWeight: '600',
+        marginHorizontal: '35%',
+      },
+      cardContainer:{
+        position: 'relative',
+        width: '100%',
+        height: 150,
+        backgroundColor: COLORS.purple,
+        marginTop: 30,
+        borderRadius: 12,
+        padding: 30,
+      },
+      imageStyles: {
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        zIndex: -1,
+      },
+      cardtext: {
+        fontSize: 30,
+        color: COLORS.white,
+        fontWeight: '600',
+      },
+      cardsubtext: {
+        fontSize: 14,
+        fontWeight: '400',
+        color: COLORS.white,
+      },
+
+      content:{
+        marginTop:70
+      },
+      contentText:{
+        color:COLORS.low_grey,
+        fontWeight:'600',
+        textAlign:'center',
+        fontSize:20
+      },
+      addCard: {
+        position: 'relative',
+        width: '100%',
+        height: 150,
+        backgroundColor: COLORS.purple,
+        marginTop: 30,
+        borderRadius: 12,
+        padding: 30,
+      },
+      creditContainer:{
+        justifyContent:'center',
+        alignItems:'center',
+      },
+      credit:{
+        justifyContent:'center',
+        alignItems:'center',
+        padding:10,
+        borderRadius:12,
+        width:100,
+        backgroundColor:COLORS.purple,
+        marginTop:25
+      },
+      creditText:{
+        color:COLORS.white,
+        fontWeight:'600'
+      },
+      recentTransactions: {
+        fontSize: 16,
+        color: COLORS.black,
+        fontWeight: '500',
+        marginTop: 40,
+      },
+      line: {
+        height: 3,
+        width: '100%',
+        backgroundColor: COLORS.purple,
+        marginTop: 5,
+      },
+      transText: {
+        alignSelf: 'center',
+        marginTop: 20,
+      },
+      recentTransactionsContainer:{
+        height:400,
+
+      },
+      tile:{
+        flexDirection:'row',
+        padding:10,
+        justifyContent: 'space-between',
+
+       },
+       renderText:{
+        fontWeight:'600'
+      },
+      renderTextGreen:{
+        fontWeight:'600',
+        color:COLORS.green
+       },
+       renderTextRed:{
+        fontWeight:'600',
+        color:COLORS.warning
+
+       },
+
+})

frontend/src/screens/Chart.jsx

@@ -187,4 +187,5 @@ const styles = StyleSheet.create({
 
         alignItems:'center'
       },
+
 })

frontend/src/screens/ElectricityPayment.jsx

@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
   },
   headertitle: {
     color: COLORS.black,
-    fontSize: 24,
+    fontSize: 20,
     fontWeight: '600',
     marginHorizontal: '15%',
   },

frontend/src/screens/Home.jsx

@@ -294,7 +294,7 @@ export default function Home() {
             </View>
 
             <View style={styles.serviceTabContainer}>
-              <TouchableOpacity style={styles.serviceBtn}>
+              <TouchableOpacity style={styles.serviceBtn} onPress={() => {navigation.navigate('Balance',{userData})}}>
                 <View style={styles.serviceTab}>
                   <FontAwesomeIcon
                     name="sack-dollar"

frontend/src/screens/PinLog.jsx

@@ -57,17 +57,17 @@ const PinLog = () => {
     pinFetch()
   },[enteredPin])
 
-  handleLogout = async () => {
-    try {
+  // handleLogout = async () => {
+  //   try {
 
-      await AsyncStorage.clear();
+  //     await AsyncStorage.clear();
 
 
-      BackHandler.exitApp();
-    } catch (error) {
-      console.error('Error logging out:', error);
-    }
-  };
+  //     BackHandler.exitApp();
+  //   } catch (error) {
+  //     console.error('Error logging out:', error);
+  //   }
+  // };
 
   return (
     <SafeAreaView style={styles.container}>

frontend/src/screens/Profile.jsx

@@ -220,7 +220,7 @@ return (
             </View>
 
             <View style={styles.serviceTabContainer}>
-              <TouchableOpacity onPress={() => {}}>
+              <TouchableOpacity onPress={() => {navigation.navigate('Help')}}>
                 <View style={styles.serviceTab}>
                 <Icon name="question-circle-o" size={40} color={COLORS.purple} />
                 </View>

frontend/src/screens/Register.jsx

@@ -37,17 +37,17 @@ const Register = ({navigation}) => {
         setError('Invalid Email') 
     }
 };
-handleLogout = async () => {
-  try {
+// handleLogout = async () => {
+//   try {
 
-    await AsyncStorage.clear();
+//     await AsyncStorage.clear();
 
 
-    BackHandler.exitApp();
-  } catch (error) {
-    console.error('Error logging out:', error);
-  }
-};
+//     BackHandler.exitApp();
+//   } catch (error) {
+//     console.error('Error logging out:', error);
+//   }
+// };
   return (
     <SafeAreaView>
       <View
@@ -295,7 +295,7 @@ handleLogout = async () => {
             }}>
             by register, you accept our Terms and conditions
           </Text>
-          <TouchableOpacity style={{width:50,backgroundColor:'red',height:50}} onPress={handleLogout}></TouchableOpacity>
+          {/* <TouchableOpacity style={{width:50,backgroundColor:'red',height:50}} onPress={handleLogout}></TouchableOpacity> */}
           <Button
             onpress={() => {
               navigation.navigate('CreatePassword', {

frontend/src/screens/Wallet.jsx

@@ -15,6 +15,7 @@ import {URL} from '../constants/URL';
 import axios from 'axios';
 import Toast from 'react-native-toast-message';
 import fetchData from '../constants/fetchData';
+import NavBar from '../components/NavBar';
 
 const Wallet = () => {
   const [cardNumber, setCardNumber] = useState('');
@@ -175,7 +176,9 @@ const Wallet = () => {
           <Text style={styles.transText}>No Recent Transactions</Text>
         </View> */}
       </View>
+
     </View>
+
   );
 };