@opexa/portal-components 0.0.40 → 0.0.41

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

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useCreateMayaDepositMutation, useDepositsCountQuery, useDisclosure, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { useAvailablePromosQuery, useCreateMayaDepositMutation, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
 import { toaster } from '../../../../client/utils/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
+import { ChevronDownIcon, ChevronUpIcon, SpinnerIcon } from '../../../../icons/index.js';
+import { Button, Field, NumberInput } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 export function MayaDeposit() {
-    const disclosure = useDisclosure();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
     })));
@@ -120,22 +118,5 @@ export function MayaDeposit() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-4xl", value: o.field.value, onChange: o.field.onChange })) }), _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: createDepositMutation.isPending, onClick: async (e) => {
-                    const ok = await form.trigger('amount');
-                    if (!ok)
-                        return;
-                    if (promos.length <= 0)
-                        return;
-                    if (form.getValues('promo'))
-                        return;
-                    e.preventDefault();
-                    disclosure.setOpen(true);
-                }, children: createDepositMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Deposit') }), _jsx(AlertDialog.Root, { role: "alertdialog", open: disclosure.open, onOpenChange: (details) => {
-                    disclosure.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+10)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+25)]", children: _jsxs(AlertDialog.Content, { children: [_jsxs(AlertDialog.Header, { children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]", children: _jsx(AlertCircleIcon, {}) }), _jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Submit deposit request without promo?" }), _jsx(AlertDialog.Description, { children: "You haven\u2019t selected a promo. Are you sure you want to proceed without one?" })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                                    disclosure.setOpen(false);
-                                                }, children: "Cancel" }), _jsx(Button, { onClick: () => {
-                                                    handleSubmit();
-                                                    disclosure.setOpen(false);
-                                                }, children: "Proceed" })] })] }) })] }) })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: o.field.onChange, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: createDepositMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Deposit') }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
 }

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

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { noop } from 'lodash-es';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useAvailablePromosQuery, useDepositsCountQuery, useDisclosure, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
+import { useAvailablePromosQuery, useDepositsCountQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { ChevronDownIcon, ChevronUpIcon } from '../../../../icons/index.js';
+import { Button, Field, NumberInput } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
 export function OnlineBankDepositForm() {
     const context = useOnlineBankDepositContext();
-    const disclosure = useDisclosure();
     const depositsCountQuery = useDepositsCountQuery();
     const depositsCount = depositsCountQuery.data ?? 0;
     const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -97,7 +95,7 @@ export function OnlineBankDepositForm() {
             },
         });
     });
-    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Bank" }), _jsx(Field.Input, { value: "BANKNET", onChange: noop, readOnly: true })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-4", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
+    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Bank" }), _jsx(Field.Input, { value: "BANKNET", onChange: noop, readOnly: true })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
                                 o.field.onChange(details.value);
                             }, formatOptions: {
                                 maximumFractionDigits: 2,
@@ -108,22 +106,5 @@ export function OnlineBankDepositForm() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-3xl", value: o.field.value, onChange: o.field.onChange })) }), _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", onClick: async (e) => {
-                    const ok = await form.trigger('amount');
-                    if (!ok)
-                        return;
-                    if (promos.length <= 0)
-                        return;
-                    if (form.getValues('promo'))
-                        return;
-                    e.preventDefault();
-                    disclosure.setOpen(true);
-                }, children: "Deposit" }), _jsx(AlertDialog.Root, { role: "alertdialog", open: disclosure.open, onOpenChange: (details) => {
-                    disclosure.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+10)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+25)]", children: _jsxs(AlertDialog.Content, { children: [_jsxs(AlertDialog.Header, { children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]", children: _jsx(AlertCircleIcon, {}) }), _jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Submit deposit request without promo?" }), _jsx(AlertDialog.Description, { children: "You haven\u2019t selected a promo. Are you sure you want to proceed without one?" })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                                    disclosure.setOpen(false);
-                                                }, children: "Cancel" }), _jsx(Button, { onClick: () => {
-                                                    handleSubmit();
-                                                    disclosure.setOpen(false);
-                                                }, children: "Proceed" })] })] }) })] }) })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-3xl", value: o.field.value, onChange: o.field.onChange })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
 }

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

