@opexa/portal-components 0.0.190 → 0.0.193

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

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createListCollection } from '@ark-ui/react/collection';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useCreateVentajaWithdrawalMutation } from '../../../../client/hooks/useCreateVentajaWithdrawalMutation.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { useInstapayBankListQuery } from '../../../../client/hooks/useInstapayBankListQuery.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { CheckIcon } from '../../../../icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { EyeIcon } from '../../../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+import { Select } from '../../../../ui/Select/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
+import { AmountChoices } from '../../AmountChoices.js';
+import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+export function VentajaWithdrawal() {
+    const depositWithdrawalProps = useDepositWithdrawalPropsContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const [status, setStatus] = useState('waiting');
+    const createWithdrawalMutation = useCreateVentajaWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
+        onSuccess() {
+            form.reset();
+            setStatus('success');
+        },
+        onError() {
+            setStatus('failed');
+        },
+    });
+    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(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                    if (!details.open) {
+                        setStatus('waiting');
+                    }
+                }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
+                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
+}

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

@@ -18,6 +18,7 @@ import { GCashWithdrawal } from './GCashWithdrawal/GCashWithdrawal.js';
 import { InstapayWithdrawal } from './InstapayWithdrawal/InstapayWithdrawal.js';
 import { MayaAppWithdrawal } from './MayaAppWithdrawal/MayaAppWithdrawal.js';
 import { MayaWithdrawal } from './MayaWithdrawal/MayaWithdrawal.js';
+import { VentajaWithdrawal } from './VentajaWithdrawal/VentajaWithdrawal.js';
 export function Withdrawal() {
     const [onMMA] = useOnMMA();
     const walletQuery = useWalletQuery();
@@ -45,6 +46,9 @@ export function Withdrawal() {
             if (paymentSettings?.instapayWithdrawalGatewaySettings?.mobileWebEnabled) {
                 l.push('INSTAPAY');
             }
+            if (paymentSettings?.ventajaWithdrawalGatewaySettings?.mobileWebEnabled) {
+                l.push('VENTAJA');
+            }
         }
         else {
             if (paymentSettings?.gcashWithdrawalGatewaySettings?.webEnabled) {
@@ -56,6 +60,9 @@ export function Withdrawal() {
             if (paymentSettings?.instapayWithdrawalGatewaySettings?.mobileWebEnabled) {
                 l.push('INSTAPAY');
             }
+            if (paymentSettings?.ventajaWithdrawalGatewaySettings?.mobileWebEnabled) {
+                l.push('VENTAJA');
+            }
         }
         return l;
     })();
@@ -89,7 +96,7 @@ export function Withdrawal() {
     if (enabledPaymentMethods.length <= 0) {
         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, {})] }));
+    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, {}), paymentMethod === 'VENTAJA' && _jsx(VentajaWithdrawal, {})] }));
 }
 function TransactionPasswordNotSet() {
     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: "Transaction Password Not Set" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "To proceed with withdrawals, you must first set up a transaction password. This ensures the security of your account and transactions." })] }));

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

@@ -1,3 +1,3 @@
 import { z } from 'zod';
-export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY"]>;
+export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN", "VENTAJA"]>;
 export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;

package/dist/components/DepositWithdrawal/utils.js

@@ -6,4 +6,6 @@ export const PaymentMethodDefinition = z.enum([
     'ONLINE_BANK',
     'QRPH',
     'INSTAPAY',
+    'LIBANGAN',
+    'VENTAJA',
 ]);

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -2,9 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Image from 'next/image';
 import { useRef, useState } from 'react';
+import { CheckIcon } from '../../icons/CheckIcon.js';
 import pagcorLogo from '../../images/pagcor2.png';
 import responsibleGamingLogo from '../../images/responsible-gaming.png';
 import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { ResponsibleGaming } from './ResponsibleGaming.js';
@@ -15,10 +17,10 @@ export function DisclaimerV2(props) {
     const acceptTriggerRef = useRef(null);
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-sticky" }), _jsx(Dialog.Positioner, { className: "z-sticky", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 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: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs("div", { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
-                                                                setTermsOfUseOpen(true);
-                                                            }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
-                                                                setResponsibleGamingOpen(true);
-                                                            }, children: "Responsible Gaming" })] }), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" })] }) }), _jsxs("div", { className: "mt-4 flex w-full gap-3", children: [_jsx(Button, { type: "button", onClick: disclaimer.close, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", onClick: disclaimer.close, children: "Accept" })] })] }) })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-sticky" }), _jsx(Dialog.Positioner, { className: "z-sticky", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 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: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs(Checkbox.Root, { children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                                        setTermsOfUseOpen(true);
+                                                                    }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+                                                                        setResponsibleGamingOpen(true);
+                                                                    }, children: "Responsible Gaming" })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" })] }) }), _jsxs("div", { className: "mt-4 flex w-full gap-3", children: [_jsx(Button, { type: "button", onClick: disclaimer.close, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", onClick: disclaimer.close, children: "Accept" })] })] }) })] }) })] }));
 }
 const Circle = () => (_jsx("div", { children: _jsx("div", { className: "border-brand-400 flex h-4.5 w-4.5 items-center justify-center rounded-full border", children: _jsx("div", { className: "bg-brand-400 h-3 w-3 rounded-full" }) }) }));

