@opexa/portal-components 0.0.123 → 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/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.d.ts

@@ -1,6 +1,12 @@
+interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
 export interface FavoriteGamesProps {
-    className?: string;
+    className?: string | ClassNameEntries;
     /** @default 'Favorite Games' */
     heading?: string;
 }
 export declare function FavoriteGames__client(props: FavoriteGamesProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -1,12 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { useCallback, useEffect, useState } from 'react';
 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';
@@ -38,13 +40,30 @@ export function FavoriteGames__client(props) {
     const games = gamesQuery.data ?? [];
     if (games.length <= 0)
         return null;
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Favorite Games' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md'), children: games.map((game) => (_jsx(Item, { game: game }, game.id))) }) })] }));
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Favorite Games' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md'), children: games.map((game) => (_jsx(Item, { game: game, className: {
+                            thumbnailRoot: classNames.thumbnailRoot,
+                            thumbnailTitle: classNames.thumbnailTitle,
+                        } }, game.id))) }) })] }));
 }
-function Item({ game }) {
+function Item({ game, className, }) {
     const sessionQuery = useSessionQuery();
     const session = sessionQuery.data;
-    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
-    return (_jsxs(GameLaunchTrigger, { game: game, className: "relative block w-full shadow-sm", children: [session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
+    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();
                     if (unmarkGameAsFavoriteMutation.isPending)
@@ -53,5 +72,5 @@ function Item({ game }) {
                 }, "aria-disabled": unmarkGameAsFavoriteMutation.isPending, className: "rounded-xs absolute right-2 top-2 flex size-9 items-center justify-center bg-black/65 blur-[0.5px]", children: _jsx(Star01Icon, { className: "fill-yellow-400 text-yellow-400 size-5" }) })), _jsx(Image, { src: getGameImageUrl({
                     id: game.id,
                     provider: game.provider,
-                }), alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }));
+                }), alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-3.5 text-center text-xs font-semibold', className?.thumbnailTitle), children: game.name })] }));
 }

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';
@@ -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/Jackpots/JackpotsList/JackpotsList.d.ts

@@ -1,6 +1,6 @@
 import { type ImageProps } from 'next/image';
 import type { CSSProperties } from 'react';
-import type { GameProvider } from '../../../types';
+import type { GameProvider, GameProviderData } from '../../../types';
 interface ClassNameEntries {
     root?: string;
     itemRoot?: string;
@@ -19,6 +19,17 @@ export interface JackpotsListProps {
     style?: CSSProperties | StyleEntries;
     gameProviders: GameProvider[];
     gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
+    /**
+     * @default '/providers/<slug>'
+     * @example
+     * ```ts
+     * '/bingo/:slug' // '/bingo/jili'
+     * '/bingo/:id'   // '/bingo/JILI'
+     * // or using a function
+     * ({slug}) => `/bingo/${slug}`
+     * ```
+     */
+    viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
     animate?: boolean;
 }
 export declare function JackpotsList(props: JackpotsListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Jackpots/JackpotsList/JackpotsListItemGameProviders.js

@@ -8,9 +8,20 @@ import { twMerge } from 'tailwind-merge';
 import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
 import { Button } from '../../../ui/Button/index.js';
+import { callIfFn } from '../../../utils/callIfFn.js';
 import { useJackpotsListPropsContext } from './JackpotsListContext.js';
 export function JackpotsListItemGameProviders({ gameProviders, }) {
-    const props = useJackpotsListPropsContext();
+    const jackpotsProps = useJackpotsListPropsContext();
+    const viewGamesUrl = (data) => {
+        return jackpotsProps.viewGamesUrl
+            ? callIfFn(jackpotsProps.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
+    const classNames = isString(jackpotsProps.className)
+        ? { root: jackpotsProps.className }
+        : (jackpotsProps.className ?? {});
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 1,
@@ -38,10 +49,6 @@ export function JackpotsListItemGameProviders({ gameProviders, }) {
         emblaApi.on('select', onSelect);
         emblaApi.on('reInit', onSelect);
     }, [emblaApi, onSelect]);
-    const jackpotsProps = useJackpotsListPropsContext();
-    const classNames = isString(props.className)
-        ? { root: props.className }
-        : (props.className ?? {});
-    return (_jsxs("div", { className: "p-4 pb-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider, i) => (_jsx(Link, { href: `/${provider.slug}`, className: twMerge('bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md', classNames.providerThumbnailRoot), children: _jsx(Image, { src: jackpotsProps.gameProviderImages?.[provider.id] ??
-                                provider.logo, alt: "provider", className: twMerge('size-full', classNames.providerThumbnailImage), width: 300, height: 150 }) }, i))) }) })] }));
+    return (_jsxs("div", { className: "p-4 pb-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md', classNames.providerThumbnailRoot), children: _jsx(Image, { src: jackpotsProps.gameProviderImages?.[provider.id] ??
+                                provider.logo, alt: "provider", className: twMerge('size-full', classNames.providerThumbnailImage), width: 300, height: 150 }) }, provider.slug))) }) })] }));
 }

