Refactor subcription layer

frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx

@@ -10,6 +10,7 @@ import { subscriptionService, type UsageSummary, type AvailablePlans } from '../
 import { useSubscriptionEvents } from '../../../../contexts/SubscriptionEventsContext';
 import { SubscriptionPricingCards } from '../../../../components/subscription/SubscriptionPricingCards';
 import { PlanComparisonTable, ROICalculator, UsageMetricCard } from '../../../../components/subscription';
+import { PaymentMethodUpdateModal } from '../../../../components/subscription/PaymentMethodUpdateModal';
 import { useSubscription } from '../../../../hooks/useSubscription';
 import {
   trackSubscriptionPageViewed,
@@ -41,6 +42,13 @@ const SubscriptionPage: React.FC = () => {
   // New state for enhanced features
   const [showComparison, setShowComparison] = useState(false);
   const [showROI, setShowROI] = useState(false);
+  const [paymentMethodModalOpen, setPaymentMethodModalOpen] = useState(false);
+  const [currentPaymentMethod, setCurrentPaymentMethod] = useState<{
+    brand?: string;
+    last4?: string;
+    exp_month?: number;
+    exp_year?: number;
+  } | null>(null);
 
   // Use new subscription hook for usage forecast data
   const { subscription: subscriptionData, usage: forecastUsage, forecast } = useSubscription();
@@ -916,7 +924,7 @@ const SubscriptionPage: React.FC = () => {
                     <Button
                       variant="outline"
                       className="flex items-center gap-2 w-full sm:w-auto"
-                      onClick={() => showToast.info('Función disponible próximamente')}
+                      onClick={() => setPaymentMethodModalOpen(true)}
                     >
                       <CreditCard className="w-4 h-4" />
                       Actualizar Método de Pago
@@ -970,6 +978,18 @@ const SubscriptionPage: React.FC = () => {
         </>
       )}
 
+      {/* Payment Method Update Modal */}
+      <PaymentMethodUpdateModal
+        isOpen={paymentMethodModalOpen}
+        onClose={() => setPaymentMethodModalOpen(false)}
+        tenantId={currentTenant?.id || user?.tenant_id || ''}
+        currentPaymentMethod={currentPaymentMethod}
+        onPaymentMethodUpdated={(updatedMethod) => {
+          setCurrentPaymentMethod(updatedMethod);
+          showToast.success('Método de pago actualizado correctamente');
+        }}
+      />
+
       {/* Upgrade Dialog */}
       {upgradeDialogOpen && selectedPlan && availablePlans && (
         <DialogModal