[Due for payment 2025-06-23] [$250] Help - The help doc contains a non-navigable button

[nlemma]

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.1.21-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #59248
Email or phone of affected tester (no customers): htad26+dskufgsdugti@gmail.com
Issue reported by: Applause Internal Team
Device used: Windows 10/Chrome, iPhone 13/Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Navigate to settings > Help
3. Go to new expensify > expenses and payments
4. Check different articles inside this section (Like "Connect a Business Bank Account")
5. Hover over the "New Expensify"
6. Click on it

Expected Result:

The button leads to a page

Actual Result:

Nothing happens after clicking on the button

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6787901_1743424613346.2025-03-31_15_25_59.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021917318911040852147
• Upwork Job ID: 1917318911040852147
• Last Price Increase: 2025-05-27

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @MitchExpensify (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.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-17 10:10:14 UTC.

Proposal

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

• Nothing happens after clicking on the button

What is the root cause of that problem?

• The current logic applies the clickable class to the tab regardless of whether both Expensify Classic and New Expensify contents are present. When only one of them is available, the tab remains styled as interactive, but clicking it has no effect. The logic responsible for this behavior can be found here.

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

• We should modify the logic so the clickable style is only applied when both tab contents are present. This will remove the misleading cursor and prevent the tab from appearing interactive when there’s no alternative to switch to.

Update the file as follows:

...
const clickable = expensifyClassicContent && newExpensifyContent;

if (expensifyClassicContent) {
    ...
    if (clickable) {
        tab.classList.add('clickable');
    }
}

if (newExpensifyContent) {
    ...
    if (clickable) {
        tab.classList.add('clickable');
    }
}

• Also, move the relevant cursor style into a standalone CSS class to make the behavior more explicit and easier to maintain:

App/docs/_sass/_main.scss

Line 973 in 3c62f31

cursor: pointer;

#platform-tabs > .clickable{
    cursor: pointer;
}

• This ensures that the pointer cursor is only shown when the tab is genuinely interactive.

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)

Solution 1

• We can only render the tab component if both expensifyClassicContent and newExpensifyContent are available:

App/docs/assets/js/platform-tabs.js

Lines 1 to 2 in 3c62f31

	const expensifyClassicContent = document.getElementById('expensify-classic');
	const newExpensifyContent = document.getElementById('new-expensify');

Solution 2

• We can modify the tab's visual style (e.g. reduce opacity or add a disabled indicator) when only one tab is present to signal its static nature. It is up to design. Below are examples style:

#platform-tabs > .badge{
    border-style: solid;
    border-width: 2px;
    border-color: #082419; 
    background-color: transparent;
    border-radius: 4px;
    text-align: center;
}

• Then update the file as follows:

...
const isBadge = !expensifyClassicContent || !newExpensifyContent;

if (expensifyClassicContent) {
    ...
    if (badge) {
        tab.classList.add('badge');
    }
}

if (newExpensifyContent) {
    ...
    if (badge) {
        tab.classList.add('badge');
    }
}

[MitchExpensify]

That is not a button and this is expected

[MitchExpensify]

I'm curious what you think though @maddylewis, master of helpdot, are the New Expensify labels expected on every page? I notice some without them

[daledah]

@MitchExpensify Yes, it's not actually a button, but we're styling it like one (including the cursor pointer), which could confuse users into thinking it's clickable.

[maddylewis]

@MitchExpensify - ah yes, some articles not having the Expensify Classic / New Expensify tag is a known issue that im working on updating. as I've been optimizing the content for AgentZero, i will add the label if it doesn't already exist.

that's quite manual / slow, though. if we want a contributor to add the corresponding label to each resource, i think we should go for it!

additionally, if we want to change the code so that the label looks more like a label and less like a button, i think that's also a solid improvement!

[MitchExpensify]

Agreed! I think the next steps here could be:

1. Have design give us their recommendation on any change to the tag (I've tagged design for this)
2. @daledah are their articles that do not have tag? If you can collect the examples we can use this issue to correct it everywhere

Also, I'm going to reassign this to a new BZ member to take on the baton as I've dropped the team