feat: Remove option to change to yearly/annual plan

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

@@ -174,13 +174,10 @@ describe('TeamPlanCard', () => {
       wrapper,
     })
 
-    const yearlyPrice = await screen.findByText(/5/)
-    expect(yearlyPrice).toBeInTheDocument()
-
     const monthlyPrice = await screen.findByText(/6/)
     expect(monthlyPrice).toBeInTheDocument()
 
-    const auxiliaryText = await screen.findByText(/per user billing monthly/)
+    const auxiliaryText = await screen.findByText(/billed monthly/)
     expect(auxiliaryText).toBeInTheDocument()
   })
 

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

@@ -12,14 +12,14 @@ const TeamPlanCard: React.FC = () => {
   }>()
 
   const { data: plans } = useAvailablePlans({ provider, owner })
-  const { teamPlanMonth, teamPlanYear } = findTeamPlans({
+  const { teamPlanMonth } = findTeamPlans({
     plans,
   })
 
   return (
     <div className="flex flex-col border">
       <div className="flex justify-between p-4">
-        <h2 className="font-semibold">{teamPlanYear?.marketingName} plan</h2>
+        <h2 className="font-semibold">{teamPlanMonth?.marketingName} plan</h2>
         <div className="flex self-start">
           <Button
             to={{
@@ -39,7 +39,7 @@ const TeamPlanCard: React.FC = () => {
         <div className="flex flex-col gap-2">
           <p className="text-xs font-semibold">Includes</p>
           <BenefitList
-            benefits={teamPlanYear?.benefits}
+            benefits={teamPlanMonth?.benefits}
             iconName="check"
             iconColor="text-ds-pink-default"
           />
@@ -48,13 +48,10 @@ const TeamPlanCard: React.FC = () => {
           <p className="text-xs font-semibold">Pricing</p>
           <div>
             <p className="font-semibold">
-              <span className="text-2xl">${teamPlanYear?.baseUnitPrice}</span>{' '}
+              <span className="text-2xl">${teamPlanMonth?.baseUnitPrice}</span>{' '}
               per user/month
             </p>
-            <p className="text-ds-gray-senary">
-              billed annually, or ${teamPlanMonth?.baseUnitPrice} per user
-              billing monthly
-            </p>
+            <p className="text-ds-gray-senary">billed monthly</p>
           </div>
         </div>
       </div>

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

@@ -118,7 +118,7 @@ const sentryPlans = [
     marketingName: 'Sentry',
     value: Plans.USERS_SENTRYM,
     billingRate: null,
-    baseUnitPrice: 0,
+    baseUnitPrice: 12,
     benefits: ['Includes 5 seats', 'Unlimited public repositories'],
     monthlyUploadLimit: null,
     isTeamPlan: false,
@@ -313,9 +313,11 @@ describe('FreePlanCard', () => {
       })
 
       const link = await screen.findByRole('link', { name: /Upgrade/ })
-
       expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute('href', '/plan/bb/critical-role/upgrade')
+      expect(link).toHaveAttribute(
+        'href',
+        '/plan/bb/critical-role/upgrade?plan=pro'
+      )
     })
 
     it('renders the help message', async () => {
@@ -362,15 +364,13 @@ describe('FreePlanCard', () => {
         wrapper,
       })
 
-      const cost = await screen.findByText(/\$10/)
+      const cost = await screen.findByText(/\$12/)
       expect(cost).toBeInTheDocument()
 
-      const annualBillingText = await screen.findByText(/per user\/month/)
-      expect(annualBillingText).toBeInTheDocument()
+      const billingText = await screen.findByText(/per user\/month/)
+      expect(billingText).toBeInTheDocument()
 
-      const monthlyBillingText = await screen.findByText(
-        /billed annually, or \$12 per user billing monthly/
-      )
+      const monthlyBillingText = await screen.findByText(/billed monthly/)
       expect(monthlyBillingText).toBeInTheDocument()
     })
 
@@ -481,7 +481,7 @@ describe('FreePlanCard', () => {
       expect(upgradeLink).toBeInTheDocument()
       expect(upgradeLink).toHaveAttribute(
         'href',
-        '/plan/bb/critical-role/upgrade'
+        '/plan/bb/critical-role/upgrade?plan=pro'
       )
     })
 
@@ -506,7 +506,7 @@ describe('FreePlanCard', () => {
       expect(perMonth).toBeInTheDocument()
 
       const billingCycleInfo = await screen.findByText(
-        /over 5 users is \$10 per user\/month, billed annually/
+        /over 5 users is \$12 per user\/month, billed monthly/
       )
       expect(billingCycleInfo).toBeInTheDocument()
     })

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

@@ -10,9 +10,8 @@ import ProPlanSubheading from '../ProPlanSubheading'
 
 function PlanDetails({
   isSentryUpgrade,
-  sentryAnnualUnitPrice,
+  sentryMonthlyUnitPrice,
   proMonthlyUnitPrice,
-  proYearlyUnitPrice,
 }) {
   if (isSentryUpgrade) {
     return (
@@ -22,8 +21,8 @@ function PlanDetails({
           /month
         </p>
         <p className="text-ds-gray-senary">
-          over 5 users is ${sentryAnnualUnitPrice} per user/month, billed
-          annually
+          over 5 users is ${sentryMonthlyUnitPrice} per user/month, billed
+          monthly
         </p>
       </div>
     )
@@ -32,27 +31,24 @@ function PlanDetails({
   return (
     <div className="text-xs">
       <p className="font-semibold">
-        <span className="text-2xl">${proYearlyUnitPrice}</span> per user/month
-      </p>
-      <p className="text-ds-gray-senary">
-        billed annually, or ${proMonthlyUnitPrice} per user billing monthly
+        <span className="text-2xl">${proMonthlyUnitPrice}</span> per user/month
       </p>
+      <p className="text-ds-gray-senary">billed monthly</p>
     </div>
   )
 }
 
 PlanDetails.propTypes = {
   isSentryUpgrade: PropType.bool.isRequired,
-  sentryAnnualUnitPrice: PropType.number,
+  sentryMonthlyUnitPrice: PropType.number,
   proMonthlyUnitPrice: PropType.number,
-  proYearlyUnitPrice: PropType.number,
 }
 
 function PlanUpgradePro({ isSentryUpgrade, plans }) {
-  const { proPlanMonth, proPlanYear } = findProPlans({ plans })
-  const { sentryPlanYear } = findSentryPlans({ plans })
+  const { proPlanMonth } = findProPlans({ plans })
+  const { sentryPlanMonth } = findSentryPlans({ plans })
 
-  const upgradeToPlan = isSentryUpgrade ? sentryPlanYear : proPlanMonth
+  const upgradeToPlan = isSentryUpgrade ? sentryPlanMonth : proPlanMonth
 
   return (
     <div className="flex flex-col border">
@@ -61,7 +57,7 @@ function PlanUpgradePro({ isSentryUpgrade, plans }) {
           <h2 className="font-semibold">{upgradeToPlan?.marketingName} plan</h2>
           <ProPlanSubheading />
         </div>
-        <ActionsBilling />
+        <ActionsBilling buttonOptions={{ params: { plan: 'pro' } }} />
       </div>
       <hr />
       <div className="grid gap-4 p-4 sm:grid-cols-2 sm:gap-0">
@@ -79,9 +75,8 @@ function PlanUpgradePro({ isSentryUpgrade, plans }) {
           </p>
           <PlanDetails
             isSentryUpgrade={isSentryUpgrade}
-            sentryAnnualUnitPrice={sentryPlanYear?.baseUnitPrice}
+            sentryMonthlyUnitPrice={sentryPlanMonth?.baseUnitPrice}
             proMonthlyUnitPrice={proPlanMonth?.baseUnitPrice}
-            proYearlyUnitPrice={proPlanYear?.baseUnitPrice}
           />
         </div>
       </div>

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

@@ -8,8 +8,12 @@ import { BillingRate, Plans } from 'shared/utils/billing'
 import PlanUpgradePro from './PlanUpgradePro'
 
 vi.mock('../ProPlanSubheading', () => ({ default: () => 'Pro Subheading' }))
+const mockActionsBilling = vi.fn(() => 'Actions Billing')
 vi.mock('../../shared/ActionsBilling/ActionsBilling', () => ({
-  default: () => 'Actions Billing',
+  default: (props) => {
+    mockActionsBilling(props)
+    return 'Actions Billing'
+  },
 }))
 vi.mock('shared/plan/BenefitList', () => ({ default: () => 'BenefitsList' }))
 
@@ -97,7 +101,7 @@ const plansWithSentryOptions = [
     marketingName: 'Sentry',
     value: Plans.USERS_SENTRYM,
     billingRate: null,
-    baseUnitPrice: 0,
+    baseUnitPrice: 12,
     benefits: ['Includes 5 seats', 'Unlimited public repositories'],
     monthlyUploadLimit: null,
   },
@@ -168,7 +172,7 @@ describe('PlanUpgradePro', () => {
       expect(benefitsList).toBeInTheDocument()
     })
 
-    it('shows sentry price', async () => {
+    it('shows sentry up to 5 users price', async () => {
       render(
         <PlanUpgradePro isSentryUpgrade plans={plansWithSentryOptions} />,
         {
@@ -180,15 +184,15 @@ describe('PlanUpgradePro', () => {
       expect(sentryPrice).toBeInTheDocument()
     })
 
-    it('shows sentry annual price', async () => {
+    it('shows sentry above 5 users price', async () => {
       render(
         <PlanUpgradePro isSentryUpgrade plans={plansWithSentryOptions} />,
         {
           wrapper,
         }
       )
 
-      const annualSentryPrice = await screen.findByText(/123/)
+      const annualSentryPrice = await screen.findByText(/12/)
       expect(annualSentryPrice).toBeInTheDocument()
     })
 
@@ -203,6 +207,21 @@ describe('PlanUpgradePro', () => {
       const actionsBilling = await screen.findByText(/Actions Billing/)
       expect(actionsBilling).toBeInTheDocument()
     })
+
+    it('passes buttonOptions prop to ActionsBilling', async () => {
+      render(
+        <PlanUpgradePro isSentryUpgrade plans={plansWithSentryOptions} />,
+        {
+          wrapper,
+        }
+      )
+
+      const actionsBilling = await screen.findByText(/Actions Billing/)
+      expect(actionsBilling).toBeInTheDocument()
+      expect(mockActionsBilling).toHaveBeenCalledWith({
+        buttonOptions: { params: { plan: 'pro' } },
+      })
+    })
   })
 
   describe('when rendered with pro plan', () => {
@@ -266,7 +285,7 @@ describe('PlanUpgradePro', () => {
       expect(monthlyProPrice).toBeInTheDocument()
     })
 
-    it('shows pro yearly price', async () => {
+    it('does not shows pro yearly price', async () => {
       render(
         <PlanUpgradePro
           isSentryUpgrade={false}
@@ -277,8 +296,8 @@ describe('PlanUpgradePro', () => {
         }
       )
 
-      const yearlyProPrice = await screen.findByText(/456/)
-      expect(yearlyProPrice).toBeInTheDocument()
+      const yearlyProPrice = screen.queryByText(/456/)
+      expect(yearlyProPrice).not.toBeInTheDocument()
     })
 
     it('shows the actions billing component', async () => {
@@ -295,5 +314,23 @@ describe('PlanUpgradePro', () => {
       const actionsBilling = await screen.findByText(/Actions Billing/)
       expect(actionsBilling).toBeInTheDocument()
     })
+
+    it('passes buttonOptions prop to ActionsBilling', async () => {
+      render(
+        <PlanUpgradePro
+          isSentryUpgrade={false}
+          plans={plansWithoutSentryOptions}
+        />,
+        {
+          wrapper,
+        }
+      )
+
+      const actionsBilling = await screen.findByText(/Actions Billing/)
+      expect(actionsBilling).toBeInTheDocument()
+      expect(mockActionsBilling).toHaveBeenCalledWith({
+        buttonOptions: { params: { plan: 'pro' } },
+      })
+    })
   })
 })

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

@@ -16,13 +16,12 @@ function PlanUpgradeTeam() {
   const currentPlan = planData?.plan
   const { data: plans } = useAvailablePlans({ provider, owner })
 
-  const { teamPlanMonth, teamPlanYear } = findTeamPlans({
+  const { teamPlanMonth } = findTeamPlans({
     plans,
   })
   const monthlyTeamBenefits = teamPlanMonth?.benefits
   const monthlyMarketingName = teamPlanMonth?.marketingName
   const monthlyUnitPrice = teamPlanMonth?.baseUnitPrice
-  const yearlyUnitPrice = teamPlanYear?.baseUnitPrice
 
   let buttonText = 'Manage plan'
   if (currentPlan?.isFreePlan || currentPlan?.isTrialPlan) {
@@ -65,12 +64,10 @@ function PlanUpgradeTeam() {
             <p className="text-xs font-semibold">Pricing</p>
             <div className="text-xs">
               <p className="font-semibold">
-                <span className="text-2xl">${yearlyUnitPrice}</span> per
+                <span className="text-2xl">${monthlyUnitPrice}</span> per
                 user/month
               </p>
-              <p className="text-ds-gray-senary">
-                billed annually, or ${monthlyUnitPrice} per user billing monthly
-              </p>
+              <p className="text-ds-gray-senary">billed monthly</p>
             </div>
           </div>
         </div>

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

@@ -283,13 +283,13 @@ describe('PlanUpgradeTeam', () => {
         wrapper,
       })
 
-      const yearlyPrice = await screen.findByText(/5/)
-      expect(yearlyPrice).toBeInTheDocument()
+      const yearlyPrice = screen.queryByText(/5/)
+      expect(yearlyPrice).not.toBeInTheDocument()
 
       const monthlyPrice = await screen.findByText(/6/)
       expect(monthlyPrice).toBeInTheDocument()
 
-      const auxiliaryText = await screen.findByText(/per user billing monthly/)
+      const auxiliaryText = await screen.findByText(/billed monthly/)
       expect(auxiliaryText).toBeInTheDocument()
     })