A4A: Use the new badge style on all the A4A pages

[yashwin]

Resolves A4A-3045

Proposed Changes

• Update the status labels on several screens to the new badge style already used on WooPayments, Referrals, and Migrations, so labels look the same across the product:
  • Reports — the report status labels (Preparing, Ready to send, Sent, Error).
  • Amplify — the “Audit complete” label on the overview card, and the score and analysis-type labels on the reports list.
  • Partner Directory — the directory application statuses (Pending, Approved, Not approved, Closed) and the lead matching eligibility labels.
  • Payment settings pages for Referrals, Migrations, and WooPayments commissions — the “Payment status” label in the page header.
  • Sidebar — the “Beta” tags next to Reports, Amplify, and menu items like Agent Studio.
  • Overview — the “Featured” tag on the WooPayments card now uses the standard badge with no custom styling.
  • Sites — the “Development” and “Migration in progress” labels on the site list.
  • Marketplace — the “You own N sites” tag and the Pressable “Plan” tag.
  • Purchases — the license labels (Unassigned, Revoked, Transferred, Referral, Development, license bundle count, Refundable) and the invoice statuses (Draft, Open, Past due, Paid, Uncollectible, Void).
  • Referrals — the payment status label on the “Prepare to get paid” step of the overview, which was also getting cut off before.
  • Client dashboard — the subscription status labels clients see (Active, Pending, Error, Canceled).
• Labels that are categories rather than statuses (Beta, Development, Referral, analysis type, bundle count) use the neutral gray badge, since the new badge set doesn’t include the old custom colors.
• Wide license labels like “100 License Bundle” are no longer cut off, and the invoice status column is slightly wider so “Uncollectible” fits on one line.

Why are these changes being made?

• Some screens still used the old badge design while newer screens use the new one, so the same kind of label looked different from page to page. This was raised in the A4A dashboard QA walkthrough (A4A-3045).

Testing Instructions

• Open the live link for this branch (A8C for Agencies) and log in as an agency.
• Go to Reports — the status column should show the new-style labels with icons.

• Go to Amplify — the overview card shows the new “Audit complete” label; on the reports list, the score labels and analysis-type labels use the new style.

• Go to Partner Directory — the “Share your expertise” step shows the directory statuses in the new style; the “Not approved” popover still opens. Also check the status card on the Lead matching page.

• Go to Referrals → Payment settings (and the same page under Migrations and WooPayments) — the “Payment status” label in the header uses the new style; when the account has an issue, hovering it shows the reason in a tooltip.

• Check the sidebar — the “Beta” tags next to Reports, Amplify, and Agent Studio use the new neutral badge.

• Go to Overview — the WooPayments card shows the “Featured” tag as a standard badge.

• Go to Sites — dev sites show the gray “Development” label; sites mid-migration show the blue “Migration in progress” label.

• Go to Marketplace → Hosting — the WordPress.com plan card shows the “You own N sites” tag, and the Pressable section shows the “Plan” tag next to your plan name.

• Go to Purchases → Licenses — check the labels across the tabs: “Unassigned” (yellow), “Revoked” (red), and the gray tags (Development, Referral, bundle count). Wide labels like “100 License Bundle” should not be cut off.

• Go to Purchases → Invoices — the status column shows the new labels; “Uncollectible” fits on one line.

• Go to Referrals with an account that has no referrals — the “Prepare to get paid” step shows the payment status label next to the heading, fully visible (it was truncated before).

• Log in as a client and open the subscriptions list — the status column shows the new-style labels (Active, Pending, Error, Canceled).

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?
• For UI changes, have you tested the affected components in dark mode?
• 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]

WordPress.com

• Dashboard Live (direct link)

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

• Calypso Live (/home) (direct link)

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

---

Automattic for Agencies

• Dashboard Live (direct link)

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

• Automattic for Agencies Live (direct link)

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

---

Jetpack Cloud Live (direct link)

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

[jkguidaven]

For the subscription list (Client), can we use the Grey intent for the 'canceled' status? To match closely the one we already have.

Same goes for PD's 'closed' status too.

[jkguidaven]

Leftover style for the old badge in pressable-usage-section/style.scss:

.badge.badge--info {
	@include body-small;
	background-color: var( --color-neutral-0 );
}

The badge in that section now uses the new component, so this rule no longer applies to anything. The same leftovers were removed in featured-woopayments, wpcom-plan-section, reports-content, and sites-dataviews — this one looks like it was just missed.

[jkguidaven]

Flagged by AI while reviewing this branch — could you confirm whether these were left out on purpose?

Three places still use the old badge:

• Sidebar “Payout settings” indicator (Referrals, Migrations, WooPayments) — components/step-section-item/status-badge.tsx
• Site tags in the Sites preview pane — components/agency-site-tag/index.tsx
• Marketplace cart count — sections/marketplace/shopping-cart/index.tsx

All three still show up in the UI today, so they aren’t dead code. Two of them display a number instead of text and one has an icon inside, so they may not fit the new badge cleanly — which would be a reasonable reason to skip them.

[jkguidaven]

Overall, it works great! I left minor comments, but feel free to address them before merging.