Update "be the first person to comment" screen

src/components/ChatAvatars.js

@@ -0,0 +1,79 @@
+import React, {memo} from 'react';
+import PropTypes from 'prop-types';
+import {Image, View} from 'react-native';
+import styles from '../styles/styles';
+import Text from './Text';
+import ChatCustomAvatar from './ChatCustomAvatar';
+import ActiveRoomAvatar from '../../assets/images/avatars/room.svg';
+
+const propTypes = {
+    /** Array of avatar URL */
+    avatarImageURLs: PropTypes.arrayOf(PropTypes.string),
+
+
+    /** Whether this avatar is for an custom room */
+    isCustomChatRoom: PropTypes.bool,
+
+    /** Whether this avatar is for an custom room */
+    CustomChatRoomIcon: PropTypes.func,
+
+};
+
+const defaultProps = {
+    avatarImageURLs: [],
+    isCustomChatRoom: false,
+    CustomChatRoomIcon: ActiveRoomAvatar,
+};
+
+const ChatAvatars = ({avatarImageURLs, isCustomChatRoom, CustomChatRoomIcon}) => {
+    if (!avatarImageURLs.length) {
+        return null;
+    }
+
+    if (avatarImageURLs.length === 1 || isCustomChatRoom) {
+        return (
+            <ChatCustomAvatar
+                source={avatarImageURLs[0]}
+                imageStyles={[styles.avatarLarge]}
+                isCustomChatRoom={isCustomChatRoom}
+                CustomChatRoomIcon={CustomChatRoomIcon}
+            />
+        );
+    }
+
+    return (
+        <View pointerEvents="none">
+            <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
+                {avatarImageURLs.map((val, index) => {
+                    if (index <= 3) {
+                        return (
+                            <View key={val} style={[styles.chatAvatarWraper, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                                <Image source={{uri: val}} style={[styles.chatAvatar]} />
+
+                                {index === 3 && (
+                                    <View
+                                        style={[
+                                            styles.chatAvatar,
+                                            styles.justifyContentCenter,
+                                            styles.alignItemsCenter,
+                                            styles.chatOverLay,
+                                        ]}
+                                    >
+                                        <Text style={styles.avatarInnerTextChat}>
+                                            {`+${avatarImageURLs.length - 4}`}
+                                        </Text>
+                                    </View>
+                                )}
+                            </View>
+                        );
+                    }
+                    return null;
+                })}
+            </View>
+        </View>
+    );
+};
+
+ChatAvatars.defaultProps = defaultProps;
+ChatAvatars.propTypes = propTypes;
+export default memo(ChatAvatars);

src/components/ChatBeginingText.js

@@ -0,0 +1,61 @@
+import React, {memo} from 'react';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import Text from './Text';
+import colors from '../styles/colors';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
+
+const propTypes = {
+
+    isDefaultChatRoom: PropTypes.bool,
+    chatUsers: PropTypes.arrayOf(PropTypes.object),
+    ...withLocalizePropTypes,
+
+};
+
+const defaultProps = {
+    chatUsers: [],
+    isDefaultChatRoom: false,
+};
+
+const ChatBeginingText = ({isDefaultChatRoom, chatUsers, translate}) => (
+    <Text style={[styles.mt3, styles.w70, styles.textAlignCenter]}>
+        <Text style={[{color: colors.dark}]}>
+            {isDefaultChatRoom ? `${translate('reportActionsView.beginingOfChatHistroyPrivate')} ` : `${translate('reportActionsView.beginingOfChatHistroy')} `}
+        </Text>
+        {isDefaultChatRoom
+            && (
+                <Text style={[{color: colors.dark}]}>
+                    {`${chatUsers?.[0]?.displayName} ${translate('reportActionsView.beginingOfChatHistroyPrivateSectionPart')}`}
+                </Text>
+            )}
+        {!isDefaultChatRoom
+            && (
+                <Text>
+                    {chatUsers.map(({displayName, pronouns}, index) => (
+                        <Text key={displayName}>
+                            <Text style={[{color: colors.dark, fontWeight: '700'}]}>
+                                {displayName}
+                            </Text>
+                            {(pronouns !== undefined && pronouns !== '')
+                                && (
+                                <Text>
+                                    {`(${pronouns})`}
+                                </Text>
+                                )}
+                            {(chatUsers.length === 1 || chatUsers.length - 1 === index) && '.'}
+                            {(chatUsers.length - 2 === index && chatUsers.length > 1) && ` ${translate('common.and')} `}
+                            {(chatUsers.length - 2 !== index && chatUsers.length - 1 !== index) && chatUsers.length > 1 && ', '}
+
+                        </Text>
+                    ))}
+
+                </Text>
+            )}
+    </Text>
+);
+
+ChatBeginingText.defaultProps = defaultProps;
+ChatBeginingText.propTypes = propTypes;
+export default compose(memo, withLocalize)(ChatBeginingText);

src/components/ChatCustomAvatar.js

@@ -0,0 +1,62 @@
+import React, {PureComponent} from 'react';
+import {Image, View, StyleSheet} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import ActiveRoomAvatar from '../../assets/images/avatars/room.svg';
+
+const propTypes = {
+    /** Url source for the avatar */
+    source: PropTypes.string,
+
+    /** Extra styles to pass to Image */
+    imageStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
+
+    /** Set the size of ChatCustomAvatar */
+    size: PropTypes.oneOf(['default', 'small']),
+
+    /** Whether this avatar is for an custom room */
+    isCustomChatRoom: PropTypes.bool,
+
+    /** Whether this avatar is for an custom room */
+    CustomChatRoomIcon: PropTypes.func,
+
+};
+
+const defaultProps = {
+    source: '',
+    imageStyles: [],
+    containerStyles: [],
+    size: 'default',
+    isCustomChatRoom: false,
+    CustomChatRoomIcon: ActiveRoomAvatar,
+
+
+};
+
+class ChatCustomAvatar extends PureComponent {
+    render() {
+        const {CustomChatRoomIcon} = this.props;
+        if (!this.props.source && !this.props.isCustomChatRoom) {
+            return null;
+        }
+
+        const imageStyle = [
+            this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,
+            ...this.props.imageStyles,
+        ];
+        return (
+            <View pointerEvents="none" style={this.props.containerStyles}>
+                {this.props.isCustomChatRoom
+                    ? <CustomChatRoomIcon style={StyleSheet.flatten(imageStyle)} />
+                    : <Image source={{uri: this.props.source}} style={imageStyle} />}
+            </View>
+        );
+    }
+}
+
+ChatCustomAvatar.defaultProps = defaultProps;
+ChatCustomAvatar.propTypes = propTypes;
+export default ChatCustomAvatar;

src/languages/en.js

@@ -124,6 +124,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.',
@@ -143,7 +144,10 @@ export default {
         deleteConfirmation: 'Are you sure you want to delete this comment?',
     },
     reportActionsView: {
-        beFirstPersonToComment: 'Be the first person to comment',
+        beginingOfChatHistroy: 'This is the beginning of your chat history with',
+        beginingOfChatHistroyPrivate: 'This is the beginning of the private',
+        beginingOfChatHistroyPrivateSectionPart: 'room, invite others by @mentioning them.',
+
     },
     reportActionsViewMarkerBadge: {
         newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,

src/languages/es.js

@@ -124,6 +124,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.',
@@ -143,7 +144,9 @@ export default {
         deleteConfirmation: '¿Estás seguro de que quieres eliminar este comentario?',
     },
     reportActionsView: {
-        beFirstPersonToComment: 'Sé el primero en comentar',
+        beginingOfChatHistroy: 'This is the beginning of your chat history with',
+        beginingOfChatHistroyPrivate: 'This is the beginning of the private',
+        beginingOfChatHistroyPrivateSectionPart: 'room, invite others by @mentioning them.',
     },
     reportActionsViewMarkerBadge: {
         newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`,

src/libs/DateUtils.js

@@ -109,6 +109,14 @@ function startCurrentDateUpdater() {
     });
 }
 
+/*
+ * get the time using user's timezone for chat start screen.
+ */
+export const currentTimeStampFromProvidedZone = (userTimeZone, format) => {
+    const currentTime = moment().tz(userTimeZone);
+    return moment(currentTime).format(format);
+};
+
 /*
  * Updates user's timezone, if their timezone is set to automatic and
  * is different from current timezone

src/pages/home/ReportScreen.js

@@ -181,6 +181,7 @@ class ReportScreen extends React.Component {
                                 reportID={reportID}
                                 reportActions={this.props.reportActions}
                                 report={this.props.report}
+                                isFocused
                             />
                         </SwipeableView>
                     )}

src/pages/home/report/ReportActionCompose.js

@@ -146,15 +146,14 @@ class ReportActionCompose extends React.Component {
         this.addEmojiToTextBox = this.addEmojiToTextBox.bind(this);
         this.focus = this.focus.bind(this);
         this.comment = props.comment;
-        this.shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();
+        this.shouldFocusInputOnScreenFocus = !canFocusInputOnScreenFocus();
         this.focusEmojiSearchInput = this.focusEmojiSearchInput.bind(this);
         this.measureEmojiPopoverAnchorPosition = this.measureEmojiPopoverAnchorPosition.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.emojiPopoverAnchor = null;
         this.emojiSearchInput = null;
         this.setTextInputRef = this.setTextInputRef.bind(this);
         this.getInputPlaceholder = this.getInputPlaceholder.bind(this);
-
         this.state = {
             isFocused: this.shouldFocusInputOnScreenFocus,
             textInputShouldClear: false,
@@ -265,6 +264,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');
     }
 

src/pages/home/report/ReportActionsView.js

@@ -8,6 +8,8 @@ import {
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
+import Str from 'expensify-common/lib/str';
 import Text from '../../../components/Text';
 import {
     fetchActions,
@@ -17,6 +19,7 @@ import {
     subscribeToReportTypingEvents,
     unsubscribeFromReportChannel,
 } from '../../../libs/actions/Report';
+import {currentTimeStampFromProvidedZone} from '../../../libs/DateUtils';
 import ReportActionItem from './ReportActionItem';
 import styles from '../../../styles/styles';
 import ReportActionPropTypes from './ReportActionPropTypes';
@@ -37,6 +40,12 @@ import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionCon
 import variables from '../../../styles/variables';
 import MarkerBadge from './MarkerBadge';
 import Performance from '../../../libs/Performance';
+import ChatAvatars from '../../../components/ChatAvatars';
+import {isDefaultRoom} from '../../../libs/reportUtils';
+import ONYXKEYS from '../../../ONYXKEYS';
+import {getPersonalDetailsForLogins} from '../../../libs/OptionsListUtils';
+import ChatBeginingText from '../../../components/ChatBeginingText';
+import colors from '../../../styles/colors';
 
 const propTypes = {
     /** The ID of the report actions will be created for */
@@ -497,6 +506,36 @@ class ReportActionsView extends React.Component {
     }
 
     render() {
+        const isDefaultChatRoom = isDefaultRoom(this.props.report);
+        const participants = lodashGet(this.props.report, 'participants', []);
+        const isMultipleParticipant = participants.length > 1;
+        const displayNamesWithTooltips = _.map(
+            getPersonalDetailsForLogins(participants, this.props.personalDetails),
+            ({
+                displayName, firstName, login, pronouns,
+            }) => {
+                const displayNameTrimmed = Str.isSMSLogin(login) ? this.props.toLocalPhone(displayName) : displayName;
+
+                return {
+                    displayName: (isMultipleParticipant ? firstName : displayNameTrimmed) || Str.removeSMSDomain(login),
+                    tooltip: Str.removeSMSDomain(login),
+                    pronouns,
+                };
+            },
+        );
+
+        const displayTimeWithTimeZone = _.map(
+            getPersonalDetailsForLogins(participants, this.props.personalDetails),
+            ({timezone}) => ({
+                timezone: timezone?.selected ?? null,
+            }),
+        );
+        const chatUserTimeZone = isMultipleParticipant ? false : displayTimeWithTimeZone.map(({timezone}) => timezone).join('');
+
+        const chatUsers = isDefaultChatRoom ? [{displayName: this.props.report.reportName}] : displayNamesWithTooltips;
+
+        const userTime = currentTimeStampFromProvidedZone(chatUserTimeZone, 'hh:mm a');
+
         // Comments have not loaded at all yet do nothing
         if (!_.size(this.props.reportActions)) {
             return null;
@@ -506,9 +545,21 @@ 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, {flex: 0.95}]}>
+                        <ChatAvatars
+                            avatarImageURLs={this.props.report.icons}
+                            secondAvatarStyle={[styles.secondAvatarHovered]}
+                            isCustomChatRoom={isDefaultChatRoom}
+                        />
+                        <ChatBeginingText chatUsers={chatUsers} isDefaultChatRoom={isDefaultChatRoom} />
+                    </View>
+                    <View style={[styles.justifyContentEnd, {flex: 0.05}]}>
+                        {chatUserTimeZone !== false && (
+                        <Text style={{fontSize: variables.fontSizeSmall, color: colors.gray4}}>
+                            {`It's ${userTime} for ${chatUsers?.[0]?.displayName}.`}
+                        </Text>
+                        )}
+                    </View>
                 </View>
             );
         }
@@ -553,4 +604,12 @@ export default compose(
     withWindowDimensions,
     withDrawerState,
     withLocalize,
+    withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS,
+        },
+        policies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+    }),
 )(ReportActionsView);