fix: auto-open RocketCDN banner when clicking dashboard Get RocketCDN button

[hellofromahmed]

Description

Fixes #8473

When clicking the "Get RocketCDN" button on the dashboard tab, the user is sent to the CDN tab. Since 3.22, the RocketCDN Pro purchasing banner is collapsed by default (for users with 1–2 free-tier pages). This fix ensures the banner is automatically expanded when navigating from that button.

Type of change

• New feature (non-breaking change which adds functionality).
• Bug fix (non-breaking change which fixes an issue).
• Enhancement (non-breaking change which improves an existing functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as before).
• Sub-task of #(issue number)
• Chore
• Release

Detailed scenario

What was tested

Manual:

• When merging the PR fix: hide RocketCDN billing date for free and non-Pro subscribers (#8447) #8468

  • User with 1–2 free-tier pages: clicking "Get RocketCDN" on dashboard navigates to CDN tab and the purchasing banner auto-expands (was collapsed before).
  • User with 3 pages (limit reached): banner is already expanded — click handler detects it's not collapsed and does nothing.

• For fresh installation without even free rocketcdn subscription:

  • Currently we don't show RocketCDN banner when there is no page added into free and when adding a page we don't show the banner (unless having the fix from fix: hide RocketCDN billing date for free and non-Pro subscribers (#8447) #8468), @DahmaniAdame is this expected to hide the banner when no page is added, so what happens for customers without RocketCDN active and clicking on this button?

Another question @DahmaniAdame , when the user uses his own CDN, he still see the button in the dashboard but when clicking on it we go to CDN tab only because the banner itself is in the RocketCDN tab and it's hard to force the user to switch tabs because this will remove his own CDN from being applied in frontend.

How to test

1. Install WP Rocket and connect to a RocketCDN free account with 1 or 2 pages added.
2. Go to the WP Rocket Dashboard tab.
3. In the RocketCDN section, click the "Get RocketCDN" button.
4. Confirm the CDN tab opens and the RocketCDN Pro purchasing banner is automatically expanded (not collapsed).

Affected Features & Quality Assurance Scope

• WP Rocket dashboard tab → RocketCDN status row → "Get RocketCDN" button
• CDN tab → RocketCDN Pro purchasing banner (expand/collapse state)
• No other features are impacted.

Technical description

Documentation

dashboard-status.php renders the "Get RocketCDN" CTA link (shown when the user has no active paid RocketCDN subscription). An id="wpr-rocketcdn-dashboard-btn" was added to the link so JS can target it precisely.

In rocketcdn.js, a click handler on #wpr-rocketcdn-dashboard-btn (inside the load event, where bigCTA, ctaToggle, and toggleBigCTAState are already in scope) checks whether the purchasing banner (#wpr-rocketcdn-cta) has the wpr-rocketcdn-cta--collapsed class. If so, it calls the existing toggleBigCTAState() function which handles expanding the banner, updating aria-expanded attributes, and firing the Mixpanel tracking event — no duplication of logic.

The check prevents double-toggling in cases where the banner is already expanded or hidden.

New dependencies

None.

Risks

Low. The change is purely additive — a new ID attribute on a link and a new click listener. The click handler is guarded by both the element existence check (if ( dashboardCTABtn )) and the collapsed-state check, so it has no effect if the element is missing or the banner is not in the expected state.

Mandatory Checklist

Code validation

• I validated all the Acceptance Criteria. If possible, provide screenshots or videos.
• I triggered all changed lines of code at least once without new errors/warnings/notices.
• I implemented built-in tests to cover the new/changed code.

Code style

• I wrote a self-explanatory code about what it does.
• I protected entry points against unexpected inputs.
• I did not introduce unnecessary complexity.
• Output messages (errors, notices, logs) are explicit enough for users to understand the issue and are actionnable.

Unticked items justification

• Built-in tests: The change is a purely client-side JS behavior (click → DOM class toggle) with no server-side logic; no unit test infrastructure exists for this type of interaction in the project.
• Output messages: No new output messages introduced; this change affects only JS behaviour in the admin UI.

Additional Checks

• In the case of complex code, I wrote comments to explain it.
• When possible, I prepared ways to observe the implemented system (logs, data, etc.).
• I added error handling logic when using functions that could throw errors (HTTP/API request, filesystem, etc.)

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity · 0 duplication

Metric	Results
Complexity	0
Duplication	0

View in Codacy

🟢 Coverage 100.00% diff coverage

Metric	Results
Coverage variation	Report missing for 2072e451
Diff coverage	✅ 100.00% diff coverage (50.00%)

View coverage diff in Codacy

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (2072e45)	Report Missing	Report Missing	Report Missing
Head commit (e3ece92)	44282	20311	45.87%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#8474)	1	1	100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

¹ Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct.

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.}

[DahmaniAdame]

@wordpressfan
On RocketCDN free page:

• No page added no banner
• 1 - 2 pages added, banner visible but not expanded
• 3 pages aded, banner visibile + expanded

Full specs can be found here

when the user uses his own CDN, he still see the button in the dashboard but when clicking on it we go to CDN tab only because the banner itself is in the RocketCDN tab and it's hard to force the user to switch tabs because this will remove his own CDN from being applied in frontend

The dashboard has its own banner that will be expended, with its own views and interactions recorded on Mixpanel.

The user shouldn't be moved between pages to see the banner would it be they are on RocketCDN Free or Other CDN.

Full specs here