git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update payment selection ui & layout adjustments

Browse Source
This commit is contained in:
Dev Team
2025-05-28 16:07:25 +06:30
parent 069a885175
commit dae75f03de
4 changed files with 35 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
app/views/layouts/_read_modal.html.erb
View File

@@ -50,8 +50,9 @@
/* Payment Options Grid */
.payment-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
display: flex;
flex-direction: column;
/* grid-template-columns: repeat(1, 1fr); */
gap: 1rem;
padding: 1.5rem;
}
@@ -134,139 +135,66 @@
border-color: #ff4757;
color: #ff4757;
}
.payment-card#read_nfc {
opacity: 0.6;
cursor: not-allowed;
}
</style>
<div class="modal fade payment-modal" id="read_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="payment-header">
<h2 class="modal-title">Payment Selection</h2>
<h2 class="modal-title">Payment Options</h2>
</div>
<div class="payment-grid">
<!-- Dynamic QR Card -->
<div class="payment-card" id="dynamic_qr">
<div class="payment-icon">⎙</div>
<div class="payment-label">Dynamic QR</div>
<div class="payment-description">
Generate unique QR code for this specific transaction
<div class="payment-icon text-center">
<img src="/image/mmqr.webp" width="100" height="100" />
</div>
<div class="payment-label text-center">Click here to pay with MMQR</div>
</div>
<!-- Static QR Card -->
<div class="payment-card" id="static_qr">
<div class="payment-icon">⏚</div>
<div class="payment-label">Static QR</div>
<div class="payment-description">
Use pre-registered merchant QR code for payment
</div>
<div class="text-center text-bold text-muted">
(Or)
</div>
<!-- Read NFC Card -->
<div class="payment-card disabled" style="grid-column: span 2;">
<div class="payment-icon">⎔</div>
<div class="payment-label">NFC Tap</div>
<div class="payment-description">
Tap your NFC-enabled card or device
<div class="payment-card disabled" id="read_nfc" style="grid-column: span 2;">
<div class="payment-icon text-center">
<img src="/image/nfc.png" width="100" height="100" />
</div>
<div class="payment-label text-center">Tap your NFC-enabled card or device</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-cancel" id="close">
Cancel Payment
</button>
<button type="button" class="btn-proceed">
Process
Cancel
</button>
</div>
</div>
</div>
</div>
<script>
<script defer type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
const paymentCards = document.querySelectorAll('.payment-card:not(.disabled)');
const proceedButton = document.querySelector('.btn-proceed');
const cancelButton = document.querySelector('.btn-cancel');
let selectedPaymentMethodId = null;
let selectedPaymentMethodLabel = '';
const originalProceedButtonText = proceedButton.textContent.trim();
function styleProceedButton(enabled) {
proceedButton.disabled = !enabled;
if (enabled) {
proceedButton.style.borderColor = '#54A5AF'; // Active/theme color
proceedButton.style.color = '#54A5AF';
proceedButton.textContent = `Process with ${selectedPaymentMethodLabel}`;
} else {
// Reset to default styles (defined in CSS) when disabled
proceedButton.style.borderColor = ''; // Reverts to stylesheet's .btn-proceed border-color
proceedButton.style.color = ''; // Reverts to stylesheet's .btn-proceed color
proceedButton.textContent = originalProceedButtonText;
}
}
// Initial state: Disable the "Process" button
styleProceedButton(false);
paymentCards.forEach(card => {
card.addEventListener('click', function (e) {
// If the clicked card is already active, we can either do nothing
// or re-affirm the selection. Current logic re-affirms.
// This ensures that selectedPaymentMethodLabel is correctly set for the button text.
// Remove 'active' class from all other payment cards
paymentCards.forEach(c => {
if (c !== e.currentTarget) {
c.classList.remove('active');
}
});
// Add 'active' class to the clicked card
e.currentTarget.classList.add('active');
// Store selected method's ID and Label
selectedPaymentMethodId = e.currentTarget.id;
selectedPaymentMethodLabel = e.currentTarget.querySelector('.payment-label').textContent.trim();
// Enable and update the "Process" button
styleProceedButton(true);
});
});
proceedButton.addEventListener('click', function () {
if (!this.disabled && selectedPaymentMethodId) {
console.log(`Action: Process payment using ${selectedPaymentMethodId}`);
if (selectedPaymentMethodId === 'dynamic_qr') {
initDynamicQrPay()
} else if (selectedPaymentMethodId === 'static_qr') {
// showStaticQRInstructions();
}
} else {
alert("Please select a payment method first.");
}
});
cancelButton.addEventListener('click', function () {
console.log("Action: Cancel payment.");
paymentCards.forEach(c => c.classList.remove('active'));
selectedPaymentMethodId = null;
selectedPaymentMethodLabel = '';
styleProceedButton(false);
});
const disabledNfcCard = document.querySelector('.payment-card.disabled');
if (disabledNfcCard) {
disabledNfcCard.style.cursor = 'not-allowed';
// Add opacity if not already styled to look sufficiently disabled by its class
if (window.getComputedStyle(disabledNfcCard).opacity === '1') {
disabledNfcCard.style.opacity = '0.6';
}
}
document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
initDynamicQrPay();
});
function initDynamicQrPay() {
const paymentMethod = 'MMQR';