A4A: Update KB article links to view articles via the Help center. #107829

jkguidaven · 2025-12-22T11:03:53Z

Related to https://linear.app/a8c/issue/A4A-1942/fix-a4a-dashboard-links-to-help-center-docs

NOTE: This is not an exhaustive list and only some of the links are updated. Those will be addressed on follow-up PRs.

Proposed Changes

This pull request refactors how external Knowledge Base (KB) links are handled across the Automattic for Agencies frontend. Instead of opening KB articles in a new tab, clicking these links now opens the relevant article directly in the in-app Help Center modal, providing a more integrated user experience. This change is implemented consistently across multiple components and sections by introducing and utilizing a new showSupportGuide method from the useHelpCenter hook.

Help Center Integration and Link Handling:

Introduced a new showSupportGuide method in the useHelpCenter hook, enabling programmatic navigation to specific KB articles within the Help Center modal. (client/a8c-for-agencies/hooks/use-help-center.ts) [1] [2]
Updated all relevant components and sections (e.g., team management, WooPayments, migrations, partner directory, referrals) to use showSupportGuide for KB article links, replacing direct external links with in-app modal navigation. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27]

User Experience Improvements:

Ensured that all "Learn more" or KB article links now open within the Help Center modal instead of navigating away from the app or opening a new browser tab, resulting in a smoother and more consistent user experience. [1] [2] [3] [4] [5] [6] [7] [8] [9]

Code Consistency and Cleanup:

Removed now-unnecessary href, target, and rel attributes from KB anchor tags and buttons, and replaced them with click handlers that trigger the Help Center modal. [1] [2] [3] [4] [5] [6] [7] [8] [9]
Updated all relevant imports to include the new useHelpCenter hook where necessary. [1] [2] [3] [4] [5] [6] [7] [8] [9]

These changes collectively modernize the way help content is presented, keeping users within the application context and offering a more seamless support experience.

Why are these changes being made?

Using the Help center to view KB articles is less disruptive because it displays the article inline instead of opening a new tab.

Testing Instructions

Use the A4A live link and navigate to /overview page.
Verify the following if it works correctly.

Description	Image
In the Partner Directory Dashboard screen
In the Teams page (empty list)
In the WooPayments product card
In the Migrations FAQ
In the Referrals and WooPayments commission card

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-12-22T11:04:03Z

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-166632

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-166632&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-166632&env=a8c-for-agencies

Dashboard live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-166632&env=dashboard

matticbot · 2025-12-22T11:05:40Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

agents-manager
help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/a4a/kb-link-to-point-help-center on your sandbox.

matticbot · 2025-12-22T11:08:05Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~1120 bytes added 📈 [gzipped])

Details

name                                parsed_size           gzip_size
a8c-for-agencies-partner-directory       +514 B  (+0.1%)     +144 B  (+0.1%)
a8c-for-agencies-woopayments             +490 B  (+0.0%)     +151 B  (+0.0%)
a8c-for-agencies-referrals               +462 B  (+0.0%)     +165 B  (+0.0%)
a8c-for-agencies-team                    +440 B  (+0.0%)     +159 B  (+0.0%)
a8c-for-agencies-sites                   +440 B  (+0.0%)     +152 B  (+0.0%)
a8c-for-agencies-migrations              +438 B  (+0.0%)     +157 B  (+0.0%)
a8c-for-agencies-marketplace             +423 B  (+0.0%)     +147 B  (+0.0%)
a8c-for-agencies-settings                +378 B  (+0.1%)      +70 B  (+0.1%)
a8c-for-agencies-reports                 +378 B  (+0.0%)     +118 B  (+0.0%)
a8c-for-agencies-purchases               +378 B  (+0.0%)      +97 B  (+0.0%)
a8c-for-agencies-plugins                 +378 B  (+0.0%)      +87 B  (+0.0%)
a8c-for-agencies-overview                +378 B  (+0.0%)     +118 B  (+0.0%)
a8c-for-agencies-learn                   +378 B  (+0.0%)     +192 B  (+0.0%)
a8c-for-agencies-feedback                +378 B  (+0.1%)      +89 B  (+0.1%)
a8c-for-agencies-exclusive-offers        +378 B  (+0.0%)     +192 B  (+0.0%)
a8c-for-agencies-client                  +378 B  (+0.0%)     +118 B  (+0.0%)
a8c-for-agencies-agency-tier             +378 B  (+0.0%)      +89 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

