[PAID] [LOW] [$500] Settings – Cleared status is visible if press save button

[lanitochka17]

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

---

Version Number: 1.4.19-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in with any account.
3. Open Settings/ Profile/ Status select a any emoji
4. Verify that status emoji appears
5. Clear status and verify that status emoji cleared
6. Press Save button

Expected Result:

Cleared status is not visible if press save button

Actual Result:

Cleared status is visible if press save button

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6327946_1703805265392.Status.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0166fc8d8a8bf48267
• Upwork Job ID: 1740531373054357504
• Last Price Increase: 2024-01-12
• Automatic offers:
• Ollyws | Reviewer | 28104609
• dukenv0307 | Contributor | 28104610

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0166fc8d8a8bf48267

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[unidev727]

Proposal

from: @unicorndev-727

Please re-state the problem that we are trying to solve in this issue.

Initial emoji is visible if press save button.

What is the root cause of that problem?

The root cause is that we reset the EMOJI_CODE to initialEmoji one here after we clear custom status emoji.

App/src/pages/settings/Profile/CustomStatus/StatusPage.js

Line 104 in 595bf40

formRef.current.resetForm({[INPUT_IDS.EMOJI_CODE]: initialEmoji});

App/src/pages/settings/Profile/CustomStatus/StatusPage.js

Line 40 in 595bf40

const initialEmoji = '💬';

What changes do you think we should make in order to solve the problem?

We need to change this line

formRef.current.resetForm({[INPUT_IDS.EMOJI_CODE]: initialEmoji});

to

formRef.current.resetForm({[INPUT_IDS.EMOJI_CODE]: ``});

screen-capture.2.webm

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Cleared status is visible if press save button

What is the root cause of that problem?

When we clear the status, the form will be reset here, the emoji is reset to the default emoji.

And when we press 'Save', it will save the new status with the default emoji.

This is not expected because status with default emoji is just as good as no status at all.

What changes do you think we should make in order to solve the problem?

1. Not show the default emoji in the initial selector, but shows a disabled emoji icon like Slack below (or the icon as suggested here)

We should modify in EmojiPickerButtonDropdown here to show that disabled emoji if props.value is not available

2. The initial emoji code here will be empty string, and when clearing, set it to empty string.

3. If the user saves a status with a text but no emojiCode, set the emojiCode to the default emoji

4. We can navigate the user back to the previous page after the user clears the status, depending on the decision here, by adding to here

InteractionManager.runAfterInteractions(() => {
    navigateBackToPreviousScreen();
});

(Can remove InteractionManager.runAfterInteractions if we want the navigation to happen immediately without the user seeing that the fields were cleared)

What alternative solutions did you explore? (Optional)

If the user saves a status with empty string emoji code and a text, automatically set the status emoji (when submitting) to our current defaultEmoji. Or when user starts typing the status text, set the emoji to the defaultEmoji like Slack does.

[aim-salam]

My solution same like @unicorndev-727

[Pujan92]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Default status has been set when we click on Save after clearing it

What is the root cause of that problem?

When we click on Save button we reset the status and emoji code. So when we click save post clearing the status it considers the default emoji code as a new status and saves it.

What changes do you think we should make in order to solve the problem?

We should navigate to the previous screen after clearing the status when the user press Clear Status bcoz it doesn't depend on the Save button to apply its changes.

Result

Screen.Recording.2023-12-29.at.15.59.41.mov

[melvin-bot]

@strepanier03, @Ollyws Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@strepanier03, @Ollyws Whoops! This issue is 2 days overdue. Let's get this updated quick!

[dragnoir]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Settings – Cleared status is visible if press save button

What is the root cause of that problem?

UX issue. After status is cleared, user think the save button is for saved the clear action.

What changes do you think we should make in order to solve the problem?

Hide the "Save" button when user click on "Clear status".
Keep the button hidden using isSubmitButtonVisible until the user change the value of the emoji on the status page emojiPicker..

App/src/pages/settings/Profile/CustomStatus/StatusPage.js

