@opexa/portal-components 0.0.437 → 0.0.439

package/dist/client/hooks/usePaymentSettingsQuery.js

@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getPaymentSettings } from '../../services/account.js';
-import { getPaymentSettingsQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getPaymentSettingsQueryKey, getSessionQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const usePaymentSettingsQuery = (config) => {
@@ -13,7 +14,10 @@ export const usePaymentSettingsQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getPaymentSettingsQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await getSession({ signal });
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             return await getPaymentSettings({
                 signal,

package/dist/client/hooks/useProfileCompletionQuery.js

@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getProfileCompletion } from '../../services/account.js';
-import { getProfileCompletionQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getProfileCompletionQueryKey, getSessionQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useProfileCompletionQuery = (config) => {
@@ -13,7 +14,10 @@ export const useProfileCompletionQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getProfileCompletionQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await getSession({ signal });
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             return await getProfileCompletion({
                 signal,

package/dist/client/hooks/useRecommendedGamesQuery.js

@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getRecommendedGames } from '../../services/portal.js';
-import { getRecommendedGamesQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getRecommendedGamesQueryKey, getSessionQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useRecommendedGamesQuery = (config) => {
@@ -16,7 +17,10 @@ export const useRecommendedGamesQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getRecommendedGamesQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await getSession();
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             return await getRecommendedGames({
                 signal,

package/dist/client/hooks/useSessionHealthQuery.js

@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getSessionHealth } from '../../services/auth.js';
-import { getSessionHealthQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionHealthQueryKey, getSessionQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useSessionHealthQuery = (config) => {
@@ -15,7 +16,10 @@ export const useSessionHealthQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getSessionHealthQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await getSession({ signal });
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             const ok = await getSessionHealth({
                 signal,

package/dist/client/hooks/useTransactionRecordsQuery.js

@@ -1,7 +1,8 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getTransactionRecords, } from '../../services/report.js';
-import { getTransactionRecordsQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionQueryKey, getTransactionRecordsQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useTransactionRecordsQuery = (input, config) => {
@@ -14,7 +15,10 @@ export const useTransactionRecordsQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getTransactionRecordsQueryKey(input),
         queryFn: async ({ pageParam, signal }) => {
-            const session = await getSession({ signal });
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             return getTransactionRecords({ ...input, after: pageParam }, {
                 signal,

package/dist/client/hooks/useUnreadMessagesCountQuery.js

@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getUnreadMessagesCount, } from '../../services/trigger.js';
-import { getUnreadMessagesCountQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionQueryKey, getUnreadMessagesCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useUnreadMessagesCountQuery = (input, config) => {
@@ -14,7 +15,10 @@ export const useUnreadMessagesCountQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getUnreadMessagesCountQueryKey(input),
         queryFn: async ({ signal }) => {
-            const session = await getSession();
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             return await getUnreadMessagesCount(input, {
                 signal,

package/dist/client/hooks/useWalletQuery.js

@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getWallet } from '../../services/wallet.js';
-import { getWalletQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionQueryKey, getWalletQueryKey } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useWalletQuery = (config) => {
@@ -13,7 +14,10 @@ export const useWalletQuery = (config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getWalletQueryKey(),
         queryFn: async ({ signal }) => {
-            const session = await getSession({ signal });
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             const wallet = await getWallet({
                 signal,

package/dist/client/hooks/useWithdrawalRecordsQuery.js

@@ -1,7 +1,8 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { getWithdrawalRecords, } from '../../services/report.js';
-import { getWithdrawalRecordsQueryKey } from '../../utils/queryKeys.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionQueryKey, getWithdrawalRecordsQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useSessionQuery } from './useSessionQuery.js';
 export const useWithdrawalRecordsQuery = (input, config) => {
@@ -14,7 +15,10 @@ export const useWithdrawalRecordsQuery = (input, config) => {
             : sessionQuery.data?.status === 'authenticated',
         queryKey: getWithdrawalRecordsQueryKey(input),
         queryFn: async ({ pageParam, signal }) => {
-            const session = await getSession();
+            const session = await getQueryClient().fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: async () => getSession(),
+            });
             invariant(session.status === 'authenticated');
             return await getWithdrawalRecords({ ...input, after: pageParam }, {
                 signal,

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

@@ -0,0 +1,12 @@
+import type { ImageProps } from 'next/image';
+export interface BannerEntry {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: BannerEntry[];
+    imageWidth?: number | [mobile: number, desktop: number];
+    imageHeight?: number | [mobile: number, desktop: number];
+    className?: string;
+}
+export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr.js';
+export function Banner__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        function handler(detail) {
+            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
+        }
+        emblaApi?.on('scroll', handler);
+        emblaApi?.on('init', handler);
+        return () => {
+            emblaApi?.on('init', handler);
+            emblaApi?.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    const imageWidth = !props.imageWidth
+        ? [400, 1200]
+        : Array.isArray(props.imageWidth)
+            ? props.imageWidth
+            : [props.imageWidth, props.imageWidth];
+    const imageHeight = !props.imageHeight
+        ? [225, 300]
+        : Array.isArray(props.imageHeight)
+            ? props.imageHeight
+            : [props.imageHeight, props.imageHeight];
+    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
+                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                        emblaApi?.scrollTo(index);
+                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
+}

package/dist/components/DigitainLauncher/Loading.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Loading() {
-    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "border-blue-500 h-10 w-10 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-gray-700 text-lg font-medium", children: "Loading Sports Book\u2026" })] }) }));
+    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
 }

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

@@ -5,7 +5,9 @@ import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
 import { toaster } from '../../client/utils/toaster.js';
@@ -54,8 +56,11 @@ export function FavoriteGames__client(props) {
                         } }, game.id))) }) })] }));
 }
 function Item({ game, className, }) {
+    const featureFlag = useFeatureFlag();
     const sessionQuery = useSessionQuery();
     const session = sessionQuery.data;
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
     const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation({
         onSuccess() {
             toaster.success({
@@ -68,7 +73,12 @@ function Item({ game, className, }) {
             });
         },
     });
-    return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('hover:-translate-y-1 relative block w-full animate-scale-in shadow-sm transition-transform duration-200', className?.thumbnailRoot), children: [session?.status === 'authenticated' && (_jsx("div", { role: "button", tabIndex: 0, onClick: (e) => {
+    const markUnmarkGameAsFavoriteEnabled = session?.status !== 'authenticated'
+        ? false
+        : featureFlag.enabled
+            ? account?.status !== 'VERIFICATION_LOCKED'
+            : true;
+    return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('hover:-translate-y-1 relative block w-full animate-scale-in shadow-sm transition-transform duration-200', className?.thumbnailRoot), children: [markUnmarkGameAsFavoriteEnabled && (_jsx("div", { role: "button", tabIndex: 0, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (unmarkGameAsFavoriteMutation.isPending)

package/dist/components/GameLaunch/GameLaunchTrigger.js

@@ -2,12 +2,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react/factory';
 import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useCreateGameSessionMutation } from '../../client/hooks/useCreateGameSessionMutation.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { toaster } from '../../client/utils/toaster.js';
 export function GameLaunchTrigger(props) {
+    const featureFlag = useFeatureFlag();
     const sessionQuery = useSessionQuery();
+    const accountQuery = useAccountQuery();
     const createGameSessionMutation = useCreateGameSessionMutation();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signIn: ctx.signIn,
@@ -17,13 +21,16 @@ export function GameLaunchTrigger(props) {
     const between3amAnd3pm = currentHour >= 15 || currentHour < 3;
     const unavailable = !between3amAnd3pm &&
         ['Hwd1wEWHU6Gvfwecuh', 'HwdcKd7wDpwSPHGksq'].includes('reference' in props.game ? props.game.reference : props.game.id);
+    const locked = featureFlag.enabled && accountQuery.data?.status === 'VERIFICATION_LOCKED';
     const disabled = sessionQuery.data?.status === 'unauthenticated'
         ? false
-        : unavailable
+        : locked
             ? true
-            : globalStore.gameLaunch.details.status !== 'WAITING'
+            : unavailable
                 ? true
-                : props.disabled;
+                : globalStore.gameLaunch.details.status !== 'WAITING'
+                    ? true
+                    : props.disabled;
     return (_jsx(ark.button, { type: "button", "aria-label": `Play ${props.game.name}`, "data-state": sessionQuery.data?.status === 'unauthenticated'
             ? globalStore.signIn.open
                 ? 'open'

package/dist/components/Games/Game.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useMarkGameAsFavoriteMutation } from '../../client/hooks/useMarkGameAsFavoriteMutation.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
@@ -16,8 +18,11 @@ import { BadgeTop } from './BadgeTop.js';
 import { useGameContext } from './GamesContext.js';
 export function Game(props) {
     const game = useGameContext();
+    const featureFlag = useFeatureFlag();
     const sessionQuery = useSessionQuery();
     const session = sessionQuery.data;
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
     const favoriteGamesQuery = useFavoriteGamesQuery();
     const favoriteGames = favoriteGamesQuery.data ?? [];
     const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation({
@@ -48,7 +53,12 @@ export function Game(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
-    return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('group md:hover:-translate-y-1 relative block w-full animate-scale-in shadow-sm transition-transform duration-200', classNames.root), "aria-label": `Play ${game.name} game`, children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute top-0 left-0 size-[3.75rem]" })), session?.status === 'authenticated' && (_jsx("div", { role: "button", tabIndex: 0, onClick: (e) => {
+    const markUnmarkGameAsFavoriteEnabled = session?.status !== 'authenticated'
+        ? false
+        : featureFlag.enabled
+            ? account?.status !== 'VERIFICATION_LOCKED'
+            : true;
+    return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('group md:hover:-translate-y-1 relative block w-full animate-scale-in shadow-sm transition-transform duration-200', classNames.root), "aria-label": `Play ${game.name} game`, children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute top-0 left-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute top-0 left-0 size-[3.75rem]" })), markUnmarkGameAsFavoriteEnabled && (_jsx("div", { role: "button", tabIndex: 0, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (markGameAsFavoriteMutation.isPending)