Update "be the first person to comment" screen

src/CONST.js

@@ -184,6 +184,7 @@ const CONST = {
             DAILY: 'daily',
             ALWAYS: 'always',
         },
+        MAX_PREVIEW_AVATARS: 4,
     },
     MODAL: {
         MODAL_TYPE: {
@@ -428,6 +429,7 @@ const CONST = {
         LARGE: 'large',
         DEFAULT: 'default',
     },
+
     PHONE_MAX_LENGTH: 15,
     PHONE_MIN_LENGTH: 5,
     REGEX: {

src/components/EmptyStateAvatars.js

@@ -0,0 +1,72 @@
+import React, {memo} from 'react';
+import PropTypes from 'prop-types';
+import {Image, View} from 'react-native';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import Text from './Text';
+import CONST from '../CONST';
+import Avatar from './Avatar';
+
+const propTypes = {
+    /** Array of avatar URL */
+    avatarImageURLs: PropTypes.arrayOf(PropTypes.string),
+
+    /** Whether this avatar is for a custom/default room */
+    isDefaultChatRoom: PropTypes.bool,
+};
+
+const defaultProps = {
+    avatarImageURLs: [],
+    isDefaultChatRoom: false,
+};
+
+const EmptyStateAvatars = (props) => {
+    if (!props.avatarImageURLs.length) {
+        return null;
+    }
+
+    if (props.avatarImageURLs.length === 1 || props.isDefaultChatRoom) {
+        return (
+            <Avatar
+                source={props.avatarImageURLs[0]}
+                imageStyles={[styles.avatarLarge]}
+                isDefaultChatRoom={props.isDefaultChatRoom}
+            />
+        );
+    }
+
+    // avatarImageURLsToDisplay
+    const avatarImageURLsToDisplay = props.avatarImageURLs.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS);
+
+    return (
+        <View pointerEvents="none">
+            <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
+                {_.map(avatarImageURLsToDisplay, (val, index) => (
+                    <View key={val} style={[styles.justifyContentCenter, styles.alignItemsCenter]}>
+                        <Image source={{uri: val}} style={[styles.emptyStateAvatar]} />
+
+                        {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.avatarImageURLs.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
+                            <>
+                                <View
+                                    style={[
+                                        styles.emptyStateAvatar,
+                                        styles.screenBlur,
+                                    ]}
+                                />
+                                <Text style={styles.avatarInnerTextChat}>
+                                    {`+${props.avatarImageURLs.length - CONST.REPORT.MAX_PREVIEW_AVATARS}`}
+                                </Text>
+                            </>
+                        )}
+                    </View>
+                ))}
+            </View>
+        </View>
+    );
+};
+
+EmptyStateAvatars.defaultProps = defaultProps;
+EmptyStateAvatars.propTypes = propTypes;
+EmptyStateAvatars.displayName = 'EmptyStateAvatars';
+
+export default memo(EmptyStateAvatars);

src/components/ReportWelcomeText.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import Str from 'expensify-common/lib/str';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import Text from './Text';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
+import {getPersonalDetailsForLogins} from '../libs/OptionsListUtils';
+import ONYXKEYS from '../ONYXKEYS';
+
+
+const personalDetailsPropTypes = PropTypes.shape({
+    /** The login of the person (either email or phone number) */
+    login: PropTypes.string.isRequired,
+
+    /** The URL of the person's avatar (there should already be a default avatar if
+    the person doesn't have their own avatar uploaded yet) */
+    avatar: PropTypes.string.isRequired,
+
+    /** This is either the user's full name, or their login if full name is an empty string */
+    displayName: PropTypes.string.isRequired,
+});
+
+const propTypes = {
+    /** Whether it is a default Chat Room */
+    shouldIncludeParticipants: PropTypes.bool,
+
+    /** The report currently being looked at */
+    report: PropTypes.oneOfType([PropTypes.object]),
+
+    /** All of the personal details for everyone */
+    personalDetails: PropTypes.objectOf(personalDetailsPropTypes).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    report: {},
+    shouldIncludeParticipants: true,
+};
+
+const ReportWelcomeText = (props) => {
+    const participants = lodashGet(props.report, 'participants', []);
+    const isMultipleParticipant = participants.length > 1;
+    const displayNamesWithTooltips = _.map(
+        getPersonalDetailsForLogins(participants, props.personalDetails),
+        ({
+            displayName, firstName, login, pronouns,
+        }) => {
+            const longName = displayName || Str.removeSMSDomain(login);
+            const longNameLocalized = Str.isSMSLogin(longName) ? props.toLocalPhone(longName) : longName;
+            const shortName = firstName || longNameLocalized;
+            return {
+                displayName: isMultipleParticipant ? shortName : longNameLocalized,
+                tooltip: Str.removeSMSDomain(login),
+                pronouns,
+            };
+        },
+    );
+    const chatUsers = props.shouldIncludeParticipants ? displayNamesWithTooltips : [{displayName: props.report.reportName}];
+
+    return (
+        <Text style={[styles.mt3, styles.w70, styles.textAlignCenter]}>
+            <Text>
+                {!props.shouldIncludeParticipants
+                    ? `${props.translate('reportActionsView.beginningOfChatHistoryPrivatePartOne')}`
+                    : `${props.translate('reportActionsView.beginningOfChatHistory')} `}
+            </Text>
+            {!props.shouldIncludeParticipants && <Text style={[styles.textStrong]}>{` ${lodashGet(chatUsers, '[0].displayName', '')}`}</Text>}
+            {!props.shouldIncludeParticipants && <Text>{props.translate('reportActionsView.beginningOfChatHistoryPrivatePartTwo')}</Text>}
+            {props.shouldIncludeParticipants
+            && (
+                <>
+                    {_.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>}
+                        </Text>
+                    ))}
+                </>
+            )}
+        </Text>
+    );
+};
+
+ReportWelcomeText.defaultProps = defaultProps;
+ReportWelcomeText.propTypes = propTypes;
+ReportWelcomeText.displayName = 'ReportWelcomeText';
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS,
+        },
+    }),
+)(ReportWelcomeText);

