@opexa/portal-components 0.1.17 → 0.1.18

package/dist/components/BetDepositLimit/BetDepositLimitModal.d.ts

@@ -0,0 +1,4 @@
+export interface BetDepositLimitModalProps {
+    onConfirm?: () => void;
+}
+export declare function BetDepositLimitModal({ onConfirm }: BetDepositLimitModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BetDepositLimit/BetDepositLimitModal.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useShallow } from 'zustand/shallow';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.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';
+import { useBetDepositLimitStore } from './betDepositLimitStore.js';
+export function BetDepositLimitModal({ onConfirm }) {
+    const { enabled } = useFeatureFlag();
+    const { isOpen, type, period, currentLimit, requestedLimit, setIsOpen } = useBetDepositLimitStore(useShallow((state) => ({
+        isOpen: state.isOpen,
+        type: state.type,
+        period: state.period,
+        currentLimit: state.currentLimit,
+        requestedLimit: state.requestedLimit,
+        setIsOpen: state.setIsOpen,
+    })));
+    const isIncrease = requestedLimit > currentLimit;
+    const changeAmount = Math.abs(requestedLimit - currentLimit);
+    const formatPeso = (value) => {
+        return `₱${value.toLocaleString('en-PH')}`;
+    };
+    const capPeriod = period.charAt(0).toUpperCase() + period.slice(1);
+    const capType = type.charAt(0).toUpperCase() + type.slice(1);
+    const title = isIncrease
+        ? `${capPeriod} ${capType} Limit Increase Requested`
+        : `${capPeriod} ${capType} Limit Decrease Applied`;
+    const getDescription = () => {
+        if (isIncrease) {
+            if (type === 'bet') {
+                return `Your ${period} bet limit increase request has been submitted. Once approved, your new limit will take effect immediately.`;
+            }
+            return `Your request to increase your ${period} deposit limit has been submitted. The new limit will take effect once the request is approved.`;
+        }
+        return `Your ${period} ${type} limit has been lowered and is now active.`;
+    };
+    const handleConfirm = () => {
+        setIsOpen(false);
+        if (onConfirm) {
+            onConfirm();
+        }
+    };
+    return (_jsx(Dialog.Root, { open: isOpen && enabled, onOpenChange: (details) => {
+            setIsOpen(details.open);
+        }, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto max-h-[90vh] min-w-[21.438rem] max-w-[21.438rem] overflow-y-auto rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary", children: _jsx(AlertTriangleIcon, { className: "size-6 text-text-brand-700" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg text-text-primary-900 xl:mt-xl", children: title }), _jsx("p", { className: "mt-xs text-center text-sm text-text-secondary-700 leading-relaxed", children: getDescription() }), _jsxs("div", { className: "mt-lg flex w-full select-none flex-col gap-y-2 rounded-xl border border-border-primary bg-bg-secondary px-5 py-4 text-sm", children: [_jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Current limit:' : 'Previous limit:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(currentLimit) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Requested limit:' : 'New limit:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(requestedLimit) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Increase amount:' : 'Decrease amount:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: formatPeso(changeAmount) })] }), _jsxs("div", { className: "flex justify-between py-0.5", children: [_jsx("span", { className: "text-text-tertiary-600", children: isIncrease ? 'Status:' : 'Effective:' }), _jsx("span", { className: "font-semibold text-text-primary-900", children: isIncrease ? 'Pending Approval' : 'Immediately' })] })] }), _jsx("div", { className: "mt-3xl flex w-full flex-col gap-2 text-center lg:mt-4xl", children: _jsx(Button, { className: "w-full", onClick: handleConfirm, type: "button", children: "Confirm" }) })] })] }) })] }) }));
+}

package/dist/components/BetDepositLimit/DepositLimitReached.d.ts

