@opexa/portal-components 0.0.61 → 0.0.62

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

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

package/dist/components/Cashback/Cashback.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 Cashback__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/Cashback/Cashback.d.ts

@@ -0,0 +1,10 @@
+export interface CashbackProps {
+    id: string;
+    className?: string;
+    /**
+     * @description URL for the bonuses details page
+     * @default "/rewards"
+     */
+    viewAllUrl?: string;
+}
+export declare function Cashback(props: CashbackProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Cashback/Cashback.js

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

package/dist/components/Cashback/index.d.ts

@@ -0,0 +1 @@
+export * from './Cashback';

package/dist/components/Cashback/index.js

@@ -0,0 +1 @@
+export * from './Cashback.js';

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

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

package/dist/components/Rewards/Rewards.client.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { useBonusesQuery, useCashbacksQuery } from '../../client/hooks/index.js';
+import { StopWatchIcon } from '../../icons/index.js';
+import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
+export function Rewards__client(props) {
+    const bonusesQuery = useBonusesQuery();
+    const cashbacksQuery = useCashbacksQuery();
+    const bonuses = bonusesQuery.data ?? [];
+    const cashbacks = cashbacksQuery.data ?? [];
+    console.log({
+        bonuses,
+        cashbacks,
+    });
+    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, { viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards/bonus' }), _jsx(Cashback, { viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/rewards/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, 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/Rewards/Rewards.d.ts

@@ -0,0 +1,15 @@
+export interface RewardsProps {
+    heading?: string;
+    className?: string;
+    /**
+     * @description base URL for the bonus details page
+     * @default "/rewards/bonus"
+     */
+    viewBonusDetailsUrl?: string;
+    /**
+     * @description base URL for the cashback details page
+     * @default "/rewards/cashback"
+     */
+    viewCashbackDetailsUrl?: string;
+}
+export declare function Rewards(props: RewardsProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Rewards/Rewards.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchBonusesQuery, prefetchCashbacksQuery, } from '../../server/utils/index.js';
+import { Rewards__client } from './Rewards.client.js';
+export async function Rewards(props) {
+    await Promise.all([prefetchBonusesQuery(), prefetchCashbacksQuery()]);
+    return _jsx(Rewards__client, { ...props });
+}

package/dist/components/Rewards/index.d.ts

@@ -0,0 +1 @@
+export * from './Rewards';

package/dist/components/Rewards/index.js

@@ -0,0 +1 @@
+export * from './Rewards.js';

package/dist/components/SignIn/MobileNumberSignIn.d.ts

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

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDialogContext } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useCooldown, useGlobalStore, useLocaleInfo, useMobileNumberParser, useSendVerificationCodeMutation, useSignInMutation, } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
+import { ArrowLeftIcon, CheckIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
+import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
+import { useSignInContext } from './SignInContext.js';
+export function MobileNumberSignIn() {
+    const context = useSignInContext();
+    const dialog = useDialogContext();
+    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
+    const signInMutation = useSignInMutation();
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
+    const localeInfo = useLocaleInfo();
+    const mobileNumberParser = useMobileNumberParser();
+    const Step1Definition = z.object({
+        mobileNumber: z.string().superRefine((v, ctx) => {
+            if (!mobileNumberParser.validate(v)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Invalid mobile number',
+                });
+            }
+        }),
+        termsAccepted: z.boolean().superRefine((v, ctx) => {
+            if (!v) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'You must accept the terms and conditions',
+                });
+            }
+        }),
+    });
+    const Step2Definition = z.object({
+        verificationCode: z.array(z.string().min(1).max(1).trim()).min(6).max(6),
+    });
+    const step1Form = useForm({
+        resolver: zodResolver(Step1Definition),
+        defaultValues: {
+            mobileNumber: '',
+            termsAccepted: false,
+        },
+    });
+    const step2Form = useForm({
+        resolver: zodResolver(Step2Definition),
+        defaultValues: {
+            verificationCode: Array.from({ length: 6 }).fill(''),
+        },
+    });
+    const cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+                            try {
+                                await sendVerificationCodeMutation.mutateAsync({
+                                    channel: 'SMS',
+                                    recipient: mobileNumberParser.format(data.mobileNumber),
+                                    strict: true,
+                                });
+                                context.setStep(2);
+                                cooldown.start();
+                            }
+                            catch (e) {
+                                toaster.error({
+                                    description: e instanceof Error
+                                        ? e.message
+                                        : 'Failed to send verification code',
+                                });
+                            }
+                        }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-11", placeholder: `${localeInfo.mobileNumber.areaCode}${localeInfo.mobileNumber.example}`, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Checkbox.Root, { className: "mt-xl", invalid: o.fieldState.invalid, checked: o.field.value, onCheckedChange: (details) => {
+                                        o.field.onChange(details.checked);
+                                    }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx("span", { className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] })) })] }), _jsxs("div", { className: "relative mt-6 text-center", children: [_jsx("hr", { className: "-translte-y-1/2 text-text-tertiary-600/50 absolute top-1/2 w-full" }), _jsx("span", { className: "text-text-tertiary-600 bg-bg-primary-alt relative px-md text-center text-sm font-semibold", children: "Log in directly with" })] }), _jsxs("div", { className: "mt-6", children: [_jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                    dialog.setOpen(false);
+                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                    dialog.setOpen(false);
+                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                    dialog.setOpen(false);
+                                    signUpStore.setOpen(true);
+                                }, children: "Sign up" })] })] })), context.step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
+                            const { mobileNumber } = step1Form.getValues();
+                            try {
+                                await signInMutation.mutateAsync({
+                                    type: 'MOBILE_NUMBER',
+                                    mobileNumber: mobileNumberParser.format(mobileNumber),
+                                    verificationCode: verificationCode.join(''),
+                                });
+                                dialog.setOpen(false);
+                                step1Form.reset();
+                                step2Form.reset();
+                                context.setStep(1);
+                            }
+                            catch {
+                                toaster.error({
+                                    description: 'Invalid Verification Code',
+                                });
+                            }
+                        }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(PinInput.Root, { placeholder: "0", invalid: o.fieldState.invalid, value: o.field.value, onValueChange: (details) => {
+                                        o.field.onChange(details.value);
+                                    }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold", disabled: cooldown.cooling, onClick: async () => {
+                                            await sendVerificationCodeMutation.mutateAsync({
+                                                channel: 'SMS',
+                                                recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                                            });
+                                            cooldown.start();
+                                        }, children: cooldown.cooling
+                                            ? `Resend in ${cooldown.countdown}s`
+                                            : 'Resend' })] }), _jsxs("button", { type: "button", className: "text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold", onClick: () => {
+                                    context.setStep(1);
+                                    step2Form.reset();
+                                    cooldown.stop();
+                                }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
+}

package/dist/components/SignIn/NameAndPasswordSignIn.d.ts

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

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDialogContext } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useSignInMutation } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
+import { CheckIcon, EyeIcon, EyeOffIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
+import { Button, Checkbox, Field, PasswordInput } from '../../ui/index.js';
+import { useSignInContext } from './SignInContext.js';
+const Definition = z.object({
+    name: z.string(),
+    password: z.string(),
+    secretAnswer: z.string(),
+    termsAccepted: z.boolean().refine((val) => val, {
+        message: 'You must accept the terms and conditions',
+    }),
+});
+export function NameAndPasswordSignIn() {
+    const context = useSignInContext();
+    const dialog = useDialogContext();
+    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
+    const signInMutation = useSignInMutation();
+    const form = useForm({
+        resolver: zodResolver(Definition),
+        defaultValues: {
+            name: '',
+            password: '',
+            secretAnswer: '',
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit(async (data) => {
+                    try {
+                    }
+                    catch (e) {
+                        toaster.error({
+                            description: e instanceof Error
+                                ? e.message
+                                : 'Failed to send verification code',
+                        });
+                    }
+                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.name, children: [_jsx(Field.Label, { children: "Name" }), _jsx(Field.Input, { placeholder: "Enter your name", ...form.register('name') }), _jsx(Field.ErrorText, { children: form.formState.errors.name?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.name, className: "mt-xl", children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", tabIndex: -1, className: "text-button-tertiary-fg text-sm font-semibold", children: "Forgot Password" }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.secretAnswer, className: "mt-xl", children: [_jsx(Field.Label, { children: "What was the name of your first pet?" }), _jsx(Field.Input, { placeholder: "Answer the security question", ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: form.control, name: "termsAccepted", render: (o) => (_jsxs(Checkbox.Root, { className: "mt-xl", invalid: o.fieldState.invalid, checked: o.field.value, onCheckedChange: (details) => {
+                                o.field.onChange(details.checked);
+                            }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx("span", { className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] })) })] }), _jsxs("div", { className: "relative mt-6 text-center", children: [_jsx("hr", { className: "-translte-y-1/2 text-text-tertiary-600/50 absolute top-1/2 w-full" }), _jsx("span", { className: "text-text-tertiary-600 bg-bg-primary-alt relative px-md text-center text-sm font-semibold", children: "Log in directly with" })] }), _jsxs("div", { className: "mt-6", children: [_jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                            dialog.setOpen(false);
+                        }, className: "border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                            dialog.setOpen(false);
+                        }, className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                            dialog.setOpen(false);
+                            signUpStore.setOpen(true);
+                        }, children: "Sign up" })] })] }));
+}

