@everymatrix/lottery-hakuna-ticket-history 0.0.1

package/dist/collection/components/lottery-hakuna-ticket-history/lottery-hakuna-ticket-history.js

@@ -0,0 +1,589 @@
+import "../../../../../lottery-hakuna-ticket-history-item/dist/types/index";
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { GameType } from "../../models";
+import { fetchTicketList } from "../../utils/api";
+import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+import { LoadingOutlined } from "@ant-design/icons-svg";
+import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
+const loadingOutLinedSvg = renderIconDefinitionToSVGElement(LoadingOutlined, {
+    extraSVGAttrs: { width: '14px', height: '14px', fill: 'currentColor' }
+});
+export class LotteryHakunaTicketHistory {
+    constructor() {
+        this.page = 0;
+        this.vendorGameType = GameType.Lottery;
+        this.customStyle = `
+    :host {
+      --lottery-hakuna-ticket-history-item-container-min-width: ${this.minItemWidth}px;
+
+      .lottery-hakuna-ticket-history-item__container {
+        justify-content: flex-start;
+      }
+    }
+
+    .lottery-hakuna-ticket-history-item__container-wrapper {
+      height: 100%;
+      box-sizing: border-box;
+    }
+    .lottery-hakuna-ticket-history-item__container {
+      height: 100%;
+      box-sizing: border-box;
+    }
+  `;
+        this.handleLoadMore = () => {
+            if (!this.isLoading && this.hasMore) {
+                this.getTicketList(this.page + 1);
+            }
+        };
+        this.handleRefresh = () => {
+            if (!this.isRefreshing) {
+                this.page = 1; // Reset page number
+                this.getTicketList(1, true);
+            }
+        };
+        this.renderSkeleton = () => {
+            return (h("lottery-hakuna-ticket-history-item", { "client-styling": this.customStyle + (this.clientStyling || ''), "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, translationUrl: this.translationUrl, language: this.language, showSkeleton: true }));
+        };
+        this.renderItem = (ticket) => {
+            return (h("lottery-hakuna-ticket-history-item", { "client-styling": this.customStyle + (this.clientStyling || ''), "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, translationUrl: this.translationUrl, language: this.language, key: ticket.id, "history-item-name": ticket.name, "history-item-image-src": ticket.imageSrc, "ticket-id": ticket.id, "total-amount": ticket.totalAmount, date: ticket.date, time: ticket.time, "selected-numbers": ticket.selectedNumbers }));
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.playerId = undefined;
+        this.sessionId = '';
+        this.scrollThreshold = '0px 0px 200px 0px';
+        this.scrollItemHeight = 110;
+        this.scrollContainerHeight = 500;
+        this.ticketHistoryTitle = 'YOUR TICKET';
+        this.ticketHistoryItemImageSrc = undefined;
+        this.ticketHistoryItemName = undefined;
+        this.ticketHistoryItemCurrency = 'R';
+        this.listLoadingText = undefined;
+        this.listRefreshingText = undefined;
+        this.listEndText = undefined;
+        this.limit = 10;
+        this.visibleTickets = [];
+        this.hasMore = false;
+        this.isLoading = false;
+        this.isRefreshing = false;
+        this.errorMessage = undefined;
+        this.minItemWidth = 300;
+        this.showSkeleton = true;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentWillLoad() {
+        resolveTranslationUrl(this.translationUrl);
+        this.getTicketList(1);
+    }
+    async getTicketList(page, isRefresh = false) {
+        try {
+            if (!this.endpoint || !this.sessionId) {
+                return Promise.reject(new Error('Endpoint and sessionId are required'));
+            }
+            if (page <= 0 || !this.limit)
+                return;
+            if (isRefresh) {
+                this.isRefreshing = true;
+            }
+            else {
+                this.isLoading = true;
+            }
+            const { items, total } = await fetchTicketList({
+                endpoint: this.endpoint,
+                filterData: {
+                    offset: (page - 1) * this.limit,
+                    limit: this.limit,
+                    vendorGameType: this.vendorGameType
+                },
+                sessionId: this.sessionId,
+                meta: {
+                    name: this.ticketHistoryItemName,
+                    imageSrc: this.ticketHistoryItemImageSrc,
+                    currency: this.ticketHistoryItemCurrency
+                }
+            });
+            if (isRefresh) {
+                this.visibleTickets = [...items];
+            }
+            else {
+                this.visibleTickets = [...this.visibleTickets, ...items];
+            }
+            this.hasMore = page < Math.ceil(total / this.limit);
+            this.page = page;
+            this.isLoading = false;
+            this.isRefreshing = false;
+            this.errorMessage = null;
+        }
+        catch (err) {
+            this.isLoading = false;
+            this.isRefreshing = false;
+            if (err.status === 401) {
+                this.errorMessage = translate('unauthorized', this.language);
+                window.postMessage({ type: 'SessionExpired' }, window.location.href);
+                return;
+            }
+            this.errorMessage = translate('failToShowTicketList', this.language);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    renderInfoIcon() {
+        return (h("svg", { width: "45", height: "45", viewBox: "0 0 45 45", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", fill: "currentColor", d: "M22.5 5.625C13.1802 5.625 5.625 13.1802 5.625 22.5C5.625 31.8198 13.1802 39.375 22.5 39.375C31.8198 39.375 39.375 31.8198 39.375 22.5C39.375 13.1802 31.8198 5.625 22.5 5.625ZM1.875 22.5C1.875 11.1091 11.1091 1.875 22.5 1.875C33.8909 1.875 43.125 11.1091 43.125 22.5C43.125 33.8909 33.8909 43.125 22.5 43.125C11.1091 43.125 1.875 33.8909 1.875 22.5ZM22.5 13.125C23.5355 13.125 24.375 13.9645 24.375 15V22.5C24.375 23.5355 23.5355 24.375 22.5 24.375C21.4645 24.375 20.625 23.5355 20.625 22.5V15C20.625 13.9645 21.4645 13.125 22.5 13.125ZM20.625 30C20.625 28.9645 21.4645 28.125 22.5 28.125H22.5188C23.5543 28.125 24.3938 28.9645 24.3938 30C24.3938 31.0355 23.5543 31.875 22.5188 31.875H22.5C21.4645 31.875 20.625 31.0355 20.625 30Z" })));
+    }
+    render() {
+        return (h("div", { key: 'f150fbefd3394af032c600f9b939357bc07ef7db', class: "lottery-hakuna-ticket-history__container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '67e83eb97dbb358b1d057c1c7948fc8f6e4bc363', class: "lottery-hakuna-ticket-history__title" }, this.ticketHistoryTitle), this.errorMessage && (h("div", { key: 'cae8e46734e5ac71874dbd3d28a861218b5c67eb', class: "lottery-hakuna-ticket-history__error-message" }, this.renderInfoIcon(), h("span", { key: '7c8feec0afda57a6546da5ad9ddc5e35d52683ac' }, this.errorMessage))), h("lottery-infinite-scroll", { key: '828de5559807ea0314d05be5e17ce2340b494a5f', "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, hasMore: this.hasMore, enableVirtualScroll: true, items: [...this.visibleTickets], estimatedItemHeight: this.scrollItemHeight, minItemWidth: this.minItemWidth, threshold: this.scrollThreshold, gridGap: 10, isLoading: this.isLoading, isRefreshing: this.isRefreshing, onLoadMore: this.handleLoadMore, onRefresh: this.handleRefresh, renderItem: this.renderItem, renderSkeleton: this.showSkeleton ? this.renderSkeleton : null, skeletonCount: this.limit }, h("div", { key: '833b363afc9d355fd6ec1e50a848f759f4f7c1b9', slot: "loading-more", class: "lottery-hakuna-ticket-history__loading-more" }, h("span", { key: '8cf28988956c1710e4adfc6c169761bf3c833e6a', class: "loading-spinner", innerHTML: loadingOutLinedSvg })), h("div", { key: '9faed4a64236ff2a7ae920499fe236aec3393433', slot: "refresh-loading", class: "lottery-hakuna-ticket-history__refresh-loading" }, this.listRefreshingText || translate('releaseToRefresh', this.language)), h("div", { key: 'b61b6aeaadda6e8e0b48d58e2f9ad7f77e57badf', slot: "end-message", class: "lottery-hakuna-ticket-history__end-message" }, this.listEndText || translate('youHaveReachedTheEnd', this.language)))));
+    }
+    static get is() { return "lottery-hakuna-ticket-history"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-hakuna-ticket-history.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-hakuna-ticket-history.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source for stream styling via a service."
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom CSS styles to apply to the component."
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to a custom CSS file for additional styling."
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language code to use for translations. Defaults to 'en'."
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to fetch custom translation data from."
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The API endpoint to fetch ticket data from."
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "gameId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game ID of the lottery game."
+                },
+                "attribute": "game-id",
+                "reflect": true
+            },
+            "playerId": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Player ID."
+                },
+                "attribute": "player-id",
+                "reflect": true
+            },
+            "sessionId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "GIC Session."
+                },
+                "attribute": "session-id",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "scrollThreshold": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Threshold distance from the bottom to trigger loading more items.\nDefault: '0px 0px 200px 0px'"
+                },
+                "attribute": "scroll-threshold",
+                "reflect": false,
+                "defaultValue": "'0px 0px 200px 0px'"
+            },
+            "scrollItemHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estimated height of a single ticket item in pixels."
+                },
+                "attribute": "scroll-item-height",
+                "reflect": false,
+                "defaultValue": "110"
+            },
+            "scrollContainerHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the scrollable container in pixels."
+                },
+                "attribute": "scroll-container-height",
+                "reflect": false,
+                "defaultValue": "500"
+            },
+            "ticketHistoryTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title displayed at the top of the ticket history."
+                },
+                "attribute": "ticket-history-title",
+                "reflect": false,
+                "defaultValue": "'YOUR TICKET'"
+            },
+            "ticketHistoryItemImageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image Src displayed for each of the ticket history items."
+                },
+                "attribute": "ticket-history-item-image-src",
+                "reflect": false
+            },
+            "ticketHistoryItemName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name displayed for each of the ticket history items."
+                },
+                "attribute": "ticket-history-item-name",
+                "reflect": false
+            },
+            "ticketHistoryItemCurrency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name displayed for each of the ticket history items."
+                },
+                "attribute": "ticket-history-item-currency",
+                "reflect": false,
+                "defaultValue": "'R'"
+            },
+            "listLoadingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text to display when loading more items."
+                },
+                "attribute": "list-loading-text",
+                "reflect": false
+            },
+            "listRefreshingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text to display when list is refreshing (pull-to-refresh)."
+                },
+                "attribute": "list-refreshing-text",
+                "reflect": false
+            },
+            "listEndText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text to display when the end of the list is reached."
+                },
+                "attribute": "list-end-text",
+                "reflect": false
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items to fetch per page."
+                },
+                "attribute": "limit",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "minItemWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid layout configuration: minimum column width\nUsed with CSS Grid to achieve responsiveness: repeat(auto-fill, minmax(minItemWidth, 1fr))"
+                },
+                "attribute": "min-item-width",
+                "reflect": false,
+                "defaultValue": "300"
+            },
+            "showSkeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show skeleton"
+                },
+                "attribute": "show-skeleton",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visibleTickets": {},
+            "hasMore": {},
+            "isLoading": {},
+            "isRefreshing": {},
+            "errorMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/components/lottery-infinite-scroll/lottery-infinite-scroll.css

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.lottery-infinite-scroll__container {
+  display: block;
+  width: 100%;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding-right: 10px;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: var(--emw-hakuna-bg-secondary, #120505) var(--lottery-infinite-scroll-scrollbar-track-background, transparent);
+  /* Scrollbar styles */
+}
+.lottery-infinite-scroll__container::-webkit-scrollbar {
+  width: var(--lottery-infinite-scroll-scrollbar-width, 2px);
+}
+.lottery-infinite-scroll__container::-webkit-scrollbar-track {
+  background: var(--lottery-infinite-scroll-scrollbar-track-background, transparent);
+}
+.lottery-infinite-scroll__container::-webkit-scrollbar-thumb {
+  background: var(--emw-hakuna-bg-secondary, #120505);
+  border-radius: var(--lottery-infinite-scroll-scrollbar-thumb-border-radius, 2px);
+}
+
+.lottery-infinite-scroll__sentinel {
+  width: 100%;
+  display: block;
+  text-align: center;
+  /* Common styles for sentinel in virtual scroll */
+  /* Normal scroll mode sentinel */
+}
+.lottery-infinite-scroll__sentinel.virtual-scroll-sentinel {
+  height: 1px; /* Minimal height for detection */
+  pointer-events: none; /* Avoid blocking clicks */
+  opacity: 0; /* Hidden but present */
+  position: absolute;
+  width: 100%;
+}
+.lottery-infinite-scroll__sentinel:not(.virtual-scroll-sentinel) {
+  height: 1px; /* Ensure it has height for IntersectionObserver */
+}
+
+.lottery-infinite-scroll__end-message {
+  width: 100%;
+  display: block;
+  text-align: center;
+  /* Common styles for end message in virtual scroll */
+}
+.lottery-infinite-scroll__end-message.virtual-scroll-end-message {
+  position: absolute;
+  width: 100%;
+}
+
+.ptr-indicator {
+  height: var(--pull-trigger-distance, 60px); /* Use CSS variable for flexibility */
+  margin-top: calc(-1 * var(--pull-trigger-distance, 60px)); /* Hidden above the top by default */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+  font-size: 14px;
+  color: #666; /* Keep default if no variable */
+}