[$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 [email protected] 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): [email protected]
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: @mernmaster2025

[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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[shawnborton]

Just to make sure I am following, it sounds like in the near future, this article will have a section/button for Classic but it doesn't quite yet?

Maybe we just remove the buttons if the article doesn't have both classic and newdot content on it... after all, you would know where you are having used the NewDot entry point to get here, right?

[MitchExpensify]

Just to make sure I am following, it sounds like in the near future, this article will have a section/button for Classic but it doesn't quite yet?

Yeah the idea is to make sure all pages have the right tag on them e.g.

Maybe we just remove the buttons if the article doesn't have both classic and newdot content on it... after all, you would know where you are having used the NewDot entry point to get here, right?

Fair, I'm not opposed to this option either. - What do you think @maddylewis ? Did we run into a problem previously with users getting confused that this tag solved for?

[shawnborton]

Let's see what Maddy thinks, but I feel like if the button doesn't actually toggle the content between New and Classic, then we should just omit it.

[daledah]

@daledah Are there any articles that don't have a tag? If you can gather some examples, we can use this issue to address them all consistently.

For example, this article — https://help.expensify.com/articles/expensify-classic/expenses/Expense-Types — doesn’t have a "tag" (in other words, a "tab"), whereas others, like the one referenced in our issue, do.

The tab is only needed when an article includes both "Expensify Classic" and "New Expensify" versions, allowing users to switch between them. If there's only one version (like in the article linked in this issue), then there's no need to display a tab, or the tag in this case should be shown as a non-clickable component.

[shubham1206agra]

@mernmaster2025 No need. Upwork is for contract payment only

[mernmaster2025]

What should I do now?

[shubham1206agra]

@srikarparsi Bump here

[shubham1206agra]

What should I do now?

@mernmaster2025 Wait

[mernmaster2025]

What should I do now?

@mernmaster2025 Wait

Okay

[srikarparsi]

This proposal looks good to me based on this comment. @rushatgabhane, do you think you could double check this if you have a second and we can move forward with implementation.

[srikarparsi]

Hey @rushatgabhane, bump on the above whenever you have a chance

[rushatgabhane]

@srikarparsi the proposal looks solid to me!

[melvin-bot]

📣 @mernmaster2025 You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[mernmaster2025]

Hi, @srikarparsi, I can't apply to the Upwork job, "This job is no longer available"

[srikarparsi]

Hmm interesting, @johncschuster do you know what could be causing this?

[mernmaster2025]

What should I do now?

[johncschuster]

Ah, it looks like the job was created automatically over 30 days ago. I think they automatically expire after a certain amount of time, and I think this one did.

I've just created the job again by copying the expired one.

@mernmaster2025 can you apply to the job using this link?: https://www.upwork.com/jobs/~021928472937398517527

[mernmaster2025]

Hi, @johncschuster , I applied to the Upwork job.

[melvin-bot]

@srikarparsi Whoops! This issue is 2 days overdue. Let's get this updated quick!

[johncschuster]

@mernmaster2025 I've sent an offer!

[mernmaster2025]

Hi, @johncschuster , I accepted an offer, I will prepare pull request asap.

[mernmaster2025]

Hi, @johncschuster , I am ready to create pull request.

[johncschuster]

@mernmaster2025 Great! Please follow the Contributing instructions for guidance on that.

[mernmaster2025]

Hi, @shubham1206agra , I checked pull request review. "Changed files ESLint check" is failed. Should I recreate pull request?