Merge pull request #6053 from supabase/master

Prod deploy for studio

studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import { Radio } from '@supabase/ui'
+import { getProductPrice } from '../Billing.utils'
 
 interface Props {
   computeSizes: any[]
@@ -18,12 +19,7 @@ const ComputeSizeSelection: FC<Props> = ({ computeSizes, selectedComputeSize, on
       </div>
       <Radio.Group type="cards" className="billing-compute-radio">
         {computeSizes.map((option: any) => {
-          const defaultPriceId = option.metadata.default_price_id
-          const price =
-            defaultPriceId !== undefined
-              ? option.prices.find((price: any) => price.id === defaultPriceId).unit_amount
-              : option.prices[0].unit_amount
-
+          const defaultPrice = getProductPrice(option)
           return (
             <Radio
               hidden
@@ -38,7 +34,7 @@ const ComputeSizeSelection: FC<Props> = ({ computeSizes, selectedComputeSize, on
                 </div>
               }
               value={option.id}
-              optionalLabel={<div>${price / 100} / month</div>}
+              optionalLabel={<div>${defaultPrice.unit_amount / 100} / month</div>}
               checked={selectedComputeSize?.id === option.id}
               onChange={() => onSelectOption(option)}
             />

studio/components/interfaces/Billing/Billing.utils.ts

@@ -0,0 +1,8 @@
+export const getProductPrice = (product: any) => {
+  const defaultPriceId = product.metadata?.default_price_id
+  const price =
+    defaultPriceId !== undefined
+      ? product.prices.find((price: any) => price.id === defaultPriceId)
+      : product.prices[0]
+  return price
+}

studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx

@@ -4,6 +4,7 @@ import { Listbox, IconLoader, Button, IconPlus, IconAlertCircle } from '@supabas
 import { useStore } from 'hooks'
 import { STRIPE_PRODUCT_IDS } from 'lib/constants'
 import { SubscriptionPreview } from '../Billing.types'
+import { getProductPrice } from '../Billing.utils'
 import PaymentTotal from './PaymentTotal'
 import InformationBox from 'components/ui/InformationBox'
 
@@ -84,7 +85,9 @@ const PaymentSummaryPanel: FC<Props> = ({
         {isChangingPlan && (
           <div className="flex items-center justify-between">
             <p className="text-sm">{getPlanName(selectedPlan)}</p>
-            <p className="text-sm">${(selectedPlan.prices[0].unit_amount / 100).toFixed(2)}</p>
+            <p className="text-sm">
+              ${(getProductPrice(selectedPlan).unit_amount / 100).toFixed(2)}
+            </p>
           </div>
         )}
       </div>
@@ -106,7 +109,7 @@ const PaymentSummaryPanel: FC<Props> = ({
               <p
                 className={`${isChangingComputeSize ? 'text-scale-1100 line-through' : ''} text-sm`}
               >
-                ${(currentComputeSize.prices[0].unit_amount / 100).toFixed(2)}
+                ${(getProductPrice(currentComputeSize).unit_amount / 100).toFixed(2)}
               </p>
             </div>
           )}
@@ -114,7 +117,7 @@ const PaymentSummaryPanel: FC<Props> = ({
             <div className="flex items-center justify-between">
               <p className="text-sm">{selectedComputeSize.name}</p>
               <p className="text-sm">
-                ${(selectedComputeSize.prices[0].unit_amount / 100).toFixed(2)}
+                ${(getProductPrice(selectedComputeSize).unit_amount / 100).toFixed(2)}
               </p>
             </div>
           )}

studio/components/interfaces/Billing/ProUpgrade/ProUpgrade.utils.ts

@@ -1,20 +1,17 @@
+import { getProductPrice } from '../Billing.utils'
+
 export const formSubscriptionUpdatePayload = (
   selectedTier: any,
   selectedComputeSize: any,
   selectedPaymentMethod: string,
   region: string
 ) => {
-  const defaultPriceId = selectedTier.metadata?.default_price_id
-  const price =
-    defaultPriceId !== undefined
-      ? selectedTier.prices.find((price: any) => price.id === defaultPriceId).id
-      : selectedTier.prices[0].id
-
+  const defaultPrice = getProductPrice(selectedTier)
   const addons =
     region === 'af-south-1' || !selectedComputeSize.id ? [] : [selectedComputeSize.prices[0].id]
   const proration_date = Math.floor(Date.now() / 1000)
   return {
-    tier: price,
+    tier: defaultPrice.id,
     addons,
     proration_date,
     payment_method: selectedPaymentMethod,