feat: contribute
This commit is contained in:
parent
eac1c1d5bd
commit
3e70ff23c9
9 changed files with 484 additions and 2 deletions
|
|
@ -21,6 +21,7 @@ import Relatives from "~/scenes/Relatives";
|
|||
import Sheets from "~/scenes/Sheets";
|
||||
import AlertAggListArchived from "~/scenes/AlertAggListArchived";
|
||||
import About from "~/scenes/About";
|
||||
import Contribute from "~/scenes/Contribute";
|
||||
import Location from "~/scenes/Location";
|
||||
import Developer from "~/scenes/Developer";
|
||||
import HelpSignal from "~/scenes/HelpSignal";
|
||||
|
|
@ -413,6 +414,22 @@ export default React.memo(function DrawerNav() {
|
|||
}}
|
||||
listeners={{}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="Contribute"
|
||||
component={Contribute}
|
||||
options={{
|
||||
drawerLabel: "Faire un don",
|
||||
drawerIcon: ({ focused }) => (
|
||||
<MaterialCommunityIcons
|
||||
name="hand-heart"
|
||||
{...iconProps}
|
||||
{...(focused ? iconFocusedProps : {})}
|
||||
/>
|
||||
),
|
||||
unmountOnBlur: true,
|
||||
}}
|
||||
listeners={{}}
|
||||
/>
|
||||
<Drawer.Screen
|
||||
name="Sheets"
|
||||
component={Sheets}
|
||||
|
|
|
|||
|
|
@ -253,6 +253,12 @@ export default function HeaderRight(props) {
|
|||
}}
|
||||
/>
|
||||
<Divider />
|
||||
<Menu.Item
|
||||
title="Faire un don"
|
||||
onPress={() => {
|
||||
navigateTo({ name: "Contribute" });
|
||||
}}
|
||||
/>
|
||||
<Menu.Item
|
||||
title="À Propos"
|
||||
onPress={() => {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ function getHeaderTitle(route) {
|
|||
return "Alertes archivées";
|
||||
case "About":
|
||||
return "À Propos";
|
||||
case "Contribute":
|
||||
return "Faire un don";
|
||||
case "Location":
|
||||
return "Ma Localisation";
|
||||
case "NotFound":
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
import React, { useState, useCallback, useEffect } from "react";
|
||||
import { View, Image, ScrollView } from "react-native";
|
||||
import {
|
||||
View,
|
||||
Image,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Button } from "react-native-paper";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import * as Updates from "expo-updates";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { MaterialIcons, AntDesign, FontAwesome } from "@expo/vector-icons";
|
||||
import Text from "~/components/Text";
|
||||
|
||||
import { useTheme } from "~/theme";
|
||||
import { useTheme, createStyles } from "~/theme";
|
||||
|
||||
import { paramsActions, useParamsState } from "~/stores";
|
||||
|
||||
|
|
@ -16,7 +24,24 @@ const logo = require("~/assets/img/logo192.png");
|
|||
|
||||
const version = require("../../../package.json").version;
|
||||
|
||||
const openURL = async (url) => {
|
||||
try {
|
||||
const supported = await Linking.canOpenURL(url);
|
||||
if (supported) {
|
||||
await Linking.openURL(url);
|
||||
} else {
|
||||
Alert.alert("Erreur", "Impossible d'ouvrir ce lien");
|
||||
}
|
||||
} catch (error) {
|
||||
Alert.alert(
|
||||
"Erreur",
|
||||
"Une erreur s'est produite lors de l'ouverture du lien",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function About() {
|
||||
const navigation = useNavigation();
|
||||
const textStyle = {
|
||||
textAlign: "left",
|
||||
fontSize: 16,
|
||||
|
|
@ -153,6 +178,81 @@ export default function About() {
|
|||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Website and Contribute Buttons */}
|
||||
<View style={{ paddingHorizontal: 15, paddingVertical: 10 }}>
|
||||
{/* Website Button */}
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 8,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
marginBottom: 10,
|
||||
shadowColor: colors.shadow,
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
}}
|
||||
onPress={() => openURL("https://alerte-secours.fr")}
|
||||
>
|
||||
<MaterialIcons
|
||||
name="language"
|
||||
size={24}
|
||||
color={colors.primary}
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.onSurface,
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
marginLeft: 5,
|
||||
}}
|
||||
>
|
||||
Site officiel
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Contribute Button */}
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 8,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
shadowColor: colors.shadow,
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
}}
|
||||
onPress={() => navigation.navigate("Contribute")}
|
||||
>
|
||||
<MaterialIcons
|
||||
name="favorite"
|
||||
size={24}
|
||||
color={colors.primary}
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.onSurface,
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
marginLeft: 5,
|
||||
}}
|
||||
>
|
||||
Contribuer au projet
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={{ padding: 15, justifyContent: "center" }}>
|
||||
<Button
|
||||
mode="text"
|
||||
|
|
|
|||
282
src/scenes/Contribute/index.js
Normal file
282
src/scenes/Contribute/index.js
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
ScrollView,
|
||||
Linking,
|
||||
Alert,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import { MaterialIcons, AntDesign } from "@expo/vector-icons";
|
||||
import Text from "~/components/Text";
|
||||
|
||||
import { createStyles, useTheme } from "~/theme";
|
||||
|
||||
const openURL = async (url) => {
|
||||
try {
|
||||
const supported = await Linking.canOpenURL(url);
|
||||
if (supported) {
|
||||
await Linking.openURL(url);
|
||||
} else {
|
||||
Alert.alert("Erreur", "Impossible d'ouvrir ce lien");
|
||||
}
|
||||
} catch (error) {
|
||||
Alert.alert(
|
||||
"Erreur",
|
||||
"Une erreur s'est produite lors de l'ouverture du lien",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function Contribute() {
|
||||
const styles = useStyles();
|
||||
const { colors } = useTheme();
|
||||
|
||||
return (
|
||||
<ScrollView style={{ flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<MaterialIcons name="favorite" size={28} color={colors.primary} />
|
||||
<Text style={styles.title}>Contribuer au projet</Text>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<Text style={styles.description}>
|
||||
Alerte-Secours est une application mobile citoyenne, gratuite, sans
|
||||
publicité ni exploitation de données.
|
||||
{"\n\n"}
|
||||
Si vous souhaitez contribuer à son développement, sa maintenance et
|
||||
son indépendance :
|
||||
</Text>
|
||||
|
||||
{/* Liberapay Button */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.donationButton,
|
||||
styles.buttonContent,
|
||||
styles.liberapayButton,
|
||||
]}
|
||||
onPress={() => openURL("https://liberapay.com/alerte-secours")}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<View style={styles.iconContainer}>
|
||||
<MaterialIcons name="circle" style={styles.iconDonation} />
|
||||
</View>
|
||||
<View style={styles.buttonTextContainer}>
|
||||
<Text style={styles.buttonLabel}>Liberapay – Soutien régulier</Text>
|
||||
<Text style={styles.buttonDescription}>
|
||||
Pour un soutien récurrent et engagé. Chaque don contribue à
|
||||
assurer la stabilité du service sur le long terme.
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Buy Me a Coffee Button */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.donationButton,
|
||||
styles.buttonContent,
|
||||
styles.buymeacoffeeButton,
|
||||
]}
|
||||
onPress={() => openURL("https://buymeacoffee.com/alertesecours")}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<View style={styles.iconContainer}>
|
||||
<MaterialIcons name="local-cafe" style={styles.iconDonation} />
|
||||
</View>
|
||||
<View style={styles.buttonTextContainer}>
|
||||
<Text style={styles.buttonLabel}>
|
||||
Buy Me a Coffee – Don ponctuel
|
||||
</Text>
|
||||
<Text style={styles.buttonDescription}>
|
||||
Pour un coup de pouce ponctuel, un café virtuel pour encourager le
|
||||
travail accompli !
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* GitHub Sponsors Button */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.donationButton,
|
||||
styles.buttonContent,
|
||||
styles.githubButton,
|
||||
]}
|
||||
onPress={() => openURL("https://github.com/sponsors/alerte-secours")}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<View style={styles.iconContainer}>
|
||||
<AntDesign name="github" style={styles.iconDonation} />
|
||||
</View>
|
||||
<View style={styles.buttonTextContainer}>
|
||||
<Text style={styles.buttonLabel}>GitHub Sponsors</Text>
|
||||
<Text style={styles.buttonDescription}>
|
||||
Pour les développeurs et utilisateurs de GitHub : soutenez le
|
||||
projet directement via votre compte.
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Collaboration Section */}
|
||||
<View style={styles.collaborationSection}>
|
||||
<Text style={styles.collaborationTitle}>
|
||||
Vous souhaitez nous rejoindre
|
||||
</Text>
|
||||
<Text style={styles.collaborationDescription}>
|
||||
Ce projet fait sens pour vous et vous souhaitez vous engager dans un
|
||||
projet d'avenir ?{"\n\n"}
|
||||
Alerte-Secours est à la recherche de collaborateurs avec des
|
||||
compétences dans le développement, la gestion de projet, le
|
||||
business, la com, le graphisme. Contactez-nous si vous souhaitez
|
||||
faire partie de l'aventure.
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.contactButton}
|
||||
onPress={() => openURL("mailto:contact@alertesecours.fr")}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<MaterialIcons name="email" style={styles.contactIcon} />
|
||||
<Text style={styles.contactText}>contact@alertesecours.fr</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = createStyles(({ theme: { colors, custom } }) => ({
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 24,
|
||||
},
|
||||
title: {
|
||||
fontSize: 26,
|
||||
fontWeight: "bold",
|
||||
color: colors.primary,
|
||||
marginLeft: 12,
|
||||
},
|
||||
description: {
|
||||
fontSize: 16,
|
||||
lineHeight: 26,
|
||||
color: colors.onBackground,
|
||||
marginBottom: 36,
|
||||
textAlign: "left",
|
||||
},
|
||||
donationButton: {
|
||||
marginVertical: 10,
|
||||
borderRadius: 16,
|
||||
elevation: 3,
|
||||
shadowColor: colors.shadow,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 4,
|
||||
},
|
||||
buttonContent: {
|
||||
minHeight: 64,
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
},
|
||||
buttonLabel: {
|
||||
fontSize: 17,
|
||||
fontWeight: "700",
|
||||
textAlign: "left",
|
||||
marginBottom: 4,
|
||||
color: custom.donation.onDonation,
|
||||
},
|
||||
buttonDescription: {
|
||||
fontSize: 14,
|
||||
opacity: 0.9,
|
||||
textAlign: "left",
|
||||
lineHeight: 20,
|
||||
color: custom.donation.onDonation,
|
||||
},
|
||||
iconContainer: {
|
||||
marginRight: 18,
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.2)",
|
||||
},
|
||||
buttonTextContainer: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
// Icon styles
|
||||
iconDonation: {
|
||||
fontSize: 22,
|
||||
color: custom.donation.onDonation,
|
||||
},
|
||||
// Button background styles
|
||||
liberapayButton: {
|
||||
backgroundColor: custom.donation.liberapay,
|
||||
},
|
||||
buymeacoffeeButton: {
|
||||
backgroundColor: custom.donation.buymeacoffee,
|
||||
},
|
||||
githubButton: {
|
||||
backgroundColor: custom.donation.github,
|
||||
},
|
||||
// Collaboration section styles
|
||||
collaborationSection: {
|
||||
marginTop: 40,
|
||||
padding: 20,
|
||||
backgroundColor: colors.surfaceVariant,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.outline,
|
||||
},
|
||||
collaborationTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: "bold",
|
||||
color: colors.primary,
|
||||
marginBottom: 16,
|
||||
textAlign: "center",
|
||||
},
|
||||
collaborationDescription: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
color: colors.onSurfaceVariant,
|
||||
marginBottom: 20,
|
||||
textAlign: "left",
|
||||
},
|
||||
contactButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 12,
|
||||
elevation: 2,
|
||||
shadowColor: colors.shadow,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 1,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 2,
|
||||
},
|
||||
contactIcon: {
|
||||
fontSize: 20,
|
||||
color: colors.onPrimary,
|
||||
marginRight: 8,
|
||||
},
|
||||
contactText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: colors.onPrimary,
|
||||
},
|
||||
}));
|
||||
58
src/scenes/SendAlert/ContributeButton.js
Normal file
58
src/scenes/SendAlert/ContributeButton.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from "react";
|
||||
import { TouchableOpacity, View } from "react-native";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { createStyles } from "~/theme";
|
||||
import Text from "~/components/Text";
|
||||
import { MaterialIcons } from "@expo/vector-icons";
|
||||
|
||||
export default function ContributeButton() {
|
||||
const navigation = useNavigation();
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<View>
|
||||
<TouchableOpacity
|
||||
style={styles.button}
|
||||
onPress={() => navigation.navigate("Contribute")}
|
||||
>
|
||||
<MaterialIcons
|
||||
name="favorite"
|
||||
size={24}
|
||||
color={styles.icon.color}
|
||||
style={styles.icon}
|
||||
/>
|
||||
<Text style={styles.buttonText}>Contribuer au projet</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = createStyles(({ theme: { colors } }) => ({
|
||||
button: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
alignSelf: "center",
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 8,
|
||||
width: "100%",
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
shadowColor: colors.shadow,
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
},
|
||||
buttonText: {
|
||||
color: colors.onSurface,
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
marginLeft: 5,
|
||||
},
|
||||
icon: {
|
||||
color: colors.primary,
|
||||
marginRight: 10,
|
||||
},
|
||||
}));
|
||||
|
|
@ -12,6 +12,7 @@ import { createStyles, fontFamily } from "~/theme";
|
|||
import HelpBlock from "./HelpBlock";
|
||||
import RegisterRelativesButton from "./RegisterRelativesButton";
|
||||
import NotificationsButton from "./NotificationsButton";
|
||||
import ContributeButton from "./ContributeButton";
|
||||
|
||||
export default function SendAlert() {
|
||||
const navigation = useNavigation();
|
||||
|
|
@ -215,6 +216,8 @@ export default function SendAlert() {
|
|||
{capitalize(levelLabel.call)}
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<ContributeButton />
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -96,6 +96,13 @@ const ThemeDark = {
|
|||
call: "#4c6ef5",
|
||||
onColor: "#FFFFFF",
|
||||
},
|
||||
|
||||
donation: {
|
||||
liberapay: "#f59f00", // Same as colors.warn
|
||||
buymeacoffee: "#40c057", // Same as colors.ok
|
||||
github: "#b3c4ff", // Same as colors.primary (dark theme)
|
||||
onDonation: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
};
|
||||
export default ThemeDark;
|
||||
|
|
|
|||
|
|
@ -95,6 +95,13 @@ const ThemeLight = {
|
|||
call: "#4c6ef5",
|
||||
onColor: "#FFFFFF",
|
||||
},
|
||||
|
||||
donation: {
|
||||
liberapay: "#f59f00", // Same as colors.warn
|
||||
buymeacoffee: "#40c057", // Same as colors.ok
|
||||
github: "#1864ab", // Same as colors.primary
|
||||
onDonation: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue