Skip to content

Commit 36c9732

Browse files
yashwinyashwin
committed
A4A > Tiers: Implement agency tier progress card
1 parent 6704550 commit 36c9732

File tree

5 files changed

+145
-47
lines changed

5 files changed

+145
-47
lines changed

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ export const ALL_TIERS: TierItem[] = [
3030
description: 'Joining the program',
3131
heading: __( 'Essential benefits' ),
3232
subheading: __( 'Tools, earning opportunities, support & training and more' ),
33-
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'emerging-partner' ],
33+
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,7 +121,10 @@ export const ALL_TIERS: TierItem[] = [
118121
),
119122
heading: __( '2 additional benefits unlocked' ),
120123
subheading: __( 'Directory visibility, early access' ),
121-
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'agency-partner' ],
124+
progressCardDescription: __(
125+
'You’re making great progress! Keep growing your influenced revenue to unlock Pro Partner benefits.'
126+
),
127+
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'pro-agency-partner' ],
122128
benefits: [
123129
{
124130
icon: commentAuthorAvatar,
@@ -147,7 +153,10 @@ export const ALL_TIERS: TierItem[] = [
147153
),
148154
heading: __( '3 additional benefits unlocked' ),
149155
subheading: __( 'Co-marketing, qualified leads, partner manager & more' ),
150-
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'pro-agency-partner' ],
156+
progressCardDescription: __(
157+
'Congratulations! You’ve unlocked all Pro Partner benefits including co-marketing opportunities and your dedicated partner manager.'
158+
),
159+
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'premier-partner' ],
151160
benefits: [
152161
{
153162
icon: starHalf,
@@ -183,6 +192,9 @@ export const ALL_TIERS: TierItem[] = [
183192
),
184193
heading: __( '3 premium benefits' ),
185194
subheading: __( 'Annual credits, Parse.ly trial, marketing funds' ),
195+
progressCardDescription: __(
196+
'You’ve reached the highest tier! Enjoy all Premier Partner benefits including annual credits, Parse.ly trial, and marketing development funds.'
197+
),
186198
influencedRevenue: TARGET_INFLUENCED_REVENUE[ 'premier-partner' ],
187199
benefits: [
188200
{

‎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: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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 { ALL_TIERS } from '../overview-content/constants';
14+
import InfluencedRevenue from '../overview-content/influenced-revenue';
15+
import type { AgencyTierType } from '../overview-content/types';
16+
17+
export default function AgencyTierProgressCard( {
18+
currentAgencyTierId,
19+
influencedRevenue,
20+
isEarlyAccess,
21+
}: {
22+
currentAgencyTierId?: AgencyTierType;
23+
influencedRevenue: number;
24+
isEarlyAccess?: boolean;
25+
} ) {
26+
const currentTier = ALL_TIERS.find( ( tier ) => tier.id === currentAgencyTierId );
27+
28+
if ( ! currentTier ) {
29+
return null;
30+
}
31+
32+
return (
33+
<Spacer marginBottom={ 4 }>
34+
<Card>
35+
<CardBody>
36+
<VStack spacing={ 4 }>
37+
<Heading level={ 4 } weight={ 500 }>
38+
{ __( 'Your agency tier and benefits' ) }
39+
</Heading>
40+
<VStack spacing={ 3 }>
41+
<Heading level={ 3 } weight={ 500 }>
42+
{ currentTier.name }
43+
{ isEarlyAccess && ` (${ __( 'Early access' ) })` }
44+
</Heading>
45+
<Text color="#757575">
46+
{ isEarlyAccess
47+
? sprintf(
48+
/* translators: %s is the tier name */
49+
'You’ve been given early access to %s tier benefits. Keep up the great work!',
50+
currentTier.name
51+
)
52+
: currentTier.progressCardDescription }
53+
</Text>
54+
<InfluencedRevenue
55+
currentAgencyTierId={ currentAgencyTierId }
56+
totalInfluencedRevenue={ influencedRevenue }
57+
/>
58+
<ButtonStack justify="flex-start">
59+
<Button href={ A4A_AGENCY_TIER_LINK } variant="secondary">
60+
{ __( 'Explore Tiers and benefits' ) }
61+
</Button>
62+
</ButtonStack>
63+
</VStack>
64+
</VStack>
65+
</CardBody>
66+
</Card>
67+
</Spacer>
68+
);
69+
}

‎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
}

‎client/state/a8c-for-agencies/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,9 @@ export interface Agency {
110110
id: AgencyTier;
111111
label: string;
112112
features: string[];
113+
is_early_access: boolean;
113114
};
115+
influenced_revenue: number;
114116
approval_status: ApprovalStatus | '';
115117
created_at: string;
116118
billing_system?: 'billingdragon' | 'legacy';

0 commit comments

Comments
 (0)