@opexa/portal-components 0.0.957 → 0.0.959

package/dist/lib/components/FavoriteGames/FavoriteGames.client.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
+interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
+export interface FavoriteGamesProps {
+    className?: string | ClassNameEntries;
+    /** @default 'Favorite Games' */
+    heading?: string | ReactNode;
+    bypassDomains?: BypassDomainConfig[];
+}
+export declare function FavoriteGames__client(props: FavoriteGamesProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/lib/components/FavoriteGames/FavoriteGames.client.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
+import { useFavoriteGamesQuery } from '../../client/hooks/useFavoriteGamesQuery.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { Star01Icon } from '../../icons/Star01Icon.js';
+import { Button } from '../../ui/Button/index.js';
+import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
+import { GameLaunchTrigger } from '../GameLaunch/index.js';
+export function FavoriteGames__client(props) {
+    const isBypass = useBypassKycChecker(props.bypassDomains);
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 3,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 6,
+            },
+        },
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    const gamesQuery = useFavoriteGamesQuery();
+    const games = gamesQuery.data ?? [];
+    if (games.length <= 0)
+        return null;
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Favorite Games' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md'), children: games.map((game) => (_jsx(Item, { bypassKycCheck: isBypass, game: game, className: {
+                            thumbnailRoot: classNames.thumbnailRoot,
+                            thumbnailTitle: classNames.thumbnailTitle,
+                        } }, game.id))) }) })] }));
+}
+function Item({ game, bypassKycCheck, className, }) {
+    const featureFlag = useFeatureFlag();
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Game removed from favorites',
+            });
+        },
+        onError() {
+            toaster.error({
+                description: 'Failed to remove game from favorites',
+            });
+        },
+    });
+    const markUnmarkGameAsFavoriteEnabled = session?.status !== 'authenticated'
+        ? false
+        : featureFlag.enabled
+            ? account?.status !== 'VERIFICATION_LOCKED'
+            : true;
+    return (_jsxs(GameLaunchTrigger, { bypassKycCheck: bypassKycCheck, game: game, className: twMerge('hover:-translate-y-1 relative block w-full animate-scale-in shadow-sm transition-transform duration-200', className?.thumbnailRoot), children: [markUnmarkGameAsFavoriteEnabled && (_jsx("div", { role: "button", tabIndex: 0, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (unmarkGameAsFavoriteMutation.isPending)
+                        return;
+                    unmarkGameAsFavoriteMutation.mutate(game.id);
+                }, "aria-disabled": unmarkGameAsFavoriteMutation.isPending, className: "absolute top-2 right-2 flex size-9 items-center justify-center rounded-xs bg-black/65 blur-[0.5px]", children: _jsx(Star01Icon, { className: "size-5 fill-yellow-400 text-yellow-400" }) })), _jsx(Image, { src: getGameImageUrl({
+                    id: game.id,
+                    provider: game.provider,
+                }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full truncate rounded-b-md bg-bg-tertiary px-2 py-3.5 text-center font-semibold text-text-primary-brand text-xs', className?.thumbnailTitle), children: game.name })] }));
+}

package/dist/lib/components/FavoriteGames/FavoriteGames.d.ts

@@ -0,0 +1,3 @@
+import { type FavoriteGamesProps } from './FavoriteGames.client';
+export declare function FavoriteGames(props: FavoriteGamesProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { FavoriteGamesProps };

package/dist/lib/components/FavoriteGames/FavoriteGames.js

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

package/dist/lib/components/FavoriteGames/index.d.ts

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

package/dist/lib/components/FavoriteGames/index.js

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

package/dist/lib/components/ForgotPassword/Crazywin/CWForgotPassword.d.ts

@@ -0,0 +1,6 @@
+import { type ImageProps } from 'next/image';
+type Props = {
+    logo: ImageProps['src'];
+};
+declare const ForgotPassword: ({ logo }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ForgotPassword;

package/dist/lib/components/ForgotPassword/Crazywin/CWForgotPassword.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import CWForgotPasswordForm from './CWForgotPasswordForm.js';
+import styles from './ForgotPassword.module.css';
+const ForgotPassword = ({ logo }) => {
+    return (_jsx(Dialog.Content, { className: "overflow-y-invisible top-0 left-0 flex h-full w-full items-center bg-transparent", children: _jsxs("div", { className: "flex h-[90dvh] w-full flex-col justify-center scroll-smooth", children: [_jsxs("div", { className: "relative mx-auto w-full max-w-[22.5rem]", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto mt-8 h-auto w-[12.04544rem]", draggable: false }), _jsx(Dialog.CloseTrigger, { className: 'h-fit w-fit rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5 text-[#6C5200]', children: _jsx(XIcon, {}) })] }), _jsx("h2", { className: "mx-auto mt-10 w-fit bg-[linear-gradient(50deg,#c7802d_-5.1%,#ffe585_44.95%,#c7802d_109.05%)] bg-clip-text font-bold text-2xl text-transparent uppercase", children: "Forgot Password" }), _jsx("div", { className: twMerge('mx-auto mt-7.5 max-w-[20.6875rem] p-7.5', styles.card), children: _jsx(CWForgotPasswordForm, {}) })] }) }));
+};
+export default ForgotPassword;

package/dist/lib/components/ForgotPassword/Crazywin/CWForgotPasswordForm.d.ts

@@ -0,0 +1,2 @@
+declare const CWForgotPasswordForm: () => import("react/jsx-runtime").JSX.Element;
+export default CWForgotPasswordForm;

package/dist/lib/components/ForgotPassword/Crazywin/CWForgotPasswordForm.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+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 { useResetPasswordMutation } from '../../../client/hooks/useResetPasswordMutation.js';
+import { useSendVerificationCodeMutation } from '../../../client/hooks/useSendVerificationCodeMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { EyeIcon } from '../../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../../icons/EyeOffIcon.js';
+import lockIcon from '../../../images/lock-icon.webp';
+import { createForgotPasswordSchema, } from '../../../schemas/forgotPasswordSchema.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Field } from '../../../ui/Field/index.js';
+import { PasswordInput } from '../../../ui/PasswordInput/index.js';
+const CWForgotPasswordForm = () => {
+    const mobileNumberParser = useMobileNumberParser();
+    const schema = useMemo(() => createForgotPasswordSchema(mobileNumberParser), [mobileNumberParser]);
+    const { register, watch, getValues, handleSubmit, formState: { isValid, isDirty, errors }, } = useForm({
+        resolver: zodResolver(schema),
+        mode: 'onChange',
+    });
+    const mobileNumberValue = watch('mobileNumber');
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        forgotPassword: ctx.forgotPassword,
+    })));
+    const commonInputClass = 'h-10 w-full rounded-full border-none bg-black/40 text-xs placeholder:text-text-placeholder focus:outline-none focus:ring-0';
+    const localeInfo = useLocaleInfo();
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
+    const resetPasswordMutation = useResetPasswordMutation({
+        onSuccess() {
+            globalStore.forgotPassword.setOpen(false);
+            globalStore.signIn.setOpen(true);
+            toaster.success({
+                description: 'Your password has been updated.',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    const onSubmit = (data) => {
+        resetPasswordMutation.mutate({
+            mobileNumber: mobileNumberParser.format(data.mobileNumber),
+            newPassword: data.password,
+            verificationCode: data.verificationCode,
+        });
+    };
+    return (_jsx("form", { autoComplete: 'off', onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!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: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.password?.message })] })] }) }), _jsx(Field.Root, { invalid: !!errors.confirmPassword, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Confirm Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.confirmPassword?.message })] })] }) }), _jsxs(Field.Root, { invalid: !!errors.verificationCode, children: [_jsx(Field.Label, { className: "text-xs", children: "OTP Code" }), _jsxs("div", { className: "relative", children: [_jsx(Field.Input, { className: twMerge(commonInputClass, 'pr-[5.75rem]'), placeholder: "Enter OTP Code", ...register('verificationCode') }), _jsx(Button, { type: "button", className: "-translate-y-1/2 absolute top-1/2 right-1 h-fit w-fit rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", disabled: !mobileNumberValue || !!errors.mobileNumber || cooldown.cooling, onClick: async () => {
+                                        if (!cooldown.cooling) {
+                                            await sendVerificationCodeMutation.mutateAsync({
+                                                channel: 'SMS',
+                                                recipient: mobileNumberParser.format(getValues('mobileNumber'))
+                                            });
+                                            cooldown.start();
+                                            toaster.success({
+                                                description: `OTP sent to ${getValues('mobileNumber')}`
+                                            });
+                                        }
+                                    }, children: cooldown.cooling ? cooldown.countdown : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-7.5 rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", fullWidth: true, disabled: !isValid || !isDirty, children: "Change Password" })] }) }));
+};
+export default CWForgotPasswordForm;

package/dist/lib/components/ForgotPassword/ForgotPassword.d.ts

@@ -0,0 +1,3 @@
+import type { ForgotPasswordProps } from './ForgotPassword.lazy';
+export declare function ForgotPassword(props: ForgotPasswordProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { ForgotPasswordProps };

package/dist/lib/components/ForgotPassword/ForgotPassword.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./ForgotPassword.lazy.js').then((m) => m.ForgotPassword), {
+    ssr: false,
+    loading: () => null,
+});
+export function ForgotPassword(props) {
+    const touched = useGlobalStore(useShallow((ctx) => ctx.forgotPassword['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
+}

package/dist/lib/components/ForgotPassword/ForgotPassword.lazy.d.ts

@@ -0,0 +1,11 @@
+import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
+type ForgotPasswordLayout = 'crazywin' | 'default';
+export interface ForgotPasswordProps {
+    logo: ImageProps['src'];
+    children?: ReactNode;
+    className?: string;
+    layout?: ForgotPasswordLayout | 'happybingo';
+}
+export declare function ForgotPassword(props: ForgotPasswordProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/ForgotPassword/ForgotPassword.lazy.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { Suspense, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import CrazywinForgotPassword from './Crazywin/CWForgotPassword.js';
+import { ForgotPasswordForm } from './ForgotPasswordForm.js';
+export function ForgotPassword(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        forgotPassword: ctx.forgotPassword,
+    })));
+    const [layout, setLayout] = useState('default');
+    useEffect(() => {
+        setLayout(() => {
+            switch (props.layout) {
+                case 'crazywin':
+                    return 'crazywin';
+                default:
+                    return 'default';
+            }
+        });
+    }, [props.layout]);
+    const Body = {
+        crazywin: (_jsx(CrazywinForgotPassword, { logo: props.logo })),
+        default: (_jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.layout === 'happybingo' ? 'bg-white dark:bg-[#0C111D]' : 'bg-bg-primary-alt', props.className), 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(ForgotPasswordForm, { layout: props.layout }) })] }))
+    };
+    return (_jsx(Dialog.Root, { open: globalStore.forgotPassword.open, onOpenChange: (details) => {
+            globalStore.forgotPassword.setOpen(details.open);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: Body[layout] })] }) }));
+}

package/dist/lib/components/ForgotPassword/ForgotPasswordForm.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    layout?: string;
+};
+export declare function ForgotPasswordForm({ layout }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/ForgotPassword/ForgotPasswordForm.js

@@ -0,0 +1,182 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRef, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+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 { useResetPasswordMutation } from '../../client/hooks/useResetPasswordMutation.js';
+import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { EyeIcon } from '../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../icons/EyeOffIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PasswordInput } from '../../ui/PasswordInput/index.js';
+import { PinInput } from '../../ui/PinInput/index.js';
+export function ForgotPasswordForm({ layout }) {
+    const [step, setStep] = useState(1);
+    const mobileNumberParser = useMobileNumberParser();
+    const localeInfo = useLocaleInfo();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        forgotPassword: ctx.forgotPassword,
+    })));
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
+    const resetPasswordMutation = useResetPasswordMutation({
+        onSuccess() {
+            globalStore.forgotPassword.setOpen(false);
+            globalStore.signIn.setOpen(true);
+            step1Form.reset();
+            step2Form.reset();
+            toaster.success({
+                description: 'Your password has been updated.',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const createStep1Definition = (includeOtp) => {
+        const base = z.object({
+            mobileNumber: z.string().superRefine((v, ctx) => {
+                if (!mobileNumberParser.validate(v)) {
+                    ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Invalid mobile number' });
+                }
+            }),
+            newPassword: z.string().min(8, 'Password must be 8 or more characters').max(100),
+            confirmPassword: z.string().min(1, 'Confirm your password'),
+            verificationCode: includeOtp
+                ? z.string().refine((v) => /^\d{4,6}$/.test(v), 'Invalid OTP')
+                : z.string().optional(),
+        });
+        return base.superRefine((val, ctx) => {
+            if (val.newPassword !== val.confirmPassword) {
+                ctx.addIssue({
+                    path: ['confirmPassword'],
+                    code: z.ZodIssueCode.custom,
+                    message: 'Passwords do not match',
+                });
+            }
+        });
+    };
+    const includeOtp = layout === 'happybingo';
+    const step1Schema = createStep1Definition(includeOtp);
+    const step1Form = useForm({
+        mode: 'all',
+        resolver: zodResolver(step1Schema),
+        defaultValues: {
+            mobileNumber: '',
+            newPassword: '',
+            confirmPassword: '',
+            ...(includeOtp ? { verificationCode: '' } : {}),
+        },
+    });
+    const mobileNumberValue = step1Form.watch('mobileNumber');
+    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 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 Header = {
+        1: (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Forgot Password" }), _jsx("p", { className: twMerge('mt-xs text-center text-sm', layout === 'happybingo' ? 'text-[#475467] dark:text-[#94969C]' : 'text-text-secondary-700'), children: "Your new password will be used to sign in." })] })),
+        2: (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] })] }))
+    };
+    if (layout === 'happybingo') {
+        return (_jsxs(_Fragment, { children: [Header[step], _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+                        resetPasswordMutation.mutate({
+                            mobileNumber: mobileNumberParser.format(data.mobileNumber),
+                            newPassword: step1Form.getValues('newPassword'),
+                            verificationCode: step1Form.getValues('verificationCode'),
+                        });
+                    }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', style: {
+                                                paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
+                                            }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "New Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl bg-transparent", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Confirm Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.verificationCode, className: "mt-xl bg-transparent", children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "OTP Code" }), _jsxs("div", { className: "grid grid-cols-[1fr_104px] gap-2", children: [_jsx(Field.Input, { placeholder: "Enter OTP Code", ...step1Form.register('verificationCode'), className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]' }), _jsx(Button, { variant: 'outline', className: 'bg-transparent', type: 'button', disabled: !mobileNumberValue || !!step1Form.formState.errors.mobileNumber || cooldown.cooling, onClick: async () => {
+                                                if (!cooldown.cooling) {
+                                                    try {
+                                                        await sendVerificationCodeMutation.mutateAsync({
+                                                            channel: 'SMS',
+                                                            recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                                                        });
+                                                        cooldown.start();
+                                                    }
+                                                    catch (e) {
+                                                        toaster.error({
+                                                            description: e instanceof Error
+                                                                ? e.message
+                                                                : 'Failed to send verification code',
+                                                        });
+                                                    }
+                                                }
+                                            }, children: cooldown.cooling ? `${cooldown.countdown} sec` : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: step1Form.formState.errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting || !step1Form.formState.isValid || !step1Form.formState.isDirty, children: "Set up New Password" })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [Header[step], _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: [_jsxs("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { style: {
+                                                    paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
+                                                }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "New Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Continue" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [Header[step], _jsxs("form", { ref: form2Ref, className: "mt-5", autoComplete: "off", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
+                            resetPasswordMutation.mutate({
+                                mobileNumber: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                                newPassword: step1Form.getValues('newPassword'),
+                                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", value: o.field.value, onValueChange: (details) => {
+                                                o.field.onChange(details.value);
+                                            }, onKeyDown: (e) => {
+                                                if (e.key === 'Backspace') {
+                                                    step2Form.reset();
+                                                }
+                                            }, onValueComplete: () => {
+                                                form2Ref.current?.requestSubmit();
+                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", 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: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: resetPasswordMutation.isPending, 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-button-secondary-fg 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: "mx-auto mt-3xl flex w-fit items-center gap-1 font-semibold text-sm text-text-tertiary-600", onClick: () => {
+                                    setStep(1);
+                                    step2Form.reset();
+                                    cooldown.stop();
+                                }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
+}

package/dist/lib/components/ForgotPassword/ForgotPasswordTrigger.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from 'react';
+interface ForgotPasswordTriggerProps extends ComponentPropsWithRef<'button'> {
+    asChild?: boolean;
+}
+export declare function ForgotPasswordTrigger(props: ForgotPasswordTriggerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/ForgotPassword/ForgotPasswordTrigger.js

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

package/dist/lib/components/ForgotPassword/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ForgotPassword';
+export * from './ForgotPasswordTrigger';

package/dist/lib/components/ForgotPassword/index.js

@@ -0,0 +1,2 @@
+export * from './ForgotPassword.js';
+export * from './ForgotPasswordTrigger.js';

package/dist/lib/components/GCashFailed/GCashFailed.d.ts

@@ -0,0 +1,8 @@
+import type { ImageProps } from 'next/image';
+import type { CSSProperties } from 'react';
+export interface GCashFailedProps {
+    logo: ImageProps['src'];
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function GCashFailed(props: GCashFailedProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/GCashFailed/GCashFailed.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { twMerge } from 'tailwind-merge';
+import { useCooldown } from '../../client/hooks/useCooldown.js';
+import { XCircleIcon } from '../../icons/XCircleIcon.js';
+export function GCashFailed(props) {
+    const router = useRouter();
+    const cooldown = useCooldown({
+        autoplay: true,
+        onCooldown() {
+            router.replace('/');
+        },
+    });
+    return (_jsx("div", { style: props.style, className: twMerge('flex min-h-dvh items-center p-4 py-8', props.className), children: _jsxs("div", { className: "mx-auto w-full max-w-[26.25rem] rounded-xl bg-bg-primary-alt p-10", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto block h-7.5 w-auto" }), _jsxs("div", { className: "mt-16", children: [_jsx(XCircleIcon, { className: "mx-auto size-[3.75rem] text-utility-error-500" }), _jsx("h2", { className: "mt-6 text-center font-bold text-3xl", children: "Deposit Error" }), _jsx("p", { className: "mt-3 text-center text-text-tertiary-600", children: "Sorry, we encountered an error while processing your deposit request. Please try again later." }), _jsxs("div", { className: "mt-[4.875rem] text-center text-sm text-text-tertiary-600", children: [_jsx("p", { children: "You will be redirected shortly," }), _jsxs("p", { children: ["in about", ' ', _jsx("span", { className: "font-bold text-brand-400 text-lg", children: cooldown.countdown }), ' ', "second/s."] })] })] })] }) }));
+}

package/dist/lib/components/GCashFailed/index.d.ts

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

package/dist/lib/components/GCashFailed/index.js

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

package/dist/lib/components/GCashSuccess/GCashSuccess.d.ts

@@ -0,0 +1,9 @@
+import type { ImageProps } from 'next/image';
+import { type CSSProperties } from 'react';
+interface GCashSuccessProps {
+    logo: ImageProps['src'];
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function GCashSuccess(props: GCashSuccessProps): import("react/jsx-runtime").JSX.Element;
+export {};