package/dist/components/KYC/CaptureSelfie.js

@@ -8,6 +8,7 @@ import { Camera01Icon } from '../../icons/Camera01Icon.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
+import { onMobileDevice } from '../../utils/onMobileDevice.js';
 import { useKYCContext } from './KYCContext.js';
 import { loadFaceApiModels } from './loadModels.js';
 import PersonOverlayDesktop from './PersonOverlayDesktop.js';
@@ -15,6 +16,7 @@ import { dataURLtoBlob, resizeFile } from './utils.js';
 export function CaptureSelfie() {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();
+    const mobileDevice = onMobileDevice();
     const [modelsLoaded, setModelsLoaded] = useState(false);
     const [videoStream, setVideoStream] = useState(null);
     const [cameraError, setCameraError] = useState(null);
@@ -40,8 +42,8 @@ export function CaptureSelfie() {
         setCaptureInProgress(true);
         const stream = await navigator.mediaDevices.getUserMedia({
             video: {
-                facingMode: 'environment',
-                aspectRatio: 16 / 9,
+                facingMode: mobileDevice ? 'user' : 'environment',
+                aspectRatio: mobileDevice ? 9 / 16 : 16 / 9,
                 width: { ideal: 1920 },
                 height: { ideal: 1080 },
             },
@@ -232,5 +234,5 @@ export function CaptureSelfie() {
     return (_jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => {
                     stopCamera();
                     kyc.setCapturing(null);
-                }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: "Make sure your face and ID are clearly visible, with no glare or blur." }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoRef, autoPlay: true, muted: true, className: "h-[60vh] w-full rounded-lg object-cover md:aspect-video md:h-[333px]", width: "100%", height: "100%" }), _jsx("canvas", { ref: faceCanvasRef, className: "absolute inset-0 h-[60vh] w-full object-cover md:aspect-video md:h-[333px] md:object-contain", width: "100%", height: "100%" }), isFaceCentered && (_jsx("span", { className: "absolute inset-x-0 bottom-4 flex items-center justify-center text-5xl font-bold text-[#713B12CC]", children: countdown })), !isFaceCentered && (_jsx("span", { className: "absolute inset-x-0 bottom-12 mx-auto w-1/2 text-center text-xs text-white md:bottom-3", children: "Please center your face in the camera view. Make sure your ID is clearly visible next to your face." })), _jsx(PersonOverlayDesktop, { isFaceCentered: isFaceCentered, width: videoRef.current?.clientWidth || 543, height: videoRef.current?.clientHeight || 333 })] })) : (selectedImage && (_jsx("img", { src: selectedImage, alt: "Captured Photo", className: "h-full w-full rounded-lg object-cover md:aspect-video md:h-[333px]" }))) }), selectedImage && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-4 px-xl disabled:opacity-100", size: "sm", onClick: retakePhoto, type: "button", children: ["Rekate Photo", _jsx(Camera01Icon, { className: "size-5" })] }), _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-4 px-xl disabled:opacity-100", size: "sm", onClick: usePhoto, type: "button", disabled: isPending, children: ["Use Photo", _jsx(Camera01Icon, { className: "size-5" })] })] })), !selectedImage && (_jsxs(Button, { className: "mx-auto mt-6 px-xl lg:mt-8", onClick: startCamera, disabled: !modelsLoaded, type: "button", children: ["Start Camera", _jsx(Camera01Icon, { className: "size-5" })] }))] }));
+                }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: "Make sure your face and ID are clearly visible, with no glare or blur." }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoRef, autoPlay: true, muted: true, className: "h-[60vh] w-full rounded-lg object-cover md:aspect-video md:h-[333px]", width: "100%", height: "100%" }), _jsx("canvas", { ref: faceCanvasRef, className: "absolute inset-0 h-[60vh] w-full object-cover md:aspect-video md:h-[333px] md:object-contain", width: "100%", height: "100%" }), isFaceCentered && (_jsx("span", { className: "absolute inset-x-0 bottom-8 flex items-center justify-center text-5xl font-bold text-[#713B12CC] md:bottom-4", children: countdown })), !isFaceCentered && (_jsx("span", { className: "absolute inset-x-0 bottom-12 mx-auto w-1/2 text-center text-xs text-white md:bottom-3", children: "Please center your face in the camera view. Make sure your ID is clearly visible next to your face." })), _jsx(PersonOverlayDesktop, { isFaceCentered: isFaceCentered, width: videoRef.current?.clientWidth || 543, height: videoRef.current?.clientHeight || 333 })] })) : (selectedImage && (_jsx("img", { src: selectedImage, alt: "Captured Photo", className: "h-full w-full rounded-lg object-cover md:aspect-video md:h-[333px]" }))) }), selectedImage && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-4 px-xl disabled:opacity-100", size: "sm", onClick: retakePhoto, type: "button", children: ["Rekate Photo", _jsx(Camera01Icon, { className: "size-5" })] }), _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-4 px-xl disabled:opacity-100", size: "sm", onClick: usePhoto, type: "button", disabled: isPending, children: ["Use Photo", _jsx(Camera01Icon, { className: "size-5" })] })] })), !selectedImage && (_jsxs(Button, { className: "mx-auto mt-6 px-xl lg:mt-8", onClick: startCamera, disabled: !modelsLoaded, type: "button", children: ["Start Camera", _jsx(Camera01Icon, { className: "size-5" })] }))] }));
 }

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -53,7 +53,14 @@ export function MobileNumberSignIn() {
         }),
     });
     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({
         resolver: zodResolver(Step1Definition),
@@ -119,11 +126,12 @@ export function MobileNumberSignIn() {
                                     description: 'Invalid Verification Code',
                                 });
                             }
