New Pronouns page

src/ONYXKEYS.js

@@ -173,6 +173,7 @@ export default {
         REQUEST_CALL_FORM: 'requestCallForm',
         REIMBURSEMENT_ACCOUNT_FORM: 'reimbursementAccount',
         WORKSPACE_SETTINGS_FORM: 'workspaceSettingsForm',
+        PRONOUNS_FORM: 'pronounsForm',
     },
 
     // Whether we should show the compose input or not

src/ROUTES.js

@@ -22,6 +22,7 @@ export default {
     HOME: '',
     SETTINGS: 'settings',
     SETTINGS_PROFILE: 'settings/profile',
+    SETTINGS_PRONOUNS: 'settings/profile/pronouns',
     SETTINGS_PREFERENCES: 'settings/preferences',
     SETTINGS_WORKSPACES: 'settings/workspaces',
     SETTINGS_SECURITY: 'settings/security',

src/languages/en.js

@@ -302,6 +302,18 @@ export default {
         offline: 'Offline',
         syncing: 'Syncing',
     },
+    pronounsPage: {
+        pronouns: 'Pronouns',
+        isShownOnProfile: 'Your pronouns are shown on your profile.',
+    },
+    pronouns: {
+        heHimHis: 'He/him',
+        sheHerHers: 'She/her',
+        theyThemTheirs: 'They/them',
+        zeHirHirs: 'Ze/hir',
+        selfSelect: 'Self-select',
+        callMeByMyName: 'Call me by my name',
+    },
     addSecondaryLoginPage: {
         addPhoneNumber: 'Add phone number',
         addEmailAddress: 'Add email address',
@@ -607,14 +619,6 @@ export default {
             formLabel: 'View PDF',
         },
     },
-    pronouns: {
-        heHimHis: 'He/him',
-        sheHerHers: 'She/her',
-        theyThemTheirs: 'They/them',
-        zeHirHirs: 'Ze/hir',
-        selfSelect: 'Self-select',
-        callMeByMyName: 'Call me by my name',
-    },
     messages: {
         errorMessageInvalidPhone: `Please enter a valid phone number without brackets or dashes. If you're outside the US please include your country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
     },

src/languages/es.js

@@ -302,6 +302,18 @@ export default {
         offline: 'Desconectado',
         syncing: 'Sincronizando',
     },
+    pronounsPage: {
+        pronouns: 'Pronombres',
+        isShownOnProfile: 'Tu pronombres son muestra en tu perfil.',
+    },
+    pronouns: {
+        heHimHis: 'Él',
+        sheHerHers: 'Ella',
+        theyThemTheirs: 'Ellos',
+        zeHirHirs: 'Ze/hir',
+        selfSelect: 'Personalízalo',
+        callMeByMyName: 'Llámame por mi nombre',
+    },
     addSecondaryLoginPage: {
         addPhoneNumber: 'Agregar número de teléfono',
         addEmailAddress: 'Agregar dirección de email',
@@ -607,14 +619,6 @@ export default {
             formLabel: 'Ver PDF',
         },
     },
-    pronouns: {
-        heHimHis: 'Él',
-        sheHerHers: 'Ella',
-        theyThemTheirs: 'Ellos',
-        zeHirHirs: 'Ze/hir',
-        selfSelect: 'Personalízalo',
-        callMeByMyName: 'Llámame por mi nombre',
-    },
     messages: {
         errorMessageInvalidPhone: `Por favor, introduce un número de teléfono válido sin paréntesis o guiones. Si reside fuera de Estados Unidos, por favor incluye el prefijo internacional (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
     },

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -217,6 +217,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Profile',
     },
+    {
+        getComponent: () => {
+            const SettingsPronounsPage = require('../../../pages/settings/Profile/PronounsPage').default;
+            return SettingsPronounsPage;
+        },
+        name: 'Settings_Pronouns',
+    },
     {
         getComponent: () => {
             const SettingsAddSecondaryLoginPage = require('../../../pages/settings/AddSecondaryLoginPage').default;

src/libs/Navigation/linkingConfig.js

@@ -88,6 +88,10 @@ export default {
                         path: ROUTES.SETTINGS_PROFILE,
                         exact: true,
                     },
+                    Settings_Pronouns: {
+                        path: ROUTES.SETTINGS_PRONOUNS,
+                        exact: true,
+                    },
                     Settings_About: {
                         path: ROUTES.SETTINGS_ABOUT,
                         exact: true,

src/pages/settings/Profile/PronounsPage.js

@@ -0,0 +1,152 @@
+import lodashGet from 'lodash/get';
+import React, {Component} from 'react';
+import {View} from 'react-native';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import * as Localize from '../../../libs/Localize';
+import ROUTES from '../../../ROUTES';
+import Form from '../../../components/Form';
+import ONYXKEYS from '../../../ONYXKEYS';
+import CONST from '../../../CONST';
+import * as ValidationUtils from '../../../libs/ValidationUtils';
+import TextInput from '../../../components/TextInput';
+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 Picker from '../../../components/Picker';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+    ...withCurrentUserPersonalDetailsPropTypes,
+};
+
+const defaultProps = {
+    ...withCurrentUserPersonalDetailsDefaultProps,
+};
+
+class PronounsPage extends Component {
+    constructor(props) {
+        super(props);
+
+        this.validate = this.validate.bind(this);
+        this.updatePronouns = this.updatePronouns.bind(this);
+        this.setPronouns = this.setPronouns.bind(this);
+
+        this.pronouns = props.currentUserPersonalDetails.pronouns;
+        this.state = {
+            hasSelfSelectedPronouns: !_.isEmpty(props.currentUserPersonalDetails.pronouns) && !props.currentUserPersonalDetails.pronouns.startsWith(CONST.PRONOUNS.PREFIX),
+        };
+    }
+
+    /**
+     * @param {String} pronouns
+     */
+        setPronouns(pronouns) {
+        const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT;
+        this.pronouns = hasSelfSelectedPronouns ? '' : pronouns;
+
+        if (this.state.hasSelfSelectedPronouns === hasSelfSelectedPronouns) {
+            return;
+        }
+
+        this.setState({hasSelfSelectedPronouns});
+    }
+
+    /**
+     * Submit form to update personal details
+     * @param {Object} values
+     * @param {String} values.pronouns
+     * @param {String} values.selfSelectedPronoun
+     */
+    updatePronouns(values) {
+        PersonalDetails.updatePronouns(
+            this.state.hasSelfSelectedPronouns ? values.selfSelectedPronoun.trim() : values.pronouns.trim(),
+        );
+    }
+
+    /**
+     * @param {Object} values - An object containing the value of each inputID
+     * @param {String} values.pronouns
+     * @param {String} values.selfSelectedPronoun
+     * @returns {Object} - An object containing the errors for each inputID
+     */
+    validate(values) {
+        const errors = {};
+
+        const [hasPronounError] = ValidationUtils.doesFailCharacterLimitAfterTrim(
+            CONST.FORM_CHARACTER_LIMIT,
+            [values.pronouns],
+        );
+
+        if (hasPronounError) {
+            errors.pronouns = Localize.translateLocal('personalDetails.error.characterLimit', {limit: CONST.FORM_CHARACTER_LIMIT});
+        }
+
+        return errors;
+    }
+
+    render() {
+        const pronounsList = _.map(this.props.translate('pronouns'), (value, key) => ({
+            label: value,
+            value: `${CONST.PRONOUNS.PREFIX}${key}`,
+        }));
+        const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns;
+
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={this.props.translate('pronounsPage.pronouns')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <Form
+                    style={[styles.flexGrow1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.PRONOUNS_FORM}
+                    validate={this.validate}
+                    onSubmit={this.updatePronouns}
+                    submitButtonText={this.props.translate('common.save')}
+                    enabledWhenOffline
+                >
+                    <Text style={[styles.mb6]}>
+                        {this.props.translate('displayNamePage.isShownOnProfile')}
+                    </Text>
+                    <View>
+                        <Picker
+                            inputID="pronouns"
+                            label={this.props.translate('profilePage.preferredPronouns')}
+                            items={pronounsList}
+                            placeholder={{
+                                value: '',
+                                label: this.props.translate('profilePage.selectYourPronouns'),
+                            }}
+                            defaultValue={pronounsPickerValue}
+                            onValueChange={this.setPronouns}
+                        />
+                        {this.state.hasSelfSelectedPronouns && (
+                            <View style={styles.mt2}>
+                                <TextInput
+                                    inputID="selfSelectedPronoun"
+                                    defaultValue={this.pronouns}
+                                    placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
+                                />
+                            </View>
+                        )}
+                    </View>
+                </Form>
+            </ScreenWrapper>
+        )
+    }
+}
+
+PronounsPage.propTypes = propTypes;
+PronounsPage.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withCurrentUserPersonalDetails,
+)(PronounsPage);