Skip to content

Commit 8ca5570

Browse files
yashwinyashwin
authored
A4A > Tiers: Implement agency tier progress card on the Overview page (#106903)
* A4A > Tiers: Implement agency tier progress card * minor fix
1 parent 3db55db commit 8ca5570

File tree

4 files changed

+156
-44
lines changed

4 files changed

+156
-44
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ export const ALL_TIERS: TierItem[] = [
3131
heading: __( 'Essential benefits' ),
3232
subheading: __( 'Tools, earning opportunities, support & training and more' ),
3333
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'agency-partner' ],
34+
progressCardDescription: __(
35+
'You’re just getting started. Explore your benefits and learn how to grow your influenced revenue.'
36+
),
3437
benefits: [
3538
{
3639
icon: tool,
@@ -118,6 +121,9 @@ export const ALL_TIERS: TierItem[] = [
118121
),
119122
heading: __( '2 additional benefits unlocked' ),
120123
subheading: __( 'Directory visibility, early access' ),
124+
progressCardDescription: __(
125+
'You’re making great progress! Keep growing your influenced revenue to unlock Pro Partner benefits.'
126+
),
121127
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'pro-agency-partner' ],
122128
benefits: [
123129
{
@@ -158,6 +164,9 @@ export const ALL_TIERS: TierItem[] = [
158164
),
159165
heading: __( '3 additional benefits unlocked' ),
160166
subheading: __( 'Co-marketing, qualified leads, partner manager & more' ),
167+
progressCardDescription: __(
168+
'Congratulations! You’ve unlocked all Pro Partner benefits including co-marketing opportunities and your dedicated partner manager.'
169+
),
161170
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'premier-partner' ],
162171
benefits: [
163172
{
@@ -200,6 +209,9 @@ export const ALL_TIERS: TierItem[] = [
200209
),
201210
heading: __( '3 premium benefits' ),
202211
subheading: __( 'Annual credits, Parse.ly trial, marketing funds' ),
212+
progressCardDescription: __(
213+
'You’ve reached the highest tier! Enjoy all Premier Partner benefits including annual credits, Parse.ly trial, and marketing development funds.'
214+
),
203215
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'premier-partner' ],
204216
benefits: [
205217
{

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export interface TierItem {
2424
description: string;
2525
heading: string;
2626
subheading: string;
27+
progressCardDescription: string;
2728
influencedRevenue: number;
2829
benefits: Benefit[];
2930
}

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import {
2+
Card,
3+
CardBody,
4+
Button,
5+
__experimentalHeading as Heading,
6+
__experimentalText as Text,
7+
__experimentalVStack as VStack,
8+
__experimentalSpacer as Spacer,
9+
} from '@wordpress/components';
10+
import { __, sprintf } from '@wordpress/i18n';
11+
import { A4A_AGENCY_TIER_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
12+
import { ButtonStack } from 'calypso/dashboard/components/button-stack';
13+
import { useDispatch } from 'calypso/state';
14+
import { recordTracksEvent } from 'calypso/state/analytics/actions';
15+
import { ALL_TIERS } from '../overview-content/constants';
16+
import InfluencedRevenue from '../overview-content/influenced-revenue';
17+
import type { AgencyTierType } from '../overview-content/types';
18+
19+
export default function AgencyTierProgressCard( {
20+
currentAgencyTierId,
21+
influencedRevenue,
22+
isEarlyAccess,
23+
}: {
24+
currentAgencyTierId?: AgencyTierType;
25+
influencedRevenue: number;
26+
isEarlyAccess: boolean;
27+
} ) {
28+
const dispatch = useDispatch();
29+
30+
const currentTier = ALL_TIERS.find( ( tier ) => tier.id === currentAgencyTierId );
31+
32+
if ( ! currentTier ) {
33+
return null;
34+
}
35+
36+
const handleExploreTiersAndBenefits = () => {
37+
dispatch(
38+
recordTracksEvent( 'calypso_a4a_agency_tier_progress_card_explore_click', {
39+
agency_tier: currentAgencyTierId,
40+
} )
41+
);
42+
};
43+
44+
return (
45+
<Spacer marginBottom={ 4 }>
46+
<Card>
47+
<CardBody>
48+
<VStack spacing={ 4 }>
49+
<Heading level={ 4 } weight={ 500 }>
50+
{ __( 'Your agency tier and benefits' ) }
51+
</Heading>
52+
<VStack spacing={ 3 }>
53+
<Heading level={ 3 } weight={ 500 }>
54+
{ currentTier.name }
55+
{ isEarlyAccess && ` (${ __( 'Early access' ) })` }
56+
</Heading>
57+
<Text color="#757575">
58+
{ isEarlyAccess
59+
? sprintf(
60+
/* translators: %s is the tier name */
61+
'You’ve been given early access to %s tier benefits. Keep up the great work!',
62+
currentTier.name
63+
)
64+
: currentTier.progressCardDescription }
65+
</Text>
66+
<InfluencedRevenue
67+
currentAgencyTierId={ currentAgencyTierId }
68+
totalInfluencedRevenue={ influencedRevenue }
69+
/>
70+
<ButtonStack justify="flex-start">
71+
<Button
72+
onClick={ handleExploreTiersAndBenefits }
73+
href={ A4A_AGENCY_TIER_LINK }
74+
variant="secondary"
75+
>
76+
{ __( 'Explore Tiers and benefits' ) }
77+
</Button>
78+
</ButtonStack>
79+
</VStack>
80+
</VStack>
81+
</CardBody>
82+
</Card>
83+
</Spacer>
84+
);
85+
}

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

Lines changed: 58 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { isEnabled } from '@automattic/calypso-config';
12
import { Card, FoldableCard } from '@automattic/components';
23
import { Button } from '@wordpress/components';
34
import { Icon, arrowRight } from '@wordpress/icons';
45
import { clsx } from 'clsx';
56
import { useTranslate } from 'i18n-calypso';
67
import { A4A_AGENCY_TIER_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
78
import getAgencyTierInfo from 'calypso/a8c-for-agencies/sections/agency-tier/lib/get-agency-tier-info';
9+
import AgencyTierProgressCard from 'calypso/a8c-for-agencies/sections/agency-tier/progress-card';
810
import { preventWidows } from 'calypso/lib/formatting';
911
import { useSelector, useDispatch } from 'calypso/state';
1012
import { getActiveAgency } from 'calypso/state/a8c-for-agencies/agency/selectors';
@@ -19,61 +21,73 @@ export default function OverviewSidebarAgencyTier() {
1921

2022
const agency = useSelector( getActiveAgency );
2123

22-
const currentAgencyTier = agency?.tier?.id;
23-
const currentAgencyTierInfo = getAgencyTierInfo( currentAgencyTier, translate );
24+
const currentAgencyTierId = agency?.tier?.id;
25+
const influencedRevenue = agency?.influenced_revenue;
26+
const isEarlyAccess = agency?.tier?.is_early_access;
27+
const currentAgencyTierInfo = getAgencyTierInfo( currentAgencyTierId, translate );
2428

2529
if ( ! currentAgencyTierInfo ) {
2630
return null;
2731
}
2832

33+
const isTiersRevampEnabled = isEnabled( 'tiers-revamp' );
34+
2935
return (
3036
<>
3137
<AgencyTierCelebrationModal
3238
agencyTierInfo={ currentAgencyTierInfo }
33-
currentAgencyTier={ currentAgencyTier }
39+
currentAgencyTier={ currentAgencyTierId }
3440
/>
35-
<Card className="agency-tier__card">
36-
<FoldableCard
37-
className="foldable-nav"
38-
header={ translate( 'Your progress' ) }
39-
expanded
40-
compact
41-
iconSize={ 18 }
42-
>
43-
<div className="agency-tier__bottom-content">
44-
<div
45-
className={ clsx( 'agency-tier__current-agency-tier-header', {
46-
'is-default': ! currentAgencyTier,
47-
} ) }
48-
>
49-
<span className="agency-tier__current-agency-tier-icon">
50-
<img src={ currentAgencyTierInfo.logo } alt={ currentAgencyTierInfo.id } />
51-
</span>
52-
<span className="agency-tier__current-agency-tier-title">
53-
{ preventWidows( currentAgencyTierInfo.title ) }
54-
</span>
55-
</div>
56-
{ currentAgencyTierInfo && (
57-
<div className="agency-tier__current-agency-tier-description">
58-
{ currentAgencyTierInfo.description }
41+
{ isTiersRevampEnabled ? (
42+
<AgencyTierProgressCard
43+
currentAgencyTierId={ currentAgencyTierId }
44+
influencedRevenue={ influencedRevenue ?? 0 }
45+
isEarlyAccess={ !! isEarlyAccess }
46+
/>
47+
) : (
48+
<Card className="agency-tier__card">
49+
<FoldableCard
50+
className="foldable-nav"
51+
header={ translate( 'Your progress' ) }
52+
expanded
53+
compact
54+
iconSize={ 18 }
55+
>
56+
<div className="agency-tier__bottom-content">
57+
<div
58+
className={ clsx( 'agency-tier__current-agency-tier-header', {
59+
'is-default': ! currentAgencyTierId,
60+
} ) }
61+
>
62+
<span className="agency-tier__current-agency-tier-icon">
63+
<img src={ currentAgencyTierInfo.logo } alt={ currentAgencyTierInfo.id } />
64+
</span>
65+
<span className="agency-tier__current-agency-tier-title">
66+
{ preventWidows( currentAgencyTierInfo.title ) }
67+
</span>
5968
</div>
60-
) }
61-
<Button
62-
href={ A4A_AGENCY_TIER_LINK }
63-
onClick={ () =>
64-
dispatch(
65-
recordTracksEvent( 'calypso_a4a_agency_tier_explore_tiers_and_benefits_click', {
66-
agency_tier: currentAgencyTier,
67-
} )
68-
)
69-
}
70-
>
71-
<Icon icon={ arrowRight } size={ 18 } />
72-
{ translate( 'Explore Tiers and benefits' ) }
73-
</Button>
74-
</div>
75-
</FoldableCard>
76-
</Card>
69+
{ currentAgencyTierInfo && (
70+
<div className="agency-tier__current-agency-tier-description">
71+
{ currentAgencyTierInfo.description }
72+
</div>
73+
) }
74+
<Button
75+
href={ A4A_AGENCY_TIER_LINK }
76+
onClick={ () =>
77+
dispatch(
78+
recordTracksEvent( 'calypso_a4a_agency_tier_explore_tiers_and_benefits_click', {
79+
agency_tier: currentAgencyTierId,
80+
} )
81+
)
82+
}
83+
>
84+
<Icon icon={ arrowRight } size={ 18 } />
85+
{ translate( 'Explore Tiers and benefits' ) }
86+
</Button>
87+
</div>
88+
</FoldableCard>
89+
</Card>
90+
) }
7791
</>
7892
);
7993
}

0 commit comments

Comments
 (0)