[HOLD for payment 2023-05-16] [HOLD, payment pending regression PR] [$1000] Back tooltip on personal information is in lowercase

[kavimuru]

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. Go to the Sittings > Workspace > Connect bank account
2. Go to the Step 3 of 5 and Choose your document
3. After selecting a document type check "Back" tooltip

Expected Result:

Back tooltip on personal information should be in uppercase

Actual Result:

Back tooltip on personal information is in lowercase

Workaround:

unknown

Platforms:

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

• [ ] Android / native
• [ ] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [x] MacOS / Chrome / Safari
• [x] MacOS / Desktop

Version Number: 1.2.98-2 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

https://user-images.githubusercontent.com/43996225/231001912-441937ef-3ed5-40fb-aa2c-37ed5a2a7a6a.mp4

Expensify/Expensify Issue URL: Issue reported by: @ayazhussain79 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1681146014939409

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014397c5d33abcb652
• Upwork Job ID: 1646960894014050304
• Last Price Increase: 2023-04-14

[MelvinBot]

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

[MelvinBot]

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

[stephanieelliott]

Hey @kavimuru can you fill out the Platforms section of the issue body please? Once you do, I can test!

[Victor-Nyagudi]

It looks like the back button is from the <Onfido /> element obtained from the Onfido Web SDK.

This happens inside RequestorOnfidoStep.js.

//...
<ScrollView contentContainerStyle={styles.flex1}>
    <Onfido
        sdkToken={this.props.onfidoToken}
        onUserExit={() => {
            BankAccounts.clearOnfidoToken();
            BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
        }}
        onError={() => {
        // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can       try again.
            Growl.error(this.props.translate('onfidoStep.genericError'), 10000);
            BankAccounts.clearOnfidoToken();
            BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
        }}
        onSuccess={(onfidoData) => {
            this.submit(onfidoData);
        }}
     />
</ScrollView>
//...

The Web SDK Flow has a configuration option called forceCrossDevice that has been set to true which then shows the above-mentioned <Onfido /> element prompting the user to continue on mobile after selecting a document.

Onfido offers some UI customization options which have already been tweaked to match Expensify's design inside BaseOnfidoWeb.js - this is also where the config options are set - however, I don't see any option to change the back button's case from their docs.

The customization options for the document screen in question are limited to colors, fonts, and maybe border radii.

The only string that appears to be customizable is that of the optional welcome screen which I believe Expensify isn't currently using on Web.

I'm not sure if this counts as a proposal per se, but I think changing the back button's case is an option Onfido hasn't provided. If it's accepted as one, then well and good - just thought I'd offer some insight from my findings.

By the way, @kavimuru, did you mean title case instead of upper case for the back button?

• back - lowercase
• Back - title case
• BACK - uppercase

[MelvinBot]

📣 @Victor-Nyagudi! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Victor-Nyagudi]

Contributor details Your Expensify account email: vicktests4@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0136b5e59ffbb32395

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[kavimuru]

@stephanieelliott updated the platform section.

[MelvinBot]

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

[stephanieelliott]

Hm, interesting proposal @Victor-Nyagudi! Adding the External label so we can get more eyes on it.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~014397c5d33abcb652

[MelvinBot]

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

[MelvinBot]

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

[aman-atg]

Proposal

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

Back tooltip on personal information is in lowercase

What is the root cause of that problem?

This is coming from Onfido ( en & es )

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

We can either ignore it or raise an issue on https://github.com/onfido/onfido-sdk-ui.

What alternative solutions did you explore? (Optional)

[MelvinBot]

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

[Prince-Mendiratta]

Proposal

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

In this issue, we can notice that the tooltip/label for the Onfido back button is set to 'back'. In Expensify, we use Sentence case whenever possible and this causes an inconsistency in the app.

What is the root cause of that problem?

This is default behaviour of Onfido. I doubt that reaching out to the Onfido SDK maintainers would have an effect since this is an inconsistency problem for Expensify and the change of 'back' to 'Back' wouldn't be a priority to them.

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

