[Due for payment 2025-11-19] [Due for payment 2025-11-13] [$250] Make More Features animation more obvious and add tap target

[dubielzyk-expensify]

Problem

We've seen user confusion when users go to add more features in the workspace editor not understanding what happens next.

Solution

1. Make feature tapable when enabled. When a feature is enabled, we should make the left side of the container tapable to navigate to the feature while retaining the switch toggle to enable/disabled the feature

2. Increase the timing of the animation to 10 seconds and change color to highlight color. This'll ensure the highlight stays on the screen for longer increasing users visibility into the newly added feature. Current behavior:

CleanShot.2025-10-27.at.12.01.37.mp4

In addition to making the fade-out delay animation 10 seconds, let's make a color change to our highlight color, that way we standardize to other patterns we have.

Let's leave the rest of the animation alone as it's working well, only the fade-out delay time and the color should be tweaked on this element.

cc @Expensify/design @puneetlath

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021982630516513187248
• Upwork Job ID: 1982630516513187248
• Last Price Increase: 2025-10-27
• Automatic offers:
• abzokhattab | Reviewer | 109263841
• nkdengineer | Contributor | 109263842

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

Improvement

What is the root cause of that problem?

Improvement

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

1. Create a new prop in ToggleSettingOptionRow component like onPress

2. Then add contentArea to ToggleSettingOptionRow

    const contentArea = (
        <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
            {!!icon && (
                <Icon
                    src={icon}
                    height={ICON_SIZE}
                    width={ICON_SIZE}
                    additionalStyles={[styles.mr3]}
                />
            )}
            {customTitle ?? (
                <View style={[styles.flexColumn, styles.flex1]}>
                    <Text style={[styles.textNormal, styles.lh20, titleStyle]}>{title}</Text>
                    {!shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
                </View>
            )}
        </View>
    );

                    {shouldMakeContentPressable ? (
                        <PressableWithoutFeedback
                            style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
                            onPress={onPress}
                            accessibilityLabel={title}
                            role="button"
                            accessible={false}
                        >
                            {contentArea}
                        </PressableWithoutFeedback>
                    ) : (
                        contentArea
                    )}
                    <Switch
                       ...

3. Define onPress for the item in WorkspaceMoreFeaturesPage example

            onPress: () => {
                if (!policyID) {
                    return;
                }
                Navigation.navigate(ROUTES.WORKSPACE_DISTANCE_RATES.getRoute(policyID));
            },

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 135 to 148 in 5b2116f

	const spendItems: Item[] = [
	{
	icon: Illustrations.Car,
	titleTranslationKey: 'workspace.moreFeatures.distanceRates.title',
	subtitleTranslationKey: 'workspace.moreFeatures.distanceRates.subtitle',
	isActive: policy?.areDistanceRatesEnabled ?? false,
	pendingAction: policy?.pendingFields?.areDistanceRatesEnabled,
	action: (isEnabled: boolean) => {
	if (!policyID) {
	return;
	}
	enablePolicyDistanceRates(policyID, isEnabled, distanceRateCustomUnit);
	},
	},

4. Then pass it as onPress here

      onPress={item.onPress}

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 398 to 413 in 5b2116f

	<ToggleSettingOptionRow
	icon={item.icon}
	disabled={item.disabled}
	disabledAction={item.disabledAction}
	title={translate(item.titleTranslationKey)}
	titleStyle={styles.textStrong}
	subtitle={translate(item.subtitleTranslationKey)}
	switchAccessibilityLabel={translate(item.subtitleTranslationKey)}
	isActive={item.isActive}
	pendingAction={item.pendingAction}
	onToggle={item.action}
	showLockIcon={item.disabled}
	errors={item.errors}
	onCloseError={item.onCloseError}
	/>
	</View>

Increase the timing of the animation to 10 seconds and change color to highlight color.

5. We need to update this const

App/src/CONST/index.ts

Lines 207 to 208 in 9c3ecb2

	ANIMATED_HIGHLIGHT_END_DELAY: 800,
	ANIMATED_HIGHLIGHT_END_DURATION: 2000,

    ANIMATED_HIGHLIGHT_END_DELAY: 7000,
    ANIMATED_HIGHLIGHT_END_DURATION: 3000,

then we need to pass highlightColor to animatedHighlightStyle here

    highlightColor: theme.messageHighlightBG,

App/src/components/HighlightableMenuItem.tsx

Lines 19 to 23 in 9c3ecb2

	const animatedHighlightStyle = useAnimatedHighlightStyle({
	shouldHighlight: highlighted ?? false,
	height: flattenedWrapperStyles?.height ? Number(flattenedWrapperStyles.height) : styles.sectionMenuItem.height,
	borderRadius: flattenedWrapperStyles?.borderRadius ? Number(flattenedWrapperStyles.borderRadius) : styles.sectionMenuItem.borderRadius,
	});

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

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @nkdengineer Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[mohammadjafarinejad]

Proposal

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

Users are confused when adding more features in the workspace editor and do not understand what happens next.

What is the root cause of that problem?

New feature request

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

1. Update Animation Timing (src/CONST/index.ts)

Change ANIMATED_HIGHLIGHT_END_DURATION from 2000 to 10000:

App/src/CONST/index.ts

Line 208 in b138080

ANIMATED_HIGHLIGHT_END_DURATION: 2000,

2. Update Highlight Color (src/hooks/useAnimatedHighlightStyle/index.ts)

Change default from theme.border to theme.highlightBG:

// JSDoc
highlightColor?: string; // @default theme.highlightBG

// Implementation
backgroundColor: interpolateColor(repeatableValue, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.highlightBG]),

// Dependencies
}, [borderRadius, height, backgroundColor, highlightColor, theme.appBG, theme.highlightBG]);

