Added mascot to vote screen

locales/en.json

@@ -230,6 +230,7 @@
     },
     "vote": {
       "title": "Elections",
+      "noVote": "No vote available",
       "select": {
         "title": "Elections open",
         "subtitle": "Vote now!",
@@ -258,11 +259,10 @@
         "totalVotes": "Total votes:",
         "votes": "votes"
       },
-      "main": {
+      "mascotDialog": {
-        "title": "The Elections",
+        "title": "Why vote?",
-        "subtitle": "Why your vote is important",
+        "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",
-        "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",
+        "button": "Ok"
-        "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"
       }
     },
     "equipment": {

locales/fr.json

@@ -229,6 +229,7 @@
     },
     "vote": {
       "title": "Élections",
+      "noVote": "Pas de vote en cours",
       "select": {
         "title": "Élections ouvertes",
         "subtitle": "Vote maintenant !",
@@ -257,11 +258,10 @@
         "totalVotes": "Nombre total de votes :",
         "votes": "votes"
       },
-      "main": {
+      "mascotDialog": {
-        "title": "Les Élections",
+        "title": "Pourquoi voter ?",
-        "subtitle": "Pourquoi ton vote est important",
+        "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",
-        "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",
+        "button": "Oké"
-        "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"
       }
     },
     "equipment": {

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

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

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_begin": "2020-08-19 15:50",
-//     "date_end": "2020-04-19 15:50",
+//     "date_end": "2020-08-19 15:50",
-//     "date_result_begin": "2020-04-19 19:50",
+//     "date_result_begin": "2020-08-19 19:50",
-//     "date_result_end": "2020-04-19 22: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/>;
+            return (
-        else if (item.key === 'main' && this.dates != null)
+                <View>
-            return this.getContent();
+                    <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
+            <View style={{flex: 1}}>
-                {...this.props}
+                <AuthenticatedScreen
-                ref={this.authRef}
+                    {...this.props}
-                requests={[
+                    ref={this.authRef}
-                    {
+                    requests={[
-                        link: 'elections/teams',
+                        {
-                        params: {},
+                            link: 'elections/teams',
-                        mandatory: false,
+                            params: {},
-                    },
+                            mandatory: false,
-                    {
+                        },
-                        link: 'elections/dates',
+                        {
-                        params: {},
+                            link: 'elections/dates',
-                        mandatory: false,
+                            params: {},
-                    },
+                            mandatory: false,
-                ]}
+                        },
-                renderFunction={this.getScreen}
+                    ]}
-            />
+                    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>
         );
     }
 }