pay indivisual

2025-10-27 15:00:59 +05:30
parent 459573bb9f c00c4aa519
commit e34b6fd165
9 changed files with 677 additions and 1002 deletions
@@ -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,
@@ -1,86 +1,41 @@
 import React, { useRef } from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  Animated,
-  ViewStyle,
-  StyleProp,
-} from "react-native";
+import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
-import colors from "../colors"; // Assuming your pastel colors are defined here
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import colors from "../colors";

 type CardProps = {
  title: string;
  subtitle?: string;
-  iconName?: IoniconsIconName;
+  iconName?: string;
  onPress?: () => void;
  backOne?: string;
  backTwo?: string;
-  style?: StyleProp<ViewStyle>;
 };

 const AnimatedCard: React.FC<CardProps> = ({
  title,
  subtitle,
-  iconName = "ellipse",
+  iconName = "ellipse-outline",
  onPress,
-  backOne = colors.pastelPink, // Defaulting to pastelPink from your preferences
-  backTwo = colors.primary,
-  style,
+  backOne = colors.primary,
+  backTwo = colors.pastelPink,
 }) => {
  const scale = useRef(new Animated.Value(1)).current;

-  const handlePressIn = () => {
-    Animated.spring(scale, {
-      toValue: 0.96,
-      useNativeDriver: true,
-      friction: 4,
-    }).start();
-  };
-
-  const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: true,
-      friction: 4,
-    }).start(() => {
-      if (onPress) {
-        onPress();
-      }
-    });
+  const handlePress = () => {
+    Animated.sequence([
+      Animated.spring(scale, { toValue: 0.95, useNativeDriver: true }),
+    ]).start(() => onPress && onPress());
  };

  return (
-    <TouchableWithoutFeedback onPressIn={handlePressIn} onPressOut={handlePressOut}>
-      <Animated.View style={[styles.card, style, { transform: [{ scale }] }]}>
-        <LinearGradient
-          colors={[backOne, backTwo]}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={styles.gradient}
-        >
-          {/* Decorative Graphics */}
-          <View style={styles.graphicCircleLarge} />
-          <View style={styles.graphicCircleSmall} />
-
-          {/* Content */}
-          <View style={styles.content}>
-            {iconName && (
-              <Ionicons
-                name={iconName}
-                size={38}
-                color="#fff"
-                style={styles.icon}
-              />
-            )}
-            <View style={styles.textContainer}>
-              <Text style={styles.title}>{title}</Text>
-              {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
-            </View>
-          </View>
+    <TouchableWithoutFeedback onPress={handlePress}>
+      <Animated.View style={[styles.card, { transform: [{ scale }] }]}>
+        <LinearGradient colors={[backOne, backTwo]} style={styles.gradient}>
+          <Ionicons name={iconName} size={38} color="#fff" style={styles.icon} />
+          <Text style={styles.title}>{title}</Text>
+          {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
        </LinearGradient>
      </Animated.View>
    </TouchableWithoutFeedback>
@@ -89,77 +44,21 @@ const AnimatedCard: React.FC<CardProps> = ({

 const styles = StyleSheet.create({
  card: {
-    // minWidth: 170,
    flex: 1,
-    height: 170,
-    marginHorizontal: 8,
-    marginVertical: 10,
-    borderRadius: 24,
+    height: 160,
+    margin: 8,
+    borderRadius: 20,
    overflow: "hidden",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 5 },
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
    elevation: 5,
  },
  gradient: {
-    position: "relative",
-    flex: 1,
-    // justifyContent: "center",
-    // alignItems: "center",
-    justifyContent: "space-between",
-    borderRadius: 24,
-    overflow: "hidden",
-    gap: 10,
-  },
-  graphicCircleLarge: {
-    position: "absolute",
-    top: -30,
-    right: -40,
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-  },
-  graphicCircleSmall: {
-    position: "absolute",
-    bottom: -20,
-    left: -25,
-    width: 70,
-    height: 70,
-    borderRadius: 35,
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-  },
-  content: {
-    padding: 20,
-    position: "relative",
-    zIndex: 1,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
-  icon: {
-    marginBottom: 12,
-  },
-  textContainer: {
-    alignItems: "center",
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "bold",
-    color: "#fff",
-    textTransform: "uppercase",
-    letterSpacing: 1,
-    textAlign: "center",
-  },
-  subtitle: {
-    fontSize: 13,
-    color: colors.white,
-    opacity: 0.9,
-    fontWeight: "500",
-    textAlign: "center",
-    marginTop: 4,
-  },
+  icon: { marginBottom: 10 },
+  title: { fontSize: 18, fontWeight: "bold", color: "#fff" },
+  subtitle: { fontSize: 13, color: "#fff", opacity: 0.9 },
 });

 export default AnimatedCard;