3. Add Tap Target (src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx)

Add onNavigate prop and conditionally render pressable area:

type ToggleSettingOptionRowProps = {
    // ... existing props
    onNavigate?: () => void;
};

// Render logic: wrap left content in PressableWithoutFeedback when onNavigate provided and isActive
{onNavigate && isActive ? (
    <PressableWithoutFeedback onPress={onNavigate} /* ... */>{leftContent}</PressableWithoutFeedback>
) : (
    <View>{leftContent}</View>
)}

4. Add Navigation Routes (src/pages/workspace/WorkspaceMoreFeaturesPage.tsx)

Add route property to Item type and pass to each feature:

type Item = {
    // ... existing props
    route?: Route;
};

// Add routes to all items
spendItems: [
    { /* Distance Rates */ route: ROUTES.WORKSPACE_DISTANCE_RATES.getRoute(policyID) },
    { /* Expensify Card */ route: ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID) },
    { /* Company Cards */ route: ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID) },
    { /* Per Diem */ route: ROUTES.WORKSPACE_PER_DIEM.getRoute(policyID) },
];

manageItems: [
    { /* Workflows */ route: ROUTES.WORKSPACE_WORKFLOWS.getRoute(policyID) },
    { /* Rules */ route: ROUTES.WORKSPACE_RULES.getRoute(policyID) },
];

earnItems: [
    { /* Invoices */ route: ROUTES.WORKSPACE_INVOICES.getRoute(policyID) },
];

organizeItems: [
    { /* Categories */ route: ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID) },
    { /* Tags */ route: ROUTES.WORKSPACE_TAGS.getRoute(policyID) },
    { /* Taxes */ route: ROUTES.WORKSPACE_TAXES.getRoute(policyID) },
];

integrateItems: [
    { /* Accounting */ route: ROUTES.POLICY_ACCOUNTING.getRoute(policyID) },
    { /* Receipt Partners */ route: ROUTES.WORKSPACE_RECEIPT_PARTNERS.getRoute(policyID) },
];

// Pass to ToggleSettingOptionRow
<ToggleSettingOptionRow
    onNavigate={item.route ? () => Navigation.navigate(item.route as Route) : undefined}
/>

What alternative solutions did you explore? (Optional)

None

[TaduJR]

Proposal

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

Users are confused when they add features in the workspace editor ("More Features" page) because:

1. After enabling a feature, users don't understand what happens next or where to find the newly enabled feature
2. The highlight animation that appears when a feature is enabled is too subtle (wrong color and fades too quickly)
3. There's no way to navigate to an enabled feature's settings page directly from the More Features page

What is the root cause of that problem?

Root Cause 1 - Animation visibility:
The current highlight animation uses theme.border color (gray) and fades out after only 800ms, making it barely noticeable to users.

App/src/CONST/index.ts

Line 207 in bceff96

ANIMATED_HIGHLIGHT_END_DELAY: 800,

App/src/hooks/useAnimatedHighlightStyle/index.ts

Line 74 in bceff96