src/languages/en.js

@@ -137,6 +137,7 @@ export default {
         sendAttachment: 'Send attachment',
         addAttachment: 'Add attachment',
         writeSomething: 'Write something...',
+        sayHello: 'Say hello!',
         blockedFromConcierge: 'Communication is barred',
         youAppearToBeOffline: 'You appear to be offline.',
         fileUploadFailed: 'Upload failed. File is not supported.',
@@ -156,7 +157,9 @@ export default {
         deleteConfirmation: 'Are you sure you want to delete this comment?',
     },
     reportActionsView: {
-        beFirstPersonToComment: 'Be the first person to comment',
+        beginningOfChatHistory: 'This is the beginning of your chat history with',
+        beginningOfChatHistoryPrivatePartOne: 'This is the beginning of the private',
+        beginningOfChatHistoryPrivatePartTwo: ' room, invite others by @mentioning them.',
     },
     reportActionsViewMarkerBadge: {
         newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,

src/languages/es.js

@@ -137,6 +137,7 @@ export default {
         sendAttachment: 'Enviar adjunto',
         addAttachment: 'Agregar archivo adjunto',
         writeSomething: 'Escribe algo...',
+        sayHello: 'Di hola!',
         blockedFromConcierge: 'Comunicación no permitida',
         youAppearToBeOffline: 'Parece que estás desconectado.',
         fileUploadFailed: 'Subida fallida. El archivo no es compatible.',
@@ -156,7 +157,9 @@ export default {
         deleteConfirmation: '¿Estás seguro de que quieres eliminar este comentario?',
     },
     reportActionsView: {
-        beFirstPersonToComment: 'Sé el primero en comentar',
+        beginningOfChatHistory: 'Aquí comienza tu historial de conversaciones con',
+        beginningOfChatHistoryPrivatePartOne: 'Este es el principio de la sala privada',
+        beginningOfChatHistoryPrivatePartTwo: ', invita a otros @mencionándolos.',
     },
     reportActionsViewMarkerBadge: {
         newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`,

src/pages/home/report/ReportActionCompose.js

@@ -282,6 +282,10 @@ class ReportActionCompose extends React.Component {
             return this.props.translate('reportActionCompose.blockedFromConcierge');
         }
 
+        if (_.size(this.props.reportActions) === 1) {
+            return this.props.translate('reportActionCompose.sayHello');
+        }
+
         return this.props.translate('reportActionCompose.writeSomething');
     }
 
@@ -614,7 +618,7 @@ class ReportActionCompose extends React.Component {
                                     )}
                                 </AttachmentPicker>
                                 <TextInputFocusable
-                                    autoFocus={this.shouldFocusInputOnScreenFocus}
+                                    autoFocus={this.shouldFocusInputOnScreenFocus || _.size(this.props.reportActions) === 1}
                                     multiline
                                     ref={this.setTextInputRef}
                                     textAlignVertical="top"

src/pages/home/report/ReportActionsView.js

@@ -9,7 +9,6 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import Text from '../../../components/Text';
 import * as Report from '../../../libs/actions/Report';
 import ReportActionItem from './ReportActionItem';
 import styles from '../../../styles/styles';
@@ -31,6 +30,9 @@ import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionCon
 import variables from '../../../styles/variables';
 import MarkerBadge from './MarkerBadge';
 import Performance from '../../../libs/Performance';
+import EmptyStateAvatars from '../../../components/EmptyStateAvatars';
+import * as ReportUtils from '../../../libs/reportUtils';
+import ReportWelcomeText from '../../../components/ReportWelcomeText';
 import ONYXKEYS from '../../../ONYXKEYS';
 
 const propTypes = {
@@ -503,6 +505,8 @@ class ReportActionsView extends React.Component {
     }
 
     render() {
+        const isDefaultChatRoom = ReportUtils.isDefaultRoom(this.props.report);
+
         // Comments have not loaded at all yet do nothing
         if (!_.size(this.props.reportActions)) {
             return null;
@@ -512,9 +516,14 @@ class ReportActionsView extends React.Component {
         if (_.size(this.props.reportActions) === 1) {
             return (
                 <View style={[styles.chatContent, styles.chatContentEmpty]}>
-                    <Text>
-                        {this.props.translate('reportActionsView.beFirstPersonToComment')}
-                    </Text>
+                    <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
+                        <EmptyStateAvatars
+                            avatarImageURLs={this.props.report.icons}
+                            secondAvatarStyle={[styles.secondAvatarHovered]}
+                            isDefaultChatRoom={isDefaultChatRoom}
+                        />
+                        <ReportWelcomeText report={this.props.report} shouldIncludeParticipants={!isDefaultChatRoom} />
+                    </View>
                 </View>
             );
         }

src/styles/styles.js

@@ -1577,6 +1577,34 @@ const styles = {
         height: 80,
     },
 
+    emptyStateAvatar: {
+        height: variables.componentSizeLarge,
+        width: variables.componentSizeLarge,
+        borderRadius: 100,
+        borderColor: themeColors.componentBG,
+        borderWidth: 4,
+        marginLeft: -16,
+    },
+
+    screenBlur: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: colors.dark,
+        opacity: 0.5,
+    },
+
+    avatarInnerTextChat: {
+        color: themeColors.textReversed,
+        fontSize: variables.fontSizeNormal,
+        left: 1,
+        textAlign: 'center',
+        fontWeight: 'normal',
+        position: 'absolute',
+    },
+
     displayName: {
         fontSize: variables.fontSizeLarge,
         fontFamily: fontFamily.GTA_BOLD,

src/styles/utilities/sizing.js

@@ -8,20 +8,24 @@ export default {
         height: '100%',
     },
 
-    mnh100: {
-        minHeight: '100%',
+    w20: {
+        width: '20%',
     },
 
-    w100: {
-        width: '100%',
+    mnh100: {
+        minHeight: '100%',
     },
 
     w50: {
         width: '50%',
     },
 
-    w20: {
-        width: '20%',
+    w70: {
+        width: '70%',
+    },
+
+    w100: {
+        width: '100%',
     },
 
     mwn: {