Skip to content

Commit 3af79df

Browse files
calvin-codecovcalvin-codecov
authored
feat: Remove annual option except for existing annual plans (#3968)
1 parent 20b5921 commit 3af79df

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1068
-845
lines changed

‎src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/TeamPlanSpecialOffer/TeamPlanCard/TeamPlanCard.test.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -174,9 +174,6 @@ describe('TeamPlanCard', () => {
174174
wrapper,
175175
})
176176

177-
const yearlyPrice = await screen.findByText(/5/)
178-
expect(yearlyPrice).toBeInTheDocument()
179-
180177
const monthlyPrice = await screen.findByText(/6/)
181178
expect(monthlyPrice).toBeInTheDocument()
182179

‎src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/TeamPlanSpecialOffer/TeamPlanCard/TeamPlanCard.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ const TeamPlanCard: React.FC = () => {
1212
}>()
1313

1414
const { data: plans } = useAvailablePlans({ provider, owner })
15-
const { teamPlanMonth, teamPlanYear } = findTeamPlans({
15+
const { teamPlanMonth } = findTeamPlans({
1616
plans,
1717
})
1818

1919
return (
2020
<div className="flex flex-col border">
2121
<div className="flex justify-between p-4">
22-
<h2 className="font-semibold">{teamPlanYear?.marketingName} plan</h2>
22+
<h2 className="font-semibold">{teamPlanMonth?.marketingName} plan</h2>
2323
<div className="flex self-start">
2424
<Button
2525
to={{
@@ -39,21 +39,16 @@ const TeamPlanCard: React.FC = () => {
3939
<div className="flex flex-col gap-2">
4040
<p className="text-xs font-semibold">Includes</p>
4141
<BenefitList
42-
benefits={teamPlanYear?.benefits}
42+
benefits={teamPlanMonth?.benefits}
4343
iconName="check"
4444
iconColor="text-ds-pink-default"
4545
/>
4646
</div>
4747
<div className="flex flex-col gap-2 border-t pt-2 sm:border-0 sm:p-0">
4848
<p className="text-xs font-semibold">Pricing</p>
4949
<div>
50-
<p className="font-semibold">
51-
<span className="text-2xl">${teamPlanYear?.baseUnitPrice}</span>{' '}
52-
per user/month
53-
</p>
5450
<p className="text-ds-gray-senary">
55-
billed annually, or ${teamPlanMonth?.baseUnitPrice} per user
56-
billing monthly
51+
${teamPlanMonth?.baseUnitPrice} per user billing monthly
5752
</p>
5853
</div>
5954
</div>

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,12 @@ const cardBrand = {
3333
},
3434
}
3535

36-
function CardInformation({ subscriptionDetail, card, nextBillPrice }) {
36+
function CardInformation({
37+
subscriptionDetail,
38+
card,
39+
nextBillPrice,
40+
isFreePlan,
41+
}) {
3742
const typeCard = cardBrand[card?.brand] ?? cardBrand?.fallback
3843
let nextBilling = null
3944

@@ -58,7 +63,7 @@ function CardInformation({ subscriptionDetail, card, nextBillPrice }) {
5863
<p className="text-ds-gray-quinary">
5964
Expires {card?.expMonth}/{lastTwoDigits(card?.expYear)}
6065
</p>
61-
{nextBilling && (
66+
{nextBilling && !isFreePlan && (
6267
<p className="text-sm text-ds-gray-quinary">
6368
Your next billing date is{' '}
6469
<span className="text-ds-gray-octonary">
@@ -81,6 +86,7 @@ CardInformation.propTypes = {
8186
expYear: PropTypes.number.isRequired,
8287
}).isRequired,
8388
nextBillPrice: PropTypes.string,
89+
isFreePlan: PropTypes.bool,
8490
}
8591

8692
export default CardInformation

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,23 +40,32 @@ const calculateNextBillPrice = ({ planData, scheduledPhase }) => {
4040
seats = scheduledPhaseQuantity ?? 0
4141
baseUnitPrice = scheduledPhaseBaseUnitPrice ?? 0
4242
calculatePriceFunction =
43-
scheduledPhasePlanName === PlanMarketingNames.PRO
44-
? calculatePriceProPlan
45-
: scheduledPhasePlanName === PlanMarketingNames.TEAM
46-
? calculatePriceTeamPlan
47-
: calculatePriceSentryPlan
43+
scheduledPhasePlanName === PlanMarketingNames.SENTRY
44+
? calculatePriceSentryPlan
45+
: scheduledPhasePlanName === PlanMarketingNames.PRO
46+
? calculatePriceProPlan
47+
: scheduledPhasePlanName === PlanMarketingNames.TEAM
48+
? calculatePriceTeamPlan
49+
: null
4850
} else {
4951
isPerYear = planData?.plan?.billingRate === BillingRate.ANNUALLY
5052
seats =
5153
(planData?.plan?.planUserCount ?? 0) -
5254
(planData?.plan?.freeSeatCount ?? 0)
5355
baseUnitPrice = planData?.plan?.baseUnitPrice ?? 0
54-
calculatePriceFunction = planData?.plan?.isProPlan
55-
? calculatePriceProPlan
56-
: planData?.plan?.isTeamPlan
57-
? calculatePriceTeamPlan
58-
: calculatePriceSentryPlan
56+
calculatePriceFunction = planData?.plan?.isSentryPlan
57+
? calculatePriceSentryPlan
58+
: planData?.plan?.isProPlan
59+
? calculatePriceProPlan
60+
: planData?.plan?.isTeamPlan
61+
? calculatePriceTeamPlan
62+
: null
5963
}
64+
65+
if (!calculatePriceFunction) {
66+
return null
67+
}
68+
6069
// make sure seats is not negative
6170
seats = Math.max(seats, 0)
6271
const billPrice = calculatePriceFunction({
@@ -118,6 +127,7 @@ function PaymentCard({ accountDetails, provider, owner }) {
118127
card={card}
119128
subscriptionDetail={subscriptionDetail}
120129
nextBillPrice={nextBillPrice}
130+
isFreePlan={planData?.plan?.isFreePlan}
121131
/>
122132
) : usBankAccount ? (
123133
<BankInformation

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/FreePlanCard.test.jsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@ const sentryPlans = [
117117
{
118118
marketingName: 'Sentry',
119119
value: Plans.USERS_SENTRYM,
120-
billingRate: null,
121-
baseUnitPrice: 0,
120+
billingRate: BillingRate.MONTHLY,
121+
baseUnitPrice: 12,
122122
benefits: ['Includes 5 seats', 'Unlimited public repositories'],
123123
monthlyUploadLimit: null,
124124
isTeamPlan: false,
@@ -127,7 +127,7 @@ const sentryPlans = [
127127
{
128128
marketingName: 'Sentry',
129129
value: Plans.USERS_SENTRYY,
130-
billingRate: null,
130+
billingRate: BillingRate.ANNUALLY,
131131
baseUnitPrice: 10,
132132
benefits: ['Includes 5 seats', 'Unlimited private repositories'],
133133
monthlyUploadLimit: null,
@@ -315,7 +315,10 @@ describe('FreePlanCard', () => {
315315
const link = await screen.findByRole('link', { name: /Upgrade/ })
316316

317317
expect(link).toBeInTheDocument()
318-
expect(link).toHaveAttribute('href', '/plan/bb/critical-role/upgrade')
318+
expect(link).toHaveAttribute(
319+
'href',
320+
'/plan/bb/critical-role/upgrade?plan=pro'
321+
)
319322
})
320323

321324
it('renders the help message', async () => {
@@ -362,15 +365,10 @@ describe('FreePlanCard', () => {
362365
wrapper,
363366
})
364367

365-
const cost = await screen.findByText(/\$10/)
368+
const cost = await screen.findByText(/\$12/)
366369
expect(cost).toBeInTheDocument()
367370

368-
const annualBillingText = await screen.findByText(/per user\/month/)
369-
expect(annualBillingText).toBeInTheDocument()
370-
371-
const monthlyBillingText = await screen.findByText(
372-
/billed annually, or \$12 per user billing monthly/
373-
)
371+
const monthlyBillingText = await screen.findByText(/billed monthly/)
374372
expect(monthlyBillingText).toBeInTheDocument()
375373
})
376374

@@ -481,7 +479,7 @@ describe('FreePlanCard', () => {
481479
expect(upgradeLink).toBeInTheDocument()
482480
expect(upgradeLink).toHaveAttribute(
483481
'href',
484-
'/plan/bb/critical-role/upgrade'
482+
'/plan/bb/critical-role/upgrade?plan=pro'
485483
)
486484
})
487485

@@ -500,13 +498,14 @@ describe('FreePlanCard', () => {
500498
})
501499

502500
const cost = await screen.findByText(/\$29/)
501+
503502
expect(cost).toBeInTheDocument()
504503

505504
const perMonth = await screen.findByText(/^\/month/)
506505
expect(perMonth).toBeInTheDocument()
507506

508507
const billingCycleInfo = await screen.findByText(
509-
/over 5 users is \$10 per user\/month, billed annually/
508+
/over 5 users is \$12 per user\/month, billed monthly/
510509
)
511510
expect(billingCycleInfo).toBeInTheDocument()
512511
})

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/PlanUpgradePro/PlanUpgradePro.jsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ import ProPlanSubheading from '../ProPlanSubheading'
1010

1111
function PlanDetails({
1212
isSentryUpgrade,
13-
sentryAnnualUnitPrice,
13+
sentryMonthlyUnitPrice,
1414
proMonthlyUnitPrice,
15-
proYearlyUnitPrice,
1615
}) {
1716
if (isSentryUpgrade) {
1817
return (
@@ -22,8 +21,8 @@ function PlanDetails({
2221
/month
2322
</p>
2423
<p className="text-ds-gray-senary">
25-
over 5 users is ${sentryAnnualUnitPrice} per user/month, billed
26-
annually
24+
over 5 users is ${sentryMonthlyUnitPrice} per user/month, billed
25+
monthly
2726
</p>
2827
</div>
2928
)
@@ -32,27 +31,24 @@ function PlanDetails({
3231
return (
3332
<div className="text-xs">
3433
<p className="font-semibold">
35-
<span className="text-2xl">${proYearlyUnitPrice}</span> per user/month
36-
</p>
37-
<p className="text-ds-gray-senary">
38-
billed annually, or ${proMonthlyUnitPrice} per user billing monthly
34+
<span className="text-2xl">${proMonthlyUnitPrice}</span> per user/month
3935
</p>
36+
<p className="text-ds-gray-senary">billed monthly</p>
4037
</div>
4138
)
4239
}
4340

4441
PlanDetails.propTypes = {
4542
isSentryUpgrade: PropType.bool.isRequired,
46-
sentryAnnualUnitPrice: PropType.number,
43+
sentryMonthlyUnitPrice: PropType.number,
4744
proMonthlyUnitPrice: PropType.number,
48-
proYearlyUnitPrice: PropType.number,
4945
}
5046

5147
function PlanUpgradePro({ isSentryUpgrade, plans }) {
52-
const { proPlanMonth, proPlanYear } = findProPlans({ plans })
53-
const { sentryPlanYear } = findSentryPlans({ plans })
48+
const { proPlanMonth } = findProPlans({ plans })
49+
const { sentryPlanMonth } = findSentryPlans({ plans })
5450

55-
const upgradeToPlan = isSentryUpgrade ? sentryPlanYear : proPlanMonth
51+
const upgradeToPlan = isSentryUpgrade ? sentryPlanMonth : proPlanMonth
5652

5753
return (
5854
<div className="flex flex-col border">
@@ -79,9 +75,8 @@ function PlanUpgradePro({ isSentryUpgrade, plans }) {
7975
</p>
8076
<PlanDetails
8177
isSentryUpgrade={isSentryUpgrade}
82-
sentryAnnualUnitPrice={sentryPlanYear?.baseUnitPrice}
78+
sentryMonthlyUnitPrice={sentryPlanMonth?.baseUnitPrice}
8379
proMonthlyUnitPrice={proPlanMonth?.baseUnitPrice}
84-
proYearlyUnitPrice={proPlanYear?.baseUnitPrice}
8580
/>
8681
</div>
8782
</div>

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/PlanUpgradePro/PlanUpgradePro.test.jsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const plansWithSentryOptions = [
9797
marketingName: 'Sentry',
9898
value: Plans.USERS_SENTRYM,
9999
billingRate: null,
100-
baseUnitPrice: 0,
100+
baseUnitPrice: 456,
101101
benefits: ['Includes 5 seats', 'Unlimited public repositories'],
102102
monthlyUploadLimit: null,
103103
},
@@ -180,15 +180,15 @@ describe('PlanUpgradePro', () => {
180180
expect(sentryPrice).toBeInTheDocument()
181181
})
182182

183-
it('shows sentry annual price', async () => {
183+
it('shows sentry monthly price', async () => {
184184
render(
185185
<PlanUpgradePro isSentryUpgrade plans={plansWithSentryOptions} />,
186186
{
187187
wrapper,
188188
}
189189
)
190190

191-
const annualSentryPrice = await screen.findByText(/123/)
191+
const annualSentryPrice = await screen.findByText(/456/)
192192
expect(annualSentryPrice).toBeInTheDocument()
193193
})
194194

@@ -266,7 +266,7 @@ describe('PlanUpgradePro', () => {
266266
expect(monthlyProPrice).toBeInTheDocument()
267267
})
268268

269-
it('shows pro yearly price', async () => {
269+
it('does not show pro yearly price', async () => {
270270
render(
271271
<PlanUpgradePro
272272
isSentryUpgrade={false}
@@ -277,8 +277,11 @@ describe('PlanUpgradePro', () => {
277277
}
278278
)
279279

280-
const yearlyProPrice = await screen.findByText(/456/)
281-
expect(yearlyProPrice).toBeInTheDocument()
280+
const monthlyProPrice = await screen.findByText(/789/)
281+
expect(monthlyProPrice).toBeInTheDocument()
282+
283+
const yearlyProPrice = screen.queryByText(/456/)
284+
expect(yearlyProPrice).not.toBeInTheDocument()
282285
})
283286

284287
it('shows the actions billing component', async () => {

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/PlanUpgradeTeam/PlanUpgradeTeam.jsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,12 @@ function PlanUpgradeTeam() {
1616
const currentPlan = planData?.plan
1717
const { data: plans } = useAvailablePlans({ provider, owner })
1818

19-
const { teamPlanMonth, teamPlanYear } = findTeamPlans({
19+
const { teamPlanMonth } = findTeamPlans({
2020
plans,
2121
})
2222
const monthlyTeamBenefits = teamPlanMonth?.benefits
2323
const monthlyMarketingName = teamPlanMonth?.marketingName
2424
const monthlyUnitPrice = teamPlanMonth?.baseUnitPrice
25-
const yearlyUnitPrice = teamPlanYear?.baseUnitPrice
2625

2726
let buttonText = 'Manage plan'
2827
if (currentPlan?.isFreePlan || currentPlan?.isTrialPlan) {
@@ -65,12 +64,10 @@ function PlanUpgradeTeam() {
6564
<p className="text-xs font-semibold">Pricing</p>
6665
<div className="text-xs">
6766
<p className="font-semibold">
68-
<span className="text-2xl">${yearlyUnitPrice}</span> per
67+
<span className="text-2xl">${monthlyUnitPrice}</span> per
6968
user/month
7069
</p>
71-
<p className="text-ds-gray-senary">
72-
billed annually, or ${monthlyUnitPrice} per user billing monthly
73-
</p>
70+
<p className="text-ds-gray-senary">billed monthly</p>
7471
</div>
7572
</div>
7673
</div>

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/FreePlanCard/PlanUpgradeTeam/PlanUpgradeTeam.test.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -283,13 +283,13 @@ describe('PlanUpgradeTeam', () => {
283283
wrapper,
284284
})
285285

286-
const yearlyPrice = await screen.findByText(/5/)
287-
expect(yearlyPrice).toBeInTheDocument()
288-
289286
const monthlyPrice = await screen.findByText(/6/)
290287
expect(monthlyPrice).toBeInTheDocument()
291288

292-
const auxiliaryText = await screen.findByText(/per user billing monthly/)
289+
const yearlyPrice = screen.queryByText(/5/)
290+
expect(yearlyPrice).not.toBeInTheDocument()
291+
292+
const auxiliaryText = await screen.findByText(/billed monthly/)
293293
expect(auxiliaryText).toBeInTheDocument()
294294
})
295295

0 commit comments

Comments
 (0)