[$250] Request Money - Text in the compose box changes from "Say hello" to "Write something" & vice versa

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Login with any account
3. Click on FAB button/Request money or Split bill
4. Сomplete the action
5. Pay attention to the text in the input field

Also,

1. Click on FAB button/New chat
2. Select new user with no previous chat
3. Pay attention to compose box
4. Placeholder text changes

Expected Result:

The text in the input field shouldn't changes

Actual Result:

The text in the input field changes from "Say hello" to "Write something." from "Say hello" to "Write something."

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.10.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/93399543/193309858-87395bdb-d279-43ef-a283-ed04c9e244f0.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @MonilBhavsar (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MonilBhavsar]

Not a critical bug, looking it later

[MonilBhavsar]

I think this is more general issue and also occurs when -

1. Click on FAB button/New chat
2. Select new user with no previous chat
3. Pay attention to compose box
4. Placeholder text changes

[melvin-bot[bot]]

Triggered auto assignment to @slafortune (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mananjadhav (External)

[melvin-bot[bot]]

Current assignee @MonilBhavsar is eligible for the External assigner, not assigning anyone new.

[Uros787]

Proposal

The issue here is that while the chat is loading, our fallback value is "Say hello" Now we have two options: Either change the fallback text to Write something Or completely delete the fallback value so it is an empty string and after loading is finished display the proper value

That would be done here.

https://github.com/Expensify/App/blob/6551eb9d07f54c222bd6cb7411b7613f3ccd03b4/src/pages/home/report/ReportActionCompose.js#L244-L258

Like this:

// Waiting until ONYX variables are loaded before displaying the input place holder
        if (_.isEmpty(this.props.reportActions)) {
            return '';
        }

[dhairyasenjaliya]

Proposal

Root Cause

• This happens because in our code base we have added validation to check if isEmptyChat which basically returns the length of this.props.reportActions and if chat is empty we are returning 1 as even empty chat reportActions object will be containing one record of creating

• Text in the input field changes from "Say hello" to "Write something." because when we are updating a reportActions at a particular moment reportActions length would be 0 empty so we need to add one more validation to check if reportActions is not 0

        if (this.isEmptyChat() && _.size(this.props.reportActions) !== 0) {
            return this.props.translate('reportActionCompose.sayHello');
        }

https://github.com/Expensify/App/blob/44bf1ffc491cd1e99258ddbe07823a99b80e9aad/src/pages/home/report/ReportActionCompose.js#L253-L255

Reason why we should not use _.isEmpty(this.props.reportActions)

• If we add this condition to check the placeholder it will work on the very first time when ONYX is not loaded but on next refresh ONYX is already loaded so this will fail

// Waiting until ONYX variables are loaded before displaying the input place holder
        if (_.isEmpty(this.props.reportActions)) {
            return '';
        }

Result

https://user-images.githubusercontent.com/47522946/194557162-b6d27e83-4fd2-4f2c-91d8-e5cc6f5276fc.mov

Without Fix

https://user-images.githubusercontent.com/47522946/194686408-c7115327-cef5-4b7e-895c-57a5f30ed640.mov

[mananjadhav]

Went through the proposals and @dhairyasenjaliya's proposal here looks good to me.

@MonilBhavsar All yours.

🎀 👀 🎀  C+ reviewed

[MonilBhavsar]

@dhairyasenjaliya could you please check if this issue use case is also fixed- https://github.com/Expensify/App/issues/11471#issuecomment-1271485274

[dhairyasenjaliya]

@dhairyasenjaliya could you please check if this issue use case is also fixed- #11471 (comment)

I did check this condition now, so basically, here we are adding a conditional check when reportAction is not empty at that time we display Say Hello, but if we want to add this condition then we should probably add a condition whereby if reportAction is blank at that time we need to return placeholder as empty since only after data is loaded we can identify the type of placeholder (E.g Say Hello/Write something)

cc @MonilBhavsar @mananjadhav

[mananjadhav]

@MonilBhavsar @dhairyasenjaliya I am not able to reproduce this in a general scenario. Here's the video from staging. Am I missing something on the reproduction steps?

https://user-images.githubusercontent.com/3069065/196001475-20c8b290-6f7e-49fd-9665-8df7203ac3d4.mp4

[dhairyasenjaliya]

@mananjadhav try to request money from non-selected user or you are just referring to a new chat user?

[mananjadhav]

yeah Request a money I am aware but not with New Chat as mentioned in the GH body. Hence, clarifying.

[dhairyasenjaliya]

ah got it @mananjadhav can you select the user that never has any chat, I mean make sure the selected user has not even initialized any messages (previously did message and delete that messages)

[mananjadhav]

(if you check the video), I am trying a very random email that don't exist in the system

[MonilBhavsar]

Hmm, I'm also not able to reproduce now. @kbecciv could you please confirm if this issue is still reproducible. Thank you!

[kbecciv]

@MonilBhavsar Checking with team, will update you shortly

[kbecciv]

@MonilBhavsar Issue is still reproduced with build 1.2.17.4

https://user-images.githubusercontent.com/93399543/196500038-c8ff1eac-6052-48e9-9849-50921e336efd.mp4

[slafortune]

https://www.upwork.com/ab/applicants/1582488161449332736/job-details

[MonilBhavsar]

Thanks! Yes, reproducible with request money flow. Waiting for proposals...

[dhairyasenjaliya]

@MonilBhavsar https://github.com/Expensify/App/issues/11471#issuecomment-1271544517 this proposal is for request money flow can you confirm @mananjadhav

[mananjadhav]

@MonilBhavsar Just for request flow, I shortlisted a proposal if you check the comment here

[MonilBhavsar]

Thanks, had a look. When we request from a completely new account, the transition still happens, but I think that is because of a new reportAction is added at that moment.

[mananjadhav]

@MonilBhavsar Any updates on this one?

[mananjadhav]

Quick bump on this @MonilBhavsar

[MonilBhavsar]

Proposal looks good to me. let's implement it

[melvin-bot[bot]]

📣 @dhairyasenjaliya You have been assigned to this job by @MonilBhavsar! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[dhairyasenjaliya]

great, will create PR probably today :)

[mananjadhav]

@dhairyasenjaliya This PR is in draft for a few days. Can we please have it closed soon? Can you please send us an update on this one.