359 lines
15 KiB
TypeScript
359 lines
15 KiB
TypeScript
import React, { memo, useCallback, useRef, useState } from 'react';
|
||
import { View, Text, TouchableOpacity, StyleSheet, Platform, TextInput } from 'react-native';
|
||
import Animated, { FadeInUp, Layout, interpolate, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
|
||
import colors_const from '../../../Constant/Color';
|
||
import AuctionItemDetail from '../../Auction/Modal/AuctionItemDetail';
|
||
import MainStyle from '../../../Styles/MainStyle';
|
||
import { useTheme } from '../../../Hooks/useTheme';
|
||
import AppText from '../../../components/AppText';
|
||
import axios, { all } from 'axios';
|
||
import Variables from '../../../Constant/Variable';
|
||
import { useSelector } from 'react-redux';
|
||
import { showErrorAlert, showSuccessAlert } from '../../../Constant/ShowDailog';
|
||
import { Loader } from '../../../Component/Index';
|
||
|
||
const ReverseBiddingCard = ({ item, bidValue, onIncrease, onDecrease, onPlaceBid, SelectedAuction, allBoolean, setAllBoolean }: any) => {
|
||
const { colors } = useTheme();
|
||
const styles = React.useMemo(() => makeStyles(colors), [colors]);
|
||
const Token = useSelector((state: any) => state.token.token)
|
||
const [allState, setAllState] = useState({ isLoading: false })
|
||
const [showDetail, setShowDetail] = useState(false);
|
||
const [value, setValue] = useState(`${item.bidAmount}`);
|
||
const canDecrease = bidValue > item.emdAmount;
|
||
const canIncrease = bidValue < item.bidAmount;
|
||
// Animation Part Rohit Start
|
||
|
||
const expandedRef = useRef(false);
|
||
const animation = useSharedValue(0);
|
||
|
||
const toggleExpand = useCallback(() => {
|
||
expandedRef.current = !expandedRef.current;
|
||
animation.value = withSpring(expandedRef.current ? 1 : 0, {
|
||
damping: 15,
|
||
stiffness: 140,
|
||
});
|
||
}, []);
|
||
|
||
const bodyStyle = useAnimatedStyle(() => ({
|
||
height: interpolate(animation.value, [0, 1], [0, 190]),
|
||
opacity: interpolate(animation.value, [0, 0.5, 1], [0, 0, 1]),
|
||
marginTop: interpolate(animation.value, [0, 1], [0, 15]),
|
||
}));
|
||
const bodyStyle2 = useAnimatedStyle(() => ({
|
||
height: interpolate(animation.value, [0, 1], [0, 100]),
|
||
opacity: interpolate(animation.value, [0, 0.5, 1], [0, 0, 1]),
|
||
marginTop: interpolate(animation.value, [0, 1], [0, 15]),
|
||
}));
|
||
|
||
const arrowStyle = useAnimatedStyle(() => ({
|
||
transform: [
|
||
{
|
||
rotate: `${interpolate(animation.value, [0, 1], [0, 180])}deg`,
|
||
},
|
||
],
|
||
}));
|
||
|
||
// Animation Part Rohit End
|
||
|
||
const MAX_VALUE = Number(item.auctionStartValue);
|
||
|
||
const handleChange = (text: string) => {
|
||
let cleaned = text.replace(/[^0-9.]/g, '');
|
||
if ((cleaned.match(/\./g) || []).length > 1) return;
|
||
if (cleaned === '') {
|
||
setValue('');
|
||
return;
|
||
}
|
||
const numericValue = Number(cleaned);
|
||
if (numericValue < 0) return;
|
||
if (numericValue > MAX_VALUE) return;
|
||
setValue(cleaned);
|
||
};
|
||
|
||
const oneTimePlaceBid = async () => {
|
||
try {
|
||
setAllState((prev: any) => ({ ...prev, isLoading: true }))
|
||
const payload = {
|
||
itemId: item.id,
|
||
bidAmount: Number(value),
|
||
auctionId: SelectedAuction.auctionId,
|
||
contractorId: Token.contractorId,
|
||
fullName: Token.fullName,
|
||
};
|
||
|
||
|
||
const res = await axios.post(
|
||
`${Variables.socketUrl}bidding/placeBidForAuction`,
|
||
[payload],
|
||
{ headers: { Authentication: `Bearer ${Token.token}` } }
|
||
);
|
||
|
||
if (res.data.statusCode === 200) {
|
||
showSuccessAlert(res.data.message);
|
||
}
|
||
setAllBoolean((prev: any) => ({ ...prev, reload: !prev.reload }))
|
||
} catch (error) {
|
||
if (axios.isAxiosError(error)) {
|
||
showErrorAlert(error.response?.data.message)
|
||
} else {
|
||
console.log('UNKNOWN ERROR:', error);
|
||
}
|
||
|
||
} finally {
|
||
setAllState((prev: any) => ({ ...prev, isLoading: false }))
|
||
}
|
||
}
|
||
|
||
return (
|
||
<View>
|
||
{!showDetail ? (
|
||
<Animated.View
|
||
layout={Layout.springify()}
|
||
entering={FadeInUp.delay(100)}
|
||
style={[
|
||
styles.card,
|
||
item.me ? styles.leadingCard : undefined,
|
||
{
|
||
borderColor: item.me ? colors.success : colors.error,
|
||
backgroundColor: item.me ? `${colors.success}10` : `${colors.error}10`,
|
||
},
|
||
]}
|
||
>
|
||
{/* HEADER */}
|
||
<TouchableOpacity
|
||
activeOpacity={0.7}
|
||
onPress={() => setShowDetail(true)}
|
||
style={styles.cardHeader}
|
||
>
|
||
<View style={{ flex: 1 }}>
|
||
<AppText variant="h4" color={colors.text} bold style={styles.productName as any}>{item.productName}</AppText>
|
||
<AppText variant="caption" color={colors.textSecondary} style={styles.itemIdText as any}>
|
||
Initial Amt : ₹{item.auctionStartValue}
|
||
</AppText>
|
||
</View>
|
||
|
||
<TouchableOpacity style={styles.headerRight} onPress={toggleExpand}>
|
||
<View style={[MainStyle.flexBetween, { gap: 10 }]}>
|
||
<View
|
||
style={[
|
||
styles.badge,
|
||
item.me ? styles.meBadge : styles.liveBadge,
|
||
]}
|
||
>
|
||
<AppText
|
||
variant="caption"
|
||
bold
|
||
style={[
|
||
styles.badgeText as any,
|
||
item.me ? styles.meText : styles.liveText,
|
||
]}
|
||
>
|
||
{item.me ? 'LEADING' : 'LIVE'}
|
||
</AppText>
|
||
</View>
|
||
|
||
<Animated.Text style={[styles.arrow, { color: colors.textSecondary }, arrowStyle]}>
|
||
▼
|
||
</Animated.Text>
|
||
</View>
|
||
<AppText variant="caption" color={colors.textSecondary} style={styles.itemIdText as any}>
|
||
{SelectedAuction?.auctionNumber}
|
||
</AppText>
|
||
</TouchableOpacity>
|
||
</TouchableOpacity>
|
||
|
||
{/* PRICE INFO */}
|
||
<View style={styles.priceRow}>
|
||
<View>
|
||
<AppText variant="caption" color={colors.textSecondary} semiBold style={styles.label as any}>Current Bid</AppText>
|
||
<AppText variant="h2" color={colors.text} bold style={styles.mainPrice as any}>₹{item.bidAmount || item.auctionStartValue}</AppText>
|
||
</View>
|
||
|
||
<View style={{ alignItems: 'flex-end' }}>
|
||
<AppText variant="caption" color={colors.textSecondary} semiBold style={styles.label as any}>Decrement</AppText>
|
||
<AppText variant="body" color={colors.primary} bold style={styles.incrementText as any}>
|
||
-₹{item.emdAmount}
|
||
</AppText>
|
||
</View>
|
||
</View>
|
||
|
||
{/* COLLAPSIBLE BODY */}
|
||
{/* <Animated.View style={[styles.collapsibleContainer, (allBoolean.oneTimeBid && allBoolean.rebid) ? bodyStyle : (allBoolean.oneTimeBid && !item.me) ? bodyStyle : bodyStyle2]}> */}
|
||
<Animated.View style={[styles.collapsibleContainer, bodyStyle]}>
|
||
<View style={styles.divider} />
|
||
|
||
<AppText variant="bodySmall" color={colors.textSecondary} semiBold style={styles.bidLabel as any}>Set Your Bid</AppText>
|
||
|
||
<View style={styles.stepperContainer}>
|
||
{/* DECREASE */}
|
||
{!allBoolean.oneTimeBid && <TouchableOpacity
|
||
onPress={onDecrease}
|
||
disabled={!canDecrease}
|
||
style={[
|
||
styles.stepBtn,
|
||
!canDecrease && styles.disabledBtn,
|
||
]}
|
||
>
|
||
<AppText variant="h3" color="#FFF" bold style={styles.stepText as any}>−</AppText>
|
||
</TouchableOpacity>}
|
||
|
||
{/* VALUE */}
|
||
{!allBoolean.oneTimeBid && <View style={styles.inputBox}>
|
||
<AppText variant="body" color={colors.textSecondary} bold style={styles.currency as any}>₹</AppText>
|
||
<AppText variant="h4" color={colors.text} bold style={styles.bidValueText as any}>{bidValue}</AppText>
|
||
</View>}
|
||
{
|
||
(allBoolean.oneTimeBid || allBoolean.rebid) && <View style={styles.inputBox2}>
|
||
<AppText variant="body" color={colors.textSecondary} bold style={styles.currency2 as any}>₹</AppText>
|
||
|
||
<TextInput
|
||
value={value}
|
||
onChangeText={handleChange}
|
||
keyboardType="decimal-pad"
|
||
placeholder="0.00"
|
||
style={[styles.input, { color: colors.text }]}
|
||
placeholderTextColor={colors.textSecondary}
|
||
/>
|
||
</View>
|
||
}
|
||
|
||
{/* INCREASE */}
|
||
{!allBoolean.oneTimeBid && <TouchableOpacity
|
||
onPress={onIncrease}
|
||
disabled={!canIncrease}
|
||
style={[
|
||
styles.stepBtn,
|
||
!canIncrease && styles.disabledBtn,
|
||
]}
|
||
>
|
||
<AppText variant="h3" color="#FFF" bold style={styles.stepText as any}>+</AppText>
|
||
</TouchableOpacity>}
|
||
</View>
|
||
|
||
<TouchableOpacity
|
||
style={[styles.submitBtn]}
|
||
onPress={(allBoolean.oneTimeBid || allBoolean.rebid) ? oneTimePlaceBid : onPlaceBid}
|
||
>
|
||
{
|
||
allState.isLoading ? <Loader size='small' color="#FFF" /> : <AppText variant="button" color="#FFF" bold style={styles.submitBtnText as any}>Confirm Bid</AppText>
|
||
}
|
||
</TouchableOpacity>
|
||
|
||
{/* {(allBoolean.oneTimeBid && allBoolean.rebid) ?
|
||
<TouchableOpacity
|
||
style={[styles.submitBtn]}
|
||
onPress={(allBoolean.oneTimeBid || allBoolean.rebid) ? oneTimePlaceBid : onPlaceBid}
|
||
>
|
||
{
|
||
allState.isLoading ? <Loader size='small' color={colors.white} /> : <Text style={styles.submitBtnText}>Confirm Bid</Text>
|
||
}
|
||
</TouchableOpacity> :
|
||
(allBoolean.oneTimeBid && !item.me) ? <TouchableOpacity
|
||
style={[styles.submitBtn]}
|
||
onPress={(allBoolean.oneTimeBid || allBoolean.rebid) ? oneTimePlaceBid : onPlaceBid}
|
||
>
|
||
{
|
||
allState.isLoading ? <Loader size='small' color={colors.white} /> : <Text style={styles.submitBtnText}>Confirm Bid</Text>
|
||
}
|
||
</TouchableOpacity> : null
|
||
} */}
|
||
</Animated.View>
|
||
</Animated.View>
|
||
) : (
|
||
<AuctionItemDetail
|
||
data={item}
|
||
onClose={() => setShowDetail(false)}
|
||
visible={showDetail}
|
||
/>
|
||
)}
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default ReverseBiddingCard;
|
||
|
||
const makeStyles = (colors: any) => StyleSheet.create({
|
||
inputBox2: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: colors.background,
|
||
borderRadius: 12,
|
||
height: 45,
|
||
paddingHorizontal: 12,
|
||
width: '100%'
|
||
},
|
||
currency2: {
|
||
marginRight: 4,
|
||
} as any,
|
||
input: {
|
||
flex: 1,
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
width: '100%'
|
||
},
|
||
card: {
|
||
borderRadius: 24,
|
||
padding: 20,
|
||
marginBottom: 16,
|
||
borderWidth: 1,
|
||
overflow: 'hidden',
|
||
},
|
||
leadingCard: {
|
||
borderWidth: 2,
|
||
},
|
||
cardHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'flex-start',
|
||
},
|
||
headerRight: { flexDirection: 'column', alignItems: 'center', gap: 8 },
|
||
productName: {} as any,
|
||
itemIdText: { marginTop: 2 } as any,
|
||
badge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 8 },
|
||
liveBadge: { backgroundColor: `${colors.error}20` },
|
||
meBadge: { backgroundColor: `${colors.success}20` },
|
||
badgeText: { fontSize: 10 } as any,
|
||
liveText: { color: colors.error },
|
||
meText: { color: colors.success },
|
||
arrow: { fontSize: 10 },
|
||
priceRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 },
|
||
label: {
|
||
textTransform: 'uppercase',
|
||
} as any,
|
||
mainPrice: {} as any,
|
||
incrementText: {} as any,
|
||
collapsibleContainer: { overflow: 'hidden' },
|
||
divider: { height: 1, backgroundColor: colors.border, marginVertical: 10 },
|
||
bidLabel: { marginBottom: 10 } as any,
|
||
stepperContainer: { flexDirection: 'row', gap: 12, marginBottom: 20 },
|
||
stepBtn: {
|
||
width: 45,
|
||
height: 45,
|
||
backgroundColor: colors.primary,
|
||
borderRadius: 12,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
disabledBtn: { backgroundColor: colors.border },
|
||
stepText: {} as any,
|
||
inputBox: {
|
||
flex: 1,
|
||
height: 45,
|
||
backgroundColor: colors.background,
|
||
borderRadius: 12,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
currency: { marginRight: 4 } as any,
|
||
bidValueText: {} as any,
|
||
submitBtn: {
|
||
height: 50,
|
||
backgroundColor: colors.primary,
|
||
borderRadius: 15,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
submitBtnText: {} as any,
|
||
});
|