align business logic organizer side
This commit is contained in:
Jaanu423
@@ -0,0 +1,251 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import { StyleSheet, Text, View, Animated, ToastAndroid } from 'react-native'
|
||||
import { Ionicons } from '@react-native-vector-icons/ionicons'
|
||||
import CustomModal from '../../components/common/CustomModal'
|
||||
import { apiCall } from '../../utils/ApiHelper'
|
||||
import { BASE_URL } from '../../utils/ApiUrls'
|
||||
|
||||
interface WinnerUserProps {
|
||||
data: {
|
||||
withdrawalDone: boolean
|
||||
selectionDone: boolean
|
||||
selectionId: string
|
||||
currentCycle: number
|
||||
pendingParticipants: number
|
||||
withdrawalDetails: any
|
||||
paidParticipants: number
|
||||
selectedUser: {
|
||||
firstName: string
|
||||
lastName: string
|
||||
mobile: string
|
||||
id: string
|
||||
userId: number
|
||||
email: string
|
||||
}
|
||||
cycleEndDate: number[]
|
||||
cycleStartDate: number[]
|
||||
allPaid: boolean
|
||||
selectionDate: number[]
|
||||
totalParticipants: number
|
||||
cycleStatus: string
|
||||
selectionMethod: string
|
||||
canProceedToWithdrawal: boolean
|
||||
}
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
groupId:string
|
||||
}
|
||||
|
||||
const WinnerUser: React.FC<WinnerUserProps> = ({ data, visible, onClose, groupId }) => {
|
||||
const {
|
||||
withdrawalDone,
|
||||
selectionDone,
|
||||
currentCycle,
|
||||
totalParticipants,
|
||||
paidParticipants,
|
||||
pendingParticipants,
|
||||
allPaid,
|
||||
selectedUser,
|
||||
cycleStatus,
|
||||
selectionMethod,
|
||||
canProceedToWithdrawal,
|
||||
} = data || {}
|
||||
|
||||
const scaleAnim = useRef(new Animated.Value(0)).current
|
||||
const pulseAnim = useRef(new Animated.Value(1)).current
|
||||
const fadeAnim = useRef(new Animated.Value(0)).current
|
||||
|
||||
console.log("winner data : ", data)
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
Animated.spring(scaleAnim, {
|
||||
toValue: 1,
|
||||
friction: 5,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 1.1,
|
||||
duration: 600,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 1,
|
||||
duration: 600,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
])
|
||||
).start()
|
||||
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 1,
|
||||
duration: 1500,
|
||||
useNativeDriver: true,
|
||||
}).start()
|
||||
} else {
|
||||
scaleAnim.setValue(0)
|
||||
pulseAnim.setValue(1)
|
||||
fadeAnim.setValue(0)
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
const onConfirm = async () => {
|
||||
try {
|
||||
const res = await apiCall(`${BASE_URL}payments/withdraw/${groupId}/${data?.selectedUser?.id}`, 'PUT')
|
||||
console.log("res winner user : ", res)
|
||||
ToastAndroid.show('Withdrawal successful', ToastAndroid.SHORT)
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.log('Confirm payment error : ', error)
|
||||
} finally {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<CustomModal
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
confirmText={canProceedToWithdrawal ? 'Proceed to Withdraw' : 'Close'}
|
||||
onConfirm={canProceedToWithdrawal ? onConfirm : onClose}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
<Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Ionicons name="trophy" size={24} color="#ff9800" />
|
||||
<Text style={styles.cycle}>Cycle {currentCycle} Winner</Text>
|
||||
<Ionicons name="trophy" size={24} color="#ff9800" />
|
||||
</View>
|
||||
|
||||
{/* Winner Name */}
|
||||
<Animated.Text style={[styles.name, { transform: [{ scale: pulseAnim }] }]}>
|
||||
{selectedUser?.firstName} {selectedUser?.lastName}
|
||||
</Animated.Text>
|
||||
|
||||
{/* Details */}
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="call" size={18} color="#555" />
|
||||
<Text style={styles.label}>Mobile:</Text>
|
||||
<Text style={styles.value}>{selectedUser?.mobile}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="mail" size={18} color="#555" />
|
||||
<Text style={styles.label}>Email:</Text>
|
||||
<Text style={styles.value}>{selectedUser?.email}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="people" size={18} color="#555" />
|
||||
<Text style={styles.label}>Total Participants:</Text>
|
||||
<Text style={styles.value}>{totalParticipants}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="cash" size={18} color="#555" />
|
||||
<Text style={styles.label}>Paid Participants:</Text>
|
||||
<Text style={styles.value}>{paidParticipants}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="hourglass" size={18} color="#555" />
|
||||
<Text style={styles.label}>Pending Participants:</Text>
|
||||
<Text style={styles.value}>{pendingParticipants}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons
|
||||
name={allPaid ? 'checkmark-circle' : 'close-circle'}
|
||||
size={18}
|
||||
color={allPaid ? '#4caf50' : '#f44336'}
|
||||
/>
|
||||
<Text style={styles.label}>All Paid:</Text>
|
||||
<Text style={styles.value}>{allPaid ? 'Yes' : 'No'}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons
|
||||
name={withdrawalDone ? 'checkmark-done' : 'time'}
|
||||
size={18}
|
||||
color={withdrawalDone ? '#4caf50' : '#ff9800'}
|
||||
/>
|
||||
<Text style={styles.label}>Withdrawal Status:</Text>
|
||||
<Text style={styles.value}>{withdrawalDone ? 'Completed' : 'Pending'}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="git-branch" size={18} color="#555" />
|
||||
<Text style={styles.label}>Selection Method:</Text>
|
||||
<Text style={styles.value}>{selectionMethod}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="stats-chart" size={18} color="#555" />
|
||||
<Text style={styles.label}>Cycle Status:</Text>
|
||||
<Text style={styles.value}>{cycleStatus}</Text>
|
||||
</View>
|
||||
|
||||
<Animated.Text style={[styles.congrats, { opacity: fadeAnim }]}>
|
||||
{selectionDone ? 'Congratulations!' : 'Selection Pending'}
|
||||
</Animated.Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</CustomModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default WinnerUser
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 16,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
cycle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#ff9800',
|
||||
marginHorizontal: 8,
|
||||
textAlign: 'center',
|
||||
},
|
||||
name: {
|
||||
fontSize: 22,
|
||||
fontWeight: '800',
|
||||
color: '#333',
|
||||
marginBottom: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#555',
|
||||
marginLeft: 6,
|
||||
marginRight: 4,
|
||||
},
|
||||
value: {
|
||||
fontSize: 16,
|
||||
color: '#000',
|
||||
},
|
||||
congrats: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
color: '#4caf50',
|
||||
marginTop: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user