Lines 140 to 149 in 320ff54

	<FormProvider
	formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
	style={[styles.flexGrow1, styles.flex1]}
	ref={formRef}
	submitButtonText={translate('statusPage.save')}
	submitButtonStyles={[styles.mh5, styles.flexGrow1]}
	onSubmit={updateStatus}
	validate={validateForm}
	enabledWhenOffline
	>

[Ollyws]

I think @dukenv0307's proposal to add an error message if the status text is empty and emoji is default is most in line with the app's design principles but It would be great if we could get a second opinion from @Expensify/design on this one.

[dragnoir]

@Ollyws the proposal by dukenv0307 will not work when the user pick this icon 💬 from the emojiPicker

it's used as default icons too, so the condition is always true.

[shawnborton]

I think we try to avoid conditionally showing/hiding UI when possible. So that being said, part of me thinks we should just show "Clear status" at all times, the same way we always show a form submit button at all times. Curious what the @Expensify/design thinks about that.

Otherwise let's just fix the issue and not flash the "Clear status" row when you hit the save button.

[Ollyws]

@shawnborton Thanks for the feedback.
What do you think should happen when the user presses the Save button and the status is empty?
As I understood we try to avoid disabling buttons in favour of displaying an error message when they are pressed. Would that be appropriate here?
The other proposals were to navigate back to the previous screen when the status is cleared, or hide the Save button.

[shawnborton]

I think if the user hits Save and the status is empty, we just save the empty status and head back to the previous page.

[dannymcclain]

I think the weirdness here comes from thinking that you need to press Save after pressing Clear status to make it "stick". I did this about 5 times this morning before I figured out I just needed to press Clear status 😅.

I'm not sure I'm 100% understanding the proposal, but I don't think we should show any error messages on this status form. There is no wrong/invalid status.

A simple solution might be to dismiss the pane after you click Clear status, the same way we dismiss the pane after you save a status?

[shawnborton]

A simple solution might be to dismiss the pane after you click Clear status, the same way we dismiss the pane after you save a status?

I don't mind that, though I suppose you might be clearing your status so that you can change it for a new one right?

[dannymcclain]

I think if the user hits Save and the status is empty, we just save the empty status and head back to the previous page.

The problem is when we "clear" the status we're not setting it to be empty in the form (even though we're setting it to be empty for the app). In the form, we're setting it to be "💬". So there's no possible way to save an empty status.

[Pujan92]

Actually clear status button already resets the status, so I suggested in my proposal to navigate back when user presses clear status.

Screen.Recording.2023-12-29.at.15.59.41.mov

[dannymcclain]

I think I'm in favor of that solution. I agree that you might be clearing your status to set a new one... but you can also just change it and press save without clearing it first. Navigating away feels like the simplest/cleanest/most clear solution to me.

[melvin-bot]

Triggered auto assignment to @amyevans, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @Ollyws 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[melvin-bot]

@amyevans @strepanier03 @Ollyws @dukenv0307 this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[quinthar]

What's the update here? Should we pick a different proposal?

[dukenv0307]

PR being worked on, I will raise PR today

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.33-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix logic clear status and save status #34780

If no regressions arise, payment will be issued on 2024-02-07. 🎊

For reference, here are some details about the assignees on this issue:

• @Ollyws requires payment automatic offer (Reviewer)
• @dukenv0307 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@Ollyws] The PR that introduced the bug has been identified. Link to the PR:
• [@Ollyws] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@Ollyws] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@Ollyws] Determine if we should create a regression test for this bug.
• [@Ollyws] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[Ollyws]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR:

The functionality was originally added in #24620 but it seemed to be intentional rather than a bug.

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

N/A

• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

N/A

• Determine if we should create a regression test for this bug.

Yes

• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

1. Log in with any account.
2. Open Settings/ Profile/ Status
3. Verify that it shows a placeholder emoji icon and select any emoji
4. Verify that status emoji appears
5. Clear status and verify that status emoji cleared
6. Press Save button
7. Verify that no status is saved

Do we agree 👍 or 👎

[strepanier03]

All right, everyone's been paid and contracts closed. Thank you all!