From bcda19a3bca7b0433c01cf4bbfbc5474fda2f7c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Fri, 21 Jun 2024 17:26:57 +0800
Subject: [PATCH] chore: text adjustments for upcoming invoice section (#27419)

Co-authored-by: Thomas <31189692+ecktoteckto@users.noreply.github.com>
---
 .../BillingBreakdown/BillingBreakdown.tsx           | 13 ++++++-------
 .../BillingBreakdown/UpcomingInvoice.tsx            |  2 +-
 .../Organization/BillingSettings/helpers.ts         | 12 +++++++++++-
 apps/studio/data/analytics/org-daily-stats-query.ts |  5 +++++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx
index 2db03ab302a..3cb5e7bd1a1 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx
+++ b/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`}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx
index 7ba12b84031..b159b0df489 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx
+++ b/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) ?? '-'}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/helpers.ts b/apps/studio/components/interfaces/Organization/BillingSettings/helpers.ts
index 420adce0739..ca5c76c562d 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/helpers.ts
+++ b/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
diff --git a/apps/studio/data/analytics/org-daily-stats-query.ts b/apps/studio/data/analytics/org-daily-stats-query.ts
index e35642b341b..f7346831c91 100644
--- a/apps/studio/data/analytics/org-daily-stats-query.ts
+++ b/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 {