@@ -1,19 +1,17 @@
 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 { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useAvailablePromosQuery, useDepositsCountQuery, useDisclosure, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
+import { useAvailablePromosQuery, useDepositsCountQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { ChevronDownIcon, ChevronUpIcon } from '../../../../icons/index.js';
+import { Button, Field, NumberInput } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';
 export function QRPHDepositForm() {
     const context = useQRPHDepositContext();
-    const disclosure = useDisclosure();
     const depositsCountQuery = useDepositsCountQuery();
     const depositsCount = depositsCountQuery.data ?? 0;
     const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -107,22 +105,5 @@ export function QRPHDepositForm() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-4xl", value: o.field.value, onChange: o.field.onChange })) }), _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", onClick: async (e) => {
-                    const ok = await form.trigger('amount');
-                    if (!ok)
-                        return;
-                    if (promos.length <= 0)
-                        return;
-                    if (form.getValues('promo'))
-                        return;
-                    e.preventDefault();
-                    disclosure.setOpen(true);
-                }, children: "Deposit" }), _jsx(AlertDialog.Root, { role: "alertdialog", open: disclosure.open, onOpenChange: (details) => {
-                    disclosure.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+10)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+25)]", children: _jsxs(AlertDialog.Content, { children: [_jsxs(AlertDialog.Header, { children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]", children: _jsx(AlertCircleIcon, {}) }), _jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Submit deposit request without promo?" }), _jsx(AlertDialog.Description, { children: "You haven\u2019t selected a promo. Are you sure you want to proceed without one?" })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                                    disclosure.setOpen(false);
-                                                }, children: "Cancel" }), _jsx(Button, { onClick: () => {
-                                                    handleSubmit();
-                                                    disclosure.setOpen(false);
-                                                }, children: "Proceed" })] })] }) })] }) })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: o.field.onChange, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
 }

package/dist/components/DepositWithdrawal/DepositWithdrawal.js

@@ -6,7 +6,7 @@ import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore, useLocaleInfo, useWalletQuery, } from '../../client/hooks/index.js';
 import { Wallet02Icon, XIcon } from '../../icons/index.js';
-import { Dialog, Tabs } from '../../ui/index.js';
+import { Dialog, IconButton, Tabs } from '../../ui/index.js';
 import { formatNumber } from '../../utils/index.js';
 import { Deposit } from './Deposit/Deposit.js';
 import { Withdrawal } from './Withdrawal/Withdrawal.js';
