@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/Account/Account.js

@@ -0,0 +1,127 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronLeftIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, CreditCard02Icon, FileCheck02Icon, Gift01Icon, Lock01Icon, Logout01Icon, Settings02Icon, User01Icon, XIcon, } from '../../icons/index.js';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { Badge, Button, Drawer, IconButton, Popover, Presence } from '../../ui/index.js';
+import { formatNumber, parseDecimal } from '../../utils/index.js';
+import { accountRecipe } from './account.recipe.js';
+const recipe = accountRecipe();
+export function Account(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        accountSettings: ctx.accountSettings,
+    })));
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
+                    globalStore.account__mobile.setOpen(details.open);
+                    globalStore.accountSettings.setCollapsed(true);
+                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: "relative top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6", style: {
+                                    ['--top']: props.offsetTop ?? '0px',
+                                }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: props.rewardsUrl, betRecordsUrl: props.betRecordsUrl, transactionsUrl: props.transactionsUrl }), _jsx(AccountSettingsMenu, { accountInfoUrl: props.accountInfoUrl, accountSecurityUrl: props.accountSecurityUrl, accountVerificationUrl: props.accountVerificationUrl, accountPaymentMethodsUrl: props.accountPaymentMethodsUrl })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
+                    globalStore.account.setOpen(details.open);
+                    globalStore.accountSettings.setCollapsed(true);
+                }, lazyMount: true, unmountOnExit: true, positioning: {
+                    placement: 'bottom',
+                    strategy: 'fixed',
+                }, children: [_jsx(Popover.Trigger, { className: "hidden lg:flex", asChild: true, children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: _jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-10" }) })) }), _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: props.rewardsUrl, betRecordsUrl: props.betRecordsUrl, transactionsUrl: props.transactionsUrl }), _jsx(AccountSettingsMenu, { accountInfoUrl: props.accountInfoUrl, accountSecurityUrl: props.accountSecurityUrl, accountVerificationUrl: props.accountVerificationUrl, accountPaymentMethodsUrl: props.accountPaymentMethodsUrl })] }) }) })] })] }));
+}
+function Profile() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: account?.name }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.nickName ?? account?.emailAddress ?? account?.realName })] }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] }));
+}
+function Wallet() {
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 1000,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        profile: ctx.account,
+        mobileProfile: ctx.account__mobile,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
+    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
+    const totalBalance = depositBalance + bonusBalance;
+    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
+                    currency: localeInfo?.currency.code,
+                    minDecimalPlaces: 2,
+                }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
+                                    currency: localeInfo?.currency.code,
+                                    minDecimalPlaces: 2,
+                                }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
+                                    currency: localeInfo?.currency.code,
+                                    minDecimalPlaces: 2,
+                                }) })] })] }), _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Withdraw" }), _jsx(Button, { size: "xs", onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('DEPOSIT');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Deposit" })] })] }));
+}
+function Links(props) {
+    const signOutMutation = useSignOutMutation();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        accountSettings: ctx.accountSettings,
+        messages: ctx.messages,
+    })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                                globalStore.messages.setOpen(true);
+                            }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCountQuery.data ?? 0 }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.rewardsUrl ?? '/rewards', className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: "0" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
+                            globalStore.accountSettings.setCollapsed(false);
+                        }, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) }), _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.betRecordsUrl ?? '/bet-records', className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.transactionsUrl ?? '/transactions', className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsSwap02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Transactions" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), disabled: signOutMutation.isPending, onClick: () => {
+                            signOutMutation.mutate();
+                            globalStore.account.setOpen(false);
+                            globalStore.account__mobile.setOpen(false);
+                        }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Log Out" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })] }));
+}
+function AccountSettingsMenu(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        accountSettings: ctx.accountSettings,
+    })));
+    return (_jsxs(Presence, { present: !globalStore.accountSettings.collapsed, lazyMount: true, className: "bg-bg-primary ui-open:animate-slide-in-right ui-closed:animate-slide-out-right absolute left-0 top-0 size-full overflow-y-auto", children: [_jsxs("div", { className: "bg-bg-primary-alt flex items-center gap-xl px-xl py-md", children: [_jsx(IconButton, { size: "2xs", variant: "outline", colorScheme: "gray", onClick: () => {
+                            globalStore.accountSettings.setCollapsed(true);
+                        }, children: _jsx(ChevronLeftIcon, {}) }), _jsx("h2", { className: "text-text-primary-900 text-lg font-semibold", children: "Settings" })] }), _jsx("nav", { className: recipe.nav({ className: 'p-4' }), children: _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountInfoUrl ?? '/account', className: recipe.navItemLink(), onClick: () => {
+                                    globalStore.account.setOpen(false);
+                                    globalStore.account__mobile.setOpen(false);
+                                    globalStore.accountSettings.setCollapsed(true);
+                                }, children: [_jsx(User01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Account Info" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountSecurityUrl ?? '/account/security', className: recipe.navItemLink(), onClick: () => {
+                                    globalStore.account.setOpen(false);
+                                    globalStore.account__mobile.setOpen(false);
+                                    globalStore.accountSettings.setCollapsed(true);
+                                }, children: [_jsx(Lock01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Security" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountVerificationUrl ?? '/account/verification', className: recipe.navItemLink(), onClick: () => {
+                                    globalStore.account.setOpen(false);
+                                    globalStore.account__mobile.setOpen(false);
+                                    globalStore.accountSettings.setCollapsed(true);
+                                }, children: [_jsx(FileCheck02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Personal Verification" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountPaymentMethodsUrl ?? '/account/payment-methods', className: recipe.navItemLink(), onClick: () => {
+                                    globalStore.account.setOpen(false);
+                                    globalStore.account__mobile.setOpen(false);
+                                    globalStore.accountSettings.setCollapsed(true);
+                                }, children: [_jsx(CreditCard02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Payment Methods" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }) })] }));
+}

package/dist/components/Account/index.js

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

package/dist/components/AccountInfo/AccountInfo.d.ts

@@ -1,4 +1,4 @@
 export interface AccountInfoProps {
     className?: string;
 }
-export declare function AccountInfo(props: AccountInfoProps): import("react").JSX.Element;
+export declare function AccountInfo(props: AccountInfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AccountInfo/AccountInfo.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import { noop } from 'lodash-es';
+import Image from 'next/image';
+import { useAccountQuery, useLocaleInfo, useMobileNumberParser, } from '../../client/hooks/index.js';
+import { FacebookIcon, GoogleIcon } from '../../icons/index.js';
+import avatar from '../../images/placeholder-avatar.png';
+import { Button, Field, IconButton } from '../../ui/index.js';
+export function AccountInfo(props) {
+    const localeInfo = useLocaleInfo();
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const mobileNumberParser = useMobileNumberParser();
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Profile Info" }), _jsxs("div", { className: "bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsx("div", { className: "border-border-secondary border-b px-4 py-5", children: _jsxs("div", { className: "flex items-center gap-xl", children: [_jsx(Image, { src: avatar, alt: "", width: 80, height: 80, className: "size-14 shrink-0 rounded-md object-cover" }), _jsxs("div", { children: [_jsx("h3", { className: "text-text-secondary-700 text-lg font-semibold leading-tight", children: account?.name }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.emailAddress ?? account?.nickName })] })] }) }), _jsx("div", { className: "flex justify-end px-xl py-lg", children: _jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Upload New Avatar" }) })] }), _jsx("h2", { className: "text-text-secondary-700 mt-6 text-sm font-semibold", children: "Contact Info" }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", value: account?.mobileNumber
+                                            ? mobileNumberParser.format(account?.mobileNumber)
+                                            : '', readOnly: true, onChange: noop })] })] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Email address" }), _jsx(Field.Input, { defaultValue: account?.emailAddress ?? '' })] })] }), _jsx("h2", { className: "text-text-secondary-700 mt-6 text-sm font-semibold", children: "Personal Data" }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { value: account?.realName ?? '', onChange: noop, readOnly: true })] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", value: account?.birthDay ? format(account.birthDay, 'yyyy-MM-dd') : '', readOnly: true })] })] }), _jsx("h2", { className: "text-text-secondary-700 mt-6 text-sm font-semibold", children: "Account Connections" }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Google" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-xs leading-tight", children: "Not Connected" })] })] }), _jsx(Button, { fullWidth: false, children: "Connect" })] }), _jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Facebook" }), _jsx("p", { className: "text-text-success-primary-600 mt-xs text-xs leading-tight", children: "Connected" })] })] }), _jsx("button", { className: "text-button-tertiary-error-fg text-sm font-semibold", children: "Disconnect" })] })] })] }));
+}

package/dist/components/AccountInfo/index.js

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

package/dist/components/AccountPaymentMethods/index.js

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

package/dist/components/AccountSecurity/AccountSecurity.d.ts

@@ -1,4 +1,4 @@
 export interface AccountSecurityProps {
     className?: string;
 }
-export declare function AccountSecurity(props: AccountSecurityProps): import("react").JSX.Element;
+export declare function AccountSecurity(props: AccountSecurityProps): import("react/jsx-runtime").JSX.Element;

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';