No queues assigned to you. Personal queues will be created automatically.
');
- $('#twp-queue-section').hide();
- $('#twp-queue-global-actions').hide();
- return;
- }
-
- $('#twp-queue-section').show();
- $('#twp-queue-global-actions').show();
-
- let html = '';
- let userExtension = null;
-
- userQueues.forEach(function(queue) {
- const hasWaiting = parseInt(queue.current_waiting) > 0;
- const waitingCount = queue.current_waiting || 0;
- const queueType = queue.queue_type || 'general';
-
- // Extract user extension from personal queues
- if (queueType === 'personal' && queue.extension) {
- userExtension = queue.extension;
- }
-
- // Generate queue type indicator and description
- let typeIndicator = '';
- let typeDescription = '';
- if (queueType === 'personal') {
- typeIndicator = 'π€';
- typeDescription = queue.extension ? ` (Ext: ${queue.extension})` : '';
- } else if (queueType === 'hold') {
- typeIndicator = 'βΈοΈ';
- typeDescription = ' (Hold)';
- } else {
- typeIndicator = 'π';
- typeDescription = ' (Team)';
- }
-
- html += `
- ').addClass('twp-' + type).text(message);
-
- $messages.empty().append($message);
-
- // Auto-hide success and info messages
- if (type === 'success' || type === 'info') {
- setTimeout(function() {
- $message.fadeOut(function() {
- $message.remove();
- });
- }, 5000);
- }
- }
-
- // Start queue polling with faster interval
- startQueuePolling();
-
- /**
- * Start polling for queue updates
- */
- function startQueuePolling() {
- // Clear any existing timer
- if (queuePollingTimer) {
- clearInterval(queuePollingTimer);
- }
-
- // Poll every 5 seconds for real-time updates
- queuePollingTimer = setInterval(function() {
- if (isConnected) {
- loadUserQueues(true); // Silent update
- }
- }, 5000); // Every 5 seconds
- }
-
- /**
- * Schedule token refresh
- * Refreshes token 10 minutes before expiry for safety
- */
- function scheduleTokenRefresh() {
- // Clear any existing timer
- if (tokenRefreshTimer) {
- clearTimeout(tokenRefreshTimer);
- }
-
- if (!tokenExpiry) {
- console.error('Token expiry time not set');
- // Retry in 30 seconds if token expiry not set
- setTimeout(function() {
- if (tokenExpiry) {
- scheduleTokenRefresh();
- }
- }, 30000);
- return;
- }
-
- // Calculate time until refresh (10 minutes before expiry for extra safety)
- const refreshBuffer = 10 * 60 * 1000; // 10 minutes in milliseconds
- const timeUntilRefresh = tokenExpiry - Date.now() - refreshBuffer;
-
- if (timeUntilRefresh <= 0) {
- // Token needs refresh immediately
- refreshToken();
- } else {
- // Schedule refresh
- console.log('Scheduling token refresh in', Math.round(timeUntilRefresh / 1000), 'seconds');
- tokenRefreshTimer = setTimeout(refreshToken, timeUntilRefresh);
- }
- }
-
- /**
- * Refresh the capability token
- */
- function refreshToken() {
- console.log('Refreshing capability token...');
-
- // Don't refresh if currently in a call
- if (currentCall) {
- console.log('Currently in call, postponing token refresh');
- // Retry in 1 minute
- setTimeout(refreshToken, 60000);
- return;
- }
-
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_generate_capability_token',
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success) {
- console.log('Token refreshed successfully');
- // Update token expiry
- tokenExpiry = Date.now() + (response.data.expires_in || 3600) * 1000;
- // Update device with new token
- setupTwilioDevice(response.data.token);
- // Schedule next refresh
- scheduleTokenRefresh();
- } else {
- console.error('Failed to refresh token:', response.data);
- updateStatus('offline', 'Token refresh failed');
- showMessage('Failed to refresh connection. Please refresh the page.', 'error');
- }
- },
- error: function() {
- console.error('Failed to refresh token - network error');
- updateStatus('offline', 'Connection lost');
- // Retry in 30 seconds
- setTimeout(refreshToken, 30000);
- }
- });
- }
-
- /**
- * Initialize alert sound
- */
- function initAlertSound() {
- // Create audio element for alert sound
- alertSound = new Audio();
- alertSound.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA='; // Simple beep sound
- // Use Web Audio API for better sound
- const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-
- // Create a simple beep sound
- function playBeep() {
- const oscillator = audioContext.createOscillator();
- const gainNode = audioContext.createGain();
-
- oscillator.connect(gainNode);
- gainNode.connect(audioContext.destination);
-
- oscillator.frequency.value = 800; // Frequency in Hz
- gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
- gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
-
- oscillator.start(audioContext.currentTime);
- oscillator.stop(audioContext.currentTime + 0.5);
- }
-
- return playBeep;
- }
-
- const playAlertSound = initAlertSound();
-
- /**
- * Start alert for new calls
- */
- function startAlert() {
- if (!alertEnabled || alertInterval) return;
-
- // Check if there are actually waiting calls before starting alert
- const hasWaitingCalls = userQueues.some(q => parseInt(q.current_waiting) > 0);
- if (!hasWaitingCalls) {
- console.log('No waiting calls found, not starting alert');
- return;
- }
-
- // Play initial alert
- playAlertSound();
-
- // Repeat every 30 seconds
- alertInterval = setInterval(function() {
- if (alertEnabled && !currentCall) {
- // Check if there are still waiting calls
- const stillHasWaitingCalls = userQueues.some(q => parseInt(q.current_waiting) > 0);
- if (stillHasWaitingCalls) {
- playAlertSound();
- } else {
- console.log('No more waiting calls, stopping alert');
- stopAlert();
- }
- } else {
- stopAlert();
- }
- }, 30000);
- }
-
- /**
- * Stop alert
- */
- function stopAlert() {
- if (alertInterval) {
- clearInterval(alertInterval);
- alertInterval = null;
- }
- }
-
- /**
- * Toggle alert on/off
- */
- function toggleAlert() {
- alertEnabled = !alertEnabled;
- localStorage.setItem('twp_alert_enabled', alertEnabled);
-
- // Update button state
- updateAlertButton();
-
- if (!alertEnabled) {
- stopAlert();
- showMessage('Queue alerts disabled', 'info');
- } else {
- showMessage('Queue alerts enabled', 'success');
- // Check if there are waiting calls
- const hasWaitingCalls = userQueues.some(q => parseInt(q.current_waiting) > 0);
- if (hasWaitingCalls && !currentCall) {
- startAlert();
- }
- }
- }
-
- /**
- * Update alert button UI
- */
- function updateAlertButton() {
- const $btn = $('#twp-alert-toggle');
- if (alertEnabled) {
- $btn.removeClass('alert-off').addClass('alert-on').html('π Alerts ON');
- } else {
- $btn.removeClass('alert-on').addClass('alert-off').html('π Alerts OFF');
- }
- }
-
- /**
- * Load alert preference from localStorage
- */
- function loadAlertPreference() {
- const saved = localStorage.getItem('twp_alert_enabled');
- alertEnabled = saved === null ? true : saved === 'true';
- updateAlertButton();
- }
-
- // Clean up on page unload
- $(window).on('beforeunload', function() {
- if (tokenRefreshTimer) {
- clearTimeout(tokenRefreshTimer);
- }
- if (queuePollingTimer) {
- clearInterval(queuePollingTimer);
- }
- if (alertInterval) {
- clearInterval(alertInterval);
- }
- if (backgroundAlertInterval) {
- clearInterval(backgroundAlertInterval);
- }
- if (personalQueueTimer) {
- clearInterval(personalQueueTimer);
- }
- if (twilioDevice) {
- twilioDevice.destroy();
- }
- });
-
- /**
- * Load user's voicemails
- */
- function loadUserVoicemails(silent = false) {
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_get_user_voicemails',
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success) {
- displayVoicemails(response.data);
- } else if (!silent) {
- showMessage('Failed to load voicemails: ' + (response.data || 'Unknown error'), 'error');
- }
- },
- error: function() {
- if (!silent) {
- showMessage('Failed to load voicemails', 'error');
- }
- }
- });
- }
-
- /**
- * Toggle voicemail section visibility
- */
- function toggleVoicemailSection() {
- const $content = $('#twp-voicemail-content');
- const $toggle = $('#twp-voicemail-toggle .toggle-icon');
- const isVisible = $content.is(':visible');
-
- if (isVisible) {
- $content.slideUp(300);
- $toggle.text('βΌ');
- localStorage.setItem('twp_voicemail_collapsed', 'true');
- } else {
- $content.slideDown(300);
- $toggle.text('β²');
- localStorage.setItem('twp_voicemail_collapsed', 'false');
- // Load voicemails when expanding if not already loaded
- if ($('#twp-voicemail-list').children('.voicemail-loading').length > 0) {
- loadUserVoicemails();
- }
- }
- }
-
- /**
- * Initialize voicemail section state
- */
- function initVoicemailSection() {
- const isCollapsed = localStorage.getItem('twp_voicemail_collapsed') === 'true';
- const $content = $('#twp-voicemail-content');
- const $toggle = $('#twp-voicemail-toggle .toggle-icon');
-
- if (isCollapsed) {
- $content.hide();
- $toggle.text('βΌ');
- } else {
- $content.show();
- $toggle.text('β²');
- // Load voicemails immediately if expanded
- loadUserVoicemails();
- }
- }
-
- /**
- * Display voicemails in the UI
- */
- function displayVoicemails(data) {
- const $voicemailList = $('#twp-voicemail-list');
-
- // Update stats
- $('#twp-total-voicemails').text(data.total_count || 0);
- $('#twp-today-voicemails').text(data.today_count || 0);
-
- if (!data.voicemails || data.voicemails.length === 0) {
- $voicemailList.html('
No voicemails found.
');
- return;
- }
-
- let html = '';
- data.voicemails.forEach(function(voicemail) {
- const hasTranscription = voicemail.transcription && voicemail.transcription !== 'No transcription';
- const hasRecording = voicemail.has_recording;
-
- html += `
-
-
-
-
- β±οΈ
- ${formatDuration(voicemail.duration)}
-
- ${hasRecording ? '
π΅ Recording ' : ''}
-
- ${hasTranscription ? `
${voicemail.transcription}
` : ''}
-
- `;
- });
-
- $voicemailList.html(html);
- }
-
- /**
- * Format duration in seconds to mm:ss
- */
- function formatDuration(seconds) {
- if (!seconds || seconds === 0) return '0:00';
- const minutes = Math.floor(seconds / 60);
- const remainingSeconds = seconds % 60;
- return minutes + ':' + String(remainingSeconds).padStart(2, '0');
- }
-
- /**
- * Play voicemail audio
- */
- function playVoicemail(voicemailId) {
- if (!voicemailId) return;
-
- // Get voicemail audio URL and play it
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_get_voicemail_audio',
- voicemail_id: voicemailId,
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success && response.data.audio_url) {
- // Create and play audio element
- const audio = new Audio(response.data.audio_url);
- audio.play().catch(function(error) {
- showMessage('Failed to play voicemail: ' + error.message, 'error');
- });
- showMessage('Playing voicemail...', 'info');
- } else {
- showMessage('No audio available for this voicemail', 'error');
- }
- },
- error: function() {
- showMessage('Failed to load voicemail audio', 'error');
- }
- });
- }
-
- /**
- * 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 = $('
')
- .attr('id', 'twp-enable-notifications')
- .addClass('twp-btn twp-btn-info')
- .html('π Enable Alerts')
- .on('click', requestNotificationPermission);
-
- $('#twp-queue-global-actions .global-queue-actions').append($notificationBtn);
- }
- } else if (notificationPermission === 'granted') {
- console.log('Notifications are enabled');
- }
- }
-
- /**
- * Request notification permission from user
- */
- function requestNotificationPermission() {
- Notification.requestPermission().then(function(permission) {
- notificationPermission = permission;
-
- if (permission === 'granted') {
- showMessage('Notifications enabled! You will be alerted even when the browser is in the background.', 'success');
- $('#twp-enable-notifications').hide();
-
- // Show test notification
- showBrowserNotification('Notifications Enabled', {
- body: 'You will now receive alerts for incoming calls',
- icon: 'π',
- tag: 'test-notification'
- });
- } else if (permission === 'denied') {
- showMessage('Notifications blocked. Please enable them in your browser settings.', 'error');
- $('#twp-enable-notifications').text('β Notifications Blocked');
- }
- });
- }
-
- /**
- * Show browser notification
- */
- function showBrowserNotification(title, options = {}) {
- if (notificationPermission !== 'granted') {
- return;
- }
-
- const defaultOptions = {
- body: '',
- icon: '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-icon.png',
- badge: '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-badge.png',
- vibrate: [200, 100, 200],
- requireInteraction: true, // Keep notification visible until clicked
- tag: 'twp-call-notification',
- data: options.data || {}
- };
-
- const notificationOptions = Object.assign(defaultOptions, options);
-
- try {
- const notification = new Notification(title, notificationOptions);
-
- // Handle notification click
- notification.onclick = function(event) {
- event.preventDefault();
- window.focus();
- notification.close();
-
- // If there's queue data, select that queue
- if (event.target.data && event.target.data.queueId) {
- selectQueue(event.target.data.queueId);
- }
- };
-
- // Auto-close after 30 seconds if not required interaction
- if (!notificationOptions.requireInteraction) {
- setTimeout(function() {
- notification.close();
- }, 30000);
- }
-
- return notification;
- } catch (error) {
- console.error('Failed to show notification:', error);
- // Fallback to service worker notification if available
- if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
- navigator.serviceWorker.ready.then(function(registration) {
- registration.showNotification(title, notificationOptions);
- });
- }
- }
- }
-
- /**
- * Initialize page visibility handling
- */
- function initializePageVisibility() {
- // Set up visibility change detection
- let hidden, visibilityChange;
-
- if (typeof document.hidden !== 'undefined') {
- hidden = 'hidden';
- visibilityChange = 'visibilitychange';
- } else if (typeof document.msHidden !== 'undefined') {
- hidden = 'msHidden';
- visibilityChange = 'msvisibilitychange';
- } else if (typeof document.webkitHidden !== 'undefined') {
- hidden = 'webkitHidden';
- visibilityChange = 'webkitvisibilitychange';
- }
-
- // Handle visibility change
- document.addEventListener(visibilityChange, function() {
- isPageVisible = !document[hidden];
-
- if (isPageVisible) {
- console.log('Page is now visible');
- // Resume normal operations
- if (backgroundAlertInterval) {
- clearInterval(backgroundAlertInterval);
- backgroundAlertInterval = null;
- }
- } else {
- console.log('Page is now hidden/background');
- // Start more aggressive notifications for background
- if (alertEnabled && userQueues.some(q => parseInt(q.current_waiting) > 0)) {
- startBackgroundAlerts();
- }
- }
- }, false);
-
- // Also handle window focus/blur for better mobile support
- $(window).on('focus', function() {
- isPageVisible = true;
- if (backgroundAlertInterval) {
- clearInterval(backgroundAlertInterval);
- backgroundAlertInterval = null;
- }
- });
-
- $(window).on('blur', function() {
- isPageVisible = false;
- });
- }
-
- /**
- * Start background alerts with notifications
- */
- function startBackgroundAlerts() {
- if (backgroundAlertInterval) return;
-
- // Check and notify every 10 seconds when in background
- backgroundAlertInterval = setInterval(function() {
- const waitingQueues = userQueues.filter(q => parseInt(q.current_waiting) > 0);
-
- if (waitingQueues.length > 0 && !currentCall) {
- // Count total waiting calls
- const totalWaiting = waitingQueues.reduce((sum, q) => sum + parseInt(q.current_waiting), 0);
-
- // Show browser notification
- showBrowserNotification(`${totalWaiting} Call${totalWaiting > 1 ? 's' : ''} Waiting!`, {
- body: waitingQueues.map(q => `${q.queue_name}: ${q.current_waiting} waiting`).join('\n'),
- icon: 'π',
- vibrate: [300, 200, 300, 200, 300],
- requireInteraction: true,
- tag: 'queue-alert',
- data: {
- queueId: waitingQueues[0].id
- }
- });
-
- // Also try to play sound if possible
- try {
- playAlertSound();
- } catch (e) {
- // Sound might be blocked in background
- }
- } else if (waitingQueues.length === 0) {
- // No more calls, stop background alerts
- clearInterval(backgroundAlertInterval);
- backgroundAlertInterval = null;
- }
- }, 10000); // Every 10 seconds in background
- }
-
- // Load alert preference on init
- loadAlertPreference();
-
- /**
- * Initialize personal queue for incoming transfers
- */
- function initializePersonalQueue() {
- if (!twp_frontend_ajax.user_id) return;
-
- // Set personal queue name
- personalQueueName = 'agent_' + twp_frontend_ajax.user_id;
-
- // Start polling for incoming transfers
- checkPersonalQueue();
- personalQueueTimer = setInterval(checkPersonalQueue, 3000); // Check every 3 seconds
- }
-
- /**
- * Check personal queue for incoming transfers
- */
- function checkPersonalQueue() {
- // Don't check if already in a call
- if (currentCall) return;
-
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_check_personal_queue',
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success && response.data.has_waiting_call) {
- handleIncomingTransfer(response.data);
- }
- },
- error: function() {
- // Silently fail - don't interrupt user
- }
- });
- }
-
- /**
- * Handle incoming transfer notification
- */
- function handleIncomingTransfer(data) {
- // Show notification
- showMessage('Incoming transfer! The call will be connected automatically.', 'info');
-
- // Show browser notification
- if (notificationPermission === 'granted') {
- showBrowserNotification('π Incoming Transfer!', {
- body: 'A call is being transferred to you',
- icon: 'π',
- vibrate: [300, 200, 300],
- requireInteraction: true,
- tag: 'transfer-notification'
- });
- }
-
- // Play alert sound if enabled
- if (alertEnabled) {
- playAlertSound();
- }
-
- // Auto-accept the transfer after a short delay
- setTimeout(function() {
- acceptTransferCall(data);
- }, 2000);
- }
-
- /**
- * Accept incoming transfer call
- */
- function acceptTransferCall(data) {
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_accept_transfer_call',
- call_sid: data.call_sid,
- queue_id: data.queue_id,
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success) {
- showMessage('Transfer accepted, connecting...', 'success');
- } else {
- showMessage('Failed to accept transfer: ' + (response.data || 'Unknown error'), 'error');
- }
- },
- error: function() {
- showMessage('Failed to accept transfer', 'error');
- }
- });
- }
-
- /**
- * Toggle call hold
- */
- function toggleHold() {
- if (!currentCall || currentCall.status() !== 'open') {
- showMessage('No active call to hold', 'error');
- return;
- }
-
- // Get Call SID using multiple detection methods
- const callSid = currentCall.parameters.CallSid ||
- currentCall.customParameters.CallSid ||
- currentCall.outgoingConnectionId ||
- currentCall.sid;
-
- if (!callSid) {
- showMessage('Unable to identify call for hold operation', 'error');
- return;
- }
-
- const $holdBtn = $('#twp-hold-btn');
- const currentHoldState = isOnHold;
-
- console.log('Hold button element found:', $holdBtn.length);
- console.log('Current hold state:', currentHoldState);
- console.log('Current button text:', $holdBtn.text());
-
- // Update button immediately for better UX
- if (currentHoldState) {
- $holdBtn.text('Resuming...').prop('disabled', true);
- } else {
- $holdBtn.text('Holding...').prop('disabled', true);
- }
-
- console.log('Sending hold toggle request:', {
- action: 'twp_toggle_hold',
- call_sid: callSid,
- hold: !currentHoldState,
- nonce: twp_frontend_ajax.nonce
- });
-
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_toggle_hold',
- call_sid: callSid,
- hold: !currentHoldState,
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- console.log('Hold toggle response:', response);
- console.log('Current hold state before:', currentHoldState);
- console.log('New hold state will be:', !currentHoldState);
-
- if (response.success) {
- isOnHold = !currentHoldState;
- console.log('Hold state updated to:', isOnHold);
-
- // Update hold button and show/hide dedicated resume button
- const $resumeBtn = $('#twp-resume-btn');
-
- if (isOnHold) {
- console.log('Setting button to Resume state...');
- $holdBtn.text('Resume').addClass('btn-active').prop('disabled', false);
-
- // Show dedicated resume button
- $resumeBtn.show();
- console.log('Resume button shown - visible:', $resumeBtn.is(':visible'));
-
- console.log('Button after update - text:', $holdBtn.text(), 'classes:', $holdBtn.attr('class'));
- showMessage('Call placed on hold - Click Resume Call button to continue', 'info');
-
- // Verify the button was actually updated
- setTimeout(function() {
- console.log('Button state after 100ms:', $holdBtn.text(), $holdBtn.hasClass('btn-active'));
- console.log('Resume button visible after 100ms:', $resumeBtn.is(':visible'));
- }, 100);
- } else {
- console.log('Setting button to Hold state...');
- $holdBtn.text('Hold').removeClass('btn-active').prop('disabled', false);
-
- // Hide dedicated resume button
- $resumeBtn.hide();
- console.log('Resume button hidden');
-
- console.log('Button after update - text:', $holdBtn.text(), 'classes:', $holdBtn.attr('class'));
- showMessage('Call resumed', 'info');
- }
- } else {
- console.error('Hold toggle failed:', response);
- // Revert button state on error
- const $resumeBtn = $('#twp-resume-btn');
- if (currentHoldState) {
- $holdBtn.text('Resume').addClass('btn-active').prop('disabled', false);
- $resumeBtn.show(); // Keep resume button visible if we were on hold
- } else {
- $holdBtn.text('Hold').removeClass('btn-active').prop('disabled', false);
- $resumeBtn.hide(); // Hide resume button if we weren't on hold
- }
- showMessage('Failed to toggle hold: ' + (response.data || 'Unknown error'), 'error');
- }
- },
- error: function(xhr, status, error) {
- console.error('Hold toggle AJAX error:', status, error);
- console.error('Response:', xhr.responseText);
-
- // Revert button state on error
- const $resumeBtn = $('#twp-resume-btn');
- if (currentHoldState) {
- $holdBtn.text('Resume').addClass('btn-active').prop('disabled', false);
- $resumeBtn.show(); // Keep resume button visible if we were on hold
- } else {
- $holdBtn.text('Hold').removeClass('btn-active').prop('disabled', false);
- $resumeBtn.hide(); // Hide resume button if we weren't on hold
- }
- showMessage('Failed to toggle hold', 'error');
- }
- });
- }
-
- /**
- * Transfer call to phone number (legacy function)
- */
- function transferCall(agentNumber) {
- transferToTarget('phone', agentNumber);
- }
-
- /**
- * Transfer call to target (phone or queue)
- */
- function transferToTarget(transferType, transferTarget) {
- if (!currentCall || currentCall.status() !== 'open') {
- showMessage('No active call to transfer', 'error');
- return;
- }
-
- // Get Call SID using multiple detection methods
- const callSid = currentCall.parameters.CallSid ||
- currentCall.customParameters.CallSid ||
- currentCall.outgoingConnectionId ||
- currentCall.sid;
-
- if (!callSid) {
- showMessage('Unable to identify call for transfer', 'error');
- return;
- }
-
- // Support both legacy format and new extension-based format
- const requestData = {
- action: 'twp_transfer_call',
- call_sid: callSid,
- nonce: twp_frontend_ajax.nonce
- };
-
- // Use new format if target looks like extension or queue ID, otherwise use legacy
- if (transferType === 'queue' || (transferType === 'extension') ||
- (transferType === 'phone' && /^\d{3,4}$/.test(transferTarget))) {
- // New format - extension or queue ID
- requestData.target_queue_id = transferTarget;
- requestData.current_queue_id = null; // Frontend doesn't track current queue
- } else {
- // Legacy format - phone number or old queue format
- requestData.transfer_type = transferType;
- requestData.transfer_target = transferTarget;
- }
-
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: requestData,
- success: function(response) {
- if (response.success) {
- showMessage('Call transferred successfully', 'success');
- hideTransferDialog();
- // Don't disconnect - let the transfer complete naturally
- // The call will be disconnected by Twilio after successful transfer
- } else {
- showMessage('Failed to transfer call: ' + (response.data || 'Unknown error'), 'error');
- }
- },
- error: function() {
- showMessage('Failed to transfer call', 'error');
- }
- });
- }
-
- /**
- * Requeue call to a different queue
- */
- function requeueCall(queueId) {
- if (!currentCall || currentCall.status() !== 'open') {
- showMessage('No active call to requeue', 'error');
- return;
- }
-
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_requeue_call',
- call_sid: currentCall.parameters.CallSid,
- queue_id: queueId,
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success) {
- showMessage('Call requeued successfully', 'success');
- hideRequeueDialog();
- // End the call on our end
- if (currentCall) {
- currentCall.disconnect();
- }
- } else {
- showMessage('Failed to requeue call: ' + (response.data || 'Unknown error'), 'error');
- }
- },
- error: function() {
- showMessage('Failed to requeue call', 'error');
- }
- });
- }
-
- /**
- * Toggle call recording
- */
- function toggleRecording() {
- if (!currentCall || currentCall.status() !== 'open') {
- showMessage('No active call to record', 'error');
- return;
- }
-
- if (isRecording) {
- stopRecording();
- } else {
- startRecording();
- }
- }
-
- /**
- * Start recording the current call
- */
- function startRecording() {
- if (!currentCall || currentCall.status() !== 'open') {
- showMessage('No active call to record', 'error');
- return;
- }
-
- // Try multiple ways to get the call SID
- const callSid = currentCall.parameters.CallSid ||
- currentCall.customParameters.CallSid ||
- currentCall.outgoingConnectionId ||
- currentCall.sid;
-
- console.log('Frontend currentCall object:', currentCall);
- console.log('Frontend attempting to record call SID:', callSid);
-
- if (!callSid) {
- showMessage('Could not determine call SID for recording', 'error');
- return;
- }
-
- const $recordBtn = $('#twp-record-btn');
-
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_start_recording',
- call_sid: callSid,
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success) {
- isRecording = true;
- recordingSid = response.data.recording_sid;
- $recordBtn.text('Stop Recording').addClass('btn-active btn-recording');
- showMessage('Recording started', 'success');
- } else {
- showMessage('Failed to start recording: ' + (response.data || 'Unknown error'), 'error');
- }
- },
- error: function(xhr, status, error) {
- console.error('Frontend recording start failed:', xhr.responseText);
- showMessage('Failed to start recording: ' + error, 'error');
- }
- });
- }
-
- /**
- * Stop recording the current call
- */
- function stopRecording() {
- if (!recordingSid) return;
-
- const $recordBtn = $('#twp-record-btn');
-
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_stop_recording',
- call_sid: currentCall ? currentCall.parameters.CallSid : '',
- recording_sid: recordingSid,
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success) {
- isRecording = false;
- recordingSid = null;
- $recordBtn.text('Record').removeClass('btn-active btn-recording');
- showMessage('Recording stopped', 'info');
- } else {
- showMessage('Failed to stop recording: ' + (response.data || 'Unknown error'), 'error');
- }
- },
- error: function() {
- showMessage('Failed to stop recording', 'error');
- }
- });
- }
-
- /**
- * Show transfer dialog
- */
- function showTransferDialog() {
- // First load available agents
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_get_online_agents',
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success && response.data.length > 0) {
- showAgentTransferDialog(response.data);
- } else {
- // Fallback to manual phone number entry
- showManualTransferDialog();
- }
- },
- error: function() {
- // Fallback to manual phone number entry
- showManualTransferDialog();
- }
- });
- }
-
- /**
- * Show agent selection transfer dialog
- */
- function showAgentTransferDialog(agents = null) {
- if (agents) {
- // Use passed agents data directly
- buildAgentTransferDialog(agents);
- } else {
- // Load available agents for transfer (try enhanced system first)
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_get_transfer_targets',
- nonce: twp_frontend_ajax.nonce
- },
- success: function(response) {
- if (response.success) {
- // Handle new enhanced response format
- if (response.data.users) {
- buildEnhancedTransferDialog(response.data);
- } else {
- // Legacy format
- buildAgentTransferDialog(response.data);
- }
- } else {
- // Try fallback to legacy system
- $.ajax({
- url: twp_frontend_ajax.ajax_url,
- method: 'POST',
- data: {
- action: 'twp_get_transfer_agents',
- nonce: twp_frontend_ajax.nonce
- },
- success: function(legacyResponse) {
- if (legacyResponse.success) {
- buildAgentTransferDialog(legacyResponse.data);
- } else {
- showManualTransferDialog();
- }
- },
- error: function() {
- showManualTransferDialog();
- }
- });
- }
- },
- error: function() {
- showMessage('Failed to load agents', 'error');
- showManualTransferDialog(); // Fallback to manual entry
- }
- });
- }
- }
-
- /**
- * Build and display enhanced transfer dialog with extensions
- */
- function buildEnhancedTransferDialog(data) {
- let agentOptions = '';
-
- // Add users with extensions
- if (data.users && data.users.length > 0) {
- agentOptions += '
Transfer to Agent ';
- data.users.forEach(function(user) {
- const statusClass = user.is_logged_in ? 'available' : 'offline';
- const statusText = user.is_logged_in ? 'π’ Online' : 'π΄ Offline';
-
- agentOptions += `
-
-
- ${user.display_name}
- Ext: ${user.extension}
- ${statusText} (${user.status})
-
-
-
- π Extension ${user.extension}
-
-
-
- `;
- });
- agentOptions += '
';
- }
-
- // Add general queues
- if (data.queues && data.queues.length > 0) {
- agentOptions += '
Transfer to Queue ';
- data.queues.forEach(function(queue) {
- agentOptions += `
-
-
- ${queue.queue_name}
- ${queue.waiting_calls} waiting
-
-
-
- `;
- });
- agentOptions += '
';
- }
-
- if ((!data.users || data.users.length === 0) && (!data.queues || data.queues.length === 0)) {
- agentOptions += '
No agents or queues available for transfer
';
- }
-
- agentOptions += '
-
-
Transfer Call
-
Select an agent or queue:
- ${agentOptions}
-
-
Manual Transfer
-
Or enter a phone number or extension directly:
-
-
-
- Transfer
- Cancel
-
-
-
';
-
- if (agents.length === 0) {
- agentOptions += '
No other agents available for transfer
';
- } else {
- agents.forEach(function(agent) {
- const statusClass = agent.status === 'available' ? 'available' :
- agent.status === 'busy' ? 'busy' : 'offline';
- const statusText = agent.status === 'available' ? 'π’ Available' :
- agent.status === 'busy' ? 'π΄ Busy' : 'β« Offline';
-
- // Determine transfer options
- let transferOptions = '
';
-
- // Add browser phone queue option (always available)
- transferOptions += `
-
- π» Browser Phone Queue
-
- `;
-
- // Add phone option if available
- if (agent.has_phone && agent.phone) {
- transferOptions += `
-
- π± Phone (${agent.phone})
-
- `;
- }
-
- transferOptions += '
';
-
- agentOptions += `
-
-
- ${agent.name}
- ${statusText}
-
- ${transferOptions}
-
- `;
- });
- }
-
- agentOptions += '
-
-
Transfer Call to Agent
-
Select an agent and transfer method:
- ${agentOptions}
-
-
Manual Transfer
-
Or enter a phone number directly:
-
-
-
- Transfer
- Cancel
-
-
-
-
-
Transfer Call
-
Enter the phone number to transfer this call:
-
-
- Transfer
- Cancel
-
-
-
${queue.queue_name} `;
- });
-
- const dialog = `
-
-
-
Requeue Call
-
Select a queue to transfer this call to:
-
- ${options}
-
-
- Requeue
- Cancel
-
-
-
-
-
-
-
-
-
- Connecting...
-
-
-
-
- Caller ID:
-
- Loading...
-
-
-
-
-
-
- Γ
-
-
-
- 1
- 2ABC
- 3DEF
- 4GHI
- 5JKL
- 6MNO
- 7PQRS
- 8TUV
- 9WXYZ
- *
- 0+
- #
-
-
-
-
-
-
- π
- Call
-
-
- π
- Hang Up
-
-
- βΆοΈ
- Resume Call
-
-
-
-
-
-
- Call Duration:
- 00:00
-
-
- Connecting...
-
-
-
-
-
-
-
- Hold
-
-
- Transfer
-
-
- Requeue
-
-
- Record
-
-
-
-
-
-
-
Your Queues
-
-
-
-
-
-
- Refresh
-
-
- π Alerts OFF
-
-
-
-
-
-
-
-
No queue selected
-
- Waiting: 0
- Max: -
-
-
-
-
- Accept Next Call
-
-
-
-
-
-
-
-
-
-
-
-
Loading voicemails...
-
-
-
-
- Refresh
-
-
- View All
-
-
-
-
-
-
-
-
-
-
+