@opexa/portal-components 0.1.39 → 0.1.41

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

@@ -9,7 +9,6 @@ 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 { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { GAME_PROVIDER_DATA, GAME_TYPE_DATA } from '../../constants/index.js';
@@ -37,7 +36,6 @@ function lookup(value, compare) {
 }
 export function Search(props) {
     const isBypass = useBypassKycChecker(props.bypassDomains);
-    const featureFlag = useFeatureFlag();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         search: ctx.search,
     })));
@@ -66,12 +64,15 @@ export function Search(props) {
         .filter((type) => {
         return props.gameTypeImages?.[type.id] ?? defaultGameTypeImages[type.id];
     });
+    const isProviderOrTypeSearch = gameProviders.length > 0 || gameTypesFiltered.length > 0;
     const gamesQuery = useGamesQuery({
         first: 18,
-        search: gameProviders.length > 0 ? undefined : search,
+        search: isProviderOrTypeSearch ? undefined : search,
         filter: {
             type: {
-                in: props.gameTypes,
+                in: gameTypesFiltered.length > 0
+                    ? gameTypesFiltered.map((t) => t.id)
+                    : props.gameTypes,
             },
             provider: {
                 in: gameProviders.length > 0
@@ -84,19 +85,23 @@ export function Search(props) {
     });
     const collapsedGamesQuery = useGamesQuery({
         first: 18,
-        search: collapsedSearch,
+        search: isProviderOrTypeSearch ? undefined : collapsedSearch,
         filter: {
             type: {
-                in: props.gameTypes,
+                in: gameTypesFiltered.length > 0
+                    ? gameTypesFiltered.map((t) => t.id)
+                    : props.gameTypes,
             },
             provider: {
-                in: props.gameProviders,
+                in: gameProviders.length > 0
+                    ? gameProviders.map((p) => p.id)
+                    : props.gameProviders,
             },
         },
     }, {
         enabled: search.length >= 2 &&
             hasSpaces &&
-            gameProviders.length === 0 &&
+            !isProviderOrTypeSearch &&
             collapsedSearch.length >= 2,
     });
     let games = mergeUniqueById(gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [], collapsedGamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? []);
@@ -104,6 +109,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) {
@@ -136,18 +154,16 @@ export function Search(props) {
     function fixMojibake(str) {
         return str.replace(/ÔÇÖ/g, "'").replace(/ÔÇô/g, '');
     }
-    console.log(gameTypesFiltered, 'gameTypesFiltered');
     return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => {
             globalStore.search.setOpen(details.open);
             setSearch('');
         }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "mx-auto min-h-full w-full overflow-y-auto bg-bg-primary pt-xl lg:mt-[132px] lg:min-h-auto lg:max-w-[1136px] lg:bg-unset lg:px-2 lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "size-6 text-text-quinary" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5 text-text-quinary" }), _jsx(DebouncedInput, { ref: inputRef, value: search, placeholder: props.placeholder ?? 'Search', onChange: setSearch }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "-translate-y-1/2 absolute top-1/2 right-3.5 cursor-pointer font-semibold text-text-secondary-700", onClick: () => {
                                                     setSearch('');
                                                     inputRef.current?.focus();
-                                                }, 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: () => {
+                                                }, 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 && (_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: () => {
+                                                                            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.39",
+  "version": "0.1.41",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",