engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Fix crypto payment quote UI to hide QR/buttons immediately on received status

Browse source 
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
This commit is contained in:
Russell Ballestrini 2025-10-11 13:17:41 -04:00
parent b5a93e7a7a
commit fcde8d94cf
1 changed files with 17 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

42
make_post_sell/templates/crypto_checkout.j2
View file

@ -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)