@opexa/portal-components 0.0.864 → 0.0.866

package/dist/components/KYC/KYCNonPagCor/PersonalInformation.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { differenceInYears } from 'date-fns';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import invariant from 'tiny-invariant';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { useSignOutMutation } from '../../../client/hooks/useSignOutMutation.js';
+import { useUpdateAccountMutation } from '../../../client/hooks/useUpdateAccountMutation.js';
+import { getSession } from '../../../client/services/getSession.js';
+import { BIOMETRIC_STORAGE_KEY } from '../../../client/utils/biometric.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { unregisterFCMDevice } from '../../../services/trigger.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import { Field } from '../../../ui/Field/index.js';
+import { getQueryClient } from '../../../utils/getQueryClient.js';
+import { getSessionQueryKey } from '../../../utils/queryKeys.js';
+import DateOfBirthField from '../../DateOfBirthField.js';
+import { useKYCNonPagcorContext } from './KYCNonPagcorContext.js';
+const firstNameBaseSchema = z
+    .string()
+    .regex(/^[a-z ]+$/gi, 'First name must contain only letters')
+    .transform((val) => val.trim())
+    .refine((val) => val.length >= 2, {
+    message: 'First name must be 2 or more characters',
+})
+    .refine((val) => val.length <= 50, {
+    message: 'First name must not be more than 50 characters',
+});
+const lastNameBaseSchema = z
+    .string()
+    .regex(/^[a-z ]+$/gi, 'Last name must contain only letters')
+    .transform((val) => val.trim())
+    .refine((val) => val.length >= 2, {
+    message: 'Last name must be 2 or more characters',
+})
+    .refine((val) => val.length <= 50, {
+    message: 'Last name must not be more than 50 characters',
+});
+const birthdateBaseSchema = z
+    .date({
+    invalid_type_error: 'Date of birth is required',
+    required_error: 'Date of birth is required',
+})
+    .superRefine((val, ctx) => {
+    const now = new Date();
+    const age = differenceInYears(now, val);
+    if (age < 21) {
+        return ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'You must be at least 21 years old',
+        });
+    }
+});
+const definition = z.object({
+    firstName: firstNameBaseSchema,
+    lastName: lastNameBaseSchema,
+    birthday: birthdateBaseSchema,
+});
+export function PersonalInformation() {
+    const kyc = useKYCNonPagcorContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        kycReminder: ctx.kycReminder,
+    })));
+    const router = useRouter();
+    const updateAccountMutation = useUpdateAccountMutation({
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const signOutMutation = useSignOutMutation({
+        async onSuccess() {
+            const keep = new Set([BIOMETRIC_STORAGE_KEY]);
+            for (let i = 0; i < localStorage.length;) {
+                const key = localStorage.key(i);
+                if (key && !keep.has(key)) {
+                    localStorage.removeItem(key);
+                }
+                else {
+                    i++;
+                }
+            }
+            sessionStorage.clear();
+            router.replace('/');
+        },
+    });
+    const form = useForm({
+        resolver: zodResolver(definition),
+        defaultValues: {
+            firstName: '',
+            lastName: '',
+            birthday: undefined,
+        },
+        mode: 'all',
+    });
+    async function onSubmit(values) {
+        await updateAccountMutation.mutateAsync({
+            realName: `${values.firstName} ${values.lastName}`,
+            birthDay: values.birthday.toISOString().split('T')[0],
+        });
+    }
+    const birthDay = form.watch('birthday');
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Personal Information" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Provide your basic details and work info." }), _jsxs("form", { className: "mt-7", onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.firstName, children: [_jsx(Field.Label, { children: "First Name" }), _jsx(Field.Input, { placeholder: "Enter your first name", ...form.register('firstName') }), _jsx(Field.ErrorText, { children: form.formState.errors.firstName?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.lastName, children: [_jsx(Field.Label, { children: "Last Name" }), _jsx(Field.Input, { placeholder: "Enter your last name", ...form.register('lastName') }), _jsx(Field.ErrorText, { children: form.formState.errors.lastName?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.birthday, className: "mt-xl", children: [_jsx(DateOfBirthField, { value: birthDay, onChange: (value) => {
+                                    if (!value)
+                                        return;
+                                    form.setValue('birthday', value, {
+                                        shouldDirty: true,
+                                        shouldTouch: true,
+                                        shouldValidate: true,
+                                    });
+                                }, onBlur: () => {
+                                    form.trigger('birthday');
+                                } }), _jsx(Field.ErrorText, { children: form.formState.errors.birthday?.message })] }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: updateAccountMutation.isPending, children: "Continue" }), kyc.isSkippable && (_jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", type: "button", onClick: () => {
+                            globalStore.kyc.setOpen(false);
+                            globalStore.kycReminder.setOpen(true);
+                        }, disabled: updateAccountMutation.isPending, children: "Skip for now" })), ' ', _jsx(Button, { className: "bg-transparent text-text-brand-primary-600", onClick: async () => {
+                            if (Capacitor.isNativePlatform()) {
+                                const session = await getQueryClient().fetchQuery({
+                                    queryKey: getSessionQueryKey(),
+                                    queryFn: async () => getSession(),
+                                });
+                                invariant(session.status === 'authenticated');
+                                await unregisterFCMDevice({
+                                    type: ['IOS', 'ANDROID'],
+                                }, {
+                                    headers: {
+                                        Authorization: `Bearer ${session.token}`,
+                                    },
+                                });
+                            }
+                            signOutMutation.mutate();
+                            router.push('/');
+                        }, children: "Log Out" })] })] }));
+}

