[HOLD for payment 2023-06-21] [$1000] Inconsistency of the [Yes] button color between “Contact method” & “Security” modal

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open your profile.
2. Click on " Contact methods".
3. Click on " New contact method".
4. Click on " Delete" to remove the existing contact.
5. Notice the modal, “Yes” button is highlighted in red.
6. Now go back and click on "Security".
7. Click on " Close account".
8. Enter default contact method
9. Click on " Close account" button.
10. Notice the modal, “Yes” button is highlighted in green.

Expected Result:

In both cases, the “Yes” button should be highlighted in red (and it should be this way across all UI elements in newDot).

Actual Result:

In this case, the “Yes” button is highlighted in different color (i.e. green vs red)

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.23.6

Reproducible in staging?: yes

Reproducible in production?: yes

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

Notes/Photos/Videos: Any additional supporting documentation

20230531_144448.mp4

Recording.2966.mp4

Expensify/Expensify Issue URL:

Issue reported by: @usmantariq96

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1685527140262479

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dad0214cbc98129a
• Upwork Job ID: 1666465549069123584
• Last Price Increase: 2023-06-07

[melvin-bot]

Triggered auto assignment to @michaelhaxhiu (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

[dhairyasenjaliya]

Proposal

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

• Inconsistency between “Contact method” & “Security” modal “yes” button color.

What is the root cause of that problem?

• More sort of UI enhancement to make consistency across the app

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

• In order to make consistency styling we need to change in closeAccountPage.js

• We need to change 2 things first is button colour and 2nd is confirmText

• For colour we just need to pass danger props to <ConfirmModal> which inside the closeAccountPage.js

• For confirmText props we can add same text which we added on contactDetailPage.js which is this.props.translate('common.yesContinue’) and inside confirmText props to closeAccountPage.js

• Edited: as per the latest requirement we can also add same text to cancelText it can be cancel/no depends upon what we select to add

What alternative solutions did you explore? (Optional)

• We can change confimText and colour to ContactMethodDetailsPage to match with closeAccountPage.js same as above suggestion to ContactMethodDetailsPage.js

[melvin-bot]

@michaelhaxhiu Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[michaelhaxhiu]

Yup, let's fix it.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01dad0214cbc98129a

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[0xmiros]

@michaelhaxhiu the consistent color is green or red? I think red?

[michaelhaxhiu]

Correct! Updated the GH body to be a little more clear. Thanks for being very detailed like always, @0xmiroslav :)

[0xmiros]

Also, I noticed yes button title is also not consistent.
One is "Yes, continue", another is just "Yes". Which one is correct?

[michaelhaxhiu]

Just Yes feels ideal to me. What do you think?

[michaelhaxhiu]

& it already says "This action cannot be undone" above the Yes, continue button. So let's clean that up too +1 @0xmiroslav

[0xmiros]

Cancel button title is also not the same.
These are paired right now:
Close account page: Yes / Cancel
Contact page: Yes, continue / No

[dhairyasenjaliya]

this is in the current code i belive yes,continue looks more aligned

[michaelhaxhiu]

I want @Julesssss to weigh in on this piece :)

[Julesssss]

Yeah, given how dangerous this action is I think we should stick with 'Yes, Continue'. Though I don't care that much about it if anyone disagrees.

[0xmiros]

And stick with "No" right? since this answers question. "Cancel" is not an answer

[dhairyasenjaliya]

Pr ready for review @0xmiroslav @Julesssss

[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.3.27-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Modal consistency fix for button colour and cancel text #20503

If no regressions arise, payment will be issued on 2023-06-21. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[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:

• [@0xmiroslav] The PR that introduced the bug has been identified. Link to the PR:
• [@0xmiroslav] 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:
• [@0xmiroslav] 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:
• [@0xmiroslav] Determine if we should create a regression test for this bug.
• [@0xmiroslav] 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.
• [@michaelhaxhiu] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[michaelhaxhiu]

We don't have a speed bonus in affect as far as I can tell, right?

[0xmiros]

right. PR merged within 3 days, no regressions.

This is not bug but improvement. I don't think we need regression test.

[Julesssss]

Ready for payment

[Julesssss]

Hey @michaelhaxhiu, can we pay out please?

[michaelhaxhiu]

I am confused by this:

right. PR merged within 3 days, no regressions.
This is not bug but improvement. I don't think we need regression test.

I think you are saying there is a speed bonus in effect - is that right?

I am just trying to make sure. The job was assigned June 9 and PR was merged to staging June 12.

[0xmiros]

It's merged in 2 days 22 hrs 22 min

[michaelhaxhiu]

Thanks, that was a derp moment for me.

[michaelhaxhiu]

Offers sent to all 3

[Julesssss]

Can we close this one out?

[michaelhaxhiu]

Not yet, need to pay folks first.

[michaelhaxhiu]

all paid now.