Update "be the first person to comment" screen #4921

MirFahad58 · 2021-08-30T18:44:23Z

Details

Updated the "Be the first person to comment!" screen to a new look here is the Figma link.
As we discussed in the issue.

Fixed Issues

$ #4678

Tests

Run app on any platform
Login with any account on any platform,

Click on the plus button add a new contact (email/user) or create a new group.
You will see the new and updated screen for "Be the first person to comment"
If you created a new chat with a single user it will show its time zone on top of the input otherwise will not.
Avatar(s) will show for the user in a group or single chat along with a description.
for private groups it will show a custom icon and custom description
please refer to Figma for more detail.

QA Steps

For example:

Click on the plus button add a new contact (email/user) or create a new group.
You will see the new and updated screen for "Be the first person to comment"
If you created a new chat with a single user it will show its time zone on top of the input otherwise will not.
Avatar(s) will show for the user in a group or single chat along with a description.
for private groups it will show a custom icon and custom description
previously it was only "be the first to comment" text on the whole screen.

Tested On

Web
Mobile Web
[] Desktop
[] iOS
Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

…omponent

github-actions · 2021-08-30T18:44:37Z

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

Santhosh-Sellavel · 2021-08-30T18:47:11Z

@MirFahad58 Message placeholder should say "Say hello!"

MirFahad58 · 2021-08-30T19:07:22Z

I have read the CLA Document and I hereby sign the CLA

MirFahad58 · 2021-08-30T19:08:12Z

recheck

Santhosh-Sellavel · 2021-08-30T19:25:33Z

@MirFahad58 I think it should show Say Hello! for first time Alone.

Check with @shawnborton & others.

Don't forget to update screenshots!

roryabraham · 2021-08-30T21:57:48Z

@MirFahad58 Looks like this PR has some merge conflicts that need to be addressed.

MirFahad58 · 2021-08-31T03:14:36Z

Ok let me resolve that ASAP.

MirFahad58 · 2021-08-31T06:33:00Z

updated

shawnborton · 2021-08-31T08:00:41Z

Looking good so far. Can you please share a screenshot of what this looks like when the group has 8 members in it? Thanks!

MirFahad58 · 2021-08-31T08:12:07Z

@shawnborton yes sure but i need a test account with multiple member so please if you have any please provide.

shawnborton · 2021-08-31T08:14:23Z

Great point - I'm not sure what to recommend for that. @roryabraham any ideas?

Santhosh-Sellavel · 2021-08-31T08:18:59Z

@MirFahad58 https://github.com/Expensify/App/blob/main/CONTRIBUTING.md#test-accounts

MirFahad58 · 2021-08-31T08:51:25Z

I will update screenshots with multiple users soon.

MirFahad58 · 2021-08-31T17:13:07Z

updated

src/styles/styles.js

MirFahad58 · 2021-11-16T05:49:45Z

@roryabraham just resolved the conflict please review it.

roryabraham · 2021-11-17T04:22:38Z

@MirFahad58 You've got a lint error.

MirFahad58 · 2021-11-17T05:29:59Z

@roryabraham code is updated now

parasharrajat

Lastly, did we change the room name to bold as well along the way? @MirFahad58

parasharrajat · 2021-11-17T15:48:26Z

src/pages/home/report/ReportActionsView.js

