@everymatrix/lottery-game-page 0.1.2 → 0.1.4

package/dist/cjs/lottery-ticket.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e5770ba2.js');
+const index = require('./index-5701a895.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
@@ -33,7 +33,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #F1F1F1 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;background-color:transparent;border:none;align-items:center;justify-content:center;height:20px;margin:0;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);width:30px;align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:block;border-radius:4px;padding:8px 25px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:block;border-radius:4px;padding:8px 25px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}";
+const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketTitle{font-size:16px;font-weight:bold}.ButtonContainer{display:flex;justify-content:flex-end}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #F1F1F1 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;border:none;align-items:center;justify-content:center;height:20px;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}.Minus{border-radius:4px;width:30px;height:24px !important;margin-right:10px;color:#FFF;background:#009993}.Plus{border-radius:4px;width:30px;height:24px !important;margin-left:10px;color:#FFF;background:#009993}.SelectWrapper{width:auto;padding:5px;margin:0 auto;border:1px solid #ccc;border-radius:5px;position:relative}.SelectButton,.SelectOptions li{display:flex;align-items:center;cursor:pointer}.SelectButton{display:flex;padding:0 5px;border-radius:7px;align-items:center;justify-content:space-between;font-size:14px}.SelectButton span:first-child{padding-right:10px}.SelectExpand{transition:transform 0.3s linear;font-size:12px}.SelectActive .SelectExpand{transform:rotate(180deg)}.SelectContent{display:none;padding:5px;border-radius:7px}.SelectWrapper.SelectActive .SelectContent{width:100%;display:block;position:absolute;left:0;top:32px;padding:0;border:1px solid #ccc;overflow:hidden;background:#fff}.SelectContent .SelectOptions{max-height:100px;margin:0;overflow-y:auto;padding:0}.SelectContent .SelectOptions .SelectedValue{background-color:#009993;color:#fff}.SelectOptions::-webkit-scrollbar{width:7px}.SelectOptions::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}.SelectOptions::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}.SelectOptions li{height:20px;padding:0 13px;font-size:14px}.SelectOptions li:hover{background:#f2f2f2}";
 
 const LotteryTicket = class {
   constructor(hostRef) {
@@ -68,6 +68,16 @@ const LotteryTicket = class {
     this.isLoading = true;
     this.hasErrors = false;
     this.ticketDone = false;
+    this.isCustomSelect = false;
+    this.amountInfo = {};
+  }
+  /**
+   * @TODO find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
+   */
+  checkForClickOutside(ev) {
+    if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
+      this.isCustomSelect = false;
+    }
   }
   connectedCallback() {
     let url = new URL(`${this.endpoint}/games/${this.gameId}`);
@@ -85,6 +95,7 @@ const LotteryTicket = class {
       this.isLoading = false;
       this.gameData = data;
       this.grids = [...Array(data.rules.boards.length).keys()];
+      this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
     })
       .catch((err) => {
       this.isLoading = false;
@@ -113,12 +124,23 @@ const LotteryTicket = class {
     this.ticketDone = false;
     this.resetSelection.emit(this.ticketId);
   }
-  changeStake(event) {
+  changeStake(ticketid, amount) {
     this.stakeChange.emit({
-      ticketId: this.ticketId,
-      stake: event.target.value
+      ticketId: ticketid,
+      stake: amount
     });
   }
+  toggleClass() {
+    this.isCustomSelect = !this.isCustomSelect;
+  }
+  setDropdownItem(item) {
+    this.amountInfo = {
+      amount: item.amount,
+      currency: item.currency
+    };
+    this.isCustomSelect = false;
+    this.changeStake(this.ticketId, item.amount);
+  }
   render() {
     if (this.isLoading) {
       return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
@@ -129,11 +151,12 @@ const LotteryTicket = class {
       }
       else {
         const { rules } = this.gameData;
-        return (index.h("div", { class: "TicketContainer" }, index.h("p", null, this.gameData.name), this.resetButton && this.ticketDone &&
-          index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language)), this.autoPick && !this.ticketDone &&
-          index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language)), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+        return (index.h("div", { class: "TicketContainer" }, index.h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+          index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
+          index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
           index.h("div", null, index.h("label", { class: "Toggle" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), ": "), index.h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), index.h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
-          index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ? index.h("div", null, index.h("select", { class: "InputDefault", onChange: (event) => this.changeStake(event) }, rules.stakes.map((item) => index.h("option", { value: item.amount }, item.amount, " ", item.currency)))) : index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))));
+          index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("div", null, index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
+          (index.h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, index.h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.amount, " ", this.amountInfo.currency), index.h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), index.h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, index.h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => index.h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, item.amount, " ", item.currency)))))) : (index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
       }
     }
   }

package/dist/collection/components/lottery-game-page/lottery-game-page.css

