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

[kbecciv]

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?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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

[melvin-bot]

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

[kbecciv]

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

[kbecciv]

@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.

[Krishna2323]

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

[Krishna2323]

Proposal updated

• Added details

[allgandalf]

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 )

[allgandalf]

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

[melvin-bot]

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