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

18
app/views/foodcourt/qrpay/init.html.erb
View File

@@ -203,6 +203,11 @@
<div class="card-block">
<div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
<div class="processing-indicator" style="margin: 1rem 0;">
<div class="processing-dot"></div>
<div class="processing-dot"></div>
<div class="processing-dot"></div>
</div>
<h3 class="m-t-20" style="color: #555;">Waiting for Customer Payment</h3>
<p class="text-muted">Please ask customer to scan the QR code</p>
<% if @qr_svg %>
@@ -210,15 +215,11 @@
<%= raw @qr_svg %>
</div>
<% end %>
<div class="processing-indicator m-t-10" style="margin-top: 8rem;">
<div class="processing-dot"></div>
<div class="processing-dot"></div>
<div class="processing-dot"></div>
<div class="d-flex" style="margin-top: 1rem;">
<button class="btn btn-danger" id="cancel-btn">Cancel Payment</button>
</div>
</div>
<div class="d-flex" style="margin-top: 10rem;">
<button class="btn btn-block btn-default waves-effect" id="cancel-btn">Cancel</button>
</div>
<input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
<input type="hidden" name="display_type" id="display_type" value="<%= @display_type%>">
</div>
@@ -271,6 +272,7 @@ $(document).ready(function() {
console.log("Received:", data);
if (data.status === "PAY_SUCCESS") {
$('#cancel-btn').hide();
this.handlePaymentSuccess();
}
},
@@ -303,7 +305,7 @@ $(document).ready(function() {
setTimeout(() => {
window.location.href = "/";
}, 3000);
}, 2000);
}
},
error: (xhr, status, error) => {

2
app/views/layouts/_header.html.erb
View File

@@ -149,7 +149,7 @@
<%# Top Bar - New Design %>
<% if !request.path_info.include?('second_display') %>
<nav class="navbar new-design-navbar" style="position: sticky;">
<nav class="navbar new-design-navbar mb-1" style="position: sticky;">
<div class="container-fluid">
<div class="navbar-left-section">
<% if current_login_employee.role != "waiter" %>

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';

2
app/views/layouts/foodcourt.html.erb
View File

@@ -43,7 +43,7 @@
</section>
<!-- Main Content -->
<section class="content">
<section class="content" style="padding: 0;">
<% flash.each do |type, message| %>
<% if type == "notice"
color = "alert-success"