Refactor: Integrate Stripe and complete configuration

src/hooks/useStripe.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import { loadStripe, Stripe } from '@stripe/stripe-js';
+import { paymentService, StripeCredentials } from '@/services/paymentService';
+
+export const useStripe = () => {
+  const [stripe, setStripe] = useState<Stripe | null>(null);
+  const [credentials, setCredentials] = useState<StripeCredentials | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const initStripe = async () => {
+      try {
+        const creds = await paymentService.getStripeCredentials();
+        
+        if (!creds || !creds.enabled) {
+          setError('Stripe is not configured or enabled');
+          setLoading(false);
+          return;
+        }
+
+        setCredentials(creds);
+        
+        const stripeInstance = await loadStripe(creds.publishableKey);
+        setStripe(stripeInstance);
+        setLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to initialize Stripe');
+        setLoading(false);
+      }
+    };
+
+    initStripe();
+  }, []);
+
+  return { stripe, credentials, loading, error };
+};

src/hooks/useSystemConfig.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useToast } from '@/hooks/use-toast';
-import { configApi, ApiConfig, SystemParameter, Integration, SecurityConfig, AuditLog } from '@/services/configApi';
+import { configApi, ApiConfig, SystemParameter, Integration, SecurityConfig, AuditLog, PaymentConfig } from '@/services/configApi';
 
 export const useSystemConfig = () => {
   const [apiConfigs, setApiConfigs] = useState<ApiConfig[]>([]);
@@ -8,6 +8,7 @@ export const useSystemConfig = () => {
   const [integrations, setIntegrations] = useState<Integration[]>([]);
   const [securityConfig, setSecurityConfig] = useState<SecurityConfig[]>([]);
   const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
+  const [paymentConfigs, setPaymentConfigs] = useState<PaymentConfig[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { toast } = useToast();
@@ -16,12 +17,13 @@ export const useSystemConfig = () => {
     setLoading(true);
     setError(null);
     try {
-      const [apis, parameters, integs, security, logs] = await Promise.all([
+      const [apis, parameters, integs, security, logs, payments] = await Promise.all([
         configApi.getApiConfigs(),
         configApi.getSystemParameters(),
         configApi.getIntegrations(),
         configApi.getSecurityConfig(),
         configApi.getAuditLogs(1, 20).then(result => result.logs),
+        configApi.getPaymentConfigs(),
       ]);
 
       setApiConfigs(apis);
@@ -29,6 +31,7 @@ export const useSystemConfig = () => {
       setIntegrations(integs);
       setSecurityConfig(security);
       setAuditLogs(logs);
+      setPaymentConfigs(payments);
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Error loading system configuration';
       setError(message);
@@ -127,6 +130,42 @@ export const useSystemConfig = () => {
     }
   };
 
+  const updatePaymentConfig = async (config: Partial<PaymentConfig>) => {
+    try {
+      const updated = await configApi.updatePaymentConfig(config);
+      setPaymentConfigs(prev => prev.map(c => c.id === updated.id ? updated : c));
+      toast({
+        title: "Configuración de Pago Actualizada",
+        description: "Las credenciales de pago se actualizaron correctamente",
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "No se pudo actualizar la configuración de pago",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const testPaymentConnection = async (configId: string) => {
+    try {
+      const success = await configApi.testPaymentConnection(configId);
+      toast({
+        title: success ? "Conexión Exitosa" : "Conexión Fallida",
+        description: success ? "Las credenciales son válidas" : "No se pudo verificar las credenciales",
+        variant: success ? "default" : "destructive",
+      });
+      return success;
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Error al probar la conexión",
+        variant: "destructive",
+      });
+      return false;
+    }
+  };
+
   useEffect(() => {
     loadData();
   }, []);
@@ -137,6 +176,7 @@ export const useSystemConfig = () => {
     integrations,
     securityConfig,
     auditLogs,
+    paymentConfigs,
     loading,
     error,
     refetch: loadData,
@@ -145,5 +185,7 @@ export const useSystemConfig = () => {
     updateSystemParameter,
     syncIntegration,
     updateSecurityConfig,
+    updatePaymentConfig,
+    testPaymentConnection,
   };
 };