Added mail contact for bug reports

screens/About/AboutScreen.js

 
 import * as React from 'react';
 import {FlatList, Linking, Platform, View} from 'react-native';
-import {Body, Card, CardItem, Container, Content, H1, Left, Right, Text, Thumbnail} from 'native-base';
+import {Body, Card, CardItem, Container, Content, H1, Left, Right, Text, Thumbnail, Button} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
 import i18n from "i18n-js";
 import appJson from '../../app';
 import packageJson from '../../package';
 import CustomMaterialIcon from "../../components/CustomMaterialIcon";
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
+import Modalize from "react-native-modalize";
+import ThemeManager from "../../utils/ThemeManager";
 
 const links = {
     appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
     playstore: 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
-    expo: 'https://expo.io/@amicaleinsat/application-amicale',
     git: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
-    bugs: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
+    bugsMail: 'mailto:vergnet@etud.insa-toulouse.fr?' +
+        'subject=' +
+        '[BUG] Application Amicale INSA Toulouse' +
+        '&body=' +
+        'Coucou Arnaud ça bug c\'est nul,\n\n' +
+        'Informations sur ton système si tu sais (iOS ou Android, modèle du tel, version):\n\n\n' +
+        'Nature du problème :\n\n\n' +
+        'Étapes pour reproduire ce pb :\n\n\n\n' +
+        'Stp corrige le pb, bien cordialement.',
+    bugsGit: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
     changelog: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
     license: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
-    mail: "mailto:vergnet@etud.insa-toulouse.fr?subject=Application Amicale INSA Toulouse&body=",
+    mail: "mailto:vergnet@etud.insa-toulouse.fr?" +
+        "subject=" +
+        "Application Amicale INSA Toulouse" +
+        "&body=" +
+        "Coucou !\n\n",
     linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
     facebook: 'https://www.facebook.com/arnaud.vergnet',
     react: 'https://facebook.github.io/react-native/',
 export default class AboutScreen extends React.Component<Props, State> {
 
     debugTapCounter = 0;
+    modalRef: { current: null | Modalize };
 
     state = {
         isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1'
     };
 
+    constructor(props: any) {
+        super(props);
+        this.modalRef = React.createRef();
+    }
+
     /**
      * Data to be displayed in the app card
      */
             showChevron: true
         },
         {
-            onPressCallback: () => openWebLink(links.expo),
-            icon: 'worker',
-            text: i18n.t('aboutScreen.expoBeta'),
+            onPressCallback: () => this.openBugReportModal(),
+            icon: 'bug',
+            text: i18n.t('aboutScreen.bugs'),
             showChevron: true
         },
         {
             showChevron: true
         },
         {
-            onPressCallback: () => openWebLink(links.bugs),
-            icon: 'bug',
-            text: i18n.t('aboutScreen.bugs'),
-            showChevron: true
-        },
-        {
             onPressCallback: () => openWebLink(links.changelog),
             icon: 'refresh',
             text: i18n.t('aboutScreen.changelog'),
         AsyncStorageManager.getInstance().savePref(key, '1');
     }
 
+    getBugReportModal() {
+        return (
+            <Modalize ref={this.modalRef}
+                      adjustToContentHeight
+                      modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
+                <View style={{
+                    flex: 1,
+                    padding: 20
+                }}>
+                    <H1>{i18n.t('aboutScreen.bugs')}</H1>
+                    <Text>
+                        {i18n.t('aboutScreen.bugsDescription')}
+                    </Text>
+                    <Button
+                        style={{
+                            marginTop: 20,
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                        }}
+                        onPress={() => openWebLink(links.bugsMail)}>
+                        <CustomMaterialIcon
+                            icon={'email'}
+                            color={'#fff'}/>
+                        <Text>{i18n.t('aboutScreen.bugsMail')}</Text>
+                    </Button>
+                    <Button
+                        style={{
+                            marginTop: 20,
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                        }}
+                        onPress={() => openWebLink(links.bugsGit)}>
+                        <CustomMaterialIcon
+                            icon={'git'}
+                            color={'#fff'}/>
+                        <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
+                    </Button>
+                </View>
+            </Modalize>
+        );
+    }
+
+    openBugReportModal() {
+        if (this.modalRef.current) {
+            this.modalRef.current.open();
+        }
+    }
+
     render() {
         const nav = this.props.navigation;
         return (
             <Container>
+                {this.getBugReportModal()}
                 <CustomHeader navigation={nav} title={i18n.t('screens.about')} hasBackButton={true}/>
                 <Content padder>
                     <Card>

translations/en.json

   "aboutScreen": {
     "appstore": "See on the Appstore",
     "playstore": "See on the Playstore",
-    "expoBeta": "Participate in the Beta!",
     "bugs": "Report Bugs",
+    "bugsDescription": "Reporting bugs helps us make the app better. Please be as precise as possible when describing your problem!",
+    "bugsMail": "Send a Mail",
+    "bugsGit": "Open an issue on Git",
     "changelog": "Changelog",
     "license": "License",
     "debug": "Debug",
     "inStock": "in stock",
     "description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.",
     "openingHours": "Openning Hours",
-    "paymentMethods" : "Payment Methods",
-    "paymentMethodsDescription" : "Cash or Lydia"
+    "paymentMethods": "Payment Methods",
+    "paymentMethodsDescription": "Cash or Lydia"
   },
   "proxiwashScreen": {
     "dryer": "Dryer",
     "loading": "Loading...",
     "description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay b credit card or cash.",
     "informationTab": "Information",
-    "paymentTab" : "Payment",
+    "paymentTab": "Payment",
     "tariffs": "Tariffs",
     "washersTariff": "3€ the washer + 0.80€ with detergent.",
     "dryersTariff": "0.35€ for 5min of dryer usage.",
     "paymentMethods": "Payment Methods",
-    "paymentMethodsDescription" : "Cash up until 10€.\nCredit Card also accepted.",
+    "paymentMethodsDescription": "Cash up until 10€.\nCredit Card also accepted.",
     "washerProcedure": "Put your laundry in the tumble without tamping it and by respecting charge limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the command central, then press the START button on the machine.\n\nWhen the program is finished, the screen indicates 'Programme terminé', press the yellow button to open the lid and retrieve your laundry.",
     "washerTips": "Program 'blanc/couleur': 6kg of dry laundry (cotton linen, linen, underwear, sheets, jeans, towels).\n\nProgram 'non repassable': 3,5 kg of dry laundry (synthetic fibre linen, cotton and polyester mixed).\n\nProgram 'fin 30°C': 2,5 kg of dry laundry (delicate linen in synthetic fibres).\n\nProgram 'laine 30°C': 2,5 kg of dry laundry (wool textiles).",
     "dryerProcedure": "Put your laundry in the tumble without tamping it and by respecting charge limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the command central, then press the START button on the machine.",
     "dryerTips": "The advised dryer length is 35 minutes for 14 kg of laundry. You can choose a shorter length if the dryer is not fully charged.",
     "procedure": "Procedure",
     "tips": "Tips",
-
     "modal": {
       "enableNotifications": "Notify me",
       "disableNotifications": "Stop notifications",

translations/fr.json

   "aboutScreen": {
     "appstore": "Voir sur l'Appstore",
     "playstore": "Voir sur le Playstore",
-    "expoBeta": "Participer à la Beta !",
     "bugs": "Rapporter des Bugs",
+    "bugsDescription": "Rapporter les bugs nous aide à améliorer l'appli. Merci de décrire votre problème le plus précisément possible !",
+    "bugsMail": "Envoyer un Mail",
+    "bugsGit": "Ouvrir un ticket sur Git",
     "changelog": "Historique des modifications",
     "license": "Licence",
     "debug": "Debug",