package/dist/components/SignIn/SignIn.js

@@ -11,5 +11,5 @@ export function SignIn(props) {
     const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
     return (_jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
             signInStore.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(SignInForm, {})] }) })] }) }));
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, {})] }) })] }) }));
 }

package/dist/components/SignIn/SignInContext.d.ts

@@ -0,0 +1,12 @@
+type SignInStep = 1 | 2 | (number & {});
+type SignInType = 'NAME_AND_PASSWORD' | 'MOBILE_NUMBER';
+export interface UseSignInReturn {
+    step: SignInStep;
+    setStep: (step: SignInStep) => void;
+    type: SignInType;
+    setType: (type: SignInType) => void;
+}
+export declare function useSignIn(): UseSignInReturn;
+export declare const SignInContext: import("react").Context<UseSignInReturn | null>;
+export declare const useSignInContext: () => UseSignInReturn;
+export {};

package/dist/components/SignIn/SignInContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext, useState } from 'react';
+import invariant from 'tiny-invariant';
+export function useSignIn() {
+    const [step, setStep] = useState(1);
+    const [type, setType] = useState('MOBILE_NUMBER');
+    return {
+        step,
+        setStep,
+        type,
+        setType,
+    };
+}
+export const SignInContext = createContext(null);
+export const useSignInContext = () => {
+    const context = useContext(SignInContext);
+    invariant(context);
+    return context;
+};