@@ -503,6 +505,9 @@ class ReportActionsView extends React.Component {
    }

    render() {
+        const {isDefaultRoom} = ReportUtils;


it hurts. Please call these directly ReportUtils.isDefaultRoom. Otherwise, there is no advantage of import * as ReportUtils from '../../../libs/reportUtils';.

Ahh nope please suggest the code because we are sending the #room in the string as a prop for language.

ok. You can break them into multiple Text nodes.

<Text>This </Text> <Text>**room**</Text> <Text>is awesome</Text>

Good catch @parasharrajat, but I'm confused why we would need to break into multiple text nodes... @MirFahad58 why does this not work?

const isDefaultChatRoom = ReportUtils.isDefaultRoom(this.props.report);

should i do like this
beginningOfChatHistoryPrivatePartOne
beginningOfChatHistoryPrivatePartTwo

Yeah, I think that's fine for now.

Before doing that try to get the two parts of the sentence in Spanish on the Slack.

@roryabraham which one? separate it into two parts?

beginningOfChatHistoryPrivatePartOne: Este es el principio de la sala privada
beginningOfChatHistoryPrivatePartOne: room, invite others by @mentioning them.
@parasharrajat @roryabraham what about this?

roryabraham · 2021-11-17T17:13:33Z

src/pages/home/report/ReportActionsView.js

@@ -503,6 +505,9 @@ class ReportActionsView extends React.Component {
    }

    render() {
+        const {isDefaultRoom} = ReportUtils;


Good catch @parasharrajat, but I'm confused why we would need to break into multiple text nodes... @MirFahad58 why does this not work?

const isDefaultChatRoom = ReportUtils.isDefaultRoom(this.props.report);

parasharrajat · 2021-11-17T17:21:40Z

Lastly, did we change the room name to bold as well along the way?

@roryabraham that comment is for... #4921 (review)

MirFahad58 · 2021-11-17T20:33:54Z

I updated the code for the bold text of the room name and other requested changes.

MirFahad58 · 2021-11-17T20:43:14Z

I accidentally closed the PR but reopened it. will there be any issue with that?

OSBotify · 2021-11-17T22:10:28Z

@MirFahad58, Great job getting your first Expensify/App pull request over the finish line! 🎉

I know there's a lot of information in our contributing guidelines, so here are some points to take note of 📝:

Now that your first PR has been merged, you can be hired for another issue. Once you've completed a few issues, you may be eligible to work on more than one job at a time.
Once your PR is deployed to our staging servers, it will undergo quality assurance (QA) testing. If we find that it doesn't work as expected or causes a regression, you'll be responsible for fixing it. Typically, we would revert this PR and give you another chance to create a similar PR without causing a regression.
Once your PR is deployed to production, we start a 7-day timer ⏰. After it has been on production for 7 days without causing any regressions, then we pay out the Upwork job. 💰

So it might take a while before you're paid for your work, but we typically post multiple new jobs every day, so there's plenty of opportunity. I hope you've had a positive experience contributing to this repo! 😊

OSBotify · 2021-11-17T22:10:58Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2021-11-22T20:53:28Z

🚀 Deployed to staging by @roryabraham in version: 1.1.15-18 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2021-11-29T18:49:03Z

🚀 Deployed to production by @roryabraham in version: 1.1.16-10 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

MirFahad58 added 6 commits August 29, 2021 00:47

chat avatars for "be the first to comment" screen

19193c3

custom avatar added for custom chat rooms using props as resuseable c…

21fe129

…omponent

fixed the lint

eb61ec0

custom text and other user name with pronouns added

fdfb878

localisation added for chat begin screen

1a905ea

focused on 1st step as user gets in

e615ff3

MirFahad58 requested a review from a team as a code owner August 30, 2021 18:44

MelvinBot requested review from roryabraham and removed request for a team August 30, 2021 18:44

MirFahad58 changed the title ~~Fahad be the first person to comment~~ Update "be the first person to comment" screen Aug 30, 2021

change place holder to say hello

854e82d

fixing show say hello first time Alone

ba1bbf3

roryabraham assigned MirFahad58 Aug 30, 2021

Merge branch 'main' into fahad-beTheFirstPersonToComment

f9aa030

fixes for multi chat

0ce0349

shawnborton reviewed Aug 31, 2021

View reviewed changes

src/styles/styles.js Outdated Show resolved Hide resolved

roryabraham previously approved these changes Nov 17, 2021

View reviewed changes

code linted

8fddba5

MirFahad58 dismissed roryabraham’s stale review via 8fddba5 November 17, 2021 05:28

MirFahad58 requested a review from roryabraham November 17, 2021 05:29

roryabraham approved these changes Nov 17, 2021

View reviewed changes

parasharrajat suggested changes Nov 17, 2021

View reviewed changes

roryabraham requested changes Nov 17, 2021

View reviewed changes

bold text for #private room

8353261

MirFahad58 requested review from roryabraham and parasharrajat November 17, 2021 20:34

MirFahad58 closed this Nov 17, 2021

MirFahad58 reopened this Nov 17, 2021

roryabraham approved these changes Nov 17, 2021

View reviewed changes

roryabraham merged commit 3b5605d into Expensify:main Nov 17, 2021

OSBotify mentioned this pull request Nov 22, 2021

Deploy Checklist: New Expensify 2021-11-22 #6399

Closed

kavimuru mentioned this pull request Nov 23, 2021

Chat - Empty chat will show a pronoun placeholder #6416

Closed

christianwen mentioned this pull request Sep 2, 2022

[HOLD for payment 2024-10-22] [$2000] Android/IOS - Split/request money - Chat composer is focused after IOU request from green plus button #10731

Open

aimane-chnaif mentioned this pull request Feb 23, 2023

[HOLD #11768] [$8000] Chat room wobbles while opening up on mobile Chrome or Safari #15239

Closed

6 tasks

ntdiary mentioned this pull request Nov 27, 2023

[$500] Report-When opening reports in lhn, if no activity in report, focus is on compose&keypad opens #31615

Closed

6 tasks

bernhardoj mentioned this pull request Apr 23, 2024

[HOLD for payment 2024-06-13] [$1000] Chat - Thread - Keyboard does not open when click of reply in thread #19558

Closed

6 tasks

Update "be the first person to comment" screen #4921

Update "be the first person to comment" screen #4921

Conversation

MirFahad58 commented Aug 30, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

github-actions bot commented Aug 30, 2021 • edited Loading

Santhosh-Sellavel commented Aug 30, 2021

MirFahad58 commented Aug 30, 2021

MirFahad58 commented Aug 30, 2021

Santhosh-Sellavel commented Aug 30, 2021 • edited Loading

roryabraham commented Aug 30, 2021

MirFahad58 commented Aug 31, 2021

MirFahad58 commented Aug 31, 2021

shawnborton commented Aug 31, 2021

MirFahad58 commented Aug 31, 2021

shawnborton commented Aug 31, 2021

Santhosh-Sellavel commented Aug 31, 2021

MirFahad58 commented Aug 31, 2021

MirFahad58 commented Aug 31, 2021

MirFahad58 commented Nov 16, 2021

roryabraham commented Nov 17, 2021

MirFahad58 commented Nov 17, 2021

parasharrajat left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MirFahad58 Nov 17, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parasharrajat commented Nov 17, 2021

MirFahad58 commented Nov 17, 2021

MirFahad58 commented Nov 17, 2021

OSBotify commented Nov 17, 2021

OSBotify commented Nov 17, 2021

OSBotify commented Nov 22, 2021

OSBotify commented Nov 29, 2021

MirFahad58 commented Aug 30, 2021 •

edited

Loading

github-actions bot commented Aug 30, 2021 •

edited

Loading

Santhosh-Sellavel commented Aug 30, 2021 •

edited

Loading

MirFahad58 Nov 17, 2021 •

edited

Loading