-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[HOLD for payment 2023-10-25] [$500] Correcting one digit in an incorrect magic code instantly resubmits #28019
Comments
Triggered auto assignment to @zanyrenney ( |
Job added to Upwork: https://www.upwork.com/jobs/~0102290181cc0b5855 |
Bug0 Triage Checklist (Main S/O)
|
Triggered auto assignment to @michaelhaxhiu ( |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat ( |
Proposal from @joh42 ProposalPlease re-state the problem that we are trying to solve in this issue.When a user edits one digit of an incorrect magic code, the magic code is instantly resubmitted. What is the root cause of that problem?As long as there are 6 digits in the magic code, we submit when the magic code changes, regardless of the index of the changed digit. What changes do you think we should make in order to solve the problem?I think the approach that makes the most sense would be to only resubmit if the last digit is edited. This could be implemented by:
This is the useEffect in question: App/src/components/MagicCodeInput.js Lines 130 to 131 in 2fbe81d
What alternative solutions did you explore? (Optional)Alternative 1Another approach would be to debounce the submission after a digit has been changed. This could easily be done using _.debounce, and then use the debounced function in the aforementioned useEffect. We might only want to do this if the code has already been submitted once, which can be stored in a new ref. Alternative 2Yet another approach would be to clear the magic code in case it is incorrect. |
ProposalPlease re-state the problem that we are trying to solve in this issue.After one try, if user try to edit the magic code it immediately resubmit prevents to change all the code What changes do you think we should make in order to solve the problem?We can avoid auto-submission of magic code, after the initial submit. What that means is, once the user submits the magic-code and then changes the magic-code in anyway, whether he removes some digit, or changes any digit (including last digit as well) the application wont submit the magic-code automatically. Now User have to manually click on signin or submit button to get logged in. How To Achieve this Scenario: Create this state here App/src/components/MagicCodeInput.js Lines 93 to 97 in 65fd435
const [firstSubmit, setFirstSubmit] = useState(true) and change this to this App/src/components/MagicCodeInput.js Lines 116 to 126 in 65fd435
const validateAndSubmit = () => {
const numbers = decomposeString(props.value, props.maxLength);
if (!firstSubmit || !props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
return;
}
setFirstSubmit(false)
// Blurs the input and removes focus from the last input and, if it should submit
// on complete, it will call the onFulfill callback.
blurMagicCodeInput();
props.onFulfill(props.value);
} What alternative solutions did you explore? (Optional)N/A |
This way you will be able to submit it once, but after first attempt you manually have to click on signin button. |
ProposalPlease re-state the problem that we are trying to solve in this issue.Once magic code is entered and submitted for validation, correcting any digit will instantly resubmit which is not a good UX if the user wanted to correct multiple digits. What is the root cause of that problem?Let’s begin our journey from the point when the user submits an incorrect magic code. In this case, currently, However, as part of the initial sign-in after entering the email address, magic code inputs are displayed with a focus on the first input so that the user can enter the magic code (Ref. screenshot below) So, firstly, we can do the same here by focusing back on the first input after submission of the incorrect magic code so that the user can revisit the entered code. Secondly, we can prevent resubmission on correction of any digit when all the digits are already present and, also, when the changed input is not the last input. This way, resubmission will be prevented on correction of any digits other than the last one. Anyway, the user always have the option to submit directly using the The only downside I see in this approach that correction of the last digit will result in resubmission if the user wanted to correct other digits as well. What changes do you think we should make in order to solve the problem?Note: The following code changes are tested with web versions. Once expected behavior is finalized, implementation also can be finalized.
Further, we also have to add
Test Resultmagiccode-issue-fix.mp4What alternative solutions did you explore? (Optional)The other alternate way is to clear all the text and focus to the first input. However, the downside here is that if the user wanted to correct only one or two digit, it will be inconvenient to enter all digits again. |
Bringing my proposal from here since this issue seems similar. ProposalPlease re-state the problem that we are trying to solve in this issue.As soon as you correct one digit, the magic code is resubmitted, preventing you from changing multiple digits
What is the root cause of that problem?This is because any time we change a digit in the OTP input, we'll send the API call again. When it's called too many times (>5 attempts), we'll be blocked from entering more and have to request a new code. What changes do you think we should make in order to solve the problem?
Some options to consider: Once we decide on the UX, the change should be straight forward. What alternative solutions did you explore? (Optional)NA |
@shawnborton Can you please help us decide on the UX here? There are a couple of suggestions in #28019 (comment). |
Hmm, that's interesting. Curious what @Expensify/design thinks too, but my gut reaction is to only trigger the submit if the last input was changed. |
This comment was marked as outdated.
This comment was marked as outdated.
@shawnborton Not sure if you had a look at this UX proposal too. The video there demonstrates this. There, we also refocus on the first input after submission so that the user can reverify. Curious to know feedback on this too. |
What I think is submit should be triggered automatically for the first time only, after that user should be click on button manually. |
If only one digit has to be corrected, I think, the user can always use the |
Let me try to summarise all the suggestions till now. Please add/correct if I missed any. |
For sure, that was an assumption that I could have made more clear. |
📣 @cubuspl42 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app! |
📣 @saranshbalyan-1234 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app! Offer link |
📣 @joh42 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app! |
thank you for taking a look @joelbettner ! |
PR has been raised, please check @cubuspl42 |
🎯 ⚡️ Woah @cubuspl42 / @saranshbalyan-1234, great job pushing this forwards! ⚡️ The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉
On to the next one 🚀 |
|
The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.86-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue: If no regressions arise, payment will be issued on 2023-10-25. 🎊 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.
For reference, here are some details about the assignees on this issue:
As a reminder, here are the bonuses/penalties that should be applied for any External issue:
|
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:
|
|
@cubuspl42 @joh42 please accept the invites on upwork/ |
Payment summary @cubuspl42 requires payment offer (Reviewer) - PAID $500 + $250 urgency |
@zanyrenney this is valid for urgency bonus #28019 (comment) |
updating and paid the bonuses. |
All payments complete. Handed in DM with Johannes. |
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:
Expected Result:
Users should be able to correct multiple digits in an incorrect magic code. Either we should not resubmit as soon as 1 digit has changed, or we should clear the magic code if it is incorrect allowing users to start from scratch
Actual Result:
As soon as you correct one digit, the magic code is resubmitted, preventing you from changing multiple digits
Workaround:
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.3.73-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
Notes/Photos/Videos: Any additional supporting documentation
Screen.Recording.2023-08-29.at.13.25.59.mov
Recording.1601.mp4
Expensify/Expensify Issue URL:
Issue reported by: @joh42
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693308839489339
View all open jobs on GitHub
Upwork Automation - Do Not Edit
The text was updated successfully, but these errors were encountered: