diff --git a/assets/css/browser-phone-frontend.css b/assets/css/browser-phone-frontend.css index 4b81462..01e6a91 100644 --- a/assets/css/browser-phone-frontend.css +++ b/assets/css/browser-phone-frontend.css @@ -261,6 +261,23 @@ transform: translateY(-1px); } +.twp-btn-info { + background: #17a2b8; + color: white; + border: none; + padding: 10px 20px; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + transition: all 0.2s ease; +} + +.twp-btn-info:hover { + background: #138496; + transform: translateY(-1px); +} + /* Call Info */ .twp-call-info { background: #fff; diff --git a/assets/js/browser-phone-frontend.js b/assets/js/browser-phone-frontend.js index 1d7ef6a..d6ab8e3 100644 --- a/assets/js/browser-phone-frontend.js +++ b/assets/js/browser-phone-frontend.js @@ -20,6 +20,9 @@ let alertSound = null; let alertInterval = null; let alertEnabled = false; + let notificationPermission = 'default'; + let backgroundAlertInterval = null; + let isPageVisible = true; // Initialize when document is ready $(document).ready(function() { @@ -33,6 +36,8 @@ loadPhoneNumbers(); loadUserQueues(); initVoicemailSection(); + initializeNotifications(); + initializePageVisibility(); }); /** @@ -525,6 +530,20 @@ if (currentWaiting > previousWaiting) { console.log('New call detected in queue:', queue.queue_name); newCallDetected = true; + + // Show browser notification for new call + if (notificationPermission === 'granted') { + showBrowserNotification('📞 New Call in Queue!', { + body: `${queue.queue_name}: ${currentWaiting} call${currentWaiting > 1 ? 's' : ''} waiting`, + icon: '📞', + vibrate: [300, 200, 300], + requireInteraction: true, + tag: `queue-${queue.id}`, + data: { + queueId: queue.id + } + }); + } } lastQueueUpdate[queueId] = currentWaiting; @@ -980,6 +999,9 @@ if (alertInterval) { clearInterval(alertInterval); } + if (backgroundAlertInterval) { + clearInterval(backgroundAlertInterval); + } if (twilioDevice) { twilioDevice.destroy(); } @@ -1140,6 +1162,217 @@ }); } + /** + * Initialize browser notifications + */ + function initializeNotifications() { + // Register service worker for background notifications + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/wp-content/plugins/twilio-wp-plugin/assets/js/twp-service-worker.js') + .then(function(registration) { + console.log('Service Worker registered:', registration); + }) + .catch(function(error) { + console.log('Service Worker registration failed:', error); + }); + } + + // Check if browser supports notifications + if (!('Notification' in window)) { + console.log('This browser does not support notifications'); + return; + } + + // Check current permission status + notificationPermission = Notification.permission; + + // Request permission if not already granted or denied + if (notificationPermission === 'default') { + // Add a button to request permission + if ($('#twp-queue-global-actions').length > 0) { + const $notificationBtn = $('