In order to solve this issue, we can use the localisation customisation ability to Onfido. This will let us declare custom phrases that can be used across the whole Onfido flow and we can customize everything we want here. I think this can be a major undertaking involving the Copy team as well for both English and Spanish and doing a textual personalisation of the Onfido flow.

In order to customise locales, different techniques need to be applied for Web, ios and Android. The links to the respective documentation are:

• Web: https://documentation.onfido.com/sdk/web/#custom-languages
• Android: https://documentation.onfido.com/sdk/web/#custom-languages
• iOS: https://documentation.onfido.com/sdk/web/#custom-languages

Each of these implementation is a bit complicated but I'm pretty sure I can do this. As for the phrases, we will create our own versions of them for both, spanish and english and depending on the user's chosen language, pass it to the Onfido SDK here.

For this specific issue, we will need to change the Onfido phrase - generic.back

I was able to put together a quick POC for the Web, which is the issue here:

https://user-images.githubusercontent.com/54077356/232149445-f907f064-c4f3-43ae-9b3c-34019383ee14.mp4

[mollfpr]

Reviewing now...

[mollfpr]

Thank you guys for the proposals!

As @Victor-Nyagudi and @aman-atg point out, that is a default from the Onfido SDK, and asking the Onfido maintainer to change the copy will not be a priority for them.

[mollfpr]

@Prince-Mendiratta The documentation links for iOS and Android you attach is pointing to the web SDK. Do you mean we need to do this https://github.com/onfido/react-native-sdk#android https://github.com/onfido/react-native-sdk#ios for the native to add custom localization?

[Prince-Mendiratta]

@mollfpr that's weird, I swear I think I added the right links 😕

here it is:

• Web: https://documentation.onfido.com/sdk/web/#custom-languages
• iOS: https://documentation.onfido.com/sdk/ios/#custom-languages | https://github.com/onfido/react-native-sdk#ios
• Android: https://documentation.onfido.com/sdk/android/#localization | https://github.com/onfido/react-native-sdk#android

[mollfpr]

@Prince-Mendiratta So, we will update the iOS and Android with the Onfido RN SDK, right? As the documentation is pretty clear about custom the localization on native platform, it will do for you to work on it?

[Prince-Mendiratta]

@mollfpr Actually we need not do anything for iOS since the "back" tooltip is not shown there at all.

We will need to do for Android though since I can see the tooltip on long press on the back button. We need to add strings for the following:

• Web + Desktop.
• Android

I'm unable to get the tooltips on mWeb no neither device.

[mollfpr]

Thanks @Prince-Mendiratta, that make sense to me!

Let's go with @Prince-Mendiratta proposal where they assure it can be done within our app.

For @Victor-Nyagudi and @aman-atg thank your proposal and insight about this issue. I'll be happy to review your proposals on other issues. 👍

🎀 👀 🎀 C+ reviewed!

[neil-marcellini]

I also like @Prince-Mendiratta's proposal. Since the issue is only on Web and Desktop, we only need to implement the fix there. Let's keep it simple for now and only fix the capitalization of the back button. If you like, you could make a feature request for us to localize the entire Onfido flow, but I'm not sure it's a priority.

[MelvinBot]

📣 @Prince-Mendiratta You have been assigned to this job by @neil-marcellini! 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 📖

[Prince-Mendiratta]

PR is up for review!

Applied in upwork.

cc @mollfpr @neil-marcellini

Thanks all!

[stephanieelliott]

PR is on staging

[MelvinBot]

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

[MelvinBot]

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

• https://github.com/Expensify/App/pull/17602

If no regressions arise, payment will be issued on 2023-04-28. :confetti_ball:

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

[MelvinBot]

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:

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

[sobitneupane]

PR of this issue caused https://github.com/Expensify/App/issues/17789 regression.

[neil-marcellini]

@Prince-Mendiratta would you please submit a PR to fix the regression?

[Prince-Mendiratta]

