@opexa/portal-components 0.0.303 → 0.0.305

package/dist/client/hooks/useGlobalStore.d.ts

@@ -53,6 +53,13 @@ export interface TermsOfUseStore extends TermsAndConditionsStore {
 }
 export interface ResponsibleGamingStore extends TermsAndConditionsStore {
 }
+export interface HasPendingBonusStore {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    '~touched': boolean;
+    shouldShowWarning: boolean;
+    setShouldShowWarning: (shouldShow: boolean) => void;
+}
 export interface GlobalStore {
     signUp: PopupStore;
     signIn: PopupStore;
@@ -73,6 +80,7 @@ export interface GlobalStore {
     termsAndConditions: TermsAndConditionsStore;
     termsOfUse: TermsOfUseStore;
     responsibleGaming: ResponsibleGamingStore;
+    pendingBonus: HasPendingBonusStore;
 }
 export declare const useGlobalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<GlobalStore>>;
 export {};

package/dist/client/hooks/useGlobalStore.js

@@ -371,4 +371,25 @@ export const useGlobalStore = create((set) => ({
         },
         '~touched': false,
     },
+    pendingBonus: {
+        open: false,
+        setOpen(open) {
+            set((prev) => ({
+                pendingBonus: {
+                    ...prev.pendingBonus,
+                    open,
+                    '~touched': true,
+                },
+            }));
+        },
+        shouldShowWarning: false,
+        setShouldShowWarning: (shouldShowWarning) => set((state) => ({
+            pendingBonus: {
+                ...state.pendingBonus,
+                shouldShowWarning,
+                '~touched': true,
+            },
+        })),
+        '~touched': false,
+    },
 }));

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { twMerge } from 'tailwind-merge';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
+import { useBonusesQuery } from '../../client/hooks/useBonusesQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
@@ -15,24 +16,36 @@ import { Tabs } from '../../ui/Tabs/index.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { Deposit } from './Deposit/Deposit.js';
 import { DepositWithdrawalPropsProvider } from './DepositWithdrawalContext.js';
+import HasPendingBonuses from './HasPendingBonuses.js';
 import { Withdrawal } from './Withdrawal/Withdrawal.js';
 export function DepositWithdrawal(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
+    const bonusesQuery = useBonusesQuery();
+    const hasPendingBonus = Boolean(bonusesQuery?.data &&
+        bonusesQuery?.data?.length > 0 &&
+        bonusesQuery.data?.some((bonus) => +bonus.currentTurnoverRequirementContributionPercentage < 100));
     const localeInfo = useLocaleInfo();
     const walletQuery = useWalletQuery({
         refetchInterval: 5000,
     });
-    return (_jsx(DepositWithdrawalPropsProvider, { value: props, children: _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
-                globalStore.depositWithdrawal.setOpen(details.open);
-                if (!details.open) {
-                    globalStore.depositWithdrawal.setPromo(null);
-                }
-            }, 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)]", children: _jsxs(Dialog.Content, { className: twMerge('py-3xl mx-auto h-full w-full overflow-y-auto px-4 lg:min-h-[80vh] lg:w-[480px] lg:rounded-xl', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full'), children: [_jsxs(Dialog.Header, { className: "gap-xl flex items-center", children: [_jsx("div", { className: "border-border-primary shadow-xs text-text-secondary-700 flex size-10 items-center justify-center rounded-md border text-gray-700", 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-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, {}) })] })] })] }) })] }) }) }));
+    //check if the user has pending/ongoing bonuses
+    useEffect(() => {
+        if (hasPendingBonus && !globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setShouldShowWarning(hasPendingBonus);
+        }
+    }, [hasPendingBonus]);
+    return (_jsxs(_Fragment, { children: [_jsx(DepositWithdrawalPropsProvider, { value: props, children: _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
+                        globalStore.depositWithdrawal.setOpen(details.open);
+                        if (!details.open) {
+                            globalStore.depositWithdrawal.setPromo(null);
+                        }
+                    }, 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)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto py-3xl mx-auto min-h-full w-full overflow-y-auto px-4 lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "gap-xl flex items-center", children: [_jsx("div", { className: "border-border-primary shadow-xs text-text-secondary-700 flex size-10 items-center justify-center rounded-md border text-gray-700", 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-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, {}) })] })] })] }) })] }) }) }), _jsx(HasPendingBonuses, {})] }));
 }

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

