@opexa/portal-components 0.0.107 → 0.0.109

package/dist/client/hooks/useRemainingTime.js

@@ -1,8 +1,25 @@
-import { differenceInDays, differenceInHours, differenceInMinutes, isAfter, } from 'date-fns';
-import { isNumber, isString } from 'lodash-es';
-import { useState } from 'react';
+import { differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, isAfter, } from 'date-fns';
+import { isNumber, isString, noop } from 'lodash-es';
+import { useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
-export function useRemainingTime(value) {
+export function useRemainingTime(value, options = {}) {
+    const subscribers = useRef([
+        () => {
+            options.onExpired?.();
+            return noop;
+        },
+    ]);
+    const subscribe = (subscriber) => {
+        subscribers.current.push(subscriber);
+        return () => {
+            subscribers.current = subscribers.current.filter((item) => item !== subscriber);
+        };
+    };
+    const triggerEvent = (details) => {
+        subscribers.current.forEach((subscriber) => {
+            subscriber(details);
+        });
+    };
     const [now, setNow] = useState(new Date());
     const expiration = isString(value) || isNumber(value) ? new Date(value) : value;
     const expired = isAfter(now, expiration);
@@ -11,14 +28,28 @@ export function useRemainingTime(value) {
     const minutes = expired
         ? 0
         : differenceInMinutes(expiration, now) - days * 24 * 60 - hours * 60;
-    useInterval(() => setNow(new Date()), expired ? null : 1000);
+    const seconds = expired
+        ? 0
+        : differenceInSeconds(expiration, now) -
+            days * 24 * 60 * 60 -
+            hours * 60 * 60 -
+            minutes * 60;
+    useInterval(() => {
+        const d = new Date();
+        setNow(d);
+        if (isAfter(d, expiration)) {
+            triggerEvent({ type: 'EXPIRED' });
+        }
+    }, expired ? null : 1000);
     return {
         days,
         hours,
         minutes,
         expired,
+        seconds,
         toString() {
-            return `${days}d:${hours}h:${minutes}m`;
+            return `${days}d:${hours}h:${minutes}m:${seconds}s`;
         },
+        subscribe,
     };
 }

package/dist/client/hooks/useSendVerificationCodeMutation.js

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { sendVerificationCode, } from '../../services/auth.js';
-import { getSendVerificationCodeMutationKey } from '../../utils/queryKeys.js';
+import { getSendVerificationCodeMutationKey } from '../../utils/mutationKeys.js';
 export const useSendVerificationCodeMutation = (config) => {
     return useMutation({
         ...config,

package/dist/client/hooks/useSignInMutation.js

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { getQueryClient } from '../../utils/getQueryClient.js';
-import { getSessionQueryKey, getSignInMutationKey, } from '../../utils/queryKeys.js';
+import { getSignInMutationKey } from '../../utils/mutationKeys.js';
+import { getSessionQueryKey } from '../../utils/queryKeys.js';
 import { signIn } from '../services/signIn.js';
 export const useSignInMutation = (config) => {
     const queryClient = getQueryClient();

package/dist/client/hooks/useSignOutMutation.js

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { getQueryClient } from '../../utils/getQueryClient.js';
-import { getSessionQueryKey, getSignOutMutationKey, } from '../../utils/queryKeys.js';
+import { getSignOutMutationKey } from '../../utils/mutationKeys.js';
+import { getSessionQueryKey } from '../../utils/queryKeys.js';
 import { signOut } from '../services/signOut.js';
 export const useSignOutMutation = (config) => {
     const queryClient = getQueryClient();

package/dist/client/hooks/useSignUpMutation.js

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { registerMemberAccountViaMobile, } from '../../services/account.js';
-import { getSignUpMutationKey } from '../../utils/queryKeys.js';
+import { getSignUpMutationKey } from '../../utils/mutationKeys.js';
 export const useSignUpMutation = (config) => {
     return useMutation({
         ...config,

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

@@ -0,0 +1,2 @@
+import type { Query, Site } from '../../types';
+export declare const useSiteQuery: Query<Site>;

package/dist/client/hooks/useSiteQuery.js

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { SITE_ID } from '../../constants/index.js';
+import { getSite } from '../../services/cmsPortal.js';
+import { getSiteQueryKey } from '../../utils/queryKeys.js';
+export const useSiteQuery = (config) => {
+    return useQuery({
+        ...config,
+        queryKey: getSiteQueryKey(),
+        queryFn: async ({ signal }) => {
+            const site = await getSite(SITE_ID, { signal });
+            invariant(site);
+            return site;
+        },
+    });
+};

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

@@ -0,0 +1,2 @@
+import type { Mutation } from '../../types';
+export declare const useSkipOnboardingMutation: Mutation<void, void>;

package/dist/client/hooks/useSkipOnboardingMutation.js

@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { skipOnboarding } from '../../services/portal.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSkipOnboardingMutationKey } from '../../utils/mutationKeys.js';
+import { getOnboardingStatusQueryKey } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useSkipOnboardingMutation = (config) => {
+    const queryClient = getQueryClient();
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getSkipOnboardingMutationKey(),
+        mutationFn: async () => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await skipOnboarding({
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            queryClient.setQueryData(getOnboardingStatusQueryKey(), () => 'SKIPPED');
+        },
+    });
+    return mutation;
+};

package/dist/client/hooks/useUnmarkGameAsFavoriteMutation.js

@@ -2,7 +2,8 @@ import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { unmarkGameAsFavorite } from '../../services/wallet.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
-import { getFavoriteGamesQueryKey, getGamesQueryKey, getUnmarkGameAsFavoriteMutationKey, } from '../../utils/queryKeys.js';
+import { getUnmarkGameAsFavoriteMutationKey } from '../../utils/mutationKeys.js';
+import { getFavoriteGamesQueryKey } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useUnmarkGameAsFavoriteMutation = (config) => {
     const queryClient = getQueryClient();
@@ -17,10 +18,9 @@ export const useUnmarkGameAsFavoriteMutation = (config) => {
                     Authorization: `Bearer ${session.token}`,
                 },
             });
-        },
-        onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: getGamesQueryKey({}) });
-            queryClient.invalidateQueries({ queryKey: getFavoriteGamesQueryKey() });
+            queryClient.setQueryData(getFavoriteGamesQueryKey(), (prev) => {
+                return prev?.filter((game) => game.id !== id);
+            });
         },
     });
     return mutation;

package/dist/client/hooks/useUpdateAccountMutation.js

@@ -2,7 +2,8 @@ import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { updateMemberAccount, } from '../../services/account.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
-import { getAccountQueryKey, getProfileCompletionQueryKey, getUpdateAccountMutationKey, } from '../../utils/queryKeys.js';
+import { getUpdateAccountMutationKey } from '../../utils/mutationKeys.js';
+import { getAccountQueryKey, getProfileCompletionQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { useAccountQuery } from './useAccountQuery.js';
 export const useUpdateAccountMutation = (config) => {

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

@@ -0,0 +1,6 @@
+import { type UpdateMemberVerificationDataInput } from '../../services/account';
+import type { Mutation } from '../../types';
+export declare const useUpdateMemberVerificationMutation: Mutation<void, {
+    id: string;
+    data: UpdateMemberVerificationDataInput;
+}>;

package/dist/client/hooks/useUpdateMemberVerificationMutation.js

@@ -0,0 +1,38 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { updateMemberVerification__next, } from '../../services/account.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getUpdateMemberVerificationQueryKey } from '../../utils/mutationKeys.js';
+import { getMemberVerificationQueryKey } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUpdateMemberVerificationMutation = (config) => {
+    const queryClient = getQueryClient();
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getUpdateMemberVerificationQueryKey(),
+        mutationFn: async ({ id, data }) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await updateMemberVerification__next(id, data, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    ...data,
+                    idFrontImage: data.idFrontImage
+                        ? { id: data.idFrontImage, status: 'UPLOADING' }
+                        : prev.idFrontImage,
+                    selfieImage: data.selfieImage
+                        ? { id: data.selfieImage, status: 'UPLOADING' }
+                        : prev.selfieImage,
+                };
+            });
+        },
+    });
+    return mutation;
+};

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

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type UploadPrivateImageFileInput } from '../../services/file';
+import type { Mutation } from '../../types';
+export declare const useUploadImageFileMutation: Mutation<string, SetOptional<UploadPrivateImageFileInput, 'id'>>;

