pay indivisual

src/components/JoinedGroupCard.tsx

@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ToastAndroid } from 'react-native';
 import colors from './colors';
 import { useNavigation } from '@react-navigation/native';
+import { BASE_URL } from '../utils/ApiUrls';
+import { apiCall } from '../utils/ApiHelper';
 
 interface JoinedGroup {
   id: string;
@@ -34,37 +36,55 @@ const formatDate = (dateArray: [number, number, number] | null): string => {
 };
 
 const getStatusStyle = (status: JoinedGroup['status']) => {
-    switch (status) {
-        case 'ACTIVE':
-            return {
-                backgroundColor: '#D1FAE5',
-                textColor: '#065F46',
-            };
-        case 'PENDING':
-            return {
-                backgroundColor: '#FEF3C7',
-                textColor: '#92400E',
-            };
-        case 'COMPLETED':
-            return {
-                backgroundColor: '#E5E7EB',
-                textColor: '#4B5563',
-            };
-        default:
-            return {
-                backgroundColor: '#E5E7EB',
-                textColor: '#4B5563',
-            };
-    }
+  switch (status) {
+    case 'ACTIVE':
+      return {
+        backgroundColor: '#D1FAE5',
+        textColor: '#065F46',
+      };
+    case 'PENDING':
+      return {
+        backgroundColor: '#FEF3C7',
+        textColor: '#92400E',
+      };
+    case 'COMPLETED':
+      return {
+        backgroundColor: '#E5E7EB',
+        textColor: '#4B5563',
+      };
+    default:
+      return {
+        backgroundColor: '#E5E7EB',
+        textColor: '#4B5563',
+      };
+  }
 };
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, onPayPress, hasPaid }) => {
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, hasPaid }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
   const navigation = useNavigation<any>();
+  const [loading, setLoading] = React.useState(false);
 
+  const onPayPress = async () => {
+    // Navigate to payment screen or handle payment logic
+    // navigation.navigate('PaymentScreen', { groupId: item.id, amount: item.contributionAmount });
+    setLoading(true);
+    try {
+      const res = await apiCall(`${BASE_URL}payments/contribute/${item?.id}?amount=${item?.contributionAmount}`, 'POST') as any;
+      console.log('payment res ', res)
+      if (res.status === 200 || res.status === 201 || res.statusCode === 200) {
+        ToastAndroid.show('Payment done!', ToastAndroid.SHORT);
+        setLoading(false);
+      }
+    } catch (error) {
+      ToastAndroid.show("An error occurred during payment.", ToastAndroid.SHORT);
+    } finally {
+      setLoading(false);
+    }
+  };
   return (
-    <TouchableOpacity style={styles.card} onPress={() => navigation.navigate("GroupDetails", {item, color:colors.black})}>
+    <TouchableOpacity style={styles.card} onPress={() => navigation.navigate("GroupDetails", { item, color: colors.black })}>
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.groupName}>{item.groupName}</Text>
@@ -87,7 +107,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, o
       {/* Footer with Dates & Buttons */}
       <View style={styles.footer}>
         <Text style={styles.dateText}>
-            {formatDate(item.startDate)} - {formatDate(item.endDate)}
+          {formatDate(item.startDate)} - {formatDate(item.endDate)}
         </Text>
         {/* Add Pay / Paid button here */}
         {hasPaid ? (
@@ -96,7 +116,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, o
           </View>
         ) : (
           <TouchableOpacity style={styles.payButton} onPress={onPayPress}>
-            <Text style={styles.payButtonText}>Pay</Text>
+            <Text style={styles.payButtonText}>{loading ? 'Loading...' : 'Pay'}</Text>
           </TouchableOpacity>
         )}
       </View>
@@ -106,7 +126,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, o
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor:colors.pastelOrange,
+    backgroundColor: colors.pastelOrange,
     borderRadius: 16,
     padding: 20,
     marginBottom: 16,
@@ -115,7 +135,7 @@ const styles = StyleSheet.create({
     shadowRadius: 10,
     shadowOffset: { width: 0, height: 4 },
     elevation: 5,
-    marginHorizontal:12
+    marginHorizontal: 12
   },
   header: {
     flexDirection: 'row',
@@ -153,12 +173,12 @@ const styles = StyleSheet.create({
     borderColor: colors.pastelOrange,
     marginBottom: 16,
     backgroundColor: colors.white,
-    borderRadius:15,
+    borderRadius: 15,
   },
   infoItem: {
-    padding:5,
-    paddingHorizontal:10,
-    backgroundColor:colors.white,
+    padding: 5,
+    paddingHorizontal: 10,
+    backgroundColor: colors.white,
     alignItems: 'flex-start',
   },
   infoLabel: {
@@ -197,7 +217,7 @@ const styles = StyleSheet.create({
   },
   progressBarFill: {
     height: '100%',
-    backgroundColor: colors.Settings,
+    backgroundColor: colors.pastelOrange,
     borderRadius: 4,
   },
   footer: {
@@ -212,7 +232,7 @@ const styles = StyleSheet.create({
   },
   // Pay button
   payButton: {
-    elevation:5,
+    elevation: 5,
     backgroundColor: colors.white,
     paddingHorizontal: 25,
     paddingVertical: 10,