From 5ba1c5d3f0aa967241998ae69c534bdb8610eee4 Mon Sep 17 00:00:00 2001
From: Abin Toppo <abintoppo96@gmail.com>
Date: Thu, 26 Mar 2026 16:11:06 +0530
Subject: [PATCH] feat: implement notification screen with swipe-to-delete
 functionality and add payment mode screen.

---
 src/screens/notification/Notification.tsx | 244 +++++++++++-----------
 src/screens/payment/PaymentModeScreen.tsx |   4 +-
 2 files changed, 129 insertions(+), 119 deletions(-)

diff --git a/src/screens/notification/Notification.tsx b/src/screens/notification/Notification.tsx
index 2e46046..54f9c09 100644
--- a/src/screens/notification/Notification.tsx
+++ b/src/screens/notification/Notification.tsx
@@ -17,7 +17,7 @@ import Header from '../../components/common/Header';
 import { useNotificationHandler } from '../hook/useNotificationHandler';
 import { useTheme } from '../../theme/ThemeProvider';
 
-import { Swipeable } from 'react-native-gesture-handler';
+import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 import Animated, {
     useSharedValue,
     useAnimatedStyle,
@@ -111,135 +111,143 @@ const Notification = () => {
     const unreadCount = notifications.filter((i: any) => !i.read).length;
 
     // 🔥 Swipe Delete UI
-    const renderRightActions = (dragX: any, messageId: string) => {
-        const scale = dragX.interpolate({
-            inputRange: [-100, 0],
-            outputRange: [1, 0],
-            extrapolate: 'clamp',
-        });
-
+    const renderRightActions = (
+        messageId: string,
+        onDeleteAction: (id: string) => void,
+        swipeableMethods?: { close?: () => void }
+    ) => {
         return (
             <TouchableOpacity
-                onPress={() => handleDelete(messageId)}
+                onPress={() => {
+                    onDeleteAction(messageId);
+                    swipeableMethods?.close?.();
+                }}
                 style={styles(theme).deleteSwipe}
             >
-                <Animated.View style={{ transform: [{ scale }] }}>
-                    <LucideIcon name="trash-outline" size={22} color="#fff" />
-                    <Text style={styles(theme).deleteText}>Delete</Text>
-                </Animated.View>
+                <LucideIcon name="trash-outline" size={22} color="#fff" />
+                <Text style={styles(theme).deleteText}>Delete</Text>
             </TouchableOpacity>
         );
     };
 
-    const renderItem = ({ item }: any) => {
-        const scale = useSharedValue(1);
+const NotificationItem = ({
+    item,
+    onDelete,
+    onPressNotification,
+    theme,
+}: {
+    item: any;
+    onDelete: (id: string) => void;
+    onPressNotification: (
+        messageId: string,
+        screen: string,
+        groupId: string,
+        cycleNumber: string,
+        contributionId: string
+    ) => void;
+    theme: any;
+}) => {
+    const scale = useSharedValue(1);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+    }));
 
-        const animatedStyle = useAnimatedStyle(() => ({
-            transform: [{ scale: scale.value }],
-        }));
-
-        return (
-            <Swipeable
-                renderRightActions={(_, dragX) =>
-                    renderRightActions(dragX, item.messageId)
-                }
-            >
-                <Animated.View style={animatedStyle}>
-                    <TouchableOpacity
-                        activeOpacity={0.9}
-                        onPressIn={() => (scale.value = withSpring(0.96))}
-                        onPressOut={() => (scale.value = withSpring(1))}
-                        onPress={() =>
-                            handleMarkAsRead(
-                                item.messageId,
-                                item?.data?.msgType,
-                                item?.data?.groupId,
-                                item?.data?.cycleNumber,
-                                item?.data?.contributionId
-                            )
+    return (
+        <Swipeable
+            renderRightActions={(_, __, swipeableMethods) =>
+                renderRightActions(item.messageId, onDelete, swipeableMethods)
+            }
+        >
+            <Animated.View style={animatedStyle}>
+                <TouchableOpacity
+                    activeOpacity={0.9}
+                    onPressIn={() => (scale.value = withSpring(0.96))}
+                    onPressOut={() => (scale.value = withSpring(1))}
+                    onPress={() =>
+                        onPressNotification(
+                            item.messageId,
+                            item?.data?.msgType,
+                            item?.data?.groupId,
+                            item?.data?.cycleNumber,
+                            item?.data?.contributionId
+                        )
+                    }
+                >
+                    <LinearGradient
+                        colors={
+                            item.read
+                                ? [theme.colors.white, '#F8FAFF']
+                                : ['#FFF7ED', '#EEF2FF']
                         }
+                        style={[
+                            styles(theme).card,
+                            !item.read && styles(theme).unread,
+                            {
+                                borderLeftColor: getNotificationColor(
+                                    item.data.msgType
+                                ),
+                            },
+                        ]}
                     >
-                        <LinearGradient
-                            colors={
-                                item.read
-                                    ? [theme.colors.white, '#F8FAFF']
-                                    : ['#FFF7ED', '#EEF2FF']
-                            }
-                            style={[
-                                styles(theme).card,
-                                !item.read && styles(theme).unread,
-                                {
-                                    borderLeftColor: getNotificationColor(
-                                        item.data.msgType
-                                    ),
-                                },
-                            ]}
-                        >
-                            <View style={styles(theme).row}>
-                                {/* ICON */}
-                                <View style={styles(theme).iconBox}>
-                                    <LucideIcon
-                                        name={getNotificationIcon(
-                                            item.data.msgType
-                                        )}
-                                        size={22}
-                                        color={getNotificationColor(
-                                            item.data.msgType
-                                        )}
-                                    />
-                                </View>
-
-                                {/* TEXT */}
-                                <View style={styles(theme).content}>
-                                    <View style={styles(theme).topRow}>
-                                        <Text
-                                            style={[
-                                                styles(theme).title,
-                                                !item.read &&
-                                                    styles(theme).unreadTitle,
-                                            ]}
-                                        >
-                                            {item.data.title}
-                                        </Text>
-                                        <Text style={styles(theme).time}>
-                                            {formatTime(item.sentTime)}
-                                        </Text>
-                                    </View>
-
-                                    <Text style={styles(theme).message}>
-                                        {item.data.body}
-                                    </Text>
-
-                                    <View style={styles(theme).tagWrap}>
-                                        <Text
-                                            style={[
-                                                styles(theme).tag,
-                                                {
-                                                    backgroundColor:
-                                                        getNotificationColor(
-                                                            item.data.msgType
-                                                        ),
-                                                },
-                                            ]}
-                                        >
-                                            {getFilterDisplayName(
-                                                item.data.msgType
-                                            )}
-                                        </Text>
-                                    </View>
-                                </View>
-
-                                {/* DOT */}
-                                {!item.read && (
-                                    <View style={styles(theme).dot} />
-                                )}
+                        <View style={styles(theme).row}>
+                            <View style={styles(theme).iconBox}>
+                                <LucideIcon
+                                    name={getNotificationIcon(item.data.msgType)}
+                                    size={22}
+                                    color={getNotificationColor(item.data.msgType)}
+                                />
                             </View>
-                        </LinearGradient>
-                    </TouchableOpacity>
-                </Animated.View>
-            </Swipeable>
-        );
-    };
+
+                            <View style={styles(theme).content}>
+                                <View style={styles(theme).topRow}>
+                                    <Text
+                                        style={[
+                                            styles(theme).title,
+                                            !item.read && styles(theme).unreadTitle,
+                                        ]}
+                                    >
+                                        {item.data.title}
+                                    </Text>
+                                    <Text style={styles(theme).time}>
+                                        {formatTime(item.sentTime)}
+                                    </Text>
+                                </View>
+
+                                <Text style={styles(theme).message}>{item.data.body}</Text>
+
+                                <View style={styles(theme).tagWrap}>
+                                    <Text
+                                        style={[
+                                            styles(theme).tag,
+                                            {
+                                                backgroundColor: getNotificationColor(
+                                                    item.data.msgType
+                                                ),
+                                            },
+                                        ]}
+                                    >
+                                        {getFilterDisplayName(item.data.msgType)}
+                                    </Text>
+                                </View>
+                            </View>
+
+                            {!item.read && <View style={styles(theme).dot} />}
+                        </View>
+                    </LinearGradient>
+                </TouchableOpacity>
+            </Animated.View>
+        </Swipeable>
+    );
+};
+
+    const renderItem = ({ item }: any) => (
+        <NotificationItem
+            item={item}
+            onDelete={handleDelete}
+            onPressNotification={handleMarkAsRead}
+            theme={theme}
+        />
+    );
 
     return (
         <AppView>
diff --git a/src/screens/payment/PaymentModeScreen.tsx b/src/screens/payment/PaymentModeScreen.tsx
index b0d110b..5450ea7 100644
--- a/src/screens/payment/PaymentModeScreen.tsx
+++ b/src/screens/payment/PaymentModeScreen.tsx
@@ -313,7 +313,7 @@ const PaymentModeScreen: React.FC = () => {
                 paymentId: selectedMode || 0,
                 mobileNumber: '',
             };
-            console.log('payload', JSON.stringify(payload));
+            console.log('payyyyyyload', JSON.stringify(payload));
 
             const res = await apiCall(
                 `${BASE_URL}payments/pg/entry-fee/${groupId}?groupId=${groupId}&paymentId=${selectedMode}&mobileNumber=`,
@@ -360,7 +360,9 @@ const PaymentModeScreen: React.FC = () => {
             ) as any;
             
              console.log("payment payload ",payload)
+                console.log("payment res ",res)
             if (res?.status === 'success' || res?.statusCode === 200) {
+                          
                 const pgOrderNo = res?.data?.pgOrderNo;
                 if (pgOrderNo) {
                     // Start polling for transaction status