400 lines
16 KiB
TypeScript
400 lines
16 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import { View, FlatList, StyleSheet, Platform, Alert, BackHandler, Text, ToastAndroid } from 'react-native';
|
|
import LottieView from 'lottie-react-native';
|
|
import { InsideHeader } from '../../Component/Index';
|
|
import colors from '../../Constant/Color';
|
|
import { useWebSocketService } from '../../socket/Socket';
|
|
import Variables from '../../Constant/Variable';
|
|
import { useSelector } from 'react-redux';
|
|
import { apiCall } from '../../Axios/Axios';
|
|
import { AUCTION_ONE_TIME_BID, GET_AUCTION_DETAILS, REVERSE_AUCTION_ITEM, SELECTED_AUCTION_ITEM } from '../../Services/ApiCall/ApiUrls';
|
|
import { CommonActions, useFocusEffect, useNavigation } from '@react-navigation/native';
|
|
import NavigationString from '../../Constant/NavigationString';
|
|
import CountdownTimer from '../../Component/Counter/CountdownTimer';
|
|
import FontsFamily from '../../Constant/FontsFamily';
|
|
import ReverseBiddingCard from './Component/ReverseBiddingCard';
|
|
|
|
const StartReverseBidding = () => {
|
|
const SelectedAuction = useSelector((state: any) => state.auction.auction);
|
|
const loginUser = useSelector((state: any) => state.token.token)
|
|
const Navigation: any = useNavigation()
|
|
const [items, setItems] = useState<any>([]);
|
|
const [bidValues, setBidValues] = useState<Record<number, number>>({});
|
|
const [allBoolean, setAllBoolean] = useState({ showSuccess: false, showDialog: false, bidPayload: {}, oneTimeBid: false, rebid: false, reload: false })
|
|
const { subscribe, createRoom, placeBid } = useWebSocketService(
|
|
Variables.webSocketUrl,
|
|
() => console.log('Connected!'),
|
|
(error) => console.log('WebSocket Error:', error),
|
|
loginUser.token,
|
|
);
|
|
const getAuction = async () => {
|
|
const selectedRes = await apiCall<any>('get', GET_AUCTION_DETAILS, {}, { id: SelectedAuction.auctionId });
|
|
if (selectedRes.statusCode == 200 && selectedRes.data.contractorId.length) {
|
|
setAllBoolean((prev: any) => ({ ...prev, oneTimeBid: true }))
|
|
}
|
|
}
|
|
|
|
const getOneTimeBidValue = async () => {
|
|
try {
|
|
const selectedRes = await apiCall<any>('get', AUCTION_ONE_TIME_BID, {}, { auctionId: SelectedAuction.auctionId });
|
|
if (selectedRes.statusCode == 200) {
|
|
return selectedRes.data
|
|
} else {
|
|
return []
|
|
}
|
|
} catch (error) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const getAllAcutionItems = async () => {
|
|
try {
|
|
const payload = { auctionNumber: SelectedAuction.auctionNumber };
|
|
let auctionItem: any[] = [];
|
|
|
|
if (SelectedAuction.auctionPattern === 'Reverse') {
|
|
const res = await apiCall<any>('get', REVERSE_AUCTION_ITEM, {}, payload);
|
|
if (res?.statusCode === 200) auctionItem = res.data || [];
|
|
}
|
|
|
|
const selectedRes = await apiCall<any>('get', SELECTED_AUCTION_ITEM, {}, payload);
|
|
|
|
const uniqueArray: number[] = Array.from(
|
|
new Set(selectedRes?.data || [])
|
|
);
|
|
|
|
const filteredItems = auctionItem.filter(item =>
|
|
uniqueArray.includes(item.id)
|
|
);
|
|
|
|
if (SelectedAuction.auctionCategories == 'Live') {
|
|
const result = await createRoom(SelectedAuction.auctionNumber);
|
|
|
|
subscribe(`/topic/room/${SelectedAuction.auctionNumber}`, data => {
|
|
console.log('🔥 BID UPDATE:', data);
|
|
});
|
|
const bidAmountMap2 = new Map<number, { bidAmount: number; contractorId: number }>();
|
|
|
|
(result || []).forEach((r: any) => {
|
|
bidAmountMap2.set(r.auctionItemId, {
|
|
bidAmount: r.bidAmount,
|
|
contractorId: r.contractorId,
|
|
});
|
|
});
|
|
// Check One Time bid enable butoon
|
|
if (SelectedAuction.auctionCategories != 'Live') {
|
|
const myBid = result.find(
|
|
(bid: any) => bid.contractorId === loginUser.contractorId
|
|
);
|
|
|
|
if (myBid) {
|
|
setAllBoolean((prev: any) => ({ ...prev, oneTimeBid: true }))
|
|
}
|
|
}
|
|
|
|
const bidAmountMap = new Map<number, number>();
|
|
|
|
(result || []).forEach((r: any) => {
|
|
bidAmountMap.set(r.auctionItemId, r.bidAmount);
|
|
});
|
|
|
|
const updatedFilteredItems = filteredItems.map(item => {
|
|
const bidData = bidAmountMap2.get(item.id);
|
|
return {
|
|
...item,
|
|
bidAmount: bidData?.bidAmount ?? item.auctionStartValue,
|
|
bidAvilable: bidData?.bidAmount ?? 0,
|
|
me: bidData?.contractorId == loginUser.contractorId ? true : false
|
|
};
|
|
});
|
|
|
|
const initialBids: Record<number, number> = {};
|
|
updatedFilteredItems.forEach(item => {
|
|
initialBids[item.id] = item.bidAmount;
|
|
});
|
|
setBidValues(initialBids);
|
|
setItems(updatedFilteredItems);
|
|
} else {
|
|
let result = []
|
|
if (SelectedAuction.rebidAllowed) {
|
|
setAllBoolean((prev: any) => ({ ...prev, rebid: true }))
|
|
}
|
|
|
|
if (SelectedAuction.auctionCategories != 'Live') {
|
|
result = await getOneTimeBidValue()
|
|
}
|
|
const bidMap = new Map<number, any>();
|
|
|
|
result.forEach((bid: any) => {
|
|
bidMap.set(bid.auctionItemId, bid);
|
|
});
|
|
const mergedData = auctionItem.map((item: any) => {
|
|
const bid = bidMap.get(item.id);
|
|
|
|
if (!bid) {
|
|
return {
|
|
...item,
|
|
bidAmount: item.auctionStartValue,
|
|
contractorId: item.contractorId,
|
|
};
|
|
}
|
|
|
|
return {
|
|
...item,
|
|
bidAmount: bid.bidAmount,
|
|
bidId: bid.bidId,
|
|
contractorId: bid.contractorId,
|
|
contractorName: bid.contractorName,
|
|
me: bid.contractorId === loginUser.contractorId,
|
|
bidTime: bid.bidTime,
|
|
};
|
|
});
|
|
const initialBids: Record<number, number> = {};
|
|
mergedData.forEach(item => {
|
|
initialBids[item.id] = item.bidAmount;
|
|
});
|
|
setBidValues(initialBids);
|
|
setItems(mergedData)
|
|
setBidValues(initialBids);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching auction items:', error);
|
|
}
|
|
};
|
|
|
|
subscribe(`/topic/room/${SelectedAuction.auctionNumber}`, async (message) => {
|
|
|
|
const result = message[message.length - 1]
|
|
|
|
const updatedBidItem = (prev: any[]) =>
|
|
prev.map(item =>
|
|
item.id === result.auctionItemId
|
|
? { ...item, bidAmount: result.bidAmount, me: result.contractorId == loginUser.contractorId ? true : false }
|
|
: item
|
|
);
|
|
|
|
setItems(updatedBidItem);
|
|
|
|
setBidValues(prev => ({
|
|
...prev,
|
|
[result.auctionItemId]: result.bidAmount,
|
|
}));
|
|
try {
|
|
|
|
} catch (err) {
|
|
console.log('JSON parse error:', err);
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (SelectedAuction.auctionCategories == 'One-time') {
|
|
getAuction()
|
|
}
|
|
getAllAcutionItems();
|
|
subscribe(`/topic/room/${SelectedAuction.auctionNumber}`, (data) => { });
|
|
}, [allBoolean.reload]);
|
|
|
|
useEffect(() => {
|
|
const initial: Record<number, number> = {};
|
|
items.forEach((item: any) => {
|
|
initial[item.id] = item.bidAmount + item.bidVariationValue;
|
|
});
|
|
setBidValues(initial);
|
|
}, []);
|
|
|
|
const handleUpdate = (id: number, val: number) => {
|
|
setBidValues(prev => ({ ...prev, [id]: prev[id] + val }));
|
|
};
|
|
|
|
const submitBid = async (item: any) => {
|
|
const payload = {
|
|
itemId: item.id,
|
|
bidAmount: bidValues[item.id],
|
|
auctionId: SelectedAuction.auctionId,
|
|
contractorId: loginUser.contractorId,
|
|
fullName: loginUser.fullName,
|
|
roomId: SelectedAuction.auctionNumber,
|
|
};
|
|
setAllBoolean((prev: any) => ({ ...prev, bidPayload: payload, }));
|
|
Alert.alert(
|
|
'Confirm Bid',
|
|
`Are you sure you want to place a bid of ₹${payload.bidAmount}?`,
|
|
[
|
|
{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: 'Submit',
|
|
onPress: () => {
|
|
placeBidSubmit(payload);
|
|
},
|
|
},
|
|
],
|
|
{ cancelable: true }
|
|
);
|
|
};
|
|
|
|
const placeBidSubmit = async (data: any) => {
|
|
try {
|
|
const result: any = await placeBid(data);
|
|
|
|
if (result?.status && result.data) {
|
|
const updatedBidItem = (prev: any[]) =>
|
|
prev.map(item =>
|
|
item.id === result.data.auctionItemId
|
|
? { ...item, bidAmount: result.data.bidAmount, me: result.data?.contractorId == loginUser.contractorId ? true : false }
|
|
: item
|
|
);
|
|
|
|
getAllAcutionItems()
|
|
}
|
|
} catch (error) {
|
|
console.error('Error placing bid:', error);
|
|
}
|
|
};
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
const onBackPress = () => {
|
|
Alert.alert(
|
|
'Confirm',
|
|
'Do you want to go back to Dashboard?',
|
|
[
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{
|
|
text: 'Yes',
|
|
onPress: () => {
|
|
Navigation.dispatch(
|
|
CommonActions.reset({
|
|
index: 0,
|
|
routes: [{ name: NavigationString.Home }],
|
|
})
|
|
);
|
|
},
|
|
},
|
|
],
|
|
{ cancelable: true }
|
|
);
|
|
|
|
return true; // block default back action
|
|
};
|
|
|
|
const subscription = BackHandler.addEventListener(
|
|
'hardwareBackPress',
|
|
onBackPress
|
|
);
|
|
|
|
return () => subscription.remove();
|
|
}, [Navigation])
|
|
);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<InsideHeader title="Bidding Panel" showArrow />
|
|
<View style={styles.container2}>
|
|
<Text style={styles.title}>
|
|
{SelectedAuction.deptName}
|
|
</Text>
|
|
|
|
<View style={styles.timerWrapper}>
|
|
<CountdownTimer
|
|
endDate={SelectedAuction.keyDates.auctionBidding.endDateTime}
|
|
myStyle={{ fontSize: 30 }}
|
|
size={30}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<FlatList
|
|
data={items}
|
|
keyExtractor={item => item.id.toString()}
|
|
renderItem={({ item, index }) => (
|
|
<ReverseBiddingCard
|
|
item={{ ...item, index }}
|
|
bidValue={bidValues[item.id] || 0}
|
|
onIncrease={() => handleUpdate(item.id, item.emdAmount)}
|
|
onDecrease={() => handleUpdate(item.id, -item.emdAmount)}
|
|
onPlaceBid={() => { submitBid(item) }}
|
|
SelectedAuction={SelectedAuction}
|
|
allBoolean={allBoolean}
|
|
setAllBoolean={setAllBoolean}
|
|
/>
|
|
)}
|
|
contentContainerStyle={{ padding: 16 }}
|
|
/>
|
|
|
|
{allBoolean.showSuccess && (
|
|
<View style={styles.overlay}>
|
|
<LottieView
|
|
source={require('../../lottie/Success.json')}
|
|
autoPlay
|
|
loop={false}
|
|
style={{ width: 200, height: 200 }}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default StartReverseBidding;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: colors.white },
|
|
container2: {
|
|
paddingHorizontal: 16,
|
|
paddingTop: 12,
|
|
paddingBottom: 8,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontFamily: FontsFamily.poppinsSemiBold,
|
|
color: colors.black,
|
|
marginBottom: 6,
|
|
// textAlign:'center'
|
|
},
|
|
timerWrapper: {
|
|
alignItems: 'center',
|
|
},
|
|
card: {
|
|
backgroundColor: '#FFF',
|
|
borderRadius: 24,
|
|
padding: 20,
|
|
marginBottom: 16,
|
|
borderWidth: 1,
|
|
borderColor: '#E2E8F0',
|
|
overflow: 'hidden',
|
|
...Platform.select({ ios: { shadowColor: '#000', shadowOpacity: 0.05, shadowRadius: 10 }, android: { elevation: 2 } }),
|
|
},
|
|
leadingCard: { borderColor: '#22C55E', borderWidth: 2, backgroundColor: '#F0FDF4' },
|
|
cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' },
|
|
headerRight: { flexDirection: 'row', alignItems: 'center', gap: 8 },
|
|
productName: { fontSize: 18, fontWeight: 'bold', color: '#1E293B' },
|
|
itemIdText: { fontSize: 12, color: '#64748B', marginTop: 2 },
|
|
badge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 8 },
|
|
liveBadge: { backgroundColor: '#FEE2E2' },
|
|
meBadge: { backgroundColor: '#BBF7D0' },
|
|
badgeText: { fontSize: 10, fontWeight: '900' },
|
|
liveText: { color: '#EF4444' },
|
|
meText: { color: '#15803D' },
|
|
arrow: { fontSize: 10, color: '#94A3B8' },
|
|
priceRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 },
|
|
label: { fontSize: 11, color: '#94A3B8', textTransform: 'uppercase', fontWeight: '600' },
|
|
mainPrice: { fontSize: 22, fontWeight: '900', color: '#0F172A' },
|
|
incrementText: { fontSize: 16, fontWeight: '700', color: '#3B82F6' },
|
|
collapsibleContainer: { overflow: 'hidden' },
|
|
divider: { height: 1, backgroundColor: '#E2E8F0', marginVertical: 10 },
|
|
bidLabel: { fontSize: 13, fontWeight: '600', color: '#475569', marginBottom: 10 },
|
|
stepperContainer: { flexDirection: 'row', gap: 12, marginBottom: 20 },
|
|
stepBtn: { width: 45, height: 45, backgroundColor: colors.primary, borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
|
|
disabledBtn: { backgroundColor: '#CBD5E1' },
|
|
stepText: { color: '#FFF', fontSize: 20, fontWeight: 'bold' },
|
|
inputBox: { flex: 1, height: 45, backgroundColor: '#F1F5F9', borderRadius: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
|
|
currency: { fontSize: 16, fontWeight: 'bold', color: '#64748B', marginRight: 4 },
|
|
bidValueText: { fontSize: 18, fontWeight: '800', color: '#0F172A' },
|
|
submitBtn: { height: 50, backgroundColor: colors.primary, borderRadius: 15, justifyContent: 'center', alignItems: 'center' },
|
|
submitBtnText: { color: '#FFF', fontSize: 16, fontWeight: 'bold' },
|
|
overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(255,255,255,0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 99 },
|
|
}); |