copy and query invalidation

studio/components/interfaces/BillingV2/Subscription/AddOns/ComputeInstanceSidePanel.tsx

@@ -191,7 +191,7 @@ const ComputeInstanceSidePanel = () => {
                       </Button>
                     }
                   >
-                    Upgrade your project's plan to change the compute size of your project
+                    Upgrade your plan to change the compute size of your project
                   </Alert>
                 )}
                 <Radio.Group

studio/components/interfaces/BillingV2/Subscription/AddOns/CustomDomainSidePanel.tsx

@@ -198,7 +198,7 @@ const CustomDomainSidePanel = () => {
                 </Button>
               }
             >
-              Upgrade your project's plan to add a custom domain to your project
+              Upgrade your plan to add a custom domain to your project
             </Alert>
           )}
         </div>

studio/components/interfaces/BillingV2/Subscription/AddOns/PITRSidePanel.tsx

@@ -186,7 +186,7 @@ const PITRSidePanel = () => {
                     </Button>
                   }
                 >
-                  Upgrade your project's plan to change the compute size of your project
+                  Upgrade your plan to change the compute size of your project
                 </Alert>
               ) : subscriptionCompute === undefined ? (
                 <Alert

studio/components/interfaces/BillingV2/Subscription/CostControl/CostControl.tsx

@@ -32,7 +32,7 @@ const CostControl = ({}: CostControlProps) => {
           <div className="sticky top-16">
             <div className="space-y-6">
               <div>
-                <p className="text-base">Cost control</p>
+                <p className="text-base">Cost Control</p>
                 <p className="text-sm text-scale-1000">
                   Control whether to usage beyond your plans included quota
                 </p>
@@ -70,8 +70,13 @@ const CostControl = ({}: CostControlProps) => {
                 } plan`}
               >
                 {currentPlan?.name || ''} plan requires you to have spend cap off at all times. Your
-                project will never become unresponsive. Only when your included usage is exceeded
-                will you be charged for any additional usage
+                project will never become unresponsive. Only when your{' '}
+                <Link href="#breakdown">
+                  <a className="text-sm text-green-900 transition hover:text-green-1000">
+                    included usage
+                  </a>
+                </Link>{' '}
+                is exceeded will you be charged for any additional usage.
               </Alert>
             ) : (
               <p className="text-sm text-scale-1000">

studio/components/interfaces/BillingV2/Subscription/CostControl/SpendCapSidePanel.tsx

@@ -170,7 +170,9 @@ const SpendCapSidePanel = () => {
                             </Table.td>
                             <Table.td>
                               {costs.pricingStrategy === 'UNIT' ? (
-                                <p className="text-xs">${costs.pricingOptions.perUnitPrice} per {item.unitName}</p>
+                                <p className="text-xs">
+                                  ${costs.pricingOptions.perUnitPrice} per {item.unitName}
+                                </p>
                               ) : costs.pricingStrategy === 'PACKAGE' ? (
                                 <p className="text-xs">
                                   ${costs.pricingOptions.packagePrice} per{' '}
@@ -199,7 +201,7 @@ const SpendCapSidePanel = () => {
                 </Button>
               }
             >
-              Upgrade your project's plan to disable the spend cap
+              Upgrade your plan to disable the spend cap
             </Alert>
           )}
 

studio/components/interfaces/BillingV2/Subscription/Subscription.constants.ts

@@ -86,7 +86,7 @@ export const BILLING_BREAKDOWN_METRICS = [
   },
   {
     key: 'func_invocations',
-    name: 'Edge function invocations',
+    name: 'Edge Function invocations',
     units: 'absolute',
     anchor: 'funcInvocations',
     metric: 'FUNCTION_INVOCATIONS',
@@ -95,7 +95,7 @@ export const BILLING_BREAKDOWN_METRICS = [
   },
   {
     key: 'func_count',
-    name: 'Edge functions',
+    name: 'Edge Functions',
     units: 'absolute',
     anchor: 'funcCount',
     metric: 'FUNCTION_COUNT',

studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx

@@ -110,7 +110,7 @@ const SubscriptionTier = ({}: SubscriptionTierProps) => {
                     </div>,
                   ]}
                 >
-                  Please contact us if you'd like to change your project's plan
+                  Please contact us if you'd like to change your plan.
                 </Alert>
               ))}
             {!subscription?.usage_billing_enabled && (
@@ -129,7 +129,7 @@ const SubscriptionTier = ({}: SubscriptionTierProps) => {
                     </span>
                   ) : (
                     <span>
-                      You can change the Cost control settings if you plan on exceeding the included
+                      You can change the Cost Control settings if you plan on exceeding the included
                       usage quotas.
                     </span>
                   )}

studio/data/subscriptions/project-addon-update-mutation.ts

@@ -47,9 +47,11 @@ export const useProjectAddonUpdateMutation = ({
     {
       async onSuccess(data, variables, context) {
         const { projectRef } = variables
-        // [Joshen] Only invalidate addons, not subscriptions, as AddOn section in
-        // subscription page is using AddOn react query
-        await queryClient.invalidateQueries(subscriptionKeys.addons(projectRef))
+        await Promise.all([
+          queryClient.invalidateQueries(subscriptionKeys.subscriptionV2(projectRef)),
+          queryClient.invalidateQueries(subscriptionKeys.subscription(projectRef)),
+          queryClient.invalidateQueries(subscriptionKeys.addons(projectRef)),
+        ])
         await onSuccess?.(data, variables, context)
       },
       ...options,

studio/data/subscriptions/project-subscription-update-mutation.ts

@@ -3,7 +3,12 @@ import { put } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { subscriptionKeys } from './keys'
 
-export type SubscriptionTier =  'tier_free' | 'tier_pro' | 'tier_payg' | 'tier_team' | 'tier_enterprise'
+export type SubscriptionTier =
+  | 'tier_free'
+  | 'tier_pro'
+  | 'tier_payg'
+  | 'tier_team'
+  | 'tier_enterprise'
 
 export type ProjectSubscriptionUpdateVariables = {
   projectRef: string
@@ -51,7 +56,11 @@ export const useProjectSubscriptionUpdateMutation = ({
     {
       async onSuccess(data, variables, context) {
         const { projectRef } = variables
-        await queryClient.invalidateQueries(subscriptionKeys.subscriptionV2(projectRef))
+        await Promise.all([
+          queryClient.invalidateQueries(subscriptionKeys.subscriptionV2(projectRef)),
+          queryClient.invalidateQueries(subscriptionKeys.subscription(projectRef)),
+          queryClient.invalidateQueries(subscriptionKeys.addons(projectRef)),
+        ])
         await onSuccess?.(data, variables, context)
       },
       ...options,