-                        }), 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);
-                                    }, otp: true, 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: step2Form.formState.isSubmitting, 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: 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);
+                                                o.field.onBlur();
+                                            }, otp: true, 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.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, 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: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -119,7 +119,7 @@ export function NameAndPasswordSignIn() {
                                         signInMutation.reset();
                                         form.setValue('secretAnswer', '');
                                     },
-                                }) }), _jsx(Field.ErrorText, { children: form.formState.errors.name?.message })] }), _jsx(Field.Root, { disabled: !!signInMutation.data, invalid: !!form.formState.errors.name, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", tabIndex: -1, className: "text-button-tertiary-fg text-sm font-semibold", onClick: () => {
+                                }) }), _jsx(Field.ErrorText, { children: form.formState.errors.name?.message })] }), _jsx(Field.Root, { disabled: !!signInMutation.data, invalid: !!form.formState.errors.password, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", tabIndex: -1, className: "text-button-tertiary-fg text-sm font-semibold", onClick: () => {
                                             globalStore.forgotPassword.setOpen(true);
                                             dialog.setOpen(false);
                                         }, children: "Forgot Password" }) })] }) }), signInMutation.data && (_jsxs(Field.Root, { invalid: !!form.formState.errors.secretAnswer, className: "mt-xl", children: [_jsx(Field.Label, { children: secretQuestion }), _jsx(Field.Input, { placeholder: "Answer the security question", ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: signInMutation.isPending || authenticateMutation.isPending, children: "Log In" }), _jsx(Controller, { control: form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {

package/dist/components/SignUp/SignUpForm.js

@@ -54,7 +54,10 @@ export function SignUpForm() {
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
     const Step1Definition = z.object({
-        mobileNumber: z.string().superRefine((v, ctx) => {
+        mobileNumber: z
+            .string()
+            .min(1, 'Mobile number is required')
+            .superRefine((v, ctx) => {
             if (!mobileNumberParser.validate(v)) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
@@ -93,7 +96,14 @@ export function SignUpForm() {
         branchCode: z.string().min(1, 'Branch is required').trim(),
     });
     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',
@@ -118,7 +128,7 @@ export function SignUpForm() {
     const form2Ref = useRef(null);
     const birthDay = step1Form.watch('birthDay');
     const branchCode = step1Form.watch('branchCode', '');
-    return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+    return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
                             try {
                                 await sendVerificationCodeMutation.mutateAsync({
                                     channel: 'SMS',
@@ -145,7 +155,9 @@ export function SignUpForm() {
                                                     shouldValidate: true,
                                                 });
                                             }
-                                        }, children: [_jsx(DatePicker.Label, { children: "Date of Birth" }), _jsxs(DatePicker.Control, { children: [_jsx(DatePicker.Input, {}), _jsx(DatePicker.Trigger, { children: _jsx(CalendarIcon, {}) })] }), _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.birthDay?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.branchCode, className: "mt-xl", children: [_jsxs(Select.Root, { value: [branchCode], onValueChange: (details) => {
+                                        }, children: [_jsx(DatePicker.Label, { children: "Date of Birth" }), _jsxs(DatePicker.Control, { children: [_jsx(DatePicker.Input, { onBlur: () => {
+                                                            step1Form.trigger('birthDay');
+                                                        } }), _jsx(DatePicker.Trigger, { children: _jsx(CalendarIcon, {}) })] }), _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.birthDay?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.branchCode, className: "mt-xl", children: [_jsxs(Select.Root, { value: [branchCode], onValueChange: (details) => {
                                             step1Form.setValue('branchCode', details.value.at(0) ?? BRANCH_CODES[0].code, {
                                                 shouldDirty: true,
                                                 shouldTouch: true,
@@ -213,17 +225,16 @@ export function SignUpForm() {
                             }
                             catch (error) {
                                 toaster.error({
-                                    title: 'Login Failed',
                                     description: error instanceof Error
                                         ? error.message
                                         : 'Invalid Verification Code',
                                 });
                             }
-                        }), 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: step2Form.formState.isSubmitting, 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: step2Form.formState.isSubmitting, 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/Tournaments/TournamentsList/TournamentsList.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { GameProvider } from '../../../types';
+import type { GameProvider, GameProviderData } from '../../../types';
 interface ClassNameEntries {
     root?: string;
     itemRoot?: string;
@@ -21,6 +21,17 @@ export interface TournamentsListProps {
     className?: string | ClassNameEntries;
     style?: CSSProperties | StyleEntries;
     gameProviders: GameProvider[];
+    /**
+     * @default '/providers/<slug>'
+     * @example
+     * ```ts
+     * '/bingo/:slug' // '/bingo/jili'
+     * '/bingo/:id'   // '/bingo/JILI'
+     * // or using a function
+     * ({slug}) => `/bingo/${slug}`
+     * ```
+     */
+    viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
 }
 export declare function TournamentsList({ style, className, ...props }: TournamentsListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tournaments/TournamentsList/TournamentsListItemGameProviders.js

@@ -6,7 +6,17 @@ import { useCallback, useEffect, useState } from 'react';
 import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
 import { Button } from '../../../ui/Button/index.js';
+import { callIfFn } from '../../../utils/callIfFn.js';
+import { useTournamentsListPropsContext } from './TournamentsListContext.js';
 export function TournamentsListItemGameProviders({ gameProviders, }) {
+    const tournamentsProps = useTournamentsListPropsContext();
+    const viewGamesUrl = (data) => {
+        return tournamentsProps.viewGamesUrl
+            ? callIfFn(tournamentsProps.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 1,
@@ -34,5 +44,5 @@ export function TournamentsListItemGameProviders({ gameProviders, }) {
         emblaApi.on('select', onSelect);
         emblaApi.on('reInit', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: "p-4 pb-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Tournament Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider, i) => (_jsx(Link, { href: `/${provider.slug}`, className: "bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md", children: _jsx(Image, { src: provider.logo, alt: "provider", className: "size-full", width: 300, height: 150 }) }, i))) }) })] }));
+    return (_jsxs("div", { className: "p-4 pb-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Tournament Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: "bg-gray-800 lg:bg-bg-primary-900 min-w-27.5 rounded-md", children: _jsx(Image, { src: provider.logo, alt: "provider", className: "size-full", width: 300, height: 150 }) }, provider.slug))) }) })] }));
 }