@opexa/portal-components 0.1.40 → 0.1.42

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

@@ -9,12 +9,12 @@ 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';
 import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
 import { XIcon } from '../../icons/XIcon.js';
+import arcadeImg from '../../images/game-types/arcade.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';
@@ -37,7 +37,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,
     })));
@@ -57,6 +56,7 @@ export function Search(props) {
         NUMERIC: numericImg,
         FISHING: fishingImg,
         TABLE: tableImg,
+        ARCADE: arcadeImg,
     };
     const gameTypesFiltered = props.gameTypes
         .map((type) => GAME_TYPE_DATA[type])
@@ -66,12 +66,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 +87,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)) ?? []);
@@ -149,15 +156,13 @@ 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))) })] })), 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: () => {

package/package.json

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