From fcde8d94cfb91e76b187aaa00998f5f3d0176fe1 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sat, 11 Oct 2025 13:17:41 -0400
Subject: [PATCH] Fix crypto payment quote UI to hide QR/buttons immediately on
 received status

The removePaymentElements() and replaceButtonsWithInvoiceLink() JavaScript
functions were using incorrect CSS selectors that tried to match hardcoded
inline style attributes (e.g., div[style*="grid-template-columns: 1fr 1fr 1fr"])
which don't exist in the actual template HTML.

Updated both functions to use the correct CSS class selectors:
- '.payment-grid' for QR code and payment instructions
- '.payment-buttons' for copy buttons and wallet links

This ensures that when a payment transitions to 'received' status, the polling
mechanism immediately hides the payment UI elements without requiring a page
refresh, preventing potential duplicate payments.

Fixed selectors in crypto_checkout.j2:150-162 and crypto_checkout.j2:165-206
---
 make_post_sell/templates/crypto_checkout.j2 | 42 +++++++++------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/make_post_sell/templates/crypto_checkout.j2 b/make_post_sell/templates/crypto_checkout.j2
index 00d6282..0c04a5f 100644
--- a/make_post_sell/templates/crypto_checkout.j2
+++ b/make_post_sell/templates/crypto_checkout.j2
@@ -148,48 +148,40 @@
         
         // Remove payment elements to prevent double-sending (for received status)
         function removePaymentElements() {
-          const buttonGrid = document.querySelector('div[style*="grid-template-columns: 1fr 1fr 1fr"]');
-          const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
-          
           // Remove the entire payment grid (QR code and instructions)
+          const paymentGrid = document.querySelector('.payment-grid');
           if (paymentGrid) {
             paymentGrid.style.display = 'none';
           }
-          
+
           // Remove all payment buttons completely
-          if (buttonGrid) {
-            const copyAddrBtn = document.getElementById('copy-addr');
-            const copyAmtBtn = document.getElementById('copy-amt');
-            const walletLink = buttonGrid.querySelector('a[href^="monero:"], a[href^="dogecoin:"]');
-            
-            // Remove the buttons
-            if (copyAddrBtn) copyAddrBtn.remove();
-            if (copyAmtBtn) copyAmtBtn.remove();
-            if (walletLink) walletLink.remove();
+          const paymentButtons = document.querySelector('.payment-buttons');
+          if (paymentButtons) {
+            paymentButtons.style.display = 'none';
           }
         }
         
         // Replace action buttons with smart redirect link for terminal statuses
         function replaceButtonsWithInvoiceLink(redirectUrl) {
-          const buttonGrid = document.querySelector('div[style*="grid-template-columns: 1fr 1fr 1fr"]');
-          const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
-          
-          if (!buttonGrid) return;
-          
+          const paymentGrid = document.querySelector('.payment-grid');
+          const paymentButtons = document.querySelector('.payment-buttons');
+
+          if (!paymentButtons) return;
+
           // Remove the entire payment grid (QR code and instructions)
           if (paymentGrid) {
             paymentGrid.style.display = 'none';
           }
-          
+
           // Clear all buttons
-          buttonGrid.innerHTML = '';
-          buttonGrid.style.gridTemplateColumns = '1fr';
-          
+          paymentButtons.innerHTML = '';
+          paymentButtons.style.gridTemplateColumns = '1fr';
+
           // Add smart redirect link
           const invoiceLink = document.createElement('a');
           const statusEl = document.getElementById('status');
           const currentStatus = statusEl ? statusEl.textContent.trim() : '';
-          
+
           // Use smart redirect URL for confirmed states, crypto-quotes for terminal states
           if (currentStatus === 'confirmed' || currentStatus === 'confirmed-complete' || currentStatus === 'confirmed-overpay') {
             invoiceLink.href = redirectUrl || '/u/purchases';
@@ -205,12 +197,12 @@
             invoiceLink.href = '/u/crypto-quotes';
             invoiceLink.textContent = 'View Crypto History';
           }
-          
+
           invoiceLink.className = 'mps-button';
           invoiceLink.classList.add('mps-button-blue');
           invoiceLink.style.textAlign = 'center';
           invoiceLink.style.display = 'block';
-          buttonGrid.appendChild(invoiceLink);
+          paymentButtons.appendChild(invoiceLink);
         }
         
         // Add warning message for expired payments (only once)