From c88ea099d9a8866c9536de3d1a60549388106bb2 Mon Sep 17 00:00:00 2001 From: Yashwin Date: Wed, 16 Oct 2024 15:23:41 +0530 Subject: [PATCH] Implement agency tier current level section --- .../agency-tier/lib/get-agency-tier-info.tsx | 4 + .../primary/agency-tier-overview/index.tsx | 51 ++++++++++ .../primary/agency-tier-overview/style.scss | 92 ++++++++++++++++++- client/a8c-for-agencies/style.scss | 4 + 4 files changed, 150 insertions(+), 1 deletion(-) diff --git a/client/a8c-for-agencies/sections/agency-tier/lib/get-agency-tier-info.tsx b/client/a8c-for-agencies/sections/agency-tier/lib/get-agency-tier-info.tsx index 3b13358e87c7e8..5a3afd3b65df5f 100644 --- a/client/a8c-for-agencies/sections/agency-tier/lib/get-agency-tier-info.tsx +++ b/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 }; diff --git a/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/index.tsx b/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/index.tsx index 645c4af3ef6251..15d5dc37891b6a 100644 --- a/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/index.tsx +++ b/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 ( @@ -74,6 +81,50 @@ export default function AgencyTierOverview() { +
+ +
+ { translate( 'Level up with Automattic!' ) } +
+
+ { ALL_TIERS.map( ( tier ) => { + const { title, logo, id } = getAgencyTierInfo( tier, translate ); + const currentTierInfo = getAgencyTierInfo( + currentAgencyTierInfo.id, + translate + ); + const isCurrentTier = currentTierInfo.includedTiers.includes( tier ); + return ( +
+
+ { + { isCurrentTier && ( + + + + + + ) } +
+ + { title } + +
+ ); + } ) } +
+ +
) }
diff --git a/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/style.scss b/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/style.scss index fd14edbd764cff..38161ec464086e 100644 --- a/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/style.scss +++ b/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; + } + } +} diff --git a/client/a8c-for-agencies/style.scss b/client/a8c-for-agencies/style.scss index 6b7c383f3c4bee..141d2e08df10f0 100644 --- a/client/a8c-for-agencies/style.scss +++ b/client/a8c-for-agencies/style.scss @@ -642,3 +642,7 @@ html { } } } + +.opacity-50 { + opacity: 0.5; +}