@opexa/portal-components 0.0.40 → 0.0.42

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js

@@ -1,33 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateGCashWithdrawalMutation, useGlobalStore, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { toaster } from '../../../../client/utils/index.js';
-import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
-import { Button, Field, NumberInput, PasswordInput } from '../../../../ui/index.js';
+import { useCreateGCashWithdrawalMutation, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function GCashWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
+    const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
     const createWithdrawalMutation = useCreateGCashWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
         onSuccess() {
+            setStatus('success');
             form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
         },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
+        onError() {
+            setStatus('failed');
         },
     });
     const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -101,5 +96,14 @@ export function GCashWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: createWithdrawalMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Deposit') })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                    if (!details.open) {
+                        setStatus('waiting');
+                    }
+                }, lazyMount: true, unmountOnExit: true, 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(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
+                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js

@@ -1,32 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createListCollection } from '@ark-ui/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createListCollection, Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateInstapayWithdrawalMutation, useGlobalStore, useInstapayBankListQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { toaster } from '../../../../client/utils/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
-import { Button, Field, NumberInput, PasswordInput, Select, } from '../../../../ui/index.js';
+import { useCreateInstapayWithdrawalMutation, useInstapayBankListQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { AlertCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput, PasswordInput, Select, } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function InstapayWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
+    const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
         onSuccess() {
             form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
+            setStatus('success');
         },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
+        onError() {
+            setStatus('failed');
         },
     });
     const instapayBankListQuery = useInstapayBankListQuery();
@@ -124,5 +118,14 @@ export function InstapayWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: createWithdrawalMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Deposit') })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                    if (!details.open) {
+                        setStatus('waiting');
+                    }
+                }, lazyMount: true, unmountOnExit: true, 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(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
+                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.js

@@ -1,36 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateMayaAppWithdrawalMutation, useGlobalStore, useIsMayaSessionValidQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { toaster } from '../../../../client/utils/index.js';
-import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
-import { Button, Field, NumberInput, PasswordInput } from '../../../../ui/index.js';
+import { useCreateMayaAppWithdrawalMutation, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
-import { MayaSessionExpired } from '../../MayaSessionExpired.js';
 export function MayaAppWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
+    const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateMayaAppWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
         onSuccess() {
             form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
+            setStatus('success');
         },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
+        onError() {
+            setStatus('failed');
         },
     });
-    const isMayaSessionValidQuery = useIsMayaSessionValidQuery();
-    const isMayaSessionValid = isMayaSessionValidQuery.data ?? true;
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
     const gatewaySettings = paymentSettings?.mayaAppWithdrawalGatewaySettings;
@@ -85,9 +77,6 @@ export function MayaAppWithdrawal() {
             transactionPassword: data.password,
         });
     });
-    if (!isMayaSessionValid) {
-        return _jsx(MayaSessionExpired, {});
-    }
     return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
                                 o.field.onChange(details.value);
                             }, formatOptions: {
@@ -99,5 +88,14 @@ export function MayaAppWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: createWithdrawalMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Withdraw') })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                    if (!details.open) {
+                        setStatus('waiting');
+                    }
+                }, lazyMount: true, unmountOnExit: true, 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(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
+                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.js

@@ -1,33 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateMayaWithdrawalMutation, useGlobalStore, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { toaster } from '../../../../client/utils/index.js';
-import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
-import { Button, Field, NumberInput, PasswordInput } from '../../../../ui/index.js';
+import { useCreateMayaWithdrawalMutation, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function MayaWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
+    const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
     const createWithdrawalMutation = useCreateMayaWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
         onSuccess() {
             form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
+            setStatus('success');
         },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
+        onError() {
+            setStatus('failed');
         },
     });
     const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -101,5 +96,14 @@ export function MayaWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: createWithdrawalMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Deposit') })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                    if (!details.open) {
