diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..13fb9eb
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,21 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[*.{vue,js}]
+indent_size = 2
+
+[docker-compose.yml]
+indent_size = 4
diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..26d3352
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/.idea/com-app.iml b/.idea/com-app.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/com-app.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..72b73b8
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/com-app.iml" filepath="$PROJECT_DIR$/.idea/com-app.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/ComApp/.prettierrc.js b/ComApp/.prettierrc.js
index 2b54074..2ae7b38 100644
--- a/ComApp/.prettierrc.js
+++ b/ComApp/.prettierrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   arrowParens: 'avoid',
   bracketSameLine: true,
-  bracketSpacing: false,
+  bracketSpacing: true,
   singleQuote: true,
   trailingComma: 'all',
 };
diff --git a/ComApp/package-lock.json b/ComApp/package-lock.json
index faa8f68..e465283 100644
--- a/ComApp/package-lock.json
+++ b/ComApp/package-lock.json
@@ -14436,8 +14436,6 @@
     },
     "node_modules/npm/node_modules/debug/node_modules/ms": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -15237,8 +15235,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/glob": {
       "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15741,8 +15737,6 @@
     },
     "node_modules/npm/node_modules/rimraf/node_modules/glob": {
       "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15818,8 +15812,6 @@
     },
     "node_modules/npm/node_modules/semver/node_modules/lru-cache": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -31283,8 +31275,6 @@
           "dependencies": {
             "ms": {
               "version": "2.1.2",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-              "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
               "bundled": true
             }
           }
@@ -31852,8 +31842,6 @@
             },
             "glob": {
               "version": "7.2.3",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-              "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
               "bundled": true,
               "requires": {
                 "fs.realpath": "^1.0.0",
@@ -32195,8 +32183,6 @@
             },
             "glob": {
               "version": "7.2.3",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-              "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
               "bundled": true,
               "requires": {
                 "fs.realpath": "^1.0.0",
@@ -32240,8 +32226,6 @@
           "dependencies": {
             "lru-cache": {
               "version": "6.0.0",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-              "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
diff --git a/ComApp/src/App.js b/ComApp/src/App.js
index 7fb263d..7fc7bb3 100644
--- a/ComApp/src/App.js
+++ b/ComApp/src/App.js
@@ -1,49 +1,58 @@
 import React from 'react';
 // Sentry
-import * as Sentry from "@sentry/react-native";
+import * as Sentry from '@sentry/react-native';
 // Redux
 import { Provider } from 'react-redux';
-import { store } from './App/Store/ConfigureStore';
 import { initDocuments } from './App/Store/Actions/documents';
+import { store } from './App/Store/ConfigureStore';
 // Deps
-import 'react-native-gesture-handler';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { navigationRef, navigate } from './Navigation';
-import { TouchableOpacity, View, Image, Text, TextInput, Alert, DrawerLayoutAndroid, Button } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome5';
-import FlashMessage, { showMessage } from 'react-native-flash-message';
 import * as SplashScreen from 'expo-splash-screen';
+import {
+  Alert,
+  Button,
+  DrawerLayoutAndroid,
+  Image,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import FlashMessage, { showMessage } from 'react-native-flash-message';
+import 'react-native-gesture-handler';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { navigate, navigationRef } from './Navigation';
 // Application infos
 import * as Application from 'expo-application';
 // i18n
-import i18n from "./I18n";
+import i18n from './I18n';
 // FileSytem
 import * as FileSystem from 'expo-file-system';
 // Views
+import ContactDetailsScreen from './App/Views/ContactDetailsScreen';
+import ContactScreen from './App/Views/ContactScreen';
+import DirectoriesScreen from './App/Views/DirectoriesScreen';
+import HomeScreen from './App/Views/HomeScreen';
 import InstallScreen from './App/Views/InstallScreen';
 import LoginScreen from './App/Views/LoginScreen';
-import SyncScreen from './App/Views/SyncScreen';
-import HomeScreen from './App/Views/HomeScreen';
-import DirectoriesScreen from './App/Views/DirectoriesScreen';
-import PDFScreen from './App/Views/PDFScreen';
-import VideoScreen from './App/Views/VideoScreen';
-import OnlyVideosScreen from './App/Views/OnlyVideosScreen';
-import ContactScreen from './App/Views/ContactScreen';
-import ContactDetailsScreen from './App/Views/ContactDetailsScreen';
-import SearchScreen from "./App/Views/SearchScreen";
 import MySpaceScreen from './App/Views/MySpaceScreen';
+import OnlyVideosScreen from './App/Views/OnlyVideosScreen';
+import PDFScreen from './App/Views/PDFScreen';
+import SearchScreen from './App/Views/SearchScreen';
+import SyncScreen from './App/Views/SyncScreen';
+import VideoScreen from './App/Views/VideoScreen';
 // Style
 import styles from './Resources/Styles/NavigationStyle';
 // Controllers
 import SyncController from './App/Controllers/SyncController';
 
 Sentry.init({
-  dsn: "https://ab87e8d840324f41873c95b06903b0bf@o4504314935640064.ingest.sentry.io/4504441255886848",
+  dsn: 'https://ab87e8d840324f41873c95b06903b0bf@o4504314935640064.ingest.sentry.io/4504441255886848',
 });
 
-Sentry.setContext("app", {
-  boUrl: SyncController.getUrlBo()
+Sentry.setContext('app', {
+  boUrl: SyncController.getUrlBo(),
 });
 
 SplashScreen.preventAutoHideAsync(); //Keep
@@ -61,7 +70,7 @@ class App extends React.Component {
     searchTxt: '',
     sendEmail: '',
     mainColor: '',
-    drawerRef: React.createRef()
+    drawerRef: React.createRef(),
   };
 
   componentDidMount() {
@@ -69,7 +78,7 @@ class App extends React.Component {
     this.setState({
       isSetup: store.getState().app.isSetup,
       isLogged: store.getState().app.logged,
-      mainColor: store.getState().app.mainColor
+      mainColor: store.getState().app.mainColor,
     });
   }
 
@@ -77,9 +86,9 @@ class App extends React.Component {
     this.setState({
       isSetup: store.getState().app.isSetup,
       isLogged: store.getState().app.logged,
-      mainColor: store.getState().app.mainColor
+      mainColor: store.getState().app.mainColor,
     }); // to force re-rendering
-    console.log("state changed")
+    console.log('state changed');
   }
 
   navigationView = () => (
@@ -89,16 +98,23 @@ class App extends React.Component {
           onPress={() => {
             this.state.drawerRef.current.closeDrawer();
             store.dispatch({ type: 'EDIT_LOCALE' });
-            store.dispatch(initDocuments(store.getState().locale.locale, store.getState().directories.global))
+            store.dispatch(
+              initDocuments(
+                store.getState().locale.locale,
+                store.getState().directories.global,
+              ),
+            );
           }}
           style={styles.drawer.btn}>
           <Image source={this.renderFlag()} style={{ width: 25, height: 25 }} />
-          <Text style={styles.drawer.btnText}>{i18n.t('global.change_lang')}</Text>
+          <Text style={styles.drawer.btnText}>
+            {i18n.t('global.change_lang')}
+          </Text>
         </TouchableOpacity>
         <TouchableOpacity
           onPress={() => {
             this.state.drawerRef.current.closeDrawer();
-            navigate('SyncScreen')
+            navigate('SyncScreen');
           }}
           style={styles.drawer.btn}>
           <Icon name="sync-alt" size={20} />
@@ -115,7 +131,9 @@ class App extends React.Component {
         </TouchableOpacity>
       </View>
       <View>
-        <Text style={{ marginBottom: 10 }}>Version : {Application.nativeApplicationVersion}</Text>
+        <Text style={{ marginBottom: 10 }}>
+          Version : {Application.nativeApplicationVersion}
+        </Text>
         <Button
           title={i18n.t('global.close')}
           color={this.state.mainColor}
@@ -132,202 +150,260 @@ class App extends React.Component {
           <DrawerLayoutAndroid
             ref={this.state.drawerRef}
             drawerWidth={300}
-            drawerPosition={"right"}
+            drawerPosition={'right'}
             drawerLockMode={'locked-open'}
-            renderNavigationView={this.navigationView}
-          >
-          <Stack.Navigator initialRouteName="HomeScreen">
-            {this.state.isSetup === false &&
-              <Stack.Screen
-                name="InstallScreen"
-                component={InstallScreen}
-                options={(navigation, route) => ({
-                  headerTitle: () => this.LogoTitle(navigation, i18n.t('install.installation'), false),
-                  headerRight: () => (
-                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                      <TouchableOpacity
-                        onPress={() => {
-                          store.dispatch({ type: 'EDIT_LOCALE' });
-                        }}
-                        style={{ marginRight: 15 }}>
-                        <Image source={this.renderFlag()} style={{ width: 25, height: 25 }} />
-                      </TouchableOpacity>
-                    </View>
-                  ),
-                })}
-              />
-            }
-            {this.state.isLogged === false ? (
-              <Stack.Screen
-                name="LoginScreen"
-                component={LoginScreen}
-                options={(navigation, route) => ({
-                  headerTitle: () => this.LogoTitle(navigation, i18n.t('global.login'), false),
-                  headerRight: () => (
-                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                      <TouchableOpacity
-                        onPress={() => {
-                          store.dispatch({ type: 'EDIT_LOCALE' });
-                        }}
-                        style={{ marginRight: 15 }}>
-                        <Image source={this.renderFlag()} style={{ width: 25, height: 25 }} />
-                      </TouchableOpacity>
-                    </View>
-                  ),
-                })}
-              />
-            ) : (
+            renderNavigationView={this.navigationView}>
+            <Stack.Navigator initialRouteName="HomeScreen">
+              {this.state.isSetup === false && (
                 <Stack.Screen
-                name="HomeScreen"
-                component={HomeScreen}
-                options={(navigation, route) => ({
-                  headerTitle: () => this.LogoTitle(navigation, i18n.t('global.home')),
-                  headerRight: () => (
-                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                      <View style={{ flexDirection: 'row', marginRight: 50 }}>
-                        <TextInput
-                          style={{ ...styles.searchInput, borderColor: this.state.mainColor }}
-                          placeholder={i18n.t('global.search')}
-                          value={this.state.searchTxt}
-                          onChangeText={(text) => this.setState({ searchTxt: text })}
-                        />
+                  name="InstallScreen"
+                  component={InstallScreen}
+                  options={(navigation, route) => ({
+                    headerTitle: () =>
+                      this.LogoTitle(
+                        navigation,
+                        i18n.t('install.installation'),
+                        false,
+                      ),
+                    headerRight: () => (
+                      <View
+                        style={{ flexDirection: 'row', alignItems: 'center' }}>
                         <TouchableOpacity
-                          style={{ ...styles.btnSearch, backgroundColor: this.state.mainColor }}
                           onPress={() => {
+                            store.dispatch({ type: 'EDIT_LOCALE' });
+                          }}
+                          style={{ marginRight: 15 }}>
+                          <Image
+                            source={this.renderFlag()}
+                            style={{ width: 25, height: 25 }}
+                          />
+                        </TouchableOpacity>
+                      </View>
+                    ),
+                  })}
+                />
+              )}
+              {this.state.isLogged === false ? (
+                <Stack.Screen
+                  name="LoginScreen"
+                  component={LoginScreen}
+                  options={(navigation, route) => ({
+                    headerTitle: () =>
+                      this.LogoTitle(navigation, i18n.t('global.login'), false),
+                    headerRight: () => (
+                      <View
+                        style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <TouchableOpacity
+                          onPress={() => {
+                            store.dispatch({ type: 'EDIT_LOCALE' });
+                          }}
+                          style={{ marginRight: 15 }}>
+                          <Image
+                            source={this.renderFlag()}
+                            style={{ width: 25, height: 25 }}
+                          />
+                        </TouchableOpacity>
+                      </View>
+                    ),
+                  })}
+                />
+              ) : (
+                <Stack.Screen
+                  name="HomeScreen"
+                  component={HomeScreen}
+                  options={(navigation, route) => ({
+                    headerTitle: () =>
+                      this.LogoTitle(navigation, i18n.t('global.home')),
+                    headerRight: () => (
+                      <View
+                        style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <View style={{ flexDirection: 'row', marginRight: 50 }}>
+                          <TextInput
+                            style={{
+                              ...styles.searchInput,
+                              borderColor: this.state.mainColor,
+                            }}
+                            placeholder={i18n.t('global.search')}
+                            value={this.state.searchTxt}
+                            onChangeText={text =>
+                              this.setState({ searchTxt: text })
+                            }
+                          />
+                          <TouchableOpacity
+                            style={{
+                              ...styles.btnSearch,
+                              backgroundColor: this.state.mainColor,
+                            }}
+                            onPress={() => {
+                              if (this.state.searchTxt.length > 0) {
+                                navigation.navigation.navigate('SearchScreen', {
+                                  needle: this.state.searchTxt,
+                                  onlyVideos: false,
+                                });
+                                this.setState({ searchTxt: '' });
+                              }
+                            }}>
+                            <Icon name={'search'} size={20} color={'white'} />
+                          </TouchableOpacity>
+                        </View>
+                        {store.getState().app.ShowIsActive === '1' && (
+                          <TouchableOpacity
+                            onPress={() =>
+                              navigation.navigation.navigate('MySpaceScreen')
+                            }
+                            style={{ marginRight: 25 }}>
+                            <Icon name="user-circle" size={25} />
+                          </TouchableOpacity>
+                        )}
+                        <TouchableOpacity
+                          onPress={() =>
+                            navigation.navigation.navigate('ContactScreen', {
+                              action: 'add',
+                            })
+                          }
+                          style={{ marginRight: 25 }}>
+                          <Icon name="user-plus" size={20} />
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                          onPress={() => {
+                            this.state.drawerRef.current.openDrawer();
+                          }}
+                          style={{ marginRight: 25 }}>
+                          <Icon name="sliders-h" size={20} />
+                        </TouchableOpacity>
+                      </View>
+                    ),
+                  })}
+                />
+              )}
+              <Stack.Screen
+                name="SyncScreen"
+                component={SyncScreen}
+                initialParams={{ forceSync: false }}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(
+                      navigation,
+                      i18n.t('global.synchronization'),
+                    ),
+                })}
+              />
+              <Stack.Screen
+                name="DirectoriesScreen"
+                component={DirectoriesScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(navigation, i18n.t('app.folders')),
+                })}
+              />
+              <Stack.Screen
+                name="OnlyVideosScreen"
+                component={OnlyVideosScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(navigation, i18n.t('global.videos')),
+                  headerRight: () => (
+                    <View style={{ flexDirection: 'row', marginRight: 5 }}>
+                      <TextInput
+                        style={{
+                          ...styles.searchInput,
+                          borderColor: this.state.mainColor,
+                        }}
+                        placeholder={i18n.t('global.search')}
+                        value={this.state.searchTxt}
+                        onChangeText={text =>
+                          this.setState({ searchTxt: text })
+                        }
+                      />
+                      <TouchableOpacity
+                        style={{
+                          ...styles.btnSearch,
+                          backgroundColor: this.state.mainColor,
+                        }}
+                        onPress={() => {
                           if (this.state.searchTxt.length > 0) {
                             navigation.navigation.navigate('SearchScreen', {
                               needle: this.state.searchTxt,
-                              onlyVideos: false,
+                              onlyVideos: true,
                             });
                             this.setState({ searchTxt: '' });
                           }
                         }}>
-                          <Icon name={'search'} size={20} color={'white'} />
-                        </TouchableOpacity>
-                      </View>
-                      {store.getState().app.ShowIsActive === '1' && (
-                        <TouchableOpacity
-                          onPress={() => navigation.navigation.navigate('MySpaceScreen')}
-                          style={{ marginRight: 25 }}>
-                          <Icon name="user-circle" size={25} />
-                        </TouchableOpacity>
-                      )}
-                      <TouchableOpacity
-                        onPress={() => navigation.navigation.navigate('ContactScreen', {
-                          action: 'add',
-                        })}
-                        style={{ marginRight: 25 }}>
-                        <Icon name="user-plus" size={20} />
-                      </TouchableOpacity>
-                      <TouchableOpacity
-                        onPress={() => {
-                          this.state.drawerRef.current.openDrawer()
-                        }}
-                        style={{ marginRight: 25 }}>
-                        <Icon name="sliders-h" size={20} />
+                        <Icon name={'search'} size={20} color={'white'} />
                       </TouchableOpacity>
                     </View>
                   ),
                 })}
-                />
-            )}
-            <Stack.Screen
-              name="SyncScreen"
-              component={SyncScreen}
-              initialParams={{ forceSync: false }}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('global.synchronization'))
-              })}
-            />
-            <Stack.Screen
-              name="DirectoriesScreen"
-              component={DirectoriesScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.folders'))
-              })}
-            />
-            <Stack.Screen
-              name="OnlyVideosScreen"
-              component={OnlyVideosScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('global.videos')),
-                headerRight: () => (
-                  <View style={{ flexDirection: 'row', marginRight: 5 }}>
-                    <TextInput style={{ ...styles.searchInput, borderColor: this.state.mainColor }} placeholder={i18n.t('global.search')} value={this.state.searchTxt} onChangeText={(text) => this.setState({ searchTxt: text })} />
-                    <TouchableOpacity style={{ ...styles.btnSearch, backgroundColor: this.state.mainColor }} onPress={() => {
-                      if (this.state.searchTxt.length > 0) {
-                        navigation.navigation.navigate('SearchScreen', {
-                          needle: this.state.searchTxt,
-                          onlyVideos: true,
-                        });
-                        this.setState({ searchTxt: '' });
-                      }
-                    }}>
-                      <Icon name={'search'} size={20} color={'white'} />
-                    </TouchableOpacity>
-                  </View>
-                ),
-              })}
-            />
-            <Stack.Screen
-              name="VideoScreen"
-              component={VideoScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.video')),
-                headerRight: () => this.SendEmail(),
-                orientation: 'landscape'
-              })}
-            />
-            <Stack.Screen
-              name="PDFScreen"
-              component={PDFScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, 'PDF'),
-                headerRight: () => this.SendEmail()
-              })}
-            />
-            <Stack.Screen
-              name="ContactScreen"
-              component={ContactScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('global.contacts'))
-              })}
-              initialParams={{ contactAdded: false }}
-            />
-            <Stack.Screen
-              name="ContactDetailsScreen"
-              component={ContactDetailsScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.contact_details'))
-              })}
-            />
-            <Stack.Screen
-              name="SearchScreen"
-              component={SearchScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.results_search'))
-              })}
-            />
-            <Stack.Screen
-              name="MySpaceScreen"
-              component={MySpaceScreen}
-              options={(navigation, route) => ({
-                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.my_space')),
-                headerRight: () => (
-                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <TouchableOpacity
-                      onPress={() => {
-                        const folder = store.getState().directories.treeview.filter(tmp => tmp.id === 1);
-                        navigation.navigation.navigate('DirectoriesScreen', { folder: folder })
-                      }}
-                      style={{ marginRight: 15 }}>
-                      <Icon name="briefcase" size={20} />
-                    </TouchableOpacity>
-                  </View>
-                ),
-              })}
-            />
-          </Stack.Navigator>
+              />
+              <Stack.Screen
+                name="VideoScreen"
+                component={VideoScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(navigation, i18n.t('app.video')),
+                  headerRight: () => this.SendEmail(),
+                  orientation: 'landscape',
+                })}
+              />
+              <Stack.Screen
+                name="PDFScreen"
+                component={PDFScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () => this.LogoTitle(navigation, 'PDF'),
+                  headerRight: () => this.SendEmail(),
+                })}
+              />
+              <Stack.Screen
+                name="ContactScreen"
+                component={ContactScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(navigation, i18n.t('global.contacts')),
+                })}
+                initialParams={{ contactAdded: false }}
+              />
+              <Stack.Screen
+                name="ContactDetailsScreen"
+                component={ContactDetailsScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(navigation, i18n.t('app.contact_details')),
+                })}
+              />
+              <Stack.Screen
+                name="SearchScreen"
+                component={SearchScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(navigation, i18n.t('app.results_search')),
+                })}
+              />
+              <Stack.Screen
+                name="MySpaceScreen"
+                component={MySpaceScreen}
+                options={(navigation, route) => ({
+                  headerTitle: () =>
+                    this.LogoTitle(navigation, i18n.t('app.my_space')),
+                  headerRight: () => (
+                    <View
+                      style={{ flexDirection: 'row', alignItems: 'center' }}>
+                      <TouchableOpacity
+                        onPress={() => {
+                          const folder = store
+                            .getState()
+                            .directories.treeview.filter(tmp => tmp.id === 1);
+                          navigation.navigation.navigate('DirectoriesScreen', {
+                            folder: folder,
+                          });
+                        }}
+                        style={{ marginRight: 15 }}>
+                        <Icon name="briefcase" size={20} />
+                      </TouchableOpacity>
+                    </View>
+                  ),
+                })}
+              />
+            </Stack.Navigator>
             <FlashMessage position="top" />
           </DrawerLayoutAndroid>
         </NavigationContainer>
@@ -338,20 +414,23 @@ class App extends React.Component {
   LogoTitle(navigation, title, wantBtn = true) {
     return (
       <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <TouchableOpacity onPress={() => {
-          if (wantBtn) {
-            navigation.navigation.navigate('HomeScreen')
-          }
-        }}>
+        <TouchableOpacity
+          onPress={() => {
+            if (wantBtn) {
+              navigation.navigation.navigate('HomeScreen');
+            }
+          }}>
           {this.state.isSetup ? (
             <Image
               style={{ width: 100, height: 50, resizeMode: 'stretch' }}
-              source={{ uri: FileSystem.documentDirectory + 'RectangleLogo.png' }}
+              source={{
+                uri: FileSystem.documentDirectory + 'RectangleLogo.png',
+              }}
             />
           ) : (
             <Image
               style={{ width: 100, height: 50, resizeMode: 'stretch' }}
-                source={require('./Resources/assets/img/logo.png')}
+              source={require('./Resources/assets/img/logo.png')}
             />
           )}
         </TouchableOpacity>
@@ -362,35 +441,47 @@ class App extends React.Component {
 
   SendEmail() {
     return (
-      <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: 10 }}>
-        <TextInput style={{ ...styles.searchInput, borderColor: this.state.mainColor }} placeholder={i18n.t('global.email')} value={this.state.sendEmail} onChangeText={(text) => this.setState({ sendEmail: text })} />
-        <TouchableOpacity style={{ ...styles.btnSearch, backgroundColor: this.state.mainColor }} onPress={() => {
-          if (this.state.sendEmail.length > 0) {
-            if (Helpers.isEmailValid(this.state.sendEmail)) {
-              const email = {
-                email: this.state.sendEmail,
-                subject: i18n.t('app.file_sharing'),
-                message: '',
-                documents: JSON.stringify([store.getState().currentOpenedDoc]),
-                user_id: store.getState().currentUser.id
-              };
-              store.dispatch({ type: 'SEND_BROCHURE', data: email });
-              showMessage({
-                message: i18n.t('global.message_sent') + '.',
-                description: i18n.t('global.message_will_be_sent_after_sync') + '.',
-                type: 'success',
-                duration: 1500,
-              });
-              this.setState({ sendEmail: '' });
-            } else {
-              Alert.alert(i18n.t('global.warning') + ' !', i18n.t('error.invalid_email_address') + '.', [
-                { text: 'OK' },
-              ],
-                { cancelable: false },
-              );
+      <View
+        style={{ flexDirection: 'row', alignItems: 'center', marginRight: 10 }}>
+        <TextInput
+          style={{ ...styles.searchInput, borderColor: this.state.mainColor }}
+          placeholder={i18n.t('global.email')}
+          value={this.state.sendEmail}
+          onChangeText={text => this.setState({ sendEmail: text })}
+        />
+        <TouchableOpacity
+          style={{ ...styles.btnSearch, backgroundColor: this.state.mainColor }}
+          onPress={() => {
+            if (this.state.sendEmail.length > 0) {
+              if (Helpers.isEmailValid(this.state.sendEmail)) {
+                const email = {
+                  email: this.state.sendEmail,
+                  subject: i18n.t('app.file_sharing'),
+                  message: '',
+                  documents: JSON.stringify([
+                    store.getState().currentOpenedDoc,
+                  ]),
+                  user_id: store.getState().currentUser.id,
+                };
+                store.dispatch({ type: 'SEND_BROCHURE', data: email });
+                showMessage({
+                  message: i18n.t('global.message_sent') + '.',
+                  description:
+                    i18n.t('global.message_will_be_sent_after_sync') + '.',
+                  type: 'success',
+                  duration: 1500,
+                });
+                this.setState({ sendEmail: '' });
+              } else {
+                Alert.alert(
+                  i18n.t('global.warning') + ' !',
+                  i18n.t('error.invalid_email_address') + '.',
+                  [{ text: 'OK' }],
+                  { cancelable: false },
+                );
+              }
             }
-          }
-        }}>
+          }}>
           <Icon name={'paper-plane'} size={20} color={'white'} />
         </TouchableOpacity>
       </View>
@@ -400,22 +491,21 @@ class App extends React.Component {
   renderFlag() {
     let flag;
     switch (store.getState().locale.locale) {
-      case "fr":
+      case 'fr':
         flag = require('./assets/img/flags/fr.png');
         break;
-      case "en":
+      case 'en':
         flag = require('./assets/img/flags/en.png');
         break;
-      case "de":
+      case 'de':
         flag = require('./assets/img/flags/de.png');
         break;
-      case "es":
+      case 'es':
         flag = require('./assets/img/flags/es.png');
         break;
     }
     return flag;
   }
-
 }
 
 export default Sentry.wrap(App);
diff --git a/ComApp/src/App/Controllers/InstallController.js b/ComApp/src/App/Controllers/InstallController.js
index b23d80a..25cd919 100644
--- a/ComApp/src/App/Controllers/InstallController.js
+++ b/ComApp/src/App/Controllers/InstallController.js
@@ -1,63 +1,72 @@
-import { Alert } from "react-native";
+import { Alert } from 'react-native';
 // Lodash
-import _ from 'lodash';
 // Http Client
 import axios from 'axios';
 // Network Infos
-import NetInfo from "@react-native-community/netinfo";
+import NetInfo from '@react-native-community/netinfo';
 // Translations
-import i18n from "../../I18n";
+import i18n from '../../I18n';
 // Database
-import { Setting } from "../../Database";
+import { Setting } from '../../Database';
 
 const api_token = 'G9Q62jt8eL8gN4Ls';
 class InstallController {
+  async getConfig(url) {
+    return axios({
+      method: 'GET',
+      url: url + '/api/settings',
+      responseType: 'json',
+      params: {
+        token: api_token,
+      },
+    });
+  }
 
-    async getConfig(url) {
-        return axios({
-            method: 'GET',
-            url: url + '/api/settings',
-            responseType: 'json',
-            params: {
-                token: api_token
-            },
-        });
-    }
-
-    getAppConfig(url) {
-        NetInfo.fetch().then(state => {
-            if (state.isConnected) {
-                axios({
-                    method: 'GET',
-                    url: url + '/api/app',
-                    responseType: 'json',
-                    params: {
-                        token: api_token
-                    },
-                })
-                    .then(function (response) {
-                        if (response.data) {
-                            if (response.data.status === "OK") {
-                                Setting.upsert({ key: 'HomeFolders', value: JSON.stringify(response.data.datas.folders) });
-                            } else {
-                                Alert.alert(i18n.t("alert.error"), i18n.t("error.error_has_occurred"));
-                                return false;
-                            }
-                        }
-                    })
-                    .catch(function (error) {
-                        console.log(error)
-                        Alert.alert(i18n.t("alert.error"), i18n.t("error.error_has_occurred"));
-                        return false;
-                    })
-            } else {
-                Alert.alert(i18n.t("alert.error"), i18n.t("error.tablet_not_connected_internet"));
+  getAppConfig(url) {
+    NetInfo.fetch().then(state => {
+      if (state.isConnected) {
+        axios({
+          method: 'GET',
+          url: url + '/api/app',
+          responseType: 'json',
+          params: {
+            token: api_token,
+          },
+        })
+          .then(function (response) {
+            if (response.data) {
+              if (response.data.status === 'OK') {
+                Setting.upsert({
+                  key: 'HomeFolders',
+                  value: JSON.stringify(response.data.datas.folders),
+                });
+              } else {
+                Alert.alert(
+                  i18n.t('alert.error'),
+                  i18n.t('error.error_has_occurred'),
+                );
                 return false;
+              }
             }
-        });
-        return true;
-    }
-
+          })
+          .catch(function (error) {
+            console.log(error);
+            Alert.alert(
+              i18n.t('alert.error'),
+              i18n.t('error.error_has_occurred'),
+            );
+            return false;
+          });
+      } else {
+        Alert.alert(
+          i18n.t('alert.error'),
+          i18n.t('error.tablet_not_connected_internet'),
+        );
+        return false;
+      }
+    });
+    return true;
+  }
 }
 
-export default new InstallController();
\ No newline at end of file
+export default new InstallController();
diff --git a/ComApp/src/App/Controllers/LoginController.js b/ComApp/src/App/Controllers/LoginController.js
index 70d5e11..5f3b248 100644
--- a/ComApp/src/App/Controllers/LoginController.js
+++ b/ComApp/src/App/Controllers/LoginController.js
@@ -1,28 +1,24 @@
 // Database
-import { Setting } from "../../Database";
+import { Setting } from '../../Database';
 // BCrypt
 import { verify } from 'react-native-b-crypt-bridge';
 
 class LoginController {
+  verify(user, password) {
+    return verify(password, user.password);
+  }
 
-    verify(user, password) {
-        return verify(
-            password,
-            user.password
-        );
-    }
-
-    login(user) {
-        Setting.upsert({
-            key: 'isLogged',
-            value: JSON.stringify(user),
-        });
-        Setting.upsert({
-            key: 'loggedTime',
-            value: Date.now().toString(),
-        });
-        Setting.upsert({ key: 'lastUser', value: user.id.toString() });
-    }
+  login(user) {
+    Setting.upsert({
+      key: 'isLogged',
+      value: JSON.stringify(user),
+    });
+    Setting.upsert({
+      key: 'loggedTime',
+      value: Date.now().toString(),
+    });
+    Setting.upsert({ key: 'lastUser', value: user.id.toString() });
+  }
 }
 
-export default new LoginController();
\ No newline at end of file
+export default new LoginController();
diff --git a/ComApp/src/App/Controllers/SyncController.js b/ComApp/src/App/Controllers/SyncController.js
index de07332..b9882bd 100644
--- a/ComApp/src/App/Controllers/SyncController.js
+++ b/ComApp/src/App/Controllers/SyncController.js
@@ -1,213 +1,211 @@
 // Lodash
-import _ from 'lodash';
 // Http Client
 import axios from 'axios';
 // Network Infos
-import NetInfo from "@react-native-community/netinfo";
+import NetInfo from '@react-native-community/netinfo';
 // Application infos
 import * as Application from 'expo-application';
-// Database 
-import { Setting, Contact, SendBrochure, Document } from '../../Database';
+// Database
+import { Contact, Document, SendBrochure, Setting } from '../../Database';
 
 const api_token = 'G9Q62jt8eL8gN4Ls';
 
 class SyncController {
-
-    getUrlBo() {
-        const test = Setting.get('bo_url');
-        if (test === false || test === undefined) {
-            return "noset";
-        }
-        return test.value;
+  getUrlBo() {
+    const test = Setting.get('bo_url');
+    if (test === false || test === undefined) {
+      return 'noset';
     }
+    return test.value;
+  }
 
-    getAppStoreUUID() {
-        const test = Setting.get('AppStoreUUID');
-        if (test === false || test === undefined) {
-            return "noset";
-        }
-        return test.value;
+  getAppStoreUUID() {
+    const test = Setting.get('AppStoreUUID');
+    if (test === false || test === undefined) {
+      return 'noset';
     }
+    return test.value;
+  }
 
-    async checkConnection() {
-        return NetInfo.fetch();
+  async checkConnection() {
+    return NetInfo.fetch();
+  }
+
+  async getVersion() {
+    return axios({
+      method: 'GET',
+      url: this.getUrlBo() + '/api/version',
+      responseType: 'json',
+      params: {
+        token: api_token,
+        app_uuid: this.getAppStoreUUID(),
+        app_version: Application.nativeApplicationVersion,
+      },
+    });
+  }
+
+  async getUsers() {
+    return axios({
+      method: 'GET',
+      url: this.getUrlBo() + '/api/users',
+      responseType: 'json',
+      params: {
+        token: api_token,
+      },
+    });
+  }
+
+  async getContacts(userId) {
+    let contacts = Contact.getAll();
+    return axios({
+      method: 'POST',
+      url: this.getUrlBo() + '/api/contacts',
+      responseType: 'json',
+      params: {
+        token: api_token,
+      },
+      data: {
+        contacts: contacts,
+        userId: userId,
+      },
+    });
+  }
+
+  async sendBrochure(brochure) {
+    return axios({
+      method: 'POST',
+      url: this.getUrlBo() + '/api/sendBrochure',
+      responseType: 'json',
+      params: {
+        token: api_token,
+        emails: brochure,
+      },
+    });
+  }
+
+  async getDirectories() {
+    return axios({
+      method: 'GET',
+      url: this.getUrlBo() + '/api/directories',
+      responseType: 'json',
+      params: {
+        token: api_token,
+      },
+    });
+  }
+
+  async getDocuments() {
+    return axios({
+      method: 'GET',
+      url: this.getUrlBo() + '/api/documents',
+      responseType: 'json',
+      params: {
+        token: api_token,
+      },
+    });
+  }
+
+  updateLastModificationDoc(id, date) {
+    Document.update({ id: id, updated_at: date.toString() }, true);
+  }
+
+  updateVersion(version) {
+    const localVersion = Setting.get('version');
+    if (localVersion === false || localVersion === undefined) {
+      Setting.add({ key: 'version', value: version });
+    } else {
+      Setting.update({ id: localVersion.id, key: 'version', value: version });
     }
+  }
 
-    async getVersion() {
-        return axios({
-            method: 'GET',
-            url: this.getUrlBo() + '/api/version',
-            responseType: 'json',
-            params: {
-                token: api_token,
-                app_uuid: this.getAppStoreUUID(),
-                app_version: Application.nativeApplicationVersion
-            },
-        });
+  updateShowIsActive(value) {
+    const local = Setting.get('ShowIsActive');
+    if (local === false || local === undefined) {
+      Setting.add({ key: 'ShowIsActive', value: value });
+    } else {
+      Setting.update({ id: local.id, key: 'ShowIsActive', value: value });
     }
+  }
 
-    async getUsers() {
-        return axios({
-            method: 'GET',
-            url: this.getUrlBo() + '/api/users',
-            responseType: 'json',
-            params: {
-                token: api_token
-            },
-        });
-    }
+  isSynced() {
+    const brochures = SendBrochure.getAll();
+    const Contacts = Contact.getAll();
 
-    async getContacts(userId) {
-        let contacts = Contact.getAll();
-        return axios({
-            method: 'POST',
-            url: this.getUrlBo() + '/api/contacts',
-            responseType: 'json',
-            params: {
-                token: api_token
-            },
-            data: {
-                contacts: contacts,
-                userId: userId,
-            }
-        });
-    }
-
-    async sendBrochure(brochure) {
-        return axios({
-            method: 'POST',
-            url: this.getUrlBo() + '/api/sendBrochure',
-            responseType: 'json',
-            params: {
-                token: api_token,
-                emails: brochure,
-            },
-        });
-    }
-
-    async getDirectories() {
-        return axios({
-            method: 'GET',
-            url: this.getUrlBo() + '/api/directories',
-            responseType: 'json',
-            params: {
-                token: api_token
-            },
-        });
-    }
-
-    async getDocuments() {
-        return axios({
-            method: 'GET',
-            url: this.getUrlBo() + '/api/documents',
-            responseType: 'json',
-            params: {
-                token: api_token,
-            },
-        });
-    }
-
-    updateLastModificationDoc(id, date) {
-        Document.update({ id: id, updated_at: date.toString() }, true);
-    }
-
-    updateVersion(version) {
-        const localVersion = Setting.get('version');
-        if (localVersion === false || localVersion === undefined) {
-            Setting.add({ key: 'version', value: version });
-        } else {
-            Setting.update({ id: localVersion.id, key: 'version', value: version });
-        }
-    }
-
-    updateShowIsActive(value) {
-        const local = Setting.get('ShowIsActive');
-        if (local === false || local === undefined) {
-            Setting.add({ key: 'ShowIsActive', value: value });
-        } else {
-            Setting.update({ id: local.id, key: 'ShowIsActive', value: value });
-        }
-    }
-
-    isSynced() {
-        const brochures = SendBrochure.getAll();
-        const Contacts = Contact.getAll();
-
-        if (brochures !== undefined && Contacts !== undefined) {
-            const noSynced = Contacts.filtered('synced = false');
-            if (brochures.length > 0 || noSynced.length > 0) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    isLogged() {
-        const logged = Setting.get('isLogged');
-        const loggedTime = Setting.get('loggedTime');
-        if (
-            logged !== false &&
-            loggedTime !== false &&
-            logged !== undefined &&
-            loggedTime !== undefined
-        ) {
-            let seconds =
-                Math.abs(new Date(Number(loggedTime.value)) - Date.now()) / 1000;
-            if (seconds < 14400) {
-                // 4h
-                return true;
-            }
-            return false;
-        }
+    if (brochures !== undefined && Contacts !== undefined) {
+      const noSynced = Contacts.filtered('synced = false');
+      if (brochures.length > 0 || noSynced.length > 0) {
         return false;
+      }
     }
+    return true;
+  }
 
-    needSync(callback) {
-        NetInfo.fetch().then(state => {
-            if (state.isConnected) {
-                axios({
-                    method: 'get',
-                    url: this.getUrlBo() + '/version',
-                    responseType: 'json',
-                    params: {
-                        token: api_token,
-                    },
-                })
-                    .then(response => {
-                        const localVersion = Setting.get('version');
-                        if (
-                            localVersion === undefined ||
-                            localVersion === false ||
-                            localVersion.value !== response.data.version
-                        ) {
-                            return callback();
-                        }
-                        return false;
-                    })
-                    .catch(function (error) {
-                        console.log(error);
-                    });
+  isLogged() {
+    const logged = Setting.get('isLogged');
+    const loggedTime = Setting.get('loggedTime');
+    if (
+      logged !== false &&
+      loggedTime !== false &&
+      logged !== undefined &&
+      loggedTime !== undefined
+    ) {
+      let seconds =
+        Math.abs(new Date(Number(loggedTime.value)) - Date.now()) / 1000;
+      if (seconds < 14400) {
+        // 4h
+        return true;
+      }
+      return false;
+    }
+    return false;
+  }
+
+  needSync(callback) {
+    NetInfo.fetch().then(state => {
+      if (state.isConnected) {
+        axios({
+          method: 'get',
+          url: this.getUrlBo() + '/version',
+          responseType: 'json',
+          params: {
+            token: api_token,
+          },
+        })
+          .then(response => {
+            const localVersion = Setting.get('version');
+            if (
+              localVersion === undefined ||
+              localVersion === false ||
+              localVersion.value !== response.data.version
+            ) {
+              return callback();
             }
             return false;
-        });
-        return false;
-    }
+          })
+          .catch(function (error) {
+            console.log(error);
+          });
+      }
+      return false;
+    });
+    return false;
+  }
 
-    setInstalled(remove = false) {
-        if (remove) {
-            Setting.delete('installed');
-        } else {
-            Setting.add({ key: 'installed', value: "true" });
-        }
+  setInstalled(remove = false) {
+    if (remove) {
+      Setting.delete('installed');
+    } else {
+      Setting.add({ key: 'installed', value: 'true' });
     }
+  }
 
-    isInstalled() {
-        const test = Setting.get('installed');
-        if (test === false || test === undefined) {
-            return false;
-        }
-        return true;
+  isInstalled() {
+    const test = Setting.get('installed');
+    if (test === false || test === undefined) {
+      return false;
     }
+    return true;
+  }
 }
 
-export default new SyncController();
\ No newline at end of file
+export default new SyncController();
diff --git a/ComApp/src/App/Lib/Helpers.js b/ComApp/src/App/Lib/Helpers.js
index 13d7fb1..a7a52ec 100644
--- a/ComApp/src/App/Lib/Helpers.js
+++ b/ComApp/src/App/Lib/Helpers.js
@@ -1,50 +1,55 @@
-class Helpers {
-    compareValues(key, order = 'asc') {
-        return function innerSort(a, b) {
-            if (!(key in a) || !(key in b)) {
-                // property doesn't exist on either object
-                return 0;
-            }
-            const varA = (typeof a[key] === 'string')
-                ? a[key].toUpperCase() : a[key];
-            const varB = (typeof b[key] === 'string')
-                ? b[key].toUpperCase() : b[key];
-
-            let comparison = 0;
-            if (varA > varB) {
-                comparison = 1;
-            } else if (varA < varB) {
-                comparison = -1;
-            }
-            return (
-                (order === 'desc') ? (comparison * -1) : comparison
-            );
-        };
-    }
-
-    isEmailValid(email) {
-        const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
-        return expression.test(String(email).toLowerCase());
-    }
-
-    isUrlValid(value) {
-        return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value.toLowerCase());
-    }
-
-    generateUUID() { // Public Domain/MIT
-        let d = new Date().getTime();//Timestamp
-        let d2 = new Date().getUTCMilliseconds() + Math.random();//Time in microseconds since page-load or 0 if unsupported
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-            let r = Math.random() * 16;//random number between 0 and 16
-            if(d > 0){//Use timestamp until depleted
-                r = (d + r)%16 | 0;
-                d = Math.floor(d/16);
-            } else {//Use microseconds since page-load if supported
-                r = (d2 + r)%16 | 0;
-                d2 = Math.floor(d2/16);
-            }
-            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
-        });
-    }
-}
-export default new Helpers();
+class Helpers {
+  compareValues(key, order = 'asc') {
+    return function innerSort(a, b) {
+      if (!(key in a) || !(key in b)) {
+        // property doesn't exist on either object
+        return 0;
+      }
+      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];
+      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];
+
+      let comparison = 0;
+      if (varA > varB) {
+        comparison = 1;
+      } else if (varA < varB) {
+        comparison = -1;
+      }
+      return order === 'desc' ? comparison * -1 : comparison;
+    };
+  }
+
+  isEmailValid(email) {
+    const expression =
+      /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
+    return expression.test(String(email).toLowerCase());
+  }
+
+  isUrlValid(value) {
+    return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+      value.toLowerCase(),
+    );
+  }
+
+  generateUUID() {
+    // Public Domain/MIT
+    let d = new Date().getTime(); //Timestamp
+    let d2 = new Date().getUTCMilliseconds() + Math.random(); //Time in microseconds since page-load or 0 if unsupported
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+      /[xy]/g,
+      function (c) {
+        let r = Math.random() * 16; //random number between 0 and 16
+        if (d > 0) {
+          //Use timestamp until depleted
+          r = (d + r) % 16 | 0;
+          d = Math.floor(d / 16);
+        } else {
+          //Use microseconds since page-load if supported
+          r = (d2 + r) % 16 | 0;
+          d2 = Math.floor(d2 / 16);
+        }
+        return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+      },
+    );
+  }
+}
+export default new Helpers();
diff --git a/ComApp/src/App/Models/Contact.js b/ComApp/src/App/Models/Contact.js
index 80c81d1..1f0d6ef 100644
--- a/ComApp/src/App/Models/Contact.js
+++ b/ComApp/src/App/Models/Contact.js
@@ -101,7 +101,6 @@ class ContactModel {
       });
     }
   }
-
 }
 
 export default ContactModel;
diff --git a/ComApp/src/App/Models/Directory.js b/ComApp/src/App/Models/Directory.js
index 8959ed7..bfa0baf 100644
--- a/ComApp/src/App/Models/Directory.js
+++ b/ComApp/src/App/Models/Directory.js
@@ -4,7 +4,7 @@ export const DirectoriesSchema = {
   properties: {
     id: 'int',
     name: 'string',
-    parent: { type: 'int', optional: true },
+    parent: {type: 'int', optional: true},
     order: 'int',
     needAuthorization: 'int',
   },
@@ -46,14 +46,12 @@ class DirectoryModel {
       if (authorizedFolders.length > 0) {
         tmp = tmp.filtered(
           'needAuthorization = 0 OR ' +
-          authorizedFolders
-            .map(folder => ' id = "' + folder.id + '"')
-            .join(' OR '),
+            authorizedFolders
+              .map(folder => ' id = "' + folder.id + '"')
+              .join(' OR '),
         );
       } else {
-        tmp = tmp.filtered(
-          'needAuthorization = 0'
-        );
+        tmp = tmp.filtered('needAuthorization = 0');
       }
     }
     if (format) {
@@ -90,18 +88,18 @@ class DirectoryModel {
   }
 
   getI18nName(lang, name) {
-    let tmp = undefined;
+    let tmp;
     switch (lang) {
-      case "fr":
+      case 'fr':
         tmp = name.fr;
         break;
-      case "en":
+      case 'en':
         tmp = name.en;
         break;
-      case "de":
+      case 'de':
         tmp = name.de;
         break;
-      case "es":
+      case 'es':
         tmp = name.es;
         break;
     }
@@ -110,7 +108,6 @@ class DirectoryModel {
     }
     return tmp;
   }
-
 }
 
 export default DirectoryModel;
diff --git a/ComApp/src/App/Models/Document.js b/ComApp/src/App/Models/Document.js
index d8cea91..63e767d 100644
--- a/ComApp/src/App/Models/Document.js
+++ b/ComApp/src/App/Models/Document.js
@@ -1,79 +1,83 @@
 export const DocumentsSchema = {
-    name: 'Documents',
-    primaryKey: 'id',
-    properties: {
-        id: 'int',
-        uuid: 'string',
-        title: 'string',
-        type: 'string',
-        path: 'string',
-        directory: 'int',
-        lang: 'string',
-        updated_at: 'string',
-    },
+  name: 'Documents',
+  primaryKey: 'id',
+  properties: {
+    id: 'int',
+    uuid: 'string',
+    title: 'string',
+    type: 'string',
+    path: 'string',
+    directory: 'int',
+    lang: 'string',
+    updated_at: 'string',
+  },
 };
 
 class DocumentModel {
-    constructor(realm) {
-        this.schema = 'Documents';
-        this.realm = realm;
-    }
+  constructor(realm) {
+    this.schema = 'Documents';
+    this.realm = realm;
+  }
 
-    add(document) {
-        this.realm.write(() => {
-            this.realm.create(this.schema, document, 'never');
-        });
-    }
+  add(document) {
+    this.realm.write(() => {
+      this.realm.create(this.schema, document, 'never');
+    });
+  }
 
-    update(document, updatedAtChange = false) {
-        let tmp = this.get(document.id);
-        if (tmp === undefined) {
-            this.add(document);
+  update(document, updatedAtChange = false) {
+    let tmp = this.get(document.id);
+    if (tmp === undefined) {
+      this.add(document);
+    } else {
+      this.realm.write(() => {
+        if (updatedAtChange === false) {
+          this.realm.create(
+            this.schema,
+            {
+              id: tmp.id,
+              uuid: document.uuid,
+              title: document.title,
+              type: document.type,
+              path: document.path,
+              directory: document.directory,
+            },
+            'modified',
+          );
         } else {
-            this.realm.write(() => {
-                if (updatedAtChange === false) {
-                    this.realm.create(this.schema, {
-                        id: tmp.id,
-                        uuid: document.uuid,
-                        title: document.title,
-                        type: document.type,
-                        path: document.path,
-                        directory: document.directory
-                    }, 'modified');
-                } else {
-                    this.realm.create(this.schema, document, 'modified');
-                }
-            });
+          this.realm.create(this.schema, document, 'modified');
         }
+      });
     }
+  }
 
-    get(id) {
-        let tmp = this.realm.objects(this.schema).filtered('id = ' + id)[0];
-        return tmp;
+  get(id) {
+    let tmp = this.realm.objects(this.schema).filtered('id = ' + id)[0];
+    return tmp;
+  }
+
+  getAll(authorizedDirs = false) {
+    let tmp = this.realm.objects(this.schema);
+    if (authorizedDirs) {
+      authorizedDirs = authorizedDirs.map(item => item.id);
+      tmp = tmp.filter(doc => authorizedDirs.includes(doc.directory));
     }
+    return tmp;
+  }
 
-    getAll(authorizedDirs = false) {
-        let tmp = this.realm.objects(this.schema);
-        if (authorizedDirs) {
-            authorizedDirs = authorizedDirs.map(item => item.id);
-            tmp = tmp.filter(doc => authorizedDirs.includes(doc.directory));
-        }
-        return tmp;
-    }
-
-    clear(docs, toDelete = []) {
-        const localDocs = this.getAll();
-        localDocs.forEach(doc => {
-            let tmp = docs.filter(item => item.uuid === doc.uuid);
-            if (tmp.length === 0) {
-                toDelete.push({ uuid: doc.uuid, type: doc.type });
-                this.realm.write(() => {
-                    this.realm.delete(doc);
-                });
-            }
+  clear(docs, toDelete = []) {
+    const localDocs = this.getAll();
+    localDocs.forEach(doc => {
+      let tmp = docs.filter(item => item.uuid === doc.uuid);
+      if (tmp.length === 0) {
+        toDelete.push({uuid: doc.uuid, type: doc.type});
+        this.realm.write(() => {
+          this.realm.delete(doc);
         });
-        return toDelete;
-    }
+      }
+    });
+    return toDelete;
+  }
 }
 
 export default DocumentModel;
diff --git a/ComApp/src/App/Models/SendBrochure.js b/ComApp/src/App/Models/SendBrochure.js
index 8ef1827..7203d11 100644
--- a/ComApp/src/App/Models/SendBrochure.js
+++ b/ComApp/src/App/Models/SendBrochure.js
@@ -7,7 +7,7 @@ export const SendBrochuresSchema = {
     subject: 'string',
     message: 'string',
     documents: 'string',
-    user_id: 'int'
+    user_id: 'int',
   },
 };
 
@@ -80,7 +80,6 @@ class SendBrochureModel {
       });
     }
   }
-
 }
 
 export default SendBrochureModel;
diff --git a/ComApp/src/App/Models/Setting.js b/ComApp/src/App/Models/Setting.js
index 210a4ea..a84d6ab 100644
--- a/ComApp/src/App/Models/Setting.js
+++ b/ComApp/src/App/Models/Setting.js
@@ -10,10 +10,10 @@ export const SettingsSchema = {
 
 class SettingModel {
   constructor(realm) {
-      this.schema = 'Settings';
-      this.realm = realm;
+    this.schema = 'Settings';
+    this.realm = realm;
   }
-    
+
   add(data) {
     this.realm.write(() => {
       if (data.id === undefined) {
@@ -66,7 +66,6 @@ class SettingModel {
       });
     }
   }
-
 }
 
-export default SettingModel;
\ No newline at end of file
+export default SettingModel;
diff --git a/ComApp/src/App/Models/User.js b/ComApp/src/App/Models/User.js
index a25f812..c6f85f0 100644
--- a/ComApp/src/App/Models/User.js
+++ b/ComApp/src/App/Models/User.js
@@ -72,7 +72,6 @@ class UserModel {
       this.realm.delete(this.getAll());
     });
   }
-
 }
 
 export default UserModel;
diff --git a/ComApp/src/App/Store/Actions/actionType.js b/ComApp/src/App/Store/Actions/actionType.js
index a7688a0..dd0f29a 100644
--- a/ComApp/src/App/Store/Actions/actionType.js
+++ b/ComApp/src/App/Store/Actions/actionType.js
@@ -1,14 +1,14 @@
 // Locale
-export const INIT_LOCALE = "INIT_LOCALE";
-export const EDIT_LOCALE = "EDIT_LOCALE";
+export const INIT_LOCALE = 'INIT_LOCALE';
+export const EDIT_LOCALE = 'EDIT_LOCALE';
 // Users
-export const INIT_USERS = "INIT_USERS";
+export const INIT_USERS = 'INIT_USERS';
 // Contacts
-export const INIT_CONTACT = "INIT_CONTACT";
-export const ADD_CONTACT = "ADD_CONTACT";
-export const EDIT_CONTACT = "EDIT_CONTACT";
-export const DELETE_CONTACT = "DELETE_CONTACT";
+export const INIT_CONTACT = 'INIT_CONTACT';
+export const ADD_CONTACT = 'ADD_CONTACT';
+export const EDIT_CONTACT = 'EDIT_CONTACT';
+export const DELETE_CONTACT = 'DELETE_CONTACT';
 // Directories
-export const INIT_DIRECTORIES = "INIT_DIRECTORIES";
+export const INIT_DIRECTORIES = 'INIT_DIRECTORIES';
 // Documents
-export const INIT_DOCUMENTS = "INIT_DOCUMENTS";
\ No newline at end of file
+export const INIT_DOCUMENTS = 'INIT_DOCUMENTS';
diff --git a/ComApp/src/App/Store/Actions/contacts.js b/ComApp/src/App/Store/Actions/contacts.js
index 5e2946b..4fba842 100644
--- a/ComApp/src/App/Store/Actions/contacts.js
+++ b/ComApp/src/App/Store/Actions/contacts.js
@@ -1,4 +1,9 @@
-import { INIT_CONTACT, ADD_CONTACT, EDIT_CONTACT, DELETE_CONTACT } from "./actionType";
+import {
+  ADD_CONTACT,
+  DELETE_CONTACT,
+  EDIT_CONTACT,
+  INIT_CONTACT,
+} from './actionType';
 
 /**
  * Init contact
@@ -6,11 +11,11 @@ import { INIT_CONTACT, ADD_CONTACT, EDIT_CONTACT, DELETE_CONTACT } from "./actio
  * @param {object} data The contact data
  */
 export const initContact = (currentUser, data) => {
-    return {
-        type: INIT_CONTACT,
-        currentUser,
-        data,
-    };
+  return {
+    type: INIT_CONTACT,
+    currentUser,
+    data,
+  };
 };
 
 /**
@@ -19,11 +24,11 @@ export const initContact = (currentUser, data) => {
  * @param {object} data The contact data
  */
 export const addContact = (currentUser, data) => {
-    return {
-        type: ADD_CONTACT,
-        currentUser,
-        data,
-    };
+  return {
+    type: ADD_CONTACT,
+    currentUser,
+    data,
+  };
 };
 
 /**
@@ -32,11 +37,11 @@ export const addContact = (currentUser, data) => {
  * @param {object} data The contact data
  */
 export const editContact = (currentUser, data) => {
-    return {
-        type: EDIT_CONTACT,
-        currentUser,
-        data,
-    };
+  return {
+    type: EDIT_CONTACT,
+    currentUser,
+    data,
+  };
 };
 
 /**
@@ -45,9 +50,9 @@ export const editContact = (currentUser, data) => {
  * @param {string} id The contact id
  */
 export const deleteContact = (currentUser, id) => {
-    return {
-        type: DELETE_CONTACT,
-        currentUser,
-        id,
-    };
-};
\ No newline at end of file
+  return {
+    type: DELETE_CONTACT,
+    currentUser,
+    id,
+  };
+};
diff --git a/ComApp/src/App/Store/Actions/directories.js b/ComApp/src/App/Store/Actions/directories.js
index 1c43502..297d2a2 100644
--- a/ComApp/src/App/Store/Actions/directories.js
+++ b/ComApp/src/App/Store/Actions/directories.js
@@ -1,4 +1,4 @@
-import { INIT_DIRECTORIES } from "./actionType";
+import {INIT_DIRECTORIES} from './actionType';
 
 /**
  * Init
@@ -7,10 +7,10 @@ import { INIT_DIRECTORIES } from "./actionType";
  * @param {object} data The document data
  */
 export const initDirectories = (lang, user, data) => {
-    return {
-        type: INIT_DIRECTORIES,
-        lang,
-        user,
-        data,
-    };
-};
\ No newline at end of file
+  return {
+    type: INIT_DIRECTORIES,
+    lang,
+    user,
+    data,
+  };
+};
diff --git a/ComApp/src/App/Store/Actions/documents.js b/ComApp/src/App/Store/Actions/documents.js
index 87ae7c4..2cbb82b 100644
--- a/ComApp/src/App/Store/Actions/documents.js
+++ b/ComApp/src/App/Store/Actions/documents.js
@@ -1,4 +1,4 @@
-import { INIT_DOCUMENTS } from "./actionType";
+import {INIT_DOCUMENTS} from './actionType';
 
 /**
  * Init contact
@@ -7,10 +7,10 @@ import { INIT_DOCUMENTS } from "./actionType";
  * @param {object} data The document data
  */
 export const initDocuments = (lang, directories, data) => {
-    return {
-        type: INIT_DOCUMENTS,
-        lang,
-        directories,
-        data,
-    };
-};
\ No newline at end of file
+  return {
+    type: INIT_DOCUMENTS,
+    lang,
+    directories,
+    data,
+  };
+};
diff --git a/ComApp/src/App/Store/Actions/locales.js b/ComApp/src/App/Store/Actions/locales.js
index c7f108a..ca87469 100644
--- a/ComApp/src/App/Store/Actions/locales.js
+++ b/ComApp/src/App/Store/Actions/locales.js
@@ -1,14 +1,14 @@
-import { INIT_LOCALE, EDIT_LOCALE } from "./actionType";
+import {EDIT_LOCALE, INIT_LOCALE} from './actionType';
 
 /**
  * Init locale
  * @param {object} data The locale data
  */
 export const initLocale = data => {
-    return {
-        type: INIT_LOCALE,
-        data,
-    };
+  return {
+    type: INIT_LOCALE,
+    data,
+  };
 };
 
 /**
@@ -16,8 +16,8 @@ export const initLocale = data => {
  * @param {object} data The locale data
  */
 export const editLocale = data => {
-    return {
-        type: EDIT_LOCALE,
-        data,
-    };
+  return {
+    type: EDIT_LOCALE,
+    data,
+  };
 };
diff --git a/ComApp/src/App/Store/Actions/users.js b/ComApp/src/App/Store/Actions/users.js
index 49dfbf1..a673d76 100644
--- a/ComApp/src/App/Store/Actions/users.js
+++ b/ComApp/src/App/Store/Actions/users.js
@@ -1,12 +1,12 @@
-import { INIT_USERS } from "./actionType";
+import {INIT_USERS} from './actionType';
 
 /**
  * Init users
  * @param {object} data The users data
  */
 export const initUsers = data => {
-    return {
-        type: INIT_USERS,
-        data,
-    };
-};
\ No newline at end of file
+  return {
+    type: INIT_USERS,
+    data,
+  };
+};
diff --git a/ComApp/src/App/Store/ConfigureStore.js b/ComApp/src/App/Store/ConfigureStore.js
index ff2244d..a686cfb 100644
--- a/ComApp/src/App/Store/ConfigureStore.js
+++ b/ComApp/src/App/Store/ConfigureStore.js
@@ -1,19 +1,19 @@
-import { createStore, combineReducers } from "redux";
+import {combineReducers, createStore} from 'redux';
 
-import appReducer from "./Reducers/AppReducer";
-import contactsReducer from "./Reducers/contacts";
-import documentsReducer from "./Reducers/documents";
-import directoriesReducer from "./Reducers/directories";
-import localesReducer from "./Reducers/locales";
-import usersReducer from "./Reducers/users";
+import appReducer from './Reducers/AppReducer';
+import contactsReducer from './Reducers/contacts';
+import directoriesReducer from './Reducers/directories';
+import documentsReducer from './Reducers/documents';
+import localesReducer from './Reducers/locales';
+import usersReducer from './Reducers/users';
 
 const rootReducer = combineReducers({
-    app: appReducer,
-    contacts: contactsReducer,
-    documents: documentsReducer,
-    directories: directoriesReducer,
-    locale: localesReducer,
-    users: usersReducer
+  app: appReducer,
+  contacts: contactsReducer,
+  documents: documentsReducer,
+  directories: directoriesReducer,
+  locale: localesReducer,
+  users: usersReducer,
 });
 
-export const store = createStore(rootReducer);
\ No newline at end of file
+export const store = createStore(rootReducer);
diff --git a/ComApp/src/App/Store/Reducers/AppReducer.js b/ComApp/src/App/Store/Reducers/AppReducer.js
index dbfed9d..44e51cc 100644
--- a/ComApp/src/App/Store/Reducers/AppReducer.js
+++ b/ComApp/src/App/Store/Reducers/AppReducer.js
@@ -1,125 +1,147 @@
-import SyncController from "../../Controllers/SyncController";
-// Database 
-import { Setting, SendBrochure } from '../../../Database';
+import SyncController from '../../Controllers/SyncController';
+// Database
+import { SendBrochure, Setting } from '../../../Database';
 
 const initialState = {
-    isSetup: false,
-    locale: 'fr',
-    currentUser: {},
-    logged: false,
-    syncVersion: 0,
-    forceSync: false,
-    currentOpenedDoc: {},
-    ShowIsActive: 0,
-    HomeBtns: {},
-    mainColor: '#D4021D',
-    FormSelect1: {},
-    FormSelect2: {},
-    FormCheck: [],
+  isSetup: false,
+  locale: 'fr',
+  currentUser: {},
+  logged: false,
+  syncVersion: 0,
+  forceSync: false,
+  currentOpenedDoc: {},
+  ShowIsActive: 0,
+  HomeBtns: {},
+  mainColor: '#D4021D',
+  FormSelect1: {},
+  FormSelect2: {},
+  FormCheck: [],
 };
 
 const reducer = (state = initialState, action) => {
-    let saved;
-    switch (action.type) {
-        case 'INIT':
-            let ShowIsActive = Setting.get('ShowIsActive');
-            let MainColor = Setting.get('MainColor');
-            let FormSelect1 = Setting.get('FormSelect1');
-            let FormSelect2 = Setting.get('FormSelect2');
-            let FormCheck = Setting.get('FormCheck');
-            saved = Setting.get('isSetup');
-            return {
-                ...state,
-                isSetup: saved === undefined ? false : saved.value === "true" ? true : false,
-                ShowIsActive: ShowIsActive === undefined ? false : ShowIsActive.value,
-                mainColor: MainColor === undefined ? initialState.mainColor : MainColor === false ? initialState.mainColor : MainColor.value,
-                FormSelect1: FormSelect1 === undefined ? initialState.FormSelect1 : FormSelect1 === false ? initialState.FormSelect1 : JSON.parse(FormSelect1.value),
-                FormSelect2: FormSelect2 === undefined ? initialState.FormSelect2 : FormSelect2 === false ? initialState.FormSelect2 : JSON.parse(FormSelect2.value),
-                FormCheck: FormCheck === undefined ? initialState.FormCheck : FormCheck === false ? initialState.FormCheck : JSON.parse(FormCheck.value),
-            };
-        case 'INIT_HOME_BTNS': {
-            let HomeFolders = Setting.get('HomeFolders');
-            let Btns = JSON.parse(HomeFolders.value);
-            return {
-                ...state,
-                HomeBtns: Btns
-            }
-        }
-        case 'SET_ISSETUP':
-            Setting.upsert({ key: 'isSetup', value: "true" });
-            saved = Setting.get('isSetup');
-            return {
-                ...state,
-                isSetup: saved === undefined ? false : saved.value === "true" ? true : false
-            };
-        case 'SET_CURRENT_USER':
-            let user = false;
-            let isLogged = false;
-            if (action.data === false) {
-                Setting.delete('isLogged');
-            } else {
-                userObj = Setting.get('isLogged').value
-                user = JSON.parse(userObj)
-                isLogged = true
-            }
-            return {
-                ...state,
-                currentUser: user !== false ? user : initialState.currentUser,
-                logged: isLogged
-            };
-        // case 'UPDATE_LOCALE':
-        //     let nxt;
-        //     if (action.data === undefined) {
-        //         const availableLocales = ['fr', 'en', 'de'];
-        //         if (availableLocales.indexOf(i18n.locale) === availableLocales.length - 1) {
-        //             nxt = availableLocales[0];
-        //         } else {
-        //             nxt = availableLocales[availableLocales.indexOf(i18n.locale) + 1];
-        //         }
-        //     } else {
-        //         nxt = action.data;
-        //     }
-        //     i18n.locale = nxt;
-        //     Setting.upsert({ key: 'locale', value: nxt });
-        //     let docsL = Document.getAll(Directory.getAll(
-        //         state.currentUser.role,
-        //         state.currentUser.authorizedFolders,
-        //         false,
-        //         nxt
-        //     ));
-        //     return {
-        //         ...state,
-        //         locale: nxt,
-        //         directories: Directory.getAll(
-        //             state.currentUser.role,
-        //             state.currentUser.authorizedFolders,
-        //             true,
-        //             nxt
-        //         ),
-        //         documents: docsL.filter(item => item.lang === nxt),
-        //     };
-        case 'SET_CURRENT_OPENED_DOC':
-            return {
-                ...state,
-                currentOpenedDoc: action.data
-            };
-        case 'UPDATE_VERSION':
-            return {
-                ...state,
-                syncVersion: action.data,
-            };
-        case 'UPDATE_SHOW_IS_ACTIVE':
-            SyncController.updateShowIsActive(action.data);
-            return {
-                ...state,
-                ShowIsActive: action.data,
-            };
-        case 'SEND_BROCHURE':
-            SendBrochure.add(action.data);
-            return state;
-        default:
-            return state;
+  let saved;
+  switch (action.type) {
+    case 'INIT':
+      let ShowIsActive = Setting.get('ShowIsActive');
+      let MainColor = Setting.get('MainColor');
+      let FormSelect1 = Setting.get('FormSelect1');
+      let FormSelect2 = Setting.get('FormSelect2');
+      let FormCheck = Setting.get('FormCheck');
+      saved = Setting.get('isSetup');
+      return {
+        ...state,
+        isSetup:
+          saved === undefined ? false : saved.value === 'true' ? true : false,
+        ShowIsActive: ShowIsActive === undefined ? false : ShowIsActive.value,
+        mainColor:
+          MainColor === undefined
+            ? initialState.mainColor
+            : MainColor === false
+            ? initialState.mainColor
+            : MainColor.value,
+        FormSelect1:
+          FormSelect1 === undefined
+            ? initialState.FormSelect1
+            : FormSelect1 === false
+            ? initialState.FormSelect1
+            : JSON.parse(FormSelect1.value),
+        FormSelect2:
+          FormSelect2 === undefined
+            ? initialState.FormSelect2
+            : FormSelect2 === false
+            ? initialState.FormSelect2
+            : JSON.parse(FormSelect2.value),
+        FormCheck:
+          FormCheck === undefined
+            ? initialState.FormCheck
+            : FormCheck === false
+            ? initialState.FormCheck
+            : JSON.parse(FormCheck.value),
+      };
+    case 'INIT_HOME_BTNS': {
+      let HomeFolders = Setting.get('HomeFolders');
+      let Btns = JSON.parse(HomeFolders.value);
+      return {
+        ...state,
+        HomeBtns: Btns,
+      };
     }
-}
+    case 'SET_ISSETUP':
+      Setting.upsert({ key: 'isSetup', value: 'true' });
+      saved = Setting.get('isSetup');
+      return {
+        ...state,
+        isSetup:
+          saved === undefined ? false : saved.value === 'true' ? true : false,
+      };
+    case 'SET_CURRENT_USER':
+      let user = false;
+      let isLogged = false;
+      if (action.data === false) {
+        Setting.delete('isLogged');
+      } else {
+        userObj = Setting.get('isLogged').value;
+        user = JSON.parse(userObj);
+        isLogged = true;
+      }
+      return {
+        ...state,
+        currentUser: user !== false ? user : initialState.currentUser,
+        logged: isLogged,
+      };
+    // case 'UPDATE_LOCALE':
+    //     let nxt;
+    //     if (action.data === undefined) {
+    //         const availableLocales = ['fr', 'en', 'de'];
+    //         if (availableLocales.indexOf(i18n.locale) === availableLocales.length - 1) {
+    //             nxt = availableLocales[0];
+    //         } else {
+    //             nxt = availableLocales[availableLocales.indexOf(i18n.locale) + 1];
+    //         }
+    //     } else {
+    //         nxt = action.data;
+    //     }
+    //     i18n.locale = nxt;
+    //     Setting.upsert({ key: 'locale', value: nxt });
+    //     let docsL = Document.getAll(Directory.getAll(
+    //         state.currentUser.role,
+    //         state.currentUser.authorizedFolders,
+    //         false,
+    //         nxt
+    //     ));
+    //     return {
+    //         ...state,
+    //         locale: nxt,
+    //         directories: Directory.getAll(
+    //             state.currentUser.role,
+    //             state.currentUser.authorizedFolders,
+    //             true,
+    //             nxt
+    //         ),
+    //         documents: docsL.filter(item => item.lang === nxt),
+    //     };
+    case 'SET_CURRENT_OPENED_DOC':
+      return {
+        ...state,
+        currentOpenedDoc: action.data,
+      };
+    case 'UPDATE_VERSION':
+      return {
+        ...state,
+        syncVersion: action.data,
+      };
+    case 'UPDATE_SHOW_IS_ACTIVE':
+      SyncController.updateShowIsActive(action.data);
+      return {
+        ...state,
+        ShowIsActive: action.data,
+      };
+    case 'SEND_BROCHURE':
+      SendBrochure.add(action.data);
+      return state;
+    default:
+      return state;
+  }
+};
 
-export default reducer;
\ No newline at end of file
+export default reducer;
diff --git a/ComApp/src/App/Store/Reducers/contacts.js b/ComApp/src/App/Store/Reducers/contacts.js
index 88edb0c..9ec2fb2 100644
--- a/ComApp/src/App/Store/Reducers/contacts.js
+++ b/ComApp/src/App/Store/Reducers/contacts.js
@@ -1,32 +1,37 @@
-import { INIT_CONTACT, ADD_CONTACT, EDIT_CONTACT, DELETE_CONTACT } from "../Actions/actionType";
+import {
+  ADD_CONTACT,
+  DELETE_CONTACT,
+  EDIT_CONTACT,
+  INIT_CONTACT,
+} from '../Actions/actionType';
 // Models
-import { Contact } from "../../../Database";
+import {Contact} from '../../../Database';
 
 const initialState = [];
 
 const reducer = (state = initialState, action) => {
-    switch (action.type) {
-        case INIT_CONTACT: {
-            return Contact.getByUser(action.currentUser.id);
-        }
-        case ADD_CONTACT: {
-            action.data.user_id = action.currentUser.id;
-            Contact.add(action.data);
-            return Contact.getByUser(action.currentUser.id);
-        }
-        case EDIT_CONTACT: {
-            Contact.update(action.data);
-            return Contact.getByUser(action.currentUser.id);
-        }
-        case DELETE_CONTACT: {
-            Contact.delete(action.id);
-            return Contact.getByUser(action.currentUser.id);
-        }
-
-        default: {
-            return state;
-        }
+  switch (action.type) {
+    case INIT_CONTACT: {
+      return Contact.getByUser(action.currentUser.id);
     }
+    case ADD_CONTACT: {
+      action.data.user_id = action.currentUser.id;
+      Contact.add(action.data);
+      return Contact.getByUser(action.currentUser.id);
+    }
+    case EDIT_CONTACT: {
+      Contact.update(action.data);
+      return Contact.getByUser(action.currentUser.id);
+    }
+    case DELETE_CONTACT: {
+      Contact.delete(action.id);
+      return Contact.getByUser(action.currentUser.id);
+    }
+
+    default: {
+      return state;
+    }
+  }
 };
 
 export default reducer;
diff --git a/ComApp/src/App/Store/Reducers/directories.js b/ComApp/src/App/Store/Reducers/directories.js
index a2b7c31..55f91a7 100644
--- a/ComApp/src/App/Store/Reducers/directories.js
+++ b/ComApp/src/App/Store/Reducers/directories.js
@@ -1,32 +1,32 @@
-import { INIT_DIRECTORIES } from "../Actions/actionType";
+import {INIT_DIRECTORIES} from '../Actions/actionType';
 // Models
-import { Directory } from "../../../Database";
+import {Directory} from '../../../Database';
 
 const initialState = [];
 
 const reducer = (state = initialState, action) => {
-    switch (action.type) {
-        case INIT_DIRECTORIES: {
-            return {
-                global: Directory.getAll(
-                    action.user.role,
-                    action.user.authorizedFolders,
-                    false,
-                    action.lang
-                ),
-                treeview: Directory.getAll(
-                    action.user.role,
-                    action.user.authorizedFolders,
-                    true,
-                    action.lang
-                )
-            }
-        }
-
-        default: {
-            return state;
-        }
+  switch (action.type) {
+    case INIT_DIRECTORIES: {
+      return {
+        global: Directory.getAll(
+          action.user.role,
+          action.user.authorizedFolders,
+          false,
+          action.lang,
+        ),
+        treeview: Directory.getAll(
+          action.user.role,
+          action.user.authorizedFolders,
+          true,
+          action.lang,
+        ),
+      };
     }
+
+    default: {
+      return state;
+    }
+  }
 };
 
 export default reducer;
diff --git a/ComApp/src/App/Store/Reducers/documents.js b/ComApp/src/App/Store/Reducers/documents.js
index 09fef74..30a6ac3 100644
--- a/ComApp/src/App/Store/Reducers/documents.js
+++ b/ComApp/src/App/Store/Reducers/documents.js
@@ -1,23 +1,23 @@
-import { INIT_DOCUMENTS } from "../Actions/actionType";
+import {INIT_DOCUMENTS} from '../Actions/actionType';
 // Models
-import { Document } from "../../../Database";
+import {Document} from '../../../Database';
 
 const initialState = [];
 
 const reducer = (state = initialState, action) => {
-    switch (action.type) {
-        case INIT_DOCUMENTS: {
-            let docs = Document.getAll(action.directories);
-            if (docs.length === 0) {
-                return state
-            }
-            return docs.filter(item => item.lang === action.lang);
-        }
-
-        default: {
-            return state;
-        }
+  switch (action.type) {
+    case INIT_DOCUMENTS: {
+      let docs = Document.getAll(action.directories);
+      if (docs.length === 0) {
+        return state;
+      }
+      return docs.filter(item => item.lang === action.lang);
     }
+
+    default: {
+      return state;
+    }
+  }
 };
 
 export default reducer;
diff --git a/ComApp/src/App/Store/Reducers/locales.js b/ComApp/src/App/Store/Reducers/locales.js
index 5ad4852..f5bedb3 100644
--- a/ComApp/src/App/Store/Reducers/locales.js
+++ b/ComApp/src/App/Store/Reducers/locales.js
@@ -1,45 +1,53 @@
-import { INIT_LOCALE, EDIT_LOCALE } from "../Actions/actionType";
+import {EDIT_LOCALE, INIT_LOCALE} from '../Actions/actionType';
 // Models
-import { Setting } from "../../../Database";
+import {Setting} from '../../../Database';
 // Translations
-import i18n from "../../../I18n";
+import i18n from '../../../I18n';
 
 const initialState = [];
 
 const reducer = (state = initialState, action) => {
-    switch (action.type) {
-        case INIT_LOCALE: {
-            const savedLocale = Setting.get('locale');
-            return {
-                ...state,
-                locale: savedLocale === undefined ? 'fr' : savedLocale === false ? 'fr' : savedLocale.value
-            };
-        }
-
-        case EDIT_LOCALE: {
-            let nxt;
-            if (action.data === undefined) {
-                const availableLocales = ['fr', 'en', 'de'];
-                if (availableLocales.indexOf(i18n.locale) === availableLocales.length - 1) {
-                    nxt = availableLocales[0];
-                } else {
-                    nxt = availableLocales[availableLocales.indexOf(i18n.locale) + 1];
-                }
-            } else {
-                nxt = action.data;
-            }
-            i18n.locale = nxt;
-            Setting.upsert({ key: 'locale', value: nxt });
-            return {
-                ...state,
-                locale: nxt,
-            };
-        }
-
-        default: {
-            return state;
-        }
+  switch (action.type) {
+    case INIT_LOCALE: {
+      const savedLocale = Setting.get('locale');
+      return {
+        ...state,
+        locale:
+          savedLocale === undefined
+            ? 'fr'
+            : savedLocale === false
+            ? 'fr'
+            : savedLocale.value,
+      };
     }
+
+    case EDIT_LOCALE: {
+      let nxt;
+      if (action.data === undefined) {
+        const availableLocales = ['fr', 'en', 'de'];
+        if (
+          availableLocales.indexOf(i18n.locale) ===
+          availableLocales.length - 1
+        ) {
+          nxt = availableLocales[0];
+        } else {
+          nxt = availableLocales[availableLocales.indexOf(i18n.locale) + 1];
+        }
+      } else {
+        nxt = action.data;
+      }
+      i18n.locale = nxt;
+      Setting.upsert({key: 'locale', value: nxt});
+      return {
+        ...state,
+        locale: nxt,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
 };
 
 export default reducer;
diff --git a/ComApp/src/App/Store/Reducers/users.js b/ComApp/src/App/Store/Reducers/users.js
index 42494e8..0d7353c 100644
--- a/ComApp/src/App/Store/Reducers/users.js
+++ b/ComApp/src/App/Store/Reducers/users.js
@@ -1,22 +1,22 @@
-import { INIT_USERS } from "../Actions/actionType";
+import {INIT_USERS} from '../Actions/actionType';
 // Models
-import { User } from "../../../Database";
+import {User} from '../../../Database';
 
 const initialState = [];
 
 const reducer = (state = initialState, action) => {
-    switch (action.type) {
-        case INIT_USERS: {
-            return {
-                ...state,
-                users: User.getAll(),
-            };
-        }
-
-        default: {
-            return state;
-        }
+  switch (action.type) {
+    case INIT_USERS: {
+      return {
+        ...state,
+        users: User.getAll(),
+      };
     }
+
+    default: {
+      return state;
+    }
+  }
 };
 
 export default reducer;
diff --git a/ComApp/src/App/Views/ContactDetailsScreen.js b/ComApp/src/App/Views/ContactDetailsScreen.js
index 0b998ea..65aebbe 100644
--- a/ComApp/src/App/Views/ContactDetailsScreen.js
+++ b/ComApp/src/App/Views/ContactDetailsScreen.js
@@ -1,806 +1,978 @@
-import React from 'react';
-import {
-  View,
-  Button,
-  TextInput,
-  TouchableOpacity,
-  Text,
-  Alert,
-  ScrollView
-} from 'react-native';
-// Reduxs
-import { connect } from 'react-redux';
-import { addContact, editContact } from '../Store/Actions/contacts';
-// Helpers
-import Helpers from "../Lib/Helpers";
-// Translations
-import i18n from "../../I18n";
-// Icons
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-// Style
-import styles from '../../Resources/Styles/ContactDetailsStyle';
-// UI Elements
-import { Overlay, CheckBox, ButtonGroup } from '@rneui/themed';
-// Flash Messages
-import { showMessage } from 'react-native-flash-message';
-// Picker 
-import { Picker } from '@react-native-picker/picker';
-// vCard parser
-import vCard from 'vcard-parser';
-// BarCode Scanner
-import { BarCodeScanner } from 'expo-barcode-scanner';
-
-function mapStateToProps(state) {
-  return {
-    locale: state.locale.locale,
-    contacts: state.contacts,
-    currentUser: state.app.currentUser,
-    mainColor: state.app.mainColor,
-    FormSelect1: state.app.FormSelect1,
-    FormSelect2: state.app.FormSelect2,
-    FormCheck: state.app.FormCheck,
-  };
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    addContact: (user, data) => dispatch(addContact(user, data)),
-    editContact: (user, data) => dispatch(editContact(user, data))
-  };
-};
-
-let date = new Date().getDate();
-if (date < 10) {
-  date = '0' + date.toString();
-}
-let month = new Date().getMonth() + 1;
-if (month < 10) {
-  month = '0' + month.toString();
-}
-const year = new Date().getFullYear();
-
-class ContactDetailsScreen extends React.Component {
-  state = {
-    action: 'add',
-    visits: [],
-    selectedVisit: 0,
-    tmpVisitNote: '',
-    newVisitTitle: date + '/' + month + '/' + year,
-    selectedIndex: 0,
-    showNewVisit: false,
-    tmpID: 0,
-    tmpNote: '',
-    tmpName: '',
-    tmpFirstname: '',
-    tmpEmail: '',
-    tmpCompany: '',
-    tmpAddress: '',
-    tmpPhone: '',
-    tmpSelect1: '',
-    tmpSelect2: '',
-    tmpOther: '',
-    clientChecked: false,
-    prospectChecked: false,
-    otherChecked: false,
-    productsCheck: [],
-    showQRcodevCard: false,
-    parsedType: null,
-    parsedDatas: [],
-    hasPermission: null,
-    scanned: false,
-    showDynContact: false,
-    parsedName: '',
-    parsedFirstname: '',
-    parsedEmail: '',
-    parsedCompany: '',
-    parsedAddress: '',
-    parsedPhone: ''
-  };
-
-  updateContact() {
-    let error = '';
-    const { action } = this.props.route.params;
-    // On récupère le texte courant
-    if (this.state.visits.length > 0) {
-      this.state.visits[
-        this.state.selectedVisit
-      ].note = this.state.tmpVisitNote;
-    }
-    let type;
-    if (this.state.clientChecked === true) {
-      type = 'client';
-    } else if (this.state.prospectChecked === true) {
-      type = 'prospect';
-    } else if (this.state.otherChecked === true) {
-      type = 'other';
-      if (this.state.tmpOther.length === 0) {
-        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
-      }
-    } else {
-      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
-    }
-    if (this.state.tmpEmail.length < 5 || !Helpers.isEmailValid(this.state.tmpEmail)) {
-      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
-    }
-    if (this.state.tmpName.length === 0) {
-      error = error.concat(i18n.t('error.invalid_name') + '.\n');
-    }
-    if (this.state.tmpFirstname.length === 0) {
-      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
-    }
-
-    if (error.length > 0) {
-      Alert.alert(i18n.t('global.warning') + ' !', error, [
-        { text: 'OK' },
-      ],
-        { cancelable: false },
-      );
-    } else {
-      const contact = {
-        id: Helpers.generateUUID(),
-        email: this.state.tmpEmail,
-        type: type,
-        other: this.state.tmpOther,
-        select1: this.state.tmpSelect1,
-        select2: this.state.tmpSelect2,
-        name: this.state.tmpName,
-        firstname: this.state.tmpFirstname,
-        company: this.state.tmpCompany,
-        address: this.state.tmpAddress,
-        phone: this.state.tmpPhone,
-        products: JSON.stringify(this.state.productsCheck),
-        notes: this.state.tmpNote,
-        visits: JSON.stringify(this.state.visits),
-        to_delete: false,
-        synced: false,
-      };
-      if (action === 'edit') {
-        contact.id = this.state.tmpID;
-        this.props.editContact(this.props.currentUser, contact);
-        this.populate();
-        showMessage({
-          message: i18n.t('contact_details_s.contact_saved') + '.',
-          type: 'success',
-          duration: 500,
-        });
-      } else {
-        this.props.addContact(this.props.currentUser, contact);
-        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
-      }
-    }
-  }
-
-  updateContactType(type) {
-    if (type === 'client') {
-      this.setState({
-        clientChecked: true,
-        prospectChecked: false,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else if (type === 'prospect') {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: true,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: false,
-        otherChecked: true,
-      });
-    }
-  }
-
-  newVisit() {
-    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
-    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
-    this.setState({
-      tmpVisitNote: '',
-      visits: this.state.visits,
-      showNewVisit: false,
-      selectedVisit: 0,
-    });
-  }
-
-  deleteVisit() {
-    Alert.alert(
-      i18n.t('global.confirmation'),
-      i18n.t('contact_details_s.confirm_visit_delete'),
-      [
-        {
-          text: i18n.t('global.no'),
-          onPress: () => console.log('Cancel Pressed'),
-          style: 'cancel',
-        },
-        {
-          text: i18n.t('global.yes'),
-          onPress: () => {
-            this.state.visits.splice(this.state.selectedVisit, 1);
-            if (this.state.visits.length === 0) {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: '',
-              });
-            } else {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: this.state.visits[0].note,
-              });
-            }
-          },
-        },
-      ],
-      { cancelable: false },
-    );
-  }
-
-  populate() {
-    const { contactId } = this.props.route.params;
-    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
-    this.setState({
-      tmpID: contact.id,
-      tmpNote: contact.notes,
-      tmpName: contact.name,
-      tmpFirstname: contact.firstname,
-      tmpEmail: contact.email,
-      tmpCompany: contact.company,
-      tmpAddress: contact.address,
-      tmpPhone: contact.phone,
-      tmpSelect1: contact.select1,
-      tmpSelect2: contact.select2,
-      tmpOther: contact.other,
-    });
-    if (contact.type === 'client') {
-      this.setState({ clientChecked: true });
-    } else if (contact.type === 'prospect') {
-      this.setState({ prospectChecked: true });
-    } else {
-      this.setState({ otherChecked: true });
-    }
-    if (contact.visits !== null) {
-      const tmp = JSON.parse(contact.visits);
-      this.setState({ visits: tmp });
-      if (tmp.length > 0) {
-        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
-      }
-    }
-    if (contact.products !== null) {
-      const tmp = JSON.parse(contact.products);
-      this.setState({ productsCheck: tmp });
-    }
-  }
-
-  componentDidMount() {
-    const { action } = this.props.route.params;
-    if (action === 'edit') {
-      this.setState({ action: 'edit' });
-      this.populate();
-    }
-
-    BarCodeScanner.requestPermissionsAsync().then(res => {
-      this.setState({ hasPermission: res.status === 'granted' });
-    });
-
-  }
-
-  render() {
-    const handleBarCodeScanned = ({ type, data }) => {
-      this.setState({ scanned: true });
-      if (data.includes('VCARD')) {
-        let datas = vCard.parse(data);
-        let tmpDatas = [];
-        if (datas['n'] !== undefined) {
-          const nx = Object.assign({ n1: [{ value: datas['n'][0].value[0] }] }, { n2: [{ value: datas['n'][0].value[1] }] });
-          datas = Object.assign(datas, nx);
-        }
-        if (datas['adr'] !== undefined) {
-          let tmp = datas['adr'][0].value;
-          let tmpadr = '';
-          for (let i = 0; i < tmp.length; i++) {
-            if (tmp[i].length > 0) {
-              if (tmpadr.length > 0) {
-                tmpadr = tmpadr + ', ' + tmp[i];
-              } else {
-                tmpadr = tmp[i];
-              }
-            }
-          }
-          datas['adr'] = [{ value: tmpadr }];
-        }
-        Object.keys(datas).map((objectKey, index) => {
-          if (objectKey === 'email' || objectKey === 'adr' || objectKey === 'tel' || objectKey === 'org' || objectKey === 'n1' || objectKey === 'n2') {
-            let value = datas[objectKey][0].value;
-            if (typeof value === 'string') {
-              tmpDatas.push(value);
-            }
-          }
-        });
-        this.setState({ parsedType: 'vcard', parsedDatas: tmpDatas, showQRcodevCard: false, showDynContact: true })
-      } else {
-        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
-      }
-    };
-    return (
-      <View style={styles.container}>
-        <ScrollView style={{ flex: 1 }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.customer')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.clientChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('client')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.prospect')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.prospectChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('prospect')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.other')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.otherChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('other')}
-            />
-            {this.state.otherChecked === true && (
-              <TextInput
-                style={{
-                  backgroundColor: 'white',
-                  margin: 10,
-                  padding: 10,
-                  flex: 2,
-                }}
-                value={this.state.tmpOther}
-                placeholder={i18n.t('contact_details_s.description')}
-                onChangeText={text => this.setState({ tmpOther: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row' }}>
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpName}
-              placeholder={i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpName: text })}
-            />
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpFirstname}
-              placeholder={i18n.t('global.firstname') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpFirstname: text })}
-            />
-          </View>
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpEmail}
-            placeholder={i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'}
-            onChangeText={text => this.setState({ tmpEmail: text })}
-            autoCapitalize={'none'}
-            autoCorrect={false}
-            keyboardType={'email-address'}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpCompany}
-            placeholder={i18n.t('global.company')}
-            onChangeText={text => this.setState({ tmpCompany: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpAddress}
-            placeholder={i18n.t('global.address')}
-            onChangeText={text => this.setState({ tmpAddress: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpPhone}
-            placeholder={i18n.t('global.phone')}
-            onChangeText={text => this.setState({ tmpPhone: text })}
-            autoCompleteType={'tel'}
-            dataDetectorTypes={'phoneNumber'}
-            keyboardType={'phone-pad'}
-          />
-          <View style={{ flexDirection: 'row' }}>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <FontAwesome5 name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect1}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect1: itemValue });
-                  }
-                }}>
-                <Picker.Item label={this.props.FormSelect1.title[this.props.locale]} value="0" />
-                {this.renderSelect(1)}
-              </Picker>
-            </View>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <FontAwesome5 name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect2}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect2: itemValue });
-                  }
-                }}>
-                <Picker.Item label={this.props.FormSelect2.title[this.props.locale]} value="0" />
-                {this.renderSelect(2)}
-              </Picker>
-            </View>
-          </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              justifyContent: 'center',
-            }}>
-            {this.renderProductsCheck()}
-          </View>
-        </ScrollView>
-        <View style={{ flex: 1, margin: 5 }}>
-          <View style={{ flex: 1 }}>
-            <ButtonGroup
-              buttons={[i18n.t('contact_details_s.visits'), i18n.t('contact_details_s.notes')]}
-              selectedButtonStyle={{ backgroundColor: this.props.mainColor }}
-              containerStyle={{ height: 30 }}
-              selectedIndex={this.state.selectedIndex}
-              onPress={index => this.setState({ selectedIndex: index })}
-            />
-            {this.state.selectedIndex === 0 && (
-              <View style={{ flex: 1 }}>
-                <View style={{ flexDirection: 'row' }}>
-                  {this.state.visits.length > 0 && (
-                    <View style={{ flex: 2, flexDirection: 'row' }}>
-                      <FontAwesome5 name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-                      <Picker
-                        style={styles.select}
-                        selectedValue={this.state.selectedVisit}
-                        onValueChange={(itemValue, itemIndex) => {
-                          this.state.visits[
-                            this.state.selectedVisit
-                          ].note = this.state.tmpVisitNote;
-                          this.setState({
-                            visits: this.state.visits,
-                            selectedVisit: itemIndex,
-                            tmpVisitNote: this.state.visits[itemIndex].note,
-                          });
-                        }}>
-                        {this.state.visits.map((item, index) => {
-                          return <Picker.Item label={item.title} value={index} />;
-                        })}
-                      </Picker>
-                    </View>
-                  )}
-                  {this.state.visits.length === 0 && (
-                    <View
-                      style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                      }}>
-                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
-                    </View>
-                  )}
-                  <View
-                    style={{
-                      flex: 1,
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'space-evenly',
-                      margin: 10,
-                    }}>
-                    <TouchableOpacity
-                      style={styles.button}
-                      onPress={() => this.setState({ showNewVisit: true })}>
-                      <FontAwesome5 name="plus-circle" size={20} color={this.props.mainColor} />
-                    </TouchableOpacity>
-                    {this.state.visits.length > 0 && (
-                      <TouchableOpacity
-                        style={styles.button}
-                        onPress={() => this.deleteVisit()}>
-                        <FontAwesome5 name="trash" size={20} color={this.props.mainColor} />
-                      </TouchableOpacity>
-                    )}
-                  </View>
-                </View>
-                {this.state.visits.length > 0 && (
-                  <TextInput
-                    style={styles.textArea}
-                    underlineColorAndroid="transparent"
-                    placeholder={i18n.t('contact_details_s.notes') + '...'}
-                    placeholderTextColor="grey"
-                    multiline={true}
-                    value={this.state.tmpVisitNote}
-                    onChangeText={text => this.setState({ tmpVisitNote: text })}
-                  />
-                )}
-              </View>
-            )}
-            {this.state.selectedIndex === 1 && (
-              <TextInput
-                style={styles.textArea}
-                underlineColorAndroid="transparent"
-                placeholder={i18n.t('contact_details_s.notes') + '...'}
-                placeholderTextColor="grey"
-                multiline={true}
-                value={this.state.tmpNote}
-                onChangeText={text => this.setState({ tmpNote: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
-            {this.state.action === 'add' && (
-              <>
-                <Button title="QRCode vCard" onPress={() => this.setState({ showQRcodevCard: true })} color={this.props.mainColor} />
-              </>
-            )}
-            <Button title={i18n.t('global.save')} onPress={() => this.updateContact()} color={this.props.mainColor} />
-          </View>
-        </View>
-        <Overlay
-          isVisible={this.state.showNewVisit}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View
-            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ marginBottom: 10 }}>{i18n.t('contact_details_s.visit_name')} :</Text>
-            <TextInput
-              placeholder={i18n.t('contact_details_s.visit_name')}
-              value={this.state.newVisitTitle}
-              onChangeText={text => this.setState({ newVisitTitle: text })}
-              style={{
-                borderWidth: 1,
-                borderColor: 'lightgrey',
-                width: 300,
-                marginBottom: 15,
-                paddingLeft: 10,
-              }}
-            />
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showNewVisit: false })}
-                color={this.props.mainColor}
-              />
-              <Button title={i18n.t('global.add')} onPress={() => this.newVisit()} color={this.props.mainColor} />
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showQRcodevCard}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            {this.state.hasPermission === true && (
-              <BarCodeScanner
-                onBarCodeScanned={this.state.scanned ? undefined : handleBarCodeScanned}
-                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
-                style={{ flex: 1, width: 380, height: 200 }}
-              />
-            )}
-            {this.state.hasPermission === false && (
-              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
-            )}
-            {this.state.hasPermission === null && (
-              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
-            )}
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showQRcodevCard: false, scanned: false })}
-                color={this.props.mainColor}
-              />
-              {this.state.scanned && <Button title={i18n.t('global.retry')} onPress={() => this.setState({ scanned: false })} color={this.props.mainColor} />}
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showDynContact}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={400}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-evenly' }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.name')}</Text>
-              <Picker
-                selectedValue={this.state.parsedName}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) => {
-                  this.setState({ parsedName: itemValue });
-                }}>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.firstname')}</Text>
-              <Picker
-                selectedValue={this.state.parsedFirstname}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedFirstname: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.email')}</Text>
-              <Picker
-                selectedValue={this.state.parsedEmail}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedEmail: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.company')}</Text>
-              <Picker
-                selectedValue={this.state.parsedCompany}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedCompany: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.address')}</Text>
-              <Picker
-                selectedValue={this.state.parsedAddress}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedAddress: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.phone')}</Text>
-              <Picker
-                selectedValue={this.state.parsedPhone}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedPhone: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showDynContact: false, scanned: false, parsedName: '', parsedFirstname: '', parsedEmail: '', parsedCompany: '', parsedAddress: '', parsedPhone: '' })}
-                color={this.props.mainColor}
-              />
-              <Button
-                title={i18n.t('global.next')}
-                onPress={() => this.setState({
-                  tmpName: this.state.parsedName,
-                  tmpFirstname: this.state.parsedFirstname,
-                  tmpEmail: this.state.parsedEmail,
-                  tmpCompany: this.state.parsedCompany,
-                  tmpAddress: this.state.parsedAddress,
-                  tmpPhone: this.state.parsedPhone,
-                  parsedName: '',
-                  parsedFirstname: '',
-                  parsedEmail: '',
-                  parsedCompany: '',
-                  parsedAddress: '',
-                  parsedPhone: '',
-                  showDynContact: false,
-                  scanned: false,
-                })}
-                color={this.props.mainColor}
-              />
-            </View>
-          </View>
-        </Overlay>
-      </View>
-    );
-  }
-
-  renderSelect(num) {
-    let objSelect = {};
-    let locale = this.props.locale;
-    if (num === 1) {
-      objSelect = this.props.FormSelect1.values;
-    } else if (num === 2) {
-      objSelect = this.props.FormSelect2.values;
-    }
-    return Object.keys(objSelect).map((item) => {
-      return (
-        <Picker.Item key={item} label={objSelect[item][locale]} value={item} />
-      )
-    });
-  }
-
-  renderProductsCheck() {
-    let locale = this.props.locale;
-    let obj = obj = this.props.FormCheck;
-    return Object.keys(obj).map((item) => {
-      return (
-        <CheckBox
-          key={item}
-          checkedColor={this.props.mainColor}
-          title={obj[item][locale]}
-          checked={this.state.productsCheck[item]}
-          onPress={() => {
-            let pc = this.state.productsCheck;
-            pc[item] = !pc[item]
-            console.log(pc)
-            this.setState({ productsCheck: pc });
-          }}
-          containerStyle={styles.clearCheckbox}
-        />
-      )
-    });
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ContactDetailsScreen);
+import React from 'react';
+import {
+  Alert,
+  Button,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+// Reduxs
+import { connect } from 'react-redux';
+import { addContact, editContact } from '../Store/Actions/contacts';
+// Helpers
+import Helpers from '../Lib/Helpers';
+// Translations
+import i18n from '../../I18n';
+// Icons
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+// Style
+import styles from '../../Resources/Styles/ContactDetailsStyle';
+// UI Elements
+import { ButtonGroup, CheckBox, Overlay } from '@rneui/themed';
+// Flash Messages
+import { showMessage } from 'react-native-flash-message';
+// Picker
+import { Picker } from '@react-native-picker/picker';
+// vCard parser
+import vCard from 'vcard-parser';
+// BarCode Scanner
+import { BarCodeScanner } from 'expo-barcode-scanner';
+
+function mapStateToProps(state) {
+  return {
+    locale: state.locale.locale,
+    contacts: state.contacts,
+    currentUser: state.app.currentUser,
+    mainColor: state.app.mainColor,
+    FormSelect1: state.app.FormSelect1,
+    FormSelect2: state.app.FormSelect2,
+    FormCheck: state.app.FormCheck,
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addContact: (user, data) => dispatch(addContact(user, data)),
+    editContact: (user, data) => dispatch(editContact(user, data)),
+  };
+};
+
+let date = new Date().getDate();
+if (date < 10) {
+  date = '0' + date.toString();
+}
+let month = new Date().getMonth() + 1;
+if (month < 10) {
+  month = '0' + month.toString();
+}
+const year = new Date().getFullYear();
+
+class ContactDetailsScreen extends React.Component {
+  state = {
+    action: 'add',
+    visits: [],
+    selectedVisit: 0,
+    tmpVisitNote: '',
+    newVisitTitle: date + '/' + month + '/' + year,
+    selectedIndex: 0,
+    showNewVisit: false,
+    tmpID: 0,
+    tmpNote: '',
+    tmpName: '',
+    tmpFirstname: '',
+    tmpEmail: '',
+    tmpCompany: '',
+    tmpAddress: '',
+    tmpPhone: '',
+    tmpSelect1: '',
+    tmpSelect2: '',
+    tmpOther: '',
+    clientChecked: false,
+    prospectChecked: false,
+    otherChecked: false,
+    productsCheck: [],
+    showQRcodevCard: false,
+    parsedType: null,
+    parsedDatas: [],
+    hasPermission: null,
+    scanned: false,
+    showDynContact: false,
+    parsedName: '',
+    parsedFirstname: '',
+    parsedEmail: '',
+    parsedCompany: '',
+    parsedAddress: '',
+    parsedPhone: '',
+  };
+
+  updateContact() {
+    let error = '';
+    const { action } = this.props.route.params;
+    // On récupère le texte courant
+    if (this.state.visits.length > 0) {
+      this.state.visits[this.state.selectedVisit].note =
+        this.state.tmpVisitNote;
+    }
+    let type;
+    if (this.state.clientChecked === true) {
+      type = 'client';
+    } else if (this.state.prospectChecked === true) {
+      type = 'prospect';
+    } else if (this.state.otherChecked === true) {
+      type = 'other';
+      if (this.state.tmpOther.length === 0) {
+        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
+      }
+    } else {
+      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
+    }
+    if (
+      this.state.tmpEmail.length < 5 ||
+      !Helpers.isEmailValid(this.state.tmpEmail)
+    ) {
+      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
+    }
+    if (this.state.tmpName.length === 0) {
+      error = error.concat(i18n.t('error.invalid_name') + '.\n');
+    }
+    if (this.state.tmpFirstname.length === 0) {
+      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
+    }
+
+    if (error.length > 0) {
+      Alert.alert(i18n.t('global.warning') + ' !', error, [{ text: 'OK' }], {
+        cancelable: false,
+      });
+    } else {
+      const contact = {
+        id: Helpers.generateUUID(),
+        email: this.state.tmpEmail,
+        type: type,
+        other: this.state.tmpOther,
+        select1: this.state.tmpSelect1,
+        select2: this.state.tmpSelect2,
+        name: this.state.tmpName,
+        firstname: this.state.tmpFirstname,
+        company: this.state.tmpCompany,
+        address: this.state.tmpAddress,
+        phone: this.state.tmpPhone,
+        products: JSON.stringify(this.state.productsCheck),
+        notes: this.state.tmpNote,
+        visits: JSON.stringify(this.state.visits),
+        to_delete: false,
+        synced: false,
+      };
+      if (action === 'edit') {
+        contact.id = this.state.tmpID;
+        this.props.editContact(this.props.currentUser, contact);
+        this.populate();
+        showMessage({
+          message: i18n.t('contact_details_s.contact_saved') + '.',
+          type: 'success',
+          duration: 500,
+        });
+      } else {
+        this.props.addContact(this.props.currentUser, contact);
+        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
+      }
+    }
+  }
+
+  updateContactType(type) {
+    if (type === 'client') {
+      this.setState({
+        clientChecked: true,
+        prospectChecked: false,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else if (type === 'prospect') {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: true,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: false,
+        otherChecked: true,
+      });
+    }
+  }
+
+  newVisit() {
+    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
+    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
+    this.setState({
+      tmpVisitNote: '',
+      visits: this.state.visits,
+      showNewVisit: false,
+      selectedVisit: 0,
+    });
+  }
+
+  deleteVisit() {
+    Alert.alert(
+      i18n.t('global.confirmation'),
+      i18n.t('contact_details_s.confirm_visit_delete'),
+      [
+        {
+          text: i18n.t('global.no'),
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'cancel',
+        },
+        {
+          text: i18n.t('global.yes'),
+          onPress: () => {
+            this.state.visits.splice(this.state.selectedVisit, 1);
+            if (this.state.visits.length === 0) {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: '',
+              });
+            } else {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: this.state.visits[0].note,
+              });
+            }
+          },
+        },
+      ],
+      { cancelable: false },
+    );
+  }
+
+  populate() {
+    const { contactId } = this.props.route.params;
+    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
+    this.setState({
+      tmpID: contact.id,
+      tmpNote: contact.notes,
+      tmpName: contact.name,
+      tmpFirstname: contact.firstname,
+      tmpEmail: contact.email,
+      tmpCompany: contact.company,
+      tmpAddress: contact.address,
+      tmpPhone: contact.phone,
+      tmpSelect1: contact.select1,
+      tmpSelect2: contact.select2,
+      tmpOther: contact.other,
+    });
+    if (contact.type === 'client') {
+      this.setState({ clientChecked: true });
+    } else if (contact.type === 'prospect') {
+      this.setState({ prospectChecked: true });
+    } else {
+      this.setState({ otherChecked: true });
+    }
+    if (contact.visits !== null) {
+      const tmp = JSON.parse(contact.visits);
+      this.setState({ visits: tmp });
+      if (tmp.length > 0) {
+        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
+      }
+    }
+    if (contact.products !== null) {
+      const tmp = JSON.parse(contact.products);
+      this.setState({ productsCheck: tmp });
+    }
+  }
+
+  componentDidMount() {
+    const { action } = this.props.route.params;
+    if (action === 'edit') {
+      this.setState({ action: 'edit' });
+      this.populate();
+    }
+
+    BarCodeScanner.requestPermissionsAsync().then(res => {
+      this.setState({ hasPermission: res.status === 'granted' });
+    });
+  }
+
+  render() {
+    const handleBarCodeScanned = ({ type, data }) => {
+      this.setState({ scanned: true });
+      if (data.includes('VCARD')) {
+        let datas = vCard.parse(data);
+        let tmpDatas = [];
+        if (datas.n !== undefined) {
+          const nx = Object.assign(
+            { n1: [{ value: datas.n[0].value[0] }] },
+            { n2: [{ value: datas.n[0].value[1] }] },
+          );
+          datas = Object.assign(datas, nx);
+        }
+        if (datas.adr !== undefined) {
+          let tmp = datas.adr[0].value;
+          let tmpadr = '';
+          for (let i = 0; i < tmp.length; i++) {
+            if (tmp[i].length > 0) {
+              if (tmpadr.length > 0) {
+                tmpadr = tmpadr + ', ' + tmp[i];
+              } else {
+                tmpadr = tmp[i];
+              }
+            }
+          }
+          datas.adr = [{ value: tmpadr }];
+        }
+        Object.keys(datas).map((objectKey, index) => {
+          if (
+            objectKey === 'email' ||
+            objectKey === 'adr' ||
+            objectKey === 'tel' ||
+            objectKey === 'org' ||
+            objectKey === 'n1' ||
+            objectKey === 'n2'
+          ) {
+            let value = datas[objectKey][0].value;
+            if (typeof value === 'string') {
+              tmpDatas.push(value);
+            }
+          }
+        });
+        this.setState({
+          parsedType: 'vcard',
+          parsedDatas: tmpDatas,
+          showQRcodevCard: false,
+          showDynContact: true,
+        });
+      } else {
+        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
+      }
+    };
+    return (
+      <View style={styles.container}>
+        <ScrollView style={{ flex: 1 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.customer')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.clientChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('client')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.prospect')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.prospectChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('prospect')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.other')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.otherChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('other')}
+            />
+            {this.state.otherChecked === true && (
+              <TextInput
+                style={{
+                  backgroundColor: 'white',
+                  margin: 10,
+                  padding: 10,
+                  flex: 2,
+                }}
+                value={this.state.tmpOther}
+                placeholder={i18n.t('contact_details_s.description')}
+                onChangeText={text => this.setState({ tmpOther: text })}
+              />
+            )}
+          </View>
+          <View style={{ flexDirection: 'row' }}>
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpName}
+              placeholder={
+                i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'
+              }
+              onChangeText={text => this.setState({ tmpName: text })}
+            />
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpFirstname}
+              placeholder={
+                i18n.t('global.firstname') +
+                ' (' +
+                i18n.t('global.required') +
+                ')'
+              }
+              onChangeText={text => this.setState({ tmpFirstname: text })}
+            />
+          </View>
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpEmail}
+            placeholder={
+              i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'
+            }
+            onChangeText={text => this.setState({ tmpEmail: text })}
+            autoCapitalize={'none'}
+            autoCorrect={false}
+            keyboardType={'email-address'}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpCompany}
+            placeholder={i18n.t('global.company')}
+            onChangeText={text => this.setState({ tmpCompany: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpAddress}
+            placeholder={i18n.t('global.address')}
+            onChangeText={text => this.setState({ tmpAddress: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpPhone}
+            placeholder={i18n.t('global.phone')}
+            onChangeText={text => this.setState({ tmpPhone: text })}
+            autoCompleteType={'tel'}
+            dataDetectorTypes={'phoneNumber'}
+            keyboardType={'phone-pad'}
+          />
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <FontAwesome5
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect1}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect1: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={this.props.FormSelect1.title[this.props.locale]}
+                  value="0"
+                />
+                {this.renderSelect(1)}
+              </Picker>
+            </View>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <FontAwesome5
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect2}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect2: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={this.props.FormSelect2.title[this.props.locale]}
+                  value="0"
+                />
+                {this.renderSelect(2)}
+              </Picker>
+            </View>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+            }}>
+            {this.renderProductsCheck()}
+          </View>
+        </ScrollView>
+        <View style={{ flex: 1, margin: 5 }}>
+          <View style={{ flex: 1 }}>
+            <ButtonGroup
+              buttons={[
+                i18n.t('contact_details_s.visits'),
+                i18n.t('contact_details_s.notes'),
+              ]}
+              selectedButtonStyle={{ backgroundColor: this.props.mainColor }}
+              containerStyle={{ height: 30 }}
+              selectedIndex={this.state.selectedIndex}
+              onPress={index => this.setState({ selectedIndex: index })}
+            />
+            {this.state.selectedIndex === 0 && (
+              <View style={{ flex: 1 }}>
+                <View style={{ flexDirection: 'row' }}>
+                  {this.state.visits.length > 0 && (
+                    <View style={{ flex: 2, flexDirection: 'row' }}>
+                      <FontAwesome5
+                        name="sort-down"
+                        size={20}
+                        color={'black'}
+                        style={{
+                          zIndex: 1,
+                          position: 'absolute',
+                          right: 25,
+                          top: 20,
+                        }}
+                      />
+                      <Picker
+                        style={styles.select}
+                        selectedValue={this.state.selectedVisit}
+                        onValueChange={(itemValue, itemIndex) => {
+                          this.state.visits[this.state.selectedVisit].note =
+                            this.state.tmpVisitNote;
+                          this.setState({
+                            visits: this.state.visits,
+                            selectedVisit: itemIndex,
+                            tmpVisitNote: this.state.visits[itemIndex].note,
+                          });
+                        }}>
+                        {this.state.visits.map((item, index) => {
+                          return (
+                            <Picker.Item label={item.title} value={index} />
+                          );
+                        })}
+                      </Picker>
+                    </View>
+                  )}
+                  {this.state.visits.length === 0 && (
+                    <View
+                      style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}>
+                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
+                    </View>
+                  )}
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-evenly',
+                      margin: 10,
+                    }}>
+                    <TouchableOpacity
+                      style={styles.button}
+                      onPress={() => this.setState({ showNewVisit: true })}>
+                      <FontAwesome5
+                        name="plus-circle"
+                        size={20}
+                        color={this.props.mainColor}
+                      />
+                    </TouchableOpacity>
+                    {this.state.visits.length > 0 && (
+                      <TouchableOpacity
+                        style={styles.button}
+                        onPress={() => this.deleteVisit()}>
+                        <FontAwesome5
+                          name="trash"
+                          size={20}
+                          color={this.props.mainColor}
+                        />
+                      </TouchableOpacity>
+                    )}
+                  </View>
+                </View>
+                {this.state.visits.length > 0 && (
+                  <TextInput
+                    style={styles.textArea}
+                    underlineColorAndroid="transparent"
+                    placeholder={i18n.t('contact_details_s.notes') + '...'}
+                    placeholderTextColor="grey"
+                    multiline={true}
+                    value={this.state.tmpVisitNote}
+                    onChangeText={text => this.setState({ tmpVisitNote: text })}
+                  />
+                )}
+              </View>
+            )}
+            {this.state.selectedIndex === 1 && (
+              <TextInput
+                style={styles.textArea}
+                underlineColorAndroid="transparent"
+                placeholder={i18n.t('contact_details_s.notes') + '...'}
+                placeholderTextColor="grey"
+                multiline={true}
+                value={this.state.tmpNote}
+                onChangeText={text => this.setState({ tmpNote: text })}
+              />
+            )}
+          </View>
+          <View
+            style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
+            {this.state.action === 'add' && (
+              <>
+                <Button
+                  title="QRCode vCard"
+                  onPress={() => this.setState({ showQRcodevCard: true })}
+                  color={this.props.mainColor}
+                />
+              </>
+            )}
+            <Button
+              title={i18n.t('global.save')}
+              onPress={() => this.updateContact()}
+              color={this.props.mainColor}
+            />
+          </View>
+        </View>
+        <Overlay
+          isVisible={this.state.showNewVisit}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text style={{ marginBottom: 10 }}>
+              {i18n.t('contact_details_s.visit_name')} :
+            </Text>
+            <TextInput
+              placeholder={i18n.t('contact_details_s.visit_name')}
+              value={this.state.newVisitTitle}
+              onChangeText={text => this.setState({ newVisitTitle: text })}
+              style={{
+                borderWidth: 1,
+                borderColor: 'lightgrey',
+                width: 300,
+                marginBottom: 15,
+                paddingLeft: 10,
+              }}
+            />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() => this.setState({ showNewVisit: false })}
+                color={this.props.mainColor}
+              />
+              <Button
+                title={i18n.t('global.add')}
+                onPress={() => this.newVisit()}
+                color={this.props.mainColor}
+              />
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showQRcodevCard}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            {this.state.hasPermission === true && (
+              <BarCodeScanner
+                onBarCodeScanned={
+                  this.state.scanned ? undefined : handleBarCodeScanned
+                }
+                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
+                style={{ flex: 1, width: 380, height: 200 }}
+              />
+            )}
+            {this.state.hasPermission === false && (
+              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
+            )}
+            {this.state.hasPermission === null && (
+              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
+            )}
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({ showQRcodevCard: false, scanned: false })
+                }
+                color={this.props.mainColor}
+              />
+              {this.state.scanned && (
+                <Button
+                  title={i18n.t('global.retry')}
+                  onPress={() => this.setState({ scanned: false })}
+                  color={this.props.mainColor}
+                />
+              )}
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showDynContact}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={400}>
+          <View
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'space-evenly',
+            }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.name')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedName}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) => {
+                  this.setState({ parsedName: itemValue });
+                }}>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.firstname')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedFirstname}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedFirstname: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.email')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedEmail}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedEmail: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.company')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedCompany}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedCompany: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.address')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedAddress}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedAddress: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.phone')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedPhone}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedPhone: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({
+                    showDynContact: false,
+                    scanned: false,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                  })
+                }
+                color={this.props.mainColor}
+              />
+              <Button
+                title={i18n.t('global.next')}
+                onPress={() =>
+                  this.setState({
+                    tmpName: this.state.parsedName,
+                    tmpFirstname: this.state.parsedFirstname,
+                    tmpEmail: this.state.parsedEmail,
+                    tmpCompany: this.state.parsedCompany,
+                    tmpAddress: this.state.parsedAddress,
+                    tmpPhone: this.state.parsedPhone,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                    showDynContact: false,
+                    scanned: false,
+                  })
+                }
+                color={this.props.mainColor}
+              />
+            </View>
+          </View>
+        </Overlay>
+      </View>
+    );
+  }
+
+  renderSelect(num) {
+    let objSelect = {};
+    let locale = this.props.locale;
+    if (num === 1) {
+      objSelect = this.props.FormSelect1.values;
+    } else if (num === 2) {
+      objSelect = this.props.FormSelect2.values;
+    }
+    return Object.keys(objSelect).map(item => {
+      return (
+        <Picker.Item key={item} label={objSelect[item][locale]} value={item} />
+      );
+    });
+  }
+
+  renderProductsCheck() {
+    let locale = this.props.locale;
+    let obj = (obj = this.props.FormCheck);
+    return Object.keys(obj).map(item => {
+      return (
+        <CheckBox
+          key={item}
+          checkedColor={this.props.mainColor}
+          title={obj[item][locale]}
+          checked={this.state.productsCheck[item]}
+          onPress={() => {
+            let pc = this.state.productsCheck;
+            pc[item] = !pc[item];
+            console.log(pc);
+            this.setState({ productsCheck: pc });
+          }}
+          containerStyle={styles.clearCheckbox}
+        />
+      );
+    });
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ContactDetailsScreen);
diff --git a/ComApp/src/App/Views/ContactScreen.js b/ComApp/src/App/Views/ContactScreen.js
index 7a14e45..3b69040 100644
--- a/ComApp/src/App/Views/ContactScreen.js
+++ b/ComApp/src/App/Views/ContactScreen.js
@@ -1,557 +1,632 @@
-import React from 'react';
-import {
-    View,
-    Button,
-    FlatList,
-    Text,
-    TouchableOpacity,
-    Alert,
-    TextInput,
-} from 'react-native';
-// Reduxs
-import { connect } from 'react-redux';
-import { editContact } from '../Store/Actions/contacts';
-import { deleteContact } from '../Store/Actions/contacts';
-// Helpers
-import Helpers from "../Lib/Helpers";
-// Translations
-import i18n from "../../I18n";
-// Icons
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-// Flash Messages
-import { showMessage } from 'react-native-flash-message';
-// Overlay
-import { Overlay } from '@rneui/themed';
-// Picker 
-import { Picker } from '@react-native-picker/picker';
-// Style
-import styles from '../../Resources/Styles/ContactStyle';
-
-function mapStateToProps(state) {
-    return {
-        users: state.users.users,
-        contacts: state.contacts,
-        documents: state.documents,
-        currentUser: state.app.currentUser,
-        mainColor: state.app.mainColor
-    };
-}
-
-const mapDispatchToProps = dispatch => {
-    return {
-        editContact: (user, data) => dispatch(editContact(user, data)),
-        deleteContact: (user, id) => dispatch(deleteContact(user, id)),
-        sendBrochure: (email) => dispatch({ type: 'SEND_BROCHURE', data: email })
-    };
-};
-
-class ContactScreen extends React.Component {
-    state = {
-        contacts: [],
-        sortType: 'asc',
-        sortField: 'name',
-        searchTxt: '',
-        showTransferContact: false,
-        selectedTransferUser: 0,
-        contactToTransfer: {},
-        showSendBrochure: false,
-        selectedDocument: -1,
-        sendDocumentList: [],
-        selectedSendBrochureEmail: -1,
-        tmpSendBrochureEmail: '',
-        tmpSendBrochureSubject: '',
-        tmpSendBrochureMessage: '',
-        sortedDocuments: [],
-        sortedEmails: [],
-    };
-
-    sendBrochure() {
-        if (
-            this.state.tmpSendBrochureEmail !== '' &&
-            this.state.tmpSendBrochureSubject !== '' &&
-            this.state.tmpSendBrochureMessage !== '' &&
-            this.state.sendDocumentList.length > 0 &&
-            Helpers.isEmailValid(this.state.tmpSendBrochureEmail)
-        ) {
-            const email = {
-                email: this.state.tmpSendBrochureEmail,
-                subject: this.state.tmpSendBrochureSubject,
-                message: this.state.tmpSendBrochureMessage,
-                documents: JSON.stringify(this.state.sendDocumentList),
-                user_id: this.props.currentUser.id
-            };
-            this.props.sendBrochure(email);
-            this.setState({
-                showSendBrochure: false,
-                tmpSendBrochureEmail: '',
-                tmpSendBrochureSubject: '',
-                tmpSendBrochureMessage: '',
-                selectedSendBrochureEmail: -1,
-                selectedDocument: -1,
-                sendDocumentList: [],
-            });
-            showMessage({
-                message: i18n.t('global.message_sent') + '.',
-                description: i18n.t('global.message_will_be_sent_after_sync') + '.',
-                type: 'success',
-                duration: 1500,
-            });
-        } else {
-            Alert.alert(
-                i18n.t('error.incomplete_form'),
-                i18n.t('error.fill_all_fields_and_1_doc_min') + '.',
-            );
-        }
-    }
-
-    transferContact() {
-        const nextUser = this.props.users.filter(user => user.id !== this.props.currentUser.id)[this.state.selectedTransferUser];
-        const transferContact = this.state.contactToTransfer;
-        const contact = {
-            id: transferContact.id,
-            email: transferContact.email,
-            type: transferContact.type,
-            other: transferContact.other,
-            network: transferContact.network,
-            name: transferContact.name,
-            firstname: transferContact.firstname,
-            office: transferContact.office,
-            company: transferContact.company,
-            address: transferContact.address,
-            phone: transferContact.phone,
-            products: transferContact.products,
-            notes: transferContact.note,
-            visits: transferContact.visits,
-            to_delete: false,
-            synced: false,
-            user_id: nextUser.id,
-        };
-        this.props.editContact(this.props.currentUser, contact);
-        this.setState({ showTransferContact: false });
-        showMessage({
-            message: i18n.t('contact_s.contact_transferred') + '.',
-            description: i18n.t('contact_s.contact_will_be_sent_after_sync') + '.',
-            type: 'success',
-            duration: 1500,
-        });
-    }
-
-    deleteContactAction(id) {
-        Alert.alert(
-            i18n.t('global.confirmation'),
-            i18n.t('contact_s.confirm_contact_delete'),
-            [
-                {
-                    text: i18n.t('global.no'),
-                    onPress: () => console.log('Cancel Pressed'),
-                    style: 'cancel',
-                },
-                {
-                    text: i18n.t('global.yes'),
-                    onPress: () => {
-                        this.setState({ contacts: [], sortedEmails: [] });
-                        this.props.deleteContact(this.props.currentUser, id);
-                        showMessage({
-                            message: i18n.t('contact_s.contact_deleted') + '.',
-                            type: 'success',
-                            duration: 500,
-                        });
-                    },
-                },
-            ],
-            { cancelable: false },
-        );
-    }
-
-    Item(item) {
-        return (
-            <View style={styles.item}>
-                <TouchableOpacity
-                    onPress={() =>
-                        this.props.navigation.navigate('ContactDetailsScreen', {
-                            action: 'edit',
-                            contactId: item.id,
-                        })
-                    }>
-                    <Text style={{ ...styles.clickable, color: this.props.mainColor }}>
-                        {item.name.toUpperCase()} {item.firstname}
-                    </Text>
-                </TouchableOpacity>
-                <Text style={styles.company}>{item.company}</Text>
-                <Text style={styles.email}>{item.email}</Text>
-                <View style={styles.buttons}>
-                    <TouchableOpacity
-                        style={styles.button}
-                        onPress={() => {
-                            this.deleteContactAction(item.id);
-                        }}>
-                        <FontAwesome5 name="trash" size={20} color={this.props.mainColor} />
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                        style={styles.button}
-                        onPress={() => {
-                            this.setState({
-                                showTransferContact: true,
-                                contactToTransfer: item,
-                            });
-                        }}>
-                        <FontAwesome5 name="paper-plane" size={20} color={this.props.mainColor} />
-                    </TouchableOpacity>
-                </View>
-            </View>
-        );
-    }
-
-    sortContacts(field) {
-        let sort;
-        if (field !== this.state.sortField) {
-            sort = 'asc';
-        } else {
-            if (this.state.sortType === 'asc') {
-                sort = 'desc';
-            } else {
-                sort = 'asc';
-            }
-        }
-        this.setState({ contacts: this.state.contacts.sort(Helpers.compareValues(field, sort)), sortType: sort, sortField: field });
-    }
-
-    HeaderItem() {
-        return (
-            <View style={styles.item}>
-                <TouchableOpacity onPress={() => {
-                    this.sortContacts('name');
-                }}>
-                    <Text style={{ ...styles.clickable, color: this.props.mainColor }}>{i18n.t('global.name')} <FontAwesome5 name={'sort'} /></Text>
-                </TouchableOpacity>
-                <TouchableOpacity onPress={() => {
-                    this.sortContacts('company');
-                }}>
-                    <Text style={{ ...styles.clickable, color: this.props.mainColor }}>{i18n.t('global.company')} <FontAwesome5 name={'sort'} /></Text>
-                </TouchableOpacity>
-                <Text style={styles.email}>{i18n.t('global.email')}</Text>
-                <Text style={styles.buttons} />
-            </View>
-        );
-    }
-
-    handleSearchBtn() {
-        if (this.state.searchTxt.length > 0) {
-            let obj = this.props.contacts;
-            let array = Object.keys(obj).map(function (key) { return obj[key]; });
-            this.setState({ contacts: array.sort(Helpers.compareValues('name', 'asc')), sortType: 'asc', searchTxt: '' });
-        }
-    }
-    handleSearchTxt(text) {
-        this.setState({ searchTxt: text });
-        if (text.length > 0) {
-            let tmpContactsName = this.props.contacts.filter(item => item.name.toLowerCase().indexOf(text.toLowerCase()) >= 0);
-            let tmpContactsCompany = this.props.contacts.filter(item => item.company.toLowerCase().indexOf(text.toLowerCase()) >= 0);
-            let resSearch = Object.assign(tmpContactsName, tmpContactsCompany);
-            this.setState({ contacts: resSearch.sort(Helpers.compareValues('name', 'asc')), sortType: 'asc' });
-        } else {
-            let obj = this.props.contacts;
-            let array = Object.keys(obj).map(function (key) { return obj[key]; });
-            this.setState({ contacts: array.sort(Helpers.compareValues('name', 'asc')), sortType: 'asc' });
-        }
-    }
-
-    componentDidMount() {
-        this.init();
-    }
-
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        if (prevProps.contacts !== this.props.contacts) {
-            this.init();
-        }
-    }
-
-    init() {
-        let objContacts = this.props.contacts;
-        let objDocs = this.props.documents;
-        let arrayContacts = Object.keys(objContacts).map(function (key) { return objContacts[key]; });
-        let arrayEmails = Object.keys(objContacts).map(function (key) { return objContacts[key]; });
-        let arrayDocs = Object.keys(objDocs).map(function (key) { return objDocs[key]; });
-
-        this.setState({
-            contacts: arrayContacts.sort(Helpers.compareValues('name', 'asc')),
-            sortedDocuments: arrayDocs.sort(Helpers.compareValues('title', 'asc')),
-            sortedEmails: arrayEmails.sort(Helpers.compareValues('email', 'asc')),
-            sortType: 'asc',
-            sortField: 'name',
-        });
-    }
-
-    render() {
-        const { contactAdded, action } = this.props.route.params;
-        if (action === 'add') {
-            this.props.navigation.navigate('ContactDetailsScreen', {
-                action: 'add',
-            })
-        }
-        if (contactAdded === true) {
-            this.props.navigation.setParams({ contactAdded: false });
-            showMessage({
-                message: i18n.t('contact_s.contact_added') + '.',
-                type: 'success',
-                duration: 500,
-            });
-        }
-        return (
-            <View style={styles.container}>
-                <View
-                    style={{
-                        marginTop: 20,
-                        flexDirection: 'row',
-                        justifyContent: 'space-evenly',
-                        alignItems: 'center',
-                    }}>
-                    <Button
-                        color={this.props.mainColor}
-                        title={i18n.t('global.add')}
-                        onPress={() =>
-                            this.props.navigation.navigate('ContactDetailsScreen', {
-                                action: 'add',
-                            })
-                        }
-                    />
-                    <Button
-                        color={this.props.mainColor}
-                        title={i18n.t('contact_s.send_flyer')}
-                        onPress={() => this.setState({ showSendBrochure: true })}
-                    />
-                    <View style={{ flexDirection: 'row' }}>
-                        <TextInput placeholder={i18n.t('global.search')} style={styles.inputSearch} value={this.state.searchTxt} onChangeText={(text) => this.handleSearchTxt(text)} />
-                        <TouchableOpacity style={{ ...styles.btnSearch, backgroundColor: this.props.mainColor }} onPress={() => this.handleSearchBtn()}>
-                            {this.state.searchTxt.length > 0 ? (
-                                <FontAwesome5 name={'times'} size={20} color={'white'} />
-                            ) : (
-                                <FontAwesome5 name={'search'} size={20} color={'white'} />
-                            )}
-                        </TouchableOpacity>
-                    </View>
-                </View>
-                <View style={{ flex: 1, marginTop: 20 }}>
-                    <FlatList
-                        data={this.state.contacts}
-                        renderItem={({ item }) => this.Item(item)}
-                        ListHeaderComponent={this.HeaderItem.bind(this)}
-                        keyExtractor={item => item.id.toString()}
-                    />
-                </View>
-                <Overlay
-                    isVisible={this.state.showTransferContact}
-                    windowBackgroundColor="rgba(255, 255, 255, .9)"
-                    overlayBackgroundColor="white"
-                    width={400}
-                    height={300}>
-                    <View
-                        style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-                        <Text style={{ marginBottom: 10 }}>{i18n.t('contact_s.select_contact')} :</Text>
-                        <Picker
-                            style={{
-                                width: 300,
-                                marginBottom: 15,
-                                paddingLeft: 10,
-                            }}
-                            selectedValue={this.state.selectedTransferUser}
-                            onValueChange={(itemValue, itemIndex) => {
-                                this.setState({ selectedTransferUser: itemIndex });
-                            }}>
-                            {this.props.users.filter(user => user.id !== this.props.currentUser.id).map((item, index) => {
-                                return <Picker.Item label={item.email} value={index} key={item.id.toString()} />;
-                            })}
-                        </Picker>
-                        <View
-                            style={{
-                                flexDirection: 'row',
-                                justifyContent: 'space-evenly',
-                                alignItems: 'center',
-                                width: 400,
-                            }}>
-                            <Button
-                                color={this.props.mainColor}
-                                title={i18n.t('global.cancel')}
-                                onPress={() => this.setState({ showTransferContact: false })}
-                            />
-                            <Button
-                                color={this.props.mainColor}
-                                title={i18n.t('contact_s.transfer')}
-                                onPress={() => this.transferContact()}
-                            />
-                        </View>
-                    </View>
-                </Overlay>
-                <Overlay
-                    isVisible={this.state.showSendBrochure}
-                    windowBackgroundColor="rgba(255, 255, 255, .9)"
-                    overlayBackgroundColor="white"
-                    width={600}
-                    height={500}>
-                    <View style={{ flex: 1 }}>
-                        <View style={{ flex: 2, flexDirection: 'row' }}>
-                            <View
-                                style={{
-                                    flex: 1,
-                                    alignItems: 'center',
-                                    justifyContent: 'flex-start',
-                                }}>
-                                <TextInput
-                                    style={styles.txtSendBrochure}
-                                    placeholder={i18n.t('global.email')}
-                                    autoCompleteType="email"
-                                    autoCapitalize="none"
-                                    keyboardType={'email-address'}
-                                    value={this.state.tmpSendBrochureEmail}
-                                    onChangeText={text =>
-                                        this.setState({ tmpSendBrochureEmail: text })
-                                    }
-                                />
-                                <Picker
-                                    style={{
-                                        width: 300,
-                                        marginBottom: 15,
-                                        paddingLeft: 10,
-                                    }}
-                                    selectedValue={this.state.selectedSendBrochureEmail}
-                                    onValueChange={(itemValue, itemIndex) => {
-                                        if (itemValue !== '-1') {
-                                            this.setState({
-                                                tmpSendBrochureEmail: this.state.sortedEmails[itemIndex - 1]
-                                                    .email,
-                                            });
-                                        }
-                                    }}>
-                                    <Picker.Item label={i18n.t('contact_s.contact_list') + ' :'} value="-1" />
-                                    {this.state.sortedEmails.map((item, index) => {
-                                        return <Picker.Item label={item.email} value={index} key={item.id.toString()} />;
-                                    })}
-                                </Picker>
-                                <TextInput
-                                    style={styles.txtSendBrochure}
-                                    placeholder={i18n.t('global.subject')}
-                                    value={this.state.tmpSendBrochureSubject}
-                                    onChangeText={text =>
-                                        this.setState({ tmpSendBrochureSubject: text })
-                                    }
-                                />
-                                <TextInput
-                                    style={styles.textAreaSendBrochure}
-                                    placeholder={i18n.t('global.message')}
-                                    value={this.state.tmpSendBrochureMessage}
-                                    multiline={true}
-                                    underlineColorAndroid="transparent"
-                                    onChangeText={text =>
-                                        this.setState({ tmpSendBrochureMessage: text })
-                                    }
-                                />
-                                <Picker
-                                    style={{
-                                        width: 300,
-                                        marginBottom: 15,
-                                        paddingLeft: 10,
-                                    }}
-                                    selectedValue={this.state.selectedDocument}
-                                    onValueChange={(itemValue, itemIndex) => {
-                                        if (
-                                            itemValue !== '-1' &&
-                                            this.state.sendDocumentList.length < 8
-                                        ) {
-                                            let tmp = this.state.sendDocumentList;
-                                            const toPush = this.state.sortedDocuments[itemIndex - 1];
-                                            const test = this.state.sendDocumentList.filter(
-                                                item => item.id === toPush.id,
-                                            );
-                                            if (test.length === 0) {
-                                                tmp.push(toPush);
-                                                this.setState({
-                                                    sendDocumentList: tmp,
-                                                });
-                                            }
-                                        }
-                                    }}>
-                                    <Picker.Item label={i18n.t('contact_s.documents_list') + ' :'} value="-1" />
-                                    {this.state.sortedDocuments.map((item, index) => {
-                                        return (
-                                            <Picker.Item
-                                                label={
-                                                    item.title + ' (' + item.type.toUpperCase() + ')'
-                                                }
-                                                value={index}
-                                                key={item.id.toString()}
-                                            />
-                                        );
-                                    })}
-                                </Picker>
-                            </View>
-                            <View
-                                style={{
-                                    flex: 1,
-                                    borderWidth: 1,
-                                    borderColor: 'lightgrey',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    width: 600,
-                                }}>
-                                {this.state.sendDocumentList.map((item, index) => {
-                                    return (
-                                        <TouchableOpacity
-                                            key={index}
-                                            onPress={() => {
-                                                let tmp = this.state.sendDocumentList;
-                                                tmp.splice(this.props.documents[index], 1);
-                                                this.setState({
-                                                    sendDocumentList: tmp,
-                                                });
-                                            }}>
-                                            <View
-                                                style={{
-                                                    borderWidth: 1,
-                                                    borderColor: 'lightgrey',
-                                                    padding: 5,
-                                                    margin: 5,
-                                                    borderRadius: 5,
-                                                }}>
-                                                <Text>
-                                                    {item.title} ({item.type.toUpperCase()}){' '}
-                                                    <FontAwesome5 name="minus" size={15} />
-                                                </Text>
-                                            </View>
-                                        </TouchableOpacity>
-                                    );
-                                })}
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                flexDirection: 'row',
-                                justifyContent: 'space-evenly',
-                                alignItems: 'center',
-                                width: 600,
-                                marginTop: 15,
-                            }}>
-                            <Button
-                                color={this.props.mainColor}
-                                title={i18n.t('global.cancel')}
-                                onPress={() =>
-                                    this.setState({
-                                        showSendBrochure: false,
-                                        tmpSendBrochureEmail: '',
-                                        tmpSendBrochureSubject: '',
-                                        tmpSendBrochureMessage: '',
-                                        selectedSendBrochureEmail: -1,
-                                        selectedDocument: -1,
-                                        sendDocumentList: [],
-                                    })
-                                }
-                            />
-                            <Button title={i18n.t('global.send')} onPress={() => this.sendBrochure()} color={this.props.mainColor} />
-                        </View>
-                    </View>
-                </Overlay>
-            </View>
-        );
-    }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ContactScreen);
+import React from 'react';
+import {
+  Alert,
+  Button,
+  FlatList,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+// Reduxs
+import { connect } from 'react-redux';
+import { deleteContact, editContact } from '../Store/Actions/contacts';
+// Helpers
+import Helpers from '../Lib/Helpers';
+// Translations
+import i18n from '../../I18n';
+// Icons
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+// Flash Messages
+import { showMessage } from 'react-native-flash-message';
+// Overlay
+import { Overlay } from '@rneui/themed';
+// Picker
+import { Picker } from '@react-native-picker/picker';
+// Style
+import styles from '../../Resources/Styles/ContactStyle';
+
+function mapStateToProps(state) {
+  return {
+    users: state.users.users,
+    contacts: state.contacts,
+    documents: state.documents,
+    currentUser: state.app.currentUser,
+    mainColor: state.app.mainColor,
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    editContact: (user, data) => dispatch(editContact(user, data)),
+    deleteContact: (user, id) => dispatch(deleteContact(user, id)),
+    sendBrochure: email => dispatch({ type: 'SEND_BROCHURE', data: email }),
+  };
+};
+
+class ContactScreen extends React.Component {
+  state = {
+    contacts: [],
+    sortType: 'asc',
+    sortField: 'name',
+    searchTxt: '',
+    showTransferContact: false,
+    selectedTransferUser: 0,
+    contactToTransfer: {},
+    showSendBrochure: false,
+    selectedDocument: -1,
+    sendDocumentList: [],
+    selectedSendBrochureEmail: -1,
+    tmpSendBrochureEmail: '',
+    tmpSendBrochureSubject: '',
+    tmpSendBrochureMessage: '',
+    sortedDocuments: [],
+    sortedEmails: [],
+  };
+
+  sendBrochure() {
+    if (
+      this.state.tmpSendBrochureEmail !== '' &&
+      this.state.tmpSendBrochureSubject !== '' &&
+      this.state.tmpSendBrochureMessage !== '' &&
+      this.state.sendDocumentList.length > 0 &&
+      Helpers.isEmailValid(this.state.tmpSendBrochureEmail)
+    ) {
+      const email = {
+        email: this.state.tmpSendBrochureEmail,
+        subject: this.state.tmpSendBrochureSubject,
+        message: this.state.tmpSendBrochureMessage,
+        documents: JSON.stringify(this.state.sendDocumentList),
+        user_id: this.props.currentUser.id,
+      };
+      this.props.sendBrochure(email);
+      this.setState({
+        showSendBrochure: false,
+        tmpSendBrochureEmail: '',
+        tmpSendBrochureSubject: '',
+        tmpSendBrochureMessage: '',
+        selectedSendBrochureEmail: -1,
+        selectedDocument: -1,
+        sendDocumentList: [],
+      });
+      showMessage({
+        message: i18n.t('global.message_sent') + '.',
+        description: i18n.t('global.message_will_be_sent_after_sync') + '.',
+        type: 'success',
+        duration: 1500,
+      });
+    } else {
+      Alert.alert(
+        i18n.t('error.incomplete_form'),
+        i18n.t('error.fill_all_fields_and_1_doc_min') + '.',
+      );
+    }
+  }
+
+  transferContact() {
+    const nextUser = this.props.users.filter(
+      user => user.id !== this.props.currentUser.id,
+    )[this.state.selectedTransferUser];
+    const transferContact = this.state.contactToTransfer;
+    const contact = {
+      id: transferContact.id,
+      email: transferContact.email,
+      type: transferContact.type,
+      other: transferContact.other,
+      network: transferContact.network,
+      name: transferContact.name,
+      firstname: transferContact.firstname,
+      office: transferContact.office,
+      company: transferContact.company,
+      address: transferContact.address,
+      phone: transferContact.phone,
+      products: transferContact.products,
+      notes: transferContact.note,
+      visits: transferContact.visits,
+      to_delete: false,
+      synced: false,
+      user_id: nextUser.id,
+    };
+    this.props.editContact(this.props.currentUser, contact);
+    this.setState({ showTransferContact: false });
+    showMessage({
+      message: i18n.t('contact_s.contact_transferred') + '.',
+      description: i18n.t('contact_s.contact_will_be_sent_after_sync') + '.',
+      type: 'success',
+      duration: 1500,
+    });
+  }
+
+  deleteContactAction(id) {
+    Alert.alert(
+      i18n.t('global.confirmation'),
+      i18n.t('contact_s.confirm_contact_delete'),
+      [
+        {
+          text: i18n.t('global.no'),
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'cancel',
+        },
+        {
+          text: i18n.t('global.yes'),
+          onPress: () => {
+            this.setState({ contacts: [], sortedEmails: [] });
+            this.props.deleteContact(this.props.currentUser, id);
+            showMessage({
+              message: i18n.t('contact_s.contact_deleted') + '.',
+              type: 'success',
+              duration: 500,
+            });
+          },
+        },
+      ],
+      { cancelable: false },
+    );
+  }
+
+  Item(item) {
+    return (
+      <View style={styles.item}>
+        <TouchableOpacity
+          onPress={() =>
+            this.props.navigation.navigate('ContactDetailsScreen', {
+              action: 'edit',
+              contactId: item.id,
+            })
+          }>
+          <Text style={{ ...styles.clickable, color: this.props.mainColor }}>
+            {item.name.toUpperCase()} {item.firstname}
+          </Text>
+        </TouchableOpacity>
+        <Text style={styles.company}>{item.company}</Text>
+        <Text style={styles.email}>{item.email}</Text>
+        <View style={styles.buttons}>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => {
+              this.deleteContactAction(item.id);
+            }}>
+            <FontAwesome5 name="trash" size={20} color={this.props.mainColor} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => {
+              this.setState({
+                showTransferContact: true,
+                contactToTransfer: item,
+              });
+            }}>
+            <FontAwesome5
+              name="paper-plane"
+              size={20}
+              color={this.props.mainColor}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  sortContacts(field) {
+    let sort;
+    if (field !== this.state.sortField) {
+      sort = 'asc';
+    } else {
+      if (this.state.sortType === 'asc') {
+        sort = 'desc';
+      } else {
+        sort = 'asc';
+      }
+    }
+    this.setState({
+      contacts: this.state.contacts.sort(Helpers.compareValues(field, sort)),
+      sortType: sort,
+      sortField: field,
+    });
+  }
+
+  HeaderItem() {
+    return (
+      <View style={styles.item}>
+        <TouchableOpacity
+          onPress={() => {
+            this.sortContacts('name');
+          }}>
+          <Text style={{ ...styles.clickable, color: this.props.mainColor }}>
+            {i18n.t('global.name')} <FontAwesome5 name={'sort'} />
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            this.sortContacts('company');
+          }}>
+          <Text style={{ ...styles.clickable, color: this.props.mainColor }}>
+            {i18n.t('global.company')} <FontAwesome5 name={'sort'} />
+          </Text>
+        </TouchableOpacity>
+        <Text style={styles.email}>{i18n.t('global.email')}</Text>
+        <Text style={styles.buttons} />
+      </View>
+    );
+  }
+
+  handleSearchBtn() {
+    if (this.state.searchTxt.length > 0) {
+      let obj = this.props.contacts;
+      let array = Object.keys(obj).map(function (key) {
+        return obj[key];
+      });
+      this.setState({
+        contacts: array.sort(Helpers.compareValues('name', 'asc')),
+        sortType: 'asc',
+        searchTxt: '',
+      });
+    }
+  }
+  handleSearchTxt(text) {
+    this.setState({ searchTxt: text });
+    if (text.length > 0) {
+      let tmpContactsName = this.props.contacts.filter(
+        item => item.name.toLowerCase().indexOf(text.toLowerCase()) >= 0,
+      );
+      let tmpContactsCompany = this.props.contacts.filter(
+        item => item.company.toLowerCase().indexOf(text.toLowerCase()) >= 0,
+      );
+      let resSearch = Object.assign(tmpContactsName, tmpContactsCompany);
+      this.setState({
+        contacts: resSearch.sort(Helpers.compareValues('name', 'asc')),
+        sortType: 'asc',
+      });
+    } else {
+      let obj = this.props.contacts;
+      let array = Object.keys(obj).map(function (key) {
+        return obj[key];
+      });
+      this.setState({
+        contacts: array.sort(Helpers.compareValues('name', 'asc')),
+        sortType: 'asc',
+      });
+    }
+  }
+
+  componentDidMount() {
+    this.init();
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (prevProps.contacts !== this.props.contacts) {
+      this.init();
+    }
+  }
+
+  init() {
+    let objContacts = this.props.contacts;
+    let objDocs = this.props.documents;
+    let arrayContacts = Object.keys(objContacts).map(function (key) {
+      return objContacts[key];
+    });
+    let arrayEmails = Object.keys(objContacts).map(function (key) {
+      return objContacts[key];
+    });
+    let arrayDocs = Object.keys(objDocs).map(function (key) {
+      return objDocs[key];
+    });
+
+    this.setState({
+      contacts: arrayContacts.sort(Helpers.compareValues('name', 'asc')),
+      sortedDocuments: arrayDocs.sort(Helpers.compareValues('title', 'asc')),
+      sortedEmails: arrayEmails.sort(Helpers.compareValues('email', 'asc')),
+      sortType: 'asc',
+      sortField: 'name',
+    });
+  }
+
+  render() {
+    const { contactAdded, action } = this.props.route.params;
+    if (action === 'add') {
+      this.props.navigation.navigate('ContactDetailsScreen', {
+        action: 'add',
+      });
+    }
+    if (contactAdded === true) {
+      this.props.navigation.setParams({ contactAdded: false });
+      showMessage({
+        message: i18n.t('contact_s.contact_added') + '.',
+        type: 'success',
+        duration: 500,
+      });
+    }
+    return (
+      <View style={styles.container}>
+        <View
+          style={{
+            marginTop: 20,
+            flexDirection: 'row',
+            justifyContent: 'space-evenly',
+            alignItems: 'center',
+          }}>
+          <Button
+            color={this.props.mainColor}
+            title={i18n.t('global.add')}
+            onPress={() =>
+              this.props.navigation.navigate('ContactDetailsScreen', {
+                action: 'add',
+              })
+            }
+          />
+          <Button
+            color={this.props.mainColor}
+            title={i18n.t('contact_s.send_flyer')}
+            onPress={() => this.setState({ showSendBrochure: true })}
+          />
+          <View style={{ flexDirection: 'row' }}>
+            <TextInput
+              placeholder={i18n.t('global.search')}
+              style={styles.inputSearch}
+              value={this.state.searchTxt}
+              onChangeText={text => this.handleSearchTxt(text)}
+            />
+            <TouchableOpacity
+              style={{
+                ...styles.btnSearch,
+                backgroundColor: this.props.mainColor,
+              }}
+              onPress={() => this.handleSearchBtn()}>
+              {this.state.searchTxt.length > 0 ? (
+                <FontAwesome5 name={'times'} size={20} color={'white'} />
+              ) : (
+                <FontAwesome5 name={'search'} size={20} color={'white'} />
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={{ flex: 1, marginTop: 20 }}>
+          <FlatList
+            data={this.state.contacts}
+            renderItem={({ item }) => this.Item(item)}
+            ListHeaderComponent={this.HeaderItem.bind(this)}
+            keyExtractor={item => item.id.toString()}
+          />
+        </View>
+        <Overlay
+          isVisible={this.state.showTransferContact}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text style={{ marginBottom: 10 }}>
+              {i18n.t('contact_s.select_contact')} :
+            </Text>
+            <Picker
+              style={{
+                width: 300,
+                marginBottom: 15,
+                paddingLeft: 10,
+              }}
+              selectedValue={this.state.selectedTransferUser}
+              onValueChange={(itemValue, itemIndex) => {
+                this.setState({ selectedTransferUser: itemIndex });
+              }}>
+              {this.props.users
+                .filter(user => user.id !== this.props.currentUser.id)
+                .map((item, index) => {
+                  return (
+                    <Picker.Item
+                      label={item.email}
+                      value={index}
+                      key={item.id.toString()}
+                    />
+                  );
+                })}
+            </Picker>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                color={this.props.mainColor}
+                title={i18n.t('global.cancel')}
+                onPress={() => this.setState({ showTransferContact: false })}
+              />
+              <Button
+                color={this.props.mainColor}
+                title={i18n.t('contact_s.transfer')}
+                onPress={() => this.transferContact()}
+              />
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showSendBrochure}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={600}
+          height={500}>
+          <View style={{ flex: 1 }}>
+            <View style={{ flex: 2, flexDirection: 'row' }}>
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: 'center',
+                  justifyContent: 'flex-start',
+                }}>
+                <TextInput
+                  style={styles.txtSendBrochure}
+                  placeholder={i18n.t('global.email')}
+                  autoCompleteType="email"
+                  autoCapitalize="none"
+                  keyboardType={'email-address'}
+                  value={this.state.tmpSendBrochureEmail}
+                  onChangeText={text =>
+                    this.setState({ tmpSendBrochureEmail: text })
+                  }
+                />
+                <Picker
+                  style={{
+                    width: 300,
+                    marginBottom: 15,
+                    paddingLeft: 10,
+                  }}
+                  selectedValue={this.state.selectedSendBrochureEmail}
+                  onValueChange={(itemValue, itemIndex) => {
+                    if (itemValue !== '-1') {
+                      this.setState({
+                        tmpSendBrochureEmail:
+                          this.state.sortedEmails[itemIndex - 1].email,
+                      });
+                    }
+                  }}>
+                  <Picker.Item
+                    label={i18n.t('contact_s.contact_list') + ' :'}
+                    value="-1"
+                  />
+                  {this.state.sortedEmails.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item.email}
+                        value={index}
+                        key={item.id.toString()}
+                      />
+                    );
+                  })}
+                </Picker>
+                <TextInput
+                  style={styles.txtSendBrochure}
+                  placeholder={i18n.t('global.subject')}
+                  value={this.state.tmpSendBrochureSubject}
+                  onChangeText={text =>
+                    this.setState({ tmpSendBrochureSubject: text })
+                  }
+                />
+                <TextInput
+                  style={styles.textAreaSendBrochure}
+                  placeholder={i18n.t('global.message')}
+                  value={this.state.tmpSendBrochureMessage}
+                  multiline={true}
+                  underlineColorAndroid="transparent"
+                  onChangeText={text =>
+                    this.setState({ tmpSendBrochureMessage: text })
+                  }
+                />
+                <Picker
+                  style={{
+                    width: 300,
+                    marginBottom: 15,
+                    paddingLeft: 10,
+                  }}
+                  selectedValue={this.state.selectedDocument}
+                  onValueChange={(itemValue, itemIndex) => {
+                    if (
+                      itemValue !== '-1' &&
+                      this.state.sendDocumentList.length < 8
+                    ) {
+                      let tmp = this.state.sendDocumentList;
+                      const toPush = this.state.sortedDocuments[itemIndex - 1];
+                      const test = this.state.sendDocumentList.filter(
+                        item => item.id === toPush.id,
+                      );
+                      if (test.length === 0) {
+                        tmp.push(toPush);
+                        this.setState({
+                          sendDocumentList: tmp,
+                        });
+                      }
+                    }
+                  }}>
+                  <Picker.Item
+                    label={i18n.t('contact_s.documents_list') + ' :'}
+                    value="-1"
+                  />
+                  {this.state.sortedDocuments.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={
+                          item.title + ' (' + item.type.toUpperCase() + ')'
+                        }
+                        value={index}
+                        key={item.id.toString()}
+                      />
+                    );
+                  })}
+                </Picker>
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  borderWidth: 1,
+                  borderColor: 'lightgrey',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 600,
+                }}>
+                {this.state.sendDocumentList.map((item, index) => {
+                  return (
+                    <TouchableOpacity
+                      key={index}
+                      onPress={() => {
+                        let tmp = this.state.sendDocumentList;
+                        tmp.splice(this.props.documents[index], 1);
+                        this.setState({
+                          sendDocumentList: tmp,
+                        });
+                      }}>
+                      <View
+                        style={{
+                          borderWidth: 1,
+                          borderColor: 'lightgrey',
+                          padding: 5,
+                          margin: 5,
+                          borderRadius: 5,
+                        }}>
+                        <Text>
+                          {item.title} ({item.type.toUpperCase()}){' '}
+                          <FontAwesome5 name="minus" size={15} />
+                        </Text>
+                      </View>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 600,
+                marginTop: 15,
+              }}>
+              <Button
+                color={this.props.mainColor}
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({
+                    showSendBrochure: false,
+                    tmpSendBrochureEmail: '',
+                    tmpSendBrochureSubject: '',
+                    tmpSendBrochureMessage: '',
+                    selectedSendBrochureEmail: -1,
+                    selectedDocument: -1,
+                    sendDocumentList: [],
+                  })
+                }
+              />
+              <Button
+                title={i18n.t('global.send')}
+                onPress={() => this.sendBrochure()}
+                color={this.props.mainColor}
+              />
+            </View>
+          </View>
+        </Overlay>
+      </View>
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ContactScreen);
diff --git a/ComApp/src/App/Views/DirectoriesScreen.js b/ComApp/src/App/Views/DirectoriesScreen.js
index 7b3e600..777cfd5 100644
--- a/ComApp/src/App/Views/DirectoriesScreen.js
+++ b/ComApp/src/App/Views/DirectoriesScreen.js
@@ -1,14 +1,7 @@
 import React from 'react';
-import {
-    View,
-    ScrollView,
-    TouchableOpacity,
-    Text,
-    Image
-} from 'react-native';
+import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native';
 // Redux
-import { connect } from 'react-redux';
-import { initDocuments } from '../Store/Actions/documents';
+import {connect} from 'react-redux';
 // Treeview
 import TreeView from 'react-native-animated-tree-view';
 // Icon
@@ -19,72 +12,72 @@ import arrowDown from '../../Resources/assets/img/arrow_down.png';
 import styles from '../../Resources/Styles/DirectoriesStyle';
 
 function mapStateToProps(state) {
-    return {
-        documents: state.documents,
-        directories: state.directories,
-        locale: state.locale.locale,
-        mainColor: state.app.mainColor
-    };
+  return {
+    documents: state.documents,
+    directories: state.directories,
+    locale: state.locale.locale,
+    mainColor: state.app.mainColor,
+  };
 }
 
 class DirectoriesScreen extends React.Component {
-    state = {
-        documents: [],
-    };
+  state = {
+    documents: [],
+  };
 
-    render() {
-        const { folder } = this.props.route.params;
-        let documentList = this.state.documents.map(document => {
-            return (
-                <TouchableOpacity
-                    key={document.id.toString()}
-                    style={{ ...styles.file, backgroundColor: this.props.mainColor }}
-                    onPress={() => this.openDocument(document)}>
-                    {document.type === 'pdf' ? (
-                        <FontAwesome5 name="file-pdf" color={'white'} size={60} />
-                    ) : (
-                        <FontAwesome5 name="file-video" color={'white'} size={60} />
-                    )}
-                    <Text style={styles.fileTxt}>{document.title}</Text>
-                </TouchableOpacity>
-            );
-        });
+  render() {
+    const {folder} = this.props.route.params;
+    let documentList = this.state.documents.map(document => {
+      return (
+        <TouchableOpacity
+          key={document.id.toString()}
+          style={{...styles.file, backgroundColor: this.props.mainColor}}
+          onPress={() => this.openDocument(document)}>
+          {document.type === 'pdf' ? (
+            <FontAwesome5 name="file-pdf" color={'white'} size={60} />
+          ) : (
+            <FontAwesome5 name="file-video" color={'white'} size={60} />
+          )}
+          <Text style={styles.fileTxt}>{document.title}</Text>
+        </TouchableOpacity>
+      );
+    });
 
-        return (
-            <View style={styles.container}>
-                <View
-                    style={{ width: 290, borderRightWidth: 1, borderColor: 'lightgrey' }}>
-                    <TreeView
-                        data={folder}
-                        leftImage={{}}
-                        rightImage={{ uri: Image.resolveAssetSource(arrowDown).uri }}
-                        containerStyle={styles.treeviewContainer}
-                        onClick={folder => {
-                            this.setState({
-                                documents: this.props.documents.filter(
-                                    tmp => tmp.directory === folder.id,
-                                )
-                            });
-                        }}
-                    />
-                </View>
-                <ScrollView style={styles.scrollview}>
-                    <View style={styles.filesContainer}>{documentList}</View>
-                </ScrollView>
-            </View>
-        );
-    }
-
-    openDocument(document) {
-        this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
-        if (document.type === 'pdf') {
-            this.props.navigation.navigate('PDFScreen', { uuid: document.uuid });
-        } else if (document.type === 'mp4') {
-            this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
-        } else {
-            console.log('Inconnu');
-        }
+    return (
+      <View style={styles.container}>
+        <View
+          style={{width: 290, borderRightWidth: 1, borderColor: 'lightgrey'}}>
+          <TreeView
+            data={folder}
+            leftImage={{}}
+            rightImage={{uri: Image.resolveAssetSource(arrowDown).uri}}
+            containerStyle={styles.treeviewContainer}
+            onClick={folder => {
+              this.setState({
+                documents: this.props.documents.filter(
+                  tmp => tmp.directory === folder.id,
+                ),
+              });
+            }}
+          />
+        </View>
+        <ScrollView style={styles.scrollview}>
+          <View style={styles.filesContainer}>{documentList}</View>
+        </ScrollView>
+      </View>
+    );
+  }
+
+  openDocument(document) {
+    this.props.dispatch({type: 'SET_CURRENT_OPENED_DOC', data: document});
+    if (document.type === 'pdf') {
+      this.props.navigation.navigate('PDFScreen', {uuid: document.uuid});
+    } else if (document.type === 'mp4') {
+      this.props.navigation.navigate('VideoScreen', {uuid: document.uuid});
+    } else {
+      console.log('Inconnu');
     }
+  }
 }
 
 export default connect(mapStateToProps)(DirectoriesScreen);
diff --git a/ComApp/src/App/Views/HomeScreen.js b/ComApp/src/App/Views/HomeScreen.js
index af2fa8c..ebdd847 100644
--- a/ComApp/src/App/Views/HomeScreen.js
+++ b/ComApp/src/App/Views/HomeScreen.js
@@ -1,18 +1,24 @@
 import React from 'react';
-import { View, ImageBackground, TouchableOpacity, Text, Image } from 'react-native';
-// Common Styles 
+import {
+  Image,
+  ImageBackground,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+// Common Styles
 import commonStyles from '../../Resources/CommonStyles';
 // Redux
-import { connect } from 'react-redux';
-import { initDocuments } from '../Store/Actions/documents';
-import { initContact } from '../Store/Actions/contacts';
-import { initDirectories } from '../Store/Actions/directories';
-// SplashScreen 
+import {connect} from 'react-redux';
+import {initContact} from '../Store/Actions/contacts';
+import {initDirectories} from '../Store/Actions/directories';
+import {initDocuments} from '../Store/Actions/documents';
+// SplashScreen
 import * as SplashScreen from 'expo-splash-screen';
 // Style
 import styles from '../../Resources/Styles/HomeStyle';
 // Translations
-import i18n from "../../I18n";
+import i18n from '../../I18n';
 // FileSytem
 import * as FileSystem from 'expo-file-system';
 // NetInfo
@@ -21,105 +27,131 @@ import NetInfo from '@react-native-community/netinfo';
 import SyncController from '../Controllers/SyncController';
 
 function mapStateToProps(state) {
-    return {
-        btns: state.app.HomeBtns,
-        directories: state.directories,
-        locale: state.locale.locale,
-        currentUser: state.app.currentUser
-    };
+  return {
+    btns: state.app.HomeBtns,
+    directories: state.directories,
+    locale: state.locale.locale,
+    currentUser: state.app.currentUser,
+  };
 }
 
 const mapDispatchToProps = dispatch => {
-    return {
-        initBtns: () => dispatch({ type: 'INIT_HOME_BTNS' }),
-        initDocuments: (lang, directories) => dispatch(initDocuments(lang, directories)),
-        initContact: currentUser => dispatch(initContact(currentUser)),
-        initDirectories: (lang, user) => dispatch(initDirectories(lang, user)),
-
-    };
+  return {
+    initBtns: () => dispatch({type: 'INIT_HOME_BTNS'}),
+    initDocuments: (lang, directories) =>
+      dispatch(initDocuments(lang, directories)),
+    initContact: currentUser => dispatch(initContact(currentUser)),
+    initDirectories: (lang, user) => dispatch(initDirectories(lang, user)),
+  };
 };
 
 class HomeScreen extends React.Component {
+  state = {
+    lastSyncCall: '1970-01-01',
+  };
 
-    state = {
-        lastSyncCall: '1970-01-01',
-    };
+  componentDidMount() {
+    if (!SyncController.isInstalled()) {
+      return this.openSync();
+    }
+    this.props.initBtns();
+    this.props.initContact(this.props.currentUser);
+    this.props.initDirectories(this.props.locale, this.props.currentUser);
+    this.props.initDocuments(this.props.locale, this.props.directories.global);
 
-    componentDidMount() {
-        if (!SyncController.isInstalled()) {
-            return this.openSync();
+    SplashScreen.hideAsync();
+  }
+
+  unsubscribe() {
+    NetInfo.addEventListener(state => {
+      if (state.isConnected === true) {
+        let seconds =
+          Math.abs(new Date(this.state.lastSyncCall) - Date.now()) / 1000;
+        if (seconds > 30) {
+          this.setState({lastSyncCall: Date.now()});
+          SyncController.needSync(this.openSync.bind(this));
         }
-        this.props.initBtns();
-        this.props.initContact(this.props.currentUser);
-        this.props.initDirectories(this.props.locale, this.props.currentUser);
-        this.props.initDocuments(this.props.locale, this.props.directories.global);
+      }
+    });
+  }
 
-        SplashScreen.hideAsync();
-    }
+  openSync() {
+    this.props.navigation.navigate('SyncScreen', {forceSync: true});
+  }
 
-    unsubscribe() {
-        NetInfo.addEventListener(state => {
-            if (state.isConnected === true) {
-                let seconds =
-                    Math.abs(new Date(this.state.lastSyncCall) - Date.now()) / 1000;
-                if (seconds > 30) {
-                    this.setState({ lastSyncCall: Date.now() });
-                    SyncController.needSync(this.openSync.bind(this));
-                }
-            }
-        });
-    }
+  render() {
+    i18n.locale = this.props.locale;
+    return (
+      <ImageBackground
+        source={{uri: FileSystem.documentDirectory + 'BackgroundImage.png'}}
+        style={commonStyles.background}
+        resizeMode="cover">
+        <View style={styles.container}>
+          {this.renderBtns()}
+          <TouchableOpacity
+            key={'OnlyVideos'}
+            onPress={() => {
+              this.props.initDocuments(
+                this.props.locale,
+                this.props.directories.global,
+              );
+              this.props.navigation.navigate('OnlyVideosScreen');
+            }}
+            style={styles.button}>
+            <Image
+              source={{
+                uri: FileSystem.documentDirectory + 'HomeButtonImage.png',
+              }}
+              style={styles.btnImg}
+            />
+            <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            key={'Contacts'}
+            onPress={() => this.props.navigation.navigate('ContactScreen')}
+            style={styles.button}>
+            <Image
+              source={{
+                uri: FileSystem.documentDirectory + 'HomeButtonImage.png',
+              }}
+              style={styles.btnImg}
+            />
+            <Text style={styles.btnTxt}>{i18n.t('global.contacts')}</Text>
+          </TouchableOpacity>
+        </View>
+      </ImageBackground>
+    );
+  }
 
-    openSync() {
-        this.props.navigation.navigate('SyncScreen', { forceSync: true });
-    }
+  renderBtns() {
+    let locale = this.props.locale;
+    let objBtns = this.props.btns;
+    let array = Object.keys(objBtns).map(function (key) {
+      return objBtns[key];
+    });
+    return array.map((item, index) => {
+      let names = JSON.parse(item.name);
+      let name = locale in names ? names[locale] : names.fr;
+      return (
+        <TouchableOpacity
+          key={index}
+          onPress={() => this.openFolder(item.id)}
+          style={styles.button}>
+          <Image
+            source={{uri: FileSystem.documentDirectory + 'HomeButtonImage.png'}}
+            style={styles.btnImg}
+          />
+          <Text style={styles.btnTxt}>{name}</Text>
+        </TouchableOpacity>
+      );
+    });
+  }
 
-    render() {
-        i18n.locale = this.props.locale;
-        return (
-            <ImageBackground source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }} style={commonStyles.background} resizeMode='cover'>
-                <View style={styles.container}>
-                    {this.renderBtns()}
-                    <TouchableOpacity
-                        key={'OnlyVideos'}
-                        onPress={() => {
-                            this.props.initDocuments(this.props.locale, this.props.directories.global);
-                            this.props.navigation.navigate('OnlyVideosScreen');
-                        }}
-                        style={styles.button}>
-                        <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
-                        <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity key={'Contacts'} onPress={() => this.props.navigation.navigate('ContactScreen')} style={styles.button}>
-                        <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
-                        <Text style={styles.btnTxt}>{i18n.t('global.contacts')}</Text>
-                    </TouchableOpacity>
-                </View>
-            </ImageBackground>
-        );
-    }
-
-    renderBtns() {
-        let locale = this.props.locale;
-        let objBtns = this.props.btns;
-        let array = Object.keys(objBtns).map(function (key) { return objBtns[key]; });
-        return array.map((item, index) => {
-            let names = JSON.parse(item.name);
-            let name = (locale in names) ? names[locale] : names.fr;
-            return (
-                <TouchableOpacity key={index} onPress={() => this.openFolder(item.id)} style={styles.button}>
-                    <Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
-                    <Text style={styles.btnTxt}>{name}</Text>
-                </TouchableOpacity>
-            )
-        });
-    }
-
-    openFolder(id) {
-        this.props.initDocuments(this.props.locale, this.props.directories.global);
-        const folder = this.props.directories.treeview.filter(tmp => tmp.id === id);
-        this.props.navigation.navigate('DirectoriesScreen', { folder: folder });
-    }
+  openFolder(id) {
+    this.props.initDocuments(this.props.locale, this.props.directories.global);
+    const folder = this.props.directories.treeview.filter(tmp => tmp.id === id);
+    this.props.navigation.navigate('DirectoriesScreen', {folder: folder});
+  }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);
diff --git a/ComApp/src/App/Views/InstallScreen.js b/ComApp/src/App/Views/InstallScreen.js
index 127f51d..0fcecf7 100644
--- a/ComApp/src/App/Views/InstallScreen.js
+++ b/ComApp/src/App/Views/InstallScreen.js
@@ -1,191 +1,220 @@
 import React from 'react';
-import { ImageBackground, View, Image, Text, TextInput, Button, Alert } from 'react-native';
+import {
+  Alert,
+  Button,
+  Image,
+  ImageBackground,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
 // Redux
 import { connect } from 'react-redux';
 // Sentry
-import * as Sentry from "@sentry/react-native";
-// SplashScreen 
+import * as Sentry from '@sentry/react-native';
+// SplashScreen
 import * as SplashScreen from 'expo-splash-screen';
 // Helpers
 import Helpers from '../Lib/Helpers';
 // Lodash
 import _ from 'lodash';
-// Common Styles 
+// Common Styles
 import commonStyles from '../../Resources/CommonStyles';
-// Style 
+// Style
 import styles from '../../Resources/Styles/InstallStyle';
 // Translations
-import i18n from "../../I18n";
+import i18n from '../../I18n';
 // Controller
 import InstallController from '../Controllers/InstallController';
 import SyncController from '../Controllers/SyncController';
-// Database 
-import { User, Setting } from '../../Database';
+// Database
+import { Setting, User } from '../../Database';
 // FileSytem
 import * as FileSystem from 'expo-file-system';
 
 function mapStateToProps(state) {
-    return {
-        isSetup: state.app.isSetup,
-        locale: state.locale.locale,
-    };
+  return {
+    isSetup: state.app.isSetup,
+    locale: state.locale.locale,
+  };
 }
 
 const mapDispatchToProps = dispatch => {
-    return {
-        setIsSetup: () => dispatch({ type: 'SET_ISSETUP' }),
-        init: () => dispatch({ type: 'INIT' })
-    };
+  return {
+    setIsSetup: () => dispatch({ type: 'SET_ISSETUP' }),
+    init: () => dispatch({ type: 'INIT' }),
+  };
 };
 class InstallScreen extends React.Component {
-    state = {
-        processing: false,
-        txtStep: '',
-        url: "",
-    }
+  state = {
+    processing: false,
+    txtStep: '',
+    url: '',
+  };
 
-    componentDidMount() {
-        SplashScreen.hideAsync();
-    }
+  componentDidMount() {
+    SplashScreen.hideAsync();
+  }
 
-    render() {
-        i18n.locale = this.props.locale;
-        return (
-            <ImageBackground source={require('../../Resources/assets/img/background_ldc.png')} style={commonStyles.background}>
-                <View style={styles.container}>
-                    <Image source={require('../../Resources/assets/img/logo-square-ldc.png')} style={styles.logo} />
-                    <View style={styles.actions}>
-                        <TextInput
-                            keyboardType='url'
-                            autoCapitalize='none'
-                            style={commonStyles.textInput}
-                            placeholder={i18n.t("install.enter_url")}
-                            onChangeText={(newText) => this.setState({ url: newText })}
-                            value={this.state.url}
-                        />
-                        <Button
-                            disabled={this.state.processing}
-                            color={'#D4021D'}
-                            title={ i18n.t('install.install')}
-                            onPress={() => {
-                                if (this.state.url.length === 0) {
-                                    Alert.alert(i18n.t("alert.error"), i18n.t("install.enter_url"));
-                                } else {
-                                    if (Helpers.isUrlValid(this.state.url)) {
-                                        this.install();
-                                    } else {
-                                        Alert.alert(i18n.t("alert.error"), i18n.t("install.url_invalid"));
-                                    }
-                                }
-                            }}
-                        />
-                    </View>
-                    <View style={styles.actions}>
-                        <Text>
-                            {this.state.txtStep}
-                        </Text>
-                    </View>
-            </View>
-        </ImageBackground>
-          );
-    }
-
-    async install() {
-        let url = this.state.url.toLowerCase();
-        Setting.upsert({ key: 'bo_url', value: url });
-        const isConnected = await SyncController.checkConnection().then(state => {
-            //console.log(state.isConnected)
-            return state.isConnected
-        }).catch(error => {
-            //console.log(error);
-            return false;
-        });
-        if (!isConnected) {
-            Alert.alert(
-                i18n.t('global.warning'),
-                i18n.t('error.must_be_connected_internet_sync')
-            );
-            return;
-        }
-        this.setState({ processing: true, txtStep: i18n.t("install.get_app_setting") });
-        const toDL = await InstallController.getConfig(url).then(response => {
-            let toDL = [];
-            if (response.data) {
-                if (response.data.status === "OK") {
-                    _.forEach(response.data.datas, function (value, key) {
-                        switch (key) {
-                            case "MainColor":
-                            case "AppStoreUUID":
-                            case "FormSelect1":
-                            case "FormSelect2":
-                            case "FormCheck":
-                                Setting.upsert({ key: key, value: value });
-                                break;
-                            case "SquaredLogo":
-                            case "RectangleLogo":
-                            case "BackgroundImage":
-                            case "HomeButtonImage":
-                                toDL.push({
-                                    source: url + "/" + value,
-                                    dest: FileSystem.documentDirectory + key + '.png'
-                                });
-                                break;
-                        }
-                    });
-                    return toDL;
+  render() {
+    i18n.locale = this.props.locale;
+    return (
+      <ImageBackground
+        source={require('../../Resources/assets/img/background_ldc.png')}
+        style={commonStyles.background}>
+        <View style={styles.container}>
+          <Image
+            source={require('../../Resources/assets/img/logo-square-ldc.png')}
+            style={styles.logo}
+          />
+          <View style={styles.actions}>
+            <TextInput
+              keyboardType="url"
+              autoCapitalize="none"
+              style={commonStyles.textInput}
+              placeholder={i18n.t('install.enter_url')}
+              onChangeText={newText => this.setState({ url: newText })}
+              value={this.state.url}
+            />
+            <Button
+              disabled={this.state.processing}
+              color={'#D4021D'}
+              title={i18n.t('install.install')}
+              onPress={() => {
+                if (this.state.url.length === 0) {
+                  Alert.alert(
+                    i18n.t('alert.error'),
+                    i18n.t('install.enter_url'),
+                  );
                 } else {
-                    Alert.alert(i18n.t("alert.error"), i18n.t("error.error_has_occurred"));
-                    return false;
+                  if (Helpers.isUrlValid(this.state.url)) {
+                    this.install();
+                  } else {
+                    Alert.alert(
+                      i18n.t('alert.error'),
+                      i18n.t('install.url_invalid'),
+                    );
+                  }
                 }
-            }
-        }).catch(function (error) {
-            Sentry.captureException(error);
-            Alert.alert(i18n.t("alert.error"), i18n.t("error.error_has_occurred"));
-            return false;
-        });
-        if (!toDL) {
-            this.setState({ processing: false, txtStep: "" });
-            return false;
-        }
-        for await (const file of toDL) {
-            await FileSystem.downloadAsync(
-                file.source,
-                file.dest
-            )
-                .then(({ uri }) => {
-                    console.log('Finished downloading to ', uri);
-                })
-                .catch(error => {
-                    Alert.alert(i18n.t("alert.error"), i18n.t("install.resource_dl_error") + file.dest);
-                    console.error(error);
-                    return false;
-                });
-        }
+              }}
+            />
+          </View>
+          <View style={styles.actions}>
+            <Text>{this.state.txtStep}</Text>
+          </View>
+        </View>
+      </ImageBackground>
+    );
+  }
 
-        this.setState({ txtStep: i18n.t("install.get_content_setting") });
-        if (InstallController.getAppConfig(url)) {
-            // getUsers
-            this.setState({ txtStep: i18n.t('sync_s.updating_users') + '...' });
-            const resUsers = await SyncController.getUsers().then(res => {
-                User.clear();
-                return res.data;
-            }).catch(error => {
-                console.log(error);
-                Alert.alert(
-                    i18n.t('error.error'),
-                    i18n.t('error.error_has_occurred')
-                );
-                return
-            });
-            resUsers.forEach(user => {
-                User.add(user);
-            });
-            this.props.init();
-            this.props.setIsSetup();
-            this.props.navigation.navigate('LoginScreen');
-        }
-        this.setState({ processing: false, txtStep: "" });
+  async install() {
+    let url = this.state.url.toLowerCase();
+    Setting.upsert({ key: 'bo_url', value: url });
+    const isConnected = await SyncController.checkConnection()
+      .then(state => {
+        //console.log(state.isConnected)
+        return state.isConnected;
+      })
+      .catch(error => {
+        //console.log(error);
+        return false;
+      });
+    if (!isConnected) {
+      Alert.alert(
+        i18n.t('global.warning'),
+        i18n.t('error.must_be_connected_internet_sync'),
+      );
+      return;
     }
+    this.setState({
+      processing: true,
+      txtStep: i18n.t('install.get_app_setting'),
+    });
+    const toDL = await InstallController.getConfig(url)
+      .then(response => {
+        let toDL = [];
+        if (response.data) {
+          if (response.data.status === 'OK') {
+            _.forEach(response.data.datas, function (value, key) {
+              switch (key) {
+                case 'MainColor':
+                case 'AppStoreUUID':
+                case 'FormSelect1':
+                case 'FormSelect2':
+                case 'FormCheck':
+                  Setting.upsert({ key: key, value: value });
+                  break;
+                case 'SquaredLogo':
+                case 'RectangleLogo':
+                case 'BackgroundImage':
+                case 'HomeButtonImage':
+                  toDL.push({
+                    source: url + '/' + value,
+                    dest: FileSystem.documentDirectory + key + '.png',
+                  });
+                  break;
+              }
+            });
+            return toDL;
+          } else {
+            Alert.alert(
+              i18n.t('alert.error'),
+              i18n.t('error.error_has_occurred'),
+            );
+            return false;
+          }
+        }
+      })
+      .catch(function (error) {
+        Sentry.captureException(error);
+        Alert.alert(i18n.t('alert.error'), i18n.t('error.error_has_occurred'));
+        return false;
+      });
+    if (!toDL) {
+      this.setState({ processing: false, txtStep: '' });
+      return false;
+    }
+    for await (const file of toDL) {
+      await FileSystem.downloadAsync(file.source, file.dest)
+        .then(({ uri }) => {
+          console.log('Finished downloading to ', uri);
+        })
+        .catch(error => {
+          Alert.alert(
+            i18n.t('alert.error'),
+            i18n.t('install.resource_dl_error') + file.dest,
+          );
+          console.error(error);
+          return false;
+        });
+    }
+
+    this.setState({ txtStep: i18n.t('install.get_content_setting') });
+    if (InstallController.getAppConfig(url)) {
+      // getUsers
+      this.setState({ txtStep: i18n.t('sync_s.updating_users') + '...' });
+      const resUsers = await SyncController.getUsers()
+        .then(res => {
+          User.clear();
+          return res.data;
+        })
+        .catch(error => {
+          console.log(error);
+          Alert.alert(
+            i18n.t('error.error'),
+            i18n.t('error.error_has_occurred'),
+          );
+          return;
+        });
+      resUsers.forEach(user => {
+        User.add(user);
+      });
+      this.props.init();
+      this.props.setIsSetup();
+      this.props.navigation.navigate('LoginScreen');
+    }
+    this.setState({ processing: false, txtStep: '' });
+  }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(InstallScreen);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(InstallScreen);
diff --git a/ComApp/src/App/Views/LoginScreen.js b/ComApp/src/App/Views/LoginScreen.js
index fe2e430..f44d302 100644
--- a/ComApp/src/App/Views/LoginScreen.js
+++ b/ComApp/src/App/Views/LoginScreen.js
@@ -1,15 +1,22 @@
 import React from 'react';
-import { View, ImageBackground, TextInput, Button, Image, Alert } from 'react-native';
+import {
+  Alert,
+  Button,
+  Image,
+  ImageBackground,
+  TextInput,
+  View,
+} from 'react-native';
 // Redux
 import { connect } from 'react-redux';
-// SplashScreen 
+// SplashScreen
 import * as SplashScreen from 'expo-splash-screen';
-// Common Styles 
+// Common Styles
 import commonStyles from '../../Resources/CommonStyles';
 // Style
 import styles from '../../Resources/Styles/LoginStyle';
 // Translations
-import i18n from "../../I18n";
+import i18n from '../../I18n';
 // FileSytem
 import * as FileSystem from 'expo-file-system';
 // Controller
@@ -19,133 +26,157 @@ import { Setting } from '../../Database';
 import SyncController from '../Controllers/SyncController';
 
 function mapStateToProps(state) {
-    return {
-        app: state.app,
-        users: state.users.users,
-        locale: state.locale.locale,
-        mainColor: state.app.mainColor
-    };
+  return {
+    app: state.app,
+    users: state.users.users,
+    locale: state.locale.locale,
+    mainColor: state.app.mainColor,
+  };
 }
 
 const mapDispatchToProps = dispatch => {
-    return {
-        setCurrentUser: () => dispatch({ type: 'SET_CURRENT_USER' }),
-    };
+  return {
+    setCurrentUser: () => dispatch({ type: 'SET_CURRENT_USER' }),
+  };
 };
 
 class LoginScreen extends React.Component {
-    state = {
-        login: '',
-        password: '',
-    };
+  state = {
+    login: '',
+    password: '',
+  };
 
-    componentDidMount() {
-        if (SyncController.isLogged()) {
-            this.props.setCurrentUser(false);
-        }
-        SplashScreen.hideAsync();
+  componentDidMount() {
+    if (SyncController.isLogged()) {
+      this.props.setCurrentUser(false);
     }
+    SplashScreen.hideAsync();
+  }
 
-    render() {
-        return (
-            <ImageBackground source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }} style={commonStyles.background}>
-                <View style={styles.container}>
-                    <Image source={{ uri: FileSystem.documentDirectory + 'SquaredLogo.png' }} style={styles.logo} />
-                    <View>
-                        <TextInput
-                            style={styles.text}
-                            placeholder={i18n.t('login_s.username')}
-                            value={this.state.login}
-                            onChangeText={text => this.setState({ login: text })}
-                            autoCapitalize={'none'}
-                            autoCorrect={false}
-                            keyboardType={'email-address'}
-                        />
-                        <TextInput
-                            style={styles.text}
-                            placeholder={i18n.t('login_s.password')}
-                            value={this.state.password}
-                            onChangeText={text => this.setState({ password: text })}
-                            secureTextEntry={true}
-                            autoCapitalize={'none'}
-                            autoCorrect={false}
-                        />
-                        <Button
-                            title={i18n.t('global.login')}
-                            onPress={() => this.login(this.state.login.toLowerCase(), this.state.password)}
-                            color={this.props.mainColor}
-                        />
-                    </View>
-                </View>
-            </ImageBackground >
+  render() {
+    return (
+      <ImageBackground
+        source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }}
+        style={commonStyles.background}>
+        <View style={styles.container}>
+          <Image
+            source={{ uri: FileSystem.documentDirectory + 'SquaredLogo.png' }}
+            style={styles.logo}
+          />
+          <View>
+            <TextInput
+              style={styles.text}
+              placeholder={i18n.t('login_s.username')}
+              value={this.state.login}
+              onChangeText={text => this.setState({ login: text })}
+              autoCapitalize={'none'}
+              autoCorrect={false}
+              keyboardType={'email-address'}
+            />
+            <TextInput
+              style={styles.text}
+              placeholder={i18n.t('login_s.password')}
+              value={this.state.password}
+              onChangeText={text => this.setState({ password: text })}
+              secureTextEntry={true}
+              autoCapitalize={'none'}
+              autoCorrect={false}
+            />
+            <Button
+              title={i18n.t('global.login')}
+              onPress={() =>
+                this.login(this.state.login.toLowerCase(), this.state.password)
+              }
+              color={this.props.mainColor}
+            />
+          </View>
+        </View>
+      </ImageBackground>
+    );
+  }
+
+  async login(login, password) {
+    if (login === '' || password === '') {
+      Alert.alert(
+        i18n.t('global.warning'),
+        i18n.t('error.must_fill_login_fields'),
+      );
+      return;
+    }
+    var usersSize = Object.keys(this.props.users).length;
+    if (usersSize === 0) {
+      Alert.alert(i18n.t('global.warning'), i18n.t('login_s.missing_users'));
+      return;
+    }
+    let user = this.props.users.filter(tmp => tmp.email === login);
+    if (user.length === 0) {
+      Alert.alert(i18n.t('error.error'), i18n.t('error.incorrect_credentials'));
+      return;
+    }
+    user = user[0];
+    const verified = LoginController.verify(user, password).then(
+      verified => verified,
+    );
+    if (!verified) {
+      Alert.alert(i18n.t('error.error'), i18n.t('error.incorrect_credentials'));
+      return;
+    }
+    const isConnected = await SyncController.checkConnection()
+      .then(state => {
+        //console.log(state.isConnected)
+        return state.isConnected;
+      })
+      .catch(error => {
+        //console.log(error);
+        return false;
+      });
+    const lastUser = Setting.get('lastUser');
+    // Si on est sur une installation
+    if (lastUser === false || lastUser == undefined) {
+      // Si la tablette est connectée à internet pour forcer la synchro
+      if (!isConnected) {
+        Alert.alert(
+          i18n.t('error.error'),
+          i18n.t('error.tablet_not_connected_internet'),
         );
+        return;
+      }
+      return this.loginAction(user);
     }
+    // Si on a deja une install
+    if (lastUser !== false && lastUser !== undefined) {
+      // Si on a une précédente connexion
+      if (lastUser.value === user.id.toString()) {
+        this.loginAction(user);
+      } else {
+        // Si le user precedent est different du user courant
+        // Si user !== last user && last user not synced
+        if (!SyncController.isSynced()) {
+          Alert.alert(
+            i18n.t('error.error'),
+            i18n.t('error.tablet_not_synced_last_user'),
+          );
+          return;
+        }
+        // Si la tablette est connectée à internet pour forcer la synchro
+        if (!isConnected) {
+          Alert.alert(
+            i18n.t('error.error'),
+            i18n.t('error.tablet_not_connected_internet'),
+          );
+          return;
+        }
+        SyncController.setInstalled(true);
+        this.loginAction(user, true);
+      }
+    }
+  }
 
-    async login(login, password) {
-        if (login === '' || password === '') {
-            Alert.alert(i18n.t("global.warning"), i18n.t('error.must_fill_login_fields'));
-            return;
-        }
-        var usersSize = Object.keys(this.props.users).length;
-        if (usersSize === 0) {
-            Alert.alert(i18n.t("global.warning"), i18n.t('login_s.missing_users'));
-            return;
-        }
-        let user = this.props.users.filter(tmp => tmp.email === login);
-        if (user.length === 0) {
-            Alert.alert(i18n.t('error.error'), i18n.t('error.incorrect_credentials'));
-            return;
-        }
-        user = user[0];
-        const verified = LoginController.verify(user, password).then(verified => verified);
-        if (!verified) {
-            Alert.alert(i18n.t('error.error'), i18n.t('error.incorrect_credentials'));
-            return;
-        }
-        const isConnected = await SyncController.checkConnection().then(state => {
-            //console.log(state.isConnected)
-            return state.isConnected
-        }).catch(error => {
-            //console.log(error);
-            return false;
-        });
-        const lastUser = Setting.get('lastUser');
-        // Si on est sur une installation
-        if (lastUser === false || lastUser == undefined) {
-            // Si la tablette est connectée à internet pour forcer la synchro
-            if (!isConnected) {
-                Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_connected_internet'));
-                return;
-            }
-            return this.loginAction(user);
-        }
-        // Si on a deja une install
-        if (lastUser !== false && lastUser !== undefined) {
-            // Si on a une précédente connexion
-            if (lastUser.value === user.id.toString()) {
-                this.loginAction(user);
-            } else { // Si le user precedent est different du user courant
-                // Si user !== last user && last user not synced
-                if (!SyncController.isSynced()) {
-                    Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_synced_last_user'));
-                    return;
-                }
-                // Si la tablette est connectée à internet pour forcer la synchro
-                if (!isConnected) {
-                    Alert.alert(i18n.t('error.error'), i18n.t('error.tablet_not_connected_internet'));
-                    return;
-                }
-                SyncController.setInstalled(true);
-                this.loginAction(user, true);
-            }
-        }
-    }
-
-    loginAction(user) {
-        this.setState({ login: '', password: '' });
-        LoginController.login(user);
-        this.props.setCurrentUser();
-    }
+  loginAction(user) {
+    this.setState({ login: '', password: '' });
+    LoginController.login(user);
+    this.props.setCurrentUser();
+  }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
diff --git a/ComApp/src/App/Views/MySpaceScreen.js b/ComApp/src/App/Views/MySpaceScreen.js
index 3b7a01c..268cec4 100644
--- a/ComApp/src/App/Views/MySpaceScreen.js
+++ b/ComApp/src/App/Views/MySpaceScreen.js
@@ -1,28 +1,24 @@
-import React from 'react';
-import {
-  View,
-  Text,
-} from 'react-native';
-// Redux
-import { connect } from 'react-redux';
-// Style
-import styles from '../../Resources/Styles/MySpaceStyle';
-
-function mapStateToProps(state) {
-  return {
-    documents: state.app.documents,
-  };
-}
-
-class MySpaceScreen extends React.Component {
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text>Mon Espace</Text>
-      </View>
-    );
-  }
-}
-
-export default connect(mapStateToProps)(MySpaceScreen);
+import React from 'react';
+import { Text, View } from 'react-native';
+// Redux
+import { connect } from 'react-redux';
+// Style
+import styles from '../../Resources/Styles/MySpaceStyle';
+
+function mapStateToProps(state) {
+  return {
+    documents: state.app.documents,
+  };
+}
+
+class MySpaceScreen extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Mon Espace</Text>
+      </View>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(MySpaceScreen);
diff --git a/ComApp/src/App/Views/OnlyVideosScreen.js b/ComApp/src/App/Views/OnlyVideosScreen.js
index fb9c4f6..dcaf3e7 100644
--- a/ComApp/src/App/Views/OnlyVideosScreen.js
+++ b/ComApp/src/App/Views/OnlyVideosScreen.js
@@ -1,61 +1,63 @@
-import React from 'react';
-import {
-  View,
-  ScrollView,
-  TouchableOpacity,
-  Text,
-} from 'react-native';
-// Redux
-import { connect } from 'react-redux';
-// Icons
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-// Style
-import styles from '../../Resources/Styles/OnlyVideosStyle';
-
-function mapStateToProps(state) {
-  return {
-    documents: state.documents,
-    mainColor: state.app.mainColor
-  };
-}
-
-class OnlyVideosScreen extends React.Component {
-  state = {
-    documents: [],
-  };
-
-  componentDidMount() {
-    this.setState({ documents: this.props.documents.filter(tmp => tmp.type === 'mp4') });
-  }
-
-  render() {
-    let documentList = this.state.documents.map(document => {
-      return (
-        <TouchableOpacity
-          key={document.id.toString()}
-          style={{ ...styles.file, backgroundColor: this.props.mainColor }}
-          onPress={() => {
-            this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
-            this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
-          }}>
-          {document.type === 'pdf' ? (
-            <FontAwesome5 name="file-pdf" color={'white'} size={60} />
-          ) : (
-            <FontAwesome5 name="file-video" color={'white'} size={60} />
-          )}
-          <Text style={styles.fileTxt}>{document.title}</Text>
-        </TouchableOpacity>
-      );
-    });
-
-    return (
-      <View style={styles.container}>
-        <ScrollView style={styles.scrollview}>
-          <View style={styles.filesContainer}>{documentList}</View>
-        </ScrollView>
-      </View>
-    );
-  }
-}
-
-export default connect(mapStateToProps)(OnlyVideosScreen);
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+// Redux
+import { connect } from 'react-redux';
+// Icons
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+// Style
+import styles from '../../Resources/Styles/OnlyVideosStyle';
+
+function mapStateToProps(state) {
+  return {
+    documents: state.documents,
+    mainColor: state.app.mainColor,
+  };
+}
+
+class OnlyVideosScreen extends React.Component {
+  state = {
+    documents: [],
+  };
+
+  componentDidMount() {
+    this.setState({
+      documents: this.props.documents.filter(tmp => tmp.type === 'mp4'),
+    });
+  }
+
+  render() {
+    let documentList = this.state.documents.map(document => {
+      return (
+        <TouchableOpacity
+          key={document.id.toString()}
+          style={{ ...styles.file, backgroundColor: this.props.mainColor }}
+          onPress={() => {
+            this.props.dispatch({
+              type: 'SET_CURRENT_OPENED_DOC',
+              data: document,
+            });
+            this.props.navigation.navigate('VideoScreen', {
+              uuid: document.uuid,
+            });
+          }}>
+          {document.type === 'pdf' ? (
+            <FontAwesome5 name="file-pdf" color={'white'} size={60} />
+          ) : (
+            <FontAwesome5 name="file-video" color={'white'} size={60} />
+          )}
+          <Text style={styles.fileTxt}>{document.title}</Text>
+        </TouchableOpacity>
+      );
+    });
+
+    return (
+      <View style={styles.container}>
+        <ScrollView style={styles.scrollview}>
+          <View style={styles.filesContainer}>{documentList}</View>
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(OnlyVideosScreen);
diff --git a/ComApp/src/App/Views/PDFScreen.js b/ComApp/src/App/Views/PDFScreen.js
index 93450da..49fa07e 100644
--- a/ComApp/src/App/Views/PDFScreen.js
+++ b/ComApp/src/App/Views/PDFScreen.js
@@ -8,33 +8,33 @@ import * as FileSystem from 'expo-file-system';
 import styles from '../../Resources/Styles/PDFStyle';
 
 class PDFScreen extends React.Component {
-    render() {
-        const { uuid } = this.props.route.params;
-        const source = {
-            uri: FileSystem.documentDirectory + uuid + '.pdf',
-            cache: false,
-        };
-        return (
-            <View style={styles.container}>
-                <Pdf
-                    source={source}
-                    onLoadComplete={(numberOfPages, filePath) => {
-                        //console.log(`number of pages: ${numberOfPages}`);
-                    }}
-                    onPageChanged={(page, numberOfPages) => {
-                        //console.log(`current page: ${page}`);
-                    }}
-                    onError={error => {
-                        console.log(error);
-                    }}
-                    onPressLink={uri => {
-                        //console.log(`Link presse: ${uri}`);
-                    }}
-                    style={styles.pdf}
-                />
-            </View>
-        );
-    }
+  render() {
+    const { uuid } = this.props.route.params;
+    const source = {
+      uri: FileSystem.documentDirectory + uuid + '.pdf',
+      cache: false,
+    };
+    return (
+      <View style={styles.container}>
+        <Pdf
+          source={source}
+          onLoadComplete={(numberOfPages, filePath) => {
+            //console.log(`number of pages: ${numberOfPages}`);
+          }}
+          onPageChanged={(page, numberOfPages) => {
+            //console.log(`current page: ${page}`);
+          }}
+          onError={error => {
+            console.log(error);
+          }}
+          onPressLink={uri => {
+            //console.log(`Link presse: ${uri}`);
+          }}
+          style={styles.pdf}
+        />
+      </View>
+    );
+  }
 }
 
 export default PDFScreen;
diff --git a/ComApp/src/App/Views/SearchScreen.js b/ComApp/src/App/Views/SearchScreen.js
index b029450..d9b97f0 100644
--- a/ComApp/src/App/Views/SearchScreen.js
+++ b/ComApp/src/App/Views/SearchScreen.js
@@ -1,86 +1,87 @@
-import React from 'react';
-import {
-    View,
-    ScrollView,
-    TouchableOpacity,
-    Text,
-} from 'react-native';
-// Reduxs
-import { connect } from 'react-redux';
-// Helpers
-import Helpers from "../Lib/Helpers";
-// Translations
-import i18n from "../../I18n";
-// Icons
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-// Style
-import styles from '../../Resources/Styles/SearchStyle';
-
-function mapStateToProps(state) {
-    return {
-        documents: state.documents,
-        mainColor: state.app.mainColor
-    };
-}
-
-class SearchScreen extends React.Component {
-    state = {
-        documents: [],
-    };
-
-    openDocument(document) {
-        this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
-        if (document.type === 'pdf') {
-            this.props.navigation.navigate('PDFScreen', { uuid: document.uuid });
-        } else if (document.type === 'mp4') {
-            this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
-        } else {
-            console.log('Inconnu');
-        }
-    }
-
-    componentDidMount() {
-        const { needle, onlyVideos } = this.props.route.params;
-        let objDocs = this.props.documents;
-        let arrayDocs = Object.keys(objDocs).map(function (key) { return objDocs[key]; });
-        let sorted = arrayDocs.sort(Helpers.compareValues('title', 'asc'));
-        let filtered = sorted.filter(item => item.title.toLowerCase().indexOf(needle.toLowerCase()) >= 0);
-        if (onlyVideos === true) {
-            filtered = filtered.filter(item => item.type === 'mp4');
-        }
-        this.setState({
-            documents: filtered,
-        });
-    }
-
-    render() {
-        let documentList = this.state.documents.map(document => {
-            return (
-                <TouchableOpacity
-                    key={document.id.toString()}
-                    style={{ ...styles.file, backgroundColor: this.props.mainColor }}
-                    onPress={() => this.openDocument(document)}>
-                    {document.type === 'pdf' ? (
-                        <FontAwesome5 name="file-pdf" color={'white'} size={60} />
-                    ) : (
-                        <FontAwesome5 name="file-video" color={'white'} size={60} />
-                    )}
-                    <Text style={styles.fileTxt}>{document.title}</Text>
-                </TouchableOpacity>
-            );
-        });
-
-        return (
-            <View style={styles.container}>
-                <ScrollView style={styles.scrollview}>
-                    <View style={styles.filesContainer}>{documentList}</View>
-                    {this.state.documents.length === 0 && (
-                        <Text style={{ textAlign: 'center', marginTop: 50, fontSize: 30 }}>{i18n.t('search_s.no_result')}</Text>
-                    )}
-                </ScrollView>
-            </View>
-        );
-    }
-}
-
-export default connect(mapStateToProps)(SearchScreen);
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+// Reduxs
+import { connect } from 'react-redux';
+// Helpers
+import Helpers from '../Lib/Helpers';
+// Translations
+import i18n from '../../I18n';
+// Icons
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+// Style
+import styles from '../../Resources/Styles/SearchStyle';
+
+function mapStateToProps(state) {
+  return {
+    documents: state.documents,
+    mainColor: state.app.mainColor,
+  };
+}
+
+class SearchScreen extends React.Component {
+  state = {
+    documents: [],
+  };
+
+  openDocument(document) {
+    this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
+    if (document.type === 'pdf') {
+      this.props.navigation.navigate('PDFScreen', { uuid: document.uuid });
+    } else if (document.type === 'mp4') {
+      this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
+    } else {
+      console.log('Inconnu');
+    }
+  }
+
+  componentDidMount() {
+    const { needle, onlyVideos } = this.props.route.params;
+    let objDocs = this.props.documents;
+    let arrayDocs = Object.keys(objDocs).map(function (key) {
+      return objDocs[key];
+    });
+    let sorted = arrayDocs.sort(Helpers.compareValues('title', 'asc'));
+    let filtered = sorted.filter(
+      item => item.title.toLowerCase().indexOf(needle.toLowerCase()) >= 0,
+    );
+    if (onlyVideos === true) {
+      filtered = filtered.filter(item => item.type === 'mp4');
+    }
+    this.setState({
+      documents: filtered,
+    });
+  }
+
+  render() {
+    let documentList = this.state.documents.map(document => {
+      return (
+        <TouchableOpacity
+          key={document.id.toString()}
+          style={{ ...styles.file, backgroundColor: this.props.mainColor }}
+          onPress={() => this.openDocument(document)}>
+          {document.type === 'pdf' ? (
+            <FontAwesome5 name="file-pdf" color={'white'} size={60} />
+          ) : (
+            <FontAwesome5 name="file-video" color={'white'} size={60} />
+          )}
+          <Text style={styles.fileTxt}>{document.title}</Text>
+        </TouchableOpacity>
+      );
+    });
+
+    return (
+      <View style={styles.container}>
+        <ScrollView style={styles.scrollview}>
+          <View style={styles.filesContainer}>{documentList}</View>
+          {this.state.documents.length === 0 && (
+            <Text style={{ textAlign: 'center', marginTop: 50, fontSize: 30 }}>
+              {i18n.t('search_s.no_result')}
+            </Text>
+          )}
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(SearchScreen);
diff --git a/ComApp/src/App/Views/SyncScreen.js b/ComApp/src/App/Views/SyncScreen.js
index 80b81b3..4a9dc54 100644
--- a/ComApp/src/App/Views/SyncScreen.js
+++ b/ComApp/src/App/Views/SyncScreen.js
@@ -1,379 +1,423 @@
 import React from 'react';
-import { View, Button, Alert, Text } from 'react-native';
+import { Alert, Button, Text, View } from 'react-native';
 // Redux
 import { connect } from 'react-redux';
-import { initDirectories } from '../Store/Actions/directories';
 import { initContact } from '../Store/Actions/contacts';
+import { initDirectories } from '../Store/Actions/directories';
 import { initDocuments } from '../Store/Actions/documents';
 // Sentry
-import * as Sentry from "@sentry/react-native";
+import * as Sentry from '@sentry/react-native';
 // Style
 import styles from '../../Resources/Styles/SyncStyle';
 // Translations
-import i18n from "../../I18n";
-// Controller 
+import i18n from '../../I18n';
+// Controller
 import SyncController from '../Controllers/SyncController';
 // Progress
 import * as Progress from 'react-native-progress';
-// Database 
-import { User, Contact, Directory, Document, SendBrochure } from '../../Database';
+// Database
+import {
+  Contact,
+  Directory,
+  Document,
+  SendBrochure,
+  User,
+} from '../../Database';
 // FileSytem
 import * as FileSystem from 'expo-file-system';
 
 function mapStateToProps(state) {
-    return {
-        syncVersion: state.app.syncVersion,
-        currentUser: state.app.currentUser,
-        locale: state.locale.locale,
-        mainColor: state.app.mainColor,
-        directories: state.directories
-    };
+  return {
+    syncVersion: state.app.syncVersion,
+    currentUser: state.app.currentUser,
+    locale: state.locale.locale,
+    mainColor: state.app.mainColor,
+    directories: state.directories,
+  };
 }
 
 const mapDispatchToProps = dispatch => {
-    return {
-        init: () => dispatch({ type: 'INIT' }),
-        initUsers: () => dispatch({ type: 'INIT_USERS' }),
-        initDirectories: (lang, user) => dispatch(initDirectories(lang, user)),
-        initDocuments: (lang, directories) => dispatch(initDocuments(lang, directories)),
-        initContact: currentUser => dispatch(initContact(currentUser)),
-        initBtns: () => dispatch({ type: 'INIT_HOME_BTNS' }),
-        updateVersion: version => dispatch({
-            type: 'UPDATE_VERSION',
-            data: version,
-        }),
-        updateShowIsActive: value => dispatch({
-            type: 'UPDATE_SHOW_IS_ACTIVE',
-            data: value,
-        })
-    };
+  return {
+    init: () => dispatch({ type: 'INIT' }),
+    initUsers: () => dispatch({ type: 'INIT_USERS' }),
+    initDirectories: (lang, user) => dispatch(initDirectories(lang, user)),
+    initDocuments: (lang, directories) =>
+      dispatch(initDocuments(lang, directories)),
+    initContact: currentUser => dispatch(initContact(currentUser)),
+    initBtns: () => dispatch({ type: 'INIT_HOME_BTNS' }),
+    updateVersion: version =>
+      dispatch({
+        type: 'UPDATE_VERSION',
+        data: version,
+      }),
+    updateShowIsActive: value =>
+      dispatch({
+        type: 'UPDATE_SHOW_IS_ACTIVE',
+        data: value,
+      }),
+  };
 };
 
 class SyncScreen extends React.Component {
-    state = {
-        progress: 0,
-        txtStep: '',
-        downloadProgress: 0,
-        downloadingFile: false,
-        processing: false,
-        newApp: false,
-        forced: false
-    };
+  state = {
+    progress: 0,
+    txtStep: '',
+    downloadProgress: 0,
+    downloadingFile: false,
+    processing: false,
+    newApp: false,
+    forced: false,
+  };
 
-    componentDidMount() {
-        const { forceSync } = this.props.route.params;
-        if (forceSync === true) {
-            this.setState({ forced: true });
-            this.sync();
-        }
+  componentDidMount() {
+    const { forceSync } = this.props.route.params;
+    if (forceSync === true) {
+      this.setState({ forced: true });
+      this.sync();
     }
+  }
 
-    render() {
-        const fileProgress = this.fileProgress();
-        return (
-            <View style={styles.container}>
-                <Progress.Circle
-                    size={250}
-                    progress={this.state.progress}
-                    showsText={true}
-                    color={this.props.mainColor}
-                />
-                <View style={styles.btnWrapper}>
-                    <Button
-                        disabled={this.state.processing}
-                        color={this.props.mainColor}
-                        title={i18n.t('sync_s.start_sync')}
-                        onPress={() => this.sync()}
-                    />
-                </View>
-                <View style={styles.btnWrapper}>
-                    <Text>
-                        {this.state.txtStep} {fileProgress}
-                    </Text>
-                </View>
-            </View>
-        );
+  render() {
+    const fileProgress = this.fileProgress();
+    return (
+      <View style={styles.container}>
+        <Progress.Circle
+          size={250}
+          progress={this.state.progress}
+          showsText={true}
+          color={this.props.mainColor}
+        />
+        <View style={styles.btnWrapper}>
+          <Button
+            disabled={this.state.processing}
+            color={this.props.mainColor}
+            title={i18n.t('sync_s.start_sync')}
+            onPress={() => this.sync()}
+          />
+        </View>
+        <View style={styles.btnWrapper}>
+          <Text>
+            {this.state.txtStep} {fileProgress}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  async sync() {
+    let errorStatus = false;
+    const isConnected = await SyncController.checkConnection()
+      .then(state => {
+        //console.log(state.isConnected)
+        return state.isConnected;
+      })
+      .catch(error => {
+        //console.log(error);
+        return false;
+      });
+    if (!isConnected) {
+      Alert.alert(
+        i18n.t('global.warning'),
+        i18n.t('error.must_be_connected_internet_sync'),
+      );
+      return;
     }
+    this.setState({ processing: true });
+    // getVersion
+    const resVersion = await SyncController.getVersion()
+      .then(res => {
+        return res.data;
+      })
+      .catch(error => {
+        Sentry.captureException(error);
+        Alert.alert(i18n.t('error.error'), i18n.t('error.error_has_occurred'));
+        errorStatus = true;
+      });
+    if (errorStatus) {
+      return false;
+    }
+    this.props.updateVersion(resVersion.version);
+    this.props.updateShowIsActive(resVersion.ShowIsActive);
+    this.setState({ newApp: resVersion.newApp });
+    // getUsers
+    this.setState({ txtStep: i18n.t('sync_s.updating_users') + '...' });
+    const resUsers = await SyncController.getUsers()
+      .then(res => {
+        User.clear();
+        return res.data;
+      })
+      .catch(error => {
+        Sentry.captureException(error);
+        Alert.alert(i18n.t('error.error'), i18n.t('error.error_has_occurred'));
+        errorStatus = true;
+      });
+    if (errorStatus) {
+      return false;
+    }
+    resUsers.forEach(user => {
+      User.add(user);
+    });
+    // getContacts
+    this.setState({
+      progress: 0.1,
+      txtStep: i18n.t('sync_s.updating_contacts') + '...',
+    });
+    const resContacts = await SyncController.getContacts(
+      this.props.currentUser.id,
+    )
+      .then(res => {
+        Contact.clear();
+        return res.data;
+      })
+      .catch(error => {
+        Sentry.captureException(error);
+        Alert.alert(i18n.t('error.error'), i18n.t('error.error_has_occurred'));
+        errorStatus = true;
+      });
+    if (errorStatus) {
+      return false;
+    }
+    resContacts.forEach(contact => {
+      Contact.add(contact);
+    });
+    //sendBrochures
+    this.setState({
+      progress: 0.2,
+      txtStep: i18n.t('sync_s.sending_flyers') + '...',
+    });
+    let brochures = SendBrochure.getAll();
+    for (const brochure of brochures) {
+      await SyncController.sendBrochure(brochure)
+        .then(res => {
+          SendBrochure.delete(brochure.id);
+        })
+        .catch(error => {
+          Sentry.captureException(error);
+          Alert.alert(
+            i18n.t('error.error'),
+            i18n.t('error.error_has_occurred') + ' : Brochures',
+          );
+          errorStatus = true;
+        });
+    }
+    if (errorStatus) {
+      return false;
+    }
+    //getDirectories
+    this.setState({
+      progress: 0.3,
+      txtStep: i18n.t('sync_s.updating_folders') + '...',
+    });
+    const resDirectories = await SyncController.getDirectories()
+      .then(res => {
+        Directory.clear();
+        return res.data;
+      })
+      .catch(error => {
+        Sentry.captureException(error);
+        Alert.alert(i18n.t('error.error'), i18n.t('error.error_has_occurred'));
+        errorStatus = true;
+      });
+    if (errorStatus) {
+      return false;
+    }
+    resDirectories.forEach(dir => {
+      Directory.add(dir);
+    });
+    // getDocuments
+    this.setState({
+      progress: 0.4,
+      txtStep: i18n.t('sync_s.updating_docs') + '...',
+    });
+    const resDocuments = await SyncController.getDocuments()
+      .then(res => {
+        return res.data;
+      })
+      .catch(error => {
+        Sentry.captureException(error);
+        Alert.alert(i18n.t('error.error'), i18n.t('error.error_has_occurred'));
+        errorStatus = true;
+      });
+    if (errorStatus) {
+      return false;
+    }
+    const toDelete = Document.clear(resDocuments);
+    resDocuments.forEach(document => {
+      Document.update(document);
+    });
+    this.downloadDocuments(Document.getAll(), toDelete);
+    // End
+    this.setState({
+      txtStep: i18n.t('sync_s.update_completed') + '.',
+      processing: false,
+    });
+  }
 
-    async sync() {
-        let errorStatus = false;
-        const isConnected = await SyncController.checkConnection().then(state => {
-            //console.log(state.isConnected)
-            return state.isConnected
-        }).catch(error => {
-            //console.log(error);
-            return false;
-        });
-        if (!isConnected) {
-            Alert.alert(
-                i18n.t('global.warning'),
-                i18n.t('error.must_be_connected_internet_sync')
-            );
-            return;
-        }
-        this.setState({ processing: true });
-        // getVersion
-        const resVersion = await SyncController.getVersion().then(res => {
-            return res.data;
-        }).catch(error => {
-            Sentry.captureException(error);
-            Alert.alert(
-                i18n.t('error.error'),
-                i18n.t('error.error_has_occurred')
-            );
-            errorStatus = true
-        });
-        if (errorStatus) {
-            return false;
-        }
-        this.props.updateVersion(resVersion.version);
-        this.props.updateShowIsActive(resVersion.ShowIsActive);
-        this.setState({ newApp: resVersion.newApp });
-        // getUsers
-        this.setState({ txtStep: i18n.t('sync_s.updating_users') + '...' });
-        const resUsers = await SyncController.getUsers().then(res => {
-            User.clear();
-            return res.data;
-        }).catch(error => {
-            Sentry.captureException(error);
-            Alert.alert(
-                i18n.t('error.error'),
-                i18n.t('error.error_has_occurred')
-            );
-            errorStatus = true
-        });
-        if (errorStatus) {
-            return false;
-        }
-        resUsers.forEach(user => {
-            User.add(user);
-        });
-        // getContacts
-        this.setState({ progress: 0.1, txtStep: i18n.t('sync_s.updating_contacts') + '...' });
-        const resContacts = await SyncController.getContacts(this.props.currentUser.id).then(res => {
-            Contact.clear();
-            return res.data;
-        }).catch(error => {
-            Sentry.captureException(error);
-            Alert.alert(
-                i18n.t('error.error'),
-                i18n.t('error.error_has_occurred')
-            );
-            errorStatus = true
-        });
-        if (errorStatus) {
-            return false;
-        }
-        resContacts.forEach(contact => {
-            Contact.add(contact);
-        });
-        //sendBrochures
-        this.setState({ progress: 0.2, txtStep: i18n.t('sync_s.sending_flyers') + '...' });
-        let brochures = SendBrochure.getAll();
-        for (const brochure of brochures) {
-            await SyncController.sendBrochure(brochure).then(res => {
-                SendBrochure.delete(brochure.id);
-            }).catch(error => {
-                Sentry.captureException(error);
-                Alert.alert(
-                    i18n.t('error.error'),
-                    i18n.t('error.error_has_occurred') + ' : Brochures'
-                );
-                errorStatus = true;
+  fileProgress() {
+    if (this.state.downloadingFile === true) {
+      return this.state.downloadProgress + ' %';
+    }
+  }
+
+  downloadDocuments(docs, toDelete) {
+    const version = this.props.syncVersion;
+    this.getToDL(docs, 0).then(toDownload => {
+      if (toDownload.length > 0) {
+        this.setState({ progress: 0.5 });
+        const docProgress = 0.5 / toDownload.length;
+        this.download(toDownload, docProgress, 0).then(status => {
+          if (status === true) {
+            this.deleteFile(toDelete, 0).then(status => {
+              this.finishSync(version);
             });
-        }
-        if (errorStatus) {
-            return false;
-        }
-        //getDirectories
-        this.setState({ progress: 0.3, txtStep: i18n.t('sync_s.updating_folders') + '...' });
-        const resDirectories = await SyncController.getDirectories().then(res => {
-            Directory.clear();
-            return res.data;
-        }).catch(error => {
-            Sentry.captureException(error);
-            Alert.alert(
-                i18n.t('error.error'),
-                i18n.t('error.error_has_occurred')
-            );
-            errorStatus = true
+          } else {
+            this.setState({
+              txtStep: i18n.t('error.error_has_occurred') + '.',
+            });
+          }
         });
-        if (errorStatus) {
-            return false;
-        }
-        resDirectories.forEach(dir => {
-            Directory.add(dir);
+      } else {
+        this.deleteFile(toDelete, 0).then(status => {
+          this.setState({ progress: 1 });
+          this.finishSync(version);
         });
-        // getDocuments
-        this.setState({ progress: 0.4, txtStep: i18n.t('sync_s.updating_docs') + '...' });
-        const resDocuments = await SyncController.getDocuments().then(res => {
-            return res.data;
-        }).catch(error => {
-            Sentry.captureException(error);
-            Alert.alert(
-                i18n.t('error.error'),
-                i18n.t('error.error_has_occurred')
-            );
-            errorStatus = true
-        });
-        if (errorStatus) {
-            return false;
-        }
-        const toDelete = Document.clear(resDocuments);
-        resDocuments.forEach(document => {
-            Document.update(document);
-        });
-        this.downloadDocuments(Document.getAll(), toDelete);
-        // End
-        this.setState({ txtStep: i18n.t('sync_s.update_completed') + '.', processing: false });
-    }
+      }
+    });
+  }
 
-    fileProgress() {
-        if (this.state.downloadingFile === true) {
-            return this.state.downloadProgress + ' %';
-        }
+  async getToDL(docs, i, toDL = []) {
+    if (docs.length < 1) {
+      return toDL;
     }
-
-    downloadDocuments(docs, toDelete) {
-        const version = this.props.syncVersion;
-        this.getToDL(docs, 0).then(toDownload => {
-            if (toDownload.length > 0) {
-                this.setState({ progress: 0.5 });
-                const docProgress = 0.5 / toDownload.length;
-                this.download(toDownload, docProgress, 0).then(status => {
-                    if (status === true) {
-                        this.deleteFile(toDelete, 0).then(status => {
-                            this.finishSync(version);
-                        });
-                    } else {
-                        this.setState({ txtStep: i18n.t('error.error_has_occurred') + '.' });
-                    }
-                });
-            } else {
-                this.deleteFile(toDelete, 0).then(status => {
-                    this.setState({ progress: 1 });
-                    this.finishSync(version);
-                });
-            }
-        });
+    const item = docs[i];
+    const { exists, modificationTime } = await FileSystem.getInfoAsync(
+      FileSystem.documentDirectory + item.uuid + '.' + item.type,
+    );
+    if (exists === false) {
+      toDL.push(item);
+    } else {
+      if (modificationTime.toString() !== item.updated_at) {
+        toDL.push(item);
+      }
     }
-
-    async getToDL(docs, i, toDL = []) {
-        if (docs.length < 1)
-            return toDL;
-        const item = docs[i];
-        const { exists, modificationTime } = await FileSystem.getInfoAsync(FileSystem.documentDirectory + item.uuid + '.' + item.type);
-        if (exists === false) {
-            toDL.push(item);
-        } else {
-            if (modificationTime.toString() !== item.updated_at) {
-                toDL.push(item);
-            }
-        }
-        if (i < docs.length - 1) {
-            return this.getToDL(docs, i + 1, toDL);
-        }
-        return toDL;
+    if (i < docs.length - 1) {
+      return this.getToDL(docs, i + 1, toDL);
     }
+    return toDL;
+  }
 
-    async deleteFile(docs, i) {
-        if (docs.length > 0) {
-            const file = docs[i];
-            await FileSystem.deleteAsync(FileSystem.documentDirectory + file.uuid + '.' + file.type, { idempotent: true });
-            if (i < docs.length - 1) {
-                return this.deleteFile(docs, i + 1);
-            }
-        }
-        return true;
+  async deleteFile(docs, i) {
+    if (docs.length > 0) {
+      const file = docs[i];
+      await FileSystem.deleteAsync(
+        FileSystem.documentDirectory + file.uuid + '.' + file.type,
+        { idempotent: true },
+      );
+      if (i < docs.length - 1) {
+        return this.deleteFile(docs, i + 1);
+      }
     }
+    return true;
+  }
 
-    callback(downloadProgress) {
-        let progress =
-            (downloadProgress.totalBytesWritten /
-                downloadProgress.totalBytesExpectedToWrite) *
-            100;
-        progress = Math.round(progress);
-        progress = progress.toString();
-        this.setState({
-            downloadProgress: progress,
-        });
+  callback(downloadProgress) {
+    let progress =
+      (downloadProgress.totalBytesWritten /
+        downloadProgress.totalBytesExpectedToWrite) *
+      100;
+    progress = Math.round(progress);
+    progress = progress.toString();
+    this.setState({
+      downloadProgress: progress,
+    });
+  }
+
+  downloadResumable(url, uuid, type) {
+    return FileSystem.createDownloadResumable(
+      url,
+      FileSystem.documentDirectory + uuid + '.' + type,
+      {},
+      this.callback.bind(this),
+    );
+  }
+
+  async download(documents, progress, i) {
+    if (this.state.downloadingFile === false) {
+      this.setState({ downloadingFile: true });
     }
-
-    downloadResumable(url, uuid, type) {
-        return FileSystem.createDownloadResumable(
-            url,
-            FileSystem.documentDirectory + uuid + '.' + type,
-            {},
-            this.callback.bind(this),
-        );
+    const endpoint = SyncController.getUrlBo() + '/storage/docs/';
+    const doc = documents[i];
+    this.setState({
+      txtStep:
+        i18n.t('sync_s.download') +
+        ' : ' +
+        doc.title +
+        ' (' +
+        doc.type.toUpperCase() +
+        ') ...',
+    });
+    try {
+      await this.downloadResumable(
+        endpoint + doc.uuid + '.' + doc.type,
+        doc.uuid,
+        doc.type,
+      ).downloadAsync();
+      const { modificationTime } = await FileSystem.getInfoAsync(
+        FileSystem.documentDirectory + doc.uuid + '.' + doc.type,
+      );
+      SyncController.updateLastModificationDoc(doc.id, modificationTime);
+      //console.log('Finished downloading to ', uri);
+      this.setState({ progress: this.state.progress + progress });
+      if (i < documents.length - 1) {
+        return this.download(documents, progress, i + 1);
+      }
+      this.setState({ downloadingFile: false });
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
     }
+  }
 
-    async download(documents, progress, i) {
-        if (this.state.downloadingFile === false) {
-            this.setState({ downloadingFile: true });
-        }
-        const endpoint = SyncController.getUrlBo() + '/storage/docs/'
-        const doc = documents[i];
-        this.setState({
-            txtStep:
-                i18n.t('sync_s.download') + ' : ' +
-                doc.title +
-                ' (' +
-                doc.type.toUpperCase() +
-                ') ...',
-        });
-        try {
-            await this.downloadResumable(
-                endpoint + doc.uuid + "." + doc.type,
-                doc.uuid,
-                doc.type,
-            ).downloadAsync();
-            const { modificationTime } = await FileSystem.getInfoAsync(FileSystem.documentDirectory + doc.uuid + '.' + doc.type);
-            SyncController.updateLastModificationDoc(doc.id, modificationTime);
-            //console.log('Finished downloading to ', uri);
-            this.setState({ progress: this.state.progress + progress });
-            if (i < documents.length - 1) {
-                return this.download(documents, progress, i + 1);
-            }
-            this.setState({ downloadingFile: false });
-            return true;
-        } catch (e) {
-            console.error(e);
-            return false;
-        }
+  finishSync(version) {
+    this.props.init();
+    this.props.initUsers();
+    this.props.initContact(this.props.currentUser);
+    this.props.initDirectories(this.props.locale, this.props.currentUser);
+    this.props.initDocuments(this.props.locale, this.props.directories.global);
+    this.props.initBtns();
+    if (this.state.forced) {
+      SyncController.setInstalled();
     }
-
-    finishSync(version) {
-        this.props.init();
-        this.props.initUsers();
-        this.props.initContact(this.props.currentUser);
-        this.props.initDirectories(this.props.locale, this.props.currentUser);
-        this.props.initDocuments(this.props.locale, this.props.directories.global);
-        this.props.initBtns();
-        if (this.state.forced) {
-            SyncController.setInstalled();
-        }
-        SyncController.updateVersion(version);
-        this.setState({ txtStep: i18n.t('sync_s.update_completed') + '.', processing: false });
-        if (this.state.newApp === true) {
-            const appUUID = SyncController.getAppStoreUUID();
-            const url = 'https://store.ldc.fr' + '/app/' + appUUID;
-            Alert.alert(
-                'LDC Store',
-                i18n.t('sync_s.new_app_version'),
-                [
-                    {
-                        text: i18n.t('global.cancel'),
-                        onPress: () => console.log('Cancel Pressed'),
-                        style: 'cancel',
-                    },
-                    { text: i18n.t('sync_s.open_store'), onPress: () => Linking.openURL(url).catch((err) => console.error('An error occurred', err)) },
-                ],
-                { cancelable: false },
-            );
-        }
+    SyncController.updateVersion(version);
+    this.setState({
+      txtStep: i18n.t('sync_s.update_completed') + '.',
+      processing: false,
+    });
+    if (this.state.newApp === true) {
+      const appUUID = SyncController.getAppStoreUUID();
+      const url = 'https://store.ldc.fr' + '/app/' + appUUID;
+      Alert.alert(
+        'LDC Store',
+        i18n.t('sync_s.new_app_version'),
+        [
+          {
+            text: i18n.t('global.cancel'),
+            onPress: () => console.log('Cancel Pressed'),
+            style: 'cancel',
+          },
+          {
+            text: i18n.t('sync_s.open_store'),
+            onPress: () =>
+              Linking.openURL(url).catch(err =>
+                console.error('An error occurred', err),
+              ),
+          },
+        ],
+        { cancelable: false },
+      );
     }
-
+  }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SyncScreen);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(SyncScreen);
diff --git a/ComApp/src/App/Views/VideoScreen.js b/ComApp/src/App/Views/VideoScreen.js
index 7eb42c9..6fb92ad 100644
--- a/ComApp/src/App/Views/VideoScreen.js
+++ b/ComApp/src/App/Views/VideoScreen.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Dimensions } from 'react-native';
+import { Dimensions, View } from 'react-native';
 // Reduxs
 import { connect } from 'react-redux';
 // FileSytem
@@ -9,51 +9,51 @@ import { ResizeMode } from 'expo-av';
 import VideoPlayer from 'expo-video-player';
 
 function mapStateToProps(state) {
-    return {
-        mainColor: state.app.mainColor
-    };
+  return {
+    mainColor: state.app.mainColor,
+  };
 }
 
 class VideoScreen extends React.Component {
-    render() {
-        const { uuid } = this.props.route.params;
-        let width = Dimensions.get("window").width;
-        let height = Dimensions.get("window").height;
+  render() {
+    const { uuid } = this.props.route.params;
+    let width = Dimensions.get('window').width;
+    let height = Dimensions.get('window').height;
 
-        // if portrait
-        if (height > width) {
-            let tmpHeight = height;
-            height = width - 150;
-            width = tmpHeight + 100;
-        } else {
-            height = height - 100;
-        }
-        return (
-            <View style={{ flex: 1, backgroundColor: 'black' }}>
-                <VideoPlayer
-                    defaultControlsVisible={true}
-                    fullscreen={{
-                        visible: false
-                    }}
-                    slider={{
-                        minimumTrackTintColor: this.props.mainColor,
-                        thumbTintColor: this.props.mainColor,
-                    }}
-                    style={{
-                        height: height,
-                        width: width
-                    }}
-                    videoProps={{
-                        shouldPlay: true,
-                        resizeMode: ResizeMode.CONTAIN,
-                        source: {
-                            uri: FileSystem.documentDirectory + uuid + '.mp4',
-                        },
-                    }}
-                />
-            </View>
-        );
+    // if portrait
+    if (height > width) {
+      let tmpHeight = height;
+      height = width - 150;
+      width = tmpHeight + 100;
+    } else {
+      height = height - 100;
     }
+    return (
+      <View style={{ flex: 1, backgroundColor: 'black' }}>
+        <VideoPlayer
+          defaultControlsVisible={true}
+          fullscreen={{
+            visible: false,
+          }}
+          slider={{
+            minimumTrackTintColor: this.props.mainColor,
+            thumbTintColor: this.props.mainColor,
+          }}
+          style={{
+            height: height,
+            width: width,
+          }}
+          videoProps={{
+            shouldPlay: true,
+            resizeMode: ResizeMode.CONTAIN,
+            source: {
+              uri: FileSystem.documentDirectory + uuid + '.mp4',
+            },
+          }}
+        />
+      </View>
+    );
+  }
 }
 
-export default connect(mapStateToProps)(VideoScreen);
\ No newline at end of file
+export default connect(mapStateToProps)(VideoScreen);
diff --git a/ComApp/src/Database.js b/ComApp/src/Database.js
index 8d53114..279f3c1 100644
--- a/ComApp/src/Database.js
+++ b/ComApp/src/Database.js
@@ -1,29 +1,31 @@
-import Realm from "realm";
-
-import ContactModel, { ContactsSchema } from "./App/Models/Contact";
-import DirectoryModel, { DirectoriesSchema } from "./App/Models/Directory";
-import DocumentModel, { DocumentsSchema } from "./App/Models/Document";
-import SendBrochureModel, { SendBrochuresSchema } from "./App/Models/SendBrochure";
-import SettingModel, { SettingsSchema } from "./App/Models/Setting";
-import UserModel, { UsersSchema } from "./App/Models/User";
-
-const Database = {
-  schema: [
-    ContactsSchema,
-    DirectoriesSchema,
-    DocumentsSchema,
-    SendBrochuresSchema,
-    SettingsSchema,
-    UsersSchema
-  ],
-  //encryptionKey: new Int8Array(64)
-};
-
-let realm = new Realm(Database);
-
-export let Contact = new ContactModel(realm);
-export let Directory = new DirectoryModel(realm);
-export let Document = new DocumentModel(realm);
-export let SendBrochure = new SendBrochureModel(realm);
-export let Setting = new SettingModel(realm);
-export let User = new UserModel(realm);
+import Realm from 'realm';
+
+import ContactModel, { ContactsSchema } from './App/Models/Contact';
+import DirectoryModel, { DirectoriesSchema } from './App/Models/Directory';
+import DocumentModel, { DocumentsSchema } from './App/Models/Document';
+import SendBrochureModel, {
+  SendBrochuresSchema,
+} from './App/Models/SendBrochure';
+import SettingModel, { SettingsSchema } from './App/Models/Setting';
+import UserModel, { UsersSchema } from './App/Models/User';
+
+const Database = {
+  schema: [
+    ContactsSchema,
+    DirectoriesSchema,
+    DocumentsSchema,
+    SendBrochuresSchema,
+    SettingsSchema,
+    UsersSchema,
+  ],
+  //encryptionKey: new Int8Array(64)
+};
+
+let realm = new Realm(Database);
+
+export let Contact = new ContactModel(realm);
+export let Directory = new DirectoryModel(realm);
+export let Document = new DocumentModel(realm);
+export let SendBrochure = new SendBrochureModel(realm);
+export let Setting = new SettingModel(realm);
+export let User = new UserModel(realm);
diff --git a/ComApp/src/I18n.js b/ComApp/src/I18n.js
index 57fcae8..b9cc07a 100644
--- a/ComApp/src/I18n.js
+++ b/ComApp/src/I18n.js
@@ -1,17 +1,17 @@
-import { I18n } from 'i18n-js';
-
-import fr from './Resources/Locales/fr';
-import en from './Resources/Locales/en';
-import de from './Resources/Locales/de';
-
-const i18n = new I18n({
-    fr: fr,
-    en: en,
-    de: de
-});
-
-i18n.defaultLocale = 'fr';
-i18n.locale = 'fr';
-i18n.enableFallback = true;
-
-export default i18n;
+import { I18n } from 'i18n-js';
+
+import de from './Resources/Locales/de';
+import en from './Resources/Locales/en';
+import fr from './Resources/Locales/fr';
+
+const i18n = new I18n({
+  fr: fr,
+  en: en,
+  de: de,
+});
+
+i18n.defaultLocale = 'fr';
+i18n.locale = 'fr';
+i18n.enableFallback = true;
+
+export default i18n;
diff --git a/ComApp/src/Navigation.js b/ComApp/src/Navigation.js
index 923f10a..88593a3 100644
--- a/ComApp/src/Navigation.js
+++ b/ComApp/src/Navigation.js
@@ -1,9 +1,9 @@
 import { createNavigationContainerRef } from '@react-navigation/native';
 
-export const navigationRef = createNavigationContainerRef()
+export const navigationRef = createNavigationContainerRef();
 
 export function navigate(name, params) {
-    if (navigationRef.isReady()) {
-        navigationRef.navigate(name, params);
-    }
-}
\ No newline at end of file
+  if (navigationRef.isReady()) {
+    navigationRef.navigate(name, params);
+  }
+}
diff --git a/ComApp/src/Resources/CommonStyles.js b/ComApp/src/Resources/CommonStyles.js
index 2df8c77..1a5fffe 100644
--- a/ComApp/src/Resources/CommonStyles.js
+++ b/ComApp/src/Resources/CommonStyles.js
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 const commonStyles = StyleSheet.create({
   background: {
     flex: 1,
-    justifyContent: "center"
+    justifyContent: 'center',
   },
   textInput: {
     height: 40,
@@ -12,8 +12,8 @@ const commonStyles = StyleSheet.create({
     borderWidth: 1,
     marginBottom: 20,
     backgroundColor: 'white',
-    paddingLeft: 10
-  }
+    paddingLeft: 10,
+  },
 });
-  
-export default commonStyles;
\ No newline at end of file
+
+export default commonStyles;
diff --git a/ComApp/src/Resources/Styles/ContactDetailsStyle.js b/ComApp/src/Resources/Styles/ContactDetailsStyle.js
index d0c1bec..2a8d4d9 100644
--- a/ComApp/src/Resources/Styles/ContactDetailsStyle.js
+++ b/ComApp/src/Resources/Styles/ContactDetailsStyle.js
@@ -1,43 +1,43 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'row',
-    },
-    input: {
-        backgroundColor: 'white',
-        margin: 10,
-        padding: 10,
-    },
-    clearCheckbox: {
-        backgroundColor: '#00000000',
-        borderWidth: 0,
-    },
-    clearRadio: {
-        flex: 1,
-        backgroundColor: '#00000000',
-        borderWidth: 0,
-    },
-    select: {
-        flex: 2,
-        margin: 10,
-        backgroundColor: 'white',
-    },
-    textArea: {
-        flex: 1,
-        margin: 10,
-        padding: 10,
-        backgroundColor: 'white',
-        textAlignVertical: 'top',
-    },
-    button: {
-        width: 35,
-        height: 35,
-        justifyContent: 'center',
-        alignItems: 'center',
-        margin: 2,
-    },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  input: {
+    backgroundColor: 'white',
+    margin: 10,
+    padding: 10,
+  },
+  clearCheckbox: {
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  clearRadio: {
+    flex: 1,
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  select: {
+    flex: 2,
+    margin: 10,
+    backgroundColor: 'white',
+  },
+  textArea: {
+    flex: 1,
+    margin: 10,
+    padding: 10,
+    backgroundColor: 'white',
+    textAlignVertical: 'top',
+  },
+  button: {
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 2,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/ContactStyle.js b/ComApp/src/Resources/Styles/ContactStyle.js
index 5a9776f..2fe9eb0 100644
--- a/ComApp/src/Resources/Styles/ContactStyle.js
+++ b/ComApp/src/Resources/Styles/ContactStyle.js
@@ -1,74 +1,74 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import {Dimensions, StyleSheet} from 'react-native';
 
-const { width } = Dimensions.get('window');
+const {width} = Dimensions.get('window');
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-    },
-    item: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderBottomWidth: 1,
-        padding: 15,
-        marginHorizontal: 15,
-    },
-    clickable: {
-        textAlign: 'center',
-        fontSize: 18,
-        width: width / 4,
-        fontWeight: 'bold'
-    },
-    company: {
-        textAlign: 'center',
-        fontSize: 15,
-        width: width / 4,
-    },
-    email: {
-        textAlign: 'center',
-        fontSize: 15,
-        width: width / 4,
-    },
-    buttons: {
-        justifyContent: 'center',
-        flexDirection: 'row',
-        fontSize: 15,
-        width: width / 4,
-    },
-    button: {
-        width: 35,
-        height: 35,
-        justifyContent: 'center',
-        alignItems: 'center',
-        margin: 2,
-    },
-    txtSendBrochure: {
-        borderWidth: 1,
-        borderColor: 'lightgrey',
-        width: 280,
-        marginBottom: 5,
-        paddingLeft: 10,
-    },
-    textAreaSendBrochure: {
-        borderWidth: 1,
-        borderColor: 'lightgrey',
-        width: 280,
-        height: 150,
-        marginBottom: 5,
-        paddingLeft: 10,
-        textAlignVertical: 'top',
-    },
-    inputSearch: {
-        backgroundColor: 'white',
-        width: 200,
-        paddingLeft: 20
-    },
-    btnSearch: {
-        width: 50,
-        alignItems: 'center',
-        justifyContent: 'center'
-    }
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  item: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    padding: 15,
+    marginHorizontal: 15,
+  },
+  clickable: {
+    textAlign: 'center',
+    fontSize: 18,
+    width: width / 4,
+    fontWeight: 'bold',
+  },
+  company: {
+    textAlign: 'center',
+    fontSize: 15,
+    width: width / 4,
+  },
+  email: {
+    textAlign: 'center',
+    fontSize: 15,
+    width: width / 4,
+  },
+  buttons: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+    fontSize: 15,
+    width: width / 4,
+  },
+  button: {
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 2,
+  },
+  txtSendBrochure: {
+    borderWidth: 1,
+    borderColor: 'lightgrey',
+    width: 280,
+    marginBottom: 5,
+    paddingLeft: 10,
+  },
+  textAreaSendBrochure: {
+    borderWidth: 1,
+    borderColor: 'lightgrey',
+    width: 280,
+    height: 150,
+    marginBottom: 5,
+    paddingLeft: 10,
+    textAlignVertical: 'top',
+  },
+  inputSearch: {
+    backgroundColor: 'white',
+    width: 200,
+    paddingLeft: 20,
+  },
+  btnSearch: {
+    width: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/DirectoriesStyle.js b/ComApp/src/Resources/Styles/DirectoriesStyle.js
index 224481f..3b09588 100644
--- a/ComApp/src/Resources/Styles/DirectoriesStyle.js
+++ b/ComApp/src/Resources/Styles/DirectoriesStyle.js
@@ -1,36 +1,36 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'row',
-    },
-    treeviewContainer: {
-        width: 290,
-    },
-    scrollview: {
-        flex: 2,
-    },
-    filesContainer: {
-        flex: 1,
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-    },
-    file: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 200,
-        width: 180,
-        margin: 10,
-    },
-    fileTxt: {
-        textAlign: 'center',
-        color: 'white',
-        fontWeight: 'bold',
-        fontSize: 18,
-        padding: 5
-    }
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  treeviewContainer: {
+    width: 290,
+  },
+  scrollview: {
+    flex: 2,
+  },
+  filesContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  file: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 200,
+    width: 180,
+    margin: 10,
+  },
+  fileTxt: {
+    textAlign: 'center',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 18,
+    padding: 5,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/HomeStyle.js b/ComApp/src/Resources/Styles/HomeStyle.js
index 0b954cb..f39ba45 100644
--- a/ComApp/src/Resources/Styles/HomeStyle.js
+++ b/ComApp/src/Resources/Styles/HomeStyle.js
@@ -1,39 +1,39 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'flex-end',
-        justifyContent: 'center',
-    },
-    text: {
-        height: 40,
-        width: 300,
-        borderColor: 'grey',
-        borderWidth: 1,
-        marginBottom: 20,
-    },
-    button: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'white',
-        marginBottom: 20,
-        marginRight: 50,
-        width: 400,
-        height: 80,
-        borderRadius: 10
-    },
-    btnTxt: {
-        fontSize: 20
-    },
-    btnImg: {
-        position: 'absolute',
-        left: 15,
-        height: 50,
-        width: 50,
-        resizeMode: 'stretch'
-    }
+  container: {
+    flex: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  text: {
+    height: 40,
+    width: 300,
+    borderColor: 'grey',
+    borderWidth: 1,
+    marginBottom: 20,
+  },
+  button: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    marginBottom: 20,
+    marginRight: 50,
+    width: 400,
+    height: 80,
+    borderRadius: 10,
+  },
+  btnTxt: {
+    fontSize: 20,
+  },
+  btnImg: {
+    position: 'absolute',
+    left: 15,
+    height: 50,
+    width: 50,
+    resizeMode: 'stretch',
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/InstallStyle.js b/ComApp/src/Resources/Styles/InstallStyle.js
index e6a5b8c..64a22fe 100644
--- a/ComApp/src/Resources/Styles/InstallStyle.js
+++ b/ComApp/src/Resources/Styles/InstallStyle.js
@@ -1,19 +1,19 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    logo: {
-        width: 150,
-        height: 150,
-        marginBottom: 20
-    },
-    actions: {
-        marginTop: 20
-    },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 150,
+    height: 150,
+    marginBottom: 20,
+  },
+  actions: {
+    marginTop: 20,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/LoginStyle.js b/ComApp/src/Resources/Styles/LoginStyle.js
index e9f8d33..b6c8ead 100644
--- a/ComApp/src/Resources/Styles/LoginStyle.js
+++ b/ComApp/src/Resources/Styles/LoginStyle.js
@@ -1,25 +1,25 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    logo: {
-        width: 150,
-        height: 150,
-        marginBottom: 20
-    },
-    text: {
-        height: 40,
-        width: 300,
-        borderColor: 'grey',
-        borderWidth: 1,
-        marginBottom: 20,
-        backgroundColor: 'white',
-        paddingLeft: 10
-    },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 150,
+    height: 150,
+    marginBottom: 20,
+  },
+  text: {
+    height: 40,
+    width: 300,
+    borderColor: 'grey',
+    borderWidth: 1,
+    marginBottom: 20,
+    backgroundColor: 'white',
+    paddingLeft: 10,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/MySpaceStyle.js b/ComApp/src/Resources/Styles/MySpaceStyle.js
index 5a215b6..2d2e08a 100644
--- a/ComApp/src/Resources/Styles/MySpaceStyle.js
+++ b/ComApp/src/Resources/Styles/MySpaceStyle.js
@@ -1,10 +1,10 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'row',
-    },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/NavigationStyle.js b/ComApp/src/Resources/Styles/NavigationStyle.js
index 49b35a4..8bd468d 100644
--- a/ComApp/src/Resources/Styles/NavigationStyle.js
+++ b/ComApp/src/Resources/Styles/NavigationStyle.js
@@ -1,38 +1,38 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    searchInput: {
-        borderWidth: 1,
-        width: 200,
-        paddingLeft: 20,
+  searchInput: {
+    borderWidth: 1,
+    width: 200,
+    paddingLeft: 20,
+  },
+  btnSearch: {
+    width: 50,
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  drawer: {
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      backgroundColor: '#ffffff',
+      padding: 20,
     },
-    btnSearch: {
-        width: 50,
-        height: 50,
-        alignItems: 'center',
-        justifyContent: 'center',
+    btn: {
+      borderWidth: 1,
+      borderColor: 'black',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 10,
+      marginBottom: 10,
     },
-    drawer: {
-        container: {
-            flex: 1,
-            alignItems: "center",
-            justifyContent: "space-between",
-            backgroundColor: "#ffffff",
-            padding: 20
-        },
-        btn: {
-            borderWidth: 1,
-            borderColor: 'black',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-            padding: 10,
-            marginBottom: 10
-        },
-        btnText: {
-            marginLeft: 10
-        },
-    }
+    btnText: {
+      marginLeft: 10,
+    },
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/OnlyVideosStyle.js b/ComApp/src/Resources/Styles/OnlyVideosStyle.js
index 7cefdb5..593da16 100644
--- a/ComApp/src/Resources/Styles/OnlyVideosStyle.js
+++ b/ComApp/src/Resources/Styles/OnlyVideosStyle.js
@@ -1,33 +1,33 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'row',
-    },
-    scrollview: {
-        flex: 2,
-    },
-    filesContainer: {
-        flex: 1,
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-    },
-    file: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 200,
-        width: 180,
-        margin: 10,
-    },
-    fileTxt: {
-        textAlign: 'center',
-        color: 'white',
-        fontWeight: 'bold',
-        fontSize: 18,
-        padding: 5
-    }
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  scrollview: {
+    flex: 2,
+  },
+  filesContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  file: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 200,
+    width: 180,
+    margin: 10,
+  },
+  fileTxt: {
+    textAlign: 'center',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 18,
+    padding: 5,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/PDFStyle.js b/ComApp/src/Resources/Styles/PDFStyle.js
index f6e982a..1cd1e6b 100644
--- a/ComApp/src/Resources/Styles/PDFStyle.js
+++ b/ComApp/src/Resources/Styles/PDFStyle.js
@@ -1,23 +1,23 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    text: {
-        height: 40,
-        width: 300,
-        borderColor: 'grey',
-        borderWidth: 1,
-        marginBottom: 20,
-    },
-    pdf: {
-        flex: 1,
-        width: Dimensions.get('window').width,
-        height: Dimensions.get('window').height,
-    },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    height: 40,
+    width: 300,
+    borderColor: 'grey',
+    borderWidth: 1,
+    marginBottom: 20,
+  },
+  pdf: {
+    flex: 1,
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/SearchStyle.js b/ComApp/src/Resources/Styles/SearchStyle.js
index 7cefdb5..593da16 100644
--- a/ComApp/src/Resources/Styles/SearchStyle.js
+++ b/ComApp/src/Resources/Styles/SearchStyle.js
@@ -1,33 +1,33 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'row',
-    },
-    scrollview: {
-        flex: 2,
-    },
-    filesContainer: {
-        flex: 1,
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-    },
-    file: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 200,
-        width: 180,
-        margin: 10,
-    },
-    fileTxt: {
-        textAlign: 'center',
-        color: 'white',
-        fontWeight: 'bold',
-        fontSize: 18,
-        padding: 5
-    }
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  scrollview: {
+    flex: 2,
+  },
+  filesContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  file: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 200,
+    width: 180,
+    margin: 10,
+  },
+  fileTxt: {
+    textAlign: 'center',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 18,
+    padding: 5,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Resources/Styles/SyncStyle.js b/ComApp/src/Resources/Styles/SyncStyle.js
index 920c963..377e126 100644
--- a/ComApp/src/Resources/Styles/SyncStyle.js
+++ b/ComApp/src/Resources/Styles/SyncStyle.js
@@ -1,14 +1,14 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    btnWrapper: {
-        marginTop: 20
-    }
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnWrapper: {
+    marginTop: 20,
+  },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/ComApp/src/Views/ContactDetails.js b/ComApp/src/Views/ContactDetails.js
index 6135ed2..700f516 100644
--- a/ComApp/src/Views/ContactDetails.js
+++ b/ComApp/src/Views/ContactDetails.js
@@ -1,877 +1,1146 @@
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  Button,
-  TextInput,
-  TouchableOpacity,
-  Text,
-  Alert,
-  ScrollView
-} from 'react-native';
-import { CheckBox, ButtonGroup, Overlay } from '@rneui/themed';
-import { connect } from 'react-redux';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { showMessage } from 'react-native-flash-message';
-import Helpers from "../Controllers/Helpers";
-import i18n from "../I18n";
-import { BarCodeScanner } from 'expo-barcode-scanner';
-import vCard from 'vcard-parser';
-import { Picker } from '@react-native-picker/picker';
-
-function mapStateToProps(state) {
-  return {
-    contacts: state.contacts,
-    currentUser: state.currentUser,
-  };
-}
-
-let date = new Date().getDate();
-if (date < 10) {
-  date = '0' + date.toString();
-}
-let month = new Date().getMonth() + 1;
-if (month < 10) {
-  month = '0' + month.toString();
-}
-const year = new Date().getFullYear();
-
-class ContactDetailsScreen extends React.Component {
-  state = {
-    action: 'add',
-    visits: [],
-    selectedVisit: 0,
-    tmpVisitNote: '',
-    newVisitTitle: date + '/' + month + '/' + year,
-    selectedIndex: 0,
-    showNewVisit: false,
-    tmpID: 0,
-    tmpNote: '',
-    tmpName: '',
-    tmpFirstname: '',
-    tmpEmail: '',
-    tmpCompany: '',
-    tmpAddress: '',
-    tmpPhone: '',
-    tmpSelect1: '',
-    tmpSelect2: '',
-    tmpOther: '',
-    clientChecked: false,
-    prospectChecked: false,
-    otherChecked: false,
-    p1: false,
-    p2: false,
-    p3: false,
-    p4: false,
-    p5: false,
-    p6: false,
-    p7: false,
-    p8: false,
-    p9: false,
-    showQRcodevCard: false,
-    parsedType: null,
-    parsedDatas: [],
-    hasPermission: null,
-    scanned: false,
-    showDynContact: false,
-    parsedName: '',
-    parsedFirstname: '',
-    parsedEmail: '',
-    parsedCompany: '',
-    parsedAddress: '',
-    parsedPhone: ''
-  };
-
-  updateContact() {
-    let error = '';
-    const { action } = this.props.route.params;
-    // On récupère le texte courant
-    if (this.state.visits.length > 0) {
-      this.state.visits[
-        this.state.selectedVisit
-      ].note = this.state.tmpVisitNote;
-    }
-    let type;
-    if (this.state.clientChecked === true) {
-      type = 'client';
-    } else if (this.state.prospectChecked === true) {
-      type = 'prospect';
-    } else if (this.state.otherChecked === true) {
-      type = 'other';
-      if (this.state.tmpOther.length === 0) {
-        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
-      }
-    } else {
-      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
-    }
-    if (this.state.tmpEmail.length < 5 || !Helpers.isEmailValid(this.state.tmpEmail)) {
-      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
-    }
-    if (this.state.tmpName.length === 0 || !Helpers.isValidRequiredString(this.state.tmpName)) {
-      error = error.concat(i18n.t('error.invalid_name') + '.\n');
-    }
-    if (this.state.tmpFirstname.length === 0 || !Helpers.isValidRequiredString(this.state.tmpFirstname)) {
-      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
-    }
-
-    if (error.length > 0) {
-      Alert.alert(i18n.t('global.warning') + ' !', error, [
-        { text: 'OK' },
-      ],
-        { cancelable: false },
-      );
-    } else {
-      const products = [
-        this.state.p1,
-        this.state.p2,
-        this.state.p3,
-        this.state.p4,
-        this.state.p5,
-        this.state.p6,
-        this.state.p7,
-        this.state.p8,
-        this.state.p9
-      ];
-      const contact = {
-        id: Helpers.generateUUID(),
-        email: this.state.tmpEmail,
-        type: type,
-        other: this.state.tmpOther,
-        select1: this.state.tmpSelect1,
-        select2: this.state.tmpSelect2,
-        name: this.state.tmpName,
-        firstname: this.state.tmpFirstname,
-        company: this.state.tmpCompany,
-        address: this.state.tmpAddress,
-        phone: this.state.tmpPhone,
-        products: JSON.stringify(products),
-        notes: this.state.tmpNote,
-        visits: JSON.stringify(this.state.visits),
-        to_delete: false,
-        synced: false,
-      };
-      if (action === 'edit') {
-        contact.id = this.state.tmpID;
-        this.props.dispatch({ type: 'EDIT_CONTACT', data: contact });
-        this.populate();
-        showMessage({
-          message: i18n.t('contact_details_s.contact_saved') + '.',
-          type: 'success',
-          duration: 500,
-        });
-      } else {
-        contact.user_id = this.props.currentUser.id;
-        this.props.dispatch({ type: 'ADD_CONTACT', data: contact });
-        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
-      }
-    }
-  }
-
-  updateContactType(type) {
-    if (type === 'client') {
-      this.setState({
-        clientChecked: true,
-        prospectChecked: false,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else if (type === 'prospect') {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: true,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: false,
-        otherChecked: true,
-      });
-    }
-  }
-
-  newVisit() {
-    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
-    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
-    this.setState({
-      tmpVisitNote: '',
-      visits: this.state.visits,
-      showNewVisit: false,
-      selectedVisit: 0,
-    });
-  }
-
-  deleteVisit() {
-    Alert.alert(
-      i18n.t('global.confirmation'),
-      i18n.t('contact_details_s.confirm_visit_delete'),
-      [
-        {
-          text: i18n.t('global.no'),
-          onPress: () => console.log('Cancel Pressed'),
-          style: 'cancel',
-        },
-        {
-          text: i18n.t('global.yes'),
-          onPress: () => {
-            this.state.visits.splice(this.state.selectedVisit, 1);
-            if (this.state.visits.length === 0) {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: '',
-              });
-            } else {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: this.state.visits[0].note,
-              });
-            }
-          },
-        },
-      ],
-      { cancelable: false },
-    );
-  }
-
-  populate() {
-    const { contactId } = this.props.route.params;
-    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
-    this.setState({
-      tmpID: contact.id,
-      tmpNote: contact.notes,
-      tmpName: contact.name,
-      tmpFirstname: contact.firstname,
-      tmpEmail: contact.email,
-      tmpCompany: contact.company,
-      tmpAddress: contact.address,
-      tmpPhone: contact.phone,
-      tmpSelect1: contact.select1,
-      tmpSelect2: contact.select2,
-      tmpOther: contact.other,
-      tmpProducts: contact.product,
-    });
-    if (contact.type === 'client') {
-      this.setState({ clientChecked: true });
-    } else if (contact.type === 'prospect') {
-      this.setState({ prospectChecked: true });
-    } else {
-      this.setState({ otherChecked: true });
-    }
-    if (contact.visits !== null) {
-      const tmp = JSON.parse(contact.visits);
-      this.setState({ visits: tmp });
-      if (tmp.length > 0) {
-        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
-      }
-    }
-    if (contact.products !== null) {
-      const tmp = JSON.parse(contact.products);
-      this.setState({
-        p1: tmp[0],
-        p2: tmp[1],
-        p3: tmp[2],
-        p4: tmp[3],
-        p5: tmp[4],
-        p6: tmp[5],
-        p7: tmp[6],
-        p8: tmp[7],
-        p9: tmp[8],
-        p10: tmp[9],
-      });
-    }
-  }
-
-  componentDidMount() {
-    const { action } = this.props.route.params;
-    if (action === 'edit') {
-      this.setState({ action: 'edit' });
-      this.populate();
-    }
-
-    BarCodeScanner.requestPermissionsAsync().then(res => {
-      this.setState({ hasPermission: res.status === 'granted' });
-    });
-
-  }
-
-  render() {
-    const handleBarCodeScanned = ({ type, data }) => {
-      this.setState({ scanned: true });
-      if (data.includes('VCARD')) {
-        let datas = vCard.parse(data);
-        let tmpDatas = [];
-        if (datas['n'] !== undefined) {
-          const nx = Object.assign({ n1: [{ value: datas['n'][0].value[0] }] }, { n2: [{ value: datas['n'][0].value[1] }] });
-          datas = Object.assign(datas, nx);
-        }
-        if (datas['adr'] !== undefined) {
-          let tmp = datas['adr'][0].value;
-          let tmpadr = '';
-          for (let i = 0; i < tmp.length; i++) {
-            if (tmp[i].length > 0) {
-              if (tmpadr.length > 0) {
-                tmpadr = tmpadr + ', ' + tmp[i];
-              } else {
-                tmpadr = tmp[i];
-              }
-            }
-          }
-          datas['adr'] = [{ value: tmpadr }];
-        }
-        Object.keys(datas).map((objectKey, index) => {
-          if (objectKey === 'email' || objectKey === 'adr' || objectKey === 'tel' || objectKey === 'org' || objectKey === 'n1' || objectKey === 'n2') {
-            let value = datas[objectKey][0].value;
-            if (typeof value === 'string') {
-              tmpDatas.push(value);
-            }
-          }
-        });
-        this.setState({ parsedType: 'vcard', parsedDatas: tmpDatas, showQRcodevCard: false, showDynContact: true })
-      } else {
-        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
-      }
-    };
-    return (
-      <View style={styles.container}>
-        <ScrollView style={{ flex: 1 }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.customer')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.clientChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('client')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.prospect')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.prospectChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('prospect')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.other')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.otherChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('other')}
-            />
-            {this.state.otherChecked === true && (
-              <TextInput
-                style={{
-                  backgroundColor: 'white',
-                  margin: 10,
-                  padding: 10,
-                  flex: 2,
-                }}
-                value={this.state.tmpOther}
-                placeholder={i18n.t('contact_details_s.description')}
-                onChangeText={text => this.setState({ tmpOther: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row' }}>
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpName}
-              placeholder={i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpName: text })}
-            />
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpFirstname}
-              placeholder={i18n.t('global.firstname') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpFirstname: text })}
-            />
-          </View>
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpEmail}
-            placeholder={i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'}
-            onChangeText={text => this.setState({ tmpEmail: text })}
-            autoCapitalize={'none'}
-            autoCorrect={false}
-            keyboardType={'email-address'}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpCompany}
-            placeholder={i18n.t('global.company')}
-            onChangeText={text => this.setState({ tmpCompany: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpAddress}
-            placeholder={i18n.t('global.address')}
-            onChangeText={text => this.setState({ tmpAddress: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpPhone}
-            placeholder={i18n.t('global.phone')}
-            onChangeText={text => this.setState({ tmpPhone: text })}
-            autoCompleteType={'tel'}
-            dataDetectorTypes={'phoneNumber'}
-            keyboardType={'phone-pad'}
-          />
-          <View style={{ flexDirection: 'row' }}>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect1}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect1: itemValue });
-                  }
-                }}>
-                <Picker.Item label={i18n.t('custom.select-1.title')} value="0" />
-                <Picker.Item label={i18n.t('custom.select-1.c1')} value="commerce-de-detail" />
-                <Picker.Item label={i18n.t('custom.select-1.c2')} value={'home-service-freezer-center'} />
-                <Picker.Item label={i18n.t('custom.select-1.c3')} value={'restauration-service-a-table'} />
-                <Picker.Item label={i18n.t('custom.select-1.c4')} value={'fast-food-et-snacking'} />
-                <Picker.Item label={i18n.t('custom.select-1.c5')} value={'cafetaria-self-service'} />
-                <Picker.Item label={i18n.t('custom.select-1.c6')} value={'societe-de-restauration'} />
-                <Picker.Item label={i18n.t('custom.select-1.c7')} value={'restauration-gre-a-gre-cuisine-centrale'} />
-                <Picker.Item label={i18n.t('custom.select-1.c8')} value={'distributeur-independant'} />
-                <Picker.Item label={i18n.t('custom.select-1.c9')} value={'boulangerie-patisserie'} />
-                <Picker.Item label={i18n.t('custom.select-1.c10')} value={'pai'} />
-                <Picker.Item label={i18n.t('custom.select-1.c11')} value={'destockeur'} />
-                <Picker.Item label={i18n.t('custom.select-1.c12')} value={'commerce-halal'} />
-                <Picker.Item label={i18n.t('custom.select-1.c13')} value={'restauration-d-hebergement'} />
-                <Picker.Item label={i18n.t('custom.select-1.c14')} value={'centrale-restauration-commerciale'} />
-                <Picker.Item label={i18n.t('custom.select-1.c15')} value={'restauration-evenementielle-et-parc'} />
-                <Picker.Item label={i18n.t('custom.select-1.c16')} value={'restauration-de-transport'} />
-                <Picker.Item label={i18n.t('custom.select-1.c17')} value={'marche-public'} />
-                <Picker.Item label={i18n.t('custom.select-1.c18')} value={'cash'} />
-                <Picker.Item label={i18n.t('custom.select-1.c19')} value={'distributeur-national'} />
-                <Picker.Item label={i18n.t('custom.select-1.c20')} value={'rungis'} />
-                <Picker.Item label={i18n.t('custom.select-1.c21')} value={'abbatoir'} />
-                <Picker.Item label={i18n.t('custom.select-1.c22')} value={'autre'} />
-              </Picker>
-            </View>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect2}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect2: itemValue });
-                  }
-                }}>
-                <Picker.Item label={i18n.t('custom.select-2.title')} value="0" />
-                <Picker.Item label={i18n.t('custom.select-2.c1')} value={'celvia-dinde'} />
-                <Picker.Item label={i18n.t('custom.select-2.c2')} value={'celvia-elabores'} />
-                <Picker.Item label={i18n.t('custom.select-2.c3')} value={'celvia-serent'} />
-                <Picker.Item label={i18n.t('custom.select-2.c4')} value={'procanar'} />
-                <Picker.Item label={i18n.t('custom.select-2.c5')} value={'celtys'} />
-                <Picker.Item label={i18n.t('custom.select-2.c6')} value={'farmor'} />
-                <Picker.Item label={i18n.t('custom.select-2.c7')} value={'robichon'} />
-                <Picker.Item label={i18n.t('custom.select-2.c8')} value={'les-volailles-de-keranna'} />
-                <Picker.Item label={i18n.t('custom.select-2.c9')} value={'bosher-volaille'} />
-                <Picker.Item label={i18n.t('custom.select-2.c10')} value={'ldc-bretagne'} />
-                <Picker.Item label={i18n.t('custom.select-2.c11')} value={'doux-farmor'} />
-                <Picker.Item label={i18n.t('custom.select-2.c12')} value={'favreau'} />
-              </Picker>
-            </View>
-          </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              justifyContent: 'center',
-            }}>
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p1')}
-              checked={this.state.p1}
-              onPress={() => this.setState({ p1: !this.state.p1 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p2')}
-              checked={this.state.p2}
-              onPress={() => this.setState({ p2: !this.state.p2 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p3')}
-              checked={this.state.p3}
-              onPress={() => this.setState({ p3: !this.state.p3 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p4')}
-              checked={this.state.p4}
-              onPress={() => this.setState({ p4: !this.state.p4 })}
-              containerStyle={styles.clearCheckbox}
-            />
-          </View>
-        </ScrollView>
-        <View style={{ flex: 1, margin: 5 }}>
-          <View style={{ flex: 1 }}>
-            <ButtonGroup
-              buttons={[i18n.t('contact_details_s.visits'), i18n.t('contact_details_s.notes')]}
-              selectedButtonStyle={{ backgroundColor: '#ea4f52' }}
-              containerStyle={{ height: 30 }}
-              selectedIndex={this.state.selectedIndex}
-              onPress={index => this.setState({ selectedIndex: index })}
-            />
-            {this.state.selectedIndex === 0 && (
-              <View style={{ flex: 1 }}>
-                <View style={{ flexDirection: 'row' }}>
-                  {this.state.visits.length > 0 && (
-                    <View style={{ flex: 2, flexDirection: 'row' }}>
-                      <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-                      <Picker
-                        style={styles.select}
-                        selectedValue={this.state.selectedVisit}
-                        onValueChange={(itemValue, itemIndex) => {
-                          this.state.visits[
-                            this.state.selectedVisit
-                          ].note = this.state.tmpVisitNote;
-                          this.setState({
-                            visits: this.state.visits,
-                            selectedVisit: itemIndex,
-                            tmpVisitNote: this.state.visits[itemIndex].note,
-                          });
-                        }}>
-                        {this.state.visits.map((item, index) => {
-                          return <Picker.Item label={item.title} value={index} />;
-                        })}
-                      </Picker>
-                    </View>
-                  )}
-                  {this.state.visits.length === 0 && (
-                    <View
-                      style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                      }}>
-                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
-                    </View>
-                  )}
-                  <View
-                    style={{
-                      flex: 1,
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'space-evenly',
-                      margin: 10,
-                    }}>
-                    <TouchableOpacity
-                      style={styles.button}
-                      onPress={() => this.setState({ showNewVisit: true })}>
-                      <Icon name="plus-circle" size={20} color={'#ea4f52'} />
-                    </TouchableOpacity>
-                    {this.state.visits.length > 0 && (
-                      <TouchableOpacity
-                        style={styles.button}
-                        onPress={() => this.deleteVisit()}>
-                        <Icon name="trash" size={20} color={'#ea4f52'} />
-                      </TouchableOpacity>
-                    )}
-                  </View>
-                </View>
-                {this.state.visits.length > 0 && (
-                  <TextInput
-                    style={styles.textArea}
-                    underlineColorAndroid="transparent"
-                    placeholder={i18n.t('contact_details_s.notes') + '...'}
-                    placeholderTextColor="grey"
-                    multiline={true}
-                    value={this.state.tmpVisitNote}
-                    onChangeText={text => this.setState({ tmpVisitNote: text })}
-                  />
-                )}
-              </View>
-            )}
-            {this.state.selectedIndex === 1 && (
-              <TextInput
-                style={styles.textArea}
-                underlineColorAndroid="transparent"
-                placeholder={i18n.t('contact_details_s.notes') + '...'}
-                placeholderTextColor="grey"
-                multiline={true}
-                value={this.state.tmpNote}
-                onChangeText={text => this.setState({ tmpNote: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
-            {this.state.action === 'add' && (
-              <>
-                <Button title="QRCode vCard" onPress={() => this.setState({ showQRcodevCard: true })} color={'#ea4f52'} />
-              </>
-            )}
-            <Button title={i18n.t('global.save')} onPress={() => this.updateContact()} color={'#ea4f52'} />
-          </View>
-        </View>
-        <Overlay
-          isVisible={this.state.showNewVisit}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View
-            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ marginBottom: 10 }}>{i18n.t('contact_details_s.visit_name')} :</Text>
-            <TextInput
-              placeholder={i18n.t('contact_details_s.visit_name')}
-              value={this.state.newVisitTitle}
-              onChangeText={text => this.setState({ newVisitTitle: text })}
-              style={{
-                borderWidth: 1,
-                borderColor: 'lightgrey',
-                width: 300,
-                marginBottom: 15,
-                paddingLeft: 10,
-              }}
-            />
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showNewVisit: false })}
-                color={'#ea4f52'}
-              />
-              <Button title={i18n.t('global.add')} onPress={() => this.newVisit()} color={'#ea4f52'} />
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showQRcodevCard}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            {this.state.hasPermission === true && (
-              <BarCodeScanner
-                onBarCodeScanned={this.state.scanned ? undefined : handleBarCodeScanned}
-                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
-                style={{ flex: 1, width: 380, height: 200 }}
-              />
-            )}
-            {this.state.hasPermission === false && (
-              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
-            )}
-            {this.state.hasPermission === null && (
-              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
-            )}
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showQRcodevCard: false, scanned: false })}
-                color={'#ea4f52'}
-              />
-              {this.state.scanned && <Button title={i18n.t('global.retry')} onPress={() => this.setState({ scanned: false })} color={'#ea4f52'} />}
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showDynContact}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={400}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-evenly' }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.name')}</Text>
-              <Picker
-                selectedValue={this.state.parsedName}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) => {
-                  this.setState({ parsedName: itemValue });
-                }}>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.firstname')}</Text>
-              <Picker
-                selectedValue={this.state.parsedFirstname}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedFirstname: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.email')}</Text>
-              <Picker
-                selectedValue={this.state.parsedEmail}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedEmail: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.company')}</Text>
-              <Picker
-                selectedValue={this.state.parsedCompany}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedCompany: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.address')}</Text>
-              <Picker
-                selectedValue={this.state.parsedAddress}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedAddress: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.phone')}</Text>
-              <Picker
-                selectedValue={this.state.parsedPhone}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedPhone: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showDynContact: false, scanned: false, parsedName: '', parsedFirstname: '', parsedEmail: '', parsedCompany: '', parsedAddress: '', parsedPhone: '' })}
-                color={'#ea4f52'}
-              />
-              <Button
-                title={i18n.t('global.next')}
-                onPress={() => this.setState({
-                  tmpName: this.state.parsedName,
-                  tmpFirstname: this.state.parsedFirstname,
-                  tmpEmail: this.state.parsedEmail,
-                  tmpCompany: this.state.parsedCompany,
-                  tmpAddress: this.state.parsedAddress,
-                  tmpPhone: this.state.parsedPhone,
-                  parsedName: '',
-                  parsedFirstname: '',
-                  parsedEmail: '',
-                  parsedCompany: '',
-                  parsedAddress: '',
-                  parsedPhone: '',
-                  showDynContact: false,
-                  scanned: false,
-                })}
-                color={'#ea4f52'}
-              />
-            </View>
-          </View>
-        </Overlay>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  input: {
-    backgroundColor: 'white',
-    margin: 10,
-    padding: 10,
-  },
-  clearCheckbox: {
-    backgroundColor: '#00000000',
-    borderWidth: 0,
-  },
-  clearRadio: {
-    flex: 1,
-    backgroundColor: '#00000000',
-    borderWidth: 0,
-  },
-  select: {
-    flex: 2,
-    margin: 10,
-    backgroundColor: 'white',
-  },
-  textArea: {
-    flex: 1,
-    margin: 10,
-    padding: 10,
-    backgroundColor: 'white',
-    textAlignVertical: 'top',
-  },
-  button: {
-    width: 35,
-    height: 35,
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 2,
-  },
-});
-
-export default connect(mapStateToProps)(ContactDetailsScreen);
+import { Picker } from '@react-native-picker/picker';
+import { ButtonGroup, CheckBox, Overlay } from '@rneui/themed';
+import { BarCodeScanner } from 'expo-barcode-scanner';
+import React from 'react';
+import {
+  Alert,
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { connect } from 'react-redux';
+import vCard from 'vcard-parser';
+import Helpers from '../Controllers/Helpers';
+import i18n from '../I18n';
+
+function mapStateToProps(state) {
+  return {
+    contacts: state.contacts,
+    currentUser: state.currentUser,
+  };
+}
+
+let date = new Date().getDate();
+if (date < 10) {
+  date = '0' + date.toString();
+}
+let month = new Date().getMonth() + 1;
+if (month < 10) {
+  month = '0' + month.toString();
+}
+const year = new Date().getFullYear();
+
+class ContactDetailsScreen extends React.Component {
+  state = {
+    action: 'add',
+    visits: [],
+    selectedVisit: 0,
+    tmpVisitNote: '',
+    newVisitTitle: date + '/' + month + '/' + year,
+    selectedIndex: 0,
+    showNewVisit: false,
+    tmpID: 0,
+    tmpNote: '',
+    tmpName: '',
+    tmpFirstname: '',
+    tmpEmail: '',
+    tmpCompany: '',
+    tmpAddress: '',
+    tmpPhone: '',
+    tmpSelect1: '',
+    tmpSelect2: '',
+    tmpOther: '',
+    clientChecked: false,
+    prospectChecked: false,
+    otherChecked: false,
+    p1: false,
+    p2: false,
+    p3: false,
+    p4: false,
+    p5: false,
+    p6: false,
+    p7: false,
+    p8: false,
+    p9: false,
+    showQRcodevCard: false,
+    parsedType: null,
+    parsedDatas: [],
+    hasPermission: null,
+    scanned: false,
+    showDynContact: false,
+    parsedName: '',
+    parsedFirstname: '',
+    parsedEmail: '',
+    parsedCompany: '',
+    parsedAddress: '',
+    parsedPhone: '',
+  };
+
+  updateContact() {
+    let error = '';
+    const { action } = this.props.route.params;
+    // On récupère le texte courant
+    if (this.state.visits.length > 0) {
+      this.state.visits[this.state.selectedVisit].note =
+        this.state.tmpVisitNote;
+    }
+    let type;
+    if (this.state.clientChecked === true) {
+      type = 'client';
+    } else if (this.state.prospectChecked === true) {
+      type = 'prospect';
+    } else if (this.state.otherChecked === true) {
+      type = 'other';
+      if (this.state.tmpOther.length === 0) {
+        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
+      }
+    } else {
+      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
+    }
+    if (
+      this.state.tmpEmail.length < 5 ||
+      !Helpers.isEmailValid(this.state.tmpEmail)
+    ) {
+      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
+    }
+    if (
+      this.state.tmpName.length === 0 ||
+      !Helpers.isValidRequiredString(this.state.tmpName)
+    ) {
+      error = error.concat(i18n.t('error.invalid_name') + '.\n');
+    }
+    if (
+      this.state.tmpFirstname.length === 0 ||
+      !Helpers.isValidRequiredString(this.state.tmpFirstname)
+    ) {
+      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
+    }
+
+    if (error.length > 0) {
+      Alert.alert(i18n.t('global.warning') + ' !', error, [{ text: 'OK' }], {
+        cancelable: false,
+      });
+    } else {
+      const products = [
+        this.state.p1,
+        this.state.p2,
+        this.state.p3,
+        this.state.p4,
+        this.state.p5,
+        this.state.p6,
+        this.state.p7,
+        this.state.p8,
+        this.state.p9,
+      ];
+      const contact = {
+        id: Helpers.generateUUID(),
+        email: this.state.tmpEmail,
+        type: type,
+        other: this.state.tmpOther,
+        select1: this.state.tmpSelect1,
+        select2: this.state.tmpSelect2,
+        name: this.state.tmpName,
+        firstname: this.state.tmpFirstname,
+        company: this.state.tmpCompany,
+        address: this.state.tmpAddress,
+        phone: this.state.tmpPhone,
+        products: JSON.stringify(products),
+        notes: this.state.tmpNote,
+        visits: JSON.stringify(this.state.visits),
+        to_delete: false,
+        synced: false,
+      };
+      if (action === 'edit') {
+        contact.id = this.state.tmpID;
+        this.props.dispatch({ type: 'EDIT_CONTACT', data: contact });
+        this.populate();
+        showMessage({
+          message: i18n.t('contact_details_s.contact_saved') + '.',
+          type: 'success',
+          duration: 500,
+        });
+      } else {
+        contact.user_id = this.props.currentUser.id;
+        this.props.dispatch({ type: 'ADD_CONTACT', data: contact });
+        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
+      }
+    }
+  }
+
+  updateContactType(type) {
+    if (type === 'client') {
+      this.setState({
+        clientChecked: true,
+        prospectChecked: false,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else if (type === 'prospect') {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: true,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: false,
+        otherChecked: true,
+      });
+    }
+  }
+
+  newVisit() {
+    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
+    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
+    this.setState({
+      tmpVisitNote: '',
+      visits: this.state.visits,
+      showNewVisit: false,
+      selectedVisit: 0,
+    });
+  }
+
+  deleteVisit() {
+    Alert.alert(
+      i18n.t('global.confirmation'),
+      i18n.t('contact_details_s.confirm_visit_delete'),
+      [
+        {
+          text: i18n.t('global.no'),
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'cancel',
+        },
+        {
+          text: i18n.t('global.yes'),
+          onPress: () => {
+            this.state.visits.splice(this.state.selectedVisit, 1);
+            if (this.state.visits.length === 0) {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: '',
+              });
+            } else {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: this.state.visits[0].note,
+              });
+            }
+          },
+        },
+      ],
+      { cancelable: false },
+    );
+  }
+
+  populate() {
+    const { contactId } = this.props.route.params;
+    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
+    this.setState({
+      tmpID: contact.id,
+      tmpNote: contact.notes,
+      tmpName: contact.name,
+      tmpFirstname: contact.firstname,
+      tmpEmail: contact.email,
+      tmpCompany: contact.company,
+      tmpAddress: contact.address,
+      tmpPhone: contact.phone,
+      tmpSelect1: contact.select1,
+      tmpSelect2: contact.select2,
+      tmpOther: contact.other,
+      tmpProducts: contact.product,
+    });
+    if (contact.type === 'client') {
+      this.setState({ clientChecked: true });
+    } else if (contact.type === 'prospect') {
+      this.setState({ prospectChecked: true });
+    } else {
+      this.setState({ otherChecked: true });
+    }
+    if (contact.visits !== null) {
+      const tmp = JSON.parse(contact.visits);
+      this.setState({ visits: tmp });
+      if (tmp.length > 0) {
+        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
+      }
+    }
+    if (contact.products !== null) {
+      const tmp = JSON.parse(contact.products);
+      this.setState({
+        p1: tmp[0],
+        p2: tmp[1],
+        p3: tmp[2],
+        p4: tmp[3],
+        p5: tmp[4],
+        p6: tmp[5],
+        p7: tmp[6],
+        p8: tmp[7],
+        p9: tmp[8],
+        p10: tmp[9],
+      });
+    }
+  }
+
+  componentDidMount() {
+    const { action } = this.props.route.params;
+    if (action === 'edit') {
+      this.setState({ action: 'edit' });
+      this.populate();
+    }
+
+    BarCodeScanner.requestPermissionsAsync().then(res => {
+      this.setState({ hasPermission: res.status === 'granted' });
+    });
+  }
+
+  render() {
+    const handleBarCodeScanned = ({ type, data }) => {
+      this.setState({ scanned: true });
+      if (data.includes('VCARD')) {
+        let datas = vCard.parse(data);
+        let tmpDatas = [];
+        if (datas.n !== undefined) {
+          const nx = Object.assign(
+            { n1: [{ value: datas.n[0].value[0] }] },
+            { n2: [{ value: datas.n[0].value[1] }] },
+          );
+          datas = Object.assign(datas, nx);
+        }
+        if (datas.adr !== undefined) {
+          let tmp = datas.adr[0].value;
+          let tmpadr = '';
+          for (let i = 0; i < tmp.length; i++) {
+            if (tmp[i].length > 0) {
+              if (tmpadr.length > 0) {
+                tmpadr = tmpadr + ', ' + tmp[i];
+              } else {
+                tmpadr = tmp[i];
+              }
+            }
+          }
+          datas.adr = [{ value: tmpadr }];
+        }
+        Object.keys(datas).map((objectKey, index) => {
+          if (
+            objectKey === 'email' ||
+            objectKey === 'adr' ||
+            objectKey === 'tel' ||
+            objectKey === 'org' ||
+            objectKey === 'n1' ||
+            objectKey === 'n2'
+          ) {
+            let value = datas[objectKey][0].value;
+            if (typeof value === 'string') {
+              tmpDatas.push(value);
+            }
+          }
+        });
+        this.setState({
+          parsedType: 'vcard',
+          parsedDatas: tmpDatas,
+          showQRcodevCard: false,
+          showDynContact: true,
+        });
+      } else {
+        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
+      }
+    };
+    return (
+      <View style={styles.container}>
+        <ScrollView style={{ flex: 1 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.customer')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.clientChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('client')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.prospect')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.prospectChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('prospect')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.other')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.otherChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('other')}
+            />
+            {this.state.otherChecked === true && (
+              <TextInput
+                style={{
+                  backgroundColor: 'white',
+                  margin: 10,
+                  padding: 10,
+                  flex: 2,
+                }}
+                value={this.state.tmpOther}
+                placeholder={i18n.t('contact_details_s.description')}
+                onChangeText={text => this.setState({ tmpOther: text })}
+              />
+            )}
+          </View>
+          <View style={{ flexDirection: 'row' }}>
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpName}
+              placeholder={
+                i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'
+              }
+              onChangeText={text => this.setState({ tmpName: text })}
+            />
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpFirstname}
+              placeholder={
+                i18n.t('global.firstname') +
+                ' (' +
+                i18n.t('global.required') +
+                ')'
+              }
+              onChangeText={text => this.setState({ tmpFirstname: text })}
+            />
+          </View>
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpEmail}
+            placeholder={
+              i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'
+            }
+            onChangeText={text => this.setState({ tmpEmail: text })}
+            autoCapitalize={'none'}
+            autoCorrect={false}
+            keyboardType={'email-address'}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpCompany}
+            placeholder={i18n.t('global.company')}
+            onChangeText={text => this.setState({ tmpCompany: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpAddress}
+            placeholder={i18n.t('global.address')}
+            onChangeText={text => this.setState({ tmpAddress: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpPhone}
+            placeholder={i18n.t('global.phone')}
+            onChangeText={text => this.setState({ tmpPhone: text })}
+            autoCompleteType={'tel'}
+            dataDetectorTypes={'phoneNumber'}
+            keyboardType={'phone-pad'}
+          />
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect1}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect1: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={i18n.t('custom.select-1.title')}
+                  value="0"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c1')}
+                  value="commerce-de-detail"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c2')}
+                  value={'home-service-freezer-center'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c3')}
+                  value={'restauration-service-a-table'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c4')}
+                  value={'fast-food-et-snacking'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c5')}
+                  value={'cafetaria-self-service'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c6')}
+                  value={'societe-de-restauration'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c7')}
+                  value={'restauration-gre-a-gre-cuisine-centrale'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c8')}
+                  value={'distributeur-independant'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c9')}
+                  value={'boulangerie-patisserie'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c10')}
+                  value={'pai'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c11')}
+                  value={'destockeur'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c12')}
+                  value={'commerce-halal'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c13')}
+                  value={'restauration-d-hebergement'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c14')}
+                  value={'centrale-restauration-commerciale'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c15')}
+                  value={'restauration-evenementielle-et-parc'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c16')}
+                  value={'restauration-de-transport'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c17')}
+                  value={'marche-public'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c18')}
+                  value={'cash'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c19')}
+                  value={'distributeur-national'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c20')}
+                  value={'rungis'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c21')}
+                  value={'abbatoir'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c22')}
+                  value={'autre'}
+                />
+              </Picker>
+            </View>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect2}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect2: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={i18n.t('custom.select-2.title')}
+                  value="0"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c1')}
+                  value={'celvia-dinde'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c2')}
+                  value={'celvia-elabores'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c3')}
+                  value={'celvia-serent'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c4')}
+                  value={'procanar'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c5')}
+                  value={'celtys'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c6')}
+                  value={'farmor'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c7')}
+                  value={'robichon'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c8')}
+                  value={'les-volailles-de-keranna'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c9')}
+                  value={'bosher-volaille'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c10')}
+                  value={'ldc-bretagne'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c11')}
+                  value={'doux-farmor'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c12')}
+                  value={'favreau'}
+                />
+              </Picker>
+            </View>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+            }}>
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p1')}
+              checked={this.state.p1}
+              onPress={() => this.setState({ p1: !this.state.p1 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p2')}
+              checked={this.state.p2}
+              onPress={() => this.setState({ p2: !this.state.p2 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p3')}
+              checked={this.state.p3}
+              onPress={() => this.setState({ p3: !this.state.p3 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p4')}
+              checked={this.state.p4}
+              onPress={() => this.setState({ p4: !this.state.p4 })}
+              containerStyle={styles.clearCheckbox}
+            />
+          </View>
+        </ScrollView>
+        <View style={{ flex: 1, margin: 5 }}>
+          <View style={{ flex: 1 }}>
+            <ButtonGroup
+              buttons={[
+                i18n.t('contact_details_s.visits'),
+                i18n.t('contact_details_s.notes'),
+              ]}
+              selectedButtonStyle={{ backgroundColor: '#ea4f52' }}
+              containerStyle={{ height: 30 }}
+              selectedIndex={this.state.selectedIndex}
+              onPress={index => this.setState({ selectedIndex: index })}
+            />
+            {this.state.selectedIndex === 0 && (
+              <View style={{ flex: 1 }}>
+                <View style={{ flexDirection: 'row' }}>
+                  {this.state.visits.length > 0 && (
+                    <View style={{ flex: 2, flexDirection: 'row' }}>
+                      <Icon
+                        name="sort-down"
+                        size={20}
+                        color={'black'}
+                        style={{
+                          zIndex: 1,
+                          position: 'absolute',
+                          right: 25,
+                          top: 20,
+                        }}
+                      />
+                      <Picker
+                        style={styles.select}
+                        selectedValue={this.state.selectedVisit}
+                        onValueChange={(itemValue, itemIndex) => {
+                          this.state.visits[this.state.selectedVisit].note =
+                            this.state.tmpVisitNote;
+                          this.setState({
+                            visits: this.state.visits,
+                            selectedVisit: itemIndex,
+                            tmpVisitNote: this.state.visits[itemIndex].note,
+                          });
+                        }}>
+                        {this.state.visits.map((item, index) => {
+                          return (
+                            <Picker.Item label={item.title} value={index} />
+                          );
+                        })}
+                      </Picker>
+                    </View>
+                  )}
+                  {this.state.visits.length === 0 && (
+                    <View
+                      style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}>
+                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
+                    </View>
+                  )}
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-evenly',
+                      margin: 10,
+                    }}>
+                    <TouchableOpacity
+                      style={styles.button}
+                      onPress={() => this.setState({ showNewVisit: true })}>
+                      <Icon name="plus-circle" size={20} color={'#ea4f52'} />
+                    </TouchableOpacity>
+                    {this.state.visits.length > 0 && (
+                      <TouchableOpacity
+                        style={styles.button}
+                        onPress={() => this.deleteVisit()}>
+                        <Icon name="trash" size={20} color={'#ea4f52'} />
+                      </TouchableOpacity>
+                    )}
+                  </View>
+                </View>
+                {this.state.visits.length > 0 && (
+                  <TextInput
+                    style={styles.textArea}
+                    underlineColorAndroid="transparent"
+                    placeholder={i18n.t('contact_details_s.notes') + '...'}
+                    placeholderTextColor="grey"
+                    multiline={true}
+                    value={this.state.tmpVisitNote}
+                    onChangeText={text => this.setState({ tmpVisitNote: text })}
+                  />
+                )}
+              </View>
+            )}
+            {this.state.selectedIndex === 1 && (
+              <TextInput
+                style={styles.textArea}
+                underlineColorAndroid="transparent"
+                placeholder={i18n.t('contact_details_s.notes') + '...'}
+                placeholderTextColor="grey"
+                multiline={true}
+                value={this.state.tmpNote}
+                onChangeText={text => this.setState({ tmpNote: text })}
+              />
+            )}
+          </View>
+          <View
+            style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
+            {this.state.action === 'add' && (
+              <>
+                <Button
+                  title="QRCode vCard"
+                  onPress={() => this.setState({ showQRcodevCard: true })}
+                  color={'#ea4f52'}
+                />
+              </>
+            )}
+            <Button
+              title={i18n.t('global.save')}
+              onPress={() => this.updateContact()}
+              color={'#ea4f52'}
+            />
+          </View>
+        </View>
+        <Overlay
+          isVisible={this.state.showNewVisit}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text style={{ marginBottom: 10 }}>
+              {i18n.t('contact_details_s.visit_name')} :
+            </Text>
+            <TextInput
+              placeholder={i18n.t('contact_details_s.visit_name')}
+              value={this.state.newVisitTitle}
+              onChangeText={text => this.setState({ newVisitTitle: text })}
+              style={{
+                borderWidth: 1,
+                borderColor: 'lightgrey',
+                width: 300,
+                marginBottom: 15,
+                paddingLeft: 10,
+              }}
+            />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() => this.setState({ showNewVisit: false })}
+                color={'#ea4f52'}
+              />
+              <Button
+                title={i18n.t('global.add')}
+                onPress={() => this.newVisit()}
+                color={'#ea4f52'}
+              />
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showQRcodevCard}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            {this.state.hasPermission === true && (
+              <BarCodeScanner
+                onBarCodeScanned={
+                  this.state.scanned ? undefined : handleBarCodeScanned
+                }
+                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
+                style={{ flex: 1, width: 380, height: 200 }}
+              />
+            )}
+            {this.state.hasPermission === false && (
+              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
+            )}
+            {this.state.hasPermission === null && (
+              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
+            )}
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({ showQRcodevCard: false, scanned: false })
+                }
+                color={'#ea4f52'}
+              />
+              {this.state.scanned && (
+                <Button
+                  title={i18n.t('global.retry')}
+                  onPress={() => this.setState({ scanned: false })}
+                  color={'#ea4f52'}
+                />
+              )}
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showDynContact}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={400}>
+          <View
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'space-evenly',
+            }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.name')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedName}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) => {
+                  this.setState({ parsedName: itemValue });
+                }}>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.firstname')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedFirstname}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedFirstname: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.email')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedEmail}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedEmail: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.company')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedCompany}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedCompany: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.address')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedAddress}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedAddress: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.phone')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedPhone}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedPhone: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({
+                    showDynContact: false,
+                    scanned: false,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                  })
+                }
+                color={'#ea4f52'}
+              />
+              <Button
+                title={i18n.t('global.next')}
+                onPress={() =>
+                  this.setState({
+                    tmpName: this.state.parsedName,
+                    tmpFirstname: this.state.parsedFirstname,
+                    tmpEmail: this.state.parsedEmail,
+                    tmpCompany: this.state.parsedCompany,
+                    tmpAddress: this.state.parsedAddress,
+                    tmpPhone: this.state.parsedPhone,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                    showDynContact: false,
+                    scanned: false,
+                  })
+                }
+                color={'#ea4f52'}
+              />
+            </View>
+          </View>
+        </Overlay>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  input: {
+    backgroundColor: 'white',
+    margin: 10,
+    padding: 10,
+  },
+  clearCheckbox: {
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  clearRadio: {
+    flex: 1,
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  select: {
+    flex: 2,
+    margin: 10,
+    backgroundColor: 'white',
+  },
+  textArea: {
+    flex: 1,
+    margin: 10,
+    padding: 10,
+    backgroundColor: 'white',
+    textAlignVertical: 'top',
+  },
+  button: {
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 2,
+  },
+});
+
+export default connect(mapStateToProps)(ContactDetailsScreen);
diff --git a/ComApp/src/Views/ContactDetails_MC.js b/ComApp/src/Views/ContactDetails_MC.js
index 2414324..ebb0002 100644
--- a/ComApp/src/Views/ContactDetails_MC.js
+++ b/ComApp/src/Views/ContactDetails_MC.js
@@ -1,877 +1,1140 @@
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  Button,
-  TextInput,
-  TouchableOpacity,
-  Text,
-  Alert,
-  ScrollView
-} from 'react-native';
-import { CheckBox, ButtonGroup, Overlay } from '@rneui/themed';
-import { connect } from 'react-redux';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { showMessage } from 'react-native-flash-message';
-import Helpers from "../Controllers/Helpers";
-import i18n from "../I18n";
-import { BarCodeScanner } from 'expo-barcode-scanner';
-import vCard from 'vcard-parser';
-import { Picker } from '@react-native-picker/picker';
-
-function mapStateToProps(state) {
-  return {
-    contacts: state.contacts,
-    currentUser: state.currentUser,
-  };
-}
-
-let date = new Date().getDate();
-if (date < 10) {
-  date = '0' + date.toString();
-}
-let month = new Date().getMonth() + 1;
-if (month < 10) {
-  month = '0' + month.toString();
-}
-const year = new Date().getFullYear();
-
-class ContactDetailsScreen extends React.Component {
-  state = {
-    action: 'add',
-    visits: [],
-    selectedVisit: 0,
-    tmpVisitNote: '',
-    newVisitTitle: date + '/' + month + '/' + year,
-    selectedIndex: 0,
-    showNewVisit: false,
-    tmpID: 0,
-    tmpNote: '',
-    tmpName: '',
-    tmpFirstname: '',
-    tmpEmail: '',
-    tmpCompany: '',
-    tmpAddress: '',
-    tmpPhone: '',
-    tmpSelect1: '',
-    tmpSelect2: '',
-    tmpOther: '',
-    clientChecked: false,
-    prospectChecked: false,
-    otherChecked: false,
-    p1: false,
-    p2: false,
-    p3: false,
-    p4: false,
-    p5: false,
-    p6: false,
-    p7: false,
-    p8: false,
-    p9: false,
-    showQRcodevCard: false,
-    parsedType: null,
-    parsedDatas: [],
-    hasPermission: null,
-    scanned: false,
-    showDynContact: false,
-    parsedName: '',
-    parsedFirstname: '',
-    parsedEmail: '',
-    parsedCompany: '',
-    parsedAddress: '',
-    parsedPhone: ''
-  };
-
-  updateContact() {
-    let error = '';
-    const { action } = this.props.route.params;
-    // On récupère le texte courant
-    if (this.state.visits.length > 0) {
-      this.state.visits[
-        this.state.selectedVisit
-      ].note = this.state.tmpVisitNote;
-    }
-    let type;
-    if (this.state.clientChecked === true) {
-      type = 'client';
-    } else if (this.state.prospectChecked === true) {
-      type = 'prospect';
-    } else if (this.state.otherChecked === true) {
-      type = 'other';
-      if (this.state.tmpOther.length === 0) {
-        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
-      }
-    } else {
-      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
-    }
-    if (this.state.tmpEmail.length < 5 || !Helpers.isEmailValid(this.state.tmpEmail)) {
-      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
-    }
-    if (this.state.tmpName.length === 0) {
-      error = error.concat(i18n.t('error.invalid_name') + '.\n');
-    }
-    if (this.state.tmpFirstname.length === 0) {
-      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
-    }
-
-    if (error.length > 0) {
-      Alert.alert(i18n.t('global.warning') + ' !', error, [
-        { text: 'OK' },
-      ],
-        { cancelable: false },
-      );
-    } else {
-      const products = [
-        this.state.p1,
-        this.state.p2,
-        this.state.p3,
-        this.state.p4,
-        this.state.p5,
-        this.state.p6,
-        this.state.p7,
-        this.state.p8,
-        this.state.p9
-      ];
-      const contact = {
-        id: Helpers.generateUUID(),
-        email: this.state.tmpEmail,
-        type: type,
-        other: this.state.tmpOther,
-        select1: this.state.tmpSelect1,
-        select2: this.state.tmpSelect2,
-        name: this.state.tmpName,
-        firstname: this.state.tmpFirstname,
-        company: this.state.tmpCompany,
-        address: this.state.tmpAddress,
-        phone: this.state.tmpPhone,
-        products: JSON.stringify(products),
-        notes: this.state.tmpNote,
-        visits: JSON.stringify(this.state.visits),
-        to_delete: false,
-        synced: false,
-      };
-      if (action === 'edit') {
-        contact.id = this.state.tmpID;
-        this.props.dispatch({ type: 'EDIT_CONTACT', data: contact });
-        this.populate();
-        showMessage({
-          message: i18n.t('contact_details_s.contact_saved') + '.',
-          type: 'success',
-          duration: 500,
-        });
-      } else {
-        contact.user_id = this.props.currentUser.id;
-        this.props.dispatch({ type: 'ADD_CONTACT', data: contact });
-        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
-      }
-    }
-  }
-
-  updateContactType(type) {
-    if (type === 'client') {
-      this.setState({
-        clientChecked: true,
-        prospectChecked: false,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else if (type === 'prospect') {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: true,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: false,
-        otherChecked: true,
-      });
-    }
-  }
-
-  newVisit() {
-    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
-    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
-    this.setState({
-      tmpVisitNote: '',
-      visits: this.state.visits,
-      showNewVisit: false,
-      selectedVisit: 0,
-    });
-  }
-
-  deleteVisit() {
-    Alert.alert(
-      i18n.t('global.confirmation'),
-      i18n.t('contact_details_s.confirm_visit_delete'),
-      [
-        {
-          text: i18n.t('global.no'),
-          onPress: () => console.log('Cancel Pressed'),
-          style: 'cancel',
-        },
-        {
-          text: i18n.t('global.yes'),
-          onPress: () => {
-            this.state.visits.splice(this.state.selectedVisit, 1);
-            if (this.state.visits.length === 0) {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: '',
-              });
-            } else {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: this.state.visits[0].note,
-              });
-            }
-          },
-        },
-      ],
-      { cancelable: false },
-    );
-  }
-
-  populate() {
-    const { contactId } = this.props.route.params;
-    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
-    this.setState({
-      tmpID: contact.id,
-      tmpNote: contact.notes,
-      tmpName: contact.name,
-      tmpFirstname: contact.firstname,
-      tmpEmail: contact.email,
-      tmpCompany: contact.company,
-      tmpAddress: contact.address,
-      tmpPhone: contact.phone,
-      tmpSelect1: contact.select1,
-      tmpSelect2: contact.select2,
-      tmpOther: contact.other,
-      tmpProducts: contact.product,
-    });
-    if (contact.type === 'client') {
-      this.setState({ clientChecked: true });
-    } else if (contact.type === 'prospect') {
-      this.setState({ prospectChecked: true });
-    } else {
-      this.setState({ otherChecked: true });
-    }
-    if (contact.visits !== null) {
-      const tmp = JSON.parse(contact.visits);
-      this.setState({ visits: tmp });
-      if (tmp.length > 0) {
-        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
-      }
-    }
-    if (contact.products !== null) {
-      const tmp = JSON.parse(contact.products);
-      this.setState({
-        p1: tmp[0],
-        p2: tmp[1],
-        p3: tmp[2],
-        p4: tmp[3],
-        p5: tmp[4],
-        p6: tmp[5],
-        p7: tmp[6],
-        p8: tmp[7],
-        p9: tmp[8],
-        p10: tmp[9],
-      });
-    }
-  }
-
-  componentDidMount() {
-    const { action } = this.props.route.params;
-    if (action === 'edit') {
-      this.setState({ action: 'edit' });
-      this.populate();
-    }
-
-    BarCodeScanner.requestPermissionsAsync().then(res => {
-      this.setState({ hasPermission: res.status === 'granted' });
-    });
-
-  }
-
-  render() {
-    const handleBarCodeScanned = ({ type, data }) => {
-      this.setState({ scanned: true });
-      if (data.includes('VCARD')) {
-        let datas = vCard.parse(data);
-        let tmpDatas = [];
-        if (datas['n'] !== undefined) {
-          const nx = Object.assign({ n1: [{ value: datas['n'][0].value[0] }] }, { n2: [{ value: datas['n'][0].value[1] }] });
-          datas = Object.assign(datas, nx);
-        }
-        if (datas['adr'] !== undefined) {
-          let tmp = datas['adr'][0].value;
-          let tmpadr = '';
-          for (let i = 0; i < tmp.length; i++) {
-            if (tmp[i].length > 0) {
-              if (tmpadr.length > 0) {
-                tmpadr = tmpadr + ', ' + tmp[i];
-              } else {
-                tmpadr = tmp[i];
-              }
-            }
-          }
-          datas['adr'] = [{ value: tmpadr }];
-        }
-        Object.keys(datas).map((objectKey, index) => {
-          if (objectKey === 'email' || objectKey === 'adr' || objectKey === 'tel' || objectKey === 'org' || objectKey === 'n1' || objectKey === 'n2') {
-            let value = datas[objectKey][0].value;
-            if (typeof value === 'string') {
-              tmpDatas.push(value);
-            }
-          }
-        });
-        this.setState({ parsedType: 'vcard', parsedDatas: tmpDatas, showQRcodevCard: false, showDynContact: true })
-      } else {
-        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
-      }
-    };
-    return (
-      <View style={styles.container}>
-        <ScrollView style={{ flex: 1 }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.customer')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.clientChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('client')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.prospect')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.prospectChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('prospect')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.other')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.otherChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('other')}
-            />
-            {this.state.otherChecked === true && (
-              <TextInput
-                style={{
-                  backgroundColor: 'white',
-                  margin: 10,
-                  padding: 10,
-                  flex: 2,
-                }}
-                value={this.state.tmpOther}
-                placeholder={i18n.t('contact_details_s.description')}
-                onChangeText={text => this.setState({ tmpOther: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row' }}>
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpName}
-              placeholder={i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpName: text })}
-            />
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpFirstname}
-              placeholder={i18n.t('global.firstname') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpFirstname: text })}
-            />
-          </View>
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpEmail}
-            placeholder={i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'}
-            onChangeText={text => this.setState({ tmpEmail: text })}
-            autoCapitalize={'none'}
-            autoCorrect={false}
-            keyboardType={'email-address'}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpCompany}
-            placeholder={i18n.t('global.company')}
-            onChangeText={text => this.setState({ tmpCompany: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpAddress}
-            placeholder={i18n.t('global.address')}
-            onChangeText={text => this.setState({ tmpAddress: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpPhone}
-            placeholder={i18n.t('global.phone')}
-            onChangeText={text => this.setState({ tmpPhone: text })}
-            autoCompleteType={'tel'}
-            dataDetectorTypes={'phoneNumber'}
-            keyboardType={'phone-pad'}
-          />
-          <View style={{ flexDirection: 'row' }}>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect1}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect1: itemValue });
-                  }
-                }}>
-                <Picker.Item label={i18n.t('custom.select-1.title')} value="0" />
-                <Picker.Item label={i18n.t('custom.select-1.c1')} value="commerce-de-detail" />
-                <Picker.Item label={i18n.t('custom.select-1.c2')} value={'home-service-freezer-center'} />
-                <Picker.Item label={i18n.t('custom.select-1.c3')} value={'restauration-service-a-table'} />
-                <Picker.Item label={i18n.t('custom.select-1.c4')} value={'fast-food-et-snacking'} />
-                <Picker.Item label={i18n.t('custom.select-1.c5')} value={'cafetaria-self-service'} />
-                <Picker.Item label={i18n.t('custom.select-1.c6')} value={'societe-de-restauration'} />
-                <Picker.Item label={i18n.t('custom.select-1.c7')} value={'restauration-gre-a-gre-cuisine-centrale'} />
-                <Picker.Item label={i18n.t('custom.select-1.c8')} value={'distributeur-independant'} />
-                <Picker.Item label={i18n.t('custom.select-1.c9')} value={'boulangerie-patisserie'} />
-                <Picker.Item label={i18n.t('custom.select-1.c10')} value={'pai'} />
-                <Picker.Item label={i18n.t('custom.select-1.c11')} value={'destockeur'} />
-                <Picker.Item label={i18n.t('custom.select-1.c12')} value={'commerce-halal'} />
-                <Picker.Item label={i18n.t('custom.select-1.c13')} value={'restauration-d-hebergement'} />
-                <Picker.Item label={i18n.t('custom.select-1.c14')} value={'centrale-restauration-commerciale'} />
-                <Picker.Item label={i18n.t('custom.select-1.c15')} value={'restauration-evenementielle-et-parc'} />
-                <Picker.Item label={i18n.t('custom.select-1.c16')} value={'restauration-de-transport'} />
-                <Picker.Item label={i18n.t('custom.select-1.c17')} value={'marche-public'} />
-                <Picker.Item label={i18n.t('custom.select-1.c18')} value={'cash'} />
-                <Picker.Item label={i18n.t('custom.select-1.c19')} value={'distributeur-national'} />
-                <Picker.Item label={i18n.t('custom.select-1.c20')} value={'rungis'} />
-                <Picker.Item label={i18n.t('custom.select-1.c21')} value={'abbatoir'} />
-                <Picker.Item label={i18n.t('custom.select-1.c22')} value={'autre'} />
-              </Picker>
-            </View>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect2}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect2: itemValue });
-                  }
-                }}>
-                <Picker.Item label={i18n.t('custom.select-2.title')} value="0" />
-                <Picker.Item label={i18n.t('custom.select-2.c1')} value={'celvia-dinde'} />
-                <Picker.Item label={i18n.t('custom.select-2.c2')} value={'celvia-elabores'} />
-                <Picker.Item label={i18n.t('custom.select-2.c3')} value={'celvia-serent'} />
-                <Picker.Item label={i18n.t('custom.select-2.c4')} value={'procanar'} />
-                <Picker.Item label={i18n.t('custom.select-2.c5')} value={'celtys'} />
-                <Picker.Item label={i18n.t('custom.select-2.c6')} value={'farmor'} />
-                <Picker.Item label={i18n.t('custom.select-2.c7')} value={'robichon'} />
-                <Picker.Item label={i18n.t('custom.select-2.c8')} value={'les-volailles-de-keranna'} />
-                <Picker.Item label={i18n.t('custom.select-2.c9')} value={'bosher-volaille'} />
-                <Picker.Item label={i18n.t('custom.select-2.c10')} value={'ldc-bretagne'} />
-                <Picker.Item label={i18n.t('custom.select-2.c11')} value={'doux-farmor'} />
-                <Picker.Item label={i18n.t('custom.select-2.c12')} value={'favreau'} />
-              </Picker>
-            </View>
-          </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              justifyContent: 'center',
-            }}>
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p1')}
-              checked={this.state.p1}
-              onPress={() => this.setState({ p1: !this.state.p1 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p2')}
-              checked={this.state.p2}
-              onPress={() => this.setState({ p2: !this.state.p2 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p3')}
-              checked={this.state.p3}
-              onPress={() => this.setState({ p3: !this.state.p3 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p4')}
-              checked={this.state.p4}
-              onPress={() => this.setState({ p4: !this.state.p4 })}
-              containerStyle={styles.clearCheckbox}
-            />
-          </View>
-        </ScrollView>
-        <View style={{ flex: 1, margin: 5 }}>
-          <View style={{ flex: 1 }}>
-            <ButtonGroup
-              buttons={[i18n.t('contact_details_s.visits'), i18n.t('contact_details_s.notes')]}
-              selectedButtonStyle={{ backgroundColor: '#ea4f52' }}
-              containerStyle={{ height: 30 }}
-              selectedIndex={this.state.selectedIndex}
-              onPress={index => this.setState({ selectedIndex: index })}
-            />
-            {this.state.selectedIndex === 0 && (
-              <View style={{ flex: 1 }}>
-                <View style={{ flexDirection: 'row' }}>
-                  {this.state.visits.length > 0 && (
-                    <View style={{ flex: 2, flexDirection: 'row' }}>
-                      <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-                      <Picker
-                        style={styles.select}
-                        selectedValue={this.state.selectedVisit}
-                        onValueChange={(itemValue, itemIndex) => {
-                          this.state.visits[
-                            this.state.selectedVisit
-                          ].note = this.state.tmpVisitNote;
-                          this.setState({
-                            visits: this.state.visits,
-                            selectedVisit: itemIndex,
-                            tmpVisitNote: this.state.visits[itemIndex].note,
-                          });
-                        }}>
-                        {this.state.visits.map((item, index) => {
-                          return <Picker.Item label={item.title} value={index} />;
-                        })}
-                      </Picker>
-                    </View>
-                  )}
-                  {this.state.visits.length === 0 && (
-                    <View
-                      style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                      }}>
-                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
-                    </View>
-                  )}
-                  <View
-                    style={{
-                      flex: 1,
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'space-evenly',
-                      margin: 10,
-                    }}>
-                    <TouchableOpacity
-                      style={styles.button}
-                      onPress={() => this.setState({ showNewVisit: true })}>
-                      <Icon name="plus-circle" size={20} color={'#ea4f52'} />
-                    </TouchableOpacity>
-                    {this.state.visits.length > 0 && (
-                      <TouchableOpacity
-                        style={styles.button}
-                        onPress={() => this.deleteVisit()}>
-                        <Icon name="trash" size={20} color={'#ea4f52'} />
-                      </TouchableOpacity>
-                    )}
-                  </View>
-                </View>
-                {this.state.visits.length > 0 && (
-                  <TextInput
-                    style={styles.textArea}
-                    underlineColorAndroid="transparent"
-                    placeholder={i18n.t('contact_details_s.notes') + '...'}
-                    placeholderTextColor="grey"
-                    multiline={true}
-                    value={this.state.tmpVisitNote}
-                    onChangeText={text => this.setState({ tmpVisitNote: text })}
-                  />
-                )}
-              </View>
-            )}
-            {this.state.selectedIndex === 1 && (
-              <TextInput
-                style={styles.textArea}
-                underlineColorAndroid="transparent"
-                placeholder={i18n.t('contact_details_s.notes') + '...'}
-                placeholderTextColor="grey"
-                multiline={true}
-                value={this.state.tmpNote}
-                onChangeText={text => this.setState({ tmpNote: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
-            {this.state.action === 'add' && (
-              <>
-                <Button title="QRCode vCard" onPress={() => this.setState({ showQRcodevCard: true })} color={'#ea4f52'} />
-              </>
-            )}
-            <Button title={i18n.t('global.save')} onPress={() => this.updateContact()} color={'#ea4f52'} />
-          </View>
-        </View>
-        <Overlay
-          isVisible={this.state.showNewVisit}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View
-            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ marginBottom: 10 }}>{i18n.t('contact_details_s.visit_name')} :</Text>
-            <TextInput
-              placeholder={i18n.t('contact_details_s.visit_name')}
-              value={this.state.newVisitTitle}
-              onChangeText={text => this.setState({ newVisitTitle: text })}
-              style={{
-                borderWidth: 1,
-                borderColor: 'lightgrey',
-                width: 300,
-                marginBottom: 15,
-                paddingLeft: 10,
-              }}
-            />
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showNewVisit: false })}
-                color={'#ea4f52'}
-              />
-              <Button title={i18n.t('global.add')} onPress={() => this.newVisit()} color={'#ea4f52'} />
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showQRcodevCard}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            {this.state.hasPermission === true && (
-              <BarCodeScanner
-                onBarCodeScanned={this.state.scanned ? undefined : handleBarCodeScanned}
-                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
-                style={{ flex: 1, width: 380, height: 200 }}
-              />
-            )}
-            {this.state.hasPermission === false && (
-              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
-            )}
-            {this.state.hasPermission === null && (
-              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
-            )}
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showQRcodevCard: false, scanned: false })}
-                color={'#ea4f52'}
-              />
-              {this.state.scanned && <Button title={i18n.t('global.retry')} onPress={() => this.setState({ scanned: false })} color={'#ea4f52'} />}
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showDynContact}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={400}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-evenly' }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.name')}</Text>
-              <Picker
-                selectedValue={this.state.parsedName}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) => {
-                  this.setState({ parsedName: itemValue });
-                }}>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.firstname')}</Text>
-              <Picker
-                selectedValue={this.state.parsedFirstname}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedFirstname: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.email')}</Text>
-              <Picker
-                selectedValue={this.state.parsedEmail}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedEmail: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.company')}</Text>
-              <Picker
-                selectedValue={this.state.parsedCompany}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedCompany: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.address')}</Text>
-              <Picker
-                selectedValue={this.state.parsedAddress}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedAddress: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.phone')}</Text>
-              <Picker
-                selectedValue={this.state.parsedPhone}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedPhone: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showDynContact: false, scanned: false, parsedName: '', parsedFirstname: '', parsedEmail: '', parsedCompany: '', parsedAddress: '', parsedPhone: '' })}
-                color={'#ea4f52'}
-              />
-              <Button
-                title={i18n.t('global.next')}
-                onPress={() => this.setState({
-                  tmpName: this.state.parsedName,
-                  tmpFirstname: this.state.parsedFirstname,
-                  tmpEmail: this.state.parsedEmail,
-                  tmpCompany: this.state.parsedCompany,
-                  tmpAddress: this.state.parsedAddress,
-                  tmpPhone: this.state.parsedPhone,
-                  parsedName: '',
-                  parsedFirstname: '',
-                  parsedEmail: '',
-                  parsedCompany: '',
-                  parsedAddress: '',
-                  parsedPhone: '',
-                  showDynContact: false,
-                  scanned: false,
-                })}
-                color={'#ea4f52'}
-              />
-            </View>
-          </View>
-        </Overlay>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  input: {
-    backgroundColor: 'white',
-    margin: 10,
-    padding: 10,
-  },
-  clearCheckbox: {
-    backgroundColor: '#00000000',
-    borderWidth: 0,
-  },
-  clearRadio: {
-    flex: 1,
-    backgroundColor: '#00000000',
-    borderWidth: 0,
-  },
-  select: {
-    flex: 2,
-    margin: 10,
-    backgroundColor: 'white',
-  },
-  textArea: {
-    flex: 1,
-    margin: 10,
-    padding: 10,
-    backgroundColor: 'white',
-    textAlignVertical: 'top',
-  },
-  button: {
-    width: 35,
-    height: 35,
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 2,
-  },
-});
-
-export default connect(mapStateToProps)(ContactDetailsScreen);
+import { Picker } from '@react-native-picker/picker';
+import { ButtonGroup, CheckBox, Overlay } from '@rneui/themed';
+import { BarCodeScanner } from 'expo-barcode-scanner';
+import React from 'react';
+import {
+  Alert,
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { connect } from 'react-redux';
+import vCard from 'vcard-parser';
+import Helpers from '../Controllers/Helpers';
+import i18n from '../I18n';
+
+function mapStateToProps(state) {
+  return {
+    contacts: state.contacts,
+    currentUser: state.currentUser,
+  };
+}
+
+let date = new Date().getDate();
+if (date < 10) {
+  date = '0' + date.toString();
+}
+let month = new Date().getMonth() + 1;
+if (month < 10) {
+  month = '0' + month.toString();
+}
+const year = new Date().getFullYear();
+
+class ContactDetailsScreen extends React.Component {
+  state = {
+    action: 'add',
+    visits: [],
+    selectedVisit: 0,
+    tmpVisitNote: '',
+    newVisitTitle: date + '/' + month + '/' + year,
+    selectedIndex: 0,
+    showNewVisit: false,
+    tmpID: 0,
+    tmpNote: '',
+    tmpName: '',
+    tmpFirstname: '',
+    tmpEmail: '',
+    tmpCompany: '',
+    tmpAddress: '',
+    tmpPhone: '',
+    tmpSelect1: '',
+    tmpSelect2: '',
+    tmpOther: '',
+    clientChecked: false,
+    prospectChecked: false,
+    otherChecked: false,
+    p1: false,
+    p2: false,
+    p3: false,
+    p4: false,
+    p5: false,
+    p6: false,
+    p7: false,
+    p8: false,
+    p9: false,
+    showQRcodevCard: false,
+    parsedType: null,
+    parsedDatas: [],
+    hasPermission: null,
+    scanned: false,
+    showDynContact: false,
+    parsedName: '',
+    parsedFirstname: '',
+    parsedEmail: '',
+    parsedCompany: '',
+    parsedAddress: '',
+    parsedPhone: '',
+  };
+
+  updateContact() {
+    let error = '';
+    const { action } = this.props.route.params;
+    // On récupère le texte courant
+    if (this.state.visits.length > 0) {
+      this.state.visits[this.state.selectedVisit].note =
+        this.state.tmpVisitNote;
+    }
+    let type;
+    if (this.state.clientChecked === true) {
+      type = 'client';
+    } else if (this.state.prospectChecked === true) {
+      type = 'prospect';
+    } else if (this.state.otherChecked === true) {
+      type = 'other';
+      if (this.state.tmpOther.length === 0) {
+        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
+      }
+    } else {
+      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
+    }
+    if (
+      this.state.tmpEmail.length < 5 ||
+      !Helpers.isEmailValid(this.state.tmpEmail)
+    ) {
+      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
+    }
+    if (this.state.tmpName.length === 0) {
+      error = error.concat(i18n.t('error.invalid_name') + '.\n');
+    }
+    if (this.state.tmpFirstname.length === 0) {
+      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
+    }
+
+    if (error.length > 0) {
+      Alert.alert(i18n.t('global.warning') + ' !', error, [{ text: 'OK' }], {
+        cancelable: false,
+      });
+    } else {
+      const products = [
+        this.state.p1,
+        this.state.p2,
+        this.state.p3,
+        this.state.p4,
+        this.state.p5,
+        this.state.p6,
+        this.state.p7,
+        this.state.p8,
+        this.state.p9,
+      ];
+      const contact = {
+        id: Helpers.generateUUID(),
+        email: this.state.tmpEmail,
+        type: type,
+        other: this.state.tmpOther,
+        select1: this.state.tmpSelect1,
+        select2: this.state.tmpSelect2,
+        name: this.state.tmpName,
+        firstname: this.state.tmpFirstname,
+        company: this.state.tmpCompany,
+        address: this.state.tmpAddress,
+        phone: this.state.tmpPhone,
+        products: JSON.stringify(products),
+        notes: this.state.tmpNote,
+        visits: JSON.stringify(this.state.visits),
+        to_delete: false,
+        synced: false,
+      };
+      if (action === 'edit') {
+        contact.id = this.state.tmpID;
+        this.props.dispatch({ type: 'EDIT_CONTACT', data: contact });
+        this.populate();
+        showMessage({
+          message: i18n.t('contact_details_s.contact_saved') + '.',
+          type: 'success',
+          duration: 500,
+        });
+      } else {
+        contact.user_id = this.props.currentUser.id;
+        this.props.dispatch({ type: 'ADD_CONTACT', data: contact });
+        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
+      }
+    }
+  }
+
+  updateContactType(type) {
+    if (type === 'client') {
+      this.setState({
+        clientChecked: true,
+        prospectChecked: false,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else if (type === 'prospect') {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: true,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: false,
+        otherChecked: true,
+      });
+    }
+  }
+
+  newVisit() {
+    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
+    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
+    this.setState({
+      tmpVisitNote: '',
+      visits: this.state.visits,
+      showNewVisit: false,
+      selectedVisit: 0,
+    });
+  }
+
+  deleteVisit() {
+    Alert.alert(
+      i18n.t('global.confirmation'),
+      i18n.t('contact_details_s.confirm_visit_delete'),
+      [
+        {
+          text: i18n.t('global.no'),
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'cancel',
+        },
+        {
+          text: i18n.t('global.yes'),
+          onPress: () => {
+            this.state.visits.splice(this.state.selectedVisit, 1);
+            if (this.state.visits.length === 0) {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: '',
+              });
+            } else {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: this.state.visits[0].note,
+              });
+            }
+          },
+        },
+      ],
+      { cancelable: false },
+    );
+  }
+
+  populate() {
+    const { contactId } = this.props.route.params;
+    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
+    this.setState({
+      tmpID: contact.id,
+      tmpNote: contact.notes,
+      tmpName: contact.name,
+      tmpFirstname: contact.firstname,
+      tmpEmail: contact.email,
+      tmpCompany: contact.company,
+      tmpAddress: contact.address,
+      tmpPhone: contact.phone,
+      tmpSelect1: contact.select1,
+      tmpSelect2: contact.select2,
+      tmpOther: contact.other,
+      tmpProducts: contact.product,
+    });
+    if (contact.type === 'client') {
+      this.setState({ clientChecked: true });
+    } else if (contact.type === 'prospect') {
+      this.setState({ prospectChecked: true });
+    } else {
+      this.setState({ otherChecked: true });
+    }
+    if (contact.visits !== null) {
+      const tmp = JSON.parse(contact.visits);
+      this.setState({ visits: tmp });
+      if (tmp.length > 0) {
+        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
+      }
+    }
+    if (contact.products !== null) {
+      const tmp = JSON.parse(contact.products);
+      this.setState({
+        p1: tmp[0],
+        p2: tmp[1],
+        p3: tmp[2],
+        p4: tmp[3],
+        p5: tmp[4],
+        p6: tmp[5],
+        p7: tmp[6],
+        p8: tmp[7],
+        p9: tmp[8],
+        p10: tmp[9],
+      });
+    }
+  }
+
+  componentDidMount() {
+    const { action } = this.props.route.params;
+    if (action === 'edit') {
+      this.setState({ action: 'edit' });
+      this.populate();
+    }
+
+    BarCodeScanner.requestPermissionsAsync().then(res => {
+      this.setState({ hasPermission: res.status === 'granted' });
+    });
+  }
+
+  render() {
+    const handleBarCodeScanned = ({ type, data }) => {
+      this.setState({ scanned: true });
+      if (data.includes('VCARD')) {
+        let datas = vCard.parse(data);
+        let tmpDatas = [];
+        if (datas.n !== undefined) {
+          const nx = Object.assign(
+            { n1: [{ value: datas.n[0].value[0] }] },
+            { n2: [{ value: datas.n[0].value[1] }] },
+          );
+          datas = Object.assign(datas, nx);
+        }
+        if (datas.adr !== undefined) {
+          let tmp = datas.adr[0].value;
+          let tmpadr = '';
+          for (let i = 0; i < tmp.length; i++) {
+            if (tmp[i].length > 0) {
+              if (tmpadr.length > 0) {
+                tmpadr = tmpadr + ', ' + tmp[i];
+              } else {
+                tmpadr = tmp[i];
+              }
+            }
+          }
+          datas.adr = [{ value: tmpadr }];
+        }
+        Object.keys(datas).map((objectKey, index) => {
+          if (
+            objectKey === 'email' ||
+            objectKey === 'adr' ||
+            objectKey === 'tel' ||
+            objectKey === 'org' ||
+            objectKey === 'n1' ||
+            objectKey === 'n2'
+          ) {
+            let value = datas[objectKey][0].value;
+            if (typeof value === 'string') {
+              tmpDatas.push(value);
+            }
+          }
+        });
+        this.setState({
+          parsedType: 'vcard',
+          parsedDatas: tmpDatas,
+          showQRcodevCard: false,
+          showDynContact: true,
+        });
+      } else {
+        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
+      }
+    };
+    return (
+      <View style={styles.container}>
+        <ScrollView style={{ flex: 1 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.customer')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.clientChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('client')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.prospect')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.prospectChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('prospect')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.other')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.otherChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('other')}
+            />
+            {this.state.otherChecked === true && (
+              <TextInput
+                style={{
+                  backgroundColor: 'white',
+                  margin: 10,
+                  padding: 10,
+                  flex: 2,
+                }}
+                value={this.state.tmpOther}
+                placeholder={i18n.t('contact_details_s.description')}
+                onChangeText={text => this.setState({ tmpOther: text })}
+              />
+            )}
+          </View>
+          <View style={{ flexDirection: 'row' }}>
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpName}
+              placeholder={
+                i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'
+              }
+              onChangeText={text => this.setState({ tmpName: text })}
+            />
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpFirstname}
+              placeholder={
+                i18n.t('global.firstname') +
+                ' (' +
+                i18n.t('global.required') +
+                ')'
+              }
+              onChangeText={text => this.setState({ tmpFirstname: text })}
+            />
+          </View>
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpEmail}
+            placeholder={
+              i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'
+            }
+            onChangeText={text => this.setState({ tmpEmail: text })}
+            autoCapitalize={'none'}
+            autoCorrect={false}
+            keyboardType={'email-address'}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpCompany}
+            placeholder={i18n.t('global.company')}
+            onChangeText={text => this.setState({ tmpCompany: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpAddress}
+            placeholder={i18n.t('global.address')}
+            onChangeText={text => this.setState({ tmpAddress: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpPhone}
+            placeholder={i18n.t('global.phone')}
+            onChangeText={text => this.setState({ tmpPhone: text })}
+            autoCompleteType={'tel'}
+            dataDetectorTypes={'phoneNumber'}
+            keyboardType={'phone-pad'}
+          />
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect1}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect1: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={i18n.t('custom.select-1.title')}
+                  value="0"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c1')}
+                  value="commerce-de-detail"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c2')}
+                  value={'home-service-freezer-center'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c3')}
+                  value={'restauration-service-a-table'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c4')}
+                  value={'fast-food-et-snacking'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c5')}
+                  value={'cafetaria-self-service'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c6')}
+                  value={'societe-de-restauration'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c7')}
+                  value={'restauration-gre-a-gre-cuisine-centrale'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c8')}
+                  value={'distributeur-independant'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c9')}
+                  value={'boulangerie-patisserie'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c10')}
+                  value={'pai'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c11')}
+                  value={'destockeur'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c12')}
+                  value={'commerce-halal'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c13')}
+                  value={'restauration-d-hebergement'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c14')}
+                  value={'centrale-restauration-commerciale'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c15')}
+                  value={'restauration-evenementielle-et-parc'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c16')}
+                  value={'restauration-de-transport'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c17')}
+                  value={'marche-public'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c18')}
+                  value={'cash'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c19')}
+                  value={'distributeur-national'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c20')}
+                  value={'rungis'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c21')}
+                  value={'abbatoir'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c22')}
+                  value={'autre'}
+                />
+              </Picker>
+            </View>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect2}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect2: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={i18n.t('custom.select-2.title')}
+                  value="0"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c1')}
+                  value={'celvia-dinde'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c2')}
+                  value={'celvia-elabores'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c3')}
+                  value={'celvia-serent'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c4')}
+                  value={'procanar'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c5')}
+                  value={'celtys'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c6')}
+                  value={'farmor'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c7')}
+                  value={'robichon'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c8')}
+                  value={'les-volailles-de-keranna'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c9')}
+                  value={'bosher-volaille'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c10')}
+                  value={'ldc-bretagne'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c11')}
+                  value={'doux-farmor'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c12')}
+                  value={'favreau'}
+                />
+              </Picker>
+            </View>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+            }}>
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p1')}
+              checked={this.state.p1}
+              onPress={() => this.setState({ p1: !this.state.p1 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p2')}
+              checked={this.state.p2}
+              onPress={() => this.setState({ p2: !this.state.p2 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p3')}
+              checked={this.state.p3}
+              onPress={() => this.setState({ p3: !this.state.p3 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p4')}
+              checked={this.state.p4}
+              onPress={() => this.setState({ p4: !this.state.p4 })}
+              containerStyle={styles.clearCheckbox}
+            />
+          </View>
+        </ScrollView>
+        <View style={{ flex: 1, margin: 5 }}>
+          <View style={{ flex: 1 }}>
+            <ButtonGroup
+              buttons={[
+                i18n.t('contact_details_s.visits'),
+                i18n.t('contact_details_s.notes'),
+              ]}
+              selectedButtonStyle={{ backgroundColor: '#ea4f52' }}
+              containerStyle={{ height: 30 }}
+              selectedIndex={this.state.selectedIndex}
+              onPress={index => this.setState({ selectedIndex: index })}
+            />
+            {this.state.selectedIndex === 0 && (
+              <View style={{ flex: 1 }}>
+                <View style={{ flexDirection: 'row' }}>
+                  {this.state.visits.length > 0 && (
+                    <View style={{ flex: 2, flexDirection: 'row' }}>
+                      <Icon
+                        name="sort-down"
+                        size={20}
+                        color={'black'}
+                        style={{
+                          zIndex: 1,
+                          position: 'absolute',
+                          right: 25,
+                          top: 20,
+                        }}
+                      />
+                      <Picker
+                        style={styles.select}
+                        selectedValue={this.state.selectedVisit}
+                        onValueChange={(itemValue, itemIndex) => {
+                          this.state.visits[this.state.selectedVisit].note =
+                            this.state.tmpVisitNote;
+                          this.setState({
+                            visits: this.state.visits,
+                            selectedVisit: itemIndex,
+                            tmpVisitNote: this.state.visits[itemIndex].note,
+                          });
+                        }}>
+                        {this.state.visits.map((item, index) => {
+                          return (
+                            <Picker.Item label={item.title} value={index} />
+                          );
+                        })}
+                      </Picker>
+                    </View>
+                  )}
+                  {this.state.visits.length === 0 && (
+                    <View
+                      style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}>
+                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
+                    </View>
+                  )}
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-evenly',
+                      margin: 10,
+                    }}>
+                    <TouchableOpacity
+                      style={styles.button}
+                      onPress={() => this.setState({ showNewVisit: true })}>
+                      <Icon name="plus-circle" size={20} color={'#ea4f52'} />
+                    </TouchableOpacity>
+                    {this.state.visits.length > 0 && (
+                      <TouchableOpacity
+                        style={styles.button}
+                        onPress={() => this.deleteVisit()}>
+                        <Icon name="trash" size={20} color={'#ea4f52'} />
+                      </TouchableOpacity>
+                    )}
+                  </View>
+                </View>
+                {this.state.visits.length > 0 && (
+                  <TextInput
+                    style={styles.textArea}
+                    underlineColorAndroid="transparent"
+                    placeholder={i18n.t('contact_details_s.notes') + '...'}
+                    placeholderTextColor="grey"
+                    multiline={true}
+                    value={this.state.tmpVisitNote}
+                    onChangeText={text => this.setState({ tmpVisitNote: text })}
+                  />
+                )}
+              </View>
+            )}
+            {this.state.selectedIndex === 1 && (
+              <TextInput
+                style={styles.textArea}
+                underlineColorAndroid="transparent"
+                placeholder={i18n.t('contact_details_s.notes') + '...'}
+                placeholderTextColor="grey"
+                multiline={true}
+                value={this.state.tmpNote}
+                onChangeText={text => this.setState({ tmpNote: text })}
+              />
+            )}
+          </View>
+          <View
+            style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
+            {this.state.action === 'add' && (
+              <>
+                <Button
+                  title="QRCode vCard"
+                  onPress={() => this.setState({ showQRcodevCard: true })}
+                  color={'#ea4f52'}
+                />
+              </>
+            )}
+            <Button
+              title={i18n.t('global.save')}
+              onPress={() => this.updateContact()}
+              color={'#ea4f52'}
+            />
+          </View>
+        </View>
+        <Overlay
+          isVisible={this.state.showNewVisit}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text style={{ marginBottom: 10 }}>
+              {i18n.t('contact_details_s.visit_name')} :
+            </Text>
+            <TextInput
+              placeholder={i18n.t('contact_details_s.visit_name')}
+              value={this.state.newVisitTitle}
+              onChangeText={text => this.setState({ newVisitTitle: text })}
+              style={{
+                borderWidth: 1,
+                borderColor: 'lightgrey',
+                width: 300,
+                marginBottom: 15,
+                paddingLeft: 10,
+              }}
+            />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() => this.setState({ showNewVisit: false })}
+                color={'#ea4f52'}
+              />
+              <Button
+                title={i18n.t('global.add')}
+                onPress={() => this.newVisit()}
+                color={'#ea4f52'}
+              />
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showQRcodevCard}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            {this.state.hasPermission === true && (
+              <BarCodeScanner
+                onBarCodeScanned={
+                  this.state.scanned ? undefined : handleBarCodeScanned
+                }
+                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
+                style={{ flex: 1, width: 380, height: 200 }}
+              />
+            )}
+            {this.state.hasPermission === false && (
+              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
+            )}
+            {this.state.hasPermission === null && (
+              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
+            )}
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({ showQRcodevCard: false, scanned: false })
+                }
+                color={'#ea4f52'}
+              />
+              {this.state.scanned && (
+                <Button
+                  title={i18n.t('global.retry')}
+                  onPress={() => this.setState({ scanned: false })}
+                  color={'#ea4f52'}
+                />
+              )}
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showDynContact}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={400}>
+          <View
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'space-evenly',
+            }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.name')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedName}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) => {
+                  this.setState({ parsedName: itemValue });
+                }}>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.firstname')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedFirstname}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedFirstname: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.email')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedEmail}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedEmail: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.company')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedCompany}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedCompany: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.address')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedAddress}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedAddress: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.phone')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedPhone}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedPhone: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({
+                    showDynContact: false,
+                    scanned: false,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                  })
+                }
+                color={'#ea4f52'}
+              />
+              <Button
+                title={i18n.t('global.next')}
+                onPress={() =>
+                  this.setState({
+                    tmpName: this.state.parsedName,
+                    tmpFirstname: this.state.parsedFirstname,
+                    tmpEmail: this.state.parsedEmail,
+                    tmpCompany: this.state.parsedCompany,
+                    tmpAddress: this.state.parsedAddress,
+                    tmpPhone: this.state.parsedPhone,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                    showDynContact: false,
+                    scanned: false,
+                  })
+                }
+                color={'#ea4f52'}
+              />
+            </View>
+          </View>
+        </Overlay>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  input: {
+    backgroundColor: 'white',
+    margin: 10,
+    padding: 10,
+  },
+  clearCheckbox: {
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  clearRadio: {
+    flex: 1,
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  select: {
+    flex: 2,
+    margin: 10,
+    backgroundColor: 'white',
+  },
+  textArea: {
+    flex: 1,
+    margin: 10,
+    padding: 10,
+    backgroundColor: 'white',
+    textAlignVertical: 'top',
+  },
+  button: {
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 2,
+  },
+});
+
+export default connect(mapStateToProps)(ContactDetailsScreen);
diff --git a/ComApp/src/Views/ContactDetails_RHD.js b/ComApp/src/Views/ContactDetails_RHD.js
index 724a6d1..088857d 100644
--- a/ComApp/src/Views/ContactDetails_RHD.js
+++ b/ComApp/src/Views/ContactDetails_RHD.js
@@ -1,892 +1,1098 @@
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  Button,
-  TextInput,
-  Picker,
-  TouchableOpacity,
-  Text,
-  Alert,
-  ScrollView
-} from 'react-native';
-import { CheckBox, ButtonGroup, Overlay } from '@rneui/themed';
-import { connect } from 'react-redux';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { showMessage } from 'react-native-flash-message';
-import Helpers from "../Controllers/Helpers";
-import i18n from "../I18n";
-import { BarCodeScanner } from 'expo-barcode-scanner';
-import vCard from 'vcard-parser';
-
-function mapStateToProps(state) {
-  return {
-    contacts: state.contacts,
-    currentUser: state.currentUser,
-  };
-}
-
-let date = new Date().getDate();
-if (date < 10) {
-  date = '0' + date.toString();
-}
-let month = new Date().getMonth() + 1;
-if (month < 10) {
-  month = '0' + month.toString();
-}
-const year = new Date().getFullYear();
-
-class ContactDetailsScreen extends React.Component {
-  state = {
-    action: 'add',
-    visits: [],
-    selectedVisit: 0,
-    tmpVisitNote: '',
-    newVisitTitle: date + '/' + month + '/' + year,
-    selectedIndex: 0,
-    showNewVisit: false,
-    tmpID: 0,
-    tmpNote: '',
-    tmpName: '',
-    tmpFirstname: '',
-    tmpEmail: '',
-    tmpCompany: '',
-    tmpAddress: '',
-    tmpPhone: '',
-    tmpSelect1: '',
-    tmpSelect2: '',
-    tmpOther: '',
-    clientChecked: false,
-    prospectChecked: false,
-    otherChecked: false,
-    p1: false,
-    p2: false,
-    p3: false,
-    p4: false,
-    p5: false,
-    p6: false,
-    p7: false,
-    p8: false,
-    p9: false,
-    showQRcodevCard: false,
-    parsedType: null,
-    parsedDatas: [],
-    hasPermission: null,
-    scanned: false,
-    showDynContact: false,
-    parsedName: '',
-    parsedFirstname: '',
-    parsedEmail: '',
-    parsedCompany: '',
-    parsedAddress: '',
-    parsedPhone: ''
-  };
-
-  updateContact() {
-    let error = '';
-    const { action } = this.props.route.params;
-    // On récupère le texte courant
-    if (this.state.visits.length > 0) {
-      this.state.visits[
-        this.state.selectedVisit
-      ].note = this.state.tmpVisitNote;
-    }
-    let type;
-    if (this.state.clientChecked === true) {
-      type = 'client';
-    } else if (this.state.prospectChecked === true) {
-      type = 'prospect';
-    } else if (this.state.otherChecked === true) {
-      type = 'other';
-      if (this.state.tmpOther.length === 0) {
-        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
-      }
-    } else {
-      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
-    }
-    if (this.state.tmpEmail.length < 5 || !Helpers.isEmailValid(this.state.tmpEmail)) {
-      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
-    }
-    if (this.state.tmpName.length === 0) {
-      error = error.concat(i18n.t('error.invalid_name') + '.\n');
-    }
-    if (this.state.tmpFirstname.length === 0) {
-      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
-    }
-
-    if (error.length > 0) {
-      Alert.alert(i18n.t('global.warning') + ' !', error, [
-        { text: 'OK' },
-      ],
-        { cancelable: false },
-      );
-    } else {
-      const products = [
-        this.state.p1,
-        this.state.p2,
-        this.state.p3,
-        this.state.p4,
-        this.state.p5,
-        this.state.p6,
-        this.state.p7,
-        this.state.p8,
-        this.state.p9
-      ];
-      const contact = {
-        id: Helpers.generateUUID(),
-        email: this.state.tmpEmail,
-        type: type,
-        other: this.state.tmpOther,
-        select1: this.state.tmpSelect1,
-        select2: this.state.tmpSelect2,
-        name: this.state.tmpName,
-        firstname: this.state.tmpFirstname,
-        company: this.state.tmpCompany,
-        address: this.state.tmpAddress,
-        phone: this.state.tmpPhone,
-        products: JSON.stringify(products),
-        notes: this.state.tmpNote,
-        visits: JSON.stringify(this.state.visits),
-        to_delete: false,
-        synced: false,
-      };
-      if (action === 'edit') {
-        contact.id = this.state.tmpID;
-        this.props.dispatch({ type: 'EDIT_CONTACT', data: contact });
-        this.populate();
-        showMessage({
-          message: i18n.t('contact_details_s.contact_saved') + '.',
-          type: 'success',
-          duration: 500,
-        });
-      } else {
-        contact.user_id = this.props.currentUser.id;
-        this.props.dispatch({ type: 'ADD_CONTACT', data: contact });
-        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
-      }
-    }
-  }
-
-  updateContactType(type) {
-    if (type === 'client') {
-      this.setState({
-        clientChecked: true,
-        prospectChecked: false,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else if (type === 'prospect') {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: true,
-        otherChecked: false,
-        tmpOther: '',
-      });
-    } else {
-      this.setState({
-        clientChecked: false,
-        prospectChecked: false,
-        otherChecked: true,
-      });
-    }
-  }
-
-  newVisit() {
-    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
-    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
-    this.setState({
-      tmpVisitNote: '',
-      visits: this.state.visits,
-      showNewVisit: false,
-      selectedVisit: 0,
-    });
-  }
-
-  deleteVisit() {
-    Alert.alert(
-      i18n.t('global.confirmation'),
-      i18n.t('contact_details_s.confirm_visit_delete'),
-      [
-        {
-          text: i18n.t('global.no'),
-          onPress: () => console.log('Cancel Pressed'),
-          style: 'cancel',
-        },
-        {
-          text: i18n.t('global.yes'),
-          onPress: () => {
-            this.state.visits.splice(this.state.selectedVisit, 1);
-            if (this.state.visits.length === 0) {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: '',
-              });
-            } else {
-              this.setState({
-                visits: this.state.visits,
-                selectedVisit: 0,
-                tmpVisitNote: this.state.visits[0].note,
-              });
-            }
-          },
-        },
-      ],
-      { cancelable: false },
-    );
-  }
-
-  populate() {
-    const { contactId } = this.props.route.params;
-    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
-    this.setState({
-      tmpID: contact.id,
-      tmpNote: contact.notes,
-      tmpName: contact.name,
-      tmpFirstname: contact.firstname,
-      tmpEmail: contact.email,
-      tmpCompany: contact.company,
-      tmpAddress: contact.address,
-      tmpPhone: contact.phone,
-      tmpSelect1: contact.select1,
-      tmpSelect2: contact.select2,
-      tmpOther: contact.other,
-      tmpProducts: contact.product,
-    });
-    if (contact.type === 'client') {
-      this.setState({ clientChecked: true });
-    } else if (contact.type === 'prospect') {
-      this.setState({ prospectChecked: true });
-    } else {
-      this.setState({ otherChecked: true });
-    }
-    if (contact.visits !== null) {
-      const tmp = JSON.parse(contact.visits);
-      this.setState({ visits: tmp });
-      if (tmp.length > 0) {
-        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
-      }
-    }
-    if (contact.products !== null) {
-      const tmp = JSON.parse(contact.products);
-      this.setState({
-        p1: tmp[0],
-        p2: tmp[1],
-        p3: tmp[2],
-        p4: tmp[3],
-        p5: tmp[4],
-        p6: tmp[5],
-        p7: tmp[6],
-        p8: tmp[7],
-        p9: tmp[8]
-      });
-    }
-  }
-
-  componentDidMount() {
-    const { action } = this.props.route.params;
-    if (action === 'edit') {
-      this.setState({ action: 'edit' });
-      this.populate();
-    }
-
-    BarCodeScanner.requestPermissionsAsync().then(res => {
-      this.setState({ hasPermission: res.status === 'granted' });
-    });
-
-  }
-
-  render() {
-    const handleBarCodeScanned = ({ type, data }) => {
-      this.setState({ scanned: true });
-      if (data.includes('VCARD')) {
-        let datas = vCard.parse(data);
-        let tmpDatas = [];
-        if (datas['n'] !== undefined) {
-          const nx = Object.assign({ n1: [{ value: datas['n'][0].value[0] }] }, { n2: [{ value: datas['n'][0].value[1] }] });
-          datas = Object.assign(datas, nx);
-        }
-        if (datas['adr'] !== undefined) {
-          let tmp = datas['adr'][0].value;
-          let tmpadr = '';
-          for (let i = 0; i < tmp.length; i++) {
-            if (tmp[i].length > 0) {
-              if (tmpadr.length > 0) {
-                tmpadr = tmpadr + ', ' + tmp[i];
-              } else {
-                tmpadr = tmp[i];
-              }
-            }
-          }
-          datas['adr'] = [{ value: tmpadr }];
-        }
-        Object.keys(datas).map((objectKey, index) => {
-          if (objectKey === 'email' || objectKey === 'adr' || objectKey === 'tel' || objectKey === 'org' || objectKey === 'n1' || objectKey === 'n2') {
-            let value = datas[objectKey][0].value;
-            if (typeof value === 'string') {
-              tmpDatas.push(value);
-            }
-          }
-        });
-        this.setState({ parsedType: 'vcard', parsedDatas: tmpDatas, showQRcodevCard: false, showDynContact: true })
-      } else {
-        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
-      }
-    };
-    return (
-      <View style={styles.container}>
-        <ScrollView style={{ flex: 1 }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.customer')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.clientChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('client')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.prospect')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.prospectChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('prospect')}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              center
-              title={i18n.t('contact_details_s.other')}
-              checkedIcon="dot-circle-o"
-              uncheckedIcon="circle-o"
-              checked={this.state.otherChecked}
-              containerStyle={styles.clearRadio}
-              onPress={() => this.updateContactType('other')}
-            />
-            {this.state.otherChecked === true && (
-              <TextInput
-                style={{
-                  backgroundColor: 'white',
-                  margin: 10,
-                  padding: 10,
-                  flex: 2,
-                }}
-                value={this.state.tmpOther}
-                placeholder={i18n.t('contact_details_s.description')}
-                onChangeText={text => this.setState({ tmpOther: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row' }}>
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpName}
-              placeholder={i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpName: text })}
-            />
-            <TextInput
-              style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
-              value={this.state.tmpFirstname}
-              placeholder={i18n.t('global.firstname') + ' (' + i18n.t('global.required') + ')'}
-              onChangeText={text => this.setState({ tmpFirstname: text })}
-            />
-          </View>
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpEmail}
-            placeholder={i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'}
-            onChangeText={text => this.setState({ tmpEmail: text })}
-            autoCapitalize={'none'}
-            autoCorrect={false}
-            keyboardType={'email-address'}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpCompany}
-            placeholder={i18n.t('global.company')}
-            onChangeText={text => this.setState({ tmpCompany: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpAddress}
-            placeholder={i18n.t('global.address')}
-            onChangeText={text => this.setState({ tmpAddress: text })}
-          />
-          <TextInput
-            style={styles.input}
-            value={this.state.tmpPhone}
-            placeholder={i18n.t('global.phone')}
-            onChangeText={text => this.setState({ tmpPhone: text })}
-            autoCompleteType={'tel'}
-            dataDetectorTypes={'phoneNumber'}
-            keyboardType={'phone-pad'}
-          />
-          <View style={{ flexDirection: 'row' }}>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect1}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect1: itemValue });
-                  }
-                }}>
-                <Picker.Item label={i18n.t('custom.select-1.title')} value="0" />
-                <Picker.Item label={i18n.t('custom.select-1.c1')} value={'pole-sable'} />
-                <Picker.Item label={i18n.t('custom.select-1.c2')} value={'snv'} />
-                <Picker.Item label={i18n.t('custom.select-1.c3')} value={'pole-sud-est'} />
-                <Picker.Item label={i18n.t('custom.select-1.c4')} value={'aquitaine'} />
-                <Picker.Item label={i18n.t('custom.select-1.c5')} value={'sbv'} />
-                <Picker.Item label={i18n.t('custom.select-1.c6')} value={'arrive'} />
-                <Picker.Item label={i18n.t('custom.select-1.c7')} value={'plusieurs-filiales'} />
-                <Picker.Item label={i18n.t('custom.select-1.c8')} value={'autre'} />
-              </Picker>
-            </View>
-            <View style={{ flex: 1, flexDirection: 'row' }}>
-              <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-              <Picker
-                selectedValue={this.state.tmpSelect2}
-                style={styles.select}
-                onValueChange={(itemValue, itemIndex) => {
-                  if (itemValue !== '0') {
-                    this.setState({ tmpSelect2: itemValue });
-                  }
-                }}>
-                <Picker.Item label={i18n.t('custom.select-2.title')} value="0" />
-                <Picker.Item label={i18n.t('custom.select-2.c1')} value={'commerce-de-detail'} />
-                <Picker.Item label={i18n.t('custom.select-2.c2')} value={'restauration-commerciale'} />
-                <Picker.Item label={i18n.t('custom.select-2.c3')} value={'restauration-collective'} />
-                <Picker.Item label={i18n.t('custom.select-2.c4')} value={'grossiste-distributeur-cash'} />
-                <Picker.Item label={i18n.t('custom.select-2.c5')} value={'pai'} />
-                <Picker.Item label={i18n.t('custom.select-2.c6')} value={'home-freezer-center'} />
-                <Picker.Item label={i18n.t('custom.select-2.c7')} value={'autres'} />
-              </Picker>
-            </View>
-          </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              justifyContent: 'center',
-            }}>
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p1')}
-              checked={this.state.p1}
-              onPress={() => this.setState({ p1: !this.state.p1 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p2')}
-              checked={this.state.p2}
-              onPress={() => this.setState({ p2: !this.state.p2 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p3')}
-              checked={this.state.p3}
-              onPress={() => this.setState({ p3: !this.state.p3 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p4')}
-              checked={this.state.p4}
-              onPress={() => this.setState({ p4: !this.state.p4 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p5')}
-              checked={this.state.p5}
-              onPress={() => this.setState({ p5: !this.state.p5 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p6')}
-              checked={this.state.p6}
-              onPress={() => this.setState({ p6: !this.state.p6 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p7')}
-              checked={this.state.p7}
-              onPress={() => this.setState({ p7: !this.state.p7 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p8')}
-              checked={this.state.p8}
-              onPress={() => this.setState({ p8: !this.state.p8 })}
-              containerStyle={styles.clearCheckbox}
-            />
-            <CheckBox
-              checkedColor={this.props.mainColor}
-              title={i18n.t('custom.interest.p9')}
-              checked={this.state.p9}
-              onPress={() => this.setState({ p9: !this.state.p9 })}
-              containerStyle={styles.clearCheckbox}
-            />
-          </View>
-        </ScrollView>
-        <View style={{ flex: 1, margin: 5 }}>
-          <View style={{ flex: 1 }}>
-            <ButtonGroup
-              buttons={[i18n.t('contact_details_s.visits'), i18n.t('contact_details_s.notes')]}
-              selectedButtonStyle={{ backgroundColor: '#ea4f52' }}
-              containerStyle={{ height: 30 }}
-              selectedIndex={this.state.selectedIndex}
-              onPress={index => this.setState({ selectedIndex: index })}
-            />
-            {this.state.selectedIndex === 0 && (
-              <View style={{ flex: 1 }}>
-                <View style={{ flexDirection: 'row' }}>
-                  {this.state.visits.length > 0 && (
-                    <View style={{ flex: 2, flexDirection: 'row' }}>
-                      <Icon name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
-                      <Picker
-                        style={styles.select}
-                        selectedValue={this.state.selectedVisit}
-                        onValueChange={(itemValue, itemIndex) => {
-                          this.state.visits[
-                            this.state.selectedVisit
-                          ].note = this.state.tmpVisitNote;
-                          this.setState({
-                            visits: this.state.visits,
-                            selectedVisit: itemIndex,
-                            tmpVisitNote: this.state.visits[itemIndex].note,
-                          });
-                        }}>
-                        {this.state.visits.map((item, index) => {
-                          return <Picker.Item label={item.title} value={index} />;
-                        })}
-                      </Picker>
-                    </View>
-                  )}
-                  {this.state.visits.length === 0 && (
-                    <View
-                      style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                      }}>
-                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
-                    </View>
-                  )}
-                  <View
-                    style={{
-                      flex: 1,
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      justifyContent: 'space-evenly',
-                      margin: 10,
-                    }}>
-                    <TouchableOpacity
-                      style={styles.button}
-                      onPress={() => this.setState({ showNewVisit: true })}>
-                      <Icon name="plus-circle" size={20} color={'#ea4f52'} />
-                    </TouchableOpacity>
-                    {this.state.visits.length > 0 && (
-                      <TouchableOpacity
-                        style={styles.button}
-                        onPress={() => this.deleteVisit()}>
-                        <Icon name="trash" size={20} color={'#ea4f52'} />
-                      </TouchableOpacity>
-                    )}
-                  </View>
-                </View>
-                {this.state.visits.length > 0 && (
-                  <TextInput
-                    style={styles.textArea}
-                    underlineColorAndroid="transparent"
-                    placeholder={i18n.t('contact_details_s.notes') + '...'}
-                    placeholderTextColor="grey"
-                    multiline={true}
-                    value={this.state.tmpVisitNote}
-                    onChangeText={text => this.setState({ tmpVisitNote: text })}
-                  />
-                )}
-              </View>
-            )}
-            {this.state.selectedIndex === 1 && (
-              <TextInput
-                style={styles.textArea}
-                underlineColorAndroid="transparent"
-                placeholder={i18n.t('contact_details_s.notes') + '...'}
-                placeholderTextColor="grey"
-                multiline={true}
-                value={this.state.tmpNote}
-                onChangeText={text => this.setState({ tmpNote: text })}
-              />
-            )}
-          </View>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
-            {this.state.action === 'add' && (
-              <>
-                <Button title="QRCode vCard" onPress={() => this.setState({ showQRcodevCard: true })} color={'#ea4f52'} />
-              </>
-            )}
-            <Button title={i18n.t('global.save')} onPress={() => this.updateContact()} color={'#ea4f52'} />
-          </View>
-        </View>
-        <Overlay
-          isVisible={this.state.showNewVisit}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View
-            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ marginBottom: 10 }}>{i18n.t('contact_details_s.visit_name')} :</Text>
-            <TextInput
-              placeholder={i18n.t('contact_details_s.visit_name')}
-              value={this.state.newVisitTitle}
-              onChangeText={text => this.setState({ newVisitTitle: text })}
-              style={{
-                borderWidth: 1,
-                borderColor: 'lightgrey',
-                width: 300,
-                marginBottom: 15,
-                paddingLeft: 10,
-              }}
-            />
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showNewVisit: false })}
-                color={'#ea4f52'}
-              />
-              <Button title={i18n.t('global.add')} onPress={() => this.newVisit()} color={'#ea4f52'} />
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showQRcodevCard}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={300}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            {this.state.hasPermission === true && (
-              <BarCodeScanner
-                onBarCodeScanned={this.state.scanned ? undefined : handleBarCodeScanned}
-                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
-                style={{ flex: 1, width: 380, height: 200 }}
-              />
-            )}
-            {this.state.hasPermission === false && (
-              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
-            )}
-            {this.state.hasPermission === null && (
-              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
-            )}
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showQRcodevCard: false, scanned: false })}
-                color={'#ea4f52'}
-              />
-              {this.state.scanned && <Button title={i18n.t('global.retry')} onPress={() => this.setState({ scanned: false })} color={'#ea4f52'} />}
-            </View>
-          </View>
-        </Overlay>
-        <Overlay
-          isVisible={this.state.showDynContact}
-          windowBackgroundColor="rgba(255, 255, 255, .9)"
-          overlayBackgroundColor="white"
-          width={400}
-          height={400}>
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-evenly' }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.name')}</Text>
-              <Picker
-                selectedValue={this.state.parsedName}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) => {
-                  this.setState({ parsedName: itemValue });
-                }}>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.firstname')}</Text>
-              <Picker
-                selectedValue={this.state.parsedFirstname}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedFirstname: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.email')}</Text>
-              <Picker
-                selectedValue={this.state.parsedEmail}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedEmail: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.company')}</Text>
-              <Picker
-                selectedValue={this.state.parsedCompany}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedCompany: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.address')}</Text>
-              <Picker
-                selectedValue={this.state.parsedAddress}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedAddress: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.phone')}</Text>
-              <Picker
-                selectedValue={this.state.parsedPhone}
-                style={{ height: 50, width: 250 }}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({ parsedPhone: itemValue })
-                }>
-                <Picker.Item label="" value="0" key={0} />
-                {this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
-                  return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
-                })}
-              </Picker>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-evenly',
-                alignItems: 'center',
-                width: 400,
-              }}>
-              <Button
-                title={i18n.t('global.cancel')}
-                onPress={() => this.setState({ showDynContact: false, scanned: false, parsedName: '', parsedFirstname: '', parsedEmail: '', parsedCompany: '', parsedAddress: '', parsedPhone: '' })}
-                color={'#ea4f52'}
-              />
-              <Button
-                title={i18n.t('global.next')}
-                onPress={() => this.setState({
-                  tmpName: this.state.parsedName,
-                  tmpFirstname: this.state.parsedFirstname,
-                  tmpEmail: this.state.parsedEmail,
-                  tmpCompany: this.state.parsedCompany,
-                  tmpAddress: this.state.parsedAddress,
-                  tmpPhone: this.state.parsedPhone,
-                  parsedName: '',
-                  parsedFirstname: '',
-                  parsedEmail: '',
-                  parsedCompany: '',
-                  parsedAddress: '',
-                  parsedPhone: '',
-                  showDynContact: false,
-                  scanned: false,
-                })}
-                color={'#ea4f52'}
-              />
-            </View>
-          </View>
-        </Overlay>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  input: {
-    backgroundColor: 'white',
-    margin: 10,
-    padding: 10,
-  },
-  clearCheckbox: {
-    backgroundColor: '#00000000',
-    borderWidth: 0,
-  },
-  clearRadio: {
-    flex: 1,
-    backgroundColor: '#00000000',
-    borderWidth: 0,
-  },
-  select: {
-    flex: 2,
-    margin: 10,
-    backgroundColor: 'white',
-  },
-  textArea: {
-    flex: 1,
-    margin: 10,
-    padding: 10,
-    backgroundColor: 'white',
-    textAlignVertical: 'top',
-  },
-  button: {
-    width: 35,
-    height: 35,
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 2,
-  },
-});
-
-export default connect(mapStateToProps)(ContactDetailsScreen);
+import { ButtonGroup, CheckBox, Overlay } from '@rneui/themed';
+import { BarCodeScanner } from 'expo-barcode-scanner';
+import React from 'react';
+import {
+  Alert,
+  Button,
+  Picker,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { connect } from 'react-redux';
+import vCard from 'vcard-parser';
+import Helpers from '../Controllers/Helpers';
+import i18n from '../I18n';
+
+function mapStateToProps(state) {
+  return {
+    contacts: state.contacts,
+    currentUser: state.currentUser,
+  };
+}
+
+let date = new Date().getDate();
+if (date < 10) {
+  date = '0' + date.toString();
+}
+let month = new Date().getMonth() + 1;
+if (month < 10) {
+  month = '0' + month.toString();
+}
+const year = new Date().getFullYear();
+
+class ContactDetailsScreen extends React.Component {
+  state = {
+    action: 'add',
+    visits: [],
+    selectedVisit: 0,
+    tmpVisitNote: '',
+    newVisitTitle: date + '/' + month + '/' + year,
+    selectedIndex: 0,
+    showNewVisit: false,
+    tmpID: 0,
+    tmpNote: '',
+    tmpName: '',
+    tmpFirstname: '',
+    tmpEmail: '',
+    tmpCompany: '',
+    tmpAddress: '',
+    tmpPhone: '',
+    tmpSelect1: '',
+    tmpSelect2: '',
+    tmpOther: '',
+    clientChecked: false,
+    prospectChecked: false,
+    otherChecked: false,
+    p1: false,
+    p2: false,
+    p3: false,
+    p4: false,
+    p5: false,
+    p6: false,
+    p7: false,
+    p8: false,
+    p9: false,
+    showQRcodevCard: false,
+    parsedType: null,
+    parsedDatas: [],
+    hasPermission: null,
+    scanned: false,
+    showDynContact: false,
+    parsedName: '',
+    parsedFirstname: '',
+    parsedEmail: '',
+    parsedCompany: '',
+    parsedAddress: '',
+    parsedPhone: '',
+  };
+
+  updateContact() {
+    let error = '';
+    const { action } = this.props.route.params;
+    // On récupère le texte courant
+    if (this.state.visits.length > 0) {
+      this.state.visits[this.state.selectedVisit].note =
+        this.state.tmpVisitNote;
+    }
+    let type;
+    if (this.state.clientChecked === true) {
+      type = 'client';
+    } else if (this.state.prospectChecked === true) {
+      type = 'prospect';
+    } else if (this.state.otherChecked === true) {
+      type = 'other';
+      if (this.state.tmpOther.length === 0) {
+        error = error.concat(i18n.t('error.fill_other_field') + '.\n');
+      }
+    } else {
+      error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
+    }
+    if (
+      this.state.tmpEmail.length < 5 ||
+      !Helpers.isEmailValid(this.state.tmpEmail)
+    ) {
+      error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
+    }
+    if (this.state.tmpName.length === 0) {
+      error = error.concat(i18n.t('error.invalid_name') + '.\n');
+    }
+    if (this.state.tmpFirstname.length === 0) {
+      error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
+    }
+
+    if (error.length > 0) {
+      Alert.alert(i18n.t('global.warning') + ' !', error, [{ text: 'OK' }], {
+        cancelable: false,
+      });
+    } else {
+      const products = [
+        this.state.p1,
+        this.state.p2,
+        this.state.p3,
+        this.state.p4,
+        this.state.p5,
+        this.state.p6,
+        this.state.p7,
+        this.state.p8,
+        this.state.p9,
+      ];
+      const contact = {
+        id: Helpers.generateUUID(),
+        email: this.state.tmpEmail,
+        type: type,
+        other: this.state.tmpOther,
+        select1: this.state.tmpSelect1,
+        select2: this.state.tmpSelect2,
+        name: this.state.tmpName,
+        firstname: this.state.tmpFirstname,
+        company: this.state.tmpCompany,
+        address: this.state.tmpAddress,
+        phone: this.state.tmpPhone,
+        products: JSON.stringify(products),
+        notes: this.state.tmpNote,
+        visits: JSON.stringify(this.state.visits),
+        to_delete: false,
+        synced: false,
+      };
+      if (action === 'edit') {
+        contact.id = this.state.tmpID;
+        this.props.dispatch({ type: 'EDIT_CONTACT', data: contact });
+        this.populate();
+        showMessage({
+          message: i18n.t('contact_details_s.contact_saved') + '.',
+          type: 'success',
+          duration: 500,
+        });
+      } else {
+        contact.user_id = this.props.currentUser.id;
+        this.props.dispatch({ type: 'ADD_CONTACT', data: contact });
+        this.props.navigation.navigate('ContactScreen', { contactAdded: true });
+      }
+    }
+  }
+
+  updateContactType(type) {
+    if (type === 'client') {
+      this.setState({
+        clientChecked: true,
+        prospectChecked: false,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else if (type === 'prospect') {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: true,
+        otherChecked: false,
+        tmpOther: '',
+      });
+    } else {
+      this.setState({
+        clientChecked: false,
+        prospectChecked: false,
+        otherChecked: true,
+      });
+    }
+  }
+
+  newVisit() {
+    this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
+    this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
+    this.setState({
+      tmpVisitNote: '',
+      visits: this.state.visits,
+      showNewVisit: false,
+      selectedVisit: 0,
+    });
+  }
+
+  deleteVisit() {
+    Alert.alert(
+      i18n.t('global.confirmation'),
+      i18n.t('contact_details_s.confirm_visit_delete'),
+      [
+        {
+          text: i18n.t('global.no'),
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'cancel',
+        },
+        {
+          text: i18n.t('global.yes'),
+          onPress: () => {
+            this.state.visits.splice(this.state.selectedVisit, 1);
+            if (this.state.visits.length === 0) {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: '',
+              });
+            } else {
+              this.setState({
+                visits: this.state.visits,
+                selectedVisit: 0,
+                tmpVisitNote: this.state.visits[0].note,
+              });
+            }
+          },
+        },
+      ],
+      { cancelable: false },
+    );
+  }
+
+  populate() {
+    const { contactId } = this.props.route.params;
+    const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
+    this.setState({
+      tmpID: contact.id,
+      tmpNote: contact.notes,
+      tmpName: contact.name,
+      tmpFirstname: contact.firstname,
+      tmpEmail: contact.email,
+      tmpCompany: contact.company,
+      tmpAddress: contact.address,
+      tmpPhone: contact.phone,
+      tmpSelect1: contact.select1,
+      tmpSelect2: contact.select2,
+      tmpOther: contact.other,
+      tmpProducts: contact.product,
+    });
+    if (contact.type === 'client') {
+      this.setState({ clientChecked: true });
+    } else if (contact.type === 'prospect') {
+      this.setState({ prospectChecked: true });
+    } else {
+      this.setState({ otherChecked: true });
+    }
+    if (contact.visits !== null) {
+      const tmp = JSON.parse(contact.visits);
+      this.setState({ visits: tmp });
+      if (tmp.length > 0) {
+        this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
+      }
+    }
+    if (contact.products !== null) {
+      const tmp = JSON.parse(contact.products);
+      this.setState({
+        p1: tmp[0],
+        p2: tmp[1],
+        p3: tmp[2],
+        p4: tmp[3],
+        p5: tmp[4],
+        p6: tmp[5],
+        p7: tmp[6],
+        p8: tmp[7],
+        p9: tmp[8],
+      });
+    }
+  }
+
+  componentDidMount() {
+    const { action } = this.props.route.params;
+    if (action === 'edit') {
+      this.setState({ action: 'edit' });
+      this.populate();
+    }
+
+    BarCodeScanner.requestPermissionsAsync().then(res => {
+      this.setState({ hasPermission: res.status === 'granted' });
+    });
+  }
+
+  render() {
+    const handleBarCodeScanned = ({ type, data }) => {
+      this.setState({ scanned: true });
+      if (data.includes('VCARD')) {
+        let datas = vCard.parse(data);
+        let tmpDatas = [];
+        if (datas.n !== undefined) {
+          const nx = Object.assign(
+            { n1: [{ value: datas.n[0].value[0] }] },
+            { n2: [{ value: datas.n[0].value[1] }] },
+          );
+          datas = Object.assign(datas, nx);
+        }
+        if (datas.adr !== undefined) {
+          let tmp = datas.adr[0].value;
+          let tmpadr = '';
+          for (let i = 0; i < tmp.length; i++) {
+            if (tmp[i].length > 0) {
+              if (tmpadr.length > 0) {
+                tmpadr = tmpadr + ', ' + tmp[i];
+              } else {
+                tmpadr = tmp[i];
+              }
+            }
+          }
+          datas.adr = [{ value: tmpadr }];
+        }
+        Object.keys(datas).map((objectKey, index) => {
+          if (
+            objectKey === 'email' ||
+            objectKey === 'adr' ||
+            objectKey === 'tel' ||
+            objectKey === 'org' ||
+            objectKey === 'n1' ||
+            objectKey === 'n2'
+          ) {
+            let value = datas[objectKey][0].value;
+            if (typeof value === 'string') {
+              tmpDatas.push(value);
+            }
+          }
+        });
+        this.setState({
+          parsedType: 'vcard',
+          parsedDatas: tmpDatas,
+          showQRcodevCard: false,
+          showDynContact: true,
+        });
+      } else {
+        Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
+      }
+    };
+    return (
+      <View style={styles.container}>
+        <ScrollView style={{ flex: 1 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.customer')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.clientChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('client')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.prospect')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.prospectChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('prospect')}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              center
+              title={i18n.t('contact_details_s.other')}
+              checkedIcon="dot-circle-o"
+              uncheckedIcon="circle-o"
+              checked={this.state.otherChecked}
+              containerStyle={styles.clearRadio}
+              onPress={() => this.updateContactType('other')}
+            />
+            {this.state.otherChecked === true && (
+              <TextInput
+                style={{
+                  backgroundColor: 'white',
+                  margin: 10,
+                  padding: 10,
+                  flex: 2,
+                }}
+                value={this.state.tmpOther}
+                placeholder={i18n.t('contact_details_s.description')}
+                onChangeText={text => this.setState({ tmpOther: text })}
+              />
+            )}
+          </View>
+          <View style={{ flexDirection: 'row' }}>
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpName}
+              placeholder={
+                i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'
+              }
+              onChangeText={text => this.setState({ tmpName: text })}
+            />
+            <TextInput
+              style={{
+                backgroundColor: 'white',
+                margin: 10,
+                padding: 10,
+                flex: 1,
+              }}
+              value={this.state.tmpFirstname}
+              placeholder={
+                i18n.t('global.firstname') +
+                ' (' +
+                i18n.t('global.required') +
+                ')'
+              }
+              onChangeText={text => this.setState({ tmpFirstname: text })}
+            />
+          </View>
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpEmail}
+            placeholder={
+              i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'
+            }
+            onChangeText={text => this.setState({ tmpEmail: text })}
+            autoCapitalize={'none'}
+            autoCorrect={false}
+            keyboardType={'email-address'}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpCompany}
+            placeholder={i18n.t('global.company')}
+            onChangeText={text => this.setState({ tmpCompany: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpAddress}
+            placeholder={i18n.t('global.address')}
+            onChangeText={text => this.setState({ tmpAddress: text })}
+          />
+          <TextInput
+            style={styles.input}
+            value={this.state.tmpPhone}
+            placeholder={i18n.t('global.phone')}
+            onChangeText={text => this.setState({ tmpPhone: text })}
+            autoCompleteType={'tel'}
+            dataDetectorTypes={'phoneNumber'}
+            keyboardType={'phone-pad'}
+          />
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect1}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect1: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={i18n.t('custom.select-1.title')}
+                  value="0"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c1')}
+                  value={'pole-sable'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c2')}
+                  value={'snv'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c3')}
+                  value={'pole-sud-est'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c4')}
+                  value={'aquitaine'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c5')}
+                  value={'sbv'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c6')}
+                  value={'arrive'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c7')}
+                  value={'plusieurs-filiales'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-1.c8')}
+                  value={'autre'}
+                />
+              </Picker>
+            </View>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
+              <Icon
+                name="sort-down"
+                size={20}
+                color={'black'}
+                style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }}
+              />
+              <Picker
+                selectedValue={this.state.tmpSelect2}
+                style={styles.select}
+                onValueChange={(itemValue, itemIndex) => {
+                  if (itemValue !== '0') {
+                    this.setState({ tmpSelect2: itemValue });
+                  }
+                }}>
+                <Picker.Item
+                  label={i18n.t('custom.select-2.title')}
+                  value="0"
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c1')}
+                  value={'commerce-de-detail'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c2')}
+                  value={'restauration-commerciale'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c3')}
+                  value={'restauration-collective'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c4')}
+                  value={'grossiste-distributeur-cash'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c5')}
+                  value={'pai'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c6')}
+                  value={'home-freezer-center'}
+                />
+                <Picker.Item
+                  label={i18n.t('custom.select-2.c7')}
+                  value={'autres'}
+                />
+              </Picker>
+            </View>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+            }}>
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p1')}
+              checked={this.state.p1}
+              onPress={() => this.setState({ p1: !this.state.p1 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p2')}
+              checked={this.state.p2}
+              onPress={() => this.setState({ p2: !this.state.p2 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p3')}
+              checked={this.state.p3}
+              onPress={() => this.setState({ p3: !this.state.p3 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p4')}
+              checked={this.state.p4}
+              onPress={() => this.setState({ p4: !this.state.p4 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p5')}
+              checked={this.state.p5}
+              onPress={() => this.setState({ p5: !this.state.p5 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p6')}
+              checked={this.state.p6}
+              onPress={() => this.setState({ p6: !this.state.p6 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p7')}
+              checked={this.state.p7}
+              onPress={() => this.setState({ p7: !this.state.p7 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p8')}
+              checked={this.state.p8}
+              onPress={() => this.setState({ p8: !this.state.p8 })}
+              containerStyle={styles.clearCheckbox}
+            />
+            <CheckBox
+              checkedColor={this.props.mainColor}
+              title={i18n.t('custom.interest.p9')}
+              checked={this.state.p9}
+              onPress={() => this.setState({ p9: !this.state.p9 })}
+              containerStyle={styles.clearCheckbox}
+            />
+          </View>
+        </ScrollView>
+        <View style={{ flex: 1, margin: 5 }}>
+          <View style={{ flex: 1 }}>
+            <ButtonGroup
+              buttons={[
+                i18n.t('contact_details_s.visits'),
+                i18n.t('contact_details_s.notes'),
+              ]}
+              selectedButtonStyle={{ backgroundColor: '#ea4f52' }}
+              containerStyle={{ height: 30 }}
+              selectedIndex={this.state.selectedIndex}
+              onPress={index => this.setState({ selectedIndex: index })}
+            />
+            {this.state.selectedIndex === 0 && (
+              <View style={{ flex: 1 }}>
+                <View style={{ flexDirection: 'row' }}>
+                  {this.state.visits.length > 0 && (
+                    <View style={{ flex: 2, flexDirection: 'row' }}>
+                      <Icon
+                        name="sort-down"
+                        size={20}
+                        color={'black'}
+                        style={{
+                          zIndex: 1,
+                          position: 'absolute',
+                          right: 25,
+                          top: 20,
+                        }}
+                      />
+                      <Picker
+                        style={styles.select}
+                        selectedValue={this.state.selectedVisit}
+                        onValueChange={(itemValue, itemIndex) => {
+                          this.state.visits[this.state.selectedVisit].note =
+                            this.state.tmpVisitNote;
+                          this.setState({
+                            visits: this.state.visits,
+                            selectedVisit: itemIndex,
+                            tmpVisitNote: this.state.visits[itemIndex].note,
+                          });
+                        }}>
+                        {this.state.visits.map((item, index) => {
+                          return (
+                            <Picker.Item label={item.title} value={index} />
+                          );
+                        })}
+                      </Picker>
+                    </View>
+                  )}
+                  {this.state.visits.length === 0 && (
+                    <View
+                      style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}>
+                      <Text>{i18n.t('contact_details_s.no_visits')}.</Text>
+                    </View>
+                  )}
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-evenly',
+                      margin: 10,
+                    }}>
+                    <TouchableOpacity
+                      style={styles.button}
+                      onPress={() => this.setState({ showNewVisit: true })}>
+                      <Icon name="plus-circle" size={20} color={'#ea4f52'} />
+                    </TouchableOpacity>
+                    {this.state.visits.length > 0 && (
+                      <TouchableOpacity
+                        style={styles.button}
+                        onPress={() => this.deleteVisit()}>
+                        <Icon name="trash" size={20} color={'#ea4f52'} />
+                      </TouchableOpacity>
+                    )}
+                  </View>
+                </View>
+                {this.state.visits.length > 0 && (
+                  <TextInput
+                    style={styles.textArea}
+                    underlineColorAndroid="transparent"
+                    placeholder={i18n.t('contact_details_s.notes') + '...'}
+                    placeholderTextColor="grey"
+                    multiline={true}
+                    value={this.state.tmpVisitNote}
+                    onChangeText={text => this.setState({ tmpVisitNote: text })}
+                  />
+                )}
+              </View>
+            )}
+            {this.state.selectedIndex === 1 && (
+              <TextInput
+                style={styles.textArea}
+                underlineColorAndroid="transparent"
+                placeholder={i18n.t('contact_details_s.notes') + '...'}
+                placeholderTextColor="grey"
+                multiline={true}
+                value={this.state.tmpNote}
+                onChangeText={text => this.setState({ tmpNote: text })}
+              />
+            )}
+          </View>
+          <View
+            style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
+            {this.state.action === 'add' && (
+              <>
+                <Button
+                  title="QRCode vCard"
+                  onPress={() => this.setState({ showQRcodevCard: true })}
+                  color={'#ea4f52'}
+                />
+              </>
+            )}
+            <Button
+              title={i18n.t('global.save')}
+              onPress={() => this.updateContact()}
+              color={'#ea4f52'}
+            />
+          </View>
+        </View>
+        <Overlay
+          isVisible={this.state.showNewVisit}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text style={{ marginBottom: 10 }}>
+              {i18n.t('contact_details_s.visit_name')} :
+            </Text>
+            <TextInput
+              placeholder={i18n.t('contact_details_s.visit_name')}
+              value={this.state.newVisitTitle}
+              onChangeText={text => this.setState({ newVisitTitle: text })}
+              style={{
+                borderWidth: 1,
+                borderColor: 'lightgrey',
+                width: 300,
+                marginBottom: 15,
+                paddingLeft: 10,
+              }}
+            />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() => this.setState({ showNewVisit: false })}
+                color={'#ea4f52'}
+              />
+              <Button
+                title={i18n.t('global.add')}
+                onPress={() => this.newVisit()}
+                color={'#ea4f52'}
+              />
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showQRcodevCard}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={300}>
+          <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            {this.state.hasPermission === true && (
+              <BarCodeScanner
+                onBarCodeScanned={
+                  this.state.scanned ? undefined : handleBarCodeScanned
+                }
+                barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
+                style={{ flex: 1, width: 380, height: 200 }}
+              />
+            )}
+            {this.state.hasPermission === false && (
+              <Text>{i18n.t('error.camera_permission_denied')}.</Text>
+            )}
+            {this.state.hasPermission === null && (
+              <Text>{i18n.t('error.pending_camera_permission')}.</Text>
+            )}
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({ showQRcodevCard: false, scanned: false })
+                }
+                color={'#ea4f52'}
+              />
+              {this.state.scanned && (
+                <Button
+                  title={i18n.t('global.retry')}
+                  onPress={() => this.setState({ scanned: false })}
+                  color={'#ea4f52'}
+                />
+              )}
+            </View>
+          </View>
+        </Overlay>
+        <Overlay
+          isVisible={this.state.showDynContact}
+          windowBackgroundColor="rgba(255, 255, 255, .9)"
+          overlayBackgroundColor="white"
+          width={400}
+          height={400}>
+          <View
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'space-evenly',
+            }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.name')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedName}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) => {
+                  this.setState({ parsedName: itemValue });
+                }}>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.firstname')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedFirstname}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedFirstname: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.email')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedEmail}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedEmail: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.company')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedCompany}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedCompany: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.address')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedAddress}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedAddress: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ flex: 1, paddingLeft: 10 }}>
+                {i18n.t('global.phone')}
+              </Text>
+              <Picker
+                selectedValue={this.state.parsedPhone}
+                style={{ height: 50, width: 250 }}
+                onValueChange={(itemValue, itemIndex) =>
+                  this.setState({ parsedPhone: itemValue })
+                }>
+                <Picker.Item label="" value="0" key={0} />
+                {this.state.parsedType === 'vcard' &&
+                  this.state.parsedDatas.map((item, index) => {
+                    return (
+                      <Picker.Item
+                        label={item}
+                        value={item}
+                        key={(index + 1).toString()}
+                      />
+                    );
+                  })}
+              </Picker>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+                width: 400,
+              }}>
+              <Button
+                title={i18n.t('global.cancel')}
+                onPress={() =>
+                  this.setState({
+                    showDynContact: false,
+                    scanned: false,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                  })
+                }
+                color={'#ea4f52'}
+              />
+              <Button
+                title={i18n.t('global.next')}
+                onPress={() =>
+                  this.setState({
+                    tmpName: this.state.parsedName,
+                    tmpFirstname: this.state.parsedFirstname,
+                    tmpEmail: this.state.parsedEmail,
+                    tmpCompany: this.state.parsedCompany,
+                    tmpAddress: this.state.parsedAddress,
+                    tmpPhone: this.state.parsedPhone,
+                    parsedName: '',
+                    parsedFirstname: '',
+                    parsedEmail: '',
+                    parsedCompany: '',
+                    parsedAddress: '',
+                    parsedPhone: '',
+                    showDynContact: false,
+                    scanned: false,
+                  })
+                }
+                color={'#ea4f52'}
+              />
+            </View>
+          </View>
+        </Overlay>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  input: {
+    backgroundColor: 'white',
+    margin: 10,
+    padding: 10,
+  },
+  clearCheckbox: {
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  clearRadio: {
+    flex: 1,
+    backgroundColor: '#00000000',
+    borderWidth: 0,
+  },
+  select: {
+    flex: 2,
+    margin: 10,
+    backgroundColor: 'white',
+  },
+  textArea: {
+    flex: 1,
+    margin: 10,
+    padding: 10,
+    backgroundColor: 'white',
+    textAlignVertical: 'top',
+  },
+  button: {
+    width: 35,
+    height: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 2,
+  },
+});
+
+export default connect(mapStateToProps)(ContactDetailsScreen);
diff --git a/ComApp/yarn.lock b/ComApp/yarn.lock
index a837dfa..c32cb66 100644
--- a/ComApp/yarn.lock
+++ b/ComApp/yarn.lock
@@ -398,7 +398,7 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.18.9":
+"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.12.13", "@babel/plugin-proposal-object-rest-spread@^7.18.9":
   "integrity" "sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q=="
   "resolved" "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz"
   "version" "7.18.9"
@@ -1130,23 +1130,23 @@
     "mv" "~2"
     "safe-json-stringify" "~1"
 
-"@expo/cli@0.3.1":
-  "integrity" "sha512-amdsNf5quVs9ZbO+q35sdtpWJvvQz5pqtl8ZOv5jqRriIp1G9zcOFTDG0TnGxANQ0F2b5GcU4fn7pxAzRLDHmQ=="
-  "resolved" "https://registry.npmjs.org/@expo/cli/-/cli-0.3.1.tgz"
-  "version" "0.3.1"
+"@expo/cli@0.4.10":
+  "integrity" "sha512-c8NJOVa5b8g9CYj8ahdaN21cVE2wPwUaFrtTE0kLeRR5ASy8reWLFEOcstEtt6eufdcN/uGgBWQ0FLovgLZuzw=="
+  "resolved" "https://registry.npmjs.org/@expo/cli/-/cli-0.4.10.tgz"
+  "version" "0.4.10"
   dependencies:
     "@babel/runtime" "^7.14.0"
-    "@expo/code-signing-certificates" "^0.0.2"
-    "@expo/config" "~7.0.1"
-    "@expo/config-plugins" "~5.0.1"
-    "@expo/dev-server" "~0.1.120"
+    "@expo/code-signing-certificates" "0.0.5"
+    "@expo/config" "~7.0.2"
+    "@expo/config-plugins" "~5.0.3"
+    "@expo/dev-server" "0.1.123"
     "@expo/devcert" "^1.0.0"
     "@expo/json-file" "^8.2.35"
-    "@expo/metro-config" "~0.4.0"
+    "@expo/metro-config" "~0.5.0"
     "@expo/osascript" "^2.0.31"
     "@expo/package-manager" "~0.0.53"
     "@expo/plist" "^0.0.18"
-    "@expo/prebuild-config" "~5.0.3"
+    "@expo/prebuild-config" "5.0.7"
     "@expo/rudder-sdk-node" "1.1.1"
     "@expo/spawn-async" "1.5.0"
     "@expo/xcpretty" "^4.2.1"
@@ -1167,6 +1167,7 @@
     "getenv" "^1.0.0"
     "graphql" "15.8.0"
     "graphql-tag" "^2.10.1"
+    "https-proxy-agent" "^5.0.1"
     "internal-ip" "4.3.0"
     "is-root" "^2.1.0"
     "js-yaml" "^3.13.1"
@@ -1196,20 +1197,20 @@
     "uuid" "^3.4.0"
     "wrap-ansi" "^7.0.0"
 
-"@expo/code-signing-certificates@^0.0.2":
-  "integrity" "sha512-vnPHFjwOqxQ1VLztktY+fYCfwvLzjqpzKn09rchcQE7Sdf0wtW5fFtIZBEFOOY5wasp8tXSnp627zrAwazPHzg=="
-  "resolved" "https://registry.npmjs.org/@expo/code-signing-certificates/-/code-signing-certificates-0.0.2.tgz"
-  "version" "0.0.2"
+"@expo/code-signing-certificates@0.0.5":
+  "integrity" "sha512-BNhXkY1bblxKZpltzAx98G2Egj9g1Q+JRcvR7E99DOj862FTCX+ZPsAUtPTr7aHxwtrL7+fL3r0JSmM9kBm+Bw=="
+  "resolved" "https://registry.npmjs.org/@expo/code-signing-certificates/-/code-signing-certificates-0.0.5.tgz"
+  "version" "0.0.5"
   dependencies:
     "node-forge" "^1.2.1"
     "nullthrows" "^1.1.1"
 
-"@expo/config-plugins@~5.0.0", "@expo/config-plugins@~5.0.1":
-  "integrity" "sha512-1OfnsOrfeSkB0VZfT01UjQ5Uq6p+yYbq8yNkj0e99K/6NLHpyvIxj+5tZIV0nQXgkOcqBIABL2uA7lwB8CkaBQ=="
-  "resolved" "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-5.0.1.tgz"
-  "version" "5.0.1"
+"@expo/config-plugins@~5.0.0", "@expo/config-plugins@~5.0.3", "@expo/config-plugins@5.0.4":
+  "integrity" "sha512-vzUcVpqOMs3h+hyRdhGwk+eGIOhXa5xYdd92yO17RMNHav3v/+ekMbs7XA2c3lepMO8Yd4/5hqmRw9ZTL6jGzg=="
+  "resolved" "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-5.0.4.tgz"
+  "version" "5.0.4"
   dependencies:
-    "@expo/config-types" "^46.0.0"
+    "@expo/config-types" "^47.0.0"
     "@expo/json-file" "8.2.36"
     "@expo/plist" "0.0.18"
     "@expo/sdk-runtime-versions" "^1.0.0"
@@ -1225,19 +1226,19 @@
     "xcode" "^3.0.1"
     "xml2js" "0.4.23"
 
-"@expo/config-types@^46.0.0", "@expo/config-types@^46.0.1":
-  "integrity" "sha512-PXkmOgNwRyBfgVT1HmFZhfh3Qm7WKKyV6mk3/5HJ/LzPh1t+Zs2JrWX8U2YncTLV1QzV7nV8tnkyvszzqnZEzQ=="
-  "resolved" "https://registry.npmjs.org/@expo/config-types/-/config-types-46.0.2.tgz"
-  "version" "46.0.2"
+"@expo/config-types@^47.0.0":
+  "integrity" "sha512-r0pWfuhkv7KIcXMUiNACJmJKKwlTBGMw9VZHNdppS8/0Nve8HZMTkNRFQzTHW1uH3pBj8jEXpyw/2vSWDHex9g=="
+  "resolved" "https://registry.npmjs.org/@expo/config-types/-/config-types-47.0.0.tgz"
+  "version" "47.0.0"
 
-"@expo/config@~7.0.0", "@expo/config@~7.0.1", "@expo/config@7.0.1":
-  "integrity" "sha512-4lu0wr45XXJ2MXiLAm2+fmOyy/jjqF3NuDm92fO6nuulRzEEvTP4w3vsibJ690rT81ohtvhpruKhkRs0wSjKWA=="
-  "resolved" "https://registry.npmjs.org/@expo/config/-/config-7.0.1.tgz"
-  "version" "7.0.1"
+"@expo/config@~7.0.2", "@expo/config@7.0.3":
+  "integrity" "sha512-joVtB5o+NF40Tmsdp65UzryRtbnCuMbXkVO4wJnNJO4aaK0EYLdHCYSewORVqNcDfGN0LphQr8VTG2npbd9CJA=="
+  "resolved" "https://registry.npmjs.org/@expo/config/-/config-7.0.3.tgz"
+  "version" "7.0.3"
   dependencies:
     "@babel/code-frame" "~7.10.4"
-    "@expo/config-plugins" "~5.0.1"
-    "@expo/config-types" "^46.0.1"
+    "@expo/config-plugins" "~5.0.3"
+    "@expo/config-types" "^47.0.0"
     "@expo/json-file" "8.2.36"
     "getenv" "^1.0.0"
     "glob" "7.1.6"
@@ -1261,18 +1262,21 @@
     "xcode" "^3.0.0"
     "xml-js" "^1.6.11"
 
-"@expo/dev-server@~0.1.120":
-  "integrity" "sha512-x5/jCv0EOpz6FyehXpI5bgDQTVsGZYvgISkAw7n60RhtG+aid6N2CCR9SDMCH70XaUpFnfTW9qvderpCEj7Puw=="
-  "resolved" "https://registry.npmjs.org/@expo/dev-server/-/dev-server-0.1.120.tgz"
-  "version" "0.1.120"
+"@expo/dev-server@0.1.123":
+  "integrity" "sha512-N6UVzzeemfX0AONUSWInvkAAbqon8hRXpyYE/nMPaC6TvAmgGY5ILZAGoXwlpxwY2VKNT0Lx4s/UJ53ytIaHbA=="
+  "resolved" "https://registry.npmjs.org/@expo/dev-server/-/dev-server-0.1.123.tgz"
+  "version" "0.1.123"
   dependencies:
     "@expo/bunyan" "4.0.0"
-    "@expo/metro-config" "~0.4.0"
+    "@expo/metro-config" "~0.5.1"
     "@expo/osascript" "2.0.33"
+    "@expo/spawn-async" "^1.5.0"
     "body-parser" "1.19.0"
     "chalk" "^4.0.0"
     "connect" "^3.7.0"
     "fs-extra" "9.0.0"
+    "is-docker" "^2.0.0"
+    "is-wsl" "^2.1.1"
     "node-fetch" "^2.6.0"
     "open" "^8.3.0"
     "resolve-from" "^5.0.0"
@@ -1281,9 +1285,9 @@
     "temp-dir" "^2.0.0"
 
 "@expo/devcert@^1.0.0":
-  "integrity" "sha512-cahGyQCmpZmHpn2U04NR9KwsOIZy7Rhsw8Fg4q+A6563lIJxbkrgPnxq/O3NQAh3ohEvOXOOnoFx0b4yycCkpQ=="
-  "resolved" "https://registry.npmjs.org/@expo/devcert/-/devcert-1.0.0.tgz"
-  "version" "1.0.0"
+  "integrity" "sha512-ghUVhNJQOCTdQckSGTHctNp/0jzvVoMMkVh+6SHn+TZj8sU15U/npXIDt8NtQp0HedlPaCgkVdMu8Sacne0aEA=="
+  "resolved" "https://registry.npmjs.org/@expo/devcert/-/devcert-1.1.0.tgz"
+  "version" "1.1.0"
   dependencies:
     "application-config-path" "^0.1.0"
     "command-exists" "^1.2.4"
@@ -1297,12 +1301,12 @@
     "rimraf" "^2.6.2"
     "sudo-prompt" "^8.2.0"
     "tmp" "^0.0.33"
-    "tslib" "^1.10.0"
+    "tslib" "^2.4.0"
 
-"@expo/image-utils@0.3.20":
-  "integrity" "sha512-NgF/80XENyCS+amwC0P6uk1fauEtUq7gijD19jvl2xknJaADq8M2dMCRHwWMVOXosr2v46f3Z++G/NjmyOVS7A=="
-  "resolved" "https://registry.npmjs.org/@expo/image-utils/-/image-utils-0.3.20.tgz"
-  "version" "0.3.20"
+"@expo/image-utils@0.3.22":
+  "integrity" "sha512-uzq+RERAtkWypOFOLssFnXXqEqKjNj9eXN7e97d/EXUAojNcLDoXc0sL+F5B1I4qtlsnhX01kcpoIBBZD8wZNQ=="
+  "resolved" "https://registry.npmjs.org/@expo/image-utils/-/image-utils-0.3.22.tgz"
+  "version" "0.3.22"
   dependencies:
     "@expo/spawn-async" "1.5.0"
     "chalk" "^4.0.0"
@@ -1325,12 +1329,12 @@
     "json5" "^1.0.1"
     "write-file-atomic" "^2.3.0"
 
-"@expo/metro-config@~0.4.0":
-  "integrity" "sha512-QhOiotuzklalLbbsTMXJ5v4q4jffQ5xXhy1zsosgc2DL/ZzUr/Yhm3xUcOGnPQ2x7UyeY9Tl3njPHBOJJe7CSA=="
-  "resolved" "https://registry.npmjs.org/@expo/metro-config/-/metro-config-0.4.0.tgz"
-  "version" "0.4.0"
+"@expo/metro-config@~0.5.0", "@expo/metro-config@~0.5.1":
+  "integrity" "sha512-W1qsZPA5BXuRBkNLydKBYQ1+ubObhOK0gk2Fpc+XnhW+UUIHC9sDR5pZRYGNSnDDc3rG8y7c32UzSW9nlK+mog=="
+  "resolved" "https://registry.npmjs.org/@expo/metro-config/-/metro-config-0.5.2.tgz"
+  "version" "0.5.2"
   dependencies:
-    "@expo/config" "7.0.1"
+    "@expo/config" "~7.0.2"
     "@expo/json-file" "8.2.36"
     "chalk" "^4.1.0"
     "debug" "^4.3.2"
@@ -1348,9 +1352,9 @@
     "exec-async" "^2.2.0"
 
 "@expo/package-manager@~0.0.53":
-  "integrity" "sha512-PGk34uz4XDyhoNIlPh2D+BDsiXYuW2jXavTiax8d32uvHlRO6FN0cAsqlWD6fx3H2hRn8cU/leTuc4M7pYovCQ=="
-  "resolved" "https://registry.npmjs.org/@expo/package-manager/-/package-manager-0.0.56.tgz"
-  "version" "0.0.56"
+  "integrity" "sha512-Y4RpSL9EqaPF+Vd2GrK6r7Xx7Dv0Xdq3AGAD9C0KwV21WqP/scj/dpjxFY+ABwmdhNsFzYXb8fmDyh4tiKenPQ=="
+  "resolved" "https://registry.npmjs.org/@expo/package-manager/-/package-manager-0.0.57.tgz"
+  "version" "0.0.57"
   dependencies:
     "@expo/json-file" "8.2.36"
     "@expo/spawn-async" "^1.5.0"
@@ -1372,15 +1376,15 @@
     "base64-js" "^1.2.3"
     "xmlbuilder" "^14.0.0"
 
-"@expo/prebuild-config@~5.0.0", "@expo/prebuild-config@~5.0.3":
-  "integrity" "sha512-G4j1H3WFjRaiQ+FgFNULrnIm7RsQyjc4xp6lLTP2ydBv79wO3x8wAdeZvaZh7eOkfu9BESpQzACT1uuJTag5jg=="
-  "resolved" "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-5.0.3.tgz"
-  "version" "5.0.3"
+"@expo/prebuild-config@~5.0.0", "@expo/prebuild-config@5.0.7":
+  "integrity" "sha512-D+TBpJUHe4+oTGFPb4o0rrw/h1xxc6wF+abJnbDHUkhnaeiHkE2O3ByS7FdiZ2FT36t0OKqeSKG/xFwWT3m1Ew=="
+  "resolved" "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-5.0.7.tgz"
+  "version" "5.0.7"
   dependencies:
-    "@expo/config" "7.0.1"
-    "@expo/config-plugins" "~5.0.1"
-    "@expo/config-types" "^46.0.0"
-    "@expo/image-utils" "0.3.20"
+    "@expo/config" "~7.0.2"
+    "@expo/config-plugins" "~5.0.3"
+    "@expo/config-types" "^47.0.0"
+    "@expo/image-utils" "0.3.22"
     "@expo/json-file" "8.2.36"
     "debug" "^4.3.1"
     "fs-extra" "^9.0.0"
@@ -1891,22 +1895,22 @@
     "read-package-json-fast" "^2.0.3"
     "which" "^2.0.2"
 
-"@react-native-community/cli-clean@^9.1.0":
-  "integrity" "sha512-3HznNw8EBQtLsVyV8b8+h76M9EeJcJgYn5wZVGQ5mghAOhqnSWVbwRvpDdb8ITXaiTIXFGNOxXnGKMXsu0CYTw=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-9.1.0.tgz"
-  "version" "9.1.0"
+"@react-native-community/cli-clean@^9.2.1":
+  "integrity" "sha512-dyNWFrqRe31UEvNO+OFWmQ4hmqA07bR9Ief/6NnGwx67IO9q83D5PEAf/o96ML6jhSbDwCmpPKhPwwBbsyM3mQ=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-9.2.1.tgz"
+  "version" "9.2.1"
   dependencies:
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     "chalk" "^4.1.2"
     "execa" "^1.0.0"
     "prompts" "^2.4.0"
 
-"@react-native-community/cli-config@^9.1.0":
-  "integrity" "sha512-6G9d5weedQ6EMz37ZYXrFHCU2DG3yqvdLs4Jo2383cSxal+oO+kggaTgqLBKoMETz/S80KsMeC/l+MoRjc1pzw=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-9.1.0.tgz"
-  "version" "9.1.0"
+"@react-native-community/cli-config@^9.2.1":
+  "integrity" "sha512-gHJlBBXUgDN9vrr3aWkRqnYrPXZLztBDQoY97Mm5Yo6MidsEpYo2JIP6FH4N/N2p1TdjxJL4EFtdd/mBpiR2MQ=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-9.2.1.tgz"
+  "version" "9.2.1"
   dependencies:
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     "cosmiconfig" "^5.1.0"
     "deepmerge" "^3.2.0"
     "glob" "^7.1.3"
@@ -1919,14 +1923,14 @@
   dependencies:
     "serve-static" "^1.13.1"
 
-"@react-native-community/cli-doctor@^9.1.2":
-  "integrity" "sha512-BmacbikyaxR4s54kq17LE0bBK7g8bcjc679ee36DqkX+Xij2VHHynLzTpuDJ8y6iHI2v13vauEMjnh4j612u5w=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-9.1.2.tgz"
-  "version" "9.1.2"
+"@react-native-community/cli-doctor@^9.3.0":
+  "integrity" "sha512-/fiuG2eDGC2/OrXMOWI5ifq4X1gdYTQhvW2m0TT5Lk1LuFiZsbTCp1lR+XILKekuTvmYNjEGdVpeDpdIWlXdEA=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-9.3.0.tgz"
+  "version" "9.3.0"
   dependencies:
-    "@react-native-community/cli-config" "^9.1.0"
-    "@react-native-community/cli-platform-ios" "^9.1.2"
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-config" "^9.2.1"
+    "@react-native-community/cli-platform-ios" "^9.3.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     "chalk" "^4.1.2"
     "command-exists" "^1.2.8"
     "envinfo" "^7.7.2"
@@ -1941,23 +1945,23 @@
     "sudo-prompt" "^9.0.0"
     "wcwidth" "^1.0.1"
 
-"@react-native-community/cli-hermes@^9.1.0":
-  "integrity" "sha512-Ly4dnlRZZ7FckFfSWnaD5BxszuEe9/WcJ6A7srW5UobqnnmEznDv1IY0oBTq1ggnmzIquM9dJQZ0UbcZeQjkoA=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-hermes/-/cli-hermes-9.1.0.tgz"
-  "version" "9.1.0"
+"@react-native-community/cli-hermes@^9.3.1":
+  "integrity" "sha512-Mq4PK8m5YqIdaVq5IdRfp4qK09aVO+aiCtd6vjzjNUgk1+1X5cgUqV6L65h4N+TFJYJHcp2AnB+ik1FAYXvYPQ=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-hermes/-/cli-hermes-9.3.1.tgz"
+  "version" "9.3.1"
   dependencies:
-    "@react-native-community/cli-platform-android" "^9.1.0"
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-platform-android" "^9.3.1"
+    "@react-native-community/cli-tools" "^9.2.1"
     "chalk" "^4.1.2"
     "hermes-profile-transformer" "^0.0.6"
     "ip" "^1.1.5"
 
-"@react-native-community/cli-platform-android@^9.0.0", "@react-native-community/cli-platform-android@^9.1.0":
-  "integrity" "sha512-OZ/Krq0wH6T7LuAvwFdJYe47RrHG8IOcoab47H4QQdYGTmJgTS3SlVkr6gn79pZyBGyp7xVizD30QJrIIyDjnw=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-9.1.0.tgz"
-  "version" "9.1.0"
+"@react-native-community/cli-platform-android@^9.3.1", "@react-native-community/cli-platform-android@9.3.1":
+  "integrity" "sha512-m0bQ6Twewl7OEZoVf79I2GZmsDqh+Gh0bxfxWgwxobsKDxLx8/RNItAo1lVtTCgzuCR75cX4EEO8idIF9jYhew=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.1.tgz"
+  "version" "9.3.1"
   dependencies:
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     "chalk" "^4.1.2"
     "execa" "^1.0.0"
     "fs-extra" "^8.1.0"
@@ -1965,40 +1969,40 @@
     "logkitty" "^0.7.1"
     "slash" "^3.0.0"
 
-"@react-native-community/cli-platform-ios@^9.0.0", "@react-native-community/cli-platform-ios@^9.1.2":
-  "integrity" "sha512-XpgA9ymm76yjvtYPByqFF1LP7eM/lH5K3zpkZkV9MJLStOIo3mrzN2ywRDZ/xVOheh5LafS4YMmrjIajf11oIQ=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.1.2.tgz"
-  "version" "9.1.2"
+"@react-native-community/cli-platform-ios@^9.3.0", "@react-native-community/cli-platform-ios@9.3.0":
+  "integrity" "sha512-nihTX53BhF2Q8p4B67oG3RGe1XwggoGBrMb6vXdcu2aN0WeXJOXdBLgR900DAA1O8g7oy1Sudu6we+JsVTKnjw=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.3.0.tgz"
+  "version" "9.3.0"
   dependencies:
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     "chalk" "^4.1.2"
     "execa" "^1.0.0"
     "glob" "^7.1.3"
     "ora" "^5.4.1"
 
-"@react-native-community/cli-plugin-metro@^9.1.1":
-  "integrity" "sha512-8CBwEZrbYIeQw69Exg/oW20pV9C6mbYlDz0pxZJ0AYmC20Q+wFFs6sUh5zm28ZUh1L0LxNGmhle/YvMPqA+fMQ=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-9.1.1.tgz"
-  "version" "9.1.1"
+"@react-native-community/cli-plugin-metro@^9.2.1":
+  "integrity" "sha512-byBGBH6jDfUvcHGFA45W/sDwMlliv7flJ8Ns9foCh3VsIeYYPoDjjK7SawE9cPqRdMAD4SY7EVwqJnOtRbwLiQ=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-9.2.1.tgz"
+  "version" "9.2.1"
   dependencies:
-    "@react-native-community/cli-server-api" "^9.1.0"
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-server-api" "^9.2.1"
+    "@react-native-community/cli-tools" "^9.2.1"
     "chalk" "^4.1.2"
-    "metro" "^0.72.1"
-    "metro-config" "^0.72.1"
-    "metro-core" "^0.72.1"
-    "metro-react-native-babel-transformer" "^0.72.1"
-    "metro-resolver" "^0.72.1"
-    "metro-runtime" "^0.72.1"
+    "metro" "0.72.3"
+    "metro-config" "0.72.3"
+    "metro-core" "0.72.3"
+    "metro-react-native-babel-transformer" "0.72.3"
+    "metro-resolver" "0.72.3"
+    "metro-runtime" "0.72.3"
     "readline" "^1.3.0"
 
-"@react-native-community/cli-server-api@^9.1.0":
-  "integrity" "sha512-Xf3hUqUc99hVmWOsmfNqUQ+sxhut9MIHlINzlo7Azxlmg9v9U/vtwJVJSIPD6iwPzvaPH1qeshzwy/r0GUR7fg=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-9.1.0.tgz"
-  "version" "9.1.0"
+"@react-native-community/cli-server-api@^9.2.1":
+  "integrity" "sha512-EI+9MUxEbWBQhWw2PkhejXfkcRqPl+58+whlXJvKHiiUd7oVbewFs0uLW0yZffUutt4FGx6Uh88JWEgwOzAdkw=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-9.2.1.tgz"
+  "version" "9.2.1"
   dependencies:
     "@react-native-community/cli-debugger-ui" "^9.0.0"
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     "compression" "^1.7.1"
     "connect" "^3.6.5"
     "errorhandler" "^1.5.0"
@@ -2007,10 +2011,10 @@
     "serve-static" "^1.13.1"
     "ws" "^7.5.1"
 
-"@react-native-community/cli-tools@^9.1.0":
-  "integrity" "sha512-07Z1hyy4cYty84P9cGq+Xf8Vb0S/0ffxLVdVQEMmLjU71sC9YTUv1anJdZyt6f9uUPvA9+e/YIXw5Bu0rvuXIw=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-9.1.0.tgz"
-  "version" "9.1.0"
+"@react-native-community/cli-tools@^9.2.1":
+  "integrity" "sha512-bHmL/wrKmBphz25eMtoJQgwwmeCylbPxqFJnFSbkqJPXQz3ManQ6q/gVVMqFyz7D3v+riaus/VXz3sEDa97uiQ=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-9.2.1.tgz"
+  "version" "9.2.1"
   dependencies:
     "appdirsjs" "^1.2.4"
     "chalk" "^4.1.2"
@@ -2029,19 +2033,19 @@
   dependencies:
     "joi" "^17.2.1"
 
-"@react-native-community/cli@^9.0.0":
-  "integrity" "sha512-s5OY8M9SD2b5b8ywXztzqA04Mud1Ohdv2bH1YoDVQ/L7XNhDJ2TABPZ92Qor09xhUnsz2DivJaR5vv8fMIbH7Q=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.1.2.tgz"
-  "version" "9.1.2"
+"@react-native-community/cli@9.3.2":
+  "integrity" "sha512-IAW4X0vmX/xozNpp/JVZaX7MrC85KV0OP2DF4o7lNGOfpUhzJAEWqTfkxFYS+VsRjZHDve4wSTiGIuXwE7FG1w=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.3.2.tgz"
+  "version" "9.3.2"
   dependencies:
-    "@react-native-community/cli-clean" "^9.1.0"
-    "@react-native-community/cli-config" "^9.1.0"
+    "@react-native-community/cli-clean" "^9.2.1"
+    "@react-native-community/cli-config" "^9.2.1"
     "@react-native-community/cli-debugger-ui" "^9.0.0"
-    "@react-native-community/cli-doctor" "^9.1.2"
-    "@react-native-community/cli-hermes" "^9.1.0"
-    "@react-native-community/cli-plugin-metro" "^9.1.1"
-    "@react-native-community/cli-server-api" "^9.1.0"
-    "@react-native-community/cli-tools" "^9.1.0"
+    "@react-native-community/cli-doctor" "^9.3.0"
+    "@react-native-community/cli-hermes" "^9.3.1"
+    "@react-native-community/cli-plugin-metro" "^9.2.1"
+    "@react-native-community/cli-server-api" "^9.2.1"
+    "@react-native-community/cli-tools" "^9.2.1"
     "@react-native-community/cli-types" "^9.1.0"
     "chalk" "^4.1.2"
     "commander" "^9.4.0"
@@ -2076,10 +2080,10 @@
   "resolved" "https://registry.npmjs.org/@react-native-community/eslint-plugin/-/eslint-plugin-1.2.0.tgz"
   "version" "1.2.0"
 
-"@react-native-community/netinfo@^9.3.2":
-  "integrity" "sha512-fR7wSIhmIUX+Skzgkr2vj5xopWa0lvvEWoXP1m7//jZjEgOZnu9DgdUimLHDrMo6AtZyUNrJscsFEepihTLlPQ=="
-  "resolved" "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-9.3.2.tgz"
-  "version" "9.3.2"
+"@react-native-community/netinfo@^9.3.7":
+  "integrity" "sha512-+taWmE5WpBp0uS6kf+bouCx/sn89G9EpR4s2M/ReLvctVIFL2Qh8WnWfBxqK9qwgmFha/uqjSr2Gq03OOtiDcw=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-9.3.7.tgz"
+  "version" "9.3.7"
 
 "@react-native-community/slider@^4.3.2", "@react-native-community/slider@>=4.0.0":
   "integrity" "sha512-pKIx+l3yFQAVMcqGsnRcJAqZbVeR69CRbW85nZHhLuR/mOT0NbKWJIAEy7MC+e84DMTw0RJnEflRQO2/j8wcxQ=="
@@ -2192,6 +2196,125 @@
     "component-type" "^1.2.1"
     "join-component" "^1.1.0"
 
+"@sentry/browser@7.26.0":
+  "integrity" "sha512-S6uW+Ni2VLGHUV9eAUtTy5QEvqKeOhcnWnv+2yTGDtQCJ0SuHfXRCM7ASAQYBiKffZqIFc9Z2XNU/2cuWcXJmw=="
+  "resolved" "https://registry.npmjs.org/@sentry/browser/-/browser-7.26.0.tgz"
+  "version" "7.26.0"
+  dependencies:
+    "@sentry/core" "7.26.0"
+    "@sentry/types" "7.26.0"
+    "@sentry/utils" "7.26.0"
+    "tslib" "^1.9.3"
+
+"@sentry/cli@^1.72.0", "@sentry/cli@1.74.4":
+  "integrity" "sha512-BMfzYiedbModsNBJlKeBOLVYUtwSi99LJ8gxxE4Bp5N8hyjNIN0WVrozAVZ27mqzAuy6151Za3dpmOLO86YlGw=="
+  "resolved" "https://registry.npmjs.org/@sentry/cli/-/cli-1.74.4.tgz"
+  "version" "1.74.4"
+  dependencies:
+    "https-proxy-agent" "^5.0.0"
+    "mkdirp" "^0.5.5"
+    "node-fetch" "^2.6.7"
+    "npmlog" "^4.1.2"
+    "progress" "^2.0.3"
+    "proxy-from-env" "^1.1.0"
+    "which" "^2.0.2"
+
+"@sentry/core@7.26.0":
+  "integrity" "sha512-ydi236ZoP/xpvLdf7B8seKjCcGc5Z+q9c14tHCFusplPZgLSXcYpiiLIDWmF7OAXO89sSbb1NaFt9YB0LkYdLQ=="
+  "resolved" "https://registry.npmjs.org/@sentry/core/-/core-7.26.0.tgz"
+  "version" "7.26.0"
+  dependencies:
+    "@sentry/types" "7.26.0"
+    "@sentry/utils" "7.26.0"
+    "tslib" "^1.9.3"
+
+"@sentry/hub@7.26.0":
+  "integrity" "sha512-djAMuA4/Jy28dOSy9z5ccXBDyYk1N9m0ljle+dKqjfJwv440tCGyoxm2arqJFHbXvqwJTt2Giv8ASR4uGD1UNg=="
+  "resolved" "https://registry.npmjs.org/@sentry/hub/-/hub-7.26.0.tgz"
+  "version" "7.26.0"
+  dependencies:
+    "@sentry/core" "7.26.0"
+    "@sentry/types" "7.26.0"
+    "@sentry/utils" "7.26.0"
+    "tslib" "^1.9.3"
+
+"@sentry/integrations@7.26.0":
+  "integrity" "sha512-5tyBA5BnZEuosSIvBP7mJz66xJaZTb/k1EzHEc0hR2Mw8QpLgMneDZBfi4vdbhxtGpJKC/gURoUGZf9hpwW+DA=="
+  "resolved" "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.26.0.tgz"
+  "version" "7.26.0"
+  dependencies:
+    "@sentry/types" "7.26.0"
+    "@sentry/utils" "7.26.0"
+    "localforage" "^1.8.1"
+    "tslib" "^1.9.3"
+
+"@sentry/react-native@^4.12.0":
+  "integrity" "sha512-KBRXXqqGg67oqhtGzZQ8Ls4rxxUozDyL8tMLmRLk//bkSWBC6XslyjkZkQrB1VZsv2ikEYCUgyAP7fzcj6Bbig=="
+  "resolved" "https://registry.npmjs.org/@sentry/react-native/-/react-native-4.12.0.tgz"
+  "version" "4.12.0"
+  dependencies:
+    "@sentry/browser" "7.26.0"
+    "@sentry/cli" "1.74.4"
+    "@sentry/core" "7.26.0"
+    "@sentry/hub" "7.26.0"
+    "@sentry/integrations" "7.26.0"
+    "@sentry/react" "7.26.0"
+    "@sentry/tracing" "7.26.0"
+    "@sentry/types" "7.26.0"
+    "@sentry/utils" "7.26.0"
+    "@sentry/wizard" "1.4.0"
+
+"@sentry/react@7.26.0":
+  "integrity" "sha512-v5XKpG1PF4qnWvG8E0N1kcUk74lTp+TDfKx5x996NIja2oOTp/JL9V0Q+lAMlB1EKgJuxLe92IeqD5/DTtzE7A=="
+  "resolved" "https://registry.npmjs.org/@sentry/react/-/react-7.26.0.tgz"
+  "version" "7.26.0"
+  dependencies:
+    "@sentry/browser" "7.26.0"
+    "@sentry/types" "7.26.0"
+    "@sentry/utils" "7.26.0"
+    "hoist-non-react-statics" "^3.3.2"
+    "tslib" "^1.9.3"
+
+"@sentry/tracing@7.26.0":
+  "integrity" "sha512-UK8EiXxJrDTWD82Oasj2WP/QuQ+wzPlg74vYmxl1ie/LRs6C6wHkilBZwDV9HnDdqAqSjl0al8oBa075lK+U3Q=="
+  "resolved" "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.26.0.tgz"
+  "version" "7.26.0"
+  dependencies:
+    "@sentry/core" "7.26.0"
+    "@sentry/types" "7.26.0"
+    "@sentry/utils" "7.26.0"
+    "tslib" "^1.9.3"
+
+"@sentry/types@7.26.0":
+  "integrity" "sha512-U2s0q3ALwWFdHJBgn8nrG9bCTJZ3hAqL/I2Si4Mf0ZWnJ/KTJKbtyrputHr8wMbHvX0NZTJGTxFVUO46J+GBRA=="
+  "resolved" "https://registry.npmjs.org/@sentry/types/-/types-7.26.0.tgz"
+  "version" "7.26.0"
+
+"@sentry/utils@7.26.0":
+  "integrity" "sha512-nIC1PRyoMBi4QB7XNCWaPDqaQbPayMwAvUm6W3MC5bHPfVZmmFt+3sLZQKUD/E0NeQnJ3vTyPewPF/LfxLOE5A=="
+  "resolved" "https://registry.npmjs.org/@sentry/utils/-/utils-7.26.0.tgz"
+  "version" "7.26.0"
+  dependencies:
+    "@sentry/types" "7.26.0"
+    "tslib" "^1.9.3"
+
+"@sentry/wizard@1.4.0":
+  "integrity" "sha512-Q/f9wJAAAr/YB6oWUzMQP/y5LIgx9la1SanMHNr3hMtVPKkMhvIZO5UWVn2G763yi85zARqSCLDx31/tZd4new=="
+  "resolved" "https://registry.npmjs.org/@sentry/wizard/-/wizard-1.4.0.tgz"
+  "version" "1.4.0"
+  dependencies:
+    "@sentry/cli" "^1.72.0"
+    "chalk" "^2.4.1"
+    "glob" "^7.1.3"
+    "inquirer" "^6.2.0"
+    "lodash" "^4.17.15"
+    "opn" "^5.4.0"
+    "r2" "^2.0.1"
+    "read-env" "^1.3.0"
+    "semver" "^7.3.5"
+    "xcode" "3.0.1"
+    "yargs" "^16.2.0"
+
 "@sideway/address@^4.1.3":
   "integrity" "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw=="
   "resolved" "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz"
@@ -2200,9 +2323,9 @@
     "@hapi/hoek" "^9.0.0"
 
 "@sideway/formula@^3.0.0":
-  "integrity" "sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg=="
-  "resolved" "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.0.tgz"
-  "version" "3.0.0"
+  "integrity" "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+  "resolved" "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz"
+  "version" "3.0.1"
 
 "@sideway/pinpoint@^2.0.0":
   "integrity" "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
@@ -2475,9 +2598,9 @@
     "wonka" "^4.0.14"
 
 "@xmldom/xmldom@~0.7.0":
-  "integrity" "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A=="
-  "resolved" "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz"
-  "version" "0.7.5"
+  "integrity" "sha512-yceMpm/xd4W2a85iqZyO09gTnHvXF6pyiWjD2jcOJs7hRoZtNNOO1eJlhHj1ixA+xip2hOyGn+LgcvLCMo5zXA=="
+  "resolved" "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.9.tgz"
+  "version" "0.7.9"
 
 "abab@^2.0.3", "abab@^2.0.5":
   "integrity" "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
@@ -2592,6 +2715,11 @@
   "resolved" "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz"
   "version" "3.2.0"
 
+"ansi-escapes@^3.2.0":
+  "integrity" "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ=="
+  "resolved" "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz"
+  "version" "3.2.0"
+
 "ansi-escapes@^4.2.1":
   "integrity" "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="
   "resolved" "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
@@ -2608,6 +2736,16 @@
     "slice-ansi" "^2.0.0"
     "strip-ansi" "^5.0.0"
 
+"ansi-regex@^2.0.0":
+  "integrity" "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
+  "resolved" "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
+  "version" "2.1.1"
+
+"ansi-regex@^3.0.0":
+  "integrity" "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw=="
+  "resolved" "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz"
+  "version" "3.0.1"
+
 "ansi-regex@^4.1.0":
   "integrity" "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
   "resolved" "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz"
@@ -2666,13 +2804,18 @@
   "version" "1.2.7"
 
 "application-config-path@^0.1.0":
-  "integrity" "sha512-lljTpVvFteShrHuKRvweZfa9o/Nc34Y8r5/1Lqh/yyKaspRT2J3fkEiSSk1YLG8ZSVyU7yHysRy9zcDDS2aH1Q=="
-  "resolved" "https://registry.npmjs.org/application-config-path/-/application-config-path-0.1.0.tgz"
-  "version" "0.1.0"
+  "integrity" "sha512-zy9cHePtMP0YhwG+CfHm0bgwdnga2X3gZexpdCwEj//dpb+TKajtiC8REEUJUSq6Ab4f9cgNy2l8ObXzCXFkEw=="
+  "resolved" "https://registry.npmjs.org/application-config-path/-/application-config-path-0.1.1.tgz"
+  "version" "0.1.1"
 
 "aproba@^1.0.3 || ^2.0.0", "aproba@^2.0.0":
   "version" "2.0.0"
 
+"aproba@^1.0.3":
+  "integrity" "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+  "resolved" "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz"
+  "version" "1.2.0"
+
 "archy@~1.0.0":
   "version" "1.0.0"
 
@@ -2682,6 +2825,14 @@
     "delegates" "^1.0.0"
     "readable-stream" "^3.6.0"
 
+"are-we-there-yet@~1.1.2":
+  "integrity" "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g=="
+  "resolved" "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz"
+  "version" "1.1.7"
+  dependencies:
+    "delegates" "^1.0.0"
+    "readable-stream" "^2.0.6"
+
 "arg@4.1.0":
   "integrity" "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg=="
   "resolved" "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz"
@@ -2957,17 +3108,18 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-top-level-await" "^7.8.3"
 
-"babel-preset-expo@~9.2.0":
-  "integrity" "sha512-aM2htiNx0H49H+MWCp9+cKVSdcdNSn0tbE5Dln/GO1xna4ZlnA30clbfClcYJFUcZtW90IsYeZwQ/hj8zyWhNA=="
-  "resolved" "https://registry.npmjs.org/babel-preset-expo/-/babel-preset-expo-9.2.0.tgz"
-  "version" "9.2.0"
+"babel-preset-expo@~9.2.2":
+  "integrity" "sha512-69cSPObZWFz0AaUT6IhCu2VzPVTICUtXzhX5ecoDttFe+9wb9yMV8m7rBNZptJQ3wtiKB5iEL7/wvtKygPz/mQ=="
+  "resolved" "https://registry.npmjs.org/babel-preset-expo/-/babel-preset-expo-9.2.2.tgz"
+  "version" "9.2.2"
   dependencies:
     "@babel/plugin-proposal-decorators" "^7.12.9"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.13"
     "@babel/plugin-transform-react-jsx" "^7.12.17"
     "@babel/preset-env" "^7.12.9"
     "babel-plugin-module-resolver" "^4.1.0"
     "babel-plugin-react-native-web" "~0.18.2"
-    "metro-react-native-babel-preset" "~0.70.3"
+    "metro-react-native-babel-preset" "0.72.3"
 
 "babel-preset-fbjs@^3.4.0":
   "integrity" "sha512-9ywCsCvo1ojrw0b+XYk7aFvTH6D9064t0RIL1rtMf3nsa02Xw41MS7sZw216Im35xj/UY0PDBQsa1brUDDF1Ow=="
@@ -3357,6 +3509,11 @@
   "resolved" "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz"
   "version" "6.3.0"
 
+"camelcase@5.0.0":
+  "integrity" "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA=="
+  "resolved" "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz"
+  "version" "5.0.0"
+
 "caniuse-lite@^1.0.30001400":
   "integrity" "sha512-+TeEIee1gS5bYOiuf+PS/kp2mrXic37Hl66VY6EAfxasIk5fELTktK2oOezYed12H8w7jt3s512PpulQidPjwA=="
   "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001412.tgz"
@@ -3369,16 +3526,16 @@
   dependencies:
     "rsvp" "^4.8.4"
 
+"caseless@^0.12.0", "caseless@~0.12.0":
+  "integrity" "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+  "resolved" "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
+  "version" "0.12.0"
+
 "caseless@~0.11.0":
   "integrity" "sha512-ODLXH644w9C2fMPAm7bMDQ3GRvipZWZfKc+8As6hIadRIelE0n0xZuN38NS6kiK3KPEVrpymmQD8bvncAHWQkQ=="
   "resolved" "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz"
   "version" "0.11.0"
 
-"caseless@~0.12.0":
-  "integrity" "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
-  "resolved" "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
-  "version" "0.12.0"
-
 "chalk@^2.0.0":
   "integrity" "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="
   "resolved" "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
@@ -3397,6 +3554,15 @@
     "escape-string-regexp" "^1.0.5"
     "supports-color" "^5.3.0"
 
+"chalk@^2.4.1":
+  "integrity" "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="
+  "resolved" "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
+  "version" "2.4.2"
+  dependencies:
+    "ansi-styles" "^3.2.1"
+    "escape-string-regexp" "^1.0.5"
+    "supports-color" "^5.3.0"
+
 "chalk@^2.4.2":
   "integrity" "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="
   "resolved" "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
@@ -3419,6 +3585,11 @@
   "resolved" "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
   "version" "1.0.2"
 
+"chardet@^0.7.0":
+  "integrity" "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+  "resolved" "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
+  "version" "0.7.0"
+
 "charenc@~0.0.1", "charenc@0.0.2":
   "integrity" "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
   "resolved" "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz"
@@ -3440,14 +3611,14 @@
   "version" "2.0.0"
 
 "ci-info@^3.2.0":
-  "integrity" "sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug=="
-  "resolved" "https://registry.npmjs.org/ci-info/-/ci-info-3.4.0.tgz"
-  "version" "3.4.0"
+  "integrity" "sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w=="
+  "resolved" "https://registry.npmjs.org/ci-info/-/ci-info-3.7.1.tgz"
+  "version" "3.7.1"
 
 "ci-info@^3.3.0":
-  "integrity" "sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug=="
-  "resolved" "https://registry.npmjs.org/ci-info/-/ci-info-3.4.0.tgz"
-  "version" "3.4.0"
+  "integrity" "sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w=="
+  "resolved" "https://registry.npmjs.org/ci-info/-/ci-info-3.7.1.tgz"
+  "version" "3.7.1"
 
 "cidr-regex@^3.1.1":
   "version" "3.1.1"
@@ -3506,6 +3677,11 @@
   optionalDependencies:
     "@colors/colors" "1.5.0"
 
+"cli-width@^2.0.0":
+  "integrity" "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
+  "resolved" "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz"
+  "version" "2.2.1"
+
 "cliui@^6.0.0":
   "integrity" "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="
   "resolved" "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz"
@@ -3553,6 +3729,11 @@
   "resolved" "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
   "version" "4.6.0"
 
+"code-point-at@^1.0.0":
+  "integrity" "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA=="
+  "resolved" "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"
+  "version" "1.1.0"
+
 "collect-v8-coverage@^1.0.0":
   "integrity" "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg=="
   "resolved" "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz"
@@ -3665,9 +3846,9 @@
   "version" "7.2.0"
 
 "commander@^9.4.0":
-  "integrity" "sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw=="
-  "resolved" "https://registry.npmjs.org/commander/-/commander-9.4.0.tgz"
-  "version" "9.4.0"
+  "integrity" "sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw=="
+  "resolved" "https://registry.npmjs.org/commander/-/commander-9.4.1.tgz"
+  "version" "9.4.1"
 
 "commander@~2.13.0":
   "integrity" "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA=="
@@ -3742,6 +3923,11 @@
     "parseurl" "~1.3.3"
     "utils-merge" "1.0.1"
 
+"console-control-strings@^1.0.0", "console-control-strings@~1.1.0":
+  "integrity" "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
+  "resolved" "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz"
+  "version" "1.1.0"
+
 "console-control-strings@^1.1.0":
   "version" "1.1.0"
 
@@ -3923,9 +4109,9 @@
     "whatwg-url" "^8.0.0"
 
 "dayjs@^1.8.15":
-  "integrity" "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
-  "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz"
-  "version" "1.11.5"
+  "integrity" "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+  "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz"
+  "version" "1.11.7"
 
 "debug@^2.2.0":
   "integrity" "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="
@@ -3976,9 +4162,9 @@
   "version" "10.4.1"
 
 "decode-uri-component@^0.2.0":
-  "integrity" "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
-  "resolved" "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz"
-  "version" "0.2.0"
+  "integrity" "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
+  "resolved" "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz"
+  "version" "0.2.2"
 
 "decompress-response@^6.0.0":
   "integrity" "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="
@@ -4082,6 +4268,8 @@
   "version" "1.0.0"
 
 "delegates@^1.0.0":
+  "integrity" "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
+  "resolved" "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz"
   "version" "1.0.0"
 
 "denodeify@^1.2.1":
@@ -4650,30 +4838,28 @@
     "jest-message-util" "^26.6.2"
     "jest-regex-util" "^26.0.0"
 
-"expo-application@~4.2.2":
-  "integrity" "sha512-bFEaFRUdV6aK2iBd+HzkHNPYsyj88EAhaQW5leznmO0qQMJxpAQ3eoUXMey1hfDBh1qgkkHgSyCZ9BIgMAGJ1g=="
-  "resolved" "https://registry.npmjs.org/expo-application/-/expo-application-4.2.2.tgz"
-  "version" "4.2.2"
+"expo-application@~5.0.1":
+  "integrity" "sha512-bThxK5zH/Lc2tkCvEXGjfM7ayvOVmPWYcWzXsMIU1RtG73TyXo4cq+73FvfDNIWn6gKS0WyMcmoPB3WXEV/jsw=="
+  "resolved" "https://registry.npmjs.org/expo-application/-/expo-application-5.0.1.tgz"
+  "version" "5.0.1"
 
-"expo-asset@~8.6.1":
-  "integrity" "sha512-urbUp1YtwH2J0Qc3inGQJdqTjWKML77SeMNgff+iR9MUE8gDkFqSCDjrBi7i5Oj5DDtq43mmtDg8G8ei6Vchcg=="
-  "resolved" "https://registry.npmjs.org/expo-asset/-/expo-asset-8.6.1.tgz"
-  "version" "8.6.1"
+"expo-asset@~8.7.0":
+  "integrity" "sha512-lkoNsHK6vf+outISB6/37SonXcAL6Buw0ycjiwQVFfpOBKpkQa+zw5wm1m3KwjH2txmR3xdIzcpWsJkgovYCvQ=="
+  "resolved" "https://registry.npmjs.org/expo-asset/-/expo-asset-8.7.0.tgz"
+  "version" "8.7.0"
   dependencies:
     "blueimp-md5" "^2.10.0"
-    "expo-constants" "~13.2.2"
-    "expo-file-system" "~14.1.0"
+    "expo-constants" "~14.0.0"
+    "expo-file-system" "~15.1.0"
     "invariant" "^2.2.4"
     "md5-file" "^3.2.3"
     "path-browserify" "^1.0.0"
     "url-parse" "^1.5.9"
 
-"expo-av@^12.0.4", "expo-av@>=5.0.2":
-  "integrity" "sha512-wq3wx6J1aacZEPZce9TK1+o4YTAOWyb5cJ4CqfsgHcXeUdHyO3qbva/5uecigpEYlCxOlWYFhAz2T0dQ7nWSpQ=="
-  "resolved" "https://registry.npmjs.org/expo-av/-/expo-av-12.0.4.tgz"
-  "version" "12.0.4"
-  dependencies:
-    "@expo/config-plugins" "~5.0.0"
+"expo-av@^13.0.2", "expo-av@>=5.0.2":
+  "integrity" "sha512-u+y9wUBodp08UjRZYckNWzr9zEQHK6eScRBkhdTd9Rq48SEZ7eN6xXn79hubvk0P5nj7lFS+hdKjmx9T5XHGww=="
+  "resolved" "https://registry.npmjs.org/expo-av/-/expo-av-13.0.2.tgz"
+  "version" "13.0.2"
 
 "expo-barcode-scanner@^11.4.0":
   "integrity" "sha512-Q4BreQHY5U1aGF+rfqeGSzcdlayTKnSe/qTIfkXTmXFsL7bu3hMqdh5J/DL00Dfmc7C0IR8EiV75rqRrY4t0nA=="
@@ -4683,31 +4869,30 @@
     "@expo/config-plugins" "~5.0.0"
     "expo-image-loader" "~3.2.0"
 
-"expo-constants@~13.2.2", "expo-constants@~13.2.4":
-  "integrity" "sha512-Zobau8EuTk2GgafwkfGnWM6CmSLB7X8qnQXVuXe0nd3v92hfQUmRWGhJwH88uxXj3LrfqctM6PaJ8taG1vxfBw=="
-  "resolved" "https://registry.npmjs.org/expo-constants/-/expo-constants-13.2.4.tgz"
-  "version" "13.2.4"
+"expo-constants@~14.0.0", "expo-constants@~14.0.2":
+  "integrity" "sha512-wzV3nrzTXTI8yG0tfas3fnqCfKV6YE+1GphEREyVDAShEB6mBInX1b6HgtpHFy2wOtnml+lPVmTCeGtjjLnZhA=="
+  "resolved" "https://registry.npmjs.org/expo-constants/-/expo-constants-14.0.2.tgz"
+  "version" "14.0.2"
   dependencies:
-    "@expo/config" "~7.0.0"
+    "@expo/config" "~7.0.2"
     "uuid" "^3.3.2"
 
-"expo-error-recovery@~3.2.0":
-  "integrity" "sha512-XZ630ks5HNxa9oc2Ya1hEn1ez031Cy4VnyxerPC2o9fKNKSrD/64cRqGF9NkGM3X2uf8+PCB9adxVflAIXBf6w=="
-  "resolved" "https://registry.npmjs.org/expo-error-recovery/-/expo-error-recovery-3.2.0.tgz"
-  "version" "3.2.0"
+"expo-error-recovery@~4.0.1":
+  "integrity" "sha512-wceptnRX+N3qCSVTNbIchUFu3GmY30onRH5L66OF8HMLpAIQfrZMLxJfz7SAMJTcr3jxsJ11vSa2l2RaPKgHsQ=="
+  "resolved" "https://registry.npmjs.org/expo-error-recovery/-/expo-error-recovery-4.0.1.tgz"
+  "version" "4.0.1"
 
-"expo-file-system@~14.1.0":
-  "integrity" "sha512-lJcPGQ8yKXVknVkD5TmcJnR/TpQbEL0JP8hknLejfq3FIqPqI/LBFn31YiP37grxW8lITz1al8pq5T6CSUjAzQ=="
-  "resolved" "https://registry.npmjs.org/expo-file-system/-/expo-file-system-14.1.0.tgz"
-  "version" "14.1.0"
+"expo-file-system@~15.1.0", "expo-file-system@~15.1.1":
+  "integrity" "sha512-MYYDKxjLo9VOkvGHqym5EOAUS+ero9O66X5zI+EXJzqNznKvnfScdXeeAaQzShmWtmLkdVDCoYFGOaTvTA1wTQ=="
+  "resolved" "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.1.1.tgz"
+  "version" "15.1.1"
   dependencies:
-    "@expo/config-plugins" "~5.0.0"
     "uuid" "^3.4.0"
 
-"expo-font@~10.2.1":
-  "integrity" "sha512-sxy5GrdtY+Ka8Wo5wnrcFFeO6MbYC6Dris5wMLqshvVK6BneJNMUsFvwRfvVgg0TzsmMAc3Rlca2xyZ8ettinw=="
-  "resolved" "https://registry.npmjs.org/expo-font/-/expo-font-10.2.1.tgz"
-  "version" "10.2.1"
+"expo-font@~11.0.1":
+  "integrity" "sha512-LGAIluWZfru0J0n87dzb6pwAB6TVMTEiLcsd/ktozzbn4DlN7SeQy40+ruU6bvAKCOGrnRneYbKSIOGkrd7oNg=="
+  "resolved" "https://registry.npmjs.org/expo-font/-/expo-font-11.0.1.tgz"
+  "version" "11.0.1"
   dependencies:
     "fontfaceobserver" "^2.1.0"
 
@@ -4716,15 +4901,15 @@
   "resolved" "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-3.2.0.tgz"
   "version" "3.2.0"
 
-"expo-keep-awake@~10.2.0":
-  "integrity" "sha512-kIRtO4Hmrvxh4E45IPWG/NiUZsuRe1AQwBT09pq+kx8nm6tUS4B9TeL6+1NFy+qVBLbGKDqoQD5Ez7XYTFtBeQ=="
-  "resolved" "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-10.2.0.tgz"
-  "version" "10.2.0"
+"expo-keep-awake@~11.0.1":
+  "integrity" "sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A=="
+  "resolved" "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz"
+  "version" "11.0.1"
 
-"expo-modules-autolinking@>=0.8.1", "expo-modules-autolinking@0.10.3":
-  "integrity" "sha512-av9ln2zwUt303g98raX7sDmESgL3SXs1sbbtIjh1rL7R0676XIUacIKgbydR0/4tMbOShWx14Z9fozpk9xIAJA=="
-  "resolved" "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-0.10.3.tgz"
-  "version" "0.10.3"
+"expo-modules-autolinking@>=0.8.1", "expo-modules-autolinking@1.0.1":
+  "integrity" "sha512-Ch0K/Vb2W7zSPlPKKFr6dwgwge6sSCpl7XPW8jrc7hUy+M72dvcfsBsaphvGNlKIZM6TtpCt0xbUlL48wI2y1A=="
+  "resolved" "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.0.1.tgz"
+  "version" "1.0.1"
   dependencies:
     "chalk" "^4.1.0"
     "commander" "^7.2.0"
@@ -4732,10 +4917,10 @@
     "find-up" "^5.0.0"
     "fs-extra" "^9.1.0"
 
-"expo-modules-core@0.11.5":
-  "integrity" "sha512-KmTHtaL21M1AzKOmu3YM5K8ddCbbr6wgooG4uCb+o+7zZXe+BPP4jAPs5LLez1Et34OQcyjopxUpJ8r43HImvQ=="
-  "resolved" "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-0.11.5.tgz"
-  "version" "0.11.5"
+"expo-modules-core@1.1.0":
+  "integrity" "sha512-alNfgWyGECYUK3R0bIUc0OHXi5btqFWDMNDSrdeNSdxFKvlzrtQKdbLHJTphumh9KgAIpbEKrUYE2Vimg+Tr8w=="
+  "resolved" "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.1.0.tgz"
+  "version" "1.1.0"
   dependencies:
     "compare-versions" "^3.4.0"
     "invariant" "^2.2.4"
@@ -4755,24 +4940,26 @@
   dependencies:
     "tslib" "^2.4.0"
 
-"expo@*", "expo@^46.0.13", "expo@>=38.0.0":
-  "integrity" "sha512-xaU8GlJ7j3vo1U5tSbFDsoJqUfTkRF4XDEUj/Dr/jqUf0GcvlMKuGe6HvnbMO9slxYQlYlWJUzvlAx38TLhxyA=="
-  "resolved" "https://registry.npmjs.org/expo/-/expo-46.0.13.tgz"
-  "version" "46.0.13"
+"expo@*", "expo@^47.0.10", "expo@>=38.0.0":
+  "integrity" "sha512-iWiYvZAlxfIp1VYjVakr0koGPSHQOmIT6mz3qxSVi5N8zbHyroXsJX5cWbFJAs9irTTQQ39AaS5bfiRaIVb6xg=="
+  "resolved" "https://registry.npmjs.org/expo/-/expo-47.0.10.tgz"
+  "version" "47.0.10"
   dependencies:
     "@babel/runtime" "^7.14.0"
-    "@expo/cli" "0.3.1"
+    "@expo/cli" "0.4.10"
+    "@expo/config" "7.0.3"
+    "@expo/config-plugins" "5.0.4"
     "@expo/vector-icons" "^13.0.0"
-    "babel-preset-expo" "~9.2.0"
+    "babel-preset-expo" "~9.2.2"
     "cross-spawn" "^6.0.5"
-    "expo-application" "~4.2.2"
-    "expo-asset" "~8.6.1"
-    "expo-constants" "~13.2.4"
-    "expo-file-system" "~14.1.0"
-    "expo-font" "~10.2.1"
-    "expo-keep-awake" "~10.2.0"
-    "expo-modules-autolinking" "0.10.3"
-    "expo-modules-core" "0.11.5"
+    "expo-application" "~5.0.1"
+    "expo-asset" "~8.7.0"
+    "expo-constants" "~14.0.2"
+    "expo-file-system" "~15.1.1"
+    "expo-font" "~11.0.1"
+    "expo-keep-awake" "~11.0.1"
+    "expo-modules-autolinking" "1.0.1"
+    "expo-modules-core" "1.1.0"
     "fbemitter" "^3.0.0"
     "getenv" "^1.0.0"
     "invariant" "^2.2.4"
@@ -4781,7 +4968,7 @@
     "pretty-format" "^26.5.2"
     "uuid" "^3.4.0"
   optionalDependencies:
-    "expo-error-recovery" "~3.2.0"
+    "expo-error-recovery" "~4.0.1"
 
 "extend-shallow@^2.0.1":
   "integrity" "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug=="
@@ -4811,6 +4998,15 @@
   "resolved" "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
   "version" "3.0.2"
 
+"external-editor@^3.0.3":
+  "integrity" "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew=="
+  "resolved" "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz"
+  "version" "3.1.0"
+  dependencies:
+    "chardet" "^0.7.0"
+    "iconv-lite" "^0.4.24"
+    "tmp" "^0.0.33"
+
 "extglob@^2.0.4":
   "integrity" "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw=="
   "resolved" "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz"
@@ -4916,6 +5112,13 @@
   "resolved" "https://registry.npmjs.org/fetch-retry/-/fetch-retry-4.1.1.tgz"
   "version" "4.1.1"
 
+"figures@^2.0.0":
+  "integrity" "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA=="
+  "resolved" "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz"
+  "version" "2.0.0"
+  dependencies:
+    "escape-string-regexp" "^1.0.5"
+
 "file-entry-cache@^6.0.1":
   "integrity" "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg=="
   "resolved" "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
@@ -5038,16 +5241,11 @@
   "resolved" "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
   "version" "3.2.7"
 
-"flow-parser@^0.121.0":
+"flow-parser@^0.121.0", "flow-parser@0.*":
   "integrity" "sha512-1gIBiWJNR0tKUNv8gZuk7l9rVX06OuLzY9AoGio7y/JT4V1IZErEMEq2TJS+PFcw/y0RshZ1J/27VfK1UQzYVg=="
   "resolved" "https://registry.npmjs.org/flow-parser/-/flow-parser-0.121.0.tgz"
   "version" "0.121.0"
 
-"flow-parser@0.*":
-  "integrity" "sha512-ZvlTeakTTMmYGukt4EIQtLEp4ie45W+jK325uukGgiqFg2Rl7TdpOJQbOLUN2xMeGS+WvXaK0uIJ3coPGDXFGQ=="
-  "resolved" "https://registry.npmjs.org/flow-parser/-/flow-parser-0.187.1.tgz"
-  "version" "0.187.1"
-
 "follow-redirects@^1.14.9":
   "integrity" "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
   "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
@@ -5230,6 +5428,20 @@
     "strip-ansi" "^6.0.1"
     "wide-align" "^1.1.5"
 
+"gauge@~2.7.3":
+  "integrity" "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg=="
+  "resolved" "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz"
+  "version" "2.7.4"
+  dependencies:
+    "aproba" "^1.0.3"
+    "console-control-strings" "^1.0.0"
+    "has-unicode" "^2.0.0"
+    "object-assign" "^4.1.0"
+    "signal-exit" "^3.0.0"
+    "string-width" "^1.0.1"
+    "strip-ansi" "^3.0.1"
+    "wide-align" "^1.1.0"
+
 "gensync@^1.0.0-beta.2":
   "integrity" "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
   "resolved" "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -5459,6 +5671,11 @@
   dependencies:
     "has-symbols" "^1.0.2"
 
+"has-unicode@^2.0.0":
+  "integrity" "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
+  "resolved" "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz"
+  "version" "2.0.1"
+
 "has-unicode@^2.0.1":
   "version" "2.0.1"
 
@@ -5619,7 +5836,7 @@
     "jsprim" "^1.2.2"
     "sshpk" "^1.7.0"
 
-"https-proxy-agent@^5.0.0":
+"https-proxy-agent@^5.0.0", "https-proxy-agent@^5.0.1":
   "integrity" "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA=="
   "resolved" "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz"
   "version" "5.0.1"
@@ -5645,18 +5862,18 @@
     "bignumber.js" "*"
     "lodash" "*"
 
-"iconv-lite@^0.6.2":
-  "version" "0.6.3"
-  dependencies:
-    "safer-buffer" ">= 2.1.2 < 3.0.0"
-
-"iconv-lite@0.4.24":
+"iconv-lite@^0.4.24", "iconv-lite@0.4.24":
   "integrity" "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="
   "resolved" "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
   "version" "0.4.24"
   dependencies:
     "safer-buffer" ">= 2.1.2 < 3"
 
+"iconv-lite@^0.6.2":
+  "version" "0.6.3"
+  dependencies:
+    "safer-buffer" ">= 2.1.2 < 3.0.0"
+
 "ieee754@^1.1.13":
   "integrity" "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
   "resolved" "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
@@ -5678,15 +5895,20 @@
   "version" "5.2.0"
 
 "ignore@^5.2.0":
-  "integrity" "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
-  "resolved" "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
-  "version" "5.2.0"
+  "integrity" "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
+  "resolved" "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
+  "version" "5.2.4"
 
 "image-size@^0.6.0":
   "integrity" "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA=="
   "resolved" "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz"
   "version" "0.6.3"
 
+"immediate@~3.0.5":
+  "integrity" "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+  "resolved" "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
+  "version" "3.0.6"
+
 "import-fresh@^2.0.0":
   "integrity" "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg=="
   "resolved" "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz"
@@ -5763,6 +5985,25 @@
     "validate-npm-package-license" "^3.0.4"
     "validate-npm-package-name" "^4.0.0"
 
+"inquirer@^6.2.0":
+  "integrity" "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ=="
+  "resolved" "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz"
+  "version" "6.5.2"
+  dependencies:
+    "ansi-escapes" "^3.2.0"
+    "chalk" "^2.4.2"
+    "cli-cursor" "^2.1.0"
+    "cli-width" "^2.0.0"
+    "external-editor" "^3.0.3"
+    "figures" "^2.0.0"
+    "lodash" "^4.17.12"
+    "mute-stream" "0.0.7"
+    "run-async" "^2.2.0"
+    "rxjs" "^6.4.0"
+    "string-width" "^2.1.0"
+    "strip-ansi" "^5.1.0"
+    "through" "^2.3.6"
+
 "install@^0.13.0":
   "integrity" "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="
   "resolved" "https://registry.npmjs.org/install/-/install-0.13.0.tgz"
@@ -5957,6 +6198,13 @@
   "resolved" "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
   "version" "2.1.1"
 
+"is-fullwidth-code-point@^1.0.0":
+  "integrity" "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw=="
+  "resolved" "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
+  "version" "1.0.0"
+  dependencies:
+    "number-is-nan" "^1.0.0"
+
 "is-fullwidth-code-point@^2.0.0":
   "integrity" "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
   "resolved" "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz"
@@ -6125,7 +6373,7 @@
   "resolved" "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz"
   "version" "1.1.0"
 
-"is-wsl@^2.2.0":
+"is-wsl@^2.1.1", "is-wsl@^2.2.0":
   "integrity" "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="
   "resolved" "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
   "version" "2.2.0"
@@ -6624,9 +6872,9 @@
   "version" "0.16.1"
 
 "joi@^17.2.1":
-  "integrity" "sha512-Hl7/iBklIX345OCM1TiFSCZRVaAOLDGlWCp0Df2vWYgBgjkezaR7Kvm3joBciBHQjZj5sxXs859r6eqsRSlG8w=="
-  "resolved" "https://registry.npmjs.org/joi/-/joi-17.6.1.tgz"
-  "version" "17.6.1"
+  "integrity" "sha512-1/ugc8djfn93rTE3WRKdCzGGt/EtiYKxITMO4Wiv6q5JL1gl9ePt4kBsl1S499nbosspfctIQTpYIhSmHA3WAg=="
+  "resolved" "https://registry.npmjs.org/joi/-/joi-17.7.0.tgz"
+  "version" "17.7.0"
   dependencies:
     "@hapi/hoek" "^9.0.0"
     "@hapi/topo" "^5.0.0"
@@ -6795,16 +7043,16 @@
   "version" "0.5.1"
 
 "json5@^1.0.1":
-  "integrity" "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow=="
-  "resolved" "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
-  "version" "1.0.1"
+  "integrity" "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="
+  "resolved" "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
+  "version" "1.0.2"
   dependencies:
     "minimist" "^1.2.0"
 
 "json5@^2.2.1":
-  "integrity" "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
-  "resolved" "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
-  "version" "2.2.1"
+  "integrity" "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
+  "resolved" "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
+  "version" "2.2.3"
 
 "jsonfile@^2.1.0":
   "integrity" "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw=="
@@ -7018,11 +7266,25 @@
     "proc-log" "^2.0.0"
     "semver" "^7.3.7"
 
+"lie@3.1.1":
+  "integrity" "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw=="
+  "resolved" "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz"
+  "version" "3.1.1"
+  dependencies:
+    "immediate" "~3.0.5"
+
 "lines-and-columns@^1.1.6":
   "integrity" "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
   "resolved" "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   "version" "1.2.4"
 
+"localforage@^1.8.1":
+  "integrity" "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg=="
+  "resolved" "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz"
+  "version" "1.10.0"
+  dependencies:
+    "lie" "3.1.1"
+
 "locate-path@^3.0.0":
   "integrity" "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A=="
   "resolved" "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz"
@@ -7070,7 +7332,7 @@
   "resolved" "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
   "version" "4.4.2"
 
-"lodash@*", "lodash@^4.17.10", "lodash@^4.17.13", "lodash@^4.17.15", "lodash@^4.17.21", "lodash@^4.17.4", "lodash@^4.7.0":
+"lodash@*", "lodash@^4.17.10", "lodash@^4.17.12", "lodash@^4.17.13", "lodash@^4.17.15", "lodash@^4.17.21", "lodash@^4.17.4", "lodash@^4.7.0":
   "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
   "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
@@ -7230,16 +7492,6 @@
   "resolved" "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   "version" "1.4.1"
 
-"metro-babel-transformer@0.72.1":
-  "integrity" "sha512-VK7A9gepnhrKC0DMoxtPjYYHjkkfNwzLMYJgeL6Il6IaX/K/VHTILSEqgpxfNDos2jrXazuR5+rXDLE/RCzqmw=="
-  "resolved" "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.72.1.tgz"
-  "version" "0.72.1"
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "hermes-parser" "0.8.0"
-    "metro-source-map" "0.72.1"
-    "nullthrows" "^1.1.1"
-
 "metro-babel-transformer@0.72.3":
   "integrity" "sha512-PTOR2zww0vJbWeeM3qN90WKENxCLzv9xrwWaNtwVlhcV8/diNdNe82sE1xIxLFI6OQuAVwNMv1Y7VsO2I7Ejrw=="
   "resolved" "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.72.3.tgz"
@@ -7263,7 +7515,7 @@
     "metro-core" "0.72.3"
     "rimraf" "^2.5.4"
 
-"metro-config@^0.72.1", "metro-config@0.72.3":
+"metro-config@0.72.3":
   "integrity" "sha512-VEsAIVDkrIhgCByq8HKTWMBjJG6RlYwWSu1Gnv3PpHa0IyTjKJtB7wC02rbTjSaemcr82scldf2R+h6ygMEvsw=="
   "resolved" "https://registry.npmjs.org/metro-config/-/metro-config-0.72.3.tgz"
   "version" "0.72.3"
@@ -7275,7 +7527,7 @@
     "metro-core" "0.72.3"
     "metro-runtime" "0.72.3"
 
-"metro-core@^0.72.1", "metro-core@0.72.3":
+"metro-core@0.72.3":
   "integrity" "sha512-KuYWBMmLB4+LxSMcZ1dmWabVExNCjZe3KysgoECAIV+wyIc2r4xANq15GhS94xYvX1+RqZrxU1pa0jQ5OK+/6A=="
   "resolved" "https://registry.npmjs.org/metro-core/-/metro-core-0.72.3.tgz"
   "version" "0.72.3"
@@ -7325,7 +7577,7 @@
   dependencies:
     "uglify-es" "^3.1.9"
 
-"metro-react-native-babel-preset@^0.72.1", "metro-react-native-babel-preset@0.72.3":
+"metro-react-native-babel-preset@^0.72.3", "metro-react-native-babel-preset@0.72.3":
   "integrity" "sha512-uJx9y/1NIqoYTp6ZW1osJ7U5ZrXGAJbOQ/Qzl05BdGYvN1S7Qmbzid6xOirgK0EIT0pJKEEh1s8qbassYZe4cw=="
   "resolved" "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.72.3.tgz"
   "version" "0.72.3"
@@ -7370,97 +7622,7 @@
     "@babel/template" "^7.0.0"
     "react-refresh" "^0.4.0"
 
-"metro-react-native-babel-preset@~0.70.3":
-  "integrity" "sha512-4Nxc1zEiHEu+GTdEMEsHnRgfaBkg8f/Td3+FcQ8NTSvs+xL3LBrQy6N07idWSQZHIdGFf+tTHvRfSIWLD8u8Tg=="
-  "resolved" "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.70.3.tgz"
-  "version" "0.70.3"
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.2.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.5.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "react-refresh" "^0.4.0"
-
-"metro-react-native-babel-preset@0.72.1":
-  "integrity" "sha512-DlvMw2tFrCqD9OXBoN11fPM09kHC22FZpnkTmG4Pr4kecV+aDmEGxwakjUcjELrX1JCXz2MLPvqeJkbiP1f5CA=="
-  "resolved" "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.72.1.tgz"
-  "version" "0.72.1"
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.0.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.2.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.5.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "react-refresh" "^0.4.0"
-
-"metro-react-native-babel-transformer@^0.72.1":
+"metro-react-native-babel-transformer@0.72.3":
   "integrity" "sha512-Ogst/M6ujYrl/+9mpEWqE3zF7l2mTuftDTy3L8wZYwX1pWUQWQpfU1aJBeWiLxt1XlIq+uriRjKzKoRoIK57EA=="
   "resolved" "https://registry.npmjs.org/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.72.3.tgz"
   "version" "0.72.3"
@@ -7473,27 +7635,14 @@
     "metro-source-map" "0.72.3"
     "nullthrows" "^1.1.1"
 
-"metro-react-native-babel-transformer@0.72.1":
-  "integrity" "sha512-hMnN0MOgVloAk94YuXN7sLeDaZ51Y6xIcJXxIU1s/KaygAGXk6o7VAdwf2MY/IV1SIct5lkW4Gn71u/9/EvfXA=="
-  "resolved" "https://registry.npmjs.org/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.72.1.tgz"
-  "version" "0.72.1"
-  dependencies:
-    "@babel/core" "^7.14.0"
-    "babel-preset-fbjs" "^3.4.0"
-    "hermes-parser" "0.8.0"
-    "metro-babel-transformer" "0.72.1"
-    "metro-react-native-babel-preset" "0.72.1"
-    "metro-source-map" "0.72.1"
-    "nullthrows" "^1.1.1"
-
-"metro-resolver@^0.72.1", "metro-resolver@0.72.3":
+"metro-resolver@0.72.3":
   "integrity" "sha512-wu9zSMGdxpKmfECE7FtCdpfC+vrWGTdVr57lDA0piKhZV6VN6acZIvqQ1yZKtS2WfKsngncv5VbB8Y5eHRQP3w=="
   "resolved" "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.72.3.tgz"
   "version" "0.72.3"
   dependencies:
     "absolute-path" "^0.0.0"
 
-"metro-runtime@^0.72.1", "metro-runtime@0.72.3":
+"metro-runtime@0.72.3":
   "integrity" "sha512-3MhvDKfxMg2u7dmTdpFOfdR71NgNNo4tzAyJumDVQKwnHYHN44f2QFZQqpPBEmqhWlojNeOxsqFsjYgeyMx6VA=="
   "resolved" "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.72.3.tgz"
   "version" "0.72.3"
@@ -7501,28 +7650,6 @@
     "@babel/runtime" "^7.0.0"
     "react-refresh" "^0.4.0"
 
-"metro-runtime@0.72.1":
-  "integrity" "sha512-CO+fvJKYHKuR2vo7kjsegQ2oF3FMwa4YhnUInQ+xPVxWoy8DbOpmruKBoTsQVgHwyIziXzvJa+mze/6CFvT+3A=="
-  "resolved" "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.72.1.tgz"
-  "version" "0.72.1"
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    "react-refresh" "^0.4.0"
-
-"metro-source-map@0.72.1":
-  "integrity" "sha512-77TZuf10Ru+USo97HwDT8UceSzOGBZB8EYTObOsR0n1sjQHjvKsMflLA9Pco13o9NsIYAG6c6P/0vIpiHKqaKA=="
-  "resolved" "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.72.1.tgz"
-  "version" "0.72.1"
-  dependencies:
-    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.0.0"
-    "invariant" "^2.2.4"
-    "metro-symbolicate" "0.72.1"
-    "nullthrows" "^1.1.1"
-    "ob1" "0.72.1"
-    "source-map" "^0.5.6"
-    "vlq" "^1.0.0"
-
 "metro-source-map@0.72.3":
   "integrity" "sha512-eNtpjbjxSheXu/jYCIDrbNEKzMGOvYW6/ePYpRM7gDdEagUOqKOCsi3St8NJIQJzZCsxD2JZ2pYOiomUSkT1yQ=="
   "resolved" "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.72.3.tgz"
@@ -7537,18 +7664,6 @@
     "source-map" "^0.5.6"
     "vlq" "^1.0.0"
 
-"metro-symbolicate@0.72.1":
-  "integrity" "sha512-ScC3dVd2XrfZSd6kubOw7EJNp2oHdjrqOjGpFohtcXGjhqkzDosp7Fg84VgwQGN8g720xvUyEBfSMmUCXcicOQ=="
-  "resolved" "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.72.1.tgz"
-  "version" "0.72.1"
-  dependencies:
-    "invariant" "^2.2.4"
-    "metro-source-map" "0.72.1"
-    "nullthrows" "^1.1.1"
-    "source-map" "^0.5.6"
-    "through2" "^2.0.1"
-    "vlq" "^1.0.0"
-
 "metro-symbolicate@0.72.3":
   "integrity" "sha512-eXG0NX2PJzJ/jTG4q5yyYeN2dr1cUqUaY7worBB0SP5bRWRc3besfb+rXwfh49wTFiL5qR0oOawkU4ZiD4eHXw=="
   "resolved" "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.72.3.tgz"
@@ -7591,7 +7706,7 @@
     "metro-transform-plugins" "0.72.3"
     "nullthrows" "^1.1.1"
 
-"metro@^0.72.1", "metro@0.72.3":
+"metro@0.72.3":
   "integrity" "sha512-Hb3xTvPqex8kJ1hutQNZhQadUKUwmns/Du9GikmWKBFrkiG3k3xstGAyO5t5rN9JSUEzQT6y9SWzSSOGogUKIg=="
   "resolved" "https://registry.npmjs.org/metro/-/metro-0.72.3.tgz"
   "version" "0.72.3"
@@ -7835,7 +7950,7 @@
     "infer-owner" "^1.0.4"
     "mkdirp" "^1.0.3"
 
-"mkdirp@^0.5.1", "mkdirp@~0.5.1":
+"mkdirp@^0.5.1", "mkdirp@^0.5.5", "mkdirp@~0.5.1":
   "integrity" "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw=="
   "resolved" "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
   "version" "0.5.6"
@@ -7868,6 +7983,11 @@
 "mute-stream@~0.0.4":
   "version" "0.0.8"
 
+"mute-stream@0.0.7":
+  "integrity" "sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ=="
+  "resolved" "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz"
+  "version" "0.0.7"
+
 "mv@~2":
   "integrity" "sha512-at/ZndSy3xEGJ8i0ygALh8ru9qy7gWW1cmkaqBN29JmMlIvM//MEO9y1sk/avxuwnPcfhkejkLsuPxH81BrkSg=="
   "resolved" "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz"
@@ -7975,7 +8095,7 @@
   "resolved" "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz"
   "version" "1.0.0"
 
-"node-fetch@^2.2.0", "node-fetch@^2.6.0", "node-fetch@^2.6.1", "node-fetch@^2.6.7", "node-fetch@2.6.7":
+"node-fetch@^2.0.0-alpha.8", "node-fetch@^2.2.0", "node-fetch@^2.6.0", "node-fetch@^2.6.1", "node-fetch@^2.6.7", "node-fetch@2.6.7":
   "integrity" "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ=="
   "resolved" "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz"
   "version" "2.6.7"
@@ -8256,6 +8376,16 @@
     "which" "^2.0.2"
     "write-file-atomic" "^4.0.1"
 
+"npmlog@^4.1.2":
+  "integrity" "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg=="
+  "resolved" "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz"
+  "version" "4.1.2"
+  dependencies:
+    "are-we-there-yet" "~1.1.2"
+    "console-control-strings" "~1.1.0"
+    "gauge" "~2.7.3"
+    "set-blocking" "~2.0.0"
+
 "npmlog@^6.0.0", "npmlog@^6.0.2":
   "version" "6.0.2"
   dependencies:
@@ -8276,6 +8406,11 @@
   "resolved" "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz"
   "version" "1.1.1"
 
+"number-is-nan@^1.0.0":
+  "integrity" "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ=="
+  "resolved" "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
+  "version" "1.0.1"
+
 "nwsapi@^2.2.0":
   "integrity" "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
   "resolved" "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz"
@@ -8286,11 +8421,6 @@
   "resolved" "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz"
   "version" "0.9.0"
 
-"ob1@0.72.1":
-  "integrity" "sha512-TyQX2gO08klGTMuzD+xm3iVrzXiIygCB7t+NWeicOR05hkzgeWOiAZ8q40uMfIDRfEAc6hd66sJdIEhU/yUZZA=="
-  "resolved" "https://registry.npmjs.org/ob1/-/ob1-0.72.1.tgz"
-  "version" "0.72.1"
-
 "ob1@0.72.3":
   "integrity" "sha512-OnVto25Sj7Ghp0vVm2THsngdze3tVq0LOg9LUHsAVXMecpqOP0Y8zaATW8M9gEgs2lNEAcCqV0P/hlmOPhVRvg=="
   "resolved" "https://registry.npmjs.org/ob1/-/ob1-0.72.3.tgz"
@@ -8447,6 +8577,13 @@
 "opener@^1.5.2":
   "version" "1.5.2"
 
+"opn@^5.4.0":
+  "integrity" "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA=="
+  "resolved" "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz"
+  "version" "5.5.0"
+  dependencies:
+    "is-wsl" "^1.1.0"
+
 "optionator@^0.8.1":
   "integrity" "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA=="
   "resolved" "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz"
@@ -8872,10 +9009,10 @@
   dependencies:
     "asap" "~2.0.3"
 
-"promise@^8.0.3":
-  "integrity" "sha512-+CMAlLHqwRYwBMXKCP+o8ns7DN+xHDUiI+0nArsiJ9y+kJVPLFxEaSw6Ha9s9H0tftxg2Yzl25wqj9G7m5wLZg=="
-  "resolved" "https://registry.npmjs.org/promise/-/promise-8.2.0.tgz"
-  "version" "8.2.0"
+"promise@^8.3.0":
+  "integrity" "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg=="
+  "resolved" "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz"
+  "version" "8.3.0"
   dependencies:
     "asap" "~2.0.6"
 
@@ -8901,6 +9038,11 @@
     "object-assign" "^4.1.1"
     "react-is" "^16.13.1"
 
+"proxy-from-env@^1.1.0":
+  "integrity" "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+  "resolved" "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  "version" "1.1.0"
+
 "psl@^1.1.28", "psl@^1.1.33":
   "integrity" "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
   "resolved" "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"
@@ -8957,6 +9099,15 @@
   "resolved" "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   "version" "1.2.3"
 
+"r2@^2.0.1":
+  "integrity" "sha512-EEmxoxYCe3LHzAUhRIRxdCKERpeRNmlLj6KLUSORqnK6dWl/K5ShmDGZqM2lRZQeqJgF+wyqk0s1M7SWUveNOQ=="
+  "resolved" "https://registry.npmjs.org/r2/-/r2-2.0.1.tgz"
+  "version" "2.0.1"
+  dependencies:
+    "caseless" "^0.12.0"
+    "node-fetch" "^2.0.0-alpha.8"
+    "typedarray-to-buffer" "^3.1.2"
+
 "range-parser@~1.2.1":
   "integrity" "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
   "resolved" "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
@@ -9025,10 +9176,10 @@
   "resolved" "https://registry.npmjs.org/react-native-animated-tree-view/-/react-native-animated-tree-view-0.1.4.tgz"
   "version" "0.1.4"
 
-"react-native-b-crypt-bridge@file:react-native-b-crypt-bridge-2.0.0.tgz":
-  "integrity" "sha512-nqjJtA0qUh6awVEmI41c3I3IxWHOm38UQGkXNg4iZmb4gg0MMFMBZFNAVHa5Xzl+YVDQ6rIfmrF0w/BnDaewsA=="
-  "resolved" "file:react-native-b-crypt-bridge-2.0.0.tgz"
-  "version" "2.0.0"
+"react-native-b-crypt-bridge@file:react-native-b-crypt-bridge-2.1.0.tgz":
+  "integrity" "sha512-idJ3l2bqfqbZsgz7Rl43EBYpiy7zk1luBMxxV0MzVGRN4mAtwG/UrYPc5dYS7xsz0siGj5C/sQn8YpAauS7Buw=="
+  "resolved" "file:react-native-b-crypt-bridge-2.1.0.tgz"
+  "version" "2.1.0"
 
 "react-native-blob-util@^0.16.2":
   "integrity" "sha512-eC7lps4dyTICYVLqn86PDlo/2OdQw7rcOD2ViD69BAfdWgcEqslci8IjbUCvbSZM+cRbMskuRuLSfcoNi+ILqQ=="
@@ -9038,10 +9189,10 @@
     "base-64" "0.1.0"
     "glob" "^7.1.6"
 
-"react-native-codegen@^0.70.5":
-  "integrity" "sha512-vXqgCWWIWlzsCtwD6hbmwmCleGNJYm+n4xO9VMfzzlF3xt9gjC7/USSMTf/YZlCK/hDwQU412QrNS6A9OH+mag=="
-  "resolved" "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.5.tgz"
-  "version" "0.70.5"
+"react-native-codegen@^0.70.6":
+  "integrity" "sha512-kdwIhH2hi+cFnG5Nb8Ji2JwmcCxnaOOo9440ov7XDzSvGfmUStnCzl+MCW8jLjqHcE4icT7N9y+xx4f50vfBTw=="
+  "resolved" "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz"
+  "version" "0.70.6"
   dependencies:
     "@babel/parser" "^7.14.0"
     "flow-parser" "^0.121.0"
@@ -9133,15 +9284,15 @@
     "prop-types" "^15.7.2"
     "yargs" "^16.1.1"
 
-"react-native@*", "react-native@>=0.42.0", "react-native@>=0.57", "react-native@>=0.59", "react-native@>=0.70.0", "react-native@0.70.1":
-  "integrity" "sha512-AUh4NZLFdvyjSiYWCtTROCrC7loxeeZ/TzBnkZwp3kb9XmMu7/kzvWn2c5sEMnzW7X/0JSul8jXexGVdpnCoSA=="
-  "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.70.1.tgz"
-  "version" "0.70.1"
+"react-native@*", "react-native@^0.70.6", "react-native@>=0.42.0", "react-native@>=0.56.0", "react-native@>=0.57", "react-native@>=0.59", "react-native@>=0.70.0":
+  "integrity" "sha512-xtQdImPHnwgraEx3HIZFOF+D1hJ9bC5mfpIdUGoMHRws6OmvHAjmFpO6qfdnaQ29vwbmZRq7yf14sbury74R/w=="
+  "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.70.6.tgz"
+  "version" "0.70.6"
   dependencies:
     "@jest/create-cache-key-function" "^27.0.1"
-    "@react-native-community/cli" "^9.0.0"
-    "@react-native-community/cli-platform-android" "^9.0.0"
-    "@react-native-community/cli-platform-ios" "^9.0.0"
+    "@react-native-community/cli" "9.3.2"
+    "@react-native-community/cli-platform-android" "9.3.1"
+    "@react-native-community/cli-platform-ios" "9.3.0"
     "@react-native/assets" "1.0.0"
     "@react-native/normalize-color" "2.0.0"
     "@react-native/polyfills" "2.0.0"
@@ -9152,15 +9303,15 @@
     "invariant" "^2.2.4"
     "jsc-android" "^250230.2.1"
     "memoize-one" "^5.0.0"
-    "metro-react-native-babel-transformer" "0.72.1"
-    "metro-runtime" "0.72.1"
-    "metro-source-map" "0.72.1"
+    "metro-react-native-babel-transformer" "0.72.3"
+    "metro-runtime" "0.72.3"
+    "metro-source-map" "0.72.3"
     "mkdirp" "^0.5.1"
     "nullthrows" "^1.1.1"
     "pretty-format" "^26.5.2"
-    "promise" "^8.0.3"
+    "promise" "^8.3.0"
     "react-devtools-core" "4.24.0"
-    "react-native-codegen" "^0.70.5"
+    "react-native-codegen" "^0.70.6"
     "react-native-gradle-plugin" "^0.70.3"
     "react-refresh" "^0.4.0"
     "react-shallow-renderer" "^16.15.0"
@@ -9205,7 +9356,7 @@
     "react-shallow-renderer" "^16.15.0"
     "scheduler" "^0.22.0"
 
-"react@*", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.1.0", "react@>=16", "react@>=17.0.0", "react@18.1.0":
+"react@*", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.1.0", "react@>=16", "react@>=16.4.1", "react@>=17.0.0", "react@15.x || 16.x || 17.x || 18.x", "react@18.1.0":
   "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
   "version" "18.1.0"
@@ -9215,6 +9366,13 @@
 "read-cmd-shim@^3.0.0":
   "version" "3.0.0"
 
+"read-env@^1.3.0":
+  "integrity" "sha512-DbCgZ8oHwZreK/E2E27RGk3EUPapMhYGSGIt02k9sX6R3tCFc4u4tkltKvkCvzEQ3SOLUaiYHAnGb+TdsnPp0A=="
+  "resolved" "https://registry.npmjs.org/read-env/-/read-env-1.3.0.tgz"
+  "version" "1.3.0"
+  dependencies:
+    "camelcase" "5.0.0"
+
 "read-package-json-fast@^2.0.2", "read-package-json-fast@^2.0.3":
   "version" "2.0.3"
   dependencies:
@@ -9253,7 +9411,7 @@
   dependencies:
     "mute-stream" "~0.0.4"
 
-"readable-stream@^2.2.2", "readable-stream@~2.3.6":
+"readable-stream@^2.0.6", "readable-stream@^2.2.2", "readable-stream@~2.3.6":
   "integrity" "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw=="
   "resolved" "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
   "version" "2.3.7"
@@ -9623,6 +9781,11 @@
   "resolved" "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
   "version" "4.8.5"
 
+"run-async@^2.2.0":
+  "integrity" "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
+  "resolved" "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz"
+  "version" "2.4.1"
+
 "run-parallel@^1.1.9":
   "integrity" "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="
   "resolved" "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
@@ -9630,6 +9793,13 @@
   dependencies:
     "queue-microtask" "^1.2.2"
 
+"rxjs@^6.4.0":
+  "integrity" "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ=="
+  "resolved" "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz"
+  "version" "6.6.7"
+  dependencies:
+    "tslib" "^1.9.0"
+
 "safe-buffer@^5.0.1", "safe-buffer@^5.1.2", "safe-buffer@~5.1.0", "safe-buffer@~5.1.1", "safe-buffer@5.1.2":
   "integrity" "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
   "resolved" "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
@@ -9790,7 +9960,7 @@
     "parseurl" "~1.3.3"
     "send" "0.18.0"
 
-"set-blocking@^2.0.0":
+"set-blocking@^2.0.0", "set-blocking@~2.0.0":
   "integrity" "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
   "resolved" "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
   "version" "2.0.0"
@@ -10175,6 +10345,15 @@
     "char-regex" "^1.0.2"
     "strip-ansi" "^6.0.0"
 
+"string-width@^1.0.1":
+  "integrity" "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw=="
+  "resolved" "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz"
+  "version" "1.0.2"
+  dependencies:
+    "code-point-at" "^1.0.0"
+    "is-fullwidth-code-point" "^1.0.0"
+    "strip-ansi" "^3.0.0"
+
 "string-width@^1.0.2 || 2 || 3 || 4", "string-width@^4.1.0", "string-width@^4.2.0", "string-width@^4.2.3":
   "integrity" "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="
   "resolved" "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
@@ -10184,6 +10363,14 @@
     "is-fullwidth-code-point" "^3.0.0"
     "strip-ansi" "^6.0.1"
 
+"string-width@^2.1.0":
+  "integrity" "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw=="
+  "resolved" "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz"
+  "version" "2.1.1"
+  dependencies:
+    "is-fullwidth-code-point" "^2.0.0"
+    "strip-ansi" "^4.0.0"
+
 "string.prototype.matchall@^4.0.7":
   "integrity" "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg=="
   "resolved" "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz"
@@ -10216,6 +10403,20 @@
     "define-properties" "^1.1.4"
     "es-abstract" "^1.19.5"
 
+"strip-ansi@^3.0.0", "strip-ansi@^3.0.1":
+  "integrity" "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg=="
+  "resolved" "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
+  "version" "3.0.1"
+  dependencies:
+    "ansi-regex" "^2.0.0"
+
+"strip-ansi@^4.0.0":
+  "integrity" "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow=="
+  "resolved" "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz"
+  "version" "4.0.0"
+  dependencies:
+    "ansi-regex" "^3.0.0"
+
 "strip-ansi@^5.0.0":
   "integrity" "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="
   "resolved" "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
@@ -10223,6 +10424,13 @@
   dependencies:
     "ansi-regex" "^4.1.0"
 
+"strip-ansi@^5.1.0":
+  "integrity" "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="
+  "resolved" "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
+  "version" "5.2.0"
+  dependencies:
+    "ansi-regex" "^4.1.0"
+
 "strip-ansi@^5.2.0":
   "integrity" "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="
   "resolved" "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
@@ -10497,7 +10705,7 @@
   "resolved" "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz"
   "version" "5.0.0"
 
-"through@2":
+"through@^2.3.6", "through@2":
   "integrity" "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
   "resolved" "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
   "version" "2.3.8"
@@ -10603,9 +10811,9 @@
   "version" "0.0.3"
 
 "traverse@~0.6.6":
-  "integrity" "sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw=="
-  "resolved" "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz"
-  "version" "0.6.6"
+  "integrity" "sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg=="
+  "resolved" "https://registry.npmjs.org/traverse/-/traverse-0.6.7.tgz"
+  "version" "0.6.7"
 
 "treeverse@^2.0.0":
   "version" "2.0.0"
@@ -10615,12 +10823,17 @@
   "resolved" "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
   "version" "0.1.13"
 
-"tslib@^1.10.0":
+"tslib@^1.8.1":
   "integrity" "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   "version" "1.14.1"
 
-"tslib@^1.8.1":
+"tslib@^1.9.0":
+  "integrity" "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+  "resolved" "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  "version" "1.14.1"
+
+"tslib@^1.9.3":
   "integrity" "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   "version" "1.14.1"
@@ -10723,7 +10936,7 @@
     "media-typer" "0.3.0"
     "mime-types" "~2.1.24"
 
-"typedarray-to-buffer@^3.1.5":
+"typedarray-to-buffer@^3.1.2", "typedarray-to-buffer@^3.1.5":
   "integrity" "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q=="
   "resolved" "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz"
   "version" "3.1.5"
@@ -11144,6 +11357,13 @@
   dependencies:
     "isexe" "^2.0.0"
 
+"wide-align@^1.1.0":
+  "integrity" "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg=="
+  "resolved" "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz"
+  "version" "1.1.5"
+  dependencies:
+    "string-width" "^1.0.2 || 2 || 3 || 4"
+
 "wide-align@^1.1.5":
   "version" "1.1.5"
   dependencies:
@@ -11219,7 +11439,7 @@
   "resolved" "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz"
   "version" "7.5.9"
 
-"xcode@^3.0.0", "xcode@^3.0.1":
+"xcode@^3.0.0", "xcode@^3.0.1", "xcode@3.0.1":
   "integrity" "sha512-kCz5k7J7XbJtjABOvkc5lJmkiDh8VhjVCGNiqdKCscmVpdVUpEAyXv1xmCLkQJ5dsHqx3IPO4XW+NTDhU/fatA=="
   "resolved" "https://registry.npmjs.org/xcode/-/xcode-3.0.1.tgz"
   "version" "3.0.1"
@@ -11330,6 +11550,19 @@
     "y18n" "^5.0.5"
     "yargs-parser" "^20.2.2"
 
+"yargs@^16.2.0":
+  "integrity" "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw=="
+  "resolved" "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz"
+  "version" "16.2.0"
+  dependencies:
+    "cliui" "^7.0.2"
+    "escalade" "^3.1.1"
+    "get-caller-file" "^2.0.5"
+    "require-directory" "^2.1.1"
+    "string-width" "^4.2.0"
+    "y18n" "^5.0.5"
+    "yargs-parser" "^20.2.2"
+
 "yocto-queue@^0.1.0":
   "integrity" "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
   "resolved" "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"