@@ -20,12 +20,12 @@ export function DepositWithdrawal(props) {
     });
     return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
             globalStore.depositWithdrawal.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? _jsx(DefaulTrigger, {}) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full p-2xl lg:w-[640px] lg:rounded-xl lg:p-3xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-secondary shadow-xs text-gray-700 flex size-12 items-center justify-center rounded-lg border", children: _jsx(Wallet02Icon, {}) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" })] }), _jsxs(Dialog.Body, { className: "mt-5", children: [_jsx("p", { className: "text-gray-500 text-center text-sm font-medium leading-tight", children: "Available Balance" }), _jsx("p", { className: "mt-lg text-center text-4xl font-semibold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? _jsx(DefaulTrigger, {}) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
                                                 currency: localeInfo.currency.code,
                                                 minDecimalPlaces: 2,
                                             }) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {
                                                 globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
-                                            }, lazyMount: true, unmountOnExit: true, className: "mt-4xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-4xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-4xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] })] }));
+                                            }, lazyMount: true, unmountOnExit: true, className: "mt-3xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-3xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-3xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] })] }));
 }
 function DefaulTrigger(props) {
     const localeInfo = useLocaleInfo();

package/dist/components/DepositWithdrawal/PaymentMethods.js

@@ -50,10 +50,10 @@ export function PaymentMethods(props) {
         defaultValue: props.defaultValue ?? options[0].value,
         onChange: props.onChange,
     });
-    return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Select your payment method" }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
+    return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Available payment methods" }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
                     const lastValue = newValue.at(-1);
                     if (!lastValue)
                         return;
                     setValue(PaymentMethodDefinition.parse(lastValue));
-                }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "border-border-secondary ui-checked:border-gray-900 ui-checked:outline-solid ui-checked:outline-border-secondary flex cursor-pointer rounded-xl border p-xl ui-checked:outline", children: [_jsx("div", { className: "grow", children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: "h-5 w-auto lg:h-8", draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
+                }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "border-border-secondary ui-checked:border-border-brand-solid ui-checked:outline-solid ui-checked:outline-border-brand-solid flex cursor-pointer rounded-xl border p-xl ui-checked:outline", children: [_jsx("div", { className: "grow", children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: "h-5 w-auto lg:h-8", draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
 }

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, 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,6 +12,8 @@ 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();
@@ -51,25 +53,30 @@ 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) {
         return _jsx(SpinnerIcon, { className: "mx-auto size-6" });
     }
+    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." })] }));
 }

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] }) })] }) }));
 };

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface PortalProviderProps {
     googleAnalyticsId?: string;
     googleTagManagerId?: string;
@@ -6,4 +6,4 @@ export interface PortalProviderProps {
     facebookPixelId?: string;
     children: ReactNode;
 }
-export declare function PortalProvider({ children, ...props }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/PortalProvider/PortalProvider.js

@@ -1,15 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import {} from 'react';
 import { prefetchAccountQuery, prefetchSessionQuery, prefetchWalletQuery, } from '../../server/utils/index.js';
+import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
 import { getQueryClient } from '../../utils/index.js';
-import { PortalProvider__client } from './PortalProvider.client.js';
-export async function PortalProvider({ children, ...props }) {
+import { Providers } from './Providers.js';
+import { Snackbar } from './Snackbar.js';
+import { WebVitals } from './WebVitals.js';
+export async function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }) {
     const queryClient = getQueryClient();
     await Promise.all([
         prefetchSessionQuery(),
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    return (_jsx(PortalProvider__client, { ...props, children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Providers, { children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }), _jsx(Snackbar, {}), _jsx(WebVitals, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
 }

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function Providers({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/PortalProvider/Providers.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClientProvider } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
+import { getQueryClient } from '../../utils/index.js';
+const ThemeProvider = dynamic(() => import('next-themes').then((mod) => mod.ThemeProvider), {
+    ssr: false,
+});
+export function Providers({ children }) {
+    const queryClient = getQueryClient();
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { attribute: "class", storageKey: "WebPortalTheme", enableSystem: false, enableColorScheme: false, defaultTheme: "dark", disableTransitionOnChange: true, children: children }) }));
+}

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

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

package/dist/components/PortalProvider/Snackbar.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast, Toaster } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { toaster } from '../../client/utils/index.js';
+import { AlertCircleIcon, XIcon } from '../../icons/index.js';
+export function Snackbar() {
+    return (_jsx(Toaster, { toaster: toaster, children: (toast) => (_jsxs(Toast.Root, { className: twMerge('group', 'p-xl', 'border', 'border-border-primary', 'bg-bg-primary-alt', 'flex', 'items-start', 'gap-lg', 'w-[21.438rem]', 'lg:w-[1200px]', 'max-w-full', 'rounded-xl', 'shadow-xs', 'h-[var(--height)]', 'z-[var(--z-index)]', 'scale-[var(--scale)]', 'opacity-[var(--opacity)]', '[translate:var(--x)_var(--y)_0]', 'transition-all', 'duration-300'), children: [_jsxs("div", { className: "flex grow flex-col gap-xl lg:flex-row lg:gap-lg", children: [_jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-9.5', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/15', toast.type === 'warning' && 'border-text-warning-primary/15', toast.type === 'error' && 'border-text-error-primary/15'), children: _jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-7', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/35', toast.type === 'warning' && 'border-text-warning-primary/35', toast.type === 'error' && 'border-text-error-primary/35'), children: _jsx(AlertCircleIcon, { className: twMerge('size-5', toast.type === 'success' && 'text-text-success-primary', toast.type === 'warning' && 'text-text-warning-primary', toast.type === 'error' && 'text-text-error-primary') }) }) }), _jsxs("div", { className: "grow text-sm leading-none", children: [_jsx(Toast.Title, { className: "text-text-secondary-700 font-semibold", children: toast.title
+                                        ? toast.title
+                                        : toast.type === 'error'
+                                            ? 'Error'
+                                            : toast.type === 'warning'
+                                                ? 'Warning'
+                                                : 'Success' }), _jsx(Toast.Description, { className: "text-text-tertiary-600 mt-xs", children: toast.description
+                                        ? toast.description
+                                        : toast.type === 'error'
+                                            ? 'Something went wrong.'
+                                            : toast.type === 'warning'
+                                                ? 'Please be cautious.'
+                                                : 'Operation completed successfully.' })] })] }), _jsx(Toast.CloseTrigger, { className: "text-text-secondary-700", children: _jsx(XIcon, { className: "size-5" }) })] }, toast.id)) }));
+}