valtech-components 2.0.691 → 2.0.692

package/src/lib/services/firebase/messaging.service.ts

@@ -1,672 +0,0 @@
-/**
- * Messaging Service (FCM)
- *
- * Servicio para Firebase Cloud Messaging (Push Notifications).
- * Permite solicitar permisos, obtener tokens, escuchar mensajes y manejar
- * navegación (deep linking) cuando el usuario toca una notificación.
- */
-
-import { Inject, Injectable, Injector, NgZone, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { Messaging, getToken, deleteToken, onMessage } from '@angular/fire/messaging';
-import { Observable, Subject, BehaviorSubject } from 'rxjs';
-
-import { VALTECH_FIREBASE_CONFIG } from './config';
-import {
-  NotificationAction,
-  NotificationClickEvent,
-  NotificationPayload,
-  NotificationPermission,
-  ValtechFirebaseConfig,
-} from './types';
-
-/**
- * Estado interno del servicio de messaging
- */
-interface MessagingState {
-  token: string | null;
-  permission: NotificationPermission;
-  isSupported: boolean;
-}
-
-/**
- * Servicio para Firebase Cloud Messaging (FCM).
- *
- * Permite recibir notificaciones push en la aplicación web.
- * Requiere VAPID key configurada en ValtechFirebaseConfig.
- *
- * @example
- * ```typescript
- * @Component({...})
- * export class NotificationComponent {
- *   private messaging = inject(MessagingService);
- *
- *   token = signal<string | null>(null);
- *
- *   async enableNotifications() {
- *     // Solicitar permiso y obtener token
- *     const token = await this.messaging.requestPermission();
- *
- *     if (token) {
- *       this.token.set(token);
- *       // Enviar token a tu backend para almacenarlo
- *       await this.backend.registerDeviceToken(token);
- *     }
- *   }
- *
- *   // Escuchar mensajes en foreground
- *   messages$ = this.messaging.onMessage();
- * }
- * ```
- */
-@Injectable({ providedIn: 'root' })
-export class MessagingService {
-  private messageSubject = new Subject<NotificationPayload>();
-  private notificationClickSubject = new Subject<NotificationClickEvent>();
-  private stateSubject = new BehaviorSubject<MessagingState>({
-    token: null,
-    permission: 'default',
-    isSupported: false,
-  });
-
-  private unsubscribeOnMessage?: () => void;
-
-  /** Flag para persistir mensajes FCM en localStorage (debugging) */
-  private readonly debugPersistence: boolean;
-  /** Key para localStorage de mensajes FCM (debugging) */
-  private readonly DEBUG_STORAGE_KEY = 'fcm_debug_messages';
-
-  constructor(
-    private injector: Injector,
-    @Inject(VALTECH_FIREBASE_CONFIG) private config: ValtechFirebaseConfig,
-    @Inject(PLATFORM_ID) private platformId: Object,
-    private ngZone: NgZone
-  ) {
-    this.debugPersistence = this.config?.debugMessagePersistence ?? false;
-    this.initializeMessaging();
-  }
-
-  /**
-   * Obtiene la instancia de Messaging de forma perezosa.
-   * Esto evita el error de APP_INITIALIZER de AngularFire.
-   */
-  private getMessagingInstance(): Messaging | null {
-    try {
-      return this.injector.get(Messaging, null);
-    } catch {
-      return null;
-    }
-  }
-
-  // ===========================================================================
-  // INICIALIZACIÓN
-  // ===========================================================================
-
-  /**
-   * Inicializa el servicio de messaging
-   */
-  private async initializeMessaging(): Promise<void> {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-
-    const supported = await this.checkSupport();
-    const permission = this.getPermissionState();
-
-    this.stateSubject.next({
-      ...this.stateSubject.value,
-      isSupported: supported,
-      permission,
-    });
-
-    // Si ya tiene permiso, configurar listeners
-    if (supported && permission === 'granted') {
-      this.setupMessageListener();
-    }
-
-    // Escuchar mensajes del Service Worker (clicks en notificaciones background)
-    this.setupServiceWorkerListener();
-  }
-
-  /**
-   * Configura listener para mensajes del Service Worker.
-   * Recibe eventos cuando el usuario hace click en una notificación background.
-   */
-  private setupServiceWorkerListener(): void {
-    if (!isPlatformBrowser(this.platformId) || !('serviceWorker' in navigator)) {
-      return;
-    }
-
-    navigator.serviceWorker.addEventListener('message', (event) => {
-      // Verificar que es un mensaje de notificación click
-      if (event.data?.type === 'NOTIFICATION_CLICK') {
-        this.ngZone.run(() => {
-          const notification = event.data.notification as NotificationPayload;
-          const action = this.extractActionFromData(notification.data);
-
-          this.notificationClickSubject.next({
-            notification,
-            action,
-            timestamp: new Date(),
-          });
-        });
-      }
-    });
-  }
-
-  /**
-   * Verifica si FCM está soportado en el navegador actual
-   */
-  private async checkSupport(): Promise<boolean> {
-    if (!isPlatformBrowser(this.platformId)) {
-      return false;
-    }
-
-    // Verificar APIs necesarias
-    if (!('Notification' in window)) {
-      return false;
-    }
-
-    if (!('serviceWorker' in navigator)) {
-      return false;
-    }
-
-    // Verificar que messaging esté disponible
-    if (!this.getMessagingInstance()) {
-      return false;
-    }
-
-    return true;
-  }
-
-  // ===========================================================================
-  // PERMISOS Y TOKEN
-  // ===========================================================================
-
-  /**
-   * Solicita permiso de notificaciones y obtiene el token FCM.
-   *
-   * @returns Token FCM si se otorgó permiso, null si se denegó
-   *
-   * @example
-   * ```typescript
-   * const token = await messaging.requestPermission();
-   * if (token) {
-   *   console.log('Token FCM:', token);
-   *   // Enviar a backend
-   * } else {
-   *   console.log('Permiso denegado o no soportado');
-   * }
-   * ```
-   */
-  async requestPermission(): Promise<string | null> {
-    if (!await this.isSupported()) {
-      console.warn('FCM no está soportado en este navegador');
-      return null;
-    }
-
-    try {
-      // Solicitar permiso de notificaciones
-      const permission = await Notification.requestPermission();
-
-      this.stateSubject.next({
-        ...this.stateSubject.value,
-        permission: permission as NotificationPermission,
-      });
-
-      if (permission !== 'granted') {
-        console.warn('Permiso de notificaciones denegado');
-        return null;
-      }
-
-      // Obtener token FCM
-      const token = await this.getToken();
-
-      if (token) {
-        // Configurar listener de mensajes
-        this.setupMessageListener();
-      }
-
-      return token;
-    } catch (error) {
-      console.error('Error solicitando permiso de notificaciones:', error);
-      return null;
-    }
-  }
-
-  /**
-   * Obtiene el token FCM actual (sin solicitar permiso).
-   *
-   * @returns Token FCM si está disponible, null si no
-   *
-   * @example
-   * ```typescript
-   * const token = await messaging.getToken();
-   * ```
-   */
-  async getToken(): Promise<string | null> {
-    const messaging = this.getMessagingInstance();
-    if (!messaging) {
-      return null;
-    }
-
-    const vapidKey = this.config.messagingVapidKey;
-    if (!vapidKey) {
-      console.warn('VAPID key no configurada. FCM no funcionará.');
-      return null;
-    }
-
-    try {
-      // Registrar SW personalizado antes de obtener token
-      // Esto es necesario cuando usamos un SW custom (firebase-messaging-sw.js)
-      const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
-      // Esperar a que el SW esté activo
-      await navigator.serviceWorker.ready;
-
-      const token = await getToken(messaging, {
-        vapidKey,
-        serviceWorkerRegistration: registration,
-      });
-
-      this.stateSubject.next({
-        ...this.stateSubject.value,
-        token,
-      });
-
-      return token;
-    } catch (error) {
-      console.error('Error obteniendo token FCM:', error);
-      return null;
-    }
-  }
-
-  /**
-   * Elimina el token FCM actual (unsubscribe de notificaciones).
-   *
-   * @example
-   * ```typescript
-   * await messaging.deleteToken();
-   * console.log('Token eliminado, no recibirá más notificaciones');
-   * ```
-   */
-  async deleteToken(): Promise<void> {
-    const messaging = this.getMessagingInstance();
-    if (!messaging) {
-      return;
-    }
-
-    try {
-      await deleteToken(messaging);
-
-      this.stateSubject.next({
-        ...this.stateSubject.value,
-        token: null,
-      });
-
-      // Limpiar listener de mensajes
-      if (this.unsubscribeOnMessage) {
-        this.unsubscribeOnMessage();
-        this.unsubscribeOnMessage = undefined;
-      }
-    } catch (error) {
-      console.error('Error eliminando token FCM:', error);
-      throw new Error('No se pudo eliminar el token de notificaciones');
-    }
-  }
-
-  // ===========================================================================
-  // MENSAJES
-  // ===========================================================================
-
-  /**
-   * Observable de mensajes recibidos en foreground.
-   *
-   * IMPORTANTE: Los mensajes en background son manejados por el Service Worker.
-   *
-   * @returns Observable que emite cuando llega un mensaje en foreground
-   *
-   * @example
-   * ```typescript
-   * messaging.onMessage().subscribe(payload => {
-   *   console.log('Mensaje recibido:', payload);
-   *   // Mostrar notificación custom o actualizar UI
-   * });
-   * ```
-   */
-  onMessage(): Observable<NotificationPayload> {
-    return this.messageSubject.asObservable();
-  }
-
-  /**
-   * Configura el listener de mensajes en foreground
-   */
-  private setupMessageListener(): void {
-    const messaging = this.getMessagingInstance();
-    if (!messaging || this.unsubscribeOnMessage) {
-      return;
-    }
-
-    this.unsubscribeOnMessage = onMessage(messaging, (payload) => {
-      const notification: NotificationPayload = {
-        title: payload.notification?.title,
-        body: payload.notification?.body,
-        image: payload.notification?.image,
-        data: payload.data as Record<string, string>,
-        messageId: payload.messageId,
-      };
-
-      this.messageSubject.next(notification);
-
-      // Persistir en localStorage para debugging si está habilitado
-      if (this.debugPersistence) {
-        this.persistMessageForDebug(notification);
-      }
-    });
-  }
-
-  /**
-   * Persiste un mensaje FCM en localStorage para debugging.
-   * Solo se usa cuando debugMessagePersistence está habilitado.
-   * Mantiene los últimos 50 mensajes.
-   */
-  private persistMessageForDebug(message: NotificationPayload): void {
-    try {
-      const stored = localStorage.getItem(this.DEBUG_STORAGE_KEY);
-      const messages = stored ? JSON.parse(stored) : [];
-      messages.unshift({ ...message, receivedAt: new Date().toISOString() });
-      // Mantener solo últimos 50
-      localStorage.setItem(this.DEBUG_STORAGE_KEY, JSON.stringify(messages.slice(0, 50)));
-    } catch (e) {
-      console.warn('[Messaging] Debug persistence failed:', e);
-    }
-  }
-
-  // ===========================================================================
-  // ESTADO Y UTILIDADES
-  // ===========================================================================
-
-  /**
-   * Obtiene el estado actual del permiso de notificaciones.
-   *
-   * @returns 'granted' | 'denied' | 'default'
-   *
-   * @example
-   * ```typescript
-   * const permission = messaging.getPermissionState();
-   * if (permission === 'granted') {
-   *   // Ya tiene permiso
-   * } else if (permission === 'default') {
-   *   // Puede solicitar permiso
-   * } else {
-   *   // Denegado, debe habilitar manualmente
-   * }
-   * ```
-   */
-  getPermissionState(): NotificationPermission {
-    if (!isPlatformBrowser(this.platformId)) {
-      return 'default';
-    }
-
-    if (!('Notification' in window)) {
-      return 'denied';
-    }
-
-    return Notification.permission as NotificationPermission;
-  }
-
-  /**
-   * Verifica si FCM está soportado en el navegador actual.
-   * Usa lógica inteligente para evitar falsos negativos por timing del Injector.
-   *
-   * @returns true si FCM está soportado
-   *
-   * @example
-   * ```typescript
-   * if (await messaging.isSupported()) {
-   *   // Puede usar notificaciones push
-   * } else {
-   *   // Navegador no soporta o no tiene Service Worker
-   * }
-   * ```
-   */
-  async isSupported(): Promise<boolean> {
-    // Si ya tenemos token en estado, claramente FCM funciona
-    if (this.stateSubject.value.token) {
-      return true;
-    }
-
-    // Si ya calculamos soporte exitosamente, usarlo
-    if (this.stateSubject.value.isSupported) {
-      return true;
-    }
-
-    // Verificaciones básicas que no dependen del Injector
-    if (!isPlatformBrowser(this.platformId)) {
-      return false;
-    }
-    if (!('Notification' in window) || !('serviceWorker' in navigator)) {
-      return false;
-    }
-
-    // Si el navegador soporta las APIs pero el Injector no está listo,
-    // podríamos tener un falso negativo. Intentar checkSupport de todas formas.
-    return this.checkSupport();
-  }
-
-  /**
-   * Obtiene el token actual sin hacer request.
-   *
-   * @returns Token almacenado o null
-   */
-  get currentToken(): string | null {
-    return this.stateSubject.value.token;
-  }
-
-  /**
-   * Observable del estado completo del servicio de messaging.
-   */
-  get state$(): Observable<MessagingState> {
-    return this.stateSubject.asObservable();
-  }
-
-  /**
-   * Verifica si el usuario ya otorgó permiso de notificaciones.
-   */
-  get hasPermission(): boolean {
-    return this.stateSubject.value.permission === 'granted';
-  }
-
-  /**
-   * Hidrata el estado del token desde un valor externo (ej: localStorage).
-   * Útil cuando el token ya existe pero el MessagingService no lo tiene en memoria.
-   *
-   * @param token Token FCM a setear
-   *
-   * @example
-   * ```typescript
-   * const storedToken = localStorage.getItem('fcm_token');
-   * if (storedToken) {
-   *   messaging.setTokenFromStorage(storedToken);
-   * }
-   * ```
-   */
-  setTokenFromStorage(token: string): void {
-    if (!token) return;
-
-    this.stateSubject.next({
-      ...this.stateSubject.value,
-      token,
-      isSupported: true, // Si hay token, claramente FCM funciona
-    });
-  }
-
-  // ===========================================================================
-  // DEEP LINKING / NAVEGACIÓN
-  // ===========================================================================
-
-  /**
-   * Observable de clicks en notificaciones.
-   *
-   * Emite cuando el usuario hace click en una notificación (foreground o background).
-   * Usa este observable para navegar a la página correspondiente.
-   *
-   * @returns Observable que emite NotificationClickEvent
-   *
-   * @example
-   * ```typescript
-   * @Component({...})
-   * export class AppComponent {
-   *   private messaging = inject(MessagingService);
-   *   private router = inject(Router);
-   *
-   *   constructor() {
-   *     this.messaging.onNotificationClick().subscribe(event => {
-   *       if (event.action.route) {
-   *         this.router.navigate([event.action.route], {
-   *           queryParams: event.action.queryParams
-   *         });
-   *       }
-   *     });
-   *   }
-   * }
-   * ```
-   */
-  onNotificationClick(): Observable<NotificationClickEvent> {
-    return this.notificationClickSubject.asObservable();
-  }
-
-  /**
-   * Extrae la acción de navegación de los datos de una notificación.
-   *
-   * Busca campos específicos en el payload de datos:
-   * - `route`: Ruta interna de la app (ej: '/orders/123')
-   * - `url`: URL externa (ej: 'https://example.com')
-   * - `action_type`: Tipo de acción personalizada
-   * - Campos con prefijo `action_`: Datos adicionales
-   *
-   * @param data - Datos del payload de la notificación
-   * @returns Acción de navegación extraída
-   *
-   * @example
-   * ```typescript
-   * // Payload desde el backend:
-   * // { route: '/orders/123', action_type: 'view_order', action_orderId: '123' }
-   *
-   * const action = messaging.extractActionFromData(notification.data);
-   * // { route: '/orders/123', actionType: 'view_order', actionData: { orderId: '123' } }
-   * ```
-   */
-  extractActionFromData(data?: Record<string, string>): NotificationAction {
-    if (!data) {
-      return {};
-    }
-
-    const action: NotificationAction = {};
-
-    // Ruta interna
-    if (data['route']) {
-      action.route = data['route'];
-    }
-
-    // URL externa
-    if (data['url']) {
-      action.url = data['url'];
-    }
-
-    // Tipo de acción
-    if (data['action_type']) {
-      action.actionType = data['action_type'];
-    }
-
-    // Query params (puede venir como JSON string)
-    if (data['query_params']) {
-      try {
-        action.queryParams = JSON.parse(data['query_params']);
-      } catch {
-        // Si no es JSON válido, intentar parsear como key=value
-        action.queryParams = this.parseQueryString(data['query_params']);
-      }
-    }
-
-    // Datos adicionales con prefijo action_
-    const actionData: Record<string, unknown> = {};
-    for (const [key, value] of Object.entries(data)) {
-      if (key.startsWith('action_') && key !== 'action_type') {
-        const cleanKey = key.replace('action_', '');
-        // Intentar parsear JSON si es posible
-        try {
-          actionData[cleanKey] = JSON.parse(value);
-        } catch {
-          actionData[cleanKey] = value;
-        }
-      }
-    }
-
-    if (Object.keys(actionData).length > 0) {
-      action.actionData = actionData;
-    }
-
-    return action;
-  }
-
-  /**
-   * Emite manualmente un evento de click en notificación.
-   *
-   * Útil para manejar clicks en notificaciones foreground donde
-   * la app decide mostrar un banner custom.
-   *
-   * @param notification - Payload de la notificación
-   *
-   * @example
-   * ```typescript
-   * messaging.onMessage().subscribe(notification => {
-   *   // Mostrar banner custom
-   *   this.showBanner(notification, () => {
-   *     // Usuario hizo click en el banner
-   *     messaging.handleNotificationClick(notification);
-   *   });
-   * });
-   * ```
-   */
-  handleNotificationClick(notification: NotificationPayload): void {
-    const action = this.extractActionFromData(notification.data);
-
-    this.notificationClickSubject.next({
-      notification,
-      action,
-      timestamp: new Date(),
-    });
-  }
-
-  /**
-   * Verifica si una notificación tiene acción de navegación.
-   *
-   * @param data - Datos del payload
-   * @returns true si tiene route o url
-   */
-  hasNavigationAction(data?: Record<string, string>): boolean {
-    if (!data) return false;
-    return !!(data['route'] || data['url']);
-  }
-
-  /**
-   * Parsea un query string en un objeto.
-   */
-  private parseQueryString(queryString: string): Record<string, string> {
-    const params: Record<string, string> = {};
-
-    if (!queryString) return params;
-
-    // Remover ? inicial si existe
-    const cleanQuery = queryString.startsWith('?') ? queryString.slice(1) : queryString;
-
-    for (const pair of cleanQuery.split('&')) {
-      const [key, value] = pair.split('=');
-      if (key) {
-        params[decodeURIComponent(key)] = decodeURIComponent(value || '');
-      }
-    }
-
-    return params;
-  }
-}