Show event-per-purchase for endcustomer packages

resources/js/admin/mobile/BillingPage.tsx

@@ -19,7 +19,13 @@ import {
 import { TenantAddonHistoryEntry, getTenantAddonHistory } from '../api';
 import { getApiErrorMessage } from '../lib/apiError';
 import { ADMIN_EVENT_VIEW_PATH, adminPath } from '../constants';
-import { buildPackageUsageMetrics, getUsageState, PackageUsageMetric, usagePercent } from './billingUsage';
+import {
+  buildPackageUsageMetrics,
+  formatPackageEventAllowance,
+  getUsageState,
+  PackageUsageMetric,
+  usagePercent,
+} from './billingUsage';
 import { useBackNavigation } from './hooks/useBackNavigation';
 import { useAdminTheme } from './theme';
 import {
@@ -517,16 +523,7 @@ function PackageCard({
           ? t('shop.partner.tiers.premium', 'Premium')
           : pkg.included_package_slug;
   const limitMaxEvents = typeof limits?.max_events_per_year === 'number' ? (limits?.max_events_per_year as number) : null;
-  const remaining = pkg.remaining_events ?? limitMaxEvents ?? 0;
-  const remainingText =
-    remaining === 0
-      ? t('mobileBilling.remainingEventsZero', 'No events remaining')
-      : limitMaxEvents
-        ? t('mobileBilling.remainingEventsOf', '{{remaining}} of {{limit}} events remaining', {
-          remaining,
-          limit: limitMaxEvents,
-        })
-        : t('mobileBilling.remainingEvents', '{{count}} events', { count: remaining });
+  const remainingText = formatPackageEventAllowance(pkg, t);
   const expires = pkg.expires_at ? formatDate(pkg.expires_at) : null;
   const usageMetrics = buildPackageUsageMetrics(pkg);
   const usageStates = usageMetrics.map((metric) => getUsageState(metric));