A4A > Tiers: Implement agency tier progress card on the Overview page

client/a8c-for-agencies/sections/agency-tier/overview-content/constants.ts

@@ -31,6 +31,9 @@ export const ALL_TIERS: TierItem[] = [
 		heading: __( 'Essential benefits' ),
 		subheading: __( 'Tools, earning opportunities, support & training and more' ),
 		influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'agency-partner' ],
+		progressCardDescription: __(
+			'You’re just getting started. Explore your benefits and learn how to grow your influenced revenue.'
+		),
 		benefits: [
 			{
 				icon: tool,
@@ -118,6 +121,9 @@ export const ALL_TIERS: TierItem[] = [
 		),
 		heading: __( '2 additional benefits unlocked' ),
 		subheading: __( 'Directory visibility, early access' ),
+		progressCardDescription: __(
+			'You’re making great progress! Keep growing your influenced revenue to unlock Pro Partner benefits.'
+		),
 		influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'pro-agency-partner' ],
 		benefits: [
 			{
@@ -158,6 +164,9 @@ export const ALL_TIERS: TierItem[] = [
 		),
 		heading: __( '3 additional benefits unlocked' ),
 		subheading: __( 'Co-marketing, qualified leads, partner manager & more' ),
+		progressCardDescription: __(
+			'Congratulations! You’ve unlocked all Pro Partner benefits including co-marketing opportunities and your dedicated partner manager.'
+		),
 		influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'premier-partner' ],
 		benefits: [
 			{
@@ -200,6 +209,9 @@ export const ALL_TIERS: TierItem[] = [
 		),
 		heading: __( '3 premium benefits' ),
 		subheading: __( 'Annual credits, Parse.ly trial, marketing funds' ),
+		progressCardDescription: __(
+			'You’ve reached the highest tier! Enjoy all Premier Partner benefits including annual credits, Parse.ly trial, and marketing development funds.'
+		),
 		influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'premier-partner' ],
 		benefits: [
 			{

client/a8c-for-agencies/sections/agency-tier/overview-content/types.ts

@@ -24,6 +24,7 @@ export interface TierItem {
 	description: string;
 	heading: string;
 	subheading: string;
+	progressCardDescription: string;
 	influencedRevenue: number;
 	benefits: Benefit[];
 }

client/a8c-for-agencies/sections/agency-tier/progress-card/index.tsx

@@ -0,0 +1,85 @@
+import {
+	Card,
+	CardBody,
+	Button,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { A4A_AGENCY_TIER_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import { ButtonStack } from 'calypso/dashboard/components/button-stack';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { ALL_TIERS } from '../overview-content/constants';
+import InfluencedRevenue from '../overview-content/influenced-revenue';
+import type { AgencyTierType } from '../overview-content/types';
+
+export default function AgencyTierProgressCard( {
+	currentAgencyTierId,
+	influencedRevenue,
+	isEarlyAccess,
+}: {
+	currentAgencyTierId?: AgencyTierType;
+	influencedRevenue: number;
+	isEarlyAccess: boolean;
+} ) {
+	const dispatch = useDispatch();
+
+	const currentTier = ALL_TIERS.find( ( tier ) => tier.id === currentAgencyTierId );
+
+	if ( ! currentTier ) {
+		return null;
+	}
+
+	const handleExploreTiersAndBenefits = () => {
+		dispatch(
+			recordTracksEvent( 'calypso_a4a_agency_tier_progress_card_explore_click', {
+				agency_tier: currentAgencyTierId,
+			} )
+		);
+	};
+
+	return (
+		<Spacer marginBottom={ 4 }>
+			<Card>
+				<CardBody>
+					<VStack spacing={ 4 }>
+						<Heading level={ 4 } weight={ 500 }>
+							{ __( 'Your agency tier and benefits' ) }
+						</Heading>
+						<VStack spacing={ 3 }>
+							<Heading level={ 3 } weight={ 500 }>
+								{ currentTier.name }
+								{ isEarlyAccess && ` (${ __( 'Early access' ) })` }
+							</Heading>
+							<Text color="#757575">
+								{ isEarlyAccess
+									? sprintf(
+											/* translators: %s is the tier name */
+											'You’ve been given early access to %s tier benefits. Keep up the great work!',
+											currentTier.name
+									  )
+									: currentTier.progressCardDescription }
+							</Text>
+							<InfluencedRevenue
+								currentAgencyTierId={ currentAgencyTierId }
+								totalInfluencedRevenue={ influencedRevenue }
+							/>
+							<ButtonStack justify="flex-start">
+								<Button
+									onClick={ handleExploreTiersAndBenefits }
+									href={ A4A_AGENCY_TIER_LINK }
+									variant="secondary"
+								>
+									{ __( 'Explore Tiers and benefits' ) }
+								</Button>
+							</ButtonStack>
+						</VStack>
+					</VStack>
+				</CardBody>
+			</Card>
+		</Spacer>
+	);
+}

client/a8c-for-agencies/sections/overview/sidebar/agency-tier/index.tsx

@@ -1,10 +1,12 @@
+import { isEnabled } from '@automattic/calypso-config';
 import { Card, FoldableCard } from '@automattic/components';
 import { Button } from '@wordpress/components';
 import { Icon, arrowRight } from '@wordpress/icons';
 import { clsx } from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { A4A_AGENCY_TIER_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import getAgencyTierInfo from 'calypso/a8c-for-agencies/sections/agency-tier/lib/get-agency-tier-info';
+import AgencyTierProgressCard from 'calypso/a8c-for-agencies/sections/agency-tier/progress-card';
 import { preventWidows } from 'calypso/lib/formatting';
 import { useSelector, useDispatch } from 'calypso/state';
 import { getActiveAgency } from 'calypso/state/a8c-for-agencies/agency/selectors';
@@ -19,61 +21,73 @@ export default function OverviewSidebarAgencyTier() {
 
 	const agency = useSelector( getActiveAgency );
 
-	const currentAgencyTier = agency?.tier?.id;
-	const currentAgencyTierInfo = getAgencyTierInfo( currentAgencyTier, translate );
+	const currentAgencyTierId = agency?.tier?.id;
+	const influencedRevenue = agency?.influenced_revenue;
+	const isEarlyAccess = agency?.tier?.is_early_access;
+	const currentAgencyTierInfo = getAgencyTierInfo( currentAgencyTierId, translate );
 
 	if ( ! currentAgencyTierInfo ) {
 		return null;
 	}
 
+	const isTiersRevampEnabled = isEnabled( 'tiers-revamp' );
+
 	return (
 		<>
 			<AgencyTierCelebrationModal
 				agencyTierInfo={ currentAgencyTierInfo }
-				currentAgencyTier={ currentAgencyTier }
+				currentAgencyTier={ currentAgencyTierId }
 			/>
-			<Card className="agency-tier__card">
-				<FoldableCard
-					className="foldable-nav"
-					header={ translate( 'Your progress' ) }
-					expanded
-					compact
-					iconSize={ 18 }
-				>
-					<div className="agency-tier__bottom-content">
-						<div
-							className={ clsx( 'agency-tier__current-agency-tier-header', {
-								'is-default': ! currentAgencyTier,
-							} ) }
-						>
-							<span className="agency-tier__current-agency-tier-icon">
-								<img src={ currentAgencyTierInfo.logo } alt={ currentAgencyTierInfo.id } />
-							</span>
-							<span className="agency-tier__current-agency-tier-title">
-								{ preventWidows( currentAgencyTierInfo.title ) }
-							</span>
-						</div>
-						{ currentAgencyTierInfo && (
-							<div className="agency-tier__current-agency-tier-description">
-								{ currentAgencyTierInfo.description }
+			{ isTiersRevampEnabled ? (
+				<AgencyTierProgressCard
+					currentAgencyTierId={ currentAgencyTierId }
+					influencedRevenue={ influencedRevenue ?? 0 }
+					isEarlyAccess={ !! isEarlyAccess }
+				/>
+			) : (
+				<Card className="agency-tier__card">
+					<FoldableCard
+						className="foldable-nav"
+						header={ translate( 'Your progress' ) }
+						expanded
+						compact
+						iconSize={ 18 }
+					>
+						<div className="agency-tier__bottom-content">
+							<div
+								className={ clsx( 'agency-tier__current-agency-tier-header', {
+									'is-default': ! currentAgencyTierId,
+								} ) }
+							>
+								<span className="agency-tier__current-agency-tier-icon">
+									<img src={ currentAgencyTierInfo.logo } alt={ currentAgencyTierInfo.id } />
+								</span>
+								<span className="agency-tier__current-agency-tier-title">
+									{ preventWidows( currentAgencyTierInfo.title ) }
+								</span>
 							</div>
-						) }
-						<Button
-							href={ A4A_AGENCY_TIER_LINK }
-							onClick={ () =>
-								dispatch(
-									recordTracksEvent( 'calypso_a4a_agency_tier_explore_tiers_and_benefits_click', {
-										agency_tier: currentAgencyTier,
-									} )
-								)
-							}
-						>
-							<Icon icon={ arrowRight } size={ 18 } />
-							{ translate( 'Explore Tiers and benefits' ) }
-						</Button>
-					</div>
-				</FoldableCard>
-			</Card>
+							{ currentAgencyTierInfo && (
+								<div className="agency-tier__current-agency-tier-description">
+									{ currentAgencyTierInfo.description }
+								</div>
+							) }
+							<Button
+								href={ A4A_AGENCY_TIER_LINK }
+								onClick={ () =>
+									dispatch(
+										recordTracksEvent( 'calypso_a4a_agency_tier_explore_tiers_and_benefits_click', {
+											agency_tier: currentAgencyTierId,
+										} )
+									)
+								}
+							>
+								<Icon icon={ arrowRight } size={ 18 } />
+								{ translate( 'Explore Tiers and benefits' ) }
+							</Button>
+						</div>
+					</FoldableCard>
+				</Card>
+			) }
 		</>
 	);
 }