@vgroup/dialbox 0.0.62 → 0.0.64

package/fesm2020/vgroup-dialbox.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ViewChild, Inject, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ViewChild, Inject, PLATFORM_ID, APP_INITIALIZER, Injector, NgModule } from '@angular/core';
 import swal from 'sweetalert2';
 import { AsYouType } from 'libphonenumber-js';
 import { throwError, BehaviorSubject, interval, Subscription } from 'rxjs';
@@ -12,7 +12,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i5 from '@angular/router';
 import { RouterLink, RouterModule } from '@angular/router';
 import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -1301,13 +1301,22 @@ class NotificationService {
         if ('serviceWorker' in navigator) {
             navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerMessage.bind(this));
         }
+        // Listen for incoming calls from Twilio service
+        this.twilioService.currentCall.subscribe((call) => {
+            if (call) {
+                this.showNotification(call);
+            }
+        });
     }
     showNotification(callData) {
-        this.twilioAuthId = callData.customParameters.get('twilioAuthId');
+        if (!callData)
+            return;
         this.twilioCallData = callData;
-        const incomingNumber = callData.parameters.From;
-        const callerName = callData.customParameters.get('name');
-        const callerImage = callData.customParameters.get('image');
+        const incomingNumber = callData.parameters?.From;
+        const customParams = callData.customParameters || new Map();
+        const callerName = customParams.get('name') || incomingNumber;
+        const callerImage = customParams.get('image') || '';
+        this.twilioAuthId = customParams.get('twilioAuthId');
         if (('serviceWorker' in navigator)) {
             navigator.serviceWorker.ready.then((registration) => {
                 const options = {
@@ -1392,26 +1401,82 @@ class TwilioService {
     initializeTwilioDevice() {
         if (this.token) {
             this.extensionService.getIncomingCallToken().subscribe((data) => {
-                this.incomingCallToken = data.token;
-                localStorage.setItem('in-token', data.token);
-                this.device = new Device(this.incomingCallToken, {
-                    allowIncomingWhileBusy: true,
-                    // Add any other necessary options
-                });
-                this.device.register();
-                this.device.on('incoming', (call) => {
-                    this.currentCall.next(call);
-                    this.callType.next('INCOMING');
-                    this.currentCallState.next('incoming');
-                    this.notificationSerivce.showNotification(call);
-                });
-                this.device.on('error', (error) => {
-                    console.error('Twilio Device Error:', error);
-                    // Add error handling and reconnection logic
-                });
+                try {
+                    this.incomingCallToken = data.token;
+                    localStorage.setItem('in-token', data.token);
+                    // Destroy existing device if any
+                    if (this.device) {
+                        this.device.destroy();
+                    }
+                    this.device = new Device(this.incomingCallToken, {
+                        allowIncomingWhileBusy: true,
+                        closeProtection: true
+                    });
+                    // Register the device
+                    this.device.register();
+                    // Set up device event listeners
+                    this.setupDeviceListeners();
+                    console.log('Twilio device initialized and registered');
+                }
+                catch (error) {
+                    console.error('Error initializing Twilio device:', error);
+                }
+            }, (error) => {
+                console.error('Error getting Twilio token:', error);
             });
         }
     }
+    setupDeviceListeners() {
+        if (!this.device)
+            return;
+        // Incoming call handler
+        this.device.on('incoming', (call) => {
+            console.log('Incoming call from:', call.parameters['From']);
+            // Update call state
+            this.currentCall.next(call);
+            this.callType.next('INCOMING');
+            this.currentCallState.next('incoming');
+            // Show notification and open dialpad
+            this.notificationSerivce.showNotification(call);
+            this.openInProgressDialpad.next(true);
+            // Set up call event listeners
+            call.on('accept', () => {
+                console.log('Call accepted');
+                this.currentCallState.next('in-progress');
+                this.isIncomingCallPicked.next(true);
+            });
+            call.on('disconnect', () => {
+                console.log('Call disconnected');
+                this.currentCallState.next('none');
+                this.currentCall.next(null);
+                this.isIncomingCallPicked.next(false);
+                this.openInProgressDialpad.next(false);
+            });
+            call.on('cancel', () => {
+                console.log('Call cancelled');
+                this.currentCallState.next('none');
+                this.currentCall.next(null);
+                this.isIncomingCallPicked.next(false);
+                this.openInProgressDialpad.next(false);
+            });
+        });
+        // Error handling
+        this.device.on('error', (error) => {
+            console.error('Twilio Device Error:', error);
+            // Attempt to reinitialize on error
+            if (error.code === 31201) { // Invalid token error
+                console.log('Attempting to refresh Twilio token...');
+                this.initializeTwilioDevice();
+            }
+        });
+        // Device ready
+        this.device.on('registered', () => {
+            console.log('Twilio device registered and ready');
+        });
+        this.device.on('unregistered', () => {
+            console.log('Twilio device unregistered');
+        });
+    }
     // onIncomingCall(){
     //   this.device.on('incoming', (call:any) => {
     //     console.log(call);
@@ -3176,6 +3241,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
+class AppInitializerService {
+    constructor(injector, extensionService, router, platformId) {
+        this.injector = injector;
+        this.extensionService = extensionService;
+        this.router = router;
+        this.platformId = platformId;
+    }
+    getTwilioService() {
+        if (!this.twilioService) {
+            this.twilioService = this.injector.get(TwilioService);
+        }
+        return this.twilioService;
+    }
+    initializeApp() {
+        return new Promise((resolve) => {
+            if (isPlatformBrowser(this.platformId)) {
+                this.initializeServices().then(() => {
+                    resolve();
+                });
+            }
+            else {
+                resolve();
+            }
+        });
+    }
+    async initializeServices() {
+        try {
+            // Initialize Twilio device
+            await this.initializeTwilio();
+            // Fetch initial data
+            await this.fetchInitialData();
+            console.log('App initialization complete');
+        }
+        catch (error) {
+            console.error('Error during app initialization:', error);
+        }
+    }
+    async initializeTwilio() {
+        const token = localStorage.getItem('ext_token');
+        if (token) {
+            try {
+                const twilioService = this.getTwilioService();
+                await twilioService.initializeTwilioDevice();
+            }
+            catch (error) {
+                console.error('Error initializing Twilio:', error);
+            }
+        }
+    }
+    async fetchInitialData() {
+        const token = localStorage.getItem('ext_token');
+        if (token) {
+            try {
+                // Fetch caller ID
+                const response = await this.extensionService.fetchCallerId(token).toPromise();
+                if (response && typeof response === 'object' && 'status' in response) {
+                    const callerIdRes = response;
+                    if (callerIdRes.status === 200) {
+                        const callerId = callerIdRes.callerid || 'Not set';
+                        localStorage.setItem('callerID', callerId);
+                        this.extensionService.changeMessage(callerId);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error fetching initial data:', error);
+            }
+        }
+    }
+}
+AppInitializerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppInitializerService, deps: [{ token: i0.Injector }, { token: ExtensionService }, { token: i5.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+AppInitializerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppInitializerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppInitializerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: ExtensionService }, { type: i5.Router }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; } });
+
 class DialboxModule {
 }
 DialboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3192,7 +3339,19 @@ DialboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         IncomingCallComponent,
         CallProgressComponent,
         CallerIdDialogComponent] });
-DialboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, imports: [CommonModule,
+DialboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, providers: [
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (injector) => {
+                return () => {
+                    const appInitializer = injector.get(AppInitializerService);
+                    return appInitializer.initializeApp();
+                };
+            },
+            deps: [Injector],
+            multi: true
+        }
+    ], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         HttpClientModule,
@@ -3221,6 +3380,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         IncomingCallComponent,
                         CallProgressComponent,
                         CallerIdDialogComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: APP_INITIALIZER,
+                            useFactory: (injector) => {
+                                return () => {
+                                    const appInitializer = injector.get(AppInitializerService);
+                                    return appInitializer.initializeApp();
+                                };
+                            },
+                            deps: [Injector],
+                            multi: true
+                        }
                     ]
                 }]
         }] });