@opexa/portal-components 0.0.889 → 0.0.891

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/useAurixPayQRPHDeposit.js

@@ -0,0 +1,117 @@
+import { ObjectId } from '@opexa/object-id';
+import { useEffect, useRef, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { useShallow } from 'zustand/shallow';
+import { useCreateAurixPayQrphDepositMutation } from '../../../../client/hooks/useCreateAurixPayQrphDepositMutation.js';
+import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
+import { ObjectType } from '../../../../services/ObjectType.js';
+import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+export function useAurixPayQRPHDeposit() {
+    const depositWithdrawalProps = useDepositWithdrawalPropsContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kycVerificationStatus: ctx.kycVerificationStatus,
+    })));
+    const inputRef = useRef(null);
+    const [deposit, setDeposit] = useState(null);
+    const [status, setStatus] = useState('idle');
+    const [errorMessage, setErrorMessage] = useState(null);
+    const verificationQuery = useMemberVerificationQuery();
+    const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
+    const mutation = useCreateAurixPayQrphDepositMutation({
+        onMutate() {
+            setStatus('generating-qr-code');
+        },
+        onSuccess(data) {
+            invariant(data.qrCode);
+            setStatus('qr-code-generated');
+            setDeposit(data);
+        },
+        onError(data) {
+            setStatus('failed');
+            setErrorMessage({
+                name: data.name,
+                message: data.message,
+            });
+        },
+    });
+    const query = useDepositQuery(deposit?.id, {
+        enabled: !!deposit && status === 'qr-code-generated',
+        refetchInterval: (ctx) => {
+            if (ctx.state.data?.status === 'APPROVED' ||
+                ctx.state.data?.status === 'CONFIRMED' ||
+                ctx.state.data?.status === 'CANCELLED' ||
+                ctx.state.data?.status === 'REJECTED' ||
+                ctx.state.data?.status === 'FAILED') {
+                return false;
+            }
+            return 2000;
+        },
+    });
+    useEffect(() => {
+        if (query.data?.status === 'APPROVED' ||
+            query.data?.status === 'CONFIRMED') {
+            setStatus('confirmed');
+            return;
+        }
+        if (query.data?.status === 'CANCELLED' ||
+            query.data?.status === 'REJECTED' ||
+            query.data?.status === 'FAILED') {
+            setStatus('failed');
+            return;
+        }
+    }, [query.data?.status]);
+    const redirectUrl = (() => {
+        const path = depositWithdrawalProps.depositSuccessPageUrl ?? '/deposits/:id/status';
+        const origin = window.location.origin.includes('localhost')
+            ? 'https://uat.powerplay.ph/deposit-success' +
+                depositWithdrawalProps.depositSuccessPageUrl
+            : window.location.origin;
+        return `${origin}${path}`;
+    })();
+    const generateQRCode = async (input) => {
+        if (!depositWithdrawalProps.bypassDepositKycCheck &&
+            (verificationStatus === 'PENDING' ||
+                verificationStatus === 'UNVERIFIED' ||
+                verificationStatus === 'REJECTED' ||
+                verificationStatus === 'CREATED')) {
+            globalStore.kycVerificationStatus.setOpen(true);
+            return;
+        }
+        const id = ObjectId.generate(ObjectType.Deposit).toString();
+        inputRef.current = input;
+        mutation.mutate({
+            id,
+            amount: input.amount,
+            promo: input.promo ?? undefined,
+            redirectUrl: redirectUrl.replace(':id', id),
+        });
+    };
+    const regenerateQRCode = async () => {
+        invariant(inputRef.current);
+        mutation.reset();
+        await new Promise((resolve) => setTimeout(resolve, 1));
+        const id = ObjectId.generate(ObjectType.Deposit).toString();
+        mutation.mutate({
+            id,
+            amount: inputRef.current.amount,
+            promo: inputRef.current.promo ?? undefined,
+            redirectUrl: redirectUrl.replace(':id', id),
+        });
+    };
+    const reset = () => {
+        setStatus('idle');
+        setDeposit(null);
+        setErrorMessage(null);
+        inputRef.current = null;
+    };
+    return {
+        status,
+        deposit,
+        errorMessage,
+        generateQRCode,
+        regenerateQRCode,
+        reset,
+    };
+}

