Use a helper for formatting numbers

packages/host/app/components/with-subscription-data.gts

@@ -12,6 +12,7 @@ import { IconHexagon } from '@cardstack/boxel-ui/icons';
 import BillingService from '../services/billing-service';
 
 import type { ComponentLike } from '@glint/template';
+import { formatNumber } from '../helpers/format-number';
 
 interface ValueSignature {
   Args: {
@@ -102,7 +103,9 @@ export default class WithSubscriptionData extends Component<WithSubscriptionData
   private get monthlyCreditText() {
     return this.creditsAvailableInPlanAllowance != null &&
       this.creditsIncludedInPlanAllowance != null
-      ? `${this.creditsAvailableInPlanAllowance} of ${this.creditsIncludedInPlanAllowance} left`
+      ? `${formatNumber(
+          this.creditsAvailableInPlanAllowance,
+        )} of ${formatNumber(this.creditsIncludedInPlanAllowance)} left`
       : null;
   }
 
@@ -149,7 +152,7 @@ export default class WithSubscriptionData extends Component<WithSubscriptionData
         additionalCredit=(component
           Value
           tag='additional-credit'
-          value=this.extraCreditsAvailableInBalance
+          value=(formatNumber this.extraCreditsAvailableInBalance)
           isLoading=this.isLoading
           isOutOfCredit=this.isOutOfCredit
           displayCreditIcon=true

packages/host/app/helpers/format-number.ts

@@ -0,0 +1,20 @@
+import { helper } from '@ember/component/helper';
+
+type PositionalArgs = number;
+
+interface Signature {
+  Args: {
+    Positional: PositionalArgs;
+  };
+  Return: string;
+}
+
+export function formatNumber(number?: number | null): string {
+  if (number == undefined || number == null) {
+    return '';
+  }
+
+  return number.toLocaleString();
+}
+
+export default helper<Signature>(formatNumber);

packages/host/app/services/billing-service.ts

@@ -10,6 +10,8 @@ import {
   encodeWebSafeBase64,
 } from '@cardstack/runtime-common';
 
+import { formatNumber } from '../helpers/format-number';
+
 import NetworkService from './network';
 import RealmServerService from './realm-server';
 import ResetService from './reset';
@@ -89,9 +91,9 @@ export default class BillingService extends Service {
       .sort((a, b) => a.creditReloadAmount - b.creditReloadAmount)
       .map((link) => ({
         ...link,
-        amountFormatted: `${link.creditReloadAmount.toLocaleString(
-          'en-US',
-        )} credits for $${link.price.toLocaleString('en-US')}`,
+        amountFormatted: `${formatNumber(
+          link.creditReloadAmount,
+        )} credits for $${formatNumber(link.price)}`,
       }));
   }