@opexa/portal-components 0.1.38 → 0.1.40

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

@@ -15,13 +15,11 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { GAME_PROVIDER_DATA, GAME_TYPE_DATA } from '../../constants/index.js';
 import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
 import { XIcon } from '../../icons/XIcon.js';
-import arcadeImg from '../../images/game-types/arcade.png';
-import bingoImg from '../../images/game-types/bingo.png';
+import fishingImg from '../../images/game-types/fishing.png';
 import liveImg from '../../images/game-types/live.png';
 import numericImg from '../../images/game-types/numeric.png';
 import slotsImg from '../../images/game-types/slots.png';
-import specialtyImg from '../../images/game-types/specialty.png';
-import sportsImg from '../../images/game-types/sports.png';
+import tableImg from '../../images/game-types/table.png';
 import RainbowballImg from '../../images/rainbow-ball-online.webp';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
@@ -53,20 +51,21 @@ export function Search(props) {
         .filter((provider) => {
         return lookup(provider.name, search) || lookup(provider.slug, search);
     });
+    const defaultGameTypeImages = {
+        SLOTS: slotsImg,
+        LIVE: liveImg,
+        NUMERIC: numericImg,
+        FISHING: fishingImg,
+        TABLE: tableImg,
+    };
     const gameTypesFiltered = props.gameTypes
         .map((type) => GAME_TYPE_DATA[type])
         .filter((type) => {
         return lookup(type.name, search) || lookup(type.slug, search);
+    })
+        .filter((type) => {
+        return props.gameTypeImages?.[type.id] ?? defaultGameTypeImages[type.id];
     });
-    const defaultGameTypeImages = {
-        ARCADE: arcadeImg,
-        BINGO: bingoImg,
-        LIVE: liveImg,
-        NUMERIC: numericImg,
-        SLOTS: slotsImg,
-        SPECIALTY: specialtyImg,
-        SPORTS: sportsImg,
-    };
     const gamesQuery = useGamesQuery({
         first: 18,
         search: gameProviders.length > 0 ? undefined : search,
@@ -105,6 +104,19 @@ export function Search(props) {
         const normalizedSearch = normalizeGameName(search);
         games = games.filter((game) => normalizeGameName(game.name).includes(normalizedSearch));
     }
+    const providersFromGameTypes = gameTypesFiltered.length > 0 && games.length > 0
+        ? [
+            ...new Set(games
+                .filter((game) => gameTypesFiltered.some((gt) => gt.id === game.type))
+                .map((game) => game.provider)),
+        ]
+            .map((providerId) => GAME_PROVIDER_DATA[providerId])
+            .filter((p) => p != null)
+        : [];
+    const displayGameProviders = [
+        ...gameProviders,
+        ...providersFromGameTypes.filter((p) => !gameProviders.some((gp) => gp.id === p.id)),
+    ];
     const hasNextPage = gamesQuery.hasNextPage || collapsedGamesQuery.hasNextPage;
     function fetchNextPage() {
         if (gamesQuery.hasNextPage) {
@@ -147,9 +159,8 @@ 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, provider, or game type." })) : 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: [gameTypesFiltered.length > 0 &&
                                                         featureFlag.enabled && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Type" }), _jsx("div", { className: "mt-3.5 mb-3xl grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameTypesFiltered.map((type) => (_jsx(Link, { href: viewGameTypeUrl(type), "aria-label": `View ${type.name} games`, className: twMerge('flex h-14 w-full items-center rounded-md bg-bg-primary-alt', classNames.gameTypeThumbnailRoot), onClick: () => {
                                                                         globalStore.search.setOpen(false);
-                                                                    }, children: _jsx(Image, { src: props.gameTypeImages?.[type.id] ??
-                                                                            defaultGameTypeImages[type.id] ??
-                                                                            '', alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.gameTypeThumbnailName) }) }, type.id))) })] })), 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: () => {
+                                                                    }, children: _jsx(Image, { src: (props.gameTypeImages?.[type.id] ??
+                                                                            defaultGameTypeImages[type.id]), alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.gameTypeThumbnailName) }) }, type.id))) })] })), displayGameProviders.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: displayGameProviders.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: twMerge('mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, className: twMerge('block w-full shadow-sm', classNames.gameThumbnailRoot), onClick: () => {

package/package.json

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