chore: improve currency formatting (#24972)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Sep 16, 2024 · 3a578fa · 3a578fa
1 parent 4ff5be8
commit 3a578fa
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 19 deletions.
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-discount--dark.png b/frontend/__snapshots__/scenes-other-billing--billing-with-discount--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-discount--light.png b/frontend/__snapshots__/scenes-other-billing--billing-with-discount--light.png
diff --git a/...s__/scenes-other-billing--billing-with-limit-and-100-percent-discount--dark.png b/...s__/scenes-other-billing--billing-with-limit-and-100-percent-discount--dark.png
diff --git a/...__/scenes-other-billing--billing-with-limit-and-100-percent-discount--light.png b/...__/scenes-other-billing--billing-with-limit-and-100-percent-discount--light.png
diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
@@ -431,6 +431,22 @@ export function humanFriendlyNumber(d: number, precision: number = DEFAULT_DECIM
     return d.toLocaleString('en-US', { maximumFractionDigits: precision })
 }
 
+/** Format currency from string with commas and 2 decimal places. */
+export function humanFriendlyCurrency(d: string | undefined | number): string {
+    if (!d) {
+        d = '0.00'
+    }
+
+    let number: number
+    if (typeof d === 'string') {
+        number = parseFloat(d)
+    } else {
+        number = d
+    }
+
+    return `$${number.toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}`
+}
+
 export function humanFriendlyLargeNumber(d: number): string {
     if (isNaN(d)) {
         return 'NaN'

diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx
@@ -14,6 +14,7 @@ import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { humanFriendlyCurrency } from 'lib/utils'
 import { useEffect } from 'react'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { SceneExport } from 'scenes/sceneTypes'
@@ -156,7 +157,7 @@ export function Billing(): JSX.Element {
                                                 Current bill total
                                             </LemonLabel>
                                             <div className="font-bold text-6xl">
-                                                ${billing.current_total_amount_usd_after_discount}
+                                                {humanFriendlyCurrency(billing.current_total_amount_usd_after_discount)}
                                             </div>
                                             {billing.discount_percent && (
                                                 <div>
@@ -180,8 +181,7 @@ export function Billing(): JSX.Element {
                                                             placement="bottom-start"
                                                         >
                                                             <strong>
-                                                                $
-                                                                {parseInt(billing.discount_amount_usd).toLocaleString()}
+                                                                {humanFriendlyCurrency(billing.discount_amount_usd)}
                                                             </strong>
                                                         </Tooltip>{' '}
                                                         remaining credits applied to your bill.

diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -10,7 +10,7 @@ import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { capitalizeFirstLetter } from 'lib/utils'
+import { capitalizeFirstLetter, humanFriendlyCurrency } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { useRef } from 'react'
 import { getProductIcon } from 'scenes/products/Products'
@@ -258,14 +258,13 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                                     >
                                                         <div className="flex flex-col items-center">
                                                             <div className="font-bold text-3xl leading-7">
-                                                                $
-                                                                {(
+                                                                {humanFriendlyCurrency(
                                                                     parseFloat(product.current_amount_usd || '0') *
-                                                                    (1 -
-                                                                        (billing?.discount_percent
-                                                                            ? billing.discount_percent / 100
-                                                                            : 0))
-                                                                ).toFixed(2) || '0.00'}
+                                                                        (1 -
+                                                                            (billing?.discount_percent
+                                                                                ? billing.discount_percent / 100
+                                                                                : 0))
+                                                                )}
                                                             </div>
                                                             <span className="text-xs text-muted">
                                                                 {capitalizeFirstLetter(
@@ -285,16 +284,15 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                                         >
                                                             <div className="flex flex-col items-center justify-end">
                                                                 <div className="font-bold text-muted text-lg leading-5">
-                                                                    $
-                                                                    {(
+                                                                    {humanFriendlyCurrency(
                                                                         parseFloat(
                                                                             product.projected_amount_usd || '0'
                                                                         ) *
-                                                                        (1 -
-                                                                            (billing?.discount_percent
-                                                                                ? billing.discount_percent / 100
-                                                                                : 0))
-                                                                    ).toFixed(2) || '0.00'}
+                                                                            (1 -
+                                                                                (billing?.discount_percent
+                                                                                    ? billing.discount_percent / 100
+                                                                                    : 0))
+                                                                    )}
                                                                 </div>
                                                                 <span className="text-xs text-muted">Projected</span>
                                                             </div>
@@ -310,7 +308,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                             >
                                                 <div className="flex flex-col items-center">
                                                     <div className="font-bold text-3xl leading-7">
-                                                        ${product.current_amount_usd}
+                                                        {humanFriendlyCurrency(product.current_amount_usd)}
                                                     </div>
                                                     <span className="text-xs text-muted">
                                                         per {billing?.billing_period?.interval || 'period'}