Add Rest of UI for Workspace Chats

src/components/ReportWelcomeText.js

@@ -8,7 +8,9 @@ import styles from '../styles/styles';
 import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
+import * as ReportUtils from '../libs/reportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
+import * as Localize from '../libs/Localize';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
 
@@ -26,24 +28,31 @@ const personalDetailsPropTypes = PropTypes.shape({
 });
 
 const propTypes = {
-    /** Whether it is a default Chat Room */
-    shouldIncludeParticipants: PropTypes.bool,
-
     /** The report currently being looked at */
     report: PropTypes.oneOfType([PropTypes.object]),
 
+    /* Onyx Props */
+
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropTypes).isRequired,
 
+    /** The policies which the user has access to and which the report could be tied to */
+    policies: PropTypes.shape({
+        /** The policy name */
+        name: PropTypes.string,
+    }).isRequired,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     report: {},
-    shouldIncludeParticipants: true,
 };
 
 const ReportWelcomeText = (props) => {
+    const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
+    const isChatRoom = ReportUtils.isChatRoom(props.report);
+    const isDefault = !(isChatRoom || isPolicyExpenseChat);
     const participants = lodashGet(props.report, 'participants', []);
     const isMultipleParticipant = participants.length > 1;
     const displayNamesWithTooltips = _.map(
@@ -66,46 +75,65 @@ const ReportWelcomeText = (props) => {
             };
         },
     );
-    const chatUsers = props.shouldIncludeParticipants ? displayNamesWithTooltips : [{displayName: props.report.reportName}];
     const isResctrictedRoom = lodashGet(props, 'report.visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED;
 
     return (
         <Text style={[styles.mt3, styles.mw100, styles.textAlignCenter]}>
-            {!props.shouldIncludeParticipants
-                ? (
-                    <>
-                        <Text>
-                            {isResctrictedRoom
-                                ? `${props.translate('reportActionsView.beginningOfChatHistoryRestrictedPartOne')}`
-                                : `${props.translate('reportActionsView.beginningOfChatHistoryPrivatePartOne')}`}
-                        </Text>
-                        <Text style={[styles.textStrong]}>
-                            {lodashGet(chatUsers, '[0].displayName', '')}
-                        </Text>
-                        <Text>
-                            {isResctrictedRoom
-                                ? `${props.translate('reportActionsView.beginningOfChatHistoryRestrictedPartTwo')}`
-                                : `${props.translate('reportActionsView.beginningOfChatHistoryPrivatePartTwo')}`}
-                        </Text>
-                    </>
-                ) : (
-                    <>
-                        <Text>
-                            {props.translate('reportActionsView.beginningOfChatHistory')}
-                        </Text>
-                        {_.map(chatUsers, ({displayName, pronouns}, index) => (
-                            <Text key={displayName}>
-                                <Text style={[styles.textStrong]}>
-                                    {displayName}
-                                </Text>
-                                {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}
-                                {(index === chatUsers.length - 1) && <Text>.</Text>}
-                                {(index === chatUsers.length - 2) && <Text>{` ${props.translate('common.and')} `}</Text>}
-                                {(index < chatUsers.length - 2) && <Text>, </Text>}
+            {isPolicyExpenseChat && (
+                <>
+                    <Text>
+                        {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartOne')}
+                    </Text>
+                    <Text style={[styles.textStrong]}>
+                        {/* Use the policyExpenseChat owner's first name or their email if it's undefined or an empty string */}
+                        {lodashGet(props.personalDetails, [props.report.ownerEmail, 'firstName']) || props.report.ownerEmail}
+                    </Text>
+                    <Text>
+                        {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartTwo')}
+                    </Text>
+                    <Text style={[styles.textStrong]}>
+                        {lodashGet(props.policies, [`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`, 'name'], Localize.translateLocal('workspace.common.unavailable'))}
+                    </Text>
+                    <Text>
+                        {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartThree')}
+                    </Text>
+                </>
+            )}
+            {isChatRoom && (
+                <>
+                    <Text>
+                        {isResctrictedRoom
+                            ? `${props.translate('reportActionsView.beginningOfChatHistoryRestrictedPartOne')}`
+                            : `${props.translate('reportActionsView.beginningOfChatHistoryPrivatePartOne')}`}
+                    </Text>
+                    <Text style={[styles.textStrong]}>
+                        {props.report.reportName}
+                    </Text>
+                    <Text>
+                        {isResctrictedRoom
+                            ? `${props.translate('reportActionsView.beginningOfChatHistoryRestrictedPartTwo')}`
+                            : `${props.translate('reportActionsView.beginningOfChatHistoryPrivatePartTwo')}`}
+                    </Text>
+                </>
+            )}
+            {isDefault && (
+                <>
+                    <Text>
+                        {props.translate('reportActionsView.beginningOfChatHistory')}
+                    </Text>
+                    {_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => (
+                        <Text key={displayName}>
+                            <Text style={[styles.textStrong]}>
+                                {displayName}
                             </Text>
-                        ))}
-                    </>
-                )}
+                            {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}
+                            {(index === displayNamesWithTooltips.length - 1) && <Text>.</Text>}
+                            {(index === displayNamesWithTooltips.length - 2) && <Text>{` ${props.translate('common.and')} `}</Text>}
+                            {(index < displayNamesWithTooltips.length - 2) && <Text>, </Text>}
+                        </Text>
+                    ))}
+                </>
+            )}
         </Text>
     );
 };
@@ -120,5 +148,8 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS,
         },
+        policies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
     }),
 )(ReportWelcomeText);