package/dist/components/DepositWithdrawal/Deposit/Deposit.js

@@ -8,6 +8,10 @@ import { AlertCircleIcon } from '../../../icons/AlertCircleIcon.js';
 import { SpinnerIcon } from '../../../icons/SpinnerIcon.js';
 import { onMobileDevice } from '../../../utils/onMobileDevice.js';
 import { PaymentMethods } from '../PaymentMethods.js';
+import { AurixPayGCashDeposit } from './AurixPayGCashDeposit/AurixPayGCashDeposit.js';
+import { AurixPayPayMayaDeposit } from './AurixPayGrabPayDeposit/AurixPayGrabPayDeposit.js';
+import { AurixPayGrabPayDeposit } from './AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js';
+import { AurixPayQRPHDeposit } from './AurixPayQRPHDeposit/AurixPayQRPHDeposit.js';
 const QRPHDeposit = lazy(() => import('./QRPHDeposit/QRPHDeposit.js').then((m) => ({ default: m.QRPHDeposit })));
 const GCashDeposit = lazy(() => import('./GCashDeposit/GCashDeposit.js').then((m) => ({
     default: m.GCashDeposit,
@@ -107,6 +111,24 @@ export function Deposit() {
                 enabled: paymentSettings?.mayaWebpayDepositGatewaySettings?.[enabledKey] &&
                     featureFlag.enabled,
             },
+            {
+                method: 'AURIX_PAY_GCASH',
+                enabled: paymentSettings?.aurixPayGCashDepositGatewaySettings?.[enabledKey] &&
+                    featureFlag.enabled,
+            },
+            {
+                method: 'AURIX_PAY_GRAB_PAY',
+                enabled: paymentSettings?.aurixPayGrabPayDepositGatewaySettings?.[enabledKey] && featureFlag.enabled,
+            },
+            {
+                method: 'AURIX_PAY_PAYMAYA',
+                enabled: paymentSettings?.aurixPayPayMayaDepositGatewaySettings?.[enabledKey] && featureFlag.enabled,
+            },
+            {
+                method: 'AURIX_PAY_QRPH',
+                enabled: paymentSettings?.aurixPayQrphDepositGatewaySettings?.[enabledKey] &&
+                    featureFlag.enabled,
+            },
         ];
         paymentMethods.forEach((o) => {
             if (o.enabled) {
@@ -135,7 +157,7 @@ export function Deposit() {
     if (enabledPaymentMethods.length <= 0) {
         return _jsx(NoAvailablePaymentMethods, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: handlePaymentMethodChange, options: enabledPaymentMethods }), _jsxs(Suspense, { fallback: _jsx(SpinnerIcon, { className: "mx-auto size-6" }), children: [paymentMethod === 'QRPH' && _jsx(QRPHDeposit, {}), paymentMethod === 'GCASH' && _jsx(GCashDeposit, {}), paymentMethod === 'MAYA' && _jsx(MayaDeposit, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppDeposit, {}), paymentMethod === 'ONLINE_BANK' && _jsx(OnlineBankDeposit, {}), paymentMethod === 'LIBANGAN_PAY_IN' && _jsx(LibanganDeposit, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayDeposit, {}), paymentMethod === 'AIO_GCASH' && _jsx(AiOGCashDeposit, {}), paymentMethod === 'AIO_PAY_MAYA' && _jsx(AiOPayMayaDeposit, {}), paymentMethod === 'AIO_GRAB_PAY' && _jsx(AiOGrabPayDeposit, {}), paymentMethod === 'AIO_PALAWAN_PAY' && _jsx(AiOPalawanPayDeposit, {}), paymentMethod === 'GCASH_WEBPAY' && _jsx(GCashWebpayDeposit, {}), paymentMethod === 'MAYA_WEBPAY' && _jsx(MayaWebpayDeposit, {})] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: handlePaymentMethodChange, options: enabledPaymentMethods }), _jsxs(Suspense, { fallback: _jsx(SpinnerIcon, { className: "mx-auto size-6" }), children: [paymentMethod === 'QRPH' && _jsx(QRPHDeposit, {}), paymentMethod === 'GCASH' && _jsx(GCashDeposit, {}), paymentMethod === 'MAYA' && _jsx(MayaDeposit, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppDeposit, {}), paymentMethod === 'ONLINE_BANK' && _jsx(OnlineBankDeposit, {}), paymentMethod === 'LIBANGAN_PAY_IN' && _jsx(LibanganDeposit, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayDeposit, {}), paymentMethod === 'AIO_GCASH' && _jsx(AiOGCashDeposit, {}), paymentMethod === 'AIO_PAY_MAYA' && _jsx(AiOPayMayaDeposit, {}), paymentMethod === 'AIO_GRAB_PAY' && _jsx(AiOGrabPayDeposit, {}), paymentMethod === 'AIO_PALAWAN_PAY' && _jsx(AiOPalawanPayDeposit, {}), paymentMethod === 'GCASH_WEBPAY' && _jsx(GCashWebpayDeposit, {}), paymentMethod === 'MAYA_WEBPAY' && _jsx(MayaWebpayDeposit, {}), paymentMethod === 'AURIX_PAY_GCASH' && _jsx(AurixPayGCashDeposit, {}), paymentMethod === 'AURIX_PAY_PAYMAYA' && _jsx(AurixPayPayMayaDeposit, {}), paymentMethod === 'AURIX_PAY_GRAB_PAY' && _jsx(AurixPayGrabPayDeposit, {}), paymentMethod === 'AURIX_PAY_QRPH' && _jsx(AurixPayQRPHDeposit, {})] })] }));
 }
 function MayaSessionSessionExpired() {
     return (_jsxs("div", { className: "py-xl", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-warning-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-warning" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg", children: "Session Expired" }), _jsx("p", { className: "mx-auto mt-xs max-w-[25rem] text-center text-sm text-text-tertiary-600", children: "Your session has timed out. To continue with deposits or withdrawals, Please try reloading the app." })] }));

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
         view: "form" | "vca";
