update read modal
This commit is contained in:
Dev Team
@@ -1,100 +1,346 @@
|
|||||||
<style>
|
<style>
|
||||||
#read_modal {
|
/* Base Styling */
|
||||||
text-align: center;
|
.payment-modal {
|
||||||
padding: 0!important;
|
border-radius: 18px;
|
||||||
}
|
|
||||||
|
|
||||||
#read_modal:before {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
content: " ";
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-dialog {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: left;
|
|
||||||
vertical-align: middle;
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-option-btn {
|
|
||||||
padding: 20px;
|
|
||||||
border: 2px solid #54A5AF;
|
|
||||||
border-radius: 12px;
|
|
||||||
background-color: white;
|
|
||||||
margin: 10px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 180px;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-option-btn#mmqr_btn:hover {
|
.payment-header {
|
||||||
background-color: #f0f8fa;
|
background: #f8fbfc;
|
||||||
transform: translateY(-2px);
|
padding: 1.5rem;
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
border-bottom: 2px solid #e0f0f3;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-option-btn:active {
|
.merchant-logo {
|
||||||
transform: translateY(1px);
|
height: 65px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(84,165,175,0.1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-option-btn img {
|
.modal-title {
|
||||||
height: 100px;
|
|
||||||
width: auto;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
object-fit: contain;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-option-btn#mmqr_btn:hover img {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-option-btn span {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #2a626b;
|
color: #2a626b;
|
||||||
text-transform: uppercase;
|
font-size: 1.5rem;
|
||||||
letter-spacing: 0.5px;
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#close {
|
/* Amount Display */
|
||||||
padding: 10px 40px;
|
.amount-section {
|
||||||
font-size: 16px;
|
background: #54A5AF15;
|
||||||
border-radius: 25px;
|
padding: 1.2rem;
|
||||||
margin-top: 15px;
|
margin: 0 1.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px dashed #54A5AF40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-amount {
|
||||||
|
color: #2a626b;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
color: #678c93;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Payment Options Grid */
|
||||||
|
.payment-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-card {
|
||||||
|
background: white;
|
||||||
|
border: 2px solid #e0f0f3;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
border-color: #54A5AF;
|
||||||
|
box-shadow: 0 6px 20px rgba(84,165,175,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-card.active {
|
||||||
|
border-color: #54A5AF;
|
||||||
|
background: #f8fbfc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-icon {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
color: #54A5AF;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-label {
|
||||||
|
color: #2a626b;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-description {
|
||||||
|
color: #678c93;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Actions */
|
||||||
|
.modal-footer {
|
||||||
|
background: #f8fbfc;
|
||||||
|
padding: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-top: 2px solid #e0f0f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #e0f0f3;
|
||||||
|
color: #678c93;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
border-radius: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel:hover {
|
||||||
|
border-color: #ff4757;
|
||||||
|
color: #ff4757;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-proceed {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #e0f0f3;
|
||||||
|
color: #678c93;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-proceed:hover {
|
||||||
|
border-color: #ff4757;
|
||||||
|
color: #ff4757;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
<div class="modal fade payment-modal" id="read_modal" tabindex="-1" role="dialog">
|
||||||
<div class="modal-dialog read-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header" style="background-color: #54A5AF; padding-top:10px !important;">
|
<div class="payment-header">
|
||||||
<h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Chose Payment Method</h4>
|
<h2 class="modal-title">Payment Selection</h2>
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or pay with MMQR</p>
|
|
||||||
<div style="text-align: center; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
|
|
||||||
<button class="payment-option-btn" id="mmqr_btn">
|
|
||||||
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px;">
|
|
||||||
<span>MMQR</span>
|
|
||||||
</button>
|
|
||||||
<button class="payment-option-btn">
|
|
||||||
<img src="/image/nfc.png" alt="NFC Payment" style="max-width: 120px;">
|
|
||||||
<span>NFC Reader</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer" style="justify-content: center;">
|
|
||||||
<button type="button" class="btn btn-danger btn-lg" id="close">Cancel</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn-cancel" id="close">
|
||||||
|
Cancel Payment
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn-proceed">
|
||||||
|
Process
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
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(); // Store original button text
|
||||||
|
|
||||||
|
// Function to update the "Process" button's state and appearance
|
||||||
|
function styleProceedButton(enabled) {
|
||||||
|
proceedButton.disabled = !enabled;
|
||||||
|
|
||||||
|
if (enabled) {
|
||||||
|
proceedButton.style.borderColor = '#54A5AF'; // Active/theme color
|
||||||
|
proceedButton.style.color = '#54A5AF';
|
||||||
|
proceedButton.textContent = `Process with ${selectedPaymentMethodLabel}`;
|
||||||
|
// Opacity and cursor will be handled by :disabled CSS or browser defaults
|
||||||
|
} 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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initDynamicQrPay() {
|
||||||
|
const paymentMethod = 'MMQR';
|
||||||
|
let table_id = $("#table_id").text();
|
||||||
|
let booking_id = $("#booking_id").text();
|
||||||
|
let customer_id = $("#customer_id").text();
|
||||||
|
let second_display_lookup = $("#display_type").val();
|
||||||
|
|
||||||
|
let params = {
|
||||||
|
order_source: "food_court",
|
||||||
|
order_type: "dine_in",
|
||||||
|
customer_id: customer_id,
|
||||||
|
guest_info: "",
|
||||||
|
table_id: table_id,
|
||||||
|
order_items: JSON.stringify(get_order_item_rows()),
|
||||||
|
create_type: "create_pay",
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch('/foodcourt/addorders/create', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(params),
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(result => {
|
||||||
|
booking_id = result.booking_id;
|
||||||
|
console.log(result);
|
||||||
|
window.location.href = `/foodcourt/${result.sale_id}/qrpay/dynamic_init`;
|
||||||
|
|
||||||
|
if (document.getElementById("server_mode").value !== "cloud" && second_display_lookup === 2) {
|
||||||
|
// customer_display_view(null, "reload");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
document.getElementById("oqs_loading_wrapper").style.display = "none";
|
||||||
|
document.getElementById("create_order").disabled = false;
|
||||||
|
document.getElementById("create_pay_order").disabled = false;
|
||||||
|
swal("Error", "Status: " + error.message, "error");
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_order_item_rows(){
|
||||||
|
var order_items = [];
|
||||||
|
var item_row = $('.summary-items tbody tr');
|
||||||
|
$(item_row).each(function(i){
|
||||||
|
var order_item = {};
|
||||||
|
|
||||||
|
order_item.order_item_id = $(item_row[i]).attr('data-row');
|
||||||
|
order_item.item_instance_code = $(item_row[i]).attr('data-instance-code');
|
||||||
|
order_item.quantity = $(item_row[i]).children('#item_qty').text();
|
||||||
|
//parent id
|
||||||
|
if ($(item_row[i]).attr('data-parent')=="true") {
|
||||||
|
parent_id = $(item_row[i]).attr('data-row');
|
||||||
|
}
|
||||||
|
if ($(item_row[i]).attr('data-sub-item')=="true") {
|
||||||
|
order_item.parent_order_item_id = parent_id
|
||||||
|
}
|
||||||
|
//end parent id
|
||||||
|
order_item.options = $(item_row[i]).attr('data-options');
|
||||||
|
order_items.push(order_item);
|
||||||
|
});
|
||||||
|
return order_items;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user