[HOLD for payment 2025-01-02] [$250] Android - Category - "Default tax rate" briefly changes back to the default one

@JmillsExpensify

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: 9.0.43-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #49867

Action Performed:

Open the app
Log in with a new expensifail account
Create a workspace
Navigate to Workspace settings - More features
Enable Taxes, Rules and Workflows
Navigate to Workspace settings - Categories
Tap on any category
Tap on "Default tax rate"
Select "Tax Rate 1 - 5%"
Tap on "Name"
Add a few characters after the current name and tap on the "Save" button

Expected Result:

"Default tax rate" should be the one I have set before

Actual Result:

"Default tax rate" briefly changes back to the default one when changing category name for the first time

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6622187_1727880113686.az_recorder_20241002_162644.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021844119049804579315
Upwork Job ID: 1844119049804579315
Last Price Increase: 2024-11-20
Automatic offers:

allgandalf | Contributor | 105084228
wildan-m | Contributor | 105358083

Issue Owner

Current Issue Owner: @JmillsExpensify

@JmillsExpensify

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Proposal

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

"Default tax rate" briefly changes back to the default one when changing category name for the first time

What is the root cause of that problem?

In

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

Lines 84 to 85 in 19a137d

    
           const defaultTaxRateText = useMemo(() => { 
        
               const taxID = CategoryUtils.getCategoryDefaultTaxRate(policy?.rules?.expenseRules ?? [], categoryName, policy?.taxRates?.defaultExternalID);

We use categoryName from url params to get tax rate name. However, after changing catefory name, categoryName remains old value for a brief moment before it gets updated:

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

Lines 62 to 67 in 19a137d

    
           useEffect(() => { 
        
               if (policyCategory?.name === categoryName || !policyCategory) { 
        
                   return; 
        
               } 
        
               navigation.setParams({categoryName: policyCategory?.name}); 
        
           }, [categoryName, navigation, policyCategory]);

And policy?.rules?.expenseRules would have data of new category name, which will make categoryName doesn't exist in the rules, CategoryUtils.getCategoryDefaultTaxRate returns default rate value.

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

We should use policyCategory?.name, as this value also gets updated simultaneously when changing category name.

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

Line 85 in 19a137d

    
           const taxID = CategoryUtils.getCategoryDefaultTaxRate(policy?.rules?.expenseRules ?? [], categoryName, policy?.taxRates?.defaultExternalID);

        const taxID = CategoryUtils.getCategoryDefaultTaxRate(policy?.rules?.expenseRules ?? [], policyCategory?.name ?? categoryName, policy?.taxRates?.defaultExternalID);

What alternative solutions did you explore? (Optional)

NA

Edited by proposal-police: This proposal was edited at 2024-10-16 16:07:27 UTC.

Proposal

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

"Default tax rate" briefly changes back to the default one

What is the root cause of that problem?

When we return to the category page from the edit category page, the function defaultTaxRateText is executed before categoryName is updated, so the function defaultTaxRateText still receives the old categoryName. However, since policy?.rules?.expenseRules has been updated, the logic inside the defaultTaxRateText function will return the defaultTaxRate. Because of this, we will see Tax displaying the old tax text that is defaultTaxRate.

The reason defaultTaxRateText is executed before categoryName is updated is that policy?.rules?.expenseRules was changed when we called RENAME_WORKSPACE_CATEGORY, and it is in the dependency of the useMemo hook of the function defaultTaxRateText.

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

Line 98 in 19a137d

}, [categoryName, policy?.rules?.expenseRules, policy?.taxRates, translate]);

After that, categoryName will update and set the new value in the URL parameters. Consequently, defaultTaxRateText will re-render again because categoryName changed in the dependencies of the useMemo hook, and defaultTaxRateText will update with the correct tax text.

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

Line 66 in 19a137d

navigation.setParams({categoryName: policyCategory?.name});

Because defaultTaxRateText renders twice, the first time it receives the old category and returns the default tax text, and the second time it receives the new category name and returns the correct tax text. So, this issue happens, and it only happens once.

This video describes what I mentioned above.

Screen.Recording.2024-10-24.at.19.03.25.mp4

This issue happened only once after the first editing of the category name due to changes in the policy?.rules?.expenseRules data object structure. In React, useEffect or useMemo use shallow comparison: React only compares references of objects/arrays, not their contents.

You can see in the JSON below that policy?.rules?.expenseRules changes after the first editing of the category name, and it will not change for the next edited category name because the policy?.rules?.expenseRules object structure does not change. Therefore, this issue will not happen with the next edited category name.

and policy?.rules?.expenseRules

This is policy?.rules?.expenseRules data

