Added a welcome box on profile screen

src/screens/Amicale/ProfileScreen.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Animated, FlatList, StyleSheet, View} from "react-native";
-import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
+import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import i18n from 'i18n-js';
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
@@ -10,6 +10,8 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 import {Collapsible} from "react-navigation-collapsible";
 import {withCollapsible} from "../../utils/withCollapsible";
+import type {cardList} from "../../components/Lists/CardList/CardList";
+import CardList from "../../components/Lists/CardList/CardList";
 
 type Props = {
     navigation: Object,
@@ -21,6 +23,11 @@ type State = {
     dialogVisible: 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 = {
@@ -30,6 +37,7 @@ class ProfileScreen extends React.Component<Props, State> {
     data: Object;
 
     flatListData: Array<Object>;
+    amicaleDataset: cardList;
 
     constructor() {
         super();
@@ -37,7 +45,28 @@ class ProfileScreen extends React.Component<Props, State> {
             {id: '0'},
             {id: '1'},
             {id: '2'},
+            {id: '3'},
         ]
+        this.amicaleDataset = [
+            {
+                title: i18n.t('screens.clubsAbout'),
+                subtitle: i18n.t('servicesScreen.descriptions.clubs'),
+                image: CLUBS_IMAGE,
+                onPress: () => this.props.navigation.navigate("club-list"),
+            },
+            {
+                title: i18n.t('screens.vote'),
+                subtitle: i18n.t('servicesScreen.descriptions.vote'),
+                image: VOTE_IMAGE,
+                onPress: () => this.props.navigation.navigate("vote"),
+            },
+            {
+                title: i18n.t('screens.amicaleWebsite'),
+                subtitle: i18n.t('servicesScreen.descriptions.amicaleWebsite'),
+                image: ICON_AMICALE,
+                onPress: () => this.props.navigation.navigate("amicale-website"),
+            },
+        ];
     }
 
     componentDidMount() {
@@ -83,14 +112,61 @@ class ProfileScreen extends React.Component<Props, State> {
     getRenderItem = ({item}: Object) => {
         switch (item.id) {
             case '0':
-                return this.getPersonalCard();
+                return this.getWelcomeCard();
             case '1':
+                return this.getPersonalCard();
+            case '2':
                 return this.getClubCard();
             default:
                 return this.getMembershipCar();
         }
     };
 
+    getServicesList() {
+        return (
+            <CardList
+                dataset={this.amicaleDataset}
+                isHorizontal={true}
+            />
+        );
+    }
+
+    getWelcomeCard() {
+        return (
+            <Card style={styles.card}>
+                <Card.Title
+                    title={i18n.t("profileScreen.welcomeTitle", {name: this.data.first_name})}
+                    left={(props) => <Avatar.Image
+                        size={64}
+                        source={ICON_AMICALE}
+                        style={{backgroundColor: 'transparent',}}
+                    />}
+                    titleStyle={{marginLeft: 10}}
+                />
+                <Card.Content>
+                    <Divider/>
+                    <Paragraph>
+                        {i18n.t("profileScreen.welcomeDescription")}
+                    </Paragraph>
+                    {this.getServicesList()}
+                    <Paragraph>
+                        {i18n.t("profileScreen.welcomeFeedback")}
+                    </Paragraph>
+                    <Divider/>
+                    <Card.Actions>
+                        <Button
+                            icon="bug"
+                            mode="contained"
+                            onPress={() => this.props.navigation.navigate('feedback')}
+                            style={styles.editButton}>
+                            {i18n.t("feedbackScreen.homeButtonTitle")}
+                        </Button>
+                    </Card.Actions>
+                </Card.Content>
+            </Card>
+        );
+    }
+
     /**
      * Checks if the given field is available
      *

translations/en.json

@@ -228,7 +228,10 @@
     "membership": "Membership Fee",
     "membershipSubtitle": "Allows you to take part in various activities",
     "membershipPayed": "Payed",
-    "membershipNotPayed": "Not payed"
+    "membershipNotPayed": "Not payed",
+    "welcomeTitle": "Welcome %{name}!",
+    "welcomeDescription": "This is your Amicale INSA Toulouse personal space. Bellow are the current services you can access thanks to your account. Feels empty? You're right and we plan on fixing that, so stay tuned!",
+    "welcomeFeedback": "We plan on doing more! If you have any suggestions or found bugs, please tell us by clicking the button bellow."
   },
   "scannerScreen": {
     "errorPermission": "Scanotron 3000 needs access to the camera in order to scan QR codes.\nThe camera will never be used for any other purpose.",

translations/fr.json

@@ -228,7 +228,11 @@
     "membership": "Cotisation",
     "membershipSubtitle": "Permet de participer à diverses activités",
     "membershipPayed": "Payée",
-    "membershipNotPayed": "Non payée"
+    "membershipNotPayed": "Non payée",
+    "welcomeTitle": "Bonjour %{name} !",
+    "welcomeDescription": "Ceci est votre espace personnel Amicale INSA Toulouse. Vous trouverez ci-dessous les services disponibles avec votre compte. Un peu vide ? Vous avez raison et nous allons essayer de corriger ça, donc restez à jour !",
+    "welcomeFeedback": "Nous allons essayer de proposer plus de services ! Si vous avez des suggestions, ou avez trouvé des bugs, merci de nous contacter avec le bouton ci-dessous."
+
   },
   "scannerScreen": {
     "errorPermission": "Scanotron 3000 a besoin d'accéder à la caméra pour scanner des QR codes.\nLa caméra ne sera jamais utilisée autrement.",