@everymatrix/lottery-game-page 1.87.28 → 1.87.29

package/dist/esm/general-multi-select_16.entry.js

@@ -7249,6 +7249,35 @@ function getTimezoneOffsetInMilliseconds(date) {
   return date.getTime() - utcDate.getTime();
 }
 
+/**
+ * Days in 1 week.
+ *
+ * @name daysInWeek
+ * @constant
+ * @type {number}
+ * @default
+ */
+
+/**
+ * Milliseconds in 1 minute
+ *
+ * @name millisecondsInMinute
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInMinute = 60000;
+
+/**
+ * Milliseconds in 1 hour
+ *
+ * @name millisecondsInHour
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInHour = 3600000;
+
 /**
  * @name isDate
  * @category Common Helpers
@@ -7326,6 +7355,77 @@ function isValid(dirtyDate) {
   return !isNaN(Number(date));
 }
 
+/**
+ * @name differenceInMilliseconds
+ * @category Millisecond Helpers
+ * @summary Get the number of milliseconds between the given dates.
+ *
+ * @description
+ * Get the number of milliseconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of milliseconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many milliseconds are between
+ * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+ * const result = differenceInMilliseconds(
+ *   new Date(2014, 6, 2, 12, 30, 21, 700),
+ *   new Date(2014, 6, 2, 12, 30, 20, 600)
+ * )
+ * //=> 1100
+ */
+function differenceInMilliseconds(dateLeft, dateRight) {
+  requiredArgs(2, arguments);
+  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();
+}
+
+var roundingMap = {
+  ceil: Math.ceil,
+  round: Math.round,
+  floor: Math.floor,
+  trunc: function trunc(value) {
+    return value < 0 ? Math.ceil(value) : Math.floor(value);
+  } // Math.trunc is not supported by IE
+};
+
+var defaultRoundingMethod = 'trunc';
+function getRoundingMethod(method) {
+  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
+}
+
+/**
+ * @name differenceInSeconds
+ * @category Second Helpers
+ * @summary Get the number of seconds between the given dates.
+ *
+ * @description
+ * Get the number of seconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @param {Object} [options] - an object with options.
+ * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)
+ * @returns {Number} the number of seconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many seconds are between
+ * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?
+ * const result = differenceInSeconds(
+ *   new Date(2014, 6, 2, 12, 30, 20, 0),
+ *   new Date(2014, 6, 2, 12, 30, 7, 999)
+ * )
+ * //=> 12
+ */
+function differenceInSeconds(dateLeft, dateRight, options) {
+  requiredArgs(2, arguments);
+  var diff = differenceInMilliseconds(dateLeft, dateRight) / 1000;
+  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
+}
+
 /**
  * @name subMilliseconds
  * @category Millisecond Helpers
@@ -9320,6 +9420,257 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
+/**
+ * @name isBefore
+ * @category Common Helpers
+ * @summary Is the first date before the second one?
+ *
+ * @description
+ * Is the first date before the second one?
+ *
+ * @param {Date|Number} date - the date that should be before the other one to return true
+ * @param {Date|Number} dateToCompare - the date to compare with
+ * @returns {Boolean} the first date is before the second date
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Is 10 July 1989 before 11 February 1987?
+ * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> false
+ */
+function isBefore(dirtyDate, dirtyDateToCompare) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var dateToCompare = toDate(dirtyDateToCompare);
+  return date.getTime() < dateToCompare.getTime();
+}
+
+/**
+ * @name parseISO
+ * @category Common Helpers
+ * @summary Parse ISO string
+ *
+ * @description
+ * Parse the given string in ISO 8601 format and return an instance of Date.
+ *
+ * Function accepts complete ISO 8601 formats as well as partial implementations.
+ * ISO 8601: http://en.wikipedia.org/wiki/ISO_8601
+ *
+ * If the argument isn't a string, the function cannot parse the string or
+ * the values are invalid, it returns Invalid Date.
+ *
+ * @param {String} argument - the value to convert
+ * @param {Object} [options] - an object with options.
+ * @param {0|1|2} [options.additionalDigits=2] - the additional number of digits in the extended year format
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ * @throws {RangeError} `options.additionalDigits` must be 0, 1 or 2
+ *
+ * @example
+ * // Convert string '2014-02-11T11:30:30' to date:
+ * const result = parseISO('2014-02-11T11:30:30')
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert string '+02014101' to date,
+ * // if the additional number of digits in the extended year format is 1:
+ * const result = parseISO('+02014101', { additionalDigits: 1 })
+ * //=> Fri Apr 11 2014 00:00:00
+ */
+function parseISO(argument, options) {
+  var _options$additionalDi;
+  requiredArgs(1, arguments);
+  var additionalDigits = toInteger((_options$additionalDi = options === null || options === void 0 ? void 0 : options.additionalDigits) !== null && _options$additionalDi !== void 0 ? _options$additionalDi : 2);
+  if (additionalDigits !== 2 && additionalDigits !== 1 && additionalDigits !== 0) {
+    throw new RangeError('additionalDigits must be 0, 1 or 2');
+  }
+  if (!(typeof argument === 'string' || Object.prototype.toString.call(argument) === '[object String]')) {
+    return new Date(NaN);
+  }
+  var dateStrings = splitDateString(argument);
+  var date;
+  if (dateStrings.date) {
+    var parseYearResult = parseYear(dateStrings.date, additionalDigits);
+    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
+  }
+  if (!date || isNaN(date.getTime())) {
+    return new Date(NaN);
+  }
+  var timestamp = date.getTime();
+  var time = 0;
+  var offset;
+  if (dateStrings.time) {
+    time = parseTime(dateStrings.time);
+    if (isNaN(time)) {
+      return new Date(NaN);
+    }
+  }
+  if (dateStrings.timezone) {
+    offset = parseTimezone(dateStrings.timezone);
+    if (isNaN(offset)) {
+      return new Date(NaN);
+    }
+  } else {
+    var dirtyDate = new Date(timestamp + time);
+    // js parsed string assuming it's in UTC timezone
+    // but we need it to be parsed in our timezone
+    // so we use utc values to build date in our timezone.
+    // Year values from 0 to 99 map to the years 1900 to 1999
+    // so set year explicitly with setFullYear.
+    var result = new Date(0);
+    result.setFullYear(dirtyDate.getUTCFullYear(), dirtyDate.getUTCMonth(), dirtyDate.getUTCDate());
+    result.setHours(dirtyDate.getUTCHours(), dirtyDate.getUTCMinutes(), dirtyDate.getUTCSeconds(), dirtyDate.getUTCMilliseconds());
+    return result;
+  }
+  return new Date(timestamp + time + offset);
+}
+var patterns = {
+  dateTimeDelimiter: /[T ]/,
+  timeZoneDelimiter: /[Z ]/i,
+  timezone: /([Z+-].*)$/
+};
+var dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
+var timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
+var timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+function splitDateString(dateString) {
+  var dateStrings = {};
+  var array = dateString.split(patterns.dateTimeDelimiter);
+  var timeString;
+
+  // The regex match should only return at maximum two array elements.
+  // [date], [time], or [date, time].
+  if (array.length > 2) {
+    return dateStrings;
+  }
+  if (/:/.test(array[0])) {
+    timeString = array[0];
+  } else {
+    dateStrings.date = array[0];
+    timeString = array[1];
+    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
+      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
+      timeString = dateString.substr(dateStrings.date.length, dateString.length);
+    }
+  }
+  if (timeString) {
+    var token = patterns.timezone.exec(timeString);
+    if (token) {
+      dateStrings.time = timeString.replace(token[1], '');
+      dateStrings.timezone = token[1];
+    } else {
+      dateStrings.time = timeString;
+    }
+  }
+  return dateStrings;
+}
+function parseYear(dateString, additionalDigits) {
+  var regex = new RegExp('^(?:(\\d{4}|[+-]\\d{' + (4 + additionalDigits) + '})|(\\d{2}|[+-]\\d{' + (2 + additionalDigits) + '})$)');
+  var captures = dateString.match(regex);
+  // Invalid ISO-formatted year
+  if (!captures) return {
+    year: NaN,
+    restDateString: ''
+  };
+  var year = captures[1] ? parseInt(captures[1]) : null;
+  var century = captures[2] ? parseInt(captures[2]) : null;
+
+  // either year or century is null, not both
+  return {
+    year: century === null ? year : century * 100,
+    restDateString: dateString.slice((captures[1] || captures[2]).length)
+  };
+}
+function parseDate(dateString, year) {
+  // Invalid ISO-formatted year
+  if (year === null) return new Date(NaN);
+  var captures = dateString.match(dateRegex);
+  // Invalid ISO-formatted string
+  if (!captures) return new Date(NaN);
+  var isWeekDate = !!captures[4];
+  var dayOfYear = parseDateUnit(captures[1]);
+  var month = parseDateUnit(captures[2]) - 1;
+  var day = parseDateUnit(captures[3]);
+  var week = parseDateUnit(captures[4]);
+  var dayOfWeek = parseDateUnit(captures[5]) - 1;
+  if (isWeekDate) {
+    if (!validateWeekDate(year, week, dayOfWeek)) {
+      return new Date(NaN);
+    }
+    return dayOfISOWeekYear(year, week, dayOfWeek);
+  } else {
+    var date = new Date(0);
+    if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
+      return new Date(NaN);
+    }
+    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+    return date;
+  }
+}
+function parseDateUnit(value) {
+  return value ? parseInt(value) : 1;
+}
+function parseTime(timeString) {
+  var captures = timeString.match(timeRegex);
+  if (!captures) return NaN; // Invalid ISO-formatted time
+
+  var hours = parseTimeUnit(captures[1]);
+  var minutes = parseTimeUnit(captures[2]);
+  var seconds = parseTimeUnit(captures[3]);
+  if (!validateTime(hours, minutes, seconds)) {
+    return NaN;
+  }
+  return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1000;
+}
+function parseTimeUnit(value) {
+  return value && parseFloat(value.replace(',', '.')) || 0;
+}
+function parseTimezone(timezoneString) {
+  if (timezoneString === 'Z') return 0;
+  var captures = timezoneString.match(timezoneRegex);
+  if (!captures) return 0;
+  var sign = captures[1] === '+' ? -1 : 1;
+  var hours = parseInt(captures[2]);
+  var minutes = captures[3] && parseInt(captures[3]) || 0;
+  if (!validateTimezone(hours, minutes)) {
+    return NaN;
+  }
+  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);
+}
+function dayOfISOWeekYear(isoWeekYear, week, day) {
+  var date = new Date(0);
+  date.setUTCFullYear(isoWeekYear, 0, 4);
+  var fourthOfJanuaryDay = date.getUTCDay() || 7;
+  var diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
+  date.setUTCDate(date.getUTCDate() + diff);
+  return date;
+}
+
+// Validation functions
+
+// February is null to handle the leap year (using ||)
+var daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function isLeapYearIndex(year) {
+  return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
+}
+function validateDate(year, month, date) {
+  return month >= 0 && month <= 11 && date >= 1 && date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
+}
+function validateDayOfYearDate(year, dayOfYear) {
+  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
+}
+function validateWeekDate(_year, week, day) {
+  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+}
+function validateTime(hours, minutes, seconds) {
+  if (hours === 24) {
+    return minutes === 0 && seconds === 0;
+  }
+  return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
+}
+function validateTimezone(_hours, minutes) {
+  return minutes >= 0 && minutes <= 59;
+}
+
 const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;width:max-content;background:var(--emw--color-primary, #009993);color:var(--emw--color-typography-inverse, #fff);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:var(--emw--color-primary, #009993);color:var(--emw--color-typography-inverse, #fff)}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;width:max-content;border:1px solid var(--emw--color-primary, #009993);background:var(--emw--color-typography-inverse, #fff);color:var(--emw--color-typography, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:var(--emw--color-primary, #009993);color:var(--emw--color-typography-inverse, #fff)}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .filterKey,.FilterModalBody .filterKey,.FilterModalFooter .filterKey{color:var(--emw--color-primary, #009993);text-align:left;font-size:16px}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:var(--emw--color-primary, #009993);text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:var(--emw--button-border-radius, 4px);background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-primary-variant, #004d4a);width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:var(--emw--color-primary, #009993)}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:var(--emw--button-border-radius, 4px);padding:8px 60px;width:max-content;margin:5px;background:var(--emw--color-primary, #009993);color:var(--emw--color-typography-inverse, #fff);font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:var(--emw--color-primary, #009993);color:var(--emw--color-typography-inverse, #fff)}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}.ticketFilterItem{margin:12px 0}.general-multi-select-container{width:var(--vaadin-field-default-width, 16em)}.general-multi-select-container vaadin-text-field{width:100%}";
 const HelperFiltersStyle0 = helperFiltersCss;
 
@@ -15327,10 +15678,12 @@ const TRANSLATIONS$4 = {
         error: 'Error',
         backButton: 'Back',
         lobbyButton: 'Lobby',
-        nextDraw: 'Next draw in: ',
+        nextDrawIn: 'Next draw in: ',
+        startIn: 'Sales Start in:',
         buy: 'Buy tickets',
         viewLatest: 'View latest results',
         submitSuccess: 'Submit successfully!',
+        ticketFailed: 'Failed to submit tickets.',
         orderSummaryTitle: 'Order Summary',
         orderSummaryTickets: 'Ticket',
         orderSummaryTotal: 'Total',
@@ -15343,7 +15696,7 @@ const TRANSLATIONS$4 = {
         error: 'Eroare',
         backButton: 'Inapoi',
         lobbyButton: 'Lobby',
-        nextDraw: 'Urmatoarea extragere:',
+        nextDrawIn: 'Urmatoarea extragere:',
         buy: 'Cumpara bilet',
         viewLatest: 'Ultimile extrageri',
         submitSuccess: 'Submit successfully!',
@@ -15358,7 +15711,7 @@ const TRANSLATIONS$4 = {
         error: 'Error',
         backButton: 'Back',
         lobbyButton: 'Lobby',
-        nextDraw: 'Next draw in: ',
+        nextDrawIn: 'Next draw in: ',
         buy: 'Buy tickets',
         viewLatest: 'View latest results',
         submitSuccess: 'Submit successfully!',
@@ -15373,7 +15726,7 @@ const TRANSLATIONS$4 = {
         error: 'خطأ',
         backButton: 'خلف',
         lobbyButton: 'ردهة',
-        nextDraw: 'السحب التالي:',
+        nextDrawIn: 'السحب التالي:',
         buy: 'اشتري تذاكر',
         viewLatest: 'عرض أحدث النتائج',
         submitSuccess: 'Submit successfully!',
@@ -15388,7 +15741,7 @@ const TRANSLATIONS$4 = {
         error: 'Greška',
         backButton: 'Nazad',
         lobbyButton: 'Lobby',
-        nextDraw: 'Sljedeće izvlačenje za: ',
+        nextDrawIn: 'Sljedeće izvlačenje za: ',
         buy: 'Uplati listić',
         viewLatest: 'Pogledajte najnovije rezultate',
         submitSuccess: 'Submit successfully!',
@@ -15422,12 +15775,17 @@ const getTranslations$4 = (url) => {
     });
 };
 
-/**
- * @name isMobile
- * @description A method that returns if the browser used to access the app is from a mobile device or not
- * @param {String} userAgent window.navigator.userAgent
- * @returns {Boolean} true or false
- */
+var DrawStatus;
+(function (DrawStatus) {
+    DrawStatus["OPEN"] = "OPEN";
+})(DrawStatus || (DrawStatus = {}));
+var TicketState;
+(function (TicketState) {
+    TicketState["Settled"] = "Settled";
+    TicketState["Purchased"] = "Purchased";
+    TicketState["Canceled"] = "Canceled";
+})(TicketState || (TicketState = {}));
+
 const generateUUID$1 = () => {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
@@ -15463,6 +15821,62 @@ const showNotification = ({ message, theme = 'success' }) => {
         theme
     });
 };
+function checkDrawAvailable(currentDraw = {}) {
+    if (currentDraw && currentDraw.id && currentDraw.status === DrawStatus.OPEN) {
+        return true;
+    }
+    return false;
+}
+function formatCountdown(stopTime, _now) {
+    if (!stopTime)
+        return;
+    const endTime = typeof stopTime === 'string' ? parseISO(stopTime) : stopTime;
+    const now = _now && new Date();
+    let totalSeconds = differenceInSeconds(endTime, now);
+    if (totalSeconds < 0)
+        return '0D 00H 00M 00S';
+    const days = Math.floor(totalSeconds / 86400);
+    totalSeconds %= 86400;
+    const hours = Math.floor(totalSeconds / 3600);
+    totalSeconds %= 3600;
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${days}D ${hours.toString().padStart(2, '0')}H ${minutes.toString().padStart(2, '0')}M ${seconds
+        .toString()
+        .padStart(2, '0')}S`;
+}
+
+const TICKET_INVALID_TOKEN = 'TICKET_INVALID_TOKEN';
+const doSubmitTicket = ({ body, sessionId, url }) => {
+    const options = {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            Authorization: `Bearer ${sessionId}`,
+            'X-Idempotency-Key': generateUUID$1()
+        },
+        body: JSON.stringify(body)
+    };
+    return fetch(url, options).then((res) => {
+        if (res.status === 401) {
+            throw new Error(TICKET_INVALID_TOKEN);
+        }
+        if (res.status > 300) {
+            throw new Error(res.statusText);
+        }
+        return res.json().then((data) => {
+            if (checkTicketDetailHasError(data.tickets))
+                throw new Error(res.statusText);
+            return data;
+        });
+    });
+};
+function checkTicketDetailHasError(tickets) {
+    if (!tickets || !tickets.length)
+        return true;
+    return tickets.some((i) => i.state !== TicketState.Purchased);
+}
 
 const lotteryGamePageCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  display: block;\n  font-family: \"Roboto\", sans-serif;\n}\n\n.GamePage {\n  background-color: var(--emw--color-background, #fff);\n}\n.GamePage .GridBanner {\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  background-repeat: no-repeat;\n  background-position: center;\n  color: var(--emw--color-typography, #000);\n  padding: 0 20px 10px;\n  height: 220px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.GamePage .GridBanner .BannerButtonsWrapper {\n  display: flex;\n  justify-content: space-between;\n  padding-top: 16px;\n}\n.GamePage .GridBanner .BannerButtonsWrapper .BannerBackButton,\n.GamePage .GridBanner .BannerButtonsWrapper .BannerLobbyButton {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  border-radius: var(--emw--button-border-radius, 4px);\n  padding: 7px 15px;\n  font-size: 12px;\n  text-transform: uppercase;\n  width: 80px;\n  cursor: pointer;\n}\n.GamePage .GridBanner .GridBannerArea {\n  padding-top: 30px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.GamePage .TotalWinnings {\n  color: var(--emw--color-typography, #000);\n  font-size: 18px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  text-transform: uppercase;\n}\n.GamePage .TotalWinnings span {\n  font-size: 18px;\n  font-weight: 700;\n}\n.GamePage .NextDraw {\n  color: var(--emw--color-primary, #009993);\n  font-size: 24px;\n  font-weight: 600;\n  margin: 0 auto;\n  text-align: center;\n  text-transform: uppercase;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  gap: 4px;\n}\n.GamePage .NextDraw .BannerText {\n  font-weight: 400;\n  font-size: 18px;\n  text-transform: uppercase;\n  padding: 0;\n  margin: 15px 0 0 0;\n}\n.GamePage .NextDraw .BannerCountdown {\n  font-size: 22px;\n  color: var(--emw--color-primary, #009993);\n  display: flex;\n  gap: 20px;\n}\n.GamePage .Tabs {\n  display: flex;\n  justify-content: center;\n  gap: 10px;\n}\n.GamePage .Tabs .TabButton {\n  border-radius: var(--emw--button-border-radius, 4px);\n  cursor: pointer;\n  padding: 8px 0;\n  width: 50%;\n  max-width: 200px;\n  border: 1px solid var(--emw--color-primary, #009993);\n  background: var(--emw--color-primary, #009993);\n  color: var(--emw--color-background-secondary, #f5f5f5);\n  font-size: 12px;\n  transition: all 0.2s linear;\n  text-transform: uppercase;\n  text-align: center;\n  letter-spacing: 0;\n}\n.GamePage .Tabs .TabButton.Active {\n  color: var(--emw--color-primary, #009993);\n  background: var(--emw--color-gray-50, #f5f5f5);\n  border: 1px solid var(--emw--color-gray-50, #f5f5f5);\n}\n\n.LastDrawResultsTitle {\n  color: var(--emw--color-primary, #009993);\n  padding: 25px 0 10px 0;\n  text-align: center;\n  border-radius: var(--emw--button-border-radius, 4px);\n  text-transform: uppercase;\n  font-size: 16px;\n  font-weight: 600;\n  margin: 0;\n}\n\n.NextDrawWrapper {\n  padding: 10px 15px;\n  background: var(--emw--color-background, #fff);\n}\n.NextDrawWrapper .BannerText {\n  font-size: 16px;\n  font-weight: 700;\n  text-align: center;\n  color: var(--emw--color-typography, #000);\n}\n.NextDrawWrapper .BannerCountdown {\n  font-size: 22px;\n  display: flex;\n  gap: 8px;\n  color: var(--emw--color-primary, #009993);\n  font-weight: bolder;\n  justify-content: center;\n}\n\n.GamePageContent {\n  max-width: 1200px;\n  margin: 0 auto;\n  background: var(--emw--color-background, #fff);\n  container-type: inline-size;\n  container-name: gamePage;\n}\n\n.TicketsWrapper {\n  min-height: 300px;\n}\n\n@container gamePage (min-width: 1200px) {\n  .GamePageContent .TicketsWrapper {\n    float: left;\n    width: 49%;\n  }\n  .GamePageContent .GameDetails {\n    float: right;\n    width: 49%;\n  }\n  .GamePageContent .OrderSummary {\n    float: right;\n    width: 49%;\n  }\n}\n.GameDetails {\n  padding-bottom: 10px;\n  margin-bottom: 20px;\n}\n\n.OrderSummary {\n  min-width: 200px;\n  border-radius: var(--emw--button-border-radius, 4px);\n  color: var(--emw--color-typography, #000);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-top: 20px;\n  background: var(--emw--color-background, #fff);\n}\n.OrderSummary .OrderSummaryTitle {\n  font-size: 16px;\n  color: var(--emw--color-primary, #009993);\n  text-transform: uppercase;\n  text-align: center;\n}\n.OrderSummary .OrderTicketInfo {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-typography, #000);\n}\n.OrderSummary .OrderTicketInfo .Multiplier {\n  margin: 0 6px;\n}\n.OrderSummary .Ticket {\n  display: inline-block;\n  color: var(--emw--color-typography, #000);\n  font-size: 14px;\n  height: 50px;\n  line-height: 50px;\n  margin-left: 15px;\n  margin-right: 30px;\n}\n.OrderSummary .Ticket span {\n  text-align: right;\n}\n.OrderSummary hr {\n  border: none;\n  border-top: 1px double var(--emw--color-gray-100, #e6e6e6);\n  color: var(--emw--color-gray-100, #e6e6e6);\n  width: 100%;\n}\n.OrderSummary .Total {\n  display: inline-block;\n  color: var(--emw--color-typography, #000);\n  font-size: 14px;\n  height: 50px;\n  line-height: 50px;\n  margin-left: 15px;\n}\n.OrderSummary .Total span {\n  text-align: right;\n}\n\n.ButtonWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ButtonWrapper .Button {\n  cursor: pointer;\n  border-radius: var(--emw--button-border-radius, 4px);\n  padding: 8px 60px;\n  width: max-content;\n  margin: 5px;\n  font-size: 12px;\n  transition: all 0.2s linear;\n  text-transform: uppercase;\n  text-align: center;\n  letter-spacing: 0;\n  background: var(--emw--color-primary, #009993);\n  color: var(--emw--color-background-secondary, #f5f5f5);\n}\n.ButtonWrapper .Button:hover {\n  background: var(--emw--color-secondary, #00aba4);\n}\n.ButtonWrapper .Button.ButtonDisabled {\n  pointer-events: none;\n  background: var(--emw--color-background-tertiary, #ccc);\n}\n.ButtonWrapper .submitError {\n  margin-top: 10px;\n  color: var(--emw--color-error, #ff3d00);\n}\n.ButtonWrapper .submitWrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.SubmitModalSuccess {\n  text-align: center;\n  font-size: 18px;\n  padding: 20px;\n}\n\n.DeleteTicketModalWrapper {\n  padding: 20px;\n  text-align: center;\n}\n.DeleteTicketModalWrapper .DeleteTicketModalTitle {\n  font-size: 16px;\n  color: var(--emw--color-primary, #009993);\n  font-weight: 400;\n  text-transform: uppercase;\n  margin: 20px 0 40px;\n}\n.DeleteTicketModalWrapper .DeleteTicketModalText {\n  font-size: 14px;\n  color: var(--emw--color-typography, #000);\n  line-height: 22px;\n  margin-bottom: 40px;\n}\n.DeleteTicketModalWrapper .DeleteTicketModalButtons {\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n}\n.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm {\n  cursor: pointer;\n  border-radius: 4px;\n  padding: 8px 25px;\n  width: max-content;\n  margin: 5px;\n  color: var(--emw--color-typography, #000);\n  font-size: 12px;\n  transition: all 0.2s linear;\n  text-transform: uppercase;\n  text-align: center;\n  letter-spacing: 0;\n  background: var(--emw--color-error, #ff3d00);\n  border: 1px solid var(--emw--color-error, #ff3d00);\n  color: var(--emw--color-background-secondary, #f5f5f5);\n}\n.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm:hover {\n  background: var(--emw--color-tertiary, #ff6536);\n  border: 1px solid var(--emw--color-error, #ff3d00);\n}\n.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel {\n  cursor: pointer;\n  width: max-content;\n  border-radius: var(--emw--button-border-radius, 4px);\n  padding: 10px 25px;\n  margin: 5px;\n  border: 1px solid var(--emw--color-secondary, #00aba4);\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  font-size: 12px;\n  transition: all 0.2s linear;\n  text-transform: uppercase;\n  text-align: center;\n  letter-spacing: 0;\n}\n.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel:hover {\n  background: var(--emw--color-gray-50, #f5f5f5);\n}\n\n.GamePage {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.GamePage .GamePageContentWrapper,\n.GamePage .HistoryContentWrapper {\n  padding: 15px;\n  flex: 1;\n  background: var(--emw--color-background, #fff);\n}\n\n.HistoryContentWrapper::after,\n.GamePageContent::after {\n  content: \"\";\n  display: block;\n  clear: both;\n}\n\n.GamePageWrap .noActiveDraw {\n  margin: 10% auto 0px;\n  padding: 24px;\n  border: 1px solid var(--emw--color-primary, #009993);\n  border-radius: 4px;\n  width: 280px;\n  color: var(--emw--color-primary, #009993);\n}\n\n.fetching {\n  margin: 40px auto;\n}";
 const LotteryGamePageStyle0 = lotteryGamePageCss;
@@ -15505,10 +15919,6 @@ const LotteryGamePage = class {
         this.hasErrors = false;
         this.totalAmount = 0;
         this.successVisible = false;
-        this.daysRemaining = undefined;
-        this.hoursRemaining = undefined;
-        this.minutesRemaining = undefined;
-        this.secondsRemaining = undefined;
         this.nextDate = undefined;
         this.isLoggedIn = false;
         this.loginModalVisible = false;
@@ -15524,6 +15934,8 @@ const LotteryGamePage = class {
         this.subscriptionError = '';
         this.isSubscribed = false;
         this.isFetchingGame = false;
+        this.drawSubmitAvailable = false;
+        this.formattedTime = undefined;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -15582,23 +15994,8 @@ const LotteryGamePage = class {
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
     }
-    countdownLogic(date) {
-        const setTime = () => {
-            this.daysRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60 * 24));
-            this.hoursRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60) - this.daysRemaining * 24);
-            this.minutesRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60) -
-                this.daysRemaining * 24 * 60 -
-                this.hoursRemaining * 60);
-            this.secondsRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / 1000 -
-                this.daysRemaining * 24 * 60 * 60 -
-                this.hoursRemaining * 60 * 60 -
-                this.minutesRemaining * 60);
-        };
-        setTime();
-        this.interval = setInterval(setTime, 1000);
-    }
     disconnectedCallback() {
-        clearInterval(this.interval);
+        this.interval && clearInterval(this.interval);
     }
     getGameDetails() {
         let url = new URL(`${this.endpoint}/games/${this.gameId}`);
@@ -15612,13 +16009,32 @@ const LotteryGamePage = class {
             return res.json();
         })
             .then((data) => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e;
             this.gameData = data;
             this.basicStake = this.gameData.rules.stakes.length ? Number(this.gameData.rules.stakes[0].value) : 0;
             this.basicLine = ((_a = this.gameData.rules.betTypes) === null || _a === void 0 ? void 0 : _a.length) ? this.gameData.rules.betTypes[0].boardsAllowed[0] : 1;
             this.basicBetType = this.gameData.rules.betTypes[0];
-            this.nextDate = (_b = this.gameData.currentDraw) === null || _b === void 0 ? void 0 : _b.date;
-            this.nextDate && this.countdownLogic(this.nextDate);
+            if (this.gameData && checkDrawAvailable((_b = this.gameData) === null || _b === void 0 ? void 0 : _b.currentDraw)) {
+                this.nextDate = (_c = this.gameData.currentDraw) === null || _c === void 0 ? void 0 : _c.date;
+                const start = (_e = (_d = this.gameData) === null || _d === void 0 ? void 0 : _d.currentDraw) === null || _e === void 0 ? void 0 : _e.wagerStartTime;
+                const updateTime = () => {
+                    var _a;
+                    const now = new Date();
+                    if (start && isBefore(now, parseISO(start))) {
+                        this.drawSubmitAvailable = false;
+                        this.formattedTime = { start: formatCountdown(start, now) };
+                    }
+                    else {
+                        this.drawSubmitAvailable = true;
+                        this.formattedTime = { nextIn: formatCountdown((_a = data === null || data === void 0 ? void 0 : data.currentDraw) === null || _a === void 0 ? void 0 : _a.date, now) };
+                    }
+                    if (this.formattedTime.nextIn === '0D 00H 00M 00S') {
+                        clearInterval(this.interval);
+                    }
+                };
+                updateTime();
+                this.interval = setInterval(updateTime, 1000);
+            }
             this.secondarySelectionAllowed = this.gameData.rules.secondarySelectionAllowed === 'INPUT' ? true : false;
             this.quickPick = this.gameData.rules.quickPickAvailable;
             this.isSubscription = this.gameData.rules.wagerTypes && this.gameData.rules.wagerTypes.includes('Subscription');
@@ -15855,6 +16271,8 @@ const LotteryGamePage = class {
         return body;
     }
     handleSubmitTickets() {
+        if (!this.drawSubmitAvailable)
+            return;
         if (this.isSubscription && this.isSubscribed) {
             this.submitTickets();
             this.submitSubscriptionTickets();
@@ -15913,41 +16331,20 @@ const LotteryGamePage = class {
         // @TODO Body TS type
         const body = this.buildTicketParam();
         if (body) {
-            const uuid = generateUUID$1();
-            // @TODO Options TS type
-            let options = {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Accept: 'application/json',
-                    Authorization: `Bearer ${this.sessionId}`,
-                    'X-Idempotency-Key': uuid
-                },
-                body: JSON.stringify(body)
-            };
             this.isLoading = true;
-            fetch(url.href, options)
-                .then((res) => {
-                if (res.status > 300) {
-                    this.apiError = res.statusText + '.';
-                    this.showApiError = true;
-                    setTimeout(() => {
-                        this.showApiError = false;
-                    }, 3000);
-                    throw new Error(res.statusText);
-                }
-                return res.json();
-            })
+            doSubmitTicket({ body, sessionId: this.sessionId, url: url.href })
                 .then(() => {
-                // this.successVisible = true;
                 showNotification({ message: 'Ticket submitted successfully.', theme: 'success' });
                 this.resetAllTicketSelection.emit();
                 const event = new CustomEvent('resetAllTicketSelection', { bubbles: true, composed: true });
                 document.dispatchEvent(event);
             })
-                .catch((err) => {
-                console.log('Error ', err);
-                showNotification({ message: 'Failed to purchase the ticket. Please try again.', theme: 'error' });
+                .catch((res) => {
+                if (res.message === TICKET_INVALID_TOKEN) {
+                    showNotification({ message: TICKET_INVALID_TOKEN, theme: 'error' });
+                    return;
+                }
+                showNotification({ message: translate$4('ticketFailed', this.language), theme: 'error' });
             })
                 .finally(() => {
                 this.isLoading = false;
@@ -15964,7 +16361,7 @@ const LotteryGamePage = class {
         this.goToLobbyEvent.emit();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         if (this.hasErrors) {
             return (h("div", { class: "GamePage" }, h("div", { class: "Title" }, translate$4('error', this.language))));
         }
@@ -15975,14 +16372,14 @@ const LotteryGamePage = class {
                 'background-size': 'contain',
                 'background-repeat': 'no-repeat',
                 'background-position': 'center'
-            } }, h("div", { class: "BannerButtonsWrapper" }), h("div", { class: "Tabs" }, h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => (this.tabIndex = 0) }, translate$4('buy', this.language)), h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => (this.tabIndex = 1) }, translate$4('viewLatest', this.language)))), this.isFetchingGame ? (h("div", { class: "fetching" }, "Loading...")) : (h("div", { class: "GamePageWrap" }, this.nextDate ? (h("div", null, h("div", { class: "NextDrawWrapper" }, h("div", { class: "NextDraw" }, h("p", { class: "BannerText" }, translate$4('nextDraw', this.language)), h("div", { class: "BannerCountdown" }, h("span", { class: "CountdownDays" }, this.daysRemaining, "D"), h("span", { class: "CountdownHours" }, this.hoursRemaining, "H"), h("span", { class: "CountdownMinutes" }, this.minutesRemaining, "M"), h("span", { class: "CountdownSeconds" }, this.secondsRemaining, "S")))), this.tabIndex == 0 && (h("div", { class: "GamePageContentWrapper" }, h("div", { class: "GamePageContent" }, h("div", { class: "GameDetails" }, h("lottery-game-details", { "low-number": (_b = (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.boards[0]) === null || _b === void 0 ? void 0 : _b.lowNumber, "high-number": (_d = (_c = this.gameData.rules) === null || _c === void 0 ? void 0 : _c.boards[0]) === null || _d === void 0 ? void 0 : _d.highNumber, "minimum-allowed": (_f = (_e = this.gameData.rules) === null || _e === void 0 ? void 0 : _e.boards[0]) === null || _f === void 0 ? void 0 : _f.minimumAllowed, "maxinum-allowed": (_h = (_g = this.gameData.rules) === null || _g === void 0 ? void 0 : _g.boards[0]) === null || _h === void 0 ? void 0 : _h.maxinumAllowed, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, "translation-url": this.translationData })), h("div", { class: "TicketsWrapper" }, this.mainTickets.map((item) => {
+            } }, h("div", { class: "BannerButtonsWrapper" }), h("div", { class: "Tabs" }, h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => (this.tabIndex = 0) }, translate$4('buy', this.language)), h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => (this.tabIndex = 1) }, translate$4('viewLatest', this.language)))), this.isFetchingGame ? (h("div", { class: "fetching" }, "Loading...")) : (h("div", { class: "GamePageWrap" }, this.nextDate ? (h("div", null, h("div", { class: "NextDrawWrapper" }, h("div", { class: "NextDraw" }, ((_a = this.formattedTime) === null || _a === void 0 ? void 0 : _a.start) ? (h("p", { class: "BannerText" }, translate$4('startIn', this.language))) : (h("p", { class: "BannerText" }, translate$4('nextDrawIn', this.language))), h("div", { class: "BannerCountdown" }, ((_b = this.formattedTime) === null || _b === void 0 ? void 0 : _b.start) || ((_c = this.formattedTime) === null || _c === void 0 ? void 0 : _c.nextIn)))), this.tabIndex == 0 && (h("div", { class: "GamePageContentWrapper" }, h("div", { class: "GamePageContent" }, h("div", { class: "GameDetails" }, h("lottery-game-details", { "low-number": (_e = (_d = this.gameData.rules) === null || _d === void 0 ? void 0 : _d.boards[0]) === null || _e === void 0 ? void 0 : _e.lowNumber, "high-number": (_g = (_f = this.gameData.rules) === null || _f === void 0 ? void 0 : _f.boards[0]) === null || _g === void 0 ? void 0 : _g.highNumber, "minimum-allowed": (_j = (_h = this.gameData.rules) === null || _h === void 0 ? void 0 : _h.boards[0]) === null || _j === void 0 ? void 0 : _j.minimumAllowed, "maxinum-allowed": (_l = (_k = this.gameData.rules) === null || _k === void 0 ? void 0 : _k.boards[0]) === null || _l === void 0 ? void 0 : _l.maxinumAllowed, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, "translation-url": this.translationData })), h("div", { class: "TicketsWrapper" }, this.mainTickets.map((item) => {
             var _a, _b;
             return (h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.quickPickAvailable, "reset-button": (_b = this.gameData.rules) === null || _b === void 0 ? void 0 : _b.quickPickAvailable, "total-controllers": this.mainTickets.length, "translation-url": this.translationData, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }));
-        })), h("div", { class: "OrderSummary" }, h("h3", { class: "OrderSummaryTitle" }, translate$4('orderSummaryTitle', this.language)), h("div", { class: "OrderTicketInfo" }, h("div", { class: "Ticket" }, translate$4('orderSummaryTickets', this.language), ": ", h("span", null, this.mainTickets.length)), h("div", null, h("span", null, this.thousandSeperator(((_k = (_j = this.mainTickets[0]) === null || _j === void 0 ? void 0 : _j.betType) === null || _k === void 0 ? void 0 : _k.combinations) * ((_l = this.mainTickets[0]) === null || _l === void 0 ? void 0 : _l.lineNum))), h("span", { class: "Multiplier" }, "x"), ((_m = this.gameData.rules) === null || _m === void 0 ? void 0 : _m.stakeMultiplierAvailable) && (h("span", null, h("span", null, ((_o = this.mainTickets[0]) === null || _o === void 0 ? void 0 : _o.multiplierNum) === 1
-            ? `${(_p = this.mainTickets[0]) === null || _p === void 0 ? void 0 : _p.multiplierNum} Multiplier`
-            : `${(_q = this.mainTickets[0]) === null || _q === void 0 ? void 0 : _q.multiplierNum} Multipliers`), h("span", { class: "Multiplier" }, "x"))), h("span", null, `${(_r = this.mainTickets[0]) === null || _r === void 0 ? void 0 : _r.stake} EUR`), ((_s = this.gameData.rules) === null || _s === void 0 ? void 0 : _s.drawMultiplierAvailable) && (h("span", null, h("span", { class: "Multiplier" }, "x"), h("span", null, ((_t = this.mainTickets[0]) === null || _t === void 0 ? void 0 : _t.drawCount) === 1
-            ? `${(_u = this.mainTickets[0]) === null || _u === void 0 ? void 0 : _u.drawCount} Draw`
-            : `${(_v = this.mainTickets[0]) === null || _v === void 0 ? void 0 : _v.drawCount} Draws`))))), h("hr", null), h("div", { class: "Total" }, translate$4('orderSummaryTotal', this.language), ":", ' ', h("span", null, this.thousandSeperator(this.totalAmount), " ", this.currency)), this.isSubscription && (h("div", { class: "SubscriptionWrapper" }, h("lottery-subscription", { endpoint: this.endpoint, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, gameName: this.gameData.name }))), h("div", { class: "ButtonWrapper" }, this.isLoggedIn && (h("div", null, !this.isLoading && (h("div", { class: "submitWrap" }, h("div", { class: "Button", onClick: () => this.handleSubmitTickets() }, translate$4('orderSummarySubmit', this.language)), this.showSubmitError && h("div", { class: "submitError" }, this.submitError), this.showApiError && h("div", { class: "submitError" }, this.apiError), this.showSubscriptionError && (h("div", { class: "submitError" }, this.subscriptionError)))), this.isLoading && (h("span", { class: "Button", style: { cursor: 'default' } }, translate$4('loading', this.language))))), !this.isLoggedIn && (h("div", null, h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate$4('orderSummarySubmit', this.language)), h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("p", { class: "SubmitModalSuccess" }, translate$4('modalLogin', this.language)))))))))), this.tabIndex == 1 && (h("div", { class: "HistoryContentWrapper" }, h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "translation-url": this.translationData, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))))) : (h("div", { class: "noActiveDraw" }, translate$4('emptyText', this.language))))), h("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("p", { class: "SubmitModalSuccess" }, translate$4('submitSuccess', this.language)))));
+        })), h("div", { class: "OrderSummary" }, h("h3", { class: "OrderSummaryTitle" }, translate$4('orderSummaryTitle', this.language)), h("div", { class: "OrderTicketInfo" }, h("div", { class: "Ticket" }, translate$4('orderSummaryTickets', this.language), ": ", h("span", null, this.mainTickets.length)), h("div", null, h("span", null, this.thousandSeperator(((_o = (_m = this.mainTickets[0]) === null || _m === void 0 ? void 0 : _m.betType) === null || _o === void 0 ? void 0 : _o.combinations) * ((_p = this.mainTickets[0]) === null || _p === void 0 ? void 0 : _p.lineNum))), h("span", { class: "Multiplier" }, "x"), ((_q = this.gameData.rules) === null || _q === void 0 ? void 0 : _q.stakeMultiplierAvailable) && (h("span", null, h("span", null, ((_r = this.mainTickets[0]) === null || _r === void 0 ? void 0 : _r.multiplierNum) === 1
+            ? `${(_s = this.mainTickets[0]) === null || _s === void 0 ? void 0 : _s.multiplierNum} Multiplier`
+            : `${(_t = this.mainTickets[0]) === null || _t === void 0 ? void 0 : _t.multiplierNum} Multipliers`), h("span", { class: "Multiplier" }, "x"))), h("span", null, `${(_u = this.mainTickets[0]) === null || _u === void 0 ? void 0 : _u.stake} EUR`), ((_v = this.gameData.rules) === null || _v === void 0 ? void 0 : _v.drawMultiplierAvailable) && (h("span", null, h("span", { class: "Multiplier" }, "x"), h("span", null, ((_w = this.mainTickets[0]) === null || _w === void 0 ? void 0 : _w.drawCount) === 1
+            ? `${(_x = this.mainTickets[0]) === null || _x === void 0 ? void 0 : _x.drawCount} Draw`
+            : `${(_y = this.mainTickets[0]) === null || _y === void 0 ? void 0 : _y.drawCount} Draws`))))), h("hr", null), h("div", { class: "Total" }, translate$4('orderSummaryTotal', this.language), ":", ' ', h("span", null, this.thousandSeperator(this.totalAmount), " ", this.currency)), this.isSubscription && (h("div", { class: "SubscriptionWrapper" }, h("lottery-subscription", { endpoint: this.endpoint, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, gameName: this.gameData.name }))), h("div", { class: "ButtonWrapper" }, this.isLoggedIn && (h("div", null, !this.isLoading && (h("div", { class: "submitWrap" }, h("div", { class: { Button: true, ButtonDisabled: !this.drawSubmitAvailable }, onClick: () => this.handleSubmitTickets() }, translate$4('orderSummarySubmit', this.language)), this.showSubmitError && h("div", { class: "submitError" }, this.submitError), this.showApiError && h("div", { class: "submitError" }, this.apiError), this.showSubscriptionError && (h("div", { class: "submitError" }, this.subscriptionError)))), this.isLoading && (h("span", { class: "Button", style: { cursor: 'default' } }, translate$4('loading', this.language))))), !this.isLoggedIn && (h("div", null, h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate$4('orderSummarySubmit', this.language)), h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("p", { class: "SubmitModalSuccess" }, translate$4('modalLogin', this.language)))))))))), this.tabIndex == 1 && (h("div", { class: "HistoryContentWrapper" }, h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "translation-url": this.translationData, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }))))) : (h("div", { class: "noActiveDraw" }, translate$4('emptyText', this.language))))), h("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, h("p", { class: "SubmitModalSuccess" }, translate$4('submitSuccess', this.language)))));
     }
     static get assetsDirs() { return ["../static"]; }
     get element() { return getElement(this); }