feat: Remove annual option except for existing annual plans

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

@@ -177,7 +177,7 @@ describe('TeamPlanCard', () => {
     const monthlyPrice = await screen.findByText(/6/)
     expect(monthlyPrice).toBeInTheDocument()
 
-    const auxiliaryText = await screen.findByText(/billed monthly/)
+    const auxiliaryText = await screen.findByText(/per user billed monthly/)
     expect(auxiliaryText).toBeInTheDocument()
   })
 

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

@@ -47,11 +47,9 @@ const TeamPlanCard: React.FC = () => {
         <div className="flex flex-col gap-2 border-t pt-2 sm:border-0 sm:p-0">
           <p className="text-xs font-semibold">Pricing</p>
           <div>
-            <p className="font-semibold">
-              <span className="text-2xl">${teamPlanMonth?.baseUnitPrice}</span>{' '}
-              per user/month
+            <p className="text-ds-gray-senary">
+              ${teamPlanMonth?.baseUnitPrice} per user billed monthly
             </p>
-            <p className="text-ds-gray-senary">billed monthly</p>
           </div>
         </div>
       </div>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.jsx

@@ -33,7 +33,12 @@ const cardBrand = {
   },
 }
 
-function CardInformation({ subscriptionDetail, card, nextBillPrice }) {
+function CardInformation({
+  subscriptionDetail,
+  card,
+  nextBillPrice,
+  isFreePlan,
+}) {
   const typeCard = cardBrand[card?.brand] ?? cardBrand?.fallback
   let nextBilling = null
 
@@ -58,7 +63,7 @@ function CardInformation({ subscriptionDetail, card, nextBillPrice }) {
       <p className="text-ds-gray-quinary">
         Expires {card?.expMonth}/{lastTwoDigits(card?.expYear)}
       </p>
-      {nextBilling && (
+      {nextBilling && !isFreePlan && (
         <p className="text-sm text-ds-gray-quinary">
           Your next billing date is{' '}
           <span className="text-ds-gray-octonary">
@@ -81,6 +86,7 @@ CardInformation.propTypes = {
     expYear: PropTypes.number.isRequired,
   }).isRequired,
   nextBillPrice: PropTypes.string,
+  isFreePlan: PropTypes.bool,
 }
 
 export default CardInformation

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx

@@ -40,23 +40,32 @@ const calculateNextBillPrice = ({ planData, scheduledPhase }) => {
     seats = scheduledPhaseQuantity ?? 0
     baseUnitPrice = scheduledPhaseBaseUnitPrice ?? 0
     calculatePriceFunction =
-      scheduledPhasePlanName === PlanMarketingNames.PRO
-        ? calculatePriceProPlan
-        : scheduledPhasePlanName === PlanMarketingNames.TEAM
-          ? calculatePriceTeamPlan
-          : calculatePriceSentryPlan
+      scheduledPhasePlanName === PlanMarketingNames.SENTRY
+        ? calculatePriceSentryPlan
+        : scheduledPhasePlanName === PlanMarketingNames.PRO
+          ? calculatePriceProPlan
+          : scheduledPhasePlanName === PlanMarketingNames.TEAM
+            ? calculatePriceTeamPlan
+            : null
   } else {
     isPerYear = planData?.plan?.billingRate === BillingRate.ANNUALLY
     seats =
       (planData?.plan?.planUserCount ?? 0) -
       (planData?.plan?.freeSeatCount ?? 0)
     baseUnitPrice = planData?.plan?.baseUnitPrice ?? 0
-    calculatePriceFunction = planData?.plan?.isProPlan
-      ? calculatePriceProPlan
-      : planData?.plan?.isTeamPlan
-        ? calculatePriceTeamPlan
-        : calculatePriceSentryPlan
+    calculatePriceFunction = planData?.plan?.isSentryPlan
+      ? calculatePriceSentryPlan
+      : planData?.plan?.isProPlan
+        ? calculatePriceProPlan
+        : planData?.plan?.isTeamPlan
+          ? calculatePriceTeamPlan
+          : null
   }
+
+  if (!calculatePriceFunction) {
+    return null
+  }
+
   // make sure seats is not negative
   seats = Math.max(seats, 0)
   const billPrice = calculatePriceFunction({
@@ -118,6 +127,7 @@ function PaymentCard({ accountDetails, provider, owner }) {
           card={card}
           subscriptionDetail={subscriptionDetail}
           nextBillPrice={nextBillPrice}
+          isFreePlan={planData?.plan?.isFreePlan}
         />
       ) : usBankAccount ? (
         <BankInformation

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

@@ -117,7 +117,7 @@ const sentryPlans = [
   {
     marketingName: 'Sentry',
     value: Plans.USERS_SENTRYM,
-    billingRate: null,
+    billingRate: BillingRate.MONTHLY,
     baseUnitPrice: 12,
     benefits: ['Includes 5 seats', 'Unlimited public repositories'],
     monthlyUploadLimit: null,
@@ -127,7 +127,7 @@ const sentryPlans = [
   {
     marketingName: 'Sentry',
     value: Plans.USERS_SENTRYY,
-    billingRate: null,
+    billingRate: BillingRate.ANNUALLY,
     baseUnitPrice: 10,
     benefits: ['Includes 5 seats', 'Unlimited private repositories'],
     monthlyUploadLimit: null,
@@ -313,6 +313,7 @@ describe('FreePlanCard', () => {
       })
 
       const link = await screen.findByRole('link', { name: /Upgrade/ })
+
       expect(link).toBeInTheDocument()
       expect(link).toHaveAttribute(
         'href',
@@ -367,9 +368,6 @@ describe('FreePlanCard', () => {
       const cost = await screen.findByText(/\$12/)
       expect(cost).toBeInTheDocument()
 
-      const billingText = await screen.findByText(/per user\/month/)
-      expect(billingText).toBeInTheDocument()
-
       const monthlyBillingText = await screen.findByText(/billed monthly/)
       expect(monthlyBillingText).toBeInTheDocument()
     })
@@ -500,6 +498,7 @@ describe('FreePlanCard', () => {
       })
 
       const cost = await screen.findByText(/\$29/)
+
       expect(cost).toBeInTheDocument()
 
       const perMonth = await screen.findByText(/^\/month/)

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

@@ -57,7 +57,7 @@ function PlanUpgradePro({ isSentryUpgrade, plans }) {
           <h2 className="font-semibold">{upgradeToPlan?.marketingName} plan</h2>
           <ProPlanSubheading />
         </div>
-        <ActionsBilling buttonOptions={{ params: { plan: 'pro' } }} />
+        <ActionsBilling />
       </div>
       <hr />
       <div className="grid gap-4 p-4 sm:grid-cols-2 sm:gap-0">

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

@@ -8,12 +8,8 @@ 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: (props) => {
-    mockActionsBilling(props)
-    return 'Actions Billing'
-  },
+  default: () => 'Actions Billing',
 }))
 vi.mock('shared/plan/BenefitList', () => ({ default: () => 'BenefitsList' }))
 
@@ -101,7 +97,7 @@ const plansWithSentryOptions = [
     marketingName: 'Sentry',
     value: Plans.USERS_SENTRYM,
     billingRate: null,
-    baseUnitPrice: 12,
+    baseUnitPrice: 456,
     benefits: ['Includes 5 seats', 'Unlimited public repositories'],
     monthlyUploadLimit: null,
   },
@@ -172,7 +168,7 @@ describe('PlanUpgradePro', () => {
       expect(benefitsList).toBeInTheDocument()
     })
 
-    it('shows sentry up to 5 users price', async () => {
+    it('shows sentry price', async () => {
       render(
         <PlanUpgradePro isSentryUpgrade plans={plansWithSentryOptions} />,
         {
@@ -184,15 +180,15 @@ describe('PlanUpgradePro', () => {
       expect(sentryPrice).toBeInTheDocument()
     })
 
-    it('shows sentry above 5 users price', async () => {
+    it('shows sentry monthly price', async () => {
       render(
         <PlanUpgradePro isSentryUpgrade plans={plansWithSentryOptions} />,
         {
           wrapper,
         }
       )
 
-      const annualSentryPrice = await screen.findByText(/12/)
+      const annualSentryPrice = await screen.findByText(/456/)
       expect(annualSentryPrice).toBeInTheDocument()
     })
 
@@ -207,21 +203,6 @@ 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', () => {
@@ -285,7 +266,7 @@ describe('PlanUpgradePro', () => {
       expect(monthlyProPrice).toBeInTheDocument()
     })
 
-    it('does not shows pro yearly price', async () => {
+    it('does not show pro yearly price', async () => {
       render(
         <PlanUpgradePro
           isSentryUpgrade={false}
@@ -296,6 +277,9 @@ describe('PlanUpgradePro', () => {
         }
       )
 
+      const monthlyProPrice = await screen.findByText(/789/)
+      expect(monthlyProPrice).toBeInTheDocument()
+
       const yearlyProPrice = screen.queryByText(/456/)
       expect(yearlyProPrice).not.toBeInTheDocument()
     })
@@ -314,23 +298,5 @@ 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.test.jsx

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

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

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import { useParams } from 'react-router-dom'
 
 import githubLogo from 'assets/githublogo.png'
@@ -7,10 +6,10 @@ import { useAvailablePlans } from 'services/account/useAvailablePlans'
 import { TrialStatuses, usePlanData } from 'services/account/usePlanData'
 import { useStartTrial } from 'services/trial'
 import { canApplySentryUpgrade } from 'shared/utils/billing'
-import A from 'ui/A'
+import A from 'ui/A/A'
 import Button from 'ui/Button'
 
-function PlansActionsBilling({ buttonOptions }) {
+function PlansActionsBilling() {
   const { provider, owner } = useParams()
   const { data: plans } = useAvailablePlans({ provider, owner })
 
@@ -40,7 +39,14 @@ function PlansActionsBilling({ buttonOptions }) {
           Start trial
         </Button>
         <p className="font-semibold">OR</p>
-        <A to={{ pageName: 'upgradeOrgPlan' }}>upgrade now</A>
+        <A
+          to={{
+            pageName: 'upgradeOrgPlan',
+            options: { params: { plan: 'pro' } },
+          }}
+        >
+          upgrade now
+        </A>
       </div>
     )
   }
@@ -56,7 +62,7 @@ function PlansActionsBilling({ buttonOptions }) {
         <Button
           to={{
             pageName: 'upgradeOrgPlan',
-            ...(buttonOptions && { options: buttonOptions }),
+            options: { params: { plan: 'pro' } },
           }}
           variant="primary"
         >
@@ -71,7 +77,7 @@ function PlansActionsBilling({ buttonOptions }) {
       <Button
         to={{
           pageName: 'upgradeOrgPlan',
-          ...(buttonOptions && { options: buttonOptions }),
+          options: { params: { plan: 'pro' } },
         }}
         variant="primary"
       >
@@ -83,11 +89,7 @@ function PlansActionsBilling({ buttonOptions }) {
   )
 }
 
-PlansActionsBilling.propTypes = {
-  buttonOptions: PropTypes.object,
-}
-
-function ActionsBilling({ buttonOptions }) {
+function ActionsBilling() {
   const { owner, provider } = useParams()
   const { data: accountDetails } = useAccountDetails({ owner, provider })
   const username = accountDetails?.rootOrganization?.username
@@ -133,11 +135,7 @@ function ActionsBilling({ buttonOptions }) {
     )
   }
 
-  return <PlansActionsBilling buttonOptions={buttonOptions} />
+  return <PlansActionsBilling />
 }
 
 export default ActionsBilling
-
-ActionsBilling.propTypes = {
-  buttonOptions: PropTypes.object,
-}