@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/AccountSecurity/AccountSecurity.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ark, createListCollection, Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { useProfileCompletionQuery } from '../../client/hooks/index.js';
+import { AlertCircleIcon, CheckIcon, CheckVerified02Icon, ChevronDownIcon, EyeIcon, EyeOffIcon, } from '../../icons/index.js';
+import { Field, PasswordInput, Select } from '../../ui/index.js';
+export function AccountSecurity(props) {
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Log in password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Access your account by logging in with your name and password." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
+                            ? 'text-text-success-primary'
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsx(Field.Root, { children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, {}), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }) }), _jsx(Field.Root, { className: "mt-6", children: _jsxs(Select.Root, { collection: secretQuestionCollection, lazyMount: true, positioning: {
+                                sameWidth: true,
+                            }, children: [_jsx(Select.Label, { children: "Security Question" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: secretQuestionCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: secretQuestionCollection.stringifyItem(provider) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }) }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Answer" }), _jsx(Field.Input, {})] })] }), _jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Transaction password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "The transaction password secures and confirms your wallet withdrawals." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
+                            ? 'text-text-success-primary'
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsx("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: _jsx(Field.Root, { children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, {}), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }) }) })] }));
+}
+const SECRET_QUESTIONS = [
+    'BEST_CHILDHOOD_FRIEND',
+    'BIRTH_PLACE',
+    'FAVORITE_BOOK',
+    'FAVORITE_MOVIE',
+    'FAVORITE_TEACHER',
+    'FIRST_CAR',
+    'FIRST_PET',
+    'FIRST_SCHOOL',
+    'MOTHERS_MAIDEN_NAME',
+    'PARENTS_MET_CITY',
+];
+const SECRET_QUESIONS_MAP = {
+    BEST_CHILDHOOD_FRIEND: 'Who is your best childhood friend?',
+    BIRTH_PLACE: 'Where were you born?',
+    FAVORITE_BOOK: 'What is your favorite book?',
+    FAVORITE_MOVIE: 'What is your favorite movie?',
+    FAVORITE_TEACHER: 'Who was your favorite teacher?',
+    FIRST_CAR: 'What was your first car?',
+    FIRST_PET: 'What was your first pet?',
+    FIRST_SCHOOL: 'What was the name of your first school?',
+    MOTHERS_MAIDEN_NAME: "What is your mother's maiden name?",
+    PARENTS_MET_CITY: 'In which city did your parents meet?',
+};
+const secretQuestionCollection = createListCollection({
+    items: SECRET_QUESTIONS,
+    itemToValue: (item) => item,
+    itemToString: (item) => SECRET_QUESIONS_MAP[item],
+});

package/dist/components/AccountSecurity/index.js

@@ -1 +1 @@
-export * from './AccountSecurity';
+export * from './AccountSecurity.js';

package/dist/components/AccountVerification/index.js

@@ -1 +1 @@
-export * from './AccountVerification';
+export * from './AccountVerification.js';

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

@@ -7,5 +7,5 @@ export interface BannerProps {
     banners: Banner[];
     className?: string;
 }
-export declare function Banner(props: BannerProps): import("react").JSX.Element;
+export declare function Banner(props: BannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Banner/Banner.js

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

package/dist/components/Banner/index.js

@@ -1 +1 @@
-export * from './Banner';
+export * from './Banner.js';

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

@@ -4,4 +4,4 @@ export interface BetRecordsProps {
     gameProviders: GameProvider[];
     className?: string;
 }
-export declare function BetRecords(props: BetRecordsProps): import("react").JSX.Element;
+export declare function BetRecords(props: BetRecordsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BetRecords/BetRecords.js

@@ -0,0 +1,192 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createListCollection, parseDate, Portal } from '@ark-ui/react';
+import { tz, TZDateMini } from '@date-fns/tz';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { useReducer, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useBetRecordsQuery, useInfiniteQueryHelper, useLocaleInfo, } from '../../client/hooks/index.js';
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
+import { Badge, DatePicker, IconButton, SegmentGroup, Select, Table, } from '../../ui/index.js';
+import { capitalize, formatNumber } from '../../utils/index.js';
+import { Empty } from '../Empty.js';
+export function BetRecords(props) {
+    const [tab, setTab] = useState('all');
+    const [state, setState] = useReducer((prev, next) => ({
+        ...prev,
+        ...next,
+    }), {
+        page: 1,
+        pageSize: 10,
+        type: props.gameTypes[0],
+    });
+    const localeInfo = useLocaleInfo();
+    const providerCollection = createListCollection({
+        items: props.gameProviders,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useBetRecordsQuery, {
+        filter: {
+            ...(state.type && {
+                game__type: {
+                    equal: state.type,
+                },
+            }),
+            ...(state.provider && {
+                game__provider: {
+                    equal: state.provider,
+                },
+            }),
+            ...(state.status && {
+                status: {
+                    equal: state.status,
+                },
+            }),
+            ...(state.timestamp && {
+                dateTimeCreated: {
+                    ...(state.timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(state.timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(state.timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(state.timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    return (_jsxs("div", { className: twMerge('px-4 pb-3xl pt-4', props.className), children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold leading-tight", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg", children: _jsxs(SegmentGroup.Root, { value: state.type, onValueChange: (details) => {
+                        firstPage();
+                        setState({
+                            type: z
+                                .enum((props.gameTypes ?? []))
+                                .safeParse(details.value).data ?? null,
+                        });
+                    }, children: [props.gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type, children: [_jsx(SegmentGroup.ItemText, { children: capitalize(type, {
+                                        delimiter: capitalize.delimiters.UNDERSCORE,
+                                    }) }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
+                            .filter(Boolean)
+                            .map((d) => parseDate(d)), onValueChange: (details) => {
+                            firstPage();
+                            setState({
+                                timestamp: {
+                                    start: details.value.at(0)?.toDate(DEVICE_TIMEZONE),
+                                    end: details.value.at(1)?.toDate(DEVICE_TIMEZONE),
+                                },
+                            });
+                        }, onOpenChange: (details) => {
+                            if (details.open)
+                                return;
+                            if (state.timestamp)
+                                return;
+                            setTab('all');
+                        }, selectionMode: "range", closeOnSelect: false, positioning: {
+                            gutter: 20,
+                            placement: 'bottom',
+                        }, children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                                    const value = TabDefinition.parse(details.value);
+                                    if (value === 'today') {
+                                        const now = new Date();
+                                        setState({
+                                            timestamp: {
+                                                start: startOfDay(now),
+                                                end: endOfDay(now),
+                                            },
+                                        });
+                                    }
+                                    else {
+                                        setState({
+                                            timestamp: null,
+                                        });
+                                    }
+                                    firstPage();
+                                    setTab(value);
+                                }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(DatePicker.Context, { children: (api) => (_jsx(SegmentGroup.Item, { value: "custom", onClick: () => api.setOpen(true), className: "w-full lg:w-auto", children: _jsxs(DatePicker.Control, { children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }) })) }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(Portal, { children: _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("div", { className: "hidden grow lg:block" }), _jsxs(Select.Root, { collection: providerCollection, value: state.provider ? [state.provider] : [], onValueChange: (details) => {
+                            const value = z
+                                .enum((props.gameProviders ?? []))
+                                .safeParse(details.value.at(0)).data;
+                            firstPage();
+                            setState({
+                                provider: value ?? null,
+                            });
+                        }, lazyMount: true, deselectable: true, positioning: {
+                            sameWidth: true,
+                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                        e.stopPropagation();
+                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: providerCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: capitalize(provider, {
+                                                            delimiter: capitalize.delimiters.UNDERSCORE,
+                                                        }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }), _jsxs(Select.Root, { collection: statusCollection, value: state.status ? [state.status] : [], onValueChange: (details) => {
+                            const value = z
+                                .enum(BET_RECORD_STATUSES)
+                                .safeParse(details.value.at(0)).data;
+                            firstPage();
+                            setState({
+                                status: value ?? null,
+                            });
+                        }, lazyMount: true, deselectable: true, positioning: {
+                            sameWidth: true,
+                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Status" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                        e.stopPropagation();
+                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: statusCollection.items.map((status) => (_jsxs(Select.Item, { item: status, children: [_jsx(Select.ItemText, { children: capitalize(status, {
+                                                            delimiter: capitalize.delimiters.UNDERSCORE,
+                                                        }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })] }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
+                    ? 'Fetching latest bet records...'
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: "border-border-primary -ml-4 mt-3xl w-dvw border-y lg:-ml-0 lg:w-full lg:rounded-xl lg:border-x", children: [_jsx("div", { className: "border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-xl rounded-b-none border-b", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                                                            in: tz(localeInfo.timezone),
+                                                        }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
+                                                            in: tz(localeInfo.timezone),
+                                                        }) })] }), _jsx(Table.Cell, { className: "!py-1", children: !!data.dateTimeSettled && (_jsxs(_Fragment, { children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeSettled, 'MM/dd/yyyy', {
+                                                                in: tz(localeInfo.timezone),
+                                                            }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeSettled, 'hh:mm a', {
+                                                                in: tz(localeInfo.timezone),
+                                                            }) })] })) }), _jsx(Table.Cell, { className: "!py-1", children: data?.betContent || '/' }), _jsx(Table.Cell, { className: "!py-1", children: data.metadata?.odds || '/' }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.bet, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.validBet, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.payout, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.jackpotContribution, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.jackpotPayout, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: _jsx(Badge.Root, { colorScheme: data.status === 'SETTLED'
+                                                        ? 'success'
+                                                        : data.status === 'STARTED'
+                                                            ? 'blue'
+                                                            : 'danger', children: _jsx(Badge.Label, { children: capitalize(data.status, {
+                                                            delimiter: capitalize.delimiters.UNDERSCORE,
+                                                        }) }) }) }), _jsx(Table.Cell, { className: "!py-1", children: data.game.name }), _jsx(Table.Cell, { className: "!py-1", children: data.vendorRoundId })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center gap-lg px-4 py-3", children: [_jsxs("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: ["Page ", page, " of ", totalPages] }), _jsx("div", { className: "hidden grow lg:block" }), _jsx(Select.Root, { size: "sm", value: [pageSize.toString()], onValueChange: (details) => {
+                                    const n = parseInt(details.value[0]);
+                                    const v = isNaN(n) ? 10 : n;
+                                    setPageSize(v);
+                                }, collection: pageSizeCollection, lazyMount: true, className: "hidden lg:block", positioning: {
+                                    sameWidth: true,
+                                }, children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: pageSizeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: pageSizeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) })] }) }), _jsxs("div", { className: "contents lg:flex", children: [_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-1 lg:order-none lg:rounded-r-none lg:border-r-0", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-3 lg:order-none lg:rounded-l-none", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] })] }))] }));
+}
+const BET_RECORD_STATUSES = [
+    'CANCELLED',
+    'SETTLED',
+    'STARTED',
+];
+const pageSizeCollection = createListCollection({
+    items: useInfiniteQueryHelper.config.pageSizes,
+    itemToValue: (item) => item.toString(),
+    itemToString: (item) => `${item} items per page`,
+});
+const statusCollection = createListCollection({
+    items: BET_RECORD_STATUSES,
+    itemToValue: (item) => item,
+    itemToString: (item) => capitalize(item, {
+        delimiter: capitalize.delimiters.UNDERSCORE,
+    }),
+});
+const TabDefinition = z.enum(['all', 'today', 'custom']);
+const DEVICE_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;

package/dist/components/BetRecords/index.js

@@ -1 +1 @@
-export * from './BetRecords';
+export * from './BetRecords.js';

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

@@ -1,2 +1,2 @@
 import type { BonusProps } from './Bonus';
-export declare function Bonus__client(props: BonusProps): import("react").JSX.Element;
+export declare function Bonus__client(props: BonusProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon, ChevronRightIcon, StopWatchIcon } from '../../icons/index.js';
+import { Badge, Collapsible, Progress, Prose } from '../../ui/index.js';
+export function Bonus__client(props) {
+    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to Rewards"] }), _jsx(Image, { src: "https://s3.ap-east-1.amazonaws.com/opexa-assets.opexasystem.com/assets/BSxIXEsa59_zzMAR27-ALLDAYREBATE06-STATIC-WEB-HB-1920x1080.png", alt: "", width: 1024, height: 600, className: "mt-3xl h-auto w-full rounded-xl" }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: "brand", className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: "9d:10h:11m" })] }), _jsx("h1", { className: "text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: "50 PHP First Deposit Bonus" }), _jsx("p", { className: "text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Your bonus" }), _jsxs("p", { children: [_jsx("span", { className: "text-text-primary-900", children: "20.00" }), " / 50.00 PHP"] })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Required Turnover" }), _jsx("p", { children: "5x" })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { children: "Wagering" }), _jsx("p", { children: "400/1000" })] }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "text-button-tertiary-fg flex w-fit items-center justify-center gap-sm text-sm font-semibold lg:mx-auto", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsxs(Collapsible.Content, { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Playson" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "25%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Betsoft Gaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "13%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Microgaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "50%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Realtime Gaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "10%" })] })] })] }), _jsxs(Prose, { className: "mt-xl lg:mt-6", children: [_jsx("h3", { children: "How to get bonus" }), _jsxs("ol", { children: [_jsx("li", { children: "All OFWin members are eligible for this program." }), _jsx("li", { children: "50 PHP of game credit will be automatically credited to the new member account upon completion of first deposit Auctor vel in vitae placerat." }), _jsx("li", { children: "Member must reach a 5x turnover requirement before a withdrawal can be made. Attempting to make a withdrawal before this turnover requirement is completed could cause your bonus to be voided." }), _jsx("li", { children: "Players will have 10 days from the date the bonus is awarded to complete the rollover requirement." }), _jsx("li", { children: "Bets used to meet other bonus rollover requirements will not count toward this promotion." })] }), _jsx("h3", { children: "Terms and Conditions" }), _jsxs("ul", { children: [_jsx("li", { children: "Only one account per player is allowed. No same IP address/bank account name allowed. Players who have multiple or fraudulent accounts will not be qualified for the promotion." }), _jsx("li", { children: "Players that are found to have any duplicate accounts or those who participate in fraudulent activities may have their funds forfeited and their accounts closed." }), _jsx("li", { children: "OFWin reserves the right to amend or cancel this Referral Program at any time. OFWin General Terms and Conditions apply." })] })] })] }));
+}

package/dist/components/Bonus/Bonus.d.ts

@@ -7,4 +7,4 @@ export interface BonusProps {
      */
     viewAllUrl?: string;
 }
-export declare function Bonus(props: BonusProps): Promise<import("react").JSX.Element>;
+export declare function Bonus(props: BonusProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Bonus/Bonus.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Bonus__client } from './Bonus.client.js';
+export async function Bonus(props) {
+    return _jsx(Bonus__client, { ...props });
+}

package/dist/components/Bonus/index.js

@@ -1 +1 @@
-export * from './Bonus';
+export * from './Bonus.js';

package/dist/components/Bonuses/Bonuses.d.ts

@@ -12,4 +12,4 @@ export interface BonusesProps {
      */
     viewCashbackDetailsUrl?: string;
 }
-export declare function Bonuses(props: BonusesProps): import("react").JSX.Element;
+export declare function Bonuses(props: BonusesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Bonuses/Bonuses.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { StopWatchIcon } from '../../icons/index.js';
+import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
+export function Bonuses(props) {
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Rewards' }), _jsxs(SegmentGroup.Root, { defaultValue: "all", className: "mt-3 w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "active", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Active" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "cashbacks", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Cashback" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsxs("div", { className: "mt-3xl grid gap-3xl lg:grid-cols-3", children: [_jsx(Bonus, {}), _jsx(Cashback, {})] })] }));
+}
+function Bonus(props) {
+    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border", children: [_jsxs("div", { className: "relative", children: [_jsx(Image, { src: "https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt: "", width: 400, height: 200, className: "h-auto w-full" }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: "brand", className: "absolute right-4 top-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: "9d:10h:11m" })] })] }), _jsxs("div", { className: "px-xl py-3xl", children: [_jsx("h2", { className: "text-center text-xl font-semibold text-white", children: "50 PHP First Deposit Bonus" }), _jsxs("div", { className: "text-text-primary-brand mt-xl flex justify-between", children: [_jsx("p", { children: "Your bonus" }), _jsx("p", { children: "\u20B120.00" })] }), _jsxs("div", { className: "text-text-primary-brand mt-2 flex justify-between", children: [_jsx("p", { children: "Wagering 40%" }), _jsx("p", { children: "400/1000" })] }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx(Button, { variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: props.viewDetailsUrl ?? '/rewards/1', children: "See More" }) })] })] }));
+}
+function Cashback(props) {
+    console.log(props);
+    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border", children: [_jsx(Image, { src: "https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt: "", width: 400, height: 200, className: "h-auto w-full" }), _jsxs("div", { className: "px-xl py-3xl", children: [_jsx("p", { className: "text-center text-xl font-semibold text-white", children: "Cashback" }), _jsx("h2", { className: "mt-2 text-center text-3xl font-semibold text-white", children: "\u20B120.48" }), _jsx("p", { className: "text-text-secondary-700 mt-2 text-center text-sm", children: "Claim your cashback reward and explore other exciting offers!" }), _jsx(Button, { className: "mt-6", children: "Claim" })] })] }));
+}

package/dist/components/Bonuses/index.js

@@ -1 +1 @@
-export * from './Bonuses';
+export * from './Bonuses.js';

package/dist/components/DepositWithdrawal/AmountChoices.d.ts

@@ -7,5 +7,5 @@ interface AmountChoicesProps {
     min?: number;
     max?: number;
 }
-export declare function AmountChoices(props: AmountChoicesProps): import("react").JSX.Element;
+export declare function AmountChoices(props: AmountChoicesProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DepositWithdrawal/{AmountChoices.jsx → AmountChoices.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { twMerge } from 'tailwind-merge';
 import { useControllableState, useLocaleInfo } from '../../client/hooks/index.js';
 import { Button } from '../../ui/index.js';
@@ -14,15 +15,11 @@ export function AmountChoices(props) {
         defaultValue: props.defaultValue ?? options[0],
         onChange: props.onChange,
     });
-    return (<div className={twMerge('grid grid-cols-4 gap-2', props.className)}>
-      {options.map((option) => (<Button key={option} variant="outline" colorScheme="gray" onClick={() => {
+    return (_jsx("div", { className: twMerge('grid grid-cols-4 gap-2', props.className), children: options.map((option) => (_jsx(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
                 setValue(option);
-            }} disabled={min > option || max < option} data-selected={dataAttr(value === option)}>
-          {formatNumber(option, {
+            }, disabled: min > option || max < option, "data-selected": dataAttr(value === option), children: formatNumber(option, {
                 currency: localeInfo.currency.code,
                 minDecimalPlaces: 0,
                 maxDecimalPlaces: 0,
-            })}
-        </Button>))}
-    </div>);
+            }) }, option))) }));
 }

package/dist/components/DepositWithdrawal/Deposit/AvailablePromos.d.ts

@@ -4,5 +4,5 @@ interface AvailablePromosProps {
     onChange?: (value: string | null) => void;
     className?: string;
 }
-export declare function AvailablePromos(props: AvailablePromosProps): import("react").JSX.Element;
+export declare function AvailablePromos(props: AvailablePromosProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DepositWithdrawal/Deposit/AvailablePromos.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Carousel } from '@ark-ui/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useAvailablePromosQuery, useControllableState, useGlobalStore, } from '../../../client/hooks/index.js';
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from '../../../icons/index.js';
+import { Checkbox, IconButton } from '../../../ui/index.js';
+export function AvailablePromos(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const query = useAvailablePromosQuery();
+    const promos = query.data ?? [];
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? null,
+        onChange: props.onChange,
+    });
+    return (_jsxs(Carousel.Root, { slideCount: promos.length, className: props.className, spacing: "16px", slidesPerPage: 2, children: [_jsxs("div", { className: "flex items-center gap-xl", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-lg font-semibold leading-tight", children: "Available Promotions" }), _jsx("p", { className: "text-gray-500 mt-1 text-sm leading-tight", children: "Select a promotion with your deposit. Only one can be active at a time." })] }), _jsxs(Carousel.Control, { children: [_jsx(Carousel.PrevTrigger, { asChild: true, children: _jsx(IconButton, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", children: _jsx(ChevronLeftIcon, {}) }) }), _jsx(Carousel.NextTrigger, { asChild: true, children: _jsx(IconButton, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", children: _jsx(ChevronRightIcon, {}) }) })] })] }), _jsx(Carousel.ItemGroup, { className: "mt-3xl", children: promos.map((promo, index) => (_jsx(Carousel.Item, { index: index, children: _jsxs("div", { className: "relative select-none p-0.5", children: [_jsx("div", { className: twMerge('block rounded-lg', promo.id === value && 'ring-gray-500/25 ring-2'), children: promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 288, height: 184, className: "rounded-lg" })) }), _jsxs(Checkbox.Root, { checked: promo.id === value, onCheckedChange: (details) => {
+                                    setValue(details.checked ? promo.id : null);
+                                }, className: "absolute right-3 top-3 rounded-md border border-white/50 bg-white/60 p-lg backdrop-blur-sm", children: [_jsx(Checkbox.Control, { className: "bg-white", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Link, { href: `/promos/${promo.id}`, className: "absolute bottom-3 right-3 rounded-md border border-white/50 bg-white/60 px-lg py-md text-sm font-semibold backdrop-blur-sm", onClick: () => {
+                                    globalStore.depositWithdrawal.setOpen(false);
+                                }, children: "Promo Details" })] }) }, promo.id))) })] }));
+}

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