@@ -0,0 +1,8 @@
+import type { LimitPeriod, LimitType } from './betDepositLimitStore';
+export interface DepositLimitReachedProps {
+    type: LimitType;
+    period: LimitPeriod;
+    /** URL to the responsible gaming / limits page. Defaults to "/responsible-gaming" */
+    responsibleGamingUrl?: string;
+}
+export declare function DepositLimitReached({ type, period, responsibleGamingUrl, }: DepositLimitReachedProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BetDepositLimit/DepositLimitReached.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangleIcon } from '../../icons/AlertTriangle.js';
+export function DepositLimitReached({ type, period, responsibleGamingUrl = '/responsible-gaming', }) {
+    const capPeriod = period.charAt(0).toUpperCase() + period.slice(1);
+    const capType = type.charAt(0).toUpperCase() + type.slice(1);
+    const title = `${capPeriod} ${capType} Limit Reached`;
+    const resetMessage = period === 'daily'
+        ? "You've reached your daily deposit limit, so you can't deposit right now. Your limit will reset tomorrow at midnight."
+        : "You've reached your monthly deposit limit, so you can't deposit right now. Your limit will reset on the 1st day of next month.";
+    return (_jsxs("div", { role: "alert", className: "flex items-start gap-md rounded-lg border border-utility-warning-200 bg-utility-warning-50 p-md", children: [_jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-bg-warning-secondary", children: _jsx(AlertTriangleIcon, { className: "size-4 text-text-featured-icon-light-warning" }) }), _jsxs("div", { className: "flex flex-col gap-xs", children: [_jsx("p", { className: "font-semibold text-sm text-text-primary-900", children: title }), _jsx("p", { className: "text-sm text-text-secondary-700 leading-relaxed", children: resetMessage }), _jsx("a", { href: `${responsibleGamingUrl}?from=limits`, className: "mt-xs w-fit text-sm font-medium text-text-warning-primary-600 hover:underline", children: "View Limits" })] })] }));
+}

package/dist/components/BetDepositLimit/betDepositLimitStore.d.ts

@@ -0,0 +1,24 @@
+export type LimitType = 'bet' | 'deposit';
+export type LimitPeriod = 'daily' | 'monthly';
+export interface BetDepositLimitState {
+    isOpen: boolean;
+    type: LimitType;
+    period: LimitPeriod;
+    currentLimit: number;
+    requestedLimit: number;
+    setIsOpen: (isOpen: boolean) => void;
+    setType: (type: LimitType) => void;
+    setPeriod: (period: LimitPeriod) => void;
+    setCurrentLimit: (limit: number) => void;
+    setRequestedLimit: (limit: number) => void;
+    openModal: (type: LimitType, period: LimitPeriod, currentLimit: number, requestedLimit: number) => void;
+}
+export declare const useBetDepositLimitStore: import("zustand").UseBoundStore<import("zustand").StoreApi<BetDepositLimitState>>;
+export declare const betDepositLimitStore: {
+    isOpen: boolean;
+    type: LimitType;
+    period: LimitPeriod;
+    currentLimit: number;
+    requestedLimit: number;
+    openModal(newType: LimitType, newPeriod: LimitPeriod, currentLimit: number, requestedLimit: number): void;
+};

package/dist/components/BetDepositLimit/betDepositLimitStore.js

@@ -0,0 +1,51 @@
+import { create } from 'zustand';
+export const useBetDepositLimitStore = create((set) => ({
+    isOpen: false,
+    type: 'bet',
+    period: 'daily',
+    currentLimit: 0,
+    requestedLimit: 0,
+    setIsOpen: (isOpen) => set({ isOpen }),
+    setType: (type) => set({ type }),
+    setPeriod: (period) => set({ period }),
+    setCurrentLimit: (currentLimit) => set({ currentLimit }),
+    setRequestedLimit: (requestedLimit) => set({ requestedLimit }),
+    openModal: (type, period, currentLimit, requestedLimit) => set({ type, period, currentLimit, requestedLimit, isOpen: true }),
+}));
+export const betDepositLimitStore = {
+    get isOpen() {
+        return useBetDepositLimitStore.getState().isOpen;
+    },
+    set isOpen(value) {
+        useBetDepositLimitStore.setState({ isOpen: value });
+    },
+    get type() {
+        return useBetDepositLimitStore.getState().type;
+    },
+    set type(value) {
+        useBetDepositLimitStore.setState({ type: value });
+    },
+    get period() {
+        return useBetDepositLimitStore.getState().period;
+    },
+    set period(value) {
+        useBetDepositLimitStore.setState({ period: value });
+    },
+    get currentLimit() {
+        return useBetDepositLimitStore.getState().currentLimit;
+    },
+    set currentLimit(value) {
+        useBetDepositLimitStore.setState({ currentLimit: value });
+    },
+    get requestedLimit() {
+        return useBetDepositLimitStore.getState().requestedLimit;
+    },
+    set requestedLimit(value) {
+        useBetDepositLimitStore.setState({ requestedLimit: value });
+    },
+    openModal(newType, newPeriod, currentLimit, requestedLimit) {
+        useBetDepositLimitStore
+            .getState()
+            .openModal(newType, newPeriod, currentLimit, requestedLimit);
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from './BetDepositLimitModal';
+export * from './betDepositLimitStore';

package/dist/components/BetDepositLimit/index.js

@@ -0,0 +1,2 @@
+export * from './BetDepositLimitModal.js';
+export * from './betDepositLimitStore.js';

package/dist/components/KYC/KYCDefault/PersonalInformation.js

@@ -161,6 +161,7 @@ export function PersonalInformation() {
                     verification: {
                         status: 'PENDING',
                     },
+                    verificationStatus: 'PENDING',
                 };
             });
             kyc.setDone(true);
@@ -193,6 +194,17 @@ export function PersonalInformation() {
                     status: 'PENDING',
                 };
             });
+            queryClient.setQueryData(getAccountQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    verification: {
+                        status: 'PENDING',
+                    },
+                    verificationStatus: 'PENDING',
+                };
+            });
             kyc.setDone(true);
             globalStore.kyc.setOpen(false);
             globalStore.kycAccountVerificationRequired.setOpen(false);