package/dist/client/hooks/useUploadImageFileMutation.js

@@ -0,0 +1,24 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { uploadPrivateImageFile, } from '../../services/file.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { getUploadImageFileMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUploadImageFileMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUploadImageFileMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
+            await uploadPrivateImageFile({ ...input, id }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return id;
+        },
+    });
+};

package/dist/client/utils/createContext.js

@@ -5,7 +5,7 @@ export function createContext(options) {
     const defaultValue = options?.defaultValue ?? null;
     const Context = React.createContext(defaultValue ?? null);
     function useContext() {
-        const context = React.useContext(Context);
+        const context = React.use(Context);
         if (!context && strict)
             invariant(context);
         return context;

package/dist/client/utils/createRecipeContext.js

@@ -4,7 +4,7 @@ import { createSplitProps } from '../../utils/createSplitProps.js';
 export function createRecipeContext(recipe) {
     const RecipeContext = React.createContext(null);
     function useContext() {
-        const context = React.useContext(RecipeContext);
+        const context = React.use(RecipeContext);
         return context;
     }
     function withRootProvider(Component) {

package/dist/components/BetRecords/BetRecords.client.js

@@ -26,7 +26,7 @@ import { Select } from '../../ui/Select/index.js';
 import { Table } from '../../ui/Table/index.js';
 import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 export function BetRecords__client(props) {
     const [tab, setTab] = useState('all');
     const gameTypes = props.gameTypes.map((type) => GAME_TYPE_DATA[type]);

package/dist/components/Bonus/Bonus.client.js

@@ -13,7 +13,7 @@ import piggyBank from '../../images/piggy-bank.png';
 import { Badge } from '../../ui/Badge/index.js';
 import { Collapsible } from '../../ui/Collapsible/index.js';
 import { Progress } from '../../ui/Progress/index.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';

package/dist/components/Bonuses/Bonuses.client.js

@@ -22,7 +22,7 @@ import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 const TABS = ['ALL', 'ACTIVE', 'CASHBACKS'];
 export function Bonuses__client(props) {
     const [tab, setTab] = useState(TABS[0]);

package/dist/components/Cashback/Cashback.client.js

@@ -11,7 +11,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { Button } from '../../ui/Button/index.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 export function Cashback__client(props) {
     const availablePromosQuery = useAvailablePromosQuery();
     const cashbackQuery = useCashbackQuery(props.id);

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,5 +1,5 @@
 export declare const OnlineBankDepositContext: import("react").Context<{
-    view: "form" | "vca";
+    view: "vca" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const OnlineBankDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useOnlineBankDepositContext: () => {
-    view: "form" | "vca";
+    view: "vca" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "form" | "vca";
+    view: "vca" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

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

@@ -1,5 +1,5 @@
 export declare const QRPHDepositContext: import("react").Context<{
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useQRPHDepositContext: () => {
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

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

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/Disclaimer/DisclaimerV1.js

@@ -11,5 +11,5 @@ import { useDisclaimer } from './useDisclaimer.js';
 export function DisclaimerV1(props) {
     const disclaimer = useDisclaimer();
     const acceptTriggerRef = useRef(null);
-    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirmI am 21 years of age and I agree with the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
+    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirm I am 21 years of age and I agree with the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
 }

package/dist/components/GameLaunch/GameLaunch.lazy.js

@@ -21,7 +21,7 @@ import { AlertDialog } from '../../ui/AlertDialog/index.js';
 import { Button } from '../../ui/Button/index.js';
 import { IconButton } from '../../ui/IconButton/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence.js';
+import { Presence } from '../../ui/Presence/index.js';
 export function GameLaunch() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         gameLaunch: ctx.gameLaunch,

package/dist/components/Games/Game.js

@@ -21,7 +21,7 @@ export function Game(props) {
     const favoriteGames = favoriteGamesQuery.data ?? [];
     const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
     const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
-    const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.id);
+    const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.reference);
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});

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

@@ -12,7 +12,7 @@ import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
 import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 import { Game } from './Game.js';
 import { GameContext } from './GamesContext.js';
 export function GamesCarousel__client(props) {

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

@@ -7,7 +7,7 @@ import { GamingPad01Icon } from '../../icons/GamingPad01Icon.js';
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Progress } from '../../ui/Progress/index.js';
-import { Empty } from '../Empty.js';
+import { Empty } from '../shared/Empty.js';
 import { Game } from './Game.js';
 import { GameContext } from './GamesContext.js';
 export function GamesList__client(props) {

package/dist/components/GamesSearch/GamesSearch.js

@@ -8,7 +8,7 @@ import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Combobox } from '../../ui/Combobox/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence.js';
+import { Presence } from '../../ui/Presence/index.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {