@opexa/portal-components 0.0.29 → 0.0.30

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

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createListCollection } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect, useMemo } 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 { parseDecimal } from '../../../../utils/index.js';
+import { AmountChoices } from '../../AmountChoices.js';
+export function InstapayWithdrawal() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
+        onSuccess() {
+            form.reset();
+            globalStore.depositWithdrawal.setOpen(false);
+            toaster.success({
+                description: 'Withdrawal request submitted successfully.',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const instapayBankListQuery = useInstapayBankListQuery();
+    const instapayBankList = instapayBankListQuery.data;
+    const paymentSettingsQuery = usePaymentSettingsQuery();
+    const paymentSettings = paymentSettingsQuery.data;
+    const gatewaySettings = paymentSettings?.instapayWithdrawalGatewaySettings;
+    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
+    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
+    const definition = z.object({
+        amount: z.string().superRefine((val, ctx) => {
+            const n = parseDecimal(val, 0);
+            if (n < minimumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_small,
+                    inclusive: true,
+                    minimum: minimumAmount,
+                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
+                });
+            }
+            if (n > maximumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_big,
+                    inclusive: true,
+                    maximum: maximumAmount,
+                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
+                });
+            }
+        }),
+        password: z
+            .string()
+            .min(8, 'Password must be 8 or more characters')
+            .max(64, 'Password must be not be more than 64 characters'),
+        accountNumber: z.string().min(1).trim(),
+        bankCode: z.string().min(1, 'Bank is required').trim(),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(definition),
+        defaultValues: {
+            amount: '0',
+            password: '',
+            accountNumber: '',
+            bankCode: '',
+        },
+    });
+    useEffect(() => {
+        if (minimumAmount) {
+            form.reset({
+                amount: minimumAmount.toString(),
+                bankCode: form.getValues('bankCode'),
+                password: '',
+                accountNumber: '',
+            });
+        }
+    }, [form, minimumAmount]);
+    useEffect(() => {
+        if (instapayBankList?.length) {
+            form.reset({
+                amount: form.getValues('amount'),
+                bankCode: instapayBankList[0].code,
+                password: '',
+                accountNumber: '',
+            });
+        }
+    }, [form, instapayBankList]);
+    const handleSubmit = form.handleSubmit(async (data) => {
+        createWithdrawalMutation.mutate({
+            amount: data.amount,
+            transactionPassword: data.password,
+            accountNumber: data.accountNumber,
+            bankCode: data.bankCode,
+        });
+    });
+    const bankCollection = useMemo(() => createListCollection({
+        items: instapayBankList ?? [],
+        itemToValue: (item) => item.code,
+        itemToString: (item) => item.name,
+    }), [instapayBankList]);
+    console.log(bankCollection.items);
+    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsx(Controller, { control: form.control, name: "bankCode", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.bankCode, children: [_jsxs(Select.Root, { collection: bankCollection, positioning: {
+                                sameWidth: true,
+                            }, value: o.field.value ? [o.field.value] : [], onValueChange: (details) => {
+                                o.field.onChange(details.value.at(0) ?? '');
+                            }, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Bank account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _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,
+                                minimumFractionDigits: 0,
+                            }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to withdraw" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
+                    form.setValue('amount', value.toString(), {
+                        shouldTouch: true,
+                        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') })] }));
+}

package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.d.ts

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

package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/{MayaAppWithdrawal.jsx → MayaAppWithdrawal.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -8,8 +9,8 @@ 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 { parseDecimal } from '../../../../utils/index.js';
-import { AmountChoices } from '../../AmountChoices';
-import { MayaSessionExpired } from '../../MayaSessionExpired';
+import { AmountChoices } from '../../AmountChoices.js';
+import { MayaSessionExpired } from '../../MayaSessionExpired.js';
 export function MayaAppWithdrawal() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
@@ -85,72 +86,18 @@ export function MayaAppWithdrawal() {
         });
     });
     if (!isMayaSessionValid) {
-        return <MayaSessionExpired />;
+        return _jsx(MayaSessionExpired, {});
     }
-    return (<form onSubmit={handleSubmit} noValidate>
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount}>
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to deposit
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
-        <PasswordInput.Root>
-          <PasswordInput.Label>Password</PasswordInput.Label>
-          <PasswordInput.Control>
-            <PasswordInput.Input {...form.register('password')}/>
-            <PasswordInput.VisibilityTrigger>
-              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                <EyeIcon />
-              </PasswordInput.Indicator>
-            </PasswordInput.VisibilityTrigger>
-          </PasswordInput.Control>
-        </PasswordInput.Root>
-        <Field.ErrorText>
-          {form.formState.errors.password?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-
-      <Button type="submit" className="mt-4.5" disabled={createWithdrawalMutation.isPending}>
-        {createWithdrawalMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Withdraw')}
-      </Button>
-    </form>);
+    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: {
+                                maximumFractionDigits: 2,
+                                minimumFractionDigits: 0,
+                            }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
+                    form.setValue('amount', value.toString(), {
+                        shouldTouch: true,
+                        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') })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.d.ts

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

package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/{MayaWithdrawal.jsx → MayaWithdrawal.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -8,7 +9,7 @@ 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 { parseDecimal } from '../../../../utils/index.js';
-import { AmountChoices } from '../../AmountChoices';
+import { AmountChoices } from '../../AmountChoices.js';
 export function MayaWithdrawal() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
@@ -89,81 +90,16 @@ export function MayaWithdrawal() {
             transactionPassword: data.password,
         });
     });
-    return (<form onSubmit={handleSubmit} noValidate autoComplete="off">
-      <Field.Root invalid={!!form.formState.errors.mobileNumber}>
-        <Field.Label>Mobile Number</Field.Label>
-        <div className="relative">
-          <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
-          <Field.Input className="pl-10.5" {...form.register('mobileNumber')}/>
-        </div>
-        <Field.ErrorText>
-          {form.formState.errors.mobileNumber?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-3xl">
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to withdraw
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
-        <PasswordInput.Root>
-          <PasswordInput.Label>Password</PasswordInput.Label>
-          <PasswordInput.Control>
-            <PasswordInput.Input {...form.register('password')}/>
-            <PasswordInput.VisibilityTrigger>
-              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                <EyeIcon />
-              </PasswordInput.Indicator>
-            </PasswordInput.VisibilityTrigger>
-          </PasswordInput.Control>
-        </PasswordInput.Root>
-        <Field.ErrorText>
-          {form.formState.errors.password?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-
-      <Button type="submit" className="mt-4.5" disabled={createWithdrawalMutation.isPending}>
-        {createWithdrawalMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-    </form>);
+    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _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,
+                                minimumFractionDigits: 0,
+                            }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to withdraw" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
+                    form.setValue('amount', value.toString(), {
+                        shouldTouch: true,
+                        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') })] }));
 }

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

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

package/dist/components/DepositWithdrawal/Withdrawal/{Withdrawal.jsx → Withdrawal.js}

@@ -1,14 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from 'next/link';
 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 { PaymentMethods } from '../PaymentMethods';
-import { GCashWithdrawal } from './GCashWithdrawal/GCashWithdrawal';
-import { InstapayWithdrawal } from './InstapayWithdrawal/InstapayWithdrawal';
-import { MayaAppWithdrawal } from './MayaAppWithdrawal/MayaAppWithdrawal';
-import { MayaWithdrawal } from './MayaWithdrawal/MayaWithdrawal';
+import { PaymentMethods } from '../PaymentMethods.js';
+import { GCashWithdrawal } from './GCashWithdrawal/GCashWithdrawal.js';
+import { InstapayWithdrawal } from './InstapayWithdrawal/InstapayWithdrawal.js';
+import { MayaAppWithdrawal } from './MayaAppWithdrawal/MayaAppWithdrawal.js';
+import { MayaWithdrawal } from './MayaWithdrawal/MayaWithdrawal.js';
 export function Withdrawal() {
     const [onMMA] = useOnMMA();
     const accountQuery = useAccountQuery();
@@ -53,46 +54,22 @@ export function Withdrawal() {
     if (account) {
         if (!account.transactionPassword ||
             account.verificationStatus !== 'VERIFIED')
-            return <WithdrawalNotAllowed />;
+            return _jsx(WithdrawalNotAllowed, {});
     }
     if (paymentSettingsQuery.isLoading) {
-        return <SpinnerIcon className="mx-auto size-6"/>;
+        return _jsx(SpinnerIcon, { className: "mx-auto size-6" });
     }
     if (enabledPaymentMethods.length <= 0) {
-        return (<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">
-        <AlertCircleIcon className="size-4"/>
-        No available payment methods
-      </div>);
+        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 (<>
-      <PaymentMethods value={paymentMethod} onChange={setPaymentMethod} options={enabledPaymentMethods}/>
-
-      {paymentMethod === 'GCASH' && <GCashWithdrawal />}
-      {paymentMethod === 'MAYA' && <MayaWithdrawal />}
-      {paymentMethod === 'MAYA_APP' && <MayaAppWithdrawal />}
-      {paymentMethod === 'INSTAPAY' && <InstapayWithdrawal />}
-    </>);
+    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 (<div className="pb-16 pt-4xl lg:pb-12">
-      <div className="bg-amber-50 text-amber-600 mx-auto flex size-12 items-center justify-center rounded-full lg:size-14">
-        <AlertTriangleIcon className="size-6 lg:size-7"/>
-      </div>
-      <h2 className="mt-xl text-center text-lg font-semibold lg:text-2xl">
-        Verification and password not set
-      </h2>
-      <p className="text-gray-500 mx-auto mt-md max-w-[31.25rem] text-center text-sm lg:text-base">
-        To enable withdrawals, first complete the identity verification process
-        and set up your transaction password.
-      </p>
-      <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');
-        }}>
-        Personal Center <ArrowRightIcon className="size-5"/>
-      </Link>
-    </div>);
+    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" })] })] }));
 }

package/dist/components/DepositWithdrawal/index.js

@@ -1 +1 @@
-export * from './DepositWithdrawal';
+export * from './DepositWithdrawal.js';

package/dist/components/Disclaimer/Disclaimer.d.ts

@@ -2,4 +2,4 @@ import type { ImageProps } from 'next/image';
 export interface DisclaimerProps {
     logo: ImageProps['src'];
 }
-export declare function Disclaimer(props: DisclaimerProps): import("react").JSX.Element;
+export declare function Disclaimer(props: DisclaimerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/Disclaimer.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import { useRef } from 'react';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button, Dialog } from '../../ui/index.js';
+import { useDisclaimer } from './useDisclaimer.js';
+export function Disclaimer(props) {
+    const disclaimer = useDisclaimer();
+    const acceptTriggerRef = useRef(null);
+    return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirmI am 21 years of age and I agree with the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
+}

package/dist/components/Disclaimer/index.js

@@ -1 +1 @@
-export * from './Disclaimer';
+export * from './Disclaimer.js';

package/dist/components/Empty.d.ts

@@ -5,5 +5,5 @@ interface EmptyProps {
     message: string;
     className?: string;
 }
-export declare function Empty(props: EmptyProps): import("react").JSX.Element;
+export declare function Empty(props: EmptyProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Empty.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Empty(props) {
+    return (_jsxs("div", { role: "alert", "aria-live": "polite", className: props.className, children: [_jsxs("div", { className: "relative mx-auto w-[9.5rem] pt-4", children: [_jsx("div", { className: "bg-utility-gray-200 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full" }), _jsx(CloudIcon, { className: "relative h-auto w-full shrink-0" }), _jsx("div", { className: "bg-utility-gray-200/40 absolute bottom-2 left-1/2 flex size-12 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm", children: _jsx(props.icon, { className: "size-6 text-white" }) }), _jsx("div", { className: "bg-utility-gray-200 absolute left-4 top-3.5 size-2.5 rounded-full" }), _jsx("div", { className: "bg-utility-gray-200 absolute bottom-0.5 left-3 size-3.5 rounded-full" }), _jsx("div", { className: "bg-utility-gray-200 absolute right-3.5 top-1 size-2 rounded-full" }), _jsx("div", { className: "bg-utility-gray-200 absolute right-0 top-6.5 size-3.5 rounded-full" })] }), _jsx("h2", { className: "mt-xl text-center font-semibold", children: props.title }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: props.message })] }));
+}
+function CloudIcon(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 152 104", fill: "none", ...props, children: [_jsxs("g", { filter: "url(#filter0_dd_2719_19242)", children: [_jsx("path", { d: "M77.6 0C66.8273 0 57.2978 5.32329 51.4987 13.4829C49.605 13.0363 47.6301 12.8 45.6 12.8C31.4615 12.8 20 24.2615 20 38.4C20 52.5385 31.4615 64 45.6 64L109.6 64C121.971 64 132 53.9712 132 41.6C132 29.2288 121.971 19.2 109.6 19.2C108.721 19.2 107.854 19.2506 107.002 19.349C102.098 7.9677 90.7797 0 77.6 0Z", fill: "#F9FAFB" }), _jsx("ellipse", { cx: "45.6", cy: "38.4008", rx: "25.6", ry: "25.6", fill: "url(#paint0_linear_2719_19242)" }), _jsx("circle", { cx: "77.6", cy: "32", r: "32", fill: "url(#paint1_linear_2719_19242)" }), _jsx("ellipse", { cx: "109.6", cy: "41.5992", rx: "22.4", ry: "22.4", fill: "url(#paint2_linear_2719_19242)" })] }), _jsxs("defs", { children: [_jsxs("filter", { id: "filter0_dd_2719_19242", x: "0", y: "0", width: "152", height: "104", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feMorphology", { radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_2719_19242" }), _jsx("feOffset", { dy: "8" }), _jsx("feGaussianBlur", { stdDeviation: "4" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_2719_19242" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feMorphology", { radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_2719_19242" }), _jsx("feOffset", { dy: "20" }), _jsx("feGaussianBlur", { stdDeviation: "12" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), _jsx("feBlend", { mode: "normal", in2: "effect1_dropShadow_2719_19242", result: "effect2_dropShadow_2719_19242" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_2719_19242", result: "shape" })] }), _jsxs("linearGradient", { id: "paint0_linear_2719_19242", x1: "25.9429", y1: "21.4865", x2: "71.2", y2: "64.0007", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "paint1_linear_2719_19242", x1: "53.0286", y1: "10.8571", x2: "109.6", y2: "64", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "paint2_linear_2719_19242", x1: "92.4", y1: "26.7992", x2: "132", y2: "63.9992", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] })] })] }));
+}

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

@@ -1,2 +1,2 @@
 import type { FavoriteGamesProps } from './FavoriteGames';
-export declare function FavoriteGames__client(props: FavoriteGamesProps): import("react").JSX.Element | null;
+export declare function FavoriteGames__client(props: FavoriteGamesProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { useFavoriteGamesQuery, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, Star01Icon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { getGameImageUrl } from '../../utils/index.js';
+import { GameLaunchTrigger } from '../GameLaunch/index.js';
+export function FavoriteGames__client(props) {
+    const gamesQuery = useFavoriteGamesQuery();
+    const games = gamesQuery.data ?? [];
+    if (games.length <= 0)
+        return null;
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Favorite Games' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md'), children: games.map((game) => (_jsx(Item, { game: game }, game.id))) }) })] }));
+}
+function Item({ game }) {
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
+    return (_jsxs(GameLaunchTrigger, { game: game, className: "relative block w-full shadow-sm", children: [session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (unmarkGameAsFavoriteMutation.isPending)
+                        return;
+                    unmarkGameAsFavoriteMutation.mutate(game.id);
+                }, "aria-disabled": unmarkGameAsFavoriteMutation.isPending, className: "rounded-xs absolute right-2 top-2 flex size-9 items-center justify-center bg-black/65 blur-[0.5px]", children: _jsx(Star01Icon, { className: "fill-yellow-400 text-yellow-400 size-5" }) })), _jsx(Image, { src: getGameImageUrl({
+                    id: game.id,
+                    provider: game.provider,
+                }), alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }));
+}

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

@@ -3,4 +3,4 @@ export interface FavoriteGamesProps {
     /** @default 'Favorite Games' */
     heading?: string;
 }
-export declare function FavoriteGames(props: FavoriteGamesProps): Promise<import("react").JSX.Element>;
+export declare function FavoriteGames(props: FavoriteGamesProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/FavoriteGames/FavoriteGames.js

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

package/dist/components/FavoriteGames/index.js

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

package/dist/components/GameLaunch/GameLaunch.d.ts

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