chore: text adjustments for upcoming invoice section (#27419)

Co-authored-by: Thomas <31189692+ecktoteckto@users.noreply.github.com>

apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx

@@ -37,6 +37,9 @@ const BillingBreakdown = () => {
             Current billing cycle: {billingCycleStart.format('MMM DD')} -{' '}
             {billingCycleEnd.format('MMM DD')}
           </p>
+          <p className="text-sm text-foreground-light m-0">
+            It may take up to an hour for addon changes or new projects to show up.
+          </p>
         </div>
       </ScaffoldSectionDetail>
       <ScaffoldSectionContent>
@@ -54,14 +57,10 @@ const BillingBreakdown = () => {
 
         {invoiceFeatureEnabled && (
           <>
-            <p className="text-sm">Upcoming cost for next invoice</p>
             <p className="text-sm text-foreground-light">
-              The following table shows your upcoming costs excluding credits. Depending on your
-              usage, the final amount may vary. Next invoice on{' '}
-              <span className="text-foreground-light whitespace-nowrap">
-                {billingCycleEnd.format('MMM DD, YYYY')}
-              </span>
-              . See{' '}
+              The table shows your upcoming invoice, excluding credits. This invoice will continue
+              updating until the end of your billing period on {billingCycleEnd.format('MMMM DD')}.
+              See{' '}
               <Link
                 className="text-green-900 transition hover:text-green-1000"
                 href={`/org/${orgSlug}/usage`}

apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx

@@ -265,7 +265,7 @@ const UpcomingInvoice = ({ slug }: UpcomingInvoiceProps) => {
               <tr>
                 <td className="text-sm font-medium">
                   <span className="mr-2">Projected Costs</span>
-                  <InvoiceTooltip text="Estimated costs at the end of the billing cycle. Final amounts may vary depending on your usage." />
+                  <InvoiceTooltip text="Projected costs at the end of the billing cycle. Includes predictable costs for Compute Hours, IPv4, Custom Domain and Point-In-Time-Recovery, but no costs for metrics like MAU, storage or function invocations. Final amounts may vary depending on your usage." />
                 </td>
                 <td className="text-sm text-right font-medium" colSpan={3}>
                   {formatCurrency(upcomingInvoice?.amount_projected) ?? '-'}

apps/studio/components/interfaces/Organization/BillingSettings/helpers.ts

@@ -7,6 +7,7 @@ const pricingMetricBytes = [
 ]
 
 export const formatUsage = (pricingMetric: PricingMetric, usage: number) => {
+  console.log({ pricingMetric, usage })
   if (pricingMetricBytes.includes(pricingMetric)) {
     return +(usage / 1e9).toFixed(2).toLocaleString()
   } else {
@@ -17,7 +18,16 @@ export const formatUsage = (pricingMetric: PricingMetric, usage: number) => {
 export const billingMetricUnit = (pricingMetric: PricingMetric) => {
   if (pricingMetricBytes.includes(pricingMetric)) {
     return 'GB'
-  } else if (pricingMetric.startsWith('COMPUTE_HOURS')) {
+  } else if (
+    pricingMetric.startsWith('COMPUTE_HOURS') ||
+    [
+      PricingMetric.CUSTOM_DOMAIN,
+      PricingMetric.IPV4,
+      PricingMetric.PITR_7,
+      PricingMetric.PITR_14,
+      PricingMetric.PITR_28,
+    ].includes(pricingMetric)
+  ) {
     return 'Hours'
   } else {
     return null

apps/studio/data/analytics/org-daily-stats-query.ts

@@ -28,6 +28,11 @@ export enum PricingMetric {
   STORAGE_IMAGES_TRANSFORMED = 'STORAGE_IMAGES_TRANSFORMED',
   REALTIME_MESSAGE_COUNT = 'REALTIME_MESSAGE_COUNT',
   REALTIME_PEAK_CONNECTIONS = 'REALTIME_PEAK_CONNECTIONS',
+  CUSTOM_DOMAIN = 'CUSTOM_DOMAIN',
+  IPV4 = 'IPV4',
+  PITR_7 = 'PITR_7',
+  PITR_14 = 'PITR_14',
+  PITR_28 = 'PITR_28',
 }
 
 export enum ComputeUsageMetric {