+                        setStatus('waiting');
+                    }
+                }, lazyMount: true, unmountOnExit: true, 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(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
+                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Link from 'next/link';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { useAccountQuery, useGlobalStore, useOnMMA, usePaymentSettingsQuery, } from '../../../client/hooks/index.js';
-import { AlertCircleIcon, AlertTriangleIcon, ArrowRightIcon, SpinnerIcon, } from '../../../icons/index.js';
-import { onMobileDevice } from '../../../utils/index.js';
+import { useAccountQuery, useGlobalStore, useIsMayaSessionValidQuery, useOnMMA, usePaymentSettingsQuery, useWalletQuery, } from '../../../client/hooks/index.js';
+import { AlertCircleIcon, SpinnerIcon } from '../../../icons/index.js';
+import { Button } from '../../../ui/index.js';
+import { onMobileDevice, parseDecimal } from '../../../utils/index.js';
 import { PaymentMethods } from '../PaymentMethods.js';
 import { GCashWithdrawal } from './GCashWithdrawal/GCashWithdrawal.js';
 import { InstapayWithdrawal } from './InstapayWithdrawal/InstapayWithdrawal.js';
@@ -12,10 +12,14 @@ import { MayaAppWithdrawal } from './MayaAppWithdrawal/MayaAppWithdrawal.js';
 import { MayaWithdrawal } from './MayaWithdrawal/MayaWithdrawal.js';
 export function Withdrawal() {
     const [onMMA] = useOnMMA();
+    const walletQuery = useWalletQuery();
+    const wallet = walletQuery.data;
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
+    const isMayaSessionValidQuery = useIsMayaSessionValidQuery();
+    const isMayaSessionValid = isMayaSessionValidQuery.data ?? true;
     const enabledPaymentMethods = (() => {
         const l = [];
         if (onMMA) {
@@ -51,25 +55,37 @@ export function Withdrawal() {
             setPaymentMethod(enabledPaymentMethods[0]);
         }
     }, [enabledPaymentMethods, paymentMethod]);
-    if (account) {
-        if (!account.transactionPassword ||
-            account.verificationStatus !== 'VERIFIED')
-            return _jsx(WithdrawalNotAllowed, {});
-    }
-    if (paymentSettingsQuery.isLoading) {
+    if (accountQuery.isLoading ||
+        walletQuery.isLoading ||
+        paymentSettingsQuery.isLoading ||
+        isMayaSessionValidQuery.isLoading) {
         return _jsx(SpinnerIcon, { className: "mx-auto size-6" });
     }
+    if (!isMayaSessionValid) {
+        return _jsx(MayaSessionSessionExpired, {});
+    }
+    if (parseDecimal(wallet?.balance, 0) < 1) {
+        return _jsx(InsufficientBalance, {});
+    }
+    if (!account?.transactionPassword ||
+        account.verificationStatus !== 'VERIFIED') {
+        return _jsx(AccountVerificationRequired, {});
+    }
     if (enabledPaymentMethods.length <= 0) {
-        return (_jsxs("div", { className: "border-amber-200 text-amber-700 bg-amber-50 flex items-center gap-1.5 rounded-sm border px-3 py-2.5 text-sm", children: [_jsx(AlertCircleIcon, { className: "size-4" }), "No available payment methods"] }));
+        return _jsx(NoAvailablePaymentMethods, {});
     }
     return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: setPaymentMethod, options: enabledPaymentMethods }), paymentMethod === 'GCASH' && _jsx(GCashWithdrawal, {}), paymentMethod === 'MAYA' && _jsx(MayaWithdrawal, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppWithdrawal, {}), paymentMethod === 'INSTAPAY' && _jsx(InstapayWithdrawal, {})] }));
 }
