catch mutation error in component

packages/app/src/app/overmind/namespaces/dashboard/actions.ts

@@ -1635,14 +1635,8 @@ export const changeSubscriptionBillingInterval: AsyncAction = async ({
   state,
   effects,
 }) => {
-  try {
-    await effects.gql.mutations.updateSubscriptionBillingInterval({
-      teamId: state.activeTeam,
-      subscriptionId: state.activeTeamInfo.subscription.id,
-    });
-  } catch {
-    effects.notificationToast.error(
-      'There was a problem updating your billing interval. Please email us at hello@codesandbox.io'
-    );
-  }
+  await effects.gql.mutations.updateSubscriptionBillingInterval({
+    teamId: state.activeTeam,
+    subscriptionId: state.activeTeamInfo.subscription.id,
+  });
 };

packages/app/src/app/pages/Pro/index-v2.tsx

@@ -130,19 +130,24 @@ const UpgradeSteps = () => {
 
   const [scriptLoaded] = useScript('https://cdn.paddle.com/paddle/paddle.js');
 
-  const { actions } = useOvermind();
-
   React.useEffect(() => {
     if (scriptLoaded && checkoutReady) setStep(3);
   }, [scriptLoaded, checkoutReady]);
 
   // this is a complete tangent from the inline checkout flow.
   // only used when the user already has a subscription
   // and is trying to change the billing interval for the next cycle
+  const { actions, effects } = useOvermind();
+
   const changeNextBillingInterval = async () => {
-    await actions.dashboard.changeSubscriptionBillingInterval();
-    // TODO: Add check for success here, not sure how
-    location.href = '/pro/success?v=2';
+    try {
+      await actions.dashboard.changeSubscriptionBillingInterval();
+      location.href = '/pro/success?v=2';
+    } catch {
+      effects.notificationToast.error(
+        'There was a problem updating your billing interval. Please email us at hello@codesandbox.io'
+      );
+    }
   };
 
   return (
@@ -619,7 +624,7 @@ const Upgrade = ({
               // non-admins can't upgrade
               activeUserAuthorization !== TeamMemberAuthorization.Admin ||
               // you are not allowed to change from yearly to monthly
-              currentSubscription.details.billingInterval === 'YEARLY' ||
+              // currentSubscription.details.billingInterval === 'YEARLY' ||
               // if it's already the same, then nothing to do here
               plan.billingInterval ===
                 currentSubscription?.details.billingInterval