Added mascot to vote screen

locales/en.json

     },
     "vote": {
       "title": "Elections",
+      "noVote": "No vote available",
       "select": {
         "title": "Elections open",
         "subtitle": "Vote now!",
         "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": {

locales/fr.json

     },
     "vote": {
       "title": "Élections",
+      "noVote": "Pas de vote en cours",
       "select": {
         "title": "Élections ouvertes",
         "subtitle": "Vote maintenant !",
         "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": {

src/components/Amicale/Vote/VoteNotAvailable.js

+// @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

-// @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/managers/AsyncStorageManager.js

             default: '1',
             current: '',
         },
+        voteShowBanner: {
+            key: 'voteShowBanner',
+            default: '1',
+            current: '',
+        },
         proxiwashWatchedMachines: {
             key: 'proxiwashWatchedMachines',
             default: '[]',

src/screens/Amicale/VoteScreen.js

 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,
 }
 
 // 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 = {
 
 type State = {
     hasVoted: boolean,
+    mascotDialogVisible: boolean,
 }
 
 /**
 
     state = {
         hasVoted: false,
+        mascotDialogVisible: AsyncStorageManager.getInstance().preferences.voteShowBanner.current === "1",
     };
 
     teams: Array<team>;
 
     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>) => {
         else if (this.isResultRunning())
             return this.getVoteResultCard();
         else
-            return null;
+            return <VoteNotAvailable/>;
     }
 
     onVoteSuccess = () => this.setState({hasVoted: true});
                     this.datesString.date_result_end)}
             />;
         else
-            return null;
+            return <VoteNotAvailable/>;
     }
 
     /**
             return <VoteTease
                 startDate={this.getDateString(this.dates.date_begin, this.datesString.date_begin)}/>;
         else
-            return null;
+            return <VoteNotAvailable/>;
     }
 
     /**
                          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.
      *
      */
     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>
         );
     }
 }