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

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

GitOrigin-RevId: 284573cf3d5d38b1964d10fe6451b1468c90ff84

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<Plan> }) {
   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 (
     <table className="table align-middle table-vertically-centered-cells m-0">
@@ -107,7 +117,7 @@ export function IndividualPlansTable({ plans }: { plans: Array<Plan> }) {
         </tr>
       </thead>
       <tbody>
-        <PlansRows plans={plans} />
+        <PlansRows plans={filteredPlans} />
       </tbody>
     </table>
   )

services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx

@@ -52,16 +52,17 @@ describe('<ChangePlanModal />', 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
   })