di usage in website

apps/website/app/sponsor/billing/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
@@ -10,8 +10,9 @@ import StatusBadge from '@/components/ui/StatusBadge';
 import InfoBanner from '@/components/ui/InfoBanner';
 import PageHeader from '@/components/ui/PageHeader';
 import { siteConfig } from '@/lib/siteConfig';
-import { BillingViewModel } from '@/lib/view-models/BillingViewModel';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useSponsorBilling } from '@/hooks/sponsor/useSponsorBilling';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { SPONSOR_SERVICE_TOKEN } from '@/lib/di/tokens';
 import {
   CreditCard,
   DollarSign,
@@ -260,29 +261,12 @@ function InvoiceRow({ invoice, index }: { invoice: any; index: number }) {
 
 export default function SponsorBillingPage() {
   const shouldReduceMotion = useReducedMotion();
-  const { sponsorService } = useServices();
-  const [data, setData] = useState<BillingViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const sponsorService = useInject(SPONSOR_SERVICE_TOKEN);
   const [showAllInvoices, setShowAllInvoices] = useState(false);
 
-  useEffect(() => {
-    const loadBilling = async () => {
-      try {
-        const billingData = await sponsorService.getBilling('demo-sponsor-1');
-        setData(new BillingViewModel(billingData));
-      } catch (err) {
-        console.error('Error loading billing data:', err);
-        setError('Failed to load billing data');
-      } finally {
-        setLoading(false);
-      }
-    };
+  const { data: billingData, isLoading, error, retry } = useSponsorBilling('demo-sponsor-1');
 
-    loadBilling();
-  }, []);
-
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="max-w-5xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
         <div className="text-center">
@@ -293,16 +277,23 @@ export default function SponsorBillingPage() {
     );
   }
 
-  if (error || !data) {
+  if (error || !billingData) {
     return (
       <div className="max-w-5xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
         <div className="text-center">
-          <p className="text-gray-400">{error || 'No billing data available'}</p>
+          <p className="text-gray-400">{error?.getUserMessage() || 'No billing data available'}</p>
+          {error && (
+            <Button variant="secondary" onClick={retry} className="mt-4">
+              Retry
+            </Button>
+          )}
         </div>
       </div>
     );
   }
 
+  const data = billingData;
+
   const handleSetDefault = (methodId: string) => {
     // In a real app, this would call an API
     console.log('Setting default payment method:', methodId);