package/dist/components/SignIn/SignInForm.js

@@ -1,118 +1,10 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDialogContext } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCooldown, useGlobalStore, useLocaleInfo, useMobileNumberParser, useSendVerificationCodeMutation, useSignInMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
-import { ArrowLeftIcon, CheckIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
-import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MobileNumberSignIn } from './MobileNumberSignIn.js';
+import { NameAndPasswordSignIn } from './NameAndPasswordSignIn.js';
+import { SignInContext, useSignIn } from './SignInContext.js';
+import { SignInMethod } from './SignInMethod.js';
 export function SignInForm() {
-    const [step, setStep] = useState(1);
-    const dialog = useDialogContext();
-    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
-    const signInMutation = useSignInMutation();
-    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
-    const localeInfo = useLocaleInfo();
-    const mobileNumberParser = useMobileNumberParser();
-    const Step1Definition = z.object({
-        mobileNumber: z.string().superRefine((v, ctx) => {
-            if (!mobileNumberParser.validate(v)) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'Invalid mobile number',
-                });
-            }
-        }),
-        termsAccepted: z.boolean().superRefine((v, ctx) => {
-            if (!v) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'You must accept the terms and conditions',
-                });
-            }
-        }),
-    });
-    const Step2Definition = z.object({
-        verificationCode: z.array(z.string().min(1).max(1).trim()).min(6).max(6),
-    });
-    const step1Form = useForm({
-        resolver: zodResolver(Step1Definition),
-        defaultValues: {
-            mobileNumber: '',
-            termsAccepted: false,
-        },
-    });
-    const step2Form = useForm({
-        resolver: zodResolver(Step2Definition),
-        defaultValues: {
-            verificationCode: Array.from({ length: 6 }).fill(''),
-        },
-    });
-    const cooldown = useCooldown({
-        max: 60,
-        duration: 1000 * 60,
-    });
-    return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
-                            try {
-                                await sendVerificationCodeMutation.mutateAsync({
-                                    channel: 'SMS',
-                                    recipient: mobileNumberParser.format(data.mobileNumber),
-                                    strict: true,
-                                });
-                                setStep(2);
-                                cooldown.start();
-                            }
-                            catch (e) {
-                                toaster.error({
-                                    description: e instanceof Error
-                                        ? e.message
-                                        : 'Failed to send verification code',
-                                });
-                            }
-                        }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-11", placeholder: `${localeInfo.mobileNumber.areaCode}${localeInfo.mobileNumber.example}`, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Checkbox.Root, { className: "mt-xl", invalid: o.fieldState.invalid, checked: o.field.value, onCheckedChange: (details) => {
-                                        o.field.onChange(details.checked);
-                                    }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx("span", { className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] })) })] }), _jsxs("div", { className: "relative mt-6 text-center", children: [_jsx("hr", { className: "-translte-y-1/2 text-text-tertiary-600/50 absolute top-1/2 w-full" }), _jsx("span", { className: "text-text-tertiary-600 bg-bg-primary-alt relative px-md text-center text-sm font-semibold", children: "Log in directly with" })] }), _jsxs("div", { className: "mt-6", children: [_jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
-                                    dialog.setOpen(false);
-                                    signUpStore.setOpen(true);
-                                }, children: "Sign up" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
-                            const { mobileNumber } = step1Form.getValues();
-                            try {
-                                await signInMutation.mutateAsync({
-                                    type: 'MOBILE_NUMBER',
-                                    mobileNumber: mobileNumberParser.format(mobileNumber),
-                                    verificationCode: verificationCode.join(''),
-                                });
-                                dialog.setOpen(false);
-                                step1Form.reset();
-                                step2Form.reset();
-                                setStep(1);
-                            }
-                            catch {
-                                toaster.error({
-                                    description: 'Invalid Verification Code',
-                                });
-                            }
-                        }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(PinInput.Root, { placeholder: "0", invalid: o.fieldState.invalid, value: o.field.value, onValueChange: (details) => {
-                                        o.field.onChange(details.value);
-                                    }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold", disabled: cooldown.cooling, onClick: async () => {
-                                            await sendVerificationCodeMutation.mutateAsync({
-                                                channel: 'SMS',
-                                                recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
-                                            });
-                                            cooldown.start();
-                                        }, children: cooldown.cooling
-                                            ? `Resend in ${cooldown.countdown}s`
-                                            : 'Resend' })] }), _jsxs("button", { type: "button", className: "text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold", onClick: () => {
-                                    setStep(1);
-                                    step2Form.reset();
-                                    cooldown.stop();
-                                }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
+    const context = useSignIn();
+    return (_jsxs(SignInContext, { value: context, children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." })] })), _jsx(SignInMethod, {}), context.type === 'MOBILE_NUMBER' && _jsx(MobileNumberSignIn, {}), context.type === 'NAME_AND_PASSWORD' && _jsx(NameAndPasswordSignIn, {})] }));
 }

package/dist/components/SignIn/SignInMethod.d.ts

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

package/dist/components/SignIn/SignInMethod.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { z } from 'zod';
+import { SegmentGroup } from '../../ui/index.js';
+import { useSignInContext } from './SignInContext.js';
+const METHODS = [
+    'MOBILE_NUMBER',
+    'NAME_AND_PASSWORD',
+];
+const METHOD_LABEL_MAP = {
+    MOBILE_NUMBER: 'Mobile',
+    NAME_AND_PASSWORD: 'Username',
+};
+export function SignInMethod() {
+    const context = useSignInContext();
+    return (_jsxs(SegmentGroup.Root, { value: context.type, onValueChange: (details) => {
+            context.setStep(1);
+            context.setType(z.enum(METHODS).parse(details.value));
+        }, className: "mt-5 w-full", children: [_jsx(SegmentGroup.Indicator, {}), METHODS.map((method) => (_jsxs(SegmentGroup.Item, { value: method, className: "w-full", children: [_jsx(SegmentGroup.ItemText, { children: METHOD_LABEL_MAP[method] }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, method)))] }));
+}

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export * from './AccountVerification';
 export * from './Banner';
 export * from './BetRecords';
 export * from './Bonus';
-export * from './Bonuses';
+export * from './Cashback';
 export * from './DepositWithdrawal';
 export * from './Disclaimer';
 export * from './FavoriteGames';
@@ -23,6 +23,7 @@ export * from './Promo';
 export * from './Promos';
 export * from './Protected';
 export * from './Quests';
+export * from './Rewards';
 export * from './Search';
 export * from './SignIn';
 export * from './SignUp';

package/dist/components/index.js

@@ -5,7 +5,7 @@ export * from './AccountVerification/index.js';
 export * from './Banner/index.js';
 export * from './BetRecords/index.js';
 export * from './Bonus/index.js';
-export * from './Bonuses/index.js';
+export * from './Cashback/index.js';
 export * from './DepositWithdrawal/index.js';
 export * from './Disclaimer/index.js';
 export * from './FavoriteGames/index.js';
@@ -23,6 +23,7 @@ export * from './Promo/index.js';
 export * from './Promos/index.js';
 export * from './Protected/index.js';
 export * from './Quests/index.js';
+export * from './Rewards/index.js';
 export * from './Search/index.js';
 export * from './SignIn/index.js';
 export * from './SignUp/index.js';

package/dist/types/index.d.ts

@@ -69,3 +69,4 @@ export interface GameProviderData {
     logo: ImageProps['src'];
     name: string;
 }
+export type SignInType = 'NAME_AND_PASSWORD' | 'MOBILE_NUMBER';