[HOLD for BugZero Checklist] [$1000] current currency is not highlighted and not marked with :heavy_check_mark:

[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. click on + button
2. select send money option
3. click on currency

Expected Result:

current currency should be highlighted and marked with ✔️ (same as Timezone, Pronouns)

Actual Result:

current currency not highlighted

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: v1.2.99-4
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

Recording.218.mp4

Screen.Recording.2023-04-12.at.4.57.17.PM.mov

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015d6db25e1b8518af
• Upwork Job ID: 1649369664727408640
• Last Price Increase: 2023-04-21

[MelvinBot]

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

[NicMendonca]

Hmm, I think this is a stylistic preference, not a bug. I think it's is very clear which is the current currency:

[PrashantMangukiya]

@NicMendonca please click the currency marked with yellow square in your image, it will open Select currency screen. On that screen CA is not highlighted with bold and marked with green check mark.

So in this issue we are talking about it. You can go to Timezone, Pronouns page to see the exact behaviour what should be expected result for this issue.

Here is quick video I recorded to make it more clear. So this issue should not be closed.

Currency.mov

[Prince-Mendiratta]

@NicMendonca I too think this issue is about the list itself, not the label

[Prince-Mendiratta]

Proposal

Posting proposal early as per new guidelines for the eventual review

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

In this issue, we can notice that on the Select a currency page, the Options selector does not have the selected / default currency marked with a tick, as in other pages like Timezone, Language, Pronouns.

What is the root cause of that problem?

Unlike other pages, we do not have a customIcon and the boldStyle set for the options that are displayed on the OptionsSelector on the IOUCurrencySelection page. This results in the default currency not being checkmarked and neither being bold.

In order for an item to be checkmarked, when we are creating the objects for the options that will be displayed on the OptionsList via the OptionsSelector, the object must have the customIcon and boldStyle key, which is missing on the OptionsSelector.

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

To solve this issue, we need to account for the selected currency that is chosen by the user by default and set the custom icon to a green checkmark and apply a bold style to that currency. In order to do that, we will have to perform the following additions:

1. To get the default currency that is chosen by the user, we need the Onyx key ONYXKEYS.IOU. We will import that by adding the key for that in the withOnyx call for IOUCurrencySelection.
2. Next, we will declare the respective propTypes and defaultProps for iou prop.
3. Next, we need to import the green checkmark. This will be done by using the following code and adding the relevant dependencies:
   

   App/src/pages/settings/Profile/TimezoneSelectPage.js

   Line 19 in 5d69c8e

   const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};

4. Once this is done, we need to modify the getCurrencyOptions method on the IOUCurrencySelection page. We need to include the customIcon as a key in the object where if the iterated currency code equals the default currency mode, we will set the icon as the green checkmark else as undefined.
5. We also need to include the boldStyle key in the object such that if the iterated currency code equals the default currency mode, we will set the value of boldStyle to true.
   

   App/src/pages/iou/IOUCurrencySelection.js

   Lines 78 to 82 in 0763be5

   	return _.map(this.props.currencyList, (currencyInfo, currencyCode) => ({
   	text: `${currencyCode} - ${CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, currencyCode)}`,
   	currencyCode,
   	keyForList: currencyCode,
   	}));

6. Once this has been done, the green checkmark and bold style will be applied to the selected option. However, in order to improve the experience and be consistent with other pages, we also need to scroll the OptionsList to the default selected currency when the page is initially opened. To do this, we need to add a prop initiallyFocusedOptionKey to the OptionsSelector where it's value will be this.props.iou.selectedCurrencyCode.
   

   App/src/pages/iou/IOUCurrencySelection.js

   Line 122 in 0763be5

   <OptionsSelector

What alternative solutions did you explore? (Optional)

None

[PrashantMangukiya]

Proposal

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

Current currency is not highlighted and not marked with checkmark.

What is the root cause of that problem?

Within IOUCurrencySelection.js we are creating currency options via getCurrencyOptions() function

App/src/pages/iou/IOUCurrencySelection.js

Lines 77 to 83 in 42bea4b

	getCurrencyOptions() {
	return _.map(this.props.currencyList, (currencyInfo, currencyCode) => ({
	text: `${currencyCode} - ${CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, currencyCode)}`,
	currencyCode,
	keyForList: currencyCode,
	}));
	}

We can see that here there is not any condition to highlight the selected currency. This is the root cause of the problem.

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

We have to update getCurrencyOptions() function, so it will set the customIcon and boldStyle for selected currency as shown below:

// Add this const  
const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};

getCurrencyOptions() {
    return _.map(this.props.currencyList, (currencyInfo, currencyCode) => {
        const isCurrentCurrency = currencyCode === this.props.iou.selectedCurrencyCode;
        return {
            text: `${currencyCode} - ${CurrencySymbolUtils.getLocalizedCurrencySymbol(this.props.preferredLocale, currencyCode)}`,
            currencyCode,
            keyForList: currencyCode,
            customIcon: isCurrentCurrency ? greenCheckmark : undefined,
            boldStyle: isCurrentCurrency,
        };
    });
}

We have to import iou as props using withOnyx as shown in pseudo code below, we also need to define iou prop type.

export default compose(
    ....
    withOnyx({
       ...
        iou: {key: ONYXKEYS.IOU}, // ADD THIS LINE
    }),
    ....
)(IOUCurrencySelection);

It will solve the issue and works as expected as shown in results video.

What alternative solutions did you explore? (Optional)

None

Results

Web.mov

[gadhiyamanan]

bump @NicMendonca

[NicMendonca]

Hmmm, I still think this is a stylistic preference and not a bug. Timezone and Pronouns are setting you set in your profile, and the currency you use for sending/ requesting money is ad-hoc but seems to be some passion about it here 😊