package/dist/components/KYC/KYCNonPagCor/index.d.ts

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

package/dist/components/KYC/KYCNonPagCor/index.js

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

package/dist/components/KYC/KYCNonPagCor/useKYCNonPagCor.d.ts

@@ -0,0 +1,26 @@
+type EventDetail = {
+    type: 'SELFIE_CAPTURED';
+    data: string;
+} | {
+    type: 'ID_DOCUMENT_CAPTURED';
+    data: string;
+};
+type UnsubscribeFn = () => void;
+type Subscriber = (detail: EventDetail) => UnsubscribeFn;
+export type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
+export interface UseKycNonPagcorReturn {
+    step: number;
+    setStep: (step: number) => void;
+    done: boolean;
+    setDone: (done: boolean) => void;
+    subscribe: (subscriber: Subscriber) => UnsubscribeFn;
+    triggerEvent: (detail: EventDetail) => void;
+    idFrontImageId: string | null;
+    setFrontImageId: (id: string | null) => void;
+    selfieImageId: string | null;
+    setSelfieImageId: (id: string | null) => void;
+    reset: () => void;
+    isSkippable: boolean;
+}
+export declare function useKYCNonPagCor(isSkippable: boolean): UseKycNonPagcorReturn;
+export {};

package/dist/components/KYC/KYCNonPagCor/useKYCNonPagCor.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from 'react';
+import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
+export function useKYCNonPagCor(isSkippable) {
+    const account = useAccountQuery();
+    const [step, setStep] = useState(1);
+    const [done, setDone] = useState(false);
+    const [idFrontImageId, setFrontImageId] = useState(null);
+    const [selfieImageId, setSelfieImageId] = useState(null);
+    const subscribers = useRef([]);
+    const subscribe = (subscriber) => {
+        subscribers.current.push(subscriber);
+        return () => {
+            subscribers.current = subscribers.current.filter((item) => item !== subscriber);
+        };
+    };
+    useEffect(() => {
+        setStep(account.data?.realName ? 2 : 1);
+    }, [account.data]);
+    const triggerEvent = (detail) => {
+        subscribers.current.forEach((subscriber) => {
+            subscriber(detail);
+        });
+    };
+    const reset = () => {
+        console.log('KYC NON PAGCOR RESET', account.data);
+        setStep(account.data?.realName ? 2 : 1);
+        setDone(false);
+        setFrontImageId(null);
+        setSelfieImageId(null);
+    };
+    return {
+        step,
+        setStep,
+        done,
+        setDone,
+        idFrontImageId,
+        setFrontImageId,
+        selfieImageId,
+        setSelfieImageId,
+        subscribe,
+        triggerEvent,
+        reset,
+        isSkippable,
+    };
+}

package/dist/components/KYC/KYCVerificationStatus.lazy.js