-function WithdrawalNotAllowed() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    return (_jsxs("div", { className: "pb-16 pt-4xl lg:pb-12", children: [_jsx("div", { className: "bg-amber-50 text-amber-600 mx-auto flex size-12 items-center justify-center rounded-full lg:size-14", children: _jsx(AlertTriangleIcon, { className: "size-6 lg:size-7" }) }), _jsx("h2", { className: "mt-xl text-center text-lg font-semibold lg:text-2xl", children: "Verification and password not set" }), _jsx("p", { className: "text-gray-500 mx-auto mt-md max-w-[31.25rem] text-center text-sm lg:text-base", children: "To enable withdrawals, first complete the identity verification process and set up your transaction password." }), _jsxs(Link, { href: "/personal-center", className: "text-gray-900 mx-auto mt-2xl flex w-fit items-center gap-md font-semibold", onClick: () => {
-                    globalStore.depositWithdrawal.setOpen(false);
-                    globalStore.depositWithdrawal.setTab('WITHDRAWAL');
-                }, children: ["Personal Center ", _jsx(ArrowRightIcon, { className: "size-5" })] })] }));
+function AccountVerificationRequired() {
+    return (_jsxs("div", { className: "pt-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Personal Verification" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "To withdraw funds, you must first verify your identity. Complete personal verification to ensure your account\u2019s security." }), _jsx(Button, { className: "mt-3xl", children: "Verify Now" })] }));
+}
+function InsufficientBalance() {
+    const setTab = useGlobalStore(useShallow((ctx) => ctx.depositWithdrawal.setTab));
+    return (_jsxs("div", { className: "pt-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Balance is very low" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "No funds available for withdrawal. Please make a deposit." }), _jsx(Button, { className: "mt-3xl", onClick: () => setTab('DEPOSIT'), children: "Deposit" })] }));
+}
+function NoAvailablePaymentMethods() {
+    return (_jsxs("div", { className: "py-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Not Available" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "Withdrawal is not available at this time. Please try again later or contact support for assistance." })] }));
+}
+function MayaSessionSessionExpired() {
+    return (_jsxs("div", { className: "py-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Session Expired" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "Your session has timed out. To continue with deposits or withdrawals, Please try reloading the app." })] }));
 }

package/dist/components/GameLaunch/GameLaunch.js

@@ -1,34 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Dialog, Portal, Presence } from '@ark-ui/react';
-import { useRef } from 'react';
+import { Dialog, Portal } from '@ark-ui/react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useDisclosure, useEndGameSessionMutation, useFavoriteGamesQuery, useGlobalStore, useMarkGameAsFavoriteMutation, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronLeftIcon, CoinsHandIcon, Expand03Icon, SpinnerIcon, Star01Icon, XIcon, } from '../../icons/index.js';
-import { AlertDialog, Button, IconButton } from '../../ui/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronLeftIcon, CoinsHandIcon, Expand03Icon, SpinnerIcon, Star01Icon, XIcon, } from '../../icons/index.js';
+import { AlertDialog, Button, IconButton, Presence } from '../../ui/index.js';
 export function GameLaunch() {
-    const ref = useRef(null);
-    const maximizeDisclosure = useDisclosure({
-        defaultOpen: true,
-        onOpenChange(open) {
-            if (!open) {
-                setTimeout(() => {
-                    ref.current?.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start',
-                        inline: 'start',
-                    });
-                }, 25);
-            }
-        },
-    });
-    const cancelDisclosure = useDisclosure();
-    const endGameSessionMutation = useEndGameSessionMutation();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         gameLaunch: ctx.gameLaunch,
         depositWithdrawal: ctx.depositWithdrawal,
     })));
