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

@@ -70,6 +70,9 @@ const propTypes = {
     /** Whether this option should be disabled */
     isDisabled: PropTypes.bool,
 
+    /** Whether to show a line separating options in list */
+    shouldHaveOptionSeparator: PropTypes.bool,
+
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     ...withLocalizePropTypes,
@@ -90,6 +93,7 @@ const defaultProps = {
     isDisabled: false,
     optionIsFocused: false,
     style: null,
+    shouldHaveOptionSeparator: false,
 };
 
 const OptionRow = (props) => {
@@ -164,6 +168,7 @@ const OptionRow = (props) => {
                             props.optionIsFocused ? styles.sidebarLinkActive : null,
                             hovered && !props.optionIsFocused ? props.hoverStyle : null,
                             props.isDisabled && styles.cursorDisabled,
+                            props.shouldHaveOptionSeparator && styles.borderTop,
                         ]}
                     >
                         <View accessibilityHint={props.accessibilityHint} style={sidebarInnerRowStyle}>
@@ -266,6 +271,16 @@ const OptionRow = (props) => {
                                         <Icon src={Expensicons.Pin} height={16} width={16} />
                                     </View>
                                 )}
+                                {Boolean(props.option.customIcon) && (
+                                    <View>
+                                        <Icon
+                                            src={lodashGet(props.option, 'customIcon.src', '')}
+                                            height={16}
+                                            width={16}
+                                            fill={lodashGet(props.option, 'customIcon.color')}
+                                        />
+                                    </View>
+                                )}
                             </View>
                         )}
                     </TouchableOpacity>

src/components/OptionsList/BaseOptionsList.js

@@ -181,6 +181,7 @@ class BaseOptionsList extends Component {
                 hideAdditionalOptionStates={this.props.hideAdditionalOptionStates}
                 forceTextUnreadStyle={this.props.forceTextUnreadStyle}
                 isDisabled={this.props.isDisabled || section.isDisabled}
+                shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
             />
         );
     }

src/components/OptionsList/optionsListPropTypes.js

@@ -78,6 +78,9 @@ const propTypes = {
 
     /** Callback to execute when the SectionList lays out */
     onLayout: PropTypes.func,
+
+    /** Whether to show a line separating options in list */
+    shouldHaveOptionSeparator: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -100,6 +103,7 @@ const defaultProps = {
     optionMode: undefined,
     isDisabled: false,
     onLayout: undefined,
+    shouldHaveOptionSeparator: false,
 };
 
 export {propTypes, defaultProps};

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/components/optionPropTypes.js

@@ -39,6 +39,15 @@ 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({
+        // The icon source
+        src: PropTypes.func,
+
+        // The color of the icon
+        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,55 @@ 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,
+                },
+            },
+        }],
+    });
+}
+
+/**
+ * Updates user's 'selected' timezone, then navigates to the
+ * initial Timezone page.
+ *
+ * @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 +449,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);