Repository navigation
A4A Agency Tier: add influenced revenue tooltip - #111013
Conversation
Adds an info-icon tooltip next to the "Influenced revenue" title on the Agency Tier overview that explains what the metric covers, mirroring the WooPayments dashboard popover pattern (click-to-open A4APopover on desktop, InfoModal on mobile, with a "Learn more" link opened in the help center). A4APopover gains an optional `anchor` prop wired through to the WP Popover's modern API so the popover can center on the info icon rather than on its DOM render position; existing call sites are unaffected because they don't pass `anchor`. Stat's `strapline` prop is widened from `string` to `ReactNode` so the title + tooltip can be passed as JSX.
Jetpack Cloud Live (direct link)
Automattic for Agencies Live (direct link)
|
matticbot
added
the
[Status] Needs Review
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
Dispatches calypso_a4a_agency_tier_influenced_revenue_info_open when the popover or modal opens (mouse or keyboard), and calypso_a4a_agency_tier_influenced_revenue_learn_more_click when the in-popover Learn more link is followed, matching the analytics pattern used elsewhere in A4A.
There was a problem hiding this comment.
🤖🧪 Reviewed by Travbot · experimental — use your judgement, ignore what doesn't fit
Looks good to ship. Mirrors the WooPayments CardInfo pattern faithfully and the A4APopover wrapperRef → anchor refactor is documented + backwards-compatible.
FYI not blocking: the icon-button + popover/modal pattern now lives in two places (CardInfo and this one). Worth keeping in mind if a third use case shows up — extracting a shared <InfoTooltip> would be a natural moment then.
While that did work well, I didn't see any visual indication of the icon being selected when tabbing back and forth to find it. |
👍 I'm going to add that in a separate PR as it's something that we can also refactor on a few other places with a new A4APopoverTrigger component. |
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
…attic/wp-calypso into add/a4a-influenced-revenue-tooltip
|
Looks like one of the E2E tests has failed. You can fix them following these steps:
|
github-actions
Bot
removed
the
[Status] Needs Review
|
This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/33689782 Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday. Thank you @tiagonoronha for including a screenshot in the description! This is really helpful for our translators. |
5 participants
Part of A4A-2621
Proposed Changes
Adds an info-icon tooltip next to the Influenced revenue title on the A4A Agency Tier overview that explains what the metric covers, mirroring the WooPayments dashboard popover pattern (click-to-open
A4APopoveron desktop,InfoModalon mobile, with a "Learn more" link opened in the help center).influenced-revenue.tsx— newInfluencedRevenueStraplinesub-component renders the title plus an info icon that toggles the popover/modal. Content is a singletranslate()call with{{br/}}{{br/}}separators and an{{a}}Learn more{{/a}}interpolation that callsuseHelpCenter().showSupportGuide( LEARN_MORE_URL )— same shape asconsolidated-views.tsxin the WooPayments dashboard.influenced-revenue.scss(new) — alignment for the inline icon (inline-flex,cursor: pointer, neutral-70 color) and popover content sizing (body-medium,200px/300pxmin-width at break-mobile) + the same neutral-100 underlined link styling the WooPayments popover uses, extended to coverButtonvariant="link".a4a-popover/index.tsx— adds an optionalanchor?: HTMLElement | nullprop forwarded to the WPPopover's modernanchorAPI so the popover can center on the info icon rather than on the popover's DOM render position. Existing call sites (consolidated stats card, license preview, status badges, etc.) keep working unchanged — they don't passanchor, andwrapperRefwas already a no-op since@wordpress/componentsPopoverstopped reading the legacycontextprop.stat/index.tsx— widensstrapline?: stringtostrapline?: ReactNodeso the title + icon can be passed as JSX. The only other call site (partner-directory/lead-matching) still passes a string.Why are these changes being made?
The Agency Tier overview surfaces "Influenced revenue" as a headline metric but the page doesn't explain what counts as influenced revenue, so it's not obvious to agencies why the number is what it is. The tooltip clarifies that it covers referrals, client purchases, and managed sites using Automattic products, and points to the help-center article for the full breakdown.
The WooPayments dashboard already uses the same info-icon + popover/modal pattern for
Total WooPayments commissions paid, so this reuses that exact UX (and the sameA4APopover/InfoModal/showSupportGuideplumbing) for consistency.Testing Instructions
https://agencieshelp.automattic.com/knowledge-base/automattic-for-agencies-earnings/).InfoModal(titled "Influenced revenue") instead of the popover.A4APopoverstill render correctly (WooPayments dashboard's "Total WooPayments commissions paid" popover, license preview tooltips, status badges) — no behavior change expected.Pre-merge Checklist