Merge pull request #3697 from Expensify/jasper-requestCallPageNavSetup

Create the RequestCallPage

Author: Clement DAL PALU

src/ROUTES.js

@@ -53,6 +53,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,86 @@
+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/libs/Navigation/AppNavigator/AuthScreens.js

@@ -54,6 +54,7 @@ import {
     ReimbursementAccountModalStackNavigator,
     NewWorkspaceStackNavigator,
     WorkspaceInviteModalStackNavigator,
+    RequestCallModalStackNavigator,
 } from './ModalStackNavigators';
 import SCREENS from '../../../SCREENS';
 import Timers from '../../Timers';
@@ -307,6 +308,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,
+                },
+            },
         },
     },
 };

src/pages/RequestCallPage.js

@@ -0,0 +1,171 @@
+import {Component} from 'react';
+import {View, Text, TextInput} from 'react-native';
+import _ from 'underscore';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import Str from 'expensify-common/lib/str';
+import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import Navigation from '../libs/Navigation/Navigation';
+import styles from '../styles/styles';
+import ScreenWrapper from '../components/ScreenWrapper';
+import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import ONYXKEYS from '../ONYXKEYS';
+import compose from '../libs/compose';
+import FullNameInputRow from '../components/FullNameInputRow';
+import Button from '../components/Button';
+import FixedFooter from '../components/FixedFooter';
+import CONST from '../CONST';
+import Growl from '../libs/Growl';
+import {requestConciergeDMCall} from '../libs/actions/Inbox';
+import {fetchOrCreateChatReport} from '../libs/actions/Report';
+import personalDetailsPropType from './personalDetailsPropType';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** The personal details of the person who is logged in */
+    myPersonalDetails: personalDetailsPropType.isRequired,
+
+    /** Current user session */
+    session: PropTypes.shape({
+        email: PropTypes.string.isRequired,
+    }).isRequired,
+
+    /** The details about the user that is signed in */
+    user: PropTypes.shape({
+        /** Whether or not the user is subscribed to news updates */
+        loginList: PropTypes.arrayOf(PropTypes.shape({
+
+            /** Phone/Email associated with user */
+            partnerUserID: PropTypes.string,
+        })),
+    }).isRequired,
+};
+
+class RequestCallPage extends Component {
+    constructor(props) {
+        super(props);
+
+        // The displayName defaults to the user's login if they haven't set a first and last name,
+        // which we can't use to prefill the input fields
+        const [firstName, lastName] = props.myPersonalDetails.displayName !== props.myPersonalDetails.login
+            ? props.myPersonalDetails.displayName.split(' ')
+            : [];
+        this.state = {
+            firstName: firstName ?? '',
+            lastName: lastName ?? '',
+            phoneNumber: this.getPhoneNumber(props.user.loginList) ?? '',
+            isLoading: false,
+        };
+
+        this.onSubmit = this.onSubmit.bind(this);
+        this.getPhoneNumber = this.getPhoneNumber.bind(this);
+    }
+
+    onSubmit() {
+        this.setState({isLoading: true});
+        if (!this.state.firstName.length || !this.state.lastName.length) {
+            Growl.show(this.props.translate('requestCallPage.growlMessageEmptyName'), CONST.GROWL.ERROR);
+            this.setState({isLoading: false});
+            return;
+        }
+
+        requestConciergeDMCall('', this.state.firstName, this.state.lastName, this.state.phoneNumber)
+            .then((result) => {
+                this.setState({isLoading: false});
+                if (result.jsonCode === 200) {
+                    Growl.show(this.props.translate('requestCallPage.growlMessageOnSave'), CONST.GROWL.SUCCESS);
+                    fetchOrCreateChatReport([this.props.session.email, CONST.EMAIL.CONCIERGE], true);
+                    return;
+                }
+
+                // Phone number validation is handled by the API
+                Growl.show(result.message, CONST.GROWL.ERROR, 3000);
+            });
+    }
+
+    /**
+     * Gets the user's phone number from their secondary login.
+     * Returns null if it doesn't exist.
+     * @param {Array<Object>} loginList
+     *
+     * @returns {String|null}
+     */
+    getPhoneNumber(loginList) {
+        const secondaryLogin = _.find(loginList, login => Str.isSMSLogin(login.partnerUserID));
+        return secondaryLogin ? Str.removeSMSDomain(secondaryLogin.partnerUserID) : null;
+    }
+
+    render() {
+        const isButtonDisabled = false;
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={this.props.translate('requestCallPage.requestACall')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => fetchOrCreateChatReport([
+                        this.props.session.email,
+                        CONST.EMAIL.CONCIERGE,
+                    ], true)}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <View style={[styles.flex1, styles.p5]}>
+                    <Text style={[styles.mb4, styles.textP]}>
+                        {this.props.translate('requestCallPage.description')}
+                    </Text>
+                    <Text style={[styles.mt4, styles.mb4, styles.textP]}>
+                        {this.props.translate('requestCallPage.instructions')}
+                    </Text>
+                    <FullNameInputRow
+                        firstName={this.state.firstName}
+                        lastName={this.state.lastName}
+                        onChangeFirstName={firstName => this.setState({firstName})}
+                        onChangeLastName={lastName => this.setState({lastName})}
+                        style={[styles.mt4, styles.mb4]}
+                    />
+                    <Text style={[styles.mt4, styles.formLabel]} numberOfLines={1}>
+                        {this.props.translate('common.phoneNumber')}
+                    </Text>
+                    <TextInput
+                        autoCompleteType="off"
+                        autoCorrect={false}
+                        style={[styles.textInput]}
+                        value={this.state.phoneNumber}
+                        placeholder="+14158675309"
+                        onChangeText={phoneNumber => this.setState({phoneNumber})}
+                    />
+                    <Text style={[styles.mt4, styles.textLabel, styles.colorMuted, styles.mb6]}>
+                        {this.props.translate('requestCallPage.availabilityText')}
+                    </Text>
+                </View>
+                <FixedFooter>
+                    <Button
+                        success
+                        isDisabled={isButtonDisabled}
+                        onPress={this.onSubmit}
+                        style={[styles.w100]}
+                        text={this.props.translate('requestCallPage.callMe')}
+                        isLoading={this.state.isLoading}
+                    />
+                </FixedFooter>
+            </ScreenWrapper>
+        );
+    }
+}
+
+RequestCallPage.displayName = 'RequestCallPage';
+RequestCallPage.propTypes = propTypes;
+export default compose(
+    withLocalize,
+    withOnyx({
+        myPersonalDetails: {
+            key: ONYXKEYS.MY_PERSONAL_DETAILS,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+        user: {
+            key: ONYXKEYS.USER,
+        },
+    }),
+)(RequestCallPage);