PR up for regression fix!

RCA on the regression and why it wasn't caught is here.

[stephanieelliott]

https://github.com/Expensify/App/pull/17943#issue-1682183369 is still undergoing QA, "waiting for payment" period will restart once it is merged.

[stephanieelliott]

PR on staging

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/17943

If no regressions arise, payment will be issued on 2023-05-16. :confetti_ball:

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

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

[Prince-Mendiratta]

Sharing the timeline of this issue to help with the eventual analysis, calculated with this tool.

🐛 Issue created at: Mon, 10 Apr 2023 21:24:56 GMT 🧯 Help Wanted at: Fri, 14 Apr 2023 19:37:50 GMT 🕵🏻 Contributor assigned at: Tue, 18 Apr 2023 16:50:24 GMT 🛸 PR created at: Tue, 18 Apr 2023 17:07:37 GMT 🎯 PR merged at: Thu, 20 Apr 2023 20:39:34 GMT 😱 Regression PR merged at: Fri, 28 Apr 2023 19:30:11 GMT 💰 Timeline Bonus: No bonus applicable.

[mollfpr]

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR: [@mollfpr] 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: [@mollfpr] 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:

Another improvement to Onfido languages, so no offending PR.

[@mollfpr] Determine if we should create a regression test for this bug.

Maybe we can add the check to Workspace - Add bank account - Plaid back account selector screen?

[mollfpr]

Propose update for Workspace - Add bank account - Plaid back account selector screen TC added a step 14-18

1. Log in with a applause.expensifail account (that does not have any bank account already added)
2. Enable staging Web secure server in Account Preferences if disabled
3. Navigate to the add bank account modal (Workspace settings > Add bank account)
4. Select the "Connect with plaid" method to add a bank account
5. On the bank account list select "Wells Fargo". You'll be redirected to the "First Platypus Bank"
6. Enter the credentials "user_good / pass_good"
7. If a verification is prompted - select mobile and enter "credentials_good" as the verification mode
8. Checkmark the "Plaid Checking" and "Plaid Saving"
9. Checkmark the 2 options under "additional information you want to share" and submit
10. Check the T&C and click "Connect account information" and submit
11. Click on the last confirmation on the plaid modal
12. Verify you're redirected to the "choose an account" screen in NewDot
13. Select the bank account ending in 0000 but do not proceed to the next screen
14. Hover on the "back" arrow button
15. Verify that it's show the text "Back"
16. Change the account language preference to Spanish
17. Hover again on the "back" arrow button
18. Verify that it's show the text "Volver"
19. Click on the "back" arrow from the right panel and redo [4-12]
20. Verify the selector shows "choose an account" and there is no button below
21. Select the bank account ending in 1111
22. Verifya submit button appears below the selector
23. Click on the button
24. Verifyyou see the "Company Information" form

[stephanieelliott]

Hey @Prince-Mendiratta @mollfpr @ayazhussain79 can you please apply for the job in Upwork so that we can pay this out? Thank you!

[Prince-Mendiratta]

Hiya @stephanieelliott! Already applied here when I put in the PR, I'm not able to reapply as it says job closed.

[ayazhussain79]

@stephanieelliott This job is no longer available link, can you please send the invitation here

[michaelhaxhiu]

Jumping in on behalf of Steph.

• Bug reporter @ayazhussain79 = $250
• Contributor @Prince-Mendiratta = $1000 (we had a regression, which is now fixed)
• C+ @mollfpr = $1000

New job post - https://www.upwork.com/jobs/~012bae1e57414f2d48

[michaelhaxhiu]

I sent offers to all 3 just now.

[michaelhaxhiu]

Checklist complete and QA test posted in E/E repository https://github.com/Expensify/Expensify/issues/286071

[MrJithil]

Are you still looking for someone to fix this? If yes, I can land a PR in 24 hours.

[melvin-bot[bot]]

📣 @MrJithil! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[ayazhussain79]

@michaelhaxhiu Offer accepted