[Awaiting Payment 7th Sept] [$250] Add the modal prompts back to locked toggles in More features

[trjExpensify]

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: v9.0.24-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @trjExpensify
Slack conversation: https://expensify.slack.com/archives/C02NK2DQWUX/p1723775264453099?thread_ts=1723724132.692329&cid=C02NK2DQWUX

Action Performed:

1. Enable QBO
2. Go to More features
3. Click on a locked toggle (i.e Tags)

Expected Result:

A modal should appear explaining why it's locked.

Actual Result:

No modal appears, the cursor just turns to 🚫 on hover.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0126e97d02490a2603
• Upwork Job ID: 1827065354673239304
• Last Price Increase: 2024-08-23

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Current assignee @trjExpensify is eligible for the Bug assigner, not assigning anyone new.

[trjExpensify]

PR is here: #47533

[hungvu193]

PR is here: #47533

Can you add external label so we can get a C+ here? 😄

[melvin-bot]

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

[melvin-bot]

Current assignee @hungvu193 is eligible for the External assigner, not assigning anyone new.

[marcaaron]

Thanks for the issue @trjExpensify 🙇

[melvin-bot]

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

[codewaseem]

Proposal

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

Modal doesn't appear when clicking on the locked toggle switch.

What is the root cause of that problem?

The disabledAction callback prop for the items is missing. For example here:

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Lines 195 to 213 in f5e6354

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

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

Adding an appropriate disabledAction callback function to the list will solve this problem. For example:

{
            icon: Illustrations.FolderOpen,
            titleTranslationKey: 'workspace.moreFeatures.categories.title',
            subtitleTranslationKey: 'workspace.moreFeatures.categories.subtitle',
            isActive: policy?.areCategoriesEnabled ?? false,
            disabled: hasAccountingConnection,
            pendingAction: policy?.pendingFields?.areCategoriesEnabled,
            action: (isEnabled: boolean) => {
                if (!policyID) {
                    return;
                }
                if (hasAccountingConnection) {
                    setIsOrganizeWarningModalOpen(true);
                    return;
                }
                Category.enablePolicyCategories(policyID, isEnabled);
            },
            disabledAction: () => {
                setIsOrganizeWarningModalOpen(true);
            },
        }

Result

What alternative solutions did you explore? (Optional)

[melvin-bot]

@trjExpensify, @hungvu193, @marcaaron, @thesahindia Eep! 4 days overdue now. Issues have feelings too...

[trjExpensify]

Updated labels, payout will be due on Sept 7th after hitting prod 3 days ago.

[trjExpensify]

Waiting out the regression period, Melv.

[melvin-bot]

@trjExpensify @hungvu193 @marcaaron @thesahindia this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[trjExpensify]

Payment is due tomorrow, so doing this today.

• $250 to @hungvu193 for the fix
• $250 to @thesahindia for the C+ review

Feel free to request, closing!

[garrettmknight]

$250 approved for @hungvu193

[garrettmknight]

$250 approved for @thesahindia