feat: initial navigation and send feedback tested

domains/Settings/SettingsHome/index.js

@@ -39,19 +39,19 @@ const SettingsHome = ({
       {settingsView === 'Settings' && accountSettingsView === '' && (
         <View>
           <View style={{ flexDirection: 'row', marginLeft: 'auto', marginRight: 'auto' }}>
-            <View style={{ paddingRight: '0%' }}>
+            <View style={{ paddingRight: '5%' }}>
               <Button mode="contained">{I18n.t('accountSettings.settings')}</Button>
             </View>
-            {/* <View style={{ paddingLeft: '5%' }}>
+            <View style={{ paddingLeft: '5%' }}>
               <Button onPress={() => setSettingsView('Support')}>
                 {I18n.t('accountSettings.support')}</Button>
-            </View> */}
+            </View>
           </View>
           <View style={{ paddingLeft: '5%', paddingRight: '5%', paddingTop: 20 }}>
             <Headline style={{ fontWeight: 'bold' }}>{I18n.t('accountSettings.accountSettings')}</Headline>
             <View style={styles.horizontalLineGray} />
             {inputs.length && inputs.map((input) => (
-              <View>
+              <View key={input.key}>
                 <View style={{ flexDirection: 'row' }}>
                   <Text style={styles.text}>{input.label}</Text>
                   <IconButton

domains/Settings/SupportHome/SupportSettings/AboutUs/index.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import {
+  View
+} from 'react-native';
+import {
+  Button, Headline, IconButton, Text
+} from 'react-native-paper';
+
+import styles from '../../../index.styles';
+
+const AboutUs = ({
+  settingsView, setSettingsView, supportView, setSupportView
+}) => (
+    <View>
+      <Text>About us</Text>
+    </View>
+  );
+
+export default AboutUs;

domains/Settings/SupportHome/SupportSettings/Feedback/index.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import {
+  View
+} from 'react-native';
+import {
+  Button, Headline, Text, TextInput
+} from 'react-native-paper';
+
+import email from 'react-native-email'
+
+import styles from '../../../index.styles';
+
+const Feedback = () => {
+  const handleEmail = () => {
+    const to = ['info@puente-dr.org'] // string or array of email addresses
+    email(to, {
+      // Optional additional arguments
+      cc: [], // string or array of email addresses
+      bcc: [], // string or array of email addresses
+      subject: 'User Feedback',
+      body: emailBody
+    }).catch(console.error)
+  }
+
+  const [emailBody, setEmailBody] = useState('');
+
+  return (
+    <View style={styles.mainContainer}>
+      <Headline>Feedback</Headline>
+      <View style={styles.horizontalLinePrimary} />
+      <Text>Please enter your feedback in the input below and press the "Send Feedback" button. This will redirect you to your email where you can send your feedback.</Text>
+      <View style={styles.horizontalLinePrimary} />
+      <TextInput multiline={true} onChangeText={(text) => setEmailBody(text)}
+        placeholder={"Type your feedback here..."}>
+
+      </TextInput>
+      <View style={styles.languageContainer}>
+        <Button mode="contained" onPress={() => handleEmail()}>Send Mail</Button>
+      </View>
+    </View>
+  )
+};
+
+export default Feedback;

domains/Settings/SupportHome/SupportSettings/RateOurApp/index.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import {
+  View
+} from 'react-native';
+import {
+  Button, Headline, IconButton, Text
+} from 'react-native-paper';
+
+import styles from '../../../index.styles';
+
+const RateOurApp = ({
+  settingsView, setSettingsView, supportView, setSupportView
+}) => (
+    <View style={styles.mainContainer}>
+      <Text>Rate our app</Text>
+
+    </View>
+  );
+
+export default RateOurApp;

domains/Settings/SupportHome/SupportSettings/WhatsNew/index.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import {
+  View
+} from 'react-native';
+import {
+  Button, Headline, IconButton, Text
+} from 'react-native-paper';
+
+import styles from '../../../index.styles';
+
+const WhatsNew = ({
+  settingsView, setSettingsView, supportView, setSupportView
+}) => (
+    <View style={styles.mainContainer}>
+      <Text>Whats new</Text>
+    </View>
+  );
+
+export default WhatsNew;

domains/Settings/SupportHome/SupportSettings/index.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import {
+  View
+} from 'react-native';
+import {
+  Button, Headline, IconButton, Text
+} from 'react-native-paper';
+
+import AboutUs from './AboutUs';
+import Feedback from './Feedback';
+import RateOurApp from './RateOurApp';
+import WhatsNew from './WhatsNew';
+
+import styles from '../../index.styles';
+
+const SupportSettings = ({
+  settingsView, setSettingsView, supportView, setSupportView
+}) => (
+    <View style={styles.mainContainer}>
+      {supportView === 'aboutUs' && (
+        <AboutUs
+        />
+      )}
+      {supportView === 'feedback' && (
+        <Feedback />
+      )}
+      {supportView === 'rateApp' && (
+        <RateOurApp />
+      )}
+      {supportView === 'whatsNew' && (
+        <WhatsNew />
+      )}
+      <Button onPress={() => {
+        setSupportView('');
+      }}
+      >Back</Button>
+
+    </View>
+  );
+
+export default SupportSettings;

domains/Settings/SupportHome/index.js

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import {
+  View
+} from 'react-native';
+import {
+  Button, Headline, IconButton, Text
+} from 'react-native-paper';
+
+import SupportSettings from './SupportSettings';
+import I18n from '../../../modules/i18n';
+import { theme } from '../../../modules/theme';
+
+import styles from '../index.styles'
+
+const SupportHome = ({
+  setView, prevView, logOut, settingsView, setSettingsView
+}) => {
+  const [supportView, setSupportView] = useState('');
+
+  const inputs = [
+    {
+      key: 'whatsNew',
+      label: 'What\'s New?',
+      button: true
+    },
+    {
+      key: 'aboutUs',
+      label: 'About us',
+      button: true
+    },
+    {
+      key: 'feedback',
+      label: 'Contact us / Feedback?',
+      button: true
+    },
+    {
+      key: 'rateApp',
+      label: 'Rate our app',
+      button: false
+    }
+  ];
+  return (
+    <View>
+      {settingsView === 'Support' && supportView === '' && (
+        <View>
+          <View style={{ flexDirection: 'row', marginLeft: 'auto', marginRight: 'auto' }}>
+            <View style={{ paddingRight: '5%' }}>
+              <Button onPress={() => setSettingsView('Settings')}>{I18n.t('accountSettings.settings')}</Button>
+            </View>
+            <View style={{ paddingLeft: '5%' }}>
+              <Button mode="contained">
+                {I18n.t('accountSettings.support')}
+              </Button>
+            </View>
+          </View>
+          <View style={{ paddingLeft: '5%', paddingRight: '5%', paddingTop: 20 }}>
+            <Headline style={{ fontWeight: 'bold' }}>Help Center</Headline>
+            <View style={styles.horizontalLineGray} />
+            {inputs.length > 0 && inputs.map((input) => (
+              <View>
+                <View style={{ flexDirection: 'row' }}>
+                  <Text style={styles.text}>{input.label}</Text>
+                  {input.button && (
+                    <IconButton
+                      icon="chevron-right"
+                      size={30}
+                      color={theme.colors.primary}
+                      style={{ marginLeft: 'auto', marginTop: -5, marginBottom: -10 }}
+                      onPress={() => {
+                        setSupportView(input.key);
+                      }}
+                    />
+                  )}
+                </View>
+                <View style={styles.horizontalLineGray} />
+              </View>
+            ))}
+          </View>
+          <Button onPress={() => {
+            setView(prevView);
+          }}
+          >
+            {I18n.t('accountSettings.back')}
+          </Button>
+          <Button mode="contained" onPress={logOut} style={{ marginTop: 20, marginLeft: '5%', marginRight: '5%' }}>{I18n.t('accountSettings.logout')}</Button>
+        </View>
+      )}
+      {supportView !== '' && (
+        <View>
+          <SupportSettings
+            settingsView={settingsView}
+            setSettingsView={setSettingsView}
+            supportView={supportView}
+            setSupportView={setSupportView}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default SupportHome;

package.json

@@ -67,6 +67,7 @@
     "react-dom": "16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-autocomplete-input": "4.2.0",
+    "react-native-email": "^1.1.0",
     "react-native-emoji": "1.8.0",
     "react-native-gesture-handler": "1.6.0",
     "react-native-localize": "1.3.3",