fixes
This commit is contained in:
Dev Team
@@ -1,202 +1,48 @@
|
||||
<style>
|
||||
/* Base Styling */
|
||||
.payment-modal {
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.payment-header {
|
||||
background: #f8fbfc;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 2px solid #e0f0f3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.merchant-logo {
|
||||
height: 65px;
|
||||
margin-bottom: 1rem;
|
||||
filter: drop-shadow(0 2px 4px rgba(84,165,175,0.1));
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #2a626b;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
/* Amount Display */
|
||||
.amount-section {
|
||||
background: #54A5AF15;
|
||||
padding: 1.2rem;
|
||||
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: flex;
|
||||
flex-direction: column;
|
||||
/* grid-template-columns: repeat(1, 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;
|
||||
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;
|
||||
}
|
||||
.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 fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
|
||||
<div class="modal-dialog read-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="payment-header">
|
||||
<h2 class="modal-title">Payment Options</h2>
|
||||
</div>
|
||||
<div class="payment-grid">
|
||||
<div class="payment-card" id="dynamic_qr">
|
||||
<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 class="modal-header" style="background-color: #54A5AF;padding-top:10px !important;">
|
||||
<h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Customer Detail</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or Scan Code</p>
|
||||
<div style="text-align: center;">
|
||||
<img src="/image/nfc.png" style="height: 200px"><br>
|
||||
<button type="button" class="btn btn-primary" id="mmqr" >MMQR</button>
|
||||
|
||||
<div class="text-center text-bold text-muted">
|
||||
(Or)
|
||||
</div>
|
||||
|
||||
<!-- Read NFC Card -->
|
||||
<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
|
||||
</button>
|
||||
<div class="modal-footer" style="justify-content: center;">
|
||||
<button type="button" class="btn btn-danger" id="close" >Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script defer type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const paymentCards = document.querySelectorAll('.payment-card:not(.disabled)');
|
||||
const cancelButton = document.querySelector('.btn-cancel');
|
||||
<style>
|
||||
#read_modal {
|
||||
text-align: center;
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
cancelButton.addEventListener('click', function () {
|
||||
console.log("Action: Cancel payment.");
|
||||
#read_modal:before {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
content: " ";
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
paymentCards.forEach(c => c.classList.remove('active'));
|
||||
.read-dialog {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
styleProceedButton(false);
|
||||
});
|
||||
<script>
|
||||
$('#mmqr').click(function() {
|
||||
// alert("MMQR");
|
||||
|
||||
const disabledNfcCard = document.querySelector('.payment-card.disabled');
|
||||
|
||||
document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
|
||||
initDynamicQrPay();
|
||||
});
|
||||
|
||||
function initDynamicQrPay() {
|
||||
const paymentMethod = 'MMQR';
|
||||
const $serverMode = $('#server_mode');
|
||||
const $createOrderBtn = $('#create_order');
|
||||
@@ -236,28 +82,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
swal("Error", errorMsg, "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_name = $(item_row[i]).attr('data-item-name');
|
||||
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