New timezone pages

src/ROUTES.js

@@ -23,6 +23,8 @@ export default {
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
     SETTINGS_DISPLAY_NAME: 'settings/profile/display-name',
+    SETTINGS_TIMEZONE: 'settings/profile/timezone',
+    SETTINGS_TIMEZONE_SELECT: 'settings/profile/timezone/select',
     SETTINGS_PRONOUNS: 'settings/profile/pronouns',
     SETTINGS_PREFERENCES: 'settings/preferences',
     SETTINGS_WORKSPACES: 'settings/workspaces',

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -264,6 +264,7 @@ class BaseOptionsSelector extends Component {
                 forceTextUnreadStyle={this.props.forceTextUnreadStyle}
                 showTitleTooltip={this.props.showTitleTooltip}
                 isDisabled={this.props.isDisabled}
+                shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
             />
         ) : <FullScreenLoadingIndicator />;
         return (

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -89,6 +89,9 @@ const propTypes = {
 
     /** Whether to show options list */
     shouldShowOptions: PropTypes.bool,
+
+    /** Whether to show a line separating options in list */
+    shouldHaveOptionSeparator: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -113,6 +116,7 @@ const defaultProps = {
     shouldShowOptions: true,
     disableArrowKeysActions: false,
     isDisabled: false,
+    shouldHaveOptionSeparator: false,
 };
 
 export {propTypes, defaultProps};

src/languages/en.js

@@ -333,6 +333,11 @@ export default {
         john: 'John',
         doe: 'Doe',
     },
+    timezonePage: {
+        timezone: 'Timezone',
+        isShownOnProfile: 'Your timezone is shown on your profile.',
+        getLocationAutomatically: 'Automatically determine your location.',
+    },
     addSecondaryLoginPage: {
         addPhoneNumber: 'Add phone number',
         addEmailAddress: 'Add email address',

src/languages/es.js

@@ -333,6 +333,11 @@ export default {
         john: 'Juan',
         doe: 'Nadie',
     },
+    timezonePage: {
+        timezone: 'Zona horaria',
+        isShownOnProfile: 'Tu zona horaria se muestra en tu perfil.',
+        getLocationAutomatically: 'Detecta tu ubicación automáticamente.',
+    },
     addSecondaryLoginPage: {
         addPhoneNumber: 'Agregar número de teléfono',
         addEmailAddress: 'Agregar dirección de email',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -231,6 +231,20 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Display_Name',
     },
+    {
+        getComponent: () => {
+            const SettingsTimezoneInitialPage = require('../../../pages/settings/Profile/TimezoneInitialPage').default;
+            return SettingsTimezoneInitialPage;
+        },
+        name: 'Settings_Timezone',
+    },
+    {
+        getComponent: () => {
+            const SettingsTimezoneSelectPage = require('../../../pages/settings/Profile/TimezoneSelectPage').default;
+            return SettingsTimezoneSelectPage;
+        },
+        name: 'Settings_Timezone_Select',
+    },
     {
         getComponent: () => {
             const SettingsAddSecondaryLoginPage = require('../../../pages/settings/AddSecondaryLoginPage').default;

src/libs/Navigation/linkingConfig.js

@@ -96,6 +96,14 @@ export default {
                         path: ROUTES.SETTINGS_DISPLAY_NAME,
                         exact: true,
                     },
+                    Settings_Timezone: {
+                        path: ROUTES.SETTINGS_TIMEZONE,
+                        exact: true,
+                    },
+                    Settings_Timezone_Select: {
+                        path: ROUTES.SETTINGS_TIMEZONE_SELECT,
+                        exact: true,
+                    },
                     Settings_About: {
                         path: ROUTES.SETTINGS_ABOUT,
                         exact: true,

src/libs/actions/PersonalDetails.js

@@ -337,6 +337,56 @@ function updateDisplayName(firstName, lastName) {
     Navigation.navigate(ROUTES.SETTINGS_PROFILE);
 }
 
+/**
+ * Updates timezone's 'automatic' setting, and updates
+ * selected timezone if set to automatically update.
+ *
+ * @param {Object} timezone
+ * @param {Boolean} timezone.automatic
+ * @param {String} timezone.selected
+ */
+function updateAutomaticTimezone(timezone) {
+    API.write('UpdateAutomaticTimezone', {
+        timezone: JSON.stringify(timezone),
+    }, {
+        optimisticData: [{
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.PERSONAL_DETAILS,
+            value: {
+                [currentUserEmail]: {
+                    timezone,
+                },
+            },
+        }],
+    });
+}
+
+/**
+ * Updates user's 'selected' timezone, then navigates to the
+ * initial Timezone page.
+ *
+ * @param {String} selectedTimezone
+ */
+function updateSelectedTimezone(selectedTimezone) {
+    const timezone = {
+        selected: selectedTimezone,
+    };
+    API.write('UpdateSelectedTimezone', {
+        timezone: JSON.stringify(timezone),
+    }, {
+        optimisticData: [{
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.PERSONAL_DETAILS,
+            value: {
+                [currentUserEmail]: {
+                    timezone,
+                },
+            },
+        }],
+    });
+    Navigation.navigate(ROUTES.SETTINGS_TIMEZONE);
+}
+
 /**
  * Fetches the local currency based on location and sets currency code/symbol to Onyx
  */
@@ -452,4 +502,6 @@ export {
     updateDisplayName,
     updatePronouns,
     clearAvatarErrors,
+    updateAutomaticTimezone,
+    updateSelectedTimezone,
 };

src/pages/settings/Profile/TimezoneInitialPage.js

@@ -0,0 +1,85 @@
+import lodashGet from 'lodash/get';
+import React from 'react';
+import {View} from 'react-native';
+import moment from 'moment-timezone';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import ROUTES from '../../../ROUTES';
+import CONST from '../../../CONST';
+import Text from '../../../components/Text';
+import styles from '../../../styles/styles';
+import Navigation from '../../../libs/Navigation/Navigation';
+import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
+import compose from '../../../libs/compose';
+import Switch from '../../../components/Switch';
+import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+    ...withCurrentUserPersonalDetailsPropTypes,
+};
+
+const defaultProps = {
+    ...withCurrentUserPersonalDetailsDefaultProps,
+};
+
+const TimezoneInitialPage = (props) => {
+    const timezone = lodashGet(props.currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
+
+    /**
+     * Updates setting for automatic timezone selection.
+     * Note: If we are updating automatically, we'll immediately calculate the user's timezone.
+     *
+     * @param {Boolean} isAutomatic
+     */
+    const updateAutomaticTimezone = (isAutomatic) => {
+        PersonalDetails.updateAutomaticTimezone({
+            automatic: isAutomatic,
+            selected: isAutomatic ? moment.tz.guess() : timezone.selected,
+        });
+    };
+
+    return (
+        <ScreenWrapper>
+            <HeaderWithCloseButton
+                title={props.translate('timezonePage.timezone')}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
+                onCloseButtonPress={() => Navigation.dismissModal(true)}
+            />
+            <View style={[styles.ph5]}>
+                <Text style={[styles.mb5]}>
+                    {props.translate('timezonePage.isShownOnProfile')}
+                </Text>
+                <View style={[styles.flexRow, styles.mb5, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                    <Text>
+                        {props.translate('timezonePage.getLocationAutomatically')}
+                    </Text>
+                    <Switch
+                        isOn={timezone.automatic}
+                        onToggle={updateAutomaticTimezone}
+                    />
+                </View>
+            </View>
+            <MenuItemWithTopDescription
+                title={timezone.selected}
+                description={props.translate('timezonePage.timezone')}
+                shouldShowRightIcon
+                wrapperStyle={[styles.ph2, styles.mb3]}
+                disabled={timezone.automatic}
+                onPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_SELECT)}
+            />
+        </ScreenWrapper>
+    );
+};
+
+TimezoneInitialPage.propTypes = propTypes;
+TimezoneInitialPage.defaultProps = defaultProps;
+TimezoneInitialPage.displayName = 'TimezoneInitialPage';
+
+export default compose(
+    withLocalize,
+    withCurrentUserPersonalDetails,
+)(TimezoneInitialPage);

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -0,0 +1,103 @@
+import lodashGet from 'lodash/get';
+import React, {Component} from 'react';
+import _ from 'underscore';
+import moment from 'moment-timezone';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import ROUTES from '../../../ROUTES';
+import CONST from '../../../CONST';
+import styles from '../../../styles/styles';
+import Navigation from '../../../libs/Navigation/Navigation';
+import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
+import compose from '../../../libs/compose';
+import OptionsSelector from '../../../components/OptionsSelector';
+import themeColors from '../../../styles/themes/default';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+    ...withCurrentUserPersonalDetailsPropTypes,
+};
+
+const defaultProps = {
+    ...withCurrentUserPersonalDetailsDefaultProps,
+};
+
+class TimezoneSelectPage extends Component {
+    constructor(props) {
+        super(props);
+
+        this.saveSelectedTimezone = this.saveSelectedTimezone.bind(this);
+        this.filterShownTimezones = this.filterShownTimezones.bind(this);
+
+        this.currentSelectedTimezone = lodashGet(props.currentUserPersonalDetails, 'timezone.selected', CONST.DEFAULT_TIME_ZONE.selected);
+        this.allTimezones = _.chain(moment.tz.names())
+            .filter(timezone => !timezone.startsWith('Etc/GMT'))
+            .map(timezone => ({
+                text: timezone,
+                keyForList: timezone,
+
+                // Add green checkmark icon & bold the timezone text
+                customIcon: timezone === this.currentSelectedTimezone
+                    ? {src: Expensicons.Checkmark, color: themeColors.success}
+                    : null,
+                isUnread: timezone === this.currentSelectedTimezone,
+            }))
+            .value();
+
+        this.state = {
+            timezoneInputText: this.currentSelectedTimezone,
+            timezoneOptions: this.allTimezones,
+        };
+    }
+
+    /**
+     * @param {Object} timezone
+     * @param {String} timezone.text
+     */
+    saveSelectedTimezone({text}) {
+        PersonalDetails.updateSelectedTimezone(text);
+    }
+
+    /**
+     * @param {String} searchText
+     */
+    filterShownTimezones(searchText) {
+        this.setState({
+            timezoneInputText: searchText,
+            timezoneOptions: _.filter(this.allTimezones, (tz => tz.text.toLowerCase().includes(searchText.toLowerCase()))),
+        });
+    }
+
+    render() {
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={this.props.translate('timezonePage.timezone')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE)}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <OptionsSelector
+                    textInputLabel={this.props.translate('timezonePage.timezone')}
+                    value={this.state.timezoneInputText}
+                    onChangeText={this.filterShownTimezones}
+                    onSelectRow={this.saveSelectedTimezone}
+                    optionHoveredStyle={styles.hoveredComponentBG}
+                    sections={[{data: this.state.timezoneOptions}]}
+                    shouldHaveOptionSeparator
+                />
+            </ScreenWrapper>
+        );
+    }
+}
+
+TimezoneSelectPage.propTypes = propTypes;
+TimezoneSelectPage.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withCurrentUserPersonalDetails,
+)(TimezoneSelectPage);