Create the RequestCallPage

src/ROUTES.js

@@ -52,6 +52,7 @@ export default {
     getWorkspaceRoute: policyID => `workspace/${policyID}`,
     WORKSPACE_INVITE: 'workspace/:policyID/invite',
     getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
+    REQUEST_CALL: 'request-call',
 
     /**
      * @param {String} route

src/components/FullNameInputRow.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import {TextInput, View} from 'react-native';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import Text from './Text';
+import themeColors from '../styles/themes/default';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Called when text is entered into the firstName input */
+    onChangeFirstName: PropTypes.func.isRequired,
+
+    /** Called when text is entered into the lastName input */
+    onChangeLastName: PropTypes.func.isRequired,
+
+    /** Used to prefill the firstName input, can also be used to make it a controlled input */
+    firstName: PropTypes.string,
+
+    /** Placeholder text for the firstName input */
+    firstNamePlaceholder: PropTypes.string,
+
+    /** Used to prefill the lastName input, can also be used to make it a controlled input */
+    lastName: PropTypes.string,
+
+    /** Placeholder text for the lastName input */
+    lastNamePlaceholder: PropTypes.string,
+
+    /** Additional styles to add after local styles */
+    style: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.object,
+    ]),
+};
+const defaultProps = {
+    firstName: '',
+    firstNamePlaceholder: null,
+    lastName: '',
+    lastNamePlaceholder: null,
+    style: {},
+};
+
+const FullNameInputRow = ({
+    translate,
+    onChangeFirstName, onChangeLastName,
+    firstName, lastName,
+    firstNamePlaceholder,
+    lastNamePlaceholder,
+    style,
+}) => {
+    const additionalStyles = _.isArray(style) ? style : [style];
+    return (
+        <View style={[styles.flexRow, ...additionalStyles]}>
+            <View style={styles.flex1}>
+                <Text style={[styles.mb1, styles.formLabel]}>
+                    {translate('common.firstName')}
+                </Text>
+                <TextInput
+                    style={styles.textInput}
+                    value={firstName}
+                    onChangeText={onChangeFirstName}
+                    placeholder={firstNamePlaceholder ?? translate('profilePage.john')}
+                    placeholderTextColor={themeColors.placeholderText}
+                />
+            </View>
+            <View style={[styles.flex1, styles.ml2]}>
+                <Text style={[styles.mb1, styles.formLabel]}>
+                    {translate('common.lastName')}
+                </Text>
+                <TextInput
+                    style={styles.textInput}
+                    value={lastName}
+                    onChangeText={onChangeLastName}
+                    placeholder={lastNamePlaceholder ?? translate('profilePage.doe')}
+                    placeholderTextColor={themeColors.placeholderText}
+                />
+            </View>
+        </View>
+    );
+};
+
+FullNameInputRow.displayName = 'FullNameInputRow';
+FullNameInputRow.propTypes = propTypes;
+FullNameInputRow.defaultProps = defaultProps;
+export default withLocalize(FullNameInputRow);

src/components/VideoChatButtonAndMenu.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {
     View, Pressable, Dimensions, Linking,
 } from 'react-native';
+import PropTypes from 'prop-types';
 import Icon from './Icon';
 import {Phone} from './Icon/Expensicons';
 import Popover from './Popover';
