Added mascot to equipment screen

locales/en.json

       "title": "Equipment Booking",
       "book": "Book",
       "confirm": "Confirmation",
-      "message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
       "bail": "Bail: %{cost}€",
       "available": "Available %{date}",
       "today": "today",
       "dialogTitle": "Confirm booking?",
       "dialogTitleLoading": "Sending your booking...",
       "dialogMessage": "Are you sure you want to confirm your booking?\n\nYou will then be able to claim the selected equipment at the Amicale for the duration of your booking in exchange of a bail.",
-      "bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment."
+      "bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment.",
+      "mascotDialog": {
+        "title": "How does it work ?",
+        "message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
+        "button": "Ok"
+      }
     },
 
     "scanner": {

locales/fr.json

       "title": "Réservation de Matériel",
       "book": "Réserver",
       "confirm": "Confirmation",
-      "message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
       "bail": "Caution : %{cost}€",
       "available": "Disponible %{date}",
       "today": "aujourd'hui",
       "dialogTitle": "Confirmer la réservation ?",
       "dialogTitleLoading": "Envoi de votre réservation...",
       "dialogMessage": "Est-tu sûr de confirmer ta réservation ?\n\nTu pourras ensuite passer à l'Amicale récupérer le matériel pour la durée de la réservation en échange d'une caution.",
-      "bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel."
+      "bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel.",
+      "mascotDialog": {
+        "title": "Comme ça marche ?",
+        "message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
+        "button": "Merci !"
+      }
     },
 
     "scanner": {

src/managers/AsyncStorageManager.js

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

src/screens/Amicale/Equipment/EquipmentListScreen.js

 // @flow
 
 import * as React from 'react';
-import {Animated, Image} from "react-native";
-import {Card, Paragraph, withTheme} from 'react-native-paper';
+import {Animated, View} from "react-native";
+import {Button, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import {Collapsible} from "react-navigation-collapsible";
 import {withCollapsible} from "../../../utils/withCollapsible";
 import i18n from "i18n-js";
 import type {club} from "../Clubs/ClubListScreen";
 import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentListItem";
+import MascotPopup from "../../../components/Mascot/MascotPopup";
+import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
+import AsyncStorageManager from "../../../managers/AsyncStorageManager";
 
 type Props = {
     navigation: StackNavigationProp,
     collapsibleStack: Collapsible,
 }
 
+type State = {
+    mascotDialogVisible: boolean,
+}
+
 export type Device = {
     id: number,
     name: string,
     end: string,
 }
 
-const ICON_AMICALE = require('../../../../assets/amicale.png');
 const LIST_ITEM_HEIGHT = 64;
 
-class EquipmentListScreen extends React.Component<Props> {
+class EquipmentListScreen extends React.Component<Props, State> {
+
+    state = {
+        mascotDialogVisible: AsyncStorageManager.getInstance().preferences.equipmentShowBanner.current === "1"
+    }
 
     data: Array<Device>;
     userRents: Array<RentedDevice>;
      * @returns {*}
      */
     getListHeader() {
-        return <Card style={{margin: 5}}>
-            <Card.Title
-                title={i18n.t('screens.equipment.title')}
-                left={(props) => <Image
-                    {...props}
+        return (
+            <View style={{
+                width: "100%",
+                marginTop: 10,
+                marginBottom: 10,
+            }}>
+                <Button
+                    mode={"contained"}
+                    icon={"help-circle"}
+                    onPress={this.showMascotDialog}
                     style={{
-                        width: props.size,
-                        height: props.size,
-                    }}
-                    source={ICON_AMICALE}
-                />}
-            />
-            <Card.Content>
-                <Paragraph>
-                    {i18n.t('screens.equipment.message')}
-                </Paragraph>
-            </Card.Content>
-        </Card>;
+                        marginRight: "auto",
+                        marginLeft: "auto",
+                    }}>
+                    {i18n.t("screens.equipment.mascotDialog.title")}
+                </Button>
+            </View>
+        );
     }
 
     keyExtractor = (item: club) => item.id.toString();
         )
     };
 
+    showMascotDialog = () => {
+        this.setState({mascotDialogVisible: true})
+    };
+
+    hideMascotDialog = () => {
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.equipmentShowBanner.key,
+            '0'
+        );
+        this.setState({mascotDialogVisible: false})
+    };
+
     render() {
         return (
-            <AuthenticatedScreen
-                {...this.props}
-                ref={this.authRef}
-                requests={[
-                    {
-                        link: 'location/all',
-                        params: {},
-                        mandatory: true,
-                    },
-                    {
-                        link: 'location/my',
-                        params: {},
-                        mandatory: false,
-                    }
-                ]}
-                renderFunction={this.getScreen}
-            />
+            <View style={{flex: 1}}>
+                <AuthenticatedScreen
+                    {...this.props}
+                    ref={this.authRef}
+                    requests={[
+                        {
+                            link: 'location/all',
+                            params: {},
+                            mandatory: true,
+                        },
+                        {
+                            link: 'location/my',
+                            params: {},
+                            mandatory: false,
+                        }
+                    ]}
+                    renderFunction={this.getScreen}
+                />
+                <MascotPopup
+                    visible={this.state.mascotDialogVisible}
+                    title={i18n.t("screens.equipment.mascotDialog.title")}
+                    message={i18n.t("screens.equipment.mascotDialog.message")}
+                    icon={"vote"}
+                    buttons={{
+                        action: null,
+                        cancel: {
+                            message: i18n.t("screens.equipment.mascotDialog.button"),
+                            icon: "check",
+                            onPress: this.hideMascotDialog,
+                        }
+                    }}
+                    emotion={MASCOT_STYLE.WINK}
+                />
+            </View>
         );
     }
 }