@opexa/portal-components 0.0.1109 → 0.0.1111

package/dist/client/hooks/useTopGamesQuery.d.ts

@@ -0,0 +1,2 @@
+import type { Game, QueryConfig, TopGame } from '../../types';
+export declare const useTopGamesQuery: (topGames: TopGame[], config?: QueryConfig<Game[]>) => import("@tanstack/react-query").UseQueryResult<Game[], Error>;

package/dist/client/hooks/useTopGamesQuery.js

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { getGamesv2__next } from '../../services/cmsPortal.js';
+export const useTopGamesQuery = (topGames, config) => {
+    const ids = topGames.map((tg) => tg.id);
+    return useQuery({
+        ...config,
+        queryKey: ['top-games', ids],
+        queryFn: async ({ signal }) => {
+            if (!ids || ids.length === 0)
+                return [];
+            const results = await Promise.all(ids.map((id) => getGamesv2__next(id, { signal })));
+            return results.flatMap((res) => res.edges.map((edge) => edge.node));
+        },
+        enabled: (ids?.length ?? 0) > 0 && (config?.enabled ?? true),
+    });
+};

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
-        view: "vca" | "form";
+        view: "form" | "vca";
         status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const OnlineBankDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/Games/GamesCarousel.client.d.ts

@@ -2,7 +2,7 @@ import type { ImageProps } from 'next/image';
 import { type ReactNode } from 'react';
 import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
 import type { GamesInput__Next } from '../../services/cmsPortal';