// Before editing the category name (from SetPolicyCategoryTax response)
[
  {
    "tax": { "field_id_TAX": { "externalID": "id_TAX_RATE_1" } },
    "applyWhen": [
      { "condition": "matches", "field": "category", "value": "Taxes" }
    ]
  }
]

// After editing the category name and going back to the category page(from RenameWorkspaceCategory response)

[
  {
    "applyWhen": [
      { "condition": "matches", "field": "category", "value": "Taxes" }
    ],
    "id": "671a27db42e27",
    "tax": { "field_id_TAX": { "externalID": "id_TAX_RATE_1" } }
  }
]

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

To resolve this issue, we must call defaultTaxRateText after the category name update is complete. To do that, we must delay going back until the category name has finished updating. Something like this:

// .src/pages/workspace/categories/EditCategoryPage.tsx#L52

    const editCategory = useCallback(
        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => {
            ....
+              InteractionManager.runAfterInteractions(() => {
+                requestAnimationFrame(() => {
 Navigation.goBack(
                isQuickSettingsFlow
                    ? ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName, backTo)
                    : ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName),
            );
+                });
+            });
        },
        [backTo, currentCategoryName, route.params.categoryName, route.params.policyID],
    );

What alternative solutions did you explore? (Optional)

alternative solutions 1

Or we can use the policyCategory data to get the new category name after editing to retrieve the default tax rate, because policyCategory has updated values that match with expenseRules

-     const taxID = CategoryUtils.getCategoryDefaultTaxRate(policy?.rules?.expenseRules ?? [], categoryName, policy?.taxRates?.defaultExternalID);
+    const taxID = CategoryUtils.getCategoryDefaultTaxRate(
+            policy?.rules?.expenseRules ?? [],
+            !policyCategory?.name 
+                ? categoryName 
+                : (policyCategory?.name !== categoryName 
+                    ? policyCategory?.name 
+                    : categoryName)
+            policy?.taxRates?.defaultExternalID,
+        );

Details

POC

Screen.Recording.2024-10-03.at.23.19.38.mov

@JmillsExpensify

@JmillsExpensify Eep! 4 days overdue now. Issues have feelings too...

@JmillsExpensify

@JmillsExpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

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

@abdulrahuman5196

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

Checklist ✅ , Pending Payment 💵

@JmillsExpensify

@JmillsExpensify, @arosiclair, @wildan-m, @allgandalf Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

@JmillsExpensify

@JmillsExpensify, @arosiclair, @wildan-m, @allgandalf Eep! 4 days overdue now. Issues have feelings too...

@JmillsExpensify

@JmillsExpensify, @arosiclair, @wildan-m, @allgandalf Eep! 4 days overdue now. Issues have feelings too...

@JmillsExpensify

@JmillsExpensify, @arosiclair, @wildan-m, @allgandalf Still overdue 6 days?! Let's take care of this!

@JmillsExpensify

@JmillsExpensify, @arosiclair, @wildan-m, @allgandalf 10 days overdue. I'm getting more depressed than Marvin.

@wildan-m

Apologies for the delay ya'll. Let me post the payment summary and get this one settled.

Payment summary:

Contributor: @wildan-m $250
Reviewer: @allgandalf $250

All contributors paid via Upwork, and regression test created. I'm closing this out!

Navigation Menu

Repository navigation

[HOLD for payment 2025-01-02] [$250] Android - Category - "Default tax rate" briefly changes back to the default one #50078

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?

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)

alternative solutions 1

87 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const defaultTaxRateText = useMemo(() => {
	const taxID = CategoryUtils.getCategoryDefaultTaxRate(policy?.rules?.expenseRules ?? [], categoryName, policy?.taxRates?.defaultExternalID);

	useEffect(() => {
	if (policyCategory?.name === categoryName \|\| !policyCategory) {
	return;
	}
	navigation.setParams({categoryName: policyCategory?.name});
	}, [categoryName, navigation, policyCategory]);

[HOLD for payment 2025-01-02] [$250] Android - Category - "Default tax rate" briefly changes back to the default one #50078

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 2, 2024

daledah commented on Oct 2, 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?

What alternative solutions did you explore? (Optional)

huult commented on Oct 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?

What alternative solutions did you explore? (Optional)

alternative solutions 1

melvin-bot commented on Oct 7, 2024

melvin-bot commented on Oct 9, 2024

melvin-bot commented on Oct 9, 2024

melvin-bot commented on Oct 9, 2024

87 remaining items

allgandalf commented on Dec 30, 2024

melvin-bot commented on Jan 6, 2025

melvin-bot commented on Jan 7, 2025

melvin-bot commented on Jan 8, 2025

melvin-bot commented on Jan 10, 2025

melvin-bot commented on Jan 13, 2025

JmillsExpensify commented on Jan 13, 2025

JmillsExpensify commented on Jan 13, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions