A4A >Agency Tier: Implement current agency tier levels

client/a8c-for-agencies/sections/agency-tier/lib/get-agency-tier-info.tsx

@@ -12,6 +12,7 @@ const getAgencyTierInfo = (
 		fullTitle: '',
 		subtitle: '',
 		logo: '',
+		includedTiers: [] as string[],
 	};
 	switch ( agencyTier ) {
 		case 'emerging-partner':
@@ -31,6 +32,7 @@ const getAgencyTierInfo = (
 					{ args: { amount: '$1,200' }, comment: 'Amount of revenue' }
 				),
 				logo: EmergingPartnerLogo,
+				includedTiers: [ 'emerging-partner' ],
 			};
 			break;
 		case 'agency-partner':
@@ -53,6 +55,7 @@ const getAgencyTierInfo = (
 					}
 				),
 				logo: AgencyPartnerLogo,
+				includedTiers: [ 'emerging-partner', 'agency-partner' ],
 			};
 			break;
 		case 'pro-agency-partner':
@@ -69,6 +72,7 @@ const getAgencyTierInfo = (
 				),
 				subtitle: preventWidows( translate( "You've reached the highest tier!" ) ),
 				logo: ProAgencyPartnerLogo,
+				includedTiers: [ 'emerging-partner', 'agency-partner', 'pro-agency-partner' ],
 			};
 	}
 	return { id: agencyTier, ...tierInfo };

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

@@ -1,4 +1,5 @@
 import { Card, Badge } from '@automattic/components';
+import { Icon, check } from '@wordpress/icons';
 import { clsx } from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import Layout from 'calypso/a8c-for-agencies/components/layout';
@@ -31,6 +32,12 @@ export default function AgencyTierOverview() {
 
 	const learnMoreLink = ''; // TODO: Add link
 
+	const ALL_TIERS: ( 'emerging-partner' | 'agency-partner' | 'pro-agency-partner' )[] = [
+		'emerging-partner',
+		'agency-partner',
+		'pro-agency-partner',
+	];
+
 	return (
 		<Layout className="agency-tier-overview" title={ title } wide>
 			<LayoutTop>
@@ -74,6 +81,50 @@ export default function AgencyTierOverview() {
 								</div>
 							</div>
 						</div>
+						<div className="agency-tier-overview__top-content-right">
+							<Card className="agency-tier-overview__benefit-card" compact>
+								<div className="agency-tier-overview__benefit-card-title">
+									{ translate( 'Level up with Automattic!' ) }
+								</div>
+								<div className="agency-tier-overview__benefit-card-items">
+									{ ALL_TIERS.map( ( tier ) => {
+										const { title, logo, id } = getAgencyTierInfo( tier, translate );
+										const currentTierInfo = getAgencyTierInfo(
+											currentAgencyTierInfo.id,
+											translate
+										);
+										const isCurrentTier = currentTierInfo.includedTiers.includes( tier );
+										return (
+											<div
+												key={ tier }
+												className={ clsx( 'agency-tier-overview__benefit-card-item', {
+													'opacity-50': ! isCurrentTier,
+												} ) }
+											>
+												<div className="agency-tier-overview__benefit-card-item-icon">
+													<img src={ logo } alt={ tier } />
+													{ isCurrentTier && (
+														<span
+															className={ clsx(
+																'agency-tier-overview__benefit-card-item-icon-check',
+																id
+															) }
+														>
+															<span>
+																<Icon icon={ check } size={ 24 } />
+															</span>
+														</span>
+													) }
+												</div>
+												<span className="agency-tier-overview__benefit-card-item-title">
+													{ title }
+												</span>
+											</div>
+										);
+									} ) }
+								</div>
+							</Card>
+						</div>
 					</div>
 				) }
 				<div className="agency-tier-overview__bottom-content">

client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/style.scss

@@ -3,7 +3,9 @@
 
 $color-pink: #f4b1ff;
 $dark-blue: #022836;
+$light-blue: #5ab7e8;
 $dark-green: #104e30;
+$light-green: #53dc81;
 
 .agency-tier-overview__top-content {
 	display: grid;
@@ -30,7 +32,7 @@ $dark-green: #104e30;
 			border: 1px solid var(--color-gray-5);
 		}
 
-		@include break-huge {
+		@include break-wide {
 			height: 230px;
 		}
 	}
@@ -179,6 +181,12 @@ $dark-green: #104e30;
 	}
 }
 
+.agency-tier-overview__top-content-right {
+	@include break-wide {
+		margin-inline-start: 12px;
+	}
+}
+
 .agency-tier-overview__bottom-content {
 	padding-block-start: 24px;
 
@@ -268,3 +276,85 @@ $dark-green: #104e30;
 		align-items: center;
 	}
 }
+
+.agency-tier-overview__benefit-card-items {
+	padding-block-start: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.agency-tier-overview__benefit-card-item {
+		.agency-tier-overview__benefit-card-item-icon {
+			position: relative;
+			display: inline-flex;
+
+			img {
+				transform: scale(1.5);
+			}
+
+			.agency-tier-overview__benefit-card-item-icon-check {
+				position: absolute;
+				background: var(--color-text-white);
+				border-radius: 50%;
+				width: 23px;
+				height: 23px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				top: 11.5px;
+				left: 24px;
+
+				span {
+					padding: 4px;
+					border-radius: 50%;
+					width: 10px;
+					height: 10px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					svg {
+						transform: scale(1.7);
+					}
+				}
+
+				&.emerging-partner {
+					span {
+						background: $color-pink;
+					}
+					svg {
+						stroke: $dark-blue;
+					}
+				}
+
+				&.agency-partner {
+					span {
+						background: $dark-blue;
+					}
+					svg {
+						fill: var(--color-text-white);
+						stroke: $light-blue;
+					}
+				}
+
+				&.pro-agency-partner {
+					span {
+						background: $dark-green;
+					}
+					svg {
+						fill: var(--color-text-white);
+						stroke: $light-green;
+					}
+
+				}
+			}
+		}
+
+		.agency-tier-overview__benefit-card-item-title {
+			@include a4a-font-heading-md($font-weight: 600);
+			position: relative;
+			top: -6px;
+			left: 24px;
+		}
+	}
+}

client/a8c-for-agencies/style.scss

@@ -642,3 +642,7 @@ html {
 		}
 	}
 }
+
+.opacity-50 {
+	opacity: 0.5;
+}