@opexa/portal-components 0.0.124 → 0.0.125

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

@@ -2,6 +2,19 @@ import type { GameProvider, GameType } from '../../types';
 export interface BetRecordsProps {
     gameTypes: GameType[];
     gameProviders: GameProvider[];
+    /**
+     * Game providers grouped by game type.
+     * This is used to filter the game providers based on the selected game type.
+     * If not provided, all game providers will be shown regardless of the game type.
+     * @example
+     * ```ts
+     * gameProvidersGroup={{
+     *   SLOTS: ['JILI', 'PGSOFT', 'FACHAI'],
+     *   SPORTS: ['BTI', 'DIGITAIN']
+     * }}
+     * ```
+     */
+    gameProvidersGroup?: Partial<Record<GameType, GameProvider[]>>;
     className?: string;
 }
 export declare function BetRecords__client(props: BetRecordsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -40,8 +40,16 @@ export function BetRecords__client(props) {
         type: null,
     });
     const localeInfo = useLocaleInfo();
+    const providersByGroup = gameProviders.filter((o) => {
+        if (!state.type)
+            return true;
+        const l = props.gameProvidersGroup?.[state.type];
+        if (!l?.length)
+            return true;
+        return l.includes(o.id);
+    });
     const providerCollection = createListCollection({
-        items: gameProviders,
+        items: providersByGroup,
         itemToValue: (item) => item.id,
         itemToString: (item) => item.name,
     });

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/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/CustomPromo/CustomPromo.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 export function CustomPromo(props) {
     return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: props.promo.banner, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: props.promo.name }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
                     __html: props.promo.description,

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/FavoriteGames/FavoriteGames.client.js

@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
 import { Star01Icon } from '../../icons/Star01Icon.js';
@@ -50,7 +51,18 @@ export function FavoriteGames__client(props) {
 function Item({ game, className, }) {
     const sessionQuery = useSessionQuery();
     const session = sessionQuery.data;
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation({
+        onSuccess() {
+            toaster.create({
+                description: 'Game removed from favorites',
+            });
+        },
+        onError() {
+            toaster.create({
+                description: 'Failed to remove game from favorites',
+            });
+        },
+    });
     return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('relative block w-full shadow-sm', className?.thumbnailRoot), children: [session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();

package/dist/components/ForgotPassword/ForgotPasswordForm.js

@@ -70,7 +70,14 @@ export function ForgotPasswordForm() {
         }
     });
     const Step2Definition = z.object({
-        verificationCode: z.array(z.string().min(1).max(1).trim()).min(6).max(6),
+        verificationCode: z.array(z.string()).superRefine((val, ctx) => {
+            if (val.length !== 6 || val.some((v) => v.length !== 1)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Please Enter your 6 digits verification code',
+                });
+            }
+        }),
     });
     const step1Form = useForm({
         mode: 'all',
@@ -110,17 +117,17 @@ export function ForgotPasswordForm() {
                             }
                         }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "absolute left-3.5 top-1/2 flex shrink-0 -translate-y-1/2 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { style: {
                                                     paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
-                                                }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "New Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Continue" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
+                                                }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "New Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Continue" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", autoComplete: "off", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
                             resetPasswordMutation.mutate({
                                 mobileNumber: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
                                 newPassword: step1Form.getValues('newPassword'),
                                 verificationCode: verificationCode.join(''),
                             });
-                        }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(PinInput.Root, { placeholder: "0", invalid: o.fieldState.invalid, value: o.field.value, onValueChange: (details) => {
-                                        o.field.onChange(details.value);
-                                    }, onValueComplete: () => {
-                                        form2Ref.current?.requestSubmit();
-                                    }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: resetPasswordMutation.isPending, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                        }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", value: o.field.value, onValueChange: (details) => {
+                                                o.field.onChange(details.value);
+                                            }, onValueComplete: () => {
+                                                form2Ref.current?.requestSubmit();
+                                            }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: resetPasswordMutation.isPending, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

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

@@ -9,6 +9,7 @@ import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useMarkGameAsFavoriteMutation } from '../../client/hooks/useMarkGameAsFavoriteMutation.js';
 import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
 import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
@@ -21,7 +22,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,
@@ -46,8 +47,30 @@ export function GameLaunch() {
     const favoriteGamesQuery = useFavoriteGamesQuery();
     const favoriteGames = favoriteGamesQuery.data ?? [];
     const endGameSessionMutation = useEndGameSessionMutation();
-    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
+    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation({
+        onSuccess() {
+            toaster.create({
+                description: 'Game added to favorites',
+            });
+        },
+        onError() {
+            toaster.create({
+                description: 'Failed to add game to favorites',
+            });
+        },
+    });
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation({
+        onSuccess() {
+            toaster.create({
+                description: 'Game removed from favorites',
+            });
+        },
+        onError() {
+            toaster.create({
+                description: 'Failed to remove game from favorites',
+            });
+        },
+    });
     const markedAsFavorite = favoriteGames.some((favoriteGame) => {
         return !globalStore.gameLaunch.details.game
             ? false

package/dist/components/Games/Game.js

@@ -6,6 +6,7 @@ import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.
 import { useMarkGameAsFavoriteMutation } from '../../client/hooks/useMarkGameAsFavoriteMutation.js';
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
 import { Star01Icon } from '../../icons/Star01Icon.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
@@ -19,8 +20,30 @@ export function Game(props) {
     const session = sessionQuery.data;
     const favoriteGamesQuery = useFavoriteGamesQuery();
     const favoriteGames = favoriteGamesQuery.data ?? [];
-    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
+    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation({
+        onSuccess() {
+            toaster.create({
+                description: 'Game added to favorites',
+            });
+        },
+        onError() {
+            toaster.create({
+                description: 'Failed to add game to favorites',
+            });
+        },
+    });
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation({
+        onSuccess() {
+            toaster.create({
+                description: 'Game removed from favorites',
+            });
+        },
+        onError() {
+            toaster.create({
+                description: 'Failed to remove game from favorites',
+            });
+        },
+    });
     const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.reference);
     const classNames = isString(props.className)
         ? { root: props.className }

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) {