@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/Quests/WageringQuest/WageringQuest.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
+import { Button } from '../../../ui/index.js';
+import { useState } from 'react';
+import { WageringQuestModal } from './WageringQuestModal.js';
+export default function WageringQuest() {
+    const [showRules, setShowRules] = useState(false);
+    const totalBet = 200;
+    const targetBet = 500;
+    const progressPercent = (totalBet / targetBet) * 100;
+    return (_jsxs(_Fragment, { children: [_jsx(WageringQuestModal, { modalState: {
+                    isOpen: showRules,
+                    setIsOpen: setShowRules,
+                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full min-w-[343px] flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsxs("div", { className: "border-utility-brand-200 bg-utility-brand-50 rounded-xs flex items-center space-x-1 border py-1 pl-2 pr-2.5", children: [_jsx(ClockStopWatchIcon, { className: "text-brand-400" }), _jsx("p", { className: "text-utility-brand-700 text-sm font-medium", children: "6d:10h:11m:10s" })] }), _jsx("div", { role: "button", className: "rounded-xs bg-bg-primary border-border-secondary cursor-pointer border p-2", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: "Slots - total bet of \u20B1500" }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", children: "Play any slot game and place a total of \u20B1500 in bets to claim your reward!" })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "text-text-primary-brand group flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", progressPercent, "%"] }), _jsxs("p", { children: [totalBet, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetBet] })] })] }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercent}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { variant: "solid", className: "bg-button-secondary-bg border-bg-primary-hover border text-white", children: _jsxs("p", { children: ["Complete to get ", _jsx("span", { className: "text-brand-400", children: "\u20B150" }), " bonus!"] }) }) })] })] }));
+}

package/dist/components/Quests/WageringQuest/WageringQuestModal.d.ts

@@ -4,5 +4,5 @@ interface Props {
         setIsOpen: (isOpen: boolean) => void;
     };
 }
-export declare function WageringQuestModal(props: Props): import("react").JSX.Element;
+export declare function WageringQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Quests/WageringQuest/WageringQuestModal.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog } from '../../../ui/index.js';
+import { Portal } from '@ark-ui/react';
+import { XIcon } from '../../../icons/index.js';
+export function WageringQuestModal(props) {
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-[18px] font-semibold", children: "Slots - total bet Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/dist/components/Quests/index.js

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

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

@@ -4,4 +4,4 @@ export interface SignInProps {
     logo: ImageProps['src'];
     children?: ReactNode;
 }
-export declare function SignIn(props: SignInProps): import("react").JSX.Element;
+export declare function SignIn(props: SignInProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignIn.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image, {} from 'next/image';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/index.js';
+import { XIcon } from '../../icons/index.js';
+import { Dialog } from '../../ui/index.js';
+import { SignInForm } from './SignInForm.js';
+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, {})] }) })] }) }));
+}

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

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

package/dist/components/SignIn/SignInForm.js

@@ -0,0 +1,118 @@
+'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';
+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"] })] })] }))] }));
+}

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

@@ -2,5 +2,5 @@ import type { ComponentPropsWithRef } from 'react';
 interface SignInTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }
-export declare function SignInTrigger(props: SignInTriggerProps): import("react").JSX.Element;
+export declare function SignInTrigger(props: SignInTriggerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SignIn/{SignInTrigger.jsx → SignInTrigger.js}

@@ -1,13 +1,14 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks';
+import { useGlobalStore } from '../../client/hooks/index.js';
 export function SignInTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signIn: ctx.signIn,
     })));
-    return (<ark.button type="button" {...props} onClick={(e) => {
+    return (_jsx(ark.button, { type: "button", ...props, onClick: (e) => {
             globalStore.signIn.setOpen(!globalStore.signIn.open);
             return props.onClick?.(e);
-        }} data-state={globalStore.signIn.open ? 'open' : 'closed'}/>);
+        }, "data-state": globalStore.signIn.open ? 'open' : 'closed' }));
 }

package/dist/components/SignIn/index.js

@@ -1,2 +1,2 @@
-export * from './SignIn';
-export * from './SignInTrigger';
+export * from './SignIn.js';
+export * from './SignInTrigger.js';

package/dist/components/SignUp/SignUp.d.ts

@@ -4,4 +4,4 @@ export interface SignUpProps {
     logo: ImageProps['src'];
     children?: ReactNode;
 }
