[PAID] [$500] Web - Persistence of Tax Selection When Navigating to Other Pages and Returning

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

Version Number: v1.4.59-3
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: Applause - Internal Team

Action Performed:

, Go to Settings > Profile > Workspace.
2, Open workspace and access "More Features" to enable taxes.
3, Select taxes from the list.
4, Navigate to another section.
5, Return to the previous section.

Expected Result:

Taxes should be deselected automatically upon navigating away and back.

Actual Result:

Selected taxes persist even after navigating to another section and returning, causing inconsistency between sections

Workaround:

n/a

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6436622_1712142766433.Screen_Recording_2024-04-03_at_3.57.46_AM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0167f336d9308b4e85
Upwork Job ID: 1775671638527598592
Last Price Increase: 2024-04-03
Automatic offers:

s77rt | Reviewer | 0
Krishna2323 | Contributor | 0

@strepanier03

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

We think that this bug might be related to #wave-collect - Release 1

@strepanier03

@strepanier03 I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

Proposal

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

Web - Persistence of Tax Selection When Navigating to Other Pages and Returning

What is the root cause of that problem?

We don't have any logic to clean the selected options when route changes. Also it does happen on almost every policy feature page including the members page. The component doesn't get completely removed so the states are preserved.

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

We should add a useEffect which will run on route change and clear all the selection. Or instead of using route name we can use useIsFocused and clear the selected option when screen is not focused.

    const isFocused = useIsFocused();

    useEffect(() => {
        if (isFocused) {
            return;
        }
        setSelectedCategories({});
    }, [isFocused]);

    useEffect(
        () => () => {
            setSelectedTaxesIDs([]);
        },
        [],
    );

If we use isFocused then we can also remove the part where we clear selected options when navigating to option settings.

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 142 to 145 in ebc8de8

    
           const navigateToCategorySettings = (category: PolicyOption) => { 
        
               setSelectedCategories({}); 
        
               Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, category.keyForList)); 
        
           };

Result

Proposal updated

Added details

@ZhenjaHorbach

Actually
It's regression from

#38849

That PR didn't touch the Taxes folder @ZhenjaHorbach :)

@ZhenjaHorbach

That PR didn't touch the Taxes folder @ZhenjaHorbach :)

I deleted comment )

Proposal

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

Persistence of Tax Selection When Navigating to Other Pages and Returning
Selected Taxes still remain when we shift tabs.

What is the root cause of that problem?

OpenPolicyTaxesPage is not called everytime we navigate to page the taxes page. To compare with categories, we call OpenPolicyCategoriesPage everytime we open the categories page, this overwrites the locally selected values and we get data from the database.

Now OpenPolicyTaxesPage is not called because when we compare from where we take the route prop (it's onyx value) from PolicyRoute:

App/src/pages/workspace/withPolicy.tsx

Lines 100 to 102 in 255f841

    
           type WithPolicyProps = WithPolicyOnyxProps & { 
        
               route: PolicyRoute; 
        
           };

But for categories we take the value of route from it's onyx value:

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 51 in 4fcd8a1

policyCategories: OnyxEntry<OnyxTypes.PolicyCategories>;

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

We need to update the type such that we should fetch value from TaxRates

App/src/types/onyx/Policy.ts

Line 61 in 255f841

type TaxRates = Record<string, TaxRate>;

Result Video:

simplescreenrecorder-2024-04-03_23.11.18.mp4

Alternative

Or we can define a onyxentry for poicy, this way we can avoid any possible regression, so we can define a new type and add it in existing WorkspaceTaxesPageProps:

type TaxesPageOnyxProps = {
    policy: OnyxEntry<Policy>;
};

I would prefer my alternative solution over main one :), as it would avoid any further possible regression

Job added to Upwork: https://www.upwork.com/jobs/~0167f336d9308b4e85

@strepanier03

@strepanier03, offer accepted 🙃

Accepted from side too

Great, thank you both, finishing up now.

In the future, since you can't update the labels or the title, feel free to ping me earlier for payment issues that fail automation. Failed automation = black hole for issues, sorry about that.