-        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -14,7 +14,7 @@ export declare const OnlineBankDepositContext: (props: {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
     view: "form" | "vca";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
     view: "form" | "vca";
-    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QrCodeGenerated.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
 import Image from 'next/image';
+import { useState } from 'react';
 import { useBoolean } from 'usehooks-ts';
+import { toaster } from '../../../../client/utils/toaster.js';
 import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
 import { ArrowCircleDownIcon } from '../../../../icons/ArrowCircleDownIcon.js';
 import { QrCode02Icon } from '../../../../icons/QrCode02Icon.js';
@@ -10,10 +13,13 @@ import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
 import { Button } from '../../../../ui/Button/index.js';
 import { Portal } from '../../../../ui/Portal/index.js';
 import { QrCode } from '../../../../ui/QrCode/index.js';
+import { downloadImage } from '../../../../utils/downloadImage.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';
 export function QrCodeGenerated() {
     const context = useQRPHDepositContext();
     const confirm = useBoolean(false);
+    const [isDownloading, setIsDownloading] = useState(false);
+    const isNative = Capacitor.isNativePlatform();
     return (_jsx(AlertDialog.Root, { open: context.status === 'qr-code-generated', lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx("button", { type: "button", className: "absolute top-4 right-4 icon:size-6 p-md text-text-quinary disabled:cursor-not-allowed disabled:opacity-50", onClick: () => {
                                     if (!confirm.value) {
                                         confirm.setTrue();
@@ -29,7 +35,37 @@ export function QrCodeGenerated() {
                                     : 'Scan the QR code below with your banking app, or upload it to complete your deposit.' }), !confirm.value && (_jsx("div", { className: "mx-auto mt-xl w-[14.125rem] rounded-xl bg-bg-primary-alt p-6", children: _jsxs(QrCode.Root, { value: context.deposit?.qrCode ?? '', encoding: {
                                         ecc: 'H',
                                         boostEcc: true,
-                                    }, children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), _jsxs(QrCode.DownloadTrigger, { type: "button", fileName: `QRPH-${Date.now()}.jpg`, mimeType: "image/jpeg", className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), "Download QR Code"] })] }) })), confirm.value && (_jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: confirm.setFalse, children: "Go back" }), _jsx(Button, { onClick: () => {
+                                    }, children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), isNative ? (_jsx(QrCode.Context, { children: (qrCode) => (_jsxs("button", { type: "button", disabled: isDownloading, onClick: async () => {
+                                                    try {
+                                                        setIsDownloading(true);
+                                                        const dataUrl = await qrCode.getDataUrl('image/jpeg');
+                                                        const result = await downloadImage(dataUrl, `QRPH-${Date.now()}.jpg`);
+                                                        if (result.success) {
+                                                            toaster.success({
+                                                                title: 'Success',
+                                                                description: result.message,
+                                                            });
+                                                        }
+                                                        else {
+                                                            toaster.error({
+                                                                title: 'Error',
+                                                                description: result.message,
+                                                            });
+                                                        }
+                                                    }
+                                                    catch (error) {
+                                                        console.error('Failed to download QR code:', error);
+                                                        toaster.error({
+                                                            title: 'Error',
+                                                            description: 'An unexpected error occurred while downloading the QR code.',
+                                                        });
+                                                    }
+                                                    finally {
+                                                        setIsDownloading(false);
+                                                    }
+                                                }, className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), isDownloading
+                                                        ? 'Downloading...'
+                                                        : 'Download QR Code'] })) })) : (_jsxs(QrCode.DownloadTrigger, { type: "button", fileName: `QRPH-${Date.now()}.jpg`, mimeType: "image/jpeg", className: "mx-auto mt-5 flex w-fit items-center gap-1 font-semibold text-button-tertiary-fg", children: [_jsx(ArrowCircleDownIcon, { className: "size-5" }), "Download QR Code"] }))] }) })), confirm.value && (_jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: confirm.setFalse, children: "Go back" }), _jsx(Button, { onClick: () => {
                                             context.reset();
                                             setTimeout(() => {
                                                 confirm.setFalse();

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts

@@ -11,5 +11,11 @@ export interface DepositWithdrawalProps {
     hasPrivacyPolicyAndTermsOfUse?: boolean;
     bypassDomains?: BypassDomainConfig[];
     bypassDepositKycCheck?: boolean;
+    /**
+     * @default "/deposits/<id>/status"
+     * @example
+     * "/hello/:id/world"
+     */
+    depositSuccessPageUrl?: string;
 }
 export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/PaymentMethods.js

@@ -107,6 +107,26 @@ const OPTIONS = [
         label: 'Maya Webpay',
         image: maya,
     },
+    {
+        value: 'AURIX_PAY_GCASH',
+        label: 'GCash',
+        image: gcash,
+    },
+    {
+        value: 'AURIX_PAY_GRAB_PAY',
+        label: 'GrabPay',
+        image: grabPay,
+    },
+    {
+        value: 'AURIX_PAY_PAYMAYA',
+        label: 'Maya',
+        image: maya,
+    },
+    {
+        value: 'AURIX_PAY_QRPH',
+        label: 'QRPH',
+        image: qrph,
+    },
 ];
 export function PaymentMethods(props) {
     const options = useMemo(() => props.options?.length

package/dist/components/DepositWithdrawal/utils.d.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import type { KnownDepositError, KnownWithdrawalError, WithdrawalError } from '../../types';
-export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA"]>;
+export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA", "AURIX_PAY_GCASH", "AURIX_PAY_PAYMAYA", "AURIX_PAY_GRAB_PAY", "AURIX_PAY_QRPH"]>;
 export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;
 export type DepositWithdrawalErrors = KnownDepositError | KnownWithdrawalError | WithdrawalError | string;
 export declare function explainError(error?: DepositWithdrawalErrors): string;

package/dist/components/DepositWithdrawal/utils.js

@@ -18,6 +18,10 @@ export const PaymentMethodDefinition = z.enum([
     'MAYA_WEBPAY',
     'INSTAPAY_GCASH',
     'INSTAPAY_PAYMAYA',
+    'AURIX_PAY_GCASH',
+    'AURIX_PAY_PAYMAYA',
+    'AURIX_PAY_GRAB_PAY',
+    'AURIX_PAY_QRPH',
 ]);
 const errorMap = {
     DAILY_PURCHASE_OR_DEPOSIT_LIMIT_EXCEEDED: 'You have exceeded your daily purchase or deposit limit. Please try again tomorrow.',

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

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

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image, {} from 'next/image';
-import { Suspense } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -14,11 +14,22 @@ 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 bg-bg-primary-alt p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', 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, {}) })] }))
+        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[props.layout ?? 'default'] })] }) }));
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: Body[layout] })] }) }));
 }

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

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