@@ -0,0 +1,5 @@
+interface Props {
+    className?: string;
+}
+declare function HasPendingBonuses(props: Props): import("react/jsx-runtime").JSX.Element;
+export default HasPendingBonuses;

package/dist/components/DepositWithdrawal/HasPendingBonuses.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { AlertTriangleIcon } from '../../icons/AlertTriangle.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+function HasPendingBonuses(props) {
+    const hasPendingBonusStore = useGlobalStore(useShallow((ctx) => ctx.pendingBonus));
+    return (_jsx(Dialog.Root, { open: hasPendingBonusStore.open, onOpenChange: (details) => {
+            hasPendingBonusStore.setOpen(details.open);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-tooltip flex items-center justify-center", children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt p-3xl pb-4xl mx-auto h-fit w-[90vw] overflow-y-auto rounded-2xl text-center lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "mb-xl bg-bg-warning-secondary mx-auto flex w-fit items-center justify-center rounded-full p-3", children: _jsx(AlertTriangleIcon, { className: "size-6 text-[#FEDF89]" }) }), _jsx("h1", { className: "text-text-primary-900 text-lg font-semibold", children: "Confirm Promo Cancellation" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Proceeding will cancel the promo and result in the loss of your active bonus. Do you want to continue?" }), _jsxs(Dialog.Footer, { className: "mt-4xl flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                            hasPendingBonusStore.setOpen(false);
+                                        }, children: "No" }), _jsx(Button, { type: "submit", onClick: () => {
+                                            hasPendingBonusStore.setOpen(false);
+                                            hasPendingBonusStore.setShouldShowWarning(false);
+                                        }, children: "Yes" })] })] }) })] }) }));
+}
+export default HasPendingBonuses;

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

@@ -31,6 +31,7 @@ export function GCashWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        hasPendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
@@ -101,6 +102,10 @@ export function GCashWithdrawal() {
         }
     }, [form, minimumAmount]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.hasPendingBonus.shouldShowWarning) {
+            globalStore.hasPendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),

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

@@ -6,7 +6,6 @@ import { useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useCreateInstapayWithdrawalMutation } from '../../../../client/hooks/useCreateInstapayWithdrawalMutation.js';
 import { useCreateInstapayWithdrawalNextMutation } from '../../../../client/hooks/useCreateInstapayWithdrawalNextMutation.js';
 import { useFeatureFlag } from '../../../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