@@ -14,10 +15,17 @@ import themeColors from '../styles/themes/default';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
 
 const propTypes = {
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
+    isConcierge: PropTypes.bool,
+};
+
+const defaultProps = {
+    isConcierge: false,
 };
 
 class VideoChatButtonAndMenu extends Component {
@@ -89,13 +97,18 @@ class VideoChatButtonAndMenu extends Component {
                 >
                     <Pressable
                         onPress={() => {
+                            // If this is the Concierge chat, we'll open the modal for requesting a setup call instead
+                            if (this.props.isConcierge) {
+                                Navigation.navigate(ROUTES.REQUEST_CALL);
+                                return;
+                            }
                             this.toggleVideoChatMenu();
                         }}
                         style={[styles.touchableButtonImage, styles.mr0]}
                     >
                         <Icon
                             src={Phone}
-                            fill={this.state.isVideoChatMenuActive
+                            fill={(this.props.isConcierge || this.state.isVideoChatMenuActive)
                                 ? themeColors.heading
                                 : themeColors.icon}
                         />
@@ -127,6 +140,7 @@ class VideoChatButtonAndMenu extends Component {
 }
 
 VideoChatButtonAndMenu.propTypes = propTypes;
+VideoChatButtonAndMenu.defaultProps = defaultProps;
 VideoChatButtonAndMenu.displayName = 'VideoChatButtonAndMenu';
 export default compose(
     withWindowDimensions,

src/languages/en.js

@@ -399,4 +399,14 @@ export default {
             welcomeNote: ({workspaceName}) => `You have been invited to the ${workspaceName} Workspace! Download the Expensify mobile App to start tracking your expenses.`,
         },
     },
+    requestCallPage: {
+        requestACall: 'Request a Call',
+        description: 'Need help with your account configuration? Our team of guides are on hand to help you each step of the way.',
+        instructions: 'Type in your name and phone number, and we’ll give you a call back.',
+        availabilityText: '*Our guides are available from Sunday at 5pm CT to Friday at 5pm CT. Any requests outside this window will be returned 9am - 5pm, Monday - Friday in your local time. Call time is based on the order the call was received.',
+        callMe: 'Call Me',
+        growlMessageOnSave: 'Call requested.',
+        growlMessageInvalidPhone: 'That doesn’t look like a valid phone number. Try again with the country code.\ne.g. +15005550006',
+        growlMessageEmptyName: 'Please provide both a first and last name so our Guides know how to address you!',
+    },
 };

src/languages/es.js

@@ -352,4 +352,14 @@ export default {
         confirmCompanyIsNot: 'Confirmo que esta empresa no está en el',
         listOfRestrictedBusinesses: 'lista de negocios restringidos',
     },
+    requestCallPage: {
+        requestACall: 'Llámame por teléfono',
+        description: '¿Necesitas ayuda configurando tu cuenta? Nuestro equipo de guías puede ayudarte.',
+        instructions: 'Escribe tu nombre y número de teléfono y te llamaremos.',
+        availabilityText: '*Nuestros guías están disponibles de domingo desde las 17.00 CT a viernes hasta las 17.00 CT. Si solicitas una llamada fuera de este horario, te llamaremos de lunes a viernes de 9.00 a 17.00 en tu hora local. El orden de llamada corresponde con el orden de solicitud.',
+        callMe: 'Llámame',
+        growlMessageOnSave: 'Llamada solicitada.',
+        growlMessageInvalidPhone: 'El teléfono no es valido. Intentalo de nuevo agregando el código de país. P. ej.: +15005550006',
+        growlMessageEmptyName: 'Por favor ingresa tu nombre completo',
+    },
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -54,6 +54,7 @@ import {
     ReimbursementAccountModalStackNavigator,
     NewWorkspaceStackNavigator,
     WorkspaceInviteModalStackNavigator,
+    RequestCallModalStackNavigator,
 } from './ModalStackNavigators';
 import SCREENS from '../../../SCREENS';
 import Timers from '../../Timers';
@@ -306,6 +307,12 @@ class AuthScreens extends React.Component {
                     component={WorkspaceInviteModalStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="RequestCall"
+                    options={modalScreenOptions}
+                    component={RequestCallModalStackNavigator}
+                    listeners={modalScreenListeners}
+                />
             </RootStack.Navigator>
         );
     }

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -24,6 +24,7 @@ import AddPersonalBankAccountPage from '../../../pages/AddPersonalBankAccountPag
 import WorkspaceInvitePage from '../../../pages/workspace/WorkspaceInvitePage';
 import ReimbursementAccountPage from '../../../pages/ReimbursementAccount/ReimbursementAccountPage';
 import NewWorkspacePage from '../../../pages/workspace/NewWorkspacePage';
+import RequestCallPage from '../../../pages/RequestCallPage';
 
 const defaultSubRouteOptions = {
     cardStyle: styles.navigationScreenCardStyle,
@@ -170,6 +171,11 @@ const WorkspaceInviteModalStackNavigator = createModalStackNavigator([{
     name: 'WorkspaceInvite_Root',
 }]);
 
+const RequestCallModalStackNavigator = createModalStackNavigator([{
+    Component: RequestCallPage,
+    name: 'RequestCall_Root',
+}]);
+
 export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
@@ -185,4 +191,5 @@ export {
     ReimbursementAccountModalStackNavigator,
     NewWorkspaceStackNavigator,
     WorkspaceInviteModalStackNavigator,
+    RequestCallModalStackNavigator,
 };

src/libs/Navigation/linkingConfig.js

@@ -129,6 +129,11 @@ export default {
                     NewWorkspace_Root: ROUTES.WORKSPACE_NEW,
                 },
             },
+            RequestCall: {
+                screens: {
+                    RequestCall_Root: ROUTES.REQUEST_CALL,
+                },
+            },
         },
     },
 };