Merge pull request #20802 from overleaf/rh-change-personal-plan

[web] Remove personal plans from 'change plans' table

GitOrigin-RevId: 284573cf3d5d38b1964d10fe6451b1468c90ff84
This commit is contained in:
roo hutton 2024-10-04 07:31:45 +01:00 committed by Copybot
parent 8f593757e9
commit 551de499d5
2 changed files with 18 additions and 7 deletions

View file

@ -1,3 +1,4 @@
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Plan } from '../../../../../../../../../types/subscription/plan' import { Plan } from '../../../../../../../../../types/subscription/plan'
import Icon from '../../../../../../../shared/components/icon' import Icon from '../../../../../../../shared/components/icon'
@ -95,7 +96,16 @@ export function IndividualPlansTable({ plans }: { plans: Array<Plan> }) {
const { t } = useTranslation() const { t } = useTranslation()
const { recurlyLoadError } = useSubscriptionDashboardContext() const { recurlyLoadError } = useSubscriptionDashboardContext()
if (!plans || recurlyLoadError) return null const filteredPlans = useMemo(
() =>
plans?.filter(
plan =>
!['paid-personal', 'paid-personal-annual'].includes(plan.planCode)
),
[plans]
)
if (!filteredPlans || recurlyLoadError) return null
return ( return (
<table className="table align-middle table-vertically-centered-cells m-0"> <table className="table align-middle table-vertically-centered-cells m-0">
@ -107,7 +117,7 @@ export function IndividualPlansTable({ plans }: { plans: Array<Plan> }) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<PlansRows plans={plans} /> <PlansRows plans={filteredPlans} />
</tbody> </tbody>
</table> </table>
) )

View file

@ -52,16 +52,17 @@ describe('<ChangePlanModal />', function () {
const changeToPlanButtons = screen.queryAllByRole('button', { const changeToPlanButtons = screen.queryAllByRole('button', {
name: 'Change to this plan', name: 'Change to this plan',
}) })
expect(changeToPlanButtons.length).to.equal(plans.length - 1) expect(changeToPlanButtons.length).to.equal(plans.length - 3) // excludes paid-personal and paid-personal-annual
screen.getByText('Your plan') screen.getByText('Your plan')
const annualPlans = plans.filter(plan => plan.annual) const annualPlans = plans.filter(plan => plan.annual)
expect(screen.getAllByText('/ year', { exact: false }).length).to.equal( expect(screen.getAllByText('/ year', { exact: false }).length).to.equal(
annualPlans.length annualPlans.length - 1
) ) // excludes paid-personal-annual
expect(screen.getAllByText('/ month', { exact: false }).length).to.equal( expect(screen.getAllByText('/ month', { exact: false }).length).to.equal(
plans.length - annualPlans.length plans.length - annualPlans.length - 1
) ) // excludes paid-personal
expect(screen.queryByText('loading', { exact: false })).to.be.null expect(screen.queryByText('loading', { exact: false })).to.be.null
}) })