-export declare function SignUp(props: SignUpProps): import("react").JSX.Element;
+export declare function SignUp(props: SignUpProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignUp/SignUp.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image, {} from 'next/image';
+import { Suspense } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/index.js';
+import { XIcon } from '../../icons/index.js';
+import { Dialog } from '../../ui/index.js';
+import { SignUpForm } from './SignUpForm.js';
+export function SignUp(props) {
+    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
+    return (_jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
+            signUpStore.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(Suspense, { children: _jsx(SignUpForm, {}) })] }) })] }) }));
+}

package/dist/components/SignUp/SignUpForm.d.ts

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

package/dist/components/SignUp/SignUpForm.js

@@ -0,0 +1,133 @@
+'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 { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
+import { useSearchParams } from 'next/navigation';
+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, useSignUpMutation, } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
+import { ArrowLeftIcon, CheckIcon } from '../../icons/index.js';
+import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
+export function SignUpForm() {
+    const [step, setStep] = useState(1);
+    const dialog = useDialogContext();
+    const search = useSearchParams();
+    const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
+    const signUpMutation = useSignUpMutation();
+    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: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+                            try {
+                                await sendVerificationCodeMutation.mutateAsync({
+                                    channel: 'SMS',
+                                    recipient: mobileNumberParser.format(data.mobileNumber),
+                                });
+                                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: "Create Account" }), _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: "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);
+                                    signInStore.setOpen(true);
+                                }, children: "Log In" })] })] })), 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 id = ObjectId.generate(ObjectType.MemberAccount).toString();
+                            const { mobileNumber } = step1Form.getValues();
+                            try {
+                                await signUpMutation.mutateAsync({
+                                    id,
+                                    mobileNumber: mobileNumberParser.format(mobileNumber),
+                                    verificationCode: verificationCode.join(''),
+                                    referralCode: search.get('referralCode') ?? undefined,
+                                    domain: search.get('domain') ?? undefined,
+                                    btag: search.get('btag') ?? undefined,
+                                });
+                                const name = mobileNumberParser.format(mobileNumber);
+                                const password = `${name}${id}`;
+                                try {
+                                    await signInMutation.mutateAsync({
+                                        type: 'NAME_AND_PASSWORD',
+                                        name: mobileNumberParser.format(mobileNumber),
+                                        password,
+                                    });
+                                }
+                                catch {
+                                    signInStore.setOpen(true);
+                                }
+                                dialog.setOpen(false);
+                                step1Form.reset();
+                                step2Form.reset();
+                                setStep(1);
+                            }
+                            catch {
+                                toaster.error({
+                                    title: '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:cursor-not-allowed disabled:opacity-75", 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"] })] })] }))] }));
+}

package/dist/components/SignUp/SignUpTrigger.d.ts

@@ -2,5 +2,5 @@ import type { ComponentPropsWithRef } from 'react';
 interface SignUpTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }
-export declare function SignUpTrigger(props: SignUpTriggerProps): import("react").JSX.Element;
+export declare function SignUpTrigger(props: SignUpTriggerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SignUp/{SignUpTrigger.jsx → SignUpTrigger.js}

@@ -1,13 +1,14 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks';
+import { useGlobalStore } from '../../client/hooks/index.js';
 export function SignUpTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signUp: ctx.signUp,
     })));
-    return (<ark.button type="button" {...props} onClick={(e) => {
+    return (_jsx(ark.button, { type: "button", ...props, onClick: (e) => {
             globalStore.signUp.setOpen(!globalStore.signUp.open);
             return props.onClick?.(e);
-        }} data-state={globalStore.signUp.open ? 'open' : 'closed'}/>);
+        }, "data-state": globalStore.signUp.open ? 'open' : 'closed' }));
 }

package/dist/components/SignUp/index.js

@@ -1,2 +1,2 @@
-export * from './SignUp';
-export * from './SignUpTrigger';
+export * from './SignUp.js';
+export * from './SignUpTrigger.js';

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

@@ -1,2 +1,2 @@
 import type { TopWinsProps } from './TopWins';