@@ -1 +1 @@
-export declare function Deposit(): import("react").JSX.Element;
+export declare function Deposit(): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/Deposit/{Deposit.jsx → Deposit.js}

@@ -1,13 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useOnMMA, usePaymentSettingsQuery } from '../../../client/hooks/index.js';
 import { AlertCircleIcon, SpinnerIcon } from '../../../icons/index.js';
 import { onMobileDevice } from '../../../utils/index.js';
-import { PaymentMethods } from '../PaymentMethods';
-import { GCashDeposit } from './GCashDeposit/GCashDeposit';
-import { MayaAppDeposit } from './MayaAppDeposit/MayaAppDeposit';
-import { MayaDeposit } from './MayaDeposit/MayaDeposit';
-import { OnlineBankDeposit } from './OnlineBankDeposit/OnlineBankDeposit';
-import { QRPHDeposit } from './QRPHDeposit/QRPHDeposit';
+import { PaymentMethods } from '../PaymentMethods.js';
+import { GCashDeposit } from './GCashDeposit/GCashDeposit.js';
+import { MayaAppDeposit } from './MayaAppDeposit/MayaAppDeposit.js';
+import { MayaDeposit } from './MayaDeposit/MayaDeposit.js';
+import { OnlineBankDeposit } from './OnlineBankDeposit/OnlineBankDeposit.js';
+import { QRPHDeposit } from './QRPHDeposit/QRPHDeposit.js';
 export function Deposit() {
     const [onMMA] = useOnMMA();
     const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -54,21 +55,10 @@ export function Deposit() {
         }
     }, [enabledPaymentMethods, paymentMethod]);
     if (paymentSettingsQuery.isLoading) {
-        return <SpinnerIcon className="mx-auto size-6"/>;
+        return _jsx(SpinnerIcon, { className: "mx-auto size-6" });
     }
     if (enabledPaymentMethods.length <= 0) {
-        return (<div className="border-amber-200 text-amber-700 bg-amber-50 flex items-center gap-1.5 rounded-sm border px-3 py-2.5 text-sm">
-        <AlertCircleIcon className="size-4"/>
-        No available payment methods
-      </div>);
+        return (_jsxs("div", { className: "border-amber-200 text-amber-700 bg-amber-50 flex items-center gap-1.5 rounded-sm border px-3 py-2.5 text-sm", children: [_jsx(AlertCircleIcon, { className: "size-4" }), "No available payment methods"] }));
     }
-    return (<>
-      <PaymentMethods value={paymentMethod} onChange={setPaymentMethod} options={enabledPaymentMethods}/>
-
-      {paymentMethod === 'QRPH' && <QRPHDeposit />}
-      {paymentMethod === 'GCASH' && <GCashDeposit />}
-      {paymentMethod === 'MAYA' && <MayaDeposit />}
-      {paymentMethod === 'MAYA_APP' && <MayaAppDeposit />}
-      {paymentMethod === 'ONLINE_BANK' && <OnlineBankDeposit />}
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: setPaymentMethod, options: enabledPaymentMethods }), paymentMethod === 'QRPH' && _jsx(QRPHDeposit, {}), paymentMethod === 'GCASH' && _jsx(GCashDeposit, {}), paymentMethod === 'MAYA' && _jsx(MayaDeposit, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppDeposit, {}), paymentMethod === 'ONLINE_BANK' && _jsx(OnlineBankDeposit, {})] }));
 }

package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.d.ts

@@ -1 +1 @@
-export declare function GCashDeposit(): import("react").JSX.Element;
+export declare function GCashDeposit(): import("react/jsx-runtime").JSX.Element;