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

feat : redirect to sale page if MMQR is being selected

Browse Source 
feat : add MMQR button in payment selection

fix : add create_pay params in add_order_function
This commit is contained in:
aungthetkhaing
2025-05-21 09:35:00 +06:30
parent d02da668b8
commit 67dfd6f1ce
3 changed files with 174 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,28 +1,8 @@
<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="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/barcode.png" style="height: 200px">
<img src="/image/nfc.png" style="height: 200px"><br>
</div>
</div>
<div class="modal-footer" style="justify-content: center;">
<button type="button" class="btn btn-danger" id="close" >Cancel</button>
</div>
</div>
</div>
</div>
<style>
#read_modal {
text-align: center;
padding: 0!important;
}
text-align: center;
padding: 0!important;
}
#read_modal:before {
display: inline-block;
@@ -35,5 +15,86 @@
display: inline-block;
text-align: left;
vertical-align: middle;
max-width: 90%;
}
</style>
.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;
}
.payment-option-btn#mmqr_btn:hover {
background-color: #f0f8fa;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.payment-option-btn:active {
transform: translateY(1px);
}
.payment-option-btn img {
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;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#close {
padding: 10px 40px;
font-size: 16px;
border-radius: 25px;
margin-top: 15px;
font-weight: 600;
}
</style>
<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="modal-header" style="background-color: #54A5AF; padding-top:10px !important;">
<h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Chose Payment Method</h4>
</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>