diff --git a/assets/css/browser-phone-frontend.css b/assets/css/browser-phone-frontend.css index bbefe44..761a427 100644 --- a/assets/css/browser-phone-frontend.css +++ b/assets/css/browser-phone-frontend.css @@ -1138,4 +1138,119 @@ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } +} + +/* Agent Transfer Dialog Styles */ +.twp-agent-transfer-dialog { + max-width: 500px; + width: 90vw; +} + +.agent-list { + max-height: 300px; + overflow-y: auto; + margin: 15px 0; + border: 1px solid #ddd; + border-radius: 6px; + background: #f9f9f9; +} + +.agent-option { + padding: 12px; + border-bottom: 1px solid #eee; + background: white; + margin-bottom: 1px; +} + +.agent-option:last-child { + border-bottom: none; +} + +.agent-option.offline { + opacity: 0.6; + background: #f5f5f5; +} + +.agent-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.agent-name { + font-weight: 600; + font-size: 0.95rem; +} + +.agent-status { + font-size: 0.85rem; + font-weight: 500; +} + +.transfer-methods { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.transfer-option { + background: #e9ecef; + border: 2px solid #e9ecef; + padding: 6px 12px; + border-radius: 4px; + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s ease; + user-select: none; +} + +.transfer-option:hover { + background: #dee2e6; + border-color: #adb5bd; +} + +.transfer-option.selected { + background: #e3f2fd; + border-color: #2196f3; + color: #1976d2; +} + +.transfer-option:active { + transform: scale(0.98); +} + +.agent-option.offline .transfer-option { + opacity: 0.5; + cursor: not-allowed; +} + +.agent-option.offline .transfer-option:hover { + background: #e9ecef; + border-color: #e9ecef; +} + +.manual-option { + margin-top: 20px; + padding-top: 15px; + border-top: 1px solid #ddd; +} + +.manual-option h4 { + margin: 0 0 8px 0; + font-size: 1rem; + color: #495057; +} + +.manual-option p { + margin: 0 0 10px 0; + font-size: 0.9rem; + color: #6c757d; +} + +.no-agents { + text-align: center; + padding: 20px; + color: #6c757d; + font-style: italic; } \ No newline at end of file diff --git a/assets/js/browser-phone-frontend.js b/assets/js/browser-phone-frontend.js index 19b40fd..d5c1581 100644 --- a/assets/js/browser-phone-frontend.js +++ b/assets/js/browser-phone-frontend.js @@ -1577,21 +1577,40 @@ } /** - * Transfer call to another agent + * 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; + } + $.ajax({ url: twp_frontend_ajax.ajax_url, method: 'POST', data: { action: 'twp_transfer_call', - call_sid: currentCall.parameters.CallSid, - agent_number: agentNumber, + call_sid: callSid, + transfer_type: transferType, + transfer_target: transferTarget, nonce: twp_frontend_ajax.nonce }, success: function(response) { @@ -1777,26 +1796,77 @@ /** * Show agent selection transfer dialog */ - function showAgentTransferDialog(agents) { + function showAgentTransferDialog() { + // Load available agents for transfer + $.ajax({ + url: twp_frontend_ajax.ajax_url, + method: 'POST', + data: { + action: 'twp_get_transfer_agents', + nonce: twp_frontend_ajax.nonce + }, + success: function(response) { + if (response.success) { + buildAgentTransferDialog(response.data); + } else { + showMessage('Failed to load agents: ' + (response.data || 'Unknown error'), 'error'); + showManualTransferDialog(); // Fallback to manual entry + } + }, + error: function() { + showMessage('Failed to load agents', 'error'); + showManualTransferDialog(); // Fallback to manual entry + } + }); + } + + /** + * Build and display agent transfer dialog with loaded agents + */ + function buildAgentTransferDialog(agents) { let agentOptions = '
'; - agents.forEach(function(agent) { - const statusClass = agent.is_available ? 'available' : (agent.status === 'busy' ? 'busy' : 'offline'); - const statusText = agent.is_available ? '🟢 Available' : (agent.status === 'busy' ? '🔴 Busy' : '⚫ Offline'); - const methodIcon = agent.has_phone ? '📱' : '💻'; - - agentOptions += ` -
-
- ${agent.name} - ${methodIcon} + 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
-
${statusText}
-
- `; - }); + `; + + // Add phone option if available + if (agent.has_phone && agent.phone) { + transferOptions += ` +
+ 📱 Phone (${agent.phone}) +
+ `; + } + + transferOptions += '
'; + + agentOptions += ` +
+
+ ${agent.name} + ${statusText} +
+ ${transferOptions} +
+ `; + }); + } agentOptions += '
'; @@ -1804,10 +1874,11 @@

Transfer Call to Agent

-

Select an agent to transfer this call to:

+

Select an agent and transfer method:

${agentOptions}
-

Or enter a phone number manually:

+

Manual Transfer

+

Or enter a phone number directly:

@@ -1820,24 +1891,30 @@ $('body').append(dialog); - // Handle agent selection - let selectedAgent = null; - $('.agent-option').on('click', function() { - if ($(this).hasClass('offline')) { + // Handle transfer option selection + let selectedTransfer = null; + $('.transfer-option').on('click', function() { + const agentOption = $(this).closest('.agent-option'); + + // Check if agent is available + if (agentOption.hasClass('offline')) { showMessage('Cannot transfer to offline agents', 'error'); return; } - $('.agent-option').removeClass('selected'); + // Clear other selections + $('.transfer-option').removeClass('selected'); + $('#twp-transfer-manual-number').val(''); + + // Select this option $(this).addClass('selected'); - selectedAgent = { - id: $(this).data('agent-id'), - method: $(this).data('transfer-method'), - value: $(this).data('transfer-value') + selectedTransfer = { + type: $(this).data('type'), + target: $(this).data('target'), + agentId: agentOption.data('agent-id') }; - $('#twp-transfer-manual-number').val(''); $('#twp-confirm-agent-transfer').prop('disabled', false); }); @@ -1845,24 +1922,18 @@ $('#twp-transfer-manual-number').on('input', function() { const number = $(this).val().trim(); if (number) { - $('.agent-option').removeClass('selected'); - selectedAgent = null; + $('.transfer-option').removeClass('selected'); + selectedTransfer = { type: 'phone', target: number }; $('#twp-confirm-agent-transfer').prop('disabled', false); } else { - $('#twp-confirm-agent-transfer').prop('disabled', !selectedAgent); + $('#twp-confirm-agent-transfer').prop('disabled', !selectedTransfer); } }); // Handle transfer confirmation $('#twp-confirm-agent-transfer').on('click', function() { - const manualNumber = $('#twp-transfer-manual-number').val().trim(); - - if (manualNumber) { - // Manual phone transfer - transferCall(manualNumber); - } else if (selectedAgent) { - // Agent transfer (phone or queue) - transferToAgent(selectedAgent); + if (selectedTransfer) { + transferToTarget(selectedTransfer.type, selectedTransfer.target); } }); } @@ -1887,43 +1958,6 @@ $('body').append(dialog); } - /** - * Transfer call to selected agent - */ - function transferToAgent(agent) { - if (!currentCall || currentCall.status() !== 'open') { - showMessage('No active call to transfer', 'error'); - return; - } - - $.ajax({ - url: twp_frontend_ajax.ajax_url, - method: 'POST', - data: { - action: 'twp_transfer_to_agent_queue', - call_sid: currentCall.parameters.CallSid, - agent_id: agent.id, - transfer_method: agent.method, - transfer_value: agent.value, - nonce: twp_frontend_ajax.nonce - }, - success: function(response) { - if (response.success) { - showMessage('Call transferred successfully', 'success'); - hideTransferDialog(); - // End the call on our end - if (currentCall) { - currentCall.disconnect(); - } - } else { - showMessage('Failed to transfer call: ' + (response.data || 'Unknown error'), 'error'); - } - }, - error: function() { - showMessage('Failed to transfer call', 'error'); - } - }); - } /** * Hide transfer dialog