homePage update
This commit is contained in:
Abin Toppo
@@ -1,12 +1,246 @@
|
||||
import { View, Text } from 'react-native'
|
||||
import React from 'react'
|
||||
|
||||
const Payments = () => {
|
||||
return (
|
||||
<View>
|
||||
<Text>Payments</Text>
|
||||
</View>
|
||||
)
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { View, Text, StyleSheet, ActivityIndicator, ScrollView, RefreshControl, Alert, TouchableOpacity } from 'react-native';
|
||||
import { useRoute, useNavigation } from '@react-navigation/native';
|
||||
import * as Keychain from 'react-native-keychain';
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from '../../components/colors'; // Assuming you have a colors file
|
||||
import AppView from '../../components/AppView';
|
||||
import { apiCall } from '../../utils/ApiHelper';
|
||||
interface ApiResponse<T> {
|
||||
status: 'success' | 'error';
|
||||
data: T;
|
||||
message?: string;
|
||||
statusCode: number;
|
||||
}
|
||||
|
||||
export default Payments
|
||||
// Define the shape of your payment details data
|
||||
interface PaymentDetails {
|
||||
// Add properties based on your API response, for example:
|
||||
amount: number;
|
||||
currency: string;
|
||||
dueDate: string;
|
||||
paidBy: string[];
|
||||
}
|
||||
const Payments = () => {
|
||||
const route = useRoute<any>();
|
||||
const navigation = useNavigation<any>();
|
||||
const { groupId } = route.params;
|
||||
|
||||
const [paymentDetails, setPaymentDetails] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
const fetchPaymentDetails = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// The apiCall function likely handles tokens internally, so we call it directly.
|
||||
const response = await apiCall(
|
||||
`https://exotic-humpback-mistakenly.ngrok-free.app/api/payments/current/payment/details/${groupId}`,
|
||||
'GET'
|
||||
) as ApiResponse<PaymentDetails>; // Cast the response to the correct type
|
||||
|
||||
console.log("Payment Details Response:", response);
|
||||
|
||||
// Check the response and status property for success
|
||||
if (response && response.statusCode === 200) {
|
||||
setPaymentDetails(response.data);
|
||||
} else {
|
||||
// Use the message from the response object
|
||||
Alert.alert("Error", response?.message || "Failed to fetch payment details.");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Fetch payment details error:", error);
|
||||
Alert.alert("Error", error.message || "An unexpected error occurred while fetching payment details.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [groupId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPaymentDetails();
|
||||
}, [fetchPaymentDetails]);
|
||||
|
||||
const onRefresh = () => {
|
||||
setRefreshing(true);
|
||||
fetchPaymentDetails();
|
||||
};
|
||||
|
||||
const renderParticipant = (participant: any) => (
|
||||
<View key={participant.userId} style={styles.participantCard}>
|
||||
<View style={styles.participantInfo}>
|
||||
<Text style={styles.participantName}>{participant.firstName} {participant.lastName}</Text>
|
||||
<Text style={styles.participantMobile}>{participant.mobile}</Text>
|
||||
</View>
|
||||
<View style={styles.paymentStatus}>
|
||||
<Text style={[
|
||||
styles.statusText,
|
||||
{ color: participant.status === 'PENDING' ? colors.warning : colors.success }
|
||||
]}>
|
||||
{participant.status}
|
||||
</Text>
|
||||
<Text style={styles.amountText}>
|
||||
₹{participant.paidAmount} / ₹{participant.contributionAmount}
|
||||
</Text>
|
||||
{/* {participant.status === 'PENDING' && (
|
||||
<TouchableOpacity style={styles.payButton}>
|
||||
<Text style={styles.payButtonText}>Pay Now</Text>
|
||||
</TouchableOpacity>
|
||||
)} */}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <ActivityIndicator style={styles.centered} size="large" color={colors.primary} />;
|
||||
}
|
||||
|
||||
if (!paymentDetails) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<Text>No payment details found.</Text>
|
||||
<TouchableOpacity onPress={fetchPaymentDetails} style={styles.retryButton}>
|
||||
<Text style={styles.retryButtonText}>Tap to retry</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppView>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>{paymentDetails.groupName}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.summaryContainer}>
|
||||
<View style={styles.summaryBox}>
|
||||
<Text style={styles.summaryLabel}>Current Cycle</Text>
|
||||
<Text style={styles.summaryValue}>{paymentDetails.currentCycle}</Text>
|
||||
</View>
|
||||
<View style={styles.summaryBox}>
|
||||
<Text style={styles.summaryLabel}>Contribution</Text>
|
||||
<Text style={styles.summaryValue}>₹{paymentDetails.contributionAmount}</Text>
|
||||
</View>
|
||||
<View style={styles.summaryBox}>
|
||||
<Text style={styles.summaryLabel}>Total Due</Text>
|
||||
<Text style={[styles.summaryValue, { color: colors.danger }]}>₹{paymentDetails.totalDueWithLateFee}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionTitle}>Participants</Text>
|
||||
{paymentDetails.participants.map(renderParticipant)}
|
||||
</ScrollView>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f4f6f8',
|
||||
},
|
||||
header: {
|
||||
|
||||
padding: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottomLeftRadius: 20,
|
||||
borderBottomRightRadius: 20,
|
||||
},
|
||||
backButton: {
|
||||
marginRight: 15,
|
||||
},
|
||||
headerTitle: {
|
||||
color: '#000000ff',
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
summaryContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
padding: 20,
|
||||
backgroundColor: '#fff',
|
||||
margin: 15,
|
||||
borderRadius: 10,
|
||||
},
|
||||
summaryBox: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
summaryLabel: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
summaryValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: colors.primary,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
marginLeft: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
participantCard: {
|
||||
backgroundColor: '#fff',
|
||||
marginHorizontal: 15,
|
||||
marginBottom: 10,
|
||||
borderRadius: 10,
|
||||
padding: 15,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
participantInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
participantName: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
participantMobile: {
|
||||
fontSize: 14,
|
||||
color: '#888',
|
||||
},
|
||||
paymentStatus: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
amountText: {
|
||||
fontSize: 14,
|
||||
},
|
||||
payButton: {
|
||||
marginTop: 5,
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: 5,
|
||||
},
|
||||
payButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
retryButton: {
|
||||
marginTop: 10,
|
||||
padding: 10,
|
||||
},
|
||||
retryButtonText: {
|
||||
color: colors.primary,
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
|
||||
export default Payments;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user