src/languages/en.js

@@ -175,6 +175,9 @@ export default {
         beginningOfChatHistoryRestrictedPartOne: 'This is the beginning of ',
         beginningOfChatHistoryPrivatePartTwo: ' room, invite others by @mentioning them.',
         beginningOfChatHistoryRestrictedPartTwo: ', invite others by @mentioning them.',
+        beginningOfChatHistoryPolicyExpenseChatPartOne: 'Collaboration between ',
+        beginningOfChatHistoryPolicyExpenseChatPartTwo: ' and ',
+        beginningOfChatHistoryPolicyExpenseChatPartThree: ' starts here! 🎉 This is the place to chat, request money and settle up.',
     },
     reportActionsViewMarkerBadge: {
         newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,
@@ -739,6 +742,7 @@ export default {
             deleteConfirmation: 'Are you sure you want to delete this workspace?',
             growlMessageOnDelete: 'Workspace deleted',
             growlMessageOnDeleteError: 'This workspace cannot be deleted right now because reports are actively being processed',
+            unavailable: 'Unavailable workspace',
         },
         new: {
             newWorkspace: 'New workspace',

src/languages/es.js

@@ -175,6 +175,9 @@ export default {
         beginningOfChatHistoryRestrictedPartOne: 'Este es el principio de ',
         beginningOfChatHistoryPrivatePartTwo: ', invita a otros @mencionándolos.',
         beginningOfChatHistoryRestrictedPartTwo: ', invita a otros @mencionándolos.',
+        beginningOfChatHistoryPolicyExpenseChatPartOne: '¡La colaboración entre ',
+        beginningOfChatHistoryPolicyExpenseChatPartTwo: ' y ',
+        beginningOfChatHistoryPolicyExpenseChatPartThree: ' empieza aquí! :tada: Este es el lugar donde chatear, pedir dinero y pagar.',
     },
     reportActionsViewMarkerBadge: {
         newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`,
@@ -499,7 +502,7 @@ export default {
         connectManually: 'Conectar manualmente',
         desktopConnection: 'Para conectarse con Chase, Wells Fargo, Capital One o Bank of America, haga clic aquí para completar este proceso en un navegador.',
         yourDataIsSecure: 'Tus datos están seguros',
-        toGetStarted: 'Añade una cuenta bancaria y emite tarjetas corporativas, reembolsa gastos y cobra y paga facturas, todo desde un mismo sitio.',
+        toGetStarted: 'Añade una cuenta bancaria y emite tarjetas corporativas, reembolsa gastos y cobra y paga facturas, todo desde un mismo lugar.',
         plaidBodyCopy: 'Ofrezca a sus empleados una forma más sencilla de pagar - y recuperar - los gastos de la empresa.',
         checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque de la cuenta bancaria.',
         validateAccountError: 'Para terminar de configurar tu cuenta bancaria, debes validar tu cuenta de Expensify. Por favor revisa tu correo electrónico para validar tu cuenta y regresa aquí para continuar.',
@@ -741,6 +744,7 @@ export default {
             growlMessageOnDelete: 'Espacio de trabajo eliminado',
             deleteConfirmation: '¿Estás seguro de que quieres eliminar este espacio de trabajo?',
             growlMessageOnDeleteError: 'No se puede eliminar el espacio de trabajo porque tiene informes que están siendo procesados',
+            unavailable: 'Espacio de trabajo no disponible',
         },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',

src/libs/OptionsListUtils.js

@@ -205,18 +205,6 @@ function hasReportDraftComment(report) {
         && lodashGet(reportsWithDraft, `${ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT}${report.reportID}`, false);
 }
 
-/**
- * @param {Object} report
- * @returns {Array<String>}
- */
-function getParticipants(report) {
-    const participants = [...lodashGet(report, ['participants'], [])];
-    if (ReportUtils.isPolicyExpenseChat(report) && !_.contains(participants, report.ownerEmail)) {
-        participants.push(report.ownerEmail);
-    }
-    return participants;
-}
-
 /**
  * Get the Avatar urls or return the icon according to the chat type
  *
@@ -273,7 +261,7 @@ function createOption(personalDetailList, report, {
         : '';
     lastMessageText += report ? lastMessageTextFromReport : '';
 
-    const tooltipText = ReportUtils.getReportParticipantsTitle(getParticipants(report));
+    const tooltipText = ReportUtils.getReportParticipantsTitle(lodashGet(report, ['participants'], []));
     const subtitle = ReportUtils.getChatRoomSubtitle(report, policies);
     let text;
     let alternateText;
@@ -433,7 +421,7 @@ function getOptions(reports, personalDetails, activeReportID, {
         const isChatRoom = ReportUtils.isChatRoom(report);
         const isDefaultRoom = ReportUtils.isDefaultRoom(report);
         const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
-        const logins = getParticipants(report);
+        const logins = lodashGet(report, ['participants'], []);
 
         // Report data can sometimes be incomplete. If we have no logins or reportID then we will skip this entry.
         const shouldFilterNoParticipants = _.isEmpty(logins) && !isChatRoom && !isDefaultRoom && !isPolicyExpenseChat;

src/libs/actions/Report.js

@@ -121,9 +121,19 @@ function getUnreadActionCount(report) {
  * @param {Object} report
  * @return {String[]}
  */
-function getParticipantEmailsFromReport({sharedReportList, reportNameValuePairs}) {
+function getParticipantEmailsFromReport({sharedReportList, reportNameValuePairs, ownerEmail}) {
     const emailArray = _.map(sharedReportList, participant => participant.email);
-    return (ReportUtils.isChatRoom(reportNameValuePairs) || ReportUtils.isPolicyExpenseChat(reportNameValuePairs)) ? emailArray : _.without(emailArray, currentUserEmail);
+    if (ReportUtils.isChatRoom(reportNameValuePairs)) {
+        return emailArray;
+    }
+    if (ReportUtils.isPolicyExpenseChat(reportNameValuePairs)) {
+        // The owner of the policyExpenseChat isn't in the sharedReportsList so they need to be explicitly included.
+        return [ownerEmail, ...emailArray];
+    }
+
+    // The current user is excluded from the participants array in DMs/Group DMs because their participation is implied
+    // by the chat being shared to them. This also prevents the user's own avatar from being a part of the chat avatar.
+    return _.without(emailArray, currentUserEmail);
 }
 
 /**

src/libs/reportUtils.js

@@ -4,6 +4,7 @@ import lodashGet from 'lodash/get';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
+import * as Localize from './Localize';
 
 let sessionEmail;
 Onyx.connect({
@@ -170,10 +171,13 @@ function getChatRoomSubtitle(report, policiesMap) {
     if (isArchivedRoom(report)) {
         return report.oldPolicyName;
     }
+    if (isPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat) {
+        return Localize.translateLocal('workspace.common.workspace');
+    }
     return lodashGet(
         policiesMap,
         [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'name'],
-        'Unknown Policy',
+        Localize.translateLocal('workspace.common.unavailable'),
     );
 }
 

src/pages/ReportDetailsPage.js

@@ -80,35 +80,31 @@ class ReportDetailsPage extends Component {
             action: () => { Navigation.navigate(ROUTES.getReportParticipantsRoute(props.report.reportID)); },
         });
 
-        // Chat rooms will allow you to more things than typical chats so they have extra options
-        if (!ReportUtils.isChatRoom(this.props.report)) {
-            return;
+        if (ReportUtils.isPolicyExpenseChat(this.props.report) || ReportUtils.isChatRoom(this.props.report)) {
+            this.menuItems.push({
+                translationKey: 'common.settings',
+                icon: Expensicons.Gear,
+                action: () => { Navigation.navigate(ROUTES.getReportSettingsRoute(props.report.reportID)); },
+            });
         }
 
-        this.menuItems.push({
-            translationKey: 'common.settings',
-            icon: Expensicons.Gear,
-            action: () => { Navigation.navigate(ROUTES.getReportSettingsRoute(props.report.reportID)); },
-        });
-
-        if (ReportUtils.isDefaultRoom(this.props.report)) {
-            return;
+        if (ReportUtils.isUserCreatedPolicyRoom(this.props.report)) {
+            this.menuItems.push({
+                translationKey: 'common.invite',
+                icon: Expensicons.Plus,
+                action: () => { /* Placeholder for when inviting other users is built in */ },
+            },
+            {
+                translationKey: 'common.leaveRoom',
+                icon: Expensicons.Exit,
+                action: () => { /* Placeholder for when leaving rooms is built in */ },
+            });
         }
-
-        this.menuItems.push({
-            translationKey: 'common.invite',
-            icon: Expensicons.Plus,
-            action: () => { /* Placeholder for when inviting other users is built in */ },
-        },
-        {
-            translationKey: 'common.leaveRoom',
-            icon: Expensicons.Exit,
-            action: () => { /* Placeholder for when leaving rooms is built in */ },
-        });
     }
 
     render() {
         const isChatRoom = ReportUtils.isChatRoom(this.props.report);
+        const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(this.props.report);
         const chatRoomSubtitle = ReportUtils.getChatRoomSubtitle(this.props.report, this.props.policies);
         const participants = lodashGet(this.props.report, 'participants', []);
         const isMultipleParticipant = participants.length > 1;
@@ -151,7 +147,7 @@ class ReportDetailsPage extends Component {
                                         tooltipEnabled
                                         numberOfLines={1}
                                         textStyles={[styles.headerText, styles.mb2, styles.textAlignCenter]}
-                                        shouldUseFullTitle={isChatRoom}
+                                        shouldUseFullTitle={isChatRoom || isPolicyExpenseChat}
                                     />
                                 </View>
                                 <Text

src/pages/ReportParticipantsPage.js

@@ -80,10 +80,10 @@ const ReportParticipantsPage = (props) => {
     return (
         <ScreenWrapper>
             <HeaderWithCloseButton
-                title={props.translate(ReportUtils.isChatRoom(props.report) ? 'common.members' : 'common.details')}
+                title={props.translate((ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)) ? 'common.members' : 'common.details')}
                 onCloseButtonPress={Navigation.dismissModal}
                 onBackButtonPress={Navigation.goBack}
-                shouldShowBackButton={ReportUtils.isChatRoom(props.report)}
+                shouldShowBackButton={ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)}
             />
             <View
                 pointerEvents="box-none"