add orders collecrtion for coins and subscriptions page
This commit is contained in:
Thomas Demirdjian
@@ -0,0 +1,351 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
import firebase from "../../config/firebase";
|
||||
import { background } from "../../assets";
|
||||
import Page from "../../layouts/Page";
|
||||
import { useUser } from "../../providers/UserDataProvider";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
|
||||
const ORDER_TYPE_LABELS = {
|
||||
GIFT: "Crédit offert",
|
||||
COINS: "Achat de coins",
|
||||
SONG: "Génération de musique",
|
||||
};
|
||||
|
||||
const STATUS_LABELS = {
|
||||
PENDING: "En cours",
|
||||
APPLIED: "Confirmée",
|
||||
REJECTED: "Refusée",
|
||||
};
|
||||
|
||||
const formatCoins = (amount) => {
|
||||
if (typeof amount !== "number" || !Number.isFinite(amount)) {
|
||||
return "0";
|
||||
}
|
||||
try {
|
||||
return new Intl.NumberFormat("fr-FR", {
|
||||
maximumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
} catch (_error) {
|
||||
return `${amount}`;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) {
|
||||
return "En attente de confirmation";
|
||||
}
|
||||
try {
|
||||
return date.toLocaleString("fr-FR", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch (_error) {
|
||||
return date.toString();
|
||||
}
|
||||
};
|
||||
|
||||
const mapOrderType = (type) => ORDER_TYPE_LABELS[type] || "Opération";
|
||||
|
||||
const mapStatus = (status) => STATUS_LABELS[status] || "Inconnue";
|
||||
|
||||
const OrderHistory = () => {
|
||||
const { currentUID } = useUser() || {};
|
||||
const [orders, setOrders] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUID) {
|
||||
setOrders([]);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const unsubscribe = firebase
|
||||
.firestore()
|
||||
.collection("orders")
|
||||
.where("userId", "==", currentUID)
|
||||
.orderBy("createdAt", "desc")
|
||||
.onSnapshot(
|
||||
(snapshot) => {
|
||||
const nextOrders = snapshot.docs.map((doc) => {
|
||||
const rawData = doc.data() || {};
|
||||
const createdAt =
|
||||
typeof rawData.createdAt?.toDate === "function"
|
||||
? rawData.createdAt.toDate()
|
||||
: null;
|
||||
return {
|
||||
id: doc.id,
|
||||
...rawData,
|
||||
createdAt,
|
||||
};
|
||||
});
|
||||
|
||||
setOrders(nextOrders);
|
||||
setLoading(false);
|
||||
},
|
||||
(firestoreError) => {
|
||||
console.warn(
|
||||
"[OrderHistory] Unable to load orders",
|
||||
firestoreError?.message || firestoreError,
|
||||
);
|
||||
setError(
|
||||
firestoreError?.message ||
|
||||
"Impossible de récupérer l'historique des commandes.",
|
||||
);
|
||||
setLoading(false);
|
||||
},
|
||||
);
|
||||
|
||||
return () => {
|
||||
if (typeof unsubscribe === "function") {
|
||||
unsubscribe();
|
||||
}
|
||||
};
|
||||
}, [currentUID]);
|
||||
|
||||
const renderOrder = useCallback(({ item }) => {
|
||||
const amountValue =
|
||||
typeof item.amount === "number" && Number.isFinite(item.amount)
|
||||
? item.amount
|
||||
: 0;
|
||||
const isPositive = amountValue > 0;
|
||||
const amountLabel = `${isPositive ? "+" : ""}${formatCoins(amountValue)} ${
|
||||
amountValue === 1 ? "coin" : "coins"
|
||||
}`;
|
||||
|
||||
const status = item.status || "PENDING";
|
||||
|
||||
const details = (() => {
|
||||
if (item.type === "GIFT" && item.metadata?.reason) {
|
||||
switch (item.metadata.reason) {
|
||||
case "WELCOME_BONUS":
|
||||
return "Crédit de bienvenue";
|
||||
default:
|
||||
return item.metadata.reason;
|
||||
}
|
||||
}
|
||||
if (item.type === "SONG" && item.songId) {
|
||||
return `Musique ${item.songId}`;
|
||||
}
|
||||
if (item.type === "COINS" && item.metadata?.paymentId) {
|
||||
return `Paiement ${item.metadata.paymentId}`;
|
||||
}
|
||||
return null;
|
||||
})();
|
||||
|
||||
return (
|
||||
<View style={styles.orderCard}>
|
||||
<View style={styles.orderHeader}>
|
||||
<Text style={styles.orderTitle}>{mapOrderType(item.type)}</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.orderAmount,
|
||||
isPositive ? styles.amountPositive : styles.amountNegative,
|
||||
]}
|
||||
>
|
||||
{amountLabel}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.orderMetaRow}>
|
||||
<Text style={styles.orderDate}>{formatDate(item.createdAt)}</Text>
|
||||
<View
|
||||
style={[
|
||||
styles.statusBadge,
|
||||
status === "APPLIED"
|
||||
? styles.statusApplied
|
||||
: status === "REJECTED"
|
||||
? styles.statusRejected
|
||||
: styles.statusPending,
|
||||
]}
|
||||
>
|
||||
<Text style={styles.statusText}>{mapStatus(status)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{details ? <Text style={styles.orderDetails}>{details}</Text> : null}
|
||||
{typeof item.balanceAfter === "number" &&
|
||||
Number.isFinite(item.balanceAfter) ? (
|
||||
<Text style={styles.orderBalance}>
|
||||
Solde après opération: {formatCoins(item.balanceAfter)} coins
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}, []);
|
||||
|
||||
const keyExtractor = useCallback((item) => item.id, []);
|
||||
|
||||
const listEmptyComponent = useMemo(() => {
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
if (!currentUID) {
|
||||
return (
|
||||
<Text style={styles.emptyText}>
|
||||
Connecte-toi pour consulter l'historique de tes commandes.
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
if (error) {
|
||||
return <Text style={styles.errorText}>{error}</Text>;
|
||||
}
|
||||
return (
|
||||
<Text style={styles.emptyText}>
|
||||
Aucune opération de coins pour le moment.
|
||||
</Text>
|
||||
);
|
||||
}, [loading, currentUID, error]);
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATION"
|
||||
title="Historique de commandes"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{ paddingBottom: gutters * 2 }}
|
||||
containerStyle={{
|
||||
backgroundColor: "rgba(0,0,0,0.4)",
|
||||
}}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
{loading ? (
|
||||
<View style={styles.loaderContainer}>
|
||||
<ActivityIndicator color={Palette.white} size="large" />
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={orders}
|
||||
keyExtractor={keyExtractor}
|
||||
renderItem={renderOrder}
|
||||
contentContainerStyle={[
|
||||
styles.listContent,
|
||||
orders.length === 0 && styles.emptyListContent,
|
||||
]}
|
||||
ItemSeparatorComponent={() => <View style={{ height: 12 }} />}
|
||||
ListEmptyComponent={listEmptyComponent}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingHorizontal: gutters,
|
||||
paddingTop: gutters,
|
||||
},
|
||||
loaderContainer: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
listContent: {
|
||||
paddingBottom: gutters * 2,
|
||||
},
|
||||
emptyListContent: {
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
},
|
||||
orderCard: {
|
||||
padding: 16,
|
||||
borderRadius: 16,
|
||||
backgroundColor: Palette.ultraLightWhite,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255, 255, 255, 0.08)",
|
||||
},
|
||||
orderHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 8,
|
||||
gap: 12,
|
||||
},
|
||||
orderTitle: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
color: Palette.white,
|
||||
},
|
||||
orderAmount: {
|
||||
fontSize: 16,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
},
|
||||
amountPositive: {
|
||||
color: Palette.green,
|
||||
},
|
||||
amountNegative: {
|
||||
color: Palette.red,
|
||||
},
|
||||
orderMetaRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 6,
|
||||
gap: 12,
|
||||
},
|
||||
orderDate: {
|
||||
fontSize: 13,
|
||||
color: Palette.grayMid,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
statusBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 999,
|
||||
},
|
||||
statusApplied: {
|
||||
backgroundColor: Palette.transparentGreen,
|
||||
},
|
||||
statusPending: {
|
||||
backgroundColor: Palette.transparentOrange,
|
||||
},
|
||||
statusRejected: {
|
||||
backgroundColor: Palette.transparentRed,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 12,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
color: Palette.white,
|
||||
},
|
||||
orderDetails: {
|
||||
marginBottom: 6,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
color: Palette.white,
|
||||
},
|
||||
orderBalance: {
|
||||
fontSize: 13,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
color: Palette.grayMid,
|
||||
},
|
||||
emptyText: {
|
||||
textAlign: "center",
|
||||
color: Palette.grayMid,
|
||||
fontSize: 15,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
errorText: {
|
||||
textAlign: "center",
|
||||
color: Palette.red,
|
||||
fontSize: 15,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
});
|
||||
|
||||
export default OrderHistory;
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
View,
|
||||
} from "react-native";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { useGlobal } from "reactn";
|
||||
import { background, icons } from "../../assets";
|
||||
@@ -33,7 +34,7 @@ import useLayoutType from "../../hooks/useLayoutType";
|
||||
import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
|
||||
import Page from "../../layouts/Page";
|
||||
import { Routes } from "../../navigation";
|
||||
import { push } from "../../navigation/NavigationService";
|
||||
import { navigate, push } from "../../navigation/NavigationService";
|
||||
import { useUser } from "../../providers/UserDataProvider";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
@@ -83,6 +84,9 @@ const Profile = () => {
|
||||
const onPressMenu = (item) => {
|
||||
setSelected(item);
|
||||
};
|
||||
const handleOpenSettings = () => {
|
||||
navigate(Routes.Settings);
|
||||
};
|
||||
|
||||
// Chargement des données utilisateur si on consulte un autre profil
|
||||
useEffect(() => {
|
||||
@@ -340,8 +344,8 @@ const Profile = () => {
|
||||
}}
|
||||
rightComponent={() =>
|
||||
!isWeb && isSelf ? (
|
||||
<PressableScale onPress={() => SheetManager.show("ProfileSettings")}>
|
||||
<Image source={icons.more} style={{ ...size({ size: 24 }) }} />
|
||||
<PressableScale onPress={handleOpenSettings}>
|
||||
<Feather name="settings" size={24} color={Palette.white} />
|
||||
</PressableScale>
|
||||
) : null
|
||||
}
|
||||
@@ -363,18 +367,13 @@ const Profile = () => {
|
||||
<PressableScale
|
||||
style={{
|
||||
zIndex: 2,
|
||||
position: "absolute",
|
||||
right: 10,
|
||||
top: 10,
|
||||
}}
|
||||
onPress={() => SheetManager.show("ProfileSettings")}
|
||||
onPress={handleOpenSettings}
|
||||
>
|
||||
<Image
|
||||
source={icons.more}
|
||||
style={{
|
||||
...size({ size: 24 }),
|
||||
position: "absolute",
|
||||
right: 10,
|
||||
top: 10,
|
||||
}}
|
||||
/>
|
||||
<Feather name="settings" size={24} color={Palette.white} />
|
||||
</PressableScale>
|
||||
)}
|
||||
|
||||
|
||||
@@ -37,6 +37,12 @@ const SETTINGS = [
|
||||
navigate(Routes.Language);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Historique de commandes",
|
||||
action: () => {
|
||||
navigate(Routes.OrderHistory);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Découvrir les packs",
|
||||
action: () => {
|
||||
|
||||
Reference in New Issue
Block a user