backgroundColor: interpolateColor(repeatableValue, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]),

Root Cause 2 - Missing navigation:
The ToggleSettingOptionRow component only supports toggling the switch, but doesn't provide a way to tap the feature item itself to navigate to its settings when enabled.

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 156 to 204 in bceff96

	return (
	<OfflineWithFeedback
	pendingAction={pendingAction}
	errors={errors}
	errorRowStyles={[styles.mt2]}
	style={[wrapperStyle]}
	onClose={onCloseError}
	>
	<View style={styles.pRelative}>
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, shouldPlaceSubtitleBelowSwitch && styles.h10]}>
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
	{!!icon && (
	<Icon
	src={icon}
	height={ICON_SIZE}
	width={ICON_SIZE}
	additionalStyles={[styles.mr3]}
	/>
	)}
	{customTitle ?? (
	<View style={[styles.flexColumn, styles.flex1]}>
	<Text style={[styles.textNormal, styles.lh20, titleStyle]}>{title}</Text>
	{!shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
	</View>
	)}
	</View>
	<Switch
	disabledAction={disabledAction}
	accessibilityLabel={switchAccessibilityLabel}
	onToggle={(isOn) => {
	shouldAnimateAccordionSection.set(true);
	onToggle(isOn);
	}}
	isOn={isActive}
	disabled={disabled}
	showLockIcon={showLockIcon}
	/>
	</View>
	{shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
	<Accordion
	isExpanded={isAccordionExpanded}
	style={accordionStyle}
	isToggleTriggered={shouldAnimateAccordionSection}
	>
	{subMenuItems}
	</Accordion>
	</View>
	</OfflineWithFeedback>
	);

The component renders the icon, title, and subtitle alongside the switch, but the entire left section is not interactive when the feature is enabled.

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

Change 1: Update Animation Constants

Update the fade-out delay from 800ms to 10 seconds (10000ms) to give users more time to notice the highlight.

File: src/CONST/index.ts

App/src/CONST/index.ts

Line 207 in bceff96

ANIMATED_HIGHLIGHT_END_DELAY: 800,

// Current
ANIMATED_HIGHLIGHT_END_DELAY: 800,

// Change to
ANIMATED_HIGHLIGHT_END_DELAY: 10000,

Change 2: Update Highlight Color

Change the default highlight color from theme.border (gray) to theme.highlightBG (yellow) to make it more visible and consistent with other highlight patterns in the app.

File: src/hooks/useAnimatedHighlightStyle/index.ts

App/src/hooks/useAnimatedHighlightStyle/index.ts

Lines 39 to 42 in bceff96

	/** The base highlightColor used for the highlight animation, defaults to theme.border
	* @default theme.border
	*/
	highlightColor?: string;

// Current
/** The base highlightColor used for the highlight animation, defaults to theme.border
 * @default theme.border
 */
highlightColor?: string;

// Change to
/** The base highlightColor used for the highlight animation, defaults to theme.highlightBG
 * @default theme.highlightBG
 */
highlightColor?: string;

App/src/hooks/useAnimatedHighlightStyle/index.ts

Line 74 in bceff96

backgroundColor: interpolateColor(repeatableValue, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]),

// Current
backgroundColor: interpolateColor(repeatableValue, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]),

// Change to
backgroundColor: interpolateColor(repeatableValue, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.highlightBG]),

Change 3: Add Tap Target to ToggleSettingOptionRow

Add a new optional prop onPressWhenEnabled to make the left content area (icon + title + subtitle) tappable when the feature is enabled.

File: src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 1 to 16 in bceff96

	import type {ReactNode} from 'react';
	import React, {useEffect, useMemo} from 'react';
	import {View} from 'react-native';
	import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
	import Accordion from '@components/Accordion';
	import Icon from '@components/Icon';
	import OfflineWithFeedback from '@components/OfflineWithFeedback';
	import RenderHTML from '@components/RenderHTML';
	import Switch from '@components/Switch';
	import Text from '@components/Text';
	import useAccordionAnimation from '@hooks/useAccordionAnimation';
	import useThemeStyles from '@hooks/useThemeStyles';
	import Parser from '@libs/Parser';
	import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
	import type IconAsset from '@src/types/utils/IconAsset';

Add import for PressableWithFeedback:

