fix: Do not show billing rate option buttons if plans do not exist

Author: calvin-codecov

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/ProPlanController/BillingOptions/BillingOptions.tsx

@@ -62,6 +62,11 @@ const BillingControls: React.FC<BillingControlsProps> = ({
       ? proPlanMonth?.billingRate
       : proPlanYear?.billingRate
 
+  // Don't render if no corresponding plans are available
+  if (!proPlanMonth && !proPlanYear) {
+    return null
+  }
+
   return (
     <div className="flex w-fit flex-col gap-2">
       <h3 className="font-semibold">Step 2: Choose a billing cycle</h3>
@@ -78,7 +83,7 @@ const BillingControls: React.FC<BillingControlsProps> = ({
             setOption(value)
           }}
         >
-          {currentPlanBillingRate === BillingRate.ANNUALLY && (
+          {currentPlanBillingRate === BillingRate.ANNUALLY && proPlanYear && (
             <RadioTileGroup.Item
               value={TimePeriods.ANNUAL}
               className="w-32"
@@ -87,13 +92,15 @@ const BillingControls: React.FC<BillingControlsProps> = ({
               <RadioTileGroup.Label>{TimePeriods.ANNUAL}</RadioTileGroup.Label>
             </RadioTileGroup.Item>
           )}
-          <RadioTileGroup.Item
-            value={TimePeriods.MONTHLY}
-            className="w-32"
-            data-testid="radio-monthly"
-          >
-            <RadioTileGroup.Label>{TimePeriods.MONTHLY}</RadioTileGroup.Label>
-          </RadioTileGroup.Item>
+          {proPlanMonth && (
+            <RadioTileGroup.Item
+              value={TimePeriods.MONTHLY}
+              className="w-32"
+              data-testid="radio-monthly"
+            >
+              <RadioTileGroup.Label>{TimePeriods.MONTHLY}</RadioTileGroup.Label>
+            </RadioTileGroup.Item>
+          )}
         </RadioTileGroup>
         <p>
           {baseUnitPrice !== undefined && (

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/SentryPlanController/BillingOptions/BillingOptions.tsx

@@ -63,6 +63,11 @@ const BillingControls: React.FC<BillingControlsProps> = ({
       ? sentryPlanMonth?.billingRate
       : sentryPlanYear?.billingRate
 
+  // Don't render if no corresponding plans are available
+  if (!sentryPlanMonth && !sentryPlanYear) {
+    return null
+  }
+
   return (
     <div className="flex w-fit flex-col gap-2">
       <h3 className="font-semibold">Step 2: Choose a billing cycle</h3>
@@ -79,22 +84,27 @@ const BillingControls: React.FC<BillingControlsProps> = ({
             setOption(value)
           }}
         >
-          {currentPlanBillingRate === BillingRate.ANNUALLY && (
+          {currentPlanBillingRate === BillingRate.ANNUALLY &&
+            sentryPlanYear && (
+              <RadioTileGroup.Item
+                value={TimePeriods.ANNUAL}
+                className="w-32"
+                data-testid="radio-annual"
+              >
+                <RadioTileGroup.Label>
+                  {TimePeriods.ANNUAL}
+                </RadioTileGroup.Label>
+              </RadioTileGroup.Item>
+            )}
+          {sentryPlanMonth && (
             <RadioTileGroup.Item
-              value={TimePeriods.ANNUAL}
+              value={TimePeriods.MONTHLY}
               className="w-32"
-              data-testid="radio-annual"
+              data-testid="radio-monthly"
             >
-              <RadioTileGroup.Label>{TimePeriods.ANNUAL}</RadioTileGroup.Label>
+              <RadioTileGroup.Label>{TimePeriods.MONTHLY}</RadioTileGroup.Label>
             </RadioTileGroup.Item>
           )}
-          <RadioTileGroup.Item
-            value={TimePeriods.MONTHLY}
-            className="w-32"
-            data-testid="radio-monthly"
-          >
-            <RadioTileGroup.Label>{TimePeriods.MONTHLY}</RadioTileGroup.Label>
-          </RadioTileGroup.Item>
         </RadioTileGroup>
         <p>
           {baseUnitPrice !== undefined && (

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.tsx

@@ -62,6 +62,11 @@ const BillingControls: React.FC<BillingControlsProps> = ({
       ? teamPlanMonth?.billingRate
       : teamPlanYear?.billingRate
 
+  // Don't render if no corresponding plans are available
+  if (!teamPlanMonth && !teamPlanYear) {
+    return null
+  }
+
   return (
     <div className="flex w-fit flex-col gap-2">
       <h3 className="font-semibold">Step 2: Choose a billing cycle</h3>
@@ -78,7 +83,7 @@ const BillingControls: React.FC<BillingControlsProps> = ({
             setOption(value)
           }}
         >
-          {currentPlanBillingRate === BillingRate.ANNUALLY && (
+          {currentPlanBillingRate === BillingRate.ANNUALLY && teamPlanYear && (
             <RadioTileGroup.Item
               value={TimePeriods.ANNUAL}
               className="w-32"
@@ -87,13 +92,15 @@ const BillingControls: React.FC<BillingControlsProps> = ({
               <RadioTileGroup.Label>{TimePeriods.ANNUAL}</RadioTileGroup.Label>
             </RadioTileGroup.Item>
           )}
-          <RadioTileGroup.Item
-            value={TimePeriods.MONTHLY}
-            className="w-32"
-            data-testid="radio-monthly"
-          >
-            <RadioTileGroup.Label>{TimePeriods.MONTHLY}</RadioTileGroup.Label>
-          </RadioTileGroup.Item>
+          {teamPlanMonth && (
+            <RadioTileGroup.Item
+              value={TimePeriods.MONTHLY}
+              className="w-32"
+              data-testid="radio-monthly"
+            >
+              <RadioTileGroup.Label>{TimePeriods.MONTHLY}</RadioTileGroup.Label>
+            </RadioTileGroup.Item>
+          )}
         </RadioTileGroup>
         <p>
           {baseUnitPrice !== undefined && (