|
|
@ -27,6 +27,7 @@ import BackIcon from "../../components/BackIcon"; |
|
|
|
import useUserStore from "../../store/user"; |
|
|
|
import useUserStore from "../../store/user"; |
|
|
|
import { Transaction, payApi } from "../../services/api/payApi"; |
|
|
|
import { Transaction, payApi } from "../../services/api/payApi"; |
|
|
|
import { useTranslation } from "react-i18next"; |
|
|
|
import { useTranslation } from "react-i18next"; |
|
|
|
|
|
|
|
import { userApi } from "../../services"; |
|
|
|
|
|
|
|
|
|
|
|
type BalanceScreenNavigationProp = NativeStackNavigationProp< |
|
|
|
type BalanceScreenNavigationProp = NativeStackNavigationProp< |
|
|
|
RootStackParamList, |
|
|
|
RootStackParamList, |
|
|
@ -35,7 +36,7 @@ type BalanceScreenNavigationProp = NativeStackNavigationProp< |
|
|
|
|
|
|
|
|
|
|
|
export const BalanceScreen = () => { |
|
|
|
export const BalanceScreen = () => { |
|
|
|
const { t } = useTranslation(); |
|
|
|
const { t } = useTranslation(); |
|
|
|
const { user } = useUserStore(); |
|
|
|
const { user, setUser } = useUserStore(); |
|
|
|
const navigation = useNavigation<BalanceScreenNavigationProp>(); |
|
|
|
const navigation = useNavigation<BalanceScreenNavigationProp>(); |
|
|
|
const [isModalVisible, setIsModalVisible] = useState(false); |
|
|
|
const [isModalVisible, setIsModalVisible] = useState(false); |
|
|
|
const [rechargeHistory, setRechargeHistory] = useState<Transaction[]>([]); |
|
|
|
const [rechargeHistory, setRechargeHistory] = useState<Transaction[]>([]); |
|
|
@ -54,21 +55,21 @@ export const BalanceScreen = () => { |
|
|
|
|
|
|
|
|
|
|
|
const fetchRechargeHistory = async (page: number, refresh = false) => { |
|
|
|
const fetchRechargeHistory = async (page: number, refresh = false) => { |
|
|
|
if (loading || (!hasMore && !refresh)) return; |
|
|
|
if (loading || (!hasMore && !refresh)) return; |
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
try { |
|
|
|
setLoading(true); |
|
|
|
setLoading(true); |
|
|
|
const response = await payApi.getTransactionHistory(page, pageSize); |
|
|
|
const response = await payApi.getTransactionHistory(page, pageSize); |
|
|
|
|
|
|
|
|
|
|
|
if (response.items.length < pageSize) { |
|
|
|
if (response.items.length < pageSize) { |
|
|
|
setHasMore(false); |
|
|
|
setHasMore(false); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (refresh) { |
|
|
|
if (refresh) { |
|
|
|
setRechargeHistory(response.items); |
|
|
|
setRechargeHistory(response.items); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
setRechargeHistory(prev => [...prev, ...response.items]); |
|
|
|
setRechargeHistory((prev) => [...prev, ...response.items]); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setCurrentPage(page); |
|
|
|
setCurrentPage(page); |
|
|
|
} catch (error) { |
|
|
|
} catch (error) { |
|
|
|
console.error("Failed to fetch transaction history:", error); |
|
|
|
console.error("Failed to fetch transaction history:", error); |
|
|
@ -76,7 +77,7 @@ export const BalanceScreen = () => { |
|
|
|
setLoading(false); |
|
|
|
setLoading(false); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleLoadMore = () => { |
|
|
|
const handleLoadMore = () => { |
|
|
|
if (!loading && hasMore) { |
|
|
|
if (!loading && hasMore) { |
|
|
|
fetchRechargeHistory(currentPage + 1); |
|
|
|
fetchRechargeHistory(currentPage + 1); |
|
|
@ -85,25 +86,23 @@ export const BalanceScreen = () => { |
|
|
|
|
|
|
|
|
|
|
|
useFocusEffect( |
|
|
|
useFocusEffect( |
|
|
|
useCallback(() => { |
|
|
|
useCallback(() => { |
|
|
|
|
|
|
|
userApi.getProfile().then((res) => { |
|
|
|
|
|
|
|
setUser(res); |
|
|
|
|
|
|
|
}); |
|
|
|
fetchRechargeHistory(1, true); |
|
|
|
fetchRechargeHistory(1, true); |
|
|
|
}, []) |
|
|
|
}, []) |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const renderTransactionItem = ({ item }: { item: Transaction }) => ( |
|
|
|
const renderTransactionItem = ({ item }: { item: Transaction }) => ( |
|
|
|
<View style={styles.transactionHistoryList} key={item.transaction_id}> |
|
|
|
<View style={styles.transactionHistoryList} key={item.transaction_id}> |
|
|
|
<View style={styles.transactionDetailsPanel}> |
|
|
|
<View style={styles.transactionDetailsPanel}> |
|
|
|
<View style={styles.transactionDetailsRow}> |
|
|
|
<View style={styles.transactionDetailsRow}> |
|
|
|
<Text style={styles.transactionDescriptionBold}> |
|
|
|
<Text style={styles.transactionDescriptionBold}>{item.type}</Text> |
|
|
|
{item.type} |
|
|
|
|
|
|
|
</Text> |
|
|
|
|
|
|
|
<Text |
|
|
|
<Text |
|
|
|
style={[ |
|
|
|
style={[ |
|
|
|
styles.transactionAmountDisplay, |
|
|
|
styles.transactionAmountDisplay, |
|
|
|
{ |
|
|
|
{ |
|
|
|
color: |
|
|
|
color: Number(item.amount) < 0 ? "#0035a4" : "#ff5217", |
|
|
|
Number(item.amount) < 0 |
|
|
|
|
|
|
|
? "#0035a4" |
|
|
|
|
|
|
|
: "#ff5217", |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
]} |
|
|
|
]} |
|
|
|
> |
|
|
|
> |
|
|
@ -111,17 +110,13 @@ export const BalanceScreen = () => { |
|
|
|
</Text> |
|
|
|
</Text> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
<View style={styles.transactionInfoRow}> |
|
|
|
<View style={styles.transactionInfoRow}> |
|
|
|
<Text style={styles.transactionDate}> |
|
|
|
<Text style={styles.transactionDate}>{item.timestamp}</Text> |
|
|
|
{item.timestamp} |
|
|
|
<Text style={styles.shipmentReference}>{item.type}</Text> |
|
|
|
</Text> |
|
|
|
|
|
|
|
<Text style={styles.shipmentReference}> |
|
|
|
|
|
|
|
{item.type} |
|
|
|
|
|
|
|
</Text> |
|
|
|
|
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const renderFooter = () => { |
|
|
|
const renderFooter = () => { |
|
|
|
if (!loading) return null; |
|
|
|
if (!loading) return null; |
|
|
|
return ( |
|
|
|
return ( |
|
|
@ -150,7 +145,9 @@ export const BalanceScreen = () => { |
|
|
|
<FlatList |
|
|
|
<FlatList |
|
|
|
data={rechargeHistory} |
|
|
|
data={rechargeHistory} |
|
|
|
renderItem={renderTransactionItem} |
|
|
|
renderItem={renderTransactionItem} |
|
|
|
keyExtractor={(item) => item.transaction_id.toString()} |
|
|
|
keyExtractor={(item, index) => |
|
|
|
|
|
|
|
item.transaction_id.toString() + index |
|
|
|
|
|
|
|
} |
|
|
|
onEndReached={handleLoadMore} |
|
|
|
onEndReached={handleLoadMore} |
|
|
|
onEndReachedThreshold={0.5} |
|
|
|
onEndReachedThreshold={0.5} |
|
|
|
ListFooterComponent={renderFooter} |
|
|
|
ListFooterComponent={renderFooter} |
|
|
@ -174,7 +171,9 @@ export const BalanceScreen = () => { |
|
|
|
<View style={styles.totalBalanceCard}> |
|
|
|
<View style={styles.totalBalanceCard}> |
|
|
|
<View style={styles.cardContainer}> |
|
|
|
<View style={styles.cardContainer}> |
|
|
|
<View style={styles.financialInfoContainer}> |
|
|
|
<View style={styles.financialInfoContainer}> |
|
|
|
<Text style={styles.largeBlackText}>{user?.balance}</Text> |
|
|
|
<Text style={styles.largeBlackText}> |
|
|
|
|
|
|
|
{user?.balance} |
|
|
|
|
|
|
|
</Text> |
|
|
|
<View style={styles.svgContainer}></View> |
|
|
|
<View style={styles.svgContainer}></View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
<View style={styles.totalSoldInfoContainer}> |
|
|
|
<View style={styles.totalSoldInfoContainer}> |
|
|
@ -470,7 +469,7 @@ const styles = StyleSheet.create({ |
|
|
|
}, |
|
|
|
}, |
|
|
|
loaderContainer: { |
|
|
|
loaderContainer: { |
|
|
|
paddingVertical: 20, |
|
|
|
paddingVertical: 20, |
|
|
|
alignItems: 'center', |
|
|
|
alignItems: "center", |
|
|
|
justifyContent: 'center', |
|
|
|
justifyContent: "center", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|