@@ -37,20 +36,9 @@ export function InstapayWithdrawal() {
     const { enabled } = useFeatureFlag();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        hasPendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
-    const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
-        onMutate() {
-            setStatus('processing');
-        },
-        onSuccess() {
-            form.reset();
-            setStatus('success');
-        },
-        onError() {
-            setStatus('failed');
-        },
-    });
     const createWithdrawalNextMutation = useCreateInstapayWithdrawalNextMutation({
         onMutate() {
             setStatus('processing');
@@ -59,8 +47,7 @@ export function InstapayWithdrawal() {
             form.reset();
             setStatus('success');
         },
-        onError(err) {
-            console.log(err, 'error');
+        onError() {
             setStatus('failed');
         },
     });
@@ -98,11 +85,9 @@ export function InstapayWithdrawal() {
             .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(),
-        accountName: enabled
-            ? z
-                .string({ required_error: 'Account name is required' })
-                .min(4, 'Account name must be at least 4 characters')
-            : z.string().optional().or(z.string().trim()),
+        accountName: z
+            .string({ required_error: 'Account name is required' })
+            .min(4, 'Account name must be at least 4 characters'),
         bankCode: z.string().min(1, 'Bank is required').trim(),
     });
     const form = useForm({
@@ -137,23 +122,17 @@ export function InstapayWithdrawal() {
         }
     }, [form, instapayBankList]);
     const handleSubmit = form.handleSubmit(async (data) => {
-        if (enabled) {
-            createWithdrawalNextMutation.mutate({
-                amount: data.amount,
-                transactionPassword: data.password,
-                accountNumber: data.accountNumber,
-                bankCode: data.bankCode,
-                accountName: data.accountName ?? '',
-            });
-        }
-        else {
-            createWithdrawalMutation.mutate({
-                amount: data.amount,
-                transactionPassword: data.password,
-                accountNumber: data.accountNumber,
-                bankCode: data.bankCode,
-            });
+        if (globalStore.hasPendingBonus.shouldShowWarning) {
+            globalStore.hasPendingBonus.setOpen(true);
+            return;
         }
+        createWithdrawalNextMutation.mutate({
+            amount: data.amount,
+            transactionPassword: data.password,
+            accountNumber: data.accountNumber,
+            bankCode: data.bankCode,
+            accountName: data.accountName ?? '',
+        });
     });
     const bankCollection = useMemo(() => createListCollection({
         items: instapayBankList ?? [],
@@ -164,7 +143,7 @@ export function InstapayWithdrawal() {
                                 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 })] }), enabled && (_jsxs(Field.Root, { invalid: !!form.formState.errors.accountName, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account name" }), _jsx(Field.Input, { ...form.register('accountName') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountName?.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) => {
+                            }, 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 })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountName, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account name" }), _jsx(Field.Input, { ...form.register('accountName') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountName?.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,
@@ -175,16 +154,14 @@ export function InstapayWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, 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: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...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 })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalNextMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _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' &&
-                                                        explainError(enabled
-                                                            ? createWithdrawalNextMutation.error?.name
-                                                            : createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                        explainError(createWithdrawalNextMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

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

@@ -29,6 +29,7 @@ export function MayaAppWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateMayaAppWithdrawalMutation({
@@ -92,6 +93,10 @@ export function MayaAppWithdrawal() {
         }
     }, [form, minimumAmount]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             transactionPassword: data.password,

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

@@ -31,6 +31,7 @@ export function MayaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        hasPendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
@@ -101,6 +102,10 @@ export function MayaWithdrawal() {
         }
     }, [form, minimumAmount]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.hasPendingBonus.shouldShowWarning) {
+            globalStore.hasPendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),

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

@@ -33,6 +33,7 @@ export function PisoPayWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreatePisoPayWithdrawalMutation({
@@ -115,6 +116,10 @@ export function PisoPayWithdrawal() {
         }
     }, [form]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             transactionPassword: data.password,

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

@@ -33,6 +33,7 @@ export function VentajaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateVentajaDisbursementWithdrawalMutation({
@@ -114,6 +115,10 @@ export function VentajaWithdrawal() {
         }
     }, [form, instapayBankList]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             input: {
                 amount: data.amount,

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

@@ -0,0 +1,10 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface ResponsibleGamingProps {
+    responsibleGamingContent: string | ReactNode;
+    logo: ImageProps['src'];
+    open: boolean;
+    onCloseAction: () => void;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/ResponsibleGaming.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }) {
+    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: 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: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _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: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        onCloseAction();
+                                    }, children: "I Agree" }) })] }) })] }) }));
+}

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

@@ -0,0 +1,11 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface TermsOfUseProps {
+    logo: ImageProps['src'];
+    open: boolean;
+    onCloseAction: () => void;
+    termsOfUseContent: string | ReactNode;
+    siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/TermsOfUse.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }) {
+    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _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: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        onCloseAction();
+                                    }, children: "I Agree" }) })] }) })] }) }));
+}

package/dist/components/FeatureFlag/FeatureFlag.d.ts

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

package/dist/components/FeatureFlag/FeatureFlag.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { FEATURE_FLAG_KEY, useFeatureFlag, } from '../../client/hooks/useFeatureFlag.js';
+export function FeatureFlag() {
+    const { featureFlagEnabled, setFeatureFlagEnabled } = useFeatureFlag();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    useEffect(() => {
+        const futureFlagParam = searchParams.get('future');
+        if (futureFlagParam !== null) {
+            const isEnabled = futureFlagParam === 'true';
+            setFeatureFlagEnabled(isEnabled);
+            localStorage.setItem(FEATURE_FLAG_KEY, isEnabled.toString());
+        }
+    }, [searchParams, setFeatureFlagEnabled]);
+    function disableFeatureFlag() {
+        setFeatureFlagEnabled(false);
+        localStorage.removeItem(FEATURE_FLAG_KEY);
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete('future');
+        router.replace(`?${params.toString()}`, { scroll: false });
+    }
+    if (!featureFlagEnabled) {
+        return null;
+    }
+    return (_jsx("div", { className: "fixed bottom-3 flex w-full flex-col items-center justify-center", children: _jsxs("div", { className: "bg-black/70 p-1", children: ["Experimental features are enabled.", ' ', _jsxs("button", { onClick: () => disableFeatureFlag(), className: "cursor-pointer underline", children: [' ', "Disable"] })] }) }));
+}

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

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

package/dist/components/FeatureFlag/index.js

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