[User Settings] Add new Preferences view

config/webpack/webpack.common.js

@@ -61,7 +61,7 @@ const webpackConfig = {
                  */
                 exclude: [
                     // eslint-disable-next-line max-len
-                    /node_modules\/(?!(react-native-animatable|react-native-picker-select|react-native-web|@react-native-picker|react-native-modal|react-native-webview|react-native-onyx)\/).*|\.native\.js$/,
+                    /node_modules\/(?!(toggle-switch-react-native|react-native-animatable|react-native-picker-select|react-native-web|@react-native-picker|react-native-modal|react-native-webview|react-native-onyx)\/).*|\.native\.js$/,
                     platformExclude,
                 ],
             },

package.json

@@ -77,6 +77,7 @@
     "react-web-config": "^1.0.0",
     "rn-fetch-blob": "^0.12.0",
     "save": "^2.4.0",
+    "toggle-switch-react-native": "^3.2.0",
     "underscore": "^1.10.2",
     "urbanairship-react-native": "^10.0.0"
   },

src/pages/home/HomePage.js

@@ -31,7 +31,7 @@ import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import {redirect} from '../../libs/actions/App';
 import RightDockedModal from '../../components/RightDockedModal';
 import IOUModal from '../iou/IOUModal';
-import {getBetas} from '../../libs/actions/User';
+import * as User from '../../libs/actions/User';
 import NameValuePair from '../../libs/actions/NameValuePair';
 
 const propTypes = {
@@ -63,7 +63,8 @@ class HomePage extends PureComponent {
         NameValuePair.get(CONST.NVP.PRIORITY_MODE, ONYXKEYS.PRIORITY_MODE, 'default');
         PersonalDetails.fetch();
         PersonalDetails.fetchTimezone();
-        getBetas();
+        User.getBetas();
+        User.fetch();
         fetchAllReports(true, true);
         fetchCountryCodeByRequestIP();
         UnreadIndicatorUpdater.listenForReportChanges();
@@ -77,7 +78,7 @@ class HomePage extends PureComponent {
             }
             PersonalDetails.fetch();
             PersonalDetails.fetchTimezone();
-            getBetas();
+            User.getBetas();
         }, 1000 * 60 * 30);
 
         Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);

src/pages/settings/PreferencesPage.js

@@ -1,28 +1,38 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {View} from 'react-native';
 import RNPickerSelect from 'react-native-picker-select';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import ToggleSwitch from 'toggle-switch-react-native';
 
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import {redirect} from '../../libs/actions/App';
 import HeaderGap from '../../components/HeaderGap';
 import ROUTES from '../../ROUTES';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
+import colors from '../../styles/colors';
 import Text from '../../components/Text';
 import Icon from '../../components/Icon';
 import NameValuePair from '../../libs/actions/NameValuePair';
 import CONST from '../../CONST';
 import {DownArrow} from '../../components/Icon/Expensicons';
+import {setExpensifyNewsStatus} from '../../libs/actions/User';
 
 const propTypes = {
     // The chat priority mode
     priorityMode: PropTypes.string,
+
+    // The details about the user that is signed in
+    user: PropTypes.shape({
+        // Whether or not the user is subscribed to news updates
+        expensifyNewsStatus: PropTypes.bool,
+    }),
 };
 
 const defaultProps = {
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
+    user: {},
 };
 
 const priorityModes = {
@@ -38,42 +48,71 @@ const priorityModes = {
     },
 };
 
-const PreferencesPage = ({priorityMode}) => (
-    <>
-        <HeaderGap />
-        <HeaderWithCloseButton
-            title="Preferences"
-            shouldShowBackButton
-            onBackButtonPress={() => redirect(ROUTES.SETTINGS)}
-            onCloseButtonPress={() => redirect(ROUTES.HOME)}
-        />
-        <View style={styles.pageWrapper}>
-            <View style={[styles.settingsPageBody, styles.mb6]}>
-                <Text style={[styles.formLabel]} numberOfLines={1}>
-                    Priority Mode
-                </Text>
-                <View style={[styles.mb2]}>
-                    {/* empty object in placeholder below to prevent default */}
-                    {/* placeholder from appearing as a selection option. */}
-                    <RNPickerSelect
-                        onValueChange={
-                            mode => NameValuePair.set(CONST.NVP.PRIORITY_MODE, mode, ONYXKEYS.PRIORITY_MODE)
-                        }
-                        items={Object.values(priorityModes)}
-                        style={styles.picker}
-                        useNativeAndroidPickerStyle={false}
-                        placeholder={{}}
-                        value={priorityMode}
-                        Icon={() => <Icon src={DownArrow} />}
-                    />
+class PreferencesPage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isNewsStatusEnabled: !(this.props.user.expensifyNewsStatus === false),
+        };
+        this.toggleNewsStatus = this.toggleNewsStatus.bind(this);
+    }
+
+    toggleNewsStatus(toggle) {
+        this.setState({isNewsStatusEnabled: toggle});
+        setExpensifyNewsStatus(toggle);
+    }
+
+    render() {
+        return (
+            <>
+                <HeaderGap />
+                <HeaderWithCloseButton
+                    title="Preferences"
+                    shouldShowBackButton
+                    onBackButtonPress={() => redirect(ROUTES.SETTINGS)}
+                    onCloseButtonPress={() => redirect(ROUTES.HOME)}
+                />
+                <View style={styles.pageWrapper}>
+                    <View style={[styles.settingsPageBody, styles.mb6]}>
+                        <View style={[styles.flexRow, styles.mb5, styles.justifyContentBetween]}>
+                            <Text>
+                                Relevent feature updates and
+                                {'\n'}
+                                Expensify news
+                            </Text>
+                            <ToggleSwitch
+                                isOn={this.state.isNewsStatusEnabled}
+                                onColor={colors.green}
+                                onToggle={this.toggleNewsStatus}
+                            />
+                        </View>
+                        <Text style={[styles.formLabel]} numberOfLines={1}>
+                            Priority Mode
+                        </Text>
+                        <View style={[styles.mb2]}>
+                            {/* empty object in placeholder below to prevent default */}
+                            {/* placeholder from appearing as a selection option. */}
+                            <RNPickerSelect
+                                onValueChange={
+                                    mode => NameValuePair.set(CONST.NVP.PRIORITY_MODE, mode, ONYXKEYS.PRIORITY_MODE)
+                                }
+                                items={Object.values(priorityModes)}
+                                style={styles.picker}
+                                useNativeAndroidPickerStyle={false}
+                                placeholder={{}}
+                                value={this.props.priorityMode}
+                                Icon={() => <Icon src={DownArrow} />}
+                            />
+                        </View>
+                        <Text style={[styles.textLabel, styles.colorMuted]}>
+                            {priorityModes[this.props.priorityMode].description}
+                        </Text>
+                    </View>
                 </View>
-                <Text style={[styles.textLabel, styles.colorMuted]}>
-                    {priorityModes[priorityMode].description}
-                </Text>
-            </View>
-        </View>
-    </>
-);
+            </>
+        );
+    }
+}
 
 PreferencesPage.propTypes = propTypes;
 PreferencesPage.defaultProps = defaultProps;
@@ -83,4 +122,7 @@ export default withOnyx({
     priorityMode: {
         key: ONYXKEYS.PRIORITY_MODE,
     },
+    user: {
+        key: ONYXKEYS.USER,
+    },
 })(PreferencesPage);