Add modal for inviting users to a workspace

src/ROUTES.js

@@ -47,6 +47,8 @@ export default {
     VALIDATE_LOGIN: 'v',
     VALIDATE_LOGIN_WITH_VALIDATE_CODE: 'v/:accountID/:validateCode',
     ENABLE_PAYMENTS: 'enable-payments',
+    WORKSPACE_INVITE: 'workspace/:policyID/invite',
+    getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
 
     /**
      * @param {String} route

src/languages/en.js

@@ -32,6 +32,7 @@ export default {
         recents: 'Recents',
         close: 'Close',
         settings: 'Settings',
+        invite: 'Invite',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
@@ -318,4 +319,10 @@ export default {
     session: {
         offlineMessage: 'Looks like you\'re not connected to internet. Can you check your connection and try again?',
     },
+    workspaceInvitePage: {
+        invitePeople: 'Invite People',
+        invitePeoplePrompt: 'Invite a colleague to your workspace.',
+        enterEmailOrPhone: 'Email or Phone',
+        welcomeNote: ({workspaceName}) => `You have been invited to the ${workspaceName} Workspace! Download the Expensify mobile App to start tracking your expenses.`,
+    },
 };

src/languages/es.js

@@ -30,6 +30,7 @@ export default {
         contacts: 'Contactos',
         recents: 'Recientes',
         settings: 'Configuración',
+        invite: 'Invitar',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
@@ -275,4 +276,10 @@ export default {
     session: {
         offlineMessage: 'Parece que no estás conectado a internet. Comprueba tu conexión e inténtalo de nuevo.',
     },
+    workspaceInvitePage: {
+        invitePeople: 'Invite People',
+        invitePeoplePrompt: 'Invite a colleague to your workspace.',
+        enterEmailOrPhone: 'Email or Phone',
+        welcomeNote: ({workspaceName}) => `You have been invited to the ${workspaceName} Workspace! Download the Expensify mobile App to start tracking your expenses.`,
+    },
 };

src/libs/API.js

@@ -406,6 +406,17 @@ function GetIOUReport(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @returns {Promise}
+ */
+function GetPolicyList() {
+    const commandName = 'Get';
+    const parameters = {
+        returnValueList: 'policyList',
+    };
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @returns {Promise}
  */
@@ -783,6 +794,21 @@ function BankAccount_Get(parameters) {
     return Network.post(commandName, parameters, CONST.NETWORK.METHOD.POST, true);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {Object[]} parameters.employees
+ * @param {String} parameters.welcomeNote
+ * @param {String} parameters.policyID
+ * @returns {Promise}
+ */
+function Policy_Employees_Merge(parameters) {
+    const commandName = 'Policy_Employees_Merge';
+    requireParameters(['employees', 'welcomeNote', 'policyID'], parameters, commandName);
+
+    // Always include returnPersonalDetails to ensure we get the employee's personal details in the response
+    return Network.post(commandName, {...parameters, returnPersonalDetails: true});
+}
+
 /**
  * @param {Object} parameters
  * @param {String} parameters.accountNumber
@@ -857,6 +883,7 @@ export {
     Get,
     GetAccountStatus,
     GetIOUReport,
+    GetPolicyList,
     GetPolicySummaryList,
     GetRequestCountryCode,
     Graphite_Timer,
@@ -866,6 +893,7 @@ export {
     PersonalDetails_GetForEmails,
     PersonalDetails_Update,
     Plaid_GetLinkToken,
+    Policy_Employees_Merge,
     Push_Authenticate,
     RejectTransaction,
     Report_AddComment,

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -27,7 +27,7 @@ import Navigation from '../Navigation';
 import * as User from '../../actions/User';
 import {setModalVisibility} from '../../actions/Modal';
 import NameValuePair from '../../actions/NameValuePair';
-import {getPolicySummaries} from '../../actions/Policy';
+import {getPolicySummaries, getPolicyList} from '../../actions/Policy';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
 import createCustomModalStackNavigator from './createCustomModalStackNavigator';
 
@@ -50,6 +50,7 @@ import {
     SettingsModalStackNavigator,
     EnablePaymentsStackNavigator,
     AddPersonalBankAccountModalStackNavigator,
+    WorkspaceInviteModalStackNavigator,
 } from './ModalStackNavigators';
 import SCREENS from '../../../SCREENS';
 import Timers from '../../Timers';
@@ -125,6 +126,7 @@ class AuthScreens extends React.Component {
         fetchCountryCodeByRequestIP();
         UnreadIndicatorUpdater.listenForReportChanges();
         getPolicySummaries();
+        getPolicyList();
 
         // Refresh the personal details, timezone and betas every 30 minutes
         // There is no pusher event that sends updated personal details data yet
@@ -275,6 +277,12 @@ class AuthScreens extends React.Component {
                     component={AddPersonalBankAccountModalStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="WorkspaceInvite"
+                    options={modalScreenOptions}
+                    component={WorkspaceInviteModalStackNavigator}
+                    listeners={modalScreenListeners}
+                />
             </RootStack.Navigator>
         );
     }

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -21,6 +21,7 @@ import IOUCurrencySelection from '../../../pages/iou/IOUCurrencySelection';
 import ReportParticipantsPage from '../../../pages/ReportParticipantsPage';
 import EnablePaymentsPage from '../../../pages/EnablePayments';
 import AddPersonalBankAccountPage from '../../../pages/AddPersonalBankAccountPage';
+import WorkspaceInvitePage from '../../../pages/WorkspaceInvitePage';
 
 const defaultSubRouteOptions = {
     cardStyle: styles.navigationScreenCardStyle,
@@ -152,6 +153,11 @@ const AddPersonalBankAccountModalStackNavigator = createModalStackNavigator([{
     name: 'AddPersonalBankAccount_Root',
 }]);
 
+const WorkspaceInviteModalStackNavigator = createModalStackNavigator([{
+    Component: WorkspaceInvitePage,
+    name: 'WorkspaceInvite_Root',
+}]);
+
 export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
@@ -164,4 +170,5 @@ export {
     SettingsModalStackNavigator,
     EnablePaymentsStackNavigator,
     AddPersonalBankAccountModalStackNavigator,
+    WorkspaceInviteModalStackNavigator,
 };

src/libs/Navigation/linkingConfig.js

@@ -114,6 +114,11 @@ export default {
                     EnablePayments_Root: ROUTES.ENABLE_PAYMENTS,
                 },
             },
+            WorkspaceInvite: {
+                screens: {
+                    WorkspaceInvite_Root: ROUTES.WORKSPACE_INVITE,
+                },
+            },
         },
     },
 };

src/libs/actions/Policy.js

@@ -1,8 +1,18 @@
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
-import {GetPolicySummaryList} from '../API';
+import {GetPolicySummaryList, GetPolicyList, Policy_Employees_Merge} from '../API';
 import ONYXKEYS from '../../ONYXKEYS';
 
+const allPolicies = {};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY,
+    callback: (val, key) => {
+        if (val && key) {
+            allPolicies[key] = val;
+        }
+    },
+});
+
 /**
  * Takes a full policy summary that is returned from the policySummaryList and simplifies it so we are only storing
  * the pieces of data that we need to in Onyx
@@ -17,6 +27,27 @@ function getSimplifiedPolicyObject(fullPolicy) {
     };
 }
 
+/**
+ * Simplifies the policyList response into an object containing an array of emails
+ *
+ * @param {Object} fullPolicy
+ * @returns {Object}
+ */
+function getSimplifiedMemberList(fullPolicy) {
+    const employeeListEmails = _.chain(fullPolicy.value.employeeList)
+        .pluck('email')
+        .flatten()
+        .unique()
+        .value();
+
+    return {
+        employeeList: employeeListEmails,
+    };
+}
+
+/**
+ * Fetches the policySummaryList from the API and saves a simplified version in Onyx
+ */
 function getPolicySummaries() {
     GetPolicySummaryList()
         .then((data) => {
@@ -30,7 +61,74 @@ function getPolicySummaries() {
         });
 }
 
+/**
+ * Fetches the policyList from the API and saves a simplified version in Onyx
+ */
+function getPolicyList() {
+    GetPolicyList()
+        .then((data) => {
+            if (data.jsonCode === 200) {
+                const policyDataToStore = _.reduce(data.policyList, (memo, policy) => ({
+                    ...memo,
+                    [`${ONYXKEYS.COLLECTION.POLICY}${policy.id}`]: getSimplifiedMemberList(policy),
+                }), {});
+                Onyx.mergeCollection(ONYXKEYS.COLLECTION.POLICY, policyDataToStore);
+            }
+        });
+}
+
+/**
+ * Merges the passed in login into the specified policy
+ *
+ * @param {String} login
+ * @param {String} welcomeNote
+ * @param {String} policyID
+ */
+function invite(login, welcomeNote, policyID) {
+    // Optimistically add the user to the policy
+    const key = `${ONYXKEYS.COLLECTION.POLICY}${policyID}`;
+    const dataToStore = {};
+    dataToStore[key] = {
+        employeeList: allPolicies[key].employeeList.concat([login]),
+    };
+
+    Onyx.mergeCollection(ONYXKEYS.COLLECTION.POLICY, dataToStore)
+        .then(() => {
+            const policyDataWithoutLogin = {};
+            policyDataWithoutLogin[key] = {
+                employeeList: _.without(allPolicies[key].employeeList, login),
+            };
+            Onyx.mergeCollection(ONYXKEYS.COLLECTION.POLICY, policyDataWithoutLogin)
+                .then(() => {
+                   console.debug('done');
+                });
+        });
+
+    // Policy_Employees_Merge({
+    //     employees: JSON.stringify([{email: login}]),
+    //     welcomeNote,
+    //     policyID,
+    // })
+    //     .then((data) => {
+    //         // Save data.personalDetails
+    //         if (data.jsonCode !== 200) {
+    //             // TODO: need to match personalDetails to data in PersonalDetails.formatPersonalDetails
+    //             Onyx.merge(ONYXKEYS.PERSONAL_DETAILS, {[login]: data.personalDetails[login]});
+    //             return;
+    //         }
+    //
+    //         // If the operation failed, undo the optimistic addition
+    //         const policyDataWithoutLogin = {};
+    //         policyDataWithoutLogin[key] = {
+    //             employeeList: _.without(allPolicies[key].employeeList, login),
+    //         };
+    //         Onyx.mergeCollection(ONYXKEYS.COLLECTION.POLICY, policyDataWithoutLogin);
+    //     });
+}
+
 export {
     // eslint-disable-next-line import/prefer-default-export
     getPolicySummaries,
+    getPolicyList,
+    invite,
 };