A4A: Use the new badge style on Reports, Amplify, Partner Directory, and payment settings

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: yashwin

client/a8c-for-agencies/sections/amplify/primary/overview/sections/score-card.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@automattic/components';
+import { Badge } from '@automattic/ui';
 import {
 	Card,
 	CardBody,
@@ -135,7 +135,7 @@ export default function AmplifyScoreCard() {
 						<Text as="code" variant="muted" size={ 12 }>
 							{ SAMPLE_URL }
 						</Text>
-						<Badge type="success">{ __( 'Audit complete' ) }</Badge>
+						<Badge intent="success">{ __( 'Audit complete' ) }</Badge>
 					</HStack>
 
 					<ToggleGroupControl

client/a8c-for-agencies/sections/amplify/primary/reports/reports-content.scss

@@ -1,4 +1,4 @@
-import { Badge } from '@automattic/components';
+import { Badge } from '@automattic/ui';
 import { useBreakpoint } from '@automattic/viewport-react';
 import {
 	Button,
@@ -25,13 +25,10 @@ import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
 import ArchiveReportConfirmationDialog from './archive-report-confirmation-dialog';
 import useAmplifyReportRows, { AmplifyReportRow } from './use-report-rows';
-import type { BadgeType } from '@automattic/components';
 import type { Action, Field } from '@wordpress/dataviews';
 import type { AmplifyMode } from 'calypso/a8c-for-agencies/data/amplify/types';
 import type { ReactNode } from 'react';
 
-import './reports-content.scss';
-
 function modeLabel( mode: AmplifyMode ): string {
 	switch ( mode ) {
 		case 'human':
@@ -45,12 +42,6 @@ function modeLabel( mode: AmplifyMode ): string {
 	}
 }
 
-const MODE_BADGE_TYPE: Record< AmplifyMode, BadgeType > = {
-	human: 'info-blue',
-	ai: 'info-purple',
-	full: 'info-green',
-};
-
 function formatTimestamp( iso: string ): string {
 	return new Date( iso ).toLocaleString( undefined, {
 		month: 'short',
@@ -64,16 +55,16 @@ function ScoreBadge( { score, label }: { score: number | null; label: string } )
 	if ( score === null ) {
 		return null;
 	}
-	let type: BadgeType;
+	let intent: 'success' | 'warning' | 'error';
 	if ( score >= 80 ) {
-		type = 'success';
+		intent = 'success';
 	} else if ( score >= 50 ) {
-		type = 'warning';
+		intent = 'warning';
 	} else {
-		type = 'error';
+		intent = 'error';
 	}
 	return (
-		<Badge type={ type }>
+		<Badge intent={ intent }>
 			{ sprintf(
 				/* translators: %1$s is the score label (e.g. Human), %2$d is the numeric score */
 				__( '%1$s %2$d' ),
@@ -132,12 +123,7 @@ export default function AmplifyReportsContent() {
 				label: __( 'Analysis type' ),
 				getValue: ( { item }: { item: AmplifyReportRow } ) => modeLabel( item.mode ),
 				render: ( { item }: { item: AmplifyReportRow } ): ReactNode => (
-					<Badge
-						type={ MODE_BADGE_TYPE[ item.mode ] }
-						className={ `amplify-report-mode-badge is-${ item.mode }` }
-					>
-						{ modeLabel( item.mode ) }
-					</Badge>
+					<Badge>{ modeLabel( item.mode ) }</Badge>
 				),
 				enableHiding: true,
 				enableSorting: true,
@@ -190,7 +176,7 @@ export default function AmplifyReportsContent() {
 				render: ( { item }: { item: AmplifyReportRow } ): ReactNode => {
 					if ( item.rowStatus === 'failed' ) {
 						return (
-							<Badge type="error" title={ item.failureReason }>
+							<Badge intent="error" title={ item.failureReason }>
 								{ __( 'Analysis failed' ) }
 							</Badge>
 						);

client/a8c-for-agencies/sections/amplify/primary/reports/reports-content.tsx

@@ -1,4 +1,3 @@
-import { BadgeType } from '@automattic/components';
 import { Button, ExternalLink } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -27,21 +26,21 @@ import {
 	mapAgencyDetailsFormData,
 	mapApplicationFormData,
 } from '../utils/map-application-form-data';
-import DashboardStatusBadge from './status-badge';
+import DashboardStatusBadge, { StatusBadgeIntent } from './status-badge';
 
 import './style.scss';
 
 interface DirectoryApplicationStatus {
 	key: string;
 	brand: string;
 	status: string;
-	type: BadgeType;
+	intent: StatusBadgeIntent;
 }
 
 interface StatusBadge {
 	key: string;
 	label: string;
-	type: BadgeType;
+	intent: StatusBadgeIntent;
 }
 
 const PartnerDirectoryDashboard = () => {
@@ -70,27 +69,27 @@ const PartnerDirectoryDashboard = () => {
 			pending: {
 				key: 'pending',
 				label: translate( 'Pending' ),
-				type: 'warning',
+				intent: 'warning',
 			},
 			approved: {
 				key: 'approved',
 				label: translate( 'Approved' ),
-				type: 'success',
+				intent: 'success',
 			},
 			rejected: {
 				key: 'rejected',
 				label: translate( 'Not approved' ),
-				type: 'error',
+				intent: 'error',
 			},
 			closed: {
 				key: 'closed',
 				label: translate( 'Closed' ),
-				type: 'info',
+				intent: 'info',
 			},
 			unknown: {
 				key: 'unknown',
 				label: '-',
-				type: 'info',
+				intent: 'info',
 			},
 		};
 	}, [ translate ] );
@@ -177,7 +176,7 @@ const PartnerDirectoryDashboard = () => {
 			statuses.push( {
 				brand: availableDirectories[ directory.directory ],
 				status: applicationStatusTypeMap[ directory.status || 'unknown' ].label,
-				type: applicationStatusTypeMap[ directory.status || 'unknown' ].type,
+				intent: applicationStatusTypeMap[ directory.status || 'unknown' ].intent,
 				key: applicationStatusTypeMap[ directory.status || 'unknown' ].key,
 			} );
 			return statuses;
@@ -266,7 +265,7 @@ const PartnerDirectoryDashboard = () => {
 					<DashboardStatusBadge
 						statusProps={ {
 							status: application.status,
-							type: application.type,
+							intent: application.intent,
 						} }
 						showPopoverOnLoad={ showPopoverOnLoad }
 					/>
@@ -361,7 +360,7 @@ const PartnerDirectoryDashboard = () => {
 					description={
 						applicationWasSubmitted && directoryApplicationStatuses.length > 0 ? (
 							<div className="partner-directory-dashboard__brand-status-section">
-								{ directoryApplicationStatuses.map( ( { brand, status, type } ) => {
+								{ directoryApplicationStatuses.map( ( { brand, status, intent } ) => {
 									const showPopoverOnLoad =
 										directoryApplicationStatuses.filter( ( { key } ) => key === 'rejected' )
 											.length === 1;
@@ -370,7 +369,7 @@ const PartnerDirectoryDashboard = () => {
 											<DashboardStatusBadge
 												statusProps={ {
 													status,
-													type,
+													intent,
 												} }
 												showPopoverOnLoad={ showPopoverOnLoad }
 											/>

client/a8c-for-agencies/sections/partner-directory/dashboard/index.tsx

@@ -1,16 +1,19 @@
-import { BadgeType, Button, Badge } from '@automattic/components';
+import { Button } from '@automattic/components';
+import { Badge } from '@automattic/ui';
 import { useTranslate } from 'i18n-calypso';
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect, ComponentProps } from 'react';
 import { useDispatch, useSelector } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { savePreference } from 'calypso/state/preferences/actions';
 import { getPreference } from 'calypso/state/preferences/selectors';
 import A4APopover from '../../../components/a4a-popover';
 
+export type StatusBadgeIntent = ComponentProps< typeof Badge >[ 'intent' ];
+
 interface Props {
 	statusProps: {
 		status: string;
-		type: BadgeType;
+		intent: StatusBadgeIntent;
 	};
 	showPopoverOnLoad: boolean;
 }
@@ -66,11 +69,9 @@ export default function DashboardStatusBadge( { statusProps, showPopoverOnLoad }
 	if ( ! popoverContent ) {
 		return (
 			<span>
-				<Badge
-					className="step-section-item__status"
-					children={ statusProps.status }
-					type={ statusProps.type }
-				/>
+				<Badge className="step-section-item__status" intent={ statusProps.intent }>
+					{ statusProps.status }
+				</Badge>
 			</span>
 		);
 	}
@@ -88,11 +89,9 @@ export default function DashboardStatusBadge( { statusProps, showPopoverOnLoad }
 			tabIndex={ 0 }
 			ref={ wrapperRef }
 		>
-			<Badge
-				className="step-section-item__status"
-				children={ statusProps.status }
-				type={ statusProps.type }
-			/>
+			<Badge className="step-section-item__status" intent={ statusProps.intent }>
+				{ statusProps.status }
+			</Badge>
 			{ showPopover && popoverContent && (
 				<A4APopover
 					title={ translate(

client/a8c-for-agencies/sections/partner-directory/dashboard/status-badge.tsx

@@ -48,14 +48,14 @@
 	flex-direction: column;
 	gap: 8px;
 
-	.badge {
-		min-width: 100px;
-		margin-inline-end: 8px;
-		text-align: center;
-	}
+	> div {
+		display: flex;
+		align-items: center;
+		gap: 8px;
 
-	span {
-		color: var(--color-text-black);
+		> span {
+			color: var(--color-text-black);
+		}
 	}
 }
 

client/a8c-for-agencies/sections/partner-directory/dashboard/style.scss

@@ -1,5 +1,5 @@
 import page from '@automattic/calypso-router';
-import { Badge } from '@automattic/components';
+import { Badge } from '@automattic/ui';
 import { Card, CardBody, ToggleControl, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -513,15 +513,15 @@ const LeadMatchingForm = ( { initialFormData, profile }: Props ) => {
 					<CardBody className="partner-directory-lead-matching__status-content">
 						{ eligibilityState === 'eligible' && (
 							<>
-								<Badge type="success">{ __( 'Eligible for leads' ) }</Badge>
+								<Badge intent="success">{ __( 'Eligible for leads' ) }</Badge>
 								<span className="partner-directory-lead-matching__status-text">
 									{ __( 'Your preferences are saved. You can update them anytime.' ) }
 								</span>
 							</>
 						) }
 						{ eligibilityState === 'not-accepting' && (
 							<>
-								<Badge type="warning">{ __( 'Not eligible' ) }</Badge>
+								<Badge intent="warning">{ __( 'Not eligible' ) }</Badge>
 								<span className="partner-directory-lead-matching__status-text">
 									{ __(
 										'Turn on Accepting new clients to be included in lead matching and receive leads.'
@@ -531,7 +531,7 @@ const LeadMatchingForm = ( { initialFormData, profile }: Props ) => {
 						) }
 						{ eligibilityState === 'ready' && (
 							<>
-								<Badge type="info-blue">{ __( '1 step left' ) }</Badge>
+								<Badge intent="info">{ __( '1 step left' ) }</Badge>
 								<span className="partner-directory-lead-matching__status-text">
 									{ __(
 										'All questions answered — click Update preferences to start receiving leads'

client/a8c-for-agencies/sections/partner-directory/lead-matching/index.tsx

@@ -1,4 +1,6 @@
+import { Badge } from '@automattic/ui';
 import { useDesktopBreakpoint } from '@automattic/viewport-react';
+import { Tooltip } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { LayoutWithGuidedTour as Layout } from 'calypso/a8c-for-agencies/components/layout/layout-with-guided-tour';
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/layout-with-payment-notification';
@@ -8,7 +10,6 @@ import {
 	A4A_MIGRATIONS_LINK,
 	A4A_WOOPAYMENTS_LINK,
 } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
-import StatusBadge from 'calypso/a8c-for-agencies/components/step-section-item/status-badge';
 import { getAccountStatus } from 'calypso/dashboard/agency/earn/payout-settings/get-account-status';
 import { TipaltiPayoutSettings } from 'calypso/dashboard/agency/earn/payout-settings/tipalti-payout-settings';
 import LayoutBody from 'calypso/layout/hosting-dashboard/body';
@@ -61,6 +62,20 @@ const getPageInfo = (
 			};
 	}
 };
+
+function PaymentStatusBadge( {
+	intent,
+	tooltip,
+	children,
+}: {
+	intent: 'success' | 'warning' | 'error';
+	tooltip?: string;
+	children?: string;
+} ) {
+	const badge = <Badge intent={ intent }>{ children ?? '' }</Badge>;
+	return tooltip ? <Tooltip text={ tooltip }>{ badge }</Tooltip> : badge;
+}
+
 export default function ReferralsBankDetails( { type }: { type?: 'migrations' | 'woopayments' } ) {
 	const translate = useTranslate();
 	const isDesktop = useDesktopBreakpoint();
@@ -98,12 +113,9 @@ export default function ReferralsBankDetails( { type }: { type?: 'migrations' |
 									comment: '%(status) is subscription status',
 									components: {
 										badge: (
-											<StatusBadge
-												statusProps={ {
-													children: accountStatus.status,
-													type: accountStatus.statusType,
-													tooltip: accountStatus.statusReason,
-												} }
+											<PaymentStatusBadge
+												intent={ accountStatus.statusType }
+												tooltip={ accountStatus.statusReason }
 											/>
 										),
 									},

client/a8c-for-agencies/sections/referrals/primary/bank-details/index.tsx

@@ -26,10 +26,9 @@ $iframe-background-color: #f7f7f7;
 .bank-details__status {
 	@include body-large;
 	color: var(--color-accent-80);
-
-	.badge {
-		margin-inline-start: 6px;
-	}
+	display: flex;
+	align-items: center;
+	gap: 6px;
 }
 
 .referrals-overview__link {