import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 17 to 80 in bceff96

	type ToggleSettingOptionRowProps = {
	/** Icon to be shown for the option */
	icon?: IconAsset;
	/** Title of the option */
	title?: string;
	/** Custom title for the option */
	customTitle?: React.ReactNode;
	/** Subtitle of the option */
	subtitle?: string | ReactNode;
	/** Accessibility label for the switch */
	switchAccessibilityLabel: string;
	/** subtitle should show below switch and title */
	shouldPlaceSubtitleBelowSwitch?: boolean;
	/** Whether or not the text should be escaped */
	shouldEscapeText?: boolean;
	/** Whether should render subtitle as HTML or as Text */
	shouldParseSubtitle?: boolean;
	/** Used to apply styles to the outermost container */
	wrapperStyle?: StyleProp<ViewStyle>;
	/** Used to apply styles to the Title */
	titleStyle?: StyleProp<TextStyle>;
	/** Used to apply styles to the Subtitle */
	subtitleStyle?: StyleProp<TextStyle>;
	/** Used to apply styles to the Accordion */
	accordionStyle?: StyleProp<ViewStyle>;
	/** Whether the option is enabled or not */
	isActive: boolean;
	/** Callback to be called when the switch is toggled */
	onToggle: (isEnabled: boolean) => void;
	/** SubMenuItems will be shown when the option is enabled */
	subMenuItems?: React.ReactNode;
	/** If there is a pending action, we will grey out the option */
	pendingAction?: PendingAction;
	/** Any error message to show */
	errors?: Errors;
	/** Callback to close the error messages */
	onCloseError?: () => void;
	/** Whether the toggle should be disabled */
	disabled?: boolean;
	/** Whether to show the lock icon even if the switch is enabled */
	showLockIcon?: boolean;
	/** Callback to fire when the switch is toggled in disabled state */
	disabledAction?: () => void;
	};

Add new prop to the type definition:

