chore: add crypto payment
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import React, { useState, useEffect, useRef, useMemo } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -8,13 +8,21 @@ import {
|
||||
Platform,
|
||||
Switch,
|
||||
TouchableOpacity,
|
||||
Clipboard,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { useCart } from "../../context/CartContext";
|
||||
import { checkoutCart, getReferralBalance } from "../../api/api";
|
||||
import {
|
||||
checkoutCart,
|
||||
getReferralBalance,
|
||||
getPublicSettings,
|
||||
getCryptoPaymentStatus,
|
||||
} from "../../api/api";
|
||||
import type { CryptoPaymentStatus } from "../../api/api";
|
||||
import type { ClientStackParamList } from "../../navigation/types";
|
||||
import TextInput from "../../components/ui/TextInput";
|
||||
import Button from "../../components/ui/Button";
|
||||
@@ -24,6 +32,8 @@ import { spacing, borderRadius, fontSize, fontWeight } from "../../theme";
|
||||
|
||||
type Nav = NativeStackNavigationProp<ClientStackParamList>;
|
||||
|
||||
const CRYPTO_COLOR = "#f7931a";
|
||||
|
||||
export default function CheckoutScreen() {
|
||||
const navigation = useNavigation<Nav>();
|
||||
const { colors } = useTheme();
|
||||
@@ -39,43 +49,84 @@ export default function CheckoutScreen() {
|
||||
const [confirmationData, setConfirmationData] = useState<any>(null);
|
||||
const [invalidAddressModal, setInvalidAddressModal] = useState(false);
|
||||
const [suggestedAddress, setSuggestedAddress] = useState("");
|
||||
|
||||
// Parrainage
|
||||
const [referralBalance, setReferralBalance] = useState(0);
|
||||
const [useReferral, setUseReferral] = useState(false);
|
||||
|
||||
// Crypto
|
||||
const [cryptoEnabled, setCryptoEnabled] = useState(false);
|
||||
const [cryptoCurrencies, setCryptoCurrencies] = useState<string[]>([]);
|
||||
const [paymentMethod, setPaymentMethod] = useState<"especes" | "crypto">("especes");
|
||||
const [payCurrency, setPayCurrency] = useState("");
|
||||
const [cryptoData, setCryptoData] = useState<CryptoPaymentStatus | null>(null);
|
||||
const [showCryptoModal, setShowCryptoModal] = useState(false);
|
||||
const [cryptoPolling, setCryptoPolling] = useState(false);
|
||||
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getReferralBalance().then((res) => {
|
||||
if (res.success && res.balance > 0) setReferralBalance(res.balance);
|
||||
});
|
||||
getPublicSettings().then((settings) => {
|
||||
if (settings.crypto_payment_enabled && settings.nowpayments_currencies.length > 0) {
|
||||
setCryptoEnabled(true);
|
||||
setCryptoCurrencies(settings.nowpayments_currencies);
|
||||
setPayCurrency(settings.nowpayments_currencies[0]);
|
||||
}
|
||||
});
|
||||
AsyncStorage.multiGet([
|
||||
"profile_default_address",
|
||||
"profile_default_phone",
|
||||
]).then((pairs) => {
|
||||
const savedAddress = pairs[0][1];
|
||||
const savedPhone = pairs[1][1];
|
||||
const savedPhone = pairs[1][1];
|
||||
if (savedAddress) setAddress(savedAddress);
|
||||
if (savedPhone) setTelephone(savedPhone);
|
||||
if (savedPhone) setTelephone(savedPhone);
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (pollRef.current) clearInterval(pollRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startPolling = (commandId: number) => {
|
||||
setCryptoPolling(true);
|
||||
pollRef.current = setInterval(async () => {
|
||||
const status = await getCryptoPaymentStatus(commandId);
|
||||
if (!status) return;
|
||||
setCryptoData(status);
|
||||
if (
|
||||
status.payment_status === "finished" ||
|
||||
status.payment_status === "confirmed"
|
||||
) {
|
||||
stopPolling();
|
||||
await refreshCart();
|
||||
} else if (
|
||||
status.payment_status === "failed" ||
|
||||
status.payment_status === "expired"
|
||||
) {
|
||||
stopPolling();
|
||||
}
|
||||
}, 10000);
|
||||
};
|
||||
|
||||
const stopPolling = () => {
|
||||
setCryptoPolling(false);
|
||||
if (pollRef.current) {
|
||||
clearInterval(pollRef.current);
|
||||
pollRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckout = async () => {
|
||||
if (!nom.trim()) {
|
||||
setError("Veuillez saisir votre nom");
|
||||
return;
|
||||
}
|
||||
if (!prenom.trim()) {
|
||||
setError("Veuillez saisir votre prenom");
|
||||
return;
|
||||
}
|
||||
if (!telephone.trim()) {
|
||||
setError("Veuillez saisir votre numero de telephone");
|
||||
return;
|
||||
}
|
||||
if (!address.trim()) {
|
||||
setError("Veuillez saisir une adresse de livraison");
|
||||
return;
|
||||
}
|
||||
if (cartItems.length === 0) {
|
||||
setError("Votre panier est vide");
|
||||
if (!nom.trim()) { setError("Veuillez saisir votre nom"); return; }
|
||||
if (!prenom.trim()) { setError("Veuillez saisir votre prenom"); return; }
|
||||
if (!telephone.trim()) { setError("Veuillez saisir votre numero de telephone"); return; }
|
||||
if (!address.trim()) { setError("Veuillez saisir une adresse de livraison"); return; }
|
||||
if (cartItems.length === 0) { setError("Votre panier est vide"); return; }
|
||||
if (paymentMethod === "crypto" && !payCurrency) {
|
||||
setError("Veuillez sélectionner une cryptomonnaie");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -88,8 +139,23 @@ export default function CheckoutScreen() {
|
||||
prenom.trim(),
|
||||
telephone.trim(),
|
||||
useReferral && referralBalance > 0,
|
||||
paymentMethod === "crypto" ? "crypto" : undefined,
|
||||
paymentMethod === "crypto" ? payCurrency : undefined,
|
||||
);
|
||||
if (res.success) {
|
||||
|
||||
if (res.success && res.payment_method === "crypto") {
|
||||
setCryptoData({
|
||||
command_id: res.command_id!,
|
||||
payment_status: res.payment_status!,
|
||||
pay_address: res.pay_address!,
|
||||
pay_amount: res.pay_amount!,
|
||||
pay_currency: res.pay_currency!,
|
||||
price_amount: res.price_amount!,
|
||||
price_currency: res.price_currency!,
|
||||
});
|
||||
setShowCryptoModal(true);
|
||||
startPolling(res.command_id!);
|
||||
} else if (res.success) {
|
||||
setConfirmationData(res);
|
||||
setShowConfirmation(true);
|
||||
await refreshCart();
|
||||
@@ -111,6 +177,37 @@ export default function CheckoutScreen() {
|
||||
navigation.navigate("ClientTabs");
|
||||
};
|
||||
|
||||
const handleCryptoClose = () => {
|
||||
stopPolling();
|
||||
setShowCryptoModal(false);
|
||||
navigation.navigate("ClientTabs");
|
||||
};
|
||||
|
||||
const copyAddress = () => {
|
||||
if (!cryptoData) return;
|
||||
Clipboard.setString(cryptoData.pay_address);
|
||||
Alert.alert("Copié", "Adresse copiée dans le presse-papier");
|
||||
};
|
||||
|
||||
const cryptoStatusLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case "waiting": return "⏳ En attente de paiement";
|
||||
case "confirming": return "🔄 Confirmation en cours...";
|
||||
case "confirmed": return "✅ Confirmé";
|
||||
case "finished": return "✅ Paiement reçu !";
|
||||
case "failed": return "❌ Paiement échoué";
|
||||
case "expired": return "⌛ Expiré";
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
const cryptoStatusColor = (status: string) => {
|
||||
if (status === "finished" || status === "confirmed") return colors.success;
|
||||
if (status === "failed" || status === "expired") return colors.danger;
|
||||
if (status === "confirming") return colors.info;
|
||||
return colors.warning;
|
||||
};
|
||||
|
||||
const styles = useMemo(
|
||||
() =>
|
||||
StyleSheet.create({
|
||||
@@ -144,14 +241,8 @@ export default function CheckoutScreen() {
|
||||
borderBottomColor: colors.borderLight,
|
||||
},
|
||||
summaryItemLeft: { flex: 1, marginRight: spacing.m },
|
||||
summaryItemName: {
|
||||
color: colors.textPrimary,
|
||||
fontSize: fontSize.md,
|
||||
},
|
||||
summaryItemQty: {
|
||||
color: colors.textMuted,
|
||||
fontSize: fontSize.sm,
|
||||
},
|
||||
summaryItemName: { color: colors.textPrimary, fontSize: fontSize.md },
|
||||
summaryItemQty: { color: colors.textMuted, fontSize: fontSize.sm },
|
||||
summaryItemPrice: {
|
||||
color: colors.textPrimary,
|
||||
fontSize: fontSize.md,
|
||||
@@ -198,87 +289,96 @@ export default function CheckoutScreen() {
|
||||
fontSize: fontSize.md,
|
||||
fontWeight: fontWeight.semibold,
|
||||
},
|
||||
referralAmount: {
|
||||
color: colors.accent,
|
||||
fontSize: fontSize.sm,
|
||||
marginTop: 2,
|
||||
},
|
||||
referralAmount: { color: colors.accent, fontSize: fontSize.sm, marginTop: 2 },
|
||||
referralHint: {
|
||||
color: colors.textMuted,
|
||||
fontSize: fontSize.xs,
|
||||
marginTop: spacing.s,
|
||||
lineHeight: 16,
|
||||
},
|
||||
prefillHint: {
|
||||
color: "#6ee7b7",
|
||||
fontSize: fontSize.xs,
|
||||
marginTop: 4,
|
||||
opacity: 0.85,
|
||||
},
|
||||
prefillHint: { color: "#6ee7b7", fontSize: fontSize.xs, marginTop: 4, opacity: 0.85 },
|
||||
invalidAddrContent: { gap: spacing.m },
|
||||
invalidAddrIconContainer: { alignItems: "center" },
|
||||
invalidAddrIconCircle: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
width: 64, height: 64, borderRadius: 32,
|
||||
backgroundColor: "rgba(251,191,36,0.12)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "center", alignItems: "center",
|
||||
},
|
||||
invalidAddrLabel: {
|
||||
color: colors.textSecondary,
|
||||
fontSize: fontSize.sm,
|
||||
textAlign: "center",
|
||||
color: colors.textSecondary, fontSize: fontSize.sm, textAlign: "center",
|
||||
},
|
||||
invalidAddrSuggestion: {
|
||||
backgroundColor: colors.bgInput,
|
||||
borderRadius: 10,
|
||||
padding: spacing.m,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.borderLight,
|
||||
backgroundColor: colors.bgInput, borderRadius: 10,
|
||||
padding: spacing.m, borderWidth: 1, borderColor: colors.borderLight,
|
||||
},
|
||||
invalidAddrSuggestionText: {
|
||||
color: colors.textPrimary,
|
||||
fontSize: fontSize.md,
|
||||
fontWeight: fontWeight.semibold,
|
||||
textAlign: "center",
|
||||
},
|
||||
invalidAddrActions: {
|
||||
flexDirection: "row",
|
||||
gap: spacing.m,
|
||||
marginTop: spacing.s,
|
||||
color: colors.textPrimary, fontSize: fontSize.md,
|
||||
fontWeight: fontWeight.semibold, textAlign: "center",
|
||||
},
|
||||
invalidAddrActions: { flexDirection: "row", gap: spacing.m, marginTop: spacing.s },
|
||||
confirmContent: { gap: spacing.m },
|
||||
confirmIconContainer: { alignItems: "center" },
|
||||
confirmIconCircle: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 36,
|
||||
width: 72, height: 72, borderRadius: 36,
|
||||
backgroundColor: "rgba(74,222,128,0.1)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "center", alignItems: "center",
|
||||
},
|
||||
confirmText: {
|
||||
color: colors.textPrimary,
|
||||
fontSize: fontSize.md,
|
||||
textAlign: "center",
|
||||
lineHeight: 22,
|
||||
color: colors.textPrimary, fontSize: fontSize.md,
|
||||
textAlign: "center", lineHeight: 22,
|
||||
},
|
||||
confirmInfo: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flexDirection: "row", alignItems: "center", gap: spacing.s,
|
||||
backgroundColor: colors.bgInput, padding: spacing.m,
|
||||
borderRadius: 12, borderWidth: 1, borderColor: colors.borderLight,
|
||||
},
|
||||
confirmInfoText: { color: colors.textSecondary, fontSize: fontSize.sm, flex: 1 },
|
||||
// Méthode de paiement
|
||||
paymentMethodRow: { flexDirection: "row", gap: spacing.m, marginBottom: spacing.m },
|
||||
paymentMethodBtn: {
|
||||
flex: 1, padding: spacing.m, borderRadius: borderRadius.md,
|
||||
borderWidth: 2, borderColor: colors.borderLight,
|
||||
backgroundColor: colors.bgCard,
|
||||
alignItems: "center", justifyContent: "center", gap: spacing.xs,
|
||||
},
|
||||
paymentMethodBtnActive: { borderColor: CRYPTO_COLOR },
|
||||
paymentMethodBtnText: { color: colors.textMuted, fontSize: fontSize.sm, fontWeight: fontWeight.medium },
|
||||
paymentMethodBtnTextActive: { color: CRYPTO_COLOR },
|
||||
// Sélection devise crypto
|
||||
currencyGrid: { flexDirection: "row", flexWrap: "wrap", gap: spacing.s, marginTop: spacing.s },
|
||||
currencyBtn: {
|
||||
paddingHorizontal: spacing.m, paddingVertical: spacing.s,
|
||||
borderRadius: borderRadius.sm, borderWidth: 2,
|
||||
borderColor: colors.borderLight, backgroundColor: colors.bgCard,
|
||||
},
|
||||
currencyBtnActive: { borderColor: CRYPTO_COLOR, backgroundColor: "rgba(247,147,26,0.08)" },
|
||||
currencyBtnText: { color: colors.textMuted, fontSize: fontSize.sm, fontWeight: fontWeight.semibold },
|
||||
currencyBtnTextActive: { color: CRYPTO_COLOR },
|
||||
cryptoHint: { color: colors.textMuted, fontSize: fontSize.xs, marginTop: spacing.s },
|
||||
// Modal crypto
|
||||
cryptoContent: { gap: spacing.m },
|
||||
cryptoRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
|
||||
cryptoLabel: { color: colors.textSecondary, fontSize: fontSize.sm },
|
||||
cryptoValue: { color: colors.textPrimary, fontSize: fontSize.md, fontWeight: fontWeight.semibold },
|
||||
cryptoAddressBox: {
|
||||
backgroundColor: colors.bgInput, borderRadius: borderRadius.md,
|
||||
padding: spacing.m, borderWidth: 1, borderColor: colors.borderLight,
|
||||
gap: spacing.s,
|
||||
backgroundColor: colors.bgInput,
|
||||
padding: spacing.m,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.borderLight,
|
||||
},
|
||||
confirmInfoText: {
|
||||
color: colors.textSecondary,
|
||||
fontSize: fontSize.sm,
|
||||
flex: 1,
|
||||
cryptoAddressText: {
|
||||
color: colors.textPrimary, fontSize: fontSize.xs,
|
||||
fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
|
||||
},
|
||||
cryptoCopyBtn: {
|
||||
flexDirection: "row", alignItems: "center", justifyContent: "center",
|
||||
gap: spacing.xs, padding: spacing.s, borderRadius: borderRadius.sm,
|
||||
backgroundColor: colors.bgCard, borderWidth: 1, borderColor: colors.borderLight,
|
||||
},
|
||||
cryptoCopyText: { color: colors.textSecondary, fontSize: fontSize.sm },
|
||||
cryptoPollingText: {
|
||||
color: colors.textMuted, fontSize: fontSize.xs, textAlign: "center",
|
||||
},
|
||||
cryptoSuccessText: { color: colors.success, fontSize: fontSize.sm, textAlign: "center" },
|
||||
}),
|
||||
[colors],
|
||||
);
|
||||
@@ -289,146 +389,73 @@ export default function CheckoutScreen() {
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.content}>
|
||||
{/* Résumé commande */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
Resume de la commande
|
||||
</Text>
|
||||
<Text style={styles.sectionTitle}>Resume de la commande</Text>
|
||||
<View style={styles.summaryCard}>
|
||||
{cartItems.map((item) => (
|
||||
<View key={item.id} style={styles.summaryItem}>
|
||||
<View style={styles.summaryItemLeft}>
|
||||
<Text
|
||||
style={styles.summaryItemName}
|
||||
numberOfLines={1}
|
||||
>
|
||||
<Text style={styles.summaryItemName} numberOfLines={1}>
|
||||
{item.name_product}
|
||||
</Text>
|
||||
<Text style={styles.summaryItemQty}>
|
||||
{item.quantity}g
|
||||
</Text>
|
||||
<Text style={styles.summaryItemQty}>{item.quantity}g</Text>
|
||||
</View>
|
||||
<Text style={styles.summaryItemPrice}>
|
||||
{item.price.toFixed(2)} €
|
||||
</Text>
|
||||
<Text style={styles.summaryItemPrice}>{item.price.toFixed(2)} €</Text>
|
||||
</View>
|
||||
))}
|
||||
<View style={styles.summaryTotal}>
|
||||
<Text style={styles.summaryTotalLabel}>Total</Text>
|
||||
<Text style={styles.summaryTotalValue}>
|
||||
{cartTotal.toFixed(2)} €
|
||||
</Text>
|
||||
<Text style={styles.summaryTotalValue}>{cartTotal.toFixed(2)} €</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Infos personnelles */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
Informations personnelles
|
||||
</Text>
|
||||
<Text style={styles.sectionTitle}>Informations personnelles</Text>
|
||||
<View style={styles.fieldGroup}>
|
||||
<View style={styles.row}>
|
||||
<View style={styles.halfField}>
|
||||
<TextInput
|
||||
placeholder="Nom"
|
||||
value={nom}
|
||||
onChangeText={(text) => {
|
||||
setNom(text);
|
||||
setError(null);
|
||||
}}
|
||||
icon={
|
||||
<Ionicons
|
||||
name="person-outline"
|
||||
size={20}
|
||||
color={colors.textMuted}
|
||||
/>
|
||||
}
|
||||
error={
|
||||
error && !nom.trim() ? error : undefined
|
||||
}
|
||||
onChangeText={(t) => { setNom(t); setError(null); }}
|
||||
icon={<Ionicons name="person-outline" size={20} color={colors.textMuted} />}
|
||||
error={error && !nom.trim() ? error : undefined}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.halfField}>
|
||||
<TextInput
|
||||
placeholder="Prenom"
|
||||
value={prenom}
|
||||
onChangeText={(text) => {
|
||||
setPrenom(text);
|
||||
setError(null);
|
||||
}}
|
||||
icon={
|
||||
<Ionicons
|
||||
name="person-outline"
|
||||
size={20}
|
||||
color={colors.textMuted}
|
||||
/>
|
||||
}
|
||||
error={
|
||||
error && nom.trim() && !prenom.trim()
|
||||
? error
|
||||
: undefined
|
||||
}
|
||||
onChangeText={(t) => { setPrenom(t); setError(null); }}
|
||||
icon={<Ionicons name="person-outline" size={20} color={colors.textMuted} />}
|
||||
error={error && nom.trim() && !prenom.trim() ? error : undefined}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<TextInput
|
||||
placeholder="Numero de telephone"
|
||||
value={telephone}
|
||||
onChangeText={(text) => {
|
||||
setTelephone(text);
|
||||
setError(null);
|
||||
}}
|
||||
icon={
|
||||
<Ionicons
|
||||
name="call-outline"
|
||||
size={20}
|
||||
color={colors.textMuted}
|
||||
/>
|
||||
}
|
||||
onChangeText={(t) => { setTelephone(t); setError(null); }}
|
||||
icon={<Ionicons name="call-outline" size={20} color={colors.textMuted} />}
|
||||
keyboardType="phone-pad"
|
||||
error={
|
||||
error &&
|
||||
nom.trim() &&
|
||||
prenom.trim() &&
|
||||
!telephone.trim()
|
||||
? error
|
||||
: undefined
|
||||
}
|
||||
error={error && nom.trim() && prenom.trim() && !telephone.trim() ? error : undefined}
|
||||
/>
|
||||
{!!telephone && (
|
||||
<Text style={styles.prefillHint}>
|
||||
Pre-rempli depuis votre profil
|
||||
</Text>
|
||||
)}
|
||||
{!!telephone && <Text style={styles.prefillHint}>Pre-rempli depuis votre profil</Text>}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Adresse */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
Adresse de livraison
|
||||
</Text>
|
||||
<Text style={styles.sectionTitle}>Adresse de livraison</Text>
|
||||
<TextInput
|
||||
placeholder="Entrez votre adresse complete"
|
||||
value={address}
|
||||
onChangeText={(text) => {
|
||||
setAddress(text);
|
||||
setError(null);
|
||||
}}
|
||||
icon={
|
||||
<Ionicons
|
||||
name="location-outline"
|
||||
size={20}
|
||||
color={colors.textMuted}
|
||||
/>
|
||||
}
|
||||
error={
|
||||
error &&
|
||||
nom.trim() &&
|
||||
prenom.trim() &&
|
||||
telephone.trim() &&
|
||||
!address.trim()
|
||||
? error
|
||||
: undefined
|
||||
}
|
||||
onChangeText={(t) => { setAddress(t); setError(null); }}
|
||||
icon={<Ionicons name="location-outline" size={20} color={colors.textMuted} />}
|
||||
error={error && nom.trim() && prenom.trim() && telephone.trim() && !address.trim() ? error : undefined}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
@@ -439,7 +466,64 @@ export default function CheckoutScreen() {
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Section parrainage — visible uniquement si solde > 0 */}
|
||||
{/* Méthode de paiement */}
|
||||
{cryptoEnabled && (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Méthode de paiement</Text>
|
||||
<View style={styles.paymentMethodRow}>
|
||||
<TouchableOpacity
|
||||
style={[styles.paymentMethodBtn, paymentMethod === "especes" && styles.paymentMethodBtnActive]}
|
||||
onPress={() => setPaymentMethod("especes")}
|
||||
>
|
||||
<Ionicons
|
||||
name="cash-outline"
|
||||
size={22}
|
||||
color={paymentMethod === "especes" ? CRYPTO_COLOR : colors.textMuted}
|
||||
/>
|
||||
<Text style={[styles.paymentMethodBtnText, paymentMethod === "especes" && styles.paymentMethodBtnTextActive]}>
|
||||
Espèces
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.paymentMethodBtn, paymentMethod === "crypto" && styles.paymentMethodBtnActive]}
|
||||
onPress={() => setPaymentMethod("crypto")}
|
||||
>
|
||||
<Ionicons
|
||||
name="logo-bitcoin"
|
||||
size={22}
|
||||
color={paymentMethod === "crypto" ? CRYPTO_COLOR : colors.textMuted}
|
||||
/>
|
||||
<Text style={[styles.paymentMethodBtnText, paymentMethod === "crypto" && styles.paymentMethodBtnTextActive]}>
|
||||
Crypto
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{paymentMethod === "crypto" && (
|
||||
<>
|
||||
<Text style={styles.sectionTitle}>Cryptomonnaie</Text>
|
||||
<View style={styles.currencyGrid}>
|
||||
{cryptoCurrencies.map((c) => (
|
||||
<TouchableOpacity
|
||||
key={c}
|
||||
style={[styles.currencyBtn, payCurrency === c && styles.currencyBtnActive]}
|
||||
onPress={() => setPayCurrency(c)}
|
||||
>
|
||||
<Text style={[styles.currencyBtnText, payCurrency === c && styles.currencyBtnTextActive]}>
|
||||
{c.toUpperCase()}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
<Text style={styles.cryptoHint}>
|
||||
Vous recevrez l'adresse wallet après validation
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Parrainage */}
|
||||
{referralBalance > 0 && (
|
||||
<View style={styles.referralCard}>
|
||||
<View style={styles.referralRow}>
|
||||
@@ -447,9 +531,7 @@ export default function CheckoutScreen() {
|
||||
<Ionicons name="gift-outline" size={22} color={colors.accent} />
|
||||
<View>
|
||||
<Text style={styles.referralTitle}>Credit parrainage</Text>
|
||||
<Text style={styles.referralAmount}>
|
||||
{referralBalance.toFixed(2)} € disponibles
|
||||
</Text>
|
||||
<Text style={styles.referralAmount}>{referralBalance.toFixed(2)} € disponibles</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Switch
|
||||
@@ -467,13 +549,9 @@ export default function CheckoutScreen() {
|
||||
</View>
|
||||
)}
|
||||
|
||||
{error &&
|
||||
nom.trim() &&
|
||||
prenom.trim() &&
|
||||
telephone.trim() &&
|
||||
address.trim() && (
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
)}
|
||||
{error && nom.trim() && prenom.trim() && telephone.trim() && address.trim() && (
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
)}
|
||||
|
||||
<Button
|
||||
title="Valider la commande"
|
||||
@@ -487,6 +565,7 @@ export default function CheckoutScreen() {
|
||||
/>
|
||||
</ScrollView>
|
||||
|
||||
{/* Modal adresse invalide */}
|
||||
<Modal
|
||||
visible={invalidAddressModal}
|
||||
onClose={() => setInvalidAddressModal(false)}
|
||||
@@ -497,44 +576,23 @@ export default function CheckoutScreen() {
|
||||
<View style={styles.invalidAddrContent}>
|
||||
<View style={styles.invalidAddrIconContainer}>
|
||||
<View style={styles.invalidAddrIconCircle}>
|
||||
<Ionicons
|
||||
name="location-outline"
|
||||
size={32}
|
||||
color={colors.warning}
|
||||
/>
|
||||
<Ionicons name="location-outline" size={32} color={colors.warning} />
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.invalidAddrLabel}>
|
||||
L'adresse saisie n'est pas reconnue. Voulez-vous
|
||||
utiliser l'adresse correcte suggérée ?
|
||||
L'adresse saisie n'est pas reconnue. Voulez-vous utiliser l'adresse correcte suggérée ?
|
||||
</Text>
|
||||
<View style={styles.invalidAddrSuggestion}>
|
||||
<Text style={styles.invalidAddrSuggestionText}>
|
||||
{suggestedAddress}
|
||||
</Text>
|
||||
<Text style={styles.invalidAddrSuggestionText}>{suggestedAddress}</Text>
|
||||
</View>
|
||||
<View style={styles.invalidAddrActions}>
|
||||
<Button
|
||||
title="Modifier"
|
||||
variant="outline"
|
||||
size="md"
|
||||
onPress={() => setInvalidAddressModal(false)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Button
|
||||
title="Utiliser"
|
||||
variant="success"
|
||||
size="md"
|
||||
onPress={() => {
|
||||
setAddress(suggestedAddress);
|
||||
setInvalidAddressModal(false);
|
||||
}}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Button title="Modifier" variant="outline" size="md" onPress={() => setInvalidAddressModal(false)} style={{ flex: 1 }} />
|
||||
<Button title="Utiliser" variant="success" size="md" onPress={() => { setAddress(suggestedAddress); setInvalidAddressModal(false); }} style={{ flex: 1 }} />
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
{/* Modal confirmation (paiement espèces) */}
|
||||
<Modal
|
||||
visible={showConfirmation}
|
||||
onClose={handleConfirmClose}
|
||||
@@ -545,24 +603,15 @@ export default function CheckoutScreen() {
|
||||
<View style={styles.confirmContent}>
|
||||
<View style={styles.confirmIconContainer}>
|
||||
<View style={styles.confirmIconCircle}>
|
||||
<Ionicons
|
||||
name="checkmark-circle"
|
||||
size={48}
|
||||
color={colors.success}
|
||||
/>
|
||||
<Ionicons name="checkmark-circle" size={48} color={colors.success} />
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.confirmText}>
|
||||
Votre commande #{confirmationData?.command_id} a ete
|
||||
creee avec succes.
|
||||
Votre commande #{confirmationData?.command_id} a ete creee avec succes.
|
||||
</Text>
|
||||
{confirmationData?.referral_used > 0 && (
|
||||
<View style={styles.confirmInfo}>
|
||||
<Ionicons
|
||||
name="gift-outline"
|
||||
size={16}
|
||||
color={colors.accent}
|
||||
/>
|
||||
<Ionicons name="gift-outline" size={16} color={colors.accent} />
|
||||
<Text style={styles.confirmInfoText}>
|
||||
{confirmationData.referral_used.toFixed(2)} € de credit parrainage utilises
|
||||
{confirmationData.referral_balance !== undefined
|
||||
@@ -572,25 +621,87 @@ export default function CheckoutScreen() {
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.confirmInfo}>
|
||||
<Ionicons
|
||||
name="location-outline"
|
||||
size={16}
|
||||
color={colors.info}
|
||||
/>
|
||||
<Ionicons name="location-outline" size={16} color={colors.info} />
|
||||
<Text style={styles.confirmInfoText}>
|
||||
Suivez votre livraison en temps réel depuis la page Suivi
|
||||
</Text>
|
||||
</View>
|
||||
<Button
|
||||
title="Voir mes commandes"
|
||||
onPress={handleConfirmClose}
|
||||
variant="primary"
|
||||
size="md"
|
||||
fullWidth
|
||||
style={{ marginTop: spacing.l }}
|
||||
/>
|
||||
<Button title="Voir mes commandes" onPress={handleConfirmClose} variant="primary" size="md" fullWidth style={{ marginTop: spacing.l }} />
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
{/* Modal paiement crypto */}
|
||||
<Modal
|
||||
visible={showCryptoModal}
|
||||
onClose={handleCryptoClose}
|
||||
title="Paiement Crypto"
|
||||
icon="logo-bitcoin"
|
||||
iconColor={CRYPTO_COLOR}
|
||||
>
|
||||
{cryptoData && (
|
||||
<View style={styles.cryptoContent}>
|
||||
{/* Commande */}
|
||||
<View style={styles.cryptoRow}>
|
||||
<Text style={styles.cryptoLabel}>Commande</Text>
|
||||
<Text style={styles.cryptoValue}>#{cryptoData.command_id}</Text>
|
||||
</View>
|
||||
|
||||
{/* Statut */}
|
||||
<View style={styles.cryptoRow}>
|
||||
<Text style={styles.cryptoLabel}>Statut</Text>
|
||||
<Text style={[styles.cryptoValue, { color: cryptoStatusColor(cryptoData.payment_status) }]}>
|
||||
{cryptoStatusLabel(cryptoData.payment_status)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Montant */}
|
||||
<View style={styles.cryptoRow}>
|
||||
<Text style={styles.cryptoLabel}>Montant</Text>
|
||||
<Text style={styles.cryptoValue}>
|
||||
{cryptoData.pay_amount} {cryptoData.pay_currency.toUpperCase()}
|
||||
{"\n"}
|
||||
<Text style={{ color: colors.textMuted, fontSize: fontSize.xs }}>
|
||||
≈ {cryptoData.price_amount.toFixed(2)} {cryptoData.price_currency.toUpperCase()}
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Adresse wallet */}
|
||||
<Text style={styles.cryptoLabel}>Adresse wallet</Text>
|
||||
<View style={styles.cryptoAddressBox}>
|
||||
<Text style={styles.cryptoAddressText} selectable>
|
||||
{cryptoData.pay_address}
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.cryptoCopyBtn} onPress={copyAddress}>
|
||||
<Ionicons name="copy-outline" size={16} color={colors.textSecondary} />
|
||||
<Text style={styles.cryptoCopyText}>Copier l'adresse</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Polling */}
|
||||
{cryptoPolling && (
|
||||
<Text style={styles.cryptoPollingText}>
|
||||
Vérification automatique toutes les 10 secondes...
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{(cryptoData.payment_status === "finished" || cryptoData.payment_status === "confirmed") && (
|
||||
<Text style={styles.cryptoSuccessText}>
|
||||
✅ Paiement confirmé ! Votre commande est en cours de traitement.
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Button
|
||||
title="Suivre ma commande"
|
||||
onPress={handleCryptoClose}
|
||||
variant="primary"
|
||||
size="md"
|
||||
fullWidth
|
||||
style={{ marginTop: spacing.s }}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</Modal>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@ export default function OrderHistoryScreen() {
|
||||
const [orders, setOrders] = useState<CompletedOrder[]>([]);
|
||||
const [stats, setStats] = useState<ClientStats | null>(null);
|
||||
const [penalties, setPenalties] = useState<PenaltyInfo | null>(null);
|
||||
const [appSettings, setAppSettings] = useState<PublicSettings>({ penalties_enabled: true, show_amende_score: true, points_enabled: true, points_separated: true, referral_enabled: false, pool_names: ['Pool 1', 'Pool 2'] });
|
||||
const [appSettings, setAppSettings] = useState<PublicSettings>({ penalties_enabled: true, show_amende_score: true, points_enabled: true, points_separated: true, referral_enabled: false, pool_names: ['Pool 1', 'Pool 2'], crypto_payment_enabled: false, nowpayments_currencies: [] });
|
||||
const [referralBalance, setReferralBalance] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
Reference in New Issue
Block a user