New timezone pages

src/ROUTES.js

@@ -22,6 +22,8 @@ export default {
     HOME: '',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
+    SETTINGS_TIMEZONE_INITIAL: 'settings/profile/timezone',
+    SETTINGS_TIMEZONE_SELECT: 'settings/profile/timezone/select',
     SETTINGS_PREFERENCES: 'settings/preferences',
     SETTINGS_WORKSPACES: 'settings/workspaces',
     SETTINGS_SECURITY: 'settings/security',

src/components/OptionRow.js

@@ -140,6 +140,7 @@ const OptionRow = (props) => {
             <Hoverable
                 containerStyles={[
                     props.isDisabled ? styles.userSelectNone : null,
+                    styles.borderBottom,
                 ]}
             >
                 {hovered => (
@@ -266,6 +267,11 @@ const OptionRow = (props) => {
                                         <Icon src={Expensicons.Pin} height={16} width={16} />
                                     </View>
                                 )}
+                                {Boolean(props.option.customIcon) && (
+                                    <View>
+                                        <Icon src={props.option.customIcon.src} height={16} width={16} fill={props.option.customIcon.color} />
+                                    </View>
+                                )}
                             </View>
                         )}
                     </TouchableOpacity>

src/components/optionPropTypes.js

@@ -39,6 +39,12 @@ export default PropTypes.shape({
     // Whether the option has an outstanding IOU
     hasOutstandingIOU: PropTypes.bool,
 
+    // Custom icon to render on the right side of the option
+    customIcon: PropTypes.shape({
+        src: PropTypes.func,
+        color: PropTypes.string,
+    }),
+
     // List of participants of the report
     participantsList: PropTypes.arrayOf(participantPropTypes),
 

src/languages/en.js

@@ -302,6 +302,11 @@ export default {
         offline: 'Offline',
         syncing: 'Syncing',
     },
+    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

@@ -302,6 +302,11 @@ export default {
         offline: 'Desconectado',
         syncing: 'Sincronizando',
     },
+    timezonePage: {
+        timezone: 'Zona horaria',
+        isShownOnProfile: '',
+        getLocationAutomatically: '',
+    },
     addSecondaryLoginPage: {
         addPhoneNumber: 'Agregar número de teléfono',
         addEmailAddress: 'Agregar dirección de email',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -217,6 +217,20 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Profile',
     },
+    {
+        getComponent: () => {
+            const SettingsTimezoneInitialPage = require('../../../pages/settings/Profile/TimezoneInitialPage').default;
+            return SettingsTimezoneInitialPage;
+        },
+        name: 'Settings_Timezone_Init',
+    },
+    {
+        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

@@ -88,6 +88,14 @@ export default {
                         path: ROUTES.SETTINGS_PROFILE,
                         exact: true,
                     },
+                    Settings_Timezone_Init: {
+                        path: ROUTES.SETTINGS_TIMEZONE_INITIAL,
+                        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

@@ -12,6 +12,8 @@ import * as LoginUtils from '../LoginUtils';
 import * as ReportUtils from '../ReportUtils';
 import Growl from '../Growl';
 import * as Localize from '../Localize';
+import ROUTES from '../../ROUTES';
+import Navigation from '../Navigation/Navigation';
 
 let currentUserEmail = '';
 Onyx.connect({
@@ -285,6 +287,52 @@ function updateProfile(firstName, lastName, pronouns, timezone) {
     });
 }
 
+/**
+ * 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,
+                },
+            },
+        }],
+    });
+}
+
+/**
+ * @param {String} selectedTimezone
+ */
+function updateSelectedTimezone(selectedTimezone) {
+    API.write('UpdateSelectedTimezone', {
+        text: selectedTimezone,
+    }, {
+        optimisticData: [{
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.PERSONAL_DETAILS,
+            value: {
+                [currentUserEmail]: {
+                    timezone: {
+                        selected: selectedTimezone,
+                    },
+                },
+            },
+        }],
+    });
+    Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_INITIAL);
+}
+
 /**
  * Fetches the local currency based on location and sets currency code/symbol to Onyx
  */
@@ -398,4 +446,6 @@ export {
     extractFirstAndLastNameFromAvailableDetails,
     updateProfile,
     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 timezone updating automatically.
+     * Note: If we are updating automatically, we'll immediately caltulate user 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,102 @@
+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.textSuccess}
+                    : 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().startsWith(searchText.toLowerCase()))),
+        });
+    }
+
+    render() {
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={this.props.translate('timezonePage.timezone')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_INITIAL)}
+                    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}]}
+                />
+            </ScreenWrapper>
+        );
+    }
+}
+
+TimezoneSelectPage.propTypes = propTypes;
+TimezoneSelectPage.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withCurrentUserPersonalDetails,
+)(TimezoneSelectPage);