Grouped all services in a single class for easier manipulation

locales/en.json

@@ -230,6 +230,7 @@
     },
     "vote": {
       "title": "Elections",
+      "noVote": "No vote available",
       "select": {
         "title": "Elections open",
         "subtitle": "Vote now!",
@@ -258,18 +259,16 @@
         "totalVotes": "Total votes:",
         "votes": "votes"
       },
-      "main": {
-        "title": "The Elections",
-        "subtitle": "Why your vote is important",
-        "paragraph1": "The Amicale's elections is the right moment for you to choose the next team, which will handle different projects on the campus, help organizing your favorite events, animate the campus life during the whole year, and relay your ideas to the administration, so that your campus life is the most enjoyable possible!\nYour turn to make a change!\uD83D\uDE09",
-        "paragraph2": "Note: If there is only one list, it is still important to vote to show your support, so that the administration knows the current list is supported by students. It is always a plus when taking difficult decisions! \uD83D\uDE09"
+      "mascotDialog": {
+        "title": "Why vote?",
+        "message": "The Amicale's elections is the right moment for you to choose the next team, which will handle different projects on the campus, help organizing your favorite events, animate the campus life during the whole year, and relay your ideas to the administration, so that your campus life is the most enjoyable possible!\nYour turn to make a change!\uD83D\uDE09\n\nNote: If there is only one list, it is still important to vote to show your support, so that the administration knows the current list is supported by students. It is always a plus when taking difficult decisions! \uD83D\uDE09",
+        "button": "Ok"
       }
     },
     "equipment": {
       "title": "Equipment Booking",
       "book": "Book",
       "confirm": "Confirmation",
-      "message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
       "bail": "Bail: %{cost}€",
       "available": "Available %{date}",
       "today": "today",
@@ -284,7 +283,12 @@
       "dialogTitle": "Confirm booking?",
       "dialogTitleLoading": "Sending your booking...",
       "dialogMessage": "Are you sure you want to confirm your booking?\n\nYou will then be able to claim the selected equipment at the Amicale for the duration of your booking in exchange of a bail.",
-      "bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment."
+      "bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment.",
+      "mascotDialog": {
+        "title": "How does it work ?",
+        "message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
+        "button": "Ok"
+      }
     },
 
     "scanner": {

locales/fr.json

@@ -229,6 +229,7 @@
     },
     "vote": {
       "title": "Élections",
+      "noVote": "Pas de vote en cours",
       "select": {
         "title": "Élections ouvertes",
         "subtitle": "Vote maintenant !",
@@ -257,18 +258,16 @@
         "totalVotes": "Nombre total de votes :",
         "votes": "votes"
       },
-      "main": {
-        "title": "Les Élections",
-        "subtitle": "Pourquoi ton vote est important",
-        "paragraph1": "Les élections de l'amicale, c'est le moment pour toi de choisir la prochaine équipe qui portera les différents projets du campus, qui soutiendra les organisations de tes événements favoris, qui te proposera des animations tout au long de l'année, et qui poussera tes idées à l’administration pour que la vie de campus soit des plus riches !\nAlors à toi de jouer ! \uD83D\uDE09",
-        "paragraph2": "NB : Si par cas il n'y a qu'une liste qui se présente, il est important que tout le monde vote, afin qui la liste puisse montrer à l’administration que les INSAiens la soutiennent ! Ça compte toujours pour les décisions difficiles ! \uD83D\uDE09"
+      "mascotDialog": {
+        "title": "Pourquoi voter ?",
+        "message": "Les élections de l'amicale, c'est le moment pour toi de choisir la prochaine équipe qui portera les différents projets du campus, qui soutiendra les organisations de tes événements favoris, qui te proposera des animations tout au long de l'année, et qui poussera tes idées à l’administration pour que la vie de campus soit des plus riches !\nAlors à toi de jouer ! \uD83D\uDE09\n\nNB : Si par cas il n'y a qu'une liste qui se présente, il est important que tout le monde vote, afin qui la liste puisse montrer à l’administration que les INSAiens la soutiennent ! Ça compte toujours pour les décisions difficiles ! \uD83D\uDE09",
+        "button": "Oké"
       }
     },
     "equipment": {
       "title": "Réservation de Matériel",
       "book": "Réserver",
       "confirm": "Confirmation",
-      "message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
       "bail": "Caution : %{cost}€",
       "available": "Disponible %{date}",
       "today": "aujourd'hui",
@@ -277,13 +276,18 @@
       "otherMonth": "le %{date} %{month}",
       "otherYear": "le %{date} %{month} %{year}",
       "bookingDay": "Réservé pour %{date}",
-      "bookingPeriod": "Réservé du %{begin} au %{end}",
+      "bookingPeriod": "Début : %{begin}\nFin : %{end}",
       "booking": "Clique sur le calendrier pour choisir les dates de début et de fin du prêt",
       "bookButton": "Réserver ces dates",
       "dialogTitle": "Confirmer la réservation ?",
       "dialogTitleLoading": "Envoi de votre réservation...",
       "dialogMessage": "Est-tu sûr de confirmer ta réservation ?\n\nTu pourras ensuite passer à l'Amicale récupérer le matériel pour la durée de la réservation en échange d'une caution.",
-      "bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel."
+      "bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel.",
+      "mascotDialog": {
+        "title": "Comme ça marche ?",
+        "message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
+        "button": "Merci !"
+      }
     },
 
     "scanner": {
@@ -341,7 +345,7 @@
       "bugsSubtitle": "Tu as trouvé un bug ?",
       "bugsDescription": "Rapporter les bugs m'aide à améliorer l'appli. Pour cela, merci d'utiliser un des boutons ci-dessous et de décrire ton problème le plus précisément possible !",
       "feedbackSubtitle": "Dis moi ce que tu penses !",
-      "feedbackDescription": "tu veux voir une fonctionnalité ajoutée/modifiée/supprimée ? Tu veux donner ton opinion sur l'appli ou simplement discuter avec le développeur (c'est moi coucou) ? Utilise un des liens ci-dessous !",
+      "feedbackDescription": "Tu veux voir une fonctionnalité ajoutée/modifiée/supprimée ? Tu veux donner ton opinion sur l'appli ou simplement discuter avec le développeur (c'est moi coucou) ? Utilise un des liens ci-dessous !",
       "contactMeans": "L'utilisation de Gitea est recommandée, pour l'utiliser, connecte toi avec tes identifiants INSA.",
       "homeButtonTitle": "Feedback/Bugs",
       "homeButtonSubtitle": "Contacter le développeur"

src/components/Amicale/Vote/VoteNotAvailable.js

@@ -0,0 +1,37 @@
+// @flow
+
+import * as React from 'react';
+import {View} from 'react-native';
+import {Headline, withTheme} from "react-native-paper";
+import i18n from 'i18n-js';
+import type {CustomTheme} from "../../../managers/ThemeManager";
+
+type Props = {
+    theme: CustomTheme
+}
+
+class VoteNotAvailable extends React.Component<Props> {
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    render() {
+        return (
+            <View style={{
+                width: "100%",
+                marginTop: 10,
+                marginBottom: 10,
+            }}>
+                <Headline
+                    style={{
+                        color: this.props.theme.colors.textDisabled,
+                        textAlign: "center",
+                    }}
+                >{i18n.t("screens.vote.noVote")}</Headline>
+            </View>
+        );
+    }
+}
+
+export default withTheme(VoteNotAvailable);

src/components/Amicale/Vote/VoteTitle.js

@@ -1,48 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import {Card, Paragraph} from "react-native-paper";
-import {Image, StyleSheet} from "react-native";
-import i18n from 'i18n-js';
-
-const ICON_AMICALE = require('../../../../assets/amicale.png');
-
-export default class VoteTitle extends React.Component<{}> {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <Card style={styles.card}>
-                <Card.Title
-                    title={i18n.t('screens.vote.main.title')}
-                    subtitle={i18n.t('screens.vote.main.subtitle')}
-                    left={(props) => <Image
-                        {...props}
-                        style={{
-                            width: props.size,
-                            height: props.size,
-                        }}
-                        source={ICON_AMICALE}
-                    />}
-                />
-                <Card.Content>
-                    <Paragraph>
-                        {i18n.t('screens.vote.main.paragraph1')}
-                    </Paragraph>
-                    <Paragraph>
-                        {i18n.t('screens.vote.main.paragraph2')}
-                    </Paragraph>
-                </Card.Content>
-            </Card>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    card: {
-        margin: 10,
-    },
-});

src/components/Lists/CardList/CardList.js

@@ -13,6 +13,7 @@ type Props = {
 }
 
 export type cardItem = {
+    key: string,
     title: string,
     subtitle: string,
     image: string | number,
@@ -44,7 +45,7 @@ export default class CardList extends React.Component<Props> {
             return <CardListItem item={item} key={item.title}/>;
     };
 
-    keyExtractor = (item: cardItem) => item.title;
+    keyExtractor = (item: cardItem) => item.key;
 
     render() {
         let containerStyle = {};

src/managers/AsyncStorageManager.js

@@ -89,6 +89,16 @@ export default class AsyncStorageManager {
             default: '1',
             current: '',
         },
+        voteShowBanner: {
+            key: 'voteShowBanner',
+            default: '1',
+            current: '',
+        },
+        equipmentShowBanner: {
+            key: 'equipmentShowBanner',
+            default: '1',
+            current: '',
+        },
         proxiwashWatchedMachines: {
             key: 'proxiwashWatchedMachines',
             default: '[]',

src/managers/ServicesManager.js

@@ -0,0 +1,261 @@
+// @flow
+
+import type {cardList} from "../components/Lists/CardList/CardList";
+import i18n from "i18n-js";
+import AvailableWebsites from "../constants/AvailableWebsites";
+import {StackNavigationProp} from "@react-navigation/stack";
+import ConnectionManager from "./ConnectionManager";
+
+const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
+const PROFILE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProfilAmicaliste.png";
+const EQUIPMENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Materiel.png";
+const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
+const AMICALE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/WebsiteAmicale.png";
+
+const PROXIMO_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png"
+const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud.png";
+const EE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png";
+const TUTORINSA_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png";
+
+const BIB_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png";
+const RU_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/RU.png";
+const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png";
+const EMAIL_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.png";
+const ENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png";
+const ACCOUNT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Account.png";
+
+export const SERVICES_KEY = {
+    CLUBS: "clubs",
+    PROFILE:"profile",
+    EQUIPMENT: "equipment",
+    AMICALE_WEBSITE: "amicale_website",
+    VOTE: "vote",
+    PROXIMO: "proximo",
+    WIKETUD: "wiketud",
+    ELUS_ETUDIANTS: "elus_etudiants",
+    TUTOR_INSA: "tutor_insa",
+    RU: "ru",
+    AVAILABLE_ROOMS: "available_rooms",
+    BIB: "bib",
+    EMAIL: "email",
+    ENT: "ent",
+    INSA_ACCOUNT: "insa_account",
+}
+
+export default class ServicesManager {
+
+    navigation: StackNavigationProp;
+
+    amicaleDataset: cardList;
+    studentsDataset: cardList;
+    insaDataset: cardList;
+
+    constructor(nav: StackNavigationProp) {
+        this.navigation = nav;
+        this.amicaleDataset = [
+            {
+                key: SERVICES_KEY.CLUBS,
+                title: i18n.t('screens.clubs.title'),
+                subtitle: i18n.t('screens.services.descriptions.clubs'),
+                image: CLUBS_IMAGE,
+                onPress: () => this.onAmicaleServicePress("club-list"),
+            },
+            {
+                key: SERVICES_KEY.PROFILE,
+                title: i18n.t('screens.profile.title'),
+                subtitle: i18n.t('screens.services.descriptions.profile'),
+                image: PROFILE_IMAGE,
+                onPress: () => this.onAmicaleServicePress("profile"),
+            },
+            {
+                key: SERVICES_KEY.EQUIPMENT,
+                title: i18n.t('screens.equipment.title'),
+                subtitle: i18n.t('screens.services.descriptions.equipment'),
+                image: EQUIPMENT_IMAGE,
+                onPress: () => this.onAmicaleServicePress("equipment-list"),
+            },
+            {
+                key: SERVICES_KEY.AMICALE_WEBSITE,
+                title: i18n.t('screens.websites.amicale'),
+                subtitle: i18n.t('screens.services.descriptions.amicaleWebsite'),
+                image: AMICALE_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.AMICALE, title: i18n.t('screens.websites.amicale')}),
+            },
+            {
+                key: SERVICES_KEY.VOTE,
+                title: i18n.t('screens.vote.title'),
+                subtitle: i18n.t('screens.services.descriptions.vote'),
+                image: VOTE_IMAGE,
+                onPress: () => this.onAmicaleServicePress("vote"),
+            },
+        ];
+        this.studentsDataset = [
+            {
+                key: SERVICES_KEY.PROXIMO,
+                title: i18n.t('screens.proximo.title'),
+                subtitle: i18n.t('screens.services.descriptions.proximo'),
+                image: PROXIMO_IMAGE,
+                onPress: () => nav.navigate("proximo"),
+            },
+            {
+                key: SERVICES_KEY.WIKETUD,
+                title: "Wiketud",
+                subtitle: i18n.t('screens.services.descriptions.wiketud'),
+                image: WIKETUD_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.WIKETUD, title: "Wiketud"}),
+            },
+            {
+                key: SERVICES_KEY.ELUS_ETUDIANTS,
+                title: "Élus Étudiants",
+                subtitle: i18n.t('screens.services.descriptions.elusEtudiants'),
+                image: EE_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.WIKETUD, title: "Wiketud"}),
+            },
+            {
+                key: SERVICES_KEY.TUTOR_INSA,
+                title: "Tutor'INSA",
+                subtitle: i18n.t('screens.services.descriptions.tutorInsa'),
+                image: TUTORINSA_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.TUTOR_INSA, title: "Tutor'INSA"})
+            },
+        ];
+        this.insaDataset = [
+            {
+                key: SERVICES_KEY.RU,
+                title: i18n.t('screens.menu.title'),
+                subtitle: i18n.t('screens.services.descriptions.self'),
+                image: RU_IMAGE,
+                onPress: () => nav.navigate("self-menu"),
+            },
+            {
+                key: SERVICES_KEY.AVAILABLE_ROOMS,
+                title: i18n.t('screens.websites.rooms'),
+                subtitle: i18n.t('screens.services.descriptions.availableRooms'),
+                image: ROOM_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.AVAILABLE_ROOMS, title: i18n.t('screens.websites.rooms')}),
+            },
+            {
+                key: SERVICES_KEY.BIB,
+                title: i18n.t('screens.websites.bib'),
+                subtitle: i18n.t('screens.services.descriptions.bib'),
+                image: BIB_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.BIB, title: i18n.t('screens.websites.bib')}),
+            },
+            {
+                key: SERVICES_KEY.EMAIL,
+                title: i18n.t('screens.websites.mails'),
+                subtitle: i18n.t('screens.services.descriptions.mails'),
+                image: EMAIL_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.BLUEMIND, title: i18n.t('screens.websites.mails')}),
+            },
+            {
+                key: SERVICES_KEY.ENT,
+                title: i18n.t('screens.websites.ent'),
+                subtitle: i18n.t('screens.services.descriptions.ent'),
+                image: ENT_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.ENT, title: i18n.t('screens.websites.ent')}),
+            },
+            {
+                key: SERVICES_KEY.INSA_ACCOUNT,
+                title: i18n.t('screens.insaAccount.title'),
+                subtitle: i18n.t('screens.services.descriptions.insaAccount'),
+                image: ACCOUNT_IMAGE,
+                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.INSA_ACCOUNT, title: i18n.t('screens.insaAccount.title')}),
+            },
+        ];
+    }
+
+    /**
+     * Redirects the user to the login screen if he is not logged in
+     *
+     * @param route
+     * @returns {null}
+     */
+    onAmicaleServicePress(route: string) {
+        if (ConnectionManager.getInstance().isLoggedIn())
+            this.navigation.navigate(route);
+        else
+            this.navigation.navigate("login", {nextScreen: route});
+    }
+
+    /**
+     * Gets the given services list without items of the given ids
+     *
+     * @param idList The ids of items to remove
+     * @param sourceList The item list to use as source
+     * @returns {[]}
+     */
+    getStrippedList(idList: Array<string>, sourceList: cardList) {
+        let newArray = [];
+        for (let i = 0; i < sourceList.length; i++) {
+            const item = sourceList[i];
+            if (!(idList.includes(item.key)))
+                newArray.push(item);
+        }
+        return newArray;
+    }
+
+    /**
+     * Gets a services list of items with the given ids only
+     *
+     * @param idList The ids of items to find
+     * @returns {[]}
+     */
+    getServicesOfId(idList: Array<string>) {
+        const allServices = [
+            ...this.amicaleDataset,
+            ...this.studentsDataset,
+            ...this.insaDataset,
+        ]
+        let servicesFound = [];
+        for (let i = 0; i < allServices.length; i++) {
+            const item = allServices[i];
+            if (idList.includes(item.key)) {
+                servicesFound.push(item);
+                if (servicesFound.length === idList.length)
+                    break;
+            }
+        }
+        return servicesFound;
+    }
+
+    /**
+     * Gets the list of amicale's services
+     *
+     * @param excludedItems Ids of items to exclude from the returned list
+     * @returns {cardList|*[]}
+     */
+    getAmicaleServices(excludedItems?: Array<string>) {
+        if (excludedItems != null)
+            return this.getStrippedList(excludedItems, this.amicaleDataset)
+        else
+            return this.amicaleDataset;
+    }
+
+    /**
+     * Gets the list of students' services
+     *
+     * @param excludedItems Ids of items to exclude from the returned list
+     * @returns {cardList|*[]}
+     */
+    getStudentServices(excludedItems?: Array<string>) {
+        if (excludedItems != null)
+            return this.getStrippedList(excludedItems, this.studentsDataset)
+        else
+            return this.studentsDataset;
+    }
+
+    /**
+     * Gets the list of INSA's services
+     *
+     * @param excludedItems Ids of items to exclude from the returned list
+     * @returns {cardList|*[]}
+     */
+    getINSAServices(excludedItems?: Array<string>) {
+        if (excludedItems != null)
+            return this.getStrippedList(excludedItems, this.insaDataset)
+        else
+            return this.insaDataset;
+    }
+
+}

