Add Guides call request flow to workspace card configuration screen

src/ROUTES.js

@@ -80,7 +80,8 @@ export default {
     getWorkspacePeopleRoute: policyID => `workspace/${policyID}/people`,
     getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
     WORKSPACE_INVITE: 'workspace/:policyID/invite',
-    REQUEST_CALL: 'request-call',
+    getRequestCallRoute: taskID => `request-call/${taskID}`,
+    REQUEST_CALL: 'request-call/:taskID',
     getWorkspaceEditorRoute: policyID => `workspace/${policyID}/edit`,
     WORKSPACE_EDITOR: 'workspace/:policyID/edit',
     VALIDATE_CODE_URL: (accountID, validateCode, exitTo = '') => {

src/components/HeaderWithCloseButton.js

@@ -9,6 +9,7 @@ import Icon from './Icon';
 import {Close, Download, BackArrow} from './Icon/Expensicons';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import InboxCallButton from './InboxCallButton';
 
 const propTypes = {
     /** Title of the Header */
@@ -32,6 +33,11 @@ const propTypes = {
     /** Whether we should show a download button */
     shouldShowDownloadButton: PropTypes.bool,
 
+    /** Whether weshould show a inbox call button */
+    shouldShowInboxCallButton: PropTypes.bool,
+
+    inboxCallTaskID: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
@@ -43,6 +49,8 @@ const defaultProps = {
     shouldShowBackButton: false,
     shouldShowBorderBottom: false,
     shouldShowDownloadButton: false,
+    shouldShowInboxCallButton: false,
+    inboxCallTaskID: '',
 };
 
 const HeaderWithCloseButton = props => (
@@ -77,6 +85,11 @@ const HeaderWithCloseButton = props => (
                     )
                 }
 
+                {
+                    props.shouldShowInboxCallButton && <InboxCallButton taskID={props.inboxCallTaskID} />
+
+                }
+
                 <TouchableOpacity
                     onPress={props.onCloseButtonPress}
                     style={[styles.touchableButtonImage]}

src/components/InboxCallButton.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+    View, Pressable,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import Icon from './Icon';
+import {Phone} from './Icon/Expensicons';
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import Text from './Text';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+    taskID: PropTypes.string,
+};
+
+const defaultProps = {
+    taskID: '',
+};
+
+const InboxCallButton = props => (
+    <>
+        <View
+            style={[styles.flex1, styles.flexRow, styles.justifyContentCenter, styles.alignItemsCenter]}
+        >
+            <Pressable
+                onPress={() => {
+                    Navigation.navigate(ROUTES.getRequestCallRoute(props.taskID));
+                }}
+                style={[styles.button, styles.buttonSmall]}
+            >
+                <View style={styles.flexRow}>
+                    <View style={styles.mr1}>
+                        <Icon
+                            src={Phone}
+                            fill={themeColors.heading}
+                            small
+                        />
+                    </View>
+                    <View>
+                        <Text style={styles.buttonText}>
+                            {props.translate('requestCallPage.needHelp')}
+                        </Text>
+                    </View>
+                </View>
+            </Pressable>
+        </View>
+    </>
+);
+
+InboxCallButton.propTypes = propTypes;
+InboxCallButton.defaultProps = defaultProps;
+InboxCallButton.displayName = 'InboxCallButton';
+export default compose(withLocalize)(InboxCallButton);

src/components/VideoChatButtonAndMenu.js

@@ -21,11 +21,13 @@ import ROUTES from '../ROUTES';
 const propTypes = {
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
-    isConcierge: PropTypes.bool,
+    openInboxCall: PropTypes.bool,
+    taskID: PropTypes.string,
 };
 
 const defaultProps = {
-    isConcierge: false,
+    openInboxCall: false,
+    taskID: '',
 };
 
 class VideoChatButtonAndMenu extends Component {
@@ -98,8 +100,8 @@ 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);
+                            if (this.props.openInboxCall) {
+                                Navigation.navigate(ROUTES.getRequestCallRoute(this.props.taskID));
                                 return;
                             }
                             this.toggleVideoChatMenu();
@@ -108,7 +110,7 @@ class VideoChatButtonAndMenu extends Component {
                     >
                         <Icon
                             src={Phone}
-                            fill={(this.props.isConcierge || this.state.isVideoChatMenuActive)
+                            fill={(this.props.openInboxCall || this.state.isVideoChatMenuActive)
                                 ? themeColors.heading
                                 : themeColors.icon}
                         />

src/languages/en.js

@@ -613,5 +613,6 @@ export default {
         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!',
         growlMessageNoPersonalPolicy: 'I wasn’t able to find a personal policy to associate this Guides call with, please check your connection and try again.',
+        needHelp: 'Need help?',
     },
 };

src/languages/es.js

@@ -615,5 +615,6 @@ export default {
         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',
         growlMessageNoPersonalPolicy: 'No he podido encontrar una póliza personal con la que asociar esta llamada a las Guías, compruebe su conexión e inténtelo de nuevo.',
+        needHelp: '¿Necesitas ayuda?',
     },
 };

src/libs/actions/Inbox.js

@@ -1,14 +1,14 @@
 import {Inbox_CallUser} from '../API';
 
-function requestConciergeDMCall(policyID, firstName, lastName, phoneNumber) {
+function requestInboxCall(taskID, policyID, firstName, lastName, phoneNumber) {
     return Inbox_CallUser({
         policyID,
         firstName,
         lastName,
         phoneNumber,
-        taskID: 'NewExpensifyConciergeDM',
+        taskID,
     });
 }
 
 // eslint-disable-next-line import/prefer-default-export
-export {requestConciergeDMCall};
+export {requestInboxCall};

src/pages/RequestCallPage.js

@@ -16,7 +16,7 @@ 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 {requestInboxCall} from '../libs/actions/Inbox';
 import {fetchOrCreateChatReport} from '../libs/actions/Report';
 import personalDetailsPropType from './personalDetailsPropType';
 import ExpensiTextInput from '../components/ExpensiTextInput';
@@ -52,6 +52,12 @@ const propTypes = {
         /** The type of the policy */
         type: PropTypes.string,
     }).isRequired,
+
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            taskID: PropTypes.string,
+        }),
+    }).isRequired,
 };
 
 class RequestCallPage extends Component {
@@ -83,7 +89,7 @@ class RequestCallPage extends Component {
             Growl.error(this.props.translate('requestCallPage.growlMessageNoPersonalPolicy'), 3000);
             return;
         }
-        requestConciergeDMCall(personalPolicy.id, this.state.firstName, this.state.lastName, this.state.phoneNumber)
+        requestInboxCall(this.props.route.params.taskID, personalPolicy.id, this.state.firstName, this.state.lastName, this.state.phoneNumber)
             .then((result) => {
                 this.setState({isLoading: false});
                 if (result.jsonCode === 200) {

src/pages/home/HeaderView.js

@@ -158,7 +158,7 @@ const HeaderView = (props) => {
                             {props.report.hasOutstandingIOU && (
                                 <IOUBadge iouReportID={props.report.iouReportID} />
                             )}
-                            <VideoChatButtonAndMenu isConcierge={isConcierge} />
+                            <VideoChatButtonAndMenu openInboxCall={isConcierge} taskID="ExpensifyCashConciergeDM" />
                             <Pressable
                                 onPress={() => togglePinnedState(props.report)}
                                 style={[styles.touchableButtonImage, styles.mr0]}

src/pages/workspace/WorkspaceCardPage.js

@@ -110,6 +110,8 @@ const WorkspaceCardPage = ({
                 onCloseButtonPress={() => Navigation.dismissModal()}
                 onBackButtonPress={() => Navigation.goBack()}
                 shouldShowBackButton={isSmallScreenWidth}
+                shouldShowInboxCallButton
+                inboxCallTaskID="WorkspaceCompanyCards"
             />
             <ScrollView style={[styles.settingsPageBackground]} bounces={false}>
                 <View style={styles.pageWrapper}>