package/dist/components/ForgotPassword/ForgotPasswordForm.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
@@ -19,7 +20,7 @@ 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() {
+export function ForgotPasswordForm({ layout }) {
     const [step, setStep] = useState(1);
     const mobileNumberParser = useMobileNumberParser();
     const localeInfo = useLocaleInfo();
@@ -44,31 +45,42 @@ export function ForgotPasswordForm() {
             });
         },
     });
-    const Step1Definition = z
-        .object({
-        mobileNumber: z.string().superRefine((v, ctx) => {
-            if (!mobileNumberParser.validate(v)) {
+    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: 'Invalid mobile number',
+                    message: 'Passwords do not match',
                 });
             }
-        }),
-        newPassword: z
-            .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(100, 'Password must not be more than 100 characters'),
-        confirmPassword: z.string().min(1, 'Confirm your password'),
-    })
-        .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)) {
@@ -79,15 +91,6 @@ export function ForgotPasswordForm() {
             }
         }),
     });
-    const step1Form = useForm({
-        mode: 'all',
-        resolver: zodResolver(Step1Definition),
-        defaultValues: {
-            mobileNumber: '',
-            confirmPassword: '',
-            newPassword: '',
-        },
-    });
     const step2Form = useForm({
         resolver: zodResolver(Step2Definition),
         defaultValues: {
@@ -99,7 +102,39 @@ export function ForgotPasswordForm() {
         duration: 1000 * 60,
     });
     const form2Ref = useRef(null);
-    return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Forgot Password" }), _jsx("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Your new password will be used to sign in." }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+    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: 'bg-transparent border-[#D0D5DD] 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: 'bg-transparent border-[#D0D5DD] 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: 'bg-transparent border-[#D0D5DD] 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: 'bg-transparent border-[#D0D5DD] 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',
@@ -117,7 +152,7 @@ export function ForgotPasswordForm() {
                             }
                         }), 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: [_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"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", autoComplete: "off", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
+                                                }, ...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'),

package/dist/components/SignUp/SignUpDefault/SignUpDefaultFormInternational.js

@@ -275,11 +275,14 @@ export function SignUpDefaultFormInternational() {
                                     }
                                 }, {
                                     until: (ok) => ok,
-                                    interval: 1500,
+                                    interval: 500,
                                     maxAttempt: 5,
                                 });
                                 const ok = await pollLogin();
                                 if (!ok) {
+                                    toaster.success({
+                                        description: 'Account created successfully. Please log in to continue.',
+                                    });
                                     globalStore.signIn.setOpen(true);
                                     return;
                                 }

package/dist/components/Tournaments/TournamentsCarousel/TournamentCarouselItem.Crazywin.d.ts

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