-import type { GameProvider } from '../../types';
+import type { GameProvider, TopGame } from '../../types';
 interface ClassNameEntries {
     root?: string;
     thumbnailRoot?: string;
@@ -26,6 +26,7 @@ export interface GamesCarouselProps {
     className?: string | ClassNameEntries;
     fallbackThumbnails?: Partial<Record<GameProvider, ImageProps['src']>>;
     bypassDomains?: BypassDomainConfig[];
+    topGames?: TopGame[];
 }
 export declare function GamesCarousel__client(props: GamesCarouselProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Games/GamesCarousel.client.js

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel, {} from 'embla-carousel-react';
 import { isString } from 'lodash-es';
 import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
+import { useTopGamesQuery } from '../../client/hooks/useTopGamesQuery.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
 import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
@@ -27,7 +28,27 @@ export function GamesCarousel__client(props) {
     }, {
         staleTime: 5 * 60 * 1000,
     });
-    const games = gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
+    const availableRows = gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
+    const topGamesToDisplay = useMemo(() => (props.topGames ?? []).slice(0, 5), [props.topGames]);
+    const { data: topGameRows = [] } = useTopGamesQuery(topGamesToDisplay);
+    const sortedRows = useMemo(() => {
+        if (!topGamesToDisplay.length)
+            return availableRows;
+        const orderedTopRows = topGamesToDisplay
+            .map((tg) => {
+            const match = topGameRows.find((g) => g.id === tg.id);
+            if (!match)
+                return null;
+            if (tg.provider && tg.provider !== match.provider)
+                return null;
+            return match;
+        })
+            .filter((g) => g != null);
+        const orderedTopIds = new Set(orderedTopRows.map((g) => g.id));
+        const rest = availableRows.filter((g) => !orderedTopIds.has(g.id));
+        return [...orderedTopRows, ...rest];
+    }, [topGameRows, availableRows, topGamesToDisplay]);
+    const games = sortedRows;
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 3,

package/dist/components/Games/GamesCarousel.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { prefetchGamesQuery } from '../../server/utils/prefetchGamesQuery.js';
+import { prefetchTopGamesQuery } from '../../server/utils/prefetchTopGamesQuery.js';
 import { GamesCarousel__client, } from './GamesCarousel.client.js';
 export async function GamesCarousel(props) {
     const numOfRows = props.numOfRows ?? 1;
-    await prefetchGamesQuery({
-        first: (numOfRows + 1) * 6,
-        filter: props.filter,
-        search: props.search,
-        sort: props.sort,
-    });
+    await Promise.all([
+        prefetchGamesQuery({
+            first: (numOfRows + 1) * 6,
+            filter: props.filter,
+            search: props.search,
+            sort: props.sort,
+        }),
+        prefetchTopGamesQuery(props.topGames),
+    ]);
     return _jsx(GamesCarousel__client, { ...props });
 }

package/dist/components/Games/GamesList.client.d.ts

@@ -2,7 +2,7 @@ import type { ImageProps } from 'next/image';
 import type { ReactNode } from 'react';
 import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
 import type { GamesInput__Next } from '../../services/cmsPortal';
-import type { GameProvider } from '../../types';
+import type { GameProvider, TopGame } from '../../types';
 interface ClassNameEntries {
     root?: string;
     thumbnailRoot?: string;
@@ -26,6 +26,7 @@ export interface GamesListProps {
     pagination?: 'lazy-load' | 'paginated';
     fallbackThumbnails?: Partial<Record<GameProvider, ImageProps['src']>>;
     bypassDomains?: BypassDomainConfig[];
+    topGames?: TopGame[];
 }
 export declare function GamesList__client(props: GamesListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Games/GamesList.client.js

@@ -2,11 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isString, noop } from 'lodash-es';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
+import { useTopGamesQuery } from '../../client/hooks/useTopGamesQuery.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
@@ -20,14 +21,23 @@ export function GamesList__client(props) {
     const isBypass = useBypassKycChecker(props.bypassDomains);
     const { pagination = 'lazy-load' } = props;
     const perPage = props.first ?? 24;
-    const { loading, availableRows, totalRows, totalAvailableRows, hasNextPage, next, } = useInfiniteQueryHelper(useGamesQuery, {
+    const { loading, availableRows, totalRows, hasNextPage, next } = useInfiniteQueryHelper(useGamesQuery, {
         first: perPage,
         filter: props.filter,
         search: props.search,
         sort: props.sort,
     });
+    const topGamesToDisplay = useMemo(() => (props.topGames ?? []).slice(0, 5), [props.topGames]);
+    const { data: topGameRows = [] } = useTopGamesQuery(topGamesToDisplay);
+    const sortedRows = useMemo(() => {
+        if (!topGamesToDisplay.length)
+            return availableRows;
+        const topGameKeys = new Set(topGameRows.map((g) => g.game));
+        const rest = availableRows.filter((g) => !topGameKeys.has(g.game));
+        return [...topGameRows, ...rest];
+    }, [topGamesToDisplay, topGameRows, availableRows]);
     const [currentPage, setCurrentPage] = useState(1);
-    const totalPages = Math.ceil(totalRows / perPage);
+    const totalPages = Math.ceil(Math.max(totalRows, sortedRows.length) / perPage);
     useEffect(() => {
         if (pagination === 'paginated') {
             const requiredRows = currentPage * perPage;
@@ -44,20 +54,20 @@ export function GamesList__client(props) {
         loading,
         next,
     ]);
-    const paginatedRows = availableRows.slice((currentPage - 1) * perPage, currentPage * perPage);
+    const paginatedRows = sortedRows.slice((currentPage - 1) * perPage, currentPage * perPage);
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
     return (_jsx(GamesPropsContext, { value: props, children: _jsxs("div", { className: classNames.root, id: "games-list", children: [_jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between", children: [_jsx("h2", { className: "order-2 mt-md font-semibold text-lg lg:order-none lg:mt-0", children: typeof props.heading === 'string'
                                 ? props.heading.replaceAll('OneAPI', '')
-                                : (props.heading ?? 'Games') }), props.viewGameProvidersUrl && (_jsxs(Link, { href: props.viewGameProvidersUrl, className: "order-1 flex items-center gap-sm font-semibold text-button-tertiary-fg text-lg lg:order-none lg:text-sm", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back to all Providers"] }))] }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
+                                : (props.heading ?? 'Games') }), props.viewGameProvidersUrl && (_jsxs(Link, { href: props.viewGameProvidersUrl, className: "order-1 flex items-center gap-sm font-semibold text-button-tertiary-fg text-lg lg:order-none lg:text-sm", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back to all Providers"] }))] }), sortedRows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
                         ? 'Fetching latest games...'
-                        : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: (pagination === 'paginated' ? paginatedRows : availableRows).map((game) => {
+                        : 'No game is currently available. Please check back later', className: "mt-lg" })), sortedRows.length >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: (pagination === 'paginated' ? paginatedRows : sortedRows).map((game) => {
                                 return (_jsx(GameContext, { value: game, children: _jsx(Game, { bypassKycCheck: isBypass, badge: props.badge, priority: true, className: {
                                             root: classNames.thumbnailRoot,
                                             title: classNames.thumbnailTitle,
                                         } }) }, game.id));
-                            }) }), _jsx("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: pagination === 'paginated' && totalRows > 0 ? (_jsx(GamesPagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (page) => {
+                            }) }), _jsx("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: pagination === 'paginated' && sortedRows.length > 0 ? (_jsx(GamesPagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (page) => {
                                     setCurrentPage(page);
-                                } })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })) })] }))] }) }));
+                                } })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: Math.max(totalRows, sortedRows.length), value: sortedRows.length, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${sortedRows.length} of ${Math.max(totalRows, sortedRows.length)}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })) })] }))] }) }));
 }

