fix: ensure billing interval is passed when converting old pro (#8449)

Author: alexnm

packages/app/src/app/components/WorkspaceSetup/steps/ChangePlan.tsx

@@ -3,6 +3,7 @@ import track from '@codesandbox/common/lib/utils/analytics';
 import { Stack, Button, Text, Icon } from '@codesandbox/components';
 import * as dashboardUrls from '@codesandbox/common/lib/utils/url-generator/dashboard';
 
+import { SubscriptionInterval } from 'app/graphql/types';
 import { useURLSearchParams } from 'app/hooks/useURLSearchParams';
 import { useActions, useAppState } from 'app/overmind';
 import { StepProps } from '../types';
@@ -59,7 +60,11 @@ export const ChangePlan: React.FC<StepProps> = ({
             <Text>{checkout.newSubscription.totalCredits} VM credits</Text>
           </Stack>
           <Text size={6} color="#e5e5e5">
-            ${checkout.newSubscription.totalPrice} / month
+            ${checkout.newSubscription.totalPrice} /{' '}
+            {checkout.newSubscription.billingInterval ===
+            SubscriptionInterval.Monthly
+              ? 'month'
+              : 'year'}
           </Text>
         </Stack>
 

packages/app/src/app/graphql/types.ts

@@ -2237,6 +2237,7 @@ export type RootMutationTypeChangeTeamMemberAuthorizationsArgs = {
 
 export type RootMutationTypeConvertToUsageBillingArgs = {
   addons: Array<Scalars['String']>;
+  billingInterval: InputMaybe<SubscriptionInterval>;
   plan: Scalars['String'];
   teamId: Scalars['UUID4'];
 };
@@ -2473,6 +2474,7 @@ export type RootMutationTypePermanentlyDeleteSandboxesArgs = {
 
 export type RootMutationTypePreviewConvertToUsageBillingArgs = {
   addons: Array<Scalars['String']>;
+  billingInterval: InputMaybe<SubscriptionInterval>;
   plan: Scalars['String'];
   teamId: Scalars['UUID4'];
 };
@@ -5684,6 +5686,7 @@ export type PreviewConvertToUsageBillingMutationVariables = Exact<{
   teamId: Scalars['UUID4'];
   addons: Array<Scalars['String']> | Scalars['String'];
   plan: Scalars['String'];
+  billingInterval: InputMaybe<SubscriptionInterval>;
 }>;
 
 export type PreviewConvertToUsageBillingMutation = {
@@ -5699,6 +5702,7 @@ export type ConvertToUsageBillingMutationVariables = Exact<{
   teamId: Scalars['UUID4'];
   addons: Array<Scalars['String']> | Scalars['String'];
   plan: Scalars['String'];
+  billingInterval: InputMaybe<SubscriptionInterval>;
 }>;
 
 export type ConvertToUsageBillingMutation = {

packages/app/src/app/overmind/effects/gql/dashboard/mutations.ts

@@ -436,11 +436,13 @@ export const previewConvertToUsageBilling: Query<
     $teamId: UUID4!
     $addons: [String!]!
     $plan: String!
+    $billingInterval: SubscriptionInterval
   ) {
     previewConvertToUsageBilling(
       plan: $plan
       addons: $addons
       teamId: $teamId
+      billingInterval: $billingInterval
     ) {
       total
       totalExcludingTax
@@ -456,8 +458,14 @@ export const convertToUsageBilling: Query<
     $teamId: UUID4!
     $addons: [String!]!
     $plan: String!
+    $billingInterval: SubscriptionInterval
   ) {
-    convertToUsageBilling(plan: $plan, addons: $addons, teamId: $teamId)
+    convertToUsageBilling(
+      plan: $plan
+      addons: $addons
+      teamId: $teamId
+      billingInterval: $billingInterval
+    )
   }
 `;
 

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

@@ -355,6 +355,7 @@ export const calculateConversionCharge = async (
       teamId: workspaceId,
       plan: newSubscription.basePlan.id,
       addons: actions.checkout.getFlatAddonsList(),
+      billingInterval: newSubscription.billingInterval,
     });
 
     // Cap the values to a min of 0
@@ -391,6 +392,7 @@ export const convertToUsageBilling = async (
       teamId: workspaceId,
       plan: newSubscription.basePlan.id,
       addons: actions.checkout.getFlatAddonsList(),
+      billingInterval: newSubscription.billingInterval,
     });
 
     return { success: true };