Merge pull request #6903 from Expensify/puneet-workspace-assistance

Add get assistance page
Expensify · Jan 11, 2022 · 0d1ec3d · 0d1ec3d
2 parents 695dca4 + b5b1dcc
commit 0d1ec3d
Show file tree

Hide file tree

Showing 50 changed files with 314 additions and 170 deletions.
diff --git a/assets/images/request-call.svg → ...-illustrations/concierge--exclamation.svg b/assets/images/request-call.svg → ...-illustrations/concierge--exclamation.svg
diff --git a/assets/images/question-mark-circle.svg b/assets/images/question-mark-circle.svg
diff --git a/src/CONST.js b/src/CONST.js
@@ -547,6 +547,18 @@ const CONST = {
         PREFIX: '__predefined_',
         SELF_SELECT: '__predefined_selfSelect',
     },
+    GUIDES_CALL_TASK_IDS: {
+        CONCIERGE_DM: 'NewExpensifyConciergeDM',
+        WORKSPACE_INITIAL: 'WorkspaceHome',
+        WORKSPACE_SETTINGS: 'WorkspaceGeneralSettings',
+        WORKSPACE_CARD: 'WorkspaceCorporateCards',
+        WORKSPACE_REIMBURSE: 'WorkspaceReimburseReceipts',
+        WORKSPACE_BILLS: 'WorkspacePayBills',
+        WORKSPACE_INVOICES: 'WorkspaceSendInvoices',
+        WORKSPACE_TRAVEL: 'WorkspaceBookTravel',
+        WORKSPACE_MEMBERS: 'WorkspaceManageMembers',
+        WORKSPACE_BANK_ACCOUNT: 'WorkspaceBankAccount',
+    },
     get EXPENSIFY_EMAILS() {
         return [
             this.EMAIL.CONCIERGE,

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
@@ -175,4 +175,6 @@ export default {
     // Stores information about active wallet transfer amount, selectedAccountID, status, etc
     WALLET_TRANSFER: 'walletTransfer',
 
+    // The policyID of the last workspace whose settings were accessed by the user
+    LAST_ACCESSED_WORKSPACE_POLICY_ID: 'lastAccessedWorkspacePolicyID',
 };
diff --git a/src/ROUTES.js b/src/ROUTES.js
@@ -80,6 +80,8 @@ export default {
     getReportDetailsRoute: reportID => `r/${reportID}/details`,
     LOGIN_WITH_SHORT_LIVED_TOKEN: 'transition',
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',
+    GET_ASSISTANCE: 'get-assistance/:taskID',
+    getGetAssistanceRoute: taskID => `get-assistance/${taskID}`,
 
     // This is a special validation URL that will take the user to /workspace/new after validation. This is used
     // when linking users from e.com in order to share a session in this app.

diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
@@ -5,11 +5,12 @@ import {
 } from 'react-native';
 import styles from '../styles/styles';
 import Header from './Header';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Tooltip from './Tooltip';
-import InboxCallButton from './InboxCallButton';
 import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu';
 
 const propTypes = {
@@ -40,8 +41,8 @@ const propTypes = {
     /** Whether we should show a download button */
     shouldShowDownloadButton: PropTypes.bool,
 
-    /** Whether we should show a inbox call button */
-    shouldShowInboxCallButton: PropTypes.bool,
+    /** Whether we should show a get assistance (question mark) button */
+    shouldShowGetAssistanceButton: PropTypes.bool,
 
     /** Whether we should show a more options (threedots) button */
     shouldShowThreeDotsButton: PropTypes.bool,
@@ -63,8 +64,8 @@ const propTypes = {
     /** Whether we should show the step counter */
     shouldShowStepCounter: PropTypes.bool,
 
-    /** The task ID to associate with the call button, if we show it */
-    inboxCallTaskID: PropTypes.string,
+    /** The guides call taskID to associate with the get assistance button, if we show it */
+    guidesCallTaskID: PropTypes.string,
 
     /** Data to display a step counter in the header */
     stepCounter: PropTypes.shape({
@@ -85,11 +86,11 @@ const defaultProps = {
     shouldShowBackButton: false,
     shouldShowBorderBottom: false,
     shouldShowDownloadButton: false,
-    shouldShowInboxCallButton: false,
+    shouldShowGetAssistanceButton: false,
     shouldShowThreeDotsButton: false,
     shouldShowCloseButton: true,
     shouldShowStepCounter: true,
-    inboxCallTaskID: '',
+    guidesCallTaskID: '',
     stepCounter: null,
     threeDotsMenuItems: [],
     threeDotsAnchorPosition: {
@@ -138,7 +139,19 @@ const HeaderWithCloseButton = props => (
                     )
                 }
 
-                {props.shouldShowInboxCallButton && <InboxCallButton taskID={props.inboxCallTaskID} />}
+                {props.shouldShowGetAssistanceButton
+                && (
+                <Tooltip text={props.translate('getAssistancePage.questionMarkButtonTooltip')}>
+                    <TouchableOpacity
+                        onPress={() => Navigation.navigate(ROUTES.getGetAssistanceRoute(props.guidesCallTaskID))}
+                        style={[styles.touchableButtonImage, styles.mr0]}
+                        accessibilityRole="button"
+                        accessibilityLabel={props.translate('getAssistancePage.questionMarkButtonTooltip')}
+                    >
+                        <Icon src={Expensicons.QuestionMark} />
+                    </TouchableOpacity>
+                </Tooltip>
+                )}
 
                 {props.shouldShowThreeDotsButton && (
                     <ThreeDotsMenu

diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
@@ -53,6 +53,7 @@ import PinCircle from '../../../assets/images/pin-circle.svg';
 import Plus from '../../../assets/images/plus.svg';
 import Printer from '../../../assets/images/printer.svg';
 import Profile from '../../../assets/images/profile.svg';
+import QuestionMark from '../../../assets/images/question-mark-circle.svg';
 import Receipt from '../../../assets/images/receipt.svg';
 import ReceiptSearch from '../../../assets/images/receipt-search.svg';
 import RotateLeft from '../../../assets/images/rotate-left.svg';
@@ -125,6 +126,7 @@ export {
     Plus,
     Printer,
     Profile,
+    QuestionMark,
     Receipt,
     ReceiptSearch,
     RotateLeft,

diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
@@ -2,6 +2,7 @@ import BankArrowPink from '../../../assets/images/product-illustrations/bank-arr
 import BankMouseGreen from '../../../assets/images/product-illustrations/bank-mouse--green.svg';
 import BankUserGreen from '../../../assets/images/product-illustrations/bank-user--green.svg';
 import ConciergeBlue from '../../../assets/images/product-illustrations/concierge--blue.svg';
+import ConciergeExclamation from '../../../assets/images/product-illustrations/concierge--exclamation.svg';
 import CreditCardsBlue from '../../../assets/images/product-illustrations/credit-cards--blue.svg';
 import InvoiceOrange from '../../../assets/images/product-illustrations/invoice--orange.svg';
 import JewelBoxBlue from '../../../assets/images/product-illustrations/jewel-box--blue.svg';
@@ -19,6 +20,7 @@ export {
     BankMouseGreen,
     BankUserGreen,
     ConciergeBlue,
+    ConciergeExclamation,
     CreditCardsBlue,
     InvoiceOrange,
     JewelBoxBlue,

diff --git a/src/components/InboxCallButton.js b/src/components/InboxCallButton.js
diff --git a/src/pages/workspace/WorkspaceSection.js → src/components/Section.js b/src/pages/workspace/WorkspaceSection.js → src/components/Section.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../../components/Text';
-import styles from '../../styles/styles';
-import MenuItemList from '../../components/MenuItemList';
-import Icon from '../../components/Icon';
-import menuItemPropTypes from '../../components/menuItemPropTypes';
+import Text from './Text';
+import styles from '../styles/styles';
+import MenuItemList from './MenuItemList';
+import Icon from './Icon';
+import menuItemPropTypes from './menuItemPropTypes';
 
 const propTypes = {
     /** An array of props that are pass to individual MenuItem components */
@@ -31,7 +31,7 @@ const defaultProps = {
     IconComponent: null,
 };
 
-const WorkspaceSection = (props) => {
+const Section = (props) => {
     const IconComponent = props.IconComponent;
     return (
         <>
@@ -56,8 +56,8 @@ const WorkspaceSection = (props) => {
     );
 };
 
-WorkspaceSection.displayName = 'WorkspaceSection';
-WorkspaceSection.propTypes = propTypes;
-WorkspaceSection.defaultProps = defaultProps;
+Section.displayName = 'Section';
+Section.propTypes = propTypes;
+Section.defaultProps = defaultProps;
 
-export default WorkspaceSection;
+export default Section;
diff --git a/src/components/VideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu.js
@@ -109,7 +109,7 @@ class VideoChatButtonAndMenu extends Component {
                             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.getRequestCallRoute('NewExpensifyConciergeDM'));
+                                    Navigation.navigate(ROUTES.getRequestCallRoute(CONST.GUIDES_CALL_TASK_IDS.CONCIERGE_DM));
                                     return;
                                 }
                                 this.toggleVideoChatMenu();

diff --git a/src/languages/en.js b/src/languages/en.js
@@ -817,14 +817,21 @@ export default {
             clearProgress: 'Starting over will clear the progress you have made so far.',
         },
     },
+    getAssistancePage: {
+        title: 'Get assistance',
+        subtitle: 'Have questions, or need help?',
+        description: 'We have answers! Choose from the support options below:',
+        chatWithConcierge: 'Chat with Concierge',
+        requestSetupCall: 'Request a setup call',
+        questionMarkButtonTooltip: 'Get assistance from our team',
+    },
     requestCallPage: {
         title: 'Request a call',
         subtitle: 'Have questions, or need help?',
         description: 'Our team of guides are on hand to help you each step of the way. Type in your name and phone number, and we’ll give you a call back.',
         callMe: 'Call me',
         growlMessageOnSave: 'Call requested.',
         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.',
         callButton: 'Call',
         callButtonTooltip: 'Get live help from our team',
     },

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -819,14 +819,21 @@ export default {
             clearProgress: 'Empezar de nuevo descartará lo completado hasta ahora.',
         },
     },
+    getAssistancePage: {
+        title: 'Obtener ayuda',
+        subtitle: '¿Tienes preguntas o necesitas ayuda?',
+        description: '¡Tenemos las respuestas! Elige una de las siguientes opciones:',
+        chatWithConcierge: 'Chatear con Concierge',
+        requestSetupCall: 'Llámame por teléfono',
+        questionMarkButtonTooltip: 'Obtén ayuda de nuestro equipo',
+    },
     requestCallPage: {
         title: 'Llámame por teléfono',
         subtitle: '¿Tienes preguntas o necesitas ayuda?',
         description: '¿Necesitas ayuda configurando tu cuenta? Nuestro equipo de guías puede ayudarte. Escribe tu nombre y número de teléfono y te llamaremos.',
         callMe: 'Llámame',
         growlMessageOnSave: 'Llamada solicitada.',
         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.',
         callButton: 'Llamar',
         callButtonTooltip: 'Recibe ayuda telefónica de nuestro equipo',
     },

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -6,6 +6,7 @@ import NewChatPage from '../../../pages/NewChatPage';
 import NewGroupPage from '../../../pages/NewGroupPage';
 import SearchPage from '../../../pages/SearchPage';
 import DetailsPage from '../../../pages/DetailsPage';
+import GetAssistancePage from '../../../pages/GetAssistancePage';
 import IOURequestPage from '../../../pages/iou/IOURequestPage';
 import IOUBillPage from '../../../pages/iou/IOUBillPage';
 import IOUSendPage from '../../../pages/iou/IOUSendPage';
@@ -276,6 +277,10 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         name: 'ReimbursementAccount',
         initialParams: {stepToOpen: CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT},
     },
+    {
+        Component: GetAssistancePage,
+        name: 'GetAssistance',
+    },
 ]);
 
 const EnablePaymentsStackNavigator = createModalStackNavigator([{

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
@@ -129,6 +129,9 @@ export default {
                         path: ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN,
                         exact: true,
                     },
+                    GetAssistance: {
+                        path: ROUTES.GET_ASSISTANCE,
+                    },
                 },
             },
             Report_Details: {

diff --git a/src/libs/actions/Inbox.js b/src/libs/actions/Inbox.js
@@ -1,10 +1,9 @@
 import Onyx from 'react-native-onyx';
-import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as API from '../API';
 import Growl from '../Growl';
 import * as Localize from '../Localize';
-import * as Report from './Report';
+import Navigation from '../Navigation/Navigation';
 
 /**
  * @param {Object} params
@@ -13,10 +12,9 @@ import * as Report from './Report';
  * @param {String} firstName
  * @param {String} lastName
  * @param {String} phoneNumber
- * @param {String} email
  */
 function requestInboxCall({
-    taskID, policyID, firstName, lastName, phoneNumber, email,
+    taskID, policyID, firstName, lastName, phoneNumber,
 }) {
     Onyx.merge(ONYXKEYS.REQUEST_CALL_FORM, {loading: true});
     API.Inbox_CallUser({
@@ -29,7 +27,7 @@ function requestInboxCall({
         .then((result) => {
             if (result.jsonCode === 200) {
                 Growl.success(Localize.translateLocal('requestCallPage.growlMessageOnSave'));
-                Report.fetchOrCreateChatReport([email, CONST.EMAIL.CONCIERGE], true);
+                Navigation.goBack();
                 return;
             }
 

diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
@@ -403,6 +403,14 @@ function hideWorkspaceAlertMessage(policyID) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {alertMessage: ''});
 }
 
+/**
+ * Stores in Onyx the policy ID of the last workspace that was accessed by the user
+ * @param {String} policyID
+ */
+function updateLastAccessedWorkspace(policyID) {
+    Onyx.set(ONYXKEYS.LAST_ACCESSED_WORKSPACE_POLICY_ID, policyID);
+}
+
 export {
     getPolicyList,
     loadFullPolicy,
@@ -417,4 +425,5 @@ export {
     deletePolicy,
     createAndNavigate,
     createAndGetPolicyList,
+    updateLastAccessedWorkspace,
 };