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 @@
     marketingName: 'Sentry',
     value: Plans.USERS_SENTRYM,
     billingRate: null,
-    baseUnitPrice: 0,
+    baseUnitPrice: 12,
     benefits: ['Includes 5 seats', 'Unlimited public repositories'],
     monthlyUploadLimit: null,
     isTeamPlan: false,
@@ -315,7 +315,7 @@
       const link = await screen.findByRole('link', { name: /Upgrade/ })
 
       expect(link).toBeInTheDocument()
       expect(link).toHaveAttribute('href', '/plan/bb/critical-role/upgrade')
     })
 
     it('renders the help message', async () => {
@@ -362,15 +362,13 @@
         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()
     })
 
@@ -479,7 +477,7 @@
         name: /Upgrade/,
       })
       expect(upgradeLink).toBeInTheDocument()
       expect(upgradeLink).toHaveAttribute(
         'href',
         '/plan/bb/critical-role/upgrade'
       )
@@ -506,7 +504,7 @@
       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">
@@ -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

@@ -97,7 +97,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 +168,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 +180,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()
     })
 
@@ -266,7 +266,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 +277,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 () => {

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()
     })
 

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/shared/ActionsBilling/ActionsBilling.jsx

@@ -52,7 +52,13 @@ function PlansActionsBilling() {
   ) {
     return (
       <div className="flex self-start">
-        <Button to={{ pageName: 'upgradeOrgPlan' }} variant="primary">
+        <Button
+          to={{
+            pageName: 'upgradeOrgPlan',
+            options: { params: { plan: 'pro' } },
+          }}
+          variant="primary"
+        >
           {planData?.plan?.isSentryPlan ? 'Manage plan' : 'Upgrade'}
         </Button>
       </div>
@@ -61,7 +67,13 @@ function PlansActionsBilling() {
 
   return (
     <div className="flex self-start">
-      <Button to={{ pageName: 'upgradeOrgPlan' }} variant="primary">
+      <Button
+        to={{
+          pageName: 'upgradeOrgPlan',
+          options: { params: { plan: 'pro' } },
+        }}
+        variant="primary"
+      >
         {planData?.plan?.isFreePlan || planData?.plan?.isTrialPlan
           ? 'Upgrade'
           : 'Manage plan'}

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeDetails/ProPlanDetails/ProPlanDetails.jsx

@@ -15,7 +15,7 @@ function ProPlanDetails() {
   const { data: planData } = usePlanData({ provider, owner })
   const { data: accountDetails } = useAccountDetails({ provider, owner })
   const { data: plans } = useAvailablePlans({ provider, owner })
-  const { proPlanMonth, proPlanYear } = findProPlans({ plans })
+  const { proPlanMonth } = findProPlans({ plans })
 
   const scheduledPhase = accountDetails?.scheduleDetail?.scheduledPhase
 
@@ -25,26 +25,23 @@ function ProPlanDetails() {
 
   return (
     <div className="h-fit border md:w-[280px]">
-      <h3 className="p-4 font-semibold">{proPlanYear?.marketingName} plan</h3>
+      <h3 className="p-4 font-semibold">{proPlanMonth?.marketingName} plan</h3>
       <hr />
       <div className="flex flex-col gap-6 p-4">
         <div>
           <p className="mb-2 text-xs font-semibold">Pricing</p>
           <p className="text-xs font-semibold">
-            <span className="text-2xl">${proPlanYear?.baseUnitPrice}</span> per
+            <span className="text-2xl">${proPlanMonth?.baseUnitPrice}</span> per
             user/month
           </p>
-          <p className="text-xs text-ds-gray-senary">
-            billed annually, or ${proPlanMonth?.baseUnitPrice} for monthly
-            billing
-          </p>
+          <p className="text-xs text-ds-gray-senary">billed monthly</p>
         </div>
         <div>
           <p className="mb-2 text-xs font-semibold">Includes</p>
           <BenefitList
             iconName="check"
             iconColor="text-ds-pink-default"
-            benefits={proPlanYear?.benefits}
+            benefits={proPlanMonth?.benefits}
           />
         </div>
         {scheduledPhase && (

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeDetails/ProPlanDetails/ProPlanDetails.test.jsx

@@ -270,6 +270,7 @@ describe('ProPlanDetails', () => {
   }
 
   describe('when rendered', () => {
+    // we still support existing yearly plans
     it('shows pro yearly marketing name', async () => {
       setup({ isSentryPlan: false })
       render(<ProPlanDetails />, { wrapper: wrapper() })
@@ -294,7 +295,7 @@ describe('ProPlanDetails', () => {
 
       render(<ProPlanDetails />, { wrapper: wrapper() })
 
-      const price = await screen.findByText(/\$10/)
+      const price = await screen.findByText(/\$12/)
       expect(price).toBeInTheDocument()
     })
 
@@ -303,9 +304,7 @@ describe('ProPlanDetails', () => {
 
       render(<ProPlanDetails />, { wrapper: wrapper() })
 
-      const disclaimer = await screen.findByText(
-        /billed annually, or \$12 for monthly billing/i
-      )
+      const disclaimer = await screen.findByText(/billed monthly/i)
       expect(disclaimer).toBeInTheDocument()
     })