@@ -19,15 +19,18 @@ export function KYCVerificationStatus() {
     const icons = status === 'PENDING' ? bellIcon : alertIcon;
     return (_jsx(Dialog.Root, { open: globalStore.kycVerificationStatus.open, onOpenChange: (details) => {
             globalStore.kycVerificationStatus.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' && 'Verification Required'] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
+        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' ||
+                                            (status === 'CREATED' && 'Verification Required')] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
                                             `Your account verification is still under review. Please wait
 								until it's approved before you can continue playing or
 								depositing.`, status === 'REJECTED' &&
-                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' &&
-                                            'Your account is not yet verified. Please complete the verification process to continue playing or depositing.'] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
+                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' ||
+                                            (status === 'CREATED' &&
+                                                'Your account is not yet verified. Please complete the verification process to continue playing or depositing.')] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                         globalStore.kyc.setOpen(true);
-                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' && 'Verify Now'] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' ||
+                                            (status === 'CREATED' && 'Verify Now')] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                     }, children: "Close" })] }) }) })] }) }));
 }

package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts

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

package/dist/components/PortalProvider/AndroidOnlyComponents.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { AndroidRoutingHandler } from './AndroidRoutingHandler.js';
+import PushNotification from './PushNotifications.js';
+export function AndroidOnlyComponents() {
+    const platform = Capacitor.getPlatform();
+    const isNative = platform === 'android' || platform === 'ios';
+    if (!isNative)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(PushNotification, {}), _jsx(AndroidRoutingHandler, {})] }));
+}

package/dist/components/PortalProvider/CXDTokenObserver.js

@@ -1,30 +1,30 @@
 'use client';
 import { addHours } from 'date-fns';
 import { clamp } from 'lodash-es';
-import { useSearchParams } from 'next/navigation';
 import { useLocalStorage, useTimeout } from 'usehooks-ts';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 export function CXDTokenObserver() {
-    const searchParams = useSearchParams();
-    const cxdToken = searchParams.get('cxd');
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
+    const { data: account } = useAccountQuery();
+    const accountCxd = {
+        cxd: account?.cellxpertDetails?.cxd,
+    };
+    const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', null);
     const now = new Date();
-    const shouldTimeoutRun = cxdToken && account;
     const removeCxdUntilInMs = cxd?.timestamp
         ? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
         : 0;
     useTimeout(() => {
-        const isSame = cxd?.cxd === cxdToken;
+        const isSame = cxd?.cxd === accountCxd.cxd;
         if (!isSame) {
             const extendedTimestamp = addHours(new Date(), 6).getTime();
             setCxd({
-                cxd: cxdToken,
+                cxd: accountCxd.cxd,
                 timestamp: extendedTimestamp,
             });
         }
-    }, shouldTimeoutRun ? 100 : null);
-    useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
+    }, account ? 100 : null);
+    useTimeout(() => {
+        removeCxd();
+    }, account ? removeCxdUntilInMs : null);
     return null;
 }

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

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