Contracts paid and closed. Thanks again, and apologies for the long delay.

Cause of the issue:

The issue you are facing is because the default behaviour of stack navigation, when you select certain checkboxes on your “Taxes” screen it is stored in the state of the component and when you move to a different screen the stack navigation pushes the “Taxes” screen on to the navigation stack and the newer screen gets mounted and displayed, and what happens to the “Taxes” screen is that in never gets unmounted and is saved with it’s current state in the navigation stack. And when you move back to your “Taxes” screen it pops the “Taxes” screen back from the navigation stack and as it never got unmounted it displays again with it’s previous state and same checkboxes will still be selected. That’s just the default behaviour to the stack navigation.

Ideal solution of the issue:

The best solution in my opinion is that we should use “useIsFocused” hook from “react-navigation” what it does is that when the screen is in focus(being displayed) it returns a value of “true” which you can use in “useEffect” hook from “react” to check when the screen is popped from the navigation stack and comes into the focus and we can then update the state of the checkboxes to their initial state.

@uzairusman1425

📣 @uzairusman1425! 📣
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:

Make sure you've read and understood the contributing guidelines.
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.
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.
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>

@uzairusman1425

@uzairusman1425 Thanks for your interest! This issue is not open for proposals as it's already fixed. Please checkout issues with Help Wanted label where you can post a proposal. You should also check the contributing guide (linked in the comment above)

Proposal

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

Selected taxes remain selected after navigating to other pages from the tax selection page.

What is the root cause of that problem?

The selected tax ids state variable is not reset on navigating away from the tax selection page.

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

Solution 1 (local)

Use a reset state variable (useState) set to true when navigating away from the tax selection page. Call a reset function to reset the selected Tax IDs if reset is set to true in a useEffect hook with the reset state as a dependency (WorkspaceTaxesPage).

Solution 2 (global)

Add a callback function to the navigate method of Navigate (if a callback is required for other components/pages too) to reset the required state variables on navigate.

@mariapeever

📣 @mariapeever! 📣
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:

Make sure you've read and understood the contributing guidelines.
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.
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.
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>

Contributor details
Your Expensify account email: hello@mariapeever.com
Upwork Profile Link: https://www.upwork.com/freelancers/mariapeever

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

@mariapeever

@mariapeever Please check my comment above

Navigation Menu

Repository navigation

[PAID] [$500] Web - Persistence of Tax Selection When Navigating to Other Pages and Returning #39492

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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?

Result

Proposal updated

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?

Result Video:

Alternative

45 remaining items

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?

Solution 1 (local)

Solution 2 (global)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const navigateToCategorySettings = (category: PolicyOption) => {
	setSelectedCategories({});
	Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, category.keyForList));
	};

	type WithPolicyProps = WithPolicyOnyxProps & {
	route: PolicyRoute;
	};

[PAID] [$500] Web - Persistence of Tax Selection When Navigating to Other Pages and Returning #39492

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 3, 2024

kbecciv commented on Apr 3, 2024

kbecciv commented on Apr 3, 2024

Krishna2323 commented on Apr 3, 2024

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?

Result

Krishna2323 commented on Apr 3, 2024

Proposal updated

allgandalf commented on Apr 3, 2024

ZhenjaHorbach commented on Apr 3, 2024

allgandalf commented on Apr 3, 2024

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?

Result Video:

Alternative

melvin-bot commented on Apr 3, 2024

45 remaining items

Krishna2323 commented on May 10, 2024

s77rt commented on May 10, 2024

strepanier03 commented on May 10, 2024

strepanier03 commented on May 10, 2024

uzairusman1425 commented on May 10, 2024

melvin-bot commented on May 10, 2024

s77rt commented on May 11, 2024

mariapeever commented on May 11, 2024

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?

Solution 1 (local)

Solution 2 (global)

melvin-bot commented on May 11, 2024

mariapeever commented on May 11, 2024

melvin-bot commented on May 11, 2024

s77rt commented on May 12, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions