@opexa/portal-components 0.0.829 → 0.0.831

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

@@ -0,0 +1,5 @@
+export type BypassDomainConfig = {
+    domain: string;
+    isBypass: boolean;
+};
+export declare function useBypassKycChecker(bypassDomains: BypassDomainConfig[] | undefined): boolean;

package/dist/client/hooks/useBypassKycChecker.js

@@ -0,0 +1,14 @@
+'use client';
+import { useMemo } from 'react';
+export function useBypassKycChecker(bypassDomains) {
+    const isBypassKyc = useMemo(() => {
+        if (typeof window === 'undefined' ||
+            !bypassDomains ||
+            bypassDomains.length === 0) {
+            return false;
+        }
+        const host = window.location.hostname;
+        return bypassDomains.some(({ domain, isBypass }) => isBypass && host === domain);
+    }, [bypassDomains]);
+    return isBypassKyc;
+}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+        status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
         deposit: import("../../../../types").Deposit | null;
         generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
         regenerateQRCode: () => Promise<void>;
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
     deposit: import("../../../../types").Deposit | null;
     generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
     regenerateQRCode: () => Promise<void>;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useQRPHDeposit(): {
-    status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
     deposit: Deposit | null;
     generateQRCode: (input: GenerateQRCodeInput) => Promise<void>;
     regenerateQRCode: () => Promise<void>;

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts

@@ -1,3 +1,4 @@
+import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
 export interface DepositWithdrawalProps {
     /** @default "/terms-of-use" */
     termsOfUseUrl?: string;
@@ -8,6 +9,9 @@ export interface DepositWithdrawalProps {
     allowUnverifiedAccounts?: boolean;
     libanganRedirectionUrl?: string;
     hasPrivacyPolicyAndTermsOfUse?: boolean;
-    bypassDepositKycCheck?: boolean;
+    bypassDomains?: BypassDomainConfig[];
+}
+export interface ExtendedDepositWithdrawalProps extends DepositWithdrawalProps {
+    bypassDepositKycCheck: boolean;
 }
 export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
 import { useBonusesQuery } from '../../client/hooks/useBonusesQuery.js';
+import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
@@ -19,10 +20,12 @@ import { DepositWithdrawalPropsProvider } from './DepositWithdrawalContext.js';
 import { HasPendingBonuses } from './HasPendingBonuses.js';
 import { Withdrawal } from './Withdrawal/Withdrawal.js';
 export function DepositWithdrawal(props) {
+    const bypassDepositKycCheck = useBypassKycChecker(props.bypassDomains);
     const { hasPrivacyPolicyAndTermsOfUse = true, ...restProps } = props;
     const mergedProps = {
         ...restProps,
         hasPrivacyPolicyAndTermsOfUse,
+        bypassDepositKycCheck,
     };
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,

package/dist/components/DepositWithdrawal/DepositWithdrawalContext.d.ts

@@ -1,6 +1,6 @@
-import type { DepositWithdrawalProps } from './DepositWithdrawal.lazy';
+import type { ExtendedDepositWithdrawalProps } from './DepositWithdrawal.lazy';
 export declare const DepositWithdrawalPropsProvider: (props: {
-    value: DepositWithdrawalProps;
+    value: ExtendedDepositWithdrawalProps;
 } & {
     children?: import("react").ReactNode | undefined;
-}) => React.ReactNode, useDepositWithdrawalPropsContext: () => DepositWithdrawalProps;
+}) => React.ReactNode, useDepositWithdrawalPropsContext: () => ExtendedDepositWithdrawalProps;

package/dist/components/FavoriteGames/FavoriteGames.client.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
 interface ClassNameEntries {
     root?: string;
     thumbnailRoot?: string;
@@ -8,7 +9,7 @@ export interface FavoriteGamesProps {
     className?: string | ClassNameEntries;
     /** @default 'Favorite Games' */
     heading?: string | ReactNode;
-    bypassKycCheck?: boolean;
+    bypassDomains?: BypassDomainConfig[];
 }
 export declare function FavoriteGames__client(props: FavoriteGamesProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/FavoriteGames/FavoriteGames.client.js

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
 import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
@@ -18,6 +19,7 @@ import { Button } from '../../ui/Button/index.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function FavoriteGames__client(props) {
+    const isBypass = useBypassKycChecker(props.bypassDomains);
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 3,
@@ -50,7 +52,7 @@ export function FavoriteGames__client(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
-    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Favorite Games' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md'), children: games.map((game) => (_jsx(Item, { bypassKycCheck: props.bypassKycCheck, game: game, className: {
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Favorite Games' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md'), children: games.map((game) => (_jsx(Item, { bypassKycCheck: isBypass, game: game, className: {
                             thumbnailRoot: classNames.thumbnailRoot,
                             thumbnailTitle: classNames.thumbnailTitle,
                         } }, game.id))) }) })] }));

package/dist/components/Games/Game.js

@@ -85,6 +85,7 @@ function GameImage() {
     const [imgSrc, setImgSrc] = useState(getGameImageUrl({
         reference: game.reference,
         provider: game.provider,
+        image: game.image,
     }));
     return (_jsx(Image, { src: imgSrc, alt: game.name, width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-contain", onError: () => {
             const fallbackThumbnail = props.fallbackThumbnails?.[game.provider];

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

@@ -1,5 +1,6 @@
 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';
 interface ClassNameEntries {
@@ -24,7 +25,7 @@ export interface GamesCarouselProps {
     sort?: GamesInput__Next['sort'];
     className?: string | ClassNameEntries;
     fallbackThumbnails?: Partial<Record<GameProvider, ImageProps['src']>>;
-    bypassKycCheck?: boolean;
+    bypassDomains?: BypassDomainConfig[];
 }
 export declare function GamesCarousel__client(props: GamesCarouselProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ import { isString } from 'lodash-es';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
@@ -16,6 +17,7 @@ import { Empty } from '../shared/Empty.js';
 import { Game } from './Game.js';
 import { GameContext, GamesPropsContext } from './GamesContext.js';
 export function GamesCarousel__client(props) {
+    const isBypass = useBypassKycChecker(props.bypassDomains);
     const numOfRows = props.numOfRows ?? 1;
     const gamesQuery = useGamesQuery({
         first: (numOfRows + 1) * 6,
@@ -63,7 +65,7 @@ export function GamesCarousel__client(props) {
                             ? 'grid-rows-3'
                             : numOfRows === 2
                                 ? 'grid-rows-2'
-                                : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { bypassKycCheck: props.bypassKycCheck, badge: props.badge, className: {
+                                : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { bypassKycCheck: isBypass, badge: props.badge, className: {
                                     root: classNames.thumbnailRoot,
                                     title: classNames.thumbnailTitle,
                                 } }) }, game.id))) }) }))] }) }));

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

@@ -1,5 +1,6 @@
 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';
 interface ClassNameEntries {
@@ -24,7 +25,7 @@ export interface GamesListProps {
     className?: string | ClassNameEntries;
     pagination?: 'lazy-load' | 'paginated';
     fallbackThumbnails?: Partial<Record<GameProvider, ImageProps['src']>>;
-    bypassKycCheck?: boolean;
+    bypassDomains?: BypassDomainConfig[];
 }
 export declare function GamesList__client(props: GamesListProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ import { isString, noop } from 'lodash-es';
 import Link from 'next/link';
 import { useEffect, 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 { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
@@ -16,6 +17,7 @@ import { Game } from './Game.js';
 import { GameContext, GamesPropsContext } from './GamesContext.js';
 import { GamesPagination } from './GamesPagination.js';
 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, {
@@ -50,7 +52,7 @@ export function GamesList__client(props) {
                                 ? 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
                         ? '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) => (_jsx(GameContext, { value: game, children: _jsx(Game, { bypassKycCheck: props.bypassKycCheck, badge: props.badge, className: {
+                        : '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) => (_jsx(GameContext, { value: game, children: _jsx(Game, { bypassKycCheck: isBypass, badge: props.badge, 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) => {

package/dist/components/GamesSearch/GamesSearch.d.ts

@@ -1,3 +1,4 @@
+import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
 import type { GamesInput__Next } from '../../services/cmsPortal';
 export interface ClassNameEntries {
     root?: string;
@@ -11,7 +12,7 @@ interface GamesSearchProps {
     sort?: GamesInput__Next['sort'];
     className?: string | ClassNameEntries;
     placeholder?: string;
-    bypassKycCheck?: boolean;
+    bypassDomains?: BypassDomainConfig[];
 }
 export declare function GamesSearch(props: GamesSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/GamesSearch/GamesSearch.js

@@ -5,6 +5,7 @@ import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
 import { Button } from '../../ui/Button/index.js';
@@ -14,6 +15,7 @@ import { Presence } from '../../ui/Presence/index.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {
+    const isBypass = useBypassKycChecker(props.bypassDomains);
     const [search, setSearch] = useState('');
     const gamesQuery = useGamesQuery({
         first: props.first ?? 18,
@@ -44,7 +46,7 @@ export function GamesSearch(props) {
                                         api.setInputValue('');
                                         api.focus();
                                     }, children: "Clear" }));
-                            } })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { children: search.trim().length > 0 && (_jsx(Combobox.Content, { className: "z-50 max-h-[33.25rem] overflow-y-auto p-0", children: search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: "grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: props.bypassKycCheck, game: game, onClick: () => {
+                            } })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { children: search.trim().length > 0 && (_jsx(Combobox.Content, { className: "z-50 max-h-[33.25rem] overflow-y-auto p-0", children: search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: "grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, onClick: () => {
                                                                         api.setOpen(false);
                                                                     }, className: twMerge('block w-full shadow-sm', classNames.thumbnailRoot), children: [_jsx(Image, { src: getGameImageUrl({
                                                                                 reference: game.reference,

package/dist/components/Search/Search.lazy.d.ts

@@ -1,4 +1,5 @@
 import { type ImageProps } from 'next/image';
+import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
 import type { GameProvider, GameProviderData, GameType } from '../../types';
 export interface ClassNameEntries {
     root?: string;
@@ -26,6 +27,6 @@ export interface SearchProps {
     viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
     gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
     placeholder?: string;
-    bypassKycCheck?: boolean;
+    bypassDomains?: BypassDomainConfig[];
 }
 export declare function Search(props: SearchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Search/Search.lazy.js

@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useDebounceCallback } from 'usehooks-ts';
 import { useShallow } from 'zustand/shallow';
+import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -29,6 +30,7 @@ function lookup(value, compare) {
         .includes(compare.toLowerCase().replace(/\s+/g, ''));
 }
 export function Search(props) {
+    const isBypass = useBypassKycChecker(props.bypassDomains);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         search: ctx.search,
     })));
@@ -77,7 +79,7 @@ export function Search(props) {
                                                 }, children: "Clear" }) })] }) }), _jsx("div", { className: "flex max-h-[85dvh] min-h-0 flex-1 flex-col", children: _jsx("div", { className: "mt-2xl p-xl pb-3xl lg:mt-2 lg:max-h-[41rem] lg:overflow-y-auto lg:rounded-xl lg:border lg:border-border-primary lg:bg-bg-primary", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length === 1 ? (_jsx(Alert, { message: "Search requires at least 2 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Providers" }), _jsx("div", { className: "mt-3.5 mb-3xl grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('flex h-14 w-full items-center rounded-md bg-brand-800', classNames.providerThumbnailRoot), onClick: () => {
                                                                         globalStore.search.setOpen(false);
                                                                     }, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ??
-                                                                            provider.logo, alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.providerThumbnailImage) }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: props.bypassKycCheck, game: game, className: twMerge('block w-full shadow-sm', classNames.gameThumbnailRoot), onClick: () => {
+                                                                            provider.logo, alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.providerThumbnailImage) }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, className: twMerge('block w-full shadow-sm', classNames.gameThumbnailRoot), onClick: () => {
                                                                         globalStore.search.setOpen(false);
                                                                     }, children: [_jsx(Image, { src: getGameImageUrl({
                                                                                 reference: game.reference,

package/dist/utils/getGameImageUrl.d.ts

@@ -4,11 +4,13 @@ type Args = {
     reference?: never;
     provider: GameProvider;
     version?: string;
+    image?: string | null;
 } | {
     id?: never;
     reference: string;
     provider: GameProvider;
     version?: string;
+    image?: string | null;
 };
 export declare const getGameImageUrl: <T extends Args>(args: T) => string;
 export {};

package/dist/utils/getGameImageUrl.js

@@ -13,6 +13,9 @@ export const getGameImageUrl = cache((args) => {
     const rainbowBallOnline = `${STATIC_ENDPOINT}/images/${provider}/rainbow-ball-online.webp?_v=${version}`;
     const currentHour = new Date().getHours();
     const between3amAnd3pm = currentHour >= 15 || currentHour < 3;
+    if (args.image) {
+        return args.image;
+    }
     switch (id) {
         case MARBLE_GAME_REFERENCE:
             return between3amAnd3pm ? marbleGameOnline : marbleGameOffline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.829",
+  "version": "0.0.831",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",