+    const maximizeDisclosure = useDisclosure({ defaultOpen: true });
+    const cancelDisclosure = useDisclosure();
     async function endGameSession() {
         if (globalStore.gameLaunch.details.status === 'PLAYING') {
             await endGameSessionMutation.mutateAsync({
@@ -45,6 +29,7 @@ export function GameLaunch() {
     }
     const favoriteGamesQuery = useFavoriteGamesQuery();
     const favoriteGames = favoriteGamesQuery.data ?? [];
+    const endGameSessionMutation = useEndGameSessionMutation();
     const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
     const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
     const markedAsFavorite = favoriteGames.some((favoriteGame) => {
@@ -54,43 +39,34 @@ export function GameLaunch() {
                 ? favoriteGame.id === globalStore.gameLaunch.details.game.reference
                 : favoriteGame.id === globalStore.gameLaunch.details.game.id;
     });
-    return (_jsxs(_Fragment, { children: [_jsxs(Presence, { ref: ref, present: globalStore.gameLaunch.details.status !== 'WAITING' &&
-                    !maximizeDisclosure.open, lazyMount: true, unmountOnExit: globalStore.gameLaunch.details.status === 'WAITING', className: "border-border-primary bg-bg-primary-alt w-full overflow-hidden rounded-lg border ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsxs("section", { className: "aspect-[960/540] w-full", children: [globalStore.gameLaunch.details.status === 'LOADING' && (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(SpinnerIcon, { className: "size-8" }) })), globalStore.gameLaunch.details.status === 'FAILED' && (_jsx("div", {})), globalStore.gameLaunch.details.status === 'PLAYING' && (_jsx("iframe", { src: globalStore.gameLaunch.details.session?.launchUrl ?? '', className: "size-full" }))] }), _jsxs("section", { className: "border-border-primary flex justify-end gap-2 border-t p-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", onClick: () => {
-                                    if (globalStore.gameLaunch.details.status !== 'PLAYING') {
-                                        endGameSession();
-                                        return;
-                                    }
-                                    cancelDisclosure.setOpen(true);
-                                }, disabled: globalStore.gameLaunch.details.status === 'LOADING', "aria-label": "Quit Game", children: _jsx(XIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: globalStore.gameLaunch.details.status === 'LOADING', "aria-label": markedAsFavorite ? 'Remove from Favorites' : 'Add to Favorites', onClick: () => {
-                                    if (!globalStore.gameLaunch.details.game)
-                                        return;
-                                    if (markedAsFavorite) {
-                                        unmarkGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
-                                            ? globalStore.gameLaunch.details.game.reference
-                                            : globalStore.gameLaunch.details.game.id);
-                                    }
-                                    else {
-                                        markGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
-                                            ? globalStore.gameLaunch.details.game.reference
-                                            : globalStore.gameLaunch.details.game.id);
-                                    }
-                                }, children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
-                                        ? 'text-yellow-400 fill-yellow-400'
-                                        : 'text-inherit') }) }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", onClick: () => maximizeDisclosure.setOpen(true), title: "Maximize", "aria-label": "Maximize", children: _jsx(Expand03Icon, { className: "size-5" }) })] })] }), _jsx(Dialog.Root, { open: globalStore.gameLaunch.details.status !== 'WAITING' &&
-                    maximizeDisclosure.open &&
-                    !cancelDisclosure.open, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "z-dialog fixed inset-0", children: _jsxs(Dialog.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt flex size-full flex-col", children: [_jsxs("section", { className: "flex items-center gap-2 px-4 py-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", onClick: () => {
-                                                if (globalStore.gameLaunch.details.status !== 'PLAYING') {
-                                                    endGameSession();
-                                                    return;
-                                                }
-                                                cancelDisclosure.setOpen(true);
-                                            }, disabled: globalStore.gameLaunch.details.status === 'LOADING', title: "Quit", "aria-label": "Quit Game", children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx("div", { className: "grow" }), _jsx(IconButton, { size: "xs", variant: "outline", children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
-                                                    ? 'text-yellow-400 fill-yellow-400'
-                                                    : 'text-inherit') }) }), _jsx(IconButton, { size: "xs", variant: "outline", onClick: () => maximizeDisclosure.setOpen(false), title: "Minimize", "aria-label": "Minimize", children: _jsx(Expand03Icon, { className: "size-5" }) }), _jsx(IconButton, { size: "xs", fullWidth: false, onClick: () => {
-                                                globalStore.depositWithdrawal.setOpen(true);
-                                            }, children: _jsx(CoinsHandIcon, { className: "size-5" }) })] }), _jsxs("section", { className: "grow", children: [globalStore.gameLaunch.details.status === 'LOADING' && (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(SpinnerIcon, { className: "size-8" }) })), globalStore.gameLaunch.details.status === 'FAILED' && (_jsx("div", {})), globalStore.gameLaunch.details.status === 'PLAYING' && (_jsx("iframe", { src: globalStore.gameLaunch.details.session.launchUrl ?? '', className: "size-full" }))] })] }) }) }) }), _jsx(AlertDialog.Root, { role: "alertdialog", open: cancelDisclosure.open, onOpenChange: (details) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog.Root, { open: globalStore.gameLaunch.details.status !== 'WAITING' &&
+                    !cancelDisclosure.open, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "z-dialog fixed inset-0", children: _jsxs(Dialog.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt relative size-full", children: [_jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: !maximizeDisclosure.open, children: _jsxs("section", { className: "ui-open:animate-slide-in-down ui-closed:animate-slide-out-down bg-bg-primary-alt z-1 absolute left-0 top-0 flex h-[3.25rem] w-full items-center gap-2 px-4 py-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", onClick: () => {
+                                                    if (globalStore.gameLaunch.details.status !== 'PLAYING') {
+                                                        endGameSession();
+                                                        return;
+                                                    }
+                                                    cancelDisclosure.setOpen(true);
+                                                }, disabled: globalStore.gameLaunch.details.status === 'LOADING', children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx("div", { className: "grow" }), _jsx(IconButton, { size: "xs", variant: "outline", disabled: unmarkGameAsFavoriteMutation.isPending ||
+                                                    markGameAsFavoriteMutation.isPending, onClick: () => {
+                                                    if (!globalStore.gameLaunch.details.game)
+                                                        return;
+                                                    if (markedAsFavorite) {
+                                                        unmarkGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
+                                                            ? globalStore.gameLaunch.details.game.reference
+                                                            : globalStore.gameLaunch.details.game.id);
+                                                    }
+                                                    else {
+                                                        markGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
+                                                            ? globalStore.gameLaunch.details.game.reference
+                                                            : globalStore.gameLaunch.details.game.id);
+                                                    }
+                                                }, children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
+                                                        ? 'text-yellow-400 fill-yellow-400'
+                                                        : 'text-inherit') }) }), _jsx(IconButton, { size: "xs", variant: "outline", onClick: () => maximizeDisclosure.setOpen(true), children: _jsx(Expand03Icon, { className: "size-5" }) }), _jsx(IconButton, { size: "xs", fullWidth: false, onClick: () => {
+                                                    globalStore.depositWithdrawal.setOpen(true);
+                                                }, children: _jsx(CoinsHandIcon, { className: "size-5" }) })] }) }), _jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: maximizeDisclosure.open, children: _jsx("button", { type: "button", onClick: () => maximizeDisclosure.setOpen(false), className: "shadow-xs ui-open:animate-slide-in-down ui-closed:animate-slide-out-down z-1 absolute left-1/2 top-0 flex h-7.5 w-[4.5rem] -translate-x-1/2 items-center justify-center rounded-b-md bg-white/30 backdrop-blur-sm", children: _jsx(ChevronDownIcon, {}) }) }), _jsxs("section", { className: "size-full", children: [globalStore.gameLaunch.details.status === 'LOADING' && (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(SpinnerIcon, { className: "size-8" }) })), globalStore.gameLaunch.details.status === 'FAILED' && (_jsx("div", {})), globalStore.gameLaunch.details.status === 'PLAYING' && (_jsx("iframe", { src: globalStore.gameLaunch.details.session.launchUrl ?? '', className: "size-full" }))] })] }) }) }) }), _jsx(AlertDialog.Root, { role: "alertdialog", open: cancelDisclosure.open, onOpenChange: (details) => {
                     cancelDisclosure.setOpen(details.open);
-                }, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, {}), _jsx(AlertDialog.Positioner, { children: _jsxs(AlertDialog.Content, { children: [_jsxs(AlertDialog.Header, { children: [_jsx("div", { className: "bg-error-700/25 text-error-200 flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }), _jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Quit Game" }), _jsx(AlertDialog.Description, { children: "Are you sure you want to quit?" })] }), _jsx(AlertDialog.Context, { children: (api) => (_jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", disabled: endGameSessionMutation.isPending, onClick: () => {
+                }, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, {}), _jsx(AlertDialog.Positioner, { children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(AlertDialog.Header, { children: _jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "size-6" }) }) }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Quit Game" }), _jsx(AlertDialog.Description, { children: "Are you sure you want to quit?" })] }), _jsx(AlertDialog.Context, { children: (api) => (_jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", disabled: endGameSessionMutation.isPending, onClick: () => {
                                                         api.setOpen(false);
                                                     }, children: "Cancel" }), _jsx(Button, { colorScheme: "danger", disabled: endGameSessionMutation.isPending, onClick: async () => {
                                                         await endGameSession();

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

@@ -0,0 +1 @@
+export declare function KYC(): null;

package/dist/components/KYC/KYC.js

@@ -0,0 +1,3 @@
+export function KYC() {
+    return null;
+}

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

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

package/dist/components/KYC/index.js

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

package/dist/components/Messages/MessageItem.js

@@ -6,21 +6,26 @@ import { useShallow } from 'zustand/shallow';
 import { useGlobalStore, useLocaleInfo, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
 import { getMessageIcon } from '../../components/Messages/utils.js';
 export function MessageItem({ message }) {
-    const { id, title, dateTimeCreated, content, markedAsRead, icon, actions } = message;
+    const { 
+    /**/
+    id, icon, title, content, actions, markedAsRead, dateTimeCreated, } = message;
     const localeInfo = useLocaleInfo();
-    const { messages: messagesStore } = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        message: ctx.message,
+        messages: ctx.messages,
+    })));
     const { mutate } = useMarkMessageAsReadMutation();
     const Icon = getMessageIcon(icon);
     const handleViewMessage = async () => {
         mutate(id);
-        messagesStore.setOpen(false);
-        messagesStore.message.setData(message);
-        messagesStore.message.setOpen(true);
+        globalStore.message.setData(message);
+        globalStore.message.setOpen(true);
+        globalStore.messages.setOpen(false);
     };
     const handleActionClick = (e) => {
         e.stopPropagation();
-        messagesStore.setOpen(false);
-        messagesStore.setTab('ALL');
+        globalStore.messages.setOpen(false);
+        globalStore.messages.setTab('ALL');
     };
     return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(dateTimeCreated), 'M/d/yyyy - h:mma', {
                             in: tz(localeInfo.timezone),

package/dist/components/Messages/MessagePopup.js

@@ -7,12 +7,13 @@ import { XIcon } from '../../icons/index.js';
 import { Dialog } from '../../ui/index.js';
 import { getMessageIcon } from './utils.js';
 export const MessagePopup = () => {
-    const { messages: messagesStore } = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
-    const message = messagesStore.message.data;
-    const Icon = getMessageIcon(message?.icon ?? 'MESSAGE');
-    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: messagesStore.message.open, onOpenChange: ({ open }) => {
-            messagesStore.message.setOpen(open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(Icon, { className: "text-text-brand", height: "24", width: "24" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: message?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: { __html: message?.content ?? '' } })] }), message?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: message.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
-                                        messagesStore.message.setOpen(false);
+    const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));
+    const Icon = getMessageIcon(globalStore.message.data?.icon ?? 'MESSAGE');
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: ({ open }) => {
+            globalStore.message.setOpen(open);
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(Icon, { className: "text-text-brand", height: "24", width: "24" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
+                                            __html: globalStore.message.data?.content ?? '',
+                                        } })] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
+                                        globalStore.message.setOpen(false);
                                     }, children: action.name }, index))) })) : null] }) })] }) }));
 };