package/dist/components/SignIn/CrazyWin/MobileNumberSignIn.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useRef } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { twJoin } from 'tailwind-merge';
+import invariant from 'tiny-invariant';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useCooldown } from '../../../client/hooks/useCooldown.js';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../../client/hooks/useMobileNumberParser.js';
+import { useSendVerificationCodeMutation } from '../../../client/hooks/useSendVerificationCodeMutation.js';
+import { useSignInMutation } from '../../../client/hooks/useSignInMutation.js';
+import { getSession } from '../../../client/services/getSession.js';
+import { deleteBiometricCredentials, getBiometricCredentials, hasSavedBiometry, saveBiometricCredentials, } from '../../../client/utils/biometric.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { CheckIcon } from '../../../icons/CheckIcon.js';
+import phoneIcon from '../../../images/phone-icon.svg';
+import { createSingleUseToken } from '../../../services/auth.js';
+import { registerFCMDevice, unregisterFCMDevice, } from '../../../services/trigger.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Checkbox } from '../../../ui/Checkbox/index.js';
+import { Field } from '../../../ui/Field/index.js';
+import { PinInput } from '../../../ui/PinInput/index.js';
+import { LOCALSTORAGE_PUSH_NOTIFICATION_TOKEN_KEY } from '../../PortalProvider/PushNotifications.js';
+import { useSignInContext, useSignInPropsContext } from './../SignInContext.js';
+export function MobileNumberSignIn() {
+    const signInProps = useSignInPropsContext();
+    const router = useRouter();
+    const context = useSignInContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+        kycReminder: ctx.kycReminder,
+        responsibleGaming: ctx.responsibleGaming,
+        termsAndConditions: ctx.termsAndConditions,
+        responsibleGamingReminder: ctx.responsibleGamingReminder,
+        kyc: ctx.kyc,
+        registerBiometrics: ctx.registerBiometrics,
+        disclaimer: ctx.disclaimer,
+    })));
+    const signInMutation = useSignInMutation({
+        onSuccess: async () => {
+            step1Form.reset();
+            step2Form.reset();
+            context.setStep(1);
+            globalStore.signIn.setOpen(false);
+            const session = await getSession();
+            await unregisterFCMDevice({
+                type: ['IOS', 'ANDROID'],
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            invariant(session.status === 'authenticated');
+            if (Capacitor.isNativePlatform()) {
+                const pushToken = localStorage.getItem(LOCALSTORAGE_PUSH_NOTIFICATION_TOKEN_KEY);
+                if (pushToken) {
+                    await registerFCMDevice({
+                        type: Capacitor.getPlatform() === 'android' ? 'ANDROID' : 'IOS',
+                        token: pushToken,
+                    }, {
+                        headers: {
+                            Authorization: `Bearer ${session.token}`,
+                        },
+                    });
+                }
+            }
+            if (signInProps.shouldShowResponsibleGamingReminder) {
+                globalStore.responsibleGamingReminder.setOpen(true);
+            }
+            if (signInProps.shouldShowDisclaimer) {
+                globalStore.disclaimer.setOpen(true);
+            }
+            if (Capacitor.isNativePlatform()) {
+                if (!hasSavedBiometry()) {
+                    globalStore.registerBiometrics.setOpen(true);
+                }
+                else {
+                    const r = await createSingleUseToken({
+                        headers: {
+                            Authorization: `Bearer ${session.token}`,
+                        },
+                    });
+                    if (r.token) {
+                        const credentials = await getBiometricCredentials();
+                        if (!credentials) {
+                            console.error({ description: 'Biometric verification failed' });
+                            deleteBiometricCredentials();
+                            return;
+                        }
+                        const saved = await saveBiometricCredentials({
+                            username: credentials.username,
+                            password: r.token,
+                        });
+                        if (saved) {
+                            console.info('Biometric credentials has been updated');
+                        }
+                        else {
+                            console.warn('Failed to updated biometric credentials');
+                            globalStore.signIn.setOpen(!globalStore.signIn.open);
+                        }
+                    }
+                    else {
+                        console.error('Failed to create token');
+                        globalStore.signIn.setOpen(!globalStore.signIn.open);
+                    }
+                }
+            }
+        },
+        onError: (err) => {
+            const errorMessage = err.name === 'Forbidden'
+                ? 'Please enter the correct verification code'
+                : err.message;
+            toaster.error({
+                title: 'Sign In Failed',
+                description: errorMessage,
+            });
+        },
+    });
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation({
+        onSuccess: () => {
+            context.setStep(2);
+            cooldown.start();
+        },
+        onError: (err) => {
+            toaster.error({
+                title: 'Sign In Failed',
+                description: err.message,
+            });
+        },
+    });
+    const localeInfo = useLocaleInfo();
+    const mobileNumberParser = useMobileNumberParser();
+    const Step1Definition = z.object({
+        mobileNumber: z
+            .string()
+            .min(1, 'Mobile number is required')
+            .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 and the responsible gaming guidelines',
+                });
+            }
+        }),
+    });
+    const Step2Definition = z.object({
+        verificationCode: z.array(z.string()).superRefine((val, ctx) => {
+            if (val.length !== 6 || val.some((v) => v.length !== 1)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Please enter your 6-digit verification code.',
+                });
+            }
+        }),
+    });
+    const step1Form = useForm({
+        resolver: zodResolver(Step1Definition),
+        defaultValues: {
+            mobileNumber: '',
+            termsAccepted: globalStore.responsibleGaming.accepted &&
+                globalStore.termsAndConditions.accepted
+                ? true
+                : false,
+        },
+    });
+    const step2Form = useForm({
+        resolver: zodResolver(Step2Definition),
+        defaultValues: {
+            verificationCode: Array.from({ length: 6 }).fill(''),
+        },
+    });
+    const cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    const form2Ref = useRef(null);
+    const pinInputClass = twJoin('aspect-[9/12]', 'rounded', 'bg-black/40', 'text-center', 'shadow-[-4px_4px_12.6px_0px_rgba(0,0,0,0.15)_inset]', 'outline-none', 'border-none');
+    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs("form", { className: "mt-md", onSubmit: step1Form.handleSubmit(async (data) => {
+                    sendVerificationCodeMutation.mutateAsync({
+                        channel: 'SMS',
+                        recipient: mobileNumberParser.format(data.mobileNumber),
+                        strict: true,
+                    });
+                }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: "h-10 rounded-full border-none bg-black/40 text-xs", placeholder: "Enter Phone Number", ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl h-10 rounded-full text-sm", disabled: step1Form.formState.isSubmitting, style: {
+                            boxShadow: 'inset 0px -1px 2px 1px #fff7e1',
+                            backgroundImage: 'linear-gradient(89deg, #c7802d -15.91%, #ffe585 28.75%, #ffeca6 49.46%, #c7802d 112.69%)',
+                        }, children: "Login" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
+                                        if (details.checked === 'indeterminate')
+                                            return;
+                                        o.field.onChange(details.checked);
+                                        globalStore.termsAndConditions.setAccepted(details.checked);
+                                        globalStore.responsibleGaming.setAccepted(details.checked);
+                                    }, children: [_jsx(Checkbox.Control, { className: "border-none bg-white", children: _jsx(Checkbox.Indicator, { asChild: true, className: "bg-white", children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I confirm that I am at least 21 years old, not listed in the PAGCOR NDRP, not a GEL license holder, government employee, or member of the Armed Forces of the Philippines. I am not playing in a public space and agree to", _jsx("button", { type: "button", className: "font-semibold text-[#FFE595]", onClick: () => {
+                                                        if (signInProps.termsAndConditionsUrl) {
+                                                            globalStore.signIn.setOpen(false);
+                                                            router.push(signInProps.termsAndConditionsUrl);
+                                                        }
+                                                        else {
+                                                            globalStore.termsAndConditions.setOpen(true);
+                                                            globalStore.termsAndConditions.setNext('SIGN_IN');
+                                                        }
+                                                    }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "font-semibold text-[#FFE595]", onClick: () => {
+                                                        if (signInProps.termsAndConditionsUrl) {
+                                                            globalStore.signIn.setOpen(false);
+                                                            router.push(signInProps.termsAndConditionsUrl);
+                                                        }
+                                                        else {
+                                                            globalStore.termsAndConditions.setOpen(true);
+                                                            globalStore.termsAndConditions.setNext('SIGN_IN');
+                                                        }
+                                                    }, children: "Privacy Policy" }), ' ', ". Ineligible accounts will have their funds forfeited to the government."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-[#ff2525b3] text-xs", children: o.fieldState.error?.message })] })) })] })), context.step === 2 && (_jsxs(_Fragment, { children: [_jsx(Image, { src: phoneIcon, alt: "phone icon", width: 300, height: 75, className: "mx-auto mt-sm h-12 w-12" }), _jsx("h2", { className: "mt-xl text-center text-2xl", children: "Check your Phone" }), _jsxs("p", { className: "mt-4 text-center text-[#999]", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold text-[#efc806]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text."] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
+                            const { mobileNumber } = step1Form.getValues();
+                            signInMutation.mutateAsync({
+                                type: 'MOBILE_NUMBER',
+                                mobileNumber: mobileNumberParser.format(mobileNumber),
+                                verificationCode: verificationCode.join(''),
+                            });
+                        }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
+                                                if (e.key === 'Backspace') {
+                                                    step2Form.reset();
+                                                }
+                                            }, value: o.field.value, onValueChange: (details) => {
+                                                o.field.onChange(details.value);
+                                                o.field.onBlur();
+                                            }, otp: true, onValueComplete: () => {
+                                                form2Ref.current?.requestSubmit();
+                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0, className: pinInputClass }), _jsx(PinInput.Input, { index: 1, className: pinInputClass }), _jsx(PinInput.Input, { index: 2, className: pinInputClass }), _jsx(PinInput.Input, { index: 3, className: pinInputClass }), _jsx(PinInput.Input, { index: 4, className: pinInputClass }), _jsx(PinInput.Input, { index: 5, className: pinInputClass })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl h-10 rounded-full text-sm", disabled: step2Form.formState.isSubmitting || signInMutation.isPending, style: {
+                                    boxShadow: 'inset 0px -1px 2px 1px #fff7e1',
+                                    backgroundImage: 'linear-gradient(89deg, #c7802d -15.91%, #ffe585 28.75%, #ffeca6 49.46%, #c7802d 112.69%)',
+                                }, 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 receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-[#efc806]", 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: "mx-auto mt-3xl flex w-fit items-center gap-1 font-semibold text-sm text-text-tertiary-600", onClick: () => {
+                                    context.setStep(1);
+                                    step2Form.reset();
+                                    cooldown.stop();
+                                }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
+}

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

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