diff --git a/client/a8c-for-agencies/sections/agency-tier/overview-content/constants.ts b/client/a8c-for-agencies/sections/agency-tier/overview-content/constants.ts index 9fc2605dc64f..900f8c207a8c 100644 --- a/client/a8c-for-agencies/sections/agency-tier/overview-content/constants.ts +++ b/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: [ { diff --git a/client/a8c-for-agencies/sections/agency-tier/overview-content/types.ts b/client/a8c-for-agencies/sections/agency-tier/overview-content/types.ts index 906cf72aae29..7c124fdf701e 100644 --- a/client/a8c-for-agencies/sections/agency-tier/overview-content/types.ts +++ b/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[]; } diff --git a/client/a8c-for-agencies/sections/agency-tier/progress-card/index.tsx b/client/a8c-for-agencies/sections/agency-tier/progress-card/index.tsx new file mode 100644 index 000000000000..263c727d4937 --- /dev/null +++ b/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 ( + + + + + + { __( 'Your agency tier and benefits' ) } + + + + { currentTier.name } + { isEarlyAccess && ` (${ __( 'Early access' ) })` } + + + { 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 } + + + + + { __( 'Explore Tiers and benefits' ) } + + + + + + + + ); +} diff --git a/client/a8c-for-agencies/sections/overview/sidebar/agency-tier/index.tsx b/client/a8c-for-agencies/sections/overview/sidebar/agency-tier/index.tsx index 6fa2d5be52f8..9c9f8d9eec5f 100644 --- a/client/a8c-for-agencies/sections/overview/sidebar/agency-tier/index.tsx +++ b/client/a8c-for-agencies/sections/overview/sidebar/agency-tier/index.tsx @@ -1,3 +1,4 @@ +import { isEnabled } from '@automattic/calypso-config'; import { Card, FoldableCard } from '@automattic/components'; import { Button } from '@wordpress/components'; import { Icon, arrowRight } from '@wordpress/icons'; @@ -5,6 +6,7 @@ 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 ( <> - - - - - - - - - { preventWidows( currentAgencyTierInfo.title ) } - - - { currentAgencyTierInfo && ( - - { currentAgencyTierInfo.description } + { isTiersRevampEnabled ? ( + + ) : ( + + + + + + + + + { preventWidows( currentAgencyTierInfo.title ) } + - ) } - - dispatch( - recordTracksEvent( 'calypso_a4a_agency_tier_explore_tiers_and_benefits_click', { - agency_tier: currentAgencyTier, - } ) - ) - } - > - - { translate( 'Explore Tiers and benefits' ) } - - - - + { currentAgencyTierInfo && ( + + { currentAgencyTierInfo.description } + + ) } + + dispatch( + recordTracksEvent( 'calypso_a4a_agency_tier_explore_tiers_and_benefits_click', { + agency_tier: currentAgencyTierId, + } ) + ) + } + > + + { translate( 'Explore Tiers and benefits' ) } + + + + + ) } > ); }