743 lines
36 KiB
TypeScript
743 lines
36 KiB
TypeScript
import React, { useState, useEffect, useRef, useMemo } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
StyleSheet,
|
|
KeyboardAvoidingView,
|
|
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,
|
|
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";
|
|
import Modal from "../../components/ui/Modal";
|
|
import { useTheme } from "../../context/ThemeContext";
|
|
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();
|
|
const { cartItems, cartTotal, clearCart, refreshCart } = useCart();
|
|
|
|
const [nom, setNom] = useState("");
|
|
const [prenom, setPrenom] = useState("");
|
|
const [telephone, setTelephone] = useState("");
|
|
const [address, setAddress] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
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 [cryptoOnly, setCryptoOnly] = 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]);
|
|
if (settings.crypto_only) {
|
|
setCryptoOnly(true);
|
|
setPaymentMethod("crypto");
|
|
}
|
|
}
|
|
});
|
|
AsyncStorage.multiGet([
|
|
"profile_default_address",
|
|
"profile_default_phone",
|
|
]).then((pairs) => {
|
|
const savedAddress = pairs[0][1];
|
|
const savedPhone = pairs[1][1];
|
|
if (savedAddress) setAddress(savedAddress);
|
|
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"); return; }
|
|
if (paymentMethod === "crypto" && !payCurrency) {
|
|
setError("Veuillez sélectionner une cryptomonnaie");
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
setLoading(true);
|
|
try {
|
|
const res = await checkoutCart(
|
|
address.trim(),
|
|
nom.trim(),
|
|
prenom.trim(),
|
|
telephone.trim(),
|
|
useReferral && referralBalance > 0,
|
|
paymentMethod === "crypto" ? "crypto" : undefined,
|
|
paymentMethod === "crypto" ? payCurrency : undefined,
|
|
);
|
|
|
|
if (res.success && res.payment_method === "crypto") {
|
|
setCryptoData({
|
|
command_id: res.command_id!,
|
|
client_order_number: (res as any).client_order_number,
|
|
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();
|
|
} else if (res.invalid_address && res.suggested_address) {
|
|
setSuggestedAddress(res.suggested_address);
|
|
setInvalidAddressModal(true);
|
|
} else {
|
|
setError(res.message || "Erreur lors de la commande");
|
|
}
|
|
} catch {
|
|
setError("Erreur de connexion au serveur");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleConfirmClose = () => {
|
|
setShowConfirmation(false);
|
|
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({
|
|
container: { flex: 1, backgroundColor: colors.bgPrimary },
|
|
content: { padding: spacing.xl, paddingBottom: spacing.xxxl },
|
|
section: { marginBottom: spacing.xl },
|
|
sectionTitle: {
|
|
color: colors.textSecondary,
|
|
fontSize: fontSize.sm,
|
|
fontWeight: fontWeight.medium,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 1,
|
|
marginBottom: spacing.m,
|
|
},
|
|
fieldGroup: { gap: spacing.m },
|
|
row: { flexDirection: "row", gap: spacing.m },
|
|
halfField: { flex: 1 },
|
|
summaryCard: {
|
|
backgroundColor: colors.bgCard,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.l,
|
|
borderWidth: 1,
|
|
borderColor: colors.borderLight,
|
|
},
|
|
summaryItem: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingVertical: spacing.s,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.borderLight,
|
|
},
|
|
summaryItemLeft: { flex: 1, marginRight: spacing.m },
|
|
summaryItemName: { color: colors.textPrimary, fontSize: fontSize.md },
|
|
summaryItemQty: { color: colors.textMuted, fontSize: fontSize.sm },
|
|
summaryItemPrice: {
|
|
color: colors.textPrimary,
|
|
fontSize: fontSize.md,
|
|
fontWeight: fontWeight.semibold,
|
|
},
|
|
summaryTotal: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingTop: spacing.m,
|
|
marginTop: spacing.s,
|
|
},
|
|
summaryTotalLabel: {
|
|
color: colors.textSecondary,
|
|
fontSize: fontSize.lg,
|
|
fontWeight: fontWeight.semibold,
|
|
},
|
|
summaryTotalValue: {
|
|
color: colors.success,
|
|
fontSize: fontSize.xl,
|
|
fontWeight: fontWeight.bold,
|
|
},
|
|
errorText: {
|
|
color: colors.danger,
|
|
fontSize: fontSize.sm,
|
|
textAlign: "center",
|
|
},
|
|
referralCard: {
|
|
backgroundColor: colors.bgCard,
|
|
borderRadius: borderRadius.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.accent + "44",
|
|
padding: spacing.l,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
referralRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
},
|
|
referralLeft: { flexDirection: "row", alignItems: "center", gap: spacing.s, flex: 1 },
|
|
referralTitle: {
|
|
color: colors.textPrimary,
|
|
fontSize: fontSize.md,
|
|
fontWeight: fontWeight.semibold,
|
|
},
|
|
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 },
|
|
invalidAddrContent: { gap: spacing.m },
|
|
invalidAddrIconContainer: { alignItems: "center" },
|
|
invalidAddrIconCircle: {
|
|
width: 64, height: 64, borderRadius: 32,
|
|
backgroundColor: "rgba(251,191,36,0.12)",
|
|
justifyContent: "center", alignItems: "center",
|
|
},
|
|
invalidAddrLabel: {
|
|
color: colors.textSecondary, fontSize: fontSize.sm, textAlign: "center",
|
|
},
|
|
invalidAddrSuggestion: {
|
|
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 },
|
|
confirmContent: { gap: spacing.m },
|
|
confirmIconContainer: { alignItems: "center" },
|
|
confirmIconCircle: {
|
|
width: 72, height: 72, borderRadius: 36,
|
|
backgroundColor: "rgba(74,222,128,0.1)",
|
|
justifyContent: "center", alignItems: "center",
|
|
},
|
|
confirmText: {
|
|
color: colors.textPrimary, fontSize: fontSize.md,
|
|
textAlign: "center", lineHeight: 22,
|
|
},
|
|
confirmInfo: {
|
|
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,
|
|
},
|
|
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" },
|
|
// Crypto only badge
|
|
cryptoOnlyBadge: {
|
|
flexDirection: "row", alignItems: "center", gap: spacing.s,
|
|
backgroundColor: "rgba(247,147,26,0.10)", borderRadius: borderRadius.md,
|
|
borderWidth: 1, borderColor: CRYPTO_COLOR + "55",
|
|
padding: spacing.m, marginBottom: spacing.s,
|
|
},
|
|
cryptoOnlyText: { color: CRYPTO_COLOR, fontSize: fontSize.sm, fontWeight: fontWeight.medium, flex: 1 },
|
|
}),
|
|
[colors],
|
|
);
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
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>
|
|
<View style={styles.summaryCard}>
|
|
{cartItems.map((item) => (
|
|
<View key={item.id} style={styles.summaryItem}>
|
|
<View style={styles.summaryItemLeft}>
|
|
<Text style={styles.summaryItemName} numberOfLines={1}>
|
|
{item.name_product}
|
|
</Text>
|
|
<Text style={styles.summaryItemQty}>{item.quantity}g</Text>
|
|
</View>
|
|
<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>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Infos personnelles */}
|
|
<View style={styles.section}>
|
|
<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={(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={(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={(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}
|
|
/>
|
|
{!!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>
|
|
<TextInput
|
|
placeholder="Entrez votre adresse complete"
|
|
value={address}
|
|
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}
|
|
/>
|
|
{!!address && (
|
|
<Text style={styles.prefillHint}>
|
|
Pre-rempli depuis votre profil — modifiez si vous etes ailleurs
|
|
</Text>
|
|
)}
|
|
</View>
|
|
|
|
{/* Méthode de paiement */}
|
|
{cryptoEnabled && (
|
|
<View style={styles.section}>
|
|
{cryptoOnly ? (
|
|
<>
|
|
<Text style={styles.sectionTitle}>Cryptomonnaie</Text>
|
|
<View style={styles.cryptoOnlyBadge}>
|
|
<Ionicons name="logo-bitcoin" size={18} color={CRYPTO_COLOR} />
|
|
<Text style={styles.cryptoOnlyText}>
|
|
Paiement uniquement en cryptomonnaie
|
|
</Text>
|
|
</View>
|
|
<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}>
|
|
Choisissez la devise avec laquelle vous souhaitez payer
|
|
</Text>
|
|
</>
|
|
) : (
|
|
<>
|
|
<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}>
|
|
<View style={styles.referralLeft}>
|
|
<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>
|
|
</View>
|
|
</View>
|
|
<Switch
|
|
value={useReferral}
|
|
onValueChange={setUseReferral}
|
|
trackColor={{ false: colors.border, true: colors.accent + "66" }}
|
|
thumbColor={useReferral ? colors.accent : colors.textMuted}
|
|
/>
|
|
</View>
|
|
{useReferral && (
|
|
<Text style={styles.referralHint}>
|
|
Le credit sera deduit de ta commande. Tu dois quand meme atteindre le minimum de ta zone + le credit utilise.
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
{error && nom.trim() && prenom.trim() && telephone.trim() && address.trim() && (
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
)}
|
|
|
|
<Button
|
|
title="Valider la commande"
|
|
onPress={handleCheckout}
|
|
loading={loading}
|
|
disabled={loading || cartItems.length === 0}
|
|
variant="success"
|
|
size="lg"
|
|
fullWidth
|
|
style={{ marginTop: spacing.l }}
|
|
/>
|
|
</ScrollView>
|
|
|
|
{/* Modal adresse invalide */}
|
|
<Modal
|
|
visible={invalidAddressModal}
|
|
onClose={() => setInvalidAddressModal(false)}
|
|
title="Adresse invalide"
|
|
icon="warning-outline"
|
|
iconColor={colors.warning}
|
|
>
|
|
<View style={styles.invalidAddrContent}>
|
|
<View style={styles.invalidAddrIconContainer}>
|
|
<View style={styles.invalidAddrIconCircle}>
|
|
<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 ?
|
|
</Text>
|
|
<View style={styles.invalidAddrSuggestion}>
|
|
<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 }} />
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
|
|
{/* Modal confirmation (paiement espèces) */}
|
|
<Modal
|
|
visible={showConfirmation}
|
|
onClose={handleConfirmClose}
|
|
title="Commande confirmee !"
|
|
icon="checkmark-circle"
|
|
iconColor={colors.success}
|
|
>
|
|
<View style={styles.confirmContent}>
|
|
<View style={styles.confirmIconContainer}>
|
|
<View style={styles.confirmIconCircle}>
|
|
<Ionicons name="checkmark-circle" size={48} color={colors.success} />
|
|
</View>
|
|
</View>
|
|
<Text style={styles.confirmText}>
|
|
Votre commande #{confirmationData?.client_order_number ?? 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} />
|
|
<Text style={styles.confirmInfoText}>
|
|
{confirmationData.referral_used.toFixed(2)} € de credit parrainage utilises
|
|
{confirmationData.referral_balance !== undefined
|
|
? ` — Solde restant : ${confirmationData.referral_balance.toFixed(2)} €`
|
|
: ""}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
<View style={styles.confirmInfo}>
|
|
<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 }} />
|
|
</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.client_order_number ?? 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>
|
|
);
|
|
}
|