package/dist/components/Games/GamesList.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { prefetchGamesQuery } from '../../server/utils/prefetchGamesQuery.js';
+import { prefetchTopGamesQuery } from '../../server/utils/prefetchTopGamesQuery.js';
 import { GamesList__client } from './GamesList.client.js';
 export async function GamesList(props) {
-    await prefetchGamesQuery({
-        first: props.first ?? 24,
-        filter: props.filter,
-        search: props.search,
-        sort: props.sort,
-    });
+    await Promise.all([
+        prefetchGamesQuery({
+            first: props.first ?? 24,
+            filter: props.filter,
+            search: props.search,
+            sort: props.sort,
+        }),
+        prefetchTopGamesQuery(props.topGames),
+    ]);
     return _jsx(GamesList__client, { ...props });
 }

package/dist/constants/top-games.d.ts

@@ -0,0 +1,8 @@
+import type { GameProvider } from '../types';
+interface TopGame {
+    id: string;
+    name: string;
+    provider?: GameProvider;
+}
+export declare const topGamesPerGameProvider: TopGame[];
+export {};

package/dist/constants/top-games.js

@@ -0,0 +1,7 @@
+export const topGamesPerGameProvider = [
+    { id: '22wPzivJmc8NeUKy9o', name: 'Super Ace', provider: 'JILI' },
+    { id: '22wPzhwTgWn2hKXro5', name: 'Golden Empire', provider: 'JILI' },
+    { id: '22wPzhoLfnaqZSZZL9', name: 'Fortune gems', provider: 'JILI' },
+    { id: '22wPziMpihMc6xSmEm', name: 'Money Coming', provider: 'JILI' },
+    { id: '22wPzhCeAKDP53sMvV', name: 'Boxing King', provider: 'JILI' },
+];

package/dist/server/utils/prefetchTopGamesQuery.d.ts

@@ -0,0 +1,2 @@
+import type { TopGame } from '../../types';
+export declare const prefetchTopGamesQuery: (topGames?: TopGame[]) => Promise<void>;

package/dist/server/utils/prefetchTopGamesQuery.js

@@ -0,0 +1,18 @@
+import { cache } from 'react';
+import { getGamesv2__next } from '../../services/cmsPortal.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { log } from '../../utils/log.js';
+export const prefetchTopGamesQuery = cache(async (topGames) => {
+    const ids = (topGames ?? []).map((tg) => tg.id);
+    if (ids.length === 0)
+        return;
+    await getQueryClient()
+        .prefetchQuery({
+        queryKey: ['top-games', ids],
+        queryFn: async ({ signal }) => {
+            const results = await Promise.all(ids.map((id) => getGamesv2__next(id, { signal })));
+            return results.flatMap((res) => res.edges.map((edge) => edge.node));
+        },
+    })
+        .catch(() => log.text("'prefetchTopGamesQuery' failed", 'error'));
+});

package/dist/services/cmsPortal.d.ts

@@ -41,3 +41,4 @@ export interface GamesQueryVariables__Next {
 }
 export type GamesInput__Next = SimplifyDeep<GamesQueryVariables__Next>;
 export declare const getGames__next: (input?: GamesInput__Next, options?: HttpRequestOptions) => Promise<PaginatedQueryResult<Game>>;
+export declare const getGamesv2__next: (ids: string, options?: HttpRequestOptions) => Promise<PaginatedQueryResult<Game>>;

package/dist/services/cmsPortal.js

@@ -172,3 +172,43 @@ export const getGames__next = cache(async (input, options) => {
         };
     }
 });
+export const getGamesv2__next = cache(async (ids, options) => {
+    try {
+        const res = await httpRequest.json(`${CMS_PORTAL_ENDPOINT}/v2/games/${ids}`, {
+            cache: 'force-cache',
+            ...options,
+            next: {
+                revalidate: 60 * 60 * 4 /* 4hr */,
+                tags: ['games', ids],
+                ...options?.next,
+            },
+        });
+        const data = Array.isArray(res.data)
+            ? res.data
+            : res.data
+                ? [res.data]
+                : [];
+        return {
+            edges: data.map((node) => ({
+                node: node,
+                cursor: node.cursor,
+            })),
+            pageInfo: {
+                endCursor: res.next,
+                hasNextPage: Boolean(res.next),
+            },
+            totalCount: res.totalCount ?? data.length,
+            // ...
+        };
+    }
+    catch {
+        return {
+            edges: [],
+            totalCount: 0,
+            pageInfo: {
+                hasNextPage: false,
+                endCursor: null,
+            },
+        };
+    }
+});

package/dist/types/index.d.ts

@@ -185,6 +185,11 @@ export interface RecommendedGame {
     type: GameType;
     provider: GameProvider;
 }
+export interface TopGame {
+    id: string;
+    name: string;
+    provider?: GameProvider;
+}
 export type GameSessionStatus = 'PENDING' | 'STARTING' | 'READY' | 'ENDED' | 'CANCELLED';
 export interface GameSessionLaunchOptions {
     token: string;