150 lines
4.2 KiB
TypeScript
150 lines
4.2 KiB
TypeScript
import React, { useCallback, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
SafeAreaView,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import { Header } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { getStyles } from './walletScreen.styles';
|
|
import { WalletTransaction } from '@interfaces';
|
|
import { useAppDispatch, useAppSelector } from '@store';
|
|
import { getAllWalletTransactions } from './thunk';
|
|
import { useFocusEffect } from '@react-navigation/native';
|
|
import { getWalletBalanceThunk } from '../accountScreen';
|
|
|
|
// const balance = 17496.05;
|
|
|
|
// const transactions: WalletTransaction[] = [
|
|
// {
|
|
// id: '1',
|
|
// walletId: '',
|
|
// transactionReference: 'TXN-1784543790637-2387',
|
|
// direction: 'OUT',
|
|
// amount: '1408.95',
|
|
// balanceBefore: '18905',
|
|
// balanceAfter: '17496.05',
|
|
// type: 'PAYMENT',
|
|
// referenceId: null,
|
|
// description: null,
|
|
// idempotencyKey: null,
|
|
// createdAt: '2026-07-20T10:36:30.639Z',
|
|
// },
|
|
// {
|
|
// id: '2',
|
|
// walletId: '',
|
|
// transactionReference: 'TXN-1784199810512-8502',
|
|
// direction: 'OUT',
|
|
// amount: '1095',
|
|
// balanceBefore: '20000',
|
|
// balanceAfter: '18905',
|
|
// type: 'PAYMENT',
|
|
// referenceId: null,
|
|
// description: null,
|
|
// idempotencyKey: null,
|
|
// createdAt: '2026-07-16T11:03:30.515Z',
|
|
// },
|
|
// ];
|
|
|
|
const WalletScreen = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const dispatch = useAppDispatch();
|
|
const { walletTransactions } = useAppSelector(state => state.wallet);
|
|
const { wallet } = useAppSelector(state => state.account);
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
dispatch(getAllWalletTransactions());
|
|
dispatch(getWalletBalanceThunk());
|
|
}, []),
|
|
);
|
|
|
|
const renderItem = ({ item }: { item: WalletTransaction }) => {
|
|
const isCredit = item.direction === 'IN';
|
|
|
|
return (
|
|
<View style={styles.transactionCard}>
|
|
<View
|
|
style={[
|
|
styles.iconContainer,
|
|
{
|
|
backgroundColor: isCredit ? '#DFF7E4' : '#FFE5E5',
|
|
},
|
|
]}
|
|
>
|
|
{/* <Icon
|
|
name={isCredit ? 'arrow-bottom-left' : 'arrow-top-right'}
|
|
size={22}
|
|
color={isCredit ? '#18A558' : '#F04438'}
|
|
/> */}
|
|
</View>
|
|
|
|
<View style={styles.transactionInfo}>
|
|
<Text style={styles.transactionTitle}>{item.type}</Text>
|
|
|
|
<Text style={styles.transactionRef}>{item.transactionReference}</Text>
|
|
|
|
<Text style={styles.transactionDate}>
|
|
{new Date(item.createdAt).toLocaleString()}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.amountContainer}>
|
|
<Text
|
|
style={[
|
|
styles.amount,
|
|
{
|
|
color: isCredit ? '#18A558' : '#F04438',
|
|
},
|
|
]}
|
|
>
|
|
{isCredit ? '+' : '-'}₹{item.amount}
|
|
</Text>
|
|
|
|
<Text style={styles.balanceText}>Bal ₹{item.balanceAfter}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<Header title="Wallet" />
|
|
|
|
<View style={styles.balanceCard}>
|
|
<Text style={styles.balanceLabel}>Available Balance</Text>
|
|
|
|
<Text style={styles.balance}>₹{wallet?.balance.toFixed(2)}</Text>
|
|
|
|
<TouchableOpacity style={styles.addMoneyButton}>
|
|
{/* <Icon name="plus" color="#FFF" size={20} /> */}
|
|
<Text style={styles.addMoneyText}>Add Money</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<Text style={styles.sectionTitle}>Recent Transactions</Text>
|
|
|
|
<FlatList
|
|
data={walletTransactions}
|
|
keyExtractor={item => item.id}
|
|
renderItem={renderItem}
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={styles.listContainer}
|
|
ListEmptyComponent={
|
|
<View style={styles.emptyContainer}>
|
|
{/* <Icon name="wallet-outline" size={70} color="#BDBDBD" /> */}
|
|
<Text style={styles.emptyText}>No Transactions Yet</Text>
|
|
</View>
|
|
}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
export default WalletScreen;
|