From 98359dba7d13b402a595fce1caea20d66a441948 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Fri, 26 Jun 2020 13:01:27 +0200
Subject: [PATCH] Added a welcome box on profile screen

---
 src/screens/Amicale/ProfileScreen.js | 80 +++++++++++++++++++++++++++-
 translations/en.json                 |  5 +-
 translations/fr.json                 |  6 ++-
 3 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/src/screens/Amicale/ProfileScreen.js b/src/screens/Amicale/ProfileScreen.js
index d0dd71b..f09e5dc 100644
--- a/src/screens/Amicale/ProfileScreen.js
+++ b/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
      *
diff --git a/translations/en.json b/translations/en.json
index c749d02..a8d805e 100644
--- a/translations/en.json
+++ b/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.",
diff --git a/translations/fr.json b/translations/fr.json
index d3538ca..33bd6de 100644
--- a/translations/fr.json
+++ b/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.",