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

@gadhiyamanan

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:

click on + button
select send money option
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?

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

@NicMendonca

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

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

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

@NicMendonca

@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

@NicMendonca

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

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:

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.
Next, we will declare the respective propTypes and defaultProps for iou prop.
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};
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.

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, 
        
           }));

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

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

@NicMendonca

bump @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 😊

@sonialiap

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

@rushatgabhane

@rushatgabhane checklist please :) #17372 (comment)

The PR that introduced the bug has been identified. Link to the PR: This is a consistency bug. We added a checkmark to timezone selection in this PR. But it's out of scope of PR to go and update all pages to add a checkmark.
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: https://github.com/Expensify/App/pull/12201/files#r1206076584
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. No
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 N.A.

@sonialiap

Hi @sonialiap, I completed the checklist. We can now close this issue.

@rushatgabhane

Thanks @rushatgabhane !

Navigation Menu

Repository navigation

[HOLD for BugZero Checklist] [$1000] current currency is not highlighted and not marked with ✔️ #17372

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

57 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

[HOLD for BugZero Checklist] [$1000] current currency is not highlighted and not marked with ✔️ #17372

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

MelvinBot commented on Apr 13, 2023

MelvinBot commented on Apr 13, 2023

Bug0 Triage Checklist (Main S/O)

NicMendonca commented on Apr 14, 2023

PrashantMangukiya commented on Apr 14, 2023

Prince-Mendiratta commented on Apr 18, 2023

Prince-Mendiratta commented on Apr 18, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

PrashantMangukiya commented on Apr 18, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

gadhiyamanan commented on Apr 21, 2023

NicMendonca commented on Apr 21, 2023

57 remaining items

melvin-bot commented on May 23, 2023

melvin-bot commented on May 23, 2023

sonialiap commented on May 25, 2023

rushatgabhane commented on May 25, 2023

rushatgabhane commented on May 25, 2023

sonialiap commented on May 29, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions