[Due for payment 2025-02-10] [$250] Add toggle for enable/disable to each category row in `Categories` page of workspace settings

[jamesdeanexpensify]

Problem
This has been brought up pretty regularly (most recently here), but many members are getting confused with the current design of the Categories page in NewDot. More specifically, they think that checking the box to the left of each category = "enabling" the category, when in fact it does nothing at all.

Solution
Make it super clear as to whether a category is enabled/disabled and also make it super clear how to take that action if you want to change it. We'll do that by adding a toggle in the Status column - if toggled to the left, the category is disabled. If right, enabled.

Screenshot

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866915346233579211
• Upwork Job ID: 1866915346233579211
• Last Price Increase: 2024-12-11
• Automatic offers:
• abzokhattab | Contributor | 105384076

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[github-actions]

zoeb Your proposal will be dismissed because you did not follow the proposal template.

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-12-13 14:31:53 UTC.

Proposal

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

Add a toggle to enable/disable each category row in the Categories page of workspace settings.

What is the root cause of that problem?

This is a new feature request.

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

To enhance the Categories page and ensure consistency across related pages:

1. Update the Categories Page

Modify the rightElement here

With this switch also we need to add this function that triggers the on press effect

Code Changes

const updateWorkspaceRequiresCategory = useCallback(
    (value: boolean, categoryName: string) => {
        Category.setWorkspaceCategoryEnabled(policyId, {[categoryName]: {name: categoryName, enabled: value}});
    },
    [policyId],
);

const categoryList = useMemo(
    () =>
        lodashSortBy(Object.values(policyCategories ?? {}), 'name', localeCompare).map((value) => {
            const isDisabled = value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
            return {
                text: value.name,
                keyForList: value.name,
                isSelected: !!selectedCategories[value.name] && canSelectMultiple,
                isDisabled,
                pendingAction: value.pendingAction,
                errors: value.errors ?? undefined,
                rightElement: (
                    <Switch
                        isOn={value.enabled}
                        accessibilityLabel={translate('workspace.categories.enableCategory')}
                        onToggle={(newValue) => updateWorkspaceRequiresCategory(newValue, value.name)}
                    />
                ),
            };
        }),
    [policyCategories, selectedCategories, canSelectMultiple, translate, updateWorkspaceRequiresCategory],
);

2. Update the Tags Page

• Modify the rightElement here to use this switch Additionally, copy the updateWorkspaceTagEnabled function for the on toggle effect.
• for mutlilevel tags we should update the workspace tags page here to use this switch additionally we need to update the WorkspaceViewTagsPage here to use the switch as well

3. Update the Taxes Page

• Apply the same toggle functionality to the Taxes page here for consistency across all related pages.

4. Update the Distance rates Page

• Apply the same toggle functionality to the Taxes page here with this switch and the same on toggle function

5. Update the List values Page

• Optional: we can also do the same in the ReportFieldsListValuesPage

6. also as mentioned in the other proposal, we may need to add the isDisabled prop in case the pendingAction is delete. this can be tested in the offline tests in the PR
7. for code optimization we can move the shared on toggle code to a util function and call it when needed

POC

Screen.Recording.2024-12-10.at.00.04.15.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

None.

[dannymcclain]

@CortneyOfstad / @jamesdeanexpensify can we label this external?