From cf37cbd3cc48fa218c6d4ea60ed500a198c7da85 Mon Sep 17 00:00:00 2001
From: jknapp <jknapp85@gmail.com>
Date: Sat, 30 Aug 2025 16:49:59 -0700
Subject: [PATCH] Fix hold button to properly show Resume state when call is on
 hold
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Enhanced Call SID detection using multiple fallback methods
- Fixed button state logic to properly toggle between Hold/Resume
- Added immediate UI feedback during hold operations
- Enhanced error handling with proper button state reversion
- Added distinctive orange styling for active hold button state
- Improved user messaging to clarify when call is on hold
- Added comprehensive console logging for debugging hold operations
- Fixed logic error in button state updates

The button will now properly show:
- "Hold" when call is active (normal state)
- "Resume" when call is on hold (orange/active state)
- Loading states during operations ("Holding..." / "Resuming...")

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/css/browser-phone-frontend.css | 13 +++++++
 assets/js/browser-phone-frontend.js   | 52 +++++++++++++++++++++++----
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/assets/css/browser-phone-frontend.css b/assets/css/browser-phone-frontend.css
index 761a427..fc74271 100644
--- a/assets/css/browser-phone-frontend.css
+++ b/assets/css/browser-phone-frontend.css
@@ -1253,4 +1253,17 @@
     padding: 20px;
     color: #6c757d;
     font-style: italic;
+}
+
+/* Hold button active state */
+.twp-btn.btn-active {
+    background-color: #ff6b35 !important;
+    color: white !important;
+    border-color: #e55100 !important;
+    font-weight: bold;
+}
+
+.twp-btn.btn-active:hover {
+    background-color: #e55100 !important;
+    border-color: #bf360c !important;
 }
\ No newline at end of file
diff --git a/assets/js/browser-phone-frontend.js b/assets/js/browser-phone-frontend.js
index d5c1581..8422cb5 100644
--- a/assets/js/browser-phone-frontend.js
+++ b/assets/js/browser-phone-frontend.js
@@ -1545,32 +1545,72 @@
             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;
+        
+        // Update button immediately for better UX
+        if (currentHoldState) {
+            $holdBtn.text('Resuming...').prop('disabled', true);
+        } else {
+            $holdBtn.text('Holding...').prop('disabled', true);
+        }
         
         $.ajax({
             url: twp_frontend_ajax.ajax_url,
             method: 'POST',
             data: {
                 action: 'twp_toggle_hold',
-                call_sid: currentCall.parameters.CallSid,
-                hold: !isOnHold,
+                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 = !isOnHold;
+                    isOnHold = !currentHoldState;
+                    console.log('Hold state updated to:', isOnHold);
+                    
                     if (isOnHold) {
-                        $holdBtn.text('Unhold').addClass('btn-active');
-                        showMessage('Call placed on hold', 'info');
+                        $holdBtn.text('Resume').addClass('btn-active').prop('disabled', false);
+                        showMessage('Call placed on hold - Click Resume to continue', 'info');
+                        console.log('Button updated to Resume state');
                     } else {
-                        $holdBtn.text('Hold').removeClass('btn-active');
+                        $holdBtn.text('Hold').removeClass('btn-active').prop('disabled', false);
                         showMessage('Call resumed', 'info');
+                        console.log('Button updated to Hold state');
                     }
                 } else {
+                    console.error('Hold toggle failed:', response);
+                    // Revert button state on error
+                    if (currentHoldState) {
+                        $holdBtn.text('Resume').addClass('btn-active').prop('disabled', false);
+                    } else {
+                        $holdBtn.text('Hold').removeClass('btn-active').prop('disabled', false);
+                    }
                     showMessage('Failed to toggle hold: ' + (response.data || 'Unknown error'), 'error');
                 }
             },
             error: function() {
+                // Revert button state on error
+                if (currentHoldState) {
+                    $holdBtn.text('Resume').addClass('btn-active').prop('disabled', false);
+                } else {
+                    $holdBtn.text('Hold').removeClass('btn-active').prop('disabled', false);
+                }
                 showMessage('Failed to toggle hold', 'error');
             }
         });