@@ -36,16 +36,17 @@
   align-items: center;
 }
 .GamePage .TotalWinnings {
-  color: #00958f;
+  color: #000;
   font-size: 18px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 10px;
+  text-transform: uppercase;
 }
 .GamePage .TotalWinnings span {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 700;
 }
 .GamePage .NextDraw {
@@ -54,7 +55,7 @@
   font-weight: 600;
   margin: 0 auto;
   text-align: center;
-  text-transform: capitalize;
+  text-transform: uppercase;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -63,6 +64,9 @@
 .GamePage .NextDraw .BannerText {
   font-weight: 400;
   font-size: 18px;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 15px 0 0 0;
 }
 .GamePage .NextDraw .BannerCountdown {
   font-size: 22px;
@@ -95,9 +99,21 @@
   color: #FFF;
 }
 
+.LastDrawResultsTitle {
+  color: #009993;
+  padding: 25px 0 10px 0;
+  text-align: center;
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
 .NextDrawWrapper {
   padding: 10px 15px;
-  background: #fff;
+  background: #F1F1F1;
+  background: linear-gradient(0deg, #f1f1f1 0%, rgba(253, 187, 45, 0) 100%);
 }
 .NextDrawWrapper .BannerText {
   font-size: 16px;
@@ -114,7 +130,7 @@
 }
 
 .GamePageContent {
-  padding: 10px 15px;
+  padding: 15px;
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -122,7 +138,6 @@
 .GameDetails {
   padding-bottom: 10px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #e9e9e9;
 }
 
 .CreateNewTicket {
@@ -221,6 +236,11 @@
 .ButtonWrapper .Button:hover {
   background: #00ABA4;
 }
+.ButtonWrapper .Button.ButtonDisabled {
+  pointer-events: none;
+  background: #ccc;
+  border: 1px solid #ccc;
+}
 
 .SubmitModalSuccess {
   text-align: center;

package/dist/collection/components/lottery-game-page/lottery-game-page.js

@@ -28,6 +28,8 @@ export class LotteryGamePage {
     this.deleteVisible = false;
     this.latestDraw = {};
     this.totalWinningsAmount = 0;
+    this.isLoggedIn = false;
+    this.loginModalVisible = false;
     this.multiplier = false;
     this.quickPick = false;
   }
@@ -35,6 +37,10 @@ export class LotteryGamePage {
   connectedCallback() {
     this.getGameDetails();
     this.getDraws();
+    console.log(this.language);
+    if (this.sessionId) {
+      this.isLoggedIn = true;
+    }
   }
   countdownLogic(date) {
     this.interval = setInterval(() => {
@@ -61,7 +67,6 @@ export class LotteryGamePage {
       this.gameData = data;
       this.basicStake = this.gameData.rules.stakes[0].amount;
       let draws = this.gameData.draws.filter((item) => !item.winningNumbers);
-      console.log('draws', draws);
       this.nextDraw = draws[0].id;
       this.createNewTicket();
     })
@@ -124,6 +129,7 @@ export class LotteryGamePage {
   }
   modalCloseEvent() {
     this.deleteVisible = false;
+    this.loginModalVisible = false;
   }
   stakeChangeHandler(event) {
     const { ticketId, stake } = event.detail;
@@ -185,6 +191,9 @@ export class LotteryGamePage {
       { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
     ];
   }
+  showLoginModal() {
+    this.loginModalVisible = true;
+  }
   submitTickets() {
     let url = new URL(`${this.endpoint}/tickets`);
     // @TODO Body TS type
@@ -192,7 +201,6 @@ export class LotteryGamePage {
       gameId: this.gameId,
       tickets: []
     };
-    console.log('body', body);
     this.tickets.forEach((item) => {
       body.tickets.push({
         startingDrawId: this.nextDraw,
@@ -236,7 +244,7 @@ export class LotteryGamePage {
     }
     return (
     /* Game details */
-    h("div", { class: "GamePage" },
+    h("div", { class: "GamePage", dir: this.language == 'ar' ? 'rtl' : 'ltr' },
       h("div", { class: "GridBanner" },
         h("div", { class: "BannerButtonsWrapper" },
           h("button", { class: "BannerBackButton" },
@@ -291,9 +299,16 @@ export class LotteryGamePage {
                 " ",
                 this.currency)),
             h("div", { class: "ButtonWrapper" },
-              h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language))))),
+              this.isLoggedIn &&
+                h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language)),
+              !this.isLoggedIn &&
+                h("div", null,
+                  h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate('orderSummarySubmit', this.language)),
+                  h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible },
+                    h("p", { class: "SubmitModalSuccess" }, translate('modalLogin', this.language))))))),
       this.tabIndex == 1 &&
         h("div", null,
+          h("h4", { class: "LastDrawResultsTitle" }, translate('lastDrawResultsTitle', this.language)),
           h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "draw-id": this.lastDrawId, "draw-mode": true }),
           h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language })),
       h("helper-modal", { "title-modal": "Success", visible: this.successVisible },
@@ -453,7 +468,9 @@ export class LotteryGamePage {
     "secondsRemaining": {},
     "latestDraw": {},
     "totalWinningsAmount": {},
-    "nextDate": {}
+    "nextDate": {},
+    "isLoggedIn": {},
+    "loginModalVisible": {}
   }; }
   static get elementRef() { return "element"; }
   static get listeners() { return [{

package/dist/collection/utils/locale.utils.js

@@ -1,5 +1,5 @@
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'ar'];
 const TRANSLATIONS = {
   en: {
     error: 'Error',
@@ -12,7 +12,7 @@ const TRANSLATIONS = {
     buy: 'Buy tickets',
     viewLatest: 'View latest results',
     createTicket: 'Create Ticket',
-    modalSuccess: 'Purchase will be successfull soon!',
+    modalSuccess: 'Purchase successfully completed!',
     deleteTicketModalTitle: 'Delete Ticket',
     deleteTicketModalText: 'Are you sure you want to delete this ticket?',
     deleteTicketModalCancel: 'Cancel',
@@ -20,7 +20,9 @@ const TRANSLATIONS = {
     orderSummaryTitle: 'Order Summary',
     orderSummaryTickets: 'Ticket',
     orderSummaryTotal: 'Total',
-    orderSummarySubmit: 'Submit'
+    orderSummarySubmit: 'Submit',
+    lastDrawResultsTitle: 'Last Draw Results',
+    modalLogin: 'Please login to submit a ticket',
   },
   ro: {
     error: 'Eroare',
@@ -29,11 +31,11 @@ const TRANSLATIONS = {
     lobbyButton: 'Lobby',
     prize: 'MARELE JACKPOT OMG',
     winUpTo: 'Castiga pana la',
-    nextDraw: 'In cat timp devii milionar daca cumperi acum!!!',
+    nextDraw: 'Urmatoarea extragere:',
     buy: 'Cumpara bilet',
     viewLatest: 'Ultimile extrageri',
     createTicket: 'Creeaza bilet',
-    modalSuccess: 'Achiziția va avea succes în curând!',
+    modalSuccess: 'Achizitie efectuata cu succes',
     deleteTicketModalTitle: 'Sterge biletul',
     deleteTicketModalText: 'Esti sigur ca vrei sa stergi acest bilet?',
     deleteTicketModalCancel: 'Anuleaza',
@@ -41,7 +43,32 @@ const TRANSLATIONS = {
     orderSummaryTitle: 'Rezumat comanda',
     orderSummaryTickets: 'Bilet',
     orderSummaryTotal: 'Total',
-    orderSummarySubmit: 'Trimite'
+    orderSummarySubmit: 'Trimite',
+    lastDrawResultsTitle: 'Cele mai recente extrageri',
+    modalLogin: 'Please login to submit a ticket',
+  },
+  ar: {
+    error: 'خطأ',
+    title: 'كرونو',
+    backButton: 'خلف',
+    lobbyButton: 'ردهة',
+    prize: 'جائزة',
+    winUpTo: 'الفوز بما يصل الى',
+    nextDraw: 'السحب التالي:',
+    buy: 'اشتري تذاكر',
+    viewLatest: 'عرض أحدث النتائج',
+    createTicket: 'إنشاء تذكرة',
+    modalSuccess: '!سيتم الشراء بنجاح قريبًا',
+    deleteTicketModalTitle: 'حذف التذكرة',
+    deleteTicketModalText: 'هل أنت متأكد أنك تريد حذف هذه التذكرة؟',
+    deleteTicketModalCancel: 'يلغي',
+    deleteTicketModalConfirm: 'حذف',
+    orderSummaryTitle: 'ملخص الطلب',
+    orderSummaryTickets: 'تذكرة',
+    orderSummaryTotal: 'المجموع',
+    orderSummarySubmit: 'يُقدِّم',
+    lastDrawResultsTitle: 'Cele mai recente extrageri',
+    modalLogin: 'الرجاء تسجيل الدخول لتقديم تذكرة'
   },
 };
 export const translate = (key, customLang) => {

package/dist/components/helper-accordion2.js

@@ -15,7 +15,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px;margin-bottom:1px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{border-radius:4px;margin-top:10px;cursor:pointer;text-transform:capitalize;display:block;font-size:12px;text-align:center;padding:8px 20px;width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -23,6 +23,10 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
+    /**
+   * Flag for ticket history
+   */
+    this.ticketHistoryFlag = false;
     /**
      * Title (top header)
      */
@@ -75,13 +79,14 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.accordionEvent.emit();
   }
   render() {
-    return (h("div", { class: "Wrapper" }, h("div", { class: "Header" }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+    return (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
       h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
         h("div", null, this.deleteTab &&
           h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
   }
   static get style() { return helperAccordionCss; }
 }, [1, "helper-accordion", {
+    "ticketHistoryFlag": [4, "ticket-history-flag"],
     "headerTitle": [1, "header-title"],
     "headerSubtitle": [1, "header-subtitle"],
     "description": [1],