diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/individual-plans-table.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/individual-plans-table.tsx index 019c3f81d0..a6ede01715 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/individual-plans-table.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/individual-plans-table.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react' import { useTranslation } from 'react-i18next' import { Plan } from '../../../../../../../../../types/subscription/plan' import Icon from '../../../../../../../shared/components/icon' @@ -95,7 +96,16 @@ export function IndividualPlansTable({ plans }: { plans: Array }) { const { t } = useTranslation() 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 ( @@ -107,7 +117,7 @@ export function IndividualPlansTable({ plans }: { plans: Array }) { - +
) diff --git a/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx b/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx index aeaf1046ee..8eb961b588 100644 --- a/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx +++ b/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx @@ -52,16 +52,17 @@ describe('', function () { const changeToPlanButtons = screen.queryAllByRole('button', { 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') const annualPlans = plans.filter(plan => plan.annual) 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( - plans.length - annualPlans.length - ) + plans.length - annualPlans.length - 1 + ) // excludes paid-personal expect(screen.queryByText('loading', { exact: false })).to.be.null })