chore: add parrainage
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Linking,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
import { spacing, borderRadius, fontSize, fontWeight } from "../../theme";
|
||||
import { getReferralBalance } from "../../api/api";
|
||||
|
||||
export default function ParrainageScreen() {
|
||||
const { colors } = useTheme();
|
||||
const [balance, setBalance] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
getReferralBalance().then((res) => {
|
||||
if (res.success) setBalance(res.balance);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const steps = [
|
||||
{
|
||||
icon: "chatbubble-ellipses-outline" as const,
|
||||
title: "1. Contacte-nous sur Telegram",
|
||||
desc: "Envoie un message à @milieu_nantais en indiquant ton username et le username de la personne que tu as parrainée.",
|
||||
},
|
||||
{
|
||||
icon: "checkmark-circle-outline" as const,
|
||||
title: "2. Validation par l'admin",
|
||||
desc: "L'admin vérifie le parrainage et crédite manuellement un solde sur ton compte.",
|
||||
},
|
||||
{
|
||||
icon: "wallet-outline" as const,
|
||||
title: "3. Crédit disponible",
|
||||
desc: "Le solde apparaît dans ton profil et au moment du paiement. Tu choisis de l'utiliser ou de le cumuler.",
|
||||
},
|
||||
{
|
||||
icon: "cart-outline" as const,
|
||||
title: "4. Utilisation à la commande",
|
||||
desc: "Au checkout, active l'option \"Utiliser mon crédit parrainage\". Le montant sera déduit de ta commande.",
|
||||
},
|
||||
];
|
||||
|
||||
const styles = useMemo(
|
||||
() =>
|
||||
StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: colors.bgPrimary },
|
||||
content: { padding: spacing.xl, paddingBottom: spacing.xxxl },
|
||||
balanceCard: {
|
||||
backgroundColor: colors.accent + "18",
|
||||
borderRadius: borderRadius.md,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.accent + "44",
|
||||
padding: spacing.xl,
|
||||
alignItems: "center",
|
||||
marginBottom: spacing.xl,
|
||||
},
|
||||
balanceLabel: {
|
||||
color: colors.textMuted,
|
||||
fontSize: fontSize.sm,
|
||||
marginTop: spacing.s,
|
||||
},
|
||||
balanceAmount: {
|
||||
color: colors.accent,
|
||||
fontSize: 36,
|
||||
fontWeight: fontWeight.bold,
|
||||
marginTop: spacing.xs,
|
||||
},
|
||||
sectionTitle: {
|
||||
color: colors.textPrimary,
|
||||
fontSize: fontSize.lg,
|
||||
fontWeight: fontWeight.bold,
|
||||
marginBottom: spacing.l,
|
||||
},
|
||||
stepCard: {
|
||||
backgroundColor: colors.bgCard,
|
||||
borderRadius: borderRadius.md,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.borderLight,
|
||||
padding: spacing.l,
|
||||
marginBottom: spacing.m,
|
||||
flexDirection: "row",
|
||||
gap: spacing.m,
|
||||
},
|
||||
stepIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: colors.accent + "18",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
},
|
||||
stepContent: { flex: 1 },
|
||||
stepTitle: {
|
||||
color: colors.textPrimary,
|
||||
fontSize: fontSize.md,
|
||||
fontWeight: fontWeight.semibold,
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
stepDesc: {
|
||||
color: colors.textSecondary,
|
||||
fontSize: fontSize.sm,
|
||||
lineHeight: 20,
|
||||
},
|
||||
ruleCard: {
|
||||
backgroundColor: colors.warning + "12",
|
||||
borderRadius: borderRadius.md,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.warning + "44",
|
||||
padding: spacing.l,
|
||||
marginTop: spacing.m,
|
||||
marginBottom: spacing.l,
|
||||
},
|
||||
ruleTitle: {
|
||||
color: colors.warning,
|
||||
fontSize: fontSize.md,
|
||||
fontWeight: fontWeight.bold,
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
ruleText: {
|
||||
color: colors.textSecondary,
|
||||
fontSize: fontSize.sm,
|
||||
lineHeight: 20,
|
||||
},
|
||||
ruleExample: {
|
||||
color: colors.textPrimary,
|
||||
fontSize: fontSize.sm,
|
||||
fontWeight: fontWeight.semibold,
|
||||
marginTop: spacing.s,
|
||||
fontStyle: "italic",
|
||||
},
|
||||
telegramBtn: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: spacing.s,
|
||||
backgroundColor: "#229ED9",
|
||||
borderRadius: borderRadius.md,
|
||||
padding: spacing.l,
|
||||
marginTop: spacing.l,
|
||||
},
|
||||
telegramText: {
|
||||
color: "#fff",
|
||||
fontSize: fontSize.md,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
}),
|
||||
[colors],
|
||||
);
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
{/* Solde actuel */}
|
||||
<View style={styles.balanceCard}>
|
||||
<Ionicons name="gift-outline" size={32} color={colors.accent} />
|
||||
<Text style={styles.balanceLabel}>Mon solde parrainage</Text>
|
||||
<Text style={styles.balanceAmount}>{balance.toFixed(2)} €</Text>
|
||||
</View>
|
||||
|
||||
{/* Comment ça marche */}
|
||||
<Text style={styles.sectionTitle}>Comment ca marche ?</Text>
|
||||
|
||||
{steps.map((step, i) => (
|
||||
<View key={i} style={styles.stepCard}>
|
||||
<View style={styles.stepIcon}>
|
||||
<Ionicons name={step.icon} size={20} color={colors.accent} />
|
||||
</View>
|
||||
<View style={styles.stepContent}>
|
||||
<Text style={styles.stepTitle}>{step.title}</Text>
|
||||
<Text style={styles.stepDesc}>{step.desc}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{/* Règle minimum de zone */}
|
||||
<View style={styles.ruleCard}>
|
||||
<Text style={styles.ruleTitle}>⚠️ Règle importante</Text>
|
||||
<Text style={styles.ruleText}>
|
||||
Même avec du crédit parrainage, tu dois toujours payer au minimum le seuil de ta zone de livraison.
|
||||
Le crédit est déduit en plus du montant minimum.
|
||||
</Text>
|
||||
<Text style={styles.ruleExample}>
|
||||
Exemple : crédit 50 € + zone 50 € = commande de 100 € minimum.
|
||||
Tu paies 50 € et le reste est couvert par ton crédit.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Bouton Telegram */}
|
||||
<View
|
||||
style={styles.telegramBtn}
|
||||
// Utiliser TouchableOpacity si besoin d'interaction
|
||||
>
|
||||
<Ionicons name="paper-plane-outline" size={20} color="#fff" />
|
||||
<Text
|
||||
style={styles.telegramText}
|
||||
onPress={() => Linking.openURL("https://t.me/milieu_nantais")}
|
||||
>
|
||||
Contacter @milieu_nantais
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user