src/screens/Amicale/Equipment/EquipmentListScreen.js

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Image} from "react-native";
-import {Card, Paragraph, withTheme} from 'react-native-paper';
+import {Animated, View} from "react-native";
+import {Button, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import {Collapsible} from "react-navigation-collapsible";
 import {withCollapsible} from "../../../utils/withCollapsible";
@@ -11,6 +11,9 @@ import type {CustomTheme} from "../../../managers/ThemeManager";
 import i18n from "i18n-js";
 import type {club} from "../Clubs/ClubListScreen";
 import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentListItem";
+import MascotPopup from "../../../components/Mascot/MascotPopup";
+import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
+import AsyncStorageManager from "../../../managers/AsyncStorageManager";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -18,6 +21,10 @@ type Props = {
     collapsibleStack: Collapsible,
 }
 
+type State = {
+    mascotDialogVisible: boolean,
+}
+
 export type Device = {
     id: number,
     name: string,
@@ -32,10 +39,13 @@ export type RentedDevice = {
     end: string,
 }
 
-const ICON_AMICALE = require('../../../../assets/amicale.png');
 const LIST_ITEM_HEIGHT = 64;
 
-class EquipmentListScreen extends React.Component<Props> {
+class EquipmentListScreen extends React.Component<Props, State> {
+
+    state = {
+        mascotDialogVisible: AsyncStorageManager.getInstance().preferences.equipmentShowBanner.current === "1"
+    }
 
     data: Array<Device>;
     userRents: Array<RentedDevice>;
@@ -84,24 +94,24 @@ class EquipmentListScreen extends React.Component<Props> {
      * @returns {*}
      */
     getListHeader() {
-        return <Card style={{margin: 5}}>
-            <Card.Title
-                title={i18n.t('screens.equipment.title')}
-                left={(props) => <Image
-                    {...props}
+        return (
+            <View style={{
+                width: "100%",
+                marginTop: 10,
+                marginBottom: 10,
+            }}>
+                <Button
+                    mode={"contained"}
+                    icon={"help-circle"}
+                    onPress={this.showMascotDialog}
                     style={{
-                        width: props.size,
-                        height: props.size,
-                    }}
-                    source={ICON_AMICALE}
-                />}
-            />
-            <Card.Content>
-                <Paragraph>
-                    {i18n.t('screens.equipment.message')}
-                </Paragraph>
-            </Card.Content>
-        </Card>;
+                        marginRight: "auto",
+                        marginLeft: "auto",
+                    }}>
+                    {i18n.t("screens.equipment.mascotDialog.title")}
+                </Button>
+            </View>
+        );
     }
 
     keyExtractor = (item: club) => item.id.toString();
@@ -141,25 +151,54 @@ class EquipmentListScreen extends React.Component<Props> {
         )
     };
 
+    showMascotDialog = () => {
+        this.setState({mascotDialogVisible: true})
+    };
+
+    hideMascotDialog = () => {
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.equipmentShowBanner.key,
+            '0'
+        );
+        this.setState({mascotDialogVisible: false})
+    };
+
     render() {
         return (
-            <AuthenticatedScreen
-                {...this.props}
-                ref={this.authRef}
-                requests={[
-                    {
-                        link: 'location/all',
-                        params: {},
-                        mandatory: true,
-                    },
-                    {
-                        link: 'location/my',
-                        params: {},
-                        mandatory: false,
-                    }
-                ]}
-                renderFunction={this.getScreen}
-            />
+            <View style={{flex: 1}}>
+                <AuthenticatedScreen
+                    {...this.props}
+                    ref={this.authRef}
+                    requests={[
+                        {
+                            link: 'location/all',
+                            params: {},
+                            mandatory: true,
+                        },
+                        {
+                            link: 'location/my',
+                            params: {},
+                            mandatory: false,
+                        }
+                    ]}
+                    renderFunction={this.getScreen}
+                />
+                <MascotPopup
+                    visible={this.state.mascotDialogVisible}
+                    title={i18n.t("screens.equipment.mascotDialog.title")}
+                    message={i18n.t("screens.equipment.mascotDialog.message")}
+                    icon={"vote"}
+                    buttons={{
+                        action: null,
+                        cancel: {
+                            message: i18n.t("screens.equipment.mascotDialog.button"),
+                            icon: "check",
+                            onPress: this.hideMascotDialog,
+                        }
+                    }}
+                    emotion={MASCOT_STYLE.WINK}
+                />
+            </View>
         );
     }
 }

