|
|
@@ -16,7 +16,7 @@
|
|
|
var isBigSmall = Model.termType == Constants.PIC10_BIGSMALL_CODE;
|
|
|
var themeColor = isBigSmall ? "#0A9800" : "#AA3DC8";
|
|
|
var gameTitle = isBigSmall ? Lang.v2_big_small : Lang.v2_odd_even;
|
|
|
- var prizeAmount = isBigSmall ? "100" : "200";
|
|
|
+ var prizeAmount = isBigSmall ? "100.000" : "200.000";
|
|
|
|
|
|
<!-- ==================== CARD SELECTION GAME UI (BIG/SMALL or ODD/EVEN) ==================== -->
|
|
|
<div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] h-screen flex flex-col font-bricolage overflow-hidden max-w-[414px] mx-auto relative">
|
|
|
@@ -269,66 +269,65 @@ else
|
|
|
<div class="w-8"></div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Content Area -->
|
|
|
- <div class="flex-1 overflow-y-auto p-5 space-y-5 bg-gray-50 pb-72">
|
|
|
- <div class="flex justify-between items-center px-1">
|
|
|
- <span class="text-[14px] font-bold text-gray-800">Selected Tickets</span>
|
|
|
- <span class="text-[14px] font-bold text-gray-800">@Lang.price</span>
|
|
|
- </div>
|
|
|
+ <!-- Content Area: Split into scrollable list and static summary -->
|
|
|
+ <div class="flex-1 flex flex-col min-h-0 bg-gray-50">
|
|
|
+ <!-- Scrollable Ticket List -->
|
|
|
+ <div class="flex-1 overflow-y-auto p-5 pb-2">
|
|
|
+ <div class="flex justify-between items-center px-1 mb-3">
|
|
|
+ <span class="text-[14px] font-bold text-gray-800">Selected Tickets</span>
|
|
|
+ <span class="text-[14px] font-bold text-gray-800">@Lang.price</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- Ticket List List -->
|
|
|
- <div id="summaryTicketList" class="flex flex-col gap-4">
|
|
|
- <!-- Populated dynamically via JS -->
|
|
|
+ <!-- Ticket List -->
|
|
|
+ <div id="summaryTicketList" class="flex flex-col gap-4">
|
|
|
+ <!-- Populated dynamically via JS -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Dates Section -->
|
|
|
- <div class="grid grid-cols-2 gap-4 mt-8 pt-6 border-t border-dashed border-gray-300">
|
|
|
- <div class="space-y-1">
|
|
|
- <span class="text-[11px] font-black text-[#EE0033] block text-center uppercase tracking-tight">@Lang.date_purchase</span>
|
|
|
- <div class="bg-white border border-gray-100 rounded-xl py-2.5 px-2 text-center font-black text-[11px] text-gray-700 shadow-sm">
|
|
|
- @DateTime.Now.ToString("dddd MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="space-y-1">
|
|
|
- <span class="text-[11px] font-black text-[#EE0033] block text-center uppercase tracking-tight">@Lang.draw_date</span>
|
|
|
- <div class="bg-white border border-gray-100 rounded-xl py-2.5 px-2 text-center font-black text-[11px] text-gray-700 shadow-sm" id="summaryResultDate">
|
|
|
- @{
|
|
|
- DateTime drawDate;
|
|
|
- bool isValidDate = DateTime.TryParse(currentTerm?.date_end, out drawDate);
|
|
|
- if (isValidDate) {
|
|
|
- @drawDate.ToString("dddd MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)
|
|
|
- } else {
|
|
|
- @:N/A
|
|
|
- }
|
|
|
- }
|
|
|
- </div>
|
|
|
+ <!-- Static Summary Info (Dates & Totals) -->
|
|
|
+ <div class="shrink-0 bg-white p-5 space-y-4 border-t border-gray-100 shadow-[0px_-10px_20px_rgba(0,0,0,0.03)]">
|
|
|
+ <!-- Dates Section -->
|
|
|
+ <div class="grid grid-cols-2 gap-4">
|
|
|
+ <div class="space-y-1">
|
|
|
+ <span class="text-[11px] font-black text-[#EE0033] block text-center uppercase tracking-tight">@Lang.date_purchase</span>
|
|
|
+ <div class="bg-white border border-gray-100 rounded-xl py-2.5 px-2 text-center font-black text-[11px] text-gray-700 shadow-sm">
|
|
|
+ @DateTime.Now.ToString("dddd MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-1">
|
|
|
+ <span class="text-[11px] font-black text-[#EE0033] block text-center uppercase tracking-tight">@Lang.draw_date</span>
|
|
|
+ <div class="bg-white border border-gray-100 rounded-xl py-2.5 px-2 text-center font-black text-[11px] text-gray-700 shadow-sm" id="summaryResultDate">
|
|
|
+ @{
|
|
|
+ DateTime drawDate;
|
|
|
+ bool isValidDate = DateTime.TryParse(currentTerm?.date_end, out drawDate);
|
|
|
+ if (isValidDate) {
|
|
|
+ @drawDate.ToString("dddd MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)
|
|
|
+ } else {
|
|
|
+ @:N/A
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- Totals Section -->
|
|
|
- <div class="mt-10 px-2 space-y-2">
|
|
|
- <div class="flex justify-between items-center">
|
|
|
- <span class="text-[14px] font-bold text-black">@Lang.total_ticket</span>
|
|
|
- <span id="summaryTotalCount" class="text-[16px] font-black text-black">0</span>
|
|
|
- </div>
|
|
|
- <div class="flex justify-between items-center">
|
|
|
- <span class="text-[14px] font-bold text-black">@Lang.total_money</span>
|
|
|
- <div class="flex items-baseline gap-1">
|
|
|
- <span id="summaryTotalAmount" class="text-[32px] font-black text-black">0</span>
|
|
|
- <span class="text-[16px] font-black text-[#EE0033]">HTG</span>
|
|
|
- </div>
|
|
|
+ <!-- Totals Section -->
|
|
|
+ <div class="space-y-1 px-1">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <span class="text-[14px] font-bold text-black">@Lang.total_ticket</span>
|
|
|
+ <span id="summaryTotalCount" class="text-[16px] font-black text-black">0</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <span class="text-[14px] font-bold text-black">@Lang.total_money</span>
|
|
|
+ <div class="flex items-baseline gap-1">
|
|
|
+ <span id="summaryTotalAmount" class="text-[32px] font-black text-black">0</span>
|
|
|
+ <span class="text-[16px] font-black text-[#EE0033]">HTG</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- Scalloped edge visual separator filler -->
|
|
|
- <div class="w-full h-8 flex overflow-hidden opacity-5 mt-4">
|
|
|
- @for(int i=0; i<30; i++) {
|
|
|
- <div class="w-4 h-4 rounded-full bg-black -mt-2 shrink-0"></div>
|
|
|
- }
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="p-4 bg-white border-t border-gray-100 grid grid-cols-2 gap-4 pb-8 shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] absolute bottom-0 w-full left-0 z-[70]">
|
|
|
+ <div class="shrink-0 p-4 bg-white border-t border-gray-100 grid grid-cols-2 gap-4 pb-8 shadow-[0px_-4px_20px_rgba(0,0,0,0.05)]">
|
|
|
<button onclick="hideOrderSummary()" class="bg-[#FFB000] text-white py-2.5 rounded-2xl font-black text-[18px] shadow-lg shadow-orange-200 active:scale-95 transition-all uppercase tracking-wide">
|
|
|
@Lang.reorder
|
|
|
</button>
|
|
|
@@ -713,7 +712,7 @@ else
|
|
|
}
|
|
|
});
|
|
|
const pricePerTicket = @(Model.termType == Constants.PIC10_BASIC_CODE ? "10" : "50");
|
|
|
- $("#totalPrice").text(filledTickets * pricePerTicket);
|
|
|
+ $("#totalPrice").text(formatMoneyV2(filledTickets * pricePerTicket));
|
|
|
$("#totalTicketCount").text(filledTickets);
|
|
|
}
|
|
|
|
|
|
@@ -831,7 +830,7 @@ else
|
|
|
if (data.responseCode === "0") {
|
|
|
showOrderSummary(data, tickets);
|
|
|
} else {
|
|
|
- showNotification(data.responseMessage || "Confirmation failed", "warning");
|
|
|
+ showNotification(data.responseMessage || "Confirmation failed", data.responseCode);
|
|
|
}
|
|
|
},
|
|
|
error: function(err) {
|
|
|
@@ -886,7 +885,7 @@ else
|
|
|
</div>
|
|
|
<div class="w-24 shrink-0 bg-white border border-gray-200 rounded-2xl p-2.5 flex items-center justify-center shadow-sm">
|
|
|
<div class="flex items-baseline gap-0.5">
|
|
|
- <span class="text-[20px] font-black text-black">${t.money}</span>
|
|
|
+ <span class="text-[20px] font-black text-black">${formatMoneyV2(t.money)}</span>
|
|
|
<span class="text-[12px] font-black text-[#EE0033]">HTG</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -897,7 +896,7 @@ else
|
|
|
|
|
|
$("#summaryTotalCount").text(displayTickets.length);
|
|
|
const totalMoney = apiData.totalMoneyPayment || apiData.totalMoney || "0";
|
|
|
- $("#summaryTotalAmount").text(parseFloat(totalMoney).toLocaleString('en-US'));
|
|
|
+ $("#summaryTotalAmount").text(formatMoneyV2(totalMoney));
|
|
|
|
|
|
summaryModal.removeClass("hidden").addClass("flex");
|
|
|
}
|
|
|
@@ -920,7 +919,7 @@ else
|
|
|
if (data.responseCode === "0") {
|
|
|
showOtpModal();
|
|
|
} else {
|
|
|
- showNotification(data.responseMessage || "Failed to send OTP", "warning");
|
|
|
+ showNotification(data.responseMessage || "Failed to send OTP", data.responseCode);
|
|
|
}
|
|
|
},
|
|
|
error: function() {
|
|
|
@@ -1034,7 +1033,7 @@ else
|
|
|
startOtpTimer(60);
|
|
|
showNotification("OTP has been resent.", "success");
|
|
|
} else {
|
|
|
- showNotification(data.responseMessage || "Failed to resend OTP", "warning");
|
|
|
+ showNotification(data.responseMessage || "Failed to resend OTP", data.responseCode);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
@@ -1042,7 +1041,7 @@ else
|
|
|
|
|
|
function showReceiptSuccess(transId, amount, phone, totalTickets, drawDate) {
|
|
|
// Setup data dynamically
|
|
|
- $("#receiptAmount").text(amount + " HTG");
|
|
|
+ $("#receiptAmount").text(formatMoneyV2(amount) + " HTG");
|
|
|
if(phone) $("#receiptPhone").text(phone);
|
|
|
if(totalTickets) $("#receiptTotalTickets").text(totalTickets);
|
|
|
if(drawDate) $("#receiptDrawDate").text(drawDate);
|
|
|
@@ -1104,12 +1103,14 @@ else
|
|
|
// Success: Show receipt Modal
|
|
|
showReceiptSuccess(res.orderId || currentTransId, $("#summaryTotalAmount").text(), "@(Model.userStatus?.msisdn ?? "-")", $("#summaryTotalCount").text(), "@(currentTerm?.date_random ?? "-")");
|
|
|
} else {
|
|
|
- // showNotification(res.responseMessage || "Payment failed", "warning");
|
|
|
- // As requested: show error on OTP modal instead of whole page notification
|
|
|
- $("#otpError").text(res.responseMessage || "Invalid OTP").removeClass("hidden");
|
|
|
- // Clear inputs
|
|
|
- $("#otpInputs input").val("");
|
|
|
- $("#otp1").focus();
|
|
|
+ if (res.responseCode === "-2" || (res.responseMessage && res.responseMessage.includes("System is upgrading"))) {
|
|
|
+ hideOtpModal();
|
|
|
+ showNotification(res.responseMessage || "System is upgrading", res.responseCode);
|
|
|
+ } else {
|
|
|
+ $("#otpError").text(res.responseMessage || "Invalid OTP").removeClass("hidden");
|
|
|
+ $("#otpInputs input").val("");
|
|
|
+ $("#otp1").focus();
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
error: function() {
|
|
|
@@ -1119,19 +1120,29 @@ else
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function showNotification(message, type = 'success') {
|
|
|
+ var systemUpgrading = false;
|
|
|
+ function showNotification(message, code) {
|
|
|
const msgEl = $("#notificationMessage");
|
|
|
const iconEl = $("#notificationModal img");
|
|
|
+ const btnEl = $("#notificationModal button");
|
|
|
|
|
|
msgEl.text(message);
|
|
|
|
|
|
+ if (code === "-2" || (message && message.includes("System is upgrading"))) {
|
|
|
+ systemUpgrading = true;
|
|
|
+ btnEl.text("@Lang.login");
|
|
|
+ } else {
|
|
|
+ systemUpgrading = false;
|
|
|
+ btnEl.text("OK");
|
|
|
+ }
|
|
|
+
|
|
|
// Toggle icon based on type (warning or success)
|
|
|
const warningIcon = '/LotteryV2/img/modal/warning_icon.png';
|
|
|
const successIcon = '/LotteryV2/img/modal/success_icon_v2.png';
|
|
|
const fallbackWarning = 'https://cdn-icons-png.flaticon.com/512/564/564619.png';
|
|
|
const fallbackSuccess = 'https://cdn-icons-png.flaticon.com/512/190/190411.png';
|
|
|
|
|
|
- if (type === 'warning' || type === 'error') {
|
|
|
+ if (code === "-2" || code === "warning" || code === "error") {
|
|
|
iconEl.attr('src', warningIcon);
|
|
|
iconEl.attr('onerror', `this.src='${fallbackWarning}'`);
|
|
|
} else {
|
|
|
@@ -1144,6 +1155,9 @@ else
|
|
|
|
|
|
function closeNotificationModal() {
|
|
|
$("#notificationModal").addClass("hidden").removeClass("flex");
|
|
|
+ if (systemUpgrading) {
|
|
|
+ window.location.href = subDomain + "/Account/Login";
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// ==================== CARD SELECTION GAME LOGIC (BIG/SMALL / ODD/EVEN) ====================
|
|
|
@@ -1207,7 +1221,7 @@ else
|
|
|
}
|
|
|
}
|
|
|
$("#bsTotalTicketCount").text(1);
|
|
|
- $("#bsTotalPrice").text(50);
|
|
|
+ $("#bsTotalPrice").text(formatMoneyV2(50));
|
|
|
}
|
|
|
|
|
|
function bsShowPayment(e) {
|