feat: implement notification screen with swipe-to-delete functionality and add payment mode screen.
This commit is contained in:
Abin Toppo
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user