yashwin

It works as expected.

However, I left some comments. Please let me know your thoughts.

yashwin · 2026-01-07T09:51:18Z

...sections/marketplace/products-overview/product-card/woopayments-custom-description/index.tsx

-									></a>
-								),
+								// eslint-disable-next-line jsx-a11y/anchor-is-valid
+								a: <a onClick={ onLearnMoreClick } href="#" />,


Can we use a Button here?

<Button onClick={ onLearnMoreClick } variant="link"> { translate( 'Learn more.' ) } </Button>

Hey Yashwin, I decided to leave this as is for now, since converting it to a core component would change its styling and break the pattern. We will handle these later and ensure all our links use the core component, but for this PR we will ignore it for now.

yashwin · 2026-01-07T09:52:21Z

...ctions/marketplace/products-overview/product-card/woopayments-revenue-share-notice/index.tsx

+									onClick={ () =>
+										showSupportGuide(
+											'https://agencieshelp.automattic.com/knowledge-base/the-automattic-for-agencies-client-plugin/'
+										)
+									}
+									href="#"


Same here. I think we can use a Button.

yashwin · 2026-01-07T09:52:56Z

...encies/sections/migrations/primary/migrations-overview-v2/sections/migrations-faqs/index.tsx

+								onClick={ () => {
+									dispatch( recordTracksEvent( 'calypso_a4a_migrations_payout_kb_link_click' ) );
+									showSupportGuide(
+										'https://agencieshelp.automattic.com/knowledge-base/automattic-for-agencies-earnings/'
+									);
+								} }
+								href="#"


Same as above.

Same as my comment above. Let's leave this as is until we refactor all our links to use the core component.

Sure. Could we please start a conversation with the design and see how we can address this?

Yes sure. I can discuss this with @madebynoam later.

jkguidaven · 2026-01-14T14:40:09Z

@yashwin thanks for the review! 🙏 I've addressed one of your comment can you have another look?

yashwin

LGTM!

a8ci18n · 2026-01-15T12:22:47Z

Translation for this Pull Request has now been finished.

…107829) * Create a helper function for showing support guide. * Update KB article links to use Help center. * Remove all arrow keys.

jkguidaven self-assigned this Dec 22, 2025

jkguidaven requested a review from a team December 22, 2025 11:08

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 22, 2025

jkguidaven marked this pull request as ready for review December 22, 2025 11:08

yashwin reviewed Jan 7, 2026

View reviewed changes

jkguidaven force-pushed the update/a4a/kb-link-to-point-help-center branch from a2ba9e8 to ede1070 Compare January 14, 2026 14:36

yashwin approved these changes Jan 15, 2026

View reviewed changes

jkguidaven added 3 commits January 15, 2026 19:00

Create a helper function for showing support guide.

600664f

Update KB article links to use Help center.

b31e906

Remove all arrow keys.

62dfc72

jkguidaven force-pushed the update/a4a/kb-link-to-point-help-center branch from ede1070 to 62dfc72 Compare January 15, 2026 11:01

jkguidaven merged commit a214aab into trunk Jan 15, 2026
13 checks passed

jkguidaven deleted the update/a4a/kb-link-to-point-help-center branch January 15, 2026 11:31

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 15, 2026

heydemoura pushed a commit that referenced this pull request Jan 18, 2026

A4A: Update KB article links to view articles via the Help center. (#…

607db57

…107829) * Create a helper function for showing support guide. * Update KB article links to use Help center. * Remove all arrow keys.

A4A: Update KB article links to view articles via the Help center. #107829

A4A: Update KB article links to view articles via the Help center. #107829

Uh oh!

Conversation

jkguidaven commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Dec 22, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yashwin left a comment

Choose a reason for hiding this comment

Uh oh!

yashwin Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

jkguidaven Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

yashwin Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

yashwin Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

jkguidaven Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

yashwin Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

jkguidaven Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

jkguidaven commented Jan 14, 2026

Uh oh!

yashwin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

a8ci18n commented Jan 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jkguidaven commented Dec 22, 2025 •

edited

Loading

github-actions bot commented Dec 22, 2025 •

edited by matticbot

Loading

matticbot commented Dec 22, 2025 •

edited

Loading

matticbot commented Dec 22, 2025 •

edited

Loading