feat: Implement Stripe subscription management with dynamic display of payment success and subscription details.

src/components/settings/PaymentSuccessForm.tsx

@@ -1,22 +1,59 @@
 'use client';
 
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-
-interface TransactionDetail {
-  label: string;
-  value: string;
-  bold?: boolean;
-}
-
-const TRANSACTION_DETAILS: TransactionDetail[] = [
-  { label: 'Transaction ID', value: 'REQ-89234475', bold: true },
-  { label: 'Amount Paid', value: '$499.00', bold: true },
-  { label: 'Date', value: 'Oct 24, 2024', bold: true },
-];
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { stripeService, AgentSubscription } from '@/services/stripe.service';
 
 export function PaymentSuccessForm() {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const sessionId = searchParams.get('session_id');
+
+  const [subscription, setSubscription] = useState<AgentSubscription | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadSubscription();
+  }, []);
+
+  const loadSubscription = async () => {
+    try {
+      const sub = await stripeService.getSubscription();
+      setSubscription(sub);
+    } catch (error) {
+      console.error('Failed to load subscription:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (dateStr: string | null | undefined) => {
+    if (!dateStr) return 'N/A';
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const formatAmount = (amount: number) => {
+    return `$${(amount / 100).toFixed(2)}`;
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-[#e58625]" />
+      </div>
+    );
+  }
+
+  const transactionDetails = [
+    { label: 'Transaction ID', value: sessionId ? sessionId.slice(0, 16) + '...' : 'N/A', bold: true },
+    { label: 'Amount Paid', value: subscription?.plan ? formatAmount(subscription.plan.amount) : '$499.00', bold: true },
+    { label: 'Date', value: formatDate(subscription?.createdAt || new Date().toISOString()), bold: true },
+  ];
 
   return (
     <>
@@ -74,7 +111,7 @@ export function PaymentSuccessForm() {
 
           {/* Detail Rows */}
           <div className="space-y-5 mb-6">
-            {TRANSACTION_DETAILS.map((detail) => (
+            {transactionDetails.map((detail) => (
               <div key={detail.label} className="flex items-center justify-between">
                 <span className="font-serif text-[15px] text-[#00293D]/50">
                   {detail.label}
@@ -95,7 +132,7 @@ export function PaymentSuccessForm() {
               Next Renewal Date
             </span>
             <span className="font-serif font-bold text-[14px] text-[#e58625]">
-              Oct 24, 2025
+              {formatDate(subscription?.currentPeriodEnd)}
             </span>
           </div>
 
@@ -114,6 +151,7 @@ export function PaymentSuccessForm() {
               Go To Dashboard
             </button>
             <button
+              onClick={() => router.push('/agent/settings/billings')}
               className="flex-1 bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors flex items-center justify-center gap-2"
             >
               <Image
@@ -122,7 +160,7 @@ export function PaymentSuccessForm() {
                 width={20}
                 height={20}
               />
-              Download Receipt
+              View Subscription
             </button>
           </div>