package/dist/components/Empty.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ComponentType } from 'react';
+export interface EmptyProps {
+    icon: ComponentType<ComponentProps<'svg'>>;
+    title: string;
+    message: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare function Empty(props: EmptyProps): import("react/jsx-runtime").JSX.Element;

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", style: props.style, 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/GameLaunch/GameLaunch.lazy.js

@@ -22,7 +22,7 @@ import { AlertDialog } from '../../ui/AlertDialog/index.js';
 import { Button } from '../../ui/Button/index.js';
 import { IconButton } from '../../ui/IconButton/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence/index.js';
+import { Presence } from '../../ui/Presence.js';
 export function GameLaunch() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         gameLaunch: ctx.gameLaunch,

package/dist/components/GameProviders/GameProvidersList.js

@@ -22,5 +22,5 @@ export function GameProvidersList(props) {
         ? { root: props.className }
         : (props.className ?? {});
     const chunked = useChunk(gameProviders, 18);
-    return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: chunked.totalItems, value: chunked.totalLoadedItems, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${chunked.totalLoadedItems} of ${chunked.totalItems}` }), chunked.hasNext && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: chunked.next, className: "mt-lg", children: "Load More" }))] })] }));
+    return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-brand-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: chunked.totalItems, value: chunked.totalLoadedItems, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${chunked.totalLoadedItems} of ${chunked.totalItems}` }), chunked.hasNext && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: chunked.next, className: "mt-lg", children: "Load More" }))] })] }));
 }

package/dist/components/Games/GameContext.d.ts

@@ -0,0 +1,2 @@
+import type { Game } from '@opexa/portal-sdk-core';
+export declare const GameContext: import("react").Context<Game>, useGameContext: () => Game;

package/dist/components/Games/GameContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../client/utils/index.js';
+export const [GameContext, useGameContext] = createContext();

package/dist/components/GamesSearch/GamesSearch.js

@@ -8,7 +8,7 @@ import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Combobox } from '../../ui/Combobox/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence/index.js';
+import { Presence } from '../../ui/Presence.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {

package/dist/components/InfiniteScroll.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+export interface InfiniteScrollProps {
+    loader?: ReactNode;
+    hasMore?: boolean;
+    loadMore: () => Promise<void> | void;
+    children?: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare function InfiniteScroll(props: InfiniteScrollProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/InfiniteScroll.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useBoolean, useDebounceCallback, useIntersectionObserver, } from 'usehooks-ts';
+export function InfiniteScroll(props) {
+    const { value: loading, setValue: setLoading } = useBoolean(false);
+    const loader = props.loader ?? null;
+    const hasMore = props.hasMore ?? false;
+    const loadMore = useDebounceCallback(async () => {
+        if (loading)
+            return;
+        if (!hasMore)
+            return;
+        setLoading(true);
+        await props.loadMore();
+        setLoading(false);
+    }, 300);
+    const [ref] = useIntersectionObserver({
+        onChange(isIntersecting) {
+            if (isIntersecting)
+                loadMore();
+        },
+    });
+    return (_jsxs(Fragment, { children: [props.children, _jsx("div", { ref: ref, role: "presentation", style: props.style, className: props.className, hidden: !hasMore, children: !!hasMore && _jsx(Fragment, { children: loader }) })] }));
+}

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

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

package/dist/components/JackpotCounter/JackpotCounter.client.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { useJackpotsQuery } from '../../client/hooks/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { JackpotCounterItem } from './JackpotCounterItem.js';
+export function JackpotCounter__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    const scrollPrev = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollPrev();
+    }, [emblaApi]);
+    const scrollNext = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollNext();
+    }, [emblaApi]);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback(() => {
+        if (!emblaApi)
+            return;
+        setCanScrollPrev(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect]);
+    const jackpotsQuery = useJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    if (jackpots.length <= 0)
+        return null;
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-lg font-semibold", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot) => (_jsx(JackpotCounterItem, { jackpot: jackpot, className: {
+                            root: {
+                                className: classNames.jackpotCounterItemRoot?.className,
+                                style: classNames.jackpotCounterItemRoot?.style,
+                            },
+                        }, viewAllUrl: props.viewAllUrl, hideAnimation: props.hideAnimation }, jackpot.id))) }) })] }));
+}

package/dist/components/JackpotCounter/JackpotCounter.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+export interface ClassNameEntries {
+    root?: string;
+    jackpotCounterItemRoot?: {
+        className?: string;
+        style?: CSSProperties;
+    };
+}
+export interface JackpotCounterProps {
+    /** @default "Promos" */
+    heading?: string;
+    /** @default "/jackpots" */
+    viewAllUrl?: string;
+    className?: string | ClassNameEntries;
+    hideAnimation?: boolean;
+}
+export declare function JackpotCounter(props: JackpotCounterProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/JackpotCounter/JackpotCounter.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchJackpotsQuery } from '../../server/utils/index.js';
+import { JackpotCounter__client } from './JackpotCounter.client.js';
+export async function JackpotCounter(props) {
+    await prefetchJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    return _jsx(JackpotCounter__client, { ...props });
+}

package/dist/components/JackpotCounter/JackpotCounterItem.d.ts

@@ -0,0 +1,18 @@
+import type { Jackpot } from '@opexa/portal-sdk-core';
+import { type CSSProperties } from 'react';
+interface ClassNameEntries {
+    root?: {
+        className?: string;
+        style?: CSSProperties;
+    };
+}
+export interface JackpotCounterCardProps {
+    jackpot: Jackpot;
+    className?: string | ClassNameEntries;
+    style?: string;
+    /** @default "/jackpots" */
+    viewAllUrl?: string;
+    hideAnimation?: boolean;
+}
+export declare function JackpotCounterItem({ jackpot, className, viewAllUrl, hideAnimation, }: JackpotCounterCardProps): import("react/jsx-runtime").JSX.Element;
+export {};