|
|
@@ -0,0 +1,279 @@
|
|
|
+@using LotteryWebApp.Languages
|
|
|
+@using Microsoft.AspNetCore.Http
|
|
|
+@{
|
|
|
+ var shouldAutoCheckFreeTicket = Context.Session.GetString("Millions.FreeTicket.AutoChecked") != "1";
|
|
|
+}
|
|
|
+
|
|
|
+<link rel="stylesheet" href="~/Millions/css/popup-free-ticket.css" asp-append-version="true" />
|
|
|
+
|
|
|
+<aside class="free-ticket-popup" aria-labelledby="freeTicketTitle">
|
|
|
+ <a class="free-ticket-popup__card"
|
|
|
+ href="#"
|
|
|
+ id="freeTicketClaimButton"
|
|
|
+ aria-label="Get your free ticket">
|
|
|
+ <img class="free-ticket-popup__image"
|
|
|
+ src="~/Millions/assets/images/free-ticket-floating-icon.png"
|
|
|
+ alt="" aria-hidden="true" />
|
|
|
+ <strong class="free-ticket-popup__ticket-text">
|
|
|
+ @Lang.millions_free<br />@Lang.millions_ticket
|
|
|
+ </strong>
|
|
|
+ <strong class="free-ticket-popup__button-text" id="freeTicketTitle">
|
|
|
+ @Lang.millions_free @Lang.millions_ticket
|
|
|
+ </strong>
|
|
|
+ </a>
|
|
|
+</aside>
|
|
|
+
|
|
|
+<div class="free-ticket-result" id="freeTicketResultModal" role="dialog" aria-modal="true"
|
|
|
+ aria-labelledby="freeTicketResultTitle" aria-describedby="freeTicketResultDescription" hidden>
|
|
|
+ <div class="free-ticket-result__backdrop" data-free-ticket-close></div>
|
|
|
+ <section class="free-ticket-result__panel">
|
|
|
+ <h2 class="free-ticket-visually-hidden" id="freeTicketResultTitle">@Lang.free_ticket_waiting_title</h2>
|
|
|
+ <p class="free-ticket-visually-hidden" id="freeTicketResultDescription">@Lang.free_ticket_waiting_description</p>
|
|
|
+ <img class="free-ticket-result__image"
|
|
|
+ src="~/Millions/assets/images/free-ticket-success.png"
|
|
|
+ alt="" aria-hidden="true" />
|
|
|
+ <button type="button" class="free-ticket-result__action free-ticket-result__action--dismiss-icon"
|
|
|
+ data-free-ticket-close aria-label="@Lang.millions_close"></button>
|
|
|
+ <a class="free-ticket-result__action free-ticket-result__action--use"
|
|
|
+ href="@Url.Action("BuyTicket", "Home", new { area = "Millions", freeTicketMode = "1" })"
|
|
|
+ aria-label="@Lang.free_ticket_buy_now"></a>
|
|
|
+ <button type="button" class="free-ticket-result__action free-ticket-result__action--later"
|
|
|
+ data-free-ticket-close aria-label="@Lang.millions_close"></button>
|
|
|
+ </section>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="free-ticket-error-43" id="freeTicketError43Modal" role="dialog" aria-modal="true"
|
|
|
+ aria-labelledby="freeTicketError43Title" aria-describedby="freeTicketError43Description" hidden>
|
|
|
+ <div class="free-ticket-error-43__backdrop" data-free-ticket-error-43-close></div>
|
|
|
+ <section class="free-ticket-error-43__panel">
|
|
|
+ <h2 class="free-ticket-visually-hidden" id="freeTicketError43Title">@Lang.free_ticket_error_43_title</h2>
|
|
|
+ <p class="free-ticket-visually-hidden" id="freeTicketError43Description">
|
|
|
+ @Lang.free_ticket_error_43_description
|
|
|
+ </p>
|
|
|
+ <img class="free-ticket-error-43__image"
|
|
|
+ src="~/Millions/assets/images/free-ticket-error-43.png"
|
|
|
+ alt="" aria-hidden="true" />
|
|
|
+ <button type="button" class="free-ticket-error-43__action free-ticket-error-43__action--dismiss-icon"
|
|
|
+ data-free-ticket-error-43-close aria-label="@Lang.millions_close"></button>
|
|
|
+ <a class="free-ticket-error-43__action free-ticket-error-43__action--buy"
|
|
|
+ href="@Url.Action("BuyTicket", "Home", new { area = "Millions" })"
|
|
|
+ aria-label="@Lang.millions_buy_ticket_label"></a>
|
|
|
+ <button type="button" class="free-ticket-error-43__action free-ticket-error-43__action--close"
|
|
|
+ data-free-ticket-error-43-close aria-label="@Lang.millions_close"></button>
|
|
|
+ </section>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="free-ticket-error-44" id="freeTicketError44Modal" role="dialog" aria-modal="true"
|
|
|
+ aria-labelledby="freeTicketError44Title" aria-describedby="freeTicketError44Description" hidden>
|
|
|
+ <div class="free-ticket-error-44__backdrop" data-free-ticket-error-44-close></div>
|
|
|
+ <section class="free-ticket-error-44__panel">
|
|
|
+ <h2 class="free-ticket-visually-hidden" id="freeTicketError44Title">@Lang.free_ticket_waiting_title</h2>
|
|
|
+ <p class="free-ticket-visually-hidden" id="freeTicketError44Description">
|
|
|
+ @Lang.free_ticket_waiting_description
|
|
|
+ </p>
|
|
|
+ <img class="free-ticket-error-44__image"
|
|
|
+ src="~/Millions/assets/images/free-ticket-error-44.png"
|
|
|
+ alt="" aria-hidden="true" />
|
|
|
+ <button type="button" class="free-ticket-error-44__action free-ticket-error-44__action--dismiss-icon"
|
|
|
+ data-free-ticket-error-44-close aria-label="@Lang.millions_close"></button>
|
|
|
+ <a class="free-ticket-error-44__action free-ticket-error-44__action--buy"
|
|
|
+ href="@Url.Action("BuyTicket", "Home", new { area = "Millions", freeTicketMode = "1" })"
|
|
|
+ aria-label="@Lang.free_ticket_buy_now"></a>
|
|
|
+ <button type="button" class="free-ticket-error-44__action free-ticket-error-44__action--close"
|
|
|
+ data-free-ticket-error-44-close aria-label="@Lang.millions_close"></button>
|
|
|
+ </section>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ (function () {
|
|
|
+ var popup = document.querySelector('.free-ticket-popup');
|
|
|
+ var claimButton = document.getElementById('freeTicketClaimButton');
|
|
|
+ var resultModal = document.getElementById('freeTicketResultModal');
|
|
|
+ var error43Modal = document.getElementById('freeTicketError43Modal');
|
|
|
+ var error44Modal = document.getElementById('freeTicketError44Modal');
|
|
|
+ var error43ReturnFocus = null;
|
|
|
+ var error44ReturnFocus = null;
|
|
|
+ if (!popup) return;
|
|
|
+
|
|
|
+ function showFreeTicketResult(result) {
|
|
|
+ if (!resultModal || !result || String(result.responseCode) !== '0' || !result.code) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ resultModal.hidden = false;
|
|
|
+ document.body.classList.add('free-ticket-result-open');
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function showFreeTicketError43() {
|
|
|
+ if (!error43Modal) return false;
|
|
|
+
|
|
|
+ error43ReturnFocus = document.activeElement;
|
|
|
+ error43Modal.hidden = false;
|
|
|
+ document.body.classList.add('free-ticket-result-open');
|
|
|
+ var closeButton = error43Modal.querySelector('[data-free-ticket-error-43-close]');
|
|
|
+ if (closeButton) closeButton.focus();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeFreeTicketError43() {
|
|
|
+ if (!error43Modal) return;
|
|
|
+
|
|
|
+ error43Modal.hidden = true;
|
|
|
+ document.body.classList.remove('free-ticket-result-open');
|
|
|
+ if (error43ReturnFocus && typeof error43ReturnFocus.focus === 'function') {
|
|
|
+ error43ReturnFocus.focus();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (error43Modal) {
|
|
|
+ error43Modal.querySelectorAll('[data-free-ticket-error-43-close]').forEach(function (closeButton) {
|
|
|
+ closeButton.addEventListener('click', closeFreeTicketError43);
|
|
|
+ });
|
|
|
+
|
|
|
+ error43Modal.addEventListener('keydown', function (event) {
|
|
|
+ if (event.key === 'Escape') closeFreeTicketError43();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function showFreeTicketError44(result) {
|
|
|
+ if (!error44Modal) return false;
|
|
|
+
|
|
|
+ error44ReturnFocus = document.activeElement;
|
|
|
+ error44Modal.hidden = false;
|
|
|
+ document.body.classList.add('free-ticket-result-open');
|
|
|
+ var closeButton = error44Modal.querySelector('[data-free-ticket-error-44-close]');
|
|
|
+ if (closeButton) closeButton.focus();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeFreeTicketError44() {
|
|
|
+ if (!error44Modal) return;
|
|
|
+
|
|
|
+ error44Modal.hidden = true;
|
|
|
+ document.body.classList.remove('free-ticket-result-open');
|
|
|
+ if (error44ReturnFocus && typeof error44ReturnFocus.focus === 'function') {
|
|
|
+ error44ReturnFocus.focus();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (error44Modal) {
|
|
|
+ error44Modal.querySelectorAll('[data-free-ticket-error-44-close]').forEach(function (closeButton) {
|
|
|
+ closeButton.addEventListener('click', closeFreeTicketError44);
|
|
|
+ });
|
|
|
+
|
|
|
+ error44Modal.addEventListener('keydown', function (event) {
|
|
|
+ if (event.key === 'Escape') closeFreeTicketError44();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (resultModal) {
|
|
|
+ resultModal.querySelectorAll('[data-free-ticket-close]').forEach(function (closeButton) {
|
|
|
+ closeButton.addEventListener('click', function () {
|
|
|
+ resultModal.hidden = true;
|
|
|
+ document.body.classList.remove('free-ticket-result-open');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (claimButton) {
|
|
|
+ var freeTicketMessages = {
|
|
|
+ '38': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_38)),
|
|
|
+ '39': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_39)),
|
|
|
+ '40': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_40)),
|
|
|
+ '41': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_41)),
|
|
|
+ '42': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_42)),
|
|
|
+ '43': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_43)),
|
|
|
+ '44': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_44))
|
|
|
+ };
|
|
|
+
|
|
|
+ if (@(shouldAutoCheckFreeTicket ? "true" : "false") && document.getElementById('playNowSection')) {
|
|
|
+ document.addEventListener('DOMContentLoaded', function () {
|
|
|
+ var initialVerificationToken = document.querySelector('input[name="__RequestVerificationToken"]');
|
|
|
+ $.ajax({
|
|
|
+ url: subDomain + '@Url.Action("GetFreeTicket", "Home", new { area = "Millions" })',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ __RequestVerificationToken: initialVerificationToken ? initialVerificationToken.value : '',
|
|
|
+ type: '1'
|
|
|
+ },
|
|
|
+ success: function (result) {
|
|
|
+ if (result && String(result.responseCode) === '0' && result.code) {
|
|
|
+ showFreeTicketError44(result);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ claimButton.addEventListener('click', function (event) {
|
|
|
+ event.preventDefault();
|
|
|
+ if (claimButton.dataset.loading === 'true') return;
|
|
|
+
|
|
|
+ var verificationToken = document.querySelector('input[name="__RequestVerificationToken"]');
|
|
|
+ claimButton.dataset.loading = 'true';
|
|
|
+ claimButton.classList.add('free-ticket-popup__card--loading');
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: subDomain + '@Url.Action("GetFreeTicket", "Home", new { area = "Millions" })',
|
|
|
+ type: 'POST',
|
|
|
+ data: {
|
|
|
+ __RequestVerificationToken: verificationToken ? verificationToken.value : ''
|
|
|
+ },
|
|
|
+ success: function (result) {
|
|
|
+ if (showFreeTicketResult(result)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var responseCode = result && result.responseCode
|
|
|
+ ? String(result.responseCode)
|
|
|
+ : '';
|
|
|
+ if (responseCode === '43' && showFreeTicketError43()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (responseCode === '44' && showFreeTicketError44(result)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var responseMessage = freeTicketMessages[responseCode]
|
|
|
+ || (result && result.responseMessage)
|
|
|
+ || 'Unable to get free ticket.';
|
|
|
+
|
|
|
+ window.alert(responseMessage);
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ window.alert('Unable to get free ticket.');
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
+ claimButton.dataset.loading = 'false';
|
|
|
+ claimButton.classList.remove('free-ticket-popup__card--loading');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function alignFreeTicketIcon() {
|
|
|
+ var millionsFrame = document.querySelector('.main-content, .main-container');
|
|
|
+ var playNowSection = document.getElementById('playNowSection');
|
|
|
+ if (!millionsFrame) {
|
|
|
+ popup.style.left = '';
|
|
|
+ popup.style.right = '10px';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var frameRect = millionsFrame.getBoundingClientRect();
|
|
|
+ var popupWidth = popup.getBoundingClientRect().width;
|
|
|
+ popup.style.left = Math.max(8, frameRect.right - popupWidth - 15) + 'px';
|
|
|
+ popup.style.right = 'auto';
|
|
|
+
|
|
|
+ if (playNowSection) {
|
|
|
+ var playRect = playNowSection.getBoundingClientRect();
|
|
|
+ popup.style.top = (playRect.top - 7) + 'px';
|
|
|
+ popup.style.bottom = 'auto';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ alignFreeTicketIcon();
|
|
|
+ window.addEventListener('resize', alignFreeTicketIcon, { passive: true });
|
|
|
+ window.addEventListener('scroll', alignFreeTicketIcon, { passive: true, capture: true });
|
|
|
+ })();
|
|
|
+</script>
|
student
