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 { useNotificationHandler } from '../hook/useNotificationHandler';
|
||||||
import { useTheme } from '../../theme/ThemeProvider';
|
import { useTheme } from '../../theme/ThemeProvider';
|
||||||
|
|
||||||
import { Swipeable } from 'react-native-gesture-handler';
|
import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
|
||||||
import Animated, {
|
import Animated, {
|
||||||
useSharedValue,
|
useSharedValue,
|
||||||
useAnimatedStyle,
|
useAnimatedStyle,
|
||||||
@@ -111,135 +111,143 @@ const Notification = () => {
|
|||||||
const unreadCount = notifications.filter((i: any) => !i.read).length;
|
const unreadCount = notifications.filter((i: any) => !i.read).length;
|
||||||
|
|
||||||
// 🔥 Swipe Delete UI
|
// 🔥 Swipe Delete UI
|
||||||
const renderRightActions = (dragX: any, messageId: string) => {
|
const renderRightActions = (
|
||||||
const scale = dragX.interpolate({
|
messageId: string,
|
||||||
inputRange: [-100, 0],
|
onDeleteAction: (id: string) => void,
|
||||||
outputRange: [1, 0],
|
swipeableMethods?: { close?: () => void }
|
||||||
extrapolate: 'clamp',
|
) => {
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
onPress={() => handleDelete(messageId)}
|
onPress={() => {
|
||||||
|
onDeleteAction(messageId);
|
||||||
|
swipeableMethods?.close?.();
|
||||||
|
}}
|
||||||
style={styles(theme).deleteSwipe}
|
style={styles(theme).deleteSwipe}
|
||||||
>
|
>
|
||||||
<Animated.View style={{ transform: [{ scale }] }}>
|
<LucideIcon name="trash-outline" size={22} color="#fff" />
|
||||||
<LucideIcon name="trash-outline" size={22} color="#fff" />
|
<Text style={styles(theme).deleteText}>Delete</Text>
|
||||||
<Text style={styles(theme).deleteText}>Delete</Text>
|
|
||||||
</Animated.View>
|
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderItem = ({ item }: any) => {
|
const NotificationItem = ({
|
||||||
const scale = useSharedValue(1);
|
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(() => ({
|
return (
|
||||||
transform: [{ scale: scale.value }],
|
<Swipeable
|
||||||
}));
|
renderRightActions={(_, __, swipeableMethods) =>
|
||||||
|
renderRightActions(item.messageId, onDelete, swipeableMethods)
|
||||||
return (
|
}
|
||||||
<Swipeable
|
>
|
||||||
renderRightActions={(_, dragX) =>
|
<Animated.View style={animatedStyle}>
|
||||||
renderRightActions(dragX, item.messageId)
|
<TouchableOpacity
|
||||||
}
|
activeOpacity={0.9}
|
||||||
>
|
onPressIn={() => (scale.value = withSpring(0.96))}
|
||||||
<Animated.View style={animatedStyle}>
|
onPressOut={() => (scale.value = withSpring(1))}
|
||||||
<TouchableOpacity
|
onPress={() =>
|
||||||
activeOpacity={0.9}
|
onPressNotification(
|
||||||
onPressIn={() => (scale.value = withSpring(0.96))}
|
item.messageId,
|
||||||
onPressOut={() => (scale.value = withSpring(1))}
|
item?.data?.msgType,
|
||||||
onPress={() =>
|
item?.data?.groupId,
|
||||||
handleMarkAsRead(
|
item?.data?.cycleNumber,
|
||||||
item.messageId,
|
item?.data?.contributionId
|
||||||
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
|
<View style={styles(theme).row}>
|
||||||
colors={
|
<View style={styles(theme).iconBox}>
|
||||||
item.read
|
<LucideIcon
|
||||||
? [theme.colors.white, '#F8FAFF']
|
name={getNotificationIcon(item.data.msgType)}
|
||||||
: ['#FFF7ED', '#EEF2FF']
|
size={22}
|
||||||
}
|
color={getNotificationColor(item.data.msgType)}
|
||||||
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>
|
</View>
|
||||||
</LinearGradient>
|
|
||||||
</TouchableOpacity>
|
<View style={styles(theme).content}>
|
||||||
</Animated.View>
|
<View style={styles(theme).topRow}>
|
||||||
</Swipeable>
|
<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 (
|
return (
|
||||||
<AppView>
|
<AppView>
|
||||||
|
|||||||
@@ -313,7 +313,7 @@ const PaymentModeScreen: React.FC = () => {
|
|||||||
paymentId: selectedMode || 0,
|
paymentId: selectedMode || 0,
|
||||||
mobileNumber: '',
|
mobileNumber: '',
|
||||||
};
|
};
|
||||||
console.log('payload', JSON.stringify(payload));
|
console.log('payyyyyyload', JSON.stringify(payload));
|
||||||
|
|
||||||
const res = await apiCall(
|
const res = await apiCall(
|
||||||
`${BASE_URL}payments/pg/entry-fee/${groupId}?groupId=${groupId}&paymentId=${selectedMode}&mobileNumber=`,
|
`${BASE_URL}payments/pg/entry-fee/${groupId}?groupId=${groupId}&paymentId=${selectedMode}&mobileNumber=`,
|
||||||
@@ -360,7 +360,9 @@ const PaymentModeScreen: React.FC = () => {
|
|||||||
) as any;
|
) as any;
|
||||||
|
|
||||||
console.log("payment payload ",payload)
|
console.log("payment payload ",payload)
|
||||||
|
console.log("payment res ",res)
|
||||||
if (res?.status === 'success' || res?.statusCode === 200) {
|
if (res?.status === 'success' || res?.statusCode === 200) {
|
||||||
|
|
||||||
const pgOrderNo = res?.data?.pgOrderNo;
|
const pgOrderNo = res?.data?.pgOrderNo;
|
||||||
if (pgOrderNo) {
|
if (pgOrderNo) {
|
||||||
// Start polling for transaction status
|
// Start polling for transaction status
|
||||||
|
|||||||
Reference in New Issue
Block a user