package/dist/components/KYC/KYCReminder.lazy.js

@@ -55,8 +55,9 @@ export function KYCReminder({ enablePendingKycReminder = false, ...props }) {
     const { data: account, isLoading: accountLoading } = useAccountQuery();
     const isPending = account?.verification?.status === 'PENDING' ||
         account?.verificationStatus === 'PENDING';
-    const isRejected = account?.verification?.status === 'REJECTED';
+    const isRejected = account?.verification?.status === 'REJECTED' && !isPending;
     const isNotVerified = !!account &&
+        !isPending &&
         (!account.verification ||
             account.verification === null ||
             account.verification.status === 'UNVERIFIED' ||
@@ -118,6 +119,7 @@ export function KYCReminder({ enablePendingKycReminder = false, ...props }) {
                                                         globalStore.account__mobile.setOpen(false);
                                                         router.push('/');
                                                     }, children: "Log Out" })] })) })] })), isNotVerified &&
+                                !isPending &&
                                 daysFromCreationToNow <= 3 &&
                                 daysFromCreationToNow > 1 &&
                                 !isVerificationLocked && (_jsxs(_Fragment, { children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full bg-bg-primary p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "JUST A FRIENDLY REMINDER" }), _jsxs("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: ["Please complete your KYC information within", ' ', _jsx("span", { className: "font-semibold text-[#FF0000]", children: "3 days" }), ' ', "to avoid temporary lock on your account."] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ??
@@ -145,6 +147,7 @@ export function KYCReminder({ enablePendingKycReminder = false, ...props }) {
                                                                 globalStore.account__mobile.setOpen(false);
                                                                 router.push('/');
                                                             }, children: "Log Out" })] })) })] })] })), (isNotVerified || isRejected) &&
+                                !isPending &&
                                 !isVerificationLocked &&
                                 !(daysFromCreationToNow <= 3 && daysFromCreationToNow > 1) && (_jsxs(_Fragment, { children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-bg-primary p-2", children: _jsx(FileCheck02Icon, { className: "text-[#FEDF89]" }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "Personal Verification" }), _jsxs("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: ["All new users are required to complete identity verification to access the full range of ", props.siteName, ' ', "services, including withdrawals."] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "mt-3xl space-y-lg", children: [_jsx(Button, { onClick: () => {
                                                                 api.setOpen(false);

package/dist/components/KYC/KycOpenOnHomeMount.js

@@ -8,6 +8,8 @@ export function KycOpenOnHomeMount({ isSkippable, bypassKycCheck, enablePendingK
     const setkycOpen = useGlobalStore((s) => s.kyc.setOpen);
     const setkycAccountVerificationRequired = useGlobalStore((s) => s.kycAccountVerificationRequired.setOpen);
     const isSignUpOpen = useGlobalStore((s) => s.signUp.open);
+    const isKycOpen = useGlobalStore((s) => s.kyc.open);
+    const isKycReminderOpen = useGlobalStore((s) => s.kycReminder.open);
     const { data: verification, isLoading: verificationLoading } = useMemberVerificationQuery();
     const { data: account, isLoading: accountLoading } = useAccountQuery();
     const isVerificationLocked = account?.status === 'VERIFICATION_LOCKED';
@@ -46,7 +48,13 @@ export function KycOpenOnHomeMount({ isSkippable, bypassKycCheck, enablePendingK
             if (isPending) {
                 setkycOpen(false);
                 setkycAccountVerificationRequired(false);
-                setkycReminderOpen(isVerificationLocked || enablePendingKycReminder);
+                setkycReminderOpen(isVerificationLocked ||
+                    enablePendingKycReminder ||
+                    useGlobalStore.getState().kycReminder.open);
+                return;
+            }
+            // User opened the KYC flow explicitly — don't override with the reminder.
+            if (isKycOpen && !isKycReminderOpen) {
                 return;
             }
             // Handle rejected verification status
@@ -94,6 +102,8 @@ export function KycOpenOnHomeMount({ isSkippable, bypassKycCheck, enablePendingK
         verificationLoading,
         accountLoading,
         isSignUpOpen,
+        isKycOpen,
+        isKycReminderOpen,
         isVerificationLocked,
         isPending,
         isRejected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",