type ToggleSettingOptionRowProps = {
    // ... existing props ...

    /** Callback to fire when the left content is pressed (only when enabled) */
    onPressWhenEnabled?: () => void;
};

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 83 to 105 in bceff96

	function ToggleSettingOptionRow({
	icon,
	title,
	customTitle,
	subtitle,
	subtitleStyle,
	accordionStyle,
	switchAccessibilityLabel,
	shouldPlaceSubtitleBelowSwitch,
	shouldEscapeText = undefined,
	shouldParseSubtitle = false,
	wrapperStyle,
	titleStyle,
	onToggle,
	subMenuItems,
	isActive,
	disabledAction,
	pendingAction,
	errors,
	onCloseError,
	disabled = false,
	showLockIcon = false,
	}: ToggleSettingOptionRowProps) {

Add the new prop to the component parameters:

function ToggleSettingOptionRow({
    icon,
    title,
    customTitle,
    subtitle,
    subtitleStyle,
    accordionStyle,
    switchAccessibilityLabel,
    shouldPlaceSubtitleBelowSwitch,
    shouldEscapeText = undefined,
    shouldParseSubtitle = false,
    wrapperStyle,
    titleStyle,
    onToggle,
    subMenuItems,
    isActive,
    disabledAction,
    pendingAction,
    errors,
    onCloseError,
    disabled = false,
    showLockIcon = false,
    onPressWhenEnabled,  // Add this new parameter
}: ToggleSettingOptionRowProps) {

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 156 to 159 in bceff96

	return (
	<OfflineWithFeedback
	pendingAction={pendingAction}
	errors={errors}

After the subTitleView useMemo, add a new variable for the content area:

const contentArea = (
    <>
        {!!icon && (
            <Icon
                src={icon}
                height={ICON_SIZE}
                width={ICON_SIZE}
                additionalStyles={[styles.mr3]}
            />
        )}
        {customTitle ?? (
            <View style={[styles.flexColumn, styles.flex1]}>
                <Text style={[styles.textNormal, styles.lh20, titleStyle]}>{title}</Text>
                {!shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
            </View>
        )}
    </>
);

App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

Lines 164 to 194 in bceff96

	<View style={styles.pRelative}>
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, shouldPlaceSubtitleBelowSwitch && styles.h10]}>
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
	{!!icon && (
	<Icon
	src={icon}
	height={ICON_SIZE}
	width={ICON_SIZE}
	additionalStyles={[styles.mr3]}
	/>
	)}
	{customTitle ?? (
	<View style={[styles.flexColumn, styles.flex1]}>
	<Text style={[styles.textNormal, styles.lh20, titleStyle]}>{title}</Text>
	{!shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
	</View>
	)}
	</View>
	<Switch
	disabledAction={disabledAction}
	accessibilityLabel={switchAccessibilityLabel}
	onToggle={(isOn) => {
	shouldAnimateAccordionSection.set(true);
	onToggle(isOn);
	}}
	isOn={isActive}
	disabled={disabled}
	showLockIcon={showLockIcon}
	/>
	</View>
	{shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}

Replace the existing render logic with conditional rendering:

<View style={styles.pRelative}>
    <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, shouldPlaceSubtitleBelowSwitch && styles.h10]}>
        {isActive && onPressWhenEnabled ? (
            <PressableWithFeedback
                accessibilityLabel={title}
                onPress={onPressWhenEnabled}
                style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
            >
                {contentArea}
            </PressableWithFeedback>
        ) : (
            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
                {contentArea}
            </View>
        )}
        <Switch
            disabledAction={disabledAction}
            accessibilityLabel={switchAccessibilityLabel}
            onToggle={(isOn) => {
                shouldAnimateAccordionSection.set(true);
                onToggle(isOn);
            }}
            isOn={isActive}
            disabled={disabled}
            showLockIcon={showLockIcon}
        />
    </View>
    {shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
    <Accordion
        isExpanded={isAccordionExpanded}
        style={accordionStyle}
        isToggleTriggered={shouldAnimateAccordionSection}
    >
        {subMenuItems}
    </Accordion>
</View>

Change 4: Add Navigation to WorkspaceMoreFeaturesPage

Add navigation routes and handlers for each feature when they are enabled.

File: src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 59 to 70 in bceff96

	type Item = {
	icon: IconAsset;
	titleTranslationKey: TranslationPaths;
	subtitleTranslationKey: TranslationPaths;
	isActive: boolean;
	disabled?: boolean;
	action: (isEnabled: boolean) => void;
	disabledAction?: () => void;
	pendingAction: PendingAction | undefined;
	errors?: Errors;
	onCloseError?: () => void;
	};

Update the Item type to include navigation route:

type Item = {
    icon: IconAsset;
    titleTranslationKey: TranslationPaths;
    subtitleTranslationKey: TranslationPaths;
    isActive: boolean;
    disabled?: boolean;
    action: (isEnabled: boolean) => void;
    disabledAction?: () => void;
    pendingAction: PendingAction | undefined;
    errors?: Errors;
    onCloseError?: () => void;
    onPressWhenEnabled?: () => void;  // Add this new property
};

Add navigation routes for each item. For example, for the categories item:

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 256 to 271 in bceff96

	const organizeItems: Item[] = [
	{
	icon: illustrations.FolderOpen,
	titleTranslationKey: 'workspace.moreFeatures.categories.title',
	subtitleTranslationKey: 'workspace.moreFeatures.categories.subtitle',
	isActive: policy?.areCategoriesEnabled ?? false,
	disabled: hasAccountingConnection,
	disabledAction: onDisabledOrganizeSwitchPress,
	pendingAction: policy?.pendingFields?.areCategoriesEnabled,
	action: (isEnabled: boolean) => {
	if (!policyID) {
	return;
	}
	enablePolicyCategories(policyID, isEnabled, policyTagLists, policyCategories, allTransactionViolations, true);
	},
	},

{
    icon: illustrations.FolderOpen,
    titleTranslationKey: 'workspace.moreFeatures.categories.title',
    subtitleTranslationKey: 'workspace.moreFeatures.categories.subtitle',
    isActive: policy?.areCategoriesEnabled ?? false,
    disabled: hasAccountingConnection,
    disabledAction: onDisabledOrganizeSwitchPress,
    pendingAction: policy?.pendingFields?.areCategoriesEnabled,
    action: (isEnabled: boolean) => {
        if (!policyID) {
            return;
        }
        enablePolicyCategories(policyID, isEnabled, policyTagLists, policyCategories, allTransactionViolations, true);
    },
    onPressWhenEnabled: () => {
        if (!policyID) {
            return;
        }
        Navigation.navigate(ROUTES.WORKSPACE_CATEGORIES.getRoute(policyID));
    },
},

Apply similar pattern for all features:

• Tags: ROUTES.WORKSPACE_TAGS.getRoute(policyID)
• Taxes: ROUTES.WORKSPACE_TAXES.getRoute(policyID)
• Distance Rates: ROUTES.WORKSPACE_DISTANCE_RATES.getRoute(policyID)
• Expensify Card: ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID)
• Company Cards: ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID)
• Per Diem: ROUTES.WORKSPACE_PER_DIEM.getRoute(policyID)
• Workflows: ROUTES.WORKSPACE_WORKFLOWS.getRoute(policyID)
• Rules: ROUTES.WORKSPACE_RULES.getRoute(policyID)
• Invoices: ROUTES.WORKSPACE_INVOICES.getRoute(policyID)
• Accounting: ROUTES.POLICY_ACCOUNTING.getRoute(policyID)

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 392 to 416 in bceff96

	const renderItem = useCallback(
	(item: Item) => (
	<View
	key={item.titleTranslationKey}
	style={[styles.workspaceSectionMoreFeaturesItem, shouldUseNarrowLayout && styles.flexBasis100, shouldUseNarrowLayout && StyleUtils.getMinimumWidth(0)]}
	>
	<ToggleSettingOptionRow
	icon={item.icon}
	disabled={item.disabled}
	disabledAction={item.disabledAction}
	title={translate(item.titleTranslationKey)}
	titleStyle={styles.textStrong}
	subtitle={translate(item.subtitleTranslationKey)}
	switchAccessibilityLabel={translate(item.subtitleTranslationKey)}
	isActive={item.isActive}
	pendingAction={item.pendingAction}
	onToggle={item.action}
	showLockIcon={item.disabled}
	errors={item.errors}
	onCloseError={item.onCloseError}
	/>
	</View>
	),
	[styles, StyleUtils, shouldUseNarrowLayout, translate],
	);

Update the renderItem function to pass onPressWhenEnabled:

const renderItem = useCallback(
    (item: Item) => (
        <View
            key={item.titleTranslationKey}
            style={[styles.workspaceSectionMoreFeaturesItem, shouldUseNarrowLayout && styles.flexBasis100, shouldUseNarrowLayout && StyleUtils.getMinimumWidth(0)]}
        >
            <ToggleSettingOptionRow
                icon={item.icon}
                disabled={item.disabled}
                disabledAction={item.disabledAction}
                title={translate(item.titleTranslationKey)}
                titleStyle={styles.textStrong}
                subtitle={translate(item.subtitleTranslationKey)}
                switchAccessibilityLabel={translate(item.subtitleTranslationKey)}
                isActive={item.isActive}
                pendingAction={item.pendingAction}
                onToggle={item.action}
                showLockIcon={item.disabled}
                errors={item.errors}
                onCloseError={item.onCloseError}
                onPressWhenEnabled={item.onPressWhenEnabled}  // Add this new prop
            />
        </View>
    ),
    [styles, StyleUtils, shouldUseNarrowLayout, translate],
);

[github-actions]

⚠️ @TaduJR Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[dmkt9]

Proposal

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

We've seen user confusion when users go to add more features in the workspace editor not understanding what happens next.

What is the root cause of that problem?

Improvement

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

1. In ToggleSettingOptionRow, we add a new prop called linkToOpenWhenClickOnContent.
   

   App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

   Line 83 in bceff96

   function ToggleSettingOptionRow({

2. When linkToOpenWhenClickOnContent is not undefined and isActive === true, we wrap the content with PressableWithoutFeedback here and use Navigation.navigate to handle the navigation.
   

   App/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

   Lines 165 to 166 in bceff96

   	<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, shouldPlaceSubtitleBelowSwitch && styles.h10]}>
   	<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>

3. The highlight duration and color for the item can be adjusted here. You can choose suitable values for highlightStartDuration, highlightColor, and backgroundColor:
   

   App/src/components/HighlightableMenuItem.tsx

   Lines 19 to 23 in bceff96

   	const animatedHighlightStyle = useAnimatedHighlightStyle({
   	shouldHighlight: highlighted ?? false,
   	height: flattenedWrapperStyles?.height ? Number(flattenedWrapperStyles.height) : styles.sectionMenuItem.height,
   	borderRadius: flattenedWrapperStyles?.borderRadius ? Number(flattenedWrapperStyles.borderRadius) : styles.sectionMenuItem.borderRadius,
   	});

What alternative solutions did you explore? (Optional)

N/A

[nkdengineer]

To make this easier to test, this is test brach. And this is the result

Screen.Recording.2025-10-27.at.09.30.01.mov