268 lines
12 KiB
PHP
268 lines
12 KiB
PHP
|
<?php
|
||
|
|
/**
|
||
|
|
* Mobile Phone Page Template
|
||
|
|
*
|
||
|
|
* This template is require'd from TWP_Mobile_Phone_Page::render_page().
|
||
|
|
* All PHP variables ($extension_data, $is_logged_in, $agent_status, etc.)
|
||
|
|
* are in scope from the calling method.
|
||
|
|
*
|
||
|
|
* @package Twilio_WP_Plugin
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Prevent direct access.
|
||
|
|
if (!defined('ABSPATH')) {
|
||
|
|
exit;
|
||
|
|
}
|
||
|
|
?><!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
|
|
<meta name="mobile-web-app-capable" content="yes">
|
||
|
|
<meta name="theme-color" content="#1a1a2e">
|
||
|
|
<title>Phone - <?php echo esc_html(get_bloginfo('name')); ?></title>
|
||
|
|
|
||
|
|
<!-- jQuery (WordPress bundled) -->
|
||
|
|
<script src="<?php echo includes_url('js/jquery/jquery.min.js'); ?>"></script>
|
||
|
|
|
||
|
|
<!-- Preload Twilio SDK -->
|
||
|
|
<link rel="preload" href="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js" as="script">
|
||
|
|
<link rel="dns-prefetch" href="//unpkg.com">
|
||
|
|
<link rel="dns-prefetch" href="//chunderw-vpc-gll.twilio.com">
|
||
|
|
<link rel="preconnect" href="https://chunderw-vpc-gll.twilio.com" crossorigin>
|
||
|
|
|
||
|
|
<!-- Stylesheet -->
|
||
|
|
<link rel="stylesheet" href="<?php echo plugins_url('assets/mobile/phone.css', $plugin_file); ?>">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="twp-app">
|
||
|
|
|
||
|
|
<!-- Agent Status Bar -->
|
||
|
|
<div class="agent-status-bar">
|
||
|
|
<div class="status-info">
|
||
|
|
<span class="extension-badge"><?php echo $extension_data ? esc_html($extension_data->extension) : '—'; ?></span>
|
||
|
|
|
||
|
|
<button id="login-toggle-btn" class="<?php echo $is_logged_in ? 'logged-in' : ''; ?>" onclick="toggleAgentLogin()">
|
||
|
|
<?php echo $is_logged_in ? 'Log Out' : 'Log In'; ?>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<select id="agent-status-select" onchange="updateAgentStatus(this.value)" <?php echo !$is_logged_in ? 'disabled' : ''; ?>>
|
||
|
|
<option value="available" <?php selected($agent_status->status ?? '', 'available'); ?>>Available</option>
|
||
|
|
<option value="busy" <?php selected($agent_status->status ?? '', 'busy'); ?>>Busy</option>
|
||
|
|
<option value="offline" <?php selected($agent_status->status ?? 'offline', 'offline'); ?>>Offline</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="agent-stats">
|
||
|
|
<span>Today: <strong><?php echo esc_html($agent_stats['calls_today']); ?></strong></span>
|
||
|
|
<span>Total: <strong><?php echo esc_html($agent_stats['total_calls']); ?></strong></span>
|
||
|
|
<span>Avg: <strong><?php echo round($agent_stats['avg_duration'] ?? 0); ?>s</strong></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tab Navigation -->
|
||
|
|
<div class="tab-nav">
|
||
|
|
<button class="tab-btn active" data-tab="phone">Phone</button>
|
||
|
|
<button class="tab-btn" data-tab="recent">Recent</button>
|
||
|
|
<button class="tab-btn" data-tab="queues">Queues</button>
|
||
|
|
<button class="tab-btn" data-tab="settings">Settings</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Notices container -->
|
||
|
|
<div id="twp-notices"></div>
|
||
|
|
|
||
|
|
<!-- Error display -->
|
||
|
|
<div id="browser-phone-error" style="display:none;"></div>
|
||
|
|
|
||
|
|
<!-- Tab Content -->
|
||
|
|
<div class="tab-content">
|
||
|
|
|
||
|
|
<!-- Phone Tab -->
|
||
|
|
<div class="tab-pane active" id="tab-phone">
|
||
|
|
<div class="phone-interface">
|
||
|
|
<div class="phone-display">
|
||
|
|
<div id="phone-status">Ready</div>
|
||
|
|
<div id="device-connection-status">Loading...</div>
|
||
|
|
<div id="phone-number-display"></div>
|
||
|
|
<div id="call-timer" style="display:none;">00:00</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input type="tel" id="phone-number-input" placeholder="Enter phone number" />
|
||
|
|
|
||
|
|
<div class="dialpad-grid">
|
||
|
|
<button class="dialpad-btn" data-digit="1">1</button>
|
||
|
|
<button class="dialpad-btn" data-digit="2">2<span>ABC</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="3">3<span>DEF</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="4">4<span>GHI</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="5">5<span>JKL</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="6">6<span>MNO</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="7">7<span>PQRS</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="8">8<span>TUV</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="9">9<span>WXYZ</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="*">*</button>
|
||
|
|
<button class="dialpad-btn" data-digit="0">0<span>+</span></button>
|
||
|
|
<button class="dialpad-btn" data-digit="#">#</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="phone-controls">
|
||
|
|
<button id="call-btn" class="btn-phone btn-call">
|
||
|
|
📞 Call
|
||
|
|
</button>
|
||
|
|
<button id="hangup-btn" class="btn-phone btn-hangup" style="display:none;">
|
||
|
|
❌ Hang Up
|
||
|
|
</button>
|
||
|
|
<button id="answer-btn" class="btn-phone btn-answer" style="display:none;">
|
||
|
|
📞 Answer
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="admin-call-controls-panel" style="display:none;">
|
||
|
|
<div class="call-controls-grid">
|
||
|
|
<button id="admin-hold-btn" class="btn-ctrl" title="Hold">
|
||
|
|
⏸ Hold
|
||
|
|
</button>
|
||
|
|
<button id="admin-transfer-btn" class="btn-ctrl" title="Transfer">
|
||
|
|
↪ Transfer
|
||
|
|
</button>
|
||
|
|
<button id="admin-requeue-btn" class="btn-ctrl" title="Requeue">
|
||
|
|
🔄 Requeue
|
||
|
|
</button>
|
||
|
|
<button id="admin-record-btn" class="btn-ctrl" title="Record">
|
||
|
|
⏺ Record
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Recent Tab -->
|
||
|
|
<div class="tab-pane" id="tab-recent">
|
||
|
|
<div class="recent-panel">
|
||
|
|
<div class="recent-header">
|
||
|
|
<h4>Recent Calls</h4>
|
||
|
|
<button type="button" id="clear-history-btn" class="btn-sm">Clear</button>
|
||
|
|
</div>
|
||
|
|
<div id="recent-call-list">
|
||
|
|
<div class="recent-empty">No calls yet this session.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Queues Tab -->
|
||
|
|
<div class="tab-pane" id="tab-queues">
|
||
|
|
<div class="queue-panel">
|
||
|
|
<div class="queue-header">
|
||
|
|
<h4>Your Queues</h4>
|
||
|
|
<?php if ($extension_data): ?>
|
||
|
|
<div class="user-extension-admin">Ext: <strong><?php echo esc_html($extension_data->extension); ?></strong></div>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
<div id="admin-queue-list">
|
||
|
|
<div class="queue-loading">Loading your queues...</div>
|
||
|
|
</div>
|
||
|
|
<div class="queue-actions">
|
||
|
|
<button type="button" id="admin-refresh-queues" class="btn-refresh">Refresh Queues</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Settings Tab -->
|
||
|
|
<div class="tab-pane" id="tab-settings">
|
||
|
|
<div class="settings-panel">
|
||
|
|
<!-- Caller ID -->
|
||
|
|
<div class="settings-section">
|
||
|
|
<h4>Outbound Caller ID</h4>
|
||
|
|
<select id="caller-id-select">
|
||
|
|
<option value="">Loading numbers...</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Auto-answer -->
|
||
|
|
<div class="settings-section">
|
||
|
|
<label><input type="checkbox" id="auto-answer" /> Auto-answer incoming calls</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Dark Mode -->
|
||
|
|
<div class="settings-section">
|
||
|
|
<h4>Appearance</h4>
|
||
|
|
<div class="dark-mode-options">
|
||
|
|
<button type="button" class="dark-mode-opt" data-theme="system">System</button>
|
||
|
|
<button type="button" class="dark-mode-opt" data-theme="light">Light</button>
|
||
|
|
<button type="button" class="dark-mode-opt" data-theme="dark">Dark</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Call Mode -->
|
||
|
|
<div class="settings-section">
|
||
|
|
<h4>Call Reception Mode</h4>
|
||
|
|
<div class="mode-selection">
|
||
|
|
<label class="mode-option <?php echo $current_mode === 'browser' ? 'active' : ''; ?>">
|
||
|
|
<input type="radio" name="call_mode" value="browser" <?php checked($current_mode, 'browser'); ?>>
|
||
|
|
<div class="mode-icon">💻</div>
|
||
|
|
<div class="mode-details">
|
||
|
|
<strong>Browser Phone</strong>
|
||
|
|
<small>Calls ring in this browser</small>
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
<label class="mode-option <?php echo $current_mode === 'cell' ? 'active' : ''; ?>">
|
||
|
|
<input type="radio" name="call_mode" value="cell" <?php checked($current_mode, 'cell'); ?>>
|
||
|
|
<div class="mode-icon">📱</div>
|
||
|
|
<div class="mode-details">
|
||
|
|
<strong>Cell Phone</strong>
|
||
|
|
<small>Forward to your mobile</small>
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mode-status">
|
||
|
|
<div id="current-mode-display">
|
||
|
|
<strong>Current:</strong>
|
||
|
|
<span id="mode-text"><?php echo $current_mode === 'browser' ? 'Browser Phone' : 'Cell Phone'; ?></span>
|
||
|
|
</div>
|
||
|
|
<button type="button" id="save-mode-btn" style="display:none;">Save</button>
|
||
|
|
</div>
|
||
|
|
<div class="mode-info">
|
||
|
|
<div class="browser-mode-info" style="display:<?php echo $current_mode === 'browser' ? 'block' : 'none'; ?>;">
|
||
|
|
<p>Keep this page open to receive calls.</p>
|
||
|
|
</div>
|
||
|
|
<div class="cell-mode-info" style="display:<?php echo $current_mode === 'cell' ? 'block' : 'none'; ?>;">
|
||
|
|
<p>Calls forwarded to: <?php echo $user_phone ? esc_html($user_phone) : '<em>Not configured</em>'; ?></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php if (!$smart_routing_configured && current_user_can('manage_options')): ?>
|
||
|
|
<div class="setup-info">
|
||
|
|
<h4>Setup Required</h4>
|
||
|
|
<p>Update your phone number webhook to:</p>
|
||
|
|
<code><?php echo esc_html($smart_routing_webhook); ?></code>
|
||
|
|
<button type="button" class="btn-copy" onclick="copyToClipboard('<?php echo esc_js($smart_routing_webhook); ?>')">Copy</button>
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div><!-- .tab-content -->
|
||
|
|
</div><!-- .twp-app -->
|
||
|
|
|
||
|
|
<!-- Configuration for JavaScript -->
|
||
|
|
<script>
|
||
|
|
window.twpConfig = {
|
||
|
|
ajaxUrl: <?php echo wp_json_encode($ajax_url); ?>,
|
||
|
|
nonce: <?php echo wp_json_encode($nonce); ?>,
|
||
|
|
ringtoneUrl: <?php echo wp_json_encode($ringtone_url); ?>,
|
||
|
|
phoneIconUrl: <?php echo wp_json_encode($phone_icon_url); ?>,
|
||
|
|
swUrl: <?php echo wp_json_encode($sw_url); ?>,
|
||
|
|
twilioEdge: <?php echo wp_json_encode($twilio_edge); ?>
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Twilio Voice SDK v2.11.0 -->
|
||
|
|
<script src="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Phone JavaScript -->
|
||
|
|
<script src="<?php echo plugins_url('assets/mobile/phone.js', $plugin_file); ?>"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|