src/screens/Amicale/ProfileScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, FlatList, Image, StyleSheet, View} from "react-native";
+import {Animated, FlatList, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import i18n from 'i18n-js';
@@ -15,6 +15,8 @@ import CardList from "../../components/Lists/CardList/CardList";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../managers/ThemeManager";
 import AvailableWebsites from "../../constants/AvailableWebsites";
+import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -43,11 +45,6 @@ type Club = {
     is_manager: boolean,
 }
 
-const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
-const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
-
-const ICON_AMICALE = require('../../../assets/amicale.png');
-
 class ProfileScreen extends React.Component<Props, State> {
 
     state = {
@@ -59,34 +56,16 @@ class ProfileScreen extends React.Component<Props, State> {
     flatListData: Array<{ id: string }>;
     amicaleDataset: cardList;
 
-    constructor() {
-        super();
+    constructor(props: Props) {
+        super(props);
         this.flatListData = [
             {id: '0'},
             {id: '1'},
             {id: '2'},
             {id: '3'},
         ]
-        this.amicaleDataset = [
-            {
-                title: i18n.t('screens.clubs.title'),
-                subtitle: i18n.t('screens.services.descriptions.clubs'),
-                image: CLUBS_IMAGE,
-                onPress: () => this.props.navigation.navigate("club-list"),
-            },
-            {
-                title: i18n.t('screens.vote.title'),
-                subtitle: i18n.t('screens.services.descriptions.vote'),
-                image: VOTE_IMAGE,
-                onPress: () => this.props.navigation.navigate("vote"),
-            },
-            {
-                title: i18n.t('screens.websites.amicale'),
-                subtitle: i18n.t('screens.services.descriptions.amicaleWebsite'),
-                image: ICON_AMICALE,
-                onPress: () => this.props.navigation.navigate("website", {host: AvailableWebsites.websites.AMICALE, title: i18n.t('screens.websites.amicale')}),
-            },
-        ];
+        const services = new ServicesManager(props.navigation);
+        this.amicaleDataset = services.getAmicaleServices([SERVICES_KEY.PROFILE]);
     }
 
     componentDidMount() {
@@ -179,12 +158,14 @@ class ProfileScreen extends React.Component<Props, State> {
             <Card style={styles.card}>
                 <Card.Title
                     title={i18n.t("screens.profile.welcomeTitle", {name: this.data.first_name})}
-                    left={() => <Image
-                        style={{
-                            width: 50,
-                            height: 50,
+                    left={() => <Mascot
+                        emotion={MASCOT_STYLE.COOL}
+                        size={60}
+                        animated={true}
+                        entryAnimation={{
+                            animation: "bounceIn",
+                            duration: 1000
                         }}
-                        source={ICON_AMICALE}
                     />}
                     titleStyle={{marginLeft: 10}}
                 />
@@ -290,7 +271,11 @@ class ProfileScreen extends React.Component<Props, State> {
                         <Button
                             icon="account-edit"
                             mode="contained"
-                            onPress={() => this.props.navigation.navigate("website", {host: AvailableWebsites.websites.AMICALE, path: this.data.link, title: i18n.t('screens.websites.amicale')})}
+                            onPress={() => this.props.navigation.navigate("website", {
+                                host: AvailableWebsites.websites.AMICALE,
+                                path: this.data.link,
+                                title: i18n.t('screens.websites.amicale')
+                            })}
                             style={styles.editButton}>
                             {i18n.t("screens.profile.editInformation")}
                         </Button>

src/screens/Amicale/VoteScreen.js

@@ -4,12 +4,17 @@ import * as React from 'react';
 import {FlatList, RefreshControl, View} from "react-native";
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
-import VoteTitle from "../../components/Amicale/Vote/VoteTitle";
 import VoteTease from "../../components/Amicale/Vote/VoteTease";
 import VoteSelect from "../../components/Amicale/Vote/VoteSelect";
 import VoteResults from "../../components/Amicale/Vote/VoteResults";
 import VoteWait from "../../components/Amicale/Vote/VoteWait";
 import {StackNavigationProp} from "@react-navigation/stack";
+import i18n from "i18n-js";
+import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import MascotPopup from "../../components/Mascot/MascotPopup";
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
+import {Button} from "react-native-paper";
+import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
 
 export type team = {
     id: number,
@@ -37,10 +42,10 @@ type objectVoteDates = {
 }
 
 // const FAKE_DATE = {
-//     "date_begin": "2020-04-19 15:50",
-//     "date_end": "2020-04-19 15:50",
-//     "date_result_begin": "2020-04-19 19:50",
-//     "date_result_end": "2020-04-19 22:50",
+//     "date_begin": "2020-08-19 15:50",
+//     "date_end": "2020-08-19 15:50",
+//     "date_result_begin": "2020-08-19 19:50",
+//     "date_result_end": "2020-08-19 22:50",
 // };
 //
 // const FAKE_DATE2 = {
@@ -92,6 +97,7 @@ type Props = {
 
 type State = {
     hasVoted: boolean,
+    mascotDialogVisible: boolean,
 }
 
 /**
@@ -101,6 +107,7 @@ export default class VoteScreen extends React.Component<Props, State> {
 
     state = {
         hasVoted: false,
+        mascotDialogVisible: AsyncStorageManager.getInstance().preferences.voteShowBanner.current === "1",
     };
 
     teams: Array<team>;
@@ -200,11 +207,23 @@ export default class VoteScreen extends React.Component<Props, State> {
 
     mainRenderItem = ({item}: { item: { key: string } }) => {
         if (item.key === 'info')
-            return <VoteTitle/>;
-        else if (item.key === 'main' && this.dates != null)
-            return this.getContent();
+            return (
+                <View>
+                    <Button
+                        mode={"contained"}
+                        icon={"help-circle"}
+                        onPress={this.showMascotDialog}
+                        style={{
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                            marginTop: 20
+                        }}>
+                        {i18n.t("screens.vote.mascotDialog.title")}
+                    </Button>
+                </View>
+            );
         else
-            return null;
+            return this.getContent();
     };
 
     getScreen = (data: Array<{ [key: string]: any } | null>) => {
@@ -254,7 +273,7 @@ export default class VoteScreen extends React.Component<Props, State> {
         else if (this.isResultRunning())
             return this.getVoteResultCard();
         else
-            return null;
+            return <VoteNotAvailable/>;
     }
 
     onVoteSuccess = () => this.setState({hasVoted: true});
@@ -278,7 +297,7 @@ export default class VoteScreen extends React.Component<Props, State> {
                     this.datesString.date_result_end)}
             />;
         else
-            return null;
+            return <VoteNotAvailable/>;
     }
 
     /**
@@ -289,7 +308,7 @@ export default class VoteScreen extends React.Component<Props, State> {
             return <VoteTease
                 startDate={this.getDateString(this.dates.date_begin, this.datesString.date_begin)}/>;
         else
-            return null;
+            return <VoteNotAvailable/>;
     }
 
     /**
@@ -304,6 +323,18 @@ export default class VoteScreen extends React.Component<Props, State> {
                          isVoteRunning={this.isVoteRunning()}/>;
     }
 
+    showMascotDialog = () => {
+        this.setState({mascotDialogVisible: true})
+    };
+
+    hideMascotDialog = () => {
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.voteShowBanner.key,
+            '0'
+        );
+        this.setState({mascotDialogVisible: false})
+    };
+
     /**
      * Renders the authenticated screen.
      *
@@ -313,23 +344,40 @@ export default class VoteScreen extends React.Component<Props, State> {
      */
     render() {
         return (
-            <AuthenticatedScreen
-                {...this.props}
-                ref={this.authRef}
-                requests={[
-                    {
-                        link: 'elections/teams',
-                        params: {},
-                        mandatory: false,
-                    },
-                    {
-                        link: 'elections/dates',
-                        params: {},
-                        mandatory: false,
-                    },
-                ]}
-                renderFunction={this.getScreen}
-            />
+            <View style={{flex: 1}}>
+                <AuthenticatedScreen
+                    {...this.props}
+                    ref={this.authRef}
+                    requests={[
+                        {
+                            link: 'elections/teams',
+                            params: {},
+                            mandatory: false,
+                        },
+                        {
+                            link: 'elections/dates',
+                            params: {},
+                            mandatory: false,
+                        },
+                    ]}
+                    renderFunction={this.getScreen}
+                />
+                <MascotPopup
+                    visible={this.state.mascotDialogVisible}
+                    title={i18n.t("screens.vote.mascotDialog.title")}
+                    message={i18n.t("screens.vote.mascotDialog.message")}
+                    icon={"vote"}
+                    buttons={{
+                        action: null,
+                        cancel: {
+                            message: i18n.t("screens.vote.mascotDialog.button"),
+                            icon: "check",
+                            onPress: this.hideMascotDialog,
+                        }
+                    }}
+                    emotion={MASCOT_STYLE.CUTE}
+                />
+            </View>
         );
     }
 }

src/screens/Services/ServicesScreen.js

@@ -13,10 +13,10 @@ import i18n from 'i18n-js';
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
 import ConnectionManager from "../../managers/ConnectionManager";
 import {StackNavigationProp} from "@react-navigation/stack";
-import AvailableWebsites from "../../constants/AvailableWebsites";
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
 import MascotPopup from "../../components/Mascot/MascotPopup";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
+import ServicesManager from "../../managers/ServicesManager";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -38,24 +38,6 @@ export type listItem = {
 
 const AMICALE_LOGO = require("../../../assets/amicale.png");
 
-const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
-const PROFILE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProfilAmicaliste.png";
-const EQUIPMENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Materiel.png";
-const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
-const AMICALE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/WebsiteAmicale.png";
-
-const PROXIMO_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png"
-const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud.png";
-const EE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png";
-const TUTORINSA_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png";
-
-const BIB_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png";
-const RU_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/RU.png";
-const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png";
-const EMAIL_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.png";
-const ENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png";
-const ACCOUNT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Account.png";
-
 class ServicesScreen extends React.Component<Props, State> {
 
     amicaleDataset: cardList;
@@ -70,103 +52,10 @@ class ServicesScreen extends React.Component<Props, State> {
 
     constructor(props) {
         super(props);
-        const nav = props.navigation;
-        this.amicaleDataset = [
-            {
-                title: i18n.t('screens.clubs.title'),
-                subtitle: i18n.t('screens.services.descriptions.clubs'),
-                image: CLUBS_IMAGE,
-                onPress: () => this.onAmicaleServicePress("club-list"),
-            },
-            {
-                title: i18n.t('screens.profile.title'),
-                subtitle: i18n.t('screens.services.descriptions.profile'),
-                image: PROFILE_IMAGE,
-                onPress: () => this.onAmicaleServicePress("profile"),
-            },
-            {
-                title: i18n.t('screens.equipment.title'),
-                subtitle: i18n.t('screens.services.descriptions.equipment'),
-                image: EQUIPMENT_IMAGE,
-                onPress: () => this.onAmicaleServicePress("equipment-list"),
-            },
-            {
-                title: i18n.t('screens.websites.amicale'),
-                subtitle: i18n.t('screens.services.descriptions.amicaleWebsite'),
-                image: AMICALE_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.AMICALE, title: i18n.t('screens.websites.amicale')}),
-            },
-            {
-                title: i18n.t('screens.vote.title'),
-                subtitle: i18n.t('screens.services.descriptions.vote'),
-                image: VOTE_IMAGE,
-                onPress: () => this.onAmicaleServicePress("vote"),
-            },
-        ];
-        this.studentsDataset = [
-            {
-                title: i18n.t('screens.proximo.title'),
-                subtitle: i18n.t('screens.services.descriptions.proximo'),
-                image: PROXIMO_IMAGE,
-                onPress: () => nav.navigate("proximo"),
-            },
-            {
-                title: "Wiketud",
-                subtitle: i18n.t('screens.services.descriptions.wiketud'),
-                image: WIKETUD_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.WIKETUD, title: "Wiketud"}),
-            },
-            {
-                title: "Élus Étudiants",
-                subtitle: i18n.t('screens.services.descriptions.elusEtudiants'),
-                image: EE_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.ELUS_ETUDIANTS, title: "Élus Étudiants"}),
-            },
-            {
-                title: "Tutor'INSA",
-                subtitle: i18n.t('screens.services.descriptions.tutorInsa'),
-                image: TUTORINSA_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.TUTOR_INSA, title: "Tutor'INSA"})
-            },
-        ];
-        this.insaDataset = [
-            {
-                title: i18n.t('screens.menu.title'),
-                subtitle: i18n.t('screens.services.descriptions.self'),
-                image: RU_IMAGE,
-                onPress: () => nav.navigate("self-menu"),
-            },
-            {
-                title: i18n.t('screens.websites.rooms'),
-                subtitle: i18n.t('screens.services.descriptions.availableRooms'),
-                image: ROOM_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.AVAILABLE_ROOMS, title: i18n.t('screens.websites.rooms')}),
-            },
-            {
-                title: i18n.t('screens.websites.bib'),
-                subtitle: i18n.t('screens.services.descriptions.bib'),
-                image: BIB_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.BIB, title: i18n.t('screens.websites.bib')}),
-            },
-            {
-                title: i18n.t('screens.websites.mails'),
-                subtitle: i18n.t('screens.services.descriptions.mails'),
-                image: EMAIL_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.BLUEMIND, title: i18n.t('screens.websites.mails')}),
-            },
-            {
-                title: i18n.t('screens.websites.ent'),
-                subtitle: i18n.t('screens.services.descriptions.ent'),
-                image: ENT_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.ENT, title: i18n.t('screens.websites.ent')}),
-            },
-            {
-                title: i18n.t('screens.insaAccount.title'),
-                subtitle: i18n.t('screens.services.descriptions.insaAccount'),
-                image: ACCOUNT_IMAGE,
-                onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.INSA_ACCOUNT, title: i18n.t('screens.insaAccount.title')}),
-            },
-        ];
+        const services = new ServicesManager(props.navigation);
+        this.amicaleDataset = services.getAmicaleServices();
+        this.studentsDataset = services.getStudentServices();
+        this.insaDataset = services.getINSAServices();
         this.finalDataset = [
             {
                 title: i18n.t("screens.services.categories.amicale"),