-export declare function TopWins__client(props: TopWinsProps): import("react").JSX.Element | null;
+export declare function TopWins__client(props: TopWinsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TopWins/TopWins.client.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import Image from 'next/image';
+import { useLocaleInfo, useTopWinsQuery } from '../../client/hooks/index.js';
+import { formatNumber, getGameImageUrl } from '../../utils/index.js';
+export function TopWins__client(props) {
+    const localeInfo = useLocaleInfo();
+    const topWinsQuery = useTopWinsQuery();
+    const topWins = topWinsQuery.data ?? [];
+    const [emblaRef] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    if (!topWins?.length)
+        return null;
+    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold md:mb-4", children: props.heading ?? 'Recent Big Wins' }), _jsx("div", { ref: emblaRef, className: "relative lg:overflow-hidden", children: _jsx("div", { className: "flex gap-sm lg:gap-md", children: topWins.map((topWin) => (_jsxs("div", { className: "bg-bg-tertiary border-border-primary flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]", children: [_jsx("div", { className: "mx-auto aspect-square w-full", children: topWin.game && (_jsx(Image, { width: 100, height: 100, src: getGameImageUrl(topWin.game), alt: "", className: "size-full rounded-sm object-cover" })) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-text-secondary-700 text-xs", children: topWin.member.name }), _jsx("div", { className: "text-text-primary-brand text-sm font-semibold", children: formatNumber(topWin.payout, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: formatNumber(topWin.multiplier, {
+                                            minDecimalPlaces: 2,
+                                        }) })] })] }, topWin.id))) }) })] }));
+}

package/dist/components/TopWins/TopWins.d.ts

@@ -3,4 +3,4 @@ export interface TopWinsProps {
     heading?: string;
     className?: string;
 }
-export declare function TopWins(props: TopWinsProps): Promise<import("react").JSX.Element>;
+export declare function TopWins(props: TopWinsProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/TopWins/TopWins.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchTopWinsQuery } from '../../server/utils/index.js';
+import { TopWins__client } from './TopWins.client.js';
+export async function TopWins(props) {
+    await prefetchTopWinsQuery();
+    return _jsx(TopWins__client, { ...props });
+}

package/dist/components/TopWins/index.js

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

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

@@ -1,2 +1,2 @@
 import type { TournamentCounterProps } from './TournamentCounter';
-export declare function TournamentCounter__client(props: TournamentCounterProps): import("react").JSX.Element | null;
+export declare function TournamentCounter__client(props: TournamentCounterProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TournamentCounter/TournamentCounter.client.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { useJackpotsQuery } from '../../client/hooks/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { TournamentCounterItem } from './TournamentCounterItem.js';
+export function TournamentCounter__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    const scrollPrev = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollPrev();
+    }, [emblaApi]);
+    const scrollNext = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollNext();
+    }, [emblaApi]);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback(() => {
+        if (!emblaApi)
+            return;
+        setCanScrollPrev(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect]);
+    const jackpotsQuery = useJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    if (jackpots.length <= 0)
+        return null;
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-lg font-semibold", children: props.heading ?? 'Tournaments' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/tournaments', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot) => (_jsx(TournamentCounterItem, { jackpot: jackpot, viewAllUrl: props.viewAllUrl, className: "w-full" }, jackpot.id))) }) })] }));
+}

package/dist/components/TournamentCounter/TournamentCounter.d.ts

@@ -5,4 +5,4 @@ export interface TournamentCounterProps {
     viewAllUrl?: string;
     className?: string;
 }
-export declare function TournamentCounter(props: TournamentCounterProps): Promise<import("react").JSX.Element>;
+export declare function TournamentCounter(props: TournamentCounterProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/TournamentCounter/{TournamentCounter.jsx → TournamentCounter.js}

@@ -1,5 +1,6 @@
-import { prefetchJackpotsQuery } from '../../server/utils';
-import { TournamentCounter__client } from './TournamentCounter.client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchJackpotsQuery } from '../../server/utils/index.js';
+import { TournamentCounter__client } from './TournamentCounter.client.js';
 export async function TournamentCounter(props) {
     await prefetchJackpotsQuery({
         first: 100,
@@ -16,5 +17,5 @@ export async function TournamentCounter(props) {
             order: 'DESC',
         },
     });
-    return <TournamentCounter__client {...props}/>;
+    return _jsx(TournamentCounter__client, { ...props });
 }

package/dist/components/TournamentCounter/TournamentCounterItem.d.ts

@@ -1,5 +1,4 @@
 import type { Jackpot } from '@opexa/portal-sdk-core';
-import React from 'react';
 export interface TournamentCounterItemProps {
     jackpot: Jackpot;
     /** @default "/jackpots" */
@@ -7,4 +6,4 @@ export interface TournamentCounterItemProps {
     /** @default "/tournaments" */
     viewAllUrl?: string;
 }
-export declare function TournamentCounterItem({ jackpot, className, viewAllUrl, }: TournamentCounterItemProps): React.JSX.Element;
+export declare function TournamentCounterItem({ jackpot, className, viewAllUrl, }: TournamentCounterItemProps): import("react/jsx-runtime").JSX.Element;