|
|
@@ -6,7 +6,9 @@
|
|
|
@using LotteryWebApp.Languages;
|
|
|
@using LotteryWebApp.Controllers;
|
|
|
@using LotteryWebApp.Common;
|
|
|
-
|
|
|
+@{
|
|
|
+ string SubText(string key) => Lang.ResourceManager.GetString(key, System.Globalization.CultureInfo.CurrentUICulture) ?? key;
|
|
|
+}
|
|
|
|
|
|
|
|
|
@section Styles {
|
|
|
@@ -180,7 +182,7 @@
|
|
|
<div id="playNowSection" class="relative shrink-0 mt-4 z-10">
|
|
|
<img src="/Millions/assets/images/play-decor.png" alt="" class="block w-full h-auto pointer-events-none"/>
|
|
|
|
|
|
- <a onclick="checkTerm('@Constants.Millions_CODE')" class="play-now-outer rounded-full animate-pulse-play" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:155px; height:155px; padding:11px; cursor:pointer;">
|
|
|
+ <a onclick="onPlayNow('@Constants.Millions_CODE')" class="play-now-outer rounded-full animate-pulse-play" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:155px; height:155px; padding:11px; cursor:pointer;">
|
|
|
<div class="play-now-ring rounded-full" style="width:100%;height:100%;padding:4px;">
|
|
|
<div class="play-now-btn rounded-full flex flex-col items-center justify-center text-white text-[32px] font-black border-[1.8px] border-white animate-pulse-play" style="width:100%;height:100%;line-height:24px;">
|
|
|
<span class="uppercase">@Lang.millions_play</span>
|
|
|
@@ -214,6 +216,87 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div id="subMillionModal" class="sub-modal fixed inset-0 z-[100] flex items-center justify-center hidden px-6 font-bricolage">
|
|
|
+ <div class="sub-modal__panel relative w-full max-w-[343px] bg-white rounded-[28px] overflow-hidden flex flex-col animate__animated animate__zoomIn animate__faster">
|
|
|
+ <button type="button" onclick="closeSubModal()" class="sub-modal__close" aria-label="@SubText("millions_close")">
|
|
|
+ <i class="fa-solid fa-xmark"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div id="subChoiceView" class="w-full flex flex-col">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="sub-modal__hero relative px-6 pt-7 pb-14 text-center overflow-hidden">
|
|
|
+ <span class="sub-modal__badge">MILLIONS</span>
|
|
|
+ <h2 class="text-gold-gradient font-[800] text-[26px] leading-tight mt-3 relative z-[1]">@SubText("sub_million_popup_title")</h2>
|
|
|
+ </div>
|
|
|
+ <img src="/Millions/assets/images/crown-balls.png" alt="" aria-hidden="true" class="sub-modal__crown" />
|
|
|
+
|
|
|
+ <!-- Body -->
|
|
|
+ <div class="px-6 pb-6 pt-2 flex flex-col">
|
|
|
+ <p class="text-[#4a4a4a] text-[14px] leading-snug text-center mb-4">@SubText("sub_million_popup_desc")</p>
|
|
|
+
|
|
|
+ <ul class="sub-modal__benefits mb-6">
|
|
|
+ <li><span class="sub-modal__check"><i class="fa-solid fa-ticket"></i></span>@SubText("sub_million_benefit_daily")</li>
|
|
|
+ <li><span class="sub-modal__check"><i class="fa-solid fa-bolt"></i></span>@SubText("sub_million_benefit_auto")</li>
|
|
|
+ <li><span class="sub-modal__check"><i class="fa-solid fa-crown"></i></span>@SubText("sub_million_benefit_jackpot")</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <button type="button" id="subRegisterBtn" onclick="registerSub()" class="sub-modal__primary">
|
|
|
+ <span class="sub-modal__btn-label">@SubText("sub_million_btn_subscribe")</span>
|
|
|
+ <span class="sub-modal__spinner" aria-hidden="true"></span>
|
|
|
+ </button>
|
|
|
+ <button type="button" onclick="buySingleTicket()" class="sub-modal__secondary mt-3">
|
|
|
+ @SubText("sub_million_btn_buy_single")
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="subResultView" class="w-full flex-col items-center hidden px-6 pt-8 pb-6">
|
|
|
+ <div id="subResultSuccess" class="hidden w-full flex-col items-center">
|
|
|
+ <div class="sub-modal__result-icon sub-modal__result-icon--success mb-4">
|
|
|
+ <i class="fa-solid fa-check"></i>
|
|
|
+ </div>
|
|
|
+ <h3 class="text-[#0a1f44] font-[800] text-[22px] leading-tight text-center mb-3">
|
|
|
+ @SubText("sub_million_register_success")
|
|
|
+ </h3>
|
|
|
+ <p class="text-[#4a4a4a] text-[13.5px] leading-relaxed text-center mb-2 px-1">
|
|
|
+ @SubText("sub_million_register_success_desc")
|
|
|
+ </p>
|
|
|
+ <p class="text-[#0a1f44] font-[700] text-[14px] leading-snug text-center mb-6">
|
|
|
+ @SubText("sub_million_register_success_prompt")
|
|
|
+ </p>
|
|
|
+ <button type="button" onclick="buySingleTicket()" class="sub-modal__primary w-full">
|
|
|
+ @SubText("sub_million_btn_buy_more")
|
|
|
+ </button>
|
|
|
+ <button type="button" onclick="closeSubModal()" class="sub-modal__btn-close mt-3 w-full">
|
|
|
+ @SubText("millions_close")
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div id="subResultFail" class="hidden w-full flex-col items-center">
|
|
|
+ <div class="sub-modal__result-icon sub-modal__result-icon--fail mb-4">
|
|
|
+ <i class="fa-solid fa-exclamation"></i>
|
|
|
+ </div>
|
|
|
+ <p class="text-black font-[800] text-[20px] leading-snug text-center mb-6">
|
|
|
+ @SubText("sub_million_register_fail")
|
|
|
+ </p>
|
|
|
+ <button type="button" onclick="closeSubModal()" class="sub-modal__primary w-full">
|
|
|
+ @SubText("millions_close")
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div id="subResultInvalidMsisdn" class="hidden w-full flex-col items-center">
|
|
|
+ <div class="sub-modal__result-icon sub-modal__result-icon--fail mb-4">
|
|
|
+ <i class="fa-solid fa-phone-slash"></i>
|
|
|
+ </div>
|
|
|
+ <p class="text-black font-[800] text-[20px] leading-snug text-center mb-6">
|
|
|
+ @SubText("sub_million_invalid_msisdn")
|
|
|
+ </p>
|
|
|
+ <button type="button" onclick="closeSubModal()" class="sub-modal__primary w-full">
|
|
|
+ @SubText("millions_close")
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
@await Html.PartialAsync("~/Areas/Millions/Views/Shared/_BottomNavbar.cshtml")
|
|
|
|
|
|
</div>
|
|
|
@@ -291,6 +374,92 @@
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ // ===== Sub MILLION =====
|
|
|
+ // null: unknown (check failed) -> fall back to the existing buy flow
|
|
|
+ var isSubMillion = null;
|
|
|
+ var pendingPlayTermType = null;
|
|
|
+ var isRegisteringSub = false;
|
|
|
+
|
|
|
+ var subCheckRequest = $.ajax({
|
|
|
+ url: subDomain + '/Millions/Home/CheckSub',
|
|
|
+ type: 'POST',
|
|
|
+ data: { __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() }
|
|
|
+ }).done(function (res) {
|
|
|
+ if (res && res.responseCode === "0") {
|
|
|
+ isSubMillion = res.isSub === true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ function onPlayNow(termType) {
|
|
|
+ subCheckRequest.always(function () {
|
|
|
+ if (isSubMillion === false) {
|
|
|
+ openSubModal(termType);
|
|
|
+ } else {
|
|
|
+ checkTerm(termType);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function openSubModal(termType) {
|
|
|
+ pendingPlayTermType = termType;
|
|
|
+ $("#subResultView").addClass("hidden").removeClass("flex");
|
|
|
+ $("#subChoiceView").removeClass("hidden").addClass("flex");
|
|
|
+ $("#subRegisterBtn").prop("disabled", false).removeClass("is-loading");
|
|
|
+ $("#subMillionModal").removeClass("hidden").addClass("flex");
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeSubModal() {
|
|
|
+ $("#subMillionModal").addClass("hidden").removeClass("flex");
|
|
|
+ }
|
|
|
+
|
|
|
+ $("#subMillionModal").on("click", function (e) {
|
|
|
+ if (e.target === this && !isRegisteringSub) closeSubModal();
|
|
|
+ });
|
|
|
+
|
|
|
+ function showSubResult(resultId) {
|
|
|
+ $("#subResultSuccess, #subResultFail, #subResultInvalidMsisdn").addClass("hidden").removeClass("flex");
|
|
|
+ $("#" + resultId).removeClass("hidden").addClass("flex");
|
|
|
+ $("#subChoiceView").addClass("hidden").removeClass("flex");
|
|
|
+ $("#subResultView").removeClass("hidden").addClass("flex");
|
|
|
+ }
|
|
|
+
|
|
|
+ function buySingleTicket() {
|
|
|
+ closeSubModal();
|
|
|
+ checkTerm(pendingPlayTermType || '@Constants.Millions_CODE');
|
|
|
+ }
|
|
|
+
|
|
|
+ function registerSub() {
|
|
|
+ if (isRegisteringSub) return;
|
|
|
+ isRegisteringSub = true;
|
|
|
+ $("#subRegisterBtn").prop("disabled", true).addClass("is-loading");
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: subDomain + '/Millions/Home/RegisterSub',
|
|
|
+ type: 'POST',
|
|
|
+ data: { __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() },
|
|
|
+ success: function (res) {
|
|
|
+ if (res.responseCode === "0") {
|
|
|
+ isSubMillion = true;
|
|
|
+ showSubResult("subResultSuccess");
|
|
|
+ } else if (res.responseCode === "@Code.SESSION_EXPIRED") {
|
|
|
+ window.location.href = subDomain + "/Account/Login";
|
|
|
+ return;
|
|
|
+ } else if (res.subCode === 5) {
|
|
|
+ showSubResult("subResultInvalidMsisdn");
|
|
|
+ } else {
|
|
|
+ showSubResult("subResultFail");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ showSubResult("subResultFail");
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ isRegisteringSub = false;
|
|
|
+ $("#subRegisterBtn").removeClass("is-loading");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
function startCountdown() {
|
|
|
const targetHour = 23;
|
|
|
const now = new Date();
|